thailife-react 0.0.13 → 0.0.15

package/dist/index.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('styled-components');
+var styled = require('@emotion/styled');
+var react = require('@emotion/react');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -1456,64 +1457,155 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
+const theme = {
+  colors: {
+    primary: "#007AC2",
+    error: "#ff1100",
+    dark: "#333333",
+    light: "#666666",
+    white: "#ffffff",
+    black: "#000000",
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827"
+    }
+  },
+  spacing: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    18: "4.5rem",
+    20: "5rem",
+    24: "6rem",
+    32: "8rem",
+    40: "10rem",
+    48: "12rem",
+    56: "14rem",
+    64: "16rem",
+    88: "22rem"
+  },
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem"
+  },
+  fontFamily: {
+    sans: ["Inter", "system-ui", "sans-serif"],
+    serif: ["Georgia", "Cambria", "Times New Roman", "Times", "serif"],
+    mono: ["Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+  },
+  transitions: {
+    fast: "150ms ease-in-out",
+    base: "300ms ease-in-out",
+    slow: "500ms ease-in-out"
+  }
+};
+
 const _excluded$6 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
-var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject0$6;
+var _templateObject$6;
 const StyledButton = styled.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  cursor: pointer;\n  transition: all ", ";\n  outline: none;\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+  var _theme$borderRadius;
   let {
-    theme
+    theme: theme$1
   } = _ref;
-  return theme.borderRadius.md;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$borderRadius = theme$1.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.md) || theme.borderRadius.md;
 }, _ref2 => {
+  var _theme$fontFamily;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.fontFamily.sans.join(", ");
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontFamily = theme$1.fontFamily) === null || _theme$fontFamily === void 0 || (_theme$fontFamily = _theme$fontFamily.sans) === null || _theme$fontFamily === void 0 ? void 0 : _theme$fontFamily.join(", ")) || theme.fontFamily.sans.join(", ");
 }, _ref3 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref3;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref4 => {
+  var _theme$colors;
   let {
-    theme
+    theme: theme$1
   } = _ref4;
-  return theme.colors.primary;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary) || theme.colors.primary;
 }, _ref5 => {
   let {
     variant,
     color,
-    theme
+    theme: theme$1
   } = _ref5;
+  const currentTheme = theme$1 || theme;
   if (variant === "contained") {
-    return styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        color: ", ";\n        &:hover:not(:disabled) {\n          background-color: ", "cc;\n        }\n      "])), theme.colors[color || "primary"], theme.colors.white, theme.colors[color || "primary"]);
+    return "\n        background-color: ".concat(currentTheme.colors[color || "primary"], ";\n        color: ").concat(currentTheme.colors.white, ";\n        &:hover:not(:disabled) {\n          background-color: ").concat(currentTheme.colors[color || "primary"], "cc;\n        }\n      ");
   }
   if (variant === "outlined") {
-    return styled.css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n        background-color: transparent;\n        border: 1px solid ", ";\n        color: ", ";\n        &:hover:not(:disabled) {\n          background-color: ", "1a;\n        }\n      "])), theme.colors[color || "primary"], theme.colors[color || "primary"], theme.colors[color || "primary"]);
+    return "\n        background-color: transparent;\n        border: 1px solid ".concat(currentTheme.colors[color || "primary"], ";\n        color: ").concat(currentTheme.colors[color || "primary"], ";\n        &:hover:not(:disabled) {\n          background-color: ").concat(currentTheme.colors[color || "primary"], "1a;\n        }\n      ");
   }
   if (variant === "link") {
-    return styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n        background-color: transparent;\n        color: ", ";\n        text-decoration: underline;\n        &:hover:not(:disabled) {\n          text-decoration: none;\n        }\n      "])), theme.colors[color || "primary"]);
+    return "\n        background-color: transparent;\n        color: ".concat(currentTheme.colors[color || "primary"], ";\n        text-decoration: underline;\n        &:hover:not(:disabled) {\n          text-decoration: none;\n        }\n      ");
   }
-  return styled.css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral([""])));
+  return "";
 }, _ref6 => {
   let {
     size,
-    theme
+    theme: theme$1
   } = _ref6;
+  const currentTheme = theme$1 || theme;
   if (size === "sm") {
-    return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
+    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[3], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
   }
   if (size === "md") {
-    return styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.sm);
+    return "\n        padding: ".concat(currentTheme.spacing[2], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
   }
   if (size === "lg") {
-    return styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[6], theme.fontSize.base);
+    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[6], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
   }
