thailife-react 0.0.17 → 0.0.19

package/dist/index.esm.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
 export { default as React, default } from 'react';
-import styled from '@emotion/styled';
-import { ThemeProvider as ThemeProvider$1 } from '@emotion/react';
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -53,13 +51,6 @@ 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];
@@ -1436,157 +1427,92 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-const theme = {
-  colors: {
-    primary: "#007AC2",
-    error: "#ff1100",
-    dark: "#333333",
-    light: "#666666",
-    white: "#ffffff",
-    black: "#000000",
-    gray: {
-      50: "#f9fafb",
-      100: "#f3f4f6",
-      200: "#e5e7eb",
-      300: "#d1d5db",
-      400: "#9ca3af",
-      500: "#6b7280",
-      600: "#4b5563",
-      700: "#374151",
-      800: "#1f2937",
-      900: "#111827"
-    }
-  },
-  spacing: {
-    0: "0",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    8: "2rem",
-    10: "2.5rem",
-    12: "3rem",
-    16: "4rem",
-    18: "4.5rem",
-    20: "5rem",
-    24: "6rem",
-    32: "8rem",
-    40: "10rem",
-    48: "12rem",
-    56: "14rem",
-    64: "16rem",
-    88: "22rem"
-  },
-  fontSize: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    base: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem"
-  },
-  fontFamily: {
-    sans: ["Inter", "system-ui", "sans-serif"],
-    serif: ["Georgia", "Cambria", "Times New Roman", "Times", "serif"],
-    mono: ["Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
-  },
-  borderRadius: {
-    none: "0",
-    sm: "0.125rem",
-    base: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    full: "9999px"
-  },
-  shadows: {
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05)",
-    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"
-  }
+// Export CSS classes for external usage
+const cssClasses = {
+  // Button
+  button: "btn",
+  buttonContained: "btn--contained",
+  buttonOutlined: "btn--outlined",
+  buttonLink: "btn--link",
+  buttonSmall: "btn--sm",
+  buttonMedium: "btn--md",
+  buttonLarge: "btn--lg",
+  buttonError: "btn--error",
+  buttonDark: "btn--dark",
+  buttonLight: "btn--light",
+  buttonFullWidth: "btn--full-width",
+  // Input
+  inputContainer: "input-container",
+  inputContainerFullWidth: "input-container--full-width",
+  inputLabel: "input-label",
+  input: "input",
+  inputError: "input--error",
+  inputFullWidth: "input--full-width",
+  inputHelperText: "input-helper-text",
+  inputHelperTextError: "input-helper-text--error",
+  // Checkbox
+  checkboxContainer: "checkbox-container",
+  checkboxContainerFullWidth: "checkbox-container--full-width",
+  checkboxWrapper: "checkbox-wrapper",
+  checkbox: "checkbox",
+  checkboxError: "checkbox--error",
+  checkboxLabelContainer: "checkbox-label-container",
+  checkboxLabel: "checkbox-label",
+  // Radio
+  radioContainer: "radio-container",
+  radioContainerFullWidth: "radio-container--full-width",
+  radioWrapper: "radio-wrapper",
+  radio: "radio",
+  radioError: "radio--error",
+  radioLabelContainer: "radio-label-container",
+  radioLabel: "radio-label",
+  // Select
+  selectContainer: "select-container",
+  selectContainerFullWidth: "select-container--full-width",
+  selectLabel: "select-label",
+  selectWrapper: "select-wrapper",
+  select: "select",
+  selectError: "select--error",
+  selectFullWidth: "select--full-width",
+  selectIcon: "select-icon",
+  // Textarea
+  textareaContainer: "textarea-container",
+  textareaContainerFullWidth: "textarea-container--full-width",
+  textareaLabel: "textarea-label",
+  textarea: "textarea",
+  textareaError: "textarea--error",
+  textareaFullWidth: "textarea--full-width",
+  // InputFile
+  inputFileContainer: "input-file-container",
+  inputFileContainerFullWidth: "input-file-container--full-width",
+  inputFileLabel: "input-file-label",
+  inputFileWrapper: "input-file-wrapper",
+  inputFileHidden: "input-file-hidden",
+  inputFileUploadArea: "input-file-upload-area",
+  inputFileUploadAreaError: "input-file-upload-area--error",
+  inputFileUploadAreaFullWidth: "input-file-upload-area--full-width",
+  inputFileButtonText: "input-file-button-text",
+  inputFileMultipleText: "input-file-multiple-text",
+  // Utility
+  textCenter: "text-center",
+  textLeft: "text-left",
+  textRight: "text-right",
+  fontBold: "font-bold",
+  fontNormal: "font-normal",
+  fontLight: "font-light",
+  rounded: "rounded",
+  roundedSm: "rounded-sm",
+  roundedLg: "rounded-lg",
+  roundedFull: "rounded-full",
+  shadow: "shadow",
+  shadowSm: "shadow-sm",
+  shadowMd: "shadow-md",
+  shadowLg: "shadow-lg",
+  shadowXl: "shadow-xl"
 };
 
 const _excluded$6 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
