thailife-react 0.0.12 → 0.0.14

package/dist/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var styled = require('styled-components');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -72,6 +73,13 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -1448,21 +1456,157 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-/**
- * Utility function to merge Tailwind CSS classes
- * Uses clsx for conditional classes and basic merging
- */
-function cn() {
-  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
-    inputs[_key] = arguments[_key];
+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"
   }
-  return clsx(inputs);
-}
+};
 
 const _excluded$6 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
-const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject0$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$1
+  } = _ref;
+  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$1
+  } = _ref2;
+  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$1
+  } = _ref3;
+  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$1
+  } = _ref4;
+  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$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      "])), currentTheme.colors[color || "primary"], currentTheme.colors.white, currentTheme.colors[color || "primary"]);
+  }
+  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      "])), currentTheme.colors[color || "primary"], currentTheme.colors[color || "primary"], currentTheme.colors[color || "primary"]);
+  }
+  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      "])), currentTheme.colors[color || "primary"]);
+  }
+  return styled.css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral([""])));
+}, _ref6 => {
+  let {
+    size,
+    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      "])), currentTheme.spacing[3], currentTheme.spacing[3], currentTheme.fontSize.sm);
+  }
+  if (size === "md") {
+    return styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), currentTheme.spacing[2], currentTheme.spacing[4], currentTheme.fontSize.sm);
+  }
+  if (size === "lg") {
+    return styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), currentTheme.spacing[3], currentTheme.spacing[6], currentTheme.fontSize.base);
+  }
+  return styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral([""])));
+}, _ref7 => {
+  let {
+    fullWidth
+  } = _ref7;
+  return fullWidth && styled.css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+});
+const Button = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
       className,
       color = "primary",
@@ -1472,38 +1616,17 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       loading = false,
       disabled,
       children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  const baseClasses = cn(className, "btn transition-all duration-300 flex items-center justify-center");
