@sikka/hawa 0.36.1-next → 0.37.0-next

package/dist/index.mjs

@@ -1727,7 +1727,7 @@ var DialogContent = React14.forwardRef(({ className, children, persist, hideClos
     },
     ref,
     className: cn(
-      "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
+      "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-[90%] hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
       className
     ),
     ...props
@@ -3478,6 +3478,7 @@ import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 
 // elements/command/Command.tsx
 import * as React27 from "react";
+import { Dialog as Dialog2 } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 var Command = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   CommandPrimitive,
@@ -3491,7 +3492,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(Dialog2, { ...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",
@@ -3586,13 +3587,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(Dialog2, { ...dialogProps }, /* @__PURE__ */ React27.createElement(
+    DialogContent,
+    {
+      hideCloseButton: true,
+      className: "hawa-overflow-hidden !hawa-p-0 hawa-shadow-lg !hawa-min-h-[50%]"
+    },
+    /* @__PURE__ */ React27.createElement(FullCommand, { ...commandProps })
+  ));
+};
 CommandShortcut.displayName = "CommandShortcut";
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
@@ -4085,7 +4120,7 @@ var SortButton = (props) => {
 };
 
 // elements/tabs/Tabs.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 
 // hooks/useIsomorphicEffect.ts
 import { useEffect as useEffect7, useLayoutEffect } from "react";
@@ -4531,6 +4566,94 @@ function useClickOutside(handler, events, nodes) {
   return ref;
 }
 
+// hooks/useShortcuts.ts
+import { useEffect as useEffect21 } from "react";
+function parseHotkey(hotkey) {
+  const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
+  const modifiers = {
+    alt: keys.includes("alt"),
+    ctrl: keys.includes("ctrl"),
+    meta: keys.includes("meta"),
+    mod: keys.includes("mod"),
+    shift: keys.includes("shift")
+  };
+  const reservedKeys = ["alt", "ctrl", "meta", "shift", "mod"];
+  const freeKey = keys.find((key) => !reservedKeys.includes(key));
+  return {
+    ...modifiers,
+    key: freeKey
+  };
+}
+function isExactHotkey(hotkey, event) {
+  const { alt, ctrl, meta, mod, shift, key } = hotkey;
+  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;
+  if (alt !== altKey) {
+    return false;
+  }
+  if (mod) {
+    if (!ctrlKey && !metaKey) {
+      return false;
+    }
+  } else {
+    if (ctrl !== ctrlKey) {
+      return false;
+    }
+    if (meta !== metaKey) {
+      return false;
+    }
+  }
+  if (shift !== shiftKey) {
+    return false;
+  }
+  if (key && (pressedKey.toLowerCase() === key.toLowerCase() || event.code.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+function getHotkeyMatcher(hotkey) {
+  return (event) => isExactHotkey(parseHotkey(hotkey), event);
+}
+function getHotkeyHandler(hotkeys) {
+  return (event) => {
+    const _event = "nativeEvent" in event ? event.nativeEvent : event;
+    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
+      if (getHotkeyMatcher(hotkey)(_event)) {
+        if (options.preventDefault) {
+          event.preventDefault();
+        }
+        handler(_event);
+      }
+    });
+  };
+}
+function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
+  if (event.target instanceof HTMLElement) {
+    if (triggerOnContentEditable) {
+      return !tagsToIgnore.includes(event.target.tagName);
+    }
+    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
+  }
+  return true;
+}
+function useShortcuts(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
+  useEffect21(() => {
+    const keydownListener = (event) => {
+      hotkeys.forEach(
+        ([hotkey, handler, options = { preventDefault: true }]) => {
+          if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
+            if (options.preventDefault) {
+              event.preventDefault();
+            }
+            handler(event);
+          }
+        }
+      );
+    };
+    document.documentElement.addEventListener("keydown", keydownListener);
+    return () => document.documentElement.removeEventListener("keydown", keydownListener);
+  }, [hotkeys]);
+}
+
 // elements/tabs/Tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { tv } from "tailwind-variants";
@@ -4590,14 +4713,137 @@ var FloatBox = ({
   );
 };
 
+// elements/scrollArea/ScrollArea.tsx
+import * as React41 from "react";
+import * as ScrollAreaPrimitive from "@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 = 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: "" }
   },
@@ -4649,8 +4895,8 @@ var tabsTriggerVariant = 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,
@@ -4661,28 +4907,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,
@@ -4694,8 +4971,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,
@@ -4708,7 +4985,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,
@@ -4725,7 +5002,7 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // elements/select/Select.tsx
-import React42 from "react";
+import React43 from "react";
 import ReactSelect from "react-select";
 import CreatableSelect from "react-select/creatable";
 import clsx3 from "clsx";
@@ -4736,10 +5013,10 @@ var Select = ({
 }) => {
   const NoOption = () => {
     var _a, _b;
-    return /* @__PURE__ */ React42.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
+    return /* @__PURE__ */ React43.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
   };
   const Control = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         ref: innerRef,
@@ -4752,7 +5029,7 @@ var Select = ({
     );
   };
   const Option = ({ children, innerProps, innerRef }) => {
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         ref: innerRef,
@@ -4773,7 +5050,7 @@ var Select = ({
     ...menuProps
   }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         className: cn(
@@ -4787,7 +5064,11 @@ var Select = ({
       children
     );
   };
-  return /* @__PURE__ */ React42.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__ */ React43.createElement(
     "div",
     {
       className: cn(
@@ -4795,10 +5076,10 @@ var Select = ({
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ React42.createElement(Label2, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ React42.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
+    props.label && /* @__PURE__ */ React43.createElement(Label2, { ...labelProps }, props.label),
+    props.isLoading ? /* @__PURE__ */ React43.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ React42.createElement(
+      /* @__PURE__ */ React43.createElement(
         ReactSelect,
         {
           noOptionsMessage: NoOption,
@@ -4808,26 +5089,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: Menu2,
-            IndicatorsContainer: () => null
-          } : {
+          autoFocus: false,
+          components: props.hideIndicator ? { Option, Menu: Menu2, IndicatorsContainer: () => null } : {
             Option,
             Menu: Menu2,
             // Control: (e) => (
@@ -4836,7 +5113,7 @@ var Select = ({
             //     {...e}
             //   />
             // ),
-            ValueContainer: (e) => /* @__PURE__ */ React42.createElement(
+            ValueContainer: (e) => /* @__PURE__ */ React43.createElement(
               "div",
               {
                 className: cn(
@@ -4846,13 +5123,10 @@ var Select = ({
                 ...e
               }
             ),
-            MultiValueContainer: (e) => /* @__PURE__ */ React42.createElement(
+            MultiValueContainer: (e) => /* @__PURE__ */ React43.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
               }
             )
@@ -4868,7 +5142,7 @@ var Select = ({
           isSearchable: props.isSearchable
         }
       )
-    ) : /* @__PURE__ */ React42.createElement(
+    ) : /* @__PURE__ */ React43.createElement(
       CreatableSelect,
       {
         formatCreateLabel: (inputValue) => {
@@ -4898,7 +5172,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ React42.createElement(
+    !props.hideHelperText && /* @__PURE__ */ React43.createElement(
       "p",
       {
         className: cn(
@@ -4912,15 +5186,15 @@ var Select = ({
 };
 
 // elements/switch/Switch.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import * as SwitchPrimitives from "@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) {
@@ -4948,13 +5222,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(
@@ -4968,7 +5242,7 @@ var Switch = React43.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React43.createElement(
+        /* @__PURE__ */ React44.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -4982,14 +5256,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
-import * as React44 from "react";
+import * as React45 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 var Checkbox = ({
   id,
@@ -5009,7 +5283,7 @@ var Checkbox = ({
     lg: 0.9,
     xl: 1
   };
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     "div",
     {
       className: cn(
@@ -5017,7 +5291,7 @@ var Checkbox = ({
         size === "default" ? "hawa-items-top" : "hawa-items-center"
       )
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React45.createElement(
       CheckboxElement,
       {
         ...props,
@@ -5027,7 +5301,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,
@@ -5041,7 +5315,7 @@ var Checkbox = ({
         }
       },
       label
-    ), sublabel && /* @__PURE__ */ React44.createElement(
+    ), sublabel && /* @__PURE__ */ React45.createElement(
       "label",
       {
         htmlFor: id,
@@ -5051,7 +5325,7 @@ var Checkbox = ({
         )
       },
       sublabel
-    ), helperText && !disabled && /* @__PURE__ */ React44.createElement(
+    ), helperText && !disabled && /* @__PURE__ */ React45.createElement(
       "label",
       {
         htmlFor: id,
@@ -5064,7 +5338,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",
@@ -5086,7 +5360,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,
@@ -5098,14 +5372,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",
@@ -5116,7 +5390,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" })
       ),
       " "
     )
@@ -5125,9 +5399,9 @@ var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/progress/Progress.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import * as ProgressPrimitive from "@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,
@@ -5137,7 +5411,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",
@@ -5148,7 +5422,7 @@ var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // elements/breadcrumb/Breadcrumb.tsx
-import React46 from "react";
+import React47 from "react";
 var Breadcrumb = ({
   breadcrumbLinks,
   separator = ">",
@@ -5159,7 +5433,7 @@ var Breadcrumb = ({
     small: "hawa-text-sm",
     xs: "hawa-text-xs"
   };
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(
     "div",
     {
       className: cn(
@@ -5167,13 +5441,13 @@ var Breadcrumb = ({
         textStyles[size]
       )
     },
-    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React46.createElement(
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React47.createElement(
       "div",
       {
         key: index,
         className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React47.createElement(
         "a",
         {
           href: singleBreadcrumbLink.href,
@@ -5181,49 +5455,49 @@ var Breadcrumb = ({
         },
         singleBreadcrumbLink.label
       ),
-      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React46.createElement("div", null, separator) : /* @__PURE__ */ React46.createElement("div", null, separator) : null
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React47.createElement("div", null, separator) : /* @__PURE__ */ React47.createElement("div", null, separator) : null
     ))
   );
 };
 
 // elements/appStores/AppStores.tsx
-import React47 from "react";
+import React48 from "react";
 var AppStores = (props) => {
-  return /* @__PURE__ */ React47.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ React47.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ React47.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__ */ React47.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ React47.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement("div", { className: "hawa-flex hawa-justify-center" }, /* @__PURE__ */ React48.createElement("div", null, props.store === "apple" ? /* @__PURE__ */ React48.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__ */ React48.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ React48.createElement("svg", { viewBox: "0 0 384 512", width: "30" }, /* @__PURE__ */ React48.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__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ React47.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ React47.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__ */ React47.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ React47.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ React47.createElement(
+  ))), /* @__PURE__ */ React48.createElement("div", null, /* @__PURE__ */ React48.createElement("div", { className: "hawa-text-xs" }, "Download on the"), /* @__PURE__ */ React48.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-2xl hawa-font-semibold" }, "App Store"))) : /* @__PURE__ */ React48.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__ */ React48.createElement("div", { className: "hawa-mr-3" }, /* @__PURE__ */ React48.createElement("svg", { viewBox: "30 336.7 120.9 129.2", width: "30" }, /* @__PURE__ */ React48.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__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.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__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.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__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.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__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ React47.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
+  ))), /* @__PURE__ */ React48.createElement("div", null, /* @__PURE__ */ React48.createElement("div", { className: "hawa-text-xs" }, "GET IT ON"), /* @__PURE__ */ React48.createElement("div", { className: "hawa--mt-1 hawa-font-sans hawa-text-xl hawa-font-semibold" }, "Google Play")))));
 };
 
 // elements/badge/Badge.tsx
-import React48, { useEffect as useEffect22, useState as useState25, useRef as useRef16 } from "react";
+import React49, { useEffect as useEffect25, useState as useState27, useRef as useRef17 } from "react";
 var Badge = ({
   anchor,
   position = "right",
@@ -5231,14 +5505,14 @@ var Badge = ({
   text,
   className
 }) => {
-  const [badgePosition, setBadgePosition] = useState25(null);
-  const indicatorRef = useRef16(null);
+  const [badgePosition, setBadgePosition] = useState27(null);
+  const indicatorRef = useRef17(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" }
   };
-  useEffect22(() => {
+  useEffect25(() => {
     const handlePositioning = () => {
       var _a;
       if (anchor.current && indicatorRef.current) {
@@ -5261,7 +5535,7 @@ var Badge = ({
       window.removeEventListener("resize", handlePositioning);
     };
   }, [anchor]);
-  return /* @__PURE__ */ React48.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ React49.createElement(
     "div",
     {
       style: {
@@ -5286,8 +5560,8 @@ var BadgedComponent = ({
   size,
   text
 }) => {
-  const ref = useRef16(null);
-  return /* @__PURE__ */ React48.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ React48.createElement(
+  const ref = useRef17(null);
+  return /* @__PURE__ */ React49.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ React49.createElement(
     Badge,
     {
       size,
@@ -5300,7 +5574,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-import React49, { useState as useState26, useRef as useRef17 } from "react";
+import React50, { useState as useState28, useRef as useRef18 } from "react";
 
 // countries.ts
 var countries = [
@@ -7002,9 +7276,9 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
-  const [phoneNumber, setPhoneNumber] = useState26("");
-  const [countryCode, setCountryCode] = useState26(props.preferredCountry);
-  const inputRef = useRef17(null);
+  const [phoneNumber, setPhoneNumber] = useState28("");
+  const [countryCode, setCountryCode] = useState28(props.preferredCountry);
+  const inputRef = useRef18(null);
   const handleInputChange = (e) => {
     console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
@@ -7018,7 +7292,7 @@ var PhoneInput = ({
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ React49.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React49.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React49.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React50.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React50.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React50.createElement(
     Select,
     {
       phoneCode: true,
@@ -7034,7 +7308,7 @@ var PhoneInput = ({
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry
     }
-  ), /* @__PURE__ */ React49.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React50.createElement(
     "input",
     {
       type: "tel",
@@ -7048,7 +7322,7 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ React49.createElement(
+  ))), /* @__PURE__ */ React50.createElement(
     "p",
     {
       className: cn(
@@ -7061,7 +7335,7 @@ var PhoneInput = ({
 };
 
 // elements/pinInput/PinInput.tsx
-import React50, { useEffect as useEffect24, useState as useState27 } from "react";
+import React51, { useEffect as useEffect27, useState as useState29 } from "react";
 var PinInput = ({
   label,
   icon,
@@ -7071,7 +7345,7 @@ var PinInput = ({
   inputProps,
   ...props
 }) => {
-  const [pin, setPin] = useState27(Array.from(Array(digits)));
+  const [pin, setPin] = useState29(Array.from(Array(digits)));
   const handleKeyDown = (e, index) => {
     let backTo = 0;
     if (e.key === "Backspace") {
@@ -7080,7 +7354,7 @@ var PinInput = ({
       previousInput == null ? void 0 : previousInput.focus();
     }
   };
-  useEffect24(() => {
+  useEffect27(() => {
     let unfilled = pin.includes(void 0);
     if (!unfilled && getPins) {
       getPins(pin);
@@ -7105,13 +7379,13 @@ var PinInput = ({
       }
     }
   };
-  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React51.createElement(
     "div",
     {
       className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
       dir: "ltr"
     },
-    pin.map((value, index) => /* @__PURE__ */ React50.createElement(
+    pin.map((value, index) => /* @__PURE__ */ React51.createElement(
       "input",
       {
         key: index,
@@ -7131,7 +7405,7 @@ var PinInput = ({
         ...inputProps
       }
     ))
-  ), /* @__PURE__ */ React50.createElement(
+  ), /* @__PURE__ */ React51.createElement(
     "p",
     {
       className: cn(
@@ -7144,58 +7418,18 @@ var PinInput = ({
 };
 
 // elements/stopPropagationWrapper/StopPropagationWrapper.tsx
-import React51 from "react";
+import React52 from "react";
 var StopPropagationWrapper = (props) => {
   const handleClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ React51.createElement("div", { onClick: handleClick }, props.children);
+  return /* @__PURE__ */ React52.createElement("div", { onClick: handleClick }, props.children);
 };
 
-// elements/scrollArea/ScrollArea.tsx
-import * as React52 from "react";
-import * as ScrollAreaPrimitive from "@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
 import React53, {
-  useState as useState28,
-  useEffect as useEffect25
+  useState as useState30,
+  useEffect as useEffect28
 } from "react";
 var ColorPicker = ({
   containerProps,
@@ -7207,8 +7441,8 @@ var ColorPicker = ({
   preview = false,
   ...props
 }) => {
-  const [selectedColor, setSelectedColor] = useState28(props.color);
-  useEffect25(() => {
+  const [selectedColor, setSelectedColor] = useState30(props.color);
+  useEffect28(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -7490,7 +7724,7 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-import React59, { useEffect as useEffect26, useState as useState29 } from "react";
+import React59, { useEffect as useEffect29, useState as useState31 } from "react";
 
 // icons/Emojis.tsx
 import React56 from "react";
@@ -7727,16 +7961,16 @@ var PasswordInput = ({
   hidePopover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = useState29("");
-  const [isInputFocused, setIsInputFocused] = useState29(false);
-  const [currentStr, setCurrentStr] = useState29(0);
-  const [passwordVisible, setPasswordVisible] = useState29(false);
-  const [lengthCriteriaMet, setLengthCriteriaMet] = useState29(false);
-  const [numberCriteriaMet, setNumberCriteriaMet] = useState29(false);
-  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = useState29(false);
-  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = useState29(false);
-  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = useState29(false);
-  useEffect26(() => {
+  const [inputValue, setInputValue] = useState31("");
+  const [isInputFocused, setIsInputFocused] = useState31(false);
+  const [currentStr, setCurrentStr] = useState31(0);
+  const [passwordVisible, setPasswordVisible] = useState31(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = useState31(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = useState31(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = useState31(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = useState31(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = useState31(false);
+  useEffect29(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7937,12 +8171,12 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-import React63, { useState as useState30, useEffect as useEffect27 } from "react";
+import React63, { useState as useState32, useEffect as useEffect30 } from "react";
 var ScrollIndicator = ({
   anchor,
   inContainer = false
 }) => {
-  const [scrollPercentage, setScrollPercentage] = useState30(0);
+  const [scrollPercentage, setScrollPercentage] = useState32(0);
   const onScroll = () => {
     const scrollElement = anchor.current;
     if (scrollElement) {
@@ -7953,7 +8187,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  useEffect27(() => {
+  useEffect30(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7978,7 +8212,7 @@ var ScrollIndicator = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
-import React64, { useState as useState31 } from "react";
+import React64, { useState as useState33 } from "react";
 import { Highlight, themes, Prism } from "prism-react-renderer";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 __require("prismjs/components/prism-bash");
@@ -8010,7 +8244,7 @@ var CodeBlock = ({
   ...props
 }) => {
   const clipboard = useClipboard();
-  const [selectedTab, setSelectedTab] = useState31(0);
+  const [selectedTab, setSelectedTab] = useState33(0);
   const theme = themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
@@ -8138,7 +8372,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-import React65, { useEffect as useEffect28, useState as useState32 } from "react";
+import React65, { useEffect as useEffect31, useState as useState34 } from "react";
 import useEmblaCarousel2 from "embla-carousel-react";
 var Carousel = ({
   items,
@@ -8154,8 +8388,8 @@ var Carousel = ({
     direction,
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
-  const [selectedIndex, setSelectedIndex] = useState32(0);
-  useEffect28(() => {
+  const [selectedIndex, setSelectedIndex] = useState34(0);
+  useEffect31(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -8165,7 +8399,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  useEffect28(() => {
+  useEffect31(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -8469,15 +8703,15 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-import React69, { useRef as useRef18, useState as useState33 } from "react";
+import React69, { useRef as useRef19, useState as useState35 } from "react";
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
   direction,
   ...props
 }) => {
-  const [closed, setClosed] = useState33(false);
-  const popUpRef = useRef18(null);
+  const [closed, setClosed] = useState35(false);
+  const popUpRef = useRef19(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"
@@ -8543,7 +8777,7 @@ var DestroyableCard = ({
 };
 
 // elements/interfaceSettings/InterfaceSettings.tsx
-import React70, { useState as useState34 } from "react";
+import React70, { useState as useState36 } from "react";
 var InterfaceSettings = ({
   orientation = "horizontal",
   width = "default",
@@ -8551,8 +8785,8 @@ var InterfaceSettings = ({
   handleLanguage,
   ...props
 }) => {
-  const [color, setColor] = useState34(props.currentColorMode);
-  const [language, setLanguage] = useState34(props.currentLanguage);
+  const [color, setColor] = useState36(props.currentColorMode);
+  const [language, setLanguage] = useState36(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"
@@ -8893,7 +9127,7 @@ var Copyrights = (props) => {
 };
 
 // layout/navbar/Navbar.tsx
-import React75, { useState as useState35 } from "react";
+import React75, { useState as useState37 } from "react";
 
 // elements/collapsible/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -8909,7 +9143,7 @@ var Navbar = ({
   ...props
 }) => {
   var _a, _b;
-  const [isOpen, setIsOpen] = useState35(false);
+  const [isOpen, setIsOpen] = useState37(false);
   return /* @__PURE__ */ React75.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React75.createElement(
     Collapsible,
     {
@@ -9013,7 +9247,8 @@ var Navbar = ({
 };
 
 // layout/appLayout/AppLayout.tsx
-import React76, { useEffect as useEffect29, useLayoutEffect as useLayoutEffect2, useState as useState36 } from "react";
+import React76, { useEffect as useEffect32, useState as useState38 } from "react";
+import * as Dialog3 from "@radix-ui/react-dialog";
 var LOCAL_STORAGE_KEY2 = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
@@ -9031,7 +9266,7 @@ var AppLayout = ({
   ...props
 }) => {
   var _a, _b;
-  useLayoutEffect2(() => {
+  useEffect32(() => {
     let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY2);
     if (isDrawerOpen === null) {
       localStorage.setItem(LOCAL_STORAGE_KEY2, JSON.stringify(false));
@@ -9048,15 +9283,16 @@ var AppLayout = ({
     }
   };
   const isRTL = direction === "rtl";
-  const [openedSidebarItem, setOpenedSidebarItem] = useState36("");
-  const [size, setSize] = useState36(
+  const [openedSidebarItem, setOpenedSidebarItem] = useState38("");
+  const [size, setSize] = useState38(
     typeof window !== "undefined" && window.innerWidth || 1200
   );
-  const [openSideMenu, setOpenSideMenu] = useState36(() => {
+  const [openSideMenu, setOpenSideMenu] = useState38(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
     return savedState ? JSON.parse(savedState) : false;
   });
-  const [keepDrawerOpen, setKeepDrawerOpen] = useState36(() => {
+  const [container, setContainer] = React76.useState(null);
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState38(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
     return savedState ? JSON.parse(savedState) : false;
   });
@@ -9069,12 +9305,14 @@ var AppLayout = ({
     }
   };
   const ref = useClickOutside(handleClickOutside);
-  useEffect29(() => {
+  useEffect32(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
         if (window.innerWidth > 600) {
           setKeepDrawerOpen(false);
+        } else {
+          localStorage.setItem(LOCAL_STORAGE_KEY2, JSON.stringify(false));
         }
       };
       resize();
@@ -9084,13 +9322,13 @@ var AppLayout = ({
       };
     }
   }, []);
-  useEffect29(() => {
+  useEffect32(() => {
     setKeepDrawerOpen(() => {
       const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
       return savedState ? JSON.parse(savedState) : true;
     });
   }, [setKeepDrawerOpen]);
-  useEffect29(() => {
+  useEffect32(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
     } else {
@@ -9104,7 +9342,7 @@ var AppLayout = ({
     {
       dir: direction,
       className: cn(
-        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -9132,7 +9370,7 @@ var AppLayout = ({
           "div",
           {
             onClick: () => setOpenSideMenu(true),
-            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer  hawa-rounded hawa-p-2  hawa-transition-all hover:hawa-bg-gray-100"
+            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2  hawa-transition-all "
           },
           /* @__PURE__ */ React76.createElement(MenuIcon, null)
         ),
@@ -9177,13 +9415,13 @@ var AppLayout = ({
         )
       }
     ))
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React76.createElement("div", { ref: setContainer }, /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-40 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
         isRTL ? "hawa-right-0" : "hawa-left-0",
-        bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
+        bordered ? size > 600 ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : "" : ""
       ),
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
@@ -9323,10 +9561,17 @@ var AppLayout = ({
         )
       ) : null
     )
+  )), /* @__PURE__ */ React76.createElement(
+    Dialog3.Root,
+    {
+      open: size < 600 && openSideMenu,
+      onOpenChange: setOpenSideMenu
+    },
+    /* @__PURE__ */ React76.createElement(Dialog3.Portal, { container }, /* @__PURE__ */ React76.createElement(Dialog3.Overlay, { className: "hawa-fixed hawa-inset-0 hawa-bg-foreground/20 hawa-backdrop-blur-[2px] data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10  data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))
   ), /* @__PURE__ */ React76.createElement(
     "div",
     {
-      className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
+      className: "hawa-fixed hawa-overflow-y-auto  hawa-transition-all hawa-z-0",
       style: isRTL ? {
         left: "0px",
         top: props.topBar ? "56px" : "0px",
@@ -9652,9 +9897,9 @@ var MenubarShortcut = ({
 MenubarShortcut.displayname = "MenubarShortcut";
 
 // layout/appTabs/AppTabs.tsx
-import React79, { useState as useState37 } from "react";
+import React79, { useState as useState39 } from "react";
 var AppTabs = ({ tabs, className }) => {
-  const [selectedIndex, setSelectedIndex] = useState37(0);
+  const [selectedIndex, setSelectedIndex] = useState39(0);
   return /* @__PURE__ */ React79.createElement(
     "div",
     {
@@ -9696,7 +9941,7 @@ var AppTabs = ({ tabs, className }) => {
 };
 
 // layout/docsLayout/DocsLayout.tsx
-import React81, { useEffect as useEffect30, useRef as useRef20, useState as useState38 } from "react";
+import React81, { useEffect as useEffect33, useRef as useRef21, useState as useState40 } from "react";
 
 // layout/docsSidebar/DocsSidebar.tsx
 import React80 from "react";
@@ -9786,15 +10031,15 @@ var DocsLayout = ({
       lg: closeDrawerWidth
     }
   };
-  const ref = useRef20(null);
+  const ref = useRef21(null);
   const isRTL = direction === "rtl";
   let size = useBreakpoint();
   if (typeof window == "undefined") {
     size = 1200;
   }
-  const [currentPage, setCurrentPage] = useState38("Introduction");
-  const [openSideMenu, setOpenSideMenu] = useState38(true);
-  useEffect30(() => {
+  const [currentPage, setCurrentPage] = useState40("Introduction");
+  const [openSideMenu, setOpenSideMenu] = useState40(true);
+  useEffect33(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !openSideMenu) {
         setOpenSideMenu(false);
@@ -9805,7 +10050,7 @@ var DocsLayout = ({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, [openSideMenu]);
-  useEffect30(() => {
+  useEffect33(() => {
     const handleResize = () => {
       setOpenSideMenu(window.innerWidth > 600 ? true : false);
     };
@@ -9822,7 +10067,7 @@ var DocsLayout = ({
       setCurrentPage(entry.target.id);
     }
   };
-  useEffect30(() => {
+  useEffect33(() => {
     observerRef.current = new IntersectionObserver(handleIntersection, {
       threshold: 0.5
       // Adjust threshold as needed to determine when a section is in view
@@ -10064,7 +10309,7 @@ var AuthButtons = (props) => {
 
 // blocks/auth/LoginForm.tsx
 import React83 from "react";
-import { useState as useState39 } from "react";
+import { useState as useState41 } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
@@ -10081,7 +10326,7 @@ var LoginForm = ({
   ...props
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-  const [passwordVisible, setPasswordVisible] = useState39(false);
+  const [passwordVisible, setPasswordVisible] = useState41(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -10400,7 +10645,7 @@ var LoginForm = ({
 };
 
 // blocks/auth/RegisterForm.tsx
-import React84, { useState as useState40 } from "react";
+import React84, { useState as useState42 } from "react";
 import { Controller as Controller2, FormProvider, useForm as useForm2 } from "react-hook-form";
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import * as z2 from "zod";
@@ -10412,7 +10657,7 @@ var RegisterForm = ({
   ...props
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const [passwordVisible, setPasswordVisible] = useState40(false);
+  const [passwordVisible, setPasswordVisible] = useState42(false);
   const thirdPartyAuthTexts = {
     continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
     continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -11033,7 +11278,7 @@ var ResetPasswordForm = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-import React89, { useEffect as useEffect31, useState as useState41 } from "react";
+import React89, { useEffect as useEffect34, useState as useState43 } from "react";
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
@@ -11045,9 +11290,9 @@ var CodeConfirmation = (props) => {
   const { handleSubmit, control, formState, setValue } = useForm5({
     resolver: zodResolver5(formSchema)
   });
-  const [resendTimer, setResendTimer] = useState41(null);
-  const [remainingTime, setRemainingTime] = useState41(0);
-  const [showResendTimer, setShowResendTimer] = useState41(false);
+  const [resendTimer, setResendTimer] = useState43(null);
+  const [remainingTime, setRemainingTime] = useState43(0);
+  const [showResendTimer, setShowResendTimer] = useState43(false);
   const startResendTimer = () => {
     if (resendTimer !== null) {
       clearInterval(resendTimer);
@@ -11069,7 +11314,7 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  useEffect31(() => {
+  useEffect34(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
@@ -11132,7 +11377,7 @@ var CodeConfirmation = (props) => {
 };
 
 // blocks/feedback/UserReferralSource.tsx
-import React90, { useRef as useRef21, useState as useState42 } from "react";
+import React90, { useRef as useRef22, useState as useState44 } from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
 import * as z6 from "zod";
@@ -11142,8 +11387,8 @@ var UserReferralSource = ({
   ...props
 }) => {
   var _a, _b;
-  const [closed, setClosed] = useState42(false);
-  const popUpRef = useRef21(null);
+  const [closed, setClosed] = useState44(false);
+  const popUpRef = useRef22(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: (_a = props.texts) == null ? void 0 : _a.pleaseSelectOption }),
     feedback: z6.string().optional()
@@ -11290,21 +11535,21 @@ var UserReferralSource = ({
 };
 
 // blocks/feedback/FeedbackRating.tsx
-import React91, { useEffect as useEffect32, useRef as useRef22, useState as useState43 } from "react";
+import React91, { useEffect as useEffect35, useRef as useRef23, useState as useState45 } from "react";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState43(false);
-  const [answered, setAnswered] = useState43(false);
-  const [clickedOption, setClickedOption] = useState43(null);
-  const [closingTimer, setClosingTimer] = useState43(5);
-  const popUpRef = useRef22(null);
+  const [closed, setClosed] = useState45(false);
+  const [answered, setAnswered] = useState45(false);
+  const [clickedOption, setClickedOption] = useState45(null);
+  const [closingTimer, setClosingTimer] = useState45(5);
+  const popUpRef = useRef23(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect32(() => {
+  useEffect35(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -11404,12 +11649,12 @@ var FeedbackRating = ({
 };
 
 // blocks/feedback/FeedbackEmoji.tsx
-import React92, { useState as useState44 } from "react";
+import React92, { useState as useState46 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState44(null);
-  const [loadingSubmit, setLoadingSubmit] = useState44(false);
-  const [feedbackText, setFeedbackText] = useState44("");
-  const [helperText, setHelperText] = useState44(false);
+  const [selectedEmoji, setSelectedEmoji] = useState46(null);
+  const [loadingSubmit, setLoadingSubmit] = useState46(false);
+  const [feedbackText, setFeedbackText] = useState46("");
+  const [helperText, setHelperText] = useState46(false);
   let emojis = [
     { icon: /* @__PURE__ */ React92.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React92.createElement(GoodEmoji, null), value: "good" },
@@ -11973,9 +12218,9 @@ var ContactForm = ({
 import React107 from "react";
 
 // blocks/cards/ActionCard.tsx
-import React102, { useState as useState45 } from "react";
+import React102, { useState as useState47 } from "react";
 var ActionCard = (props) => {
-  const [hovered, setHovered] = useState45(false);
+  const [hovered, setHovered] = useState47(false);
   return /* @__PURE__ */ React102.createElement("div", { className: "hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-gap-1" }, /* @__PURE__ */ React102.createElement(
     "div",
     {
@@ -12012,15 +12257,15 @@ var ActionCard = (props) => {
 };
 
 // blocks/cards/AdCard.tsx
-import React103, { useState as useState46, useEffect as useEffect33, useRef as useRef23 } from "react";
+import React103, { useState as useState48, useEffect as useEffect36, useRef as useRef24 } from "react";
 var AdCard = ({
   orientation = "vertical",
   ...props
 }) => {
-  const adRef = useRef23(null);
-  const [closed, setClosed] = useState46(false);
+  const adRef = useRef24(null);
+  const [closed, setClosed] = useState48(false);
   let duration = 0;
-  useEffect33(() => {
+  useEffect36(() => {
     if (duration) {
       const timeoutHide = setTimeout(() => {
         setClosed(true);
@@ -12208,7 +12453,7 @@ var PricingCard = ({
 };
 
 // blocks/cards/ItemCard.tsx
-import React105, { useEffect as useEffect34, useState as useState47 } from "react";
+import React105, { useEffect as useEffect37, useState as useState49 } from "react";
 var ItemCard = ({
   actions,
   counts,
@@ -12237,12 +12482,12 @@ var ItemCard = ({
     )
   };
   let headerActionsButtonStyle = "hawa-inline-block hawa-rounded hawa-p-1 hawa-text-sm hawa-text-gray-500 hover:hawa-bg-gray-100 focus:hawa-outline-none focus:hawa-ring-4 focus:hawa-ring-gray-200 dark:hawa-text-gray-400 dark:hover:hawa-bg-gray-700 dark:focus:hawa-ring-gray-700";
-  const [openActionHeader, setOpenActionHeader] = useState47(false);
+  const [openActionHeader, setOpenActionHeader] = useState49(false);
   function handleOpenActionHeader(e) {
     e.stopPropagation();
     setOpenActionHeader(!openActionHeader);
   }
-  useEffect34(() => {
+  useEffect37(() => {
     window.onclick = () => {
       if (openActionHeader) {
         setOpenActionHeader(false);
@@ -12569,9 +12814,9 @@ var ComparingPlans = (props) => {
 };
 
 // blocks/pricing/HorizontalPricing.tsx
-import React109, { useState as useState48 } from "react";
+import React109, { useState as useState50 } from "react";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState48("");
+  const [selectedCard, setSelectedCard] = useState50("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
@@ -12693,6 +12938,7 @@ export {
   AdCard,
   Alert,
   Announcement,
+  AppCommand,
   AppLanding,
   AppLayout,
   AppStores,
@@ -12772,6 +13018,7 @@ export {
   FeedbackRating,
   FileDropzone,
   FileUploader,
+  FullCommand,
   HorizontalPricing,
   Input,
   InterfaceSettings,
@@ -12881,7 +13128,10 @@ export {
   Usage,
   UserReferralSource,
   buttonVariants,
+  getHotkeyHandler,
+  getHotkeyMatcher,
   navigationMenuTriggerStyle,
+  parseHotkey,
   reducer,
   toast,
   useBreakpoint,
@@ -12893,6 +13143,7 @@ export {
   useMeasureDirty,
   useMediaQuery,
   useMultiStepDialog,
+  useShortcuts,
   useTabs,
   useToast,
   useWindowSize