@sikka/hawa 0.39.0-next → 0.40.0-next

package/dist/elements/index.js

@@ -1016,14 +1016,37 @@ var DropdownMenu = ({
   );
 };
 var DropdownMenuRadio = (props) => {
-  return /* @__PURE__ */ React5.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React5.createElement(DropdownMenuTrigger, { asChild: true }, props.trigger), /* @__PURE__ */ React5.createElement(DropdownMenuContent, { align: props.align, side: props.side }, props.label && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenuLabel, null, props.label), /* @__PURE__ */ React5.createElement(DropdownMenuSeparator, null)), /* @__PURE__ */ React5.createElement(
-    DropdownMenuRadioGroup,
+  const ariaLabel = props.label ? `${props.label} radio group` : void 0;
+  const ariaLabelledby = props.label ? `${props.label}-label` : void 0;
+  return /* @__PURE__ */ React5.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React5.createElement(DropdownMenuTrigger, { asChild: true }, props.trigger), /* @__PURE__ */ React5.createElement(
+    DropdownMenuContent,
     {
-      value: props.value,
-      onValueChange: props.onValueChange
+      align: props.align,
+      side: props.side,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      ...props.contentProps
     },
-    props.options.map((opt, i) => /* @__PURE__ */ React5.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
-  )));
+    props.label && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(DropdownMenuLabel, { id: `${props.label}-label` }, props.label), /* @__PURE__ */ React5.createElement(DropdownMenuSeparator, null)),
+    /* @__PURE__ */ React5.createElement(
+      DropdownMenuRadioGroup,
+      {
+        value: props.value,
+        onValueChange: props.onValueChange,
+        ...props.radioGroupProps
+      },
+      props.options.map((opt, i) => /* @__PURE__ */ React5.createElement(
+        DropdownMenuRadioItem,
+        {
+          key: i,
+          ...opt.props,
+          value: opt.value,
+          "aria-checked": props.value === opt.value
+        },
+        opt.label
+      ))
+    )
+  ));
 };
 
 // elements/accordion/Accordion.tsx
@@ -2176,7 +2199,7 @@ var DialogFooter = ({
   "div",
   {
     className: cn(
-      "hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end sm:hawa-gap-2",
+      "hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end hawa-gap-2",
       className
     ),
     ...props
@@ -2384,12 +2407,12 @@ var Button = React17.forwardRef(
     children,
     labelProps,
     showHelperText = false,
-    inForm = false,
+    asInput = false,
     ...props
   }, ref) => {
     const Comp = "button";
     const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
-    if (inForm) {
+    if (asInput) {
       return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React17.createElement(Label2, { ...labelProps }, label), /* @__PURE__ */ React17.createElement(
         Comp,
         {
@@ -3529,6 +3552,7 @@ var Radio = (0, import_react13.forwardRef)(
     tabsContainerClassName,
     forceHideHelperText = false,
     onChange,
+    containerClassNames,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -3584,161 +3608,203 @@ var Radio = (0, import_react13.forwardRef)(
     ];
     switch (design) {
       case "tabs":
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react13.default.createElement(
-          "ul",
+        return /* @__PURE__ */ import_react13.default.createElement(
+          "div",
           {
-            ref: parentRef,
             className: cn(
-              props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-              "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
-              orientationStyle[orientation],
-              widthStyle[width],
-              tabsContainerClassName
+              "hawa-gap-2 hawa-flex hawa-flex-col",
+              containerClassNames == null ? void 0 : containerClassNames.tabs
             )
           },
-          (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
-            return opt.tooltip ? /* @__PURE__ */ import_react13.default.createElement(
-              PopoverRoot,
-              {
-                key: o,
-                open: o === openTooltip,
-                onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
-              },
-              /* @__PURE__ */ import_react13.default.createElement(
-                PopoverTrigger,
+          props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label),
+          /* @__PURE__ */ import_react13.default.createElement(
+            "ul",
+            {
+              ref: parentRef,
+              className: cn(
+                props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
+                "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
+                orientationStyle[orientation],
+                widthStyle[width],
+                tabsContainerClassName
+              )
+            },
+            (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
+              return opt.tooltip ? /* @__PURE__ */ import_react13.default.createElement(
+                PopoverRoot,
                 {
-                  onMouseEnter: () => setOpenTooltip(o),
-                  onMouseLeave: () => setOpenTooltip(null),
-                  asChild: true
+                  key: o,
+                  open: o === openTooltip,
+                  onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
                 },
                 /* @__PURE__ */ import_react13.default.createElement(
-                  "li",
+                  PopoverTrigger,
                   {
-                    "aria-current": "page",
-                    onClick: () => {
-                      if (props.disabled || opt.disabled)
-                        return;
-                      handleChange(opt);
+                    onMouseEnter: () => setOpenTooltip(o),
+                    onMouseLeave: () => setOpenTooltip(null),
+                    asChild: true
+                  },
+                  /* @__PURE__ */ import_react13.default.createElement(
+                    "li",
+                    {
+                      "aria-current": "page",
+                      onClick: () => {
+                        if (props.disabled || opt.disabled)
+                          return;
+                        handleChange(opt);
+                      },
+                      className: cn(
+                        ...radio_option_tabs_styling,
+                        selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                      )
                     },
-                    className: cn(
-                      ...radio_option_tabs_styling,
-                      selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                    )
+                    opt.icon && opt.icon,
+                    opt.label
+                  )
+                ),
+                /* @__PURE__ */ import_react13.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
+              ) : /* @__PURE__ */ import_react13.default.createElement(
+                "li",
+                {
+                  key: o,
+                  "aria-current": "page",
+                  onClick: () => {
+                    if (props.disabled || opt.disabled)
+                      return;
+                    handleChange(opt);
                   },
-                  opt.icon && opt.icon,
-                  opt.label
-                )
+                  className: cn(
+                    ...radio_option_tabs_styling,
+                    selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                  )
+                },
+                opt.icon && opt.icon,
+                opt.label
+              );
+            })
+          ),
+          !forceHideHelperText && /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText })
+        );
+      case "bordered":
+        return /* @__PURE__ */ import_react13.default.createElement(
+          "div",
+          {
+            className: cn(
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.bordered
+            )
+          },
+          props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react13.default.createElement(
+            "div",
+            {
+              className: cn(
+                "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
+                props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
               ),
-              /* @__PURE__ */ import_react13.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
-            ) : /* @__PURE__ */ import_react13.default.createElement(
-              "li",
+              key: i + 1
+            },
+            /* @__PURE__ */ import_react13.default.createElement(
+              "input",
               {
-                key: o,
-                "aria-current": "page",
-                onClick: () => {
-                  if (props.disabled || opt.disabled)
-                    return;
-                  handleChange(opt);
-                },
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ import_react13.default.createElement(
+              "label",
+              {
+                htmlFor: opt.value.toString(),
                 className: cn(
-                  ...radio_option_tabs_styling,
-                  selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                  "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
+                  opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
                 )
               },
-              opt.icon && opt.icon,
               opt.label
-            );
-          })
-        ), !forceHideHelperText && /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText }));
-      case "bordered":
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react13.default.createElement(
-          "div",
+            )
+          )))
+        );
+      case "cards":
+        return /* @__PURE__ */ import_react13.default.createElement(
+          "ul",
           {
             className: cn(
-              "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
-              props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
-            ),
-            key: i + 1
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.cards
+            )
           },
-          /* @__PURE__ */ import_react13.default.createElement(
+          (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react13.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react13.default.createElement(
             "input",
             {
-              disabled: opt.disabled,
-              id: opt.value.toString(),
               type: "radio",
-              value: opt.value,
+              id: opt.value.toString(),
               name,
-              onChange: () => handleChange(opt)
+              value: opt.value.toString(),
+              className: "hawa-peer hawa-hidden",
+              required: true,
+              disabled: opt.disabled
             }
-          ),
-          /* @__PURE__ */ import_react13.default.createElement(
+          ), /* @__PURE__ */ import_react13.default.createElement(
             "label",
             {
               htmlFor: opt.value.toString(),
               className: cn(
-                "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
-                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
+                "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
               )
             },
-            opt.label
-          )
-        ))));
-      case "cards":
-        return /* @__PURE__ */ import_react13.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react13.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react13.default.createElement(
-          "input",
-          {
-            type: "radio",
-            id: opt.value.toString(),
-            name,
-            value: opt.value.toString(),
-            className: "hawa-peer hawa-hidden",
-            required: true,
-            disabled: opt.disabled
-          }
-        ), /* @__PURE__ */ import_react13.default.createElement(
-          "label",
-          {
-            htmlFor: opt.value.toString(),
-            className: cn(
-              "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
-              opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
-            )
-          },
-          /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
-        ))));
+            /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+          )))
+        );
       default:
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
+        return /* @__PURE__ */ import_react13.default.createElement(
           "div",
           {
             className: cn(
-              "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
-              props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
-            ),
-            key: i + 1
+              "hawa-flex hawa-flex-col hawa-gap-2",
+              containerClassNames == null ? void 0 : containerClassNames.default
+            )
           },
