@atom-learning/components 7.0.0 → 8.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;AAC3E,SAAS,QAAQ,QAAQ,MAAM,OAAQ;;AAGzC,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,IAAI;AAEnD,KAAI,cAAc,GAAI,QAAO;AAC7B,KAAI,cAAc,GAAI,QAAO;AAC7B,QAAO;;AAGT,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,EAAE,OAAyB;AACzE,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,wBAAA,cAAC,OAAD,EAAK,WAAU,4BAcT,EAbH,MAAM,KAAK,SACV,wBAAA,cAAC,MAAD;EACE,IAAG;EACH,KAAK,KAAK;EACV,OAAO;GACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,IAAI,CAAC;GACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,IAAI,CAAC;GAC9D;EACD,WAAU;EAGL,EADJ,KAAK,MACD,CACP,CACE"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;AAC3E,SAAS,QAAQ,QAAQ,MAAM,OAAQ;;AAGzC,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,IAAI;AAEnD,KAAI,cAAc,GAAI,QAAO;AAC7B,KAAI,cAAc,GAAI,QAAO;AAC7B,QAAO;;AAGT,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,EAAE,OAAyB;AACzE,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,IAAI,CAAC;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,IAAI,CAAC;IAC9D;GACD,WAAU;aAET,KAAK;GACD,EARA,KAAK,MAQL,CACP;EACE,CAAA"}

package/dist/components/slider/SliderValue.js

@@ -1,8 +1,12 @@
 import { Text } from "../text/Text.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/slider/SliderValue.tsx
 var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => {
-	return /* @__PURE__ */ React$1.createElement(Text, { className: "text-grey-700 mt-4 w-full" }, outputLabel(value.length === 1 ? value[0] : value));
+	return /* @__PURE__ */ jsx(Text, {
+		className: "text-grey-700 mt-4 w-full",
+		children: outputLabel(value.length === 1 ? value[0] : value)
+	});
 };
 //#endregion
 export { SliderValue };

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