-  const variants = {
-    contained: {
-      primary: "bg-primary hover:bg-primary/80 text-white",
-      error: "bg-error hover:bg-error/80 text-white",
-      dark: "bg-dark hover:bg-dark/80 text-white",
-      light: "bg-light hover:bg-light/80 text-white"
-    },
-    outlined: {
-      primary: "border border-primary text-primary hover:bg-primary/10",
-      error: "border border-error text-error hover:bg-error/10",
-      dark: "border border-dark text-dark hover:bg-dark/10",
-      light: "border border-light text-light hover:bg-light/10"
-    },
-    link: {
-      primary: "text-primary underline",
-      error: "text-error underline",
-      dark: "text-dark underline",
-      light: "text-light underline"
-    }
-  };
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-sm",
-    lg: "px-6 py-3 text-base"
-  };
-  return jsxRuntimeExports.jsx("button", _objectSpread2(_objectSpread2({
-    className: cn(baseClasses, variants[variant][color], sizes[size], fullWidth && "w-full", (disabled || loading) && "opacity-50 cursor-not-allowed", className),
-    ref: ref,
-    disabled: disabled || loading
+    } = _ref8,
+    props = _objectWithoutProperties(_ref8, _excluded$6);
+  return jsxRuntimeExports.jsx(StyledButton, _objectSpread2(_objectSpread2({
+    className: className,
+    color: color,
+    variant: variant,
+    size: size,
+    fullWidth: fullWidth,
+    loading: loading,
+    disabled: disabled || loading,
+    ref: ref
   }, props), {}, {
     children: children
   }));
@@ -1511,7 +1634,113 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Button.displayName = "Button";
 
 const _excluded$5 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
-const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject0$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    "])));
+});
+const InputLabel = styled.label(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  var _theme$spacing;
+  let {
+    theme: theme$1
+  } = _ref2;
+  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$1
+  } = _ref3;
+  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$1
+  } = _ref4;
+  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 => {
+  var _theme$colors2, _theme$colors3;
+  let {
+    theme: theme$1,
+    hasError
+  } = _ref5;
+  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$1
+  } = _ref6;
+  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$1
+  } = _ref7;
+  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$1
+  } = _ref8;
+  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$1,
+    hasError
+  } = _ref9;
+  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$1
+  } = _ref0;
+  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$1
+  } = _ref1;
+  const currentTheme = theme$1 || theme;
+  if (size === "sm") {
+    return styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), currentTheme.spacing[3], currentTheme.spacing[3], currentTheme.fontSize.sm);
+  }
+  if (size === "md") {
+    return styled.css(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), currentTheme.spacing[2], currentTheme.spacing[4], currentTheme.fontSize.sm);
+  }
+  if (size === "lg") {
+    return styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), currentTheme.spacing[3], currentTheme.spacing[4], currentTheme.fontSize.base);
+  }
+  return styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral([""])));
+}, _ref10 => {
+  let {
+    fullWidth
+  } = _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 => {
+  var _theme$spacing2;
+  let {
+    theme: theme$1
+  } = _ref11;
+  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$1
+  } = _ref12;
+  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$1,
+    hasError
+  } = _ref13;
+  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) => {
   let {
       className,
       type = "text",
@@ -1521,28 +1750,24 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size = "md",
       fullWidth = false,
       id
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    } = _ref14,
+    props = _objectWithoutProperties(_ref14, _excluded$5);
   const inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-sm",
-    lg: "px-4 py-3 text-base"
-  };
-  const baseClasses = cn("border transition-colors focus:outline-none focus:border-transparent", error ? "border-red-500 focus:ring-red-500" : "border-secondary focus:border-primary", "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-secondary-50", sizes[size], fullWidth && "w-full", className);
-  return jsxRuntimeExports.jsxs("div", {
-    className: cn("flex flex-col", fullWidth && "w-full"),
-    children: [label && jsxRuntimeExports.jsx("label", {
+  return jsxRuntimeExports.jsxs(InputContainer, {
+    fullWidth: fullWidth,
+    children: [label && jsxRuntimeExports.jsx(InputLabel, {
       htmlFor: inputId,
-      className: "mb-1 text-sm font-medium text-secondary-700",
       children: label
-    }), jsxRuntimeExports.jsx("input", _objectSpread2({
+    }), jsxRuntimeExports.jsx(StyledInput, _objectSpread2({
       type: type,
-      className: baseClasses,
+      size: size,
+      fullWidth: fullWidth,
+      hasError: !!error,
+      className: className,
       ref: ref,
       id: inputId
-    }, props)), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: cn("mt-1 text-xs", error ? "text-red-600" : "text-secondary-500"),
+    }, props)), (error || helperText) && jsxRuntimeExports.jsx(HelperText$5, {
+      hasError: !!error,
       children: error || helperText
     })]
   });
@@ -1550,7 +1775,100 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Input.displayName = "Input";
 
 const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
-const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject0$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    "])));
+});
+const TextareaLabel = styled.label(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing[1];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSize.sm;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return 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 => {
+  let {
+    theme,
+    hasError
+  } = _ref5;
+  return hasError ? theme.colors.error : theme.colors.gray[300];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.borderRadius.md;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.transitions.base;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.fontFamily.sans.join(", ");
+}, _ref9 => {
+  let {
+    theme,
+    hasError
+  } = _ref9;
+  return hasError ? theme.colors.error : theme.colors.primary;
+}, _ref0 => {
+  let {
+    theme
+  } = _ref0;
+  return theme.colors.gray[50];
+}, _ref1 => {
+  let {
+    size,
+    theme
+  } = _ref1;
+  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);
+  }
+  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);
+  }
+  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 styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral([""])));
+}, _ref10 => {
+  let {
+    fullWidth
+  } = _ref10;
+  return fullWidth && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+});
+const HelperText$4 = styled.p(_templateObject0$4 || (_templateObject0$4 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.spacing[1];
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontSize.xs;
+}, _ref13 => {
+  let {
+    theme,
+    hasError
+  } = _ref13;
+  return hasError ? theme.colors.error : theme.colors.gray[500];
+});
+const Textarea = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
       className,
       label,
