thailife-react 0.0.22 → 0.0.23

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useState, useRef, useEffect } from 'react';
+import React__default, { forwardRef, createElement, useState, useRef, useEffect, useMemo } from 'react';
 export { default as React, default } from 'react';
 
 function _defineProperty(e, r, t) {
@@ -1427,363 +1427,270 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-// 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$8 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
+const _excluded$d = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
 const Button = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
-      color = "primary",
-      variant = "contained",
-      size = "md",
+      color = 'primary',
+      variant = 'contained',
+      size = 'md',
       fullWidth = false,
       loading = false,
       disabled,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
-  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,
+    props = _objectWithoutProperties(_ref, _excluded$d);
+  const classNames = ['btn', "btn--".concat(variant), "btn--".concat(size), "btn--".concat(color), fullWidth ? 'btn--full-width' : '', loading ? 'btn--loading' : '', disabled ? 'btn--disabled' : '', className].filter(Boolean).join(' ');
+  return jsxRuntimeExports.jsxs("button", _objectSpread2(_objectSpread2({
+    className: classNames,
     disabled: disabled || loading,
     ref: ref
   }, props), {}, {
-    children: children
+    children: [loading && jsxRuntimeExports.jsx("span", {
+      className: "btn__loader"
+    }), children]
   }));
 });
-Button.displayName = "Button";
+Button.displayName = 'Button';
+
+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}
 
-const _excluded$7 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
+const _excluded$c = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id", "unit"];
 const Input = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
-      type = "text",
+      type = 'text',
       label,
       error,
       helperText,
-      size = "md",
+      size = 'md',
       fullWidth = false,
-      id
+      id,
+      unit
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
-  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("input", _objectSpread2({
-      type: type,
-      className: "".concat(inputClass, " ").concat(inputFullWidthClass),
-      ref: ref,
-      id: inputId
-    }, props)), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: helperTextClass,
-      children: error || helperText
-    })]
-  });
+  return (
+    // <div className={clsx('input-container', fullWidth && 'input-container--full-width', className)}>
+    //   {label && (
+    //     <label className="input-label" htmlFor={inputId}>
+    //       {label}
+    //     </label>
+    //   )}
+    //   <input
+    //     type={type}
+    //     className={clsx('input', error && 'input--error', fullWidth && 'input--full-width')}
+    //     ref={ref}
+    //     id={inputId}
+    //     {...props}
+    //   />
+    //   {(error || helperText) && <p className={clsx('input-helper-text', error && 'input-helper-text--error')}>{error || helperText}</p>}
+    // </div>
+    jsxRuntimeExports.jsxs("div", {
+      className: clsx('input-container', fullWidth && 'input-container--full-width', unit && 'input-container--has-unit', className),
+      children: [jsxRuntimeExports.jsx("input", _objectSpread2({
+        type: type,
+        className: clsx('input', error && 'input--error', fullWidth && 'input--full-width'),
+        ref: ref,
+        id: inputId
+      }, props)), unit && jsxRuntimeExports.jsx("span", {
+        className: "input-unit",
+        children: unit
+      })]
+    })
+  );
 });
-Input.displayName = "Input";
+Input.displayName = 'Input';
 
-const _excluded$6 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
+const _excluded$b = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
 const Textarea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
       error,
       helperText,
-      size = "md",
+      size = 'md',
       fullWidth = false,
       rows = 3,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   const textareaId = id || "textarea-".concat(Math.random().toString(36).substr(2, 9));
-  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,
+    className: clsx('textarea-container', fullWidth && 'textarea-container--full-width', className),
     children: [label && jsxRuntimeExports.jsx("label", {
-      className: cssClasses.textareaLabel,
+      className: "textarea-label",
       htmlFor: textareaId,
       children: label
     }), jsxRuntimeExports.jsx("textarea", _objectSpread2({
-      className: "".concat(textareaClass, " ").concat(textareaFullWidthClass),
+      className: clsx('textarea', error && 'textarea--error', fullWidth && 'textarea--full-width'),
       ref: ref,
       id: textareaId,
       rows: rows
     }, props)), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: helperTextClass,
+      className: clsx('input-helper-text', error && 'input-helper-text--error'),
       children: error || helperText
     })]
   });
 });
-Textarea.displayName = "Textarea";
+Textarea.displayName = 'Textarea';
 
-const _excluded$5 = ["className", "label", "error", "helperText", "size", "fullWidth", "multiple", "accept", "buttonText", "id"];
+const _excluded$a = ["className", "label", "error", "helperText", "size", "fullWidth", "multiple", "accept", "buttonText", "id"];
 const InputFile = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
       error,
       helperText,
-      size = "md",
+      size = 'md',
       fullWidth = false,
       multiple = false,
       accept,
-      buttonText = "Choose File",
+      buttonText = 'Choose File',
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   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,
+    className: clsx('input-file-container', fullWidth && 'input-file-container--full-width', className),
     children: [label && jsxRuntimeExports.jsx("label", {
-      className: cssClasses.inputFileLabel,
+      className: "input-file-label",
       htmlFor: inputId,
       children: label
     }), jsxRuntimeExports.jsxs("div", {
-      className: cssClasses.inputFileWrapper,
+      className: "input-file-wrapper",
       children: [jsxRuntimeExports.jsx("input", _objectSpread2({
         type: "file",
-        className: cssClasses.inputFileHidden,
+        className: "input-file-hidden",
         ref: ref,
         id: inputId,
         multiple: multiple,
         accept: accept
       }, props)), jsxRuntimeExports.jsxs("div", {
-        className: "".concat(uploadAreaClass, " ").concat(uploadAreaFullWidthClass),
+        className: clsx('input-file-upload-area', error && 'input-file-upload-area--error', fullWidth && 'input-file-upload-area--full-width'),
         children: [jsxRuntimeExports.jsx("span", {
-          className: cssClasses.inputFileButtonText,
+          className: "input-file-button-text",
           children: buttonText
         }), multiple && jsxRuntimeExports.jsx("span", {
-          className: cssClasses.inputFileMultipleText,
+          className: "input-file-multiple-text",
           children: "or drag and drop"
         })]
       })]
     }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: helperTextClass,
+      className: clsx('input-helper-text', error && 'input-helper-text--error'),
       children: error || helperText
     })]
   });
 });
