@mahatisystems/mahati-ui-components 0.1.2 → 0.2.0

package/dist/index.js

@@ -7,6 +7,9 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -27,6 +30,9 @@ function _instanceof(left, right) {
         return left instanceof right;
     }
 }
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -54,6 +60,9 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -123,6 +132,9 @@ function _object_without_properties_loose(source, excluded) {
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
 function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -135,6 +147,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+var _import_chart_Chart;
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -199,9 +212,15 @@ __export(index_exports, {
     MahatiButton: function() {
         return Button;
     },
+    MahatiCalendar: function() {
+        return Calendar;
+    },
     MahatiCard: function() {
         return Card;
     },
+    MahatiChart: function() {
+        return ChartInterface;
+    },
     MahatiDropdown: function() {
         return Dropdown;
     },
@@ -217,11 +236,14 @@ __export(index_exports, {
     MahatiTabbedInterface: function() {
         return TabbedInterface;
     },
+    MahatiTabbedInterfaceTailwind: function() {
+        return TabbedInterface2;
+    },
     MahatiTable: function() {
         return Table;
     },
     MahatiTableTailwind: function() {
-        return TableTailwind;
+        return Table2;
     },
     MahatiTooltip: function() {
         return Tooltip;
@@ -250,11 +272,13 @@ var buttonVariants = (0, import_class_variance_authority.cva)(// Use regular Tai
             outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline"
+            link: "text-primary underline-offset-4 hover:underline",
+            danger: "hover:text-white hover:bg-primary/90"
         },
         size: {
             default: "h-10 px-4 py-2",
             sm: "h-9 rounded-md px-3",
+            md: "rounded-md px-2",
             lg: "h-11 rounded-md px-8",
             icon: "h-10 w-10"
         }
@@ -281,33 +305,11 @@ var Button = import_react.default.forwardRef(function(_param, ref) {
     }, props));
 });
 Button.displayName = "Button";
-// src/components/Card.tsx
-var React2 = __toESM(require("react"));
-var import_class_variance_authority2 = require("class-variance-authority");
+// src/components/card.tsx
+var import_react2 = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
-var cardVariants = (0, import_class_variance_authority2.cva)("rounded-[14px] transition-all duration-300 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]", {
-    variants: {
-        variant: {
-            default: "bg-white text-slate-800 border border-slate-200 hover:shadow-lg",
-            elevated: "bg-white shadow-md border border-transparent",
-            outline: "bg-slate-50 border border-slate-200",
-            subtle: "bg-slate-50 border border-transparent",
-            figma: ""
-        },
-        size: {
-            default: "p-6 rounded-[14px]",
-            sm: "p-4",
-            lg: "p-8",
-            figma: "w-[280px] p-6"
-        }
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default"
-    }
-});
-var Card = React2.forwardRef(function(_param, ref) {
-    var title = _param.title, cardContent = _param.cardContent, cardBackContent = _param.cardBackContent, _param_collapsible = _param.collapsible, collapsible = _param_collapsible === void 0 ? false : _param_collapsible, _param_flippable = _param.flippable, flippable = _param_flippable === void 0 ? false : _param_flippable, backgroundColor = _param.backgroundColor, borderRadius = _param.borderRadius, variant = _param.variant, size = _param.size, className = _param.className, children = _param.children, _param_defaultOpen = _param.defaultOpen, defaultOpen = _param_defaultOpen === void 0 ? true : _param_defaultOpen, onFlip = _param.onFlip, style = _param.style, props = _object_without_properties(_param, [
+var Card = import_react2.default.forwardRef(function(_param, ref) {
+    var title = _param.title, cardContent = _param.cardContent, cardBackContent = _param.cardBackContent, _param_collapsible = _param.collapsible, collapsible = _param_collapsible === void 0 ? false : _param_collapsible, _param_flippable = _param.flippable, flippable = _param_flippable === void 0 ? false : _param_flippable, backgroundColor = _param.backgroundColor, borderRadius = _param.borderRadius, _param_variant = _param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_size = _param.size, size = _param_size === void 0 ? "default" : _param_size, _param_className = _param.className, className = _param_className === void 0 ? "" : _param_className, children = _param.children, _param_defaultOpen = _param.defaultOpen, defaultOpen = _param_defaultOpen === void 0 ? true : _param_defaultOpen, onFlip = _param.onFlip, style = _param.style, props = _object_without_properties(_param, [
         "title",
         "cardContent",
         "cardBackContent",
@@ -323,9 +325,28 @@ var Card = React2.forwardRef(function(_param, ref) {
         "onFlip",
         "style"
     ]);
-    var _React2_useState = _sliced_to_array(React2.useState(defaultOpen), 2), open = _React2_useState[0], setOpen = _React2_useState[1];
-    var _React2_useState1 = _sliced_to_array(React2.useState(false), 2), isFlipped = _React2_useState1[0], setIsFlipped = _React2_useState1[1];
-    var contentId = React2.useId();
+    var _ref = _sliced_to_array((0, import_react2.useState)(defaultOpen), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react2.useState)(false), 2), isFlipped = _ref1[0], setIsFlipped = _ref1[1];
+    var contentId = import_react2.default.useId();
+    var getVariantStyles = function() {
+        var variants = {
+            default: "bg-white text-slate-800 border border-slate-200 hover:shadow-lg",
+            elevated: "bg-white shadow-md border border-transparent",
+            outline: "bg-slate-50 border border-slate-200",
+            subtle: "bg-slate-50 border border-transparent",
+            figma: ""
+        };
+        return variants[variant];
+    };
+    var getSizeStyles = function() {
+        var sizes = {
+            default: "p-6 rounded-[14px]",
+            sm: "p-4",
+            lg: "p-8",
+            figma: "w-[280px] p-6"
+        };
+        return sizes[size];
+    };
     var figmaStyles = variant === "figma" ? _object_spread({
         backgroundColor: backgroundColor || "rgba(77, 175, 131, 0.10)",
         border: "1px solid #1761A3",
@@ -341,27 +362,21 @@ var Card = React2.forwardRef(function(_param, ref) {
         onFlip === null || onFlip === void 0 ? void 0 : onFlip(newFlippedState);
     };
     var mainContent = cardContent || children;
-    return /* @__PURE__ */ React2.createElement("div", {
-        className: cn(flippable && "[perspective:1000px] group"),
-        onClick: handleFlip
-    }, /* @__PURE__ */ React2.createElement("div", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: flippable ? "perspective-[1000px] group" : "",
+        onClick: flippable ? handleFlip : void 0
+    }, /* @__PURE__ */ import_react2.default.createElement("div", _object_spread_props(_object_spread({
         ref: ref
     }, props), {
         style: figmaStyles,
-        className: cn(cardVariants({
-            variant: variant,
-            size: size,
-            className: className
-        }), flippable && "relative transition-transform duration-700 [transform-style:preserve-3d]", flippable && isFlipped && "[transform:rotateY(180deg)]", className)
-    }), /* @__PURE__ */ React2.createElement("div", {
-        className: cn(flippable && "[backface-visibility:hidden]")
-    }, title && /* @__PURE__ */ React2.createElement("div", {
-        className: cn("flex items-center justify-between", {
-            "mb-4": open && mainContent
-        })
-    }, /* @__PURE__ */ React2.createElement("h4", {
+        className: "\n            rounded-[14px] transition-all duration-300 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]\n            ".concat(getVariantStyles(), "\n            ").concat(getSizeStyles(), "\n            ").concat(flippable ? "relative transition-transform duration-700 [transform-style:preserve-3d]" : "", "\n            ").concat(flippable && isFlipped ? "[transform:rotateY(180deg)]" : "", "\n            ").concat(className, "\n          ")
+    }), /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: flippable ? "[backface-visibility:hidden]" : ""
+    }, title && /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "flex items-center justify-between ".concat(open && mainContent ? "mb-4" : "")
+    }, /* @__PURE__ */ import_react2.default.createElement("h4", {
         className: "text-xl font-semibold text-slate-800"
-    }, title), collapsible && /* @__PURE__ */ React2.createElement("button", {
+    }, title), collapsible && /* @__PURE__ */ import_react2.default.createElement("button", {
         type: "button",
         style: {
             backgroundColor: "#1761A3"
@@ -376,26 +391,35 @@ var Card = React2.forwardRef(function(_param, ref) {
         "aria-label": open ? "Hide content" : "Show content",
         "aria-expanded": open,
         "aria-controls": contentId
-    }, open ? /* @__PURE__ */ React2.createElement(import_lucide_react.ChevronUp, {
+    }, open ? /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronUp, {
         className: "w-5 h-5 text-white"
-    }) : /* @__PURE__ */ React2.createElement(import_lucide_react.ChevronDown, {
+    }) : /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronDown, {
         className: "w-5 h-5 text-white"
-    }))), mainContent && /* @__PURE__ */ React2.createElement("div", {
+    }))), mainContent && /* @__PURE__ */ import_react2.default.createElement("div", {
         id: contentId,
-        className: cn("grid overflow-hidden transition-all duration-500 ease-in-out", open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0")
-    }, /* @__PURE__ */ React2.createElement("div", {
+        className: "\n                  grid overflow-hidden transition-all duration-500 ease-in-out\n                  ".concat(open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0", "\n                ")
+    }, /* @__PURE__ */ import_react2.default.createElement("div", {
         className: "overflow-hidden"
-    }, mainContent))), flippable && cardBackContent && /* @__PURE__ */ React2.createElement("div", {
+    }, mainContent))), flippable && cardBackContent && /* @__PURE__ */ import_react2.default.createElement("div", {
         className: "absolute inset-0 w-full h-full p-6 [backface-visibility:hidden] [transform:rotateY(180deg)]"
     }, cardBackContent)));
 });
 Card.displayName = "Card";
 // src/components/Modal.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_lucide_react2 = require("lucide-react");
+var MODAL_WIDTH_MAP = {
+    sm: "360px",
+    default: "562px",
+    md: "720px",
+    lg: "760px",
+    xl: "800px"
+};
 function Modal(param) {
-    var isOpen = param.isOpen, onClose = param.onClose, title = param.title, subtitle = param.subtitle, children = param.children, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, primaryAction = param.primaryAction, secondaryAction = param.secondaryAction, headerIcon = param.headerIcon, _param_showDivider = param.showDivider, showDivider = _param_showDivider === void 0 ? true : _param_showDivider;
-    (0, import_react2.useEffect)(function() {
+    var isOpen = param.isOpen, onClose = param.onClose, title = param.title, subtitle = param.subtitle, children = param.children, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, customWidth = param.width, height = param.height, margin = param.margin, primaryAction = param.primaryAction, secondaryAction = param.secondaryAction, headerIcon = param.headerIcon, _param_showDivider = param.showDivider, showDivider = _param_showDivider === void 0 ? true : _param_showDivider, _param_position = param.position, position = _param_position === void 0 ? "center" : _param_position, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size;
+    var _ref;
+    var width = (_ref = customWidth !== null && customWidth !== void 0 ? customWidth : MODAL_WIDTH_MAP[size]) !== null && _ref !== void 0 ? _ref : MODAL_WIDTH_MAP.default;
+    (0, import_react3.useEffect)(function() {
         if (!isOpen) return;
         var onKey = function(e) {
             return e.key === "Escape" && onClose();
@@ -409,83 +433,235 @@ function Modal(param) {
         onClose
     ]);
     if (!isOpen) return null;
+    var getPositionStyles = function() {
+        switch(position || "center"){
+            // Ensure position is always a string for the switch
+            case "center":
+                return {
+                    alignItems: "center",
+                    justifyContent: "center"
+                };
+            case "top-left":
+                return {
+                    alignItems: "flex-start",
+                    justifyContent: "flex-start"
+                };
+            case "top-right":
+                return {
+                    alignItems: "flex-start",
+                    justifyContent: "flex-end"
+                };
+            case "top-center":
+                return {
+                    alignItems: "flex-start",
+                    justifyContent: "center"
+                };
+            case "bottom-left":
+                return {
+                    alignItems: "flex-end",
+                    justifyContent: "flex-start"
+                };
+            case "bottom-right":
+                return {
+                    alignItems: "flex-end",
+                    justifyContent: "flex-end"
+                };
+            case "bottom-center":
+                return {
+                    alignItems: "flex-end",
+                    justifyContent: "center"
+                };
+            case "center-left":
+                return {
+                    alignItems: "center",
+                    justifyContent: "flex-start"
+                };
+            case "center-right":
+                return {
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                };
+            default:
+                return {
+                    alignItems: "center",
+                    justifyContent: "center"
+                };
+        }
+    };
+    var borderRadiusClasses = {
+        center: "rounded-[8px]",
+        "top-left": "rounded-tr-[8px] rounded-br-[8px] rounded-bl-[8px]",
+        "top-right": "rounded-tl-[8px] rounded-bl-[8px] rounded-br-[8px]",
+        "top-center": "rounded-b-[8px]",
+        "bottom-left": "rounded-tr-[8px] rounded-tl-[8px] rounded-br-[8px]",
+        "bottom-right": "rounded-tl-[8px] rounded-tr-[8px] rounded-bl-[8px]",
+        "bottom-center": "rounded-t-[8px]",
+        "center-left": "rounded-r-[8px]",
+        "center-right": "rounded-l-[8px]"
+    };
     var _secondaryAction_label, _primaryAction_label;
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "fixed inset-0 bg-black/50",
-        onClick: onClose
-    }), /* @__PURE__ */ import_react2.default.createElement("hr", {
-        className: "my-4 border-red-300"
-    }), /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "fixed inset-0 overflow-y-auto z-50"
-    }, /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "flex min-h-full items-center justify-center p-4"
-    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "fixed inset-0 bg-black/40",
+        onClick: onClose,
+        "aria-hidden": "true"
+    }), /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "fixed flex p-4",
+        style: _object_spread({
+            inset: "0px",
+            zIndex: 9999,
+            pointerEvents: "none"
+        }, getPositionStyles())
+    }, /* @__PURE__ */ import_react3.default.createElement("div", {
         role: "dialog",
         "aria-modal": "true",
-        className: "relative w-[562px] shrink-0 bg-white rounded-[14px] shadow-xl pb-[10px] pt-5 transform transition-all",
         onClick: function(e) {
             return e.stopPropagation();
+        },
+        className: "\n            relative bg-white\n            shadow-2xl\n            flex flex-col\n            ".concat(position.includes("left") || position.includes("right") ? "" : "max-h-[90vh]", "\n            ").concat(className, "\n          "),
+        style: {
+            width: width,
+            height: height !== null && height !== void 0 ? height : position.includes("left") || position.includes("right") ? "90vh" : "auto",
+            pointerEvents: "auto",
+            margin: margin,
+            boxShadow: "0px 4px 24px 0px rgba(0, 0, 0, 0.15)",
+            border: "1px solid #E5E7EB"
         }
-    }, /* @__PURE__ */ import_react2.default.createElement("button", {
+    }, /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "px-6 py-4 pb-4 shrink-0 flex items-center justify-between border-b border-gray-200"
+    }, /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "flex items-center gap-3"
+    }, headerIcon && /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "flex shrink-0 items-center justify-center"
+    }, headerIcon), /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "flex-1"
+    }, title && /* @__PURE__ */ import_react3.default.createElement("h3", {
+        className: "text-[#333333] font-['Poppins'] text-[16px] font-semibold leading-normal"
+    }, title), subtitle && /* @__PURE__ */ import_react3.default.createElement("p", {
+        className: "mt-1 text-sm text-gray-500"
+    }, subtitle))), /* @__PURE__ */ import_react3.default.createElement("button", {
         onClick: onClose,
         "aria-label": "Close dialog",
-        className: "absolute top-4 right-4 text-slate-500 hover:text-slate-700"
-    }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.X, {
-        size: 20
-    })), /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "mb-4 px-6"
-    }, /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "flex items-start gap-3"
-    }, /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-[6px]"
-    }, headerIcon !== null && headerIcon !== void 0 ? headerIcon : /* @__PURE__ */ import_react2.default.createElement("span", {
-        className: "text-sm"
-    })), /* @__PURE__ */ import_react2.default.createElement("div", null, title && /* @__PURE__ */ import_react2.default.createElement("h3", {
-        className: "text-[20px] font-semibold text-slate-900 leading-6"
-    }, title), subtitle && /* @__PURE__ */ import_react2.default.createElement("p", {
-        className: "mt-1 text-sm text-slate-500"
-    }, subtitle)))), showDivider && /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "mx-6 h-px shrink-0 [background:linear-gradient(90deg,#1761A3_0%,#4DAF83_100%)] rounded-lg"
-    }), /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "px-6"
-    }, children), /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "mt-6 mx-6 h-px shrink-0 bg-[linear-gradient(90deg,#1761A3_0%,#4DAF83_100%)] rounded-lg"
-    }), (primaryAction || secondaryAction) && /* @__PURE__ */ import_react2.default.createElement("div", {
-        className: "pt-4 flex justify-end gap-3 px-6 pb-4",
-        style: {
-            float: "right",
-            marginBottom: "10px"
-        }
-    }, secondaryAction && /* @__PURE__ */ import_react2.default.createElement(Button, {
+        className: "text-gray-400 hover:text-gray-600 transition-colors"
+    }, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react2.X, {
+        size: 20,
+        strokeWidth: 2
+    }))), /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "flex-grow overflow-y-auto"
+    }, children), (primaryAction || secondaryAction) && /* @__PURE__ */ import_react3.default.createElement("div", {
+        className: "px-6 py-4 flex justify-center gap-3 shrink-0 border-t border-gray-200"
+    }, secondaryAction && /* @__PURE__ */ import_react3.default.createElement("button", {
         onClick: secondaryAction.onClick,
-        variant: "outline",
+        className: "min-w-[140px] h-[36px] px-4 rounded-md border border-[#1761A3] bg-white text-[#1761A3] font-['Poppins'] text-[14px] font-medium hover:bg-gray-50 transition-colors",
         type: "button"
-    }, (_secondaryAction_label = secondaryAction.label) !== null && _secondaryAction_label !== void 0 ? _secondaryAction_label : "Cancel"), primaryAction && /* @__PURE__ */ import_react2.default.createElement(Button, {
+    }, (_secondaryAction_label = secondaryAction.label) !== null && _secondaryAction_label !== void 0 ? _secondaryAction_label : "Cancel"), primaryAction && /* @__PURE__ */ import_react3.default.createElement("button", {
         onClick: primaryAction.onClick,
         disabled: primaryAction.disabled,
-        variant: "default",
-        className: primaryAction.disabled ? "bg-blue-300 cursor-not-allowed" : "default",
+        className: "min-w-[140px] h-[36px] px-4 rounded-md font-['Poppins'] text-[14px] font-medium transition-colors ".concat(primaryAction.disabled ? "bg-blue-300 text-white cursor-not-allowed" : "bg-[#1761A3] text-white hover:bg-[#134a7a]"),
         type: "button"
-    }, (_primaryAction_label = primaryAction.label) !== null && _primaryAction_label !== void 0 ? _primaryAction_label : "Save"))))));
+    }, (_primaryAction_label = primaryAction.label) !== null && _primaryAction_label !== void 0 ? _primaryAction_label : "Save")))));
 }
 Modal.displayName = "Modal";