-          /* @__PURE__ */ import_react13.default.createElement(
-            "input",
+          props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label),
+          /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
+            "div",
             {
-              disabled: opt.disabled,
-              id: opt.value.toString(),
-              type: "radio",
-              value: opt.value,
-              name,
-              onChange: () => handleChange(opt)
-            }
-          ),
-          /* @__PURE__ */ import_react13.default.createElement(
-            "label",
-            {
-              htmlFor: opt.value.toString(),
               className: cn(
-                "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
-                opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
-              )
+                "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
+                props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
+              ),
+              key: i + 1
             },
-            opt.label
-          )
-        ))), /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText }));
+            /* @__PURE__ */ import_react13.default.createElement(
+              "input",
+              {
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ import_react13.default.createElement(
+              "label",
+              {
+                htmlFor: opt.value.toString(),
+                className: cn(
+                  "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
+                  opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
+                )
+              },
+              opt.label
+            )
+          ))),
+          /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText })
+        );
     }
   }
 );
@@ -4395,7 +4461,7 @@ var SortButton = (props) => {
 };
 
 // elements/tabs/Tabs.tsx
-var React42 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react16 = require("react");
@@ -4469,37 +4535,6 @@ var import_react29 = require("react");
 
 // hooks/useMeasureDirty.ts
 var import_react30 = require("react");
-var useMeasureDirty = (ref) => {
-  const frame = (0, import_react30.useRef)(0);
-  const [rect, set] = (0, import_react30.useState)({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0
-  });
-  const [observer] = (0, import_react30.useState)(
-    () => new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        cancelAnimationFrame(frame.current);
-        frame.current = requestAnimationFrame(() => {
-          if (ref.current) {
-            set(entry.contentRect);
-          }
-        });
-      }
-    })
-  );
-  (0, import_react30.useEffect)(() => {
-    observer.disconnect();
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-  }, [ref]);
-  return rect;
-};
 
 // hooks/useClickOutside.ts
 var import_react31 = require("react");
@@ -4507,75 +4542,52 @@ var import_react31 = require("react");
 // hooks/useShortcuts.ts
 var import_react32 = require("react");
 
