@jbpark/ui-kit 10.2.0 → 10.3.0

package/dist/components/atoms/select-searchable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-searchable.mjs","names":["combobox","select.selectTriggerStyles"],"sources":["../../../src/components/atoms/select-searchable.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\n\nimport { ChevronDownIcon, XIcon } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { combobox, select } from '../../core';\nimport Button from './button';\nimport Input from './input';\nimport SearchableOptions, {\n  type ClassNames,\n  type Option,\n  type OptionGroup,\n  useSelectItems,\n} from './select-searchable-options';\n\nconst {\n  Combobox: Core,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxValue,\n} = combobox;\n\nexport interface Props extends Omit<\n  combobox.RootProps<string, Option>,\n  | 'children'\n  | 'items'\n  | 'multiple'\n  | 'filteredItems'\n  | 'onValueChange'\n  | 'itemToStringLabel'\n  | 'itemToStringValue'\n  | 'isItemEqualToValue'\n> {\n  searchable: true;\n  multiple?: false;\n  /** Accessible name for the trigger and search popup. */\n  label: string;\n  options: (Option | OptionGroup)[];\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: ReactNode;\n  allowClear?: boolean;\n  className?: string;\n  classNames?: ClassNames;\n  onChange?: (value: string | null) => void;\n}\n\nconst SearchableSelect = ({\n  label,\n  options,\n  placeholder,\n  searchPlaceholder = 'Search...',\n  emptyText = 'No results found.',\n  allowClear = true,\n  className,\n  classNames,\n  onChange,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- The single-select primitive fixes this mode internally.\n  multiple: _multiple,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const items = useSelectItems(options);\n\n  return (\n    <Core items={items} onValueChange={value => onChange?.(value)} {...props}>\n      <ComboboxTrigger\n        data-slot=\"select-trigger\"\n        data-size=\"default\"\n        aria-label={label}\n        className={cn(select.selectTriggerStyles, 'w-full max-w-48', className)}\n      >\n        <span\n          data-slot=\"select-value\"\n          className=\"min-w-0 flex-1 truncate text-start\"\n        >\n          <ComboboxValue placeholder={placeholder} />\n        </span>\n        <ComboboxIcon className=\"opacity-50\">\n          <ChevronDownIcon />\n        </ComboboxIcon>\n      </ComboboxTrigger>\n      <ComboboxContent aria-label={label} className={classNames?.content}>\n        <div className=\"border-b p-1\">\n          <div className=\"relative flex items-center\">\n            <ComboboxInput\n              render={\n                <Input\n                  aria-label={`${label} search`}\n                  placeholder={searchPlaceholder}\n                  className={cn(allowClear && 'pe-8', classNames?.input)}\n                />\n              }\n            />\n            {allowClear && (\n              <ComboboxClear\n                data-slot=\"combobox-clear\"\n                render={\n                  <Button\n                    variant=\"text\"\n                    size=\"icon-sm\"\n                    icon={<XIcon />}\n                    aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n                    className=\"absolute end-0\"\n                  />\n                }\n              />\n            )}\n          </div>\n        </div>\n        <SearchableOptions emptyText={emptyText} classNames={classNames} />\n      </ComboboxContent>\n    </Core>\n  );\n};\n\nexport default SearchableSelect;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,EACJ,UAAU,MACV,eACA,iBACA,cACA,eACA,iBACA,kBACEA;AA2BJ,MAAM,oBAAoB,EACxB,OACA,SACA,aACA,oBAAoB,aACpB,YAAY,qBACZ,aAAa,MACb,WACA,YACA,UAEA,YAAY,aAEZ,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,eAAe,OAAO;CAEpC,OACE,qBAAC,MAAD;EAAa;EAAO,gBAAe,UAAS,WAAW,KAAK;EAAG,GAAI;EAAnE,UAAA,CACE,qBAAC,iBAAD;GACE,aAAU;GACV,aAAU;GACV,cAAY;GACZ,WAAW,GAAGC,qBAA4B,mBAAmB,SAAS;GAJxE,UAAA,CAME,oBAAC,QAAD;IACE,aAAU;IACV,WAAU;IAEV,UAAA,oBAAC,eAAD,EAA4B,YAAc,CAAA;GACtC,CAAA,GACN,oBAAC,cAAD;IAAc,WAAU;IACtB,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACN,CAAA,CACC;EACjB,CAAA,GAAA,qBAAC,iBAAD;GAAiB,cAAY;GAAO,WAAW,YAAY;GAA3D,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,eAAD,EACE,QACE,oBAAC,OAAD;MACE,cAAY,GAAG,MAAM;MACrB,aAAa;MACb,WAAW,GAAG,cAAc,QAAQ,YAAY,KAAK;KACtD,CAAA,EAEJ,CAAA,GACA,cACC,oBAAC,eAAD;MACE,aAAU;MACV,QACE,oBAAC,QAAD;OACE,SAAQ;OACR,MAAK;OACL,MAAM,oBAAC,OAAD,CAAQ,CAAA;OACd,cAAY,OAAO,SAAS,eAAe;OAC3C,WAAU;MACX,CAAA;KAEJ,CAAA,CAEA;;GACF,CAAA,GACL,oBAAC,mBAAD;IAA8B;IAAuB;GAAa,CAAA,CACnD;EACb,CAAA,CAAA;;AAEV"}
+{"version":3,"file":"select-searchable.mjs","names":["combobox","select.selectTriggerStyles"],"sources":["../../../src/components/atoms/select-searchable.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\n\nimport { ChevronDownIcon, XIcon } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { combobox, select } from '../../core';\nimport Button from './button';\nimport Input from './input';\nimport SearchableOptions, {\n  type ClassNames,\n  type Option,\n  type OptionGroup,\n  useSelectItems,\n} from './select-searchable-options';\n\nconst {\n  Combobox: Core,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxValue,\n} = combobox;\n\nexport interface Props extends Omit<\n  combobox.RootProps<string, Option>,\n  | 'children'\n  | 'items'\n  | 'multiple'\n  | 'filteredItems'\n  | 'onValueChange'\n  | 'itemToStringLabel'\n  | 'itemToStringValue'\n  | 'isItemEqualToValue'\n> {\n  searchable: true;\n  multiple?: false;\n  /** Accessible name for the trigger and search popup. */\n  label: string;\n  options: (Option | OptionGroup)[];\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: ReactNode;\n  allowClear?: boolean;\n  className?: string;\n  classNames?: ClassNames;\n  onChange?: (value: string | null) => void;\n}\n\nconst SearchableSelect = ({\n  label,\n  options,\n  placeholder,\n  searchPlaceholder = 'Search...',\n  emptyText = 'No results found.',\n  allowClear = true,\n  className,\n  classNames,\n  onChange,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- The single-select primitive fixes this mode internally.\n  multiple: _multiple,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const items = useSelectItems(options);\n\n  return (\n    <Core items={items} onValueChange={value => onChange?.(value)} {...props}>\n      <ComboboxTrigger\n        data-slot=\"select-trigger\"\n        data-size=\"default\"\n        aria-label={label}\n        className={cn(select.selectTriggerStyles, 'w-full max-w-48', className)}\n      >\n        <span\n          data-slot=\"select-value\"\n          className=\"min-w-0 flex-1 truncate text-start\"\n        >\n          <ComboboxValue placeholder={placeholder} />\n        </span>\n        <ComboboxIcon className=\"opacity-50\">\n          <ChevronDownIcon />\n        </ComboboxIcon>\n      </ComboboxTrigger>\n      <ComboboxContent aria-label={label} className={classNames?.content}>\n        <div className=\"border-b p-1\">\n          <div className=\"relative flex items-center\">\n            <ComboboxInput\n              render={\n                <Input\n                  aria-label={`${label} search`}\n                  placeholder={searchPlaceholder}\n                  className={cn(allowClear && 'pe-8', classNames?.input)}\n                />\n              }\n            />\n            {allowClear && (\n              <ComboboxClear\n                data-slot=\"combobox-clear\"\n                render={\n                  <Button\n                    variant=\"text\"\n                    size=\"icon-sm\"\n                    icon={<XIcon />}\n                    aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n                    className=\"absolute end-0\"\n                  />\n                }\n              >\n                {null}\n              </ComboboxClear>\n            )}\n          </div>\n        </div>\n        <SearchableOptions emptyText={emptyText} classNames={classNames} />\n      </ComboboxContent>\n    </Core>\n  );\n};\n\nexport default SearchableSelect;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,EACJ,UAAU,MACV,eACA,iBACA,cACA,eACA,iBACA,kBACEA;AA2BJ,MAAM,oBAAoB,EACxB,OACA,SACA,aACA,oBAAoB,aACpB,YAAY,qBACZ,aAAa,MACb,WACA,YACA,UAEA,YAAY,aAEZ,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,eAAe,OAAO;CAEpC,OACE,qBAAC,MAAD;EAAa;EAAO,gBAAe,UAAS,WAAW,KAAK;EAAG,GAAI;EAAnE,UAAA,CACE,qBAAC,iBAAD;GACE,aAAU;GACV,aAAU;GACV,cAAY;GACZ,WAAW,GAAGC,qBAA4B,mBAAmB,SAAS;GAJxE,UAAA,CAME,oBAAC,QAAD;IACE,aAAU;IACV,WAAU;IAEV,UAAA,oBAAC,eAAD,EAA4B,YAAc,CAAA;GACtC,CAAA,GACN,oBAAC,cAAD;IAAc,WAAU;IACtB,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACN,CAAA,CACC;EACjB,CAAA,GAAA,qBAAC,iBAAD;GAAiB,cAAY;GAAO,WAAW,YAAY;GAA3D,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,eAAD,EACE,QACE,oBAAC,OAAD;MACE,cAAY,GAAG,MAAM;MACrB,aAAa;MACb,WAAW,GAAG,cAAc,QAAQ,YAAY,KAAK;KACtD,CAAA,EAEJ,CAAA,GACA,cACC,oBAAC,eAAD;MACE,aAAU;MACV,QACE,oBAAC,QAAD;OACE,SAAQ;OACR,MAAK;OACL,MAAM,oBAAC,OAAD,CAAQ,CAAA;OACd,cAAY,OAAO,SAAS,eAAe;OAC3C,WAAU;MACX,CAAA;MAGF,UAAA;KACY,CAAA,CAEd;;GACF,CAAA,GACL,oBAAC,mBAAD;IAA8B;IAAuB;GAAa,CAAA,CACnD;EACb,CAAA,CAAA;;AAEV"}

package/dist/components/atoms/select.d.mts

@@ -1,4 +1,4 @@
-import { Select as Select$1 } from "../../core/select.mjs";
+import { Select as Select$1, select_d_exports } from "../../core/select.mjs";
 import "../../core/index.mjs";
 import { Props as Props$1 } from "./select-multiple.mjs";
 import { Props as Props$2 } from "./select-searchable.mjs";
@@ -22,8 +22,8 @@ interface StaticProps extends Omit<React.ComponentProps<typeof Core>, 'onValueCh
   onChange?: (value: string) => void;
   'aria-label'?: string;
 }
-type Props = StaticProps | Props$2 | Props$1;
+export type Props = StaticProps | Props$2 | Props$1;
 declare const Select: (props: Props) => React.JSX.Element;
 //#endregion
-export { Props, Select as default };
+export { Select as default };
 //# sourceMappingURL=select.d.mts.map

package/dist/components/atoms/select.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/atoms/select.tsx"],"mappings":";;;;;;cAWU,aAAI;UASJ;EACR,OAAO,MAAM;EACb;EACA;;UAGQ;EACR,OAAO,MAAM;EACb,SAAS;;UAOD,oBAAoB,KAC5B,MAAM,sBAAsB;EAG5B;EACA;EACA;EACA,WAAW,SAAS;EACpB,YAAY;EACZ;;KAGU,QAAQ,cAAc,UAAkB;cA8D9C,SAAU,OAAO,UAAK,MAAA,IAAA"}
+{"version":3,"file":"select.d.mts","names":["select","select.Select","SearchableProps","MultipleProps"],"sources":["../../../src/components/atoms/select.tsx"],"mappings":";;;;;;cAWU,aAAIC;UASJ;EACR,OAAO,MAAM;EACb;EACA;;UAGQ;EACR,OAAO,MAAM;EACb,SAAS;;UAOD,oBAAoB,KAC5B,MAAM,sBAAsB;EAG5B;EACA;EACA;EACA,WAAW,SAAS;EACpB,YAAY;EACZ;;YAGU,QAAQ,cAAcC,UAAkBC;cA8D9C,SAAU,OAAO,UAAK,MAAA,IAAA"}

package/dist/components/atoms/skeleton/button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/button.tsx"],"mappings":";;cAIM,WAAU,eAAA,SAA0B,0BAAa,IAAA"}
+{"version":3,"file":"button.d.mts","names":["SkeletonProps"],"sources":["../../../../src/components/atoms/skeleton/button.tsx"],"mappings":";;cAIM,WAAU,eAAA,SAA0BA,0BAAa,IAAA"}

package/dist/components/atoms/skeleton/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/index.ts"],"mappings":";;;;KAIK,2BAA2B;EAC9B,eAAe;EACf,aAAa;;cAGT,UAA2B"}
+{"version":3,"file":"index.d.mts","names":["SkeletonImpl"],"sources":["../../../../src/components/atoms/skeleton/index.ts"],"mappings":";;;;KAIK,2BAA2BA;EAC9B,eAAe;EACf,aAAa;;cAGT,UAA2B"}

package/dist/components/atoms/skeleton/node.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"node.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/node.tsx"],"mappings":";;cAIM,SAAQ,eAAA,SAA0B,0BAAa,IAAA"}
+{"version":3,"file":"node.d.mts","names":["SkeletonProps"],"sources":["../../../../src/components/atoms/skeleton/node.tsx"],"mappings":";;cAIM,SAAQ,eAAA,SAA0BA,0BAAa,IAAA"}

