@sikka/hawa 0.30.25-next → 0.30.27-next

package/dist/elements/index.js

@@ -122,6 +122,8 @@ __export(elements_exports, {
   PinInput: () => PinInput,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
+  PopoverPortal: () => PopoverPortal,
+  PopoverRoot: () => PopoverRoot,
   PopoverTrigger: () => PopoverTrigger,
   Progress: () => Progress,
   ProgressCircle: () => ProgressCircle,
@@ -3621,6 +3623,8 @@ var Popover = ({
   ));
 };
 var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverRoot = PopoverPrimitive.Root;
 
 // elements/combobox/Combobox.tsx
 var Combobox = React27.forwardRef(
@@ -4104,9 +4108,164 @@ var SortButton = (props) => {
 };
 
 // elements/tabs/Tabs.tsx
-var React31 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
+
+// hooks/useIsomorphicEffect.ts
+var import_react14 = require("react");
+
+// hooks/useDiscloser.ts
+var import_react15 = require("react");
+
+// hooks/useHover.ts
+var import_react16 = require("react");
+
+// hooks/useToast.ts
+var React33 = __toESM(require("react"));
+
+// hooks/useCarousel.ts
+var import_react17 = require("react");
+
+// hooks/useDialogCarousel.ts
+var import_react18 = require("react");
+var import_embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+
+// hooks/useDialogSteps.ts
+var import_react19 = require("react");
+
+// hooks/useClipboard.ts
+var import_react20 = require("react");
+function useClipboard({ timeout = 2e3 } = {}) {
+  const [error, setError] = (0, import_react20.useState)(null);
+  const [copied, setCopied] = (0, import_react20.useState)(false);
+  const [copyTimeout, setCopyTimeout] = (0, import_react20.useState)(null);
+  const handleCopyResult = (value) => {
+    clearTimeout(copyTimeout);
+    setCopyTimeout(setTimeout(() => setCopied(false), timeout));
+    setCopied(value);
+  };
+  const copy = (valueToCopy) => {
+    if ("clipboard" in navigator) {
+      navigator.clipboard.writeText(valueToCopy).then(() => handleCopyResult(true)).catch((err) => setError(err));
+    } else {
+      setError(new Error("useClipboard: navigator.clipboard is not supported"));
+    }
+  };
+  const reset = () => {
+    setCopied(false);
+    setError(null);
+    clearTimeout(copyTimeout);
+  };
+  return { copy, reset, error, copied };
+}
+
+// hooks/useBreakpoint.ts
+var import_react21 = require("react");
+
+// hooks/useWindowSize.ts
+var import_react22 = require("react");
+
+// hooks/useFocusWithin.ts
+var import_react23 = require("react");
+
+// hooks/useMediaQuery.ts
+var import_react24 = require("react");
+
+// hooks/useScrollPosition.ts
+var import_react25 = require("react");
+
+// hooks/useTable.ts
+var import_react26 = require("react");
+
+// hooks/useTabs.ts
+var import_react27 = require("react");
+
+// hooks/useMeasureDirty.ts
+var import_react28 = require("react");
+var useMeasureDirty = (ref) => {
+  const frame = (0, import_react28.useRef)(0);
+  const [rect, set] = (0, import_react28.useState)({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  });
+  const [observer] = (0, import_react28.useState)(
+    () => new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+          if (ref.current) {
+            set(entry.contentRect);
+          }
+        });
+      }
+    })
+  );
+  (0, import_react28.useEffect)(() => {
+    observer.disconnect();
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+  }, [ref]);
+  return rect;
+};
+
+// elements/tabs/Tabs.tsx
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_tailwind_variants = require("tailwind-variants");
+
+// elements/floatBox/FloatBox.tsx
+var React39 = __toESM(require("react"));
+var FloatBox = ({
+  className,
+  open,
+  side = "bottom",
+  sideOffset = 40,
+  align = "center",
+  ...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 }
+    }
+  };
+  return /* @__PURE__ */ React39.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-bg-popover 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",
+        className
+      ),
+      style: { ...stylesMap[side][align] },
+      "data-side": side,
+      "data-floatbox-state": open ? "open" : "closed"
+    },
+    props.children
+  );
+};
+
+// elements/tabs/Tabs.tsx
 var tabsListVariant = (0, import_tailwind_variants.tv)({
   base: "",
   variants: {
@@ -4115,10 +4274,7 @@ var tabsListVariant = (0, import_tailwind_variants.tv)({
       underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
       underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
     },
-    orientation: {
-      horizontal: "",
-      vertical: ""
-    }
+    orientation: { horizontal: "", vertical: "" }
   },
   compoundVariants: [
     {
@@ -4132,10 +4288,7 @@ var tabsListVariant = (0, import_tailwind_variants.tv)({
       class: "hawa-border-b-2 hawa-border-b-primary"
     }
   ],
-  defaultVariants: {
-    variant: "default",
-    orientation: "horizontal"
-  }
+  defaultVariants: { variant: "default", orientation: "horizontal" }
 });
 var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   base: "",
@@ -4145,10 +4298,7 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
       underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all 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",
       underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all 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 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
     },
-    orientation: {
-      horizontal: "",
-      vertical: ""
-    }
+    orientation: { horizontal: "", vertical: "" }
   },
   compoundVariants: [
     {
@@ -4172,13 +4322,10 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
       class: "hawa-rounded-e-none"
     }
   ],
-  defaultVariants: {
-    variant: "default",
-    orientation: "horizontal"
-  }
+  defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React31.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React31.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React31.createElement(
+var TabsContext = React40.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React40.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React40.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -4189,12 +4336,11 @@ var Tabs = React31.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React40.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React31.useContext(TabsContext);
-  return /* @__PURE__ */ React31.createElement(
+var TabsList = React40.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React40.useContext(TabsContext);
+  return /* @__PURE__ */ React40.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -4207,22 +4353,36 @@ var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
     }
   );
 });
-TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React31.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React31.useContext(TabsContext);
-  return /* @__PURE__ */ React31.createElement(
+var TabsTrigger = React40.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React40.useContext(TabsContext);
+  const tabTriggerRef = React40.useRef(null);
+  const { width } = useMeasureDirty(tabTriggerRef);
+  return /* @__PURE__ */ React40.createElement(
     TabsPrimitive.Trigger,
     {
-      ref,
-      className: cn(tabsTriggerVariant({ variant, orientation }), className),
+      ref: tabTriggerRef,
+      className: cn(
+        tabsTriggerVariant({ variant, orientation }),
+        "hawa-relative",
+        className
+      ),
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React31.createElement(Chip, { ...chipProps })
+    chipProps && /* @__PURE__ */ React40.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React40.createElement(
+      FloatBox,
+      {
+        align: orientation === "vertical" ? "start" : "start",
+        side: orientation === "vertical" ? "right" : "bottom",
+        sideOffset: orientation === "vertical" ? width + 30 : 45,
+        open: props.showPopover
+      },
+      props.popoverContent
+    )
   );
 });
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React31.createElement(
+var TabsContent = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React40.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -4233,10 +4393,13 @@ var TabsContent = React31.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
+Tabs.displayName = TabsPrimitive.Root.displayName;
+TabsList.displayName = TabsPrimitive.List.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // elements/select/Select.tsx
-var import_react14 = __toESM(require("react"));
+var import_react29 = __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"));
@@ -4247,10 +4410,10 @@ var Select = ({
 }) => {
   const NoOption = () => {
     var _a, _b;
-    return /* @__PURE__ */ import_react14.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
+    return /* @__PURE__ */ import_react29.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_react14.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4263,7 +4426,7 @@ var Select = ({
     );
   };
   const Option = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4284,7 +4447,7 @@ var Select = ({
     ...menuProps
   }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       "div",
       {
         className: cn(
@@ -4298,7 +4461,7 @@ var Select = ({
       children
     );
   };
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     "div",
     {
       className: cn(
@@ -4306,10 +4469,10 @@ var Select = ({
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ import_react14.default.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ import_react14.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
+    props.label && /* @__PURE__ */ import_react29.default.createElement(Label2, { ...labelProps }, props.label),
+    props.isLoading ? /* @__PURE__ */ import_react29.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_react14.default.createElement(
+      /* @__PURE__ */ import_react29.default.createElement(
         import_react_select.default,
         {
           noOptionsMessage: NoOption,
@@ -4346,7 +4509,7 @@ var Select = ({
           isSearchable: props.isSearchable
         }
       )
-    ) : /* @__PURE__ */ import_react14.default.createElement(
+    ) : /* @__PURE__ */ import_react29.default.createElement(
       import_creatable.default,
       {
         formatCreateLabel: (inputValue) => {
@@ -4376,7 +4539,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react14.default.createElement(
+    !props.hideHelperText && /* @__PURE__ */ import_react29.default.createElement(
       "p",
       {
         className: cn(
@@ -4390,15 +4553,15 @@ var Select = ({
 };
 
 // elements/switch/Switch.tsx
-var React33 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var Switch = React33.forwardRef(
+var Switch = React42.forwardRef(
   ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
-    const [parentDirection, setParentDirection] = React33.useState(
+    const [parentDirection, setParentDirection] = React42.useState(
       null
     );
-    const parentRef = React33.useRef(null);
-    React33.useEffect(() => {
+    const parentRef = React42.useRef(null);
+    React42.useEffect(() => {
       var _a;
       const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
       if (parentNode) {
@@ -4426,13 +4589,13 @@ var Switch = React33.forwardRef(
       full: "hawa-rounded-full",
       inherit: "hawa-rounded-inner"
     };
-    return /* @__PURE__ */ React33.createElement(
+    return /* @__PURE__ */ React42.createElement(
       "div",
       {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
       },
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React42.createElement(
         SwitchPrimitives.Root,
         {
           className: cn(
@@ -4446,7 +4609,7 @@ var Switch = React33.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React33.createElement(
+        /* @__PURE__ */ React42.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -4460,14 +4623,14 @@ var Switch = React33.forwardRef(
           }
         )
       ),
-      label && /* @__PURE__ */ React33.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+      label && /* @__PURE__ */ React42.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 React34 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var Checkbox = ({
   id,
@@ -4487,7 +4650,7 @@ var Checkbox = ({
     lg: 0.9,
     xl: 1
   };
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "div",
     {
       className: cn(
@@ -4495,7 +4658,7 @@ var Checkbox = ({
         size === "default" ? "hawa-items-top" : "hawa-items-center"
       )
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React43.createElement(
       CheckboxElement,
       {
         ...props,
@@ -4505,7 +4668,7 @@ var Checkbox = ({
         id
       }
     ),
-    (label || helperText) && /* @__PURE__ */ React34.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React34.createElement(
+    (label || helperText) && /* @__PURE__ */ React43.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React43.createElement(
       "label",
       {
         htmlFor: id,
@@ -4519,7 +4682,7 @@ var Checkbox = ({
         }
       },
       label
-    ), sublabel && /* @__PURE__ */ React34.createElement(
+    ), sublabel && /* @__PURE__ */ React43.createElement(
       "label",
       {
         htmlFor: id,
@@ -4529,7 +4692,7 @@ var Checkbox = ({
         )
       },
       sublabel
-    ), helperText && !disabled && /* @__PURE__ */ React34.createElement(
+    ), helperText && !disabled && /* @__PURE__ */ React43.createElement(
       "label",
       {
         htmlFor: id,
@@ -4542,7 +4705,7 @@ var Checkbox = ({
     ))
   );
 };
-var CheckboxElement = React34.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+var CheckboxElement = React43.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
   let checkboxRadius = {
     none: "hawa-rounded-none",
     inherit: "hawa-rounded-sm",
@@ -4564,7 +4727,7 @@ var CheckboxElement = React34.forwardRef(({ radius = "inherit", size = "default"
     lg: "1em",
     xl: "1.25em"
   };
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React43.createElement(
     CheckboxPrimitive.Root,
     {
       ref,
@@ -4576,14 +4739,14 @@ var CheckboxElement = React34.forwardRef(({ radius = "inherit", size = "default"
       ),
       ...props
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React43.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn(
           "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
         )
       },
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React43.createElement(
         "svg",
         {
           "aria-label": "Check Mark",
@@ -4594,7 +4757,7 @@ var CheckboxElement = React34.forwardRef(({ radius = "inherit", size = "default"
           height: checkboxIndicatorSizes[size],
           width: checkboxIndicatorSizes[size]
         },
-        /* @__PURE__ */ React34.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__ */ React43.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" })
       ),
       " "
     )
@@ -4603,9 +4766,9 @@ var CheckboxElement = React34.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/progress/Progress.tsx
-var React35 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var Progress = React35.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React35.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React35.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React35.createElement(
+var Progress = React44.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React44.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React44.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React44.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -4615,7 +4778,7 @@ var Progress = React35.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React35.createElement(
+  /* @__PURE__ */ React44.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",
@@ -4626,7 +4789,7 @@ var Progress = React35.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // elements/breadcrumb/Breadcrumb.tsx
-var import_react15 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var Breadcrumb = ({
   breadcrumbLinks,
   separator = ">",
@@ -4637,7 +4800,7 @@ var Breadcrumb = ({
     small: "hawa-text-sm",
     xs: "hawa-text-xs"
   };
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     "div",
     {
       className: cn(
@@ -4645,13 +4808,13 @@ var Breadcrumb = ({
         textStyles[size]
       )
     },
-    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react15.default.createElement(
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react30.default.createElement(
       "div",
       {
         key: index,
         className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react30.default.createElement(
         "a",
         {
           href: singleBreadcrumbLink.href,
@@ -4659,49 +4822,49 @@ var Breadcrumb = ({
         },
         singleBreadcrumbLink.label
       ),
-      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react15.default.createElement("div", null, separator) : /* @__PURE__ */ import_react15.default.createElement("div", null, separator) : null
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react30.default.createElement("div", null, separator) : /* @__PURE__ */ import_react30.default.createElement("div", null, separator) : null
     ))
   );
 };
 
 // elements/appStores/AppStores.tsx
-var import_react16 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var AppStores = (props) => {
-  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react16.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react16.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_react16.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react16.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react31.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react31.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_react31.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react31.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react31.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_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react16.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react16.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_react16.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react16.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react16.default.createElement(
+  ))), /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react31.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_react31.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react31.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react31.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_react16.default.createElement(
+  ), /* @__PURE__ */ import_react31.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_react16.default.createElement(
+  ), /* @__PURE__ */ import_react31.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_react16.default.createElement(
+  ), /* @__PURE__ */ import_react31.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_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react16.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
+  ))), /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
 };
 
 // elements/badge/Badge.tsx
-var import_react17 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var Badge = ({
   anchor,
   position = "right",
@@ -4709,14 +4872,14 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = (0, import_react17.useState)(null);
-  const indicatorRef = (0, import_react17.useRef)(null);
+  const [badgePosition, setBadgePosition] = (0, import_react32.useState)(null);
+  const indicatorRef = (0, import_react32.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_react17.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const handlePositioning = () => {
       var _a;
       if (anchor.current && indicatorRef.current) {
@@ -4739,7 +4902,7 @@ var Badge = ({
       window.removeEventListener("resize", handlePositioning);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react17.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react32.default.createElement(
     "div",
     {
       style: {
@@ -4764,8 +4927,8 @@ var BadgedComponent = ({
   size,
   text
 }) => {
-  const ref = (0, import_react17.useRef)(null);
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react17.default.createElement(
+  const ref = (0, import_react32.useRef)(null);
+  return /* @__PURE__ */ import_react32.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react32.default.createElement(
     Badge,
     {
       size,
@@ -4778,7 +4941,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-var import_react18 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // countries.ts
 var countries = [
@@ -6475,10 +6638,10 @@ var countries_default = countries;
 
 // elements/phoneInput/PhoneInput.tsx
 var PhoneInput = ({ labelProps, ...props }) => {
-  const [phoneNumber, setPhoneNumber] = (0, import_react18.useState)("");
-  const [countryCode, setCountryCode] = (0, import_react18.useState)(props.preferredCountry);
-  const inputRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const [phoneNumber, setPhoneNumber] = (0, import_react33.useState)("");
+  const [countryCode, setCountryCode] = (0, import_react33.useState)(props.preferredCountry);
+  const inputRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useEffect)(() => {
     var _a;
     if (inputRef.current) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -6496,7 +6659,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react18.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react18.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react33.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react33.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react33.default.createElement(
     Select,
     {
       width: "fit",
@@ -6512,7 +6675,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
       value: countryCode == null ? void 0 : countryCode.label,
       onChange: setCountryCode
     }
-  ), /* @__PURE__ */ import_react18.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_react18.default.createElement(
+  ), /* @__PURE__ */ import_react33.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_react33.default.createElement(
     "input",
     {
       ref: inputRef,
@@ -6525,7 +6688,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
       type: "tel",
       placeholder: props.placeholder
     }
-  ))), /* @__PURE__ */ import_react18.default.createElement(
+  ))), /* @__PURE__ */ import_react33.default.createElement(
     "p",
     {
       className: cn(
@@ -6538,7 +6701,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
 };
 
 // elements/pinInput/PinInput.tsx
-var import_react19 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var PinInput = ({
   label,
   icon,
@@ -6548,7 +6711,7 @@ var PinInput = ({
   inputProps,
   ...props
 }) => {
-  const [pin, setPin] = (0, import_react19.useState)(Array.from(Array(digits)));
+  const [pin, setPin] = (0, import_react34.useState)(Array.from(Array(digits)));
   const handleKeyDown = (e, index) => {
     let backTo = 0;
     if (e.key === "Backspace") {
@@ -6557,7 +6720,7 @@ var PinInput = ({
       previousInput == null ? void 0 : previousInput.focus();
     }
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     let unfilled = pin.includes(void 0);
     if (!unfilled && getPins) {
       getPins(pin);
@@ -6582,13 +6745,13 @@ var PinInput = ({
       }
     }
   };
-  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
       className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
       dir: "ltr"
     },
-    pin.map((value, index) => /* @__PURE__ */ import_react19.default.createElement(
+    pin.map((value, index) => /* @__PURE__ */ import_react34.default.createElement(
       "input",
       {
         key: index,
@@ -6608,7 +6771,7 @@ var PinInput = ({
         ...inputProps
       }
     ))
-  ), /* @__PURE__ */ import_react19.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement(
     "p",
     {
       className: cn(
@@ -6621,30 +6784,30 @@ var PinInput = ({
 };
 
 // elements/stopPropagationWrapper/StopPropagationWrapper.tsx
-var import_react20 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ import_react20.default.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ import_react35.default.createElement("div", { onClick: handleClick }, props.children);
 };
 
 // elements/scrollArea/ScrollArea.tsx
-var React42 = __toESM(require("react"));
+var React51 = __toESM(require("react"));
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
-var ScrollArea = React42.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React42.createElement(
+var ScrollArea = React51.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React51.createElement(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("hawa-relative hawa-overflow-hidden", className),
     ...props
   },
-  /* @__PURE__ */ React42.createElement(ScrollAreaPrimitive.Viewport, { className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]" }, children),
-  /* @__PURE__ */ React42.createElement(ScrollBar, { orientation }),
-  /* @__PURE__ */ React42.createElement(ScrollAreaPrimitive.Corner, null)
+  /* @__PURE__ */ React51.createElement(ScrollAreaPrimitive.Viewport, { className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]" }, children),
+  /* @__PURE__ */ React51.createElement(ScrollBar, { orientation }),
+  /* @__PURE__ */ React51.createElement(ScrollAreaPrimitive.Corner, null)
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React42.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React42.createElement(
+var ScrollBar = React51.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React51.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -6657,7 +6820,7 @@ var ScrollBar = React42.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React42.createElement(
+  /* @__PURE__ */ React51.createElement(
     ScrollAreaPrimitive.ScrollAreaThumb,
     {
       className: cn(
@@ -6670,7 +6833,7 @@ var ScrollBar = React42.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // elements/colorPicker/ColorPicker.tsx
-var import_react21 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var ColorPicker = ({
   containerProps,
   colorPickerProps,
@@ -6681,8 +6844,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = (0, import_react21.useState)(props.color);
-  (0, import_react21.useEffect)(() => {
+  const [selectedColor, setSelectedColor] = (0, import_react36.useState)(props.color);
+  (0, import_react36.useEffect)(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -6699,13 +6862,13 @@ var ColorPicker = ({
       props.handleChange(e);
     }
   };
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react21.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react21.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react21.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react36.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react36.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react36.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
       className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
     },
-    /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react36.default.createElement(
       "input",
       {
         disabled: preview,
@@ -6724,7 +6887,7 @@ var ColorPicker = ({
         ...colorPickerProps
       }
     )
-  ), /* @__PURE__ */ import_react21.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_react21.default.createElement(
+  ), /* @__PURE__ */ import_react36.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_react36.default.createElement(
     "input",
     {
       disabled: preview,
@@ -6743,7 +6906,7 @@ var ColorPicker = ({
       },
       ...textInputProps
     }
-  ))), !forceHideHelperText && /* @__PURE__ */ import_react21.default.createElement(
+  ))), !forceHideHelperText && /* @__PURE__ */ import_react36.default.createElement(
     "p",
     {
       className: cn(
@@ -6756,7 +6919,7 @@ var ColorPicker = ({
 };
 
 // elements/progressCircle/ProgressCircle.tsx
-var import_react22 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var size2config = {
   xs: { radius: 15, strokeWidth: 3 },
   sm: { radius: 19, strokeWidth: 4 },
@@ -6773,7 +6936,7 @@ function getLimitedValue(input) {
     return input;
   }
 }
-var ProgressCircle = import_react22.default.forwardRef((props, ref) => {
+var ProgressCircle = import_react37.default.forwardRef((props, ref) => {
   const {
     value: inputValue,
     size = "md",
@@ -6793,7 +6956,7 @@ var ProgressCircle = import_react22.default.forwardRef((props, ref) => {
   const circumference = normalizedRadius * 2 * Math.PI;
   const strokeDashoffset = value / 100 * circumference;
   const offset = circumference - strokeDashoffset;
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(
     "div",
     {
       ref,
@@ -6802,7 +6965,7 @@ var ProgressCircle = import_react22.default.forwardRef((props, ref) => {
         className
       )
     },
-    /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react37.default.createElement(
       "svg",
       {
         width: radius * 2,
@@ -6810,7 +6973,7 @@ var ProgressCircle = import_react22.default.forwardRef((props, ref) => {
         viewBox: `0 0 ${radius * 2} ${radius * 2}`,
         className: "hawa-rotate-180 hawa-transform"
       },
-      /* @__PURE__ */ import_react22.default.createElement(
+      /* @__PURE__ */ import_react37.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -6826,7 +6989,7 @@ var ProgressCircle = import_react22.default.forwardRef((props, ref) => {
           )
         }
       ),
-      value > 0 ? /* @__PURE__ */ import_react22.default.createElement(
+      value > 0 ? /* @__PURE__ */ import_react37.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -6846,24 +7009,24 @@ var ProgressCircle = import_react22.default.forwardRef((props, ref) => {
         }
       ) : null
     ),
-    /* @__PURE__ */ import_react22.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
+    /* @__PURE__ */ import_react37.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
   ));
 });
 ProgressCircle.displayName = "ProgressCircle";
 
 // elements/pagination/Pagination.tsx
-var import_react23 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_react_headless_pagination = require("react-headless-pagination");
 var Pagination = ({
   direction,
   totalPages,
   currentPage
 }) => {
-  const [page, setPage] = import_react23.default.useState(currentPage || 0);
+  const [page, setPage] = import_react38.default.useState(currentPage || 0);
   const handlePageChange = (page2) => {
     setPage(page2);
   };
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     import_react_headless_pagination.Pagination,
     {
       totalPages,
@@ -6875,10 +7038,10 @@ var Pagination = ({
       truncableText: "...",
       truncableClassName: "hawa-w-10 hawa-px-0.5 hawa-text-center"
     },
-    /* @__PURE__ */ import_react23.default.createElement(
+    /* @__PURE__ */ import_react38.default.createElement(
       import_react_headless_pagination.Pagination.PrevButton,
       {
-        as: /* @__PURE__ */ import_react23.default.createElement(
+        as: /* @__PURE__ */ import_react38.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -6888,7 +7051,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react23.default.createElement(
+          /* @__PURE__ */ import_react38.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -6901,7 +7064,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react23.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react38.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -6914,17 +7077,17 @@ var Pagination = ({
       },
       "Previous"
     ),
-    /* @__PURE__ */ import_react23.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react23.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react23.default.createElement(
+    /* @__PURE__ */ import_react38.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react38.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react38.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_react23.default.createElement(
+    /* @__PURE__ */ import_react38.default.createElement(
       import_react_headless_pagination.Pagination.NextButton,
       {
-        as: /* @__PURE__ */ import_react23.default.createElement(
+        as: /* @__PURE__ */ import_react38.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -6934,7 +7097,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react23.default.createElement(
+          /* @__PURE__ */ import_react38.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -6947,7 +7110,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react23.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react38.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -6964,14 +7127,14 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-var import_react27 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // icons/Emojis.tsx
-var import_react24 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // icons/InputIcons.tsx
-var import_react25 = __toESM(require("react"));
-var EyeIcon = (props) => /* @__PURE__ */ import_react25.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react25.default.createElement(
+var import_react40 = __toESM(require("react"));
+var EyeIcon = (props) => /* @__PURE__ */ import_react40.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react40.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6982,10 +7145,10 @@ var EyeIcon = (props) => /* @__PURE__ */ import_react25.default.createElement("d
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react25.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-  /* @__PURE__ */ import_react25.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+  /* @__PURE__ */ import_react40.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ import_react40.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react25.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react25.default.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react40.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react40.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6996,20 +7159,20 @@ var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react25.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react25.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-  /* @__PURE__ */ import_react25.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_react25.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_react25.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+  /* @__PURE__ */ import_react40.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ import_react40.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_react40.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_react40.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ));
 
 // icons/CommonIcons.tsx
-var import_react26 = __toESM(require("react"));
+var import_react41 = __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_react26.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7017,7 +7180,7 @@ var CheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react26.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7032,7 +7195,7 @@ var UncheckMark = ({ size = "default", className }) => {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7040,7 +7203,7 @@ var UncheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react26.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7078,7 +7241,7 @@ var PasswordStrengthIndicator = ({ strength }) => {
     strong: "80%",
     "very-strong": "100%"
   }[currentStrengthLevel];
-  return /* @__PURE__ */ import_react27.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: `${strengthColors[currentStrengthLevel]} hawa-h-full hawa-rounded hawa-transition-all hawa-duration-300`,
@@ -7090,16 +7253,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = (0, import_react27.useState)("");
-  const [isInputFocused, setIsInputFocused] = (0, import_react27.useState)(false);
-  const [currentStr, setCurrentStr] = (0, import_react27.useState)(0);
-  const [passwordVisible, setPasswordVisible] = (0, import_react27.useState)(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react27.useState)(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react27.useState)(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react27.useState)(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react27.useState)(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react42.useState)("");
+  const [isInputFocused, setIsInputFocused] = (0, import_react42.useState)(false);
+  const [currentStr, setCurrentStr] = (0, import_react42.useState)(0);
+  const [passwordVisible, setPasswordVisible] = (0, import_react42.useState)(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react42.useState)(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react42.useState)(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react42.useState)(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react42.useState)(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react42.useState)(false);
+  (0, import_react42.useEffect)(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7138,7 +7301,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_react27.default.createElement("div", null, /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement("div", null, /* @__PURE__ */ import_react42.default.createElement(
     Popover,
     {
       width: "trigger",
@@ -7147,7 +7310,7 @@ var PasswordInput = ({
       onOpenChange: setIsInputFocused,
       triggerProps: { asChild: true },
       contentProps: { onOpenAutoFocus: (e) => e.preventDefault() },
-      trigger: /* @__PURE__ */ import_react27.default.createElement(
+      trigger: /* @__PURE__ */ import_react42.default.createElement(
         "div",
         {
           onClick: (e) => {
@@ -7157,7 +7320,7 @@ var PasswordInput = ({
             }
           }
         },
-        /* @__PURE__ */ import_react27.default.createElement(
+        /* @__PURE__ */ import_react42.default.createElement(
           Input,
           {
             width: "full",
@@ -7167,27 +7330,27 @@ var PasswordInput = ({
             onFocus: handleInputFocus,
             onBlur: handleInputBlur,
             type: passwordVisible ? "text" : "password",
-            endIcon: /* @__PURE__ */ import_react27.default.createElement(
+            endIcon: /* @__PURE__ */ import_react42.default.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ import_react27.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react27.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ import_react42.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react42.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             )
           }
         )
       )
     },
-    /* @__PURE__ */ import_react27.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react27.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react27.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react27.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react27.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react27.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react27.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react27.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react27.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react27.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react27.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react27.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react27.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react27.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react27.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react27.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react27.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
-  ), /* @__PURE__ */ import_react27.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
+    /* @__PURE__ */ import_react42.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react42.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react42.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react42.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react42.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react42.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react42.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react42.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react42.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react42.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react42.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react42.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react42.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react42.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react42.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react42.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react42.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
+  ), /* @__PURE__ */ import_react42.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
 };
 
 // elements/slider/Slider.tsx
-var React50 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var Slider = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React50.createElement(
+var Slider = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
   SliderPrimitive.Root,
   {
     ref,
@@ -7197,13 +7360,13 @@ var Slider = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props
   },
-  /* @__PURE__ */ React50.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__ */ React50.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
-  /* @__PURE__ */ React50.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 React51 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var SimpleTable = ({
   columns,
@@ -7218,7 +7381,7 @@ var SimpleTable = ({
     columns,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)()
   });
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       className: cn(
@@ -7226,8 +7389,8 @@ var SimpleTable = ({
         classNames
       )
     },
-    props.isLoading ? /* @__PURE__ */ React51.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React51.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React51.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React51.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React51.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ React51.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,
@@ -7242,7 +7405,7 @@ var SimpleTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React51.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React51.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,
@@ -7250,7 +7413,7 @@ var SimpleTable = ({
       },
       row.getVisibleCells().map((cell) => {
         var _a2;
-        return /* @__PURE__ */ React51.createElement(
+        return /* @__PURE__ */ React60.createElement(
           TableCell,
           {
             dir: props.direction,
@@ -7266,7 +7429,7 @@ var SimpleTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React51.createElement(TableRow, null, /* @__PURE__ */ React51.createElement(
+    )) : /* @__PURE__ */ React60.createElement(TableRow, null, /* @__PURE__ */ React60.createElement(
       TableCell,
       {
         colSpan: columns.length,
@@ -7278,12 +7441,12 @@ var SimpleTable = ({
 };
 
 // elements/separator/Separator.tsx
-var React52 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 var Separator2 = ({
   className,
   orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ React52.createElement(
+}) => /* @__PURE__ */ React61.createElement(
   "div",
   {
     className: cn(
@@ -7296,12 +7459,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-var import_react28 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = (0, import_react28.useState)(0);
+  const [scrollPercentage, setScrollPercentage] = (0, import_react43.useState)(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -7312,7 +7475,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7321,7 +7484,7 @@ var ScrollIndicator = ({
       (_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     "div",
     {
       style: {
@@ -7337,39 +7500,11 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-var import_react30 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_prism_react_renderer = require("prism-react-renderer");
-
-// hooks/useClipboard.ts
-var import_react29 = require("react");
-function useClipboard({ timeout = 2e3 } = {}) {
-  const [error, setError] = (0, import_react29.useState)(null);
-  const [copied, setCopied] = (0, import_react29.useState)(false);
-  const [copyTimeout, setCopyTimeout] = (0, import_react29.useState)(null);
-  const handleCopyResult = (value) => {
-    clearTimeout(copyTimeout);
-    setCopyTimeout(setTimeout(() => setCopied(false), timeout));
-    setCopied(value);
-  };
-  const copy = (valueToCopy) => {
-    if ("clipboard" in navigator) {
-      navigator.clipboard.writeText(valueToCopy).then(() => handleCopyResult(true)).catch((err) => setError(err));
-    } else {
-      setError(new Error("useClipboard: navigator.clipboard is not supported"));
-    }
-  };
-  const reset = () => {
-    setCopied(false);
-    setError(null);
-    clearTimeout(copyTimeout);
-  };
-  return { copy, reset, error, copied };
-}
-
-// elements/codeBlock/CodeBlock.tsx
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 require("prismjs/components/prism-bash");
-var CopyIcon = () => /* @__PURE__ */ import_react30.default.createElement(
+var CopyIcon = () => /* @__PURE__ */ import_react44.default.createElement(
   "svg",
   {
     "aria-label": "Copy",
@@ -7382,8 +7517,8 @@ var CopyIcon = () => /* @__PURE__ */ import_react30.default.createElement(
     height: "1em",
     width: "1em"
   },
-  /* @__PURE__ */ import_react30.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ import_react30.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_react44.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react44.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,
@@ -7397,7 +7532,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = (0, import_react30.useState)(0);
+  const [selectedTab, setSelectedTab] = (0, import_react44.useState)(0);
   const theme = import_prism_react_renderer.themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -7405,7 +7540,7 @@ var CodeBlock = ({
     sm: "hawa-w-full hawa-max-w-sm",
     xs: "hawa-w-full hawa-max-w-xs"
   };
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       className: cn(
@@ -7414,7 +7549,7 @@ var CodeBlock = ({
         classNames == null ? void 0 : classNames.root
       )
     },
-    fileName && /* @__PURE__ */ import_react30.default.createElement(
+    fileName && /* @__PURE__ */ import_react44.default.createElement(
       "div",
       {
         className: cn(
@@ -7423,7 +7558,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.fileName
         )
       },
-      /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react44.default.createElement(
         "div",
         {
           className: cn(
@@ -7433,7 +7568,7 @@ var CodeBlock = ({
         fileName
       )
     ),
-    tabs && /* @__PURE__ */ import_react30.default.createElement(
+    tabs && /* @__PURE__ */ import_react44.default.createElement(
       "div",
       {
         className: cn(
@@ -7442,7 +7577,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.tabs
         )
       },
-      tabs.map((tab, i) => /* @__PURE__ */ import_react30.default.createElement(
+      tabs.map((tab, i) => /* @__PURE__ */ import_react44.default.createElement(
         "div",
         {
           key: i,
@@ -7451,7 +7586,7 @@ var CodeBlock = ({
             classNames == null ? void 0 : classNames.tab
           )
         },
-        /* @__PURE__ */ import_react30.default.createElement(
+        /* @__PURE__ */ import_react44.default.createElement(
           "div",
           {
             onClick: () => setSelectedTab(i),
@@ -7463,7 +7598,7 @@ var CodeBlock = ({
         )
       ))
     ),
-    /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       "div",
       {
         className: cn(
@@ -7473,22 +7608,22 @@ var CodeBlock = ({
           "hawa-overflow-y-auto"
         )
       },
-      /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react44.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_react30.default.createElement(
+        /* @__PURE__ */ import_react44.default.createElement(
           Tooltip,
           {
             open: clipboard.copied,
             side: "left",
-            content: /* @__PURE__ */ import_react30.default.createElement("div", null, "Copied!"),
+            content: /* @__PURE__ */ import_react44.default.createElement("div", null, "Copied!"),
             triggerProps: { asChild: true }
           },
-          /* @__PURE__ */ import_react30.default.createElement(
+          /* @__PURE__ */ import_react44.default.createElement(
             Button,
             {
               size: "smallIcon",
@@ -7496,18 +7631,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_react30.default.createElement(CopyIcon, null)
+            /* @__PURE__ */ import_react44.default.createElement(CopyIcon, null)
           )
         )
       ),
-      /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react44.default.createElement(
         import_prism_react_renderer.Highlight,
         {
           theme,
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react30.default.createElement(
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react44.default.createElement(
           "pre",
           {
             className: cn(
@@ -7517,7 +7652,7 @@ var CodeBlock = ({
               wrapText && "hawa-text-wrap"
             )
           },
-          tokens.map((line, i) => /* @__PURE__ */ import_react30.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react30.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react30.default.createElement("span", { key, ...getTokenProps({ token }) }))))
+          tokens.map((line, i) => /* @__PURE__ */ import_react44.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react44.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react44.default.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
       )
     )
@@ -7525,8 +7660,8 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-var import_react31 = __toESM(require("react"));
-var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_react45 = __toESM(require("react"));
+var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var Carousel = ({
   items,
   showArrows,
@@ -7536,13 +7671,13 @@ var Carousel = ({
   autoplayInterval = 3e3,
   ...props
 }) => {
-  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react2.default)({
     ...options,
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = (0, import_react31.useState)(0);
-  (0, import_react31.useEffect)(() => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react45.useState)(0);
+  (0, import_react45.useEffect)(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -7552,7 +7687,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -7564,17 +7699,17 @@ var Carousel = ({
         clearInterval(autoplayTimer);
     };
   }, [emblaApi, autoplay, autoplayInterval]);
-  const length = import_react31.default.Children.count(items);
+  const length = import_react45.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react31.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react45.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_react31.default.createElement(
+  ))))), /* @__PURE__ */ import_react45.default.createElement(
     Dots,
     {
       direction,
@@ -7582,7 +7717,7 @@ var Carousel = ({
       selectedIndex,
       onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
     }
-  ), showArrows && /* @__PURE__ */ import_react31.default.createElement(
+  ), showArrows && /* @__PURE__ */ import_react45.default.createElement(
     CarouselControls,
     {
       canScrollNext,
@@ -7599,7 +7734,7 @@ var Dots = ({
   direction
 }) => {
   const arr = new Array(itemsLength).fill(0);
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "div",
     {
       dir: direction,
@@ -7607,7 +7742,7 @@ var Dots = ({
     },
     arr.map((_, index) => {
       const selected = index === selectedIndex;
-      return /* @__PURE__ */ import_react31.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement(
         "div",
         {
           key: index,
@@ -7622,7 +7757,7 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react45.default.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
@@ -7633,7 +7768,7 @@ var CarouselControls = (props) => {
         props.canScrollPrev && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react31.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -7642,9 +7777,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_react31.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_react45.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_react31.default.createElement(
+  ), /* @__PURE__ */ import_react45.default.createElement(
     "button",
     {
       onClick: () => props.canScrollNext && props.onNext(),
@@ -7655,7 +7790,7 @@ var CarouselControls = (props) => {
         props.canScrollNext && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react31.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -7664,19 +7799,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_react31.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_react45.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_react32 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var Count = (props) => {
-  return /* @__PURE__ */ import_react32.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react32.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react32.default.createElement("div", { className: "hawa-text-sm" }, props.count));
+  return /* @__PURE__ */ import_react46.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react46.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react46.default.createElement("div", { className: "hawa-text-sm" }, props.count));
 };
 
 // elements/toast/Toast.tsx
-var React57 = __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)(
@@ -7704,7 +7839,7 @@ var sizeStyles = {
   sm: "hawa-text-xs"
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React57.createElement(
+var ToastViewport = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -7716,8 +7851,8 @@ var ToastViewport = React57.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React57.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React57.createElement(
+var Toast = React66.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -7732,8 +7867,8 @@ var Toast = React57.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React57.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React57.createElement(
+var ToastAction = React66.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React66.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -7751,7 +7886,7 @@ var ToastAction = React57.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React57.createElement(
+var ToastClose = React66.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -7765,7 +7900,7 @@ var ToastClose = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React57.createElement(
+  /* @__PURE__ */ React66.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -7774,7 +7909,7 @@ var ToastClose = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7785,7 +7920,7 @@ var ToastClose = React57.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React57.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React57.createElement(
+var ToastTitle = React66.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -7798,7 +7933,7 @@ var ToastTitle = React57.forwardRef(({ className, size = "default", ...props },
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React57.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React57.createElement(
+var ToastDescription = React66.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React66.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -7813,11 +7948,11 @@ var ToastDescription = React57.forwardRef(({ className, size = "default", ...pro
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // elements/toaster/Toaster.tsx
-var import_react33 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 function Toaster(props) {
   var _a;
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ import_react33.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
+  return /* @__PURE__ */ import_react47.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
     id,
     title,
     description,
@@ -7825,7 +7960,7 @@ function Toaster(props) {
     action,
     ...toastProps
   }) {
-    return /* @__PURE__ */ import_react33.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react33.default.createElement(
+    return /* @__PURE__ */ import_react47.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react47.default.createElement(
       "div",
       {
         className: cn(
@@ -7833,9 +7968,9 @@ function Toaster(props) {
           action && "hawa-justify-between"
         )
       },
-      /* @__PURE__ */ import_react33.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react33.default.createElement(ToastClose, null)),
-      /* @__PURE__ */ import_react33.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
-      /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react47.default.createElement(ToastClose, null)),
+      /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
+      /* @__PURE__ */ import_react47.default.createElement(
         "div",
         {
           className: cn(
@@ -7843,11 +7978,11 @@ function Toaster(props) {
             { "hawa-p-4": size === "default", "hawa-p-2": size === "sm" }
           )
         },
-        /* @__PURE__ */ import_react33.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react33.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react33.default.createElement(ToastDescription, { size }, description)),
-        action && /* @__PURE__ */ import_react33.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
+        /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react47.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react47.default.createElement(ToastDescription, { size }, description)),
+        action && /* @__PURE__ */ import_react47.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
       )
     ));
-  }), /* @__PURE__ */ import_react33.default.createElement(
+  }), /* @__PURE__ */ import_react47.default.createElement(
     ToastViewport,
     {
       className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
@@ -7856,20 +7991,20 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-var import_react34 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = (0, import_react34.useState)(false);
-  const popUpRef = (0, import_react34.useRef)(null);
+  const [closed, setClosed] = (0, import_react48.useState)(false);
+  const popUpRef = (0, import_react48.useRef)(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"
   };
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       className: cn(
@@ -7878,7 +8013,7 @@ var DestroyableCard = ({
       ),
       ref: popUpRef
     },
-    /* @__PURE__ */ import_react34.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       Card,
       {
         className: cn(
@@ -7887,7 +8022,7 @@ var DestroyableCard = ({
         ),
         dir: direction
       },
-      /* @__PURE__ */ import_react34.default.createElement(
+      /* @__PURE__ */ import_react48.default.createElement(
         "button",
         {
           type: "button",
@@ -7906,7 +8041,7 @@ var DestroyableCard = ({
             }, 200);
           }
         },
-        /* @__PURE__ */ import_react34.default.createElement(
+        /* @__PURE__ */ import_react48.default.createElement(
           "svg",
           {
             "aria-hidden": "true",
@@ -7914,7 +8049,7 @@ var DestroyableCard = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ import_react34.default.createElement(
+          /* @__PURE__ */ import_react48.default.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -7924,13 +8059,13 @@ var DestroyableCard = ({
           )
         )
       ),
-      /* @__PURE__ */ import_react34.default.createElement(CardContent, { headless: true }, props.children)
+      /* @__PURE__ */ import_react48.default.createElement(CardContent, { headless: true }, props.children)
     )
   );
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-var import_react35 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -7938,13 +8073,13 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = (0, import_react35.useState)(props.currentColorMode);
-  const [language, setLanguage] = (0, import_react35.useState)(props.currentLanguage);
+  const [color, setColor] = (0, import_react49.useState)(props.currentColorMode);
+  const [language, setLanguage] = (0, import_react49.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_react35.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react49.default.createElement(
     Radio,
     {
       name: "language",
@@ -7962,7 +8097,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react49.default.createElement(
     Radio,
     {
       name: "theme",
@@ -7978,7 +8113,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ import_react35.default.createElement(
+          label: /* @__PURE__ */ import_react49.default.createElement(
             "svg",
             {
               width: "15",
@@ -7988,7 +8123,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_react35.default.createElement(
+            /* @__PURE__ */ import_react49.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",
@@ -7999,7 +8134,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ import_react35.default.createElement(
+          label: /* @__PURE__ */ import_react49.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -8010,7 +8145,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_react35.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ import_react49.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -8019,14 +8154,14 @@ var InterfaceSettings = ({
 };
 
 // elements/phoneMockup/PhoneMockup.tsx
-var import_react36 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var PhoneMockup = ({
   children,
   upperOverlayGradiant,
   lowerOverlayGradiant,
   phone,
   hideButtons
-}) => /* @__PURE__ */ import_react36.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_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.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_react36.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_react36.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_react36.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_react36.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_react36.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_react36.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_react50.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_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.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_react50.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_react50.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_react50.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_react50.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_react50.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_react50.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,
@@ -8120,6 +8255,8 @@ var PhoneMockup = ({
   PinInput,
   Popover,
   PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
   PopoverTrigger,
   Progress,
   ProgressCircle,