@atom-learning/components 6.6.0-beta.0 → 6.6.0-beta.2

package/dist/components/sortable/SortableRoot.js

@@ -1,31 +1,35 @@
-import * as e from "react";
-import { SortableContext as t, arrayMove as n, sortableKeyboardCoordinates as r } from "@dnd-kit/sortable";
-import { DndContext as i, KeyboardSensor as a, PointerSensor as o, closestCenter as s, useSensor as c, useSensors as l } from "@dnd-kit/core";
+import * as React$1 from "react";
+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
-var u = ({ sortableIds: u, onSortChange: d, children: f }) => {
-	let [p, m] = e.useState(u);
-	e.useEffect(() => {
-		m(u);
-	}, [u]);
-	let h = l(c(o), c(a, { coordinateGetter: r }));
-	return /* @__PURE__ */ e.createElement(i, {
-		sensors: h,
-		collisionDetection: s,
-		onDragEnd: (e) => {
-			let { active: t, over: r } = e;
-			t.id && r?.id && t.id !== r?.id && m((e) => {
-				let i = e.indexOf(t.id), a = e.indexOf(r.id), o = n(e, i, a);
-				return d({
-					order: o,
-					oldIndex: i,
-					newIndex: a
-				}), o;
+var SortableRoot = ({ sortableIds, onSortChange, children }) => {
+	const [order, setOrder] = React$1.useState(sortableIds);
+	React$1.useEffect(() => {
+		setOrder(sortableIds);
+	}, [sortableIds]);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (active.id && over?.id && active.id !== over?.id) setOrder((order) => {
+			const oldIndex = order.indexOf(active.id);
+			const newIndex = order.indexOf(over.id);
+			const newOrder = arrayMove(order, oldIndex, newIndex);
+			onSortChange({
+				order: newOrder,
+				oldIndex,
+				newIndex
 			});
-		}
-	}, /* @__PURE__ */ e.createElement(t, { items: p }, f));
+			return newOrder;
+		});
+	};
+	return /* @__PURE__ */ React$1.createElement(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: handleDragEnd
+	}, /* @__PURE__ */ React$1.createElement(SortableContext, { items: order }, children));
 };
-u.displayName = "SortableRoot";
+SortableRoot.displayName = "SortableRoot";
 //#endregion
-export { u as SortableRoot };
+export { SortableRoot };
 
 //# sourceMappingURL=SortableRoot.js.map

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,KAAgB,EAC3B,gBACA,iBACA,kBACiD;CACjD,IAAM,CAAC,GAAO,KAAY,EAAM,SAA4B,EAAY;AACxE,GAAM,gBAAgB;AACpB,IAAS,EAAY;IACpB,CAAC,EAAY,CAAC;CAEjB,IAAM,IAAU,EACd,EAAU,EAAc,EACxB,EAAU,GAAgB,EACxB,kBAAkB,GACnB,CAAC,CACH;AAeD,QACE,kBAAA,cAAC,GAAD;EACW;EACT,oBAAoB;EACpB,YAjBmB,MAAwB;GAC7C,IAAM,EAAE,WAAQ,YAAS;AACzB,GAAI,EAAO,MAAM,GAAM,MAAM,EAAO,OAAO,GAAM,MAC/C,GAAU,MAAU;IAClB,IAAM,IAAW,EAAM,QAAQ,EAAO,GAAG,EACnC,IAAW,EAAM,QAAQ,EAAK,GAAG,EACjC,IAAW,EAAU,GAAO,GAAU,EAAS;AAErD,WADA,EAAa;KAAE,OAAO;KAAU;KAAU;KAAU,CAAC,EAC9C;KACP;;EAWS,EADX,kBAAA,cAAC,GAAD,EAAiB,OAAO,GAAmC,EAA3B,EAA2B,CAChD;;AAIjB,EAAa,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: 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"}

package/dist/components/sortable/index.js

@@ -1,14 +1,14 @@
-import { __exportAll as e } from "../../_virtual/_rolldown/runtime.js";
-import { SortableHandle as t } from "./SortableHandle.js";
-import { SortableItem as n } from "./SortableItem.js";
-import { SortableRoot as r } from "./SortableRoot.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SortableHandle } from "./SortableHandle.js";
+import { SortableItem } from "./SortableItem.js";
+import { SortableRoot } from "./SortableRoot.js";
 //#region src/components/sortable/index.ts
-var i = /* @__PURE__ */ e({
-	Handle: () => t,
-	Item: () => n,
-	Root: () => r
+var sortable_exports = /* @__PURE__ */ __exportAll({
+	Handle: () => SortableHandle,
+	Item: () => SortableItem,
+	Root: () => SortableRoot
 });
 //#endregion
-export { i as sortable_exports };
+export { sortable_exports };
 
 //# sourceMappingURL=index.js.map

package/dist/components/spacer/Spacer.js

@@ -1,12 +1,16 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/spacer/Spacer.tsx
-var t = e("div", { base: [
+/**
+* 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.
+*/
+var Spacer = styled("div", { base: [
 	"flex-1",
 	"justify-self-stretch",
 	"self-stretch"
 ] });
-t.displayName = "Spacer";
+Spacer.displayName = "Spacer";
 //#endregion
-export { t as Spacer };
+export { Spacer };
 
 //# sourceMappingURL=Spacer.js.map

package/dist/components/spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;AAMA,IAAa,IAAS,EAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;CAAe,EACzD,CAAC;AAEF,EAAO,cAAc"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,OAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;CAAe,EACzD,CAAC;AAEF,OAAO,cAAc"}

package/dist/components/stepper/Stepper.js

@@ -1,34 +1,35 @@
-import { StepperProvider as e } from "./stepper-context/StepperContext.js";
-import { StepperStepBack as t } from "./StepperStepBack.js";
-import { StepperStepForward as n } from "./StepperStepForward.js";
-import { StepperSteps as r } from "./StepperSteps.js";
-import i from "clsx";
-import * as a from "react";
-import o from "invariant";
+import { StepperProvider } from "./stepper-context/StepperContext.js";
+import { StepperStepBack } from "./StepperStepBack.js";
+import { StepperStepForward } from "./StepperStepForward.js";
+import { StepperSteps } from "./StepperSteps.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import invariant from "invariant";
 //#region src/components/stepper/Stepper.tsx
-var s = ({ children: t, stepCount: n, allowSkip: r, onComplete: s, onStepChange: c, direction: l = "horizontal", steps: u, hideLabels: d = !1, showCompletedIcons: f = !1, className: p }) => {
-	o(!(n && u), "`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");
-	let m = u?.length || n || 0;
-	return /* @__PURE__ */ a.createElement(e, {
-		stepCount: m,
-		allowSkip: r,
-		onComplete: s,
-		onStepChange: n ? c : void 0,
-		direction: l,
-		steps: u || Array(m).fill(""),
-		hideLabels: d,
-		showCompletedIcons: f
-	}, /* @__PURE__ */ a.createElement("div", {
+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, {
+		stepCount: count,
+		allowSkip,
+		onComplete,
+		onStepChange: stepCount ? onStepChange : void 0,
+		direction,
+		steps: steps || Array(count).fill(""),
+		hideLabels,
+		showCompletedIcons
+	}, /* @__PURE__ */ React$1.createElement("div", {
 		"aria-label": "progress",
-		className: i("w-full", p)
-	}, t));
-}, c = Object.assign(s, {
-	StepBack: t,
-	StepForward: n,
-	Steps: r
+		className: clsx("w-full", className)
+	}, children));
+};
+var Stepper = Object.assign(StepperComponent, {
+	StepBack: StepperStepBack,
+	StepForward: StepperStepForward,
+	Steps: StepperSteps
 });
-s.displayName = "Stepper";
+StepperComponent.displayName = "Stepper";
 //#endregion
-export { c as Stepper };
+export { Stepper };
 
 //# sourceMappingURL=Stepper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport invariant from 'invariant'\nimport * as React from 'react'\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={clsx('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":";;;;;;;;AAUA,IAAM,KAAoB,EACxB,aACA,cACA,cACA,eACA,iBACA,eAAY,cACZ,UACA,gBAAa,IACb,wBAAqB,IACrB,mBAC4C;AAC5C,GACE,EAAE,KAAa,IACf,8IACD;CAED,IAAM,IAAQ,GAAO,UAAU,KAAa;AAE5C,QACE,kBAAA,cAAC,GAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,IAAY,IAAe,KAAA;EAC9B;EACX,OAAO,KAAS,MAAM,EAAM,CAAC,KAAK,GAAG;EACzB;EACQ;EAKJ,EAHhB,kBAAA,cAAC,OAAD;EAAK,cAAW;EAAW,WAAW,EAAK,UAAU,EAAU;EAEzD,EADH,EACG,CACU;GAIT,IAAU,OAAO,OAAO,GAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,EAAiB,cAAc"}
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport invariant from 'invariant'\nimport * as React from 'react'\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={clsx('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":";;;;;;;;AAUA,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,KAAK,UAAU,UAAU;EAEzD,EADH,SACG,CACU;;AAItB,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,iBAAiB,cAAc"}

package/dist/components/stepper/StepperStepBack.js

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

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,KAAmB,EAC9B,UACA,aACA,GAAG,QAC8D;CACjE,IAAM,EAAE,eAAY,wBAAqB,GAAY;AACrD,QACE,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,MAAe;EACzB,SAAS;EAGF,EADN,KAAY,IAAQ,EAAW,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,wBAAA,cAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;EAGF,EADN,YAAY,QAAQ,WAAW,CACzB"}

package/dist/components/stepper/StepperStepBullet.js

@@ -1,6 +1,6 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/stepper/StepperStepBullet.tsx
-var t = e("div", {
+var StepperStepBullet = styled("div", {
 	base: [
 		"flex",
 		"relative",
@@ -9,6 +9,7 @@ var t = e("div", {
 		"items-center",
 		"size-8",
 		"rounded-[50%]",
+		"border-0",
 		"bg-grey-200",
 		"z-1",
 		"flex-none"
@@ -33,6 +34,6 @@ var t = e("div", {
 	} }
 });
 //#endregion
-export { t as StepperStepBullet };
+export { StepperStepBullet };
 
 //# sourceMappingURL=StepperStepBullet.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'bg-grey-200',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-grey-200', 'text-grey-700'],\n      active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n      viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n      completed: ['bg-primary-800', 'text-white'],\n      reviewed: ['bg-primary-900', 'text-white'],\n      success: ['bg-success', 'text-white']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,IAAoB,EAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,gBAAgB;EACzC,QAAQ;GAAC;GAAY;GAAY;GAAkB;GAAmB;EACtE,QAAQ;GAAC;GAAY;GAAY;GAAmB;GAAiB;EACrE,WAAW,CAAC,kBAAkB,aAAa;EAC3C,UAAU,CAAC,kBAAkB,aAAa;EAC1C,SAAS,CAAC,cAAc,aAAa;EACtC,EACF;CACF,CAAC"}
+{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-grey-200',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-grey-200', 'text-grey-700'],\n      active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n      viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n      completed: ['bg-primary-800', 'text-white'],\n      reviewed: ['bg-primary-900', 'text-white'],\n      success: ['bg-success', 'text-white']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,gBAAgB;EACzC,QAAQ;GAAC;GAAY;GAAY;GAAkB;GAAmB;EACtE,QAAQ;GAAC;GAAY;GAAY;GAAmB;GAAiB;EACrE,WAAW,CAAC,kBAAkB,aAAa;EAC3C,UAAU,CAAC,kBAAkB,aAAa;EAC1C,SAAS,CAAC,cAAc,aAAa;EACtC,EACF;CACF,CAAC"}

package/dist/components/stepper/StepperStepContainer.js

@@ -1,6 +1,6 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/stepper/StepperStepContainer.tsx
-var t = e("div", {
+var StepperStepContainer = styled("div", {
 	base: [
 		"flex",
 		"relative",
@@ -49,7 +49,7 @@ var t = e("div", {
 	},
 	compoundVariants: [
 		{
-			canInteract: !0,
+			canInteract: true,
 			status: "completed",
 			class: [
 				"focus-visible:first:outline-2",
@@ -62,7 +62,7 @@ var t = e("div", {
 			]
 		},
 		{
-			canInteract: !0,
+			canInteract: true,
 			status: "active",
 			class: [
 				"focus-visible:first:outline-2",
@@ -75,7 +75,7 @@ var t = e("div", {
 			]
 		},
 		{
-			canInteract: !0,
+			canInteract: true,
 			status: "viewed",
 			class: [
 				"focus-visible:first:outline-2!",
@@ -88,7 +88,7 @@ var t = e("div", {
 			]
 		},
 		{
-			canInteract: !0,
+			canInteract: true,
 			status: "reviewed",
 			class: [
 				"focus-visible:first:outline-2!",
@@ -100,6 +100,6 @@ var t = e("div", {
 	]
 });
 //#endregion
-export { t as StepperStepContainer };
+export { StepperStepContainer };
 
 //# sourceMappingURL=StepperStepContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,IAAuB,EAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,EAAE,EACT;EACD,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,SAAS,CAAC,6BAA6B;GACvC,QAAQ,CAAC,gCAAgC;GACzC,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,6BAA6B;GACvC;EACD,QAAQ;GACN,WAAW,EAAE;GACb,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,UAAU,EAAE;GACb;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACF;CACF,CAAC"}
+{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,EAAE,EACT;EACD,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,SAAS,CAAC,6BAA6B;GACvC,QAAQ,CAAC,gCAAgC;GACzC,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,6BAA6B;GACvC;EACD,QAAQ;GACN,WAAW,EAAE;GACb,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,UAAU,EAAE;GACb;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACF;CACF,CAAC"}

package/dist/components/stepper/StepperStepForward.js

@@ -1,20 +1,21 @@
-import { Button as e } from "../button/Button.js";
-import { useStepper as t } from "./stepper-context/StepperContext.js";
-import * as n from "react";
+import { Button } from "../button/Button.js";
+import { useStepper } from "./stepper-context/StepperContext.js";
+import * as React$1 from "react";
 //#region src/components/stepper/StepperStepForward.tsx
-var r = ({ label: r, children: i, onClick: a, ...o }) => {
-	let { goToNextStep: s, activeStep: c } = t(), l = () => {
-		if (a) return a(() => s?.());
-		s?.();
+var StepperStepForward = ({ label, children, onClick, ...rest }) => {
+	const { goToNextStep, activeStep } = useStepper();
+	const handleClick = () => {
+		if (onClick) return onClick(() => goToNextStep?.());
+		goToNextStep?.();
 	};
-	return /* @__PURE__ */ n.createElement(e, {
+	return /* @__PURE__ */ React$1.createElement(Button, {
 		size: "sm",
-		...o,
-		onClick: l,
+		...rest,
+		onClick: handleClick,
 		className: "ml-auto"
-	}, i || r?.(c));
+	}, children || label?.(activeStep));
 };
 //#endregion
-export { r as StepperStepForward };
+export { StepperStepForward };
 
 //# sourceMappingURL=StepperStepForward.js.map

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,KAAsB,EACjC,UACA,aACA,YACA,GAAG,QACuE;CAC1E,IAAM,EAAE,iBAAc,kBAAe,GAAY,EAE3C,UAAoB;AACxB,MAAI,EACF,QAAO,QAAc,KAAgB,CAAC;AAExC,OAAgB;;AAGlB,QACE,kBAAA,cAAC,GAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;EAEnD,EADN,KAAY,IAAQ,EAAW,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,wBAAA,cAAC,QAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;EAEnD,EADN,YAAY,QAAQ,WAAW,CACzB"}

package/dist/components/stepper/StepperStepLabel.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
 //#region src/components/stepper/StepperStepLabel.tsx
-var n = e(t, {
+var StepperStepLabel = styled(Text, {
 	base: ["font-semibold"],
 	variants: {
 		direction: {
@@ -19,6 +19,6 @@ var n = e(t, {
 	}
 });
 //#endregion
-export { n as StepperStepLabel };
+export { StepperStepLabel };
 
 //# sourceMappingURL=StepperStepLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAIA,IAAa,IAAmB,EAAO,GAAM;CAC3C,MAAM,CAAC,gBAAgB;CACvB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,YAAY;GAC/B,YAAY,CAAC,QAAQ,cAAc;GACpC;EACD,QAAQ;GACN,SAAS,CAAC,eAAe,gBAAgB;GACzC,QAAQ,CAAC,mBAAmB;GAC5B,QAAQ,CAAC,iBAAiB;GAC1B,WAAW,CAAC,mBAAmB;GAC/B,SAAS,CAAC,eAAe;GACzB,UAAU,EAAE;GACb;EACF;CACF,CAAC"}
+{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,gBAAgB;CACvB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,YAAY;GAC/B,YAAY,CAAC,QAAQ,cAAc;GACpC;EACD,QAAQ;GACN,SAAS,CAAC,eAAe,gBAAgB;GACzC,QAAQ,CAAC,mBAAmB;GAC5B,QAAQ,CAAC,iBAAiB;GAC1B,WAAW,CAAC,mBAAmB;GAC/B,SAAS,CAAC,eAAe;GACzB,UAAU,EAAE;GACb;EACF;CACF,CAAC"}

package/dist/components/stepper/StepperSteps.js

@@ -1,58 +1,72 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { useStepper as n } from "./stepper-context/StepperContext.js";
-import { StepperStepBullet as r } from "./StepperStepBullet.js";
-import { StepperStepContainer as i } from "./StepperStepContainer.js";
-import { StepperStepLabel as a } from "./StepperStepLabel.js";
-import { Status as o } from "./types.js";
-import * as s from "react";
-import { Ok as c } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { useStepper } from "./stepper-context/StepperContext.js";
+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 { Ok } from "@atom-learning/icons";
 //#region src/components/stepper/StepperSteps.tsx
-var l = e("div", {
+var StepperStepsContainer = styled("div", {
 	base: ["flex", "justify-between"],
 	variants: { direction: {
 		vertical: ["flex-col"],
 		horizontal: ["flex-row"]
 	} }
-}), u = ({ className: e }) => {
-	let { steps: u, goToStep: d, activeStep: f, viewedSteps: p, allowSkip: m, direction: h, hideLabels: g, completedSteps: _, showCompletedIcons: v } = n(), y = (e) => {
-		let t = u[e];
-		return t.status ? t.status : _.length === u.length ? o.SUCCESS : f === e && _.includes(f) ? o.REVIEWED : f === e ? o.ACTIVE : _.includes(e) ? o.COMPLETED : p.includes(e) ? o.VIEWED : o.DEFAULT;
-	}, b = (e) => {
-		let t = u[e]?.status;
-		return _.length === u.length || t === o.SUCCESS ? o.SUCCESS : t === o.COMPLETED || e < Math.max(...p) ? o.ACTIVE : t === o.VIEWED ? o.VIEWED : o.DEFAULT;
+});
+var StepperSteps = ({ className }) => {
+	const { steps, goToStep, activeStep, viewedSteps, allowSkip, direction, hideLabels, completedSteps, showCompletedIcons } = useStepper();
+	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) return Status.ACTIVE;
+		if (completedSteps.includes(index)) return Status.COMPLETED;
+		if (viewedSteps.includes(index)) return Status.VIEWED;
+		return Status.DEFAULT;
 	};
-	return /* @__PURE__ */ s.createElement(l, {
-		className: e,
-		direction: h
-	}, u.map((e, n) => {
-		let l = y(n), _ = b(n);
-		return /* @__PURE__ */ s.createElement(i, {
+	const getSeparatorStatus = (index) => {
+		const bulletStatus = steps[index]?.status;
+		if (completedSteps.length === steps.length) return Status.SUCCESS;
+		if (bulletStatus === Status.SUCCESS) return Status.SUCCESS;
+		if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) return Status.ACTIVE;
+		if (bulletStatus === Status.VIEWED) return Status.VIEWED;
+		return Status.DEFAULT;
+	};
+	return /* @__PURE__ */ React$1.createElement(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_${n}`,
-			direction: h,
-			separator: _,
-			status: l,
-			style: { "--steps": u.length || 0 },
-			className: h === "horizontal" ? "w-[calc(100%/var(--steps))]" : "h-[calc(100%/var(--steps))]",
-			canInteract: m
-		}, /* @__PURE__ */ s.createElement(r, {
-			as: m ? "button" : "div",
-			onClick: () => m && p.includes(n) ? d?.(n) : void 0,
-			status: l,
-			"aria-current": n === f ? "step" : void 0,
-			"aria-label": e.label ? "" : `step ${n + 1}`,
-			"aria-labelledby": e.label ? `step-${n}` : void 0,
-			className: m && p.includes(n) ? "cursor-pointer" : "cursor-auto"
-		}, e.status === o.SUCCESS || v && l === o.COMPLETED ? /* @__PURE__ */ s.createElement(t, { is: c }) : n + 1), e.label && !g && /* @__PURE__ */ s.createElement(a, {
+			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-${n}`,
-			direction: h,
-			status: l
-		}, e.label));
+			id: `step-${index}`,
+			direction,
+			status: bulletStatus
+		}, step.label));
 	}));
 };
 //#endregion
-export { u as StepperSteps };
+export { StepperSteps };
 
 //# sourceMappingURL=StepperSteps.js.map

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,IAAwB,EAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,kBAAkB;CACjC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,WAAW;EACtB,YAAY,CAAC,WAAW;EACzB,EACF;CACF,CAAC,EAEW,KAAgB,EAAE,mBAAoC;CACjE,IAAM,EACJ,UACA,aACA,eACA,gBACA,cACA,cACA,eACA,mBACA,0BACE,GAAY,EAEV,KAAmB,MAAkB;EACzC,IAAM,IAAe,EAAM;AAS3B,SAPI,EAAa,SAAe,EAAa,SACzC,EAAe,WAAW,EAAM,SAAe,EAAO,UACtD,MAAe,KAAS,EAAe,SAAS,EAAW,GACtD,EAAO,WACZ,MAAe,IAAc,EAAO,SACpC,EAAe,SAAS,EAAM,GAAS,EAAO,YAC9C,EAAY,SAAS,EAAM,GAAS,EAAO,SACxC,EAAO;IAGV,KAAsB,MAAkB;EAC5C,IAAM,IAAe,EAAM,IAAQ;AAkBnC,SAhBI,EAAe,WAAW,EAAM,UAIhC,MAAiB,EAAO,UACnB,EAAO,UAGZ,MAAiB,EAAO,aAAa,IAAQ,KAAK,IAAI,GAAG,EAAY,GAChE,EAAO,SAGZ,MAAiB,EAAO,SACnB,EAAO,SAGT,EAAO;;AAGhB,QACE,kBAAA,cAAC,GAAD;EAAkC;EAAsB;EA0DhC,EAzDrB,EAAM,KAAK,GAAM,MAAU;EAC1B,IAAM,IAAe,EAAgB,EAAM,EACrC,IAAkB,EAAmB,EAAM;AAEjD,SACE,kBAAA,cAAC,GAAD;GACE,UAAU;GACV,KAAK,QAAQ;GACF;GACX,WAAW;GACX,QAAQ;GACR,OAAO,EAAE,WAAW,EAAM,UAAU,GAAG;GACvC,WACE,MAAc,eACV,gCACA;GAEN,aAAa;GAqCQ,EAnCrB,kBAAA,cAAC,GAAD;GACE,IAAI,IAAY,WAAW;GAC3B,eACE,KAAa,EAAY,SAAS,EAAM,GACpC,IAAW,EAAM,GACjB,KAAA;GAEN,QAAQ;GACR,gBAAc,MAAU,IAAa,SAAS,KAAA;GAC9C,cAAa,EAAK,QAA8B,KAAtB,QAAQ,IAAQ;GAC1C,mBAAiB,EAAK,QAAQ,QAAQ,MAAU,KAAA;GAChD,WACE,KAAa,EAAY,SAAS,EAAM,GACpC,mBACA;GASY,EANjB,EAAK,WAAW,EAAO,WACvB,KAAsB,MAAiB,EAAO,YAC7C,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAM,CAAA,GAEhB,IAAQ,EAEQ,EAEnB,EAAK,SAAS,CAAC,KACd,kBAAA,cAAC,GAAD;GACE,IAAG;GACH,IAAI,QAAQ;GACD;GACX,QAAQ;GAGS,EADhB,EAAK,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,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"}