@atom-learning/components 10.0.1 → 10.2.0-beta.0

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/sortable/Handle.d.ts

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const StyledHandle: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+export declare const StyledHandle: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
     theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
     as?: React.ElementType;
     children: React.ReactNode;
+    href?: string;
     label: string;
-} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, {
+    reloadDocument?: boolean;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, {
     isDragging?: boolean | undefined;
 }>;
 export type HandleProps = Omit<React.ComponentProps<typeof StyledHandle>, 'children' | 'size'> & {

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",

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

@@ -1 +1 @@
-{"version":3,"file":"StepperSteps.js","names":[],"sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './Stepper.context'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { type StepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled('div', {\n  base: ['flex', 'justify-between'],\n  variants: {\n    direction: {\n      vertical: ['flex-col'],\n      horizontal: ['flex-row']\n    }\n  }\n})\n\nexport const StepperSteps = ({ className }: StepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedSteps.includes(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedSteps.includes(index)) return Status.COMPLETED\n    if (viewedSteps.includes(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer className={className} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            style={{ '--steps': steps.length || 0 }}\n            className={\n              direction === 'horizontal'\n                ? 'w-[calc(100%/var(--steps))]'\n                : 'h-[calc(100%/var(--steps))]'\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedSteps.includes(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              className={\n                allowSkip && viewedSteps.includes(index)\n                  ? 'cursor-pointer'\n                  : 'cursor-auto'\n              }\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,iBAAiB;CAChC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,UAAU;EACrB,YAAY,CAAC,UAAU;CACzB,EACF;AACF,CAAC;AAED,IAAa,gBAAgB,EAAE,gBAAmC;CAChE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,WAAW;CAEf,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;EAE3B,IAAI,aAAa,QAAQ,OAAO,aAAa;EAC7C,IAAI,eAAe,WAAW,MAAM,QAAQ,OAAO,OAAO;EAC1D,IAAI,eAAe,SAAS,eAAe,SAAS,UAAU,GAC5D,OAAO,OAAO;EAChB,IAAI,eAAe,OAAO,OAAO,OAAO;EACxC,IAAI,eAAe,SAAS,KAAK,GAAG,OAAO,OAAO;EAClD,IAAI,YAAY,SAAS,KAAK,GAAG,OAAO,OAAO;EAC/C,OAAO,OAAO;CAChB;CAEA,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,MAAM,EAAE;EAEnC,IAAI,eAAe,WAAW,MAAM,QAClC,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,SAC1B,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,WAAW,GACtE,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,QAC1B,OAAO,OAAO;EAGhB,OAAO,OAAO;CAChB;CAEA,OACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,KAAK;GAG1C,OACE,qBAAC,sBAAD;IACE,UAAU;IAEC;IACX,WAPoB,mBAAmB,KAO5B;IACX,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,EAAE;IACtC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;cAZf,CAcE,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,YAAY,SAAS,KAAK,IACnC,WAAW,KAAK,IAChB,KAAA;KAEN,QAAQ;KACR,gBAAc,UAAU,aAAa,SAAS,KAAA;KAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;KAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;KAChD,WACE,aAAa,YAAY,SAAS,KAAK,IACnC,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,GAAK,CAAA,IAEf,QAAQ;IAEO,CAAA,GAElB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;IACU,CAAA,CAEA;MA/Cf,QAAQ,OA+CO;EAE1B,CAAC;CACoB,CAAA;AAE3B"}
+{"version":3,"file":"StepperSteps.js","names":[],"sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './Stepper.context'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { type StepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled('div', {\n  base: ['flex', 'justify-between'],\n  variants: {\n    direction: {\n      vertical: ['flex-col'],\n      horizontal: ['flex-row']\n    }\n  }\n})\n\nexport const StepperSteps = ({ className }: StepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  // `viewedSteps`/`completedSteps` are scanned once per step below; Set lookups\n  // keep the per-step status checks O(1) instead of O(steps).\n  const viewedStepsSet = new Set(viewedSteps)\n  const completedStepsSet = new Set(completedSteps)\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedStepsSet.has(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedStepsSet.has(index)) return Status.COMPLETED\n    if (viewedStepsSet.has(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer className={className} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            // Steps are a fixed, index-addressed list (activeStep/viewedSteps/\n            // goToStep all key off the index) that never reorders, so the index\n            // is the stable identity here.\n            // eslint-disable-next-line react/no-array-index-key\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            style={{ '--steps': steps.length || 0 }}\n            className={\n              direction === 'horizontal'\n                ? 'w-[calc(100%/var(--steps))]'\n                : 'h-[calc(100%/var(--steps))]'\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedStepsSet.has(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              className={\n                allowSkip && viewedStepsSet.has(index)\n                  ? 'cursor-pointer'\n                  : 'cursor-auto'\n              }\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,iBAAiB;CAChC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,UAAU;EACrB,YAAY,CAAC,UAAU;CACzB,EACF;AACF,CAAC;AAED,IAAa,gBAAgB,EAAE,gBAAmC;CAChE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,WAAW;CAIf,MAAM,iBAAiB,IAAI,IAAI,WAAW;CAC1C,MAAM,oBAAoB,IAAI,IAAI,cAAc;CAEhD,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;EAE3B,IAAI,aAAa,QAAQ,OAAO,aAAa;EAC7C,IAAI,eAAe,WAAW,MAAM,QAAQ,OAAO,OAAO;EAC1D,IAAI,eAAe,SAAS,kBAAkB,IAAI,UAAU,GAC1D,OAAO,OAAO;EAChB,IAAI,eAAe,OAAO,OAAO,OAAO;EACxC,IAAI,kBAAkB,IAAI,KAAK,GAAG,OAAO,OAAO;EAChD,IAAI,eAAe,IAAI,KAAK,GAAG,OAAO,OAAO;EAC7C,OAAO,OAAO;CAChB;CAEA,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,MAAM,EAAE;EAEnC,IAAI,eAAe,WAAW,MAAM,QAClC,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,SAC1B,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,WAAW,GACtE,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,QAC1B,OAAO,OAAO;EAGhB,OAAO,OAAO;CAChB;CAEA,OACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,KAAK;GAG1C,OACE,qBAAC,sBAAD;IACE,UAAU;IAMC;IACX,WAXoB,mBAAmB,KAW5B;IACX,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,EAAE;IACtC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;cAhBf,CAkBE,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,eAAe,IAAI,KAAK,IACjC,WAAW,KAAK,IAChB,KAAA;KAEN,QAAQ;KACR,gBAAc,UAAU,aAAa,SAAS,KAAA;KAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;KAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;KAChD,WACE,aAAa,eAAe,IAAI,KAAK,IACjC,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,GAAK,CAAA,IAEf,QAAQ;IAEO,CAAA,GAElB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;IACU,CAAA,CAEA;MA/Cf,QAAQ,OA+CO;EAE1B,CAAC;CACoB,CAAA;AAE3B"}

package/dist/components/table/useStickyColumnsCss.js

@@ -5,7 +5,7 @@ var useStickyColumnsStyle = ({ numberOfStickyColumns, wrapperRef }) => {
 	const generateColumnsStyle = React$1.useCallback(() => {
 		let accWidth = 0;
 		const tableHeaderCells = wrapperRef.current?.querySelectorAll("th");
-		return Array.from(tableHeaderCells || []).slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
+		return [...tableHeaderCells || []].slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
 			const elementNumber = index + 1;
 			const styleObject = {
 				...acc,

package/dist/components/table/useStickyColumnsCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface UseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLDivElement | null>\n}): UseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAIyB;CACzB,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,CAAC,CAAC;CAEtE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,IAAI;EAmBlE,OAlB4B,MAAM,KAAK,oBAAoB,CAAC,CAGtC,CAAA,CAAoB,MAAM,GAAG,qBAE3B,CAAA,CAAc,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;GACzD;GAEA,YAAY,kBAAkB,KAAK,KAAK,CAAC,CAAC,eAAe;GAEzD,OAAO;EACT,GAAG,CAAC,CAEG;CACT,GAAG,CAAC,uBAAuB,UAAU,CAAC;CAEtC,QAAM,sBAAsB;EAC1B,IAAI,CAAC,uBAAuB;EAG5B,gBAFwB,qBAER,CAAe;CACjC,GAAG;EAAC;EAAuB;EAAY;CAAoB,CAAC;CAE5D,OAAO,EACL,aACF;AACF"}
+{"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface UseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLDivElement | null>\n}): UseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = [...(tableHeaderCells || [])]\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAIyB;CACzB,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,CAAC,CAAC;CAEtE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,IAAI;EAmBlE,OAfsB,CAHO,GAAI,oBAAoB,CAAC,CAGhC,CAAA,CAAoB,MAAM,GAAG,qBAE3B,CAAA,CAAc,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;GACzD;GAEA,YAAY,kBAAkB,KAAK,KAAK,CAAC,CAAC,eAAe;GAEzD,OAAO;EACT,GAAG,CAAC,CAEG;CACT,GAAG,CAAC,uBAAuB,UAAU,CAAC;CAEtC,QAAM,sBAAsB;EAC1B,IAAI,CAAC,uBAAuB;EAG5B,gBAFwB,qBAER,CAAe;CACjC,GAAG;EAAC;EAAuB;EAAY;CAAoB,CAAC;CAE5D,OAAO,EACL,aACF;AACF"}

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { NavigatorActions } from '../../types/navigatorActions.types';
 import type { Override } from '../../utilities/types';
 declare const StyledTileInteractive: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"div", {
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
@@ -14,8 +13,11 @@ declare const StyledTileInteractive: import("../..").PolymorphicComponent<import
 } & {
     colorScheme?: import("../..").TcolorScheme;
 }>;
-type TileInteractiveProps = Override<React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions, {
+type TileInteractiveProps = Override<React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: string;
+    reloadDocument?: boolean;
+}, {
     as?: React.ElementType;
 }>;
-export declare const TileInteractive: ({ ref, onClick, href, type, as, ...rest }: TileInteractiveProps) => React.JSX.Element;
+export declare const TileInteractive: ({ ref, onClick, href, type, as, reloadDocument, ...rest }: TileInteractiveProps) => React.JSX.Element;
 export {};

package/dist/components/tile-interactive/TileInteractive.js

@@ -1,4 +1,5 @@
 import { styled } from "../../styled.js";
+import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { Tile } from "../tile/Tile.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -29,9 +30,10 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:transition-transform",
 	"not-disabled:translate-y-0"
 ] });
-var TileInteractive = ({ ref, onClick, href, type = "button", as, ...rest }) => {
+var TileInteractive = ({ ref, onClick, href, type = "button", as, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
 	const elementSpecificProps = !!href ? {
-		as: as || "a",
+		as: as || routerLinkProps.as || "a",
 		href,
 		onClick: void 0
 	} : {

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { Tile } from '../tile/Tile'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TileInteractiveProps = Override<\n  React.ComponentProps<typeof StyledTileInteractive> &\n    React.ButtonHTMLAttributes<HTMLButtonElement> &\n    NavigatorActions,\n  { as?: React.ElementType }\n>\n\nexport const TileInteractive = ({\n  ref,\n  onClick,\n  href,\n  type = 'button',\n  as,\n  ...rest\n}: TileInteractiveProps) => {\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || 'a',\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || 'button',\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n}\n"],"mappings":";;;;;AAOA,IAAM,wBAAwB,OAAO,MAAM,EACzC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AASD,IAAa,mBAAmB,EAC9B,KACA,SACA,MACA,OAAO,UACP,IACA,GAAG,WACuB;CAE1B,MAAM,uBAAuB,CADb,CAAC,OAEb;EACE,IAAI,MAAM;EACV;EACA,SAAS,KAAA;CACX,IACA;EACE,IAAI,MAAM;EACV;EACA;CACF;CAEJ,OAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;CAAM,CAAA;AAC/E"}
+{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { Tile } from '../tile/Tile'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TileInteractiveProps = Override<\n  React.ComponentProps<typeof StyledTileInteractive> &\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      href?: string\n      reloadDocument?: boolean\n    },\n  { as?: React.ElementType }\n>\n\nexport const TileInteractive = ({\n  ref,\n  onClick,\n  href,\n  type = 'button',\n  as,\n  reloadDocument,\n  ...rest\n}: TileInteractiveProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || routerLinkProps.as || 'a',\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || 'button',\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n}\n"],"mappings":";;;;;;AAOA,IAAM,wBAAwB,OAAO,MAAM,EACzC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAWD,IAAa,mBAAmB,EAC9B,KACA,SACA,MACA,OAAO,UACP,IACA,gBACA,GAAG,WACuB;CAC1B,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,MAAM,uBAAuB,CADb,CAAC,OAEb;EACE,IAAI,MAAM,gBAAgB,MAAM;EAChC;EACA,SAAS,KAAA;CACX,IACA;EACE,IAAI,MAAM;EACV;EACA;CACF;CAEJ,OAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;CAAM,CAAA;AAC/E"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -1,6 +1,6 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-declare const StyledTileToggleGroupItem: import("../..").PolymorphicComponent<({ ref, onClick, href, type, as, ...rest }: Omit<{
+declare const StyledTileToggleGroupItem: import("../..").PolymorphicComponent<({ ref, onClick, href, type, as, reloadDocument, ...rest }: Omit<{
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
@@ -16,7 +16,10 @@ declare const StyledTileToggleGroupItem: import("../..").PolymorphicComponent<({
     colorScheme?: import("../..").TcolorScheme;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "colorScheme" | "diffused">, "as" | "border" | "borderRadius" | "colorScheme" | "diffused"> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../..").NavigatorActions, "as"> & {
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "colorScheme" | "diffused">, "as" | "border" | "borderRadius" | "colorScheme" | "diffused"> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: string;
+    reloadDocument?: boolean;
+}, "as"> & {
     as?: React.ElementType;
 }) => React.JSX.Element, unknown>;
 type TileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledTileToggleGroupItem>;

package/dist/components/top-bar/TopBar.d.ts

@@ -34,11 +34,13 @@ export declare const TopBar: {
         isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     } & {
         as?: never;
-    } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+    } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
         as?: React.ElementType;
         children: React.ReactNode;
+        href?: string;
         label: string;
-    } & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "children" | "size"> & {
+        reloadDocument?: boolean;
+    } & Omit<import("../..").OptionalTooltipWrapperProps, "label">, "children" | "size"> & {
         icon: React.FC<React.SVGProps<SVGSVGElement>>;
         label: string;
     }) => React.JSX.Element;