thailife-react 0.0.11 → 0.0.13

package/dist/index.esm.js

@@ -1,36 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
 export { default as React, default } from 'react';
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,system-ui,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{bottom:0;top:0}.right-0{right:0}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.mt-1{margin-top:.25rem}.flex{display:flex}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-full{height:100%}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-dark{--tw-border-opacity:1;border-color:rgb(51 51 51/var(--tw-border-opacity,1))}.border-error{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity,1))}.border-light{--tw-border-opacity:1;border-color:rgb(102 102 102/var(--tw-border-opacity,1))}.border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.bg-dark{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-error{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity,1))}.bg-light{--tw-bg-opacity:1;background-color:rgb(102 102 102/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.pr-3{padding-right:.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-dark{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-error{--tw-text-opacity:1;color:rgb(255 17 0/var(--tw-text-opacity,1))}.text-light{--tw-text-opacity:1;color:rgb(102 102 102/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-50{opacity:.5}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.hover\\:border-primary\\/60:hover{border-color:rgba(0,122,194,.6)}.hover\\:border-red-400:hover{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.hover\\:bg-dark\\/10:hover{background-color:rgba(51,51,51,.1)}.hover\\:bg-dark\\/80:hover{background-color:rgba(51,51,51,.8)}.hover\\:bg-error\\/10:hover{background-color:rgba(255,17,0,.1)}.hover\\:bg-error\\/80:hover{background-color:rgba(255,17,0,.8)}.hover\\:bg-light\\/10:hover{background-color:hsla(0,0%,40%,.1)}.hover\\:bg-light\\/80:hover{background-color:hsla(0,0%,40%,.8)}.hover\\:bg-primary\\/10:hover{background-color:rgba(0,122,194,.1)}.hover\\:bg-primary\\/80:hover{background-color:rgba(0,122,194,.8)}.focus\\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity,1))}.focus\\:border-transparent:focus{border-color:transparent}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 122 194/var(--tw-ring-opacity,1))}.focus\\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}";
-styleInject(css_248z,{"insertAt":"top"});
+import styled, { css, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -81,6 +52,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];
@@ -1457,21 +1435,66 @@ 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];
-  }
-  return clsx(inputs);
-}
-
 const _excluded$6 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
-const Button = /*#__PURE__*/React__default.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 => {
+  let {
+    theme
+  } = _ref;
+  return theme.borderRadius.md;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fontFamily.sans.join(", ");
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.transitions.base;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.primary;
+}, _ref5 => {
+  let {
+    variant,
+    color,
+    theme
+  } = _ref5;
+  if (variant === "contained") {
+    return 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"]);
+  }
+  if (variant === "outlined") {
+    return 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"]);
+  }
+  if (variant === "link") {
+    return 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 css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral([""])));
+}, _ref6 => {
+  let {
+    size,
+    theme
+  } = _ref6;
+  if (size === "sm") {
+    return css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
+  }
+  if (size === "md") {
+    return css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.sm);
+  }
+  if (size === "lg") {
+    return css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[6], theme.fontSize.base);
+  }
+  return css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral([""])));
+}, _ref7 => {
+  let {
+    fullWidth
+  } = _ref7;
+  return fullWidth && css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
+});
+const Button = /*#__PURE__*/React__default.forwardRef((_ref8, ref) => {
   let {
       className,
       color = "primary",
@@ -1481,38 +1504,17 @@ const Button = /*#__PURE__*/React__default.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
   }));
@@ -1520,7 +1522,100 @@ const Button = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 Button.displayName = "Button";
 
 const _excluded$5 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
-const Input = /*#__PURE__*/React__default.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 && 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 => {
+  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 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 => {
+  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 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 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 css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
+  }
+  return css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral([""])));
+}, _ref10 => {
+  let {
+    fullWidth
+  } = _ref10;
+  return fullWidth && 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 => {
+  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 Input = /*#__PURE__*/React__default.forwardRef((_ref14, ref) => {
   let {
       className,
       type = "text",
@@ -1530,28 +1625,24 @@ const Input = /*#__PURE__*/React__default.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
     })]
   });
@@ -1559,7 +1650,100 @@ const Input = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 Input.displayName = "Input";
 
 const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