+// hooks/useWindowEvent.ts
+var import_react33 = require("react");
+function useWindowEvent(type, listener, options) {
+  (0, import_react33.useEffect)(() => {
+    window.addEventListener(type, listener, options);
+    return () => window.removeEventListener(type, listener, options);
+  }, [type, listener]);
+}
+
+// hooks/useViewportSize.ts
+var import_react34 = require("react");
+var eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  const [windowSize, setWindowSize] = (0, import_react34.useState)({
+    width: 0,
+    height: 0
+  });
+  const setSize = (0, import_react34.useCallback)(() => {
+    setWindowSize({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  (0, import_react34.useEffect)(setSize, []);
+  return windowSize;
+}
+
 // elements/tabs/Tabs.tsx
+var Popover2 = __toESM(require("@radix-ui/react-popover"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_tailwind_variants = require("tailwind-variants");
 
-// elements/floatBox/FloatBox.tsx
-var React40 = __toESM(require("react"));
-var FloatBox = ({
-  className,
-  open,
-  side = "bottom",
-  sideOffset = 40,
-  align = "center",
-  withArrow = false,
-  ...props
-}) => {
-  let stylesMap = {
-    bottom: {
-      start: { top: sideOffset, insetInlineStart: 0 },
-      center: { top: sideOffset },
-      end: { top: sideOffset, insetInlineEnd: 0 }
-    },
-    top: {
-      start: { bottom: sideOffset, insetInlineStart: 0 },
-      center: { bottom: sideOffset },
-      end: { bottom: sideOffset, insetInlineEnd: 0 }
-    },
-    right: {
-      start: { left: sideOffset, top: -5 },
-      center: { left: sideOffset },
-      end: { left: sideOffset, bottom: 0 }
-    },
-    left: {
-      start: { right: sideOffset, top: 0 },
-      center: { right: sideOffset },
-      end: { right: sideOffset, bottom: 0 }
-    }
-  };
-  const arrowDirection = {
-    top: "hawa-arrow-default-bottom",
-    bottom: "hawa-arrow-default-top",
-    right: "hawa-arrow-default-left",
-    left: "hawa-arrow-default-right"
-  };
-  return /* @__PURE__ */ React40.createElement(
-    "div",
-    {
-      className: cn(
-        "data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
-        className
-      ),
-      style: { ...stylesMap[side][align] },
-      "data-side": side,
-      "data-floatbox-state": open ? "open" : "closed"
-    },
-    withArrow && /* @__PURE__ */ React40.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React40.createElement("span", null, props.children)
-  );
-};
-
 // elements/scrollArea/ScrollArea.tsx
-var React41 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
-var ScrollArea = React41.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
-  const scrollAreaRef = React41.useRef(null);
-  const isDragging = React41.useRef(false);
-  const startPos = React41.useRef({ x: 0, y: 0 });
-  const scrollPos = React41.useRef({ top: 0, left: 0 });
-  const [showLeftFade, setShowLeftFade] = React41.useState(false);
-  const [showRightFade, setShowRightFade] = React41.useState(false);
+var ScrollArea = React40.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React40.useRef(null);
+  const isDragging = React40.useRef(false);
+  const startPos = React40.useRef({ x: 0, y: 0 });
+  const scrollPos = React40.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React40.useState(false);
+  const [showRightFade, setShowRightFade] = React40.useState(false);
   const checkOverflow = () => {
     if (scrollAreaRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
@@ -4612,7 +4624,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
   };
-  React41.useEffect(() => {
+  React40.useEffect(() => {
     checkOverflow();
     if (scrollAreaRef.current) {
       scrollAreaRef.current.addEventListener("scroll", checkOverflow);
@@ -4625,14 +4637,14 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
       window.removeEventListener("resize", checkOverflow);
     };
   }, []);
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React40.createElement(
     ScrollAreaPrimitive.Root,
     {
       ref,
       className: cn("hawa-relative hawa-overflow-hidden", className),
       ...props
     },
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         className: cn(
@@ -4641,7 +4653,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         className: cn(
@@ -4650,7 +4662,7 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       ScrollAreaPrimitive.Viewport,
       {
         ref: scrollAreaRef,
@@ -4659,12 +4671,12 @@ var ScrollArea = React41.forwardRef(({ className, children, orientation = "verti
       },
       children
     ),
-    /* @__PURE__ */ React41.createElement(ScrollBar, { orientation }),
-    /* @__PURE__ */ React41.createElement(ScrollAreaPrimitive.Corner, null)
+    /* @__PURE__ */ React40.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React40.createElement(ScrollAreaPrimitive.Corner, null)
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React41.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React41.createElement(
+var ScrollBar = React40.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React40.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -4677,7 +4689,7 @@ var ScrollBar = React41.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React40.createElement(
     ScrollAreaPrimitive.ScrollAreaThumb,
     {
       className: cn(
@@ -4748,39 +4760,27 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React42.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React42.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React42.createElement(
-  TabsPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "hawa-flex hawa-gap-2",
-      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React42.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
-));
-var TabsList = React42.forwardRef(({ className, classNames, ...props }, ref) => {
-  const { orientation, variant } = React42.useContext(TabsContext);
-  const [size, setSize] = React42.useState(
-    typeof window !== "undefined" && window.innerWidth || 1200
-  );
-  React42.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const resize = () => {
-        setSize(window.innerWidth);
-      };
-      resize();
-      window.addEventListener("resize", resize);
-      return () => {
-        window.removeEventListener("resize", resize);
-      };
-    }
-  }, []);
-  if (props.scrollable && size < 768 && orientation === "horizontal") {
-    return /* @__PURE__ */ React42.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React42.createElement(
+var TabsContext = React41.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
+var Tabs = React41.forwardRef(
+  ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React41.createElement(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React41.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
+  )
+);
+var TabsList = React41.forwardRef(({ className, classNames, ...props }, ref) => {
+  const { orientation, variant, scrollable } = React41.useContext(TabsContext);
+  const { width } = useViewportSize();
+  if (scrollable && width < 768 && orientation === "horizontal") {
+    return /* @__PURE__ */ React41.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React41.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -4793,7 +4793,7 @@ var TabsList = React42.forwardRef(({ className, classNames, ...props }, ref) =>
       }
     ));
   } else {
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React41.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -4808,37 +4808,52 @@ var TabsList = React42.forwardRef(({ className, classNames, ...props }, ref) =>
     );
   }
 });
-var TabsTrigger = React42.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React42.useContext(TabsContext);
-  const tabTriggerRef = React42.useRef(null);
-  const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React42.createElement(
-    TabsPrimitive.Trigger,
-    {
-      ref: tabTriggerRef,
-      className: cn(
-        tabsTriggerVariant({ variant, orientation }),
-        "hawa-relative",
-        className
-      ),
-      ...props
-    },
-    props.children,
-    chipProps && /* @__PURE__ */ React42.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React42.createElement(
-      FloatBox,
-      {
-        withArrow: true,
-        align: orientation === "vertical" ? "start" : "start",
-        side: orientation === "vertical" ? "right" : "bottom",
-        sideOffset: orientation === "vertical" ? width + 30 : 45,
-        open: props.showPopover
-      },
-      props.popoverContent
-    )
-  );
-});
-var TabsContent = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement(
+var TabsTrigger = React41.forwardRef(
+  ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
+    const { orientation, variant } = React41.useContext(TabsContext);
+    if (withPopover) {
+      return /* @__PURE__ */ React41.createElement(Popover2.Root, { open: props.showPopover }, /* @__PURE__ */ React41.createElement(Popover2.Anchor, { asChild: true }, /* @__PURE__ */ React41.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React41.createElement(Chip, { ...chipProps })
+      )), /* @__PURE__ */ React41.createElement(
+        Popover2.Content,
+        {
+          onClick: onPopoverClick,
+          asChild: true,
+          className: cn(
+            "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+            "hawa-arrow-default-top hawa-mt-2"
+          )
+        },
+        /* @__PURE__ */ React41.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
+      ));
+    } else {
+      return /* @__PURE__ */ React41.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React41.createElement(Chip, { ...chipProps })
+      );
+    }
+  }
+);
+var TabsContent = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React41.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -4855,7 +4870,7 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // elements/select/Select.tsx
-var import_react33 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_react_select = __toESM(require("react-select"));
 var import_creatable = __toESM(require("react-select/creatable"));
 var import_clsx3 = __toESM(require("clsx"));
@@ -4866,10 +4881,10 @@ var Select = ({
 }) => {
   const NoOption = () => {
     var _a, _b;
-    return /* @__PURE__ */ import_react33.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
+    return /* @__PURE__ */ import_react35.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
   };
   const Control = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4882,7 +4897,7 @@ var Select = ({
     );
   };
   const Option = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4903,7 +4918,7 @@ var Select = ({
     ...menuProps
   }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
-    return /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         className: cn(
@@ -4921,7 +4936,7 @@ var Select = ({
   let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm";
   let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
   let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     "div",
     {
       className: cn(
@@ -4929,10 +4944,10 @@ var Select = ({
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ import_react33.default.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
+    props.label && /* @__PURE__ */ import_react35.default.createElement(Label2, { ...labelProps }, props.label),
+    props.isLoading ? /* @__PURE__ */ import_react35.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react35.default.createElement(
         import_react_select.default,
         {
           noOptionsMessage: NoOption,
@@ -4966,7 +4981,7 @@ var Select = ({
             //     {...e}
             //   />
             // ),
-            ValueContainer: (e) => /* @__PURE__ */ import_react33.default.createElement(
+            ValueContainer: (e) => /* @__PURE__ */ import_react35.default.createElement(
               "div",
               {
                 className: cn(
@@ -4976,7 +4991,7 @@ var Select = ({
                 ...e
               }
             ),
-            MultiValueContainer: (e) => /* @__PURE__ */ import_react33.default.createElement(
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react35.default.createElement(
               "div",
               {
                 className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
@@ -4995,7 +5010,7 @@ var Select = ({
           isSearchable: props.isSearchable
         }
       )
-    ) : /* @__PURE__ */ import_react33.default.createElement(
+    ) : /* @__PURE__ */ import_react35.default.createElement(
       import_creatable.default,
       {
         formatCreateLabel: (inputValue) => {
@@ -5025,20 +5040,20 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react33.default.createElement(HelperText, { helperText: props.helperText })
+    !props.hideHelperText && /* @__PURE__ */ import_react35.default.createElement(HelperText, { helperText: props.helperText })
   );
 };
 
 // elements/switch/Switch.tsx
-var React44 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var Switch = React44.forwardRef(
+var Switch = React43.forwardRef(
   ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
-    const [parentDirection, setParentDirection] = React44.useState(
+    const [parentDirection, setParentDirection] = React43.useState(
       null
     );
-    const parentRef = React44.useRef(null);
-    React44.useEffect(() => {
+    const parentRef = React43.useRef(null);
+    React43.useEffect(() => {
       var _a;
       const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
       if (parentNode) {
@@ -5066,13 +5081,13 @@ var Switch = React44.forwardRef(
       full: "hawa-rounded-full",
       inherit: "hawa-rounded-inner"
     };
-    return /* @__PURE__ */ React44.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
       },
-      /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React43.createElement(
         SwitchPrimitives.Root,
         {
           className: cn(
@@ -5086,7 +5101,7 @@ var Switch = React44.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React44.createElement(
+        /* @__PURE__ */ React43.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -5100,14 +5115,14 @@ var Switch = React44.forwardRef(
           }
         )
       ),
-      label && /* @__PURE__ */ React44.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+      label && /* @__PURE__ */ React43.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
     );
   }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // elements/checkbox/Checkbox.tsx
-var React45 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var Checkbox = ({
   id,
@@ -5127,7 +5142,7 @@ var Checkbox = ({
     lg: 0.9,
     xl: 1
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: cn(
@@ -5135,7 +5150,7 @@ var Checkbox = ({
         size === "default" ? "hawa-items-top" : "hawa-items-center"
       )
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(
       CheckboxElement,
       {
         ...props,
@@ -5145,7 +5160,7 @@ var Checkbox = ({
         id
       }
     ),
-    (label || helperText) && /* @__PURE__ */ React45.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React45.createElement(
+    (label || helperText) && /* @__PURE__ */ React44.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5159,7 +5174,7 @@ var Checkbox = ({
         }
       },
       label
-    ), sublabel && /* @__PURE__ */ React45.createElement(
+    ), sublabel && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5169,7 +5184,7 @@ var Checkbox = ({
         )
       },
       sublabel
-    ), helperText && !disabled && /* @__PURE__ */ React45.createElement(
+    ), helperText && !disabled && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5182,7 +5197,7 @@ var Checkbox = ({
     ))
   );
 };
-var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
   let checkboxRadius = {
     none: "hawa-rounded-none",
     inherit: "hawa-rounded-sm",
@@ -5204,7 +5219,7 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
     lg: "1em",
     xl: "1.25em"
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     CheckboxPrimitive.Root,
     {
       ref,
@@ -5216,14 +5231,14 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
       ),
       ...props
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn(
           "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
         )
       },
-      /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React44.createElement(
         "svg",
         {
           "aria-label": "Check Mark",
@@ -5234,7 +5249,7 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
           height: checkboxIndicatorSizes[size],
           width: checkboxIndicatorSizes[size]
         },
-        /* @__PURE__ */ React45.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+        /* @__PURE__ */ React44.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
       ),
       " "
     )
@@ -5243,9 +5258,9 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/progress/Progress.tsx
-var React46 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React46.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React46.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React46.createElement(
+var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React45.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React45.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React45.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -5255,7 +5270,7 @@ var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React46.createElement(
+  /* @__PURE__ */ React45.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",
@@ -5266,7 +5281,7 @@ var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // elements/breadcrumb/Breadcrumb.tsx
-var import_react34 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var Breadcrumb = ({
   breadcrumbLinks,
   separator = ">",
@@ -5277,7 +5292,7 @@ var Breadcrumb = ({
     small: "hawa-text-sm",
     xs: "hawa-text-xs"
   };
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       className: cn(
@@ -5285,13 +5300,13 @@ var Breadcrumb = ({
         textStyles[size]
       )
     },
-    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react34.default.createElement(
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react36.default.createElement(
       "div",
       {
         key: index,
         className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      /* @__PURE__ */ import_react34.default.createElement(
+      /* @__PURE__ */ import_react36.default.createElement(
         "a",
         {
           href: singleBreadcrumbLink.href,
@@ -5299,49 +5314,49 @@ var Breadcrumb = ({
         },
         singleBreadcrumbLink.label
       ),
-      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react34.default.createElement("div", null, separator) : /* @__PURE__ */ import_react34.default.createElement("div", null, separator) : null
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react36.default.createElement("div", null, separator) : /* @__PURE__ */ import_react36.default.createElement("div", null, separator) : null
     ))
   );
 };
 
 // elements/appStores/AppStores.tsx
-var import_react35 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var AppStores = (props) => {
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react35.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react35.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react37.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react37.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react37.default.createElement(
     "path",
     {
       fill: "currentColor",
       d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
     }
-  ))), /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-border hawa-border-black hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react35.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react35.default.createElement(
+  ))), /* @__PURE__ */ import_react37.default.createElement("div", null, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-border hawa-border-black hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react37.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react37.default.createElement(
     "path",
     {
       fill: "#FFD400",
       d: "M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
     }
-  ), /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     "path",
     {
       fill: "#FF3333",
       d: "M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
     }
-  ), /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     "path",
     {
       fill: "#48FF48",
       d: "M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
     }
-  ), /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     "path",
     {
       fill: "#3BCCFF",
       d: "M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
     }
-  ))), /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
+  ))), /* @__PURE__ */ import_react37.default.createElement("div", null, /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
 };
 
 // elements/badge/Badge.tsx
-var import_react36 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var Badge = ({
   anchor,
   position = "right",
@@ -5349,14 +5364,14 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = (0, import_react36.useState)(null);
-  const indicatorRef = (0, import_react36.useRef)(null);
+  const [badgePosition, setBadgePosition] = (0, import_react38.useState)(null);
+  const indicatorRef = (0, import_react38.useRef)(null);
   const sizeStyles2 = {
     small: { top: 4, left: 6, right: 7, classes: "hawa-w-3 hawa-h-3" },
     default: { top: 4, left: 7, right: 5, classes: "hawa-w-3 hawa-h-3" },
     large: { top: 6, left: 12, right: 7, classes: "hawa-w-6 hawa-h-6" }
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const handlePositioning = () => {
       var _a;
       if (anchor.current && indicatorRef.current) {
@@ -5379,7 +5394,7 @@ var Badge = ({
       window.removeEventListener("resize", handlePositioning);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react36.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react38.default.createElement(
     "div",
     {
       style: {
@@ -5404,8 +5419,8 @@ var BadgedComponent = ({
   size,
   text
 }) => {
-  const ref = (0, import_react36.useRef)(null);
-  return /* @__PURE__ */ import_react36.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react36.default.createElement(
+  const ref = (0, import_react38.useRef)(null);
+  return /* @__PURE__ */ import_react38.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react38.default.createElement(
     Badge,
     {
       size,
@@ -5418,7 +5433,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-var import_react37 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // countries.ts
 var countries = [
@@ -7120,9 +7135,9 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
-  const [phoneNumber, setPhoneNumber] = (0, import_react37.useState)("");
-  const [countryCode, setCountryCode] = (0, import_react37.useState)(props.preferredCountry);
-  const inputRef = (0, import_react37.useRef)(null);
+  const [phoneNumber, setPhoneNumber] = (0, import_react39.useState)("");
+  const [countryCode, setCountryCode] = (0, import_react39.useState)(props.preferredCountry);
+  const inputRef = (0, import_react39.useRef)(null);
   const handleInputChange = (e) => {
     console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
@@ -7136,7 +7151,7 @@ var PhoneInput = ({
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react37.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react37.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react39.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react39.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react39.default.createElement(
     Select,
     {
       phoneCode: true,
@@ -7152,7 +7167,7 @@ var PhoneInput = ({
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry
     }
-  ), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react39.default.createElement(
     "input",
     {
       type: "tel",
@@ -7166,15 +7181,15 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ import_react37.default.createElement(HelperText, { helperText: props.helperText }));
+  ))), /* @__PURE__ */ import_react39.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/pinInput/PinInput.tsx
-var React51 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 var import_input_otp = require("input-otp");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react39 = require("react");
+var import_react41 = require("react");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -7183,7 +7198,7 @@ var mergeClasses = (...classes) => classes.filter((className, index, array) => {
 }).join(" ");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -7199,7 +7214,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
-var Icon = (0, import_react38.forwardRef)(
+var Icon = (0, import_react40.forwardRef)(
   ({
     color = "currentColor",
     size = 24,
@@ -7210,7 +7225,7 @@ var Icon = (0, import_react38.forwardRef)(
     iconNode,
     ...rest
   }, ref) => {
-    return (0, import_react38.createElement)(
+    return (0, import_react40.createElement)(
       "svg",
       {
         ref,
@@ -7223,7 +7238,7 @@ var Icon = (0, import_react38.forwardRef)(
         ...rest
       },
       [
-        ...iconNode.map(([tag, attrs]) => (0, import_react38.createElement)(tag, attrs)),
+        ...iconNode.map(([tag, attrs]) => (0, import_react40.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     );
@@ -7232,8 +7247,8 @@ var Icon = (0, import_react38.forwardRef)(
 
 // ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react39.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react39.createElement)(Icon, {
+  const Component = (0, import_react41.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react41.createElement)(Icon, {
       ref,
       iconNode,
       className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
@@ -7250,7 +7265,7 @@ var Dot = createLucideIcon("Dot", [
 ]);
 
 // elements/pinInput/PinInput.tsx
-var PinInputRoot = React51.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React51.createElement(
+var PinInputRoot = React50.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React50.createElement(
   import_input_otp.OTPInput,
   {
     ref,
@@ -7263,7 +7278,7 @@ var PinInputRoot = React51.forwardRef(({ className, containerClassName, ...props
   }
 ));
 PinInputRoot.displayName = "PinInputRoot";
-var PinInputGroup = React51.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React51.createElement(
+var PinInputGroup = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React50.createElement(
   "div",
   {
     ref,
@@ -7272,10 +7287,10 @@ var PinInputGroup = React51.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 PinInputGroup.displayName = "PinInputGroup";
-var PinInputSlot = React51.forwardRef(({ index, className, ...props }, ref) => {
-  const pinInputContext = React51.useContext(import_input_otp.OTPInputContext);
+var PinInputSlot = React50.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React50.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       ref,
@@ -7287,11 +7302,11 @@ var PinInputSlot = React51.forwardRef(({ index, className, ...props }, ref) => {
       ...props
     },
     char,
-    hasFakeCaret && /* @__PURE__ */ React51.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React51.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+    hasFakeCaret && /* @__PURE__ */ React50.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React50.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
   );
 });
 PinInputSlot.displayName = "PinInputSlot";
-var PinInputSeperator = React51.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React51.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React51.createElement(Dot, null)));
+var PinInputSeperator = React50.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React50.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React50.createElement(Dot, null)));
 PinInputSeperator.displayName = "PinInputSeperator";
 var PinInput = ({
   separatorPosition = 0,
@@ -7301,27 +7316,27 @@ var PinInput = ({
   const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
   const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
   const secondGroupLength = maxLength - firstGroupLength;
-  return /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React51.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React51.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React51.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React51.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React51.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
       index: index + firstGroupLength,
       className: "hawa-w-full"
     }
-  )))), /* @__PURE__ */ React51.createElement(HelperText, { helperText: props.helperText }));
+  )))), /* @__PURE__ */ React50.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/stopPropagationWrapper/StopPropagationWrapper.tsx
-var import_react40 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ import_react40.default.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ import_react42.default.createElement("div", { onClick: handleClick }, props.children);
 };
 
 // elements/colorPicker/ColorPicker.tsx
-var import_react41 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var ColorPicker = ({
   containerProps,
   colorPickerProps,
@@ -7332,8 +7347,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = (0, import_react41.useState)(props.color);
-  (0, import_react41.useEffect)(() => {
+  const [selectedColor, setSelectedColor] = (0, import_react43.useState)(props.color);
+  (0, import_react43.useEffect)(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -7350,13 +7365,13 @@ var ColorPicker = ({
       props.handleChange(e);
     }
   };
-  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react41.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react41.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react41.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react43.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react43.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react43.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react43.default.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
       className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
     },
-    /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement(
       "input",
       {
         disabled: preview,
@@ -7375,7 +7390,7 @@ var ColorPicker = ({
         ...colorPickerProps
       }
     )
-  ), /* @__PURE__ */ import_react41.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react43.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react43.default.createElement(
     "input",
     {
       disabled: preview,
@@ -7394,11 +7409,11 @@ var ColorPicker = ({
       },
       ...textInputProps
     }
-  ))), !forceHideHelperText && /* @__PURE__ */ import_react41.default.createElement(HelperText, { helperText: props.helperText }));
+  ))), !forceHideHelperText && /* @__PURE__ */ import_react43.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/progressCircle/ProgressCircle.tsx
-var import_react42 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var size2config = {
   xs: { radius: 15, strokeWidth: 3 },
   sm: { radius: 19, strokeWidth: 4 },
@@ -7415,7 +7430,7 @@ function getLimitedValue(input) {
     return input;
   }
 }
-var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
+var ProgressCircle = import_react44.default.forwardRef((props, ref) => {
   const {
     value: inputValue,
     size = "md",
@@ -7435,7 +7450,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
   const circumference = normalizedRadius * 2 * Math.PI;
   const strokeDashoffset = value / 100 * circumference;
   const offset = circumference - strokeDashoffset;
-  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       ref,
@@ -7444,7 +7459,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
         className
       )
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       "svg",
       {
         width: radius * 2,
@@ -7452,7 +7467,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
         viewBox: `0 0 ${radius * 2} ${radius * 2}`,
         className: "hawa-rotate-180 hawa-transform"
       },
-      /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react44.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7468,7 +7483,7 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
           )
         }
       ),
-      value > 0 ? /* @__PURE__ */ import_react42.default.createElement(
+      value > 0 ? /* @__PURE__ */ import_react44.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7488,24 +7503,24 @@ var ProgressCircle = import_react42.default.forwardRef((props, ref) => {
         }
       ) : null
     ),
-    /* @__PURE__ */ import_react42.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
+    /* @__PURE__ */ import_react44.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
   ));
 });
 ProgressCircle.displayName = "ProgressCircle";
 
 // elements/pagination/Pagination.tsx
-var import_react43 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_react_headless_pagination = require("react-headless-pagination");
 var Pagination = ({
   direction,
   totalPages,
   currentPage
 }) => {
-  const [page, setPage] = import_react43.default.useState(currentPage || 0);
+  const [page, setPage] = import_react45.default.useState(currentPage || 0);
   const handlePageChange = (page2) => {
     setPage(page2);
   };
-  return /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     import_react_headless_pagination.Pagination,
     {
       totalPages,
@@ -7517,10 +7532,10 @@ var Pagination = ({
       truncableText: "...",
       truncableClassName: "hawa-w-10 hawa-px-0.5 hawa-text-center"
     },
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       import_react_headless_pagination.Pagination.PrevButton,
       {
-        as: /* @__PURE__ */ import_react43.default.createElement(
+        as: /* @__PURE__ */ import_react45.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7530,7 +7545,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react43.default.createElement(
+          /* @__PURE__ */ import_react45.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7543,7 +7558,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react43.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react45.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7556,17 +7571,17 @@ var Pagination = ({
       },
       "Previous"
     ),
-    /* @__PURE__ */ import_react43.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react43.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react45.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react45.default.createElement(
       import_react_headless_pagination.Pagination.PageButton,
       {
         className: "hawa-tap-highlight-transparent hawa-text-default-foreground data-[focus-visible=true]:hawa-outline-focus data-[disabled=true]:hawa-text-default-300 hawa-min-w-9 hawa-text-small hawa-box-border hawa-flex hawa-h-9 hawa-w-9 hawa-cursor-pointer hawa-touch-none hawa-select-none hawa-flex-wrap hawa-items-center hawa-justify-center hawa-truncate hawa-rounded hawa-border hawa-bg-card hawa-outline-none hawa-transition-all hover:hawa-scale-[1.1] data-[disabled=true]:hawa-pointer-events-none data-[focus-visible=true]:hawa-z-10 data-[pressed=true]:hawa-scale-[0.97] data-[focus-visible=true]:hawa-outline-2 data-[focus-visible=true]:hawa-outline-offset-2",
         activeClassName: "hawa-bg-primary hawa-text-primary-foreground hawa-transition-all"
       }
     ))),
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       import_react_headless_pagination.Pagination.NextButton,
       {
-        as: /* @__PURE__ */ import_react43.default.createElement(
+        as: /* @__PURE__ */ import_react45.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7576,7 +7591,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react43.default.createElement(
+          /* @__PURE__ */ import_react45.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7589,7 +7604,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react43.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react45.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7606,14 +7621,14 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // icons/Emojis.tsx
-var import_react44 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // icons/InputIcons.tsx
-var import_react45 = __toESM(require("react"));
-var EyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react45.default.createElement(
+var import_react47 = __toESM(require("react"));
+var EyeIcon = (props) => /* @__PURE__ */ import_react47.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react47.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7624,10 +7639,10 @@ var EyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("d
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-  /* @__PURE__ */ import_react45.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ import_react47.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react45.default.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react47.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react47.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7638,20 +7653,20 @@ var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react45.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-  /* @__PURE__ */ import_react45.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-  /* @__PURE__ */ import_react45.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+  /* @__PURE__ */ import_react47.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ));
 
 // icons/CommonIcons.tsx
-var import_react46 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var CheckMark = ({ size = "default", className }) => {
   let sizeStyles2 = {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7659,7 +7674,7 @@ var CheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7674,7 +7689,7 @@ var UncheckMark = ({ size = "default", className }) => {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7682,7 +7697,7 @@ var UncheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7720,7 +7735,7 @@ var PasswordStrengthIndicator = ({ strength }) => {
     strong: "80%",
     "very-strong": "100%"
   }[currentStrengthLevel];
-  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: `${strengthColors[currentStrengthLevel]} hawa-h-full hawa-rounded hawa-transition-all hawa-duration-300`,
@@ -7732,16 +7747,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = (0, import_react47.useState)("");
-  const [isInputFocused, setIsInputFocused] = (0, import_react47.useState)(false);
-  const [currentStr, setCurrentStr] = (0, import_react47.useState)(0);
-  const [passwordVisible, setPasswordVisible] = (0, import_react47.useState)(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react47.useState)(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react47.useState)(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react47.useState)(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react47.useState)(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react49.useState)("");
+  const [isInputFocused, setIsInputFocused] = (0, import_react49.useState)(false);
+  const [currentStr, setCurrentStr] = (0, import_react49.useState)(0);
+  const [passwordVisible, setPasswordVisible] = (0, import_react49.useState)(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react49.useState)(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react49.useState)(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react49.useState)(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react49.useState)(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7780,7 +7795,7 @@ var PasswordInput = ({
     setIsInputFocused(false);
   };
   const getCriteriaClass = (isMet) => isMet ? "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-green-500" : "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-red-600";
-  return /* @__PURE__ */ import_react47.default.createElement("div", null, /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", null, /* @__PURE__ */ import_react49.default.createElement(
     Popover,
     {
       width: "trigger",
@@ -7789,7 +7804,7 @@ var PasswordInput = ({
       onOpenChange: setIsInputFocused,
       triggerProps: { asChild: true },
       contentProps: { onOpenAutoFocus: (e) => e.preventDefault() },
-      trigger: /* @__PURE__ */ import_react47.default.createElement(
+      trigger: /* @__PURE__ */ import_react49.default.createElement(
         "div",
         {
           onClick: (e) => {
@@ -7799,7 +7814,7 @@ var PasswordInput = ({
             }
           }
         },
-        /* @__PURE__ */ import_react47.default.createElement(
+        /* @__PURE__ */ import_react49.default.createElement(
           Input,
           {
             width: "full",
@@ -7809,27 +7824,27 @@ var PasswordInput = ({
             onFocus: handleInputFocus,
             onBlur: handleInputBlur,
             type: passwordVisible ? "text" : "password",
-            endIcon: /* @__PURE__ */ import_react47.default.createElement(
+            endIcon: /* @__PURE__ */ import_react49.default.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ import_react49.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react49.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             )
           }
         )
       )
     },
-    /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react47.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react47.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react47.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react47.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
-  ), /* @__PURE__ */ import_react47.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
+    /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react49.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react49.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react49.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react49.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
+  ), /* @__PURE__ */ import_react49.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
 };
 
 // elements/slider/Slider.tsx
-var React60 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var Slider = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React60.createElement(
+var Slider = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   SliderPrimitive.Root,
   {
     ref,
@@ -7839,13 +7854,13 @@ var Slider = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props
   },
-  /* @__PURE__ */ React60.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-border hawa-bg-background" }, /* @__PURE__ */ React60.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
-  /* @__PURE__ */ React60.createElement(SliderPrimitive.Thumb, { className: "hawa-block hawa-h-5 hawa-w-5 hawa-rounded-full hawa-border-2 hawa-border-primary hawa-bg-background hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50" })
+  /* @__PURE__ */ React59.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-border hawa-bg-background" }, /* @__PURE__ */ React59.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
+  /* @__PURE__ */ React59.createElement(SliderPrimitive.Thumb, { className: "hawa-block hawa-h-5 hawa-w-5 hawa-rounded-full hawa-border-2 hawa-border-primary hawa-bg-background hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50" })
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // elements/simpleTable/SimpleTable.tsx
-var React61 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var SimpleTable = ({
   columns,
@@ -7860,7 +7875,7 @@ var SimpleTable = ({
     columns,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)()
   });
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       className: cn(
@@ -7868,8 +7883,8 @@ var SimpleTable = ({
         classNames
       )
     },
-    props.isLoading ? /* @__PURE__ */ React61.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React61.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React61.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React61.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React61.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ React61.createElement(
+    props.isLoading ? /* @__PURE__ */ React60.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React60.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React60.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React60.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React60.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ React60.createElement(
         TableHead,
         {
           condensed: props.condensed,
@@ -7884,7 +7899,7 @@ var SimpleTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React61.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React61.createElement(
+    })))), /* @__PURE__ */ React60.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React60.createElement(
       TableRow,
       {
         key: row.id,
@@ -7892,7 +7907,7 @@ var SimpleTable = ({
       },
       row.getVisibleCells().map((cell) => {
         var _a2;
-        return /* @__PURE__ */ React61.createElement(
+        return /* @__PURE__ */ React60.createElement(
           TableCell,
           {
             dir: props.direction,
@@ -7908,7 +7923,7 @@ var SimpleTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React61.createElement(TableRow, null, /* @__PURE__ */ React61.createElement(
+    )) : /* @__PURE__ */ React60.createElement(TableRow, null, /* @__PURE__ */ React60.createElement(
       TableCell,
       {
         colSpan: columns.length,
@@ -7920,12 +7935,12 @@ var SimpleTable = ({
 };
 
 // elements/separator/Separator.tsx
-var React62 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 var Separator2 = ({
   className,
   orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ React62.createElement(
+}) => /* @__PURE__ */ React61.createElement(
   "div",
   {
     className: cn(
@@ -7938,12 +7953,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-var import_react48 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = (0, import_react48.useState)(0);
+  const [scrollPercentage, setScrollPercentage] = (0, import_react50.useState)(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -7954,7 +7969,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7963,7 +7978,7 @@ var ScrollIndicator = ({
       (_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       style: {
@@ -7979,11 +7994,11 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_prism_react_renderer = require("prism-react-renderer");
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 require("prismjs/components/prism-bash");
-var CopyIcon = () => /* @__PURE__ */ import_react49.default.createElement(
+var CopyIcon = () => /* @__PURE__ */ import_react51.default.createElement(
   "svg",
   {
     "aria-label": "Copy",
@@ -7996,8 +8011,8 @@ var CopyIcon = () => /* @__PURE__ */ import_react49.default.createElement(
     height: "1em",
     width: "1em"
   },
-  /* @__PURE__ */ import_react49.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ import_react49.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  /* @__PURE__ */ import_react51.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react51.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
 );
 var CodeBlock = ({
   tabs,
@@ -8011,7 +8026,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = (0, import_react49.useState)(0);
+  const [selectedTab, setSelectedTab] = (0, import_react51.useState)(0);
   const theme = import_prism_react_renderer.themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -8019,7 +8034,7 @@ var CodeBlock = ({
     sm: "hawa-w-full hawa-max-w-sm",
     xs: "hawa-w-full hawa-max-w-xs"
   };
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
       className: cn(
@@ -8028,7 +8043,7 @@ var CodeBlock = ({
         classNames == null ? void 0 : classNames.root
       )
     },
-    fileName && /* @__PURE__ */ import_react49.default.createElement(
+    fileName && /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -8037,7 +8052,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.fileName
         )
       },
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           className: cn(
@@ -8047,7 +8062,7 @@ var CodeBlock = ({
         fileName
       )
     ),
-    tabs && /* @__PURE__ */ import_react49.default.createElement(
+    tabs && /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -8056,7 +8071,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.tabs
         )
       },
-      tabs.map((tab, i) => /* @__PURE__ */ import_react49.default.createElement(
+      tabs.map((tab, i) => /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           key: i,
@@ -8065,7 +8080,7 @@ var CodeBlock = ({
             classNames == null ? void 0 : classNames.tab
           )
         },
-        /* @__PURE__ */ import_react49.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(
           "div",
           {
             onClick: () => setSelectedTab(i),
@@ -8077,7 +8092,7 @@ var CodeBlock = ({
         )
       ))
     ),
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -8087,22 +8102,22 @@ var CodeBlock = ({
           "hawa-overflow-y-auto"
         )
       },
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           className: cn(
             "hawa-flex hawa-absolute  hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-z-50  hawa-right-3 hawa-top-3"
           )
         },
-        /* @__PURE__ */ import_react49.default.createElement(
+        /* @__PURE__ */ import_react51.default.createElement(
           Tooltip,
           {
             open: clipboard.copied,
             side: "left",
-            content: /* @__PURE__ */ import_react49.default.createElement("div", null, "Copied!"),
+            content: /* @__PURE__ */ import_react51.default.createElement("div", null, "Copied!"),
             triggerProps: { asChild: true }
           },
-          /* @__PURE__ */ import_react49.default.createElement(
+          /* @__PURE__ */ import_react51.default.createElement(
             Button,
             {
               size: "smallIcon",
@@ -8110,18 +8125,18 @@ var CodeBlock = ({
               variant: "outline",
               className: "hawa-text-gray-200 hawa-opacity-50 dark:hawa-border-gray-200 dark:hover:hawa-border-gray-400"
             },
-            /* @__PURE__ */ import_react49.default.createElement(CopyIcon, null)
+            /* @__PURE__ */ import_react51.default.createElement(CopyIcon, null)
           )
         )
       ),
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         import_prism_react_renderer.Highlight,
         {
           theme,
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react49.default.createElement(
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react51.default.createElement(
           "pre",
           {
             className: cn(
@@ -8131,7 +8146,7 @@ var CodeBlock = ({
               wrapText && "hawa-text-wrap"
             )
           },
-          tokens.map((line, i) => /* @__PURE__ */ import_react49.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react49.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react49.default.createElement("span", { key, ...getTokenProps({ token }) }))))
+          tokens.map((line, i) => /* @__PURE__ */ import_react51.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react51.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react51.default.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
       )
     )
@@ -8139,7 +8154,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var Carousel = ({
   items,
@@ -8155,8 +8170,8 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = (0, import_react50.useState)(0);
-  (0, import_react50.useEffect)(() => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react52.useState)(0);
+  (0, import_react52.useEffect)(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -8166,7 +8181,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -8178,17 +8193,17 @@ var Carousel = ({
         clearInterval(autoplayTimer);
     };
   }, [emblaApi, autoplay, autoplayInterval]);
-  const length = import_react50.default.Children.count(items);
+  const length = import_react52.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       key: i,
       className: "hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center"
     },
     item
-  ))))), /* @__PURE__ */ import_react50.default.createElement(
+  ))))), /* @__PURE__ */ import_react52.default.createElement(
     Dots,
     {
       direction,
@@ -8196,7 +8211,7 @@ var Carousel = ({
       selectedIndex,
       onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
     }
-  ), showArrows && /* @__PURE__ */ import_react50.default.createElement(
+  ), showArrows && /* @__PURE__ */ import_react52.default.createElement(
     CarouselControls,
     {
       canScrollNext,
@@ -8213,7 +8228,7 @@ var Dots = ({
   direction
 }) => {
   const arr = new Array(itemsLength).fill(0);
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       dir: direction,
@@ -8221,7 +8236,7 @@ var Dots = ({
     },
     arr.map((_, index) => {
       const selected = index === selectedIndex;
-      return /* @__PURE__ */ import_react50.default.createElement(
+      return /* @__PURE__ */ import_react52.default.createElement(
         "div",
         {
           key: index,
@@ -8236,7 +8251,7 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react52.default.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
@@ -8247,7 +8262,7 @@ var CarouselControls = (props) => {
         props.canScrollPrev && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -8256,9 +8271,9 @@ var CarouselControls = (props) => {
         viewBox: "0 0 16 16",
         className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 "
       },
-      /* @__PURE__ */ import_react50.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+      /* @__PURE__ */ import_react52.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
-  ), /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react52.default.createElement(
     "button",
     {
       onClick: () => props.canScrollNext && props.onNext(),
@@ -8269,7 +8284,7 @@ var CarouselControls = (props) => {
         props.canScrollNext && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -8278,19 +8293,19 @@ var CarouselControls = (props) => {
         viewBox: "0 0 16 16",
         className: "hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
       },
-      /* @__PURE__ */ import_react50.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+      /* @__PURE__ */ import_react52.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
   ));
 };
 
 // elements/count/Count.tsx
-var import_react51 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var Count = (props) => {
-  return /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react51.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-text-sm" }, props.count));
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react53.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react53.default.createElement("div", { className: "hawa-text-sm" }, props.count));
 };
 
 // elements/toast/Toast.tsx
-var React67 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
 var import_class_variance_authority4 = require("class-variance-authority");
 var toastVariants = (0, import_class_variance_authority4.cva)(
@@ -8318,7 +8333,7 @@ var sizeStyles = {
   sm: "hawa-text-xs"
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastViewport = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -8330,8 +8345,8 @@ var ToastViewport = React67.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React67.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React67.createElement(
+var Toast = React66.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -8346,8 +8361,8 @@ var Toast = React67.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React67.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React67.createElement(
+var ToastAction = React66.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -8365,7 +8380,7 @@ var ToastAction = React67.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -8379,7 +8394,7 @@ var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React67.createElement(
+  /* @__PURE__ */ React66.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -8388,7 +8403,7 @@ var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8399,7 +8414,7 @@ var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React67.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastTitle = React66.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -8412,7 +8427,7 @@ var ToastTitle = React67.forwardRef(({ className, size = "default", ...props },
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React67.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React67.createElement(
+var ToastDescription = React66.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -8427,11 +8442,11 @@ var ToastDescription = React67.forwardRef(({ className, size = "default", ...pro
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // elements/toaster/Toaster.tsx
-var import_react52 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 function Toaster(props) {
   var _a;
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ import_react52.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
+  return /* @__PURE__ */ import_react54.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
     id,
     title,
     description,
@@ -8439,7 +8454,7 @@ function Toaster(props) {
     action,
     ...toastProps
   }) {
-    return /* @__PURE__ */ import_react52.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react54.default.createElement(
       "div",
       {
         className: cn(
@@ -8447,9 +8462,9 @@ function Toaster(props) {
           action && "hawa-justify-between"
         )
       },
-      /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react52.default.createElement(ToastClose, null)),
-      /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react54.default.createElement(ToastClose, null)),
+      /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
+      /* @__PURE__ */ import_react54.default.createElement(
         "div",
         {
           className: cn(
@@ -8457,11 +8472,11 @@ function Toaster(props) {
             { "hawa-p-4": size === "default", "hawa-p-2": size === "sm" }
           )
         },
-        /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react52.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react52.default.createElement(ToastDescription, { size }, description)),
-        action && /* @__PURE__ */ import_react52.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
+        /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react54.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react54.default.createElement(ToastDescription, { size }, description)),
+        action && /* @__PURE__ */ import_react54.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
       )
     ));
-  }), /* @__PURE__ */ import_react52.default.createElement(
+  }), /* @__PURE__ */ import_react54.default.createElement(
     ToastViewport,
     {
       className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
@@ -8470,20 +8485,20 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = (0, import_react53.useState)(false);
-  const popUpRef = (0, import_react53.useRef)(null);
+  const [closed, setClosed] = (0, import_react55.useState)(false);
+  const popUpRef = (0, import_react55.useRef)(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"
   };
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(
     "div",
     {
       className: cn(
@@ -8492,7 +8507,7 @@ var DestroyableCard = ({
       ),
       ref: popUpRef
     },
-    /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react55.default.createElement(
       Card,
       {
         className: cn(
@@ -8501,7 +8516,7 @@ var DestroyableCard = ({
         ),
         dir: direction
       },
-      /* @__PURE__ */ import_react53.default.createElement(
+      /* @__PURE__ */ import_react55.default.createElement(
         "button",
         {
           type: "button",
@@ -8520,7 +8535,7 @@ var DestroyableCard = ({
             }, 200);
           }
         },
-        /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react55.default.createElement(
           "svg",
           {
             "aria-hidden": "true",
@@ -8528,7 +8543,7 @@ var DestroyableCard = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ import_react53.default.createElement(
+          /* @__PURE__ */ import_react55.default.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -8538,13 +8553,13 @@ var DestroyableCard = ({
           )
         )
       ),
-      /* @__PURE__ */ import_react53.default.createElement(CardContent, { headless: true }, props.children)
+      /* @__PURE__ */ import_react55.default.createElement(CardContent, { headless: true }, props.children)
     )
   );
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -8552,13 +8567,13 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = (0, import_react54.useState)(props.currentColorMode);
-  const [language, setLanguage] = (0, import_react54.useState)(props.currentLanguage);
+  const [color, setColor] = (0, import_react56.useState)(props.currentColorMode);
+  const [language, setLanguage] = (0, import_react56.useState)(props.currentLanguage);
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
     vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
   };
-  return /* @__PURE__ */ import_react54.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react56.default.createElement(
     Radio,
     {
       name: "language",
@@ -8576,7 +8591,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     Radio,
     {
       name: "theme",
@@ -8592,7 +8607,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ import_react54.default.createElement(
+          label: /* @__PURE__ */ import_react56.default.createElement(
             "svg",
             {
               width: "15",
@@ -8602,7 +8617,7 @@ var InterfaceSettings = ({
               xmlns: "http://www.w3.org/2000/svg",
               className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90"
             },
-            /* @__PURE__ */ import_react54.default.createElement(
+            /* @__PURE__ */ import_react56.default.createElement(
               "path",
               {
                 d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
@@ -8613,7 +8628,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ import_react54.default.createElement(
+          label: /* @__PURE__ */ import_react56.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -8624,7 +8639,7 @@ var InterfaceSettings = ({
               stroke: "currentColor",
               className: "hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100"
             },
-            /* @__PURE__ */ import_react54.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ import_react56.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -8633,14 +8648,14 @@ var InterfaceSettings = ({
 };
 
 // elements/phoneMockup/PhoneMockup.tsx
-var import_react55 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var PhoneMockup = ({
   children,
   upperOverlayGradiant,
   lowerOverlayGradiant,
   phone,
   hideButtons
-}) => /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-relative hawa-mx-auto hawa-h-[600px] hawa-w-[300px] hawa-rounded-[2.5rem] hawa-border-[14px] hawa-border-gray-800 hawa-bg-gray-800 hawa-dark:border-gray-800" }, !hideButtons && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[72px] hawa-h-[32px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[124px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[178px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-absolute hawa--right-[16px] hawa-top-[142px] hawa-h-[64px] hawa-w-[3px] hawa-rounded-r-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" })), /* @__PURE__ */ import_react55.default.createElement("div", { className: "no-scrollbar hawa-left-0 hawa-h-[572px] hawa-w-[272px] hawa-overflow-y-scroll hawa-rounded-[2rem] hawa-bg-white hawa-[clip-path:inset(0px_-1px_0px_0px_round_2rem)] hawa-dark:bg-gray-800" }, children), upperOverlayGradiant && /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-left-0 hawa-top-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-t-[2rem] hawa-bg-gradient-to-t hawa-from-transparent hawa-to-black hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }), lowerOverlayGradiant && /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-bottom-0 hawa-left-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-b-[2rem] hawa-bg-gradient-to-t hawa-from-black hawa-to-transparent hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }));
+}) => /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-relative hawa-mx-auto hawa-h-[600px] hawa-w-[300px] hawa-rounded-[2.5rem] hawa-border-[14px] hawa-border-gray-800 hawa-bg-gray-800 hawa-dark:border-gray-800" }, !hideButtons && /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[72px] hawa-h-[32px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[124px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--left-[16px] hawa-top-[178px] hawa-h-[46px] hawa-w-[3px] hawa-rounded-l-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" }), /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-absolute hawa--right-[16px] hawa-top-[142px] hawa-h-[64px] hawa-w-[3px] hawa-rounded-r-lg hawa-bg-gray-800 hawa-dark:bg-gray-800" })), /* @__PURE__ */ import_react57.default.createElement("div", { className: "no-scrollbar hawa-left-0 hawa-h-[572px] hawa-w-[272px] hawa-overflow-y-scroll hawa-rounded-[2rem] hawa-bg-white hawa-[clip-path:inset(0px_-1px_0px_0px_round_2rem)] hawa-dark:bg-gray-800" }, children), upperOverlayGradiant && /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-left-0 hawa-top-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-t-[2rem] hawa-bg-gradient-to-t hawa-from-transparent hawa-to-black hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }), lowerOverlayGradiant && /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-bottom-0 hawa-left-0 hawa-h-[72px] hawa-w-[272px] hawa-rounded-b-[2rem] hawa-bg-gradient-to-t hawa-from-black hawa-to-transparent hawa-opacity-50 hawa-[clip-path:inset(0px_0px_0px_0px_round_0rem)]" }));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,