-  return styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral([""])));
+  return "";
 }, _ref7 => {
   let {
     fullWidth
   } = _ref7;
-  return fullWidth && styled.css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
 const Button = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
@@ -1543,100 +1635,115 @@ const Button = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
 Button.displayName = "Button";
 
 const _excluded$5 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject0$5;
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$5;
 const InputContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
   let {
     fullWidth
   } = _ref;
-  return fullWidth && styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const InputLabel = styled.label(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+const InputLabel = styled.label(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[1]) || theme.spacing[1];
 }, _ref3 => {
+  var _theme$fontSize;
   let {
-    theme
+    theme: theme$1
   } = _ref3;
-  return theme.fontSize.sm;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
 }, _ref4 => {
+  var _theme$colors;
   let {
-    theme
+    theme: theme$1
   } = _ref4;
-  return theme.colors.gray[700];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 || (_theme$colors = _theme$colors.gray) === null || _theme$colors === void 0 ? void 0 : _theme$colors[700]) || theme.colors.gray[700];
 });
-const StyledInput = styled.input(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  font-family: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
+const StyledInput = styled.input(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  font-family: ", ";\n  padding: ", " ", ";\n  font-size: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n"])), _ref5 => {
+  var _theme$colors2, _theme$colors3;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref5;
-  return hasError ? theme.colors.error : theme.colors.gray[300];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 || (_theme$colors3 = _theme$colors3.gray) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3[300]) || theme.colors.gray[300];
 }, _ref6 => {
+  var _theme$borderRadius;
   let {
-    theme
+    theme: theme$1
   } = _ref6;
-  return theme.borderRadius.md;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$borderRadius = theme$1.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.md) || theme.borderRadius.md;
 }, _ref7 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref7;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref8 => {
+  var _theme$fontFamily;
   let {
-    theme
+    theme: theme$1
   } = _ref8;
-  return theme.fontFamily.sans.join(", ");
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontFamily = theme$1.fontFamily) === null || _theme$fontFamily === void 0 || (_theme$fontFamily = _theme$fontFamily.sans) === null || _theme$fontFamily === void 0 ? void 0 : _theme$fontFamily.join(", ")) || theme.fontFamily.sans.join(", ");
 }, _ref9 => {
+  var _theme$spacing2;
   let {
-    theme,
-    hasError
+    theme: theme$1
   } = _ref9;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[2]) || theme.spacing[2];
 }, _ref0 => {
+  var _theme$spacing3;
   let {
-    theme
+    theme: theme$1
   } = _ref0;
-  return theme.colors.gray[50];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[4]) || theme.spacing[4];
 }, _ref1 => {
+  var _theme$fontSize2;
   let {
-    size,
-    theme
+    theme: theme$1
   } = _ref1;
-  if (size === "sm") {
-    return styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
-  }
-  if (size === "md") {
-    return styled.css(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.sm);
-  }
-  if (size === "lg") {
-    return styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
-  }
-  return styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral([""])));
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.sm) || theme.fontSize.sm;
 }, _ref10 => {
+  var _theme$colors4, _theme$colors5;
   let {
-    fullWidth
+    theme: theme$1,
+    hasError
   } = _ref10;
-  return fullWidth && styled.css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
-});
-const HelperText$5 = styled.p(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref11 => {
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.primary) || theme.colors.primary;
+}, _ref11 => {
+  var _theme$colors6;
   let {
-    theme
+    theme: theme$1
   } = _ref11;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 || (_theme$colors6 = _theme$colors6.gray) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6[50]) || theme.colors.gray[50];
 }, _ref12 => {
   let {
-    theme
+    fullWidth
   } = _ref12;
-  return theme.fontSize.xs;
-}, _ref13 => {
+  return fullWidth && "\n      width: 100%;\n    ";
+});
+const HelperText$5 = styled.p(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
+  var _theme$spacing4;
   let {
-    theme,
-    hasError
+    theme: theme$1
   } = _ref13;
-  return hasError ? theme.colors.error : theme.colors.gray[500];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing4 = theme$1.spacing) === null || _theme$spacing4 === void 0 ? void 0 : _theme$spacing4[1]) || theme.spacing[1];
+}, _ref14 => {
+  var _theme$fontSize3;
+  let {
+    theme: theme$1
+  } = _ref14;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize3 = theme$1.fontSize) === null || _theme$fontSize3 === void 0 ? void 0 : _theme$fontSize3.xs) || theme.fontSize.xs;
+}, _ref15 => {
+  var _theme$colors7, _theme$colors8;
+  let {
+    theme: theme$1,
+    hasError
+  } = _ref15;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 || (_theme$colors8 = _theme$colors8.gray) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8[500]) || theme.colors.gray[500];
 });
