@sikka/hawa 0.31.9-next → 0.31.11-next

package/dist/layout/index.mjs

@@ -17,8 +17,9 @@ import {
   cn
 } from "../chunk-MQWYXMSK.mjs";
 import {
-  useBreakpoint
-} from "../chunk-UDCDD66A.mjs";
+  useBreakpoint,
+  useOutsideClick_default
+} from "../chunk-JU6Q4Q3T.mjs";
 
 // layout/stats/Stats.tsx
 import React from "react";
@@ -420,11 +421,15 @@ var AppLayout = ({
       lg: closeDrawerWidth
     }
   };
-  const ref = useRef(null);
+  const drawerRef = useRef(null);
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = useState2("");
   const [size, setSize] = useState2(1200);
   const [openSideMenu, setOpenSideMenu] = useState2(true);
+  const handleClickOutside = () => {
+    setOpenSideMenu(false);
+  };
+  const ref = useOutsideClick_default(handleClickOutside);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -445,17 +450,6 @@ var AppLayout = ({
       setOpenSideMenu(false);
     }
   }, [size]);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
-        setOpenSideMenu(false);
-      }
-    };
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [keepOpen]);
   return /* @__PURE__ */ React5.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ React5.createElement(
     "div",
     {
@@ -558,7 +552,7 @@ var AppLayout = ({
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all",
+        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
         isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
         "hawa-h-[calc(100dvh)]",
         "hawa-bg-primary-foreground",

package/dist/tabs/index.js

@@ -39,7 +39,7 @@ __export(tabs_exports, {
 module.exports = __toCommonJS(tabs_exports);
 
 // elements/tabs/Tabs.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react = require("react");
@@ -122,6 +122,9 @@ var useMeasureDirty = (ref) => {
   return rect;
 };
 
+// hooks/useOutsideClick.ts
+var import_react16 = __toESM(require("react"));
+
 // elements/tabs/Tabs.tsx
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 
@@ -136,8 +139,8 @@ function cn(...inputs) {
 var import_tailwind_variants = require("tailwind-variants");
 
 // elements/chip/Chip.tsx
-var import_react16 = __toESM(require("react"));
-var Chip = import_react16.default.forwardRef(
+var import_react17 = __toESM(require("react"));
+var Chip = import_react17.default.forwardRef(
   ({
     label,
     size = "normal",
@@ -179,7 +182,7 @@ var Chip = import_react16.default.forwardRef(
       oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
     };
     if (label) {
-      return /* @__PURE__ */ import_react16.default.createElement(
+      return /* @__PURE__ */ import_react17.default.createElement(
         "span",
         {
           ...rest,
@@ -191,7 +194,7 @@ var Chip = import_react16.default.forwardRef(
             color ? colorStyles[color] : "hawa-border hawa-bg-none"
           )
         },
-        dotType && /* @__PURE__ */ import_react16.default.createElement(
+        dotType && /* @__PURE__ */ import_react17.default.createElement(
           "span",
           {
             className: cn(dotStyles[size], dotTypeStyles[dotType])
@@ -201,7 +204,7 @@ var Chip = import_react16.default.forwardRef(
         label
       );
     } else {
-      return /* @__PURE__ */ import_react16.default.createElement(
+      return /* @__PURE__ */ import_react17.default.createElement(
         "span",
         {
           ...rest,
@@ -217,7 +220,7 @@ var Chip = import_react16.default.forwardRef(
 );
 
 // elements/floatBox/FloatBox.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var FloatBox = ({
   className,
   open,
@@ -255,7 +258,7 @@ var FloatBox = ({
     right: "hawa-arrow-default-left",
     left: "hawa-arrow-default-right"
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: cn(
@@ -266,8 +269,8 @@ var FloatBox = ({
       "data-side": side,
       "data-floatbox-state": open ? "open" : "closed"
     },
-    withArrow && /* @__PURE__ */ React10.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React10.createElement("span", null, props.children)
+    withArrow && /* @__PURE__ */ React11.createElement("div", { className: cn(arrowDirection[side]) }),
+    /* @__PURE__ */ React11.createElement("span", null, props.children)
   );
 };
 
@@ -330,8 +333,8 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React11.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React11.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var TabsContext = React12.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React12.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React12.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -342,11 +345,11 @@ var Tabs = React11.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React11.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React12.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-var TabsList = React11.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React11.useContext(TabsContext);
-  return /* @__PURE__ */ React11.createElement(
+var TabsList = React12.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React12.useContext(TabsContext);
+  return /* @__PURE__ */ React12.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -359,11 +362,11 @@ var TabsList = React11.forwardRef(({ className, ...props }, ref) => {
     }
   );
 });
-var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React11.useContext(TabsContext);
-  const tabTriggerRef = React11.useRef(null);
+var TabsTrigger = React12.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React12.useContext(TabsContext);
+  const tabTriggerRef = React12.useRef(null);
   const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     TabsPrimitive.Trigger,
     {
       ref: tabTriggerRef,
@@ -375,8 +378,8 @@ var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) =
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React11.createElement(
+    chipProps && /* @__PURE__ */ React12.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React12.createElement(
       FloatBox,
       {
         withArrow: true,
@@ -389,7 +392,7 @@ var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) =
     )
   );
 });
-var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
   TabsPrimitive.Content,
   {
     ref,

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"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\",\n      underlined:\n        \"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\",\n      underlined_tabs:\n        \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-border-e-2 hawa-border-e-primary\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-border-b-2 hawa-border-b-primary\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n      underlined_tabs:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined\",\n      orientation: \"horizontal\",\n      class:\n        \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n    },\n    {\n      variant: \"underlined\",\n      orientation: \"vertical\",\n      class:\n        \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-rounded-b-none\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-rounded-e-none\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n  orientation?: OrientationType;\n  variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n  <TabsPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-gap-2\",\n      orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n      className,\n    )}\n    {...props}\n  >\n    <TabsContext.Provider value={{ orientation, variant }}>\n      {props.children}\n    </TabsContext.Provider>\n  </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        tabsListVariant({ variant, orientation }),\n        orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Trigger\n> & {\n  chipProps?: ChipTypes;\n  className?: string;\n  showPopover?: boolean;\n  popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n  const tabTriggerRef = React.useRef(null);\n  const { width } = useMeasureDirty(tabTriggerRef);\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={tabTriggerRef}\n      className={cn(\n        tabsTriggerVariant({ variant, orientation }),\n        \"hawa-relative\",\n        className,\n      )}\n      {...props}\n    >\n      {props.children}\n      {chipProps && <Chip {...chipProps} />}\n\n      <FloatBox\n        withArrow\n        align={orientation === \"vertical\" ? \"start\" : \"start\"}\n        side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n        sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n        open={props.showPopover}\n      >\n        {props.popoverContent}\n      </FloatBox>\n    </TabsPrimitive.Trigger>\n  );\n});\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n  typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n  isOpen: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n  const [open, setOpen] = useState<boolean>(value);\n  const onOpen = () => setOpen(true);\n  const onClose = () => setOpen(false);\n\n  return {\n    isOpen: open,\n    onOpen: onOpen,\n    onClose: onClose\n  };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n  const [value, setValue] = useState(false);\n  const ref = useRef<any>(null);\n  const handleMouseOver = () => setValue(true);\n  const handleMouseOut = () => setValue(false);\n  useEffect(\n    () => {\n      const node = ref.current;\n      if (node) {\n        node.addEventListener(\"mouseover\", handleMouseOver);\n        node.addEventListener(\"mouseout\", handleMouseOut);\n        return () => {\n          node.removeEventListener(\"mouseover\", handleMouseOver);\n          node.removeEventListener(\"mouseout\", handleMouseOut);\n        };\n      }\n    },\n    [ref.current] // Recall only if ref changes\n  );\n  return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE;\n  return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n  | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n  | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n  | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n  | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n  toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n      };\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        )\n      };\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id);\n        });\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n        )\n      };\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return { ...state, toasts: [] };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId)\n      };\n  }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action);\n  listeners.forEach((listener) => {\n    listener(memoryState);\n  });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n  const id = genId();\n\n  const update = (props: ToasterToastProps) =>\n    dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      }\n    }\n  });\n\n  return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState);\n\n  React.useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, [state]);\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n  };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [startDragX, setStartDragX] = useState(0);\n  const [scrollLeft, setScrollLeft] = useState(0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const findClosestSnapPoint = (scrollLeft: number): number => {\n    return Math.round(scrollLeft / imageWidth) * imageWidth;\n  };\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    setIsDragging(true);\n    setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n    setScrollLeft(containerRef.current!.scrollLeft);\n  };\n\n  const handleMouseLeave = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleDragEnd = () => {\n    setIsDragging(false);\n    const closestSnapPoint = findClosestSnapPoint(\n      containerRef.current!.scrollLeft\n    );\n    containerRef.current!.scrollTo({\n      left: closestSnapPoint,\n      behavior: \"smooth\"\n    });\n  };\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!isDragging) return;\n    e.preventDefault();\n    const x = e.pageX - containerRef.current!.offsetLeft;\n    const walk = x - startDragX;\n    containerRef.current!.scrollLeft = scrollLeft - walk;\n  };\n\n  return {\n    containerRef,\n    handleMouseDown,\n    handleMouseLeave,\n    handleMouseUp,\n    handleMouseMove\n  };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n  canScrollPrev?: any;\n  emblaRef?: any;\n  emblaApi?: any;\n  nextStep?: any;\n  prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    { loop: false, watchDrag: false, startIndex: 0, ...options },\n    [AutoHeight({ destroyHeight: \"fit\", active: true })]\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const checkCanScrollPrev = () => {\n    if (emblaApi) {\n      setCanScrollPrev(emblaApi.canScrollPrev());\n    }\n  };\n  const nextStep = () => {\n    if (emblaApi) {\n      console.log(\"going to NEXT 👉\");\n      emblaApi.scrollNext();\n    }\n  };\n\n  const prevStep = () => {\n    if (emblaApi) {\n      console.log(\"going to BACK 👈\");\n      emblaApi.scrollPrev();\n    }\n  };\n  useEffect(() => {\n    checkCanScrollPrev(); // Initial check\n    emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n    return () => {\n      emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n    };\n  }, [emblaApi]);\n\n  return {\n    emblaRef,\n    emblaApi,\n    nextStep,\n    prevStep,\n    canScrollPrev\n  };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n  initialStep: any,\n  stepIds: any[],\n  setOpenDialog: any\n) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const [dialogHeight, setDialogHeight] = useState(null);\n  const visibleStepRef = useRef<any>(null);\n\n  useEffect(() => {\n    if (visibleStepRef.current) {\n      setDialogHeight(visibleStepRef.current.offsetHeight);\n    }\n  }, [currentStep, setOpenDialog]);\n\n  const handleNext = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex < stepIds.length - 1) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex + 1]);\n      }, 100);\n    }\n  };\n  const handleBack = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex > 0) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex - 1]);\n      }, 100);\n    }\n  };\n\n  return {\n    currentStep,\n    dialogHeight,\n    visibleStepRef,\n    handleNext,\n    handleBack\n  };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n  copy: (value: any) => void;\n  reset: () => void;\n  error: Error | null;\n  copied: boolean;\n} {\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState<boolean>(false);\n  const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n  const handleCopyResult = (value: boolean) => {\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n    setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n    setCopied(value);\n  };\n\n  const copy = (valueToCopy: any) => {\n    if (\"clipboard\" in navigator) {\n      navigator.clipboard\n        .writeText(valueToCopy)\n        .then(() => handleCopyResult(true))\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n  };\n\n  return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n  // Initialize breakpoint with a null value.\n  const [breakpoint, setBreakpoint] = useState<any>(null);\n\n  useEffect(() => {\n    // Check if window is defined (i.e., if running on the client side)\n    if (typeof window !== \"undefined\") {\n      // Define the resize function within the effect.\n      const resize = () => {\n        setBreakpoint(window.innerWidth);\n      };\n\n      // Call resize initially to set the breakpoint based on the initial window size.\n      resize();\n\n      // Set up the resize event listener.\n      window.addEventListener(\"resize\", resize);\n\n      // Clean up the event listener when the component is unmounted.\n      return () => {\n        window.removeEventListener(\"resize\", resize);\n      };\n    }\n  }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n  return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n//   const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n//   const resize = () => {\n//     setBreakpoint(window?.innerWidth);\n//   };\n\n//   useEffect(() => {\n//     // Ensure this code is only run on the client side\n//     if (typeof window !== \"undefined\") {\n//       // Now it's safe to use window\n//       setBreakpoint(window?.innerWidth);\n//       window?.addEventListener(\"resize\", resize);\n\n//       return () => {\n//         window?.removeEventListener(\"resize\", resize);\n//       };\n//     }\n//   }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n//   return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n  width: number | undefined;\n  height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined,\n    height: undefined\n  });\n\n  useEffect(() => {\n    function handleResize() {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight\n      });\n    }\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n  return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n  onFocus?(event: FocusEvent): void;\n  onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n  onBlur,\n  onFocus\n}: UseFocusWithinOptions = {}): {\n  ref: React.MutableRefObject<T>;\n  focused: boolean;\n} {\n  // Create a ref to hold the target element.\n  const ref = useRef<T>(null!);\n\n  // State to track if the element is focused.\n  const [focused, _setFocused] = useState(false);\n\n  // Create a ref to store the focused state.\n  const focusedRef = useRef(false);\n\n  // Function to set the focused state and update the ref.\n  const setFocused = (value: boolean) => {\n    _setFocused(value);\n    focusedRef.current = value;\n  };\n\n  // Handle focus-in event: when the element gains focus.\n  const handleFocusIn = (event: FocusEvent) => {\n    if (!focusedRef.current) {\n      setFocused(true);\n      onFocus?.(event); // Call the onFocus callback if provided.\n    }\n  };\n\n  // Handle focus-out event: when the element loses focus.\n  const handleFocusOut = (event: FocusEvent) => {\n    if (focusedRef.current && !containsRelatedTarget(event)) {\n      setFocused(false);\n      onBlur?.(event); // Call the onBlur callback if provided.\n    }\n  };\n\n  // Attach event listeners for focusin and focusout events.\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"focusin\", handleFocusIn);\n      ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n      // Clean up event listeners when the component unmounts.\n      return () => {\n        ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n        ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n      };\n    }\n\n    return undefined;\n  }, [handleFocusIn, handleFocusOut]);\n\n  // Return the ref and focused state.\n  return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n  getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n  query: MediaQueryList,\n  callback: MediaQueryCallback\n) {\n  try {\n    query.addEventListener(\"change\", callback);\n    return () => query.removeEventListener(\"change\", callback);\n  } catch (e) {\n    query.addListener(callback);\n    return () => query.removeListener(callback);\n  }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n  if (typeof initialValue === \"boolean\") {\n    return initialValue;\n  }\n\n  if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n    return window.matchMedia(query).matches;\n  }\n\n  return false;\n}\n\nexport function useMediaQuery(\n  query: string,\n  initialValue?: boolean,\n  { getInitialValueInEffect }: UseMediaQueryOptions = {\n    getInitialValueInEffect: true\n  }\n) {\n  const [matches, setMatches] = useState(\n    getInitialValueInEffect\n      ? initialValue\n      : getInitialValue(query, initialValue)\n  );\n  const queryRef = useRef<MediaQueryList>();\n\n  useEffect(() => {\n    if (\"matchMedia\" in window) {\n      queryRef.current = window.matchMedia(query);\n      setMatches(queryRef.current.matches);\n      return attachMediaListener(queryRef.current, (event) =>\n        setMatches(event.matches)\n      );\n    }\n\n    return undefined;\n  }, [query]);\n\n  return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  // const savedRef = useRef();\n\n  // useEffect(() => {\n  //   savedRef.current = ref;\n  // }, [ref]);\n\n  useEffect(() => {\n    function handleScroll() {\n      setScrollPosition(ref.current.scrollTop);\n    }\n\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, [ref]);\n\n  return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n  const range = [];\n  const num = Math.ceil(data?.length / rowsPerPage);\n  let i = 1;\n  for (let i = 1; i <= num; i++) {\n    range.push(i);\n  }\n  return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n  if (sortColumn !== null) {\n    return data?.sort((a: any, b: any) => {\n      const aValue = a[sortColumn].value;\n      const bValue = b[sortColumn].value;\n\n      // Handle non-string values by using simple comparison\n      if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n        if (sortDirection === \"asc\") {\n          return aValue.localeCompare(bValue);\n        } else {\n          return bValue.localeCompare(aValue);\n        }\n      } else {\n        if (sortDirection === \"asc\") {\n          return aValue - bValue;\n        } else {\n          return bValue - aValue;\n        }\n      }\n    });\n  }\n  return data;\n};\n\nconst useTable = (\n  data: any,\n  page: any,\n  rowsPerPage: any,\n  sortColumn: any,\n  sortDirection: any\n) => {\n  const [tableRange, setTableRange] = useState<any>([]);\n  const [slice, setSlice] = useState<any>([]);\n\n  useEffect(() => {\n    if (data) {\n      const range = calculateRange(data, rowsPerPage);\n      setTableRange([...range]);\n\n      const sortedData = sortData(data, sortColumn, sortDirection);\n      const slicedData = sliceData(sortedData, page, rowsPerPage);\n      setSlice([...slicedData]);\n    }\n  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n  return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n  const [activeTab, setActiveTab] = useState(initialTab);\n\n  // Listen to hash changes in the URL\n  useEffect(() => {\n    const handleHashChange = () => {\n      const hash = window.location.hash.substring(1);\n      setActiveTab(hash || initialTab);\n    };\n\n    window.addEventListener(\"hashchange\", handleHashChange);\n\n    // Initialize the tab based on the initial hash\n    handleHashChange();\n\n    return () => {\n      // Remove the event listener when the component unmounts\n      window.removeEventListener(\"hashchange\", handleHashChange);\n    };\n  }, [initialTab]);\n\n  const handleTabChange = (index: any) => {\n    setActiveTab(index);\n\n    // Update the URL hash when the tab changes\n    window.location.hash = index;\n  };\n\n  return {\n    activeTab,\n    handleTabChange\n  };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  left: number;\n  bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n  const frame = useRef(0);\n  const [rect, set] = useState({\n    width: 0,\n    height: 0,\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n  });\n\n  const [observer] = useState(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0];\n\n        if (entry) {\n          cancelAnimationFrame(frame.current);\n\n          frame.current = requestAnimationFrame(() => {\n            if (ref.current) {\n              set(entry.contentRect);\n            }\n          });\n        }\n      }),\n  );\n\n  useEffect(() => {\n    observer.disconnect();\n\n    if (ref.current) {\n      observer.observe(ref.current);\n    }\n  }, [ref]);\n\n  return rect;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n  | \"green\"\n  | \"blue\"\n  | \"red\"\n  | \"yellow\"\n  | \"orange\"\n  | \"purple\"\n  | \"cyan\"\n  | \"hyper\"\n  | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n  /** The text inside the chip */\n  label: string;\n  /** The small icon before the chip label  */\n  icon?: JSX.Element;\n  /** The color of the chip, must be a tailwind color */\n  color?: ChipColors;\n  /** The size of the chip */\n  size?: \"small\" | \"normal\" | \"large\";\n  /** Enable/Disable the dot before the label of the chip */\n  dot?: boolean;\n  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n  dotType?: \"available\" | \"unavailable\";\n  radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n  (\n    {\n      label,\n      size = \"normal\",\n      icon,\n      color,\n      radius = \"inherit\",\n      dotType,\n      ...rest\n    },\n    ref\n  ) => {\n    let defaultStyles =\n      \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold \";\n    let radiusStyles = {\n      inherit: \" hawa-rounded\",\n      full: \"hawa-rounded-full\",\n      none: \"hawa-rounded-none\"\n    };\n    let sizeStyles = {\n      small:\n        \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n      normal: \"hawa-h-fit hawa-text-xs\",\n      large: \"hawa-text-base\"\n    };\n    let dotStyles = {\n      small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n      normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n      large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n    };\n    let dotTypeStyles = {\n      available: \"hawa-bg-green-500\",\n      unavailable: \"hawa-bg-red-500\"\n    };\n    let colorStyles: any = {\n      green:\n        \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n      blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n      red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n      yellow:\n        \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n      orange:\n        \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n      purple:\n        \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n      cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n      hyper:\n        \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n      oceanic:\n        \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n    };\n    if (label) {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            defaultStyles,\n            sizeStyles[size],\n            radiusStyles[radius],\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n          )}\n        >\n          {dotType && (\n            <span\n              className={cn(dotStyles[size], dotTypeStyles[dotType])}\n            ></span>\n          )}\n          {icon && icon}\n          {label}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n          )}\n        ></span>\n      );\n    }\n  }\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n  className?: string;\n  open?: boolean;\n  children?: React.ReactNode;\n  side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n  className,\n  open,\n  side = \"bottom\",\n  sideOffset = 40,\n  align = \"center\",\n  withArrow = false,\n  ...props\n}) => {\n  let stylesMap = {\n    bottom: {\n      start: { top: sideOffset, insetInlineStart: 0 },\n      center: { top: sideOffset },\n      end: { top: sideOffset, insetInlineEnd: 0 },\n    },\n    top: {\n      start: { bottom: sideOffset, insetInlineStart: 0 },\n      center: { bottom: sideOffset },\n      end: { bottom: sideOffset, insetInlineEnd: 0 },\n    },\n    right: {\n      start: { left: sideOffset, top: -5 },\n      center: { left: sideOffset },\n      end: { left: sideOffset, bottom: 0 },\n    },\n    left: {\n      start: { right: sideOffset, top: 0 },\n      center: { right: sideOffset },\n      end: { right: sideOffset, bottom: 0 },\n    },\n  };\n  const arrowDirection = {\n    top: \"hawa-arrow-default-bottom\",\n    bottom: \"hawa-arrow-default-top\",\n    right: \"hawa-arrow-default-left\",\n    left: \"hawa-arrow-default-right\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n        className,\n      )}\n      style={{ ...stylesMap[side][align] }}\n      data-side={side}\n      data-floatbox-state={open ? \"open\" : \"closed\"}\n    >\n      {withArrow && <div className={cn(arrowDirection[side])} />}\n      <span>{props.children}</span>\n    </div>\n  );\n};\n\nexport { FloatBox };\n"],"mappings":"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","names":["React","import_react","import_react","React","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","React","React"]}
+{"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../hooks/useOutsideClick.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"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\",\n      underlined:\n        \"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\",\n      underlined_tabs:\n        \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-border-e-2 hawa-border-e-primary\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-border-b-2 hawa-border-b-primary\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n      underlined_tabs:\n        \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10\",\n    },\n    orientation: { horizontal: \"\", vertical: \"\" },\n  },\n  compoundVariants: [\n    {\n      variant: \"underlined\",\n      orientation: \"horizontal\",\n      class:\n        \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n    },\n    {\n      variant: \"underlined\",\n      orientation: \"vertical\",\n      class:\n        \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"horizontal\",\n      class: \"hawa-rounded-b-none\",\n    },\n    {\n      variant: \"underlined_tabs\",\n      orientation: \"vertical\",\n      class: \"hawa-rounded-e-none\",\n    },\n  ],\n  defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n  orientation?: OrientationType;\n  variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n  <TabsPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-gap-2\",\n      orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n      className,\n    )}\n    {...props}\n  >\n    <TabsContext.Provider value={{ orientation, variant }}>\n      {props.children}\n    </TabsContext.Provider>\n  </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        tabsListVariant({ variant, orientation }),\n        orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n  typeof TabsPrimitive.Trigger\n> & {\n  chipProps?: ChipTypes;\n  className?: string;\n  showPopover?: boolean;\n  popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n  const tabTriggerRef = React.useRef(null);\n  const { width } = useMeasureDirty(tabTriggerRef);\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={tabTriggerRef}\n      className={cn(\n        tabsTriggerVariant({ variant, orientation }),\n        \"hawa-relative\",\n        className,\n      )}\n      {...props}\n    >\n      {props.children}\n      {chipProps && <Chip {...chipProps} />}\n\n      <FloatBox\n        withArrow\n        align={orientation === \"vertical\" ? \"start\" : \"start\"}\n        side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n        sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n        open={props.showPopover}\n      >\n        {props.popoverContent}\n      </FloatBox>\n    </TabsPrimitive.Trigger>\n  );\n});\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n  typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n  isOpen: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n  const [open, setOpen] = useState<boolean>(value);\n  const onOpen = () => setOpen(true);\n  const onClose = () => setOpen(false);\n\n  return {\n    isOpen: open,\n    onOpen: onOpen,\n    onClose: onClose\n  };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n  const [value, setValue] = useState(false);\n  const ref = useRef<any>(null);\n  const handleMouseOver = () => setValue(true);\n  const handleMouseOut = () => setValue(false);\n  useEffect(\n    () => {\n      const node = ref.current;\n      if (node) {\n        node.addEventListener(\"mouseover\", handleMouseOver);\n        node.addEventListener(\"mouseout\", handleMouseOut);\n        return () => {\n          node.removeEventListener(\"mouseover\", handleMouseOver);\n          node.removeEventListener(\"mouseout\", handleMouseOut);\n        };\n      }\n    },\n    [ref.current] // Recall only if ref changes\n  );\n  return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE;\n  return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n  | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n  | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n  | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n  | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n  toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n      };\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        )\n      };\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id);\n        });\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n        )\n      };\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return { ...state, toasts: [] };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId)\n      };\n  }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action);\n  listeners.forEach((listener) => {\n    listener(memoryState);\n  });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n  const id = genId();\n\n  const update = (props: ToasterToastProps) =>\n    dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      }\n    }\n  });\n\n  return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState);\n\n  React.useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, [state]);\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n  };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [startDragX, setStartDragX] = useState(0);\n  const [scrollLeft, setScrollLeft] = useState(0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const findClosestSnapPoint = (scrollLeft: number): number => {\n    return Math.round(scrollLeft / imageWidth) * imageWidth;\n  };\n\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    setIsDragging(true);\n    setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n    setScrollLeft(containerRef.current!.scrollLeft);\n  };\n\n  const handleMouseLeave = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (isDragging) {\n      handleDragEnd();\n    }\n  };\n\n  const handleDragEnd = () => {\n    setIsDragging(false);\n    const closestSnapPoint = findClosestSnapPoint(\n      containerRef.current!.scrollLeft\n    );\n    containerRef.current!.scrollTo({\n      left: closestSnapPoint,\n      behavior: \"smooth\"\n    });\n  };\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!isDragging) return;\n    e.preventDefault();\n    const x = e.pageX - containerRef.current!.offsetLeft;\n    const walk = x - startDragX;\n    containerRef.current!.scrollLeft = scrollLeft - walk;\n  };\n\n  return {\n    containerRef,\n    handleMouseDown,\n    handleMouseLeave,\n    handleMouseUp,\n    handleMouseMove\n  };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n  canScrollPrev?: any;\n  emblaRef?: any;\n  emblaApi?: any;\n  nextStep?: any;\n  prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    { loop: false, watchDrag: false, startIndex: 0, ...options },\n    [AutoHeight({ destroyHeight: \"fit\", active: true })]\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const checkCanScrollPrev = () => {\n    if (emblaApi) {\n      setCanScrollPrev(emblaApi.canScrollPrev());\n    }\n  };\n  const nextStep = () => {\n    if (emblaApi) {\n      console.log(\"going to NEXT 👉\");\n      emblaApi.scrollNext();\n    }\n  };\n\n  const prevStep = () => {\n    if (emblaApi) {\n      console.log(\"going to BACK 👈\");\n      emblaApi.scrollPrev();\n    }\n  };\n  useEffect(() => {\n    checkCanScrollPrev(); // Initial check\n    emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n    return () => {\n      emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n    };\n  }, [emblaApi]);\n\n  return {\n    emblaRef,\n    emblaApi,\n    nextStep,\n    prevStep,\n    canScrollPrev\n  };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n  initialStep: any,\n  stepIds: any[],\n  setOpenDialog: any\n) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const [dialogHeight, setDialogHeight] = useState(null);\n  const visibleStepRef = useRef<any>(null);\n\n  useEffect(() => {\n    if (visibleStepRef.current) {\n      setDialogHeight(visibleStepRef.current.offsetHeight);\n    }\n  }, [currentStep, setOpenDialog]);\n\n  const handleNext = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex < stepIds.length - 1) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex + 1]);\n      }, 100);\n    }\n  };\n  const handleBack = () => {\n    const currentIndex = stepIds.indexOf(currentStep);\n    if (currentIndex > 0) {\n      setTimeout(() => {\n        setCurrentStep(stepIds[currentIndex - 1]);\n      }, 100);\n    }\n  };\n\n  return {\n    currentStep,\n    dialogHeight,\n    visibleStepRef,\n    handleNext,\n    handleBack\n  };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n  copy: (value: any) => void;\n  reset: () => void;\n  error: Error | null;\n  copied: boolean;\n} {\n  const [error, setError] = useState<Error | null>(null);\n  const [copied, setCopied] = useState<boolean>(false);\n  const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n  const handleCopyResult = (value: boolean) => {\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n    setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n    setCopied(value);\n  };\n\n  const copy = (valueToCopy: any) => {\n    if (\"clipboard\" in navigator) {\n      navigator.clipboard\n        .writeText(valueToCopy)\n        .then(() => handleCopyResult(true))\n        .catch((err) => setError(err));\n    } else {\n      setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n    }\n  };\n\n  const reset = () => {\n    setCopied(false);\n    setError(null);\n    clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n  };\n\n  return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n  // Initialize breakpoint with a null value.\n  const [breakpoint, setBreakpoint] = useState<any>(null);\n\n  useEffect(() => {\n    // Check if window is defined (i.e., if running on the client side)\n    if (typeof window !== \"undefined\") {\n      // Define the resize function within the effect.\n      const resize = () => {\n        setBreakpoint(window.innerWidth);\n      };\n\n      // Call resize initially to set the breakpoint based on the initial window size.\n      resize();\n\n      // Set up the resize event listener.\n      window.addEventListener(\"resize\", resize);\n\n      // Clean up the event listener when the component is unmounted.\n      return () => {\n        window.removeEventListener(\"resize\", resize);\n      };\n    }\n  }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n  return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n//   const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n//   const resize = () => {\n//     setBreakpoint(window?.innerWidth);\n//   };\n\n//   useEffect(() => {\n//     // Ensure this code is only run on the client side\n//     if (typeof window !== \"undefined\") {\n//       // Now it's safe to use window\n//       setBreakpoint(window?.innerWidth);\n//       window?.addEventListener(\"resize\", resize);\n\n//       return () => {\n//         window?.removeEventListener(\"resize\", resize);\n//       };\n//     }\n//   }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n//   return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n  width: number | undefined;\n  height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined,\n    height: undefined\n  });\n\n  useEffect(() => {\n    function handleResize() {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight\n      });\n    }\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n  return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n  onFocus?(event: FocusEvent): void;\n  onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n  if (\n    event.currentTarget instanceof HTMLElement &&\n    event.relatedTarget instanceof HTMLElement\n  ) {\n    return event.currentTarget.contains(event.relatedTarget);\n  }\n\n  return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n  onBlur,\n  onFocus\n}: UseFocusWithinOptions = {}): {\n  ref: React.MutableRefObject<T>;\n  focused: boolean;\n} {\n  // Create a ref to hold the target element.\n  const ref = useRef<T>(null!);\n\n  // State to track if the element is focused.\n  const [focused, _setFocused] = useState(false);\n\n  // Create a ref to store the focused state.\n  const focusedRef = useRef(false);\n\n  // Function to set the focused state and update the ref.\n  const setFocused = (value: boolean) => {\n    _setFocused(value);\n    focusedRef.current = value;\n  };\n\n  // Handle focus-in event: when the element gains focus.\n  const handleFocusIn = (event: FocusEvent) => {\n    if (!focusedRef.current) {\n      setFocused(true);\n      onFocus?.(event); // Call the onFocus callback if provided.\n    }\n  };\n\n  // Handle focus-out event: when the element loses focus.\n  const handleFocusOut = (event: FocusEvent) => {\n    if (focusedRef.current && !containsRelatedTarget(event)) {\n      setFocused(false);\n      onBlur?.(event); // Call the onBlur callback if provided.\n    }\n  };\n\n  // Attach event listeners for focusin and focusout events.\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"focusin\", handleFocusIn);\n      ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n      // Clean up event listeners when the component unmounts.\n      return () => {\n        ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n        ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n      };\n    }\n\n    return undefined;\n  }, [handleFocusIn, handleFocusOut]);\n\n  // Return the ref and focused state.\n  return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n  getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n  query: MediaQueryList,\n  callback: MediaQueryCallback\n) {\n  try {\n    query.addEventListener(\"change\", callback);\n    return () => query.removeEventListener(\"change\", callback);\n  } catch (e) {\n    query.addListener(callback);\n    return () => query.removeListener(callback);\n  }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n  if (typeof initialValue === \"boolean\") {\n    return initialValue;\n  }\n\n  if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n    return window.matchMedia(query).matches;\n  }\n\n  return false;\n}\n\nexport function useMediaQuery(\n  query: string,\n  initialValue?: boolean,\n  { getInitialValueInEffect }: UseMediaQueryOptions = {\n    getInitialValueInEffect: true\n  }\n) {\n  const [matches, setMatches] = useState(\n    getInitialValueInEffect\n      ? initialValue\n      : getInitialValue(query, initialValue)\n  );\n  const queryRef = useRef<MediaQueryList>();\n\n  useEffect(() => {\n    if (\"matchMedia\" in window) {\n      queryRef.current = window.matchMedia(query);\n      setMatches(queryRef.current.matches);\n      return attachMediaListener(queryRef.current, (event) =>\n        setMatches(event.matches)\n      );\n    }\n\n    return undefined;\n  }, [query]);\n\n  return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  // const savedRef = useRef();\n\n  // useEffect(() => {\n  //   savedRef.current = ref;\n  // }, [ref]);\n\n  useEffect(() => {\n    function handleScroll() {\n      setScrollPosition(ref.current.scrollTop);\n    }\n\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, [ref]);\n\n  return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n  const range = [];\n  const num = Math.ceil(data?.length / rowsPerPage);\n  let i = 1;\n  for (let i = 1; i <= num; i++) {\n    range.push(i);\n  }\n  return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n  if (sortColumn !== null) {\n    return data?.sort((a: any, b: any) => {\n      const aValue = a[sortColumn].value;\n      const bValue = b[sortColumn].value;\n\n      // Handle non-string values by using simple comparison\n      if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n        if (sortDirection === \"asc\") {\n          return aValue.localeCompare(bValue);\n        } else {\n          return bValue.localeCompare(aValue);\n        }\n      } else {\n        if (sortDirection === \"asc\") {\n          return aValue - bValue;\n        } else {\n          return bValue - aValue;\n        }\n      }\n    });\n  }\n  return data;\n};\n\nconst useTable = (\n  data: any,\n  page: any,\n  rowsPerPage: any,\n  sortColumn: any,\n  sortDirection: any\n) => {\n  const [tableRange, setTableRange] = useState<any>([]);\n  const [slice, setSlice] = useState<any>([]);\n\n  useEffect(() => {\n    if (data) {\n      const range = calculateRange(data, rowsPerPage);\n      setTableRange([...range]);\n\n      const sortedData = sortData(data, sortColumn, sortDirection);\n      const slicedData = sliceData(sortedData, page, rowsPerPage);\n      setSlice([...slicedData]);\n    }\n  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n  return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n  const [activeTab, setActiveTab] = useState(initialTab);\n\n  // Listen to hash changes in the URL\n  useEffect(() => {\n    const handleHashChange = () => {\n      const hash = window.location.hash.substring(1);\n      setActiveTab(hash || initialTab);\n    };\n\n    window.addEventListener(\"hashchange\", handleHashChange);\n\n    // Initialize the tab based on the initial hash\n    handleHashChange();\n\n    return () => {\n      // Remove the event listener when the component unmounts\n      window.removeEventListener(\"hashchange\", handleHashChange);\n    };\n  }, [initialTab]);\n\n  const handleTabChange = (index: any) => {\n    setActiveTab(index);\n\n    // Update the URL hash when the tab changes\n    window.location.hash = index;\n  };\n\n  return {\n    activeTab,\n    handleTabChange\n  };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  left: number;\n  bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n  const frame = useRef(0);\n  const [rect, set] = useState({\n    width: 0,\n    height: 0,\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n  });\n\n  const [observer] = useState(\n    () =>\n      new ResizeObserver((entries) => {\n        const entry = entries[0];\n\n        if (entry) {\n          cancelAnimationFrame(frame.current);\n\n          frame.current = requestAnimationFrame(() => {\n            if (ref.current) {\n              set(entry.contentRect);\n            }\n          });\n        }\n      }),\n  );\n\n  useEffect(() => {\n    observer.disconnect();\n\n    if (ref.current) {\n      observer.observe(ref.current);\n    }\n  }, [ref]);\n\n  return rect;\n};\n","import React from \"react\";\n\nconst useOutsideClick = (callback: () => void) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback();\n      }\n    };\n\n    document.addEventListener(\"click\", handleClick, true);\n\n    return () => {\n      document.removeEventListener(\"click\", handleClick, true);\n    };\n  }, [ref]);\n\n  return ref;\n};\nexport default useOutsideClick;\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n  | \"green\"\n  | \"blue\"\n  | \"red\"\n  | \"yellow\"\n  | \"orange\"\n  | \"purple\"\n  | \"cyan\"\n  | \"hyper\"\n  | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n  /** The text inside the chip */\n  label: string;\n  /** The small icon before the chip label  */\n  icon?: JSX.Element;\n  /** The color of the chip, must be a tailwind color */\n  color?: ChipColors;\n  /** The size of the chip */\n  size?: \"small\" | \"normal\" | \"large\";\n  /** Enable/Disable the dot before the label of the chip */\n  dot?: boolean;\n  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n  dotType?: \"available\" | \"unavailable\";\n  radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n  (\n    {\n      label,\n      size = \"normal\",\n      icon,\n      color,\n      radius = \"inherit\",\n      dotType,\n      ...rest\n    },\n    ref\n  ) => {\n    let defaultStyles =\n      \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold \";\n    let radiusStyles = {\n      inherit: \" hawa-rounded\",\n      full: \"hawa-rounded-full\",\n      none: \"hawa-rounded-none\"\n    };\n    let sizeStyles = {\n      small:\n        \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n      normal: \"hawa-h-fit hawa-text-xs\",\n      large: \"hawa-text-base\"\n    };\n    let dotStyles = {\n      small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n      normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n      large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n    };\n    let dotTypeStyles = {\n      available: \"hawa-bg-green-500\",\n      unavailable: \"hawa-bg-red-500\"\n    };\n    let colorStyles: any = {\n      green:\n        \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n      blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n      red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n      yellow:\n        \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n      orange:\n        \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n      purple:\n        \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n      cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n      hyper:\n        \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n      oceanic:\n        \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n    };\n    if (label) {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            defaultStyles,\n            sizeStyles[size],\n            radiusStyles[radius],\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n          )}\n        >\n          {dotType && (\n            <span\n              className={cn(dotStyles[size], dotTypeStyles[dotType])}\n            ></span>\n          )}\n          {icon && icon}\n          {label}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          {...rest}\n          ref={ref}\n          className={cn(\n            \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n            color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n          )}\n        ></span>\n      );\n    }\n  }\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n  className?: string;\n  open?: boolean;\n  children?: React.ReactNode;\n  side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n  className,\n  open,\n  side = \"bottom\",\n  sideOffset = 40,\n  align = \"center\",\n  withArrow = false,\n  ...props\n}) => {\n  let stylesMap = {\n    bottom: {\n      start: { top: sideOffset, insetInlineStart: 0 },\n      center: { top: sideOffset },\n      end: { top: sideOffset, insetInlineEnd: 0 },\n    },\n    top: {\n      start: { bottom: sideOffset, insetInlineStart: 0 },\n      center: { bottom: sideOffset },\n      end: { bottom: sideOffset, insetInlineEnd: 0 },\n    },\n    right: {\n      start: { left: sideOffset, top: -5 },\n      center: { left: sideOffset },\n      end: { left: sideOffset, bottom: 0 },\n    },\n    left: {\n      start: { right: sideOffset, top: 0 },\n      center: { right: sideOffset },\n      end: { right: sideOffset, bottom: 0 },\n    },\n  };\n  const arrowDirection = {\n    top: \"hawa-arrow-default-bottom\",\n    bottom: \"hawa-arrow-default-top\",\n    right: \"hawa-arrow-default-left\",\n    left: \"hawa-arrow-default-right\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n        className,\n      )}\n      style={{ ...stylesMap[side][align] }}\n      data-side={side}\n      data-floatbox-state={open ? \"open\" : \"closed\"}\n    >\n      {withArrow && <div className={cn(arrowDirection[side])} />}\n      <span>{props.children}</span>\n    </div>\n  );\n};\n\nexport { FloatBox };\n"],"mappings":"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","names":["React","import_react","import_react","React","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","React","React"]}

package/dist/tabs/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // elements/tabs/Tabs.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 
 // hooks/useIsomorphicEffect.ts
 import { useEffect, useLayoutEffect } from "react";
@@ -84,6 +84,9 @@ var useMeasureDirty = (ref) => {
   return rect;
 };
 
+// hooks/useOutsideClick.ts
+import React9 from "react";
+
 // elements/tabs/Tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
@@ -98,8 +101,8 @@ function cn(...inputs) {
 import { tv } from "tailwind-variants";
 
 // elements/chip/Chip.tsx
-import React9 from "react";
-var Chip = React9.forwardRef(
+import React10 from "react";
+var Chip = React10.forwardRef(
   ({
     label,
     size = "normal",
@@ -141,7 +144,7 @@ var Chip = React9.forwardRef(
       oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
     };
     if (label) {
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         "span",
         {
           ...rest,
@@ -153,7 +156,7 @@ var Chip = React9.forwardRef(
             color ? colorStyles[color] : "hawa-border hawa-bg-none"
           )
         },
-        dotType && /* @__PURE__ */ React9.createElement(
+        dotType && /* @__PURE__ */ React10.createElement(
           "span",
           {
             className: cn(dotStyles[size], dotTypeStyles[dotType])
@@ -163,7 +166,7 @@ var Chip = React9.forwardRef(
         label
       );
     } else {
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         "span",
         {
           ...rest,
@@ -179,7 +182,7 @@ var Chip = React9.forwardRef(
 );
 
 // elements/floatBox/FloatBox.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 var FloatBox = ({
   className,
   open,
@@ -217,7 +220,7 @@ var FloatBox = ({
     right: "hawa-arrow-default-left",
     left: "hawa-arrow-default-right"
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: cn(
@@ -228,8 +231,8 @@ var FloatBox = ({
       "data-side": side,
       "data-floatbox-state": open ? "open" : "closed"
     },
-    withArrow && /* @__PURE__ */ React10.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React10.createElement("span", null, props.children)
+    withArrow && /* @__PURE__ */ React11.createElement("div", { className: cn(arrowDirection[side]) }),
+    /* @__PURE__ */ React11.createElement("span", null, props.children)
   );
 };
 
@@ -292,8 +295,8 @@ var tabsTriggerVariant = tv({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React11.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React11.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var TabsContext = React12.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React12.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React12.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -304,11 +307,11 @@ var Tabs = React11.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React11.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React12.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-var TabsList = React11.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React11.useContext(TabsContext);
-  return /* @__PURE__ */ React11.createElement(
+var TabsList = React12.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React12.useContext(TabsContext);
+  return /* @__PURE__ */ React12.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -321,11 +324,11 @@ var TabsList = React11.forwardRef(({ className, ...props }, ref) => {
     }
   );
 });
-var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React11.useContext(TabsContext);
-  const tabTriggerRef = React11.useRef(null);
+var TabsTrigger = React12.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React12.useContext(TabsContext);
+  const tabTriggerRef = React12.useRef(null);
   const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     TabsPrimitive.Trigger,
     {
       ref: tabTriggerRef,
@@ -337,8 +340,8 @@ var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) =
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React11.createElement(
+    chipProps && /* @__PURE__ */ React12.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React12.createElement(
       FloatBox,
       {
         withArrow: true,
@@ -351,7 +354,7 @@ var TabsTrigger = React11.forwardRef(({ className, chipProps, ...props }, ref) =
     )
   );
 });
-var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
   TabsPrimitive.Content,
   {
     ref,