@atom-learning/components 10.0.0 → 10.1.0

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

@@ -1,3 +1,4 @@
+import { cn } from "../../styled.js";
 import { SelectMenuContext } from "./SelectMenu.context.js";
 import { SelectMenuContent } from "./SelectMenuContent.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";
@@ -6,9 +7,9 @@ import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
 import { SelectMenuTrigger } from "./SelectMenuTrigger.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => {
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, className, children, ...rest }) => {
 	return /* @__PURE__ */ jsx(SelectMenuContext, {
 		value: React$1.useMemo(() => ({
 			size,
@@ -19,7 +20,8 @@ var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest })
 			theme,
 			state
 		]),
-		children: /* @__PURE__ */ jsx(RadixSelect.Root, {
+		children: /* @__PURE__ */ jsx(AriaComponents.Select, {
+			className: cn("w-full", className),
 			...rest,
 			children
 		})
@@ -29,7 +31,7 @@ var SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {
 	Trigger: SelectMenuTrigger,
 	Content: SelectMenuContent,
 	Item: SelectMenuItem,
-	Group: RadixSelect.Group,
+	Group: AriaComponents.ListBoxSection,
 	Label: SelectMenuLabel,
 	Separator: SelectMenuSeparator
 });

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YACxB,oBAAC,YAAY,MAAb;GAAkB,GAAI;GAAO;EAA2B,CAAA;CACvC,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = Omit<\n  AriaComponents.SelectProps<object>,\n  'className' | 'style' | 'children'\n> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n  className?: string\n  children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  className,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      {/* w-full so the trigger fills its container even in flex/inline layouts\n          (react-aria wraps the trigger in an extra div). Consumers can override\n          the width — or anything else — via className, e.g. w-auto / w-64. */}\n      <AriaComponents.Select className={cn('w-full', className)} {...rest}>\n        {children}\n      </AriaComponents.Select>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: AriaComponents.ListBoxSection,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,WACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YAIxB,oBAAC,eAAe,QAAhB;GAAuB,WAAW,GAAG,UAAU,SAAS;GAAG,GAAI;GAC5D;EACoB,CAAA;CACN,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,eAAe;CACtB,OAAO;CACP,WAAW;AACb,CAAC"}

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

@@ -1,5 +1,7 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuContentProps = React.ComponentPropsWithRef<typeof RadixSelect.Content>;
-export declare const SelectMenuContent: ({ ref, children, position, sideOffset, ...rest }: SelectMenuContentProps) => React.JSX.Element;
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuContentProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Popover>, 'children'> & {
+    children?: React.ReactNode;
+};
+export declare const SelectMenuContent: ({ ref, children, offset, ...rest }: SelectMenuContentProps) => React.JSX.Element;
 export {};

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

@@ -1,73 +1,32 @@
 import { styled } from "../../styled.js";
-import { Icon } from "../icon/Icon.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronUp } from "@atom-learning/icons";
-import * as RadixSelect from "@radix-ui/react-select";
+import { jsx } from "react/jsx-runtime";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuContent.tsx
-var Content = styled(RadixSelect.Content, {
-	base: [
-		"bg-white",
-		"rounded-md",
-		"shadow-lg",
-		"z-10",
-		"overflow-hidden",
-		"will-change-transform",
-		"will-change-opacity",
-		"[--slide-opacity-out:0]",
-		"data-[side=top]:[--slide-direction-out-y:-4px]",
-		"data-[side=right]:[--slide-direction-out-x:4px]",
-		"data-[side=bottom]:[--slide-direction-out-y:4px]",
-		"data-[side=left]:[--slide-direction-out-x:-4px]",
-		"motion-safe:data-[state=open]:animate-slide-direction-in",
-		"motion-safe:data-[state=closed]:animate-slide-direction-out"
-	],
-	variants: { position: {
-		popper: ["max-h-(--radix-select-content-available-height)", "min-w-(--radix-select-trigger-width)"],
-		"item-aligned": []
-	} }
-});
-var Viewport = styled(RadixSelect.Viewport, {
-	base: ["p-1", "w-full"],
-	variants: { position: {
-		popper: ["h-(--radix-select-content-available-height)"],
-		"item-aligned": []
-	} }
-});
-var ScrollUpButton = styled(RadixSelect.ScrollUpButton, { base: [
-	"flex",
-	"items-center",
-	"justify-center",
-	"h-6",
-	"cursor-default"
-] });
-var ScrollDownButton = styled(RadixSelect.ScrollDownButton, { base: [
-	"flex",
-	"items-center",
-	"justify-center",
-	"h-6",
-	"cursor-default"
-] });
-var SelectMenuContent = ({ ref, children, position = "popper", sideOffset = 4, ...rest }) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(Content, {
+var Content = styled(AriaComponents.Popover, { base: [
+	"bg-white",
+	"rounded-md",
+	"shadow-lg",
+	"z-10",
+	"overflow-hidden",
+	"will-change-transform",
+	"min-w-[var(--trigger-width)]",
+	"max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"
+] }, { enablePolymorphism: false });
+var Viewport = styled(AriaComponents.ListBox, { base: [
+	"max-h-[inherit]",
+	"w-full",
+	"overflow-auto",
+	"p-1",
+	"outline-none"
+] }, { enablePolymorphism: false });
+var SelectMenuContent = ({ ref, children, offset = 4, ...rest }) => /* @__PURE__ */ jsx(Content, {
 	ref,
-	position,
-	sideOffset,
+	offset,
+	containerPadding: 8,
 	...rest,
-	children: [
-		/* @__PURE__ */ jsx(ScrollUpButton, { children: /* @__PURE__ */ jsx(Icon, {
-			is: ChevronUp,
-			className: "text-grey-700 size-4"
-		}) }),
-		/* @__PURE__ */ jsx(Viewport, {
-			position,
-			children
-		}),
-		/* @__PURE__ */ jsx(ScrollDownButton, { children: /* @__PURE__ */ jsx(Icon, {
-			is: ChevronDown,
-			className: "text-grey-700 size-4"
-		}) })
-	]
-}) });
+	children: /* @__PURE__ */ jsx(Viewport, { children })
+});
 //#endregion
 export { SelectMenuContent };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nconst Content = styled(RadixSelect.Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'z-10',\n    'overflow-hidden',\n    'will-change-transform',\n    'will-change-opacity',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      popper: [\n        'max-h-(--radix-select-content-available-height)',\n        'min-w-(--radix-select-trigger-width)'\n      ],\n      'item-aligned': []\n    }\n  }\n})\n\nconst Viewport = styled(RadixSelect.Viewport, {\n  base: ['p-1', 'w-full'],\n  variants: {\n    position: {\n      popper: ['h-(--radix-select-content-available-height)'],\n      'item-aligned': []\n    }\n  }\n})\n\nconst ScrollUpButton = styled(RadixSelect.ScrollUpButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\nconst ScrollDownButton = styled(RadixSelect.ScrollDownButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\ntype SelectMenuContentProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Content\n>\n\nexport const SelectMenuContent = ({\n  ref,\n  children,\n  position = 'popper',\n  sideOffset = 4,\n  ...rest\n}: SelectMenuContentProps) => (\n  <RadixSelect.Portal>\n    <Content ref={ref} position={position} sideOffset={sideOffset} {...rest}>\n      <ScrollUpButton>\n        <Icon is={ChevronUp} className=\"text-grey-700 size-4\" />\n      </ScrollUpButton>\n      <Viewport position={position}>{children}</Viewport>\n      <ScrollDownButton>\n        <Icon is={ChevronDown} className=\"text-grey-700 size-4\" />\n      </ScrollDownButton>\n    </Content>\n  </RadixSelect.Portal>\n)\n"],"mappings":";;;;;;;AAOA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,UAAU;EACR,QAAQ,CACN,mDACA,sCACF;EACA,gBAAgB,CAAC;CACnB,EACF;AACF,CAAC;AAED,IAAM,WAAW,OAAO,YAAY,UAAU;CAC5C,MAAM,CAAC,OAAO,QAAQ;CACtB,UAAU,EACR,UAAU;EACR,QAAQ,CAAC,6CAA6C;EACtD,gBAAgB,CAAC;CACnB,EACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,YAAY,gBAAgB,EACxD,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;AAAgB,EAC1E,CAAC;AAED,IAAM,mBAAmB,OAAO,YAAY,kBAAkB,EAC5D,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;AAAgB,EAC1E,CAAC;AAMD,IAAa,qBAAqB,EAChC,KACA,UACA,WAAW,UACX,aAAa,GACb,GAAG,WAEH,oBAAC,YAAY,QAAb,EAAA,UACE,qBAAC,SAAD;CAAc;CAAe;CAAsB;CAAY,GAAI;WAAnE;EACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,MAAD;GAAM,IAAI;GAAW,WAAU;EAAwB,CAAA,EACzC,CAAA;EAChB,oBAAC,UAAD;GAAoB;GAAW;EAAmB,CAAA;EAClD,oBAAC,kBAAD,EAAA,UACE,oBAAC,MAAD;GAAM,IAAI;GAAa,WAAU;EAAwB,CAAA,EACzC,CAAA;CACX;GACS,CAAA"}
+{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nconst Content = styled(\n  AriaComponents.Popover,\n  {\n    base: [\n      'bg-white',\n      'rounded-md',\n      'shadow-lg',\n      'z-10',\n      'overflow-hidden',\n      'will-change-transform',\n      // Floors at the trigger width; caps at min(viewport − 8px per edge, 400px)\n      // on the --spacing() scale: --spacing(4)=16px (2×8px), --spacing(100)=400px.\n      'min-w-[var(--trigger-width)]',\n      'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n  AriaComponents.ListBox,\n  {\n    base: ['max-h-[inherit]', 'w-full', 'overflow-auto', 'p-1', 'outline-none']\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n  'children'\n> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuContent = ({\n  ref,\n  children,\n  offset = 4,\n  ...rest\n}: SelectMenuContentProps) => (\n  // offset/containerPadding are react-aria positioner props in px (JS numbers,\n  // not CSS), so they can't use the --spacing() scale: 4px gap from the trigger,\n  // 8px minimum inset from every viewport edge (the 2×8px behind the max-width).\n  <Content ref={ref} offset={offset} containerPadding={8} {...rest}>\n    <Viewport>{children}</Viewport>\n  </Content>\n)\n"],"mappings":";;;;;AAKA,IAAM,UAAU,OACd,eAAe,SACf,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,WAAW,OACf,eAAe,SACf,EACE,MAAM;CAAC;CAAmB;CAAU;CAAiB;CAAO;AAAc,EAC5E,GACA,EAAE,oBAAoB,MAAM,CAC9B;AASA,IAAa,qBAAqB,EAChC,KACA,UACA,SAAS,GACT,GAAG,WAKH,oBAAC,SAAD;CAAc;CAAa;CAAQ,kBAAkB;CAAG,GAAI;WAC1D,oBAAC,UAAD,EAAW,SAAmB,CAAA;AACvB,CAAA"}

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

@@ -1,5 +1,7 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuItemProps = React.ComponentPropsWithRef<typeof RadixSelect.Item>;
-export declare const SelectMenuItem: ({ ref, children, ...rest }: SelectMenuItemProps) => React.JSX.Element;
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {
+    children?: React.ReactNode;
+};
+export declare const SelectMenuItem: ({ children, textValue, ...rest }: SelectMenuItemProps) => React.JSX.Element;
 export {};

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

@@ -2,11 +2,11 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { useSelectMenuContext } from "./SelectMenu.context.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Ok } from "@atom-learning/icons";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuItem.tsx
-var Item = styled(RadixSelect.Item, {
+var Item = styled(AriaComponents.ListBoxItem, {
 	base: [
 		"relative",
 		"flex",
@@ -17,11 +17,11 @@ var Item = styled(RadixSelect.Item, {
 		"cursor-pointer",
 		"rounded-sm",
 		"outline-none",
-		"data-disabled:cursor-not-allowed",
-		"data-disabled:opacity-30",
-		"data-disabled:pointer-events-none",
-		"data-highlighted:bg-grey-100",
-		"data-highlighted:outline-none"
+		"data-[disabled]:cursor-not-allowed",
+		"data-[disabled]:opacity-30",
+		"data-[hovered]:bg-grey-100",
+		"data-[focused]:bg-grey-100",
+		"data-[focus-visible]:outline-none"
 	],
 	variants: { size: {
 		sm: [
@@ -41,20 +41,20 @@ var Item = styled(RadixSelect.Item, {
 			"pr-6"
 		]
 	} }
-});
-var SelectMenuItem = ({ ref, children, ...rest }) => {
+}, { enablePolymorphism: false });
+var SelectMenuItem = ({ children, textValue, ...rest }) => {
 	const { size } = useSelectMenuContext();
-	return /* @__PURE__ */ jsxs(Item, {
-		ref,
+	return /* @__PURE__ */ jsx(Item, {
 		size,
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
 		...rest,
-		children: [/* @__PURE__ */ jsx(RadixSelect.ItemIndicator, {
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute left-2 inline-flex items-center",
-			children: /* @__PURE__ */ jsx(Icon, {
+			children: isSelected && /* @__PURE__ */ jsx(Icon, {
 				is: Ok,
 				className: size === "sm" ? "size-3" : "size-4"
 			})
-		}), /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })]
+		}), children] })
 	});
 };
 //#endregion

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 RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(RadixSelect.Item, {\n  base: [\n    'relative',\n    'flex',\n    'items-center',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'cursor-pointer',\n    'rounded-sm',\n    'outline-none',\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-30',\n    'data-disabled:pointer-events-none',\n    'data-highlighted:bg-grey-100',\n    'data-highlighted:outline-none'\n  ],\n  variants: {\n    size: {\n      sm: ['py-1.5', 'pl-7', 'pr-4', 'text-sm'],\n      md: ['py-2', 'pl-8', 'pr-6'],\n      lg: ['py-2', 'pl-8', 'pr-6']\n    }\n  }\n})\n\ntype SelectMenuItemProps = React.ComponentPropsWithRef<typeof RadixSelect.Item>\n\nexport const SelectMenuItem = ({\n  ref,\n  children,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n\n  return (\n    <Item ref={ref} size={size} {...rest}>\n      <RadixSelect.ItemIndicator className=\"absolute left-2 inline-flex items-center\">\n        <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n      </RadixSelect.ItemIndicator>\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OAAO,YAAY,MAAM;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAQ;GAAQ;EAAS;EACxC,IAAI;GAAC;GAAQ;GAAQ;EAAM;EAC3B,IAAI;GAAC;GAAQ;GAAQ;EAAM;CAC7B,EACF;AACF,CAAC;AAID,IAAa,kBAAkB,EAC7B,KACA,UACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAEtC,OACE,qBAAC,MAAD;EAAW;EAAW;EAAM,GAAI;YAAhC,CACE,oBAAC,YAAY,eAAb;GAA2B,WAAU;aACnC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EACtC,CAAA,GAC3B,oBAAC,YAAY,UAAb,EAAuB,SAA+B,CAAA,CAClD;;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      '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-1.5', 'pl-7', 'pr-4', 'text-sm'],\n        md: ['py-2', 'pl-8', 'pr-6'],\n        lg: ['py-2', '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;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAQ;GAAQ;EAAS;EACxC,IAAI;GAAC;GAAQ;GAAQ;EAAM;EAC3B,IAAI;GAAC;GAAQ;GAAQ;EAAM;CAC7B,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"}

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

@@ -1,6 +1,6 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>;
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>;
 export declare function SelectMenuLabel({ className, ...rest }: SelectMenuLabelProps): React.JSX.Element;
 export declare namespace SelectMenuLabel {
     var displayName: string;

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

@@ -2,10 +2,10 @@ import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuLabel.tsx
 var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
-	as: RadixSelect.Label,
+	as: AriaComponents.Header,
 	size: "sm",
 	className: cn("p-2", "mb-1", "text-text-subtle", className),
 	...rest

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => (\n  <Text\n    as={RadixSelect.Label}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...rest}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI,YAAY;CAChB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,SAAS;CAC1D,GAAI;AACL,CAAA;AAGH,gBAAgB,cAAc"}
+{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => (\n  <Text\n    as={AriaComponents.Header}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...rest}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI,eAAe;CACnB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,SAAS;CAC1D,GAAI;AACL,CAAA;AAGH,gBAAgB,cAAc"}

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

@@ -1,2 +1,2 @@
-import * as RadixSelect from '@radix-ui/react-select';
-export declare const SelectMenuSeparator: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, unknown>;
+import * as AriaComponents from 'react-aria-components';
+export declare const SelectMenuSeparator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, unknown>;

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

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuSeparator.tsx
-var SelectMenuSeparator = styled(RadixSelect.Separator, { base: [
+var SelectMenuSeparator = styled(AriaComponents.Separator, { base: [
 	"h-px",
 	"bg-grey-200",
 	"my-2",

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\n\nimport { styled } from '../../styled'\n\nexport const SelectMenuSeparator = styled(\n  RadixSelect.Separator,\n  {\n    base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,YAAY,WACZ,EACE,MAAM;CAAC;CAAQ;CAAe;CAAQ;AAAM,EAC9C,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nexport const SelectMenuSeparator = styled(\n  AriaComponents.Separator,\n  {\n    base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,eAAe,WACf,EACE,MAAM;CAAC;CAAQ;CAAe;CAAQ;AAAM,EAC9C,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

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

@@ -1,7 +1,8 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuTriggerProps = React.ComponentPropsWithRef<typeof RadixSelect.Trigger> & {
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuTriggerProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Button>, 'children' | 'aria-label' | 'aria-labelledby'> & {
     placeholder?: string;
+    children?: React.ReactNode;
 };
 export declare const SelectMenuTrigger: ({ ref, placeholder, children, ...rest }: SelectMenuTriggerProps) => React.JSX.Element;
 export {};

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

@@ -4,9 +4,9 @@ import { useSelectMenuContext } from "./SelectMenu.context.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuTrigger.tsx
-var Trigger = styled(RadixSelect.Trigger, {
+var Trigger = styled(AriaComponents.Button, {
 	base: [
 		"appearance-none",
 		"rounded-md",
@@ -24,11 +24,11 @@ var Trigger = styled(RadixSelect.Trigger, {
 		"hover:cursor-pointer",
 		"disabled:opacity-30",
 		"disabled:cursor-not-allowed",
-		"focus:outline-2",
-		"focus:outline-blue-800",
-		"focus:outline-offset-1",
-		"focus:outline-solid",
-		"focus:z-1"
+		"data-[focus-visible]:outline-2",
+		"data-[focus-visible]:outline-blue-800",
+		"data-[focus-visible]:outline-offset-1",
+		"data-[focus-visible]:outline-solid",
+		"data-[focus-visible]:z-1"
 	],
 	variants: {
 		size: {
@@ -55,9 +55,9 @@ var Trigger = styled(RadixSelect.Trigger, {
 			white: ["bg-white"],
 			grey: ["bg-grey-100"]
 		},
-		state: { error: ["bg-danger-light", "focus:outline-danger"] }
+		state: { error: ["bg-danger-light", "data-[focus-visible]:outline-danger"] }
 	}
-});
+}, { enablePolymorphism: false });
 var TriggerIcon = styled(Icon, {
 	base: [
 		"absolute",
@@ -80,9 +80,9 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 		theme,
 		state,
 		...rest,
-		children: [/* @__PURE__ */ jsx(RadixSelect.Value, {
-			placeholder,
-			children
+		children: [/* @__PURE__ */ jsx(AriaComponents.SelectValue, {
+			className: "truncate",
+			children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder ?? "" : children ?? selectedText
 		}), /* @__PURE__ */ jsx(TriggerIcon, {
 			is: ChevronDown,
 			size

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 RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(RadixSelect.Trigger, {\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    'focus:outline-2',\n    'focus:outline-blue-800',\n    'focus:outline-offset-1',\n    'focus:outline-solid',\n    'focus: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', 'focus:outline-danger']\n    }\n  }\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\ntype SelectMenuTriggerProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Trigger\n> & {\n  placeholder?: string\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      <RadixSelect.Value placeholder={placeholder}>\n        {children}\n      </RadixSelect.Value>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,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,sBAAsB,EACnD;CACF;AACF,CAAC;AAED,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;AAQD,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,YAAY,OAAb;GAAgC;GAC7B;EACgB,CAAA,GACnB,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// 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"}

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

@@ -27,17 +27,17 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 		prompt,
 		required: Boolean(validation?.required),
 		children: /* @__PURE__ */ jsxs(SelectMenu, {
-			value,
-			onValueChange: onChange,
+			"aria-label": label,
+			selectedKey: value === "" ? null : value,
+			onSelectionChange: onChange,
 			size,
 			theme: formTheme,
-			disabled,
+			isDisabled: disabled,
 			...error && { state: "error" },
 			...rest,
 			children: [/* @__PURE__ */ jsx(SelectMenu.Trigger, {
 				ref,
-				placeholder,
-				"aria-label": label
+				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        value={value}\n        onValueChange={onChange}\n        size={size}\n        theme={formTheme}\n        disabled={disabled}\n        {...(error && { state: 'error' })}\n        {...rest}\n      >\n        <SelectMenu.Trigger\n          ref={ref}\n          placeholder={placeholder}\n          aria-label={label}\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;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;GACS;GACP,eAAe;GACT;GACN,OAAO;GACG;GACV,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;aAPN,CASE,oBAAC,WAAW,SAAZ;IACO;IACQ;IACb,cAAY;GACb,CAAA,GACD,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\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"}

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  theme = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\n  const values = value || defaultValue\n  return (\n    <CSSWrapper className={className}>\n      <StyledSlider\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        ref={ref}\n        {...rest}\n      >\n        <StyledTrack theme={theme}>\n          <StyledRange />\n        </StyledTrack>\n        {values?.length &&\n          values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n      </StyledSlider>\n      {children}\n    </CSSWrapper>\n  )\n}\n\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,UAAU;EAClB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,WACc;CACjB,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAoB;cAClB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UACP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,CAAC"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  theme = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\n  const values = value || defaultValue\n  return (\n    <CSSWrapper className={className}>\n      <StyledSlider\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        ref={ref}\n        {...rest}\n      >\n        <StyledTrack theme={theme}>\n          <StyledRange />\n        </StyledTrack>\n        {values?.length &&\n          // Thumbs are positional and can share a value, so the index is their\n          // stable identity.\n          // eslint-disable-next-line react/no-array-index-key\n          values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n      </StyledSlider>\n      {children}\n    </CSSWrapper>\n  )\n}\n\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,UAAU;EAClB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,WACc;CACjB,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAoB;cAClB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UAIP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,CAAC"}

package/dist/components/slider-field/SliderField.js

@@ -4,7 +4,8 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/slider-field/SliderField.tsx
-var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...rest }) => {
+var DEFAULT_STEPS = [];
+var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = DEFAULT_STEPS, ...rest }) => {
 	const { control, setValue } = useFormContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
 		name,

package/dist/components/slider-field/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.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 { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...rest\n}: SliderFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  // Serialized so an inline `value` array with a fresh identity per render\n  // doesn't re-fire the sync effect.\n  const serializedValue = JSON.stringify(value)\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input. An empty\n    // array is a valid value (clearing) and must sync too.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [serializedValue, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,WACmB;CACtB,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAID,MAAM,kBAAkB,KAAK,UAAU,KAAK;CAC5C,QAAM,gBAAgB;EAIpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAEhD,GAAG;EAAC;EAAiB;EAAM;CAAQ,CAAC;CAEpC,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.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 { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\n// Stable identity so the default doesn't hand `Slider.Steps` a fresh array every\n// render (which would redraw children that compare props).\nconst DEFAULT_STEPS: SliderFieldProps['steps'] = []\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = DEFAULT_STEPS,\n  ...rest\n}: SliderFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  // Serialized so an inline `value` array with a fresh identity per render\n  // doesn't re-fire the sync effect.\n  const serializedValue = JSON.stringify(value)\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input. An empty\n    // array is a valid value (clearing) and must sync too.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [serializedValue, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAkBA,IAAM,gBAA2C,CAAC;AAElD,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,eACR,GAAG,WACmB;CACtB,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAID,MAAM,kBAAkB,KAAK,UAAU,KAAK;CAC5C,QAAM,gBAAgB;EAIpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAEhD,GAAG;EAAC;EAAiB;EAAM;CAAQ,CAAC;CAEpC,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/stepper/Stepper.js

@@ -5,7 +5,7 @@ import { StepperStepForward } from "./StepperStepForward.js";
 import { StepperSteps } from "./StepperSteps.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import invariant from "invariant";
+import invariant from "tiny-invariant";
 //#region src/components/stepper/Stepper.tsx
 var StepperComponent = ({ children, stepCount, allowSkip, onComplete, onStepChange, direction = "horizontal", steps, hideLabels = false, showCompletedIcons = false, className }) => {
 	invariant(!(stepCount && steps), "`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");

package/dist/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { StepperProvider } from './Stepper.context'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport type { StepperProps } from './types'\n\nconst StepperComponent = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  className\n}: React.PropsWithChildren<StepperProps>) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <div aria-label=\"progress\" className={cn('w-full', className)}>\n        {children}\n      </div>\n    </StepperProvider>\n  )\n}\n\nexport const Stepper = /* @__PURE__ */ Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;;AAUA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC2C;CAC3C,UACE,EAAE,aAAa,QACf,6IACF;CAEA,MAAM,QAAQ,OAAO,UAAU,aAAa;CAE5C,OACE,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,EAAE;EACxB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,SAAS;GACzD;EACE,CAAA;CACU,CAAA;AAErB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,UAAU;CACV,aAAa;CACb,OAAO;AACT,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport { cn } from '../../styled'\nimport { StepperProvider } from './Stepper.context'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport type { StepperProps } from './types'\n\nconst StepperComponent = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  className\n}: React.PropsWithChildren<StepperProps>) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <div aria-label=\"progress\" className={cn('w-full', className)}>\n        {children}\n      </div>\n    </StepperProvider>\n  )\n}\n\nexport const Stepper = /* @__PURE__ */ Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;;AAUA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC2C;CAC3C,UACE,EAAE,aAAa,QACf,6IACF;CAEA,MAAM,QAAQ,OAAO,UAAU,aAAa;CAE5C,OACE,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,EAAE;EACxB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,SAAS;GACzD;EACE,CAAA;CACU,CAAA;AAErB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,UAAU;CACV,aAAa;CACb,OAAO;AACT,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/stepper/StepperSteps.js

@@ -18,14 +18,16 @@ var StepperStepsContainer = styled("div", {
 });
 var StepperSteps = ({ className }) => {
 	const { steps, goToStep, activeStep, viewedSteps, allowSkip, direction, hideLabels, completedSteps, showCompletedIcons } = useStepper();
+	const viewedStepsSet = new Set(viewedSteps);
+	const completedStepsSet = new Set(completedSteps);
 	const getBulletStatus = (index) => {
 		const activeBullet = steps[index];
 		if (activeBullet.status) return activeBullet.status;
 		if (completedSteps.length === steps.length) return Status.SUCCESS;
-		if (activeStep === index && completedSteps.includes(activeStep)) return Status.REVIEWED;
+		if (activeStep === index && completedStepsSet.has(activeStep)) return Status.REVIEWED;
 		if (activeStep === index) return Status.ACTIVE;
-		if (completedSteps.includes(index)) return Status.COMPLETED;
-		if (viewedSteps.includes(index)) return Status.VIEWED;
+		if (completedStepsSet.has(index)) return Status.COMPLETED;
+		if (viewedStepsSet.has(index)) return Status.VIEWED;
 		return Status.DEFAULT;
 	};
 	const getSeparatorStatus = (index) => {
@@ -51,12 +53,12 @@ var StepperSteps = ({ className }) => {
 				canInteract: allowSkip,
 				children: [/* @__PURE__ */ jsx(StepperStepBullet, {
 					as: allowSkip ? "button" : "div",
-					onClick: () => allowSkip && viewedSteps.includes(index) ? goToStep?.(index) : void 0,
+					onClick: () => allowSkip && viewedStepsSet.has(index) ? goToStep?.(index) : void 0,
 					status: bulletStatus,
 					"aria-current": index === activeStep ? "step" : void 0,
 					"aria-label": !step.label ? `step ${index + 1}` : "",
 					"aria-labelledby": step.label ? `step-${index}` : void 0,
-					className: allowSkip && viewedSteps.includes(index) ? "cursor-pointer" : "cursor-auto",
+					className: allowSkip && viewedStepsSet.has(index) ? "cursor-pointer" : "cursor-auto",
 					children: step.status === Status.SUCCESS || showCompletedIcons && bulletStatus === Status.COMPLETED ? /* @__PURE__ */ jsx(Icon, { is: Ok }) : index + 1
 				}), step.label && !hideLabels && /* @__PURE__ */ jsx(StepperStepLabel, {
 					as: "span",