-const Input = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const Input = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
       className,
       type = "text",
@@ -1646,8 +1753,8 @@ const Input = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
       size = "md",
       fullWidth = false,
       id
-    } = _ref14,
-    props = _objectWithoutProperties(_ref14, _excluded$5);
+    } = _ref16,
+    props = _objectWithoutProperties(_ref16, _excluded$5);
   const inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
   return jsxRuntimeExports.jsxs(InputContainer, {
     fullWidth: fullWidth,
@@ -1656,7 +1763,6 @@ const Input = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
       children: label
     }), jsxRuntimeExports.jsx(StyledInput, _objectSpread2({
       type: type,
-      size: size,
       fullWidth: fullWidth,
       hasError: !!error,
       className: className,
@@ -1671,98 +1777,111 @@ const Input = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
 Input.displayName = "Input";
 
 const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
-var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject0$4;
+var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$4;
 const TextareaContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
   let {
     fullWidth
   } = _ref;
-  return fullWidth && styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const TextareaLabel = styled.label(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+const TextareaLabel = styled.label(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[1]) || theme.spacing[1];
 }, _ref3 => {
+  var _theme$fontSize;
   let {
-    theme
+    theme: theme$1
   } = _ref3;
-  return theme.fontSize.sm;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
 }, _ref4 => {
+  var _theme$colors;
   let {
-    theme
+    theme: theme$1
   } = _ref4;
-  return theme.colors.gray[700];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 || (_theme$colors = _theme$colors.gray) === null || _theme$colors === void 0 ? void 0 : _theme$colors[700]) || theme.colors.gray[700];
 });
-const StyledTextarea = styled.textarea(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  resize: vertical;\n  font-family: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
+const StyledTextarea = styled.textarea(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  resize: vertical;\n  font-family: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
+  var _theme$colors2, _theme$colors3;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref5;
-  return hasError ? theme.colors.error : theme.colors.gray[300];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 || (_theme$colors3 = _theme$colors3.gray) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3[300]) || theme.colors.gray[300];
 }, _ref6 => {
+  var _theme$borderRadius;
   let {
-    theme
+    theme: theme$1
   } = _ref6;
-  return theme.borderRadius.md;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$borderRadius = theme$1.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.md) || theme.borderRadius.md;
 }, _ref7 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref7;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref8 => {
+  var _theme$fontFamily;
   let {
-    theme
+    theme: theme$1
   } = _ref8;
-  return theme.fontFamily.sans.join(", ");
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontFamily = theme$1.fontFamily) === null || _theme$fontFamily === void 0 || (_theme$fontFamily = _theme$fontFamily.sans) === null || _theme$fontFamily === void 0 ? void 0 : _theme$fontFamily.join(", ")) || theme.fontFamily.sans.join(", ");
 }, _ref9 => {
+  var _theme$colors4, _theme$colors5;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref9;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.primary) || theme.colors.primary;
 }, _ref0 => {
+  var _theme$colors6;
   let {
-    theme
+    theme: theme$1
   } = _ref0;
-  return theme.colors.gray[50];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 || (_theme$colors6 = _theme$colors6.gray) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6[50]) || theme.colors.gray[50];
 }, _ref1 => {
   let {
     size,
-    theme
+    theme: theme$1
   } = _ref1;
+  const currentTheme = theme$1 || theme;
   if (size === "sm") {
-    return styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
+    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[3], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
   }
   if (size === "md") {
-    return styled.css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.sm);
+    return "\n        padding: ".concat(currentTheme.spacing[2], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
   }
   if (size === "lg") {
-    return styled.css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
+    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
   }
-  return styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral([""])));
+  return "";
 }, _ref10 => {
   let {
     fullWidth
   } = _ref10;
-  return fullWidth && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const HelperText$4 = styled.p(_templateObject0$4 || (_templateObject0$4 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref11 => {
+const HelperText$4 = styled.p(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref11 => {
+  var _theme$spacing2;
   let {
-    theme
+    theme: theme$1
   } = _ref11;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[1]) || theme.spacing[1];
 }, _ref12 => {
+  var _theme$fontSize2;
   let {
-    theme
+    theme: theme$1
   } = _ref12;
-  return theme.fontSize.xs;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
 }, _ref13 => {
+  var _theme$colors7, _theme$colors8;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref13;
-  return hasError ? theme.colors.error : theme.colors.gray[500];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 || (_theme$colors8 = _theme$colors8.gray) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8[500]) || theme.colors.gray[500];
 });
 const Textarea = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
@@ -1799,113 +1918,128 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
 Textarea.displayName = "Textarea";
 
 const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "accept", "multiple", "buttonText", "id"];
-var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject0$3, _templateObject1$3, _templateObject10$3, _templateObject11$2, _templateObject12$2;
+var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7, _templateObject8;
 const InputFileContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
   let {
     fullWidth
   } = _ref;
-  return fullWidth && styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const InputFileLabel = styled.label(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+const InputFileLabel = styled.label(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[1]) || theme.spacing[1];
 }, _ref3 => {
+  var _theme$fontSize;
   let {
-    theme
+    theme: theme$1
   } = _ref3;
-  return theme.fontSize.sm;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
 }, _ref4 => {
+  var _theme$colors;
   let {
-    theme
+    theme: theme$1
   } = _ref4;
-  return theme.colors.gray[700];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 || (_theme$colors = _theme$colors.gray) === null || _theme$colors === void 0 ? void 0 : _theme$colors[700]) || theme.colors.gray[700];
 });
