2 files changed, 123 insertions, 0 deletions
diff --git a/components/utils/inputElementStyle.tsx b/components/utils/inputElementStyle.tsx
new file mode 100644
index 0000000..c784e85
--- /dev/null
+++ b/components/utils/inputElementStyle.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default {
+  backgroundColor: '#fff',
+  border: '1px solid #ced4da',
+  padding: '0.375rem 0.75rem',
+  width: '100%',
+  borderRadius: '0.25rem',
+  resize: 'vertical',
+  fontFamily: 'inherit',
+  margin: '0',
+  display: 'block',
+  fontSize: '1em',
+  boxSizing: 'border-box',
+  lineHeight: '1.5rem',
+} as React.CSSProperties;
diff --git a/components/utils/systemProps.tsx b/components/utils/systemProps.tsx
new file mode 100644
index 0000000..8fc0317
--- /dev/null
+++ b/components/utils/systemProps.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+export type SystemProps = {
+  // Margin
+  mt?: number;
+  mb?: number;
+  ml?: number;
+  mr?: number;
+  mx?: number;
+  my?: number;
+  m?: number;
+
+  // Padding
+  pt?: number;
+  pb?: number;
+  pl?: number;
+  pr?: number;
+  px?: number;
+  py?: number;
+  p?: number;
+
+  // Arbitrary style
+  sx?: React.CSSProperties;
+};
+
+const calculateStyleValue = (multiplier: number, spacer: number = 1): string => {
+  return `${multiplier * spacer}em`;
+};
+
+const getSystemStyle = (
+  systemProps: SystemProps,
+  userStyle: React.CSSProperties = {}
+): React.CSSProperties => {
+  const spacer = 1; // 1em
+
+  let style: React.CSSProperties = {};
+
+  // Margin
+  const { mt, mb, ml, mr, mx, my, m } = systemProps;
+
+  if (m !== undefined) {
+    const value = calculateStyleValue(m, spacer);
+    style.marginTop = value;
+    style.marginBottom = value;
+    style.marginLeft = value;
+    style.marginRight = value;
+  }
+
+  if (mx !== undefined) {
+    const value = calculateStyleValue(mx, spacer);
+    style.marginLeft = value;
+    style.marginRight = value;
+  }
+
+  if (my !== undefined) {
+    const value = calculateStyleValue(my, spacer);
+    style.marginTop = value;
+    style.marginBottom = value;
+  }
+
+  if (mt !== undefined) style.marginTop = calculateStyleValue(mt, spacer);
+  if (mb !== undefined) style.marginBottom = calculateStyleValue(mb, spacer);
+  if (ml !== undefined) style.marginLeft = calculateStyleValue(ml, spacer);
+  if (mr !== undefined) style.marginRight = calculateStyleValue(mr, spacer);
+
+  // Padding
+  const { pt, pb, pl, pr, px, py, p } = systemProps;
+
+  if (p !== undefined) {
+    const value = calculateStyleValue(p, spacer);
+    style.paddingTop = value;
+    style.paddingBottom = value;
+    style.paddingLeft = value;
+    style.paddingRight = value;
+  }
+
+  if (px !== undefined) {
+    const value = calculateStyleValue(px, spacer);
+    style.paddingLeft = value;
+    style.paddingRight = value;
+  }
+
+  if (py !== undefined) {
+    const value = calculateStyleValue(py, spacer);
+    style.paddingTop = value;
+    style.paddingBottom = value;
+  }
+
+  if (pt !== undefined) style.paddingTop = calculateStyleValue(pt, spacer);
+  if (pb !== undefined) style.paddingBottom = calculateStyleValue(pb, spacer);
+  if (pl !== undefined) style.paddingLeft = calculateStyleValue(pl, spacer);
+  if (pr !== undefined) style.paddingRight = calculateStyleValue(pr, spacer);
+
+  // Merge with arbitrary styles (sx)
+  if (systemProps.sx) {
+    style = { ...style, ...systemProps.sx };
+  }
+
+  // Override with user-defined style
+  style = { ...style, ...userStyle };
+
+  return style;
+};
+
+export {
+  getSystemStyle
+};