@sikka/hawa 0.49.13-next → 0.49.15-next

package/dist/tabs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../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/useClickOutside.ts","../../hooks/useShortcuts.ts","../../hooks/useWindowEvent.ts","../../hooks/useViewportSize.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/scrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { useMeasureDirty, useViewportSize } from \"@hooks/index\";\nimport * as Popover from \"@radix-ui/react-popover\";\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 { ScrollArea } from \"../scrollArea\";\n\nconst tabsListVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined_tabs:\n        \"hawa-flex hawa-w-fit 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: \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n    },\n    {\n      variant: \"underlined\",\n      orientation: \"vertical\",\n      class: \"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  scrollable?: boolean;\n}>({ orientation: \"horizontal\", variant: \"default\", scrollable: false });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n  variant?: TabsVariants;\n  scrollable?: boolean;\n};\n\nconst Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsRootProps>(\n  ({ className, orientation, scrollable, 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, scrollable }}>\n        {props.children}\n      </TabsContext.Provider>\n    </TabsPrimitive.Root>\n  ),\n);\n\ntype TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  classNames?: {\n    scrollArea?: string;\n  };\n};\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, classNames, ...props }, ref) => {\n    const { orientation, variant, scrollable } = React.useContext(TabsContext);\n    const { width } = useViewportSize();\n\n    if (scrollable && width < 768 && orientation === \"horizontal\") {\n      return (\n        <ScrollArea orientation=\"horizontal\" className={classNames?.scrollArea}>\n          <TabsPrimitive.List\n            ref={ref}\n            className={cn(\n              tabsListVariant({ variant, orientation }),\n              \"hawa-flex-row hawa-flex-nowrap\",\n              className,\n            )}\n            {...props}\n          />\n        </ScrollArea>\n      );\n    } else {\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            \"hawa-flex-wrap\",\n            className,\n          )}\n          {...props}\n        />\n      );\n    }\n  },\n);\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n  chipProps?: ChipTypes;\n  className?: string;\n  showPopover?: boolean;\n  popoverContent?: React.ReactNode;\n  withPopover?: boolean;\n  onPopoverClick?: () => void;\n};\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n\n  if (withPopover) {\n    return (\n      <Popover.Root open={props.showPopover}>\n        <Popover.Anchor asChild>\n          <TabsPrimitive.Trigger\n            className={cn(tabsTriggerVariant({ variant, orientation }), \"hawa-relative\", className)}\n            {...props}\n          >\n            {props.children}\n            {chipProps && <Chip {...chipProps} />}\n          </TabsPrimitive.Trigger>\n        </Popover.Anchor>\n        <Popover.Content\n          onClick={onPopoverClick}\n          asChild\n          className={cn(\n            \"dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[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\",\n            \"hawa-arrow-default-top hawa-mt-2\",\n          )}\n        >\n          <div className=\"hawa-p-2\"> {props.popoverContent}</div>\n        </Popover.Content>\n      </Popover.Root>\n    );\n  } else {\n    return (\n      <TabsPrimitive.Trigger\n        className={cn(tabsTriggerVariant({ variant, orientation }), \"hawa-relative\", className)}\n        {...props}\n      >\n        {props.children}\n        {chipProps && <Chip {...chipProps} />}\n      </TabsPrimitive.Trigger>\n    );\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 = 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) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),\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(containerRef.current!.scrollLeft);\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({ 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 = (initialStep: any, stepIds: any[], setOpenDialog: any) => {\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 (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\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(query: MediaQueryList, callback: MediaQueryCallback) {\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 ? initialValue : 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) => setMatches(event.matches));\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 = (data: any, page: any, rowsPerPage: any, sortColumn: any, sortDirection: any) => {\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 { useEffect, useRef } from \"react\";\n\nconst DEFAULT_EVENTS = [\"mousedown\", \"touchstart\"];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  handler: () => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n) {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    const listener = (event: any) => {\n      const { target } = event ?? {};\n      if (Array.isArray(nodes)) {\n        const shouldIgnore =\n          target?.hasAttribute(\"data-ignore-outside-clicks\") ||\n          (!document.body.contains(target) && target.tagName !== \"HTML\");\n        const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n        shouldTrigger && !shouldIgnore && handler();\n      } else if (ref.current && !ref.current.contains(target)) {\n        handler();\n      }\n    };\n\n    (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener));\n\n    return () => {\n      (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));\n    };\n  }, [ref, handler, nodes]);\n\n  return ref;\n}\n","import { useEffect } from \"react\";\n\nexport type KeyboardModifiers = {\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  mod: boolean;\n  shift: boolean;\n};\n\nexport type Hotkey = KeyboardModifiers & {\n  key?: string;\n};\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean;\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split(\"+\")\n    .map((part) => part.trim());\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes(\"alt\"),\n    ctrl: keys.includes(\"ctrl\"),\n    meta: keys.includes(\"meta\"),\n    mod: keys.includes(\"mod\"),\n    shift: keys.includes(\"shift\"),\n  };\n\n  const reservedKeys = [\"alt\", \"ctrl\", \"meta\", \"shift\", \"mod\"];\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key));\n\n  return {\n    ...modifiers,\n    key: freeKey,\n  };\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey;\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;\n\n  if (alt !== altKey) {\n    return false;\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false;\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false;\n    }\n    if (meta !== metaKey) {\n      return false;\n    }\n  }\n  if (shift !== shiftKey) {\n    return false;\n  }\n\n  if (\n    key &&\n    (pressedKey.toLowerCase() === key.toLowerCase() ||\n      event.code.replace(\"Key\", \"\").toLowerCase() === key.toLowerCase())\n  ) {\n    return true;\n  }\n\n  return false;\n}\n\nexport function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event);\n}\n\nexport interface HotkeyItemOptions {\n  preventDefault?: boolean;\n}\n\n//   type HotkeyItem = [string, (event: any) => void, HotkeyItemOptions?];\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = \"nativeEvent\" in event ? event.nativeEvent : event;\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n      if (getHotkeyMatcher(hotkey)(_event)) {\n        if (options.preventDefault) {\n          event.preventDefault();\n        }\n\n        handler(_event);\n      }\n    });\n  };\n}\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(\n  event: KeyboardEvent,\n  tagsToIgnore: string[],\n  triggerOnContentEditable = false,\n) {\n  if (event.target instanceof HTMLElement) {\n    if (triggerOnContentEditable) {\n      return !tagsToIgnore.includes(event.target.tagName);\n    }\n\n    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);\n  }\n\n  return true;\n}\n\nexport function useShortcuts(\n  hotkeys: HotkeyItem[],\n  tagsToIgnore: string[] = [\"INPUT\", \"TEXTAREA\", \"SELECT\"],\n  triggerOnContentEditable = false,\n) {\n  useEffect(() => {\n    const keydownListener = (event: KeyboardEvent) => {\n      hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n        if (\n          getHotkeyMatcher(hotkey)(event) &&\n          shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n        ) {\n          if (options.preventDefault) {\n            event.preventDefault();\n          }\n\n          handler(event);\n        }\n      });\n    };\n\n    document.documentElement.addEventListener(\"keydown\", keydownListener);\n    return () => document.documentElement.removeEventListener(\"keydown\", keydownListener);\n  }, [hotkeys]);\n}\n","import { useEffect } from \"react\";\n\nexport function useWindowEvent<K extends string>(\n  type: K,\n  listener: K extends keyof WindowEventMap\n    ? (this: Window, ev: WindowEventMap[K]) => void\n    : (this: Window, ev: CustomEvent) => void,\n  options?: boolean | AddEventListenerOptions,\n) {\n  useEffect(() => {\n    window.addEventListener(type as any, listener, options);\n    return () => window.removeEventListener(type as any, listener, options);\n  }, [type, listener]);\n}\n","import { useCallback, useEffect, useState } from \"react\";\n\nimport { useWindowEvent } from \"./useWindowEvent\";\n\nconst eventListerOptions = {\n  passive: true,\n};\n\nexport function useViewportSize() {\n  const [windowSize, setWindowSize] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const setSize = useCallback(() => {\n    setWindowSize({\n      width: window.innerWidth || 0,\n      height: window.innerHeight || 0,\n    });\n  }, []);\n\n  useWindowEvent(\"resize\", setSize, eventListerOptions);\n  useWindowEvent(\"orientationchange\", setSize, eventListerOptions);\n  useEffect(setSize, []);\n\n  return windowSize;\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(sanitizedHex);\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 { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\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  dotStatus?: \"available\" | \"unavailable\" | \"none\";\n  radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n  (\n    { label, size = \"normal\", icon, color, radius = \"inherit\", dot, dotStatus = \"none\", ...rest },\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: \"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 dotStatusStyles = {\n      none: \"hawa-bg-gray-500 dark:hawa-bg-gray-800\",\n      available: \"hawa-bg-green-500\",\n      unavailable: \"hawa-bg-red-500\",\n    };\n    let colorStyles: any = {\n      green:\n        \"hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200\",\n      blue: \"hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100\",\n      red: \"hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100\",\n      yellow:\n        \"hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black\",\n      orange:\n        \"hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100\",\n      purple:\n        \"hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100\",\n      cyan: \"hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100\",\n      hyper:\n        \"hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n      oceanic:\n        \"hawa-text-white dark:hawa-text-black 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            rest.className,\n          )}\n        >\n          {dot && <span className={cn(dotStyles[size], dotStatusStyles[dotStatus])}></span>}\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 * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"@util/index\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\ntype ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  orientation?: OrientationType;\n};\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(({ className, children, orientation = \"vertical\", ...props }, ref) => {\n  const scrollAreaRef = React.useRef<HTMLDivElement | null>(null);\n  const isDragging = React.useRef(false);\n  const startPos = React.useRef({ x: 0, y: 0 });\n  const scrollPos = React.useRef({ top: 0, left: 0 });\n\n  const [showLeftFade, setShowLeftFade] = React.useState(false);\n  const [showRightFade, setShowRightFade] = React.useState(false);\n\n  const checkOverflow = () => {\n    if (scrollAreaRef.current) {\n      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;\n      setShowLeftFade(scrollLeft > 0);\n      setShowRightFade(scrollLeft + clientWidth < scrollWidth);\n    }\n  };\n\n  const onMouseDown = (e: React.MouseEvent) => {\n    isDragging.current = true;\n    startPos.current = { x: e.clientX, y: e.clientY };\n    if (scrollAreaRef.current) {\n      scrollPos.current = {\n        top: scrollAreaRef.current.scrollTop,\n        left: scrollAreaRef.current.scrollLeft,\n      };\n    }\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseUp);\n  };\n\n  const onMouseMove = (e: MouseEvent) => {\n    if (!isDragging.current || !scrollAreaRef.current) return;\n    const dx = e.clientX - startPos.current.x;\n    const dy = e.clientY - startPos.current.y;\n    if (orientation === \"vertical\") {\n      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;\n    } else {\n      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;\n      checkOverflow();\n    }\n  };\n\n  const onMouseUp = () => {\n    isDragging.current = false;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseUp);\n  };\n\n  React.useEffect(() => {\n    checkOverflow();\n    if (scrollAreaRef.current) {\n      scrollAreaRef.current.addEventListener(\"scroll\", checkOverflow);\n      window.addEventListener(\"resize\", checkOverflow);\n    }\n    return () => {\n      if (scrollAreaRef.current) {\n        scrollAreaRef.current.removeEventListener(\"scroll\", checkOverflow);\n      }\n      window.removeEventListener(\"resize\", checkOverflow);\n    };\n  }, []);\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"hawa-relative hawa-overflow-hidden\", className)}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right\",\n          showLeftFade ? \"hawa-block\" : \"hawa-hidden\",\n        )}\n      />\n      <div\n        className={cn(\n          \"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10\",\n          showRightFade ? \"hawa-block\" : \"hawa-hidden\",\n        )}\n      />\n      <ScrollAreaPrimitive.Viewport\n        ref={scrollAreaRef}\n        className=\"hawa-h-full hawa-w-full hawa-rounded-[inherit]\"\n        onMouseDown={onMouseDown}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation={orientation} />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n});\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors\",\n      orientation === \"vertical\" &&\n        \"hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]\",\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"hawa-relative hawa-rounded-full hawa-bg-border\",\n        orientation === \"vertical\" && \"hawa-flex-1\",\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"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","names":["React","useEffect","useState","React","useState","useRef","useEffect","useState","useState","useEffect","useRef","useState","useState","useEffect","useEffect","useState","useRef","useState","useEffect","useState","useEffect","useRef","useState","useEffect","useState","useEffect","useEffect","useState","useEffect","useRef","useState","useEffect","useRef","useEffect","useEffect","useEffect","useState","useState","useEffect","React","React","React"]}
+{"version":3,"sources":["../../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/useClickOutside.ts","../../hooks/useShortcuts.ts","../../hooks/useWindowEvent.ts","../../hooks/useViewportSize.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/scrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { useMeasureDirty, useViewportSize } from \"@hooks/index\";\nimport * as Popover from \"@radix-ui/react-popover\";\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 { ScrollArea } from \"../scrollArea\";\n\nconst tabsListVariant = tv({\n  base: \"\",\n  variants: {\n    variant: {\n      default:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined:\n        \"hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10\",\n      underlined_tabs:\n        \"hawa-flex hawa-w-fit 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: \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n    },\n    {\n      variant: \"underlined\",\n      orientation: \"vertical\",\n      class: \"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  scrollable?: boolean;\n}>({ orientation: \"horizontal\", variant: \"default\", scrollable: false });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n  variant?: TabsVariants;\n  scrollable?: boolean;\n};\n\nconst Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsRootProps>(\n  ({ className, orientation, scrollable, 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, scrollable }}>\n        {props.children}\n      </TabsContext.Provider>\n    </TabsPrimitive.Root>\n  ),\n);\n\ntype TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  classNames?: {\n    scrollArea?: string;\n  };\n};\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, classNames, ...props }, ref) => {\n    const { orientation, variant, scrollable } = React.useContext(TabsContext);\n    const { width } = useViewportSize();\n\n    if (scrollable && width < 768 && orientation === \"horizontal\") {\n      return (\n        <ScrollArea orientation=\"horizontal\" className={classNames?.scrollArea}>\n          <TabsPrimitive.List\n            ref={ref}\n            className={cn(\n              tabsListVariant({ variant, orientation }),\n              \"hawa-flex-row hawa-flex-nowrap\",\n              className,\n            )}\n            {...props}\n          />\n        </ScrollArea>\n      );\n    } else {\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            \"hawa-flex-wrap\",\n            className,\n          )}\n          {...props}\n        />\n      );\n    }\n  },\n);\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n  chipProps?: ChipTypes;\n  className?: string;\n  showPopover?: boolean;\n  popoverContent?: React.ReactNode;\n  withPopover?: boolean;\n  onPopoverClick?: () => void;\n};\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {\n  const { orientation, variant } = React.useContext(TabsContext);\n\n  if (withPopover) {\n    return (\n      <Popover.Root open={props.showPopover}>\n        <Popover.Anchor asChild>\n          <TabsPrimitive.Trigger\n            className={cn(tabsTriggerVariant({ variant, orientation }), \"hawa-relative\", className)}\n            {...props}\n          >\n            {props.children}\n            {chipProps && <Chip {...chipProps} />}\n          </TabsPrimitive.Trigger>\n        </Popover.Anchor>\n        <Popover.Content\n          onClick={onPopoverClick}\n          asChild\n          className={cn(\n            \"dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[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\",\n            \"hawa-arrow-default-top hawa-mt-2\",\n          )}\n        >\n          <div className=\"hawa-p-2\"> {props.popoverContent}</div>\n        </Popover.Content>\n      </Popover.Root>\n    );\n  } else {\n    return (\n      <TabsPrimitive.Trigger\n        className={cn(tabsTriggerVariant({ variant, orientation }), \"hawa-relative\", className)}\n        {...props}\n      >\n        {props.children}\n        {chipProps && <Chip {...chipProps} />}\n      </TabsPrimitive.Trigger>\n    );\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 = 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) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),\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(containerRef.current!.scrollLeft);\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({ 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 = (initialStep: any, stepIds: any[], setOpenDialog: any) => {\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 (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\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(query: MediaQueryList, callback: MediaQueryCallback) {\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 ? initialValue : getInitialValue(query, initialValue),\n  );\n  const queryRef = useRef<MediaQueryList>(null);\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) => setMatches(event.matches));\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 = (data: any, page: any, rowsPerPage: any, sortColumn: any, sortDirection: any) => {\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 { useEffect, useRef } from \"react\";\n\nconst DEFAULT_EVENTS = [\"mousedown\", \"touchstart\"];\n\nexport function useClickOutside<T extends HTMLElement = any>(\n  handler: () => void,\n  events?: string[] | null,\n  nodes?: (HTMLElement | null)[],\n) {\n  const ref = useRef<T>(null);\n\n  useEffect(() => {\n    const listener = (event: any) => {\n      const { target } = event ?? {};\n      if (Array.isArray(nodes)) {\n        const shouldIgnore =\n          target?.hasAttribute(\"data-ignore-outside-clicks\") ||\n          (!document.body.contains(target) && target.tagName !== \"HTML\");\n        const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n        shouldTrigger && !shouldIgnore && handler();\n      } else if (ref.current && !ref.current.contains(target)) {\n        handler();\n      }\n    };\n\n    (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener));\n\n    return () => {\n      (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));\n    };\n  }, [ref, handler, nodes]);\n\n  return ref;\n}\n","import { useEffect } from \"react\";\n\nexport type KeyboardModifiers = {\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  mod: boolean;\n  shift: boolean;\n};\n\nexport type Hotkey = KeyboardModifiers & {\n  key?: string;\n};\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean;\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split(\"+\")\n    .map((part) => part.trim());\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes(\"alt\"),\n    ctrl: keys.includes(\"ctrl\"),\n    meta: keys.includes(\"meta\"),\n    mod: keys.includes(\"mod\"),\n    shift: keys.includes(\"shift\"),\n  };\n\n  const reservedKeys = [\"alt\", \"ctrl\", \"meta\", \"shift\", \"mod\"];\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key));\n\n  return {\n    ...modifiers,\n    key: freeKey,\n  };\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey;\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;\n\n  if (alt !== altKey) {\n    return false;\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false;\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false;\n    }\n    if (meta !== metaKey) {\n      return false;\n    }\n  }\n  if (shift !== shiftKey) {\n    return false;\n  }\n\n  if (\n    key &&\n    (pressedKey.toLowerCase() === key.toLowerCase() ||\n      event.code.replace(\"Key\", \"\").toLowerCase() === key.toLowerCase())\n  ) {\n    return true;\n  }\n\n  return false;\n}\n\nexport function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event);\n}\n\nexport interface HotkeyItemOptions {\n  preventDefault?: boolean;\n}\n\n//   type HotkeyItem = [string, (event: any) => void, HotkeyItemOptions?];\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = \"nativeEvent\" in event ? event.nativeEvent : event;\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n      if (getHotkeyMatcher(hotkey)(_event)) {\n        if (options.preventDefault) {\n          event.preventDefault();\n        }\n\n        handler(_event);\n      }\n    });\n  };\n}\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(\n  event: KeyboardEvent,\n  tagsToIgnore: string[],\n  triggerOnContentEditable = false,\n) {\n  if (event.target instanceof HTMLElement) {\n    if (triggerOnContentEditable) {\n      return !tagsToIgnore.includes(event.target.tagName);\n    }\n\n    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);\n  }\n\n  return true;\n}\n\nexport function useShortcuts(\n  hotkeys: HotkeyItem[],\n  tagsToIgnore: string[] = [\"INPUT\", \"TEXTAREA\", \"SELECT\"],\n  triggerOnContentEditable = false,\n) {\n  useEffect(() => {\n    const keydownListener = (event: KeyboardEvent) => {\n      hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n        if (\n          getHotkeyMatcher(hotkey)(event) &&\n          shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n        ) {\n          if (options.preventDefault) {\n            event.preventDefault();\n          }\n\n          handler(event);\n        }\n      });\n    };\n\n    document.documentElement.addEventListener(\"keydown\", keydownListener);\n    return () => document.documentElement.removeEventListener(\"keydown\", keydownListener);\n  }, [hotkeys]);\n}\n","import { useEffect } from \"react\";\n\nexport function useWindowEvent<K extends string>(\n  type: K,\n  listener: K extends keyof WindowEventMap\n    ? (this: Window, ev: WindowEventMap[K]) => void\n    : (this: Window, ev: CustomEvent) => void,\n  options?: boolean | AddEventListenerOptions,\n) {\n  useEffect(() => {\n    window.addEventListener(type as any, listener, options);\n    return () => window.removeEventListener(type as any, listener, options);\n  }, [type, listener]);\n}\n","import { useCallback, useEffect, useState } from \"react\";\n\nimport { useWindowEvent } from \"./useWindowEvent\";\n\nconst eventListerOptions = {\n  passive: true,\n};\n\nexport function useViewportSize() {\n  const [windowSize, setWindowSize] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const setSize = useCallback(() => {\n    setWindowSize({\n      width: window.innerWidth || 0,\n      height: window.innerHeight || 0,\n    });\n  }, []);\n\n  useWindowEvent(\"resize\", setSize, eventListerOptions);\n  useWindowEvent(\"orientationchange\", setSize, eventListerOptions);\n  useEffect(setSize, []);\n\n  return windowSize;\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(sanitizedHex);\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 { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\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?: React.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  dotStatus?: \"available\" | \"unavailable\" | \"none\";\n  radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n  (\n    { label, size = \"normal\", icon, color, radius = \"inherit\", dot, dotStatus = \"none\", ...rest },\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: \"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 dotStatusStyles = {\n      none: \"hawa-bg-gray-500 dark:hawa-bg-gray-800\",\n      available: \"hawa-bg-green-500\",\n      unavailable: \"hawa-bg-red-500\",\n    };\n    let colorStyles: any = {\n      green:\n        \"hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200\",\n      blue: \"hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100\",\n      red: \"hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100\",\n      yellow:\n        \"hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black\",\n      orange:\n        \"hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100\",\n      purple:\n        \"hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100\",\n      cyan: \"hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100\",\n      hyper:\n        \"hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n      oceanic:\n        \"hawa-text-white dark:hawa-text-black 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            rest.className,\n          )}\n        >\n          {dot && <span className={cn(dotStyles[size], dotStatusStyles[dotStatus])}></span>}\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 * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"@util/index\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\ntype ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  orientation?: OrientationType;\n};\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(({ className, children, orientation = \"vertical\", ...props }, ref) => {\n  const scrollAreaRef = React.useRef<HTMLDivElement | null>(null);\n  const isDragging = React.useRef(false);\n  const startPos = React.useRef({ x: 0, y: 0 });\n  const scrollPos = React.useRef({ top: 0, left: 0 });\n\n  const [showLeftFade, setShowLeftFade] = React.useState(false);\n  const [showRightFade, setShowRightFade] = React.useState(false);\n\n  const checkOverflow = () => {\n    if (scrollAreaRef.current) {\n      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;\n      setShowLeftFade(scrollLeft > 0);\n      setShowRightFade(scrollLeft + clientWidth < scrollWidth);\n    }\n  };\n\n  const onMouseDown = (e: React.MouseEvent) => {\n    isDragging.current = true;\n    startPos.current = { x: e.clientX, y: e.clientY };\n    if (scrollAreaRef.current) {\n      scrollPos.current = {\n        top: scrollAreaRef.current.scrollTop,\n        left: scrollAreaRef.current.scrollLeft,\n      };\n    }\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseUp);\n  };\n\n  const onMouseMove = (e: MouseEvent) => {\n    if (!isDragging.current || !scrollAreaRef.current) return;\n    const dx = e.clientX - startPos.current.x;\n    const dy = e.clientY - startPos.current.y;\n    if (orientation === \"vertical\") {\n      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;\n    } else {\n      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;\n      checkOverflow();\n    }\n  };\n\n  const onMouseUp = () => {\n    isDragging.current = false;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseUp);\n  };\n\n  React.useEffect(() => {\n    checkOverflow();\n    if (scrollAreaRef.current) {\n      scrollAreaRef.current.addEventListener(\"scroll\", checkOverflow);\n      window.addEventListener(\"resize\", checkOverflow);\n    }\n    return () => {\n      if (scrollAreaRef.current) {\n        scrollAreaRef.current.removeEventListener(\"scroll\", checkOverflow);\n      }\n      window.removeEventListener(\"resize\", checkOverflow);\n    };\n  }, []);\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={cn(\"hawa-relative hawa-overflow-hidden\", className)}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right\",\n          showLeftFade ? \"hawa-block\" : \"hawa-hidden\",\n        )}\n      />\n      <div\n        className={cn(\n          \"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10\",\n          showRightFade ? \"hawa-block\" : \"hawa-hidden\",\n        )}\n      />\n      <ScrollAreaPrimitive.Viewport\n        ref={scrollAreaRef}\n        className=\"hawa-h-full hawa-w-full hawa-rounded-[inherit]\"\n        onMouseDown={onMouseDown}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation={orientation} />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n});\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors\",\n      orientation === \"vertical\" &&\n        \"hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]\",\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"hawa-relative hawa-rounded-full hawa-bg-border\",\n        orientation === \"vertical\" && \"hawa-flex-1\",\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;AAAA,YAAYA,aAAW;;;ACAvB,SAAS,WAAW,uBAAuB;;;ACA3C,SAAgB,gBAAgB;;;ACAhC,SAAgB,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;;;ACAnD,YAAYC,YAAW;;;ACAvB,SAAS,YAAAC,WAAU,UAAAC,eAAc;;;ACAjC,SAAgB,aAAAC,YAAW,YAAAC,iBAAgB;AAE3C,OAAO,gBAAgB;AACvB,OAAO,sBAAsB;;;ACH7B,SAAgB,YAAAC,WAAU,aAAAC,YAAW,UAAAC,eAAc;;;ACAnD,SAAS,YAAAC,iBAAgB;;;ACAzB,SAAgB,YAAAC,WAAU,aAAAC,kBAAiB;;;ACA3C,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;;;ACCpC,SAAS,UAAAC,SAAQ,YAAAC,YAAU,aAAAC,kBAAiB;;;ACD5C,SAAS,YAAAC,YAAU,aAAAC,YAAW,UAAAC,eAAc;;;ACA5C,SAAgB,YAAAC,YAAU,aAAAC,mBAAyB;;;ACAnD,SAAgB,YAAAC,YAAU,aAAAC,mBAAiB;;;ACA3C,SAAS,aAAAC,aAAW,YAAAC,kBAAgB;;;ACApC,SAAoB,aAAAC,aAAW,UAAAC,SAAQ,YAAAC,kBAAgB;;;ACAvD,SAAS,aAAAC,aAAW,UAAAC,eAAc;;;ACAlC,SAAS,aAAAC,mBAAiB;;;ACA1B,SAAS,aAAAC,mBAAiB;AAEnB,SAAS,eACd,MACA,UAGA,SACA;AACA,EAAAA,YAAU,MAAM;AACd,WAAO,iBAAiB,MAAa,UAAU,OAAO;AACtD,WAAO,MAAM,OAAO,oBAAoB,MAAa,UAAU,OAAO;AAAA,EACxE,GAAG,CAAC,MAAM,QAAQ,CAAC;AACrB;;;ACbA,SAAS,aAAa,aAAAC,aAAW,YAAAC,kBAAgB;AAIjD,IAAM,qBAAqB;AAAA,EACzB,SAAS;AACX;AAEO,SAAS,kBAAkB;AAChC,QAAM,CAAC,YAAY,aAAa,IAAIC,WAAS;AAAA,IAC3C,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,UAAU,YAAY,MAAM;AAChC,kBAAc;AAAA,MACZ,OAAO,OAAO,cAAc;AAAA,MAC5B,QAAQ,OAAO,eAAe;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,iBAAe,UAAU,SAAS,kBAAkB;AACpD,iBAAe,qBAAqB,SAAS,kBAAkB;AAC/D,EAAAC,YAAU,SAAS,CAAC,CAAC;AAErB,SAAO;AACT;;;ApBvBA,YAAY,aAAa;AACzB,YAAY,mBAAmB;;;AqBJ/B,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ArBCA,SAAS,UAAU;;;AsBNnB,OAAOC,YAAW;AAiCX,IAAM,OAAOC,OAAM;AAAA,EACxB,CACE,EAAE,OAAO,OAAO,UAAU,MAAM,OAAO,SAAS,WAAW,KAAK,YAAY,QAAQ,GAAG,KAAK,GAC5F,QACG;AACH,QAAI,gBACF;AACF,QAAI,eAAe;AAAA,MACjB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AACA,QAAI,aAAa;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AACA,QAAI,YAAY;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AACA,QAAI,kBAAkB;AAAA,MACpB,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AACA,QAAI,cAAmB;AAAA,MACrB,OACE;AAAA,MACF,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QACE;AAAA,MACF,QACE;AAAA,MACF,QACE;AAAA,MACF,MAAM;AAAA,MACN,OACE;AAAA,MACF,SACE;AAAA,IACJ;AACA,QAAI,OAAO;AACT,aACE,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,aAAa,MAAM;AAAA,YACnB,QAAQ,YAAY,KAAK,IAAI;AAAA,YAC7B,KAAK;AAAA,UACP;AAAA;AAAA,QAEC,OAAO,gBAAAA,OAAA,cAAC,UAAK,WAAW,GAAG,UAAU,IAAI,GAAG,gBAAgB,SAAS,CAAC,GAAG;AAAA,QACzE,QAAQ;AAAA,QACR;AAAA,MACH;AAAA,IAEJ,OAAO;AACL,aACE,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ,YAAY,KAAK,IAAI;AAAA,UAC/B;AAAA;AAAA,MACD;AAAA,IAEL;AAAA,EACF;AACF;;;AC5GA,YAAYC,aAAW;AAEvB,YAAY,yBAAyB;AASrC,IAAM,aAAmB,mBAGvB,CAAC,EAAE,WAAW,UAAU,cAAc,YAAY,GAAG,MAAM,GAAG,QAAQ;AACtE,QAAM,gBAAsB,eAA8B,IAAI;AAC9D,QAAM,aAAmB,eAAO,KAAK;AACrC,QAAM,WAAiB,eAAO,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAC5C,QAAM,YAAkB,eAAO,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;AAElD,QAAM,CAAC,cAAc,eAAe,IAAU,iBAAS,KAAK;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAU,iBAAS,KAAK;AAE9D,QAAM,gBAAgB,MAAM;AAC1B,QAAI,cAAc,SAAS;AACzB,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,cAAc;AAC/D,sBAAgB,aAAa,CAAC;AAC9B,uBAAiB,aAAa,cAAc,WAAW;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAwB;AAC3C,eAAW,UAAU;AACrB,aAAS,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ;AAChD,QAAI,cAAc,SAAS;AACzB,gBAAU,UAAU;AAAA,QAClB,KAAK,cAAc,QAAQ;AAAA,QAC3B,MAAM,cAAc,QAAQ;AAAA,MAC9B;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,WAAW;AAClD,aAAS,iBAAiB,WAAW,SAAS;AAAA,EAChD;AAEA,QAAM,cAAc,CAAC,MAAkB;AACrC,QAAI,CAAC,WAAW,WAAW,CAAC,cAAc,QAAS;AACnD,UAAM,KAAK,EAAE,UAAU,SAAS,QAAQ;AACxC,UAAM,KAAK,EAAE,UAAU,SAAS,QAAQ;AACxC,QAAI,gBAAgB,YAAY;AAC9B,oBAAc,QAAQ,YAAY,UAAU,QAAQ,MAAM;AAAA,IAC5D,OAAO;AACL,oBAAc,QAAQ,aAAa,UAAU,QAAQ,OAAO;AAC5D,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,YAAY,MAAM;AACtB,eAAW,UAAU;AACrB,aAAS,oBAAoB,aAAa,WAAW;AACrD,aAAS,oBAAoB,WAAW,SAAS;AAAA,EACnD;AAEA,EAAM,kBAAU,MAAM;AACpB,kBAAc;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,iBAAiB,UAAU,aAAa;AAC9D,aAAO,iBAAiB,UAAU,aAAa;AAAA,IACjD;AACA,WAAO,MAAM;AACX,UAAI,cAAc,SAAS;AACzB,sBAAc,QAAQ,oBAAoB,UAAU,aAAa;AAAA,MACnE;AACA,aAAO,oBAAoB,UAAU,aAAa;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAqB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,eAAe;AAAA,QACjC;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAqB;AAAA,MAApB;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,IACA,sCAAC,aAAU,aAA0B;AAAA,IACrC,sCAAqB,4BAApB,IAA2B;AAAA,EAC9B;AAEJ,CAAC;AAED,WAAW,cAAkC,yBAAK;AAElD,IAAM,YAAkB,mBAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAG,QACpD;AAAA,EAAqB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cACd;AAAA,MACF,gBAAgB,gBACd;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEJ;AAAA,IAAqB;AAAA,IAApB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,cAAc;AAAA,MAChC;AAAA;AAAA,EACF;AACF,CACD;AAED,UAAU,cAAkC,wCAAoB;;;AvB1HhE,IAAM,kBAAkB,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,YACE;AAAA,MACF,iBACE;AAAA,IACJ;AAAA,IACA,aAAa,EAAE,YAAY,IAAI,UAAU,GAAG;AAAA,EAC9C;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,WAAW,aAAa,aAAa;AACnE,CAAC;AAED,IAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,YACE;AAAA,MACF,iBACE;AAAA,IACJ;AAAA,IACA,aAAa,EAAE,YAAY,IAAI,UAAU,GAAG;AAAA,EAC9C;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,WAAW,aAAa,aAAa;AACnE,CAAC;AAID,IAAM,cAAoB,sBAIvB,EAAE,aAAa,cAAc,SAAS,WAAW,YAAY,MAAM,CAAC;AAOvE,IAAM,OAAa;AAAA,EACjB,CAAC,EAAE,WAAW,aAAa,YAAY,UAAU,WAAW,GAAG,MAAM,GAAG,QACtE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,aAAa,kBAAkB;AAAA,QAC/C;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ,sCAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,SAAS,WAAW,KAC7D,MAAM,QACT;AAAA,EACF;AAEJ;AAQA,IAAM,WAAiB;AAAA,EACrB,CAAC,EAAE,WAAW,YAAY,GAAG,MAAM,GAAG,QAAQ;AAC5C,UAAM,EAAE,aAAa,SAAS,WAAW,IAAU,mBAAW,WAAW;AACzE,UAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAI,cAAc,QAAQ,OAAO,gBAAgB,cAAc;AAC7D,aACE,sCAAC,cAAW,aAAY,cAAa,WAAW,yCAAY,cAC1D;AAAA,QAAe;AAAA,QAAd;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT,gBAAgB,EAAE,SAAS,YAAY,CAAC;AAAA,YACxC;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA;AAAA,MACN,CACF;AAAA,IAEJ,OAAO;AACL,aACE;AAAA,QAAe;AAAA,QAAd;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT,gBAAgB,EAAE,SAAS,YAAY,CAAC;AAAA,YACxC,gBAAgB,aAAa,kBAAkB;AAAA,YAC/C;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,EACF;AACF;AAWA,IAAM,cAAoB,mBAGxB,CAAC,EAAE,WAAW,WAAW,cAAc,OAAO,gBAAgB,GAAG,MAAM,GAAG,QAAQ;AAClF,QAAM,EAAE,aAAa,QAAQ,IAAU,mBAAW,WAAW;AAE7D,MAAI,aAAa;AACf,WACE,sCAAS,cAAR,EAAa,MAAM,MAAM,eACxB,sCAAS,gBAAR,EAAe,SAAO,QACrB;AAAA,MAAe;AAAA,MAAd;AAAA,QACC,WAAW,GAAG,mBAAmB,EAAE,SAAS,YAAY,CAAC,GAAG,iBAAiB,SAAS;AAAA,QACrF,GAAG;AAAA;AAAA,MAEH,MAAM;AAAA,MACN,aAAa,sCAAC,QAAM,GAAG,WAAW;AAAA,IACrC,CACF,GACA;AAAA,MAAS;AAAA,MAAR;AAAA,QACC,SAAS;AAAA,QACT,SAAO;AAAA,QACP,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEA,sCAAC,SAAI,WAAU,cAAW,KAAE,MAAM,cAAe;AAAA,IACnD,CACF;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAe;AAAA,MAAd;AAAA,QACC,WAAW,GAAG,mBAAmB,EAAE,SAAS,YAAY,CAAC,GAAG,iBAAiB,SAAS;AAAA,QACrF,GAAG;AAAA;AAAA,MAEH,MAAM;AAAA,MACN,aAAa,sCAAC,QAAM,GAAG,WAAW;AAAA,IACrC;AAAA,EAEJ;AACF,CAAC;AAED,IAAM,cAAoB,mBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAe;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,KAAK,cAA4B,mBAAK;AACtC,SAAS,cAA4B,mBAAK;AAC1C,YAAY,cAA4B,sBAAQ;AAChD,YAAY,cAA4B,sBAAQ;","names":["React","useEffect","useState","React","useState","useRef","useEffect","useState","useState","useEffect","useRef","useState","useState","useEffect","useEffect","useState","useRef","useState","useEffect","useState","useEffect","useRef","useState","useEffect","useState","useEffect","useEffect","useState","useEffect","useRef","useState","useEffect","useRef","useEffect","useEffect","useEffect","useState","useState","useEffect","React","React","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.49.13-next",
+  "version": "0.49.15-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -48,68 +48,68 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.3",
-    "@hookform/resolvers": "^3.9.0",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-menubar": "^1.1.1",
-    "@radix-ui/react-navigation-menu": "^1.2.0",
-    "@radix-ui/react-popover": "^1.1.1",
+    "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/table-core": "^8.20.5",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "date-fns": "^3.6.0",
-    "embla-carousel-auto-height": "^8.2.0",
-    "embla-carousel-react": "^8.2.0",
-    "input-otp": "^1.2.4",
-    "libphonenumber-js": "^1.11.7",
-    "prism-react-renderer": "^2.4.0",
+    "cmdk": "^1.0.4",
+    "date-fns": "^4.1.0",
+    "embla-carousel-auto-height": "^8.5.1",
+    "embla-carousel-react": "^8.5.1",
+    "input-otp": "^1.4.1",
+    "libphonenumber-js": "^1.11.16",
+    "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.29.0",
-    "react-day-picker": "^9.0.8",
-    "react-dropzone": "^14.2.3",
+    "react-day-picker": "^9.4.2",
+    "react-dropzone": "^14.3.5",
     "react-headless-pagination": "^1.1.6",
-    "react-hook-form": "^7.53.0",
-    "react-select": "^5.8.0",
-    "signature_pad": "^5.0.3",
-    "sonner": "^1.5.0",
-    "tailwind-merge": "^2.5.2",
-    "tailwind-variants": "^0.2.1",
+    "react-hook-form": "^7.54.0",
+    "react-select": "^5.8.3",
+    "signature_pad": "^5.0.4",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwind-variants": "^0.3.0",
     "trim-canvas": "^0.1.2",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-react": "^7.26.3",
     "@sikka/alam": "^0.0.4",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.4.20",
     "boxen": "^8.0.1",
     "chalk": "^5.3.0",
-    "embla-carousel": "8.2.0",
+    "embla-carousel": "8.5.1",
     "jest": "^29.7.0",
-    "lucide-react": "^0.438.0",
-    "postcss": "^8.4.43",
+    "lucide-react": "^0.468.0",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.16",
     "tailwindcss-animate": "^1.0.7",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "tsup": "^8.2.4"
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "tsup": "^8.3.5"
   },
   "scripts": {
     "check": "tsc --noEmit",