@atom-learning/components 11.1.0 → 11.2.0-beta.1

package/dist/components/navigation/NavigationMenu.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { colorSchemes } from "./NavigationMenu.colorscheme.config.js";
 import { NavigationMenuContext } from "./NavigationMenu.context.js";
 import { NavigationMenuDropdownContent } from "./NavigationMenuDropdownContent.js";

package/dist/components/navigation/NavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(setOffset, 200, null)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,WAAW,WAAW,KAAK,IAAI;EAGzC,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(setOffset, 200, null)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,WAAW,WAAW,KAAK,IAAI;EAGzC,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}

package/dist/components/navigation/NavigationMenuDropdownTrigger.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { preventEvent } from "../../utilities/event/preventEvent.js";
 import { navigationMenuActiveItemStyles, navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";

package/dist/components/navigation/NavigationMenuDropdownTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = ({\n  ref,\n  children,\n  active,\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger>) => (\n  <StyledTrigger\n    active={active}\n    {...rest}\n    ref={ref}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n)\n"],"mappings":";;;;;;;;;AAYA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ,EACN,MAAM,+BACR,EACF;AACF,CAAC;AAED,IAAa,iCAAiC,EAC5C,KACA,UACA,QACA,GAAG,WAEH,qBAAC,eAAD;CACU;CACR,GAAI;CACC;CACL,eAAe;CACf,gBAAgB;WALlB,CAOG,UACD,oBAAC,MAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,kCACF;CACD,CAAA,CACY"}
+{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = ({\n  ref,\n  children,\n  active,\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger>) => (\n  <StyledTrigger\n    active={active}\n    {...rest}\n    ref={ref}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n)\n"],"mappings":";;;;;;;;;;AAYA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ,EACN,MAAM,+BACR,EACF;AACF,CAAC;AAED,IAAa,iCAAiC,EAC5C,KACA,UACA,QACA,GAAG,WAEH,qBAAC,eAAD;CACU;CACR,GAAI;CACC;CACL,eAAe;CACf,gBAAgB;WALlB,CAOG,UACD,oBAAC,MAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,kCACF;CACD,CAAA,CACY"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItem.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Item } from "@radix-ui/react-navigation-menu";

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { NavigationMenuVerticalIcon } from "./NavigationMenuVerticalIcon.js";
 import { NavigationMenuVerticalText } from "./NavigationMenuVerticalText.js";

package/dist/components/number-input/NumberInput.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { Input } from "../input/Input.js";
 import { NumberInputStepper } from "./NumberInputStepper.js";

package/dist/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\n  value,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled: isDisabled = false,\n  readonly: isReadOnly = false,\n  size = 'md',\n  stepperButtonLabels: stepperButtonLabelsProp,\n  disabledTooltipContent: disabledTooltipContentProp,\n  className,\n  appearance = 'standard',\n  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  // `?? defaultValue` (not `||`): a controlled `value={0}` is a value, not\n  // an absence. `currentValue` is derived during render — mirroring the prop\n  // into state via an effect would paint one stale frame per update.\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value ?? defaultValue\n  )\n  const currentValue = value ?? internalValue\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const composedInputRef = useComposedRefs(ref, inputRef)\n\n  const iconSize = getFieldIconSize(size)\n\n  const stepperButtonLabels = {\n    increment: 'increment',\n    decrement: 'decrement',\n    ...stepperButtonLabelsProp\n  }\n\n  const disabledTooltipContent = {\n    decrement: `Cannot enter values below ${min}`,\n    increment: `Cannot enter values above ${max}`,\n    ...disabledTooltipContentProp\n  }\n\n  const isAtMax = currentValue >= max\n  const isAtMin = currentValue <= min\n\n  const clamp = React.useCallback(\n    (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n    [max, min]\n  )\n\n  const updateValue = React.useCallback(\n    (newValue: number) => {\n      onValueChange?.(newValue)\n      setInternalValue(newValue)\n    },\n    [onValueChange]\n  )\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n      updateValue(parsedValue)\n    },\n    [updateValue]\n  )\n\n  const increment = React.useCallback(() => {\n    if (isAtMax || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, currentValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, currentValue])\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.nativeEvent.isComposing) return\n\n      /**\n       * Keyboard Accessibility\n       *\n       * We want to increase or decrease the input's value\n       * based on if the user the arrow keys.\n       *\n       * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n       */\n      const eventKey = event.key\n\n      const keyMap: Record<string, React.KeyboardEventHandler> = {\n        ArrowUp: increment,\n        ArrowRight: increment,\n        ArrowDown: decrement,\n        ArrowLeft: decrement,\n        Home: () => updateValue(min),\n        End: () => updateValue(max)\n      }\n\n      const action = keyMap[eventKey]\n\n      if (action) {\n        event.preventDefault()\n        action(event)\n      }\n    },\n    [increment, decrement, updateValue, min, max]\n  )\n\n  const hasError = currentValue < min || currentValue > max\n  const {\n    state: externalState,\n    'aria-invalid': externalAriaInvalid,\n    ...restProps\n  } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n  const inputProps: React.ComponentProps<typeof Input> = {\n    type: 'number',\n    value: currentValue,\n    ...restProps,\n    onChange: onInputChange,\n    onKeyDown,\n    size,\n    appearance,\n    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\n      'rounded-none',\n      'w-16',\n      '[&_>_input]:text-center',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      emphasis === 'bold' && [\n        'rounded-1',\n        '[&_>_input[aria-invalid=true]]:text-danger',\n        'focus-within:[&_>_input]:text-grey-1000'\n      ],\n      emphasis === 'bold' &&\n        appearance === 'standard' && [\n          'border-none',\n          '[&:has([aria-invalid=true])]:border-2',\n          '[&:has([aria-invalid=true])]:border-danger',\n          'focus-within:border-2',\n          'focus-within:border-blue-800'\n        ]\n    ),\n    ref: composedInputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': currentValue,\n    role: 'spinbutton'\n  }\n\n  return (\n    <NumberInputContainer\n      appearance={appearance}\n      emphasis={emphasis}\n      className={className}\n    >\n      <NumberInputStepper\n        onClick={decrement}\n        icon={Minus}\n        className={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMin || isDisabled}\n        showTooltip={isAtMin && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.decrement}\n        label={stepperButtonLabels.decrement}\n      />\n      <Input {...inputProps} />\n      <NumberInputStepper\n        onClick={increment}\n        icon={Plus}\n        className={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMax || isDisabled}\n        showTooltip={isAtMax && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.increment}\n        label={stepperButtonLabels.increment}\n      />\n    </NumberInputContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\n  value,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled: isDisabled = false,\n  readonly: isReadOnly = false,\n  size = 'md',\n  stepperButtonLabels: stepperButtonLabelsProp,\n  disabledTooltipContent: disabledTooltipContentProp,\n  className,\n  appearance = 'standard',\n  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  // `?? defaultValue` (not `||`): a controlled `value={0}` is a value, not\n  // an absence. `currentValue` is derived during render — mirroring the prop\n  // into state via an effect would paint one stale frame per update.\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value ?? defaultValue\n  )\n  const currentValue = value ?? internalValue\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const composedInputRef = useComposedRefs(ref, inputRef)\n\n  const iconSize = getFieldIconSize(size)\n\n  const stepperButtonLabels = {\n    increment: 'increment',\n    decrement: 'decrement',\n    ...stepperButtonLabelsProp\n  }\n\n  const disabledTooltipContent = {\n    decrement: `Cannot enter values below ${min}`,\n    increment: `Cannot enter values above ${max}`,\n    ...disabledTooltipContentProp\n  }\n\n  const isAtMax = currentValue >= max\n  const isAtMin = currentValue <= min\n\n  const clamp = React.useCallback(\n    (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n    [max, min]\n  )\n\n  const updateValue = React.useCallback(\n    (newValue: number) => {\n      onValueChange?.(newValue)\n      setInternalValue(newValue)\n    },\n    [onValueChange]\n  )\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n      updateValue(parsedValue)\n    },\n    [updateValue]\n  )\n\n  const increment = React.useCallback(() => {\n    if (isAtMax || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, currentValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, currentValue])\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.nativeEvent.isComposing) return\n\n      /**\n       * Keyboard Accessibility\n       *\n       * We want to increase or decrease the input's value\n       * based on if the user the arrow keys.\n       *\n       * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n       */\n      const eventKey = event.key\n\n      const keyMap: Record<string, React.KeyboardEventHandler> = {\n        ArrowUp: increment,\n        ArrowRight: increment,\n        ArrowDown: decrement,\n        ArrowLeft: decrement,\n        Home: () => updateValue(min),\n        End: () => updateValue(max)\n      }\n\n      const action = keyMap[eventKey]\n\n      if (action) {\n        event.preventDefault()\n        action(event)\n      }\n    },\n    [increment, decrement, updateValue, min, max]\n  )\n\n  const hasError = currentValue < min || currentValue > max\n  const {\n    state: externalState,\n    'aria-invalid': externalAriaInvalid,\n    ...restProps\n  } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n  const inputProps: React.ComponentProps<typeof Input> = {\n    type: 'number',\n    value: currentValue,\n    ...restProps,\n    onChange: onInputChange,\n    onKeyDown,\n    size,\n    appearance,\n    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\n      'rounded-none',\n      'w-16',\n      '[&_>_input]:text-center',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      emphasis === 'bold' && [\n        'rounded-1',\n        '[&_>_input[aria-invalid=true]]:text-danger',\n        'focus-within:[&_>_input]:text-grey-1000'\n      ],\n      emphasis === 'bold' &&\n        appearance === 'standard' && [\n          'border-none',\n          '[&:has([aria-invalid=true])]:border-2',\n          '[&:has([aria-invalid=true])]:border-danger',\n          'focus-within:border-2',\n          'focus-within:border-blue-800'\n        ]\n    ),\n    ref: composedInputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': currentValue,\n    role: 'spinbutton'\n  }\n\n  return (\n    <NumberInputContainer\n      appearance={appearance}\n      emphasis={emphasis}\n      className={className}\n    >\n      <NumberInputStepper\n        onClick={decrement}\n        icon={Minus}\n        className={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMin || isDisabled}\n        showTooltip={isAtMin && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.decrement}\n        label={stepperButtonLabels.decrement}\n      />\n      <Input {...inputProps} />\n      <NumberInputStepper\n        onClick={increment}\n        icon={Plus}\n        className={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMax || isDisabled}\n        showTooltip={isAtMax && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.increment}\n        label={stepperButtonLabels.increment}\n      />\n    </NumberInputContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/components/pagination/Pagination.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { VisibleElementsAmount } from "./pagination.constants.js";
 import { PaginationProvider } from "./Pagination.context.js";

package/dist/components/password-field/PasswordField.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { useFieldError } from "../form/useFieldError.js";
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { useFormCustomContext } from "../form/useFormCustomContext.js";

package/dist/components/password-input/PasswordInput.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";

package/dist/components/radio-card/RadioCardGroup.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { RadioCard } from "./RadioCard.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/search-input/SearchInput.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  // Derived during render — mirroring `value` into state via an effect would\n  // paint one stale frame per controlled update.\n  const currentValue = value ?? innerValue\n  const activeIcon = currentValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n\n  const iconSize = getFieldIconSize(size)\n\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={composedInputRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={currentValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA0BA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAG/D,MAAM,eAAe,SAAS;CAC9B,MAAM,aAAa,eAAA,UAAA;CAEnB,MAAM,WAAW,iBAAiB,IAAI;CAEtC,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  // Derived during render — mirroring `value` into state via an effect would\n  // paint one stale frame per controlled update.\n  const currentValue = value ?? innerValue\n  const activeIcon = currentValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n\n  const iconSize = getFieldIconSize(size)\n\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={composedInputRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={currentValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAG/D,MAAM,eAAe,SAAS;CAC9B,MAAM,aAAa,eAAA,UAAA;CAEnB,MAAM,WAAW,iBAAiB,IAAI;CAEtC,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}

package/dist/components/section-message/SectionMessageDescription.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/section-message/SectionMessageDismiss.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Dismissible } from "../dismissible/index.js";

package/dist/components/section-message/SectionMessageIcon.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { useSectionMessageContext } from "./SectionMessage.context.js";
 import { useEffect } from "react";

package/dist/components/section-message/SectionMessageLayout.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessageLayout.tsx

package/dist/components/section-message/SectionMessageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;;AAIA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;AAAiB,EAC9D,CAAC;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,YAAY,SAAS;WACpD,oBAAC,OAAD;EAAK,WAAU;EAAuB,GAAI;CAAO,CAAA;AAC9C,CAAA"}
+{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;;;AAIA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;AAAiB,EAC9D,CAAC;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,cAAc,YAAY,SAAS;WACpD,oBAAC,OAAD;EAAK,WAAU;EAAuB,GAAI;CAAO,CAAA;AAC9C,CAAA"}

package/dist/components/segmented-control/SegmentedControlBadge.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Badge } from "../badge/Badge.js";
 import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";

package/dist/components/select-menu/SelectMenu.d.ts

@@ -8,7 +8,7 @@ type SelectMenuProps = Omit<AriaComponents.SelectProps<object>, 'className' | 's
     children?: React.ReactNode;
 };
 export declare const SelectMenu: (({ size, theme, state, className, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
-    Trigger: ({ ref, placeholder, children, ...rest }: Omit<AriaComponents.ButtonProps & React.RefAttributes<HTMLButtonElement>, "aria-label" | "aria-labelledby" | "children"> & {
+    Trigger: ({ ref, placeholder, children, ...rest }: Omit<AriaComponents.ButtonProps & React.RefAttributes<HTMLButtonElement>, "aria-label" | "children"> & {
         placeholder?: string;
         children?: React.ReactNode;
     }) => React.JSX.Element;

package/dist/components/select-menu/SelectMenu.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SelectMenuContext } from "./SelectMenu.context.js";
 import { SelectMenuContent } from "./SelectMenuContent.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";

package/dist/components/select-menu/SelectMenuItem.js

@@ -47,7 +47,7 @@ var SelectMenuItem = ({ children, textValue, ...rest }) => {
 	const { size } = useSelectMenuContext();
 	return /* @__PURE__ */ jsx(Item, {
 		size,
-		textValue: textValue ?? (typeof children === "string" ? children : void 0),
+		textValue: textValue ?? (typeof children === "string" || typeof children === "number" ? String(children) : void 0),
 		...rest,
 		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute left-2 inline-flex items-center",

package/dist/components/select-menu/SelectMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n  AriaComponents.ListBoxItem,\n  {\n    base: [\n      'relative',\n      'flex',\n      'items-center',\n      'text-grey-1000',\n      'font-body',\n      'font-normal',\n      // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n      // 1.25 ratio; keeps rows comfortable rather than cramped.\n      'leading-normal',\n      'cursor-pointer',\n      'rounded-sm',\n      'outline-none',\n      'data-[disabled]:cursor-not-allowed',\n      'data-[disabled]:opacity-30',\n      // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n      // whose :hover sticks after a tap on touchscreens (this menu targets\n      // webviews). data-focused covers keyboard navigation; together they\n      // replicate the old Radix data-highlighted.\n      'data-[hovered]:bg-grey-100',\n      'data-[focused]:bg-grey-100',\n      'data-[focus-visible]:outline-none'\n    ],\n    variants: {\n      size: {\n        sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n        md: ['py-2.5', 'pl-8', 'pr-6'],\n        lg: ['py-2.5', 'pl-8', 'pr-6']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n  children,\n  textValue,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n  const resolvedTextValue =\n    textValue ?? (typeof children === 'string' ? children : undefined)\n\n  return (\n    <Item size={size} textValue={resolvedTextValue} {...rest}>\n      {({ isSelected }) => (\n        <>\n          <span className=\"absolute left-2 inline-flex items-center\">\n            {isSelected && (\n              <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n            )}\n          </span>\n          {children}\n        </>\n      )}\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAQ;GAAQ;GAAQ;EAAS;EACtC,IAAI;GAAC;GAAU;GAAQ;EAAM;EAC7B,IAAI;GAAC;GAAU;GAAQ;EAAM;CAC/B,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAItC,OACE,oBAAC,MAAD;EAAY;EAAM,WAHlB,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EAGR,GAAI;aAChD,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}
+{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n  AriaComponents.ListBoxItem,\n  {\n    base: [\n      'relative',\n      'flex',\n      'items-center',\n      'text-grey-1000',\n      'font-body',\n      'font-normal',\n      // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n      // 1.25 ratio; keeps rows comfortable rather than cramped.\n      'leading-normal',\n      'cursor-pointer',\n      'rounded-sm',\n      'outline-none',\n      'data-[disabled]:cursor-not-allowed',\n      'data-[disabled]:opacity-30',\n      // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n      // whose :hover sticks after a tap on touchscreens (this menu targets\n      // webviews). data-focused covers keyboard navigation; together they\n      // replicate the old Radix data-highlighted.\n      'data-[hovered]:bg-grey-100',\n      'data-[focused]:bg-grey-100',\n      'data-[focus-visible]:outline-none'\n    ],\n    variants: {\n      size: {\n        sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n        md: ['py-2.5', 'pl-8', 'pr-6'],\n        lg: ['py-2.5', 'pl-8', 'pr-6']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n  children,\n  textValue,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n  // SelectMenuItem always passes a render function to ListBoxItem (for the\n  // isSelected checkmark), which disables RAC's own textValue inference — so\n  // this derivation is the only source. Numbers are plain text too; without\n  // them the trigger blanks on selection (#893).\n  const resolvedTextValue =\n    textValue ??\n    (typeof children === 'string' || typeof children === 'number'\n      ? String(children)\n      : undefined)\n\n  return (\n    <Item size={size} textValue={resolvedTextValue} {...rest}>\n      {({ isSelected }) => (\n        <>\n          <span className=\"absolute left-2 inline-flex items-center\">\n            {isSelected && (\n              <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n            )}\n          </span>\n          {children}\n        </>\n      )}\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAQ;GAAQ;GAAQ;EAAS;EACtC,IAAI;GAAC;GAAU;GAAQ;EAAM;EAC7B,IAAI;GAAC;GAAU;GAAQ;EAAM;CAC/B,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAWtC,OACE,oBAAC,MAAD;EAAY;EAAM,WANlB,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WACjD,OAAO,QAAQ,IACf,KAAA;EAG4C,GAAI;aAChD,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}

package/dist/components/select-menu/SelectMenuLabel.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/select-menu/SelectMenuTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AriaComponents from 'react-aria-components';
-type SelectMenuTriggerProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Button>, 'children' | 'aria-label' | 'aria-labelledby'> & {
+type SelectMenuTriggerProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Button>, 'children' | 'aria-label'> & {
     placeholder?: string;
     children?: React.ReactNode;
 };

package/dist/components/select-menu/SelectMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(\n  AriaComponents.Button,\n  {\n    base: [\n      'appearance-none',\n      'rounded-md',\n      'block',\n      'w-full',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'text-grey-1000',\n      'text-left',\n      'relative',\n      'inline-flex',\n      'items-center',\n      'border-none',\n      'hover:cursor-pointer',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      'data-[focus-visible]:outline-2',\n      'data-[focus-visible]:outline-blue-800',\n      'data-[focus-visible]:outline-offset-1',\n      'data-[focus-visible]:outline-solid',\n      'data-[focus-visible]:z-1'\n    ],\n    variants: {\n      size: {\n        sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n        md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n        lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n      },\n      theme: {\n        white: ['bg-white'],\n        grey: ['bg-grey-100']\n      },\n      state: {\n        error: ['bg-danger-light', 'data-[focus-visible]:outline-danger']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nconst TriggerIcon = styled(Icon, {\n  base: [\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'pointer-events-none',\n    'text-grey-700'\n  ],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-3', 'size-5'],\n      lg: ['right-3', 'size-5']\n    }\n  }\n})\n\n// Label the SelectMenu via aria-label/aria-labelledby on the root <SelectMenu>,\n// not here — react-aria computes the trigger's accessible name from the root\n// Select's label props, so labels placed on the trigger are ignored.\ntype SelectMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Button>,\n  'children' | 'aria-label' | 'aria-labelledby'\n> & {\n  placeholder?: string\n  children?: React.ReactNode\n}\n\nexport const SelectMenuTrigger = ({\n  ref,\n  placeholder,\n  children,\n  ...rest\n}: SelectMenuTriggerProps) => {\n  const { size, theme, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} theme={theme} state={state} {...rest}>\n      <AriaComponents.SelectValue className=\"truncate\">\n        {({ isPlaceholder, selectedText }) =>\n          isPlaceholder ? (placeholder ?? '') : (children ?? selectedText)\n        }\n      </AriaComponents.SelectValue>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,OACd,eAAe,QACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;GAAS;GACrC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;GACvC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;EACzC;EACA,OAAO;GACL,OAAO,CAAC,UAAU;GAClB,MAAM,CAAC,aAAa;EACtB;EACA,OAAO,EACL,OAAO,CAAC,mBAAmB,qCAAqC,EAClE;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;CAC1B,EACF;AACF,CAAC;AAaD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,OAAO,UAAU,qBAAqB;CAEpD,OACE,qBAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;YAA/D,CACE,oBAAC,eAAe,aAAhB;GAA4B,WAAU;cAClC,EAAE,eAAe,mBACjB,gBAAiB,eAAe,KAAO,YAAY;EAE3B,CAAA,GAC5B,oBAAC,aAAD;GAAa,IAAI;GAAmB;EAAO,CAAA,CACpC;;AAEb"}
+{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(\n  AriaComponents.Button,\n  {\n    base: [\n      'appearance-none',\n      'rounded-md',\n      'block',\n      'w-full',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'text-grey-1000',\n      'text-left',\n      'relative',\n      'inline-flex',\n      'items-center',\n      'border-none',\n      'hover:cursor-pointer',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      'data-[focus-visible]:outline-2',\n      'data-[focus-visible]:outline-blue-800',\n      'data-[focus-visible]:outline-offset-1',\n      'data-[focus-visible]:outline-solid',\n      'data-[focus-visible]:z-1'\n    ],\n    variants: {\n      size: {\n        sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n        md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n        lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n      },\n      theme: {\n        white: ['bg-white'],\n        grey: ['bg-grey-100']\n      },\n      state: {\n        error: ['bg-danger-light', 'data-[focus-visible]:outline-danger']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nconst TriggerIcon = styled(Icon, {\n  base: [\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'pointer-events-none',\n    'text-grey-700'\n  ],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-3', 'size-5'],\n      lg: ['right-3', 'size-5']\n    }\n  }\n})\n\n// aria-labelledby set here overrides react-aria's default (which points the\n// trigger at the SelectValue span, so the accessible name becomes the value).\n// SelectMenuField uses it to point the trigger at the visible field label. Use\n// aria-labelledby, not aria-label, so a single referenced label wins cleanly.\ntype SelectMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Button>,\n  'children' | 'aria-label'\n> & {\n  placeholder?: string\n  children?: React.ReactNode\n}\n\nexport const SelectMenuTrigger = ({\n  ref,\n  placeholder,\n  children,\n  ...rest\n}: SelectMenuTriggerProps) => {\n  const { size, theme, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} theme={theme} state={state} {...rest}>\n      <AriaComponents.SelectValue className=\"truncate\">\n        {({ isPlaceholder, selectedText }) =>\n          isPlaceholder ? (placeholder ?? '') : (children ?? selectedText)\n        }\n      </AriaComponents.SelectValue>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,OACd,eAAe,QACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;GAAS;GACrC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;GACvC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;EACzC;EACA,OAAO;GACL,OAAO,CAAC,UAAU;GAClB,MAAM,CAAC,aAAa;EACtB;EACA,OAAO,EACL,OAAO,CAAC,mBAAmB,qCAAqC,EAClE;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;CAC1B,EACF;AACF,CAAC;AAcD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,OAAO,UAAU,qBAAqB;CAEpD,OACE,qBAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;YAA/D,CACE,oBAAC,eAAe,aAAhB;GAA4B,WAAU;cAClC,EAAE,eAAe,mBACjB,gBAAiB,eAAe,KAAO,YAAY;EAE3B,CAAA,GAC5B,oBAAC,aAAD;GAAa,IAAI;GAAmB;EAAO,CAAA,CACpC;;AAEb"}

package/dist/components/select-menu-field/SelectMenuField.js

@@ -11,6 +11,7 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const formTheme = context?.theme ?? theme;
+	const labelId = `${name}-label`;
 	const { field: { ref, onChange, value } } = useController({
 		name,
 		control,
@@ -24,10 +25,11 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 		fieldId: name,
 		hideLabel,
 		label,
+		labelId,
 		prompt,
 		required: Boolean(validation?.required),
 		children: /* @__PURE__ */ jsxs(SelectMenu, {
-			"aria-label": label,
+			"aria-labelledby": labelId,
 			selectedKey: value === "" ? null : value,
 			onSelectionChange: onChange,
 			size,
@@ -37,6 +39,8 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 			...rest,
 			children: [/* @__PURE__ */ jsx(SelectMenu.Trigger, {
 				ref,
+				id: name,
+				"aria-labelledby": labelId,
 				placeholder
 			}), /* @__PURE__ */ jsx(SelectMenu.Content, { children })]
 		})

package/dist/components/select-menu-field/SelectMenuField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuField.js","names":[],"sources":["../../../src/components/select-menu-field/SelectMenuField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { SelectMenu } from '../select-menu/SelectMenu'\n\ntype SelectMenuFieldProps = React.PropsWithChildren<\n  FieldElementWrapperProps & {\n    placeholder?: string\n    size?: 'sm' | 'md' | 'lg'\n    theme?: 'white' | 'grey'\n    disabled?: boolean\n    className?: string\n  }\n>\n\nexport const SelectMenuField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  theme,\n  size,\n  placeholder,\n  disabled,\n  ...rest\n}: SelectMenuFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const formTheme = context?.theme ?? theme\n\n  const {\n    field: { ref, onChange, value }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: ''\n  })\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <SelectMenu\n        aria-label={label}\n        selectedKey={value === '' ? null : value}\n        onSelectionChange={onChange}\n        size={size}\n        theme={formTheme}\n        isDisabled={disabled}\n        {...(error && { state: 'error' })}\n        {...rest}\n      >\n        <SelectMenu.Trigger ref={ref} placeholder={placeholder} />\n        <SelectMenu.Content>{children}</SelectMenu.Content>\n      </SelectMenu>\n    </FieldWrapper>\n  )\n}\n\nSelectMenuField.displayName = 'SelectMenuField'\n"],"mappings":";;;;;;;;AAqBA,IAAa,mBAAmB,EAC9B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,OACA,MACA,aACA,UACA,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,YAAY,SAAS,SAAS;CAEpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;YAEtC,qBAAC,YAAD;GACE,cAAY;GACZ,aAAa,UAAU,KAAK,OAAO;GACnC,mBAAmB;GACb;GACN,OAAO;GACP,YAAY;GACZ,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;aARN,CAUE,oBAAC,WAAW,SAAZ;IAAyB;IAAkB;GAAc,CAAA,GACzD,oBAAC,WAAW,SAAZ,EAAqB,SAA6B,CAAA,CACxC;;CACA,CAAA;AAElB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"SelectMenuField.js","names":[],"sources":["../../../src/components/select-menu-field/SelectMenuField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { SelectMenu } from '../select-menu/SelectMenu'\n\ntype SelectMenuFieldProps = React.PropsWithChildren<\n  FieldElementWrapperProps & {\n    placeholder?: string\n    size?: 'sm' | 'md' | 'lg'\n    theme?: 'white' | 'grey'\n    disabled?: boolean\n    className?: string\n  }\n>\n\nexport const SelectMenuField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  theme,\n  size,\n  placeholder,\n  disabled,\n  ...rest\n}: SelectMenuFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const formTheme = context?.theme ?? theme\n  const labelId = `${name}-label`\n\n  const {\n    field: { ref, onChange, value }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: ''\n  })\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      labelId={labelId}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <SelectMenu\n        aria-labelledby={labelId}\n        selectedKey={value === '' ? null : value}\n        onSelectionChange={onChange}\n        size={size}\n        theme={formTheme}\n        isDisabled={disabled}\n        {...(error && { state: 'error' })}\n        {...rest}\n      >\n        {/* id makes FieldWrapper's <Label htmlFor={name}> associate with the\n            trigger; aria-labelledby points the accessible name at that visible\n            label (react-aria would otherwise derive it from the value). #888 */}\n        <SelectMenu.Trigger\n          ref={ref}\n          id={name}\n          aria-labelledby={labelId}\n          placeholder={placeholder}\n        />\n        <SelectMenu.Content>{children}</SelectMenu.Content>\n      </SelectMenu>\n    </FieldWrapper>\n  )\n}\n\nSelectMenuField.displayName = 'SelectMenuField'\n"],"mappings":";;;;;;;;AAqBA,IAAa,mBAAmB,EAC9B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,OACA,MACA,aACA,UACA,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,YAAY,SAAS,SAAS;CACpC,MAAM,UAAU,GAAG,KAAK;CAExB,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACE;EACD;EACR,UAAU,QAAQ,YAAY,QAAQ;YAEtC,qBAAC,YAAD;GACE,mBAAiB;GACjB,aAAa,UAAU,KAAK,OAAO;GACnC,mBAAmB;GACb;GACN,OAAO;GACP,YAAY;GACZ,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;aARN,CAaE,oBAAC,WAAW,SAAZ;IACO;IACL,IAAI;IACJ,mBAAiB;IACJ;GACd,CAAA,GACD,oBAAC,WAAW,SAAZ,EAAqB,SAA6B,CAAA,CACxC;;CACA,CAAA;AAElB;AAEA,gBAAgB,cAAc"}

package/dist/components/side-bar/SideBar.js

@@ -1,4 +1,5 @@
-import { Theme, cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { Theme, styled } from "../../styled.js";
 import { SideBarContext } from "./SideBar.context.js";
 import { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader } from "./SideBarComponents.js";
 import * as React$1 from "react";

package/dist/components/side-bar/SideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nconst SideBarComponent = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACO,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nconst SideBarComponent = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACO,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/skeleton-loader/SkeletonBarChart.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/skeleton-loader/SkeletonButton.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/skeleton-loader/SkeletonCard.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { SkeletonButton } from "./SkeletonButton.js";
 import { Tile } from "../tile/Tile.js";

package/dist/components/skeleton-loader/SkeletonColumnChart.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Tile } from "../tile/Tile.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/skeleton-loader/SkeletonHeading.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/skeleton-loader/SkeletonPanelList.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/skeleton-loader/SkeletonSubjectList.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/skeleton-loader/SkeletonTable.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Table } from "../table/Table.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
@@ -11,10 +11,10 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 		size: "md",
 		children: [/* @__PURE__ */ jsx(Table.Header, {
 			theme: "white",
-			children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(SkeletonLoader, {
+			children: /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(SkeletonLoader, {
 				style: { "--width": columnWidth?.[columnIndex] || "100px" },
 				className: "h-4 w-(--width) rounded-xl"
-			}) }, columnIndex))
+			}) }, columnIndex)) })
 		}), /* @__PURE__ */ jsx(Table.Body, {
 			striped: false,
 			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.Cell, {

package/dist/components/skeleton-loader/SkeletonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  className\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n    <Table size=\"md\">\n      <Table.Header theme=\"white\">\n        {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n          (columnIndex) => (\n            <Table.HeaderCell key={columnIndex}>\n              <SkeletonLoader\n                style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                className=\"h-4 w-(--width) rounded-xl\"\n              />\n            </Table.HeaderCell>\n          )\n        )}\n      </Table.Header>\n      <Table.Body striped={false}>\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowIndex) => (\n            <Table.Row key={rowIndex}>\n              {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n                (columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                )\n              )}\n            </Table.Row>\n          )\n        )}\n      </Table.Body>\n    </Table>\n  </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,OAAM;aACjB,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB;EACY,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}
+{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  className\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n    <Table size=\"md\">\n      <Table.Header theme=\"white\">\n        {/* A <thead> may only contain <tr>, so the cells need a Table.Row\n            around them as they do in Table.Body below. */}\n        <Table.Row>\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Row>\n      </Table.Header>\n      <Table.Body striped={false}>\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowIndex) => (\n            <Table.Row key={rowIndex}>\n              {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n                (columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                )\n              )}\n            </Table.Row>\n          )\n        )}\n      </Table.Body>\n    </Table>\n  </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,OAAM;aAGlB,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB,EACS,CAAA;EACC,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}

package/dist/components/skeleton-loader/SkeletonTabs.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/sortable/SortableItem.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";

package/dist/components/stepper/Stepper.js

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { StepperProvider } from "./Stepper.context.js";
 import { StepperStepBack } from "./StepperStepBack.js";
 import { StepperStepForward } from "./StepperStepForward.js";

package/dist/components/table/Table.js

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { TableBody } from "./TableBody.js";
 import { TableCell } from "./TableCell.js";
 import { TableFooter } from "./TableFooter.js";