@@ -1560,28 +1878,24 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       fullWidth = false,
       rows = 3,
       id
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    } = _ref14,
+    props = _objectWithoutProperties(_ref14, _excluded$4);
   const textareaId = id || "textarea-".concat(Math.random().toString(36).substr(2, 9));
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-sm",
-    lg: "px-4 py-3 text-base"
-  };
-  const baseClasses = cn("border transition-colors focus:outline-none focus:border-transparent resize-vertical", error ? "border-red-500 focus:ring-red-500" : "border-secondary focus:border-primary", "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-secondary-50", sizes[size], fullWidth && "w-full", className);
-  return jsxRuntimeExports.jsxs("div", {
-    className: cn("flex flex-col", fullWidth && "w-full"),
-    children: [label && jsxRuntimeExports.jsx("label", {
+  return jsxRuntimeExports.jsxs(TextareaContainer, {
+    fullWidth: fullWidth,
+    children: [label && jsxRuntimeExports.jsx(TextareaLabel, {
       htmlFor: textareaId,
-      className: "mb-1 text-sm font-medium text-secondary-700",
       children: label
-    }), jsxRuntimeExports.jsx("textarea", _objectSpread2({
-      className: baseClasses,
+    }), jsxRuntimeExports.jsx(StyledTextarea, _objectSpread2({
+      size: size,
+      fullWidth: fullWidth,
+      hasError: !!error,
+      className: className,
       ref: ref,
       id: textareaId,
       rows: rows
-    }, props)), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: cn("mt-1 text-xs", error ? "text-red-600" : "text-secondary-500"),
+    }, props)), (error || helperText) && jsxRuntimeExports.jsx(HelperText$4, {
+      hasError: !!error,
       children: error || helperText
     })]
   });
@@ -1589,7 +1903,115 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Textarea.displayName = "Textarea";
 
 const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "accept", "multiple", "buttonText", "id"];
-const InputFile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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;
+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    "])));
+});
+const InputFileLabel = styled.label(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing[1];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSize.sm;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return 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 => {
+  let {
+    theme,
+    hasError
+  } = _ref5;
+  return hasError ? theme.colors.error : theme.colors.gray[300];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.transitions.base;
+}, _ref7 => {
+  let {
+    theme,
+    hasError
+  } = _ref7;
+  return hasError ? theme.colors.error : theme.colors.primary;
+}, _ref8 => {
+  let {
+    theme,
+    hasError
+  } = _ref8;
+  return hasError ? theme.colors.error : theme.colors.primary;
+}, _ref9 => {
+  let {
+    size,
+    theme
+  } = _ref9;
+  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);
+  }
+  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);
+  }
+  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 styled.css(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral([""])));
+}, _ref0 => {
+  let {
+    fullWidth
+  } = _ref0;
+  return fullWidth && styled.css(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+});
+const ButtonText = styled.span(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref1 => {
+  let {
+    theme
+  } = _ref1;
+  return theme.colors.gray[600];
+});
+const MultipleText = styled.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.spacing[1];
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.fontSize.xs;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.gray[500];
+});
+const HelperText$3 = styled.p(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.spacing[1];
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.fontSize.xs;
+}, _ref15 => {
+  let {
+    theme,
+    hasError
+  } = _ref15;
+  return hasError ? theme.colors.error : theme.colors.gray[500];
+});
+const InputFile = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
       className,
       label,