package/dist/components/atoms/skeleton/skeleton.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/atoms/skeleton/skeleton.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'> {
+export interface Props extends React.ComponentPropsWithoutRef<'div'> {
   active?: boolean;
   loading?: boolean;
   avatar?: boolean;
@@ -19,5 +19,5 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const Skeleton: ({ active, loading, avatar, size, orientation, direction, count, gap, className, classNames, style, width, height, children, ...props }: Props) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null;
 //#endregion
-export { Props, Skeleton as default };
+export { Skeleton as default };
 //# sourceMappingURL=skeleton.d.mts.map

package/dist/components/atoms/skeleton/skeleton.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";UAaiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;IACE;IACA;IACA;;;cAUE,aAAY,QAAA,SAAA,QAAA,MAAA,aAAA,WAAA,OAAA,KAAA,WAAA,YAAA,OAAA,OAAA,QAAA,aAAA,SAgBf,+CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}
+{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";iBAaiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;IACE;IACA;IACA;;;cAUE,aAAY,QAAA,SAAA,QAAA,MAAA,aAAA,WAAA,OAAA,KAAA,WAAA,YAAA,OAAA,OAAA,QAAA,aAAA,SAgBf,+CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}

package/dist/components/atoms/slider/slider.d.mts

@@ -1,7 +1,7 @@
 //#region src/components/atoms/slider/slider.d.ts
 /** A single thumb (`number`) or a two-thumb range (`[min, max]`). */
-type SliderValue = number | number[];
-interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange' | 'defaultValue' | 'dir'> {
+export type SliderValue = number | number[];
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange' | 'defaultValue' | 'dir'> {
   value?: SliderValue;
   defaultValue?: SliderValue;
   min?: number;
@@ -13,5 +13,5 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange'
 }
 declare const Slider: ({ value: _value, defaultValue, min, max, step, disabled, orientation, onChange: _onChange, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, SliderValue, Slider as default };
+export { Slider as default };
 //# sourceMappingURL=slider.d.mts.map

package/dist/components/atoms/slider/slider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.mts","names":[],"sources":["../../../../src/components/atoms/slider/slider.tsx"],"mappings":";;KAWY;UAEK,cAAc,KAC7B,MAAM;EAGN,QAAQ;EACR,eAAe;EACf;EACA;EACA;EACA;EACA;EACA,YAAY,OAAO;;cAWf,WAAU,OAAA,QAAA,cAAA,KAAA,KAAA,MAAA,UAAA,aAAA,UAAA,WAAA,cAAA,SAWb,0BAAK,IAAA"}
+{"version":3,"file":"slider.d.mts","names":[],"sources":["../../../../src/components/atoms/slider/slider.tsx"],"mappings":";;YAWY;iBAEK,cAAc,KAC7B,MAAM;EAGN,QAAQ;EACR,eAAe;EACf;EACA;EACA;EACA;EACA;EACA,YAAY,OAAO;;cAWf,WAAU,OAAA,QAAA,cAAA,KAAA,KAAA,MAAA,UAAA,aAAA,UAAA,WAAA,cAAA,SAWb,0BAAK,IAAA"}

package/dist/components/atoms/spin.d.mts

@@ -1,8 +1,8 @@
 //#region src/components/atoms/spin.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'> {
+export interface Props extends React.ComponentPropsWithoutRef<'div'> {
   spinning?: boolean;
 }
 declare const Spin: ({ spinning, className, children, ...props }: Props) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null;
 //#endregion
-export { Props, Spin as default };
+export { Spin as default };
 //# sourceMappingURL=spin.d.mts.map

package/dist/components/atoms/spin.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"spin.d.mts","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"mappings":";UAOiB,cAAc,MAAM;EACnC;;cAGI,SAAQ,UAAA,WAAA,aAAA,SAA6C,4CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}
+{"version":3,"file":"spin.d.mts","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"mappings":";iBAOiB,cAAc,MAAM;EACnC;;cAGI,SAAQ,UAAA,WAAA,aAAA,SAA6C,4CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}

package/dist/components/atoms/spin.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
-import { Loader2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
 //#region src/components/atoms/spin.tsx
 const Spin = ({ spinning, className, children, ...props }) => {
 	const { locale } = useConfig();

package/dist/components/atoms/switch.d.mts

@@ -1,6 +1,6 @@
 import { ComponentSize } from "../../providers/config/types.mjs";
 //#region src/components/atoms/switch.d.ts
-interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange'> {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange'> {
   classNames?: {
     track?: string;
     handle?: string;
@@ -22,5 +22,5 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange'>
 }
 declare const Switch: ({ className, classNames, size, defaultChecked, checked: _checked, onChange: _onChange, checkedChildren, unCheckedChildren, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Switch as default };
+export { Switch as default };
 //# sourceMappingURL=switch.d.mts.map

package/dist/components/atoms/switch.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/atoms/switch.tsx"],"mappings":";;UAiDiB,cAAc,KAC7B,MAAM;EAGN;IACE;IACA;;;;;;;;;EASF,OAAO;EACP;EACA;EACA;EACA,YAAY;EACZ,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;;cAGtB,WAAU,WAAA,YAAA,MAAA,gBAAA,SAAA,UAAA,UAAA,WAAA,iBAAA,sBAAA,SAUb,0BAAK,IAAA"}
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/atoms/switch.tsx"],"mappings":";;iBAiDiB,cAAc,KAC7B,MAAM;EAGN;IACE;IACA;;;;;;;;;EASF,OAAO;EACP;EACA;EACA;EACA,YAAY;EACZ,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;;cAGtB,WAAU,WAAA,YAAA,MAAA,gBAAA,SAAA,UAAA,UAAA,WAAA,iBAAA,sBAAA,SAUb,0BAAK,IAAA"}

package/dist/components/atoms/tooltip.d.mts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react";
 //#region src/components/atoms/tooltip.d.ts
 declare const Core: <Payload>(props: import("@base-ui/react").TooltipRoot.Props<Payload>) => React.JSX.Element;
 type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
-interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'handle' | 'triggerId' | 'defaultTriggerId'> {
+export interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'handle' | 'triggerId' | 'defaultTriggerId'> {
   children: ReactElement;
   /** Supplementary visual hint; keep essential information visible elsewhere. */
   content: ReactNode;
@@ -17,5 +17,5 @@ interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'ha
 }
 declare const Tooltip: ({ children, content, className, placement, offset, delay, closeDelay, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Tooltip as default };
+export { Tooltip as default };
 //# sourceMappingURL=tooltip.d.mts.map

package/dist/components/atoms/tooltip.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../../../src/components/atoms/tooltip.tsx"],"mappings":";;cAMiB,OAAI,SAAA,gCAAA,YAAA,MAAA,aAAA,MAAA,IAAA;KAEhB;UAgCY,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU;;EAEV,SAAS;;EAET;EACA,YAAY;;EAEZ;;EAEA;EACA;;cAGI,YAAW,UAAA,SAAA,WAAA,WAAA,QAAA,OAAA,eAAA,SASd,0BAAK,IAAA"}
+{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../../../src/components/atoms/tooltip.tsx"],"mappings":";;cAMiB,OAAI,SAAA,gCAAA,YAAA,MAAA,aAAA,MAAA,IAAA;KAEhB;iBAgCY,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU;;EAEV,SAAS;;EAET;EACA,YAAY;;EAEZ;;EAEA;EACA;;cAGI,YAAW,UAAA,SAAA,WAAA,WAAA,QAAA,OAAA,eAAA,SASd,0BAAK,IAAA"}

package/dist/components/atoms/typography/link.d.mts

@@ -1,6 +1,6 @@
 //#region src/components/atoms/typography/link.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'a'> {}
+export interface Props extends React.ComponentPropsWithoutRef<'a'> {}
 declare const Link: ({ children, className, target, rel, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Link as default };
+export { Link as default };
 //# sourceMappingURL=link.d.mts.map

package/dist/components/atoms/typography/link.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/link.tsx"],"mappings":";UAEiB,cAAc,MAAM;cAE/B,SAAQ,UAAA,WAAA,QAAA,QAAA,SAAgD,0BAAK,IAAA"}
+{"version":3,"file":"link.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/link.tsx"],"mappings":";iBAEiB,cAAc,MAAM;cAE/B,SAAQ,UAAA,WAAA,QAAA,QAAA,SAAgD,0BAAK,IAAA"}

package/dist/components/atoms/typography/paragraph.d.mts

@@ -1,6 +1,6 @@
 //#region src/components/atoms/typography/paragraph.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'p'> {}
+export interface Props extends React.ComponentPropsWithoutRef<'p'> {}
 declare const Paragraph: ({ children, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Paragraph as default };
+export { Paragraph as default };
 //# sourceMappingURL=paragraph.d.mts.map

package/dist/components/atoms/typography/paragraph.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/paragraph.tsx"],"mappings":";UAEiB,cAAc,MAAM;cAE/B,cAAa,UAAA,cAAA,SAAmC,0BAAK,IAAA"}
+{"version":3,"file":"paragraph.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/paragraph.tsx"],"mappings":";iBAEiB,cAAc,MAAM;cAE/B,cAAa,UAAA,cAAA,SAAmC,0BAAK,IAAA"}

package/dist/components/atoms/typography/text.d.mts

@@ -1,9 +1,9 @@
 //#region src/components/atoms/typography/text.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'span'> {
+export interface Props extends React.ComponentPropsWithoutRef<'span'> {
   underline?: boolean;
   strong?: boolean;
 }
 declare const Text: ({ children, underline, strong, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Text as default };
+export { Text as default };
 //# sourceMappingURL=text.d.mts.map

package/dist/components/atoms/typography/text.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/text.tsx"],"mappings":";UAEiB,cAAc,MAAM;EACnC;EACA;;cAGI,SAAQ,UAAA,WAAA,QAAA,cAAA,SAAsD,0BAAK,IAAA"}
+{"version":3,"file":"text.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/text.tsx"],"mappings":";iBAEiB,cAAc,MAAM;EACnC;EACA;;cAGI,SAAQ,UAAA,WAAA,QAAA,cAAA,SAAsD,0BAAK,IAAA"}

package/dist/components/atoms/typography/title.d.mts

@@ -1,8 +1,8 @@
 //#region src/components/atoms/typography/title.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+export interface Props extends React.ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 declare const Title: ({ children, level, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Title as default };
+export { Title as default };
 //# sourceMappingURL=title.d.mts.map

package/dist/components/atoms/typography/title.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"title.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"mappings":";UAEiB,cAAc,MAAM;EAGnC;;cAiBI,UAAS,UAAA,OAAA,cAAA,SAA8C,0BAAK,IAAA"}
+{"version":3,"file":"title.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"mappings":";iBAEiB,cAAc,MAAM;EAGnC;;cAiBI,UAAS,UAAA,OAAA,cAAA,SAA8C,0BAAK,IAAA"}

package/dist/components/atoms/typography/typography.d.mts

@@ -1,6 +1,6 @@
 //#region src/components/atoms/typography/typography.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'article'> {}
+export interface Props extends React.ComponentPropsWithoutRef<'article'> {}
 declare const Typography: ({ children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Typography as default };
+export { Typography as default };
 //# sourceMappingURL=typography.d.mts.map

package/dist/components/atoms/typography/typography.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/typography.tsx"],"mappings":";UAAiB,cAAc,MAAM;cAE/B,eAAc,aAAA,SAAwB,0BAAK,IAAA"}
+{"version":3,"file":"typography.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/typography.tsx"],"mappings":";iBAAiB,cAAc,MAAM;cAE/B,eAAc,aAAA,SAAwB,0BAAK,IAAA"}

package/dist/components/molecules/collapse.d.mts

@@ -6,7 +6,7 @@ interface Item<Key extends React.Key = string> {
   disabled?: boolean;
   children: React.ReactNode;
 }
-interface Props<Key extends React.Key = string> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value' | 'dir'> {
+export interface Props<Key extends React.Key = string> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value' | 'dir'> {
   items?: Item<Key>[];
   accordion?: boolean;
   expandIcon?: React.ReactNode;
@@ -21,5 +21,5 @@ interface Props<Key extends React.Key = string> extends Omit<React.ComponentProp
 }
 declare const Collapse: <Key extends React.Key = string>({ expandIcon, accordion, items, className, classNames, defaultActiveKey, activeKey: _activeKey, onChange: _onChange, ...props }: Props<Key>) => React.JSX.Element;
 //#endregion
-export { Props, Collapse as default };
+export { Collapse as default };
 //# sourceMappingURL=collapse.d.mts.map

package/dist/components/molecules/collapse.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.mts","names":[],"sources":["../../../src/components/molecules/collapse.tsx"],"mappings":";;UAWU,KAAK,YAAY,MAAM;EAC/B,KAAK;EACL,OAAO,MAAM;EACb;EACA,UAAU,MAAM;;UAGD,MAAM,YAAY,MAAM,sBAAsB,KAC7D,MAAM;EAGN,QAAQ,KAAK;EACb;EACA,aAAa,MAAM;EACnB;IACE;IACA;IACA;;EAEF,mBAAmB;EACnB,YAAY;EACZ,YAAY,MAAM;;cAGd,WAAY,YAAY,MAAM,gBAAc,YAAA,WAAA,OAAA,WAAA,YAAA,kBAAA,WAAA,YAAA,UAAA,cAAA,SAU/C,MAAM,SAAI,MAAA,IAAA"}
+{"version":3,"file":"collapse.d.mts","names":[],"sources":["../../../src/components/molecules/collapse.tsx"],"mappings":";;UAWU,KAAK,YAAY,MAAM;EAC/B,KAAK;EACL,OAAO,MAAM;EACb;EACA,UAAU,MAAM;;iBAGD,MAAM,YAAY,MAAM,sBAAsB,KAC7D,MAAM;EAGN,QAAQ,KAAK;EACb;EACA,aAAa,MAAM;EACnB;IACE;IACA;IACA;;EAEF,mBAAmB;EACnB,YAAY;EACZ,YAAY,MAAM;;cAGd,WAAY,YAAY,MAAM,gBAAc,YAAA,WAAA,OAAA,WAAA,YAAA,kBAAA,WAAA,YAAA,UAAA,cAAA,SAU/C,MAAM,SAAI,MAAA,IAAA"}

package/dist/components/molecules/dropdown.d.mts

@@ -1,7 +1,7 @@
 import { MenuProps } from "./menu/menu.mjs";
 //#region src/components/molecules/dropdown.d.ts
 type ChangeEventHandler = (open: boolean) => void;
-interface Props extends React.ComponentPropsWithoutRef<'div'> {
+export interface Props extends React.ComponentPropsWithoutRef<'div'> {
   open?: boolean;
   trigger?: 'hover' | 'click';
   menu?: MenuProps;
@@ -9,5 +9,5 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const Dropdown: ({ children, menu, trigger, open: _open, onOpenChange: _onOpenChange, className, onMouseEnter, onMouseLeave, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Dropdown as default };
+export { Dropdown as default };
 //# sourceMappingURL=dropdown.d.mts.map

package/dist/components/molecules/dropdown.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;KAYK,sBAAsB;UAEV,cAAc,MAAM;EACnC;EACA;EACA,OAAO;EACP,eAAe;;cAGX,aAAY,UAAA,MAAA,SAAA,MAAA,OAAA,cAAA,eAAA,WAAA,cAAA,iBAAA,SAUf,0BAAK,IAAA"}
+{"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;KAYK,sBAAsB;iBAEV,cAAc,MAAM;EACnC;EACA;EACA,OAAO;EACP,eAAe;;cAGX,aAAY,UAAA,MAAA,SAAA,MAAA,OAAA,cAAA,eAAA,WAAA,cAAA,iBAAA,SAUf,0BAAK,IAAA"}

package/dist/components/molecules/index.d.mts

@@ -1,18 +1,26 @@
 import Alert, { Props } from "../../Alert.mjs";
-import Breadcrumb, { Props as Props$1 } from "../../Breadcrumb.mjs";
-import Card, { Props as Props$2 } from "../../Card.mjs";
-import Menu, { Props as Props$3 } from "./menu/menu.mjs";
-import Pagination, { Props as Props$4 } from "../../Pagination.mjs";
-import { Props as Props$5 } from "./reveals/reveals.mjs";
+import Anchor, { Item, Props as Props$1 } from "../../Anchor.mjs";
+import Breadcrumb, { Props as Props$2 } from "../../Breadcrumb.mjs";
+import Card, { Props as Props$3 } from "../../Card.mjs";
+import ContextMenu, { Item as Item$1, Props as Props$4 } from "../../ContextMenu.mjs";
+import Descriptions, { Columns, Item as Item$2, Props as Props$5 } from "../../Descriptions.mjs";
+import Menu, { Props as Props$6 } from "./menu/menu.mjs";
+import Pagination, { Props as Props$7 } from "../../Pagination.mjs";
+import Popconfirm, { Props as Props$8 } from "../../Popconfirm.mjs";
+import { Props as Props$9 } from "./reveals/reveals.mjs";
 import Reveals from "../../Reveals.mjs";
-import Space, { Props as Props$6 } from "../../Space.mjs";
-import Steps, { Item, Props as Props$7 } from "../../Steps.mjs";
-import Collapse, { Props as Props$8 } from "./collapse.mjs";
-import Dropdown, { Props as Props$9 } from "./dropdown.mjs";
-import { Props as Props$10 } from "./marquees/marquees.mjs";
+import ScrollArea, { Props as Props$10 } from "../../ScrollArea.mjs";
+import Space, { Props as Props$11 } from "../../Space.mjs";
+import Statistic, { Props as Props$12 } from "../../Statistic.mjs";
+import Steps, { Item as Item$3, Props as Props$13 } from "../../Steps.mjs";
+import Timeline, { Item as Item$4, Props as Props$14, Timestamp } from "../../Timeline.mjs";
+import Transfer, { Item as Item$5, Props as Props$15 } from "../../Transfer.mjs";
+import Collapse, { Props as Props$16 } from "./collapse.mjs";
+import Dropdown, { Props as Props$17 } from "./dropdown.mjs";
+import { Props as Props$18 } from "./marquees/marquees.mjs";
 import Marquees from "./marquees/index.mjs";
-import { Props as Props$11 } from "./splitter/splitter.mjs";
+import { Props as Props$19 } from "./splitter/splitter.mjs";
 import Splitter from "./splitter/index.mjs";
-import Tabs, { Props as Props$12 } from "./tabs.mjs";
-import Upload, { Props as Props$13, UploadFile } from "./upload.mjs";
-export { Alert, type Props as AlertProps, Breadcrumb, type Props$1 as BreadcrumbProps, Card, type Props$2 as CardProps, Collapse, type Props$8 as CollapseProps, Dropdown, type Props$9 as DropdownProps, Marquees, type Props$10 as MarqueesProps, Menu, type Props$3 as MenuProps, Pagination, type Props$4 as PaginationProps, Reveals, type Props$5 as RevealsProps, Space, type Props$6 as SpaceProps, Splitter, type Props$11 as SplitterProps, type Item as StepItem, Steps, type Props$7 as StepsProps, Tabs, type Props$12 as TabsProps, Upload, type UploadFile, type Props$13 as UploadProps };
+import Tabs, { Props as Props$20 } from "./tabs.mjs";
+import Upload, { Props as Props$21, UploadFile } from "./upload.mjs";
+export { Alert, type Props as AlertProps, Anchor, type Item as AnchorItem, type Props$1 as AnchorProps, Breadcrumb, type Props$2 as BreadcrumbProps, Card, type Props$3 as CardProps, Collapse, type Props$16 as CollapseProps, ContextMenu, type Item$1 as ContextMenuItem, type Props$4 as ContextMenuProps, type Item$2 as DescriptionItem, Descriptions, type Columns as DescriptionsColumns, type Props$5 as DescriptionsProps, Dropdown, type Props$17 as DropdownProps, Marquees, type Props$18 as MarqueesProps, Menu, type Props$6 as MenuProps, Pagination, type Props$7 as PaginationProps, Popconfirm, type Props$8 as PopconfirmProps, Reveals, type Props$9 as RevealsProps, ScrollArea, type Props$10 as ScrollAreaProps, Space, type Props$11 as SpaceProps, Splitter, type Props$19 as SplitterProps, Statistic, type Props$12 as StatisticProps, type Item$3 as StepItem, Steps, type Props$13 as StepsProps, Tabs, type Props$20 as TabsProps, Timeline, type Item$4 as TimelineItem, type Props$14 as TimelineProps, type Timestamp as TimelineTimestamp, Transfer, type Item$5 as TransferItem, type Props$15 as TransferProps, Upload, type UploadFile, type Props$21 as UploadProps };

package/dist/components/molecules/marquees/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/index.ts"],"mappings":";;;KAGK,2BAA2B;EAAiB,aAAa;;cAExD,UAA2B"}
+{"version":3,"file":"index.d.mts","names":["MarqueesImpl"],"sources":["../../../../src/components/molecules/marquees/index.ts"],"mappings":";;;KAGK,2BAA2BA;EAAiB,aAAa;;cAExD,UAA2B"}

package/dist/components/molecules/marquees/item.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/molecules/marquees/item.d.ts
-interface ItemProps {
+export interface ItemProps {
   key?: React.Key;
   speed?: number;
   autoFill?: boolean | number;
@@ -8,10 +8,10 @@ interface ItemProps {
   gap?: number;
   children?: React.ReactNode;
 }
-interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {
   width: string | number;
 }
-declare const Item: ({ width: _width, speed, autoFill, pause: _pause, pauseOnHover, gap, children }: Props) => import("react").JSX.Element;
+declare const Item: ({ width: _width, speed, autoFill, pause, pauseOnHover, gap, children }: Props) => import("react").JSX.Element;
 //#endregion
-export { ItemProps, Props, Item as default };
+export { Item as default };
 //# sourceMappingURL=item.d.mts.map

package/dist/components/molecules/marquees/item.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"mappings":";UASiB;EACf,MAAM,MAAM;EACZ;EACA;EACA;EACA;EACA;EACA,WAAW,MAAM;;UAGF,cACP,KAAK,MAAM,yCAAyC;EAC5D;;cAoBI,SAAQ,OAAA,QAAA,OAAA,UAAA,OAAA,QAAA,cAAA,KAAA,YAQX,0BAAK,IAAA"}
+{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"mappings":";iBAQiB;EACf,MAAM,MAAM;EACZ;EACA;EACA;EACA;EACA;EACA,WAAW,MAAM;;iBAGF,cACP,KAAK,MAAM,yCAAyC;EAC5D;;cAoBI,SAAQ,OAAA,QAAA,OAAA,UAAA,OAAA,cAAA,KAAA,YAQX,0BAAK,IAAA"}

package/dist/components/molecules/marquees/item.mjs

@@ -1,6 +1,6 @@
 "use client";
-import usePauseOnHover from "./use-pause-on-hover.mjs";
 import { useEffect, useRef, useState } from "react";
+import { useHoverOrFocusWithin } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useGSAP } from "@gsap/react";
 import { gsap } from "gsap";
@@ -10,12 +10,12 @@ const resolveInitialRepeatCount = (autoFill) => {
 	if (!autoFill) return 0;
 	return typeof autoFill === "boolean" ? INITIAL_AUTO_FILL_GUESS : autoFill;
 };
-const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = false, pauseOnHover = false, gap = 0, children }) => {
+const Item = ({ width: _width, speed = 100, autoFill = false, pause = false, pauseOnHover = false, gap = 0, children }) => {
 	const itemRefs = useRef([]);
 	const containerRef = useRef(null);
 	const tweenRef = useRef(null);
 	const [width, setWidth] = useState(_width);
-	const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);
+	const { active: isHoverOrFocusPaused, handlers } = useHoverOrFocusWithin({ enabled: pauseOnHover });
 	const [repeatCount, setRepeatCount] = useState(resolveInitialRepeatCount(autoFill));
 	const [prevWidthProp, setPrevWidthProp] = useState(_width);
 	const [prevAutoFill, setPrevAutoFill] = useState(autoFill);
@@ -33,7 +33,7 @@ const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = fa
 		setWidth(_width);
 		setRepeatCount(resolveInitialRepeatCount(autoFill));
 	}
-	const isPaused = _pause || pause;
+	const isPaused = pause || isHoverOrFocusPaused;
 	useEffect(() => {
 		if (!autoFill || !children || !itemRefs.current[0] || typeof width === "string") return;
 		const itemWidth = itemRefs.current[0].offsetWidth;
@@ -79,7 +79,7 @@ const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = fa
 	}, [isPaused]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex overflow-hidden",
-		...hoverEvents,
+		...handlers,
 		children: /* @__PURE__ */ jsx("div", {
 			ref: containerRef,
 			className: "flex flex-nowrap",

package/dist/components/molecules/marquees/item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"item.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useGSAP } from '@gsap/react';\nimport { gsap } from 'gsap';\n\nimport usePauseOnHover from './use-pause-on-hover';\n\nexport interface ItemProps {\n  key?: React.Key;\n  speed?: number;\n  autoFill?: boolean | number;\n  pause?: boolean;\n  pauseOnHover?: boolean;\n  gap?: number;\n  children?: React.ReactNode;\n}\n\nexport interface Props\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {\n  width: string | number;\n}\n\n// `autoFill={true}` (the default on `Marquees`) needs *some* repeat count\n// before the item can be measured and the real count computed — this is\n// only ever visible for that one render, but rendering 100 copies (200\n// with the 2x loop duplication) up front was needlessly heavy for the\n// common case. A modest guess still avoids visible gaps for typical\n// item/container width ratios while cutting the worst-case default\n// render by ~90%.\nconst INITIAL_AUTO_FILL_GUESS = 10;\n\nconst resolveInitialRepeatCount = (autoFill: boolean | number) => {\n  if (!autoFill) {\n    return 0;\n  }\n\n  return typeof autoFill === 'boolean' ? INITIAL_AUTO_FILL_GUESS : autoFill;\n};\n\nconst Item = ({\n  width: _width,\n  speed = 100,\n  autoFill = false,\n  pause: _pause = false,\n  pauseOnHover = false,\n  gap = 0,\n  children,\n}: Props) => {\n  const itemRefs = useRef<HTMLDivElement[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tweenRef = useRef<gsap.core.Tween | null>(null);\n\n  const [width, setWidth] = useState<string | number>(_width);\n  const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);\n  const [repeatCount, setRepeatCount] = useState(\n    resolveInitialRepeatCount(autoFill),\n  );\n  const [prevWidthProp, setPrevWidthProp] = useState(_width);\n  const [prevAutoFill, setPrevAutoFill] = useState(autoFill);\n  const [prevGap, setPrevGap] = useState(gap);\n\n  // Adjusted directly in render (React's \"adjust state during render\"\n  // pattern) instead of an effect, so `width`/`repeatCount` re-sync with\n  // the prop in the same render it changes rather than the render after.\n  if (_width !== prevWidthProp) {\n    setPrevWidthProp(_width);\n    setWidth(_width);\n  }\n\n  if (autoFill !== prevAutoFill) {\n    setPrevAutoFill(autoFill);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  // `gap` widens every copy, so both the measured item width and the repeat\n  // count derived from it are stale. Rewind `width` to the container width\n  // so the measuring effect below recomputes the loop distance from scratch.\n  if (gap !== prevGap) {\n    setPrevGap(gap);\n    setWidth(_width);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  const isPaused = _pause || pause;\n\n  useEffect(() => {\n    if (\n      !autoFill ||\n      !children ||\n      !itemRefs.current[0] ||\n      typeof width === 'string'\n    ) {\n      return;\n    }\n\n    // `offsetWidth` is the border-box width, so it already includes the\n    // `gap` padding each copy carries — the loop distance stays exact\n    // without adding `gap` back in here.\n    const itemWidth = itemRefs.current[0].offsetWidth;\n\n    if (itemWidth >= width) {\n      setWidth(itemWidth);\n      setRepeatCount(0);\n      return;\n    }\n\n    let totalWidth = 0;\n    let repeatCount = 0;\n\n    while (totalWidth < width) {\n      totalWidth += itemWidth;\n      repeatCount += 1;\n    }\n\n    setWidth(totalWidth);\n    setRepeatCount(repeatCount - 1);\n  }, [autoFill, width, children, gap]);\n\n  useGSAP(\n    () => {\n      if (!containerRef.current || typeof width === 'string') {\n        return;\n      }\n\n      if (tweenRef.current) {\n        tweenRef.current.kill();\n      }\n\n      tweenRef.current = gsap.fromTo(\n        containerRef.current,\n        { x: 0 },\n        {\n          x: -width,\n          duration: width / speed,\n          repeat: -1,\n          ease: 'linear',\n        },\n      );\n\n      return () => {\n        tweenRef.current?.kill();\n      };\n    },\n    {\n      scope: containerRef,\n      dependencies: [width, speed],\n    },\n  );\n\n  useEffect(() => {\n    if (!tweenRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  }, [isPaused]);\n\n  return (\n    <div\n      className=\"flex overflow-hidden\"\n      {...hoverEvents}\n      //\n    >\n      <div ref={containerRef} className=\"flex flex-nowrap\">\n        {[...Array(2)].map((_, index) => (\n          <div\n            key={index}\n            style={{ minWidth: width }}\n            className=\"flex flex-nowrap\"\n          >\n            {/* Every copy carries the same trailing `gap`, so the spacing is\n                uniform at the seam between copies and between the two loop\n                halves — no special-casing at either boundary. */}\n            <div\n              ref={el => {\n                if (el) {\n                  itemRefs.current[index] = el;\n                }\n              }}\n              style={{ paddingRight: gap }}\n            >\n              {children}\n            </div>\n            {[\n              ...Array(typeof autoFill === 'number' ? autoFill : repeatCount),\n            ].map((_, i) => (\n              <div key={i} style={{ paddingRight: gap }}>\n                {children}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":"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"}
+{"version":3,"file":"item.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useGSAP } from '@gsap/react';\nimport { useHoverOrFocusWithin } from '@jbpark/use-hooks';\nimport { gsap } from 'gsap';\n\nexport interface ItemProps {\n  key?: React.Key;\n  speed?: number;\n  autoFill?: boolean | number;\n  pause?: boolean;\n  pauseOnHover?: boolean;\n  gap?: number;\n  children?: React.ReactNode;\n}\n\nexport interface Props\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {\n  width: string | number;\n}\n\n// `autoFill={true}` (the default on `Marquees`) needs *some* repeat count\n// before the item can be measured and the real count computed — this is\n// only ever visible for that one render, but rendering 100 copies (200\n// with the 2x loop duplication) up front was needlessly heavy for the\n// common case. A modest guess still avoids visible gaps for typical\n// item/container width ratios while cutting the worst-case default\n// render by ~90%.\nconst INITIAL_AUTO_FILL_GUESS = 10;\n\nconst resolveInitialRepeatCount = (autoFill: boolean | number) => {\n  if (!autoFill) {\n    return 0;\n  }\n\n  return typeof autoFill === 'boolean' ? INITIAL_AUTO_FILL_GUESS : autoFill;\n};\n\nconst Item = ({\n  width: _width,\n  speed = 100,\n  autoFill = false,\n  pause = false,\n  pauseOnHover = false,\n  gap = 0,\n  children,\n}: Props) => {\n  const itemRefs = useRef<HTMLDivElement[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tweenRef = useRef<gsap.core.Tween | null>(null);\n\n  const [width, setWidth] = useState<string | number>(_width);\n  const { active: isHoverOrFocusPaused, handlers } = useHoverOrFocusWithin({\n    enabled: pauseOnHover,\n  });\n  const [repeatCount, setRepeatCount] = useState(\n    resolveInitialRepeatCount(autoFill),\n  );\n  const [prevWidthProp, setPrevWidthProp] = useState(_width);\n  const [prevAutoFill, setPrevAutoFill] = useState(autoFill);\n  const [prevGap, setPrevGap] = useState(gap);\n\n  // Adjusted directly in render (React's \"adjust state during render\"\n  // pattern) instead of an effect, so `width`/`repeatCount` re-sync with\n  // the prop in the same render it changes rather than the render after.\n  if (_width !== prevWidthProp) {\n    setPrevWidthProp(_width);\n    setWidth(_width);\n  }\n\n  if (autoFill !== prevAutoFill) {\n    setPrevAutoFill(autoFill);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  // `gap` widens every copy, so both the measured item width and the repeat\n  // count derived from it are stale. Rewind `width` to the container width\n  // so the measuring effect below recomputes the loop distance from scratch.\n  if (gap !== prevGap) {\n    setPrevGap(gap);\n    setWidth(_width);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  const isPaused = pause || isHoverOrFocusPaused;\n\n  useEffect(() => {\n    if (\n      !autoFill ||\n      !children ||\n      !itemRefs.current[0] ||\n      typeof width === 'string'\n    ) {\n      return;\n    }\n\n    // `offsetWidth` is the border-box width, so it already includes the\n    // `gap` padding each copy carries — the loop distance stays exact\n    // without adding `gap` back in here.\n    const itemWidth = itemRefs.current[0].offsetWidth;\n\n    if (itemWidth >= width) {\n      setWidth(itemWidth);\n      setRepeatCount(0);\n      return;\n    }\n\n    let totalWidth = 0;\n    let repeatCount = 0;\n\n    while (totalWidth < width) {\n      totalWidth += itemWidth;\n      repeatCount += 1;\n    }\n\n    setWidth(totalWidth);\n    setRepeatCount(repeatCount - 1);\n  }, [autoFill, width, children, gap]);\n\n  useGSAP(\n    () => {\n      if (!containerRef.current || typeof width === 'string') {\n        return;\n      }\n\n      if (tweenRef.current) {\n        tweenRef.current.kill();\n      }\n\n      tweenRef.current = gsap.fromTo(\n        containerRef.current,\n        { x: 0 },\n        {\n          x: -width,\n          duration: width / speed,\n          repeat: -1,\n          ease: 'linear',\n        },\n      );\n\n      return () => {\n        tweenRef.current?.kill();\n      };\n    },\n    {\n      scope: containerRef,\n      dependencies: [width, speed],\n    },\n  );\n\n  useEffect(() => {\n    if (!tweenRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  }, [isPaused]);\n\n  return (\n    <div\n      className=\"flex overflow-hidden\"\n      {...handlers}\n      //\n    >\n      <div ref={containerRef} className=\"flex flex-nowrap\">\n        {[...Array(2)].map((_, index) => (\n          <div\n            key={index}\n            style={{ minWidth: width }}\n            className=\"flex flex-nowrap\"\n          >\n            {/* Every copy carries the same trailing `gap`, so the spacing is\n                uniform at the seam between copies and between the two loop\n                halves — no special-casing at either boundary. */}\n            <div\n              ref={el => {\n                if (el) {\n                  itemRefs.current[index] = el;\n                }\n              }}\n              style={{ paddingRight: gap }}\n            >\n              {children}\n            </div>\n            {[\n              ...Array(typeof autoFill === 'number' ? autoFill : repeatCount),\n            ].map((_, i) => (\n              <div key={i} style={{ paddingRight: gap }}>\n                {children}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":"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"}

package/dist/components/molecules/marquees/marquees.d.mts

@@ -1,6 +1,6 @@
 import { ItemProps } from "./item.mjs";
 //#region src/components/molecules/marquees/marquees.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'> {
+export interface Props extends React.ComponentPropsWithoutRef<'div'> {
   speed?: number;
   autoFill?: boolean | number;
   pauseOnHover?: boolean;
@@ -9,5 +9,5 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const Marquees: ({ className, items, speed, pauseOnHover, autoFill, gap, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Marquees as default };
+export { Marquees as default };
 //# sourceMappingURL=marquees.d.mts.map

package/dist/components/molecules/marquees/marquees.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"marquees.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"mappings":";;UAeiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA,QAAQ;;cAGJ,aAAY,WAAA,OAAA,OAAA,cAAA,UAAA,QAAA,SAQf,0BAAK,IAAA"}
+{"version":3,"file":"marquees.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"mappings":";;iBAeiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA,QAAQ;;cAGJ,aAAY,WAAA,OAAA,OAAA,cAAA,UAAA,QAAA,SAQf,0BAAK,IAAA"}

package/dist/components/molecules/marquees/marquees.mjs

@@ -1,15 +1,14 @@
 "use client";
 import { cn } from "../../../utils.mjs";
-import usePauseOnHover from "./use-pause-on-hover.mjs";
 import Item from "./item.mjs";
 import { useEffect, useRef, useState } from "react";
-import { useMergedRef, useResponsiveSize, useThrottledValue } from "@jbpark/use-hooks";
+import { useHoverOrFocusWithin, useMergedRef, useResponsiveSize, useThrottledValue } from "@jbpark/use-hooks";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/molecules/marquees/marquees.tsx
 const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = true, gap, ...props }) => {
 	const [width, setWidth] = useState("100%");
 	const [padding, setPadding] = useState(0);
-	const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);
+	const { active: isPaused, handlers } = useHoverOrFocusWithin({ enabled: pauseOnHover });
 	const throttledWidth = useThrottledValue(width, 200);
 	const { size, ref: responsiveRef } = useResponsiveSize();
 	const containerRef = useRef(null);
@@ -25,14 +24,14 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 	return /* @__PURE__ */ jsx("div", {
 		ref: setContainerRef,
 		className: cn(className),
-		...hoverEvents,
+		...handlers,
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("flex flex-col gap-y-5", "overflow-hidden", "whitespace-nowrap", "bg-inherit"),
 			style: { width: typeof throttledWidth === "number" ? throttledWidth - padding : throttledWidth },
 			children: items?.map(({ children, key: itemKey, ...item }, key) => /* @__PURE__ */ jsx(Item, {
 				width: throttledWidth,
-				pause,
+				pause: isPaused,
 				speed,
 				autoFill,
 				gap,

package/dist/components/molecules/marquees/marquees.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"marquees.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  useMergedRef,\n  useResponsiveSize,\n  useThrottledValue,\n} from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\nimport usePauseOnHover from './use-pause-on-hover';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number;\n  autoFill?: boolean | number;\n  pauseOnHover?: boolean;\n  gap?: number;\n  items?: ItemProps[];\n}\n\nconst Marquees = ({\n  className,\n  items,\n  speed,\n  pauseOnHover = true,\n  autoFill = true,\n  gap,\n  ...props\n}: Props) => {\n  // The container's own width, not the viewport's. `useResponsiveSize`\n  // measures in a layout effect, but this component copies the result into\n  // state in a passive effect and then throttles it, so the seed is what\n  // paints for the first ~200ms. `100vw` overflowed every padded or columned\n  // layout for that window — on the docs page it drew the track 1280px wide\n  // inside a 703px column, briefly showing the whole track and giving the\n  // page a horizontal scrollbar. `100%` resolves to the same value the\n  // measurement lands on, so there is nothing left to snap.\n  const [width, setWidth] = useState<string | number>(\n    '100%',\n    //\n  );\n  const [padding, setPadding] = useState(0);\n  const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);\n\n  const throttledWidth = useThrottledValue(width, 200);\n\n  const { size, ref: responsiveRef } = useResponsiveSize<HTMLDivElement>();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainerRef = useMergedRef(containerRef, responsiveRef);\n\n  useEffect(() => {\n    if (!size.width || !containerRef.current) {\n      return;\n    }\n\n    const computedStyle = getComputedStyle(containerRef.current);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    setPadding(paddingLeft + paddingRight);\n\n    setWidth(size.width);\n  }, [size]);\n\n  return (\n    <div\n      ref={setContainerRef}\n      className={cn(\n        className,\n        //\n      )}\n      {...hoverEvents}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-y-5',\n          'overflow-hidden',\n          'whitespace-nowrap',\n          'bg-inherit',\n          //\n        )}\n        style={{\n          width:\n            typeof throttledWidth === 'number'\n              ? throttledWidth - padding\n              : throttledWidth,\n        }}\n      >\n        {items?.map(({ children, key: itemKey, ...item }: ItemProps, key) => (\n          <Item\n            key={itemKey || key}\n            width={throttledWidth}\n            pause={pause}\n            speed={speed}\n            autoFill={autoFill}\n            gap={gap}\n            {...item}\n          >\n            {children}\n          </Item>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Marquees;\n"],"mappings":";;;;;;;;AAuBA,MAAM,YAAY,EAChB,WACA,OACA,OACA,eAAe,MACf,WAAW,MACX,KACA,GAAG,YACQ;CASX,MAAM,CAAC,OAAO,YAAY,SACxB,MAEF;CACA,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CACxC,MAAM,EAAE,OAAO,gBAAgB,gBAAgB,YAAY;CAE3D,MAAM,iBAAiB,kBAAkB,OAAO,GAAG;CAEnD,MAAM,EAAE,MAAM,KAAK,kBAAkB,kBAAkC;CACvE,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,kBAAkB,aAAa,cAAc,aAAa;CAEhE,gBAAgB;EACd,IAAI,CAAC,KAAK,SAAS,CAAC,aAAa,SAC/B;EAGF,MAAM,gBAAgB,iBAAiB,aAAa,OAAO;EAC3D,MAAM,cAAc,WAAW,cAAc,WAAW,KAAK;EAC7D,MAAM,eAAe,WAAW,cAAc,YAAY,KAAK;EAE/D,WAAW,cAAc,YAAY;EAErC,SAAS,KAAK,KAAK;CACrB,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SAEF;EACA,GAAI;EACJ,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,WAAW,GACT,yBACA,mBACA,qBACA,YAEF;GACA,OAAO,EACL,OACE,OAAO,mBAAmB,WACtB,iBAAiB,UACjB,eACR;GAEC,UAAA,OAAO,KAAK,EAAE,UAAU,KAAK,SAAS,GAAG,QAAmB,QAC3D,oBAAC,MAAD;IAEE,OAAO;IACA;IACA;IACG;IACL;IACL,GAAI;IAEH;GACG,GATC,WAAW,GASZ,CACP;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"marquees.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  useHoverOrFocusWithin,\n  useMergedRef,\n  useResponsiveSize,\n  useThrottledValue,\n} from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number;\n  autoFill?: boolean | number;\n  pauseOnHover?: boolean;\n  gap?: number;\n  items?: ItemProps[];\n}\n\nconst Marquees = ({\n  className,\n  items,\n  speed,\n  pauseOnHover = true,\n  autoFill = true,\n  gap,\n  ...props\n}: Props) => {\n  // The container's own width, not the viewport's. `useResponsiveSize`\n  // measures in a layout effect, but this component copies the result into\n  // state in a passive effect and then throttles it, so the seed is what\n  // paints for the first ~200ms. `100vw` overflowed every padded or columned\n  // layout for that window — on the docs page it drew the track 1280px wide\n  // inside a 703px column, briefly showing the whole track and giving the\n  // page a horizontal scrollbar. `100%` resolves to the same value the\n  // measurement lands on, so there is nothing left to snap.\n  const [width, setWidth] = useState<string | number>(\n    '100%',\n    //\n  );\n  const [padding, setPadding] = useState(0);\n  const { active: isPaused, handlers } = useHoverOrFocusWithin({\n    enabled: pauseOnHover,\n  });\n\n  const throttledWidth = useThrottledValue(width, 200);\n\n  const { size, ref: responsiveRef } = useResponsiveSize<HTMLDivElement>();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainerRef = useMergedRef(containerRef, responsiveRef);\n\n  useEffect(() => {\n    if (!size.width || !containerRef.current) {\n      return;\n    }\n\n    const computedStyle = getComputedStyle(containerRef.current);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    setPadding(paddingLeft + paddingRight);\n\n    setWidth(size.width);\n  }, [size]);\n\n  return (\n    <div\n      ref={setContainerRef}\n      className={cn(\n        className,\n        //\n      )}\n      {...handlers}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-y-5',\n          'overflow-hidden',\n          'whitespace-nowrap',\n          'bg-inherit',\n          //\n        )}\n        style={{\n          width:\n            typeof throttledWidth === 'number'\n              ? throttledWidth - padding\n              : throttledWidth,\n        }}\n      >\n        {items?.map(({ children, key: itemKey, ...item }: ItemProps, key) => (\n          <Item\n            key={itemKey || key}\n            width={throttledWidth}\n            pause={isPaused}\n            speed={speed}\n            autoFill={autoFill}\n            gap={gap}\n            {...item}\n          >\n            {children}\n          </Item>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Marquees;\n"],"mappings":";;;;;;;AAuBA,MAAM,YAAY,EAChB,WACA,OACA,OACA,eAAe,MACf,WAAW,MACX,KACA,GAAG,YACQ;CASX,MAAM,CAAC,OAAO,YAAY,SACxB,MAEF;CACA,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CACxC,MAAM,EAAE,QAAQ,UAAU,aAAa,sBAAsB,EAC3D,SAAS,aACX,CAAC;CAED,MAAM,iBAAiB,kBAAkB,OAAO,GAAG;CAEnD,MAAM,EAAE,MAAM,KAAK,kBAAkB,kBAAkC;CACvE,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,kBAAkB,aAAa,cAAc,aAAa;CAEhE,gBAAgB;EACd,IAAI,CAAC,KAAK,SAAS,CAAC,aAAa,SAC/B;EAGF,MAAM,gBAAgB,iBAAiB,aAAa,OAAO;EAC3D,MAAM,cAAc,WAAW,cAAc,WAAW,KAAK;EAC7D,MAAM,eAAe,WAAW,cAAc,YAAY,KAAK;EAE/D,WAAW,cAAc,YAAY;EAErC,SAAS,KAAK,KAAK;CACrB,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SAEF;EACA,GAAI;EACJ,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,WAAW,GACT,yBACA,mBACA,qBACA,YAEF;GACA,OAAO,EACL,OACE,OAAO,mBAAmB,WACtB,iBAAiB,UACjB,eACR;GAEC,UAAA,OAAO,KAAK,EAAE,UAAU,KAAK,SAAS,GAAG,QAAmB,QAC3D,oBAAC,MAAD;IAEE,OAAO;IACP,OAAO;IACA;IACG;IACL;IACL,GAAI;IAEH;GACG,GATC,WAAW,GASZ,CACP;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/components/molecules/menu/item/item.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../../../../utils.mjs";
 import Label from "./label.mjs";
 import { MENU_CLASSNAMES } from "../menu.mjs";
-import { ChevronDown } from "lucide-react";
 import { createElement, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/menu/item/item.tsx
 const OFFSET = [8, 8];