@eintrek/erp-theme 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,23 +1,43 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React__default from 'react';
-import React__default__default, { createContext, memo as memo$1, useContext, useCallback, forwardRef, useRef, useState, useEffect, useMemo } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import * as LucideIcons from 'lucide-react';
-import { X } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+'use strict';
+
+var jsxRuntime$1 = require('react/jsx-runtime');
+var React__default = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var LucideIcons = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__default__namespace = /*#__PURE__*/_interopNamespaceDefault(React__default);
+var LucideIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(LucideIcons);
 
 function cn(...inputs) {
-    return twMerge(clsx(inputs));
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 
-const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
+const buttonVariants = classVarianceAuthority.cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 ring-gray-400 disabled:pointer-events-none disabled:opacity-50", {
     variants: {
         variant: {
             default: "shadow hover:opacity-90",
             destructive: "shadow-sm hover:opacity-90",
-            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-gray-300 bg-white shadow-sm hover:bg-accent hover:text-accent-foreground",
             secondary: "shadow-sm hover:opacity-80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
             link: "underline-offset-4 hover:underline",
@@ -37,53 +57,53 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
 const DynamicIcon$1 = ({ name, size = 16, className }) => {
     if (!name)
         return null;
-    const IconComponent = LucideIcons[name];
+    const IconComponent = LucideIcons__namespace[name];
     if (!IconComponent)
         return null;
-    return jsx(IconComponent, { size: size, className: className });
+    return jsxRuntime$1.jsx(IconComponent, { size: size, className: className });
 };
 const isLucideIcon$1 = (name) => {
     if (!name)
         return false;
-    return Boolean(LucideIcons[name]);
+    return Boolean(LucideIcons__namespace[name]);
 };
-const Button = React__default.forwardRef(({ className, variant, size, asChild = false, children, prefix, suffix, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (jsxs(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props, children: [prefix && (isLucideIcon$1(prefix)
-                ? jsx(DynamicIcon$1, { name: prefix, className: children ? 'mr-2' : '' })
-                : jsx("span", { className: children ? 'mr-2' : '', children: prefix })), children, suffix && (isLucideIcon$1(suffix)
-                ? jsx(DynamicIcon$1, { name: suffix, className: children ? 'ml-2' : '' })
-                : jsx("span", { className: children ? 'ml-2' : '', children: suffix }))] }));
+const Button = React__default__namespace.forwardRef(({ className, variant, size, asChild = false, children, prefix, suffix, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return (jsxRuntime$1.jsxs(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props, children: [prefix && (isLucideIcon$1(prefix)
+                ? jsxRuntime$1.jsx(DynamicIcon$1, { name: prefix, className: children ? 'mr-2' : '' })
+                : jsxRuntime$1.jsx("span", { className: children ? 'mr-2' : '', children: prefix })), children, suffix && (isLucideIcon$1(suffix)
+                ? jsxRuntime$1.jsx(DynamicIcon$1, { name: suffix, className: children ? 'ml-2' : '' })
+                : jsxRuntime$1.jsx("span", { className: children ? 'ml-2' : '', children: suffix }))] }));
 });
 Button.displayName = "Button";
 
 const Label = ({ label, required = false, className = '' }) => {
-    return (jsxs("label", { className: `block text-sm font-medium text-gray-700 mb-1 ${className}`, children: [label, required && jsx("span", { className: "text-red-500", children: "*" })] }));
+    return (jsxRuntime$1.jsxs("label", { className: `block text-sm font-medium text-gray-700 mb-1 ${className}`, children: [label, required && jsxRuntime$1.jsx("span", { className: "text-red-500", children: "*" })] }));
 };
 
 // DynamicIcon component
 const DynamicIcon = ({ name, size = 18 }) => {
     if (!name)
         return null;
-    const IconComponent = LucideIcons[name];
+    const IconComponent = LucideIcons__namespace[name];
     if (!IconComponent)
         return null;
-    return jsx(IconComponent, { size: size });
+    return jsxRuntime$1.jsx(IconComponent, { size: size });
 };
 const isLucideIcon = (name) => {
     if (!name)
         return false;
-    return Boolean(LucideIcons[name]);
+    return Boolean(LucideIcons__namespace[name]);
 };
 const Input$1 = ({ label, type = 'text', value, onChange, placeholder = '', required = false, error, name, icon, suffix, disabled, inputClassName = '', }) => {
     const hasSuffix = !!suffix;
     const stateClass = disabled ? 'opacity-50 cursor-not-allowed' : '';
-    return (jsxs("div", { className: "mb-4", children: [jsx(Label, { label: label, required: required }), jsxs("div", { className: "relative", children: [icon && (jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400", children: jsx(DynamicIcon, { name: icon, size: 18 }) })), hasSuffix && (jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400", children: isLucideIcon(suffix) ? jsx(DynamicIcon, { name: suffix, size: 18 }) : jsx("span", { className: "text-sm", children: suffix }) })), jsx("input", { id: name, name: name, type: type, value: value, onChange: onChange, placeholder: placeholder, required: required, disabled: disabled, className: `w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary ${icon ? 'pl-10' : ''} ${hasSuffix ? 'pr-10' : ''} ${error ? 'border-red-500' : 'border-gray-300'} ${stateClass} ${inputClassName}` })] }), error && jsx("p", { className: "text-xs text-red-500 mt-1", children: error })] }));
+    return (jsxRuntime$1.jsxs("div", { className: "mb-4", children: [jsxRuntime$1.jsx(Label, { label: label, required: required }), jsxRuntime$1.jsxs("div", { className: "relative", children: [icon && (jsxRuntime$1.jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400", children: jsxRuntime$1.jsx(DynamicIcon, { name: icon, size: 18 }) })), hasSuffix && (jsxRuntime$1.jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400", children: isLucideIcon(suffix) ? jsxRuntime$1.jsx(DynamicIcon, { name: suffix, size: 18 }) : jsxRuntime$1.jsx("span", { className: "text-sm", children: suffix }) })), jsxRuntime$1.jsx("input", { id: name, name: name, type: type, value: value, onChange: onChange, placeholder: placeholder, required: required, disabled: disabled, className: `w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary ${icon ? 'pl-10' : ''} ${hasSuffix ? 'pr-10' : ''} ${error ? 'border-red-500' : 'border-gray-300'} ${stateClass} ${inputClassName}` })] }), error && jsxRuntime$1.jsx("p", { className: "text-xs text-red-500 mt-1", children: error })] }));
 };
 
 const InputDropdown = ({ label, options, value, onChange, placeholder = '', required = false, error, name, disabled, inputClassName = '', }) => {
     const stateClass = disabled ? 'opacity-50 cursor-not-allowed' : '';
-    return (jsxs("div", { className: "mb-4", children: [jsx(Label, { label: label, required: required }), jsxs("select", { id: name, name: name, value: value, onChange: onChange, required: required, disabled: disabled, className: `w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary ${error ? 'border-red-500' : 'border-gray-300'} ${stateClass} ${inputClassName}`, children: [placeholder && jsx("option", { value: "", disabled: true, className: "text-gray-400", children: placeholder }), options.map(opt => (jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }), error && jsx("p", { className: "text-xs text-red-500 mt-1", children: error })] }));
+    return (jsxRuntime$1.jsxs("div", { className: "mb-4", children: [jsxRuntime$1.jsx(Label, { label: label, required: required }), jsxRuntime$1.jsxs("select", { id: name, name: name, value: value, onChange: onChange, required: required, disabled: disabled, className: `w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary ${error ? 'border-red-500' : 'border-gray-300'} ${stateClass} ${inputClassName}`, children: [placeholder && jsxRuntime$1.jsx("option", { value: "", disabled: true, className: "text-gray-400", children: placeholder }), options.map(opt => (jsxRuntime$1.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }), error && jsxRuntime$1.jsx("p", { className: "text-xs text-red-500 mt-1", children: error })] }));
 };
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
@@ -214,7 +234,7 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-const HookFormContext = React__default__default.createContext(null);
+const HookFormContext = React__default.createContext(null);
 HookFormContext.displayName = 'HookFormContext';
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
@@ -235,7 +255,7 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default__namespace.useLayoutEffect : React__default__namespace.useEffect;
 
 var isString = (value) => typeof value === 'string';
 
@@ -1936,9 +1956,9 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React__default__default.useRef(undefined);
-    const _values = React__default__default.useRef(undefined);
-    const [formState, updateFormState] = React__default__default.useState({
+    const _formControl = React__default.useRef(undefined);
+    const _values = React__default.useRef(undefined);
+    const [formState, updateFormState] = React__default.useState({
         isDirty: false,
         isValidating: false,
         isLoading: isFunction$1(props.defaultValues),
@@ -1990,8 +2010,8 @@ function useForm(props = {}) {
         control._formState.isReady = true;
         return sub;
     }, [control]);
-    React__default__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-    React__default__default.useEffect(() => {
+    React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React__default.useEffect(() => {
         if (props.mode) {
             control._options.mode = props.mode;
         }
@@ -1999,19 +2019,19 @@ function useForm(props = {}) {
             control._options.reValidateMode = props.reValidateMode;
         }
     }, [control, props.mode, props.reValidateMode]);
-    React__default__default.useEffect(() => {
+    React__default.useEffect(() => {
         if (props.errors) {
             control._setErrors(props.errors);
             control._focusError();
         }
     }, [control, props.errors]);
-    React__default__default.useEffect(() => {
+    React__default.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({
                 values: control._getWatch(),
             });
     }, [control, props.shouldUnregister]);
-    React__default__default.useEffect(() => {
+    React__default.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
             if (isDirty !== formState.isDirty) {
@@ -2021,7 +2041,7 @@ function useForm(props = {}) {
             }
         }
     }, [control, formState.isDirty]);
-    React__default__default.useEffect(() => {
+    React__default.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, control._options.resetOptions);
             _values.current = props.values;
@@ -2031,7 +2051,7 @@ function useForm(props = {}) {
             control._resetDefaultValues();
         }
     }, [control, props.values]);
-    React__default__default.useEffect(() => {
+    React__default.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
             control._state.mount = true;
@@ -2048,7 +2068,7 @@ function useForm(props = {}) {
 
 const Form = ({ onSubmit, children, defaultValues = {}, formRef }) => {
     const { control, handleSubmit, formState: { errors } } = useForm({ defaultValues });
-    return (jsx("form", { ref: formRef, onSubmit: handleSubmit(onSubmit), children: children({ control, errors, handleSubmit }) }));
+    return (jsxRuntime$1.jsx("form", { ref: formRef, onSubmit: handleSubmit(onSubmit), children: children({ control, errors, handleSubmit }) }));
 };
 
 const sizeClassMap = {
@@ -2060,20 +2080,20 @@ const sizeClassMap = {
 const Modal = ({ open, onClose, children, actions, header, footer, size = 'md' }) => {
     if (!open)
         return null;
-    return (jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsx("div", { className: "fixed inset-0 bg-black bg-opacity-40 transition-opacity", onClick: onClose }), jsxs("div", { className: `relative bg-white shadow-lg w-full mx-4 z-10 animate-fade-in ${sizeClassMap[size]}${size === 'full' ? '' : ' rounded-lg'}`, children: [header && jsx("div", { className: "px-6 py-4 border-b", children: header }), jsx("div", { className: "px-6 py-4", children: children }), actions && jsx("div", { className: "px-6 py-3 border-t flex justify-end gap-2", children: actions }), footer && jsx("div", { className: "px-6 py-3 border-t", children: footer }), jsx("button", { className: "absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none", onClick: onClose, "aria-label": "Close", children: jsx(X, { size: 20 }) })] })] }));
+    return (jsxRuntime$1.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsxRuntime$1.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-40 transition-opacity", onClick: onClose }), jsxRuntime$1.jsxs("div", { className: `relative bg-white shadow-lg w-full mx-4 z-10 animate-fade-in ${sizeClassMap[size]}${size === 'full' ? '' : ' rounded-lg'}`, children: [header && jsxRuntime$1.jsx("div", { className: "px-6 py-4 border-b", children: header }), jsxRuntime$1.jsx("div", { className: "px-6 py-4", children: children }), actions && jsxRuntime$1.jsx("div", { className: "px-6 py-3 border-t flex justify-end gap-2", children: actions }), footer && jsxRuntime$1.jsx("div", { className: "px-6 py-3 border-t", children: footer }), jsxRuntime$1.jsx("button", { className: "absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none", onClick: onClose, "aria-label": "Close", children: jsxRuntime$1.jsx(LucideIcons.X, { size: 20 }) })] })] }));
 };
 
-const Card = React__default.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })));
+const Card = React__default__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime$1.jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })));
 Card.displayName = "Card";
-const CardHeader = React__default.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
+const CardHeader = React__default__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime$1.jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React__default.forwardRef(({ className, ...props }, ref) => (jsx("h3", { ref: ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })));
+const CardTitle = React__default__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime$1.jsx("h3", { ref: ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React__default.forwardRef(({ className, ...props }, ref) => (jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+const CardDescription = React__default__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime$1.jsx("p", { ref: ref, className: cn("text-sm text-gray-500", className), ...props })));
 CardDescription.displayName = "CardDescription";
-const CardContent = React__default.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
+const CardContent = React__default__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime$1.jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
 CardContent.displayName = "CardContent";
-const CardFooter = React__default.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+const CardFooter = React__default__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime$1.jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
 CardFooter.displayName = "CardFooter";
 
 /**
@@ -5367,7 +5387,7 @@ function getSortedRowModel() {
  * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
  */
 function flexRender(Comp, props) {
-  return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React__default.createElement(Comp, props) : Comp;
+  return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React__default__namespace.createElement(Comp, props) : Comp;
 }
 function isReactComponent(component) {
   return isClassComponent(component) || typeof component === 'function' || isExoticComponent(component);
@@ -5393,12 +5413,12 @@ function useReactTable(options) {
   };
 
   // Create a new table and store it in state
-  const [tableRef] = React__default.useState(() => ({
+  const [tableRef] = React__default__namespace.useState(() => ({
     current: createTable(resolvedOptions)
   }));
 
   // By default, manage table state here using the table's initial state
-  const [state, setState] = React__default.useState(() => tableRef.current.initialState);
+  const [state, setState] = React__default__namespace.useState(() => tableRef.current.initialState);
 
   // Compose the default state above with any user state. This will allow the user
   // to only control a subset of the state if desired.
@@ -5420,9 +5440,9 @@ function useReactTable(options) {
 }
 
 const TableBody = ({ table, onRowClick }) => {
-    return (jsx("div", { className: "flex-1 overflow-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { className: "bg-gray-50", children: table.getHeaderGroups().map(headerGroup => (jsx("tr", { children: headerGroup.headers.map(header => (jsx("th", { className: "px-4 py-2 text-left text-sm font-medium text-gray-500 border-b", children: header.isPlaceholder
+    return (jsxRuntime$1.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntime$1.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntime$1.jsx("thead", { className: "bg-gray-50", children: table.getHeaderGroups().map(headerGroup => (jsxRuntime$1.jsx("tr", { children: headerGroup.headers.map(header => (jsxRuntime$1.jsx("th", { className: "px-4 py-2 text-left text-sm font-medium text-gray-500 border-b", children: header.isPlaceholder
                                 ? null
-                                : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), jsx("tbody", { children: table.getRowModel().rows.map(row => (jsx("tr", { onClick: () => onRowClick?.(row), className: `border-b hover:bg-gray-50 ${onRowClick ? 'cursor-pointer' : ''}`, children: row.getVisibleCells().map(cell => (jsx("td", { className: "px-4 py-2 text-sm", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }));
+                                : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), jsxRuntime$1.jsx("tbody", { children: table.getRowModel().rows.map(row => (jsxRuntime$1.jsx("tr", { onClick: () => onRowClick?.(row), className: `border-b hover:bg-gray-50 ${onRowClick ? 'cursor-pointer' : ''}`, children: row.getVisibleCells().map(cell => (jsxRuntime$1.jsx("td", { className: "px-4 py-2 text-sm", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }));
 };
 
 function getDefaultExportFromCjs$1 (x) {
@@ -6107,7 +6127,7 @@ function requireReactJsxRuntime_development () {
 	            "\n\nCheck the top-level render call using <" + parentType + ">."));
 	      return info;
 	    }
-	    var React = React__default__default,
+	    var React = React__default,
 	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -6426,7 +6446,7 @@ const BUTTON_COLOR = {
     }
 };
 
-const DatepickerContext = createContext({
+const DatepickerContext = React__default.createContext({
     arrowContainer: null,
     asSingle: false,
     calendarContainer: null,
@@ -7155,9 +7175,9 @@ const DoubleChevronRightIcon = (props) => {
 const RoundedButton = (props) => {
     const { children, onClick, disabled, roundedFull = false, padding = "py-[0.55rem]", active = false } = props;
     // Contexts
-    const { primaryColor } = useContext(DatepickerContext);
+    const { primaryColor } = React__default.useContext(DatepickerContext);
     // Functions
-    const getClassName = useCallback(() => {
+    const getClassName = React__default.useCallback(() => {
         const darkClass = "dark:text-white/70 dark:hover:bg-white/10 dark:focus:bg-white/10";
         const activeClass = active ? "font-semibold bg-gray-50 dark:bg-white/5" : "";
         const defaultClass = !roundedFull
@@ -7191,14 +7211,14 @@ const Days = (props) => {
     // Props
     const { days, onClickPreviousDays, onClickDay, onClickNextDays } = props;
     // Contexts
-    const { primaryColor, period, changePeriod, dayHover, changeDayHover, minDate, maxDate, disabledDates } = useContext(DatepickerContext);
+    const { primaryColor, period, changePeriod, dayHover, changeDayHover, minDate, maxDate, disabledDates } = React__default.useContext(DatepickerContext);
     // Functions
-    const currentDateClass = useCallback((day) => {
+    const currentDateClass = React__default.useCallback((day) => {
         if (isCurrentDay(day))
             return TEXT_COLOR["500"][primaryColor];
         return "";
     }, [primaryColor]);
-    const activeDateData = useCallback((day) => {
+    const activeDateData = React__default.useCallback((day) => {
         let className = "";
         const dayIsSameStart = period.start && dateIsSame(day, period.start, "date");
         const dayIsSameEnd = period.end && dateIsSame(day, period.end, "date");
@@ -7217,7 +7237,7 @@ const Days = (props) => {
             className: className
         };
     }, [dayHover, period.end, period.start, primaryColor]);
-    const hoverClassByDay = useCallback((day) => {
+    const hoverClassByDay = React__default.useCallback((day) => {
         let className = currentDateClass(day);
         if (period.start && period.end) {
             if (dateIsBetween(day, period.start, period.end, "day", { start: true, end: false })) {
@@ -7241,17 +7261,17 @@ const Days = (props) => {
         }
         return className;
     }, [currentDateClass, dayHover, period.end, period.start, primaryColor]);
-    const isDateTooEarly = useCallback((day) => {
+    const isDateTooEarly = React__default.useCallback((day) => {
         if (!minDate)
             return false;
         return dateIsBefore(day, minDate, "date");
     }, [minDate]);
-    const isDateTooLate = useCallback((day) => {
+    const isDateTooLate = React__default.useCallback((day) => {
         if (!maxDate)
             return false;
         return dateIsAfter(day, maxDate, "date");
     }, [maxDate]);
-    const isDateDisabled = useCallback((day) => {
+    const isDateDisabled = React__default.useCallback((day) => {
         if (isDateTooEarly(day) || isDateTooLate(day)) {
             return true;
         }
@@ -7271,7 +7291,7 @@ const Days = (props) => {
         });
         return matchingCount > 0;
     }, [isDateTooEarly, isDateTooLate, disabledDates]);
-    const buttonClass = useCallback((day, type) => {
+    const buttonClass = React__default.useCallback((day, type) => {
         const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
         if (type === "current") {
             return classNames(baseClass, !activeDateData(day).active
@@ -7280,7 +7300,7 @@ const Days = (props) => {
         }
         return classNames(baseClass, isDateDisabled(day) && "line-through", "text-gray-400");
     }, [activeDateData, hoverClassByDay, isDateDisabled]);
-    const checkIfHoverPeriodContainsDisabledPeriod = useCallback((hoverPeriod) => {
+    const checkIfHoverPeriodContainsDisabledPeriod = React__default.useCallback((hoverPeriod) => {
         if (!Array.isArray(disabledDates)) {
             return false;
         }
@@ -7292,7 +7312,7 @@ const Days = (props) => {
         }
         return false;
     }, [disabledDates]);
-    const hoverDay = useCallback((day) => {
+    const hoverDay = React__default.useCallback((day) => {
         if (period.start && !period.end) {
             const hoverPeriod = { ...period, end: day };
             if (dateIsBefore(day, period.start, "date")) {
@@ -7326,7 +7346,7 @@ const Days = (props) => {
             }
         }
     }, [changeDayHover, changePeriod, checkIfHoverPeriodContainsDisabledPeriod, period]);
-    const handleClickDay = useCallback((day, type) => {
+    const handleClickDay = React__default.useCallback((day, type) => {
         function continueClick() {
             if (type === "previous") {
                 onClickPreviousDays(day);
@@ -7373,8 +7393,8 @@ const Days = (props) => {
 
 const Months = (props) => {
     const { currentMonth, clickMonth } = props;
-    const { i18n } = useContext(DatepickerContext);
-    useEffect(() => {
+    const { i18n } = React__default.useContext(DatepickerContext);
+    React__default.useEffect(() => {
         loadLanguageModule(i18n);
     }, [i18n]);
     return (jsxRuntimeExports.jsx("div", { className: "w-full grid grid-cols-2 gap-2 mt-2", children: MONTHS.map(item => (jsxRuntimeExports.jsx(RoundedButton, { padding: "py-3", onClick: () => {
@@ -7383,11 +7403,11 @@ const Months = (props) => {
 };
 
 const Week = () => {
-    const { i18n, startWeekOn } = useContext(DatepickerContext);
-    useEffect(() => {
+    const { i18n, startWeekOn } = React__default.useContext(DatepickerContext);
+    React__default.useEffect(() => {
         loadLanguageModule(i18n);
     }, [i18n]);
-    const startDateModifier = useMemo(() => {
+    const startDateModifier = React__default.useMemo(() => {
         if (startWeekOn) {
             switch (startWeekOn) {
                 case "mon":
@@ -7415,8 +7435,8 @@ const Week = () => {
 
 const Years = (props) => {
     const { year, currentYear, minYear, maxYear, clickYear } = props;
-    const { dateLooking } = useContext(DatepickerContext);
-    const date = useMemo(() => {
+    const { dateLooking } = React__default.useContext(DatepickerContext);
+    const date = React__default.useMemo(() => {
         let start;
         let end;
         switch (dateLooking) {
@@ -7450,34 +7470,34 @@ const Calendar = (props) => {
     // Props
     const { date, minDate, maxDate, onClickPrevious, onClickNext, changeMonth, changeYear } = props;
     // Contexts
-    const { period, changePeriod, changeDayHover, showFooter, changeDatepickerValue, hideDatepicker, asSingle, i18n, startWeekOn, input } = useContext(DatepickerContext);
+    const { period, changePeriod, changeDayHover, showFooter, changeDatepickerValue, hideDatepicker, asSingle, i18n, startWeekOn, input } = React__default.useContext(DatepickerContext);
     loadLanguageModule(i18n);
     // States
-    const [showMonths, setShowMonths] = useState(false);
-    const [showYears, setShowYears] = useState(false);
-    const [year, setYear] = useState(date.getFullYear());
+    const [showMonths, setShowMonths] = React__default.useState(false);
+    const [showYears, setShowYears] = React__default.useState(false);
+    const [year, setYear] = React__default.useState(date.getFullYear());
     // Functions
-    const hideMonths = useCallback(() => {
+    const hideMonths = React__default.useCallback(() => {
         if (showMonths)
             setShowMonths(false);
     }, [showMonths]);
-    const hideYears = useCallback(() => {
+    const hideYears = React__default.useCallback(() => {
         if (showYears)
             setShowYears(false);
     }, [showYears]);
-    const clickMonth = useCallback((month) => {
+    const clickMonth = React__default.useCallback((month) => {
         setTimeout(() => {
             changeMonth(month);
             setShowMonths(!showMonths);
         }, 250);
     }, [changeMonth, showMonths]);
-    const clickYear = useCallback((year) => {
+    const clickYear = React__default.useCallback((year) => {
         setTimeout(() => {
             changeYear(year);
             setShowYears(!showYears);
         }, 250);
     }, [changeYear, showYears]);
-    const clickDay = useCallback((day, after) => {
+    const clickDay = React__default.useCallback((day, after) => {
         let newStart;
         let newEnd = null;
         function chosePeriod(start, end) {
@@ -7549,22 +7569,22 @@ const Calendar = (props) => {
         showFooter,
         input
     ]);
-    const clickPreviousDays = useCallback((day) => {
+    const clickPreviousDays = React__default.useCallback((day) => {
         clickDay(day, () => {
             onClickPrevious();
         });
     }, [clickDay, onClickPrevious]);
-    const clickNextDays = useCallback((day) => {
+    const clickNextDays = React__default.useCallback((day) => {
         clickDay(day, () => {
             onClickNext();
         });
     }, [clickDay, onClickNext]);
     // UseEffects & UseLayoutEffect
-    useEffect(() => {
+    React__default.useEffect(() => {
         setYear(date.getFullYear());
     }, [date]);
     // Variables
-    const calendarData = useMemo(() => {
+    const calendarData = React__default.useMemo(() => {
         const firstDateCurrentMonth = firstDayOfMonth(date);
         const lastDateCurrentMonth = endDayOfMonth(date);
         const startWeekOnIndex = weekDayStringToIndex(startWeekOn || START_WEEK);
@@ -7582,7 +7602,7 @@ const Calendar = (props) => {
             next: next
         };
     }, [date, startWeekOn]);
-    const years = useMemo(() => {
+    const years = React__default.useMemo(() => {
         return {
             min: minDate && dateIsValid(minDate) ? minDate.getFullYear() : null,
             max: maxDate && dateIsValid(maxDate) ? maxDate.getFullYear() : null
@@ -7604,13 +7624,13 @@ const Calendar = (props) => {
 const PrimaryButton = (props) => {
     const { children, onClick, disabled = false } = props;
     // Contexts
-    const { primaryColor } = useContext(DatepickerContext);
+    const { primaryColor } = React__default.useContext(DatepickerContext);
     const bgColor = BG_COLOR["500"][primaryColor];
     const borderColor = BORDER_COLOR["500"][primaryColor];
     const bgColorHover = BG_COLOR.hover[primaryColor];
     const ringColor = RING_COLOR.focus[primaryColor];
     // Functions
-    const getClassName = useCallback(() => {
+    const getClassName = React__default.useCallback(() => {
         return `w-full transition-all duration-300 ${bgColor} ${borderColor} text-white font-medium border px-4 py-2 text-sm rounded-md focus:ring-2 focus:ring-offset-2 ${bgColorHover} ${ringColor} ${disabled ? " cursor-no-drop" : ""}`;
     }, [bgColor, bgColorHover, borderColor, disabled, ringColor]);
     return (jsxRuntimeExports.jsx("button", { type: "button", className: getClassName(), onClick: onClick, disabled: disabled, children: children }));
@@ -7619,9 +7639,9 @@ const PrimaryButton = (props) => {
 const SecondaryButton = (props) => {
     const { children, onClick, disabled = false } = props;
     // Contexts
-    const { primaryColor } = useContext(DatepickerContext);
+    const { primaryColor } = React__default.useContext(DatepickerContext);
     // Functions
-    const getClassName = useCallback(() => {
+    const getClassName = React__default.useCallback(() => {
         const ringColor = RING_COLOR.focus[primaryColor];
         return `w-full transition-all duration-300 bg-white dark:text-gray-700 font-medium border border-gray-300 px-4 py-2 text-sm rounded-md focus:ring-2 focus:ring-offset-2 hover:bg-gray-50 ${ringColor}`;
     }, [primaryColor]);
@@ -7630,9 +7650,9 @@ const SecondaryButton = (props) => {
 
 const Footer = () => {
     // Contexts
-    const { hideDatepicker, period, changeDatepickerValue, configs, classNames, input } = useContext(DatepickerContext);
+    const { hideDatepicker, period, changeDatepickerValue, configs, classNames, input } = React__default.useContext(DatepickerContext);
     // Functions
-    const getClassName = useCallback(() => {
+    const getClassName = React__default.useCallback(() => {
         if (typeof classNames !== "undefined" && typeof classNames?.footer === "function") {
             return classNames.footer();
         }
@@ -7667,12 +7687,12 @@ const ToggleButton = (e) => {
 
 const Input = () => {
     // Context
-    const { primaryColor, period, dayHover, changeDayHover, calendarContainer, arrowContainer, inputText, changeInputText, hideDatepicker, changeDatepickerValue, asSingle, placeholder, separator, disabled, inputClassName, toggleClassName, toggleIcon, readOnly, displayFormat, inputId, inputName, classNames, popoverDirection, required, input, setInput } = useContext(DatepickerContext);
+    const { primaryColor, period, dayHover, changeDayHover, calendarContainer, arrowContainer, inputText, changeInputText, hideDatepicker, changeDatepickerValue, asSingle, placeholder, separator, disabled, inputClassName, toggleClassName, toggleIcon, readOnly, displayFormat, inputId, inputName, classNames, popoverDirection, required, input, setInput } = React__default.useContext(DatepickerContext);
     // UseRefs
-    const buttonRef = useRef(null);
-    const inputRef = useRef(null);
+    const buttonRef = React__default.useRef(null);
+    const inputRef = React__default.useRef(null);
     // Functions
-    const getClassName = useCallback(() => {
+    const getClassName = React__default.useCallback(() => {
         const input = inputRef.current;
         if (input && typeof classNames !== "undefined" && typeof classNames?.input === "function") {
             return classNames.input(input);
@@ -7686,7 +7706,7 @@ const Input = () => {
                 ? inputClassName
                 : defaultInputClassName;
     }, [inputRef, classNames, primaryColor, inputClassName]);
-    const handleInputChange = useCallback((e) => {
+    const handleInputChange = React__default.useCallback((e) => {
         const inputValue = e.target.value;
         const dates = [];
         if (asSingle) {
@@ -7728,7 +7748,7 @@ const Input = () => {
         }
         changeInputText(e.target.value);
     }, [asSingle, separator, changeDatepickerValue, changeDayHover, changeInputText]);
-    const handleInputKeyDown = useCallback((e) => {
+    const handleInputKeyDown = React__default.useCallback((e) => {
         if (e.key === "Enter") {
             const input = inputRef.current;
             if (input) {
@@ -7737,10 +7757,10 @@ const Input = () => {
             hideDatepicker();
         }
     }, [hideDatepicker]);
-    const renderToggleIcon = useCallback((isEmpty) => {
+    const renderToggleIcon = React__default.useCallback((isEmpty) => {
         return typeof toggleIcon === "undefined" ? (jsxRuntimeExports.jsx(ToggleButton, { isEmpty: isEmpty })) : (toggleIcon(isEmpty));
     }, [toggleIcon]);
-    const getToggleClassName = useCallback(() => {
+    const getToggleClassName = React__default.useCallback(() => {
         const button = buttonRef.current;
         if (button &&
             typeof classNames !== "undefined" &&
@@ -7755,12 +7775,12 @@ const Input = () => {
                 : defaultToggleClassName;
     }, [toggleClassName, buttonRef, classNames]);
     // UseEffects && UseLayoutEffect
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (!input && inputRef?.current) {
             setInput(inputRef.current);
         }
     }, [input, inputRef, setInput]);
-    useEffect(() => {
+    React__default.useEffect(() => {
         const button = buttonRef?.current;
         function focusInput(e) {
             e.stopPropagation();
@@ -7799,7 +7819,7 @@ const Input = () => {
         period.start,
         inputRef
     ]);
-    useEffect(() => {
+    React__default.useEffect(() => {
         const div = calendarContainer?.current;
         const input = inputRef.current;
         const arrow = arrowContainer?.current;
@@ -7895,15 +7915,15 @@ const DEFAULT_SHORTCUTS = {
     }
 };
 
-const ItemTemplate = memo$1((props) => {
-    const { primaryColor, period, changePeriod, updateFirstDate, dayHover, changeDayHover, hideDatepicker, changeDatepickerValue, input } = useContext(DatepickerContext);
+const ItemTemplate = React__default.memo((props) => {
+    const { primaryColor, period, changePeriod, updateFirstDate, dayHover, changeDayHover, hideDatepicker, changeDatepickerValue, input } = React__default.useContext(DatepickerContext);
     // Functions
-    const getClassName = useCallback(() => {
+    const getClassName = React__default.useCallback(() => {
         const textColor = TEXT_COLOR["600"][primaryColor];
         const textColorHover = TEXT_COLOR.hover[primaryColor];
         return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`;
     }, [primaryColor]);
-    const chosePeriod = useCallback((item) => {
+    const chosePeriod = React__default.useCallback((item) => {
         if (dayHover) {
             changeDayHover(null);
         }
@@ -7942,11 +7962,11 @@ const ItemTemplate = memo$1((props) => {
 ItemTemplate.displayName = "ItemTemplate";
 const Shortcuts = () => {
     // Contexts
-    const { configs } = useContext(DatepickerContext);
-    const callPastFunction = useCallback((data, numberValue) => {
+    const { configs } = React__default.useContext(DatepickerContext);
+    const callPastFunction = React__default.useCallback((data, numberValue) => {
         return typeof data === "function" ? data(numberValue) : null;
     }, []);
-    const shortcutOptions = useMemo(() => {
+    const shortcutOptions = React__default.useMemo(() => {
         if (!configs?.shortcuts) {
             return Object.entries(DEFAULT_SHORTCUTS);
         }
@@ -7976,7 +7996,7 @@ const Shortcuts = () => {
             return [];
         });
     }, [configs]);
-    const printItemText = useCallback((item) => {
+    const printItemText = React__default.useCallback((item) => {
         return item?.text ?? null;
     }, []);
     return shortcutOptions?.length ? (jsxRuntimeExports.jsx("div", { className: "md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-gray-700 pr-1", children: jsxRuntimeExports.jsx("ul", { className: "w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0", children: shortcutOptions.map(([key, item], index) => Array.isArray(item) ? (item.map((item, index) => (jsxRuntimeExports.jsx(ItemTemplate, { item: item, children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: key === "past" &&
@@ -7992,7 +8012,7 @@ const Shortcuts = () => {
 };
 
 function useOnClickOutside(ref, handler) {
-    useEffect(() => {
+    React__default.useEffect(() => {
         const listener = (event) => {
             if (!ref || ref.contains(event.target)) {
                 return;
@@ -8008,14 +8028,14 @@ function useOnClickOutside(ref, handler) {
     }, [ref, handler]);
 }
 
-const Arrow = forwardRef((props, ref) => {
+const Arrow = React__default.forwardRef((props, ref) => {
     return (jsxRuntimeExports.jsx("div", { ...props, ref: ref, className: "absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600" }));
 });
 Arrow.displayName = "Arrow";
 
 const VerticalDash = () => {
     // Contexts
-    const { primaryColor } = useContext(DatepickerContext);
+    const { primaryColor } = React__default.useContext(DatepickerContext);
     const bgColor = BG_COLOR["500"][primaryColor];
     return jsxRuntimeExports.jsx("div", { className: `h-7 w-1 rounded-full hidden md:block ${bgColor || "bg-blue-500"}` });
 };
@@ -8024,19 +8044,19 @@ const Datepicker = (props) => {
     // Props
     const { asSingle = false, classNames = undefined, configs = undefined, containerClassName = null, dateLooking = DEFAULT_DATE_LOOKING, disabledDates = null, disabled = false, displayFormat = DATE_FORMAT, i18n = LANGUAGE, inputClassName = null, inputId, inputName, minDate = undefined, maxDate = undefined, onChange, placeholder = null, popupClassName = null, popoverDirection = undefined, primaryColor = DEFAULT_COLOR, separator = DEFAULT_SEPARATOR, showFooter = false, showShortcuts = false, startFrom = null, startWeekOn = START_WEEK, readOnly = false, required = false, toggleClassName = null, toggleIcon = undefined, useRange = true, value = null } = props;
     // Refs
-    const containerRef = useRef(null);
-    const calendarContainerRef = useRef(null);
-    const arrowRef = useRef(null);
+    const containerRef = React__default.useRef(null);
+    const calendarContainerRef = React__default.useRef(null);
+    const arrowRef = React__default.useRef(null);
     // States
-    const [firstDate, setFirstDate] = useState(startFrom && dateIsValid(startFrom) ? startFrom : new Date());
-    const [secondDate, setSecondDate] = useState(nextMonthBy(firstDate));
-    const [period, setPeriod] = useState({
+    const [firstDate, setFirstDate] = React__default.useState(startFrom && dateIsValid(startFrom) ? startFrom : new Date());
+    const [secondDate, setSecondDate] = React__default.useState(nextMonthBy(firstDate));
+    const [period, setPeriod] = React__default.useState({
         start: null,
         end: null
     });
-    const [dayHover, setDayHover] = useState(null);
-    const [inputText, setInputText] = useState("");
-    const [input, setInput] = useState(null);
+    const [dayHover, setDayHover] = React__default.useState(null);
+    const [inputText, setInputText] = React__default.useState("");
+    const [input, setInput] = React__default.useState(null);
     // Custom Hooks use
     useOnClickOutside(containerRef.current, () => {
         const container = containerRef.current;
@@ -8045,7 +8065,7 @@ const Datepicker = (props) => {
         }
     });
     // Functions
-    const hideDatepicker = useCallback(() => {
+    const hideDatepicker = React__default.useCallback(() => {
         const div = calendarContainerRef.current;
         const arrow = arrowRef.current;
         if (arrow && div && div.classList.contains("block")) {
@@ -8068,48 +8088,48 @@ const Datepicker = (props) => {
         }
     }, []);
     /* Start First */
-    const firstGotoDate = useCallback((date) => {
+    const firstGotoDate = React__default.useCallback((date) => {
         if (dateIsSameOrAfter(date, secondDate, "date")) {
             setSecondDate(nextMonthBy(date));
         }
         setFirstDate(date);
     }, [secondDate]);
-    const previousMonthFirst = useCallback(() => {
+    const previousMonthFirst = React__default.useCallback(() => {
         setFirstDate(previousMonthBy(firstDate));
     }, [firstDate]);
-    const nextMonthFirst = useCallback(() => {
+    const nextMonthFirst = React__default.useCallback(() => {
         firstGotoDate(nextMonthBy(firstDate));
     }, [firstDate, firstGotoDate]);
-    const changeFirstMonth = useCallback((month) => {
+    const changeFirstMonth = React__default.useCallback((month) => {
         firstGotoDate(dateUpdateMonth(firstDate, month - 1));
     }, [firstDate, firstGotoDate]);
-    const changeFirstYear = useCallback((year) => {
+    const changeFirstYear = React__default.useCallback((year) => {
         firstGotoDate(dateUpdateYear(firstDate, year));
     }, [firstDate, firstGotoDate]);
     /* End First */
     /* Start Second */
-    const secondGotoDate = useCallback((date) => {
+    const secondGotoDate = React__default.useCallback((date) => {
         dateIsSameOrBefore(date, firstDate, "date");
         if (dateIsSameOrBefore(date, firstDate, "date")) {
             setFirstDate(previousMonthBy(date));
         }
         setSecondDate(date);
     }, [firstDate]);
-    const previousMonthSecond = useCallback(() => {
+    const previousMonthSecond = React__default.useCallback(() => {
         secondGotoDate(previousMonthBy(secondDate));
     }, [secondDate, secondGotoDate]);
-    const nextMonthSecond = useCallback(() => {
+    const nextMonthSecond = React__default.useCallback(() => {
         setSecondDate(nextMonthBy(secondDate));
     }, [secondDate]);
-    const changeSecondMonth = useCallback((month) => {
+    const changeSecondMonth = React__default.useCallback((month) => {
         secondGotoDate(dateUpdateMonth(secondDate, month - 1));
     }, [secondDate, secondGotoDate]);
-    const changeSecondYear = useCallback((year) => {
+    const changeSecondYear = React__default.useCallback((year) => {
         secondGotoDate(dateUpdateYear(secondDate, year));
     }, [secondDate, secondGotoDate]);
     /* End Second */
     // UseEffects & UseLayoutEffect
-    useEffect(() => {
+    React__default.useEffect(() => {
         const container = containerRef.current;
         const calendarContainer = calendarContainerRef.current;
         const arrow = arrowRef.current;
@@ -8124,7 +8144,7 @@ const Datepicker = (props) => {
             }
         }
     }, []);
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (value && value.startDate && value.endDate) {
             if (dateIsSameOrBefore(value.startDate, value.endDate, "date")) {
                 setPeriod({
@@ -8144,7 +8164,7 @@ const Datepicker = (props) => {
             setInputText("");
         }
     }, [asSingle, value, displayFormat, separator, i18n]);
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (startFrom && dateIsValid(startFrom)) {
             const startDate = value?.startDate;
             const endDate = value?.endDate;
@@ -8168,13 +8188,13 @@ const Datepicker = (props) => {
         }
     }, [asSingle, startFrom, value]);
     // Variables
-    const safePrimaryColor = useMemo(() => {
+    const safePrimaryColor = React__default.useMemo(() => {
         if (COLORS.includes(primaryColor)) {
             return primaryColor;
         }
         return DEFAULT_COLOR;
     }, [primaryColor]);
-    const contextValues = useMemo(() => {
+    const contextValues = React__default.useMemo(() => {
         if (minDate && !dateIsValid(minDate)) {
             /* eslint-disable */
             console.error(`minDate (${minDate}) is invalid date`);
@@ -8265,7 +8285,7 @@ const Datepicker = (props) => {
         value,
         firstGotoDate
     ]);
-    const containerClassNameOverload = useMemo(() => {
+    const containerClassNameOverload = React__default.useMemo(() => {
         const defaultContainerClassName = "relative w-full text-gray-700";
         return typeof containerClassName === "function"
             ? containerClassName(defaultContainerClassName)
@@ -8273,7 +8293,7 @@ const Datepicker = (props) => {
                 ? containerClassName
                 : defaultContainerClassName;
     }, [containerClassName]);
-    const popupClassNameOverload = useMemo(() => {
+    const popupClassNameOverload = React__default.useMemo(() => {
         const defaultPopupClassName = "transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden";
         return typeof popupClassName === "function"
             ? popupClassName(defaultPopupClassName)
@@ -11123,7 +11143,7 @@ const TableFilter = ({ globalFilter, setGlobalFilter, showFilterPanel, setShowFi
     if (!table) {
         return null; // Return null if table is undefined
     }
-    const [localFilters, setLocalFilters] = useState({});
+    const [localFilters, setLocalFilters] = React__default.useState({});
     const handleLocalChange = (id, value) => {
         setLocalFilters((prev) => ({ ...prev, [id]: value }));
     };
@@ -11135,41 +11155,41 @@ const TableFilter = ({ globalFilter, setGlobalFilter, showFilterPanel, setShowFi
         });
         setShowFilterPanel(false);
     };
-    return (jsx("div", { className: "flex flex-col", children: jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "flex-1 gap-2 relative items-center", children: jsx("div", { className: "relative mt-4", children: jsx(Input$1, { label: "", type: "text", value: typeof globalFilter === 'string' ? globalFilter : '', onChange: e => setGlobalFilter(e.target.value), placeholder: "Search...", icon: "Search", inputClassName: "text-sm h-9" }) }) }), jsxs("div", { className: "flex gap-2 relative items-center", children: [jsxs("div", { className: "relative", children: [jsx(Button, { variant: "default", size: "sm", onClick: () => setShowFilterPanel(!showFilterPanel), className: "text-gray-400 text-sm font-normal h-9 border border-gray-300 ml-2", suffix: "Filter", children: "\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" }), showFilterPanel && (jsxs("div", { className: "absolute right-0 mt-2 w-64 bg-white border rounded shadow-lg z-50 p-4", children: [jsx("div", { className: "flex flex-col space-y-2", children: table.getAllColumns()
+    return (jsxRuntime$1.jsx("div", { className: "flex flex-col", children: jsxRuntime$1.jsxs("div", { className: "flex justify-between", children: [jsxRuntime$1.jsx("div", { className: "flex-1 gap-2 relative items-center", children: jsxRuntime$1.jsx("div", { className: "relative mt-4", children: jsxRuntime$1.jsx(Input$1, { label: "", type: "text", value: typeof globalFilter === 'string' ? globalFilter : '', onChange: e => setGlobalFilter(e.target.value), placeholder: "Search...", icon: "Search", inputClassName: "text-sm h-9" }) }) }), jsxRuntime$1.jsxs("div", { className: "flex gap-2 relative items-center", children: [jsxRuntime$1.jsxs("div", { className: "relative", children: [jsxRuntime$1.jsx(Button, { variant: "default", size: "sm", onClick: () => setShowFilterPanel(!showFilterPanel), className: "text-gray-400 text-sm font-normal h-9 border border-gray-300 ml-2", suffix: "Filter", children: "\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" }), showFilterPanel && (jsxRuntime$1.jsxs("div", { className: "absolute right-0 mt-2 w-64 bg-white border rounded shadow-lg z-50 p-4", children: [jsxRuntime$1.jsx("div", { className: "flex flex-col space-y-2", children: table.getAllColumns()
                                                 .filter((column) => column.getCanFilter())
-                                                .map((column) => (jsxs("div", { className: "flex flex-col", children: [jsx("label", { htmlFor: `filter-${column.id}`, className: "text-xs mb-1", children: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }), jsx("input", { id: `filter-${column.id}`, type: "text", value: localFilters[column.id] || '', onChange: e => handleLocalChange(column.id, e.target.value), className: "border rounded px-2 py-1 w-full", placeholder: `กรอง${typeof column.columnDef.header === 'string' ? ' ' + column.columnDef.header : ''}` })] }, column.id))) }), jsxs("div", { className: "flex justify-end mt-2 gap-2", children: [jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowFilterPanel(false), className: "text-gray-600 border-gray-300 hover:bg-gray-100", children: "\u0E1B\u0E34\u0E14" }), jsx(Button, { variant: "default", size: "sm", onClick: handleApply, className: "bg-blue-600 text-white hover:bg-blue-700 border-blue-600", children: "Apply" })] })] }))] }), enableDateFilter && (jsx("div", { className: "min-w-[220px] h-9 flex items-center", children: jsx(Datepicker, { value: dateRange, onChange: setDateRange, inputClassName: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-sm h-9", placeholder: "\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E15\u0E32\u0E21\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" }) }))] })] }) }));
+                                                .map((column) => (jsxRuntime$1.jsxs("div", { className: "flex flex-col", children: [jsxRuntime$1.jsx("label", { htmlFor: `filter-${column.id}`, className: "text-xs mb-1", children: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }), jsxRuntime$1.jsx("input", { id: `filter-${column.id}`, type: "text", value: localFilters[column.id] || '', onChange: e => handleLocalChange(column.id, e.target.value), className: "border rounded px-2 py-1 w-full", placeholder: `กรอง${typeof column.columnDef.header === 'string' ? ' ' + column.columnDef.header : ''}` })] }, column.id))) }), jsxRuntime$1.jsxs("div", { className: "flex justify-end mt-2 gap-2", children: [jsxRuntime$1.jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowFilterPanel(false), className: "text-gray-600 border-gray-300 hover:bg-gray-100", children: "\u0E1B\u0E34\u0E14" }), jsxRuntime$1.jsx(Button, { variant: "default", size: "sm", onClick: handleApply, className: "bg-blue-600 text-white hover:bg-blue-700 border-blue-600", children: "Apply" })] })] }))] }), enableDateFilter && (jsxRuntime$1.jsx("div", { className: "min-w-[220px] h-9 flex items-center", children: jsxRuntime$1.jsx(Datepicker, { value: dateRange, onChange: setDateRange, inputClassName: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-sm h-9", placeholder: "\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E15\u0E32\u0E21\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" }) }))] })] }) }));
 };
 
 function TablePagination({ pageIndex, pageCount, pageSize, pageSizeOptions, onPageChange, onPageSizeChange, className, }) {
     const options = pageSizeOptions ?? [10, 20, 50, 100];
-    const [jumpPage, setJumpPage] = useState(pageIndex + 1);
-    React__default__default.useEffect(() => {
+    const [jumpPage, setJumpPage] = React__default.useState(pageIndex + 1);
+    React__default.useEffect(() => {
         setJumpPage(pageIndex + 1);
     }, [pageIndex]);
-    return (jsxs("div", { className: `flex flex-wrap items-center gap-4 py-2 ${className ?? ''}`, children: [jsxs("label", { className: "flex items-center gap-2 text-sm", children: ["Show", jsx("select", { value: pageSize, onChange: e => onPageSizeChange(Number(e.target.value)), className: "border px-2 py-1 rounded text-sm", children: options.map(size => (jsx("option", { value: size, children: size }, size))) }), "per page"] }), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(0), disabled: pageIndex === 0, "aria-label": "First page", children: "\u00AB" }), jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(pageIndex - 1), disabled: pageIndex === 0, "aria-label": "Previous page", children: "<" }), jsxs("span", { className: "text-sm px-2", children: ["Page ", pageIndex + 1, " of ", pageCount] }), jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(pageIndex + 1), disabled: pageIndex >= pageCount - 1, "aria-label": "Next page", children: ">" }), jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(pageCount - 1), disabled: pageIndex >= pageCount - 1, "aria-label": "Last page", children: "\u00BB" })] }), jsxs("form", { className: "flex items-center gap-2 text-sm", onSubmit: e => {
+    return (jsxRuntime$1.jsxs("div", { className: `flex flex-wrap items-center gap-4 py-2 ${className ?? ''}`, children: [jsxRuntime$1.jsxs("label", { className: "flex items-center gap-2 text-sm", children: ["Show", jsxRuntime$1.jsx("select", { value: pageSize, onChange: e => onPageSizeChange(Number(e.target.value)), className: "border px-2 py-1 rounded text-sm", children: options.map(size => (jsxRuntime$1.jsx("option", { value: size, children: size }, size))) }), "per page"] }), jsxRuntime$1.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime$1.jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(0), disabled: pageIndex === 0, "aria-label": "First page", children: "\u00AB" }), jsxRuntime$1.jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(pageIndex - 1), disabled: pageIndex === 0, "aria-label": "Previous page", children: "<" }), jsxRuntime$1.jsxs("span", { className: "text-sm px-2", children: ["Page ", pageIndex + 1, " of ", pageCount] }), jsxRuntime$1.jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(pageIndex + 1), disabled: pageIndex >= pageCount - 1, "aria-label": "Next page", children: ">" }), jsxRuntime$1.jsx("button", { className: "p-1 rounded border disabled:opacity-50", onClick: () => onPageChange(pageCount - 1), disabled: pageIndex >= pageCount - 1, "aria-label": "Last page", children: "\u00BB" })] }), jsxRuntime$1.jsxs("form", { className: "flex items-center gap-2 text-sm", onSubmit: e => {
                     e.preventDefault();
                     if (jumpPage > 0 && jumpPage <= pageCount) {
                         onPageChange(jumpPage - 1);
                     }
-                }, children: [jsxs("label", { children: ["Go to", jsx("input", { type: "number", min: 1, max: pageCount, value: jumpPage, onChange: e => setJumpPage(Number(e.target.value)), className: "w-16 border px-2 py-1 rounded ml-1" })] }), jsx("button", { type: "submit", className: "px-2 py-1 border rounded text-sm", children: "Go" })] })] }));
+                }, children: [jsxRuntime$1.jsxs("label", { children: ["Go to", jsxRuntime$1.jsx("input", { type: "number", min: 1, max: pageCount, value: jumpPage, onChange: e => setJumpPage(Number(e.target.value)), className: "w-16 border px-2 py-1 rounded ml-1" })] }), jsxRuntime$1.jsx("button", { type: "submit", className: "px-2 py-1 border rounded text-sm", children: "Go" })] })] }));
 }
 
-function Table({ data, columns, className = '', height = '100%', enableRowSelection = false, enableMultiRowSelection = false, enableSorting = true, enableFiltering = true, enablePagination = true, enableDateFilter = false, dateColumn = '', onRowClick, onSelectionChange, onSortingChange, onFilteringChange, onDateFilterChange, headerLeftSection, headerRightSection, }) {
+const Table = ({ data, columns, className = '', height = '100%', enableRowSelection = false, enableMultiRowSelection = false, enableSorting = true, enableFiltering = true, enablePagination = true, enableDateFilter = false, dateColumn = '', onRowClick, onSelectionChange, onSortingChange, onFilteringChange, onDateFilterChange, headerLeftSection, headerRightSection, }) => {
     // State management
-    const [rowSelection, setRowSelection] = useState({});
-    const [sorting, setSorting] = useState([]);
-    const [columnFilters, setColumnFilters] = useState([]);
-    const [globalFilter, setGlobalFilter] = useState('');
-    const [columnVisibility, setColumnVisibility] = useState({});
-    const [showFilterPanel, setShowFilterPanel] = useState(true);
-    const [dateRange, setDateRange] = useState({
+    const [rowSelection, setRowSelection] = React__default.useState({});
+    const [sorting, setSorting] = React__default.useState([]);
+    const [columnFilters, setColumnFilters] = React__default.useState([]);
+    const [globalFilter, setGlobalFilter] = React__default.useState('');
+    const [columnVisibility, setColumnVisibility] = React__default.useState({});
+    const [showFilterPanel, setShowFilterPanel] = React__default.useState(true);
+    const [dateRange, setDateRange] = React__default.useState({
         startDate: null,
         endDate: null,
     });
-    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
-    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+    const [isDatePickerOpen, setIsDatePickerOpen] = React__default.useState(false);
+    const [pagination, setPagination] = React__default.useState({ pageIndex: 0, pageSize: 10 });
     // Filter data based on date range
-    const filteredData = useMemo(() => {
+    const filteredData = React__default.useMemo(() => {
         if (!data)
             return [];
         if (!enableDateFilter || (!dateRange?.startDate && !dateRange?.endDate)) {
@@ -11217,23 +11237,23 @@ function Table({ data, columns, className = '', height = '100%', enableRowSelect
         pageCount: Math.ceil(filteredData.length / pagination.pageSize),
     });
     // Effects
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (onSelectionChange) {
             const selectedRows = table.getSelectedRowModel().rows;
             onSelectionChange(selectedRows);
         }
     }, [rowSelection, onSelectionChange, table]);
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (onSortingChange) {
             onSortingChange(sorting);
         }
     }, [sorting, onSortingChange]);
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (onFilteringChange) {
             onFilteringChange(columnFilters);
         }
     }, [columnFilters, onFilteringChange]);
-    useEffect(() => {
+    React__default.useEffect(() => {
         if (onDateFilterChange) {
             onDateFilterChange(dateRange);
         }
@@ -11242,56 +11262,21 @@ function Table({ data, columns, className = '', height = '100%', enableRowSelect
     const pageCount = table.getPageCount();
     const pageIndex = table.getState().pagination.pageIndex;
     const pageSize = table.getState().pagination.pageSize;
-    return (jsxs("div", { className: `flex flex-col w-full ${className}`, style: { height, minWidth: '900px', minHeight: '300px' }, children: [jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b", children: [jsx("div", { children: headerLeftSection }), jsx("div", { children: headerRightSection })] }), enableFiltering && (jsx(TableFilter, { globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, showFilterPanel: showFilterPanel, setShowFilterPanel: setShowFilterPanel, enableDateFilter: enableDateFilter, dateRange: dateRange, setDateRange: setDateRange, isDatePickerOpen: isDatePickerOpen, setIsDatePickerOpen: setIsDatePickerOpen, table: table })), jsx(TableBody, { table: table, onRowClick: onRowClick }), enablePagination && (jsx(TablePagination, { pageIndex: pageIndex, pageCount: pageCount, pageSize: pageSize, onPageChange: table.setPageIndex, onPageSizeChange: table.setPageSize }))] }));
-}
-
-const mockAccountingData = [
-    {
-        id: 1,
-        date: '2024-06-01',
-        description: 'Opening Balance',
-        debit: 0,
-        credit: 0,
-        balance: 10000,
-        created_at: '2024-06-01T09:00:00Z',
-    },
-    {
-        id: 2,
-        date: '2024-06-02',
-        description: 'Invoice Payment',
-        debit: 2000,
-        credit: 0,
-        balance: 12000,
-        created_at: '2024-06-02T10:30:00Z',
-    },
-    {
-        id: 3,
-        date: '2024-06-03',
-        description: 'Office Supplies',
-        debit: 0,
-        credit: 300,
-        balance: 11700,
-        created_at: '2024-06-03T14:15:00Z',
-    },
-    {
-        id: 4,
-        date: '2024-06-04',
-        description: 'Client Refund',
-        debit: 0,
-        credit: 500,
-        balance: 11200,
-        created_at: '2024-06-04T11:45:00Z',
-    },
-    {
-        id: 5,
-        date: '2024-06-05',
-        description: 'Service Revenue',
-        debit: 1500,
-        credit: 0,
-        balance: 12700,
-        created_at: '2024-06-05T16:00:00Z',
-    },
-];
+    return (jsxRuntime$1.jsxs("div", { className: `flex flex-col w-full ${className}`, style: { height, minWidth: '900px', minHeight: '300px' }, children: [jsxRuntime$1.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b", children: [jsxRuntime$1.jsx("div", { children: headerLeftSection }), jsxRuntime$1.jsx("div", { children: headerRightSection })] }), enableFiltering && (jsxRuntime$1.jsx(TableFilter, { globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, showFilterPanel: showFilterPanel, setShowFilterPanel: setShowFilterPanel, enableDateFilter: enableDateFilter, dateRange: dateRange, setDateRange: setDateRange, isDatePickerOpen: isDatePickerOpen, setIsDatePickerOpen: setIsDatePickerOpen, table: table })), jsxRuntime$1.jsx(TableBody, { table: table, onRowClick: onRowClick }), enablePagination && (jsxRuntime$1.jsx(TablePagination, { pageIndex: pageIndex, pageCount: pageCount, pageSize: pageSize, onPageChange: table.setPageIndex, onPageSizeChange: table.setPageSize }))] }));
+};
 
-export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Form, Input$1 as Input, InputDropdown, Label, Modal, Table, TableBody, TableFilter, cn, mockAccountingData };
+exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Form = Form;
+exports.Input = Input$1;
+exports.InputDropdown = InputDropdown;
+exports.Label = Label;
+exports.Modal = Modal;
+exports.Table = Table;
+exports.cn = cn;
 //# sourceMappingURL=index.js.map