npm - @atom-learning/components - Versions diffs - 10.0.1 → 10.1.0 - Mend

@atom-learning/components 10.0.1 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

	@@ -1 +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"}
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 // 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 // `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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 = [...(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"}