@@ -1601,42 +2023,34 @@ const InputFile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       multiple = false,
       buttonText = "Choose File",
       id
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    } = _ref16,
+    props = _objectWithoutProperties(_ref16, _excluded$3);
   const inputId = id || "file-input-".concat(Math.random().toString(36).substr(2, 9));
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-sm",
-    lg: "px-4 py-3 text-base"
-  };
-  const baseClasses = cn("border-2 border-dashed transition-colors focus:outline-none focus:border-transparent cursor-pointer", error ? "border-red-500 focus:ring-red-500 hover:border-red-400" : "border-secondary focus:border-primary hover:border-primary/60", "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-secondary-50", sizes[size], fullWidth && "w-full", className);
-  return jsxRuntimeExports.jsxs("div", {
-    className: cn("flex flex-col", fullWidth && "w-full"),
-    children: [label && jsxRuntimeExports.jsx("label", {
+  return jsxRuntimeExports.jsxs(InputFileContainer, {
+    fullWidth: fullWidth,
+    children: [label && jsxRuntimeExports.jsx(InputFileLabel, {
       htmlFor: inputId,
-      className: "mb-1 text-sm font-medium text-secondary-700",
       children: label
-    }), jsxRuntimeExports.jsxs("div", {
-      className: "relative",
-      children: [jsxRuntimeExports.jsx("input", _objectSpread2({
+    }), jsxRuntimeExports.jsxs(InputFileWrapper, {
+      children: [jsxRuntimeExports.jsx(HiddenInput, _objectSpread2({
         type: "file",
-        className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
         ref: ref,
         id: inputId,
         accept: accept,
         multiple: multiple
-      }, props)), jsxRuntimeExports.jsxs("div", {
-        className: cn(baseClasses, "flex items-center justify-center"),
-        children: [jsxRuntimeExports.jsx("span", {
-          className: "text-secondary-600",
+      }, props)), jsxRuntimeExports.jsxs(FileUploadArea, {
+        size: size,
+        fullWidth: fullWidth,
+        hasError: !!error,
+        className: className,
+        children: [jsxRuntimeExports.jsx(ButtonText, {
           children: buttonText
-        }), multiple && jsxRuntimeExports.jsx("span", {
-          className: "ml-1 text-xs text-secondary-500",
+        }), multiple && jsxRuntimeExports.jsx(MultipleText, {
           children: "(Multiple)"
         })]
       })]
-    }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: cn("mt-1 text-xs", error ? "text-red-600" : "text-secondary-500"),
+    }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$3, {
+      hasError: !!error,
       children: error || helperText
     })]
   });
@@ -1644,7 +2058,102 @@ const InputFile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 InputFile.displayName = "InputFile";
 
 const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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;
+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    "])));
+});
+const CheckboxWrapper = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return 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 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.borderRadius.md;
+}, _ref4 => {
+  let {
+    theme,
+    hasError
+  } = _ref4;
+  return hasError ? theme.colors.error : theme.colors.gray[300];
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.transitions.base;
+}, _ref6 => {
+  let {
+    theme,
+    hasError
+  } = _ref6;
+  return hasError ? theme.colors.error : theme.colors.primary;
+}, _ref7 => {
+  let {
+    size,
+    theme
+  } = _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 LabelContainer$1 = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return 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 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.gray[700];
+}, _ref0 => {
+  let {
+    size,
+    theme
+  } = _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([""])));
+});
+const HelperText$2 = styled.p(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref1 => {
+  let {
+    theme
+  } = _ref1;
+  return theme.spacing[1];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontSize.xs;
+}, _ref11 => {
+  let {
+    theme,
+    hasError
+  } = _ref11;
+  return hasError ? theme.colors.error : theme.colors.gray[500];
+});
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
       className,
       label,
@@ -1654,43 +2163,32 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       fullWidth = false,
       indeterminate = false,
       id
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    } = _ref12,
+    props = _objectWithoutProperties(_ref12, _excluded$2);
   const checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
-  const sizes = {
-    sm: "w-4 h-4",
-    md: "w-5 h-5",
-    lg: "w-6 h-6"
-  };
-  const labelSizes = {
-    sm: "text-sm",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  const baseClasses = cn("rounded border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", error ? "border-red-500 focus:ring-red-500" : "border-secondary focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", sizes[size], className);
   React.useEffect(() => {
     if (ref && typeof ref === "object" && ref.current) {
       ref.current.indeterminate = indeterminate;
     }
   }, [indeterminate, ref]);
-  return jsxRuntimeExports.jsxs("div", {
-    className: cn("flex items-start", fullWidth && "w-full"),
-    children: [jsxRuntimeExports.jsx("div", {
-      className: "flex items-center h-5",
-      children: jsxRuntimeExports.jsx("input", _objectSpread2({
+  return jsxRuntimeExports.jsxs(CheckboxContainer, {
+    fullWidth: fullWidth,
+    children: [jsxRuntimeExports.jsx(CheckboxWrapper, {
+      children: jsxRuntimeExports.jsx(StyledCheckbox, _objectSpread2({
         type: "checkbox",
-        className: baseClasses,
+        size: size,
+        hasError: !!error,
+        className: className,
         ref: ref,
         id: checkboxId
       }, props))
-    }), jsxRuntimeExports.jsxs("div", {
-      className: "ml-3",
-      children: [label && jsxRuntimeExports.jsx("label", {
+    }), jsxRuntimeExports.jsxs(LabelContainer$1, {
+      children: [label && jsxRuntimeExports.jsx(CheckboxLabel, {
         htmlFor: checkboxId,
-        className: cn("font-medium text-secondary-700 cursor-pointer", labelSizes[size]),
+        size: size,
         children: label
-      }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-        className: cn("mt-1 text-xs", error ? "text-red-600" : "text-secondary-500"),
+      }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$2, {
+        hasError: !!error,
         children: error || helperText
       })]
     })]
@@ -1699,7 +2197,97 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Checkbox.displayName = "Checkbox";
 
 const _excluded$1 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
-const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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;
+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    "])));
+});
+const RadioWrapper = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return 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 => {
+  let {
+    theme,
+    hasError
+  } = _ref3;
+  return hasError ? theme.colors.error : theme.colors.gray[300];
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.transitions.base;
+}, _ref5 => {
+  let {
+    theme,
+    hasError
+  } = _ref5;
+  return hasError ? theme.colors.error : theme.colors.primary;
+}, _ref6 => {
+  let {
+    size,
+    theme
+  } = _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 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.spacing[3];
+});
+const RadioLabel = styled.label(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n\n  ", "\n"])), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.gray[700];
+}, _ref9 => {
+  let {
+    size,
+    theme
+  } = _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 => {
+  let {
+    theme
+  } = _ref0;
+  return theme.spacing[1];
+}, _ref1 => {
+  let {
+    theme
+  } = _ref1;
+  return theme.fontSize.xs;
+}, _ref10 => {
+  let {
+    theme,
+    hasError
+  } = _ref10;
+  return hasError ? theme.colors.error : theme.colors.gray[500];
+});
+const Radio = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
       className,
       label,
@@ -1708,38 +2296,27 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size = "md",
       fullWidth = false,
       id
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    } = _ref11,
+    props = _objectWithoutProperties(_ref11, _excluded$1);
   const radioId = id || "radio-".concat(Math.random().toString(36).substr(2, 9));
-  const sizes = {
-    sm: "w-4 h-4",
-    md: "w-5 h-5",
-    lg: "w-6 h-6"
-  };
-  const labelSizes = {
-    sm: "text-sm",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  const baseClasses = cn("border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", error ? "border-red-500 focus:ring-red-500" : "border-secondary focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", sizes[size], className);
-  return jsxRuntimeExports.jsxs("div", {
-    className: cn("flex items-start", fullWidth && "w-full"),
-    children: [jsxRuntimeExports.jsx("div", {
-      className: "flex items-center h-5",
-      children: jsxRuntimeExports.jsx("input", _objectSpread2({
+  return jsxRuntimeExports.jsxs(RadioContainer, {
+    fullWidth: fullWidth,
+    children: [jsxRuntimeExports.jsx(RadioWrapper, {
+      children: jsxRuntimeExports.jsx(StyledRadio, _objectSpread2({
         type: "radio",
-        className: baseClasses,
+        size: size,
+        hasError: !!error,
+        className: className,
         ref: ref,
         id: radioId
       }, props))
-    }), jsxRuntimeExports.jsxs("div", {
-      className: "ml-3",
-      children: [label && jsxRuntimeExports.jsx("label", {
+    }), jsxRuntimeExports.jsxs(LabelContainer, {
+      children: [label && jsxRuntimeExports.jsx(RadioLabel, {
         htmlFor: radioId,
-        className: cn("font-medium text-secondary-700 cursor-pointer", labelSizes[size]),
+        size: size,
         children: label
-      }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-        className: cn("mt-1 text-xs", error ? "text-red-600" : "text-secondary-500"),
+      }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$1, {
+        hasError: !!error,
         children: error || helperText
       })]
     })]
@@ -1748,7 +2325,112 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Radio.displayName = "Radio";
 
 const _excluded = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
-const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
+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    "])));
+});
+const SelectLabel = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing[1];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSize.sm;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return 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 => {
+  let {
+    theme,
+    hasError
+  } = _ref5;
+  return hasError ? theme.colors.error : theme.colors.gray[300];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.borderRadius.md;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.transitions.base;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.white;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fontFamily.sans.join(", ");
+}, _ref0 => {
+  let {
+    theme,
+    hasError
+  } = _ref0;
+  return hasError ? theme.colors.error : theme.colors.primary;
+}, _ref1 => {
+  let {
+    theme
+  } = _ref1;
+  return theme.colors.gray[50];
+}, _ref10 => {
+  let {
+    size,
+    theme
+  } = _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([""])));
+}, _ref11 => {
+  let {
+    fullWidth
+  } = _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 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.spacing[3];
+});
+const HelperText = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.spacing[1];
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.fontSize.xs;
+}, _ref15 => {
+  let {
+    theme,
+    hasError
+  } = _ref15;
+  return hasError ? theme.colors.error : theme.colors.gray[500];
+});
+const Select = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
       className,
       label,
@@ -1759,25 +2441,20 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       options,
       placeholder,
       id
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = _ref16,
+    props = _objectWithoutProperties(_ref16, _excluded);
   const selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-sm",
-    lg: "px-4 py-3 text-base"
-  };
-  const baseClasses = cn("border transition-colors focus:outline-none focus:border-transparent appearance-none bg-white", error ? "border-red-500 focus:ring-red-500" : "border-secondary focus:border-primary", "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-secondary-50", sizes[size], fullWidth && "w-full", className);
-  return jsxRuntimeExports.jsxs("div", {
-    className: cn("flex flex-col", fullWidth && "w-full"),
-    children: [label && jsxRuntimeExports.jsx("label", {
+  return jsxRuntimeExports.jsxs(SelectContainer, {
+    fullWidth: fullWidth,
+    children: [label && jsxRuntimeExports.jsx(SelectLabel, {
       htmlFor: selectId,
-      className: "mb-1 text-sm font-medium text-secondary-700",
       children: label
-    }), jsxRuntimeExports.jsxs("div", {
-      className: "relative",
-      children: [jsxRuntimeExports.jsxs("select", _objectSpread2(_objectSpread2({
-        className: baseClasses,
+    }), jsxRuntimeExports.jsxs(SelectWrapper, {
+      children: [jsxRuntimeExports.jsxs(StyledSelect, _objectSpread2(_objectSpread2({
+        size: size,
+        fullWidth: fullWidth,
+        hasError: !!error,
+        className: className,
         ref: ref,
         id: selectId
       }, props), {}, {
@@ -1790,13 +2467,16 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           disabled: option.disabled,
           children: option.label
         }, option.value))]
-      })), jsxRuntimeExports.jsx("div", {
-        className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none",
+      })), jsxRuntimeExports.jsx(SelectIcon, {
         children: jsxRuntimeExports.jsx("svg", {
-          className: "w-4 h-4 text-secondary-400",
+          width: "16",
+          height: "16",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
+          style: {
+            color: "#9ca3af"
+          },
           children: jsxRuntimeExports.jsx("path", {
             strokeLinecap: "round",
             strokeLinejoin: "round",
@@ -1805,19 +2485,22 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           })
         })
       })]
-    }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: cn("mt-1 text-xs", error ? "text-red-600" : "text-secondary-500"),
+    }), (error || helperText) && jsxRuntimeExports.jsx(HelperText, {
+      hasError: !!error,
       children: error || helperText
     })]
   });
 });
 Select.displayName = "Select";
 
-// CSS Entry Point
-// Export CSS for manual import
-const styles = {
-  globals: "./styles.css",
-  components: "./components.css"
+const ThemeProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return jsxRuntimeExports.jsx(styled.ThemeProvider, {
+    theme: theme,
+    children: children
+  });
 };
 
 // Ensure React is available before importing components
@@ -1831,6 +2514,6 @@ exports.InputFile = InputFile;
 exports.Radio = Radio;
 exports.Select = Select;
 exports.Textarea = Textarea;
-exports.cn = cn;
-exports.styles = styles;
+exports.ThemeProvider = ThemeProvider;
+exports.theme = theme;
 //# sourceMappingURL=index.js.map