-const InputFileWrapper = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const HiddenInput = styled.input(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n"])));
-const FileUploadArea = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n  border: 2px dashed ", ";\n  transition: all ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus-within {\n    border-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
+const InputFileWrapper = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const HiddenInput = styled.input(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n"])));
+const FileUploadArea = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  border: 2px dashed ", ";\n  transition: all ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus-within {\n    border-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
+  var _theme$colors2, _theme$colors3;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref5;
-  return hasError ? theme.colors.error : theme.colors.gray[300];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 || (_theme$colors3 = _theme$colors3.gray) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3[300]) || theme.colors.gray[300];
 }, _ref6 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref6;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref7 => {
+  var _theme$colors4, _theme$colors5;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref7;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.primary) || theme.colors.primary;
 }, _ref8 => {
+  var _theme$colors6, _theme$colors7;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref8;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7.primary) || theme.colors.primary;
 }, _ref9 => {
   let {
     size,
-    theme
+    theme: theme$1
   } = _ref9;
+  const currentTheme = theme$1 || theme;
   if (size === "sm") {
-    return styled.css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
+    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[3], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
   }
   if (size === "md") {
-    return styled.css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.base);
+    return "\n        padding: ".concat(currentTheme.spacing[2], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
   }
   if (size === "lg") {
-    return styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
+    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
   }
-  return styled.css(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral([""])));
+  return "";
 }, _ref0 => {
   let {
     fullWidth
   } = _ref0;
-  return fullWidth && styled.css(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const ButtonText = styled.span(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref1 => {
+const ButtonText = styled.span(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref1 => {
+  var _theme$colors8;
   let {
-    theme
+    theme: theme$1
   } = _ref1;
-  return theme.colors.gray[600];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 || (_theme$colors8 = _theme$colors8.gray) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8[600]) || theme.colors.gray[600];
 });
-const MultipleText = styled.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref10 => {
+const MultipleText = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref10 => {
+  var _theme$spacing2;
   let {
-    theme
+    theme: theme$1
   } = _ref10;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[1]) || theme.spacing[1];
 }, _ref11 => {
+  var _theme$fontSize2;
   let {
-    theme
+    theme: theme$1
   } = _ref11;
-  return theme.fontSize.xs;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
 }, _ref12 => {
+  var _theme$colors9;
   let {
-    theme
+    theme: theme$1
   } = _ref12;
-  return theme.colors.gray[500];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors9 = theme$1.colors) === null || _theme$colors9 === void 0 || (_theme$colors9 = _theme$colors9.gray) === null || _theme$colors9 === void 0 ? void 0 : _theme$colors9[500]) || theme.colors.gray[500];
 });
-const HelperText$3 = styled.p(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
+const HelperText$3 = styled.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
+  var _theme$spacing3;
   let {
-    theme
+    theme: theme$1
   } = _ref13;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[1]) || theme.spacing[1];
 }, _ref14 => {
+  var _theme$fontSize3;
   let {
-    theme
+    theme: theme$1
   } = _ref14;
-  return theme.fontSize.xs;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize3 = theme$1.fontSize) === null || _theme$fontSize3 === void 0 ? void 0 : _theme$fontSize3.xs) || theme.fontSize.xs;
 }, _ref15 => {
+  var _theme$colors0, _theme$colors1;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref15;
-  return hasError ? theme.colors.error : theme.colors.gray[500];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors0 = theme$1.colors) === null || _theme$colors0 === void 0 ? void 0 : _theme$colors0.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors1 = theme$1.colors) === null || _theme$colors1 === void 0 || (_theme$colors1 = _theme$colors1.gray) === null || _theme$colors1 === void 0 ? void 0 : _theme$colors1[500]) || theme.colors.gray[500];
 });
 const InputFile = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