-var _templateObject$6;
-const StyledButton = styled.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  cursor: pointer;\n  transition: all ", ";\n  outline: none;\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
-  var _theme$borderRadius;
-  let {
-    theme: theme$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 "\n        background-color: ".concat(currentTheme.colors[color || "primary"], ";\n        color: ").concat(currentTheme.colors.white, ";\n        &:hover:not(:disabled) {\n          background-color: ").concat(currentTheme.colors[color || "primary"], "cc;\n        }\n      ");
-  }
-  if (variant === "outlined") {
-    return "\n        background-color: transparent;\n        border: 1px solid ".concat(currentTheme.colors[color || "primary"], ";\n        color: ").concat(currentTheme.colors[color || "primary"], ";\n        &:hover:not(:disabled) {\n          background-color: ").concat(currentTheme.colors[color || "primary"], "1a;\n        }\n      ");
-  }
-  if (variant === "link") {
-    return "\n        background-color: transparent;\n        color: ".concat(currentTheme.colors[color || "primary"], ";\n        text-decoration: underline;\n        &:hover:not(:disabled) {\n          text-decoration: none;\n        }\n      ");
-  }
-  return "";
-}, _ref6 => {
-  let {
-    size,
-    theme: theme$1
-  } = _ref6;
-  const currentTheme = theme$1 || theme;
-  if (size === "sm") {
-    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[3], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
-  }
-  if (size === "md") {
-    return "\n        padding: ".concat(currentTheme.spacing[2], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
-  }
-  if (size === "lg") {
-    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[6], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
-  }
-  return "";
-}, _ref7 => {
-  let {
-    fullWidth
-  } = _ref7;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const Button = /*#__PURE__*/React__default.forwardRef((_ref8, ref) => {
+const Button = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       color = "primary",
@@ -1596,15 +1522,16 @@ const Button = /*#__PURE__*/React__default.forwardRef((_ref8, ref) => {
       loading = false,
       disabled,
       children
-    } = _ref8,
-    props = _objectWithoutProperties(_ref8, _excluded$6);
-  return jsxRuntimeExports.jsx(StyledButton, _objectSpread2(_objectSpread2({
-    className: className,
-    color: color,
-    variant: variant,
-    size: size,
-    fullWidth: fullWidth,
-    loading: loading,
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  const baseClass = cssClasses.button;
+  const variantClass = variant === "contained" ? cssClasses.buttonContained : variant === "outlined" ? cssClasses.buttonOutlined : cssClasses.buttonLink;
+  const sizeClass = size === "sm" ? cssClasses.buttonSmall : size === "md" ? cssClasses.buttonMedium : cssClasses.buttonLarge;
+  const colorClass = color === "error" ? cssClasses.buttonError : color === "dark" ? cssClasses.buttonDark : color === "light" ? cssClasses.buttonLight : "";
+  const fullWidthClass = fullWidth ? cssClasses.buttonFullWidth : "";
+  const combinedClasses = [baseClass, variantClass, sizeClass, colorClass, fullWidthClass, className].filter(Boolean).join(" ");
+  return jsxRuntimeExports.jsx("button", _objectSpread2(_objectSpread2({
+    className: combinedClasses,
     disabled: disabled || loading,
     ref: ref
   }, props), {}, {
@@ -1614,115 +1541,7 @@ const Button = /*#__PURE__*/React__default.forwardRef((_ref8, ref) => {
 Button.displayName = "Button";
 
 const _excluded$5 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$5;
-const InputContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
-  let {
-    fullWidth
-  } = _ref;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const InputLabel = styled.label(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
-  var _theme$spacing;
-  let {
-    theme: theme$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(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  font-family: ", ";\n  padding: ", " ", ";\n  font-size: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n"])), _ref5 => {
-  var _theme$colors2, _theme$colors3;
-  let {
-    theme: theme$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$spacing2;
-  let {
-    theme: theme$1
-  } = _ref9;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[2]) || theme.spacing[2];
-}, _ref0 => {
-  var _theme$spacing3;
-  let {
-    theme: theme$1
-  } = _ref0;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[4]) || theme.spacing[4];
-}, _ref1 => {
-  var _theme$fontSize2;
-  let {
-    theme: theme$1
-  } = _ref1;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.sm) || theme.fontSize.sm;
-}, _ref10 => {
-  var _theme$colors4, _theme$colors5;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref10;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.primary) || theme.colors.primary;
-}, _ref11 => {
-  var _theme$colors6;
-  let {
-    theme: theme$1
-  } = _ref11;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 || (_theme$colors6 = _theme$colors6.gray) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6[50]) || theme.colors.gray[50];
-}, _ref12 => {
-  let {
-    fullWidth
-  } = _ref12;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const HelperText$5 = styled.p(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
-  var _theme$spacing4;
-  let {
-    theme: theme$1
-  } = _ref13;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing4 = theme$1.spacing) === null || _theme$spacing4 === void 0 ? void 0 : _theme$spacing4[1]) || theme.spacing[1];
-}, _ref14 => {
-  var _theme$fontSize3;
-  let {
-    theme: theme$1
-  } = _ref14;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize3 = theme$1.fontSize) === null || _theme$fontSize3 === void 0 ? void 0 : _theme$fontSize3.xs) || theme.fontSize.xs;
-}, _ref15 => {
-  var _theme$colors7, _theme$colors8;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref15;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 || (_theme$colors8 = _theme$colors8.gray) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8[500]) || theme.colors.gray[500];
-});
-const Input = /*#__PURE__*/React__default.forwardRef((_ref16, ref) => {
+const Input = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       type = "text",
@@ -1732,23 +1551,26 @@ const Input = /*#__PURE__*/React__default.forwardRef((_ref16, ref) => {
       size = "md",
       fullWidth = false,
       id
-    } = _ref16,
-    props = _objectWithoutProperties(_ref16, _excluded$5);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$5);
   const inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
-  return jsxRuntimeExports.jsxs(InputContainer, {
-    fullWidth: fullWidth,
-    children: [label && jsxRuntimeExports.jsx(InputLabel, {
+  const containerClass = fullWidth ? cssClasses.inputContainerFullWidth : cssClasses.inputContainer;
+  const inputClass = error ? "".concat(cssClasses.input, " ").concat(cssClasses.inputError) : cssClasses.input;
+  const inputFullWidthClass = fullWidth ? cssClasses.inputFullWidth : "";
+  const helperTextClass = error ? cssClasses.inputHelperTextError : cssClasses.inputHelperText;
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClass,
+    children: [label && jsxRuntimeExports.jsx("label", {
+      className: cssClasses.inputLabel,
       htmlFor: inputId,
       children: label
-    }), jsxRuntimeExports.jsx(StyledInput, _objectSpread2({
+    }), jsxRuntimeExports.jsx("input", _objectSpread2({
       type: type,
-      fullWidth: fullWidth,
-      hasError: !!error,
-      className: className,
+      className: "".concat(inputClass, " ").concat(inputFullWidthClass),
       ref: ref,
       id: inputId
-    }, props)), (error || helperText) && jsxRuntimeExports.jsx(HelperText$5, {
-      hasError: !!error,
+    }, props)), (error || helperText) && jsxRuntimeExports.jsx("p", {
+      className: helperTextClass,
       children: error || helperText
     })]
   });
@@ -1756,113 +1578,7 @@ const Input = /*#__PURE__*/React__default.forwardRef((_ref16, ref) => {
 Input.displayName = "Input";
 
 const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
-var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$4;
-const TextareaContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
-  let {
-    fullWidth
-  } = _ref;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const TextareaLabel = styled.label(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
-  var _theme$spacing;
-  let {
-    theme: theme$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 StyledTextarea = styled.textarea(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  resize: vertical;\n  font-family: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
-  var _theme$colors2, _theme$colors3;
-  let {
-    theme: theme$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 "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[3], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
-  }
-  if (size === "md") {
-    return "\n        padding: ".concat(currentTheme.spacing[2], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
-  }
-  if (size === "lg") {
-    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
-  }
-  return "";
-}, _ref10 => {
-  let {
-    fullWidth
-  } = _ref10;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const HelperText$4 = styled.p(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref11 => {
-  var _theme$spacing2;
-  let {
-    theme: theme$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 Textarea = /*#__PURE__*/React__default.forwardRef((_ref14, ref) => {
+const Textarea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
@@ -1872,155 +1588,34 @@ const Textarea = /*#__PURE__*/React__default.forwardRef((_ref14, ref) => {
       fullWidth = false,
       rows = 3,
       id
-    } = _ref14,
-    props = _objectWithoutProperties(_ref14, _excluded$4);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const textareaId = id || "textarea-".concat(Math.random().toString(36).substr(2, 9));
-  return jsxRuntimeExports.jsxs(TextareaContainer, {
-    fullWidth: fullWidth,
-    children: [label && jsxRuntimeExports.jsx(TextareaLabel, {
+  const containerClass = fullWidth ? cssClasses.textareaContainerFullWidth : cssClasses.textareaContainer;
+  const textareaClass = error ? "".concat(cssClasses.textarea, " ").concat(cssClasses.textareaError) : cssClasses.textarea;
+  const textareaFullWidthClass = fullWidth ? cssClasses.textareaFullWidth : "";
+  const helperTextClass = error ? cssClasses.inputHelperTextError : cssClasses.inputHelperText;
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClass,
+    children: [label && jsxRuntimeExports.jsx("label", {
+      className: cssClasses.textareaLabel,
       htmlFor: textareaId,
       children: label
-    }), jsxRuntimeExports.jsx(StyledTextarea, _objectSpread2({
-      size: size,
-      fullWidth: fullWidth,
-      hasError: !!error,
-      className: className,
+    }), jsxRuntimeExports.jsx("textarea", _objectSpread2({
+      className: "".concat(textareaClass, " ").concat(textareaFullWidthClass),
       ref: ref,
       id: textareaId,
       rows: rows
-    }, props)), (error || helperText) && jsxRuntimeExports.jsx(HelperText$4, {
-      hasError: !!error,
+    }, props)), (error || helperText) && jsxRuntimeExports.jsx("p", {
+      className: helperTextClass,
       children: error || helperText
     })]
   });
 });
 Textarea.displayName = "Textarea";
 
-const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "accept", "multiple", "buttonText", "id"];
-var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7, _templateObject8;
-const InputFileContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
-  let {
-    fullWidth
-  } = _ref;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const InputFileLabel = styled.label(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
-  var _theme$spacing;
-  let {
-    theme: theme$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 InputFileWrapper = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const HiddenInput = styled.input(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n"])));
-const FileUploadArea = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  border: 2px dashed ", ";\n  transition: all ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus-within {\n    border-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
-  var _theme$colors2, _theme$colors3;
-  let {
-    theme: theme$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$transitions;
-  let {
-    theme: theme$1
-  } = _ref6;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
-}, _ref7 => {
-  var _theme$colors4, _theme$colors5;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref7;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.primary) || theme.colors.primary;
-}, _ref8 => {
-  var _theme$colors6, _theme$colors7;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref8;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7.primary) || theme.colors.primary;
-}, _ref9 => {
-  let {
-    size,
-    theme: theme$1
-  } = _ref9;
-  const currentTheme = theme$1 || theme;
-  if (size === "sm") {
-    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[3], ";\n        font-size: ").concat(currentTheme.fontSize.sm, ";\n      ");
-  }
-  if (size === "md") {
-    return "\n        padding: ".concat(currentTheme.spacing[2], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
-  }
-  if (size === "lg") {
-    return "\n        padding: ".concat(currentTheme.spacing[3], " ").concat(currentTheme.spacing[4], ";\n        font-size: ").concat(currentTheme.fontSize.base, ";\n      ");
-  }
-  return "";
-}, _ref0 => {
-  let {
-    fullWidth
-  } = _ref0;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const ButtonText = styled.span(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref1 => {
-  var _theme$colors8;
-  let {
-    theme: theme$1
-  } = _ref1;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 || (_theme$colors8 = _theme$colors8.gray) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8[600]) || theme.colors.gray[600];
-});
-const MultipleText = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref10 => {
-  var _theme$spacing2;
-  let {
-    theme: theme$1
-  } = _ref10;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[1]) || theme.spacing[1];
-}, _ref11 => {
-  var _theme$fontSize2;
-  let {
-    theme: theme$1
-  } = _ref11;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
-}, _ref12 => {
-  var _theme$colors9;
-  let {
-    theme: theme$1
-  } = _ref12;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors9 = theme$1.colors) === null || _theme$colors9 === void 0 || (_theme$colors9 = _theme$colors9.gray) === null || _theme$colors9 === void 0 ? void 0 : _theme$colors9[500]) || theme.colors.gray[500];
-});
-const HelperText$3 = styled.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref13 => {
-  var _theme$spacing3;
-  let {
-    theme: theme$1
-  } = _ref13;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[1]) || theme.spacing[1];
-}, _ref14 => {
-  var _theme$fontSize3;
-  let {
-    theme: theme$1
-  } = _ref14;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize3 = theme$1.fontSize) === null || _theme$fontSize3 === void 0 ? void 0 : _theme$fontSize3.xs) || theme.fontSize.xs;
-}, _ref15 => {
-  var _theme$colors0, _theme$colors1;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref15;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors0 = theme$1.colors) === null || _theme$colors0 === void 0 ? void 0 : _theme$colors0.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors1 = theme$1.colors) === null || _theme$colors1 === void 0 || (_theme$colors1 = _theme$colors1.gray) === null || _theme$colors1 === void 0 ? void 0 : _theme$colors1[500]) || theme.colors.gray[500];
-});
-const InputFile = /*#__PURE__*/React__default.forwardRef((_ref16, ref) => {
+const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "multiple", "accept", "buttonText", "id"];
+const InputFile = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
@@ -2028,38 +1623,44 @@ const InputFile = /*#__PURE__*/React__default.forwardRef((_ref16, ref) => {
       helperText,
       size = "md",
       fullWidth = false,
-      accept,
       multiple = false,
+      accept,
       buttonText = "Choose File",
       id
-    } = _ref16,
-    props = _objectWithoutProperties(_ref16, _excluded$3);
-  const inputId = id || "file-input-".concat(Math.random().toString(36).substr(2, 9));
-  return jsxRuntimeExports.jsxs(InputFileContainer, {
-    fullWidth: fullWidth,
-    children: [label && jsxRuntimeExports.jsx(InputFileLabel, {
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  const inputId = id || "input-file-".concat(Math.random().toString(36).substr(2, 9));
+  const containerClass = fullWidth ? cssClasses.inputFileContainerFullWidth : cssClasses.inputFileContainer;
+  const uploadAreaClass = error ? "".concat(cssClasses.inputFileUploadArea, " ").concat(cssClasses.inputFileUploadAreaError) : cssClasses.inputFileUploadArea;
+  const uploadAreaFullWidthClass = fullWidth ? cssClasses.inputFileUploadAreaFullWidth : "";
+  const helperTextClass = error ? cssClasses.inputHelperTextError : cssClasses.inputHelperText;
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClass,
+    children: [label && jsxRuntimeExports.jsx("label", {
+      className: cssClasses.inputFileLabel,
       htmlFor: inputId,
       children: label
-    }), jsxRuntimeExports.jsxs(InputFileWrapper, {
-      children: [jsxRuntimeExports.jsx(HiddenInput, _objectSpread2({
+    }), jsxRuntimeExports.jsxs("div", {
+      className: cssClasses.inputFileWrapper,
+      children: [jsxRuntimeExports.jsx("input", _objectSpread2({
         type: "file",
+        className: cssClasses.inputFileHidden,
         ref: ref,
         id: inputId,
-        accept: accept,
-        multiple: multiple
-      }, props)), jsxRuntimeExports.jsxs(FileUploadArea, {
-        size: size,
-        fullWidth: fullWidth,
-        hasError: !!error,
-        className: className,
-        children: [jsxRuntimeExports.jsx(ButtonText, {
+        multiple: multiple,
+        accept: accept
+      }, props)), jsxRuntimeExports.jsxs("div", {
+        className: "".concat(uploadAreaClass, " ").concat(uploadAreaFullWidthClass),
+        children: [jsxRuntimeExports.jsx("span", {
+          className: cssClasses.inputFileButtonText,
           children: buttonText
-        }), multiple && jsxRuntimeExports.jsx(MultipleText, {
-          children: "(Multiple)"
+        }), multiple && jsxRuntimeExports.jsx("span", {
+          className: cssClasses.inputFileMultipleText,
+          children: "or drag and drop"
         })]
       })]
-    }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$3, {
-      hasError: !!error,
+    }), (error || helperText) && jsxRuntimeExports.jsx("p", {
+      className: helperTextClass,
       children: error || helperText
     })]
   });
@@ -2067,94 +1668,7 @@ const InputFile = /*#__PURE__*/React__default.forwardRef((_ref16, ref) => {
 InputFile.displayName = "InputFile";
 
 const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2;
-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 && "\n      width: 100%;\n    ";
-});
-const CheckboxWrapper = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
-  var _theme$spacing;
-  let {
-    theme: theme$1
-  } = _ref2;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[5]) || theme.spacing[5];
-});
-const StyledCheckbox = styled.input(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  border: 1px solid ", ";\n  transition: all ", ";\n  outline: none;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), _ref3 => {
-  var _theme$borderRadius;
-  let {
-    theme: theme$1
-  } = _ref3;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$borderRadius = theme$1.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.md) || theme.borderRadius.md;
-}, _ref4 => {
-  var _theme$colors, _theme$colors2;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref4;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 || (_theme$colors2 = _theme$colors2.gray) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2[300]) || theme.colors.gray[300];
-}, _ref5 => {
-  var _theme$transitions;
-  let {
-    theme: theme$1
-  } = _ref5;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
-}, _ref6 => {
-  var _theme$colors3, _theme$colors4;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref6;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.primary) || theme.colors.primary;
-}, _ref7 => {
-  let {
-    theme: theme$1
-  } = _ref7;
-  const currentTheme = theme$1 || theme;
-  return "\n      width: ".concat(currentTheme.spacing[5], ";\n      height: ").concat(currentTheme.spacing[5], ";\n    ");
-});
-const LabelContainer$1 = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref8 => {
-  var _theme$spacing2;
-  let {
-    theme: theme$1
-  } = _ref8;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[3]) || theme.spacing[3];
-});
-const CheckboxLabel = styled.label(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  font-size: ", ";\n"])), _ref9 => {
-  var _theme$colors5;
-  let {
-    theme: theme$1
-  } = _ref9;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 || (_theme$colors5 = _theme$colors5.gray) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5[700]) || theme.colors.gray[700];
-}, _ref0 => {
-  var _theme$fontSize;
-  let {
-    theme: theme$1
-  } = _ref0;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
-});
-const HelperText$2 = styled.p(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref1 => {
-  var _theme$spacing3;
-  let {
-    theme: theme$1
-  } = _ref1;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[1]) || theme.spacing[1];
-}, _ref10 => {
-  var _theme$fontSize2;
-  let {
-    theme: theme$1
-  } = _ref10;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
-}, _ref11 => {
-  var _theme$colors6, _theme$colors7;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref11;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 || (_theme$colors7 = _theme$colors7.gray) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7[500]) || theme.colors.gray[500];
-});
-const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
+const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
@@ -2164,30 +1678,35 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
       fullWidth = false,
       indeterminate = false,
       id
-    } = _ref12,
-    props = _objectWithoutProperties(_ref12, _excluded$2);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   React__default.useEffect(() => {
     if (ref && typeof ref === "object" && ref.current) {
       ref.current.indeterminate = indeterminate;
     }
   }, [indeterminate, ref]);
-  return jsxRuntimeExports.jsxs(CheckboxContainer, {
-    fullWidth: fullWidth,
-    children: [jsxRuntimeExports.jsx(CheckboxWrapper, {
-      children: jsxRuntimeExports.jsx(StyledCheckbox, _objectSpread2({
+  const containerClass = fullWidth ? cssClasses.checkboxContainerFullWidth : cssClasses.checkboxContainer;
+  const checkboxClass = error ? "".concat(cssClasses.checkbox, " ").concat(cssClasses.checkboxError) : cssClasses.checkbox;
+  const helperTextClass = error ? cssClasses.inputHelperTextError : cssClasses.inputHelperText;
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClass,
+    children: [jsxRuntimeExports.jsx("div", {
+      className: cssClasses.checkboxWrapper,
+      children: jsxRuntimeExports.jsx("input", _objectSpread2({
         type: "checkbox",
-        hasError: !!error,
-        className: className,
+        className: checkboxClass,
         ref: ref,
         id: checkboxId
       }, props))
-    }), jsxRuntimeExports.jsxs(LabelContainer$1, {
-      children: [label && jsxRuntimeExports.jsx(CheckboxLabel, {
+    }), jsxRuntimeExports.jsxs("div", {
+      className: cssClasses.checkboxLabelContainer,
+      children: [label && jsxRuntimeExports.jsx("label", {
+        className: cssClasses.checkboxLabel,
         htmlFor: checkboxId,
         children: label
-      }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$2, {
-        hasError: !!error,
+      }), (error || helperText) && jsxRuntimeExports.jsx("p", {
+        className: helperTextClass,
         children: error || helperText
       })]
     })]
@@ -2196,94 +1715,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
 Checkbox.displayName = "Checkbox";
 
 const _excluded$1 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1;
-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 && "\n      width: 100%;\n    ";
-});
-const RadioWrapper = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n"])), _ref2 => {
-  var _theme$spacing;
-  let {
-    theme: theme$1
-  } = _ref2;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing = theme$1.spacing) === null || _theme$spacing === void 0 ? void 0 : _theme$spacing[5]) || theme.spacing[5];
-});
-const StyledRadio = styled.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n  transition: all ", ";\n  outline: none;\n  width: ", ";\n  height: ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), _ref3 => {
-  var _theme$colors, _theme$colors2;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref3;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors = theme$1.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors2 = theme$1.colors) === null || _theme$colors2 === void 0 || (_theme$colors2 = _theme$colors2.gray) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2[300]) || theme.colors.gray[300];
-}, _ref4 => {
-  var _theme$transitions;
-  let {
-    theme: theme$1
-  } = _ref4;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$transitions = theme$1.transitions) === null || _theme$transitions === void 0 ? void 0 : _theme$transitions.base) || theme.transitions.base;
-}, _ref5 => {
-  var _theme$spacing2;
-  let {
-    theme: theme$1
-  } = _ref5;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[5]) || theme.spacing[5];
-}, _ref6 => {
-  var _theme$spacing3;
-  let {
-    theme: theme$1
-  } = _ref6;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[5]) || theme.spacing[5];
-}, _ref7 => {
-  var _theme$colors3, _theme$colors4;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref7;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors3 = theme$1.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.primary) || theme.colors.primary;
-});
-const LabelContainer = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref8 => {
-  var _theme$spacing4;
-  let {
-    theme: theme$1
-  } = _ref8;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing4 = theme$1.spacing) === null || _theme$spacing4 === void 0 ? void 0 : _theme$spacing4[3]) || theme.spacing[3];
-});
-const RadioLabel = styled.label(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  font-size: ", ";\n"])), _ref9 => {
-  var _theme$colors5;
-  let {
-    theme: theme$1
-  } = _ref9;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 || (_theme$colors5 = _theme$colors5.gray) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5[700]) || theme.colors.gray[700];
-}, _ref0 => {
-  var _theme$fontSize;
-  let {
-    theme: theme$1
-  } = _ref0;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize = theme$1.fontSize) === null || _theme$fontSize === void 0 ? void 0 : _theme$fontSize.sm) || theme.fontSize.sm;
-});
-const HelperText$1 = styled.p(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref1 => {
-  var _theme$spacing5;
-  let {
-    theme: theme$1
-  } = _ref1;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing5 = theme$1.spacing) === null || _theme$spacing5 === void 0 ? void 0 : _theme$spacing5[1]) || theme.spacing[1];
-}, _ref10 => {
-  var _theme$fontSize2;
-  let {
-    theme: theme$1
-  } = _ref10;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.xs) || theme.fontSize.xs;
-}, _ref11 => {
-  var _theme$colors6, _theme$colors7;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref11;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 || (_theme$colors7 = _theme$colors7.gray) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7[500]) || theme.colors.gray[500];
-});
-const Radio = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
+const Radio = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
@@ -2292,25 +1724,30 @@ const Radio = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
       size = "md",
       fullWidth = false,
       id
