reablocks/dist/index.umd.cjs.map

Component library for React

{"version":3,"file":"index.umd.cjs","sources":["../src/utils/ExitListener/useExitListener.tsx","../src/utils/Overlay/OverlayContext.ts","../src/utils/useId.ts","../src/utils/useUnmount.ts","../src/utils/Portal/Portal.ts","../src/utils/Overlay/OverlayPortal/OverlayPortal.tsx","../src/layers/Backdrop/Backdrop.tsx","../src/layers/Backdrop/BackdropTheme.tsx","../src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx","../src/utils/Overlay/OverlayTrigger.tsx","../src/utils/Position/usePosition.tsx","../src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx","../src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx","../src/utils/Overlay/useOverlay.tsx","../src/elements/Button/ButtonTheme.ts","../src/elements/Button/ButtonGroupContext.ts","../src/elements/Button/Button.tsx","../src/elements/Button/ButtonGroup.tsx","../src/elements/Chip/Chip.tsx","../src/form/Calendar/utils.ts","../src/form/Calendar/CalendarDays/CalendarDays.tsx","../src/form/Calendar/CalendarMonths/CalendarMonths.tsx","../src/form/Calendar/CalendarYears/CalendarYears.tsx","../src/typography/PageTitle/PageTitle.tsx","../src/typography/PrimaryHeading/PrimaryHeading.tsx","../src/typography/SecondaryHeading/SecondaryHeading.tsx","../src/typography/SmallHeading/SmallHeading.tsx","../src/typography/Sub/Sub.tsx","../src/typography/Text/Text.tsx","../src/typography/TypographyTheme.ts","../src/layout/Divider/Divider.tsx","../src/layout/Divider/DividerTheme.ts","../src/form/Calendar/CalendarTimes/TimeColumn.tsx","../src/layout/Collapse/Collapse.tsx","../src/layout/Collapse/CollapseTheme.ts","../src/layout/Motion/MotionGroup.tsx","../src/layout/Motion/MotionItem.tsx","../src/layout/List/List.tsx","../src/layout/List/ListItem/ListItem.tsx","../src/layout/List/ListHeader/ListHeader.tsx","../src/layout/List/ListTheme.ts","../src/layout/Block/Block.tsx","../src/layout/Block/BlockTheme.ts","../src/layout/Card/CardTheme.tsx","../src/layout/Card/Card.tsx","../src/layout/Stack/Stack.tsx","../src/layout/Stack/StackTheme.ts","../src/elements/Arrow/Arrow.tsx","../src/elements/Arrow/ArrowTheme.ts","../src/layout/Tree/TreeContext.ts","../src/layout/Tree/Tree.tsx","../src/layout/Tree/TreeNode.tsx","../src/layout/Tree/TreeTheme.ts","../src/utils/Theme/helpers/isObject.ts","../src/utils/Theme/helpers/cloneDeep.ts","../src/utils/Theme/helpers/mergeDeep.ts","../src/utils/Theme/helpers/cn.ts","../src/utils/Theme/helpers/tokenUtils.ts","../src/utils/Theme/ThemeProvider.tsx","../src/utils/Theme/hooks/useTheme.ts","../src/utils/Theme/hooks/useComponentTheme.ts","../src/data/Ellipsis/Ellipsis.tsx","../src/data/Ellipsis/EllipsisTheme.ts","../src/data/InfinityList/useInfinityList.ts","../src/data/InfinityList/InfinityList.tsx","../src/layout/Tree/JsonTree/JsonTreeNode.tsx","../src/layout/Tree/JsonTree/utils.ts","../src/layout/Tree/JsonTree/JsonTree.tsx","../src/layout/Tree/JsonTree/JsonTreeTheme.ts","../src/layout/VerticalSpacer/VerticalSpacer.tsx","../src/layout/VerticalSpacer/VerticalSpacerTheme.ts","../src/layout/Tabs/TabPanel.tsx","../src/layout/Tabs/Tab.tsx","../src/layout/Tabs/TabList.tsx","../src/layout/Tabs/Tabs.tsx","../src/layout/Tabs/TabsTheme.ts","../src/layout/Breadcrumbs/Breadcrumbs.tsx","../src/layout/Breadcrumbs/BreadcrumbsTheme.ts","../src/layout/Breadcrumbs/BreadcrumbItem.tsx","../src/layout/Breadcrumbs/BreadcrumbLink.tsx","../src/layout/Breadcrumbs/BreadcrumbList.tsx","../src/layout/Breadcrumbs/BreadcrumbSeparator.tsx","../src/layout/Breadcrumbs/BreadcrumbPage.tsx","../src/layout/Stepper/Step.tsx","../src/layout/Stepper/Stepper.tsx","../src/layout/Stepper/StepperTheme.tsx","../src/form/Calendar/CalendarTimes/CalendarTimes.tsx","../src/form/Calendar/CalendarPresets/CalendarPresets.tsx","../src/form/Calendar/CalendarPresets/default-options.ts","../src/form/Calendar/Calendar.tsx","../src/form/Calendar/CalendarRange.tsx","../src/form/Calendar/CalendarTheme.ts","../src/form/Calendar/CalendarRangeTheme.ts","../src/form/Checkbox/CheckboxLabel.tsx","../src/form/Checkbox/Checkbox.tsx","../src/form/Checkbox/CheckboxTheme.ts","../src/form/Input/Input.tsx","../src/form/Input/InlineInput/InlineInput.tsx","../src/form/Input/DebouncedInput/DebouncedInput.tsx","../src/form/Input/InputTheme.ts","../src/form/Radio/RadioGroupContext.ts","../src/form/Radio/Radio.tsx","../src/form/Radio/RadioGroup.tsx","../src/form/Radio/RadioTheme.ts","../src/form/Range/RangeTooltip.tsx","../src/form/Range/RangeDouble.tsx","../src/form/Range/RangeSingle.tsx","../src/form/Range/RangeTheme.ts","../src/form/Select/icons/DownArrowIcon.tsx","../src/form/Select/icons/CloseIcon.tsx","../src/elements/Loader/DotsLoader.tsx","../src/form/Select/icons/RefreshIcon.tsx","../src/form/Select/SelectInput/SelectInputChip.tsx","../src/form/Select/SelectInput/SelectInput.tsx","../src/form/Select/SelectInput/SelectInputTheme.ts","../src/form/Select/icons/CheckIcon.tsx","../src/form/Select/SelectMenu/SelectMenu.tsx","../src/form/Select/SelectMenu/SelectMenuTheme.ts","../src/form/Select/utils/grouping.ts","../src/form/Select/SelectOption.tsx","../src/form/Select/utils/options.ts","../src/form/Select/utils/useWidth.ts","../src/form/Select/utils/keyboard.ts","../src/form/Select/Select.tsx","../src/form/Select/SelectTheme.ts","../src/form/Textarea/Textarea.tsx","../src/form/Textarea/TextareaTheme.ts","../src/form/Toggle/Toggle.tsx","../src/form/Toggle/ToggleTheme.ts","../src/elements/IconButton/IconButton.tsx","../src/layers/Menu/Menu.tsx","../src/layers/Menu/useMenu.tsx","../src/layers/Menu/NestedMenu.tsx","../src/layers/Menu/MenuTheme.tsx","../src/assets/icons/calendar.svg?react","../src/form/DateInput/DateInput.tsx","../src/form/DateInput/DateInputTheme.ts","../src/elements/Chip/DeletableChip.tsx","../src/elements/Chip/ChipTheme.ts","../src/elements/Loader/DotsLoaderTheme.ts","../src/elements/Avatar/Avatar.tsx","../src/elements/Avatar/AvatarTheme.ts","../src/data/Pluralize/utils.ts","../src/data/Pluralize/Pluralize.tsx","../src/data/DataSize/utils.ts","../src/data/DataSize/DataSize.tsx","../src/data/Redact/Redact.tsx","../src/data/Redact/RedactTheme.ts","../src/data/Duration/utils.ts","../src/data/Duration/Duration.tsx","../src/data/DateFormat/relative.ts","../src/data/DateFormat/formatting.ts","../src/data/DateFormat/DateFormat.tsx","../src/data/DateFormat/DateFormatTheme.ts","../src/data/Sort/DownArrowIcon.tsx","../src/data/Sort/utils.ts","../src/data/Sort/Sort.tsx","../src/data/Sort/SortTheme.ts","../src/elements/CommandPalette/CommandPaletteInput/SearchIcon.tsx","../src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx","../src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts","../src/elements/CommandPalette/useFlattenedTree.ts","../src/elements/CommandPalette/CommandPalette.tsx","../src/elements/Kbd/utils.ts","../src/elements/Kbd/Kbd.tsx","../src/elements/Kbd/KbdTheme.ts","../src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItem.tsx","../src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts","../src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSection.tsx","../src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSectionTheme.ts","../src/elements/CommandPalette/CommandPaletteTheme.ts","../src/data/Pager/assets/arrow-end.svg?react","../src/data/Pager/assets/arrow-next.svg?react","../src/data/Pager/assets/arrow-previous.svg?react","../src/data/Pager/assets/arrow-start.svg?react","../src/data/Pager/utils.ts","../src/data/Pager/Pager.tsx","../src/data/Pager/PagerTheme.ts","../src/elements/AvatarGroup/AvatarGroup.tsx","../src/elements/AvatarGroup/AvatarGroupTheme.ts","../src/elements/Badge/Badge.tsx","../src/elements/Badge/BadgeTheme.ts","../src/layers/Tooltip/useTooltipState.ts","../src/layers/Tooltip/Tooltip.tsx","../src/layers/Tooltip/TooltipTheme.ts","../src/layers/Popover/Popover.tsx","../src/layers/Popover/PopoverTheme.ts","../src/layers/Dialog/DialogHeader.tsx","../src/layers/Dialog/Dialog.tsx","../src/layers/Dialog/useDialog.tsx","../src/layers/Dialog/DialogTheme.tsx","../src/layers/Drawer/variants.ts","../src/layers/Drawer/DrawerHeader.tsx","../src/layers/Drawer/Drawer.tsx","../src/layers/Drawer/useDrawer.tsx","../src/layers/Drawer/DrawerTheme.ts","../src/layers/ContextMenu/ContextMenu.tsx","../src/layers/ContextMenu/ContextMenuTheme.ts","../src/layers/Notification/Notification.tsx","../src/layers/Notification/NotificationsContext.tsx","../src/assets/icons/info.svg?react","../src/assets/icons/check_circle.svg?react","../src/assets/icons/warning.svg?react","../src/assets/icons/error_circle.svg?react","../src/layers/Notification/Notifications.tsx","../src/layers/Notification/useNotification.ts","../src/layers/Notification/NotificationTheme.ts","../src/layers/Callout/Callout.tsx","../src/layers/Callout/CalloutTheme.ts","../src/layers/Callout/SuccessCallout.tsx","../src/layers/Callout/ErrorCallout.tsx","../src/layers/Callout/WarningCallout.tsx","../src/layers/Callout/InfoCallout.tsx","../src/layers/ConfirmDialog/ConfirmDialog.tsx","../src/layers/ConfirmDialog/useConfirmDialog.tsx","../src/utils/Theme/themes/theme.ts","../src/utils/Theme/themes/extendTheme.ts","../src/utils/Theme/themes/extendCoponentTheme.ts","../src/utils/Theme/themes/extractTheme.ts","../src/utils/Theme/blocks/ColorBlocks.tsx","../src/utils/Theme/blocks/TypographyBlocks.tsx","../src/utils/Theme/blocks/SpacingBlocks.tsx","../src/utils/Theme/blocks/PaletteBlocks.tsx","../src/utils/Theme/blocks/BorderBlocks.tsx","../src/utils/Theme/blocks/ShadowBlocks.tsx","../src/utils/Theme/blocks/ComponentBlocks.tsx","../src/utils/Theme/blocks/IconBlocks.tsx","../src/utils/CloneElement.tsx","../src/utils/useUserSelect.ts","../src/utils/useCursor.ts"],"sourcesContent":["import { MutableRefObject, RefObject, useEffect } from 'react';\n\ninterface ExitListenerOptions {\n  /**\n   * A ref object pointing to the target element that the hook should\n   * observe for click outside and escape key events.\n   */\n  ref: RefObject<HTMLElement | null> | MutableRefObject<HTMLElement>;\n\n  /**\n   * An optional boolean to enable or disable the event listeners.\n   * When set to true (default), the event listeners are active.\n   */\n  open?: boolean;\n\n  /**\n   * An optional callback function that is called when a click\n   * event occurs outside the target element.\n   */\n  onClickOutside?: (event: MouseEvent) => void;\n\n  /**\n   * An optional callback function that is called\n   * when the 'Escape' key is pressed.\n   */\n  onEscape?: (event: KeyboardEvent) => void;\n}\n\n/**\n * Hook to listen for click outside and escape key events.\n */\nexport const useExitListener = ({\n  ref,\n  open = true,\n  onClickOutside,\n  onEscape\n}: ExitListenerOptions) => {\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handleClick = (event: MouseEvent | TouchEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        onClickOutside?.(event as MouseEvent);\n      }\n    };\n\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.code === 'Escape') {\n        onEscape?.(event);\n      }\n    };\n\n    if (onClickOutside) {\n      document.addEventListener('mousedown', handleClick);\n      document.addEventListener('touchstart', handleClick);\n    }\n\n    if (onEscape) {\n      document.addEventListener('keydown', handleKey);\n    }\n\n    return () => {\n      if (onClickOutside) {\n        document.removeEventListener('mousedown', handleClick);\n        document.removeEventListener('touchstart', handleClick);\n      }\n\n      if (onEscape) {\n        document.removeEventListener('keydown', handleKey);\n      }\n    };\n  }, [ref, onClickOutside, onEscape, open]);\n};\n","import { createContext } from 'react';\n\nexport interface OverlayContextValue {\n  /**\n   * Closes current overlay.\n   */\n  close(): void;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>({\n  close: () => undefined\n});\n","import { useState } from 'react';\n\nlet id = 0;\nconst genId = () => `ref-${++id}`;\n\n/**\n * Auto-generate a id.\n * Inspired by: https://github.com/reach/reach-ui/blob/master/packages/auto-id/src/index.ts\n */\nexport const useId = (idFromProps?: string | null) => {\n  const [id] = useState(idFromProps || genId());\n  return `${id}`;\n};\n","import { useLayoutEffect, useRef } from 'react';\n\n/**\n * Hook to run a function when the component unmounts.\n *\n * @param fn The function to run when the component unmounts.\n */\nexport const useUnmount = fn => {\n  const fnRef = useRef(fn);\n  fnRef.current = fn;\n  useLayoutEffect(() => () => fnRef.current(), []);\n};\n","import React, { CSSProperties } from 'react';\nimport {\n  useImperativeHandle,\n  forwardRef,\n  FC,\n  PropsWithChildren,\n  useLayoutEffect,\n  useRef,\n  useEffect,\n  LegacyRef\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUnmount } from '@/utils/useUnmount';\n\nexport interface PortalProps extends PropsWithChildren {\n  /**\n   * Element to create for the portal.\n   */\n  element?: string;\n\n  /**\n   * Class name to apply to the portal element.\n   */\n  className?: string;\n\n  /**\n   * Style to apply to the portal element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Callback for portal mounts.\n   */\n  onMount?: () => void;\n\n  /**\n   * Callback for portal unmounts.\n   */\n  onUnmount?: () => void;\n}\n\nexport interface PortalRef {\n  /**\n   * Reference to the portal element.\n   */\n  ref?: LegacyRef<HTMLElement>;\n}\n\nexport const Portal: FC<PortalProps & PortalRef> = forwardRef<\n  HTMLElement,\n  PortalProps\n>(\n  (\n    { children, className, style, element = 'div', onMount, onUnmount },\n    ref\n  ) => {\n    const elementRef = useRef<HTMLElement | null>(null);\n    const mounted = useRef<boolean>(false);\n\n    useEffect(() => {\n      if (className && elementRef.current) {\n        elementRef.current.setAttribute('class', `${className} rdk-portal`);\n      }\n      if (style && elementRef.current) {\n        Object.keys(style)?.forEach((key: string) =>\n          elementRef.current.style?.setProperty(key, style[key])\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [className, style, elementRef.current]);\n\n    useLayoutEffect(() => {\n      // Create ref to created element once, on mount\n      elementRef.current = document.createElement(element);\n      onMount?.();\n    }, []);\n\n    useUnmount(() => {\n      onUnmount?.();\n      const ref = elementRef.current;\n      if (ref && document.body.contains(ref)) {\n        document.body.removeChild(ref);\n      }\n    });\n\n    useImperativeHandle(ref, () => elementRef.current!);\n\n    if (!elementRef.current) {\n      return null;\n    }\n\n    if (!mounted.current) {\n      mounted.current = true;\n      elementRef.current.classList.add('rdk-portal');\n      document.body.appendChild(elementRef.current);\n    }\n\n    return createPortal(children, elementRef.current) as React.JSX.Element;\n  }\n);\n","import React, {\n  CSSProperties,\n  FC,\n  forwardRef,\n  LegacyRef,\n  useImperativeHandle,\n  useRef,\n  useState\n} from 'react';\nimport { useId } from '@/utils/useId';\nimport { Portal } from '@/utils/Portal';\n\n// NOTE: This should not be used by external consumers.\nexport const portals: string[] = [];\n\nconst START_INDEX = 990;\n\nexport interface OverlayPortalRef {\n  /**\n   * Reference to the overlay portal element.\n   */\n  ref?: LegacyRef<HTMLElement>;\n}\n\n/**\n * Represents an event that occurs when an overlay portal is mounted.\n */\nexport interface OverlayPortalMountEvent {\n  /**\n   * The index of the overlay.\n   */\n  overlayIndex: number;\n\n  /**\n   * The index of the portal.\n   */\n  portalIndex: number;\n\n  /**\n   * The ID of the portal.\n   */\n  portalId: string;\n\n  /**\n   * The index of the backdrop.\n   */\n  backdropIndex: number;\n}\n\nexport interface OverlayPortalProps {\n  /**\n   * If true, the overlay portal will be appended to the body.\n   */\n  appendToBody?: boolean;\n\n  /**\n   * The class name of the overlay portal.\n   */\n  className?: string;\n\n  /**\n   * The style of the overlay portal.\n   */\n  style?: CSSProperties;\n\n  /**\n   * The id of the overlay portal.\n   */\n  id?: string;\n\n  /**\n   * A function that returns the children of the overlay portal. It receives an object of type OverlayPortalMountEvent as an argument.\n   */\n  children: (props: OverlayPortalMountEvent) => any;\n\n  /**\n   * A function that is called when the overlay portal mounts. It receives an object of type OverlayPortalMountEvent as an argument.\n   */\n  onMount?: (event: OverlayPortalMountEvent) => void;\n\n  /**\n   * A function that is called when the overlay portal unmounts.\n   */\n  onUnmount?: () => void;\n}\n\nexport const OverlayPortal: FC<OverlayPortalProps & OverlayPortalRef> =\n  forwardRef(\n    (\n      {\n        className,\n        children,\n        onMount,\n        onUnmount,\n        appendToBody = true,\n        id,\n        style\n      },\n      ref\n    ) => {\n      let portalId = useId(id);\n\n      const [portalIndex, setPortalIndex] = useState<number | null>(null);\n      const [overlayIndex, setOverlayIndex] = useState<number | null>(null);\n      const portalRef = useRef<any | null>(null);\n\n      useImperativeHandle(ref, () => portalRef.current);\n\n      return (\n        <Portal\n          className={className}\n          ref={portalRef}\n          style={style}\n          appendToBody={appendToBody}\n          onMount={() => {\n            portals.push(portalId);\n\n            let pidx = portals.indexOf(portalId);\n            setPortalIndex(pidx);\n\n            const overlayIdx = START_INDEX + pidx * 2 + 1;\n            setOverlayIndex(overlayIdx);\n\n            onMount?.({\n              portalId,\n              overlayIndex: overlayIdx,\n              portalIndex: pidx,\n              backdropIndex: overlayIdx\n            });\n          }}\n          onUnmount={() => {\n            onUnmount?.();\n            portals.splice(portals.indexOf(portalId), 1);\n            setPortalIndex(null);\n            setOverlayIndex(null);\n          }}\n        >\n          {children({\n            overlayIndex: overlayIndex as number,\n            portalIndex: portalIndex as number,\n            backdropIndex: overlayIndex as number,\n            portalId\n          })}\n        </Portal>\n      );\n    }\n  );\n","import React, { FC, MouseEvent } from 'react';\nimport { motion } from 'motion/react';\nimport { cn, useComponentTheme } from '@/utils';\n\nimport { BackdropTheme } from './BackdropTheme';\n\nexport interface BackdropProps {\n  /**\n   * The z-index of the backdrop.\n   */\n  zIndex?: number;\n\n  /**\n   * The index of the portal.\n   */\n  portalIndex?: number;\n\n  /**\n   * Additional class names to apply to the backdrop.\n   */\n  className?: string;\n\n  /**\n   * Theme for the Backdrop.\n   */\n  theme?: BackdropTheme;\n\n  /**\n   * Callback for when the backdrop is clicked.\n   */\n  onClick?: (event: MouseEvent) => void;\n}\n\nexport const Backdrop: FC<BackdropProps> = ({\n  zIndex = 998,\n  portalIndex = 0,\n  className,\n  theme: customTheme,\n  onClick\n}) => {\n  const theme = useComponentTheme<BackdropTheme>('backdrop', customTheme);\n\n  return (\n    <motion.div\n      className={cn(theme.base, className)}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: theme.opacity - (portalIndex as number) / 10 }}\n      exit={{ opacity: 0 }}\n      style={{ zIndex }}\n      onClick={onClick}\n    />\n  );\n};\n","export interface BackdropTheme {\n  base: string;\n  opacity: number;\n}\n\nexport const backdropTheme: BackdropTheme = {\n  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-black',\n  opacity: 0.8\n};\n\nexport const legacyBackdropTheme: BackdropTheme = {\n  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-[var(--color-layer-transparent)]',\n  opacity: 0.8\n};\n","import React, { FC, Fragment, useCallback, useEffect, useRef } from 'react';\nimport {\n  disableBodyScroll,\n  clearAllBodyScrollLocks\n} from 'body-scroll-lock-upgrade';\nimport { OverlayContext } from '@/utils/Overlay/OverlayContext';\nimport { AnimatePresence } from 'motion/react';\nimport { OverlayPortal } from '@/utils/Overlay/OverlayPortal';\nimport { useExitListener } from '@/utils/ExitListener';\nimport { Backdrop } from '@/layers/Backdrop';\n\nexport interface GlobalOverlayProps {\n  /**\n   * The children to be rendered within the global overlay.\n   */\n  children?: any;\n\n  /**\n   * If true, the global overlay is open.\n   */\n  open: boolean;\n\n  /**\n   * If true, the global overlay will close when the backdrop is clicked.\n   */\n  closeOnBackdropClick?: boolean;\n\n  /**\n   * If true, the global overlay will have a backdrop.\n   */\n  hasBackdrop?: boolean;\n\n  /**\n   * The CSS class name to be applied to the backdrop of the global overlay.\n   */\n  backdropClassName?: string;\n\n  /**\n   * If true, the global overlay will close when the escape key is pressed.\n   */\n  closeOnEscape?: boolean;\n\n  /**\n   * A function that is called when the global overlay is closed.\n   */\n  onClose?: () => void;\n}\n\nexport const GlobalOverlay: FC<GlobalOverlayProps> = ({\n  open,\n  hasBackdrop = true,\n  closeOnEscape = true,\n  closeOnBackdropClick = true,\n  backdropClassName,\n  children,\n  onClose\n}) => {\n  const overlayRef = useRef<any | null>(null);\n\n  const onBackdropClick = useCallback(() => {\n    if (closeOnBackdropClick) {\n      onClose?.();\n    }\n  }, [closeOnBackdropClick, onClose]);\n\n  useExitListener({\n    ref: overlayRef,\n    open,\n    onEscape: () => closeOnEscape && onClose?.()\n  });\n\n  useEffect(() => {\n    if (open && overlayRef.current !== undefined) {\n      disableBodyScroll(overlayRef.current, {\n        // allowTouchMove determines which elements to allow touchmove events for iOS\n        // Reference: https://github.com/rick-liruixin/body-scroll-lock-upgrade?tab=readme-ov-file#allowtouchmove\n        // NOTE: allowTouchMove is typed wrong: https://github.com/rick-liruixin/body-scroll-lock-upgrade/issues/21\n        allowTouchMove: (el: HTMLElement) => {\n          while (el && el !== document.body) {\n            if (el.getAttribute('body-scroll-lock-ignore') !== null) {\n              return true;\n            }\n            if (el.parentElement !== null) {\n              el = el.parentElement;\n            }\n          }\n          return false;\n        }\n      });\n    } else {\n      clearAllBodyScrollLocks();\n    }\n\n    return () => {\n      clearAllBodyScrollLocks();\n    };\n  }, [children, open]);\n\n  return (\n    <OverlayContext.Provider value={{ close: () => onClose?.() }}>\n      <AnimatePresence>\n        {open && (\n          <OverlayPortal ref={overlayRef}>\n            {({ overlayIndex, portalIndex }) => (\n              <Fragment>\n                {hasBackdrop && (\n                  <Backdrop\n                    zIndex={overlayIndex as number}\n                    portalIndex={portalIndex as number}\n                    onClick={onBackdropClick}\n                    className={backdropClassName}\n                  />\n                )}\n                <div body-scroll-lock-ignore=\"true\">\n                  {children({ overlayIndex, portalIndex })}\n                </div>\n              </Fragment>\n            )}\n          </OverlayPortal>\n        )}\n      </AnimatePresence>\n    </OverlayContext.Provider>\n  );\n};\n","import React, { useCallback, forwardRef, FC, LegacyRef } from 'react';\n\nexport type TriggerTypes = 'hover' | 'click' | 'contextmenu' | 'focus' | 'key';\n\nexport interface OverlayTriggerEvent {\n  /**\n   * The type of event that triggered the overlay.\n   */\n  type: TriggerTypes;\n\n  /**\n   * The native event that triggered the overlay.\n   */\n  nativeEvent: any;\n}\n\nexport interface OverlayTriggerProps {\n  /**\n   * The children to be rendered within the overlay trigger.\n   */\n  children?: any;\n\n  /**\n   * The CSS class name to be applied to the overlay trigger.\n   */\n  className?: string;\n\n  /**\n   * The type of element that will be used as the overlay trigger.\n   */\n  elementType?: any;\n\n  /**\n   * The type(s) of event(s) that will trigger the overlay.\n   * Can be a single trigger type or an array of trigger types.\n   */\n  trigger: TriggerTypes | TriggerTypes[];\n\n  /**\n   * A function that is called when the overlay is opened.\n   * It receives an object of type OverlayTriggerEvent as an argument.\n   */\n  onOpen?: (event: OverlayTriggerEvent) => void;\n\n  /**\n   * A function that is called when the overlay is closed.\n   * It receives an object of type OverlayTriggerEvent as an argument.\n   */\n  onClose?: (event: OverlayTriggerEvent) => void;\n}\n\nexport const OverlayTrigger: FC<\n  OverlayTriggerProps & {\n    ref: LegacyRef<HTMLSpanElement>;\n  }\n> = forwardRef(\n  (\n    {\n      children,\n      className,\n      elementType = 'span',\n      trigger = ['click'],\n      onOpen = () => undefined,\n      onClose = () => undefined\n    },\n    ref\n  ) => {\n    const hasTrigger = useCallback(\n      (type: TriggerTypes) => {\n        if (Array.isArray(trigger)) {\n          return trigger.includes(type);\n        } else {\n          return type === trigger;\n        }\n      },\n      [trigger]\n    );\n\n    const onFocus = useCallback(\n      event => {\n        if (hasTrigger('focus')) {\n          onOpen({ type: 'focus', nativeEvent: event });\n        }\n      },\n      [onOpen, hasTrigger]\n    );\n\n    const onBlur = useCallback(\n      event => {\n        if (hasTrigger('focus')) {\n          onClose({ type: 'focus', nativeEvent: event });\n        }\n      },\n      [onClose, hasTrigger]\n    );\n\n    const onMouseEnter = useCallback(\n      event => {\n        if (hasTrigger('hover')) {\n          onOpen({ type: 'hover', nativeEvent: event });\n        }\n      },\n      [onOpen, hasTrigger]\n    );\n\n    const onMouseLeave = useCallback(\n      event => {\n        if (hasTrigger('hover')) {\n          onClose({ type: 'hover', nativeEvent: event });\n        }\n      },\n      [onClose, hasTrigger]\n    );\n\n    const onClick = useCallback(\n      event => {\n        if (hasTrigger('click')) {\n          onOpen({ type: 'click', nativeEvent: event });\n        }\n\n        // Kill the tooltip on click if its not a click listener\n        if (!hasTrigger('click')) {\n          onClose({ type: 'hover', nativeEvent: event });\n        }\n      },\n      [onOpen, onClose, hasTrigger]\n    );\n\n    const onContextMenu = useCallback(\n      event => {\n        if (hasTrigger('contextmenu')) {\n          event.preventDefault();\n          onOpen({ type: 'contextmenu', nativeEvent: event });\n        }\n      },\n      [hasTrigger, onOpen]\n    );\n\n    const tabIndex = hasTrigger('focus') ? -1 : undefined;\n    const Component = elementType;\n\n    return (\n      <Component\n        ref={ref}\n        tabIndex={tabIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClick={onClick}\n        onContextMenu={onContextMenu}\n        className={className}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n","import {\n  useLayoutEffect,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo\n} from 'react';\nimport {\n  useFloating,\n  Placement as FloatingUIPlacement,\n  Middleware,\n  flip,\n  limitShift,\n  shift,\n  autoUpdate\n} from '@floating-ui/react';\n\nexport type Placement = FloatingUIPlacement;\nexport type Modifiers = Middleware[];\n\nexport type ReferenceProp =\n  | ReferenceObject\n  | HTMLElement\n  | RefObject<HTMLElement>;\n\nexport interface ReferenceObject {\n  top: number;\n  left: number;\n  height: number;\n  width: number;\n}\n\nexport interface PositionOptions {\n  reference?: Element | ReferenceObject;\n  floating?: HTMLElement;\n  placement?: Placement;\n  modifiers?: Modifiers;\n  followCursor?: boolean;\n}\n/**\n * Hook for positioning an element relative to another.\n */\nexport const usePosition = ({\n  reference,\n  floating,\n  followCursor,\n  placement = 'top',\n  modifiers = [flip(), shift({ limiter: limitShift() })]\n}: PositionOptions = {}) => {\n  const isVirtualElement = useMemo(\n    () => !(reference as Element)?.nodeType,\n    [reference]\n  );\n\n  const { refs, floatingStyles, update } = useFloating({\n    open: true,\n    placement,\n    middleware: modifiers,\n    elements: {\n      reference: isVirtualElement ? null : (reference as Element),\n      floating: floating\n    },\n    whileElementsMounted: autoUpdate\n  });\n\n  useEffect(() => {\n    if (isVirtualElement && reference && !followCursor) {\n      const refObject = reference as ReferenceObject;\n      refs.setPositionReference({\n        getBoundingClientRect() {\n          return {\n            width: refObject.width,\n            height: refObject.height,\n            x: refObject.left,\n            y: refObject.top,\n            left: refObject.left,\n            top: refObject.top,\n            right: refObject.left + refObject.width,\n            bottom: refObject.top + refObject.height\n          };\n        }\n      });\n    }\n  }, [reference, refs, isVirtualElement, followCursor]);\n\n  const onMouseMove = useCallback(\n    ({ clientX, clientY }: MouseEvent) => {\n      // Virtual reference object for cursor position.\n      refs.setPositionReference({\n        getBoundingClientRect() {\n          return {\n            width: 0,\n            height: 0,\n            x: clientX,\n            y: clientY,\n            left: clientX,\n            top: clientY,\n            right: clientX,\n            bottom: clientY\n          };\n        }\n      });\n    },\n    [refs]\n  );\n\n  useLayoutEffect(() => {\n    if (followCursor) {\n      window.addEventListener('mousemove', onMouseMove);\n    }\n\n    return () => {\n      window.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [followCursor, onMouseMove]);\n\n  return {\n    refs,\n    anchorRef: refs.reference,\n    floatingRef: refs.floating,\n    floatingStyles,\n    update\n  };\n};\n","import React, {\n  FC,\n  forwardRef,\n  useImperativeHandle,\n  RefObject,\n  useEffect,\n  useState,\n  useCallback,\n  LegacyRef\n} from 'react';\nimport { useExitListener } from '@/utils/ExitListener';\nimport { Modifiers, Placement, usePosition } from '@/utils/Position';\nimport { OverlayPortal, portals } from '@/utils/Overlay/OverlayPortal';\nimport { useId } from '@/utils/useId';\n\nexport interface ConnectedOverlayContentRef {\n  updatePosition: () => void;\n}\n\nexport interface ConnectedOverlayContentProps {\n  /**\n   * Modifiers to adjust the behavior of the overlay content.\n   */\n  modifiers?: Modifiers;\n\n  /**\n   * If true, the overlay content will follow the cursor.\n   */\n  followCursor?: boolean;\n\n  /**\n   * The CSS class name to be applied to the portal of the overlay content.\n   */\n  portalClassName?: string;\n\n  /**\n   * The placement of the overlay content relative to the trigger.\n   */\n  placement?: Placement;\n\n  /**\n   * A reference to the trigger element.\n   */\n  triggerRef: any;\n\n  /**\n   * The children to be rendered within the overlay content.\n   */\n  children: any;\n\n  /**\n   * If true, the overlay content will close when a click is detected on the body.\n   */\n  closeOnBodyClick?: boolean;\n\n  /**\n   * If true, the overlay content will close when the escape key is pressed.\n   */\n  closeOnEscape?: boolean;\n\n  /**\n   * The type of element that will be used as the overlay content.\n   */\n  elementType?: any;\n\n  /**\n   * If true, the overlay content will be appended to the body.\n   */\n  appendToBody?: boolean;\n\n  /**\n   * A function that is called when the overlay content is closed. It receives an optional event object as an argument.\n   */\n  onClose?: (event?: any) => void;\n}\n\nexport const ConnectedOverlayContent: FC<\n  ConnectedOverlayContentProps & {\n    ref?: LegacyRef<ConnectedOverlayContentRef>;\n  }\n> = forwardRef(\n  (\n    {\n      triggerRef,\n      children,\n      portalClassName,\n      closeOnBodyClick = true,\n      closeOnEscape = true,\n      elementType,\n      appendToBody = true,\n      followCursor,\n      modifiers,\n      placement = 'bottom',\n      onClose\n    },\n    ref\n  ) => {\n    const id = useId();\n    const [overlayIndex, setOverlayIndex] = useState<number | null>(null);\n    const { refs, floatingStyles, update } = usePosition({\n      reference: triggerRef.current ?? triggerRef,\n      followCursor,\n      modifiers,\n      placement\n    });\n\n    useImperativeHandle(ref, () => ({\n      updatePosition: () => {\n        update();\n      }\n    }));\n\n    const onClickOutside = useCallback(\n      (event: any) => {\n        if (closeOnBodyClick) {\n          // don't fire if i click the clicker\n          let ref: HTMLElement | null = null;\n          if ((triggerRef as RefObject<HTMLElement>).current) {\n            ref = (triggerRef as RefObject<HTMLElement>).current as HTMLElement;\n          } else if ((triggerRef as HTMLElement).contains !== undefined) {\n            ref = triggerRef as HTMLElement;\n          }\n\n          // Handle parent click containers\n          const container = event.target.closest('.rdk-portal');\n\n          // Only close the last one\n          const isLast = portals.indexOf(id) === portals.length - 1;\n\n          if (!ref?.contains(event.target) && (isLast || !container)) {\n            onClose?.(event);\n          }\n        }\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [closeOnBodyClick, onClose]\n    );\n\n    const onEscape = useCallback(() => {\n      if (closeOnEscape) {\n        onClose?.();\n      }\n    }, [closeOnEscape, onClose]);\n\n    useExitListener({\n      open: true,\n      ref: refs.floating,\n      onClickOutside,\n      onEscape\n    });\n\n    return (\n      <OverlayPortal\n        id={id}\n        ref={refs.setFloating}\n        style={{ ...floatingStyles, 'z-index': overlayIndex }}\n        className={portalClassName}\n        elementType={elementType}\n        appendToBody={appendToBody}\n        onMount={event => setOverlayIndex(event.overlayIndex)}\n        onUnmount={() => setOverlayIndex(null)}\n      >\n        {children}\n      </OverlayPortal>\n    );\n  }\n);\n","import React, {\n  FC,\n  useRef,\n  useEffect,\n  Fragment,\n  forwardRef,\n  LegacyRef,\n  useImperativeHandle,\n  useMemo\n} from 'react';\nimport { TriggerTypes, OverlayTrigger } from '@/utils/Overlay/OverlayTrigger';\nimport { Modifiers, Placement, ReferenceProp } from '@/utils/Position';\nimport { AnimatePresence } from 'motion/react';\nimport { OverlayContext } from '@/utils/Overlay/OverlayContext';\nimport {\n  ConnectedOverlayContent,\n  ConnectedOverlayContentRef\n} from './ConnectedOverlayContent';\n\nexport interface OverlayEvent {\n  /**\n   * Type of the event.\n   */\n  type: TriggerTypes;\n\n  /**\n   * Native event object.\n   */\n  nativeEvent: any;\n}\n\nexport interface ConnectedOverlayProps {\n  /**\n   * Whether the overlay should be visible.\n   */\n  open: boolean;\n\n  /**\n   * Reference of the overlay to align to.\n   */\n  reference?: ReferenceProp;\n\n  /**\n   * The content of the overlay.\n   */\n  children?: any;\n\n  /**\n   * Content to render in the overlay.\n   */\n  content: any;\n\n  /**\n   * Type of trigger to open the overlay.\n   */\n  trigger?: TriggerTypes[] | TriggerTypes;\n\n  /**\n   * Trigger element to open the overlay.\n   */\n  triggerElement?: any;\n\n  /**\n   * Trigger classname.\n   */\n  triggerClassName?: string;\n\n  /**\n   * Portal classname.\n   */\n  portalClassName?: string;\n\n  /**\n   * Close when the body is clicked or not.\n   */\n  closeOnBodyClick?: boolean;\n\n  /**\n   * Close when escape is pressed or not.\n   */\n  closeOnEscape?: boolean;\n\n  /**\n   * Append the overlay to the body. Almost always want this.\n   */\n  appendToBody?: boolean;\n\n  /**\n   * Overlay element type.\n   */\n  elementType?: string;\n\n  /**\n   * Position modifiers.\n   */\n  modifiers?: Modifiers;\n\n  /**\n   * Overlay should follow cursor or not.\n   */\n  followCursor?: boolean;\n\n  /**\n   * Placement of the overlay.\n   */\n  placement?: Placement;\n\n  /**\n   * Event called when the overlay is opened.\n   */\n  onOpen?: (event?: any) => void;\n\n  /**\n   * Event called when the overlay is closed.\n   */\n  onClose?: (event?: any) => void;\n}\n\nexport const ConnectedOverlay: FC<\n  ConnectedOverlayProps & {\n    ref?: LegacyRef<ConnectedOverlayContentRef>;\n  }\n> = forwardRef(\n  (\n    {\n      reference,\n      children,\n      open,\n      content,\n      triggerElement,\n      triggerClassName,\n      trigger = 'click' as TriggerTypes,\n      onOpen,\n      onClose,\n      ...rest\n    },\n    ref\n  ) => {\n    const mounted = useRef<boolean>(false);\n    const overlayTriggerRef = useRef<any | null>(null);\n    const contentRef = useRef<any | null>(null);\n    const triggerRef = reference || overlayTriggerRef;\n\n    useImperativeHandle(ref, () => ({\n      updatePosition: () => {\n        contentRef.current?.updatePosition();\n      }\n    }));\n\n    useEffect(() => {\n      if (mounted.current) {\n        if (!open) {\n          onClose?.();\n        } else {\n          onOpen?.();\n        }\n      }\n    }, [open]);\n\n    useEffect(() => {\n      if (!mounted.current) {\n        mounted.current = true;\n      }\n    });\n\n    const providerValue = useMemo(\n      () => ({\n        close: () => onClose?.()\n      }),\n      [onClose]\n    );\n\n    return (\n      <OverlayContext.Provider value={providerValue}>\n        {children && (\n          <Fragment>\n            {trigger ? (\n              <OverlayTrigger\n                elementType={triggerElement}\n                ref={overlayTriggerRef}\n                className={triggerClassName}\n                trigger={trigger}\n                onOpen={onOpen}\n                onClose={onClose}\n              >\n                {children}\n              </OverlayTrigger>\n            ) : (\n              children\n            )}\n          </Fragment>\n        )}\n        <AnimatePresence>\n          {open && (\n            <ConnectedOverlayContent\n              {...rest}\n              ref={contentRef}\n              triggerRef={triggerRef}\n              onClose={onClose}\n            >\n              {content}\n            </ConnectedOverlayContent>\n          )}\n        </AnimatePresence>\n      </OverlayContext.Provider>\n    );\n  }\n);\n","import { useContext } from 'react';\nimport { OverlayContext } from './OverlayContext';\n\n/**\n * Hook for using the Overlay's context.\n */\nexport const useOverlay = () => {\n  const context = useContext(OverlayContext);\n\n  if (context === undefined) {\n    throw new Error(\n      '`useOverlay` hook can only be used inside a overlay component.'\n    );\n  }\n\n  return context;\n};\n","export interface ButtonTheme {\n  base: string;\n  disabled: string;\n  fullWidth: string;\n  group: string;\n  groupText: string;\n  adornment: {\n    base: string;\n    start: string;\n    end: string;\n    sizes: {\n      small: string;\n      medium: string;\n      large: string;\n      [key: string]: string;\n    };\n  };\n  variants: {\n    filled: string;\n    outline: string;\n    text: string;\n    [key: string]: string;\n  };\n  colors: {\n    default: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n    primary: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n    secondary: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n    success: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n    warning: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n    error: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n    [key: string]: {\n      filled: string;\n      outline: string;\n      text: string;\n      [key: string]: string;\n    };\n  };\n  sizes: {\n    small: string;\n    medium: string;\n    large: string;\n    [key: string]: string;\n  };\n  iconSizes: {\n    small: string;\n    medium: string;\n    large: string;\n    [key: string]: string;\n  };\n}\n\nconst baseTheme: Partial<ButtonTheme> = {\n  base: 'inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-1 rounded-xs font-sans cursor-pointer',\n  disabled: 'disabled:cursor-not-allowed',\n  fullWidth: 'flex w-full',\n  group:\n    'rounded-none first:rounded-s last:rounded-e border-s-0 first:border-s',\n  groupText:\n    'border border-y-transparent border-l-transparent last:border-r-transparent hover:bg-initial',\n  adornment: {\n    base: 'flex',\n    start: 'pr-1',\n    end: 'pl-1',\n    sizes: {\n      small: '[&>svg]:w-3 [&>svg]:h-3',\n      medium: '[&>svg]:w-4 [&>svg]:h-4',\n      large: '[&>svg]:w-5 [&>svg]:h-5'\n    }\n  },\n  sizes: {\n    small: 'text-sm px-2 py-1 leading-[normal]',\n    medium: 'text-base px-4 py-2 leading-[normal]',\n    large: 'text-xl px-5 py-2.5 leading-[normal]'\n  },\n  iconSizes: {\n    small: 'px-2 py-1',\n    medium: 'px-4 py-2',\n    large: 'px-5 py-2.5'\n  }\n};\n\nexport const buttonTheme: ButtonTheme = {\n  base: [baseTheme.base, 'text-text-primary font-semibold'].join(' '),\n  disabled: [\n    baseTheme.disabled,\n    'data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500'\n  ].join(' '),\n  fullWidth: baseTheme.fullWidth,\n  group: baseTheme.group,\n  groupText: baseTheme.groupText,\n  adornment: baseTheme.adornment,\n  sizes: baseTheme.sizes,\n  iconSizes: baseTheme.iconSizes,\n  variants: {\n    filled:\n      'bg-secondary hover:bg-border-secondary-hover border-secondary light:text-gray-100',\n    outline: 'border-grey border',\n    text: 'border-0'\n  },\n  colors: {\n    default: {\n      filled: 'bg-gray-800 hover:bg-gray-700 border-gray-800',\n      outline: 'border-secondary border',\n      text: 'text-text-primary'\n    },\n    primary: {\n      filled:\n        'bg-primary hover:bg-primary-hover border-primary text-text-primary',\n      outline: 'border border-primary',\n      text: 'text-primary hover:text-primary-hover'\n    },\n    secondary: {\n      filled: 'bg-secondary hover:bg-secondary-hover text-text-primary!',\n      outline: 'border border-secondary',\n      text: 'text-secondary hover:text-secondary-hover'\n    },\n    success: {\n      filled:\n        'bg-success hover:bg-success-hover border-success text-text-primary',\n      outline: 'border border-success',\n      text: 'text-success hover:text-success-hover'\n    },\n    warning: {\n      filled:\n        'bg-warning hover:bg-warning-hover border-warning text-text-primary',\n      outline: 'border border-warning',\n      text: 'text-warning hover:text-warning-hover'\n    },\n    error: {\n      filled: 'bg-error hover:bg-error-hover border-error text-text-primary',\n      outline: 'border border-error',\n      text: 'text-error hover:text-error-hover'\n    }\n  }\n};\n\nexport const legacyButtonTheme: ButtonTheme = {\n  base: [\n    baseTheme.base,\n    '[border:_var(--button-border)] rounded-[var(--button-border)] [font-family:_var(--button-font-family)] [font-weight:_var(--button-font-weight)]'\n  ].join(' '),\n  disabled: [\n    baseTheme.disabled,\n    'data-[variant=filled]:disabled:bg-[var(--disabled-background)] disabled:text-[var(--button-disabled-color-on-background)] border-[var(--disabled-background)]'\n  ].join(' '),\n  fullWidth: baseTheme.fullWidth,\n  group: baseTheme.group,\n  groupText: baseTheme.groupText,\n  sizes: {\n    small: '[font-size:_var(--font-size-sm)] p-[var(--button-spacing-sm)]',\n    medium: '[font-size:_var(--font-size-md)] p-[var(--button-spacing-md)]',\n    large: '[font-size:_var(--font-size-lg)] p-[var(--button-spacing-lg)]'\n  },\n  iconSizes: {\n    small: '[font-size:_var(--font-size-sm)] p-[var(--button-spacing-sm)]',\n    medium: '[font-size:_var(--font-size-md)] p-[var(--button-spacing-md)]',\n    large: '[font-size:_var(--font-size-lg)] p-[var(--button-spacing-lg)]'\n  },\n  adornment: {\n    ...baseTheme.adornment,\n    start: [\n      baseTheme.adornment.start,\n      '[padding-right:_calc(var(--list-item-spacing)_/_2)]'\n    ].join(' '),\n    end: [\n      baseTheme.adornment.start,\n      '[padding-left:_calc(var(--list-item-spacing)_/_2)]'\n    ].join(' '),\n    sizes: {\n      small:\n        '[&>svg]:w-[var(--button-adornment-size-sm)] [&>svg]:h-[var(--button-adornment-size-sm)]',\n      medium:\n        '[&>svg]:w-[var(--button-adornment-size-md)] [&>svg]:h-[var(--button-adornment-size-md)]',\n      large:\n        '[&>svg]:w-[var(--button-adornment-size-lg)] [&>svg]:h-[var(--button-adornment-size-lg)]'\n    }\n  },\n  variants: {\n    filled:\n      'bg-[var(--button-background)] text-[var(--button-color-on-background)] hover:bg-[var(--button-background-hover)] border-[var(--button-background)] hover:border-[var(--button-background-hover)]',\n    outline:\n      'border-[var(--button-background)] hover:border-[var(--button-background-hover)] text-[var(--button-color)] hover:text-[var(--button-color-hover)] border',\n    text: 'border-0'\n  },\n  colors: {\n    default: {\n      filled:\n        'bg-[var(--button-background)] text-[var(--button-color-on-background)] hover:bg-[var(--button-background-hover)] border-[var(--button-background)] hover:border-[var(--button-background-hover)]',\n      outline: '',\n      text: 'text-[var(--button-color)] hover:text-[var(--button-color-hover)]'\n    },\n    primary: {\n      filled:\n        'bg-[var(--primary-background)] hover:bg-[var(--primary-background-hover)] border-[var(--primary-background)] border-[var(--primary-background-hover)] text-[var(--button-color-on-background)]',\n      outline: '',\n      text: 'text-[var(--primary-color)] hover:text-[var(--primary-color-hover)]'\n    },\n    secondary: {\n      filled:\n        'bg-[var(--secondary-background)] hover:bg-[var(--secondary-background-hover)] border-[var(--secondary-background)] hover:border-[var(--secondary-background-hover)] text-[var(--button-color-on-background)]',\n      outline: '',\n      text: 'text-[var(--secondary-color)] hover:text-[var(--secondary-color-hover)]'\n    },\n    success: {\n      filled:\n        'bg-[var(--success-background)] hover:bg-[var(--success-background-hover)] border-[var(--success-background)] hover:border-[var(--success-background-hover)] text-[var(--button-color-on-background)]',\n      outline: '',\n      text: 'text-[var(--success-color)] hover:text-[var(--success-color-hover)]'\n    },\n    warning: {\n      filled:\n        'bg-[var(--warning-background)] hover:bg-[var(--warning-background-hover)] border-[var(--warning-background)] hover:border-[var(--warning-background-hover)] text-[var(--button-color-on-background)]',\n      outline: '',\n      text: 'text-[var(--warning-color)] hover:text-[var(--warning-color-hover)]'\n    },\n    error: {\n      filled:\n        'bg-[var(--error-background)] hover:bg-[var(--error-background-hover)] border-[var(--error-background)] hover:border-[var(--error-background-hover)] text-[var(--button-color-on-background)]',\n      outline: '',\n      text: 'text-[var(--error-color)] hover:text-[var(--warning-error-hover)]'\n    }\n  }\n};\n","import { ReactNode, createContext } from 'react';\n\nexport interface ButtonGroupContextProps {\n  /**\n   * Style variant of the buttons.\n   */\n  variant?: 'filled' | 'outline' | 'text';\n\n  /**\n   * The size variation of the buttons.\n   */\n  size?: 'small' | 'medium' | 'large';\n}\n\nexport const ButtonGroupContext = createContext<ButtonGroupContextProps>({\n  variant: null,\n  size: null\n});\n","import React, { FC, forwardRef, LegacyRef, useContext } from 'react';\nimport { motion } from 'motion/react';\nimport { ButtonGroupContext } from './ButtonGroupContext';\nimport { useComponentTheme } from '@/utils';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonTheme } from './ButtonTheme';\n\nexport interface ButtonProps\n  extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n  > {\n  /**\n   * Color variation of the button.\n   */\n  color?:\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'success'\n    | 'warning'\n    | string;\n\n  /**\n   * Style variant of the button.\n   */\n  variant?: 'filled' | 'outline' | 'text' | string;\n\n  /**\n   * The size variation of the button.\n   */\n  size?: 'small' | 'medium' | 'large' | string;\n\n  /**\n   * If true, the button will take up the full width of its container.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * If true, the margins of the button will be disabled.\n   */\n  disableMargins?: boolean;\n\n  /**\n   * If true, the padding of the button will be disabled.\n   */\n  disablePadding?: boolean;\n\n  /**\n   * If true, the animation of the button will be disabled.\n   */\n  disableAnimation?: boolean;\n\n  /**\n   * Element to display before the Button content.\n   */\n  startAdornment?: any;\n\n  /**\n   * Element to display after the Button content.\n   */\n  endAdornment?: any;\n\n  /**\n   * Theme for the Button.\n   */\n  theme?: ButtonTheme;\n}\n\nexport interface ButtonRef {\n  /**\n   * The ref to the button element.\n   */\n  ref?: LegacyRef<HTMLButtonElement>;\n}\n\nexport const Button: FC<ButtonProps & But