@@ -1 +1 @@
-{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"mappings":";;;AAYA,IAAa,eAAe,EAC1B,QAAQ,EAAE,EACV,eAAe,UAAU,oBAAoB,cACvB;AACtB,QACE,wBAAA,cAAC,MAAD,EAAM,WAAU,6BAET,EADJ,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,MAAM,CAC9C"}
+{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,EAAE,EACV,eAAe,UAAU,oBAAoB,cACvB;AACtB,QACE,oBAAC,MAAD;EAAM,WAAU;YACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,MAAM;EAC9C,CAAA"}

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

@@ -1,6 +1,7 @@
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { Slider } from "../slider/Slider.js";
 import React 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 = [], ...remainingProps }) => {
@@ -14,27 +15,29 @@ var SliderField = ({ className, hideLabel, label, name, defaultValue, value, val
 	React.useEffect(() => {
 		if (value?.length) onChange(value);
 	}, [JSON.stringify(value)]);
-	return /* @__PURE__ */ React.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		fieldId: name,
 		label,
-		hideLabel
-	}, /* @__PURE__ */ React.createElement(Slider, {
-		ref,
-		name: innerName,
-		onValueChange: onChange,
-		value: innerValue,
-		min,
-		max,
-		...remainingProps
-	}, /* @__PURE__ */ React.createElement(Slider.Steps, {
-		min,
-		max,
-		steps
-	}), /* @__PURE__ */ React.createElement(Slider.Value, {
-		value: innerValue,
-		outputLabel
-	})));
+		hideLabel,
+		children: /* @__PURE__ */ jsxs(Slider, {
+			ref,
+			name: innerName,
+			onValueChange: onChange,
+			value: innerValue,
+			min,
+			max,
+			...remainingProps,
+			children: [/* @__PURE__ */ jsx(Slider.Steps, {
+				min,
+				max,
+				steps
+			}), /* @__PURE__ */ jsx(Slider.Value, {
+				value: innerValue,
+				outputLabel
+			})]
+		})
+	});
 };
 SliderField.displayName = "SliderField";
 //#endregion

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 React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { 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  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = 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  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\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        {...remainingProps}\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":";;;;;AAiBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,EAAE,EACV,GAAG,qBACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;AAEF,OAAM,gBAAgB;AAEpB,MAAI,OAAO,OAAQ,UAAS,MAAM;IACjC,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE3B,QACE,sBAAA,cAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;EAeE,EAbb,sBAAA,cAAC,QAAD;EACO;EACL,MAAM;EACN,eAAe;EACf,OAAO;EACF;EACA;EACL,GAAI;EAKG,EAHP,sBAAA,cAAC,OAAO,OAAR;EAAmB;EAAU;EAAY;EAAS,CAAA,EAElD,sBAAA,cAAC,OAAO,OAAR;EAAc,OAAO;EAAyB;EAAe,CAAA,CACtD,CACI;;AAInB,YAAY,cAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { 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  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = 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  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\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        {...remainingProps}\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":";;;;;;AAiBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,EAAE,EACV,GAAG,qBACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;AAEF,OAAM,gBAAgB;AAEpB,MAAI,OAAO,OAAQ,UAAS,MAAM;IACjC,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE3B,QACE,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;IAAS,CAAA,EAElD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;IAAe,CAAA,CACtD;;EACI,CAAA;;AAInB,YAAY,cAAc"}

package/dist/components/sortable/Handle.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "appearance" | "size" | "theme" | "isRounded"> & {
+export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "size" | "theme" | "isRounded"> & {
     theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;

package/dist/components/sortable/Handle.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { DragHandle } from "@atom-learning/icons";
 //#region src/components/sortable/Handle.tsx
 var StyledHandle = styled(ActionIcon, {
@@ -18,14 +19,15 @@ var StyledHandle = styled(ActionIcon, {
 	} }
 });
 var Handle = React$1.forwardRef(({ isDragging, size, ...rest }, ref) => {
-	return /* @__PURE__ */ React$1.createElement(StyledHandle, {
+	return /* @__PURE__ */ jsx(StyledHandle, {
 		ref,
 		isDragging,
 		appearance: "simple",
 		hasTooltip: false,
 		size,
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: DragHandle }));
+		...rest,
+		children: /* @__PURE__ */ jsx(Icon, { is: DragHandle })
+	});
 });
 Handle.displayName = "Handle";
 //#endregion

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,kBAAkB;EACzB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AAQF,IAAa,SAAS,QAAM,YACzB,EAAE,YAAY,MAAM,GAAG,QAAQ,QAAQ;AACtC,QACE,wBAAA,cAAC,cAAD;EACO;EACO;EACZ,YAAW;EACX,YAAY;EACN;EACN,GAAI;EAGS,EADb,wBAAA,cAAC,MAAD,EAAM,IAAI,YAAc,CAAA,CACX;EAGpB;AAED,OAAO,cAAc"}
+{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,kBAAkB;EACzB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AAQF,IAAa,SAAS,QAAM,YACzB,EAAE,YAAY,MAAM,GAAG,QAAQ,QAAQ;AACtC,QACE,oBAAC,cAAD;EACO;EACO;EACZ,YAAW;EACX,YAAY;EACN;EACN,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;EACX,CAAA;EAGpB;AAED,OAAO,cAAc"}

package/dist/components/sortable/SortableHandle.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { THandleProps } from './Handle';
 export type TSortableHandleProps = {
-    targetId: React.ReactText;
+    targetId: string | number;
     disabled?: boolean;
     label?: string;
 } & Omit<THandleProps, 'label'>;

package/dist/components/sortable/SortableHandle.js

@@ -1,10 +1,11 @@
 import { Handle } from "./Handle.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 //#region src/components/sortable/SortableHandle.tsx
 var SortableHandle = ({ targetId, disabled = false, label = "drag handle", ...rest }) => {
 	const { attributes, listeners, isDragging, setActivatorNodeRef } = useSortable({ id: targetId });
-	return /* @__PURE__ */ React$1.createElement(Handle, {
+	return /* @__PURE__ */ jsx(Handle, {
 		ref: setActivatorNodeRef,
 		isDragging,
 		label,

package/dist/components/sortable/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/B,QACE,wBAAA,cAAC,QAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAK,CAAC,WAAW,YAAY,EAAE;EAC/B,GAAK,CAAC,WAAW,aAAa,EAAE;EAChC,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}
+{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: string | number\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/B,QACE,oBAAC,QAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAK,CAAC,WAAW,YAAY,EAAE;EAC/B,GAAK,CAAC,WAAW,aAAa,EAAE;EAChC,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}

package/dist/components/sortable/SortableItem.js

@@ -1,12 +1,12 @@
 import { cn } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { useSortable } from "@dnd-kit/sortable";
 //#region src/components/sortable/SortableItem.tsx
 var SortableItem = ({ id, asChild = false, className, style, isDragHandle = false, disabled, ...rest }) => {
 	const { transform, setNodeRef, isDragging, listeners, attributes } = useSortable({ id });
-	const Component = asChild ? Slot : "div";
-	return /* @__PURE__ */ React$1.createElement(Component, {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
 		ref: setNodeRef,
 		style: {
 			...style,

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={cn(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAgBA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,IAAI,CAAC;CAErB,MAAM,YAAY,UAAU,OAAO;AACnC,QACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,EAAE;EAC/C,GAAK,gBAAgB,CAAC,WAAW,aAAa,EAAE;EAChD,GAAI;EACJ,WAAW,GACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,UACD;EACD,CAAA;;AAIN,aAAa,cAAc"}
+{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={cn(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;;AAgBA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,IAAI,CAAC;AAGrB,QACE,oBAFgB,UAAU,OAAO,OAEjC;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,EAAE;EAC/C,GAAK,gBAAgB,CAAC,WAAW,aAAa,EAAE;EAChD,GAAI;EACJ,WAAW,GACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,UACD;EACD,CAAA;;AAIN,aAAa,cAAc"}

package/dist/components/sortable/SortableRoot.d.ts

@@ -1,7 +1,7 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
 type TSortableRootProps = {
-    sortableIds: React.ReactText[];
+    sortableIds: (string | number)[];
     onSortChange: (onSortChangeData: {
         order: UniqueIdentifier[];
         oldIndex: number;

package/dist/components/sortable/SortableRoot.js

@@ -1,4 +1,5 @@
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 //#region src/components/sortable/SortableRoot.tsx
@@ -22,11 +23,15 @@ var SortableRoot = ({ sortableIds, onSortChange, children }) => {
 			return newOrder;
 		});
 	};
-	return /* @__PURE__ */ React$1.createElement(DndContext, {
+	return /* @__PURE__ */ jsx(DndContext, {
 		sensors,
 		collisionDetection: closestCenter,
-		onDragEnd: handleDragEnd
-	}, /* @__PURE__ */ React$1.createElement(SortableContext, { items: order }, children));
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: order,
+			children
+		})
+	});
 };
 SortableRoot.displayName = "SortableRoot";
 //#endregion

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACiD;CACjD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA4B,YAAY;AACxE,SAAM,gBAAgB;AACpB,WAAS,YAAY;IACpB,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,GAC/C,WAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG;GACzC,MAAM,WAAW,MAAM,QAAQ,KAAK,GAAG;GACvC,MAAM,WAAW,UAAU,OAAO,UAAU,SAAS;AACrD,gBAAa;IAAE,OAAO;IAAU;IAAU;IAAU,CAAC;AACrD,UAAO;IACP;;AAIN,QACE,wBAAA,cAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;EAGA,EADX,wBAAA,cAAC,iBAAD,EAAiB,OAAO,OAAmC,EAA3B,SAA2B,CAChD;;AAIjB,aAAa,cAAc"}
+{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACiD;CACjD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,YAAY;AAC1E,SAAM,gBAAgB;AACpB,WAAS,YAAY;IACpB,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,GAC/C,WAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG;GACzC,MAAM,WAAW,MAAM,QAAQ,KAAK,GAAG;GACvC,MAAM,WAAW,UAAU,OAAO,UAAU,SAAS;AACrD,gBAAa;IAAE,OAAO;IAAU;IAAU;IAAU,CAAC;AACrD,UAAO;IACP;;AAIN,QACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;GAA2B,CAAA;EAChD,CAAA;;AAIjB,aAAa,cAAc"}

package/dist/components/spacer/Spacer.d.ts

@@ -2,8 +2,6 @@
  * A flexible flex spacer that expands along the major axis of its containing flex layout.
  * It renders a `div` by default, and takes up any available space.
  */
-export declare const Spacer: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const Spacer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: import("react").ElementType;
 }>;

package/dist/components/stepper/Stepper.js

@@ -3,13 +3,14 @@ import { StepperProvider } from "./stepper-context/StepperContext.js";
 import { StepperStepBack } from "./StepperStepBack.js";
 import { StepperStepForward } from "./StepperStepForward.js";
 import { StepperSteps } from "./StepperSteps.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import invariant from "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.");
 	const count = steps?.length || stepCount || 0;
-	return /* @__PURE__ */ React$1.createElement(StepperProvider, {
+	return /* @__PURE__ */ jsx(StepperProvider, {
 		stepCount: count,
 		allowSkip,
 		onComplete,
@@ -17,11 +18,13 @@ var StepperComponent = ({ children, stepCount, allowSkip, onComplete, onStepChan
 		direction,
 		steps: steps || Array(count).fill(""),
 		hideLabels,
-		showCompletedIcons
-	}, /* @__PURE__ */ React$1.createElement("div", {
-		"aria-label": "progress",
-		className: cn("w-full", className)
-	}, children));
+		showCompletedIcons,
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-label": "progress",
+			className: cn("w-full", className),
+			children
+		})
+	});
 };
 var Stepper = Object.assign(StepperComponent, {
 	StepBack: StepperStepBack,

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'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } 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<IStepperProps>) => {\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 = Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;AAWA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;AAC5C,WACE,EAAE,aAAa,QACf,8IACD;CAED,MAAM,QAAQ,OAAO,UAAU,aAAa;AAE5C,QACE,wBAAA,cAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,MAAM,CAAC,KAAK,GAAG;EACzB;EACQ;EAKJ,EAHhB,wBAAA,cAAC,OAAD;EAAK,cAAW;EAAW,WAAW,GAAG,UAAU,UAAU;EAEvD,EADH,SACG,CACU;;AAItB,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,iBAAiB,cAAc"}
+{"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'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } 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<IStepperProps>) => {\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 = Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;;AAWA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;AAC5C,WACE,EAAE,aAAa,QACf,8IACD;CAED,MAAM,QAAQ,OAAO,UAAU,aAAa;AAE5C,QACE,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,MAAM,CAAC,KAAK,GAAG;EACzB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,UAAU;GAC1D;GACG,CAAA;EACU,CAAA;;AAItB,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,iBAAiB,cAAc"}

package/dist/components/stepper/StepperStepBack.js

@@ -1,16 +1,18 @@
 import { Button } from "../button/Button.js";
 import { useStepper } from "./stepper-context/StepperContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/stepper/StepperStepBack.tsx
 var StepperStepBack = ({ label, children, ...rest }) => {
 	const { activeStep, goToPreviousStep } = useStepper();
-	return /* @__PURE__ */ React$1.createElement(Button, {
+	return /* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		appearance: "outline",
 		...rest,
 		disabled: activeStep === 0,
-		onClick: goToPreviousStep
-	}, children || label?.(activeStep));
+		onClick: goToPreviousStep,
+		children: children || label?.(activeStep)
+	});
 };
 //#endregion
 export { StepperStepBack };

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepBack = ({\n  label,\n  children,\n  ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button>) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC8D;CACjE,MAAM,EAAE,YAAY,qBAAqB,YAAY;AACrD,QACE,wBAAA,cAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;EAGF,EADN,YAAY,QAAQ,WAAW,CACzB"}
+{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepBack = ({\n  label,\n  children,\n  ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button>) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC8D;CACjE,MAAM,EAAE,YAAY,qBAAqB,YAAY;AACrD,QACE,oBAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;YAER,YAAY,QAAQ,WAAW;EACzB,CAAA"}

package/dist/components/stepper/StepperStepBullet.d.ts

@@ -1,7 +1,5 @@
-export declare const StepperStepBullet: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "status"> & {
-    status?: "default" | "success" | "active" | "viewed" | "completed" | "reviewed" | undefined;
+export declare const StepperStepBullet: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status"> & {
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

package/dist/components/stepper/StepperStepContainer.d.ts

@@ -1,10 +1,8 @@
-export declare const StepperStepContainer: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "separator" | "status" | "canInteract"> & {
+export declare const StepperStepContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "separator" | "status" | "direction" | "canInteract"> & {
     canInteract?: boolean | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    separator?: "default" | "success" | "active" | "viewed" | undefined;
-    status?: "default" | "success" | "active" | "viewed" | "completed" | "reviewed" | undefined;
+    separator?: "success" | "default" | "active" | "viewed" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

package/dist/components/stepper/StepperStepForward.js

@@ -1,6 +1,7 @@
 import { Button } from "../button/Button.js";
 import { useStepper } from "./stepper-context/StepperContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/stepper/StepperStepForward.tsx
 var StepperStepForward = ({ label, children, onClick, ...rest }) => {
 	const { goToNextStep, activeStep } = useStepper();
@@ -8,12 +9,13 @@ var StepperStepForward = ({ label, children, onClick, ...rest }) => {
 		if (onClick) return onClick(() => goToNextStep?.());
 		goToNextStep?.();
 	};
-	return /* @__PURE__ */ React$1.createElement(Button, {
+	return /* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		...rest,
 		onClick: handleClick,
-		className: "ml-auto"
-	}, children || label?.(activeStep));
+		className: "ml-auto",
+		children: children || label?.(activeStep)
+	});
 };
 //#endregion
 export { StepperStepForward };

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepForward.js","names":[],"sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n  label,\n  children,\n  onClick,\n  ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n  const { goToNextStep, activeStep } = useStepper()\n\n  const handleClick = () => {\n    if (onClick) {\n      return onClick(() => goToNextStep?.())\n    }\n    goToNextStep?.()\n  }\n\n  return (\n    <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,sBAAsB,EACjC,OACA,UACA,SACA,GAAG,WACuE;CAC1E,MAAM,EAAE,cAAc,eAAe,YAAY;CAEjD,MAAM,oBAAoB;AACxB,MAAI,QACF,QAAO,cAAc,gBAAgB,CAAC;AAExC,kBAAgB;;AAGlB,QACE,wBAAA,cAAC,QAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;EAEnD,EADN,YAAY,QAAQ,WAAW,CACzB"}
+{"version":3,"file":"StepperStepForward.js","names":[],"sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n  label,\n  children,\n  onClick,\n  ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n  const { goToNextStep, activeStep } = useStepper()\n\n  const handleClick = () => {\n    if (onClick) {\n      return onClick(() => goToNextStep?.())\n    }\n    goToNextStep?.()\n  }\n\n  return (\n    <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,sBAAsB,EACjC,OACA,UACA,SACA,GAAG,WACuE;CAC1E,MAAM,EAAE,cAAc,eAAe,YAAY;CAEjD,MAAM,oBAAoB;AACxB,MAAI,QACF,QAAO,cAAc,gBAAgB,CAAC;AAExC,kBAAgB;;AAGlB,QACE,oBAAC,QAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;YACzD,YAAY,QAAQ,WAAW;EACzB,CAAA"}

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -1,6 +1,4 @@
-export declare const StepperStepLabel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "noCapsize" | "weight" | "family"> & {
+export declare const StepperStepLabel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
@@ -9,9 +7,9 @@ export declare const StepperStepLabel: import("react").ForwardRefExoticComponent
     as?: import("react").ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "direction" | "status"> & {
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "status" | "direction"> & {
     direction?: "horizontal" | "vertical" | undefined;
-    status?: "default" | "success" | "active" | "viewed" | "completed" | "reviewed" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

package/dist/components/stepper/StepperSteps.js

@@ -5,7 +5,8 @@ import { StepperStepBullet } from "./StepperStepBullet.js";
 import { StepperStepContainer } from "./StepperStepContainer.js";
 import { StepperStepLabel } from "./StepperStepLabel.js";
 import { Status } from "./types.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Ok } from "@atom-learning/icons";
 //#region src/components/stepper/StepperSteps.tsx
 var StepperStepsContainer = styled("div", {
@@ -35,36 +36,38 @@ var StepperSteps = ({ className }) => {
 		if (bulletStatus === Status.VIEWED) return Status.VIEWED;
 		return Status.DEFAULT;
 	};
-	return /* @__PURE__ */ React$1.createElement(StepperStepsContainer, {
+	return /* @__PURE__ */ jsx(StepperStepsContainer, {
 		className,
-		direction
-	}, steps.map((step, index) => {
-		const bulletStatus = getBulletStatus(index);
-		const separatorStatus = getSeparatorStatus(index);
-		return /* @__PURE__ */ React$1.createElement(StepperStepContainer, {
-			tabIndex: 0,
-			key: `step_${index}`,
-			direction,
-			separator: separatorStatus,
-			status: bulletStatus,
-			style: { "--steps": steps.length || 0 },
-			className: direction === "horizontal" ? "w-[calc(100%/var(--steps))]" : "h-[calc(100%/var(--steps))]",
-			canInteract: allowSkip
-		}, /* @__PURE__ */ React$1.createElement(StepperStepBullet, {
-			as: allowSkip ? "button" : "div",
-			onClick: () => allowSkip && viewedSteps.includes(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"
-		}, step.status === Status.SUCCESS || showCompletedIcons && bulletStatus === Status.COMPLETED ? /* @__PURE__ */ React$1.createElement(Icon, { is: Ok }) : index + 1), step.label && !hideLabels && /* @__PURE__ */ React$1.createElement(StepperStepLabel, {
-			as: "span",
-			id: `step-${index}`,
-			direction,
-			status: bulletStatus
-		}, step.label));
-	}));
+		direction,
+		children: steps.map((step, index) => {
+			const bulletStatus = getBulletStatus(index);
+			return /* @__PURE__ */ jsxs(StepperStepContainer, {
+				tabIndex: 0,
+				direction,
+				separator: getSeparatorStatus(index),
+				status: bulletStatus,
+				style: { "--steps": steps.length || 0 },
+				className: direction === "horizontal" ? "w-[calc(100%/var(--steps))]" : "h-[calc(100%/var(--steps))]",
+				canInteract: allowSkip,
+				children: [/* @__PURE__ */ jsx(StepperStepBullet, {
+					as: allowSkip ? "button" : "div",
+					onClick: () => allowSkip && viewedSteps.includes(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",
+					children: step.status === Status.SUCCESS || showCompletedIcons && bulletStatus === Status.COMPLETED ? /* @__PURE__ */ jsx(Icon, { is: Ok }) : index + 1
+				}), step.label && !hideLabels && /* @__PURE__ */ jsx(StepperStepLabel, {
+					as: "span",
+					id: `step-${index}`,
+					direction,
+					status: bulletStatus,
+					children: step.label
+				})]
+			}, `step_${index}`);
+		})
+	});
 };
 //#endregion
 export { StepperSteps };

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'\n\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { IStepperStepsProps, 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 }: IStepperStepsProps) => {\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":";;;;;;;;;;AAYA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,kBAAkB;CACjC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,WAAW;EACtB,YAAY,CAAC,WAAW;EACzB,EACF;CACF,CAAC;AAEF,IAAa,gBAAgB,EAAE,gBAAoC;CACjE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,YAAY;CAEhB,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;AAE3B,MAAI,aAAa,OAAQ,QAAO,aAAa;AAC7C,MAAI,eAAe,WAAW,MAAM,OAAQ,QAAO,OAAO;AAC1D,MAAI,eAAe,SAAS,eAAe,SAAS,WAAW,CAC7D,QAAO,OAAO;AAChB,MAAI,eAAe,MAAO,QAAO,OAAO;AACxC,MAAI,eAAe,SAAS,MAAM,CAAE,QAAO,OAAO;AAClD,MAAI,YAAY,SAAS,MAAM,CAAE,QAAO,OAAO;AAC/C,SAAO,OAAO;;CAGhB,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,QAAQ;AAEnC,MAAI,eAAe,WAAW,MAAM,OAClC,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,QAC1B,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,YAAY,CACvE,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,OAC1B,QAAO,OAAO;AAGhB,SAAO,OAAO;;AAGhB,QACE,wBAAA,cAAC,uBAAD;EAAkC;EAAsB;EA0DhC,EAzDrB,MAAM,KAAK,MAAM,UAAU;EAC1B,MAAM,eAAe,gBAAgB,MAAM;EAC3C,MAAM,kBAAkB,mBAAmB,MAAM;AAEjD,SACE,wBAAA,cAAC,sBAAD;GACE,UAAU;GACV,KAAK,QAAQ;GACF;GACX,WAAW;GACX,QAAQ;GACR,OAAO,EAAE,WAAW,MAAM,UAAU,GAAG;GACvC,WACE,cAAc,eACV,gCACA;GAEN,aAAa;GAqCQ,EAnCrB,wBAAA,cAAC,mBAAD;GACE,IAAI,YAAY,WAAW;GAC3B,eACE,aAAa,YAAY,SAAS,MAAM,GACpC,WAAW,MAAM,GACjB,KAAA;GAEN,QAAQ;GACR,gBAAc,UAAU,aAAa,SAAS,KAAA;GAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;GAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;GAChD,WACE,aAAa,YAAY,SAAS,MAAM,GACpC,mBACA;GASY,EANjB,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,wBAAA,cAAC,MAAD,EAAM,IAAI,IAAM,CAAA,GAEhB,QAAQ,EAEQ,EAEnB,KAAK,SAAS,CAAC,cACd,wBAAA,cAAC,kBAAD;GACE,IAAG;GACH,IAAI,QAAQ;GACD;GACX,QAAQ;GAGS,EADhB,KAAK,MACW,CAEA;GAEzB,CACoB"}
+{"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'\n\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { IStepperStepsProps, 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 }: IStepperStepsProps) => {\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":";;;;;;;;;;;AAYA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,kBAAkB;CACjC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,WAAW;EACtB,YAAY,CAAC,WAAW;EACzB,EACF;CACF,CAAC;AAEF,IAAa,gBAAgB,EAAE,gBAAoC;CACjE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,YAAY;CAEhB,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;AAE3B,MAAI,aAAa,OAAQ,QAAO,aAAa;AAC7C,MAAI,eAAe,WAAW,MAAM,OAAQ,QAAO,OAAO;AAC1D,MAAI,eAAe,SAAS,eAAe,SAAS,WAAW,CAC7D,QAAO,OAAO;AAChB,MAAI,eAAe,MAAO,QAAO,OAAO;AACxC,MAAI,eAAe,SAAS,MAAM,CAAE,QAAO,OAAO;AAClD,MAAI,YAAY,SAAS,MAAM,CAAE,QAAO,OAAO;AAC/C,SAAO,OAAO;;CAGhB,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,QAAQ;AAEnC,MAAI,eAAe,WAAW,MAAM,OAClC,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,QAC1B,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,YAAY,CACvE,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,OAC1B,QAAO,OAAO;AAGhB,SAAO,OAAO;;AAGhB,QACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,MAAM;AAG3C,UACE,qBAAC,sBAAD;IACE,UAAU;IAEC;IACX,WAPoB,mBAAmB,MAAM;IAQ7C,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,GAAG;IACvC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;cAZf,CAcE,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,YAAY,SAAS,MAAM,GACpC,WAAW,MAAM,GACjB,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,MAAM,GACpC,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,IAAM,CAAA,GAEhB,QAAQ;KAEQ,CAAA,EAEnB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;KACW,CAAA,CAEA;MA/ChB,QAAQ,QA+CQ;IAEzB;EACoB,CAAA"}