@@ -1954,100 +2088,92 @@ const InputFile = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
 InputFile.displayName = "InputFile";
 
 const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1;
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2;
 const CheckboxContainer = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  ", "\n"])), _ref => {
   let {
     fullWidth
   } = _ref;
-  return fullWidth && styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const CheckboxWrapper = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
+const CheckboxWrapper = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.spacing[5];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[5]) || theme.spacing[5];
 });
-const StyledCheckbox = styled.input(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  border: 1px solid ", ";\n  transition: all ", ";\n  outline: none;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), _ref3 => {
+const StyledCheckbox = styled.input(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  border: 1px solid ", ";\n  transition: all ", ";\n  outline: none;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), _ref3 => {
+  var _theme$borderRadius;
   let {
-    theme
+    theme: theme$1
   } = _ref3;
-  return theme.borderRadius.md;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$borderRadius = theme$1.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.md) || theme.borderRadius.md;
 }, _ref4 => {
+  var _theme$colors, _theme$colors2;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref4;
-  return hasError ? theme.colors.error : theme.colors.gray[300];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 || (_theme$colors2 = _theme$colors2.gray) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2[300]) || theme.colors.gray[300];
 }, _ref5 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref5;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref6 => {
+  var _theme$colors3, _theme$colors4;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref6;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.primary) || theme.colors.primary;
 }, _ref7 => {
   let {
-    size,
-    theme
+    theme: theme$1
   } = _ref7;
-  if (size === "sm") {
-    return styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[4], theme.spacing[4]);
-  }
-  if (size === "md") {
-    return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[5], theme.spacing[5]);
-  }
-  if (size === "lg") {
-    return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[6], theme.spacing[6]);
-  }
-  return styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral([""])));
+  const currentTheme = theme$1 || theme;
+  return "\n      width: ".concat(currentTheme.spacing[5], ";\n      height: ").concat(currentTheme.spacing[5], ";\n    ");
 });
-const LabelContainer$1 = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref8 => {
+const LabelContainer$1 = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref8 => {
+  var _theme$spacing2;
   let {
-    theme
+    theme: theme$1
   } = _ref8;
-  return theme.spacing[3];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[3]) || theme.spacing[3];
 });
-const CheckboxLabel = styled.label(_templateObject0$2 || (_templateObject0$2 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n\n  ", "\n"])), _ref9 => {
+const CheckboxLabel = styled.label(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  font-size: ", ";\n"])), _ref9 => {
+  var _theme$colors5;
   let {
-    theme
+    theme: theme$1
   } = _ref9;
-  return theme.colors.gray[700];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 || (_theme$colors5 = _theme$colors5.gray) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5[700]) || theme.colors.gray[700];
 }, _ref0 => {
+  var _theme$fontSize;
   let {
-    size,
-    theme
+    theme: theme$1
   } = _ref0;
-  if (size === "sm") {
-    return styled.css(_templateObject1$2 || (_templateObject1$2 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
-  }
-  if (size === "md") {
-    return styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
-  }
-  if (size === "lg") {
-    return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.base);
-  }
-  return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral([""])));
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
 });