-InputFile.displayName = "InputFile";
+InputFile.displayName = 'InputFile';
 
-const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
+const _excluded$9 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
 const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
       error,
       helperText,
-      size = "md",
+      size = 'md',
       fullWidth = false,
       indeterminate = false,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   React__default.useEffect(() => {
-    if (ref && typeof ref === "object" && ref.current) {
+    if (ref && typeof ref === 'object' && ref.current) {
       ref.current.indeterminate = indeterminate;
     }
   }, [indeterminate, ref]);
-  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,
+    className: clsx('checkbox-container', fullWidth && 'checkbox-container--full-width', className),
     children: [jsxRuntimeExports.jsx("div", {
-      className: cssClasses.checkboxWrapper,
+      className: "checkbox-wrapper",
       children: jsxRuntimeExports.jsx("input", _objectSpread2({
         type: "checkbox",
-        className: checkboxClass,
+        className: clsx('checkbox', "checkbox--".concat(size), error && 'checkbox--error'),
         ref: ref,
         id: checkboxId
       }, props))
     }), jsxRuntimeExports.jsxs("div", {
-      className: cssClasses.checkboxLabelContainer,
+      className: "checkbox-label-container",
       children: [label && jsxRuntimeExports.jsx("label", {
-        className: cssClasses.checkboxLabel,
+        className: "checkbox-label",
         htmlFor: checkboxId,
         children: label
       }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-        className: helperTextClass,
+        className: clsx('input-helper-text', error && 'input-helper-text--error'),
         children: error || helperText
       })]
     })]
   });
 });
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = 'Checkbox';
 
-const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
+const _excluded$8 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
 const Radio = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
       error,
       helperText,
-      size = "md",
+      size = 'md',
       fullWidth = false,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   const radioId = id || "radio-".concat(Math.random().toString(36).substr(2, 9));
-  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,
+    className: clsx('radio-container', fullWidth && 'radio-container--full-width', className),
     children: [jsxRuntimeExports.jsx("div", {
-      className: cssClasses.radioWrapper,
+      className: "radio-wrapper",
       children: jsxRuntimeExports.jsx("input", _objectSpread2({
         type: "radio",
-        className: radioClass,
+        className: clsx('radio', error && 'radio--error'),
         ref: ref,
         id: radioId
       }, props))
     }), jsxRuntimeExports.jsxs("div", {
-      className: cssClasses.radioLabelContainer,
+      className: "radio-label-container",
       children: [label && jsxRuntimeExports.jsx("label", {
-        className: cssClasses.radioLabel,
+        className: "radio-label",
         htmlFor: radioId,
         children: label
       }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-        className: helperTextClass,
+        className: clsx('input-helper-text', error && 'input-helper-text--error'),
         children: error || helperText
       })]
     })]
   });
 });
-Radio.displayName = "Radio";
+Radio.displayName = 'Radio';
 
-const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
+const _excluded$7 = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
 const Select = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       className,
       label,
       error,
       helperText,
-      size = "md",
+      size = 'md',
       fullWidth = false,
       options,
       placeholder,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   const selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
-  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,
+    className: clsx('select-container', fullWidth && 'select-container--full-width', className),
     children: [label && jsxRuntimeExports.jsx("label", {
-      className: cssClasses.selectLabel,
+      className: "select-label",
       htmlFor: selectId,
       children: label
     }), jsxRuntimeExports.jsxs("div", {
-      className: cssClasses.selectWrapper,
+      className: "select-wrapper",
       children: [jsxRuntimeExports.jsxs("select", _objectSpread2(_objectSpread2({
-        className: "".concat(selectClass, " ").concat(selectFullWidthClass),
+        className: clsx('select', error && 'select--error', fullWidth && 'select--full-width'),
         ref: ref,
         id: selectId
       }, props), {}, {
@@ -1797,7 +1704,7 @@ const Select = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           children: option.label
         }, option.value))]
       })), jsxRuntimeExports.jsx("div", {
-        className: cssClasses.selectIcon,
+        className: "select-icon",
         children: jsxRuntimeExports.jsx("svg", {
           width: "16",
           height: "16",
@@ -1805,7 +1712,7 @@ const Select = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           stroke: "currentColor",
           viewBox: "0 0 24 24",
           style: {
-            color: "#9ca3af"
+            color: '#9ca3af'
           },
           children: jsxRuntimeExports.jsx("path", {
             strokeLinecap: "round",
@@ -1816,12 +1723,12 @@ const Select = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         })
       })]
     }), (error || helperText) && jsxRuntimeExports.jsx("p", {
-      className: helperTextClass,
+      className: clsx('input-helper-text', error && 'input-helper-text--error'),
       children: error || helperText
     })]
   });
 });