-    } = _ref12,
-    props = _objectWithoutProperties(_ref12, _excluded$1);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   const radioId = id || "radio-".concat(Math.random().toString(36).substr(2, 9));
-  return jsxRuntimeExports.jsxs(RadioContainer, {
-    fullWidth: fullWidth,
-    children: [jsxRuntimeExports.jsx(RadioWrapper, {
-      children: jsxRuntimeExports.jsx(StyledRadio, _objectSpread2({
+  const containerClass = fullWidth ? cssClasses.radioContainerFullWidth : cssClasses.radioContainer;
+  const radioClass = error ? "".concat(cssClasses.radio, " ").concat(cssClasses.radioError) : cssClasses.radio;
+  const helperTextClass = error ? cssClasses.inputHelperTextError : cssClasses.inputHelperText;
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClass,
+    children: [jsxRuntimeExports.jsx("div", {
+      className: cssClasses.radioWrapper,
+      children: jsxRuntimeExports.jsx("input", _objectSpread2({
         type: "radio",
-        hasError: !!error,
-        className: className,
+        className: radioClass,
         ref: ref,
         id: radioId
       }, props))
-    }), jsxRuntimeExports.jsxs(LabelContainer, {
-      children: [label && jsxRuntimeExports.jsx(RadioLabel, {
+    }), jsxRuntimeExports.jsxs("div", {
+      className: cssClasses.radioLabelContainer,
+      children: [label && jsxRuntimeExports.jsx("label", {
+        className: cssClasses.radioLabel,
         htmlFor: radioId,
         children: label
-      }), (error || helperText) && jsxRuntimeExports.jsx(HelperText$1, {
-        hasError: !!error,
+      }), (error || helperText) && jsxRuntimeExports.jsx("p", {
+        className: helperTextClass,
         children: error || helperText
       })]
     })]
@@ -2319,129 +1756,7 @@ const Radio = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
 Radio.displayName = "Radio";
 
 const _excluded = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), _ref => {
-  let {
-    fullWidth
-  } = _ref;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  color: ", ";\n"])), _ref2 => {
-  var _theme$spacing;
-  let {
-    theme: theme$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 SelectWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const StyledSelect = styled.select(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  transition: border-color ", ";\n  outline: none;\n  appearance: none;\n  background-color: ", ";\n  font-family: ", ";\n  padding: ", " ", ";\n  font-size: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ", ";\n  }\n\n  ", "\n"])), _ref5 => {
-  var _theme$colors2, _theme$colors3;
-  let {
-    theme: theme$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$colors4;
-  let {
-    theme: theme$1
-  } = _ref8;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors4 = theme$1.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.white) || theme.colors.white;
-}, _ref9 => {
-  var _theme$fontFamily;
-  let {
-    theme: theme$1
-  } = _ref9;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontFamily = theme$1.fontFamily) === null || _theme$fontFamily === void 0 || (_theme$fontFamily = _theme$fontFamily.sans) === null || _theme$fontFamily === void 0 ? void 0 : _theme$fontFamily.join(", ")) || theme.fontFamily.sans.join(", ");
-}, _ref0 => {
-  var _theme$spacing2;
-  let {
-    theme: theme$1
-  } = _ref0;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing2 = theme$1.spacing) === null || _theme$spacing2 === void 0 ? void 0 : _theme$spacing2[2]) || theme.spacing[2];
-}, _ref1 => {
-  var _theme$spacing3;
-  let {
-    theme: theme$1
-  } = _ref1;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing3 = theme$1.spacing) === null || _theme$spacing3 === void 0 ? void 0 : _theme$spacing3[4]) || theme.spacing[4];
-}, _ref10 => {
-  var _theme$fontSize2;
-  let {
-    theme: theme$1
-  } = _ref10;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize2 = theme$1.fontSize) === null || _theme$fontSize2 === void 0 ? void 0 : _theme$fontSize2.sm) || theme.fontSize.sm;
-}, _ref11 => {
-  var _theme$colors5, _theme$colors6;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref11;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors5 = theme$1.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors6 = theme$1.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.primary) || theme.colors.primary;
-}, _ref12 => {
-  var _theme$colors7;
-  let {
-    theme: theme$1
-  } = _ref12;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$colors7 = theme$1.colors) === null || _theme$colors7 === void 0 || (_theme$colors7 = _theme$colors7.gray) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7[50]) || theme.colors.gray[50];
-}, _ref13 => {
-  let {
-    fullWidth
-  } = _ref13;
-  return fullWidth && "\n      width: 100%;\n    ";
-});
-const SelectIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  padding-right: ", ";\n  pointer-events: none;\n"])), _ref14 => {
-  var _theme$spacing4;
-  let {
-    theme: theme$1
-  } = _ref14;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing4 = theme$1.spacing) === null || _theme$spacing4 === void 0 ? void 0 : _theme$spacing4[3]) || theme.spacing[3];
-});
-const HelperText = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), _ref15 => {
-  var _theme$spacing5;
-  let {
-    theme: theme$1
-  } = _ref15;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$spacing5 = theme$1.spacing) === null || _theme$spacing5 === void 0 ? void 0 : _theme$spacing5[1]) || theme.spacing[1];
-}, _ref16 => {
-  var _theme$fontSize3;
-  let {
-    theme: theme$1
-  } = _ref16;
-  return (theme$1 === null || theme$1 === void 0 || (_theme$fontSize3 = theme$1.fontSize) === null || _theme$fontSize3 === void 0 ? void 0 : _theme$fontSize3.xs) || theme.fontSize.xs;
-}, _ref17 => {
-  var _theme$colors8, _theme$colors9;
-  let {
-    theme: theme$1,
-    hasError
-  } = _ref17;
-  return hasError ? (theme$1 === null || theme$1 === void 0 || (_theme$colors8 = theme$1.colors) === null || _theme$colors8 === void 0 ? void 0 : _theme$colors8.error) || theme.colors.error : (theme$1 === null || theme$1 === void 0 || (_theme$colors9 = theme$1.colors) === null || _theme$colors9 === void 0 || (_theme$colors9 = _theme$colors9.gray) === null || _theme$colors9 === void 0 ? void 0 : _theme$colors9[500]) || theme.colors.gray[500];
-});
-const Select = /*#__PURE__*/React__default.forwardRef((_ref18, ref) => {
+const Select = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
@@ -2452,19 +1767,23 @@ const Select = /*#__PURE__*/React__default.forwardRef((_ref18, ref) => {
       options,
       placeholder,
       id
-    } = _ref18,
-    props = _objectWithoutProperties(_ref18, _excluded);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
-  return jsxRuntimeExports.jsxs(SelectContainer, {
-    fullWidth: fullWidth,
-    children: [label && jsxRuntimeExports.jsx(SelectLabel, {
+  const containerClass = fullWidth ? cssClasses.selectContainerFullWidth : cssClasses.selectContainer;
+  const selectClass = error ? "".concat(cssClasses.select, " ").concat(cssClasses.selectError) : cssClasses.select;
+  const selectFullWidthClass = fullWidth ? cssClasses.selectFullWidth : "";
+  const helperTextClass = error ? cssClasses.inputHelperTextError : cssClasses.inputHelperText;
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClass,
+    children: [label && jsxRuntimeExports.jsx("label", {
+      className: cssClasses.selectLabel,
       htmlFor: selectId,
       children: label
-    }), jsxRuntimeExports.jsxs(SelectWrapper, {
-      children: [jsxRuntimeExports.jsxs(StyledSelect, _objectSpread2(_objectSpread2({
-        fullWidth: fullWidth,
-        hasError: !!error,
-        className: className,
+    }), jsxRuntimeExports.jsxs("div", {
+      className: cssClasses.selectWrapper,
+      children: [jsxRuntimeExports.jsxs("select", _objectSpread2(_objectSpread2({
+        className: "".concat(selectClass, " ").concat(selectFullWidthClass),
         ref: ref,
         id: selectId
       }, props), {}, {
@@ -2477,7 +1796,8 @@ const Select = /*#__PURE__*/React__default.forwardRef((_ref18, ref) => {
           disabled: option.disabled,
           children: option.label
         }, option.value))]
-      })), jsxRuntimeExports.jsx(SelectIcon, {
+      })), jsxRuntimeExports.jsx("div", {
+        className: cssClasses.selectIcon,
         children: jsxRuntimeExports.jsx("svg", {
           width: "16",
           height: "16",
@@ -2495,32 +1815,15 @@ const Select = /*#__PURE__*/React__default.forwardRef((_ref18, ref) => {
           })
         })
       })]
-    }), (error || helperText) && jsxRuntimeExports.jsx(HelperText, {
-      hasError: !!error,
+    }), (error || helperText) && jsxRuntimeExports.jsx("p", {
+      className: helperTextClass,
       children: error || helperText
     })]
   });
 });
 Select.displayName = "Select";
 
-const ThemeProvider = _ref => {
-  let {
-    children
-  } = _ref;
-  // Ensure theme is properly defined
-  if (!theme) {
-    console.error("Theme is undefined!");
-    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
-      children: children
-    });
-  }
-  return jsxRuntimeExports.jsx(ThemeProvider$1, {
-    theme: theme,
-    children: children
-  });
-};
-
 // Ensure React is available before importing components
 
-export { Button, Checkbox, Input, InputFile, Radio, Select, Textarea, ThemeProvider, theme };
+export { Button, Checkbox, Input, InputFile, Radio, Select, Textarea, cssClasses };
 //# sourceMappingURL=index.esm.js.map