-const HelperText$2 = styled.p(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref1 => {
+const HelperText$2 = styled.p(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref1 => {
+  var _theme$spacing3;
   let {
-    theme
+    theme: theme$1
   } = _ref1;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[1]) || theme.spacing[1];
 }, _ref10 => {
+  var _theme$fontSize2;
   let {
-    theme
+    theme: theme$1
   } = _ref10;
-  return theme.fontSize.xs;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
 }, _ref11 => {
+  var _theme$colors6, _theme$colors7;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref11;
-  return hasError ? theme.colors.error : theme.colors.gray[500];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 || (_theme$colors7 = _theme$colors7.gray) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7[500]) || theme.colors.gray[500];
 });
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
@@ -2072,7 +2198,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     children: [jsxRuntimeExports.jsx(CheckboxWrapper, {
       children: jsxRuntimeExports.jsx(StyledCheckbox, _objectSpread2({
         type: "checkbox",
-        size: size,
         hasError: !!error,
         className: className,
         ref: ref,
@@ -2081,7 +2206,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     }), jsxRuntimeExports.jsxs(LabelContainer$1, {
       children: [label && jsxRuntimeExports.jsx(CheckboxLabel, {
         htmlFor: checkboxId,
-        size: size,
         children: label
       }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$2, {
         hasError: !!error,
@@ -2093,97 +2217,94 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
 Checkbox.displayName = "Checkbox";
 
 const _excluded$1 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1;
 const RadioContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  ", "\n"])), _ref => {
   let {
     fullWidth
   } = _ref;
-  return fullWidth && styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const RadioWrapper = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
+const RadioWrapper = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.spacing[5];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[5]) || theme.spacing[5];
 });
-const StyledRadio = styled.input(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n  transition: all ", ";\n  outline: none;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), _ref3 => {
+const StyledRadio = styled.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n  transition: all ", ";\n  outline: none;\n  width: ", ";\n  height: ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), _ref3 => {
+  var _theme$colors, _theme$colors2;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref3;
-  return hasError ? theme.colors.error : theme.colors.gray[300];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 || (_theme$colors2 = _theme$colors2.gray) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2[300]) || theme.colors.gray[300];
 }, _ref4 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref4;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref5 => {
+  var _theme$spacing2;
   let {
-    theme,
-    hasError
+    theme: theme$1
   } = _ref5;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[5]) || theme.spacing[5];
 }, _ref6 => {
+  var _theme$spacing3;
   let {
-    size,
-    theme
+    theme: theme$1
   } = _ref6;
-  if (size === "sm") {
-    return styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[4], theme.spacing[4]);
-  }
-  if (size === "md") {
-    return styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[5], theme.spacing[5]);
-  }
-  if (size === "lg") {
-    return styled.css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[6], theme.spacing[6]);
-  }
-  return styled.css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral([""])));
-});
-const LabelContainer = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref7 => {
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[5]) || theme.spacing[5];
+}, _ref7 => {
+  var _theme$colors3, _theme$colors4;
   let {
-    theme
+    theme: theme$1,
+    hasError
   } = _ref7;
-  return theme.spacing[3];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.primary) || theme.colors.primary;
 });
-const RadioLabel = styled.label(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n\n  ", "\n"])), _ref8 => {
+const LabelContainer = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref8 => {
+  var _theme$spacing4;
   let {
-    theme
+    theme: theme$1
   } = _ref8;
-  return theme.colors.gray[700];
-}, _ref9 => {
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing4 = theme$1.spacing) === null || _theme$spacing4 === void 0 ? void 0 : _theme$spacing4[3]) || theme.spacing[3];
+});
+const RadioLabel = styled.label(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  font-size: ", ";\n"])), _ref9 => {
+  var _theme$colors5;
   let {
-    size,
-    theme
+    theme: theme$1
   } = _ref9;
-  if (size === "sm") {
-    return styled.css(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
-  }
-  if (size === "md") {
-    return styled.css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
-  }
-  if (size === "lg") {
-    return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.base);
-  }
-  return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
-});
-const HelperText$1 = styled.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref0 => {
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 || (_theme$colors5 = _theme$colors5.gray) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5[700]) || theme.colors.gray[700];
+}, _ref0 => {
+  var _theme$fontSize;
   let {
-    theme
+    theme: theme$1
   } = _ref0;
-  return theme.spacing[1];
-}, _ref1 => {
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
+});
+const HelperText$1 = styled.p(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref1 => {
+  var _theme$spacing5;
   let {
-    theme
+    theme: theme$1
   } = _ref1;
-  return theme.fontSize.xs;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing5 = theme$1.spacing) === null || _theme$spacing5 === void 0 ? void 0 : _theme$spacing5[1]) || theme.spacing[1];
 }, _ref10 => {
+  var _theme$fontSize2;
   let {
-    theme,
-    hasError
+    theme: theme$1
   } = _ref10;
-  return hasError ? theme.colors.error : theme.colors.gray[500];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
+}, _ref11 => {
+  var _theme$colors6, _theme$colors7;
+  let {
+    theme: theme$1,
+    hasError
+  } = _ref11;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 || (_theme$colors7 = _theme$colors7.gray) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7[500]) || theme.colors.gray[500];
 });
-const Radio = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const Radio = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
       className,
       label,
@@ -2192,15 +2313,14 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
       size = "md",
       fullWidth = false,
       id
