@sikka/hawa 0.36.2-next → 0.37.1-next

package/dist/elements/index.js

@@ -37,6 +37,7 @@ __export(elements_exports, {
   AccordionRoot: () => AccordionRoot,
   AccordionTrigger: () => AccordionTrigger,
   Alert: () => Alert,
+  AppCommand: () => AppCommand,
   AppStores: () => AppStores,
   Avatar: () => Avatar,
   BackToTop: () => BackToTop,
@@ -100,6 +101,7 @@ __export(elements_exports, {
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   FileDropzone: () => FileDropzone,
   FileUploader: () => FileUploader,
+  FullCommand: () => FullCommand,
   Input: () => Input,
   InterfaceSettings: () => InterfaceSettings,
   Label: () => Label2,
@@ -236,17 +238,19 @@ var Card = React.forwardRef(
     );
   }
 );
-var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    ref,
-    className: cn(
-      "hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6",
-      className
-    ),
-    ...props
-  }
-));
+var CardHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6",
+        className
+      ),
+      ...props
+    }
+  ), props.actions && /* @__PURE__ */ React.createElement("div", { className: "hawa-p-6" }, props.actions))
+);
 var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "h3",
   {
@@ -3640,6 +3644,7 @@ var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
 
 // elements/command/Command.tsx
 var React27 = __toESM(require("react"));
+var import_react_dialog = require("@radix-ui/react-dialog");
 var import_cmdk = require("cmdk");
 var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   import_cmdk.Command,
@@ -3653,7 +3658,7 @@ var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ React27.createElement(Dialog, { ...props }, /* @__PURE__ */ React27.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React27.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
+  return /* @__PURE__ */ React27.createElement(import_react_dialog.Dialog, { ...props }, /* @__PURE__ */ React27.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React27.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
 };
 var CommandInput = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   "div",
@@ -3748,13 +3753,47 @@ var CommandShortcut = ({
     "span",
     {
       className: cn(
-        "hawa-ml-auto hawa-text-xs hawa-tracking-widest hawa-text-muted-foreground",
+        "hawa-ms-auto hawa-text-xs hawa-tracking-widest hawa-text-muted-foreground",
         className
       ),
       ...props
     }
   );
 };
+var FullCommand = ({ items, direction = "ltr", texts }) => {
+  return /* @__PURE__ */ React27.createElement(
+    Command,
+    {
+      dir: direction,
+      className: "hawa-rounded-lg hawa-border hawa-shadow-md !hawa-h-full"
+    },
+    /* @__PURE__ */ React27.createElement(
+      CommandInput,
+      {
+        placeholder: (texts == null ? void 0 : texts.searchPlaceholder) || "Type a command or search..."
+      }
+    ),
+    /* @__PURE__ */ React27.createElement(CommandList, null, /* @__PURE__ */ React27.createElement(CommandEmpty, null, (texts == null ? void 0 : texts.emptyText) || "No results found."), items.map((item, index) => {
+      var _a;
+      if (item.type === "group") {
+        return /* @__PURE__ */ React27.createElement(CommandGroup, { heading: item.heading, key: index }, (_a = item.items) == null ? void 0 : _a.map((subItem, subIndex) => /* @__PURE__ */ React27.createElement(CommandItem, { key: subIndex, onSelect: subItem.action }, /* @__PURE__ */ React27.createElement(subItem.icon, { className: "hawa-icon hawa-me-2" }), /* @__PURE__ */ React27.createElement("span", null, subItem.text), subItem.shortcut && /* @__PURE__ */ React27.createElement(CommandShortcut, null, subItem.shortcut))));
+      } else if (item.type === "separator") {
+        return /* @__PURE__ */ React27.createElement(CommandSeparator, { key: index });
+      }
+      return null;
+    }))
+  );
+};
+var AppCommand = ({ commandProps, dialogProps }) => {
+  return /* @__PURE__ */ React27.createElement(import_react_dialog.Dialog, { ...dialogProps }, /* @__PURE__ */ React27.createElement(
+    DialogContent,
+    {
+      hideCloseButton: true,
+      className: "hawa-overflow-hidden !hawa-p-0 hawa-shadow-l "
+    },
+    /* @__PURE__ */ React27.createElement(FullCommand, { ...commandProps })
+  ));
+};
 CommandShortcut.displayName = "CommandShortcut";
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
@@ -4247,7 +4286,7 @@ var SortButton = (props) => {
 };
 
 // elements/tabs/Tabs.tsx
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react16 = require("react");
@@ -4356,6 +4395,9 @@ var useMeasureDirty = (ref) => {
 // hooks/useClickOutside.ts
 var import_react31 = require("react");
 
+// hooks/useShortcuts.ts
+var import_react32 = require("react");
+
 // elements/tabs/Tabs.tsx
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_tailwind_variants = require("tailwind-variants");
@@ -4415,14 +4457,137 @@ var FloatBox = ({
   );
 };
 
+// elements/scrollArea/ScrollArea.tsx
+var React41 = __toESM(require("react"));
+var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
+var ScrollArea = React41.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React41.useRef(null);
+  const isDragging = React41.useRef(false);
+  const startPos = React41.useRef({ x: 0, y: 0 });
+  const scrollPos = React41.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React41.useState(false);
+  const [showRightFade, setShowRightFade] = React41.useState(false);
+  const checkOverflow = () => {
+    if (scrollAreaRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
+    }
+  };
+  const onMouseDown = (e) => {
+    isDragging.current = true;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    if (scrollAreaRef.current) {
+      scrollPos.current = {
+        top: scrollAreaRef.current.scrollTop,
+        left: scrollAreaRef.current.scrollLeft
+      };
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseMove = (e) => {
+    if (!isDragging.current || !scrollAreaRef.current)
+      return;
+    const dx = e.clientX - startPos.current.x;
+    const dy = e.clientY - startPos.current.y;
+    if (orientation === "vertical") {
+      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
+    } else {
+      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
+      checkOverflow();
+    }
+  };
+  const onMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  React41.useEffect(() => {
+    checkOverflow();
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
+      window.addEventListener("resize", checkOverflow);
+    }
+    return () => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
+      }
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ React41.createElement(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      className: cn("hawa-relative hawa-overflow-hidden", className),
+      ...props
+    },
+    /* @__PURE__ */ React41.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
+          showLeftFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React41.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
+          showRightFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React41.createElement(
+      ScrollAreaPrimitive.Viewport,
+      {
+        ref: scrollAreaRef,
+        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
+        onMouseDown
+      },
+      children
+    ),
+    /* @__PURE__ */ React41.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React41.createElement(ScrollAreaPrimitive.Corner, null)
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React41.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React41.createElement(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
+      orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
+      orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React41.createElement(
+    ScrollAreaPrimitive.ScrollAreaThumb,
+    {
+      className: cn(
+        "hawa-relative hawa-rounded-full hawa-bg-border",
+        orientation === "vertical" && "hawa-flex-1"
+      )
+    }
+  )
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
 // elements/tabs/Tabs.tsx
 var tabsListVariant = (0, import_tailwind_variants.tv)({
   base: "",
   variants: {
     variant: {
-      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      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"
+      default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit 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-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
     },
     orientation: { horizontal: "", vertical: "" }
   },
@@ -4474,8 +4639,8 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React41.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React41.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React41.createElement(
+var TabsContext = React42.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React42.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React42.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -4486,28 +4651,59 @@ var Tabs = React41.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React41.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React42.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-var TabsList = React41.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React41.useContext(TabsContext);
-  return /* @__PURE__ */ React41.createElement(
-    TabsPrimitive.List,
-    {
-      ref,
-      className: cn(
-        tabsListVariant({ variant, orientation }),
-        orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
-        className
-      ),
-      ...props
-    }
+var TabsList = React42.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React42.useContext(TabsContext);
+  const [size, setSize] = React42.useState(
+    typeof window !== "undefined" && window.innerWidth || 1200
   );
+  React42.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const resize = () => {
+        setSize(window.innerWidth);
+      };
+      resize();
+      window.addEventListener("resize", resize);
+      return () => {
+        window.removeEventListener("resize", resize);
+      };
+    }
+  }, []);
+  if ((props.scrollable || size < 768) && orientation === "horizontal") {
+    return /* @__PURE__ */ React42.createElement(ScrollArea, { orientation: "horizontal" }, /* @__PURE__ */ React42.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          "hawa-flex-row hawa-flex-nowrap",
+          className
+        ),
+        ...props
+      }
+    ));
+  } else {
+    return /* @__PURE__ */ React42.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
+          "hawa-flex-wrap",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 });
-var TabsTrigger = React41.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React41.useContext(TabsContext);
-  const tabTriggerRef = React41.useRef(null);
+var TabsTrigger = React42.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React42.useContext(TabsContext);
+  const tabTriggerRef = React42.useRef(null);
   const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     TabsPrimitive.Trigger,
     {
       ref: tabTriggerRef,
@@ -4519,8 +4715,8 @@ var TabsTrigger = React41.forwardRef(({ className, chipProps, ...props }, ref) =
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React41.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React41.createElement(
+    chipProps && /* @__PURE__ */ React42.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React42.createElement(
       FloatBox,
       {
         withArrow: true,
@@ -4533,7 +4729,7 @@ var TabsTrigger = React41.forwardRef(({ className, chipProps, ...props }, ref) =
     )
   );
 });
-var TabsContent = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React41.createElement(
+var TabsContent = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -4550,7 +4746,7 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // elements/select/Select.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __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"));
@@ -4561,10 +4757,10 @@ var Select = ({
 }) => {
   const NoOption = () => {
     var _a, _b;
-    return /* @__PURE__ */ import_react32.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
+    return /* @__PURE__ */ import_react33.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_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4577,7 +4773,7 @@ var Select = ({
     );
   };
   const Option = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       "div",
       {
         ref: innerRef,
@@ -4598,7 +4794,7 @@ var Select = ({
     ...menuProps
   }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       "div",
       {
         className: cn(
@@ -4612,7 +4808,11 @@ var Select = ({
       children
     );
   };
-  return /* @__PURE__ */ import_react32.default.createElement(
+  let phoneCodeStyles = "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px]";
+  let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm";
+  let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
+  let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
+  return /* @__PURE__ */ import_react33.default.createElement(
     "div",
     {
       className: cn(
@@ -4620,10 +4820,10 @@ var Select = ({
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ import_react32.default.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ import_react32.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
+    props.label && /* @__PURE__ */ import_react33.default.createElement(Label2, { ...labelProps }, props.label),
+    props.isLoading ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ import_react32.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(
         import_react_select.default,
         {
           noOptionsMessage: NoOption,
@@ -4633,26 +4833,22 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded ",
-              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
-              "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
+              selectContainerStyles,
+              props.phoneCode && phoneCodeStyles,
               props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
               props.isMulti && "hawa-ps-0 "
             ),
-            placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
+            placeholder: () => selectPlaceholderStyles,
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
+              selectIndicatorContainerStyles,
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
-          components: props.hideIndicator ? {
-            Option,
-            Menu,
-            IndicatorsContainer: () => null
-          } : {
+          autoFocus: false,
+          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
             Option,
             Menu,
             // Control: (e) => (
@@ -4661,7 +4857,7 @@ var Select = ({
             //     {...e}
             //   />
             // ),
-            ValueContainer: (e) => /* @__PURE__ */ import_react32.default.createElement(
+            ValueContainer: (e) => /* @__PURE__ */ import_react33.default.createElement(
               "div",
               {
                 className: cn(
@@ -4671,13 +4867,10 @@ var Select = ({
                 ...e
               }
             ),
-            MultiValueContainer: (e) => /* @__PURE__ */ import_react32.default.createElement(
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react33.default.createElement(
               "div",
               {
-                className: cn(
-                  // e.className,
-                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
-                ),
+                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
                 ...e
               }
             )
@@ -4693,7 +4886,7 @@ var Select = ({
           isSearchable: props.isSearchable
         }
       )
-    ) : /* @__PURE__ */ import_react32.default.createElement(
+    ) : /* @__PURE__ */ import_react33.default.createElement(
       import_creatable.default,
       {
         formatCreateLabel: (inputValue) => {
@@ -4723,7 +4916,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react32.default.createElement(
+    !props.hideHelperText && /* @__PURE__ */ import_react33.default.createElement(
       "p",
       {
         className: cn(
@@ -4737,15 +4930,15 @@ var Select = ({
 };
 
 // elements/switch/Switch.tsx
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var Switch = React43.forwardRef(
+var Switch = React44.forwardRef(
   ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
-    const [parentDirection, setParentDirection] = React43.useState(
+    const [parentDirection, setParentDirection] = React44.useState(
       null
     );
-    const parentRef = React43.useRef(null);
-    React43.useEffect(() => {
+    const parentRef = React44.useRef(null);
+    React44.useEffect(() => {
       var _a;
       const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
       if (parentNode) {
@@ -4773,13 +4966,13 @@ var Switch = React43.forwardRef(
       full: "hawa-rounded-full",
       inherit: "hawa-rounded-inner"
     };
-    return /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React44.createElement(
       "div",
       {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
       },
-      /* @__PURE__ */ React43.createElement(
+      /* @__PURE__ */ React44.createElement(
         SwitchPrimitives.Root,
         {
           className: cn(
@@ -4793,7 +4986,7 @@ var Switch = React43.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React43.createElement(
+        /* @__PURE__ */ React44.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -4807,14 +5000,14 @@ var Switch = React43.forwardRef(
           }
         )
       ),
-      label && /* @__PURE__ */ React43.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+      label && /* @__PURE__ */ React44.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
     );
   }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // elements/checkbox/Checkbox.tsx
-var React44 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var Checkbox = ({
   id,
@@ -4834,7 +5027,7 @@ var Checkbox = ({
     lg: 0.9,
     xl: 1
   };
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     "div",
     {
       className: cn(
@@ -4842,7 +5035,7 @@ var Checkbox = ({
         size === "default" ? "hawa-items-top" : "hawa-items-center"
       )
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React45.createElement(
       CheckboxElement,
       {
         ...props,
@@ -4852,7 +5045,7 @@ var Checkbox = ({
         id
       }
     ),
-    (label || helperText) && /* @__PURE__ */ React44.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React44.createElement(
+    (label || helperText) && /* @__PURE__ */ React45.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React45.createElement(
       "label",
       {
         htmlFor: id,
@@ -4866,7 +5059,7 @@ var Checkbox = ({
         }
       },
       label
-    ), sublabel && /* @__PURE__ */ React44.createElement(
+    ), sublabel && /* @__PURE__ */ React45.createElement(
       "label",
       {
         htmlFor: id,
@@ -4876,7 +5069,7 @@ var Checkbox = ({
         )
       },
       sublabel
-    ), helperText && !disabled && /* @__PURE__ */ React44.createElement(
+    ), helperText && !disabled && /* @__PURE__ */ React45.createElement(
       "label",
       {
         htmlFor: id,
@@ -4889,7 +5082,7 @@ var Checkbox = ({
     ))
   );
 };
-var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
   let checkboxRadius = {
     none: "hawa-rounded-none",
     inherit: "hawa-rounded-sm",
@@ -4911,7 +5104,7 @@ var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default"
     lg: "1em",
     xl: "1.25em"
   };
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     CheckboxPrimitive.Root,
     {
       ref,
@@ -4923,14 +5116,14 @@ var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default"
       ),
       ...props
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React45.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn(
           "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
         )
       },
-      /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React45.createElement(
         "svg",
         {
           "aria-label": "Check Mark",
@@ -4941,7 +5134,7 @@ var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default"
           height: checkboxIndicatorSizes[size],
           width: checkboxIndicatorSizes[size]
         },
-        /* @__PURE__ */ React44.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+        /* @__PURE__ */ React45.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
       ),
       " "
     )
@@ -4950,9 +5143,9 @@ var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/progress/Progress.tsx
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React45.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React45.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React45.createElement(
+var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React46.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React46.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React46.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -4962,7 +5155,7 @@ var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React45.createElement(
+  /* @__PURE__ */ React46.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",
@@ -4973,7 +5166,7 @@ var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // elements/breadcrumb/Breadcrumb.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var Breadcrumb = ({
   breadcrumbLinks,
   separator = ">",
@@ -4984,7 +5177,7 @@ var Breadcrumb = ({
     small: "hawa-text-sm",
     xs: "hawa-text-xs"
   };
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
       className: cn(
@@ -4992,13 +5185,13 @@ var Breadcrumb = ({
         textStyles[size]
       )
     },
-    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react33.default.createElement(
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react34.default.createElement(
       "div",
       {
         key: index,
         className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react34.default.createElement(
         "a",
         {
           href: singleBreadcrumbLink.href,
@@ -5006,49 +5199,49 @@ var Breadcrumb = ({
         },
         singleBreadcrumbLink.label
       ),
-      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react33.default.createElement("div", null, separator) : /* @__PURE__ */ import_react33.default.createElement("div", null, separator) : null
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react34.default.createElement("div", null, separator) : /* @__PURE__ */ import_react34.default.createElement("div", null, separator) : null
     ))
   );
 };
 
 // elements/appStores/AppStores.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var AppStores = (props) => {
-  return /* @__PURE__ */ import_react34.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react34.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react34.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_react34.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react34.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ import_react35.default.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react35.default.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ import_react35.default.createElement(
     "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_react34.default.createElement("div", null, /* @__PURE__ */ import_react34.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react34.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react34.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_react34.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react34.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react34.default.createElement(
+  ))), /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mt-3 hawa-flex hawa-h-14 hawa-w-48 hawa-items-center hawa-justify-center hawa-rounded-lg hawa-border hawa-border-black hawa-bg-black hawa-text-white dark:hawa-bg-white dark:hawa-text-black" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ import_react35.default.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ import_react35.default.createElement(
     "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_react34.default.createElement(
+  ), /* @__PURE__ */ import_react35.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_react34.default.createElement(
+  ), /* @__PURE__ */ import_react35.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_react34.default.createElement(
+  ), /* @__PURE__ */ import_react35.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_react34.default.createElement("div", null, /* @__PURE__ */ import_react34.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react34.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
+  ))), /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ import_react35.default.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
 };
 
 // elements/badge/Badge.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var Badge = ({
   anchor,
   position = "right",
@@ -5056,14 +5249,14 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = (0, import_react35.useState)(null);
-  const indicatorRef = (0, import_react35.useRef)(null);
+  const [badgePosition, setBadgePosition] = (0, import_react36.useState)(null);
+  const indicatorRef = (0, import_react36.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_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const handlePositioning = () => {
       var _a;
       if (anchor.current && indicatorRef.current) {
@@ -5086,7 +5279,7 @@ var Badge = ({
       window.removeEventListener("resize", handlePositioning);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react35.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       style: {
@@ -5111,8 +5304,8 @@ var BadgedComponent = ({
   size,
   text
 }) => {
-  const ref = (0, import_react35.useRef)(null);
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react35.default.createElement(
+  const ref = (0, import_react36.useRef)(null);
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ import_react36.default.createElement(
     Badge,
     {
       size,
@@ -5125,7 +5318,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 
 // countries.ts
 var countries = [
@@ -6827,9 +7020,9 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
-  const [phoneNumber, setPhoneNumber] = (0, import_react36.useState)("");
-  const [countryCode, setCountryCode] = (0, import_react36.useState)(props.preferredCountry);
-  const inputRef = (0, import_react36.useRef)(null);
+  const [phoneNumber, setPhoneNumber] = (0, import_react37.useState)("");
+  const [countryCode, setCountryCode] = (0, import_react37.useState)(props.preferredCountry);
+  const inputRef = (0, import_react37.useRef)(null);
   const handleInputChange = (e) => {
     console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
@@ -6843,7 +7036,7 @@ var PhoneInput = ({
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ import_react36.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react36.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react36.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react37.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react37.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react37.default.createElement(
     Select,
     {
       phoneCode: true,
@@ -6859,7 +7052,7 @@ var PhoneInput = ({
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry
     }
-  ), /* @__PURE__ */ import_react36.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_react36.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react37.default.createElement(
     "input",
     {
       type: "tel",
@@ -6873,7 +7066,7 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ import_react36.default.createElement(
+  ))), /* @__PURE__ */ import_react37.default.createElement(
     "p",
     {
       className: cn(
@@ -6886,7 +7079,7 @@ var PhoneInput = ({
 };
 
 // elements/pinInput/PinInput.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var PinInput = ({
   label,
   icon,
@@ -6896,7 +7089,7 @@ var PinInput = ({
   inputProps,
   ...props
 }) => {
-  const [pin, setPin] = (0, import_react37.useState)(Array.from(Array(digits)));
+  const [pin, setPin] = (0, import_react38.useState)(Array.from(Array(digits)));
   const handleKeyDown = (e, index) => {
     let backTo = 0;
     if (e.key === "Backspace") {
@@ -6905,7 +7098,7 @@ var PinInput = ({
       previousInput == null ? void 0 : previousInput.focus();
     }
   };
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     let unfilled = pin.includes(void 0);
     if (!unfilled && getPins) {
       getPins(pin);
@@ -6930,13 +7123,13 @@ var PinInput = ({
       }
     }
   };
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react38.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_react37.default.createElement(
+    pin.map((value, index) => /* @__PURE__ */ import_react38.default.createElement(
       "input",
       {
         key: index,
@@ -6956,7 +7149,7 @@ var PinInput = ({
         ...inputProps
       }
     ))
-  ), /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(
     "p",
     {
       className: cn(
@@ -6969,56 +7162,16 @@ var PinInput = ({
 };
 
 // elements/stopPropagationWrapper/StopPropagationWrapper.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ import_react38.default.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ import_react39.default.createElement("div", { onClick: handleClick }, props.children);
 };
 
-// elements/scrollArea/ScrollArea.tsx
-var React52 = __toESM(require("react"));
-var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
-var ScrollArea = React52.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React52.createElement(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("hawa-relative hawa-overflow-hidden", className),
-    ...props
-  },
-  /* @__PURE__ */ React52.createElement(ScrollAreaPrimitive.Viewport, { className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]" }, children),
-  /* @__PURE__ */ React52.createElement(ScrollBar, { orientation }),
-  /* @__PURE__ */ React52.createElement(ScrollAreaPrimitive.Corner, null)
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React52.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React52.createElement(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
-      orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
-      orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React52.createElement(
-    ScrollAreaPrimitive.ScrollAreaThumb,
-    {
-      className: cn(
-        "hawa-relative hawa-rounded-full hawa-bg-border",
-        orientation === "vertical" && "hawa-flex-1"
-      )
-    }
-  )
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
 // elements/colorPicker/ColorPicker.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var ColorPicker = ({
   containerProps,
   colorPickerProps,
@@ -7029,8 +7182,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = (0, import_react39.useState)(props.color);
-  (0, import_react39.useEffect)(() => {
+  const [selectedColor, setSelectedColor] = (0, import_react40.useState)(props.color);
+  (0, import_react40.useEffect)(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -7047,13 +7200,13 @@ var ColorPicker = ({
       props.handleChange(e);
     }
   };
-  return /* @__PURE__ */ import_react39.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react39.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react39.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react39.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react40.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react40.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react40.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react40.default.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
       className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
     },
-    /* @__PURE__ */ import_react39.default.createElement(
+    /* @__PURE__ */ import_react40.default.createElement(
       "input",
       {
         disabled: preview,
@@ -7072,7 +7225,7 @@ var ColorPicker = ({
         ...colorPickerProps
       }
     )
-  ), /* @__PURE__ */ import_react39.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_react39.default.createElement(
+  ), /* @__PURE__ */ import_react40.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_react40.default.createElement(
     "input",
     {
       disabled: preview,
@@ -7091,7 +7244,7 @@ var ColorPicker = ({
       },
       ...textInputProps
     }
-  ))), !forceHideHelperText && /* @__PURE__ */ import_react39.default.createElement(
+  ))), !forceHideHelperText && /* @__PURE__ */ import_react40.default.createElement(
     "p",
     {
       className: cn(
@@ -7104,7 +7257,7 @@ var ColorPicker = ({
 };
 
 // elements/progressCircle/ProgressCircle.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var size2config = {
   xs: { radius: 15, strokeWidth: 3 },
   sm: { radius: 19, strokeWidth: 4 },
@@ -7121,7 +7274,7 @@ function getLimitedValue(input) {
     return input;
   }
 }
-var ProgressCircle = import_react40.default.forwardRef((props, ref) => {
+var ProgressCircle = import_react41.default.forwardRef((props, ref) => {
   const {
     value: inputValue,
     size = "md",
@@ -7141,7 +7294,7 @@ var ProgressCircle = import_react40.default.forwardRef((props, ref) => {
   const circumference = normalizedRadius * 2 * Math.PI;
   const strokeDashoffset = value / 100 * circumference;
   const offset = circumference - strokeDashoffset;
-  return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
     "div",
     {
       ref,
@@ -7150,7 +7303,7 @@ var ProgressCircle = import_react40.default.forwardRef((props, ref) => {
         className
       )
     },
-    /* @__PURE__ */ import_react40.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(
       "svg",
       {
         width: radius * 2,
@@ -7158,7 +7311,7 @@ var ProgressCircle = import_react40.default.forwardRef((props, ref) => {
         viewBox: `0 0 ${radius * 2} ${radius * 2}`,
         className: "hawa-rotate-180 hawa-transform"
       },
-      /* @__PURE__ */ import_react40.default.createElement(
+      /* @__PURE__ */ import_react41.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7174,7 +7327,7 @@ var ProgressCircle = import_react40.default.forwardRef((props, ref) => {
           )
         }
       ),
-      value > 0 ? /* @__PURE__ */ import_react40.default.createElement(
+      value > 0 ? /* @__PURE__ */ import_react41.default.createElement(
         "circle",
         {
           r: normalizedRadius,
@@ -7194,24 +7347,24 @@ var ProgressCircle = import_react40.default.forwardRef((props, ref) => {
         }
       ) : null
     ),
-    /* @__PURE__ */ import_react40.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
+    /* @__PURE__ */ import_react41.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
   ));
 });
 ProgressCircle.displayName = "ProgressCircle";
 
 // elements/pagination/Pagination.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var import_react_headless_pagination = require("react-headless-pagination");
 var Pagination = ({
   direction,
   totalPages,
   currentPage
 }) => {
-  const [page, setPage] = import_react41.default.useState(currentPage || 0);
+  const [page, setPage] = import_react42.default.useState(currentPage || 0);
   const handlePageChange = (page2) => {
     setPage(page2);
   };
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     import_react_headless_pagination.Pagination,
     {
       totalPages,
@@ -7223,10 +7376,10 @@ var Pagination = ({
       truncableText: "...",
       truncableClassName: "hawa-w-10 hawa-px-0.5 hawa-text-center"
     },
-    /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(
       import_react_headless_pagination.Pagination.PrevButton,
       {
-        as: /* @__PURE__ */ import_react41.default.createElement(
+        as: /* @__PURE__ */ import_react42.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7236,7 +7389,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react41.default.createElement(
+          /* @__PURE__ */ import_react42.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7249,7 +7402,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react41.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react42.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7262,17 +7415,17 @@ var Pagination = ({
       },
       "Previous"
     ),
-    /* @__PURE__ */ import_react41.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react41.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement("nav", { className: "hawa-flex hawa-flex-grow hawa-justify-center" }, /* @__PURE__ */ import_react42.default.createElement("ul", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ import_react42.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_react41.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(
       import_react_headless_pagination.Pagination.NextButton,
       {
-        as: /* @__PURE__ */ import_react41.default.createElement(
+        as: /* @__PURE__ */ import_react42.default.createElement(
           "button",
           {
             "aria-label": "Previous Table Page",
@@ -7282,7 +7435,7 @@ var Pagination = ({
             ),
             style: { minWidth: 36 }
           },
-          /* @__PURE__ */ import_react41.default.createElement(
+          /* @__PURE__ */ import_react42.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -7295,7 +7448,7 @@ var Pagination = ({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             },
-            /* @__PURE__ */ import_react41.default.createElement("path", { d: "m15 18-6-6 6-6" })
+            /* @__PURE__ */ import_react42.default.createElement("path", { d: "m15 18-6-6 6-6" })
           )
         ),
         className: cn(
@@ -7312,14 +7465,14 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // icons/Emojis.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 
 // icons/InputIcons.tsx
-var import_react43 = __toESM(require("react"));
-var EyeIcon = (props) => /* @__PURE__ */ import_react43.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react43.default.createElement(
+var import_react44 = __toESM(require("react"));
+var EyeIcon = (props) => /* @__PURE__ */ import_react44.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react44.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7330,10 +7483,10 @@ var EyeIcon = (props) => /* @__PURE__ */ import_react43.default.createElement("d
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react43.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-  /* @__PURE__ */ import_react43.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+  /* @__PURE__ */ import_react44.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ import_react44.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react43.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react43.default.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react44.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react44.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7344,20 +7497,20 @@ var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react43.default.createElem
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ import_react43.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-  /* @__PURE__ */ import_react43.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_react43.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_react43.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+  /* @__PURE__ */ import_react44.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ import_react44.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_react44.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_react44.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ));
 
 // icons/CommonIcons.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __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_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7365,7 +7518,7 @@ var CheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7380,7 +7533,7 @@ var UncheckMark = ({ size = "default", className }) => {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "svg",
     {
       className: cn(sizeStyles2[size], className),
@@ -7388,7 +7541,7 @@ var UncheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7426,7 +7579,7 @@ var PasswordStrengthIndicator = ({ strength }) => {
     strong: "80%",
     "very-strong": "100%"
   }[currentStrengthLevel];
-  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react46.default.createElement(
     "div",
     {
       className: `${strengthColors[currentStrengthLevel]} hawa-h-full hawa-rounded hawa-transition-all hawa-duration-300`,
@@ -7438,16 +7591,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = (0, import_react45.useState)("");
-  const [isInputFocused, setIsInputFocused] = (0, import_react45.useState)(false);
-  const [currentStr, setCurrentStr] = (0, import_react45.useState)(0);
-  const [passwordVisible, setPasswordVisible] = (0, import_react45.useState)(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react45.useState)(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react45.useState)(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react45.useState)(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react45.useState)(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react45.useState)(false);
-  (0, import_react45.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react46.useState)("");
+  const [isInputFocused, setIsInputFocused] = (0, import_react46.useState)(false);
+  const [currentStr, setCurrentStr] = (0, import_react46.useState)(0);
+  const [passwordVisible, setPasswordVisible] = (0, import_react46.useState)(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react46.useState)(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react46.useState)(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react46.useState)(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react46.useState)(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react46.useState)(false);
+  (0, import_react46.useEffect)(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7486,7 +7639,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_react45.default.createElement("div", null, /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement(
     Popover,
     {
       width: "trigger",
@@ -7495,7 +7648,7 @@ var PasswordInput = ({
       onOpenChange: setIsInputFocused,
       triggerProps: { asChild: true },
       contentProps: { onOpenAutoFocus: (e) => e.preventDefault() },
-      trigger: /* @__PURE__ */ import_react45.default.createElement(
+      trigger: /* @__PURE__ */ import_react46.default.createElement(
         "div",
         {
           onClick: (e) => {
@@ -7505,7 +7658,7 @@ var PasswordInput = ({
             }
           }
         },
-        /* @__PURE__ */ import_react45.default.createElement(
+        /* @__PURE__ */ import_react46.default.createElement(
           Input,
           {
             width: "full",
@@ -7515,21 +7668,21 @@ var PasswordInput = ({
             onFocus: handleInputFocus,
             onBlur: handleInputBlur,
             type: passwordVisible ? "text" : "password",
-            endIcon: /* @__PURE__ */ import_react45.default.createElement(
+            endIcon: /* @__PURE__ */ import_react46.default.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ import_react45.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react45.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ import_react46.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react46.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             )
           }
         )
       )
     },
-    /* @__PURE__ */ import_react45.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react45.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react45.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react45.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react45.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react45.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react45.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react45.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react45.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react45.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react45.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react45.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react45.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react45.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react45.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react45.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react45.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
-  ), /* @__PURE__ */ import_react45.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
+    /* @__PURE__ */ import_react46.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react46.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react46.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react46.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react46.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
+  ), /* @__PURE__ */ import_react46.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
 };
 
 // elements/slider/Slider.tsx
@@ -7644,12 +7797,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = (0, import_react46.useState)(0);
+  const [scrollPercentage, setScrollPercentage] = (0, import_react47.useState)(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -7660,7 +7813,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7669,7 +7822,7 @@ var ScrollIndicator = ({
       (_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
     };
   }, [anchor]);
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     "div",
     {
       style: {
@@ -7685,11 +7838,11 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_prism_react_renderer = require("prism-react-renderer");
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 require("prismjs/components/prism-bash");
-var CopyIcon = () => /* @__PURE__ */ import_react47.default.createElement(
+var CopyIcon = () => /* @__PURE__ */ import_react48.default.createElement(
   "svg",
   {
     "aria-label": "Copy",
@@ -7702,8 +7855,8 @@ var CopyIcon = () => /* @__PURE__ */ import_react47.default.createElement(
     height: "1em",
     width: "1em"
   },
-  /* @__PURE__ */ import_react47.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ import_react47.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_react48.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react48.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,
@@ -7717,7 +7870,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = (0, import_react47.useState)(0);
+  const [selectedTab, setSelectedTab] = (0, import_react48.useState)(0);
   const theme = import_prism_react_renderer.themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -7725,7 +7878,7 @@ var CodeBlock = ({
     sm: "hawa-w-full hawa-max-w-sm",
     xs: "hawa-w-full hawa-max-w-xs"
   };
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       className: cn(
@@ -7734,7 +7887,7 @@ var CodeBlock = ({
         classNames == null ? void 0 : classNames.root
       )
     },
-    fileName && /* @__PURE__ */ import_react47.default.createElement(
+    fileName && /* @__PURE__ */ import_react48.default.createElement(
       "div",
       {
         className: cn(
@@ -7743,7 +7896,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.fileName
         )
       },
-      /* @__PURE__ */ import_react47.default.createElement(
+      /* @__PURE__ */ import_react48.default.createElement(
         "div",
         {
           className: cn(
@@ -7753,7 +7906,7 @@ var CodeBlock = ({
         fileName
       )
     ),
-    tabs && /* @__PURE__ */ import_react47.default.createElement(
+    tabs && /* @__PURE__ */ import_react48.default.createElement(
       "div",
       {
         className: cn(
@@ -7762,7 +7915,7 @@ var CodeBlock = ({
           classNames == null ? void 0 : classNames.tabs
         )
       },
-      tabs.map((tab, i) => /* @__PURE__ */ import_react47.default.createElement(
+      tabs.map((tab, i) => /* @__PURE__ */ import_react48.default.createElement(
         "div",
         {
           key: i,
@@ -7771,7 +7924,7 @@ var CodeBlock = ({
             classNames == null ? void 0 : classNames.tab
           )
         },
-        /* @__PURE__ */ import_react47.default.createElement(
+        /* @__PURE__ */ import_react48.default.createElement(
           "div",
           {
             onClick: () => setSelectedTab(i),
@@ -7783,7 +7936,7 @@ var CodeBlock = ({
         )
       ))
     ),
-    /* @__PURE__ */ import_react47.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       "div",
       {
         className: cn(
@@ -7793,22 +7946,22 @@ var CodeBlock = ({
           "hawa-overflow-y-auto"
         )
       },
-      /* @__PURE__ */ import_react47.default.createElement(
+      /* @__PURE__ */ import_react48.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_react47.default.createElement(
+        /* @__PURE__ */ import_react48.default.createElement(
           Tooltip,
           {
             open: clipboard.copied,
             side: "left",
-            content: /* @__PURE__ */ import_react47.default.createElement("div", null, "Copied!"),
+            content: /* @__PURE__ */ import_react48.default.createElement("div", null, "Copied!"),
             triggerProps: { asChild: true }
           },
-          /* @__PURE__ */ import_react47.default.createElement(
+          /* @__PURE__ */ import_react48.default.createElement(
             Button,
             {
               size: "smallIcon",
@@ -7816,18 +7969,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_react47.default.createElement(CopyIcon, null)
+            /* @__PURE__ */ import_react48.default.createElement(CopyIcon, null)
           )
         )
       ),
-      /* @__PURE__ */ import_react47.default.createElement(
+      /* @__PURE__ */ import_react48.default.createElement(
         import_prism_react_renderer.Highlight,
         {
           theme,
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react47.default.createElement(
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react48.default.createElement(
           "pre",
           {
             className: cn(
@@ -7837,7 +7990,7 @@ var CodeBlock = ({
               wrapText && "hawa-text-wrap"
             )
           },
-          tokens.map((line, i) => /* @__PURE__ */ import_react47.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react47.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react47.default.createElement("span", { key, ...getTokenProps({ token }) }))))
+          tokens.map((line, i) => /* @__PURE__ */ import_react48.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react48.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react48.default.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
       )
     )
@@ -7845,7 +7998,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_embla_carousel_react2 = __toESM(require("embla-carousel-react"));
 var Carousel = ({
   items,
@@ -7861,8 +8014,8 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = (0, import_react48.useState)(0);
-  (0, import_react48.useEffect)(() => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react49.useState)(0);
+  (0, import_react49.useEffect)(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -7872,7 +8025,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -7884,17 +8037,17 @@ var Carousel = ({
         clearInterval(autoplayTimer);
     };
   }, [emblaApi, autoplay, autoplayInterval]);
-  const length = import_react48.default.Children.count(items);
+  const length = import_react49.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react48.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react49.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_react48.default.createElement(
+  ))))), /* @__PURE__ */ import_react49.default.createElement(
     Dots,
     {
       direction,
@@ -7902,7 +8055,7 @@ var Carousel = ({
       selectedIndex,
       onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
     }
-  ), showArrows && /* @__PURE__ */ import_react48.default.createElement(
+  ), showArrows && /* @__PURE__ */ import_react49.default.createElement(
     CarouselControls,
     {
       canScrollNext,
@@ -7919,7 +8072,7 @@ var Dots = ({
   direction
 }) => {
   const arr = new Array(itemsLength).fill(0);
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       dir: direction,
@@ -7927,7 +8080,7 @@ var Dots = ({
     },
     arr.map((_, index) => {
       const selected = index === selectedIndex;
-      return /* @__PURE__ */ import_react48.default.createElement(
+      return /* @__PURE__ */ import_react49.default.createElement(
         "div",
         {
           key: index,
@@ -7942,7 +8095,7 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ import_react48.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react49.default.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
@@ -7953,7 +8106,7 @@ var CarouselControls = (props) => {
         props.canScrollPrev && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -7962,9 +8115,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_react48.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_react49.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_react48.default.createElement(
+  ), /* @__PURE__ */ import_react49.default.createElement(
     "button",
     {
       onClick: () => props.canScrollNext && props.onNext(),
@@ -7975,7 +8128,7 @@ var CarouselControls = (props) => {
         props.canScrollNext && "hawa-bg-primary"
       )
     },
-    /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       "svg",
       {
         "aria-label": "Chevron Right Icon",
@@ -7984,15 +8137,15 @@ 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_react48.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_react49.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_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var Count = (props) => {
-  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react49.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react49.default.createElement("div", { className: "hawa-text-sm" }, props.count));
+  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-px-2" }, /* @__PURE__ */ import_react50.default.createElement("div", null, props.icon), /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-text-sm" }, props.count));
 };
 
 // elements/toast/Toast.tsx
@@ -8133,11 +8286,11 @@ var ToastDescription = React67.forwardRef(({ className, size = "default", ...pro
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // elements/toaster/Toaster.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 function Toaster(props) {
   var _a;
   let isRTL = props.direction === "rtl";
-  return /* @__PURE__ */ import_react50.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
+  return /* @__PURE__ */ import_react51.default.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
     id,
     title,
     description,
@@ -8145,7 +8298,7 @@ function Toaster(props) {
     action,
     ...toastProps
   }) {
-    return /* @__PURE__ */ import_react50.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         className: cn(
@@ -8153,9 +8306,9 @@ function Toaster(props) {
           action && "hawa-justify-between"
         )
       },
-      /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react50.default.createElement(ToastClose, null)),
-      /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ import_react51.default.createElement(ToastClose, null)),
+      /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
+      /* @__PURE__ */ import_react51.default.createElement(
         "div",
         {
           className: cn(
@@ -8163,11 +8316,11 @@ function Toaster(props) {
             { "hawa-p-4": size === "default", "hawa-p-2": size === "sm" }
           )
         },
-        /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react50.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react50.default.createElement(ToastDescription, { size }, description)),
-        action && /* @__PURE__ */ import_react50.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
+        /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ import_react51.default.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ import_react51.default.createElement(ToastDescription, { size }, description)),
+        action && /* @__PURE__ */ import_react51.default.createElement("div", { className: "hawa-flex  hawa-flex-col hawa-justify-center" }, action)
       )
     ));
-  }), /* @__PURE__ */ import_react50.default.createElement(
+  }), /* @__PURE__ */ import_react51.default.createElement(
     ToastViewport,
     {
       className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
@@ -8176,20 +8329,20 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = (0, import_react51.useState)(false);
-  const popUpRef = (0, import_react51.useRef)(null);
+  const [closed, setClosed] = (0, import_react52.useState)(false);
+  const popUpRef = (0, import_react52.useRef)(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"
   };
-  return /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       className: cn(
@@ -8198,7 +8351,7 @@ var DestroyableCard = ({
       ),
       ref: popUpRef
     },
-    /* @__PURE__ */ import_react51.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       Card,
       {
         className: cn(
@@ -8207,7 +8360,7 @@ var DestroyableCard = ({
         ),
         dir: direction
       },
-      /* @__PURE__ */ import_react51.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         "button",
         {
           type: "button",
@@ -8226,7 +8379,7 @@ var DestroyableCard = ({
             }, 200);
           }
         },
-        /* @__PURE__ */ import_react51.default.createElement(
+        /* @__PURE__ */ import_react52.default.createElement(
           "svg",
           {
             "aria-hidden": "true",
@@ -8234,7 +8387,7 @@ var DestroyableCard = ({
             fill: "currentColor",
             viewBox: "0 0 20 20"
           },
-          /* @__PURE__ */ import_react51.default.createElement(
+          /* @__PURE__ */ import_react52.default.createElement(
             "path",
             {
               fillRule: "evenodd",
@@ -8244,13 +8397,13 @@ var DestroyableCard = ({
           )
         )
       ),
-      /* @__PURE__ */ import_react51.default.createElement(CardContent, { headless: true }, props.children)
+      /* @__PURE__ */ import_react52.default.createElement(CardContent, { headless: true }, props.children)
     )
   );
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -8258,13 +8411,13 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = (0, import_react52.useState)(props.currentColorMode);
-  const [language, setLanguage] = (0, import_react52.useState)(props.currentLanguage);
+  const [color, setColor] = (0, import_react53.useState)(props.currentColorMode);
+  const [language, setLanguage] = (0, import_react53.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_react52.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react53.default.createElement(
     Radio,
     {
       name: "language",
@@ -8282,7 +8435,7 @@ var InterfaceSettings = ({
         { value: "en", label: "English" }
       ]
     }
-  ), /* @__PURE__ */ import_react52.default.createElement(
+  ), /* @__PURE__ */ import_react53.default.createElement(
     Radio,
     {
       name: "theme",
@@ -8298,7 +8451,7 @@ var InterfaceSettings = ({
       options: [
         {
           value: "light",
-          label: /* @__PURE__ */ import_react52.default.createElement(
+          label: /* @__PURE__ */ import_react53.default.createElement(
             "svg",
             {
               width: "15",
@@ -8308,7 +8461,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_react52.default.createElement(
+            /* @__PURE__ */ import_react53.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",
@@ -8319,7 +8472,7 @@ var InterfaceSettings = ({
         },
         {
           value: "dark",
-          label: /* @__PURE__ */ import_react52.default.createElement(
+          label: /* @__PURE__ */ import_react53.default.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -8330,7 +8483,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_react52.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+            /* @__PURE__ */ import_react53.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
           )
         }
       ]
@@ -8339,14 +8492,14 @@ var InterfaceSettings = ({
 };
 
 // elements/phoneMockup/PhoneMockup.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var PhoneMockup = ({
   children,
   upperOverlayGradiant,
   lowerOverlayGradiant,
   phone,
   hideButtons
-}) => /* @__PURE__ */ import_react53.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_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.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_react53.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_react53.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_react53.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_react53.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_react53.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_react53.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_react54.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_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.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_react54.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_react54.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_react54.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_react54.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_react54.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_react54.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,
@@ -8355,6 +8508,7 @@ var PhoneMockup = ({
   AccordionRoot,
   AccordionTrigger,
   Alert,
+  AppCommand,
   AppStores,
   Avatar,
   BackToTop,
@@ -8418,6 +8572,7 @@ var PhoneMockup = ({
   DropdownMenuTrigger,
   FileDropzone,
   FileUploader,
+  FullCommand,
   Input,
   InterfaceSettings,
   Label,