+// src/components/ChartInterface.tsx
+var import_react4 = __toESM(require("react"));
+var import_chart = require("chart.js");
+var import_class_variance_authority2 = require("class-variance-authority");
+(_import_chart_Chart = import_chart.Chart).register.apply(_import_chart_Chart, _to_consumable_array(import_chart.registerables));
+var cn2 = function() {
+    for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
+        classes[_key] = arguments[_key];
+    }
+    return classes.filter(Boolean).join(" ");
+};
+var chartVariants = (0, import_class_variance_authority2.cva)("rounded-lg transition-all", {
+    variants: {
+        variant: {
+            default: "bg-white border border-gray-200 p-4",
+            filled: "bg-gray-50 border border-gray-300 p-4",
+            elevated: "bg-white shadow-lg p-4",
+            flat: "bg-transparent p-0",
+            card: "bg-white border border-gray-200 shadow-sm p-6"
+        },
+        size: {
+            sm: "h-48",
+            default: "h-64",
+            lg: "h-96",
+            xl: "h-[500px]"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+var ChartInterface = import_react4.default.forwardRef(function(_param, ref) {
+    var _param_type = _param.type, type = _param_type === void 0 ? "line" : _param_type, data = _param.data, _param_options = _param.options, options = _param_options === void 0 ? {} : _param_options, variant = _param.variant, size = _param.size, className = _param.className, props = _object_without_properties(_param, [
+        "type",
+        "data",
+        "options",
+        "variant",
+        "size",
+        "className"
+    ]);
+    var canvasRef = (0, import_react4.useRef)(null);
+    var chartInstanceRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useEffect)(function() {
+        var _canvasRef_current;
+        var ctx = (_canvasRef_current = canvasRef.current) === null || _canvasRef_current === void 0 ? void 0 : _canvasRef_current.getContext("2d");
+        if (!ctx) return;
+        if (chartInstanceRef.current) {
+            chartInstanceRef.current.destroy();
+            chartInstanceRef.current = null;
+        }
+        var safeData = JSON.parse(JSON.stringify(data));
+        var safeOptions = JSON.parse(JSON.stringify(options));
+        chartInstanceRef.current = new import_chart.Chart(ctx, {
+            type: type,
+            data: safeData,
+            options: _object_spread({
+                responsive: true,
+                maintainAspectRatio: false
+            }, safeOptions)
+        });
+        return function() {
+            if (chartInstanceRef.current) {
+                chartInstanceRef.current.destroy();
+                chartInstanceRef.current = null;
+            }
+        };
+    }, [
+        type,
+        JSON.stringify(data),
+        // Forces re-render on data change
+        JSON.stringify(options)
+    ]);
+    return /* @__PURE__ */ import_react4.default.createElement("div", _object_spread({
+        ref: ref,
+        className: cn2(chartVariants({
+            variant: variant,
+            size: size
+        }), className)
+    }, props), /* @__PURE__ */ import_react4.default.createElement("canvas", {
+        ref: canvasRef
+    }));
+});
+ChartInterface.displayName = "ChartInterface";
 // src/components/FormContainer.tsx
-var import_react3 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var FormContainer = function(param) {
     var children = param.children, onSubmit = param.onSubmit, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
-    return /* @__PURE__ */ import_react3.default.createElement("form", {
+    return /* @__PURE__ */ import_react5.default.createElement("form", {
         onSubmit: onSubmit,
         className: "\n        flex flex-col items-center justify-center\n        w-full max-w-[560px] min-h-[80vh] mx-auto p-6\n        bg-white shadow-lg rounded-lg\n        ".concat(className, "\n      ")
     }, children);
 };
 FormContainer.displayName = "FormContainer";
 // src/components/Input.tsx
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var Input = function(param) {
     var _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, name = param.name, placeholder = param.placeholder, onChange = param.onChange, _param_hasError = param.hasError, hasError = _param_hasError === void 0 ? false : _param_hasError, _param_errorMessage = param.errorMessage, errorMessage = _param_errorMessage === void 0 ? "" : _param_errorMessage, _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
-    var _ref = _sliced_to_array((0, import_react4.useState)(value), 2), internalValue = _ref[0], setInternalValue = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react4.useState)(false), 2), showError = _ref1[0], setShowError = _ref1[1];
-    (0, import_react4.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react6.useState)(value), 2), internalValue = _ref[0], setInternalValue = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react6.useState)(false), 2), showError = _ref1[0], setShowError = _ref1[1];
+    (0, import_react6.useEffect)(function() {
         setInternalValue(value);
         setShowError(hasError || value === "");
     }, [
@@ -498,27 +674,27 @@ var Input = function(param) {
         onChange(e);
         setShowError(newValue === "");
     };
-    return /* @__PURE__ */ import_react4.default.createElement("div", {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
         className: "mb-4"
-    }, /* @__PURE__ */ import_react4.default.createElement("input", {
+    }, /* @__PURE__ */ import_react6.default.createElement("input", {
         type: type,
         name: name,
         placeholder: placeholder,
         value: internalValue,
         onChange: handleChange,
         className: "\n          w-[438px] max-w-full h-[44px] flex-shrink-0\n          rounded-[6px] border\n          ".concat(showError ? "border-red-500" : "border-[#D9D9D9]", "\n          bg-white\n          text-base leading-5\n          outline-none\n          ").concat(className, "\n        ")
-    }), /* @__PURE__ */ import_react4.default.createElement("span", {
+    }), /* @__PURE__ */ import_react6.default.createElement("span", {
         className: "block text-sm text-red-500 h-[0.8rem]"
     }, errorMessage));
 };
 Input.displayName = "Input";
 // src/components/TabbedInterface.tsx
-var import_react5 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var TabbedInterface = function(param) {
     var tabs = param.tabs, _param_variant = param.variant, variant = _param_variant === void 0 ? "basic" : _param_variant, _param_defaultActiveTab = param.defaultActiveTab, defaultActiveTab = _param_defaultActiveTab === void 0 ? 0 : _param_defaultActiveTab, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, onTabChange = param.onTabChange;
     var _tabs_activeTab;
-    var _ref = _sliced_to_array((0, import_react5.useState)(defaultActiveTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
-    var id = (0, import_react5.useId)();
+    var _ref = _sliced_to_array((0, import_react7.useState)(defaultActiveTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
+    var id = (0, import_react7.useId)();
     var PRIMARY_COLOR = "#1e73be";
     var ACCENT_COLOR = "#4DAF83";
     var handleTabClick = function(index) {
@@ -563,13 +739,13 @@ var TabbedInterface = function(param) {
         }
         return "hidden";
     };
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
         className: "w-full bg-[#EEF4F7] rounded-lg border border-gray-200 shadow-sm ".concat(className)
-    }, /* @__PURE__ */ import_react5.default.createElement("div", {
+    }, /* @__PURE__ */ import_react7.default.createElement("div", {
         className: "flex flex-row overflow-x-auto scrollbar-hide space-x-4 p-4",
         role: "tablist"
     }, tabs.map(function(tab, index) {
-        return /* @__PURE__ */ import_react5.default.createElement("button", {
+        return /* @__PURE__ */ import_react7.default.createElement("button", {
             key: tab.id || "tab-".concat(id, "-").concat(index),
             className: getTabButtonStyles(index),
             onClick: function() {
@@ -580,34 +756,231 @@ var TabbedInterface = function(param) {
             "aria-controls": "".concat(id, "-tabpanel-").concat(index),
             role: "tab",
             type: "button"
-        }, tab.icon && /* @__PURE__ */ import_react5.default.createElement("span", {
+        }, tab.icon && /* @__PURE__ */ import_react7.default.createElement("span", {
             className: "flex-shrink-0 w-4 h-4"
-        }, tab.icon), /* @__PURE__ */ import_react5.default.createElement("span", {
+        }, tab.icon), /* @__PURE__ */ import_react7.default.createElement("span", {
             className: "truncate"
-        }, tab.label), variant === "underline" && /* @__PURE__ */ import_react5.default.createElement("span", {
+        }, tab.label), variant === "underline" && /* @__PURE__ */ import_react7.default.createElement("span", {
             className: getUnderlineBarClasses(index)
         }));
-    })), /* @__PURE__ */ import_react5.default.createElement("div", {
+    })), /* @__PURE__ */ import_react7.default.createElement("div", {
         className: "h-[2px] flex-shrink-0 bg-[#D9D9D9]"
-    }), /* @__PURE__ */ import_react5.default.createElement("div", {
+    }), /* @__PURE__ */ import_react7.default.createElement("div", {
         id: "".concat(id, "-tabpanel-").concat(activeTab),
         role: "tabpanel",
         "aria-labelledby": "".concat(id, "-tab-").concat(activeTab),
         className: "p-6 animate-fade-in bg-white"
-    }, ((_tabs_activeTab = tabs[activeTab]) === null || _tabs_activeTab === void 0 ? void 0 : _tabs_activeTab.content) || /* @__PURE__ */ import_react5.default.createElement("div", {
+    }, ((_tabs_activeTab = tabs[activeTab]) === null || _tabs_activeTab === void 0 ? void 0 : _tabs_activeTab.content) || /* @__PURE__ */ import_react7.default.createElement("div", {
         className: "text-center text-gray-500 py-8"
     }, "No content available for this tab")));
 };
 TabbedInterface.displayName = "TabbedInterface";
+// src/components/TabedInterfaceTailwindCSS.tsx
+var import_react8 = __toESM(require("react"));
+var cn3 = function() {
+    for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
+        classes[_key] = arguments[_key];
+    }
+    return classes.filter(Boolean).join(" ");
+};
+var getFontClass = function(font) {
+    if (!font) return "font-sans";
+    var lower = font.toLowerCase().trim();
+    if (lower === "sans" || lower === "sans-serif") return "font-sans";
+    if (lower === "serif") return "font-serif";
+    if (lower === "mono" || lower === "monospace") return "font-mono";
+    if (font.startsWith("font-") || font.includes("[")) return font;
+    return "font-[".concat(font, "]");
+};
+var getContainerClasses = function(variant) {
+    var base = "w-full max-w-4xl mx-auto my-10 rounded-xl border p-8 box-border transition-all duration-300 overflow-hidden";
+    switch(variant){
+        case "dark":
+            return cn3(base, "bg-[#45484f] border-slate-700 text-slate-50 shadow-lg");
+        case "glass":
+            return cn3(base, "bg-white/10 border-white/30 text-slate-900 backdrop-blur-xl shadow-lg");
+        default:
+            return cn3(base, "bg-white border-[#b8d1f3] text-slate-900 shadow-sm");
+    }
+};
+var getTabButtonClasses = function(variant, active, isDragging, orientation, tabHeaderFontClass) {
+    var base = "relative flex items-center px-4 py-2 text-sm font-semibold cursor-pointer transition-all duration-300 select-none";
+    var alignment = orientation === "vertical" ? "text-left" : "text-center";
+    var iconSize = " [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0";
+    var draggingRing = isDragging ? "ring-2 ring-[#1761A3]/60" : "";
+    switch(variant){
+        case "underline":
+            return cn3(base, alignment, iconSize, draggingRing, tabHeaderFontClass, active ? "text-[#1761A3]" : "text-slate-600 hover:text-[#1761A3] hover:bg-slate-50/60");
+        case "pill":
+            return cn3(base, alignment, iconSize, "rounded-full", draggingRing, tabHeaderFontClass, active ? "bg-[#1761A3] text-white shadow-md" : "bg-transparent text-[#1761A3] hover:bg-[#1761A3]/10");
+        case "outline":
+            return cn3(base, alignment, iconSize, "rounded-lg border-2", draggingRing, tabHeaderFontClass, active ? "border-[#1761A3] bg-[#F3F8FF] text-[#1761A3] shadow-sm" : "border-transparent text-slate-700 hover:border-slate-300 hover:bg-slate-50");
+        case "filled":
+            return cn3(base, alignment, iconSize, "rounded-lg", draggingRing, tabHeaderFontClass, active ? "bg-[#1761A3] text-white shadow-md" : "bg-[#EAF3FD] text-[#1761A3] hover:bg-[#d3e4fb]");
+        case "gradient":
+            return cn3(base, alignment, iconSize, "rounded-lg", draggingRing, tabHeaderFontClass, active ? "bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white shadow-md" : "bg-[#F0F4F8] text-[#1761A3] hover:bg-[#e1e8f0]");
+        case "shadow":
+            return cn3(base, alignment, iconSize, "rounded-lg", draggingRing, tabHeaderFontClass, active ? "bg-white text-[#1761A3] shadow-lg" : "bg-[#F8FAFD] text-slate-600 shadow-sm hover:bg-white");
+        case "glass":
+            return cn3(base, alignment, iconSize, "rounded-lg border border-white/30 backdrop-blur-lg", draggingRing, tabHeaderFontClass, active ? "bg-[#1761A3]/40 text-white shadow-md" : "bg-white/20 text-[#1761A3] hover:bg-[#1761A3]/50 hover:text-white");
+        case "dark":
+            return cn3(base, alignment, iconSize, "rounded-none", draggingRing, tabHeaderFontClass, active ? "text-[#90cdf4] border-b-4 border-[#63b3ed]" : "text-[#cbd5e0] hover:text-[#63b3ed]");
+        default:
+            return cn3(base, alignment, iconSize, draggingRing, tabHeaderFontClass, active ? "text-[#1761A3]" : "text-slate-700 hover:text-[#1761A3] hover:bg-slate-50");
+    }
+};
+var getUnderlineInnerClasses = function(variant, active, orientation) {
+    if (variant !== "underline") return "hidden";
+    if (orientation === "vertical") {
+        return cn3("pointer-events-none absolute left-0 top-0 h-full w-[3px] rounded-full bg-gradient-to-b from-[#1761A3] to-[#4DAF83] transition-transform duration-300 origin-top", active ? "scale-y-100" : "scale-y-0");
+    }
+    return cn3("pointer-events-none absolute bottom-[-2px] left-0 h-[3px] w-full rounded-full bg-gradient-to-r from-[#1761A3] to-[#4DAF83] transition-transform duration-300 origin-left", active ? "scale-x-100" : "scale-x-0");
+};
+var TabbedInterface2 = function(param) {
+    var tabs = param.tabs, _param_variant = param.variant, variant = _param_variant === void 0 ? "underline" : _param_variant, onTabChange = param.onTabChange, _param_draggableTabs = param.draggableTabs, draggableTabs = _param_draggableTabs === void 0 ? false : _param_draggableTabs, onReorderTabs = param.onReorderTabs, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? "horizontal" : _param_orientation, _param_verticalPosition = param.verticalPosition, verticalPosition = _param_verticalPosition === void 0 ? "left" : _param_verticalPosition, _param_showTabCloseIconInHeader = param.showTabCloseIconInHeader, showTabCloseIconInHeader = _param_showTabCloseIconInHeader === void 0 ? false : _param_showTabCloseIconInHeader, _param_tabCloseIconPosition = param.tabCloseIconPosition, tabCloseIconPosition = _param_tabCloseIconPosition === void 0 ? "right" : _param_tabCloseIconPosition, tabCloseIconContent = param.tabCloseIconContent, onCloseTab = param.onCloseTab, tabHeaderFont = param.tabHeaderFont, tabContentFont = param.tabContentFont, sectionTitleFont = param.sectionTitleFont, sectionDescriptionFont = param.sectionDescriptionFont;
+    var _ref = _sliced_to_array((0, import_react8.useState)(0), 2), activeIndex = _ref[0], setActiveIndex = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react8.useState)(null), 2), draggingIndex = _ref1[0], setDraggingIndex = _ref1[1];
+    var effectiveCloseIconContent = tabCloseIconContent !== null && tabCloseIconContent !== void 0 ? tabCloseIconContent : "\xD7";
+    var tabHeaderFontClass = getFontClass(tabHeaderFont);
+    var tabContentFontClass = getFontClass(tabContentFont);
+    (0, import_react8.useEffect)(function() {
+        if (!tabs.length) {
+            setActiveIndex(0);
+            return;
+        }
+        setActiveIndex(function(prev) {
+            return prev < 0 ? 0 : prev >= tabs.length ? tabs.length - 1 : prev;
+        });
+    }, [
+        tabs.length
+    ]);
+    var handleTabClick = function(index) {
+        setActiveIndex(index);
+        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(tabs[index].label);
+    };
+    var handleDragStart = function(index) {
+        if (!draggableTabs) return;
+        setDraggingIndex(index);
+    };
+    var handleDragOver = function(event) {
+        if (!draggableTabs) return;
+        event.preventDefault();
+    };
+    var handleDrop = function(index) {
+        if (!draggableTabs) return;
+        if (draggingIndex === null) {
+            setDraggingIndex(null);
+            return;
+        }
+        var fromIndex = draggingIndex;
+        var toIndex = index;
+        if (fromIndex === toIndex) {
+            setDraggingIndex(null);
+            return;
+        }
+        setActiveIndex(function(prevActive) {
+            var active = prevActive;
+            if (active === fromIndex) {
+                return toIndex;
+            }
+            if (fromIndex < toIndex) {
+                if (active > fromIndex && active <= toIndex) {
+                    return active - 1;
+                }
+            } else if (fromIndex > toIndex) {
+                if (active >= toIndex && active < fromIndex) {
+                    return active + 1;
+                }
+            }
+            return active;
+        });
+        onReorderTabs === null || onReorderTabs === void 0 ? void 0 : onReorderTabs(fromIndex, toIndex);
+        setDraggingIndex(null);
+    };
+    var handleDragEnd = function() {
+        if (!draggableTabs) return;
+        setDraggingIndex(null);
+    };
+    var headerButtons = /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, tabs.map(function(tab, index) {
+        var active = index === activeIndex;
+        var isDragging = draggableTabs && draggingIndex === index;
+        var showClose = showTabCloseIconInHeader && !!onCloseTab;
+        var closeIcon = showClose ? /* @__PURE__ */ import_react8.default.createElement("span", {
+            "aria-label": "Close tab",
+            role: "button",
+            onClick: function(e) {
+                e.stopPropagation();
+                onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(index);
+            },
+            className: cn3("inline-flex h-6 w-6 items-center justify-center rounded-full text-md font-bold hover:bg-slate-200 hover:text-slate-700", tabHeaderFontClass)
+        }, effectiveCloseIconContent) : null;
+        return /* @__PURE__ */ import_react8.default.createElement("button", {
+            type: "button",
+            key: index,
+            onClick: function() {
+                return handleTabClick(index);
+            },
+            className: getTabButtonClasses(variant, active, isDragging, orientation, tabHeaderFontClass),
+            draggable: draggableTabs,
+            onDragStart: function() {
+                return handleDragStart(index);
+            },
+            onDragOver: handleDragOver,
+            onDrop: function() {
+                return handleDrop(index);
+            },
+            onDragEnd: handleDragEnd
+        }, /* @__PURE__ */ import_react8.default.createElement("div", {
+            className: "flex w-full items-center justify-between gap-2"
+        }, /* @__PURE__ */ import_react8.default.createElement("div", {
+            className: "flex min-w-0 items-center gap-2"
+        }, tabCloseIconPosition === "left" && closeIcon, tab.icon && /* @__PURE__ */ import_react8.default.createElement("span", {
+            className: "[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0"
+        }, tab.icon), /* @__PURE__ */ import_react8.default.createElement("span", {
+            className: "truncate"
+        }, tab.label)), tabCloseIconPosition === "right" && closeIcon), /* @__PURE__ */ import_react8.default.createElement("span", {
+            className: getUnderlineInnerClasses(variant, active, orientation)
+        }));
+    }));
+    var content = /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: cn3("relative min-h-[180px]", tabContentFontClass)
+    }, tabs.map(function(tab, index) {
+        var active = index === activeIndex;
+        return /* @__PURE__ */ import_react8.default.createElement("div", {
+            key: index,
+            className: cn3("transition-opacity duration-300", active ? "relative opacity-100" : "pointer-events-none absolute inset-0 opacity-0")
+        }, tab.content);
+    }));
+    var containerClasses = getContainerClasses(variant);
+    if (orientation === "horizontal") {
+        return /* @__PURE__ */ import_react8.default.createElement("div", {
+            className: containerClasses
+        }, /* @__PURE__ */ import_react8.default.createElement("div", {
+            className: "mb-5 flex justify-around max-[600px]:flex-col max-[600px]:items-center"
+        }, headerButtons), content);
+    }
+    return /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: containerClasses
+    }, verticalPosition === "left" ? /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: "grid gap-6 md:grid-cols-[minmax(180px,220px)_1fr]"
+    }, /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: "flex flex-col gap-2 border-b border-slate-200 pb-3 md:border-b-0 md:border-r md:pb-0 md:pr-4"
+    }, headerButtons), /* @__PURE__ */ import_react8.default.createElement("div", null, content)) : /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: "grid gap-6 md:grid-cols-[1fr_minmax(180px,220px)]"
+    }, /* @__PURE__ */ import_react8.default.createElement("div", null, content), /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: "flex flex-col gap-2 border-t border-slate-200 pt-3 md:border-t-0 md:border-l md:pt-0 md:pl-4"
+    }, headerButtons)));
+};
+TabbedInterface2.displayName = "TabbedInterface";
 // src/components/Table.tsx