-    } = _ref11,
-    props = _objectWithoutProperties(_ref11, _excluded$1);
+    } = _ref12,
+    props = _objectWithoutProperties(_ref12, _excluded$1);
   const radioId = id || "radio-".concat(Math.random().toString(36).substr(2, 9));
   return jsxRuntimeExports.jsxs(RadioContainer, {
     fullWidth: fullWidth,
     children: [jsxRuntimeExports.jsx(RadioWrapper, {
       children: jsxRuntimeExports.jsx(StyledRadio, _objectSpread2({
         type: "radio",
-        size: size,
         hasError: !!error,
         className: className,
         ref: ref,
@@ -2209,7 +2329,6 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     }), jsxRuntimeExports.jsxs(LabelContainer, {
       children: [label && jsxRuntimeExports.jsx(RadioLabel, {
         htmlFor: radioId,
-        size: size,
         children: label
       }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$1, {
         hasError: !!error,
@@ -2221,112 +2340,129 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
 Radio.displayName = "Radio";
 
 const _excluded = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 const SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
   let {
     fullWidth
   } = _ref;
-  return fullWidth && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+  return fullWidth && "\n      width: 100%;\n    ";
 });
-const SelectLabel = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+const SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
   let {
-    theme
+    theme: theme$1
   } = _ref2;
-  return theme.spacing[1];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[1]) || theme.spacing[1];
 }, _ref3 => {
+  var _theme$fontSize;
   let {
-    theme
+    theme: theme$1
   } = _ref3;
-  return theme.fontSize.sm;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
 }, _ref4 => {
+  var _theme$colors;
   let {
-    theme
+    theme: theme$1
   } = _ref4;
-  return theme.colors.gray[700];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 || (_theme$colors = _theme$colors.gray) === null || _theme$colors === void 0 ? void 0 : _theme$colors[700]) || theme.colors.gray[700];
 });
-const SelectWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const StyledSelect = styled.select(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  appearance: none;\n  background-color: ", ";\n  font-family: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
+const SelectWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const StyledSelect = styled.select(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  appearance: none;\n  background-color: ", ";\n  font-family: ", ";\n  padding: ", " ", ";\n  font-size: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n"])), _ref5 => {
+  var _theme$colors2, _theme$colors3;
   let {
-    theme,
+    theme: theme$1,
     hasError
   } = _ref5;
-  return hasError ? theme.colors.error : theme.colors.gray[300];
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 || (_theme$colors3 = _theme$colors3.gray) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3[300]) || theme.colors.gray[300];
 }, _ref6 => {
+  var _theme$borderRadius;
   let {
-    theme
+    theme: theme$1
   } = _ref6;
-  return theme.borderRadius.md;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$borderRadius = theme$1.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.md) || theme.borderRadius.md;
 }, _ref7 => {
+  var _theme$transitions;
   let {
-    theme
+    theme: theme$1
   } = _ref7;
-  return theme.transitions.base;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
 }, _ref8 => {
+  var _theme$colors4;
   let {
-    theme
+    theme: theme$1
   } = _ref8;
-  return theme.colors.white;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.white) || theme.colors.white;
 }, _ref9 => {
+  var _theme$fontFamily;
   let {
-    theme
+    theme: theme$1
   } = _ref9;
-  return theme.fontFamily.sans.join(", ");
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontFamily = theme$1.fontFamily) === null || _theme$fontFamily === void 0 || (_theme$fontFamily = _theme$fontFamily.sans) === null || _theme$fontFamily === void 0 ? void 0 : _theme$fontFamily.join(", ")) || theme.fontFamily.sans.join(", ");
 }, _ref0 => {
+  var _theme$spacing2;
   let {
-    theme,
-    hasError
+    theme: theme$1
   } = _ref0;
-  return hasError ? theme.colors.error : theme.colors.primary;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[2]) || theme.spacing[2];
 }, _ref1 => {
+  var _theme$spacing3;
   let {
-    theme
+    theme: theme$1
   } = _ref1;
-  return theme.colors.gray[50];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[4]) || theme.spacing[4];
 }, _ref10 => {
+  var _theme$fontSize2;
   let {
-    size,
-    theme
+    theme: theme$1
   } = _ref10;
-  if (size === "sm") {
-    return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
-  }
-  if (size === "md") {
-    return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.sm);
-  }
-  if (size === "lg") {
-    return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
-  }
-  return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])));
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.sm) || theme.fontSize.sm;
 }, _ref11 => {
+  var _theme$colors5, _theme$colors6;
   let {
-    fullWidth
+    theme: theme$1,
+    hasError
   } = _ref11;
-  return fullWidth && styled.css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
-});
-const SelectIcon = styled.div(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding-right: ", ";\n  pointer-events: none;\n"])), _ref12 => {
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.primary) || theme.colors.primary;
+}, _ref12 => {
+  var _theme$colors7;
   let {
-    theme
+    theme: theme$1
   } = _ref12;
-  return theme.spacing[3];
-});
-const HelperText = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
+  return (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 || (_theme$colors7 = _theme$colors7.gray) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7[50]) || theme.colors.gray[50];
+}, _ref13 => {
   let {
-    theme
+    fullWidth
   } = _ref13;
-  return theme.spacing[1];
-}, _ref14 => {
+  return fullWidth && "\n      width: 100%;\n    ";
+});
+const SelectIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding-right: ", ";\n  pointer-events: none;\n"])), _ref14 => {
+  var _theme$spacing4;
   let {
-    theme
+    theme: theme$1
   } = _ref14;
