@sikka/hawa 0.35.5-next → 0.36.0-next

package/dist/index.js

@@ -232,6 +232,7 @@ __export(components_exports, {
   reducer: () => reducer,
   toast: () => toast,
   useBreakpoint: () => useBreakpoint,
+  useClickOutside: () => useClickOutside,
   useClipboard: () => useClipboard,
   useDialogCarousel: () => useDialogCarousel,
   useFocusWithin: () => useFocusWithin,
@@ -1091,7 +1092,8 @@ var Chip = import_react5.default.forwardRef(
     icon,
     color,
     radius = "inherit",
-    dotType,
+    dot,
+    dotStatus = "none",
     ...rest
   }, ref) => {
     let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
@@ -1110,7 +1112,8 @@ var Chip = import_react5.default.forwardRef(
       normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
       large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
     };
-    let dotTypeStyles = {
+    let dotStatusStyles = {
+      none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
       available: "hawa-bg-green-500",
       unavailable: "hawa-bg-red-500"
     };
@@ -1138,10 +1141,10 @@ var Chip = import_react5.default.forwardRef(
             color ? colorStyles[color] : "hawa-border hawa-bg-none"
           )
         },
-        dotType && /* @__PURE__ */ import_react5.default.createElement(
+        dot && /* @__PURE__ */ import_react5.default.createElement(
           "span",
           {
-            className: cn(dotStyles[size], dotTypeStyles[dotType])
+            className: cn(dotStyles[size], dotStatusStyles[dotStatus])
           }
         ),
         icon && icon,
@@ -2658,7 +2661,7 @@ var Input = (0, import_react11.forwardRef)(
       auto: ""
     };
     let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
-    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
+    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm placeholder:hawa-text-muted-foreground";
     const handleChange = (e) => {
       let newValue = e.target.value;
       if (props.prefixText) {
@@ -2697,7 +2700,31 @@ var Input = (0, import_react11.forwardRef)(
           )
         },
         props.outsidePrefix
-      ), props.isLoading ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react11.default.createElement(
+      ), props.isLoading ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement(
+        Skeleton,
+        {
+          animation: "none",
+          className: "hawa-h-[40px] hawa-w-full !hawa-bg-destructive/[0.3]",
+          content: /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ import_react11.default.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "hawa-text-destructive"
+            },
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "M12 9v4" }),
+            /* @__PURE__ */ import_react11.default.createElement("path", { d: "M12 17h.01" })
+          ), /* @__PURE__ */ import_react11.default.createElement("span", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
+        }
+      )) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react11.default.createElement(
         "div",
         {
           className: cn(
@@ -2889,6 +2916,7 @@ TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
+var LOCAL_STORAGE_KEY = "datatable-column-visibility";
 var DataTable = ({
   columns,
   data,
@@ -2908,7 +2936,10 @@ var DataTable = ({
   );
   const [globalFilter, setGlobalFilter] = React23.useState("");
   const [expanded, setExpanded] = React23.useState({});
-  const [columnVisibility, setColumnVisibility] = React23.useState({});
+  const [columnVisibility, setColumnVisibility] = React23.useState(() => {
+    const savedVisibility = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedVisibility ? JSON.parse(savedVisibility) : {};
+  });
   const [rowSelection, setRowSelection] = React23.useState({});
   const table = (0, import_react_table.useReactTable)({
     data,
@@ -2938,12 +2969,20 @@ var DataTable = ({
     label: `${item} / ${pageText}`,
     value: item
   }));
+  React23.useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(columnVisibility));
+  }, [columnVisibility]);
   React23.useEffect(() => {
     setColumnVisibility((prev) => {
       let newColumnVisibility = {};
       columns.forEach((column) => {
         var _a2;
-        newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        const savedVisibility = prev[column.accessorKey];
+        if (savedVisibility !== void 0) {
+          newColumnVisibility[column.accessorKey] = savedVisibility;
+        } else {
+          newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+        }
       });
       return newColumnVisibility;
     });
@@ -3112,7 +3151,7 @@ var DataTable = ({
           }
           table.setPageIndex(page);
         },
-        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm"
+        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
       }
     )), /* @__PURE__ */ React23.createElement(
       DropdownMenu,
@@ -4277,7 +4316,7 @@ var SortButton = (props) => {
 };
 
 // elements/tabs/Tabs.tsx
-var React42 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react16 = require("react");
@@ -4693,33 +4732,42 @@ var useMeasureDirty = (ref) => {
   return rect;
 };
 
-// hooks/useOutsideClick.ts
-var import_react31 = __toESM(require("react"));
-var useOutsideClick = (callback) => {
-  const ref = import_react31.default.useRef(null);
-  import_react31.default.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback();
+// hooks/useClickOutside.ts
+var import_react31 = require("react");
+var DEFAULT_EVENTS = ["mousedown", "touchstart"];
+function useClickOutside(handler, events, nodes) {
+  const ref = (0, import_react31.useRef)();
+  (0, import_react31.useEffect)(() => {
+    const listener = (event) => {
+      const { target } = event != null ? event : {};
+      if (Array.isArray(nodes)) {
+        const shouldIgnore = (target == null ? void 0 : target.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(target) && target.tagName !== "HTML";
+        const shouldTrigger = nodes.every(
+          (node) => !!node && !event.composedPath().includes(node)
+        );
+        shouldTrigger && !shouldIgnore && handler();
+      } else if (ref.current && !ref.current.contains(target)) {
+        handler();
       }
     };
-    document.addEventListener("mousedown", handleClickOutside, true);
-    document.addEventListener("touchstart", handleClickOutside, true);
+    (events || DEFAULT_EVENTS).forEach(
+      (fn) => document.addEventListener(fn, listener)
+    );
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("touchstart", handleClickOutside, true);
+      (events || DEFAULT_EVENTS).forEach(
+        (fn) => document.removeEventListener(fn, listener)
+      );
     };
-  }, [ref, callback]);
+  }, [ref, handler, nodes]);
   return ref;
-};
-var useOutsideClick_default = useOutsideClick;
+}
 
 // elements/tabs/Tabs.tsx
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_tailwind_variants = require("tailwind-variants");
 
 // elements/floatBox/FloatBox.tsx
-var React41 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var FloatBox = ({
   className,
   open,
@@ -4757,7 +4805,7 @@ var FloatBox = ({
     right: "hawa-arrow-default-left",
     left: "hawa-arrow-default-right"
   };
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "div",
     {
       className: cn(
@@ -4768,8 +4816,8 @@ var FloatBox = ({
       "data-side": side,
       "data-floatbox-state": open ? "open" : "closed"
     },
-    withArrow && /* @__PURE__ */ React41.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React41.createElement("span", null, props.children)
+    withArrow && /* @__PURE__ */ React40.createElement("div", { className: cn(arrowDirection[side]) }),
+    /* @__PURE__ */ React40.createElement("span", null, props.children)
   );
 };
 
@@ -4832,8 +4880,8 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React42.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React42.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React42.createElement(
+var TabsContext = React41.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React41.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React41.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -4844,11 +4892,11 @@ var Tabs = React42.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React42.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React41.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-var TabsList = React42.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React42.useContext(TabsContext);
-  return /* @__PURE__ */ React42.createElement(
+var TabsList = React41.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React41.useContext(TabsContext);
+  return /* @__PURE__ */ React41.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -4861,11 +4909,11 @@ var TabsList = React42.forwardRef(({ className, ...props }, ref) => {
     }
   );
 });
-var TabsTrigger = React42.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React42.useContext(TabsContext);
-  const tabTriggerRef = React42.useRef(null);
+var TabsTrigger = React41.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React41.useContext(TabsContext);
+  const tabTriggerRef = React41.useRef(null);
   const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React41.createElement(
     TabsPrimitive.Trigger,
     {
       ref: tabTriggerRef,
@@ -4877,8 +4925,8 @@ var TabsTrigger = React42.forwardRef(({ className, chipProps, ...props }, ref) =
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React42.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React42.createElement(
+    chipProps && /* @__PURE__ */ React41.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React41.createElement(
       FloatBox,
       {
         withArrow: true,
@@ -4891,7 +4939,7 @@ var TabsTrigger = React42.forwardRef(({ className, chipProps, ...props }, ref) =
     )
   );
 });
-var TabsContent = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement(
+var TabsContent = React41.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React41.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -5006,7 +5054,6 @@ var Select = ({
             )
           },
           unstyled: true,
-          autoFocus: true,
           components: props.hideIndicator ? {
             Option,
             Menu: Menu2,
@@ -5096,15 +5143,15 @@ var Select = ({
 };
 
 // elements/switch/Switch.tsx
-var React44 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var Switch = React44.forwardRef(
+var Switch = React43.forwardRef(
   ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
-    const [parentDirection, setParentDirection] = React44.useState(
+    const [parentDirection, setParentDirection] = React43.useState(
       null
     );
-    const parentRef = React44.useRef(null);
-    React44.useEffect(() => {
+    const parentRef = React43.useRef(null);
+    React43.useEffect(() => {
       var _a;
       const parentNode = (_a = parentRef.current) == null ? void 0 : _a.parentNode;
       if (parentNode) {
@@ -5132,13 +5179,13 @@ var Switch = React44.forwardRef(
       full: "hawa-rounded-full",
       inherit: "hawa-rounded-inner"
     };
-    return /* @__PURE__ */ React44.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
       },
-      /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React43.createElement(
         SwitchPrimitives.Root,
         {
           className: cn(
@@ -5152,7 +5199,7 @@ var Switch = React44.forwardRef(
           ...props,
           ref
         },
-        /* @__PURE__ */ React44.createElement(
+        /* @__PURE__ */ React43.createElement(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -5166,14 +5213,14 @@ var Switch = React44.forwardRef(
           }
         )
       ),
-      label && /* @__PURE__ */ React44.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+      label && /* @__PURE__ */ React43.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
     );
   }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // elements/checkbox/Checkbox.tsx
-var React45 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var Checkbox = ({
   id,
@@ -5193,7 +5240,7 @@ var Checkbox = ({
     lg: 0.9,
     xl: 1
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: cn(
@@ -5201,7 +5248,7 @@ var Checkbox = ({
         size === "default" ? "hawa-items-top" : "hawa-items-center"
       )
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(
       CheckboxElement,
       {
         ...props,
@@ -5211,7 +5258,7 @@ var Checkbox = ({
         id
       }
     ),
-    (label || helperText) && /* @__PURE__ */ React45.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React45.createElement(
+    (label || helperText) && /* @__PURE__ */ React44.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5225,7 +5272,7 @@ var Checkbox = ({
         }
       },
       label
-    ), sublabel && /* @__PURE__ */ React45.createElement(
+    ), sublabel && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5235,7 +5282,7 @@ var Checkbox = ({
         )
       },
       sublabel
-    ), helperText && !disabled && /* @__PURE__ */ React45.createElement(
+    ), helperText && !disabled && /* @__PURE__ */ React44.createElement(
       "label",
       {
         htmlFor: id,
@@ -5248,7 +5295,7 @@ var Checkbox = ({
     ))
   );
 };
-var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+var CheckboxElement = React44.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
   let checkboxRadius = {
     none: "hawa-rounded-none",
     inherit: "hawa-rounded-sm",
@@ -5270,7 +5317,7 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
     lg: "1em",
     xl: "1.25em"
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     CheckboxPrimitive.Root,
     {
       ref,
@@ -5282,14 +5329,14 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
       ),
       ...props
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React44.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn(
           "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
         )
       },
-      /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React44.createElement(
         "svg",
         {
           "aria-label": "Check Mark",
@@ -5300,7 +5347,7 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
           height: checkboxIndicatorSizes[size],
           width: checkboxIndicatorSizes[size]
         },
-        /* @__PURE__ */ React45.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+        /* @__PURE__ */ React44.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
       ),
       " "
     )
@@ -5309,9 +5356,9 @@ var CheckboxElement = React45.forwardRef(({ radius = "inherit", size = "default"
 CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
 
 // elements/progress/Progress.tsx
-var React46 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React46.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React46.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React46.createElement(
+var Progress = React45.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React45.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React45.createElement(Label2, { ...props.labelProps }, props.label), /* @__PURE__ */ React45.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -5321,7 +5368,7 @@ var Progress = React46.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React46.createElement(
+  /* @__PURE__ */ React45.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",
@@ -7228,7 +7275,7 @@ var PhoneInput = ({
       onChange: handleInputChange,
       placeholder: props.placeholder,
       className: cn(
-        "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
+        "placeholder:hawa-text-muted-foreground hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
       ...inputProps
     }
@@ -7306,7 +7353,7 @@ var PinInput = ({
         id: `input-${index}`,
         pattern: "[0-9]*",
         className: cn(
-          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center",
+          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center placeholder:hawa-text-muted-foreground",
           width === "full" ? "hawa-w-full" : "hawa-w-10"
         ),
         onChange: (e) => handleChange(e, index),
@@ -7337,21 +7384,21 @@ var StopPropagationWrapper = (props) => {
 };
 
 // elements/scrollArea/ScrollArea.tsx
-var React53 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
-var ScrollArea = React53.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React53.createElement(
+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__ */ React53.createElement(ScrollAreaPrimitive.Viewport, { className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]" }, children),
-  /* @__PURE__ */ React53.createElement(ScrollBar, { orientation }),
-  /* @__PURE__ */ React53.createElement(ScrollAreaPrimitive.Corner, null)
+  /* @__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 = React53.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React53.createElement(
+var ScrollBar = React52.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React52.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -7364,7 +7411,7 @@ var ScrollBar = React53.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React53.createElement(
+  /* @__PURE__ */ React52.createElement(
     ScrollAreaPrimitive.ScrollAreaThumb,
     {
       className: cn(
@@ -7441,7 +7488,7 @@ var ColorPicker = ({
       value: selectedColor,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
-        "hawa-border hawa-border-l-0 hawa-border-l-transparent"
+        "hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground"
         // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
       ),
       style: {
@@ -7847,6 +7894,27 @@ var UncheckMark = ({ size = "default", className }) => {
     )
   );
 };
+var MenuIcon = () => /* @__PURE__ */ import_react44.default.createElement(
+  "svg",
+  {
+    "aria-label": "Menu Button",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: 0,
+    viewBox: "0 0 20 20",
+    "aria-hidden": "true",
+    height: "1.6em",
+    width: "1.6em"
+  },
+  /* @__PURE__ */ import_react44.default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+    }
+  )
+);
 
 // elements/passwordInput/PasswordInput.tsx
 var PasswordStrengthIndicator = ({ strength }) => {
@@ -7982,9 +8050,9 @@ var PasswordInput = ({
 };
 
 // elements/slider/Slider.tsx
-var React61 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var Slider = React61.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React61.createElement(
+var Slider = React60.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React60.createElement(
   SliderPrimitive.Root,
   {
     ref,
@@ -7994,13 +8062,13 @@ var Slider = React61.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props
   },
-  /* @__PURE__ */ React61.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-border hawa-bg-background" }, /* @__PURE__ */ React61.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
-  /* @__PURE__ */ React61.createElement(SliderPrimitive.Thumb, { className: "hawa-block hawa-h-5 hawa-w-5 hawa-rounded-full hawa-border-2 hawa-border-primary hawa-bg-background hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50" })
+  /* @__PURE__ */ React60.createElement(SliderPrimitive.Track, { className: "hawa-relative hawa-h-2 hawa-w-full hawa-grow hawa-overflow-hidden hawa-rounded-full hawa-border hawa-bg-background" }, /* @__PURE__ */ React60.createElement(SliderPrimitive.Range, { className: "hawa-absolute hawa-h-full hawa-bg-primary" })),
+  /* @__PURE__ */ React60.createElement(SliderPrimitive.Thumb, { className: "hawa-block hawa-h-5 hawa-w-5 hawa-rounded-full hawa-border-2 hawa-border-primary hawa-bg-background hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50" })
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // elements/simpleTable/SimpleTable.tsx
-var React62 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var SimpleTable = ({
   columns,
@@ -8015,7 +8083,7 @@ var SimpleTable = ({
     columns,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)()
   });
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "div",
     {
       className: cn(
@@ -8023,8 +8091,8 @@ var SimpleTable = ({
         classNames
       )
     },
-    props.isLoading ? /* @__PURE__ */ React62.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React62.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React62.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React62.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React62.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ React62.createElement(
+    props.isLoading ? /* @__PURE__ */ React61.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React61.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React61.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React61.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React61.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ React61.createElement(
         TableHead,
         {
           condensed: props.condensed,
@@ -8039,7 +8107,7 @@ var SimpleTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React62.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React62.createElement(
+    })))), /* @__PURE__ */ React61.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React61.createElement(
       TableRow,
       {
         key: row.id,
@@ -8047,7 +8115,7 @@ var SimpleTable = ({
       },
       row.getVisibleCells().map((cell) => {
         var _a2;
-        return /* @__PURE__ */ React62.createElement(
+        return /* @__PURE__ */ React61.createElement(
           TableCell,
           {
             dir: props.direction,
@@ -8063,7 +8131,7 @@ var SimpleTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React62.createElement(TableRow, null, /* @__PURE__ */ React62.createElement(
+    )) : /* @__PURE__ */ React61.createElement(TableRow, null, /* @__PURE__ */ React61.createElement(
       TableCell,
       {
         colSpan: columns.length,
@@ -8075,12 +8143,12 @@ var SimpleTable = ({
 };
 
 // elements/separator/Separator.tsx
-var React63 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 var Separator2 = ({
   className,
   orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ React63.createElement(
+}) => /* @__PURE__ */ React62.createElement(
   "div",
   {
     className: cn(
@@ -8445,7 +8513,7 @@ var Count = (props) => {
 };
 
 // elements/toast/Toast.tsx
-var React68 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
 var import_class_variance_authority4 = require("class-variance-authority");
 var toastVariants = (0, import_class_variance_authority4.cva)(
@@ -8473,7 +8541,7 @@ var sizeStyles = {
   sm: "hawa-text-xs"
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var ToastViewport = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -8485,8 +8553,8 @@ var ToastViewport = React68.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React68.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
-  return /* @__PURE__ */ React68.createElement(
+var Toast = React67.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
+  return /* @__PURE__ */ React67.createElement(
     ToastPrimitives.Root,
     {
       ref,
@@ -8501,8 +8569,8 @@ var Toast = React68.forwardRef(({ className, variant, severity = "none", directi
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React68.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React68.createElement(
+var ToastAction = React67.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React67.createElement(
     ToastPrimitives.Action,
     {
       ref,
@@ -8520,7 +8588,7 @@ var ToastAction = React68.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var ToastClose = React67.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
   ToastPrimitives.Close,
   {
     ref,
@@ -8534,7 +8602,7 @@ var ToastClose = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE
     "toast-close": "",
     ...props
   },
-  /* @__PURE__ */ React68.createElement(
+  /* @__PURE__ */ React67.createElement(
     "svg",
     {
       "aria-label": "Close Icon",
@@ -8543,7 +8611,7 @@ var ToastClose = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React67.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8554,7 +8622,7 @@ var ToastClose = React68.forwardRef(({ className, ...props }, ref) => /* @__PURE
   )
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React68.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var ToastTitle = React67.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React67.createElement(
   ToastPrimitives.Title,
   {
     ref,
@@ -8567,7 +8635,7 @@ var ToastTitle = React68.forwardRef(({ className, size = "default", ...props },
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React68.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React68.createElement(
+var ToastDescription = React67.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React67.createElement(
   ToastPrimitives.Description,
   {
     ref,
@@ -8831,13 +8899,13 @@ var Stats = ({
 };
 
 // layout/sidebar/Sidebar.tsx
-var React74 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 var AccordionPrimitive6 = __toESM(require("@radix-ui/react-accordion"));
 var Accordion2 = AccordionPrimitive6.Root;
 var triggerStyles = "hawa-flex hawa-flex-1 hawa-items-center hawa-duration-75 hawa-select-none hawa-cursor-pointer  hawa-rounded hawa-justify-between hawa-p-2 hawa-px-3 hawa-font-medium hawa-transition-all  [&[data-state=open]>svg]:hawa--rotate-90";
-var AccordionItem2 = React74.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React74.createElement(AccordionPrimitive6.Item, { ref, className: cn(className), ...props }));
+var AccordionItem2 = React73.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React73.createElement(AccordionPrimitive6.Item, { ref, className: cn(className), ...props }));
 AccordionItem2.displayName = "AccordionItem";
-var AccordionTrigger2 = React74.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React74.createElement(AccordionPrimitive6.Header, { className: "flex" }, /* @__PURE__ */ React74.createElement(
+var AccordionTrigger2 = React73.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React73.createElement(AccordionPrimitive6.Header, { className: "flex" }, /* @__PURE__ */ React73.createElement(
   AccordionPrimitive6.Trigger,
   {
     ref,
@@ -8845,7 +8913,7 @@ var AccordionTrigger2 = React74.forwardRef(({ className, showArrow, children, ..
     ...props
   },
   children,
-  showArrow && /* @__PURE__ */ React74.createElement(
+  showArrow && /* @__PURE__ */ React73.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -8856,11 +8924,11 @@ var AccordionTrigger2 = React74.forwardRef(({ className, showArrow, children, ..
       width: "1em",
       className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
     },
-    /* @__PURE__ */ React74.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__ */ React73.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" })
   )
 )));
 AccordionTrigger2.displayName = AccordionPrimitive6.Trigger.displayName;
-var AccordionContent2 = React74.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React74.createElement(
+var AccordionContent2 = React73.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React73.createElement(
   AccordionPrimitive6.Content,
   {
     ref,
@@ -8870,7 +8938,7 @@ var AccordionContent2 = React74.forwardRef(({ className, children, ...props }, r
     ),
     ...props
   },
-  /* @__PURE__ */ React74.createElement("div", null, children)
+  /* @__PURE__ */ React73.createElement("div", null, children)
 ));
 AccordionContent2.displayName = AccordionPrimitive6.Content.displayName;
 var SidebarGroup = ({
@@ -8886,7 +8954,7 @@ var SidebarGroup = ({
   ...props
 }) => {
   const LinkComponent = props.LinkComponent || "a";
-  return /* @__PURE__ */ React74.createElement("div", { className: "hawa-m-2" }, title && /* @__PURE__ */ React74.createElement("h3", { className: "hawa-mb-1 hawa-font-bold" }, title), /* @__PURE__ */ React74.createElement("ul", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React73.createElement("div", { className: "hawa-m-2" }, title && /* @__PURE__ */ React73.createElement("h3", { className: "hawa-mb-1 hawa-font-bold" }, title), /* @__PURE__ */ React73.createElement("ul", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React73.createElement(
     Accordion2,
     {
       value: openedItem,
@@ -8897,7 +8965,7 @@ var SidebarGroup = ({
       collapsible: true,
       className: "hawa-flex hawa-flex-col hawa-gap-1"
     },
-    items.map((item, idx) => /* @__PURE__ */ React74.createElement(
+    items.map((item, idx) => /* @__PURE__ */ React73.createElement(
       SidebarItem,
       {
         isOpen,
@@ -8925,14 +8993,14 @@ var SidebarItem = ({
     return props.selectedItem === value ? "hawa-bg-primary/90 hawa-text-primary-foreground  hawa-cursor-default" : "hover:hawa-bg-primary/10";
   };
   if (item.subitems) {
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React73.createElement(
       AccordionItem2,
       {
         value: item.value,
         className: "hawa-overflow-x-clip ",
         dir: direction
       },
-      /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React73.createElement(
         AccordionTrigger2,
         {
           className: cn(
@@ -8944,7 +9012,7 @@ var SidebarItem = ({
           ),
           showArrow: isOpen
         },
-        /* @__PURE__ */ React74.createElement(
+        /* @__PURE__ */ React73.createElement(
           "div",
           {
             className: cn(
@@ -8952,7 +9020,7 @@ var SidebarItem = ({
             )
           },
           item.icon && item.icon,
-          /* @__PURE__ */ React74.createElement(
+          /* @__PURE__ */ React73.createElement(
             "span",
             {
               className: cn(
@@ -8964,14 +9032,14 @@ var SidebarItem = ({
           )
         )
       ),
-      item.subitems && /* @__PURE__ */ React74.createElement(AccordionContent2, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React74.createElement(
+      item.subitems && /* @__PURE__ */ React73.createElement(AccordionContent2, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React73.createElement(
         "div",
         {
           className: cn(
             "hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
           )
         },
-        item.subitems.map((subitem, idx) => /* @__PURE__ */ React74.createElement(
+        item.subitems.map((subitem, idx) => /* @__PURE__ */ React73.createElement(
           LinkComponent,
           {
             href: subitem.slug,
@@ -9002,7 +9070,7 @@ var SidebarItem = ({
       ))
     );
   } else {
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React73.createElement(
       LinkComponent,
       {
         href: item.slug,
@@ -9026,7 +9094,7 @@ var SidebarItem = ({
           "hawa-overflow-x-clip "
         )
       },
-      /* @__PURE__ */ React74.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React73.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React73.createElement(
         "span",
         {
           className: cn(
@@ -9036,7 +9104,7 @@ var SidebarItem = ({
         },
         item.label,
         " ",
-        item.badge && /* @__PURE__ */ React74.createElement(Chip, { label: item.badge.label, color: "hyper", size: "small" })
+        item.badge && /* @__PURE__ */ React73.createElement(Chip, { label: item.badge.label, color: "hyper", size: "small" })
       ))
     );
   }
@@ -9205,6 +9273,15 @@ var AppLayout = ({
   );
   const [openSideMenu, setOpenSideMenu] = (0, import_react57.useState)(true);
   const [keepDrawerOpen, setKeepDrawerOpen] = (0, import_react57.useState)(keepOpen);
+  const handleClickOutside = () => {
+    if (typeof window !== "undefined") {
+      if (window.innerWidth < 600) {
+        setKeepDrawerOpen(false);
+        setOpenSideMenu(false);
+      }
+    }
+  };
+  const ref = useClickOutside(handleClickOutside);
   (0, import_react57.useEffect)(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
@@ -9223,25 +9300,14 @@ var AppLayout = ({
   (0, import_react57.useEffect)(() => {
     setKeepDrawerOpen(keepOpen);
   }, [setKeepOpen]);
-  const handleClickOutside = () => {
-    if (typeof window !== "undefined") {
-      if (keepDrawerOpen)
-        return;
-      if (window.innerWidth < 600) {
-        setKeepDrawerOpen(false);
-        setOpenSideMenu(false);
-      }
-    }
-  };
-  const ref = useOutsideClick_default(handleClickOutside);
-  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
   (0, import_react57.useEffect)(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
     } else {
       setOpenSideMenu(false);
     }
-  }, [size]);
+  }, [size, keepDrawerOpen]);
+  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
   return /* @__PURE__ */ import_react57.default.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ import_react57.default.createElement(
     "div",
     {
@@ -9331,9 +9397,7 @@ var AppLayout = ({
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
       },
-      onMouseEnter: () => {
-        setOpenSideMenu(true);
-      },
+      onMouseEnter: () => setOpenSideMenu(true),
       onMouseLeave: () => {
         if (size > 600) {
           if (keepDrawerOpen) {
@@ -9366,23 +9430,23 @@ var AppLayout = ({
       !props.header && /* @__PURE__ */ import_react57.default.createElement(
         "img",
         {
+          src: props.logoLink,
           className: cn(
             "hawa-h-9 hawa-opacity-0 hawa-transition-all",
             !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.fullLogoImg
-          ),
-          src: props.logoLink
+          )
         }
       ),
       size > 600 ? /* @__PURE__ */ import_react57.default.createElement(
         "img",
         {
+          src: props.logoSymbol,
           className: cn(
             "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
             openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.symbolLogoImg
-          ),
-          src: props.logoSymbol
+          )
         }
       ) : null
     ),
@@ -9401,22 +9465,14 @@ var AppLayout = ({
         SidebarGroup,
         {
           direction,
-          onItemClick: (values) => {
-            if (clickedItem) {
-              clickedItem(values);
-            }
-          },
-          onSubItemClick: (values) => {
-            if (clickedItem) {
-              clickedItem(values);
-            }
-          },
           selectedItem: currentPage,
           openedItem: openedSidebarItem,
           setOpenedItem: (e) => setOpenedSidebarItem(e),
           isOpen: keepDrawerOpen || openSideMenu,
           items: props.drawerItems,
-          LinkComponent: DrawerLinkComponent
+          LinkComponent: DrawerLinkComponent,
+          onItemClick: (values) => clickedItem && clickedItem(values),
+          onSubItemClick: (values) => clickedItem && clickedItem(values)
         }
       )
     ),
@@ -9494,27 +9550,6 @@ var AppLayout = ({
     props.children
   ));
 };
-var MenuIcon = () => /* @__PURE__ */ import_react57.default.createElement(
-  "svg",
-  {
-    "aria-label": "Menu Button",
-    stroke: "currentColor",
-    fill: "currentColor",
-    strokeWidth: 0,
-    viewBox: "0 0 20 20",
-    "aria-hidden": "true",
-    height: "1.6em",
-    width: "1.6em"
-  },
-  /* @__PURE__ */ import_react57.default.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-    }
-  )
-);
 
 // layout/appTopbar/AppTopbar.tsx
 var import_react58 = __toESM(require("react"));
@@ -9622,14 +9657,14 @@ var AppTopbar = ({ ...props }) => {
 };
 
 // layout/appMenubar/AppMenubar.tsx
-var React79 = __toESM(require("react"));
+var React78 = __toESM(require("react"));
 var MenubarPrimitive = __toESM(require("@radix-ui/react-menubar"));
 var MenubarMenu = MenubarPrimitive.Menu;
 var MenubarGroup = MenubarPrimitive.Group;
 var MenubarPortal = MenubarPrimitive.Portal;
 var MenubarSub = MenubarPrimitive.Sub;
 var MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-var Menubar = React79.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var Menubar = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.Root,
   {
     ref,
@@ -9641,7 +9676,7 @@ var Menubar = React79.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React79.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarTrigger = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -9653,7 +9688,7 @@ var MenubarTrigger = React79.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React79.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarSubTrigger = React78.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.SubTrigger,
   {
     ref,
@@ -9665,7 +9700,7 @@ var MenubarSubTrigger = React79.forwardRef(({ className, inset, children, ...pro
     ...props
   },
   children,
-  /* @__PURE__ */ React79.createElement(
+  /* @__PURE__ */ React78.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -9680,11 +9715,11 @@ var MenubarSubTrigger = React79.forwardRef(({ className, inset, children, ...pro
       strokeLinejoin: "round",
       className: "hawa-icon hawa-ml-auto"
     },
-    /* @__PURE__ */ React79.createElement("path", { d: "m9 18 6-6-6-6" })
+    /* @__PURE__ */ React78.createElement("path", { d: "m9 18 6-6-6-6" })
   )
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React79.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarSubContent = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.SubContent,
   {
     ref,
@@ -9696,8 +9731,8 @@ var MenubarSubContent = React79.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React79.forwardRef(
-  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ React79.createElement(MenubarPrimitive.Portal, null, /* @__PURE__ */ React79.createElement(
+var MenubarContent = React78.forwardRef(
+  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ React78.createElement(MenubarPrimitive.Portal, null, /* @__PURE__ */ React78.createElement(
     MenubarPrimitive.Content,
     {
       ref,
@@ -9713,7 +9748,7 @@ var MenubarContent = React79.forwardRef(
   ))
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React79.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarItem = React78.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.Item,
   {
     ref,
@@ -9726,7 +9761,7 @@ var MenubarItem = React79.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React79.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarCheckboxItem = React78.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.CheckboxItem,
   {
     ref,
@@ -9737,7 +9772,7 @@ var MenubarCheckboxItem = React79.forwardRef(({ className, children, checked, ..
     checked,
     ...props
   },
-  /* @__PURE__ */ React79.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React79.createElement(MenubarPrimitive.ItemIndicator, null, /* @__PURE__ */ React79.createElement(
+  /* @__PURE__ */ React78.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React78.createElement(MenubarPrimitive.ItemIndicator, null, /* @__PURE__ */ React78.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -9751,12 +9786,12 @@ var MenubarCheckboxItem = React79.forwardRef(({ className, children, checked, ..
       strokeLinejoin: "round",
       className: "hawa-icon"
     },
-    /* @__PURE__ */ React79.createElement("path", { d: "M20 6 9 17l-5-5" })
+    /* @__PURE__ */ React78.createElement("path", { d: "M20 6 9 17l-5-5" })
   ))),
   children
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React79.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarRadioItem = React78.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.RadioItem,
   {
     ref,
@@ -9766,7 +9801,7 @@ var MenubarRadioItem = React79.forwardRef(({ className, children, ...props }, re
     ),
     ...props
   },
-  /* @__PURE__ */ React79.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React79.createElement(MenubarPrimitive.ItemIndicator, null, /* @__PURE__ */ React79.createElement(
+  /* @__PURE__ */ React78.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React78.createElement(MenubarPrimitive.ItemIndicator, null, /* @__PURE__ */ React78.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -9780,12 +9815,12 @@ var MenubarRadioItem = React79.forwardRef(({ className, children, ...props }, re
       strokeLinejoin: "round",
       className: "hawa-h-2 hawa-w-2 hawa-fill-current"
     },
-    /* @__PURE__ */ React79.createElement("circle", { cx: "12", cy: "12", r: "10" })
+    /* @__PURE__ */ React78.createElement("circle", { cx: "12", cy: "12", r: "10" })
   ))),
   children
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React79.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarLabel = React78.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.Label,
   {
     ref,
@@ -9798,7 +9833,7 @@ var MenubarLabel = React79.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React79.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React79.createElement(
+var MenubarSeparator = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React78.createElement(
   MenubarPrimitive.Separator,
   {
     ref,
@@ -9811,7 +9846,7 @@ var MenubarShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "span",
     {
       className: cn(
@@ -13054,6 +13089,7 @@ var Usage = (props) => {
   reducer,
   toast,
   useBreakpoint,
+  useClickOutside,
   useClipboard,
   useDialogCarousel,
   useFocusWithin,