-const Textarea = /*#__PURE__*/React__default.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 && 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 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 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 css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
+  }
+  return css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral([""])));
+}, _ref10 => {
+  let {
+    fullWidth
+  } = _ref10;
+  return fullWidth && 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__default.forwardRef((_ref14, ref) => {
   let {
       className,
       label,
@@ -1569,28 +1753,24 @@ const Textarea = /*#__PURE__*/React__default.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
     })]
   });
@@ -1598,7 +1778,115 @@ const Textarea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 Textarea.displayName = "Textarea";
 
 const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "accept", "multiple", "buttonText", "id"];
-const InputFile = /*#__PURE__*/React__default.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 && 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 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 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 css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
+  }
+  return css(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteral([""])));
+}, _ref0 => {
+  let {
+    fullWidth
+  } = _ref0;
+  return fullWidth && 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__default.forwardRef((_ref16, ref) => {
   let {
       className,
       label,
@@ -1610,42 +1898,34 @@ const InputFile = /*#__PURE__*/React__default.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
     })]
   });
@@ -1653,7 +1933,102 @@ const InputFile = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 InputFile.displayName = "InputFile";
 
 const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
-const Checkbox = /*#__PURE__*/React__default.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 && 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 css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[4], theme.spacing[4]);
+  }
+  if (size === "md") {
+    return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[5], theme.spacing[5]);
+  }
+  if (size === "lg") {
+    return css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[6], theme.spacing[6]);
+  }
+  return 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 css(_templateObject1$2 || (_templateObject1$2 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
+  }
+  if (size === "md") {
+    return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
+  }
+  if (size === "lg") {
+    return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.base);
+  }
+  return 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__default.forwardRef((_ref12, ref) => {
   let {
       className,
       label,
@@ -1663,43 +2038,32 @@ const Checkbox = /*#__PURE__*/React__default.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__default.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
       })]
     })]
@@ -1708,7 +2072,97 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 Checkbox.displayName = "Checkbox";
 
 const _excluded$1 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
-const Radio = /*#__PURE__*/React__default.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 && 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 css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[4], theme.spacing[4]);
+  }
+  if (size === "md") {
+    return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[5], theme.spacing[5]);
+  }
+  if (size === "lg") {
+    return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n        width: ", ";\n        height: ", ";\n      "])), theme.spacing[6], theme.spacing[6]);
+  }
+  return 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 css(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
+  }
+  if (size === "md") {
+    return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.sm);
+  }
+  if (size === "lg") {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        font-size: ", ";\n      "])), theme.fontSize.base);
+  }
+  return 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__default.forwardRef((_ref11, ref) => {
   let {
       className,
       label,
@@ -1717,38 +2171,27 @@ const Radio = /*#__PURE__*/React__default.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
       })]
     })]
@@ -1757,7 +2200,112 @@ const Radio = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 Radio.displayName = "Radio";
 
 const _excluded = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
-const Select = /*#__PURE__*/React__default.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 && 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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[3], theme.fontSize.sm);
+  }
+  if (size === "md") {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[2], theme.spacing[4], theme.fontSize.sm);
+  }
+  if (size === "lg") {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        font-size: ", ";\n      "])), theme.spacing[3], theme.spacing[4], theme.fontSize.base);
+  }
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])));
+}, _ref11 => {
+  let {
+    fullWidth
+  } = _ref11;
+  return fullWidth && 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__default.forwardRef((_ref16, ref) => {
   let {
       className,
       label,
@@ -1768,25 +2316,20 @@ const Select = /*#__PURE__*/React__default.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), {}, {
@@ -1799,13 +2342,16 @@ const Select = /*#__PURE__*/React__default.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",
@@ -1814,15 +2360,110 @@ const Select = /*#__PURE__*/React__default.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";
 
+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(ThemeProvider$1, {
+    theme: theme,
+    children: children
+  });
+};
+
 // Ensure React is available before importing components
 
-export { Button, Checkbox, Input, InputFile, Radio, Select, Textarea, cn };
+export { Button, Checkbox, Input, InputFile, Radio, Select, Textarea, ThemeProvider, theme };
 //# sourceMappingURL=index.esm.js.map