-var import_react6 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_outline = require("@heroicons/react/24/outline");
 var Table = function(param) {
     var headers = param.headers, data = param.data, page = param.page, setPage = param.setPage, limit = param.limit, setLimit = param.setLimit, totalCount = param.totalCount, highlightRowColor = param.highlightRowColor, actions = param.actions, paginationRequired = param.paginationRequired, _param_paginationPosition = param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom-center" : _param_paginationPosition, onDownloadPDF = param.onDownloadPDF, onDownloadExcel = param.onDownloadExcel, _param_searchable = param.searchable, searchable = _param_searchable === void 0 ? false : _param_searchable, _param_searchTerm = param.searchTerm, searchTerm = _param_searchTerm === void 0 ? "" : _param_searchTerm, onResetSearch = param.onResetSearch, onSearch = param.onSearch, _param_searchModeOptions = param.searchModeOptions, searchModeOptions = _param_searchModeOptions === void 0 ? [
         "includes",
         "startsWith"
     ] : _param_searchModeOptions;
-    var _ref = _sliced_to_array((0, import_react6.useState)(searchModeOptions[0]), 2), searchMode = _ref[0], setSearchMode = _ref[1];
+    var _ref = _sliced_to_array((0, import_react9.useState)(searchModeOptions[0]), 2), searchMode = _ref[0], setSearchMode = _ref[1];
     var isPaginated = paginationRequired;
     var handleChange = function(e) {
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value, searchMode);
@@ -621,7 +994,7 @@ var Table = function(param) {
     };
     var renderPageNumbers = function() {
         var _loop = function(i) {
-            pages.push(/* @__PURE__ */ import_react6.default.createElement("button", {
+            pages.push(/* @__PURE__ */ import_react9.default.createElement("button", {
                 key: i,
                 onClick: function() {
                     return goToPage(i);
@@ -636,7 +1009,7 @@ var Table = function(param) {
         if (!isPaginated || totalPages <= 1) return null;
         var pages = [];
         var siblings = 1;
-        pages.push(/* @__PURE__ */ import_react6.default.createElement("button", {
+        pages.push(/* @__PURE__ */ import_react9.default.createElement("button", {
             key: 1,
             onClick: function() {
                 return goToPage(1);
@@ -648,7 +1021,7 @@ var Table = function(param) {
             }
         }, "1"));
         if (currentPage > siblings + 2) {
-            pages.push(/* @__PURE__ */ import_react6.default.createElement("span", {
+            pages.push(/* @__PURE__ */ import_react9.default.createElement("span", {
                 key: "start-ellipsis",
                 className: "px-1 text-sm text-slate-500"
             }, "..."));
@@ -657,13 +1030,13 @@ var Table = function(param) {
         var end = Math.min(totalPages - 1, currentPage + siblings);
         for(var i = start; i <= end; i++)_loop(i);
         if (currentPage < totalPages - siblings - 1) {
-            pages.push(/* @__PURE__ */ import_react6.default.createElement("span", {
+            pages.push(/* @__PURE__ */ import_react9.default.createElement("span", {
                 key: "end-ellipsis",
                 className: "px-1 text-sm text-slate-500"
             }, "..."));
         }
         if (totalPages > 1) {
-            pages.push(/* @__PURE__ */ import_react6.default.createElement("button", {
+            pages.push(/* @__PURE__ */ import_react9.default.createElement("button", {
                 key: totalPages,
                 onClick: function() {
                     return goToPage(totalPages);
@@ -680,11 +1053,11 @@ var Table = function(param) {
     var renderPagination = function() {
         if (!isPaginated) return null;
         var align = paginationPosition.includes("left") ? "justify-start" : paginationPosition.includes("right") ? "justify-end" : "justify-center";
-        return /* @__PURE__ */ import_react6.default.createElement("div", {
+        return /* @__PURE__ */ import_react9.default.createElement("div", {
             className: "my-2 flex w-full ".concat(align)
-        }, /* @__PURE__ */ import_react6.default.createElement("div", {
+        }, /* @__PURE__ */ import_react9.default.createElement("div", {
             className: "flex flex-wrap items-center justify-center gap-2"
-        }, /* @__PURE__ */ import_react6.default.createElement("button", {
+        }, /* @__PURE__ */ import_react9.default.createElement("button", {
             onClick: function() {
                 return goToPage(currentPage - 1);
             },
@@ -693,7 +1066,7 @@ var Table = function(param) {
             style: {
                 background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
             }
-        }, "Previous"), renderPageNumbers(), /* @__PURE__ */ import_react6.default.createElement("button", {
+        }, "Previous"), renderPageNumbers(), /* @__PURE__ */ import_react9.default.createElement("button", {
             onClick: function() {
                 return goToPage(currentPage + 1);
             },
@@ -702,7 +1075,7 @@ var Table = function(param) {
             style: {
                 background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
             }
-        }, "Next"), /* @__PURE__ */ import_react6.default.createElement("select", {
+        }, "Next"), /* @__PURE__ */ import_react9.default.createElement("select", {
             value: limit,
             onChange: function(e) {
                 setPage === null || setPage === void 0 ? void 0 : setPage(1);
@@ -714,46 +1087,46 @@ var Table = function(param) {
             10,
             15
         ].map(function(size) {
-            return /* @__PURE__ */ import_react6.default.createElement("option", {
+            return /* @__PURE__ */ import_react9.default.createElement("option", {
                 key: size,
                 value: size
             }, size);
-        })), /* @__PURE__ */ import_react6.default.createElement("span", {
+        })), /* @__PURE__ */ import_react9.default.createElement("span", {
             className: "ml-2 text-xs text-slate-600"
         }, "Page ", currentPage, " of ", totalPages, " (Total: ", totalCount, " items)")));
     };
-    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ import_react6.default.createElement("div", {
+    return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ import_react9.default.createElement("div", {
         className: "mb-3 flex flex-wrap items-center justify-between gap-3"
-    }, searchable && /* @__PURE__ */ import_react6.default.createElement("div", {
+    }, searchable && /* @__PURE__ */ import_react9.default.createElement("div", {
         className: "flex items-center gap-2"
-    }, /* @__PURE__ */ import_react6.default.createElement("div", {
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
         className: "relative flex items-center"
-    }, /* @__PURE__ */ import_react6.default.createElement("input", {
+    }, /* @__PURE__ */ import_react9.default.createElement("input", {
         type: "text",
         placeholder: "Search...",
         value: searchTerm,
         onChange: handleChange,
         className: "w-56 rounded-lg border border-transparent bg-white px-3 py-2 pr-8 text-sm font-medium text-[#1761A3] shadow-sm outline-none ring-1 ring-transparent transition focus:border-transparent focus:ring-2 focus:ring-emerald-400"
-    }), searchTerm && /* @__PURE__ */ import_react6.default.createElement("button", {
+    }), searchTerm && /* @__PURE__ */ import_react9.default.createElement("button", {
         onClick: onResetSearch,
         "aria-label": "Clear search",
         className: "absolute right-2 flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
-    }, /* @__PURE__ */ import_react6.default.createElement(import_outline.XMarkIcon, {
+    }, /* @__PURE__ */ import_react9.default.createElement(import_outline.XMarkIcon, {
         className: "h-4 w-4"
-    }))), /* @__PURE__ */ import_react6.default.createElement("select", {
+    }))), /* @__PURE__ */ import_react9.default.createElement("select", {
         value: searchMode,
         onChange: function(e) {
             return setSearchMode(e.target.value);
         },
         className: "rounded-lg border border-transparent bg-white px-2 py-2 text-sm font-medium text-slate-700 shadow-sm outline-none ring-1 ring-transparent transition hover:bg-slate-50 focus:border-transparent focus:ring-2 focus:ring-emerald-400"
     }, searchModeOptions.map(function(mode) {
-        return /* @__PURE__ */ import_react6.default.createElement("option", {
+        return /* @__PURE__ */ import_react9.default.createElement("option", {
             key: mode,
             value: mode
         }, mode === "startsWith" ? "Starts With" : "Includes");
-    }))), (onDownloadPDF || onDownloadExcel) && /* @__PURE__ */ import_react6.default.createElement("div", {
+    }))), (onDownloadPDF || onDownloadExcel) && /* @__PURE__ */ import_react9.default.createElement("div", {
         className: "mt-1 flex items-center gap-2"
-    }, onDownloadPDF && /* @__PURE__ */ import_react6.default.createElement("button", {
+    }, onDownloadPDF && /* @__PURE__ */ import_react9.default.createElement("button", {
         onClick: function() {
             return onDownloadPDF(data, headers);
         },
@@ -761,9 +1134,9 @@ var Table = function(param) {
         style: {
             background: "linear-gradient(to right, #1e73be, #28a97d)"
         }
-    }, /* @__PURE__ */ import_react6.default.createElement(import_outline.ArrowDownOnSquareIcon, {
+    }, /* @__PURE__ */ import_react9.default.createElement(import_outline.ArrowDownOnSquareIcon, {
         className: "h-5 w-5"
-    })), onDownloadExcel && /* @__PURE__ */ import_react6.default.createElement("button", {
+    })), onDownloadExcel && /* @__PURE__ */ import_react9.default.createElement("button", {
         onClick: function() {
             return onDownloadExcel(data, headers);
         },
@@ -771,44 +1144,44 @@ var Table = function(param) {
         style: {
             background: "linear-gradient(to right, #1e73be, #28a97d)"
         }
-    }, /* @__PURE__ */ import_react6.default.createElement(import_outline.ArrowDownOnSquareIcon, {
+    }, /* @__PURE__ */ import_react9.default.createElement(import_outline.ArrowDownOnSquareIcon, {
         className: "h-5 w-5"
-    }), /* @__PURE__ */ import_react6.default.createElement("span", null, "Excel")))), paginationPosition.startsWith("top") && data.length > 0 && renderPagination(), /* @__PURE__ */ import_react6.default.createElement("div", {
+    }), /* @__PURE__ */ import_react9.default.createElement("span", null, "Excel")))), paginationPosition.startsWith("top") && data.length > 0 && renderPagination(), /* @__PURE__ */ import_react9.default.createElement("div", {
         className: "mt-1 overflow-hidden rounded-xl border border-[#1761A3] bg-white"
-    }, /* @__PURE__ */ import_react6.default.createElement("table", {
+    }, /* @__PURE__ */ import_react9.default.createElement("table", {
         className: "w-full border-collapse"
-    }, /* @__PURE__ */ import_react6.default.createElement("thead", {
+    }, /* @__PURE__ */ import_react9.default.createElement("thead", {
         style: {
             background: "linear-gradient(to right, #1e73be, #28a97d)"
         }
-    }, /* @__PURE__ */ import_react6.default.createElement("tr", null, headers.map(function(header, idx) {
-        return /* @__PURE__ */ import_react6.default.createElement("th", {
+    }, /* @__PURE__ */ import_react9.default.createElement("tr", null, headers.map(function(header, idx) {
+        return /* @__PURE__ */ import_react9.default.createElement("th", {
             key: idx,
             className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white first:rounded-tl-xl last:rounded-tr-xl"
         }, header.label);
-    }), actions && /* @__PURE__ */ import_react6.default.createElement("th", {
+    }), actions && /* @__PURE__ */ import_react9.default.createElement("th", {
         className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white"
-    }, "Actions"))), /* @__PURE__ */ import_react6.default.createElement("tbody", null, data.length > 0 ? data.map(function(row, rowIndex) {
-        return /* @__PURE__ */ import_react6.default.createElement("tr", {
+    }, "Actions"))), /* @__PURE__ */ import_react9.default.createElement("tbody", null, data.length > 0 ? data.map(function(row, rowIndex) {
+        return /* @__PURE__ */ import_react9.default.createElement("tr", {
             key: rowIndex,
             className: "h-[57px] border-b border-slate-200 text-sm text-slate-900 even:bg-slate-50 hover:bg-slate-100 ".concat(highlightRowColor || "")
         }, headers.map(function(header, cellIdx) {
-            return /* @__PURE__ */ import_react6.default.createElement("td", {
+            return /* @__PURE__ */ import_react9.default.createElement("td", {
                 key: cellIdx,
                 className: "px-3 py-2"
             }, function() {
                 var value = row[header.key];
-                if (import_react6.default.isValidElement(value)) return value;
+                if (import_react9.default.isValidElement(value)) return value;
                 if (typeof value === "function") {
                     try {
                         var result = value();
-                        if (import_react6.default.isValidElement(result)) return result;
+                        if (import_react9.default.isValidElement(result)) return result;
                     } catch (e) {
                         console.warn("Error executing function in table cell:", e);
                     }
                 }
                 if (typeof value === "string" && value.trim().startsWith("<") && value.trim().endsWith(">")) {
-                    return /* @__PURE__ */ import_react6.default.createElement("span", {
+                    return /* @__PURE__ */ import_react9.default.createElement("span", {
                         dangerouslySetInnerHTML: {
                             __html: value
                         }
@@ -816,9 +1189,9 @@ var Table = function(param) {
                 }
                 if (Array.isArray(value)) {
                     if (value.some(function(item) {
-                        return import_react6.default.isValidElement(item);
+                        return import_react9.default.isValidElement(item);
                     })) {
-                        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, value);
+                        return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, value);
                     }
                     return value.join(", ");
                 }
@@ -829,34 +1202,36 @@ var Table = function(param) {
                 if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") return JSON.stringify(value);
                 return String(value);
             }());
-        }), actions && /* @__PURE__ */ import_react6.default.createElement("td", {
+        }), actions && /* @__PURE__ */ import_react9.default.createElement("td", {
             className: "px-3 py-2"
         }, actions(row)));
-    }) : /* @__PURE__ */ import_react6.default.createElement("tr", null, /* @__PURE__ */ import_react6.default.createElement("td", {
+    }) : /* @__PURE__ */ import_react9.default.createElement("tr", null, /* @__PURE__ */ import_react9.default.createElement("td", {
         colSpan: headers.length + (actions ? 1 : 0),
         className: "px-4 py-6 text-center text-slate-500"
-    }, /* @__PURE__ */ import_react6.default.createElement("div", {
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
         className: "flex items-center justify-center gap-4"
-    }, /* @__PURE__ */ import_react6.default.createElement("span", null, "No records found."), onResetSearch && /* @__PURE__ */ import_react6.default.createElement("button", {
+    }, /* @__PURE__ */ import_react9.default.createElement("span", null, "No records found."), onResetSearch && /* @__PURE__ */ import_react9.default.createElement("button", {
         onClick: onResetSearch,
         className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
         style: {
             background: "linear-gradient(to right, #1e73be, #28a97d)"
         }
-    }, /* @__PURE__ */ import_react6.default.createElement("span", null, "Reset"), /* @__PURE__ */ import_react6.default.createElement(import_outline.ArrowPathIcon, {
+    }, /* @__PURE__ */ import_react9.default.createElement("span", null, "Reset"), /* @__PURE__ */ import_react9.default.createElement(import_outline.ArrowPathIcon, {
         className: "h-5 w-5"
     })))))))), paginationPosition.startsWith("bottom") && data.length > 0 && renderPagination());
 };
 Table.displayName = "Table";
 // src/components/TableTailwindCSS.tsx
-var import_react7 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_outline2 = require("@heroicons/react/24/outline");
-var TableTailwind = function(param) {
+var Table2 = function(param) {
     var headers = param.headers, data = param.data, page = param.page, setPage = param.setPage, limit = param.limit, setLimit = param.setLimit, totalCount = param.totalCount, highlightRowColor = param.highlightRowColor, actions = param.actions, paginationRequired = param.paginationRequired, _param_paginationPosition = param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom-center" : _param_paginationPosition, onDownloadPDF = param.onDownloadPDF, onDownloadExcel = param.onDownloadExcel, _param_searchable = param.searchable, searchable = _param_searchable === void 0 ? false : _param_searchable, _param_searchTerm = param.searchTerm, searchTerm = _param_searchTerm === void 0 ? "" : _param_searchTerm, onResetSearch = param.onResetSearch, onSearch = param.onSearch, _param_searchModeOptions = param.searchModeOptions, searchModeOptions = _param_searchModeOptions === void 0 ? [
         "includes",
         "startsWith"
-    ] : _param_searchModeOptions;
-    var _ref = _sliced_to_array((0, import_react7.useState)(searchModeOptions[0]), 2), searchMode = _ref[0], setSearchMode = _ref[1];
+    ] : _param_searchModeOptions, summary = param.summary, _param_summaryKey = param.summaryKey, summaryKey = _param_summaryKey === void 0 ? "summary" : _param_summaryKey, _param_summaryTitleField = param.summaryTitleField, summaryTitleField = _param_summaryTitleField === void 0 ? "name" : _param_summaryTitleField, _param_summaryColumn = param.summaryColumn, summaryColumn = _param_summaryColumn === void 0 ? false : _param_summaryColumn, summaryColumnKey = param.summaryColumnKey, _param_summaryColumnMaxLength = param.summaryColumnMaxLength, summaryColumnMaxLength = _param_summaryColumnMaxLength === void 0 ? 120 : _param_summaryColumnMaxLength, textWrapColumns = param.textWrapColumns, _param_textWrapMaxLength = param.textWrapMaxLength, textWrapMaxLength = _param_textWrapMaxLength === void 0 ? 120 : _param_textWrapMaxLength, textWrapColumnMaxLengths = param.textWrapColumnMaxLengths;
+    var _ref = _sliced_to_array((0, import_react10.useState)(searchModeOptions[0]), 2), searchMode = _ref[0], setSearchMode = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react10.useState)(null), 2), expandedRowIndex = _ref1[0], setExpandedRowIndex = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react10.useState)(/* @__PURE__ */ new Set()), 2), expandedRowIndexes = _ref2[0], setExpandedRowIndexes = _ref2[1];
     var isPaginated = paginationRequired;
     var handleChange = function(e) {
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value, searchMode);
@@ -870,28 +1245,34 @@ var TableTailwind = function(param) {
     };
     var renderPageNumbers = function() {
         var _loop = function(i) {
-            pages.push(/* @__PURE__ */ import_react7.default.createElement("button", {
+            pages.push(/* @__PURE__ */ import_react10.default.createElement("button", {
                 key: i,
                 onClick: function() {
                     return goToPage(i);
                 },
                 disabled: currentPage === i,
-                className: "inline-flex items-center rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+                className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
+                style: {
+                    background: currentPage === i ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
+                }
             }, i));
         };
         if (!isPaginated || totalPages <= 1) return null;
         var pages = [];
         var siblings = 1;
-        pages.push(/* @__PURE__ */ import_react7.default.createElement("button", {
+        pages.push(/* @__PURE__ */ import_react10.default.createElement("button", {
             key: 1,
             onClick: function() {
                 return goToPage(1);
             },
             disabled: currentPage === 1,
-            className: "inline-flex items-center rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+            className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
+            style: {
+                background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73beee, #28a97d)"
+            }
         }, "1"));
         if (currentPage > siblings + 2) {
-            pages.push(/* @__PURE__ */ import_react7.default.createElement("span", {
+            pages.push(/* @__PURE__ */ import_react10.default.createElement("span", {
                 key: "start-ellipsis",
                 className: "px-1 text-sm text-slate-500"
             }, "..."));
@@ -900,19 +1281,22 @@ var TableTailwind = function(param) {
         var end = Math.min(totalPages - 1, currentPage + siblings);
         for(var i = start; i <= end; i++)_loop(i);
         if (currentPage < totalPages - siblings - 1) {
-            pages.push(/* @__PURE__ */ import_react7.default.createElement("span", {
+            pages.push(/* @__PURE__ */ import_react10.default.createElement("span", {
                 key: "end-ellipsis",
                 className: "px-1 text-sm text-slate-500"
             }, "..."));
         }
         if (totalPages > 1) {
-            pages.push(/* @__PURE__ */ import_react7.default.createElement("button", {
+            pages.push(/* @__PURE__ */ import_react10.default.createElement("button", {
                 key: totalPages,
                 onClick: function() {
                     return goToPage(totalPages);
                 },
                 disabled: currentPage === totalPages,
-                className: "inline-flex items-center rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+                className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
+                style: {
+                    background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
+                }
             }, totalPages));
         }
         return pages;
@@ -920,23 +1304,29 @@ var TableTailwind = function(param) {
     var renderPagination = function() {
         if (!isPaginated) return null;
         var align = paginationPosition.includes("left") ? "justify-start" : paginationPosition.includes("right") ? "justify-end" : "justify-center";
-        return /* @__PURE__ */ import_react7.default.createElement("div", {
+        return /* @__PURE__ */ import_react10.default.createElement("div", {
             className: "my-2 flex w-full ".concat(align)
-        }, /* @__PURE__ */ import_react7.default.createElement("div", {
+        }, /* @__PURE__ */ import_react10.default.createElement("div", {
             className: "flex flex-wrap items-center justify-center gap-2"
-        }, /* @__PURE__ */ import_react7.default.createElement("button", {
+        }, /* @__PURE__ */ import_react10.default.createElement("button", {
             onClick: function() {
                 return goToPage(currentPage - 1);
             },
             disabled: currentPage === 1,
-            className: "inline-flex items-center rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
-        }, "Previous"), renderPageNumbers(), /* @__PURE__ */ import_react7.default.createElement("button", {
+            className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
+            style: {
+                background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
+            }
+        }, "Previous"), renderPageNumbers(), /* @__PURE__ */ import_react10.default.createElement("button", {
             onClick: function() {
                 return goToPage(currentPage + 1);
             },
             disabled: currentPage === totalPages,
-            className: "inline-flex items-center rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
-        }, "Next"), /* @__PURE__ */ import_react7.default.createElement("select", {
+            className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
+            style: {
+                background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
+            }
+        }, "Next"), /* @__PURE__ */ import_react10.default.createElement("select", {
             value: limit,
             onChange: function(e) {
                 setPage === null || setPage === void 0 ? void 0 : setPage(1);
@@ -948,93 +1338,191 @@ var TableTailwind = function(param) {
             10,
             15
         ].map(function(size) {
-            return /* @__PURE__ */ import_react7.default.createElement("option", {
+            return /* @__PURE__ */ import_react10.default.createElement("option", {
                 key: size,
                 value: size
             }, size);
-        })), /* @__PURE__ */ import_react7.default.createElement("span", {
+        })), /* @__PURE__ */ import_react10.default.createElement("span", {
             className: "ml-2 text-xs text-slate-600"
         }, "Page ", currentPage, " of ", totalPages, " (Total: ", totalCount, " items)")));
     };
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ import_react7.default.createElement("div", {
+    var summaryColKeyToUse = summaryColumnKey || summaryKey;
+    return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ import_react10.default.createElement("div", {
         className: "mb-3 flex flex-wrap items-center justify-between gap-3"
-    }, searchable && /* @__PURE__ */ import_react7.default.createElement("div", {
+    }, searchable && /* @__PURE__ */ import_react10.default.createElement("div", {
         className: "flex items-center gap-2"
-    }, /* @__PURE__ */ import_react7.default.createElement("div", {
+    }, /* @__PURE__ */ import_react10.default.createElement("div", {
         className: "relative flex items-center"
-    }, /* @__PURE__ */ import_react7.default.createElement("input", {
+    }, /* @__PURE__ */ import_react10.default.createElement("input", {
         type: "text",
         placeholder: "Search...",
         value: searchTerm,
         onChange: handleChange,
         className: "w-56 rounded-lg border border-transparent bg-white px-3 py-2 pr-8 text-sm font-medium text-[#1761A3] shadow-sm outline-none ring-1 ring-transparent transition focus:border-transparent focus:ring-2 focus:ring-emerald-400"
-    }), searchTerm && /* @__PURE__ */ import_react7.default.createElement("button", {
+    }), searchTerm && /* @__PURE__ */ import_react10.default.createElement("button", {
         onClick: onResetSearch,
         "aria-label": "Clear search",
         className: "absolute right-2 flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
-    }, /* @__PURE__ */ import_react7.default.createElement(import_outline2.XMarkIcon, {
+    }, /* @__PURE__ */ import_react10.default.createElement(import_outline2.XMarkIcon, {
         className: "h-4 w-4"
-    }))), /* @__PURE__ */ import_react7.default.createElement("select", {
+    }))), /* @__PURE__ */ import_react10.default.createElement("select", {
         value: searchMode,
         onChange: function(e) {
             return setSearchMode(e.target.value);
         },
         className: "rounded-lg border border-transparent bg-white px-2 py-2 text-sm font-medium text-slate-700 shadow-sm outline-none ring-1 ring-transparent transition hover:bg-slate-50 focus:border-transparent focus:ring-2 focus:ring-emerald-400"
     }, searchModeOptions.map(function(mode) {
-        return /* @__PURE__ */ import_react7.default.createElement("option", {
+        return /* @__PURE__ */ import_react10.default.createElement("option", {
             key: mode,
             value: mode
         }, mode === "startsWith" ? "Starts With" : "Includes");
-    }))), (onDownloadPDF || onDownloadExcel) && /* @__PURE__ */ import_react7.default.createElement("div", {
+    }))), (onDownloadPDF || onDownloadExcel) && /* @__PURE__ */ import_react10.default.createElement("div", {
         className: "mt-1 flex items-center gap-2"
-    }, onDownloadPDF && /* @__PURE__ */ import_react7.default.createElement("button", {
+    }, onDownloadPDF && /* @__PURE__ */ import_react10.default.createElement("button", {
         onClick: function() {
             return onDownloadPDF(data, headers);
         },
-        className: "inline-flex items-center gap-1 rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90"
-    }, /* @__PURE__ */ import_react7.default.createElement(import_outline2.ArrowDownOnSquareIcon, {
+        className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
+        style: {
+            background: "linear-gradient(to right, #1e73be, #28a97d)"
+        }
+    }, /* @__PURE__ */ import_react10.default.createElement(import_outline2.ArrowDownOnSquareIcon, {
         className: "h-5 w-5"
-    })), onDownloadExcel && /* @__PURE__ */ import_react7.default.createElement("button", {
+    })), onDownloadExcel && /* @__PURE__ */ import_react10.default.createElement("button", {
         onClick: function() {
             return onDownloadExcel(data, headers);
         },
-        className: "inline-flex items-center gap-1 rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90"
-    }, /* @__PURE__ */ import_react7.default.createElement(import_outline2.ArrowDownOnSquareIcon, {
+        className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
+        style: {
+            background: "linear-gradient(to right, #1e73be, #28a97d)"
+        }
+    }, /* @__PURE__ */ import_react10.default.createElement(import_outline2.ArrowDownOnSquareIcon, {
         className: "h-5 w-5"
-    }), /* @__PURE__ */ import_react7.default.createElement("span", null, "Excel")))), paginationPosition.startsWith("top") && data.length > 0 && renderPagination(), /* @__PURE__ */ import_react7.default.createElement("div", {
+    }), /* @__PURE__ */ import_react10.default.createElement("span", null, "Excel")))), paginationPosition.startsWith("top") && data.length > 0 && renderPagination(), /* @__PURE__ */ import_react10.default.createElement("div", {
         className: "mt-1 overflow-hidden rounded-xl border border-[#1761A3] bg-white"
-    }, /* @__PURE__ */ import_react7.default.createElement("table", {
+    }, /* @__PURE__ */ import_react10.default.createElement("table", {
         className: "w-full border-collapse"
-    }, /* @__PURE__ */ import_react7.default.createElement("thead", {
-        className: "bg-gradient-to-r from-[#1e73be] to-[#28a97d]"
-    }, /* @__PURE__ */ import_react7.default.createElement("tr", null, headers.map(function(header, idx) {
-        return /* @__PURE__ */ import_react7.default.createElement("th", {
+    }, /* @__PURE__ */ import_react10.default.createElement("thead", {
+        style: {
+            background: "linear-gradient(to right, #1e73be, #28a97d)"
+        }
+    }, /* @__PURE__ */ import_react10.default.createElement("tr", null, headers.map(function(header, idx) {
+        return /* @__PURE__ */ import_react10.default.createElement("th", {
             key: idx,
             className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white first:rounded-tl-xl last:rounded-tr-xl"
         }, header.label);
-    }), actions && /* @__PURE__ */ import_react7.default.createElement("th", {
+    }), actions && /* @__PURE__ */ import_react10.default.createElement("th", {
         className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white"
-    }, "Actions"))), /* @__PURE__ */ import_react7.default.createElement("tbody", null, data.length > 0 ? data.map(function(row, rowIndex) {
-        return /* @__PURE__ */ import_react7.default.createElement("tr", {
-            key: rowIndex,
-            className: "h-[57px] border-b border-slate-200 text-sm text-slate-900 even:bg-slate-50 hover:bg-slate-100 ".concat(highlightRowColor || "")
+    }, "Actions"))), /* @__PURE__ */ import_react10.default.createElement("tbody", null, data.length > 0 ? data.map(function(row, rowIndex) {
+        var isExpandable = !!summary;
+        var isExpanded = summary === "single" ? expandedRowIndex === rowIndex : summary === "multi" ? expandedRowIndexes.has(rowIndex) : false;
+        var handleRowClick = function() {
+            if (!summary) return;
+            if (summary === "single") {
+                setExpandedRowIndex(function(prev) {
+                    return prev === rowIndex ? null : rowIndex;
+                });
+            } else if (summary === "multi") {
+                setExpandedRowIndexes(function(prev) {
+                    var next = new Set(prev);
+                    if (next.has(rowIndex)) {
+                        next.delete(rowIndex);
+                    } else {
+                        next.add(rowIndex);
+                    }
+                    return next;
+                });
+            }
+        };
+        var handleCloseDrawer = function(e) {
+            e.stopPropagation();
+            if (summary === "single") {
+                setExpandedRowIndex(null);
+            } else if (summary === "multi") {
+                setExpandedRowIndexes(function(prev) {
+                    var next = new Set(prev);
+                    next.delete(rowIndex);
+                    return next;
+                });
+            }
+        };
+        var titleValue = row[summaryTitleField];
+        var summaryValue = row[summaryKey];
+        return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, {
+            key: rowIndex
+        }, /* @__PURE__ */ import_react10.default.createElement("tr", {
+            onClick: isExpandable ? handleRowClick : void 0,
+            className: "h-[57px] border-b border-slate-200 text-sm text-slate-900 even:bg-slate-50 hover:bg-slate-100 ".concat(isExpandable ? "cursor-pointer transition-colors" : "", " ").concat(highlightRowColor || "", " ").concat(isExpanded ? "bg-[#1e73be80]" : ""),
+            style: isExpanded ? {
+                backgroundColor: "rgba(30, 190, 145, 0.38)"
+            } : void 0
         }, headers.map(function(header, cellIdx) {
-            return /* @__PURE__ */ import_react7.default.createElement("td", {
+            return /* @__PURE__ */ import_react10.default.createElement("td", {
                 key: cellIdx,
                 className: "px-3 py-2"
             }, function() {
                 var value = row[header.key];
-                if (import_react7.default.isValidElement(value)) return value;
+                if (summaryColumn && header.key === summaryColKeyToUse) {
+                    if (value == null) {
+                        return "-";
+                    }
+                    if (import_react10.default.isValidElement(value)) {
+                        return /* @__PURE__ */ import_react10.default.createElement("div", {
+                            className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2"
+                        }, value);
+                    }
+                    var fullText;
+                    if (typeof value === "string") {
+                        fullText = value;
+                    } else if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") {
+                        fullText = JSON.stringify(value);
+                    } else {
+                        fullText = String(value);
+                    }
+                    var summaryOverride = textWrapColumnMaxLengths && textWrapColumnMaxLengths[summaryColKeyToUse];
+                    var maxLen = summaryOverride !== null && summaryOverride !== void 0 ? summaryOverride : summaryColumnMaxLength;
+                    var truncated = fullText.length <= maxLen ? fullText : fullText.substring(0, maxLen).trim() + "...";
+                    return /* @__PURE__ */ import_react10.default.createElement("div", {
+                        className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2",
+                        title: fullText
+                    }, truncated);
+                }
+                if (textWrapColumns && textWrapColumns.includes(header.key)) {
+                    if (value == null) {
+                        return "-";
+                    }
+                    if (import_react10.default.isValidElement(value)) {
+                        return /* @__PURE__ */ import_react10.default.createElement("div", {
+                            className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2"
+                        }, value);
+                    }
+                    var fullText1;
+                    if (typeof value === "string") {
+                        fullText1 = value;
+                    } else if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") {
+                        fullText1 = JSON.stringify(value);
+                    } else {
+                        fullText1 = String(value);
+                    }
+                    var perColMax = textWrapColumnMaxLengths && textWrapColumnMaxLengths[header.key];
+                    var maxLen1 = perColMax !== null && perColMax !== void 0 ? perColMax : textWrapMaxLength;
+                    var truncated1 = fullText1.length <= maxLen1 ? fullText1 : fullText1.substring(0, maxLen1).trim() + "...";
+                    return /* @__PURE__ */ import_react10.default.createElement("div", {
+                        className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2",
+                        title: fullText1
+                    }, truncated1);
+                }
+                if (import_react10.default.isValidElement(value)) return value;
                 if (typeof value === "function") {
                     try {
                         var result = value();
-                        if (import_react7.default.isValidElement(result)) return result;
+                        if (import_react10.default.isValidElement(result)) return result;
                     } catch (e) {
                         console.warn("Error executing function in table cell:", e);
                     }
                 }
                 if (typeof value === "string" && value.trim().startsWith("<") && value.trim().endsWith(">")) {
-                    return /* @__PURE__ */ import_react7.default.createElement("span", {
+                    return /* @__PURE__ */ import_react10.default.createElement("span", {
                         dangerouslySetInnerHTML: {
                             __html: value
                         }
@@ -1042,9 +1530,9 @@ var TableTailwind = function(param) {
                 }
                 if (Array.isArray(value)) {
                     if (value.some(function(item) {
-                        return import_react7.default.isValidElement(item);
+                        return import_react10.default.isValidElement(item);
                     })) {
-                        return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, value);
+                        return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, value);
                     }
                     return value.join(", ");
                 }
@@ -1055,28 +1543,52 @@ var TableTailwind = function(param) {
                 if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") return JSON.stringify(value);
                 return String(value);
             }());
-        }), actions && /* @__PURE__ */ import_react7.default.createElement("td", {
+        }), actions && /* @__PURE__ */ import_react10.default.createElement("td", {
             className: "px-3 py-2"
-        }, actions(row)));
-    }) : /* @__PURE__ */ import_react7.default.createElement("tr", null, /* @__PURE__ */ import_react7.default.createElement("td", {
+        }, actions(row))), isExpandable && isExpanded && /* @__PURE__ */ import_react10.default.createElement("tr", {
+            className: "border-b border-blue-200"
+        }, /* @__PURE__ */ import_react10.default.createElement("td", {
+            colSpan: headers.length + (actions ? 1 : 0),
+            className: "bg-gradient-to-r from-blue-25 to-blue-50 px-3 py-4"
+        }, /* @__PURE__ */ import_react10.default.createElement("div", {
+            className: "flex items-start gap-3"
+        }, /* @__PURE__ */ import_react10.default.createElement("div", {
+            className: "flex-1"
+        }, /* @__PURE__ */ import_react10.default.createElement("div", {
+            className: "mb-2 flex items-start justify-between"
+        }, /* @__PURE__ */ import_react10.default.createElement("h4", {
+            className: "text-sm font-semibold text-slate-800"
+        }, titleValue ? "Summary for ".concat(String(titleValue)) : "Summary"), /* @__PURE__ */ import_react10.default.createElement("button", {
+            onClick: handleCloseDrawer,
+            className: "ml-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-blue-200",
+            "aria-label": "Close summary"
+        }, /* @__PURE__ */ import_react10.default.createElement(import_outline2.XMarkIcon, {
+            className: "h-4 w-4 text-slate-600"
+        }))), /* @__PURE__ */ import_react10.default.createElement("p", {
+            className: "text-sm leading-relaxed text-slate-600"
+        }, summaryValue == null ? "-" : import_react10.default.isValidElement(summaryValue) ? summaryValue : typeof summaryValue === "string" ? summaryValue : (typeof summaryValue === "undefined" ? "undefined" : _type_of(summaryValue)) === "object" ? JSON.stringify(summaryValue) : String(summaryValue)))))));
+    }) : /* @__PURE__ */ import_react10.default.createElement("tr", null, /* @__PURE__ */ import_react10.default.createElement("td", {
         colSpan: headers.length + (actions ? 1 : 0),
         className: "px-4 py-6 text-center text-slate-500"
-    }, /* @__PURE__ */ import_react7.default.createElement("div", {
+    }, /* @__PURE__ */ import_react10.default.createElement("div", {
         className: "flex items-center justify-center gap-4"
-    }, /* @__PURE__ */ import_react7.default.createElement("span", null, "No records found."), onResetSearch && /* @__PURE__ */ import_react7.default.createElement("button", {
+    }, /* @__PURE__ */ import_react10.default.createElement("span", null, "No records found."), onResetSearch && /* @__PURE__ */ import_react10.default.createElement("button", {
         onClick: onResetSearch,
-        className: "inline-flex items-center gap-1 rounded-md bg-gradient-to-r from-[#1e73be] to-[#28a97d] px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90"
-    }, /* @__PURE__ */ import_react7.default.createElement("span", null, "Reset"), /* @__PURE__ */ import_react7.default.createElement(import_outline2.ArrowPathIcon, {
+        className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
+        style: {
+            background: "linear-gradient(to right, #1e73b, #28a97d)"
+        }
+    }, /* @__PURE__ */ import_react10.default.createElement("span", null, "Reset"), /* @__PURE__ */ import_react10.default.createElement(import_outline2.ArrowPathIcon, {
         className: "h-5 w-5"
     })))))))), paginationPosition.startsWith("bottom") && data.length > 0 && renderPagination());
 };
-TableTailwind.displayName = "TableTailwind";
+Table2.displayName = "Table";
 // src/components/TooltipTailwindCSS.tsx
-var import_react8 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var Tooltip = function(param) {
-    var text = param.text, _param_position = param.position, position = _param_position === void 0 ? "top" : _param_position, children = param.children, _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? "text-gray-800" : _param_textColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? "bg-[rgba(23,97,163,1)] bg-gradient-to-r from-[rgba(23,97,163,1)] to-[rgba(77,175,131,1)]" : _param_backgroundColor, image = param.image, animation = param.animation;
-    var _ref = _sliced_to_array((0, import_react8.useState)(false), 2), visible = _ref[0], setVisible = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react8.useState)(false), 2), showAnimation = _ref1[0], setShowAnimation = _ref1[1];
+    var text = param.text, _param_position = param.position, position = _param_position === void 0 ? "top" : _param_position, children = param.children, _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? "text-gray-800" : _param_textColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? "bg-gradient-to-r from-[rgba(23,97,163,1)] to-[rgba(77,175,131,1)]" : _param_backgroundColor, image = param.image, animation = param.animation;
+    var _ref = _sliced_to_array((0, import_react11.useState)(false), 2), visible = _ref[0], setVisible = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react11.useState)(false), 2), showAnimation = _ref1[0], setShowAnimation = _ref1[1];
     var showTooltip = function() {
         setVisible(true);
         if (animation) {
@@ -1110,7 +1622,7 @@ var Tooltip = function(param) {
     var tooltipClasses = variant === "transparent" ? "".concat(transparentTooltipClasses, " ").concat(positionClasses[position]) : "".concat(defaultTooltipClasses, " ").concat(positionClasses[position]);
     var renderTooltipContent = function() {
         if (image) {
-            return /* @__PURE__ */ import_react8.default.createElement("img", {
+            return /* @__PURE__ */ import_react11.default.createElement("img", {
                 src: image.src,
                 alt: image.alt || "Tooltip image",
                 width: image.width || 200,
@@ -1124,26 +1636,1297 @@ var Tooltip = function(param) {
     var renderAnimation = function() {
         if (!animation || !showAnimation) return null;
         var AnimationComponent = animation.component;
-        return /* @__PURE__ */ import_react8.default.createElement(AnimationComponent, _object_spread({
+        return /* @__PURE__ */ import_react11.default.createElement(AnimationComponent, _object_spread({
             isActive: showAnimation
         }, animation.props));
     };
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
         className: containerClasses,
         onMouseEnter: showTooltip,
         onMouseLeave: hideTooltip,
         onFocus: showTooltip,
         onBlur: hideTooltip
-    }, children, renderAnimation(), /* @__PURE__ */ import_react8.default.createElement("div", {
+    }, children, renderAnimation(), /* @__PURE__ */ import_react11.default.createElement("div", {
         className: tooltipClasses,
         role: "tooltip"
-    }, renderTooltipContent(), variant === "default" && !image && /* @__PURE__ */ import_react8.default.createElement("div", {
+    }, renderTooltipContent(), variant === "default" && !image && /* @__PURE__ */ import_react11.default.createElement("div", {
         className: "".concat(arrowBaseClasses, " ").concat(arrowPositionClasses[position], " ").concat(arrowBackgroundClass, " rounded-sm")
     })));
 };
 Tooltip.displayName = "Tooltip";
+// src/components/Calendar.tsx
+var import_react12 = __toESM(require("react"));
+var import_hi = require("react-icons/hi");
+var import_hi2 = require("react-icons/hi2");
+var convertToDateString = function(date) {
+    if (!date) return "";
+    var year = date.year;
+    var month = String(date.month + 1).padStart(2, "0");
+    var day = String(date.day).padStart(2, "0");
+    return "".concat(year, "-").concat(month, "-").concat(day);
+};
+var cn4 = function() {
+    for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
+        classes[_key] = arguments[_key];
+    }
+    return classes.filter(Boolean).join(" ");
+};
+var isSameDate = function(date1, date2) {
+    if (!date1 || !date2) return false;
+    return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;
+};
+var formatDate = function(date) {
+    if (!date) return "";
+    var month = String(date.month + 1).padStart(2, "0");
+    var day = String(date.day).padStart(2, "0");
+    var year = String(date.year);
+    return "".concat(month, "-").concat(day, "-").concat(year);
+};
+var formatDateWithFormat = function(date, format) {
+    if (!date) return "";
+    var monthNum = date.month + 1;
+    var month = String(monthNum).padStart(2, "0");
+    var day = String(date.day).padStart(2, "0");
+    var year = String(date.year);
+    var monthNames = [
+        "JAN",
+        "FEB",
+        "MAR",
+        "APR",
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC"
+    ];
+    var monthAbbr = monthNames[date.month];
+    if (format === "none") {
+        return "".concat(month, "-").concat(day, "-").concat(year);
+    }
+    switch(format){
+        case "MM/DD/YYYY":
+            return "".concat(month, "/").concat(day, "/").concat(year);
+        case "DD/MM/YYYY":
+            return "".concat(day, "/").concat(month, "/").concat(year);
+        case "YYYY/MM/DD":
+            return "".concat(year, "/").concat(month, "/").concat(day);
+        case "MMM/DD/YYYY":
+            return "".concat(monthAbbr, "/").concat(day, "/").concat(year);
+        case "DD/MMM/YYYY":
+            return "".concat(day, "/").concat(monthAbbr, "/").concat(year);
+        case "YYYY/MMM/DD":
+            return "".concat(year, "/").concat(monthAbbr, "/").concat(day);
+        case "MMM DD, YYYY":
+            return "".concat(monthAbbr, " ").concat(day, ", ").concat(year);
+        case "DD MMM YYYY":
+            return "".concat(day, " ").concat(monthAbbr, " ").concat(year);
+        case "YYYY MMM DD":
+            return "".concat(year, " ").concat(monthAbbr, " ").concat(day);
+        case "MM-DD-YYYY":
+            return "".concat(month, "-").concat(day, "-").concat(year);
+        case "DD-MM-YYYY":
+            return "".concat(day, "-").concat(month, "-").concat(year);
+        case "YYYY-MM-DD":
+            return "".concat(year, "-").concat(month, "-").concat(day);
+        case "MMM-DD-YYYY":
+            return "".concat(monthAbbr, "-").concat(day, "-").concat(year);
+        case "DD-MMM-YYYY":
+            return "".concat(day, "-").concat(monthAbbr, "-").concat(year);
+        case "YYYY-MMM-DD":
+            return "".concat(year, "-").concat(monthAbbr, "-").concat(day);
+        case "DD.MM.YYYY":
+            return "".concat(day, ".").concat(month, ".").concat(year);
+        case "MM.DD.YYYY":
+            return "".concat(month, ".").concat(day, ".").concat(year);
+        case "YYYY.MM.DD":
+            return "".concat(year, ".").concat(month, ".").concat(day);
+        default:
+            return "".concat(month, "-").concat(day, "-").concat(year);
+    }
+};
+var formatTime = function(time) {
+    var format = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "12h";
+    if (!time) return "";
+    if (format === "24h") {
+        var hour24 = time.hour;
+        if (time.period === "PM" && time.hour !== 12) {
+            hour24 = time.hour + 12;
+        } else if (time.period === "AM" && time.hour === 12) {
+            hour24 = 0;
+        }
+        var hour2 = String(hour24).padStart(2, "0");
+        var minute2 = String(time.minute).padStart(2, "0");
+        return "".concat(hour2, ":").concat(minute2);
+    }
+    var hour = String(time.hour).padStart(2, "0");
+    var minute = String(time.minute).padStart(2, "0");
+    return "".concat(hour, ":").concat(minute, " ").concat(time.period);
+};
+var getDaysInMonth = function(year, monthIndex) {
+    return new Date(year, monthIndex + 1, 0).getDate();
+};
+var getFirstDayOfMonth = function(year, monthIndex) {
+    return new Date(year, monthIndex, 1).getDay();
+};
+var getMonthName = function(monthIndex) {
+    return new Date(2024, monthIndex, 1).toLocaleDateString("en-US", {
+        month: "long"
+    });
+};
+var DAY_NAMES = [
+    "SUN",
+    "MON",
+    "TUE",
+    "WED",
+    "THU",
+    "FRI",
+    "SAT"
+];
+var DATE_FORMAT_OPTIONS = [
+    "none",
+    "MM/DD/YYYY",
+    "DD/MM/YYYY",
+    "YYYY/MM/DD",
+    "MMM/DD/YYYY",
+    "DD/MMM/YYYY",
+    "YYYY/MMM/DD",
+    "MMM DD, YYYY",
+    "DD MMM YYYY",
+    "YYYY MMM DD",
+    "MM-DD-YYYY",
+    "DD-MM-YYYY",
+    "YYYY-MM-DD",
+    "MMM-DD-YYYY",
+    "DD-MMM-YYYY",
+    "YYYY-MMM-DD",
+    "DD.MM.YYYY",
+    "MM.DD.YYYY",
+    "YYYY.MM.DD"
+];
+var TIME_ZONE_OPTIONS = [
+    "none",
+    "UTC",
+    "GMT",
+    "EST",
+    "EDT",
+    "CST",
+    "CDT",
+    "MST",
+    "MDT",
+    "PST",
+    "PDT",
+    "IST",
+    "JST",
+    "KST",
+    "AEST",
+    "AEDT",
+    "NZST",
+    "NZDT",
+    "CET",
+    "CEST",
+    "BST",
+    "AST",
+    "HST",
+    "AKST",
+    "AKDT",
+    "SST",
+    "NST",
+    "WET",
+    "WEST",
+    "EET",
+    "EEST",
+    "MSK",
+    "HKT",
+    "SGT",
+    "PKT",
+    "BDT",
+    "AWST",
+    "ACST",
+    "ACDT",
+    "NFT"
+];
+var compareInternalDates = function(a, b) {
+    if (a.year !== b.year) return a.year - b.year;
+    if (a.monthIndex !== b.monthIndex) return a.monthIndex - b.monthIndex;
+    return a.day - b.day;
+};
+var addDaysInternal = function(start, daysToAdd) {
+    var y = start.year;
+    var m = start.monthIndex;
+    var d = start.day + daysToAdd;
+    while(true){
+        var dim = getDaysInMonth(y, m);
+        if (d <= dim) break;
+        d -= dim;
+        m += 1;
+        if (m > 11) {
+            m = 0;
+            y += 1;
+        }
+    }
+    return {
+        year: y,
+        monthIndex: m,
+        day: d
+    };
+};
+var isBlockedDateHelper = function(date, config) {
+    if (!config || config.days <= 0) return false;
+    var startInternal = {
+        year: config.startDate.year,
+        monthIndex: config.startDate.month - 1,
+        day: config.startDate.day
+    };
+    var endInternal = addDaysInternal(startInternal, config.days - 1);
+    var currentInternal = {
+        year: date.year,
+        monthIndex: date.month,
+        day: date.day
+    };
+    var afterOrOnStart = compareInternalDates(currentInternal, startInternal) >= 0;
+    var beforeOrOnEnd = compareInternalDates(currentInternal, endInternal) <= 0;
+    return afterOrOnStart && beforeOrOnEnd;
+};
+var getLocalTimeZone = function() {
+    var timeZoneString = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    var date = /* @__PURE__ */ new Date();
+    var shortTimeZone = date.toLocaleTimeString("en-us", {
+        timeZoneName: "short"
+    }).split(" ")[2];
+    return shortTimeZone || timeZoneString;
+};
+var SIZE_SCALES = {
+    "small": 0.65,
+    "medium": 0.8,
+    "large": 0.9,
+    "extra-large": 1
+};
+var getDeviceScale = function() {
+    if (typeof window === "undefined") return 1;
+    var width = window.innerWidth;
+    if (width < 640) return 0.7;
+    if (width < 1024) return 0.85;
+    return 1;
+};
+var Calendar = function(param) {
+    var value = param.value, onChange = param.onChange, _param_enableRangeSelection = param.enableRangeSelection, enableRangeSelection = _param_enableRangeSelection === void 0 ? false : _param_enableRangeSelection, rangeValue = param.rangeValue, onRangeChange = param.onRangeChange, _param_enableTimeSelection = param.enableTimeSelection, enableTimeSelection = _param_enableTimeSelection === void 0 ? false : _param_enableTimeSelection, timeValue = param.timeValue, onTimeChange = param.onTimeChange, _param_showTimeFormatToggle = param.showTimeFormatToggle, showTimeFormatToggle = _param_showTimeFormatToggle === void 0 ? false : _param_showTimeFormatToggle, _param_timeFormat = param.timeFormat, timeFormat = _param_timeFormat === void 0 ? "12h" : _param_timeFormat, onTimeFormatChange = param.onTimeFormatChange, _param_autoHide = param.autoHide, autoHide = _param_autoHide === void 0 ? false : _param_autoHide, _param_showTodayButton = param.showTodayButton, showTodayButton = _param_showTodayButton === void 0 ? false : _param_showTodayButton, _param_showClearButton = param.showClearButton, showClearButton = _param_showClearButton === void 0 ? false : _param_showClearButton, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select date" : _param_placeholder, className = param.className, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, onShow = param.onShow, onHide = param.onHide, icon = param.icon, _param_showIcon = param.showIcon, showIcon = _param_showIcon === void 0 ? true : _param_showIcon, _param_size = param.size, size = _param_size === void 0 ? "extra-large" : _param_size, _param_enableYearDropdown = param.enableYearDropdown, enableYearDropdown = _param_enableYearDropdown === void 0 ? false : _param_enableYearDropdown, _param_showDateFormatSelector = param.showDateFormatSelector, showDateFormatSelector = _param_showDateFormatSelector === void 0 ? false : _param_showDateFormatSelector, _param_dateFormat = param.dateFormat, dateFormat = _param_dateFormat === void 0 ? "none" : _param_dateFormat, onDateFormatChange = param.onDateFormatChange, _param_showTimeZoneSelector = param.showTimeZoneSelector, showTimeZoneSelector = _param_showTimeZoneSelector === void 0 ? false : _param_showTimeZoneSelector, _param_timeZoneFormat = param.timeZoneFormat, timeZoneFormat = _param_timeZoneFormat === void 0 ? "none" : _param_timeZoneFormat, onTimeZoneFormatChange = param.onTimeZoneFormatChange, blockDateConfig = param.blockDateConfig;
+    var today = /* @__PURE__ */ new Date();
+    var _ref = _sliced_to_array((0, import_react12.useState)((value === null || value === void 0 ? void 0 : value.year) || today.getFullYear()), 2), currentYear = _ref[0], setCurrentYear = _ref[1];
+    var _value_month;
+    var _ref1 = _sliced_to_array((0, import_react12.useState)((_value_month = value === null || value === void 0 ? void 0 : value.month) !== null && _value_month !== void 0 ? _value_month : today.getMonth()), 2), currentMonth = _ref1[0], setCurrentMonth = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react12.useState)(false), 2), isOpen = _ref2[0], setIsOpen = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react12.useState)("start"), 2), activeField = _ref3[0], setActiveField = _ref3[1];
+    var _ref4 = _sliced_to_array((0, import_react12.useState)(false), 2), showTimeSelector = _ref4[0], setShowTimeSelector = _ref4[1];
+    var _ref5 = _sliced_to_array((0, import_react12.useState)((timeValue === null || timeValue === void 0 ? void 0 : timeValue.hour) || 12), 2), selectedHour = _ref5[0], setSelectedHour = _ref5[1];
+    var _ref6 = _sliced_to_array((0, import_react12.useState)((timeValue === null || timeValue === void 0 ? void 0 : timeValue.minute) || 0), 2), selectedMinute = _ref6[0], setSelectedMinute = _ref6[1];
+    var _ref7 = _sliced_to_array((0, import_react12.useState)((timeValue === null || timeValue === void 0 ? void 0 : timeValue.period) || "AM"), 2), selectedPeriod = _ref7[0], setSelectedPeriod = _ref7[1];
+    var _ref8 = _sliced_to_array((0, import_react12.useState)(timeFormat), 2), internalTimeFormat = _ref8[0], setInternalTimeFormat = _ref8[1];
+    var _ref9 = _sliced_to_array((0, import_react12.useState)(false), 2), showYearDropdown = _ref9[0], setShowYearDropdown = _ref9[1];
+    var _ref10 = _sliced_to_array((0, import_react12.useState)(dateFormat), 2), internalDateFormat = _ref10[0], setInternalDateFormat = _ref10[1];
+    var _ref11 = _sliced_to_array((0, import_react12.useState)(timeZoneFormat), 2), internalTimeZoneFormat = _ref11[0], setInternalTimeZoneFormat = _ref11[1];
+    var _ref12 = _sliced_to_array((0, import_react12.useState)(1), 2), deviceScale = _ref12[0], setDeviceScale = _ref12[1];
+    var _ref13 = _sliced_to_array((0, import_react12.useState)(false), 2), positionAbove = _ref13[0], setPositionAbove = _ref13[1];
+    var containerRef = (0, import_react12.useRef)(null);
+    var calendarRef = (0, import_react12.useRef)(null);
+    var sizeScale = SIZE_SCALES[size];
+    var scale = sizeScale * deviceScale;
+    var scaled = function(value2) {
+        return Math.round(value2 * scale);
+    };
+    (0, import_react12.useEffect)(function() {
+        var handleResize = function() {
+            setDeviceScale(getDeviceScale());
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function() {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    (0, import_react12.useEffect)(function() {
+        if (!isOpen || !containerRef.current || !calendarRef.current) return;
+        var calculatePosition = function() {
+            var _containerRef_current, _calendarRef_current;
+            var containerRect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+            var calendarHeight = ((_calendarRef_current = calendarRef.current) === null || _calendarRef_current === void 0 ? void 0 : _calendarRef_current.offsetHeight) || 526 * scale;
+            if (!containerRect) return;
+            var spaceBelow = window.innerHeight - containerRect.bottom;
+            var spaceAbove = containerRect.top;
+            var bufferSpace = 16;
+            if (spaceBelow < calendarHeight + bufferSpace && spaceAbove > spaceBelow) {
+                setPositionAbove(true);
+            } else {
+                setPositionAbove(false);
+            }
+        };
+        calculatePosition();
+        window.addEventListener("resize", calculatePosition);
+        window.addEventListener("scroll", calculatePosition, true);
+        return function() {
+            window.removeEventListener("resize", calculatePosition);
+            window.removeEventListener("scroll", calculatePosition, true);
+        };
+    }, [
+        isOpen,
+        scale
+    ]);
+    (0, import_react12.useEffect)(function() {
+        if (value) {
+            setCurrentYear(value.year);
+            setCurrentMonth(value.month);
+        }
+    }, [
+        value
+    ]);
+    (0, import_react12.useEffect)(function() {
+        if (timeValue) {
+            setSelectedHour(timeValue.hour);
+            setSelectedMinute(timeValue.minute);
+            setSelectedPeriod(timeValue.period);
+        }
+    }, [
+        timeValue
+    ]);
+    (0, import_react12.useEffect)(function() {
+        setInternalTimeFormat(timeFormat);
+    }, [
+        timeFormat
+    ]);
+    (0, import_react12.useEffect)(function() {
+        setInternalDateFormat(dateFormat);
+    }, [
+        dateFormat
+    ]);
+    (0, import_react12.useEffect)(function() {
+        setInternalTimeZoneFormat(timeZoneFormat);
+    }, [
+        timeZoneFormat
+    ]);
+    (0, import_react12.useEffect)(function() {
+        var handleClickOutside = function(event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                if (isOpen) {
+                    setIsOpen(false);
+                    setShowTimeSelector(false);
+                    setShowYearDropdown(false);
+                    onHide === null || onHide === void 0 ? void 0 : onHide();
+                }
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function() {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [
+        isOpen,
+        onHide
+    ]);
+    var daysInMonth = getDaysInMonth(currentYear, currentMonth);
+    var firstDay = getFirstDayOfMonth(currentYear, currentMonth);
+    var monthName = getMonthName(currentMonth);
+    var previousMonth = function() {
+        if (currentMonth === 0) {
+            setCurrentMonth(11);
+            setCurrentYear(currentYear - 1);
+        } else {
+            setCurrentMonth(currentMonth - 1);
+        }
+    };
+    var nextMonth = function() {
+        if (currentMonth === 11) {
+            setCurrentMonth(0);
+            setCurrentYear(currentYear + 1);
+        } else {
+            setCurrentMonth(currentMonth + 1);
+        }
+    };
+    var selectDate = function(day) {
+        var date = {
+            year: currentYear,
+            month: currentMonth,
+            day: day
+        };
+        if (enableRangeSelection) {
+            if (activeField === "start") {
+                onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
+                    start: date,
+                    end: (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end) || null
+                });
+                setActiveField("end");
+            } else {
+                var start = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start;
+                if (start) {
+                    var startTime = new Date(start.year, start.month, start.day).getTime();
+                    var endTime = new Date(date.year, date.month, date.day).getTime();
+                    if (endTime < startTime) {
+                        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
+                            start: date,
+                            end: start
+                        });
+                    } else {
+                        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
+                            start: start,
+                            end: date
+                        });
+                    }
+                } else {
+                    onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
+                        start: date,
+                        end: null
+                    });
+                    setActiveField("end");
+                }
+            }
+        } else {
+            var dateString = convertToDateString(date);
+            onChange === null || onChange === void 0 ? void 0 : onChange(date, dateString);
+        }
+        if (showTimeSelector) {
+            setShowTimeSelector(false);
+        }
+        if (autoHide && (!enableRangeSelection || enableRangeSelection && activeField === "end" && (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start))) {
+            setIsOpen(false);
+            setShowTimeSelector(false);
+            onHide === null || onHide === void 0 ? void 0 : onHide();
+        }
+    };
+    var selectToday = function() {
+        var todayDate = {
+            year: today.getFullYear(),
+            month: today.getMonth(),
+            day: today.getDate()
+        };
+        setCurrentYear(todayDate.year);
+        setCurrentMonth(todayDate.month);
+        var dateString = convertToDateString(todayDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(todayDate, dateString);
+        if (enableTimeSelection && showTimeSelector) {
+            var now = /* @__PURE__ */ new Date();
+            var currentHour = now.getHours();
+            var currentMinute = now.getMinutes();
+            var hour12;
+            var period;
+            if (currentHour === 0) {
+                hour12 = 12;
+                period = "AM";
+            } else if (currentHour === 12) {
+                hour12 = 12;
+                period = "PM";
+            } else if (currentHour > 12) {
+                hour12 = currentHour - 12;
+                period = "PM";
+            } else {
+                hour12 = currentHour;
+                period = "AM";
+            }
+            setSelectedHour(hour12);
+            setSelectedMinute(currentMinute);
+            setSelectedPeriod(period);
+            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
+                hour: hour12,
+                minute: currentMinute,
+                period: period
+            });
+            if (showTimeZoneSelector) {
+                var localTZ = getLocalTimeZone();
+                setInternalTimeZoneFormat(localTZ);
+                onTimeZoneFormatChange === null || onTimeZoneFormatChange === void 0 ? void 0 : onTimeZoneFormatChange(localTZ);
+            }
+        }
+        if (autoHide) {
+            setIsOpen(false);
+            setShowTimeSelector(false);
+            onHide === null || onHide === void 0 ? void 0 : onHide();
+        }
+    };
+    var clearDate = function() {
+        if (enableRangeSelection) {
+            onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
+                start: null,
+                end: null
+            });
+            setActiveField("start");
+        } else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null, "");
+        }
+        if (enableTimeSelection) {
+            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
+                hour: 12,
+                minute: 0,
+                period: "AM"
+            });
+            setSelectedHour(12);
+            setSelectedMinute(0);
+            setSelectedPeriod("AM");
+        }
+    };
+    var toggleCalendar = function() {
+        if (disabled) return;
+        var newState = !isOpen;
+        setIsOpen(newState);
+        if (newState) {
+            setShowTimeSelector(false);
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        } else {
+            setShowTimeSelector(false);
+            onHide === null || onHide === void 0 ? void 0 : onHide();
+        }
+    };
+    var handleStartFieldClick = function() {
+        if (!isOpen) {
+            setIsOpen(true);
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        }
+        setActiveField("start");
+        setShowTimeSelector(false);
+    };
+    var handleEndFieldClick = function() {
+        if (!isOpen) {
+            setIsOpen(true);
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        }
+        setActiveField("end");
+        setShowTimeSelector(false);
+    };
+    var handleChooseTimeClick = function() {
+        setShowTimeSelector(!showTimeSelector);
+    };
+    var handleChooseDateClick = function() {
+        setShowTimeSelector(false);
+    };
+    var handleTimeFormatToggle = function() {
+        var newFormat = internalTimeFormat === "12h" ? "24h" : "12h";
+        setInternalTimeFormat(newFormat);
+        onTimeFormatChange === null || onTimeFormatChange === void 0 ? void 0 : onTimeFormatChange(newFormat);
+    };
+    var handleTimeConfirm = function() {
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
+            hour: selectedHour,
+            minute: selectedMinute,
+            period: selectedPeriod
+        });
+        setShowTimeSelector(false);
+    };
+    var handleDateConfirm = function() {
+        setIsOpen(false);
+        onHide === null || onHide === void 0 ? void 0 : onHide();
+    };
+    var handleMonthYearClick = function() {
+        if (enableYearDropdown) {
+            setShowYearDropdown(!showYearDropdown);
+        }
+    };
+    var handleYearSelect = function(year) {
+        setCurrentYear(year);
+        setShowYearDropdown(false);
+    };
+    var renderDays = function() {
+        var _loop = function(day) {
+            var date = {
+                year: currentYear,
+                month: currentMonth,
+                day: day
+            };
+            var isSelected = enableRangeSelection ? isSameDate(rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start, date) || isSameDate(rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end, date) : isSameDate(value, date);
+            var isInRange = enableRangeSelection && (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start) && (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end) ? function() {
+                var currentTime = new Date(date.year, date.month, date.day).getTime();
+                var startTime = new Date(rangeValue.start.year, rangeValue.start.month, rangeValue.start.day).getTime();
+                var endTime = new Date(rangeValue.end.year, rangeValue.end.month, rangeValue.end.day).getTime();
+                return currentTime > startTime && currentTime < endTime;
+            }() : false;
+            var isToday = isSameDate({
+                year: today.getFullYear(),
+                month: today.getMonth(),
+                day: today.getDate()
+            }, date);
+            var isBlocked = isBlockedDateHelper(date, blockDateConfig);
+            days.push(/* @__PURE__ */ import_react12.default.createElement("button", {
+                type: "button",
+                key: "current-".concat(day),
+                onClick: function() {
+                    if (!isBlocked) selectDate(day);
+                },
+                disabled: isBlocked,
+                className: cn4("flex items-center justify-center rounded transition-all duration-200", isSelected && "bg-gradient-to-b from-[#1761A3] to-[#4DAF83] text-white shadow-md", !isSelected && isToday && "border-2 border-[#1761A3] text-[#1761A3]", !isSelected && !isToday && !isInRange && "bg-[rgba(0,123,255,0.05)] text-gray-700", isInRange && !isSelected && "bg-[rgba(23,97,163,0.15)] text-gray-700", !isSelected && !isBlocked && "hover:bg-[rgba(23,97,163,0.1)]", isBlocked && "cursor-not-allowed opacity-40 text-gray-400"),
+                style: {
+                    width: "".concat(scaled(32), "px"),
+                    height: "".concat(scaled(30), "px"),
+                    fontSize: "".concat(scaled(14), "px"),
+                    fontWeight: 600
+                }
+            }, day));
+        };
+        var days = [];
+        for(var i = 0; i < firstDay; i++){
+            days.push(/* @__PURE__ */ import_react12.default.createElement("div", {
+                key: "empty-start-".concat(i),
+                className: "flex items-center justify-center",
+                style: {
+                    width: "".concat(scaled(44), "px"),
+                    height: "".concat(scaled(44), "px")
+                }
+            }));
+        }
+        for(var day = 1; day <= daysInMonth; day++)_loop(day);
+        var totalCells = firstDay + daysInMonth;
+        var remainingCells = totalCells % 7 === 0 ? 0 : 7 - totalCells % 7;
+        for(var i1 = 0; i1 < remainingCells; i1++){
+            days.push(/* @__PURE__ */ import_react12.default.createElement("div", {
+                key: "empty-end-".concat(i1),
+                className: "flex items-center justify-center",
+                style: {
+                    width: "".concat(scaled(44), "px"),
+                    height: "".concat(scaled(44), "px")
+                }
+            }));
+        }
+        return days;
+    };
+    var renderTimeSelector = function() {
+        var hours12 = Array.from({
+            length: 12
+        }, function(_, i) {
+            return i + 1;
+        });
+        var hours24 = Array.from({
+            length: 24
+        }, function(_, i) {
+            return i;
+        });
+        var minutes = Array.from({
+            length: 60
+        }, function(_, i) {
+            return i;
+        });
+        return /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex flex-col h-full"
+        }, /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex-1"
+        }, (showTimeFormatToggle || showDateFormatSelector || showTimeZoneSelector) && /* @__PURE__ */ import_react12.default.createElement("div", {
+            style: {
+                marginBottom: "".concat(scaled(12), "px")
+            }
+        }, showTimeFormatToggle && /* @__PURE__ */ import_react12.default.createElement("div", {
+            style: {
+                marginBottom: "".concat(scaled(12), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex flex-col",
+            style: {
+                gap: "".concat(scaled(8), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("span", {
+            className: "text-black font-semibold",
+            style: {
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "Format"), /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex items-center",
+            style: {
+                gap: "".concat(scaled(8), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("span", {
+            className: cn4("transition-colors duration-200 font-semibold", internalTimeFormat === "12h" ? "text-gray-900" : "text-gray-500"),
+            style: {
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "12h"), /* @__PURE__ */ import_react12.default.createElement("button", {
+            type: "button",
+            onClick: handleTimeFormatToggle,
+            className: cn4("relative inline-flex items-center rounded-[8px] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", internalTimeFormat === "24h" ? "bg-[#1761A3]" : "bg-slate-300"),
+            style: {
+                width: "".concat(scaled(38), "px"),
+                height: "".concat(scaled(17), "px")
+            },
+            role: "switch",
+            "aria-checked": internalTimeFormat === "24h"
+        }, /* @__PURE__ */ import_react12.default.createElement("span", {
+            className: "inline-block rounded-full transform bg-white shadow-md transition-transform duration-200",
+            style: {
+                width: "".concat(scaled(13), "px"),
+                height: "".concat(scaled(13), "px"),
+                transform: internalTimeFormat === "24h" ? "translateX(".concat(scaled(23), "px)") : "translateX(".concat(scaled(2), "px)")
+            }
+        })), /* @__PURE__ */ import_react12.default.createElement("span", {
+            className: cn4("transition-colors duration-200 font-semibold", internalTimeFormat === "24h" ? "text-gray-900" : "text-gray-500"),
+            style: {
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "24h")))), (showDateFormatSelector || showTimeZoneSelector) && /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex items-start",
+            style: {
+                gap: "".concat(scaled(15), "px")
+            }
+        }, showDateFormatSelector && /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: cn4("flex flex-col", showTimeZoneSelector ? "flex-1" : "w-full"),
+            style: {
+                gap: "".concat(scaled(8), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("span", {
+            className: "text-black font-semibold",
+            style: {
+                fontSize: "".concat(scaled(12), "px"),
+                paddingLeft: "".concat(scaled(36), "px")
+            }
+        }, "Date Format"), /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: cn4("relative", showTimeZoneSelector ? "" : "w-full"),
+            style: {
+                height: "".concat(scaled(40), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("select", {
+            value: internalDateFormat,
+            onChange: function(e) {
+                setInternalDateFormat(e.target.value);
+                onDateFormatChange === null || onDateFormatChange === void 0 ? void 0 : onDateFormatChange(e.target.value);
+            },
+            className: cn4("block h-full border border-[rgba(23,97,163,0.4)] bg-[#F0F8FF] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none", showTimeZoneSelector ? "w-full" : "w-full", "hover:bg-gradient-to-r hover:from-[rgba(23,97,163,0.4)] hover:to-[rgba(77,175,131,0.4)]"),
+            style: {
+                fontSize: "".concat(scaled(12), "px"),
+                paddingLeft: "".concat(scaled(36), "px"),
+                paddingRight: "".concat(scaled(32), "px")
+            }
+        }, DATE_FORMAT_OPTIONS.map(function(format) {
+            return /* @__PURE__ */ import_react12.default.createElement("option", {
+                key: format,
+                value: format
+            }, format);
+        })), /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronDown, {
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
+            style: {
+                right: "".concat(scaled(8), "px"),
+                fontSize: "".concat(scaled(18), "px")
+            }
+        }))), showTimeZoneSelector && /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: cn4("flex flex-col", showDateFormatSelector ? "flex-1" : "w-full"),
+            style: {
+                gap: "".concat(scaled(8), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("span", {
+            className: "text-black font-semibold text-right",
+            style: {
+                fontSize: "".concat(scaled(12), "px"),
+                paddingRight: "".concat(scaled(36), "px")
+            }
+        }, "Time Format"), /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: cn4("relative", showDateFormatSelector ? "" : "w-full"),
+            style: {
+                height: "".concat(scaled(40), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("select", {
+            value: internalTimeZoneFormat,
+            onChange: function(e) {
+                setInternalTimeZoneFormat(e.target.value);
+                onTimeZoneFormatChange === null || onTimeZoneFormatChange === void 0 ? void 0 : onTimeZoneFormatChange(e.target.value);
+            },
+            className: cn4("block h-full border border-[rgba(23,97,163,0.4)] bg-[#F0F8FF] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none", showDateFormatSelector ? "w-full" : "w-full", "hover:bg-gradient-to-r hover:from-[rgba(23,97,163,0.4)] hover:to-[rgba(77,175,131,0.4)]"),
+            style: {
+                fontSize: "".concat(scaled(12), "px"),
+                paddingRight: "".concat(scaled(36), "px"),
+                paddingLeft: "".concat(scaled(32), "px")
+            }
+        }, TIME_ZONE_OPTIONS.map(function(zone) {
+            return /* @__PURE__ */ import_react12.default.createElement("option", {
+                key: zone,
+                value: zone
+            }, zone);
+        })), /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronDown, {
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
+            style: {
+                right: "".concat(scaled(8), "px"),
+                fontSize: "".concat(scaled(18), "px")
+            }
+        }))))), /* @__PURE__ */ import_react12.default.createElement("div", {
+            style: {
+                marginTop: "".concat(scaled(16), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("label", {
+            className: "block text-gray-700 font-semibold",
+            style: {
+                marginBottom: "".concat(scaled(12), "px"),
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "Time Select"), /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex",
+            style: {
+                gap: "".concat(scaled(12), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex-1"
+        }, /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "relative",
+            style: {
+                width: "".concat(scaled(106), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("select", {
+            value: internalTimeFormat === "24h" ? selectedPeriod === "PM" && selectedHour !== 12 ? selectedHour + 12 : selectedPeriod === "AM" && selectedHour === 12 ? 0 : selectedHour : selectedHour,
+            onChange: function(e) {
+                var value2 = Number(e.target.value);
+                if (internalTimeFormat === "24h") {
+                    if (value2 === 0) {
+                        setSelectedHour(12);
+                        setSelectedPeriod("AM");
+                    } else if (value2 === 12) {
+                        setSelectedHour(12);
+                        setSelectedPeriod("PM");
+                    } else if (value2 > 12) {
+                        setSelectedHour(value2 - 12);
+                        setSelectedPeriod("PM");
+                    } else {
+                        setSelectedHour(value2);
+                        setSelectedPeriod("AM");
+                    }
+                } else {
+                    setSelectedHour(value2);
+                }
+            },
+            className: "block w-full bg-white border border-[rgba(77,175,131,0.25)] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none",
+            style: {
+                height: "".concat(scaled(40), "px"),
+                fontSize: "".concat(scaled(12), "px"),
+                paddingLeft: "".concat(scaled(16), "px"),
+                paddingRight: "".concat(scaled(32), "px")
+            }
+        }, (internalTimeFormat === "24h" ? hours24 : hours12).map(function(hour) {
+            return /* @__PURE__ */ import_react12.default.createElement("option", {
+                key: hour,
+                value: hour
+            }, String(hour).padStart(2, "0"));
+        })), /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronDown, {
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
+            style: {
+                right: "".concat(scaled(8), "px"),
+                fontSize: "".concat(scaled(18), "px")
+            }
+        }))), /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex-1"
+        }, /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "relative",
+            style: {
+                width: "".concat(scaled(106), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("select", {
+            value: selectedMinute,
+            onChange: function(e) {
+                return setSelectedMinute(Number(e.target.value));
+            },
+            className: "block w-full bg-white border border-[rgba(77,175,131,0.25)] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none",
+            style: {
+                height: "".concat(scaled(40), "px"),
+                fontSize: "".concat(scaled(12), "px"),
+                paddingLeft: "".concat(scaled(16), "px"),
+                paddingRight: "".concat(scaled(32), "px")
+            }
+        }, minutes.map(function(minute) {
+            return /* @__PURE__ */ import_react12.default.createElement("option", {
+                key: minute,
+                value: minute
+            }, String(minute).padStart(2, "0"));
+        })), /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronDown, {
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
+            style: {
+                right: "".concat(scaled(8), "px"),
+                fontSize: "".concat(scaled(18), "px")
+            }
+        }))), internalTimeFormat === "12h" && /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex-1"
+        }, /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "relative",
+            style: {
+                width: "".concat(scaled(106), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("select", {
+            value: selectedPeriod,
+            onChange: function(e) {
+                return setSelectedPeriod(e.target.value);
+            },
+            className: "block w-full bg-white border border-[rgba(77,175,131,0.25)] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none",
+            style: {
+                height: "".concat(scaled(40), "px"),
+                fontSize: "".concat(scaled(12), "px"),
+                paddingLeft: "".concat(scaled(16), "px"),
+                paddingRight: "".concat(scaled(32), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("option", {
+            value: "AM"
+        }, "AM"), /* @__PURE__ */ import_react12.default.createElement("option", {
+            value: "PM"
+        }, "PM")), /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronDown, {
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
+            style: {
+                right: "".concat(scaled(8), "px"),
+                fontSize: "".concat(scaled(18), "px")
+            }
+        }))))), /* @__PURE__ */ import_react12.default.createElement("div", {
+            style: {
+                marginTop: "".concat(scaled(12), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement("label", {
+            className: "block text-gray-700 font-semibold",
+            style: {
+                marginBottom: "".concat(scaled(8), "px"),
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "Preview"), /* @__PURE__ */ import_react12.default.createElement("p", {
+            className: "text-left text-[#1761A3] font-semibold",
+            style: {
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, formatDateWithFormat(value !== null && value !== void 0 ? value : null, internalDateFormat), " ", formatTime({
+            hour: selectedHour,
+            minute: selectedMinute,
+            period: selectedPeriod
+        }, internalTimeFormat), internalTimeZoneFormat !== "none" ? " ".concat(internalTimeZoneFormat) : ""))), /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "mt-auto border-t border-gray-200",
+            style: {
+                paddingTop: "".concat(scaled(15), "px")
+            }
+        }, (showTodayButton || showClearButton) && /* @__PURE__ */ import_react12.default.createElement("div", {
+            className: "flex",
+            style: {
+                gap: "".concat(scaled(12), "px"),
+                marginBottom: "".concat(scaled(15), "px")
+            }
+        }, showTodayButton && /* @__PURE__ */ import_react12.default.createElement("button", {
+            type: "button",
+            onClick: selectToday,
+            className: cn4("flex items-center justify-center rounded-[6px] text-[#1761A3] font-semibold bg-[rgba(23,97,163,0.15)] transition-all duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83] hover:text-white", showClearButton ? "flex-1" : "w-full"),
+            style: {
+                height: "".concat(scaled(38), "px"),
+                fontSize: "".concat(scaled(12), "px"),
+                gap: "".concat(scaled(8), "px")
+            }
+        }, /* @__PURE__ */ import_react12.default.createElement(import_hi.HiOutlineClock, {
+            style: {
+                width: "".concat(scaled(14), "px"),
+                height: "".concat(scaled(14), "px")
+            }
+        }), "Current Time"), showClearButton && /* @__PURE__ */ import_react12.default.createElement("button", {
+            type: "button",
+            onClick: clearDate,
+            className: cn4("flex items-center justify-center rounded-[6px] text-[#EF4444] font-semibold bg-[rgba(239,68,68,0.15)] transition-all duration-200 hover:opacity-80", showTodayButton ? "flex-1" : "w-full"),
+            style: {
+                height: "".concat(scaled(38), "px"),
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "Clear")), /* @__PURE__ */ import_react12.default.createElement("button", {
+            type: "button",
+            onClick: handleTimeConfirm,
+            className: "w-full rounded-[6px] bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white font-semibold transition-all duration-200 hover:opacity-90",
+            style: {
+                height: "".concat(scaled(38), "px"),
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, "Confirm Time")));
+    };
+    var defaultIcon = /* @__PURE__ */ import_react12.default.createElement(import_hi2.HiCalendarDays, {
+        style: {
+            width: "".concat(scaled(14), "px"),
+            height: "".concat(scaled(14), "px")
+        },
+        className: "text-gray-700"
+    });
+    var _obj;
+    var calendarContent = /* @__PURE__ */ import_react12.default.createElement("div", {
+        ref: calendarRef,
+        className: cn4("absolute left-0 z-50 border border-[#1761A3] bg-white shadow-xl transition-all duration-300 bg-gradient-to-b from-[rgba(23,97,163,0.08)] to-[rgba(77,175,131,0.08)]", positionAbove ? "bottom-full" : "top-full"),
+        style: (_obj = {}, _define_property(_obj, positionAbove ? "marginBottom" : "marginTop", "".concat(scaled(8), "px")), _define_property(_obj, "width", "".concat(scaled(406), "px")), _define_property(_obj, "height", "".concat(scaled(526), "px")), _define_property(_obj, "borderRadius", "".concat(scaled(22), "px")), _define_property(_obj, "maxWidth", "95vw"), _obj)
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "h-full flex flex-col",
+        style: {
+            padding: "".concat(scaled(24), "px"),
+            paddingBottom: "".concat(scaled(22), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "text-left font-bold text-gray-900",
+        style: {
+            marginBottom: "".concat(scaled(20), "px"),
+            fontSize: "".concat(scaled(20), "px")
+        }
+    }, enableRangeSelection ? "Select Date Range" : "Select Date & Time"), enableRangeSelection ? /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex",
+        style: {
+            marginBottom: "".concat(scaled(24), "px"),
+            gap: "".concat(scaled(12), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: handleStartFieldClick,
+        className: cn4("flex flex-1 items-center rounded-[6px] bg-white border-2 border-gray-200 shadow-sm transition-all duration-200", activeField === "start" && "ring-2 ring-blue-500"),
+        style: {
+            width: "".concat(scaled(160), "px"),
+            height: "".concat(scaled(40), "px"),
+            gap: "".concat(scaled(12), "px"),
+            padding: "0 ".concat(scaled(16), "px")
+        }
+    }, defaultIcon, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex flex-col items-start"
+    }, /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "font-medium text-gray-500",
+        style: {
+            fontSize: "".concat(scaled(12), "px")
+        }
+    }, "From Date"), /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "font-semibold text-gray-900",
+        style: {
+            fontSize: "".concat(scaled(14), "px")
+        }
+    }, (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start) ? formatDate(rangeValue.start) : "Select date"))), /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: handleEndFieldClick,
+        className: cn4("flex flex-1 items-center rounded-[6px] bg-white border-2 border-gray-200 shadow-sm transition-all duration-200", activeField === "end" && "ring-2 ring-blue-500"),
+        style: {
+            width: "".concat(scaled(160), "px"),
+            height: "".concat(scaled(40), "px"),
+            gap: "".concat(scaled(12), "px"),
+            padding: "0 ".concat(scaled(16), "px")
+        }
+    }, defaultIcon, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex flex-col items-start"
+    }, /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "font-medium text-gray-500",
+        style: {
+            fontSize: "".concat(scaled(12), "px")
+        }
+    }, "To Date"), /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "font-semibold text-gray-900",
+        style: {
+            fontSize: "".concat(scaled(14), "px")
+        }
+    }, (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end) ? formatDate(rangeValue.end) : "Select date")))) : /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex",
+        style: {
+            marginBottom: "".concat(scaled(24), "px"),
+            gap: "".concat(scaled(12), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: handleChooseDateClick,
+        className: cn4("flex items-center rounded-[6px] shadow-sm transition-all duration-200", enableTimeSelection ? "" : "w-full", !showTimeSelector && enableTimeSelection ? "bg-gradient-to-b from-[#1761A3] to-[#4DAF83] text-white border-2 border-transparent" : "bg-white border-2 border-gray-200 text-gray-900"),
+        style: {
+            width: enableTimeSelection ? "".concat(scaled(160), "px") : void 0,
+            height: "".concat(scaled(40), "px"),
+            gap: "".concat(scaled(12), "px"),
+            padding: "0 ".concat(scaled(16), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement("span", {
+        style: {
+            color: !showTimeSelector && enableTimeSelection ? "white" : void 0,
+            width: "".concat(scaled(14), "px"),
+            height: "".concat(scaled(14), "px"),
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        }
+    }, import_react12.default.cloneElement(defaultIcon, {
+        style: {
+            width: "".concat(scaled(14), "px"),
+            height: "".concat(scaled(14), "px"),
+            color: !showTimeSelector && enableTimeSelection ? "white" : void 0
+        },
+        className: !showTimeSelector && enableTimeSelection ? "text-white" : "text-gray-700"
+    })), /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "font-semibold",
+        style: {
+            fontSize: "".concat(scaled(14), "px"),
+            color: !showTimeSelector && enableTimeSelection ? "white" : "#111827"
+        }
+    }, formatDate(value !== null && value !== void 0 ? value : null) || "Choose Date")), enableTimeSelection && /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: handleChooseTimeClick,
+        className: cn4("flex items-center rounded-[6px] shadow-sm transition-all duration-200", showTimeSelector ? "bg-gradient-to-b from-[#1761A3] to-[#4DAF83] text-white border-2 border-transparent" : "bg-white border-2 border-gray-200"),
+        style: {
+            width: "".concat(scaled(160), "px"),
+            height: "".concat(scaled(40), "px"),
+            gap: "".concat(scaled(8), "px"),
+            padding: "0 ".concat(scaled(16), "px"),
+            fontSize: "".concat(scaled(14), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement(import_hi.HiOutlineClock, {
+        style: {
+            width: "".concat(scaled(14), "px"),
+            height: "".concat(scaled(14), "px"),
+            color: showTimeSelector ? "white" : void 0
+        },
+        className: showTimeSelector ? "text-white" : "text-gray-700"
+    }), /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "font-semibold",
+        style: {
+            color: showTimeSelector ? "white" : "#374151"
+        }
+    }, timeValue ? formatTime(timeValue, internalTimeFormat) : "Choose Time"))), showTimeSelector ? renderTimeSelector() : /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex flex-col h-full"
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex-1"
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex items-center justify-between",
+        style: {
+            marginBottom: "".concat(scaled(8), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: previousMonth,
+        className: "flex items-center justify-center rounded-[6px] bg-[#1761A3] text-white transition-colors duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83]",
+        style: {
+            width: "".concat(scaled(32), "px"),
+            height: "".concat(scaled(30), "px")
+        },
+        "aria-label": "Previous month"
+    }, /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "inline-flex items-center justify-center"
+    }, /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronLeft, {
+        style: {
+            width: "".concat(scaled(10), "px"),
+            height: "".concat(scaled(10), "px")
+        }
+    }))), /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "relative"
+    }, enableYearDropdown ? /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: handleMonthYearClick,
+        className: "font-bold text-[#1761A3] transition-colors duration-200 hover:opacity-80",
+        style: {
+            fontSize: "".concat(scaled(18), "px")
+        }
+    }, monthName, " ", currentYear) : /* @__PURE__ */ import_react12.default.createElement("h2", {
+        className: "font-bold text-[#1761A3]",
+        style: {
+            fontSize: "".concat(scaled(18), "px")
+        }
+    }, monthName, " ", currentYear), enableYearDropdown && showYearDropdown && /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "absolute left-1/2 top-full z-50 overflow-y-auto bg-white shadow-xl border border-[rgba(77,175,131,0.25)] rounded-[6px] -translate-x-1/2",
+        style: {
+            marginTop: "".concat(scaled(8), "px"),
+            width: "".concat(scaled(120), "px"),
+            maxHeight: "".concat(scaled(240), "px")
+        }
+    }, Array.from({
+        length: 201
+    }, function(_, i) {
+        var year = today.getFullYear() - 100 + i;
+        return /* @__PURE__ */ import_react12.default.createElement("button", {
+            key: year,
+            type: "button",
+            onClick: function() {
+                return handleYearSelect(year);
+            },
+            className: cn4("block w-full text-left font-semibold transition-colors duration-150", year === currentYear ? "bg-[#1761A3] text-white" : "text-gray-900 hover:bg-blue-50"),
+            style: {
+                fontSize: "".concat(scaled(14), "px"),
+                padding: "".concat(scaled(8), "px ").concat(scaled(12), "px")
+            }
+        }, year);
+    }))), /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: nextMonth,
+        className: "flex items-center justify-center rounded-[6px] bg-[#1761A3] text-white transition-colors duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83]",
+        style: {
+            width: "".concat(scaled(32), "px"),
+            height: "".concat(scaled(30), "px")
+        },
+        "aria-label": "Next month"
+    }, /* @__PURE__ */ import_react12.default.createElement("span", {
+        className: "inline-flex items-center justify-center"
+    }, /* @__PURE__ */ import_react12.default.createElement(import_hi.HiChevronRight, {
+        style: {
+            width: "".concat(scaled(10), "px"),
+            height: "".concat(scaled(10), "px")
+        }
+    })))), /* @__PURE__ */ import_react12.default.createElement("div", {
+        style: {
+            marginBottom: "".concat(scaled(6), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "grid grid-cols-7",
+        style: {
+            gap: "".concat(scaled(8), "px ").concat(scaled(8), "px")
+        }
+    }, DAY_NAMES.map(function(day) {
+        return /* @__PURE__ */ import_react12.default.createElement("div", {
+            key: day,
+            className: "flex items-center justify-center font-bold text-gray-600",
+            style: {
+                width: "".concat(scaled(44), "px"),
+                height: "".concat(scaled(28), "px"),
+                fontSize: "".concat(scaled(12), "px")
+            }
+        }, day);
+    }), renderDays()))), /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "mt-auto border-t border-gray-200",
+        style: {
+            paddingTop: "".concat(scaled(2), "px")
+        }
+    }, (showTodayButton || showClearButton) && /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "flex",
+        style: {
+            gap: "".concat(scaled(12), "px"),
+            marginBottom: "".concat(scaled(3), "px")
+        }
+    }, showTodayButton && /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: selectToday,
+        className: cn4("flex items-center justify-center rounded-[6px] text-[#1761A3] font-semibold bg-[rgba(23,97,163,0.15)] transition-all duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83] hover:text-white", showClearButton ? "flex-1" : "w-full"),
+        style: {
+            height: "".concat(scaled(38), "px"),
+            fontSize: "".concat(scaled(12), "px"),
+            gap: "".concat(scaled(8), "px")
+        }
+    }, /* @__PURE__ */ import_react12.default.createElement(import_hi2.HiCalendarDays, {
+        style: {
+            width: "".concat(scaled(14), "px"),
+            height: "".concat(scaled(14), "px")
+        }
+    }), "Today"), showClearButton && /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: clearDate,
+        className: cn4("flex items-center justify-center rounded-[6px] text-[#EF4444] font-semibold bg-[rgba(239,68,68,0.15)] transition-all duration-200 hover:opacity-80", showTodayButton ? "flex-1" : "w-full"),
+        style: {
+            height: "".concat(scaled(38), "px"),
+            fontSize: "".concat(scaled(12), "px")
+        }
+    }, "Clear")), /* @__PURE__ */ import_react12.default.createElement("button", {
+        type: "button",
+        onClick: handleDateConfirm,
+        className: "w-full rounded-[6px] bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white font-semibold transition-all duration-200 hover:opacity-90",
+        style: {
+            height: "".concat(scaled(38), "px"),
+            fontSize: "".concat(scaled(12), "px")
+        }
+    }, "Confirm Date")))));
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+        ref: containerRef,
+        className: cn4("relative", className)
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "relative"
+    }, showIcon && /* @__PURE__ */ import_react12.default.createElement("div", {
+        className: "pointer-events-none absolute inset-y-0 left-0 flex items-center",
+        style: {
+            paddingLeft: "".concat(scaled(12), "px")
+        }
+    }, icon || defaultIcon), /* @__PURE__ */ import_react12.default.createElement("input", {
+        type: "text",
+        value: enableRangeSelection && rangeValue ? rangeValue.start && rangeValue.end ? "".concat(formatDate(rangeValue.start), " - ").concat(formatDate(rangeValue.end)) : rangeValue.start ? "".concat(formatDate(rangeValue.start), " - ...") : "" : enableTimeSelection && value && timeValue ? "".concat(formatDate(value), " ").concat(formatTime(timeValue, internalTimeFormat)) : formatDate(value !== null && value !== void 0 ? value : null),
+        onClick: toggleCalendar,
+        readOnly: true,
+        disabled: disabled,
+        placeholder: placeholder,
+        className: cn4("block w-full rounded-full border border-gray-300 bg-gray-50 font-semibold shadow-sm text-gray-900 placeholder-gray-500 transition-colors duration-200 focus:border-blue-500 focus:ring-blue-500", disabled && "cursor-not-allowed opacity-50"),
+        style: {
+            paddingTop: "".concat(scaled(10), "px"),
+            paddingBottom: "".concat(scaled(10), "px"),
+            paddingLeft: showIcon ? "".concat(scaled(40), "px") : "".concat(scaled(12), "px"),
+            paddingRight: "".concat(scaled(12), "px"),
+            fontSize: "".concat(scaled(12), "px")
+        }
+    })), isOpen && calendarContent);
+};
+Calendar.displayName = "Calendar";
 // src/components/Dropdown.tsx
-var import_react9 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var variantStyles = {
     basic: "bg-blue-600 text-white hover:bg-blue-700",
     outline: "border border-blue-600 text-blue-600 hover:bg-blue-50",
@@ -1155,25 +2938,25 @@ var variantStyles = {
     gradient: "bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:opacity-90"
 };
 var Dropdown = function(param) {
-    var options = param.options, onSelect = param.onSelect, _param_variant = param.variant, variant = _param_variant === void 0 ? "basic" : _param_variant;
-    var _ref = _sliced_to_array((0, import_react9.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react9.useState)(null), 2), selected = _ref1[0], setSelected = _ref1[1];
+    var options = param.options, onSelect = param.onSelect, _param_variant = param.variant, variant = _param_variant === void 0 ? "basic" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
+    var _ref = _sliced_to_array((0, import_react13.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react13.useState)(null), 2), selected = _ref1[0], setSelected = _ref1[1];
     var handleSelect = function(option) {
         setSelected(option);
         onSelect(option);
         setOpen(false);
     };
-    return /* @__PURE__ */ import_react9.default.createElement("div", {
-        className: "relative w-56"
-    }, /* @__PURE__ */ import_react9.default.createElement("button", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
+        className: "relative w-56 ".concat(className)
+    }, /* @__PURE__ */ import_react13.default.createElement("button", {
         onClick: function() {
             return setOpen(!open);
         },
-        className: "w-full text-left px-4 py-2 rounded-md transition-all duration-200 ".concat(variantStyles[variant])
-    }, selected || "Select an option"), open && /* @__PURE__ */ import_react9.default.createElement("div", {
+        className: "w-full text-left px-4 py-2 rounded-md transition-all duration-200 ".concat(variantStyles[variant], " ")
+    }, selected || "Select an option"), open && /* @__PURE__ */ import_react13.default.createElement("div", {
         className: "absolute mt-2 w-full bg-white border border-gray-200 rounded-md shadow-lg z-20"
     }, options.map(function(opt, idx) {
-        return /* @__PURE__ */ import_react9.default.createElement("div", {
+        return /* @__PURE__ */ import_react13.default.createElement("div", {
             key: idx,
             onClick: function() {
                 return handleSelect(opt);
@@ -1186,12 +2969,15 @@ Dropdown.displayName = "Dropdown";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     MahatiButton: MahatiButton,
+    MahatiCalendar: MahatiCalendar,
     MahatiCard: MahatiCard,
+    MahatiChart: MahatiChart,
     MahatiDropdown: MahatiDropdown,
     MahatiFormContainer: MahatiFormContainer,
     MahatiInput: MahatiInput,
     MahatiModal: MahatiModal,
     MahatiTabbedInterface: MahatiTabbedInterface,
+    MahatiTabbedInterfaceTailwind: MahatiTabbedInterfaceTailwind,
     MahatiTable: MahatiTable,
     MahatiTableTailwind: MahatiTableTailwind,
     MahatiTooltip: MahatiTooltip