-Select.displayName = "Select";
+Select.displayName = 'Select';
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -1871,7 +1778,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
-const _excluded$1 = ["color", "size", "strokeWidth", "absoluteStrokeWidth", "className", "children", "iconNode"];
+const _excluded$6 = ["color", "size", "strokeWidth", "absoluteStrokeWidth", "className", "children", "iconNode"];
 const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       color = "currentColor",
@@ -1882,7 +1789,7 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
       children,
       iconNode
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/createElement("svg", _objectSpread2(_objectSpread2(_objectSpread2({
     ref
   }, defaultAttributes), {}, {
@@ -1899,13 +1806,13 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), ...(Array.isArray(children) ? children : [children])]);
 });
 
-const _excluded = ["className"];
+const _excluded$5 = ["className"];
 const createLucideIcon = (iconName, iconNode) => {
   const Component = /*#__PURE__*/forwardRef((_ref, ref) => {
     let {
         className
       } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$5);
     return /*#__PURE__*/createElement(Icon, _objectSpread2({
       ref,
       iconNode,
@@ -2011,7 +1918,7 @@ const isDisabled = (date, disabledPast, disabledFuture) => {
   }
   return false;
 };
-const DatePicker = (_ref, props) => {
+const DatePicker = _ref => {
   let {
     format = 'DD/MM/YYYY',
     language = 'en',
@@ -2024,8 +1931,13 @@ const DatePicker = (_ref, props) => {
     showClear = true,
     showToday = true,
     disabledPast = false,
-    // Default to false
-    disabledFuture = false // Default to false
+    disabledFuture = false,
+    fullWidth = false,
+    label,
+    error,
+    helperText,
+    id,
+    showIcon = true
   } = _ref;
   // State
   const [isOpen, setIsOpen] = useState(false);
@@ -2040,6 +1952,7 @@ const DatePicker = (_ref, props) => {
   // Constants
   const includeTime = format.includes('HH:mm');
   const t = translations[language];
+  const inputId = id || "datepicker-".concat(Math.random().toString(36).substr(2, 9));
   // Initialize from value prop
   useEffect(() => {
     if (value) {
@@ -2200,32 +2113,37 @@ const DatePicker = (_ref, props) => {
   const calendarDays = generateCalendarDays();
   const today = new Date();
   const displayYear = yearType === 'be' ? convertYear(currentYear) : currentYear;
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [jsxRuntimeExports.jsx("style", {
-      children: "\n      .datetime-picker {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  max-width: 300px;\n}\n\n.datetime-picker-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.datetime-picker-input {\n  width: 100%;\n  padding: 8px 40px 8px 12px;\n  border: 1px solid #e1e5e9;\n  font-size: 14px;\n  background-color: #ffffff;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  box-sizing: border-box;\n}\n\n.datetime-picker-input:hover {\n  border-color: #d1d5db;\n}\n\n.datetime-picker-input:focus {\n  outline: none;\n  border-color: #3b82f6;\n}\n\n.datetime-picker-input:disabled {\n  background-color: #f9fafb;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.datetime-picker-icon {\n  position: absolute;\n  right: 6px;\n  top: 6px;\n  font-size: 16px;\n  pointer-events: none;\n  color: #666666;\n}\n\n.datetime-picker-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: 4px;\n  background: #ffffff;\n  border: 1px solid #e1e5e9;\n  /* border-radius: 8px; */\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n  padding: 16px;\n  min-width: 320px;\n}\n\n.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n\n.nav-button {\n  background: none;\n  border: none;\n  padding: 8px;\n  /* border-radius: 4px; */\n  cursor: pointer;\n  font-size: 18px;\n  color: #6b7280;\n  transition: all 0.2s ease;\n}\n\n.nav-button:hover {\n  background-color: #f3f4f6;\n  color: #374151;\n}\n\n.current-month-year {\n  font-size: 16px;\n  font-weight: 600;\n  color: #374151;\n  min-width: 140px;\n  text-align: center;\n}\n\n.weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n  margin-bottom: 8px;\n}\n\n.weekday {\n  text-align: center;\n  padding: 8px 4px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #6b7280;\n  text-transform: uppercase;\n}\n\n.calendar-days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n  margin-bottom: 16px;\n}\n\n.calendar-day {\n  background: none;\n  border: none;\n  padding: 8px;\n  text-align: center;\n  cursor: pointer;\n  /* border-radius: 4px; */\n  font-size: 14px;\n  color: #374151;\n  transition: all 0.2s ease;\n  min-height: 32px;\n}\n\n.calendar-day:hover {\n  background-color: #f3f4f6;\n}\n\n.calendar-day.other-month {\n  color: #9ca3af;\n}\n\n.calendar-day.selected {\n  background-color: #007ac2;\n  color: #ffffff;\n}\n\n.calendar-day.today {\n  background-color: #e2f3fe;\n  color: #007ac2;\n  font-weight: 600;\n}\n\n.calendar-day.selected.today {\n  background-color: #007ac2;\n  color: #ffffff;\n}\n\n.calendar-day.disabled {\n  color: #dcdcdc;\n  cursor: not-allowed;\n}\n\n.calendar-day:hover.disabled {\n  background-color: none;\n}\n\n.time-picker {\n  display: flex;\n  gap: 16px;\n  padding: 16px 0;\n  border-top: 1px solid #e5e7eb;\n  border-bottom: 1px solid #e5e7eb;\n  margin: 16px 0;\n}\n\n.time-picker-section {\n  flex: 1;\n}\n\n.time-picker-section label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: #6b7280;\n  margin-bottom: 4px;\n}\n\n.time-select {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid #d1d5db;\n  /* border-radius: 4px; */\n  font-size: 14px;\n  background-color: #ffffff;\n  box-sizing: border-box;\n}\n\n.calendar-footer {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.footer-button {\n  padding: 6px 12px;\n  border: 1px solid #d1d5db;\n  /* border-radius: 4px; */\n  background: #ffffff;\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.2s ease;\n}\n\n.footer-button:hover {\n  background-color: #f9fafb;\n}\n\n.today-button {\n  color: #007ac2;\n  border-color: #007ac2;\n}\n\n.today-button:hover {\n  background-color: #ecfdf5;\n}\n\n.clear-button {\n  color: #007ac2;\n  border-color: #007ac2;\n}\n\n.clear-button:hover {\n  background-color: #fef2f2;\n}\n\n.confirm-button {\n  color: #007ac2;\n  border-color: #007ac2;\n}\n\n.confirm-button:hover {\n  background-color: #eff6ff;\n}\n\n      "
+  const containerClasses = ['datepicker-container', fullWidth ? 'datepicker-container-full-width' : '', className].filter(Boolean).join(' ');
+  const inputClasses = ['datepicker-input', error ? 'datepicker-input-error' : ''].filter(Boolean).join(' ');
+  return jsxRuntimeExports.jsxs("div", {
+    className: containerClasses,
+    children: [label && jsxRuntimeExports.jsx("label", {
+      className: "input-label",
+      htmlFor: inputId,
+      children: label
     }), jsxRuntimeExports.jsxs("div", {
       ref: containerRef,
-      className: "datetime-picker ".concat(className),
+      className: "datepicker ".concat(fullWidth ? 'datepicker-full-width' : ''),
       children: [jsxRuntimeExports.jsxs("div", {
-        className: "datetime-picker-input-wrapper",
-        children: [jsxRuntimeExports.jsx("input", _objectSpread2({
+        className: "datepicker-input-wrapper",
+        children: [jsxRuntimeExports.jsx("input", {
           type: "text",
           value: inputValue,
           placeholder: placeholder || format,
           disabled: disabled,
           readOnly: true,
           onClick: () => !disabled && setIsOpen(true),
-          className: "datetime-picker-input"
-        }, props)), jsxRuntimeExports.jsx("div", {
-          className: "datetime-picker-icon",
+          className: inputClasses,
+          id: inputId
+        }), showIcon && jsxRuntimeExports.jsx("div", {
+          className: "datepicker-icon",
           children: jsxRuntimeExports.jsx(CalendarDays, {
             size: "18"
           })
         })]
       }), isOpen && jsxRuntimeExports.jsx("div", {
-        className: "datetime-picker-dropdown",
+        className: "datepicker-dropdown",
         children: jsxRuntimeExports.jsxs("div", {
-          className: "datetime-picker-calendar",
           children: [jsxRuntimeExports.jsxs("div", {
             className: "calendar-header",
             children: [jsxRuntimeExports.jsx("button", {
@@ -2273,6 +2191,7 @@ const DatePicker = (_ref, props) => {
               const isSelected = selectedDate && isSameDay(actualDate, selectedDate);
               const isToday = isSameDay(actualDate, today);
               const isDayDisabled = isDisabled(actualDate, disabledPast, disabledFuture);
+              const dayClasses = ['calendar-day', dateInfo.isOtherMonth ? 'calendar-day-other-month' : '', isSelected ? 'calendar-day-selected' : '', isToday ? 'calendar-day-today' : '', isDayDisabled ? 'calendar-day-disabled' : ''].filter(Boolean).join(' ');
               return jsxRuntimeExports.jsx("button", {
                 type: "button",
                 onClick: () => {
@@ -2299,7 +2218,7 @@ const DatePicker = (_ref, props) => {
                   }
                 },
                 disabled: isDayDisabled,
-                className: "\n                        calendar-day\n                        ".concat(dateInfo.isOtherMonth ? 'other-month' : '', "\n                        ").concat(isSelected ? 'selected' : '', "\n                        ").concat(isToday ? 'today' : '', "\n                        ").concat(isDayDisabled ? 'disabled' : '', "\n                      ").trim(),
+                className: dayClasses,
                 children: dateInfo.day
               }, index);
             })
@@ -2342,7 +2261,7 @@ const DatePicker = (_ref, props) => {
               type: "button",
               onClick: handleToday,
               disabled: isDisabled(today, disabledPast, disabledFuture),
-              className: "footer-button today-button ".concat(isDisabled(today, disabledPast, disabledFuture) ? 'disabled' : ''),
+              className: "footer-button today-button ".concat(isDisabled(today, disabledPast, disabledFuture) ? 'calendar-day-disabled' : ''),
               children: t.today
             }), showClear && jsxRuntimeExports.jsx("button", {
               type: "button",
@@ -2358,11 +2277,638 @@ const DatePicker = (_ref, props) => {
           })]
         })
       })]
+    }), (error || helperText) && jsxRuntimeExports.jsx("p", {
+      className: "input-helper-text ".concat(error ? 'input-helper-text-error' : ''),
+      children: error || helperText
+    })]
+  });
+};
+
+const _excluded$4 = ["columns", "data", "className", "emptyMessage", "pagination", "paginationPerPage", "paginationRowsPerPageOptions", "search", "searchPlaceholder", "searchableColumns", "onSort", "onPageChange", "onRowsPerPageChange", "onSearch"];
+const DataTable = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+      columns,
+      data,
+      className,
+      emptyMessage = "No data available",
+      pagination = false,
+      paginationPerPage = 10,
+      paginationRowsPerPageOptions = [10, 25, 50, 100],
+      search = false,
+      searchPlaceholder = "Search...",
+      searchableColumns,
+      onSort,
+      onPageChange,
+      onRowsPerPageChange,
+      onSearch
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  const [sortField, setSortField] = useState(null);
+  const [sortDirection, setSortDirection] = useState("asc");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(paginationPerPage);
+  const rowsPerPageOptions = useMemo(() => {
+    const options = [...paginationRowsPerPageOptions];
+    if (!options.includes(paginationPerPage)) {
+      options.push(paginationPerPage);
+      options.sort((a, b) => a - b);
+    }
+    return options;
+  }, [paginationRowsPerPageOptions, paginationPerPage]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const defaultSearchableColumns = searchableColumns || columns.map(col => col.key);
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return data;
+    return data.filter(row => defaultSearchableColumns.some(key => String(row[key]).toLowerCase().includes(searchTerm.toLowerCase())));
+  }, [data, searchTerm, defaultSearchableColumns]);
+  const sortedData = useMemo(() => {
+    if (!sortField) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const aValue = a[sortField];
+      const bValue = b[sortField];
+      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [filteredData, sortField, sortDirection]);
+  const paginatedData = useMemo(() => {
+    if (!pagination) return sortedData;
+    const start = (currentPage - 1) * rowsPerPage;
+    return sortedData.slice(start, start + rowsPerPage);
+  }, [sortedData, currentPage, rowsPerPage, pagination]);
+  const totalPages = Math.ceil(sortedData.length / rowsPerPage);
+  const handleSort = columnKey => {
+    const newDirection = sortField === columnKey && sortDirection === "asc" ? "desc" : "asc";
+    setSortField(columnKey);
+    setSortDirection(newDirection);
+    onSort === null || onSort === void 0 || onSort(columnKey, newDirection);
+  };
+  const handlePageChange = page => {
+    setCurrentPage(page);
+    onPageChange === null || onPageChange === void 0 || onPageChange(page);
+  };
+  const handleRowsPerPageChange = newRowsPerPage => {
+    setRowsPerPage(newRowsPerPage);
+    setCurrentPage(1);
+    onRowsPerPageChange === null || onRowsPerPageChange === void 0 || onRowsPerPageChange(newRowsPerPage);
+  };
+  const handleSearchChange = e => {
+    const term = e.target.value;
+    setSearchTerm(term);
+    setCurrentPage(1);
+    onSearch === null || onSearch === void 0 || onSearch(term);
+  };
+  const renderPagination = () => {
+    if (!pagination) return null;
+    const pageNumbers = [];
+    const maxPagesToShow = 5;
+    const halfPages = Math.floor(maxPagesToShow / 2);
+    let startPage = Math.max(1, currentPage - halfPages);
+    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+    if (endPage - startPage < maxPagesToShow - 1) {
+      startPage = Math.max(1, endPage - maxPagesToShow + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(i);
+    }
+    return jsxRuntimeExports.jsxs("div", {
+      className: "data-table-pagination-container",
+      children: [jsxRuntimeExports.jsxs("div", {
+        children: ["Rows per page:", jsxRuntimeExports.jsx("select", {
+          value: rowsPerPage,
+          onChange: e => handleRowsPerPageChange(Number(e.target.value)),
+          className: "data-table-pagination-select",
+          children: rowsPerPageOptions.map(option => jsxRuntimeExports.jsx("option", {
+            value: option,
+            children: option
+          }, option))
+        })]
+      }), jsxRuntimeExports.jsxs("div", {
+        className: "data-table-pagination-controls",
+        children: [jsxRuntimeExports.jsx("button", {
+          onClick: () => handlePageChange(1),
+          disabled: currentPage === 1,
+          className: "data-table-pagination-button",
+          children: "First"
+        }), jsxRuntimeExports.jsx("button", {
+          onClick: () => handlePageChange(currentPage - 1),
+          disabled: currentPage === 1,
+          className: "data-table-pagination-button",
+          children: "Previous"
+        }), startPage > 1 && jsxRuntimeExports.jsx("span", {
+          className: "pagination-ellipsis",
+          children: "..."
+        }), pageNumbers.map(page => jsxRuntimeExports.jsx("button", {
+          onClick: () => handlePageChange(page),
+          className: "data-table-pagination-button ".concat(currentPage === page ? 'active' : ''),
+          children: page
+        }, page)), endPage < totalPages && jsxRuntimeExports.jsx("span", {
+          className: "pagination-ellipsis",
+          children: "..."
+        }), jsxRuntimeExports.jsx("button", {
+          onClick: () => handlePageChange(currentPage + 1),
+          disabled: currentPage === totalPages,
+          className: "data-table-pagination-button",
+          children: "Next"
+        }), jsxRuntimeExports.jsx("button", {
+          onClick: () => handlePageChange(totalPages),
+          disabled: currentPage === totalPages,
+          className: "data-table-pagination-button",
+          children: "Last"
+        })]
+      })]
+    });
+  };
+  return jsxRuntimeExports.jsxs("div", {
+    className: "data-table-container",
+    children: [search && jsxRuntimeExports.jsx("div", {
+      className: "data-table-search-container",
+      children: jsxRuntimeExports.jsx(Input, {
+        type: "text",
+        placeholder: searchPlaceholder,
+        value: searchTerm,
+        onChange: handleSearchChange,
+        fullWidth: true
+      })
+    }), jsxRuntimeExports.jsxs("table", _objectSpread2(_objectSpread2({
+      className: "data-table ".concat(className || ''),
+      ref: ref
+    }, props), {}, {
+      children: [jsxRuntimeExports.jsx("thead", {
+        className: "data-table-header",
+        children: jsxRuntimeExports.jsx("tr", {
+          children: columns.map(column => {
+            const thClasses = ["data-table-header-cell", column.align === "center" && "text-center", column.align === "right" && "text-right", column.sortable && "sortable"].filter(Boolean).join(" ");
+            const contentClasses = ["header-cell-content", "justify-".concat(column.align || 'start')].join(' ');
+            return jsxRuntimeExports.jsx("th", {
+              className: thClasses,
+              style: {
+                width: column.width
+              },
+              onClick: column.sortable ? () => handleSort(column.key) : undefined,
+              children: jsxRuntimeExports.jsxs("div", {
+                className: contentClasses,
+                children: [column.label, column.sortable && sortField === column.key && jsxRuntimeExports.jsx("span", {
+                  className: "sort-icon",
+                  children: sortDirection === "asc" ? "↑" : "↓"
+                })]
+              })
+            }, column.key);
+          })
+        })
+      }), jsxRuntimeExports.jsx("tbody", {
+        className: "data-table-body",
+        children: paginatedData.length === 0 ? jsxRuntimeExports.jsx("tr", {
+          children: jsxRuntimeExports.jsx("td", {
+            colSpan: columns.length,
+            className: "data-table-empty-cell",
+            children: emptyMessage
+          })
+        }) : paginatedData.map((row, rowIndex) => jsxRuntimeExports.jsx("tr", {
+          className: "data-table-row",
+          children: columns.map(column => {
+            const value = row[column.key];
+            const cellContent = column.render ? column.render(value, row, rowIndex) : value;
+            const tdClasses = ["data-table-cell", column.align === "center" && "text-center", column.align === "right" && "text-right"].filter(Boolean).join(" ");
+            return jsxRuntimeExports.jsx("td", {
+              className: tdClasses,
+              children: cellContent
+            }, column.key);
+          })
+        }, rowIndex))
+      })]
+    })), renderPagination()]
+  });
+});
+DataTable.displayName = "DataTable";
+
+const _excluded$3 = ["options", "value", "onChange", "placeholder", "disabled", "fullWidth", "label", "helperText", "error", "multiple"];
+const Autocomplete = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+      options,
+      value,
+      onChange,
+      placeholder = 'Type to search...',
+      disabled = false,
+      fullWidth = false,
+      label,
+      helperText,
+      error = false,
+      multiple = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  const getInitialInputValue = () => {
+    if (!multiple && value && typeof value === 'string') {
+      return value;
+    }
+    return '';
+  };
+  const [inputValue, setInputValue] = useState(getInitialInputValue);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const currentValues = Array.isArray(value) ? value : value ? [value] : [];
+  const isSelected = option => currentValues.includes(option);
+  useEffect(() => {
+    if (!multiple && value && typeof value === 'string') {
+      setInputValue(value);
+    } else if (!multiple && !value) {
+      setInputValue('');
+    }
+  }, [value, multiple]);
+  useEffect(() => {
+    const filtered = options.filter(option => option.toLowerCase().includes(inputValue.toLowerCase()) && (!multiple || !isSelected(option)));
+    setFilteredOptions(filtered);
+    setSelectedIndex(-1);
+  }, [inputValue, options, multiple, currentValues]);
+  useEffect(() => {
+    if (!multiple && showDropdown && inputValue === '' && options.length > 0) {
+      setFilteredOptions(options.filter(option => !isSelected(option)));
+    }
+  }, [showDropdown, inputValue, options, multiple, isSelected]);
+  const handleInputChange = e => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setShowDropdown(true);
+    if (!multiple && value && newValue !== value) {
+      onChange === null || onChange === void 0 || onChange('');
+    }
+  };
+  const handleInputFocus = () => {
+    setShowDropdown(true);
+    if (!multiple && (inputValue === '' || !value)) {
+      setFilteredOptions(options);
+    }
+  };
+  const handleInputBlur = () => {
+    setTimeout(() => setShowDropdown(false), 150);
+  };
+  const handleOptionClick = option => {
+    if (multiple) {
+      const newValues = isSelected(option) ? currentValues.filter(v => v !== option) : [...currentValues, option];
+      onChange === null || onChange === void 0 || onChange(newValues);
+      setInputValue('');
+    } else {
+      onChange === null || onChange === void 0 || onChange(option);
+      setInputValue(option);
+      setFilteredOptions([]);
+    }
+    setShowDropdown(false);
+  };
+  const handleRemoveTag = option => {
+    if (multiple) {
+      const newValues = currentValues.filter(v => v !== option);
+      onChange === null || onChange === void 0 || onChange(newValues);
+    }
+  };
+  const handleKeyDown = e => {
+    if (!showDropdown) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 1, filteredOptions.length - 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 1, -1));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (selectedIndex >= 0 && filteredOptions[selectedIndex]) {
+          handleOptionClick(filteredOptions[selectedIndex]);
+        }
+        break;
+      case 'Escape':
+        setShowDropdown(false);
+        setSelectedIndex(-1);
+        break;
+    }
+  };
+  return jsxRuntimeExports.jsxs("div", {
+    className: clsx('autocomplete-container', fullWidth && 'autocomplete-container--full-width'),
+    children: [label && jsxRuntimeExports.jsx("label", {
+      className: "input-label",
+      children: label
+    }), jsxRuntimeExports.jsxs("div", {
+      className: "autocomplete-wrapper",
+      children: [jsxRuntimeExports.jsxs("div", {
+        className: clsx('autocomplete-input-area', error && 'autocomplete-input-area--error', disabled && 'autocomplete-input-area--disabled', fullWidth && 'autocomplete-input-area--full-width'),
+        children: [multiple && currentValues.map((val, index) => jsxRuntimeExports.jsxs("span", {
+          className: "autocomplete-tag",
+          children: [val, jsxRuntimeExports.jsx("button", {
+            type: "button",
+            onClick: () => handleRemoveTag(val),
+            className: "autocomplete-tag-remove",
+            children: "\u00D7"
+          })]
+        }, "".concat(val, "-").concat(index))), jsxRuntimeExports.jsx("input", _objectSpread2({
+          ref: ref || inputRef,
+          type: "text",
+          value: inputValue,
+          onChange: handleInputChange,
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur,
+          onKeyDown: handleKeyDown,
+          placeholder: multiple ? currentValues.length > 0 ? '' : placeholder : inputValue ? '' : placeholder,
+          disabled: disabled,
+          className: "autocomplete-input"
+        }, props))]
+      }), showDropdown && filteredOptions.length > 0 && jsxRuntimeExports.jsx("ul", {
+        ref: dropdownRef,
+        className: "autocomplete-dropdown",
+        children: filteredOptions.map((option, index) => jsxRuntimeExports.jsx("li", {
+          onClick: () => handleOptionClick(option),
+          className: clsx('autocomplete-option', selectedIndex === index && 'autocomplete-option--selected'),
+          children: option
+        }, option))
+      })]
+    }), helperText && jsxRuntimeExports.jsx("div", {
+      className: clsx('input-helper-text', error && 'input-helper-text--error'),
+      children: helperText
     })]
   });
+});
+Autocomplete.displayName = 'Autocomplete';
+
+const _excluded$2 = ["component", "sx", "children", "className", "style", "display", "flexDirection", "justifyContent", "alignItems", "flexWrap", "gap", "p", "pt", "pr", "pb", "pl", "px", "py", "m", "mt", "mr", "mb", "ml", "mx", "my", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "bgcolor", "color", "borderRadius", "boxShadow", "position", "top", "right", "bottom", "left", "zIndex", "overflow", "textAlign"];
+// Hardcoded theme for now
+const theme = {
+  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',
+    '20': '5rem',
+    '24': '6rem',
+    '32': '8rem',
+    '40': '10rem',
+    '48': '12rem',
+    '56': '14rem',
+    '64': '16rem'
+  },
+  borderRadius: {
+    sm: '0.125rem',
+    md: '0.25rem',
+    lg: '0.5rem',
+    full: '9999px'
+  },
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    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)'
+  }
+};
+// Helper function to convert system props to a style object
+const createSystemStyles = props => {
+  const styles = {};
+  if (props.display) styles.display = props.display;
+  if (props.flexDirection) styles.flexDirection = props.flexDirection;
+  if (props.justifyContent) styles.justifyContent = props.justifyContent;
+  if (props.alignItems) styles.alignItems = props.alignItems;
+  if (props.flexWrap) styles.flexWrap = props.flexWrap;
+  if (props.gap) styles.gap = theme.spacing[props.gap];
+  // Padding
+  if (props.p) styles.padding = theme.spacing[props.p];
+  if (props.pt) styles.paddingTop = theme.spacing[props.pt];
+  if (props.pr) styles.paddingRight = theme.spacing[props.pr];
+  if (props.pb) styles.paddingBottom = theme.spacing[props.pb];
+  if (props.pl) styles.paddingLeft = theme.spacing[props.pl];
+  if (props.px) {
+    styles.paddingLeft = theme.spacing[props.px];
+    styles.paddingRight = theme.spacing[props.px];
+  }
+  if (props.py) {
+    styles.paddingTop = theme.spacing[props.py];
+    styles.paddingBottom = theme.spacing[props.py];
+  }
+  // Margin
+  if (props.m) styles.margin = theme.spacing[props.m];
+  if (props.mt) styles.marginTop = theme.spacing[props.mt];
+  if (props.mr) styles.marginRight = theme.spacing[props.mr];
+  if (props.mb) styles.marginBottom = theme.spacing[props.mb];
+  if (props.ml) styles.marginLeft = theme.spacing[props.ml];
+  if (props.mx) {
+    styles.marginLeft = theme.spacing[props.mx];
+    styles.marginRight = theme.spacing[props.mx];
+  }
+  if (props.my) {
+    styles.marginTop = theme.spacing[props.my];
+    styles.marginBottom = theme.spacing[props.my];
+  }
+  // Dimensions
+  if (props.width) styles.width = typeof props.width === 'number' ? "".concat(props.width, "px") : props.width;
+  if (props.height) styles.height = typeof props.height === 'number' ? "".concat(props.height, "px") : props.height;
+  if (props.minWidth) styles.minWidth = typeof props.minWidth === 'number' ? "".concat(props.minWidth, "px") : props.minWidth;
+  if (props.minHeight) styles.minHeight = typeof props.minHeight === 'number' ? "".concat(props.minHeight, "px") : props.minHeight;
+  if (props.maxWidth) styles.maxWidth = typeof props.maxWidth === 'number' ? "".concat(props.maxWidth, "px") : props.maxWidth;
+  if (props.maxHeight) styles.maxHeight = typeof props.maxHeight === 'number' ? "".concat(props.maxHeight, "px") : props.maxHeight;
+  // Colors
+  if (props.bgcolor) styles.backgroundColor = props.bgcolor;
+  if (props.color) styles.color = props.color;
+  // Border radius
+  if (props.borderRadius) styles.borderRadius = theme.borderRadius[props.borderRadius];
+  // Box shadow
+  if (props.boxShadow) styles.boxShadow = theme.shadows[props.boxShadow];
+  // Position
+  if (props.position) styles.position = props.position;
+  if (props.top) styles.top = typeof props.top === 'number' ? "".concat(props.top, "px") : props.top;
+  if (props.right) styles.right = typeof props.right === 'number' ? "".concat(props.right, "px") : props.right;
+  if (props.bottom) styles.bottom = typeof props.bottom === 'number' ? "".concat(props.bottom, "px") : props.bottom;
+  if (props.left) styles.left = typeof props.left === 'number' ? "".concat(props.left, "px") : props.left;
+  if (props.zIndex) styles.zIndex = props.zIndex;
+  // Overflow
+  if (props.overflow) styles.overflow = props.overflow;
+  // Text align
+  if (props.textAlign) styles.textAlign = props.textAlign;
+  return styles;
 };
+const Box = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+      component = 'div',
+      sx,
+      children,
+      className,
+      style,
+      // System props
+      display,
+      flexDirection,
+      justifyContent,
+      alignItems,
+      flexWrap,
+      gap,
+      p,
+      pt,
+      pr,
+      pb,
+      pl,
+      px,
+      py,
+      m,
+      mt,
+      mr,
+      mb,
+      ml,
+      mx,
+      my,
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      bgcolor,
+      color,
+      borderRadius,
+      boxShadow,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      textAlign
+    } = props,
+    otherProps = _objectWithoutProperties(props, _excluded$2);
+  const Component = component;
+  // Create system styles from individual props
+  const systemProps = {
+    display,
+    flexDirection,
+    justifyContent,
+    alignItems,
+    flexWrap,
+    gap,
+    p,
+    pt,
+    pr,
+    pb,
+    pl,
+    px,
+    py,
+    m,
+    mt,
+    mr,
+    mb,
+    ml,
+    mx,
+    my,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    bgcolor,
+    color,
+    borderRadius,
+    boxShadow,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    textAlign
+  };
+  const systemStyles = createSystemStyles(systemProps);
+  const sxStyles = sx ? createSystemStyles(sx) : {};
+  const combinedStyles = _objectSpread2(_objectSpread2(_objectSpread2({}, systemStyles), sxStyles), style);
+  return jsxRuntimeExports.jsx(Component, _objectSpread2(_objectSpread2({
+    className: className,
+    style: combinedStyles,
+    ref: ref
+  }, otherProps), {}, {
+    children: children
+  }));
+});
+Box.displayName = 'Box';
+
+const _excluded$1 = ["className", "maxWidth", "disableGutters", "fixed", "children"];
+const Container = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+      className,
+      maxWidth = 'lg',
+      disableGutters = false,
+      fixed = false,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  const classNames = clsx('container', !disableGutters && 'container--gutters', fixed && 'container--fixed', maxWidth !== 'none' && "container--max-width-".concat(maxWidth), className);
+  return jsxRuntimeExports.jsx("div", _objectSpread2(_objectSpread2({
+    className: classNames,
+    ref: ref
+  }, props), {}, {
+    children: children
+  }));
+});
+Container.displayName = 'Container';
+
+const _excluded = ["children", "className", "container", "item", "spacing", "direction", "justifyContent", "alignItems", "wrap", "xs", "sm", "md", "lg", "xl"];
+const Grid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+      children,
+      className,
+      container = false,
+      item = false,
+      spacing = 0,
+      direction = 'row',
+      justifyContent,
+      alignItems,
+      wrap = 'wrap',
+      xs,
+      sm,
+      md,
+      lg,
+      xl
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const classNames = ['grid'];
+  if (container) {
+    classNames.push('grid-container');
+    classNames.push("grid-direction-".concat(direction));
+    if (justifyContent) {
+      classNames.push("grid-justify-content-".concat(justifyContent));
+    }
+    if (alignItems) {
+      classNames.push("grid-align-items-".concat(alignItems));
+    }
+    classNames.push("grid-wrap-".concat(wrap));
+    if (spacing) {
+      classNames.push("grid-spacing-".concat(spacing));
+    }
+  }
+  if (item) {
+    classNames.push('grid-item');
+    if (xs) classNames.push("grid-xs-".concat(String(xs)));
+    if (sm) classNames.push("grid-sm-".concat(String(sm)));
+    if (md) classNames.push("grid-md-".concat(String(md)));
+    if (lg) classNames.push("grid-lg-".concat(String(lg)));
+    if (xl) classNames.push("grid-xl-".concat(String(xl)));
+  }
+  if (className) {
+    classNames.push(className);
+  }
+  return jsxRuntimeExports.jsx("div", _objectSpread2(_objectSpread2({
+    className: classNames.join(' '),
+    ref: ref
+  }, props), {}, {
+    children: children
+  }));
+});
+Grid.displayName = 'Grid';
 
 // Ensure React is available before importing components
 
-export { Button, Checkbox, DatePicker, Input, InputFile, Radio, Select, Textarea, cssClasses };
+export { Autocomplete, Box, Button, Checkbox, Container, DataTable, DatePicker, Grid, Input, InputFile, Radio, Select, Textarea };
 //# sourceMappingURL=index.esm.js.map