-  return theme.fontSize.xs;
-}, _ref15 => {
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing4 = theme$1.spacing) === null || _theme$spacing4 === void 0 ? void 0 : _theme$spacing4[3]) || theme.spacing[3];
+});
+const HelperText = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref15 => {
+  var _theme$spacing5;
   let {
-    theme,
-    hasError
+    theme: theme$1
   } = _ref15;
-  return hasError ? theme.colors.error : theme.colors.gray[500];
+  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing5 = theme$1.spacing) === null || _theme$spacing5 === void 0 ? void 0 : _theme$spacing5[1]) || theme.spacing[1];
+}, _ref16 => {
+  var _theme$fontSize3;
+  let {
+    theme: theme$1
+  } = _ref16;
+  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize3 = theme$1.fontSize) === null || _theme$fontSize3 === void 0 ? void 0 : _theme$fontSize3.xs) || theme.fontSize.xs;
+}, _ref17 => {
+  var _theme$colors8, _theme$colors9;
+  let {
+    theme: theme$1,
+    hasError
+  } = _ref17;
+  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors9 = theme$1.colors) === null || _theme$colors9 === void 0 || (_theme$colors9 = _theme$colors9.gray) === null || _theme$colors9 === void 0 ? void 0 : _theme$colors9[500]) || theme.colors.gray[500];
 });
-const Select = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
       className,
       label,
@@ -2337,8 +2473,8 @@ const Select = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
       options,
       placeholder,
       id
-    } = _ref16,
-    props = _objectWithoutProperties(_ref16, _excluded);
+    } = _ref18,
+    props = _objectWithoutProperties(_ref18, _excluded);
   const selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
   return jsxRuntimeExports.jsxs(SelectContainer, {
     fullWidth: fullWidth,
@@ -2347,7 +2483,6 @@ const Select = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
       children: label
     }), jsxRuntimeExports.jsxs(SelectWrapper, {
       children: [jsxRuntimeExports.jsxs(StyledSelect, _objectSpread2(_objectSpread2({
-        size: size,
         fullWidth: fullWidth,
         hasError: !!error,
         className: className,
@@ -2389,96 +2524,11 @@ const Select = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
 });
 Select.displayName = "Select";
 
-const theme = {
-  colors: {
-    primary: "#007AC2",
-    error: "#ff1100",
-    dark: "#333333",
-    light: "#666666",
-    white: "#ffffff",
-    black: "#000000",
-    gray: {
-      50: "#f9fafb",
-      100: "#f3f4f6",
-      200: "#e5e7eb",
-      300: "#d1d5db",
-      400: "#9ca3af",
-      500: "#6b7280",
-      600: "#4b5563",
-      700: "#374151",
-      800: "#1f2937",
-      900: "#111827"
-    }
-  },
-  spacing: {
-    0: "0",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    8: "2rem",
-    10: "2.5rem",
-    12: "3rem",
-    16: "4rem",
-    18: "4.5rem",
-    20: "5rem",
-    24: "6rem",
-    32: "8rem",
-    40: "10rem",
-    48: "12rem",
-    56: "14rem",
-    64: "16rem",
-    88: "22rem"
-  },
-  fontSize: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    base: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem"
-  },
-  fontFamily: {
-    sans: ["Inter", "system-ui", "sans-serif"],
-    serif: ["Georgia", "Cambria", "Times New Roman", "Times", "serif"],
-    mono: ["Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
-  },
-  borderRadius: {
-    none: "0",
-    sm: "0.125rem",
-    base: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    full: "9999px"
-  },
-  shadows: {
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
-  },
-  transitions: {
-    fast: "150ms ease-in-out",
-    base: "300ms ease-in-out",
-    slow: "500ms ease-in-out"
-  }
-};
-
 const ThemeProvider = _ref => {
   let {
     children
   } = _ref;
-  return jsxRuntimeExports.jsx(styled.ThemeProvider, {
+  return jsxRuntimeExports.jsx(react.ThemeProvider, {
     theme: theme,
     children: children
   });