@atom-learning/components 6.4.2 → 6.5.1

package/dist/components/stepper/Stepper.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","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"],"names":["StepperComponent","children","stepCount","allowSkip","onComplete","onStepChange","direction","steps","hideLabels","showCompletedIcons","className","invariant","count","React","StepperProvider","clsx","Stepper","StepperStepBack","StepperStepForward","StepperSteps"],"mappings":"gTAUA,MAAMA,EAAmB,CAAC,CACxB,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,aACZ,MAAAC,EACA,WAAAC,EAAa,GACb,mBAAAC,EAAqB,GACrB,UAAAC,CACF,IAA8C,CAC5CC,EACE,EAAET,GAAaK,GACf,6IACF,EAEA,MAAMK,GAAQL,GAAA,KAAAA,OAAAA,EAAO,SAAUL,GAAa,EAE5C,OACEW,EAAA,cAACC,EAAA,CACC,UAAWF,EACX,UAAWT,EACX,WAAYC,EACZ,aAAcF,EAAYG,EAAe,OACzC,UAAWC,EACX,MAAOC,GAAS,MAAMK,CAAK,EAAE,KAAK,EAAE,EACpC,WAAYJ,EACZ,mBAAoBC,CAAAA,EAEpBI,EAAA,cAAC,MAAI,CAAA,aAAW,WAAW,UAAWE,EAAK,SAAUL,CAAS,CAAA,EAC3DT,CACH,CACF,CAEJ,EAEae,EAAU,OAAO,OAAOhB,EAAkB,CACrD,SAAUiB,EACV,YAAaC,EACb,MAAOC,CACT,CAAC,EAEDnB,EAAiB,YAAc"}
+{"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"}

package/dist/components/stepper/StepperStepBack.js

@@ -1,2 +1,18 @@
-import*as i from"react";import{Button as n}from"../button/Button.js";import{useStepper as a}from"./stepper-context/StepperContext.js";const l=({label:e,children:t,...r})=>{const{activeStep:o,goToPreviousStep:p}=a();return i.createElement(n,{size:"sm",appearance:"outline",...r,disabled:o===0,onClick:p},t||(e==null?void 0:e(o)))};export{l as StepperStepBack};
-//# sourceMappingURL=StepperStepBack.js.map
+import { Button as e } from "../button/Button.js";
+import { useStepper as t } from "./stepper-context/StepperContext.js";
+import * as n 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, {
+		size: "sm",
+		appearance: "outline",
+		...a,
+		disabled: o === 0,
+		onClick: s
+	}, i || r?.(o));
+};
+//#endregion
+export { r as StepperStepBack };
+
+//# sourceMappingURL=StepperStepBack.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBack.js","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"],"names":["StepperStepBack","label","children","rest","activeStep","goToPreviousStep","useStepper","React","Button"],"mappings":"sIAMa,MAAAA,EAAkB,CAAC,CAC9B,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAmE,CACjE,KAAM,CAAE,WAAAC,EAAY,iBAAAC,CAAiB,EAAIC,IACzC,OACEC,EAAA,cAACC,EAAA,CACC,KAAK,KACL,WAAW,UACV,GAAGL,EACJ,SAAUC,IAAe,EACzB,QAASC,CAAAA,EAERH,IAAYD,GAAA,KAAA,OAAAA,EAAQG,CAAAA,EACvB,CAEJ"}
+{"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"}

package/dist/components/stepper/StepperStepBullet.js

@@ -1,2 +1,38 @@
-import{styled as e}from"../../styled.js";const t=e("div",{base:["flex","relative","p-2","justify-center","items-center","size-8","rounded-[50%]","bg-grey-200","z-1","flex-none"],variants:{status:{default:["bg-grey-200","text-grey-700"],active:["bg-white","border-2","border-current","text-primary-900"],viewed:["bg-white","border-2","border-grey-600","text-grey-1000"],completed:["bg-primary-800","text-white"],reviewed:["bg-primary-900","text-white"],success:["bg-success","text-white"]}}});export{t as StepperStepBullet};
-//# sourceMappingURL=StepperStepBullet.js.map
+import { styled as e } from "../../styled.js";
+//#region src/components/stepper/StepperStepBullet.tsx
+var t = e("div", {
+	base: [
+		"flex",
+		"relative",
+		"p-2",
+		"justify-center",
+		"items-center",
+		"size-8",
+		"rounded-[50%]",
+		"bg-grey-200",
+		"z-1",
+		"flex-none"
+	],
+	variants: { status: {
+		default: ["bg-grey-200", "text-grey-700"],
+		active: [
+			"bg-white",
+			"border-2",
+			"border-current",
+			"text-primary-900"
+		],
+		viewed: [
+			"bg-white",
+			"border-2",
+			"border-grey-600",
+			"text-grey-1000"
+		],
+		completed: ["bg-primary-800", "text-white"],
+		reviewed: ["bg-primary-900", "text-white"],
+		success: ["bg-success", "text-white"]
+	} }
+});
+//#endregion
+export { t as StepperStepBullet };
+
+//# sourceMappingURL=StepperStepBullet.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBullet.js","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"],"names":["StepperStepBullet","styled"],"mappings":"yCAEO,MAAMA,EAAoBC,EAAO,MAAO,CAC7C,KAAM,CACJ,OACA,WACA,MACA,iBACA,eACA,SACA,gBACA,cACA,MACA,WACF,EACA,SAAU,CACR,OAAQ,CACN,QAAS,CAAC,cAAe,eAAe,EACxC,OAAQ,CAAC,WAAY,WAAY,iBAAkB,kBAAkB,EACrE,OAAQ,CAAC,WAAY,WAAY,kBAAmB,gBAAgB,EACpE,UAAW,CAAC,iBAAkB,YAAY,EAC1C,SAAU,CAAC,iBAAkB,YAAY,EACzC,QAAS,CAAC,aAAc,YAAY,CACtC,CACF,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    '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"}

package/dist/components/stepper/StepperStepContainer.js

@@ -1,2 +1,105 @@
-import{styled as t}from"../../styled.js";const e=t("div",{base:["flex","relative","font-body","font-semibold","text-md","items-center","not-last:after:absolute","not-last:after:content-['']","focus-visible:outline-none"],variants:{canInteract:{true:[]},direction:{vertical:["flex-row","not-last:after:h-full","not-last:after:left-3.5","not-last:after:top-1/2","not-last:after:w-1","py-3"],horizontal:["flex-col","not-last:after:h-1","not-last:after:left-1/2","not-last:after:top-3.5","not-last:after:w-full","px-2"]},separator:{default:["not-last:after:bg-grey-200"],active:["not-last:after:bg-primary-800"],success:["not-last:after:bg-success"],viewed:["not-last:after:bg-grey-600"]},status:{completed:[],active:[],default:[],viewed:[],success:[],reviewed:[]}},compoundVariants:[{canInteract:!0,status:"completed",class:["focus-visible:first:outline-2","focus-visible:first:outline-offset-2","focus-visible:first:outline-primary-800","focus-visible:first:outline-solid","hover:first:bg-primary-900","hover:first:text-white!","hover:last:text-primary-900"]},{canInteract:!0,status:"active",class:["focus-visible:first:outline-2","focus-visible:first:outline-offset-2","focus-visible:first:outline-primary-800","focus-visible:first:outline-solid","hover:first:border-grey-800","hover:first:text-grey-1000","hover:last:text-grey-1000"]},{canInteract:!0,status:"viewed",class:["focus-visible:first:outline-2!","focus-visible:first:outline-offset-2!","focus-visible:first:outline-primary-800!","focus-visible:first:outline-solid!","hover:first:border-grey-800","hover:first:text-grey-1000","hover:last:text-grey-1000"]},{canInteract:!0,status:"reviewed",class:["focus-visible:first:outline-2!","focus-visible:first:outline-offset-2!","focus-visible:first:outline-primary-800!","focus-visible:first:outline-solid!"]}]});export{e as StepperStepContainer};
-//# sourceMappingURL=StepperStepContainer.js.map
+import { styled as e } from "../../styled.js";
+//#region src/components/stepper/StepperStepContainer.tsx
+var t = e("div", {
+	base: [
+		"flex",
+		"relative",
+		"font-body",
+		"font-semibold",
+		"text-md",
+		"items-center",
+		"not-last:after:absolute",
+		"not-last:after:content-['']",
+		"focus-visible:outline-none"
+	],
+	variants: {
+		canInteract: { true: [] },
+		direction: {
+			vertical: [
+				"flex-row",
+				"not-last:after:h-full",
+				"not-last:after:left-3.5",
+				"not-last:after:top-1/2",
+				"not-last:after:w-1",
+				"py-3"
+			],
+			horizontal: [
+				"flex-col",
+				"not-last:after:h-1",
+				"not-last:after:left-1/2",
+				"not-last:after:top-3.5",
+				"not-last:after:w-full",
+				"px-2"
+			]
+		},
+		separator: {
+			default: ["not-last:after:bg-grey-200"],
+			active: ["not-last:after:bg-primary-800"],
+			success: ["not-last:after:bg-success"],
+			viewed: ["not-last:after:bg-grey-600"]
+		},
+		status: {
+			completed: [],
+			active: [],
+			default: [],
+			viewed: [],
+			success: [],
+			reviewed: []
+		}
+	},
+	compoundVariants: [
+		{
+			canInteract: !0,
+			status: "completed",
+			class: [
+				"focus-visible:first:outline-2",
+				"focus-visible:first:outline-offset-2",
+				"focus-visible:first:outline-primary-800",
+				"focus-visible:first:outline-solid",
+				"hover:first:bg-primary-900",
+				"hover:first:text-white!",
+				"hover:last:text-primary-900"
+			]
+		},
+		{
+			canInteract: !0,
+			status: "active",
+			class: [
+				"focus-visible:first:outline-2",
+				"focus-visible:first:outline-offset-2",
+				"focus-visible:first:outline-primary-800",
+				"focus-visible:first:outline-solid",
+				"hover:first:border-grey-800",
+				"hover:first:text-grey-1000",
+				"hover:last:text-grey-1000"
+			]
+		},
+		{
+			canInteract: !0,
+			status: "viewed",
+			class: [
+				"focus-visible:first:outline-2!",
+				"focus-visible:first:outline-offset-2!",
+				"focus-visible:first:outline-primary-800!",
+				"focus-visible:first:outline-solid!",
+				"hover:first:border-grey-800",
+				"hover:first:text-grey-1000",
+				"hover:last:text-grey-1000"
+			]
+		},
+		{
+			canInteract: !0,
+			status: "reviewed",
+			class: [
+				"focus-visible:first:outline-2!",
+				"focus-visible:first:outline-offset-2!",
+				"focus-visible:first:outline-primary-800!",
+				"focus-visible:first:outline-solid!"
+			]
+		}
+	]
+});
+//#endregion
+export { t as StepperStepContainer };
+
+//# sourceMappingURL=StepperStepContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","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"],"names":["StepperStepContainer","styled"],"mappings":"yCAEO,MAAMA,EAAuBC,EAAO,MAAO,CAChD,KAAM,CACJ,OACA,WACA,YACA,gBACA,UACA,eACA,0BACA,8BACA,4BACF,EACA,SAAU,CACR,YAAa,CACX,KAAM,CAAA,CACR,EACA,UAAW,CACT,SAAU,CACR,WACA,wBACA,0BACA,yBACA,qBACA,MACF,EACA,WAAY,CACV,WACA,qBACA,0BACA,yBACA,wBACA,MACF,CACF,EACA,UAAW,CACT,QAAS,CAAC,4BAA4B,EACtC,OAAQ,CAAC,+BAA+B,EACxC,QAAS,CAAC,2BAA2B,EACrC,OAAQ,CAAC,4BAA4B,CACvC,EACA,OAAQ,CACN,UAAW,CACX,EAAA,OAAQ,CACR,EAAA,QAAS,CAAC,EACV,OAAQ,CACR,EAAA,QAAS,CAAA,EACT,SAAU,CAAA,CACZ,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,OAAQ,YACR,MAAO,CACL,gCACA,uCACA,0CACA,oCACA,6BACA,0BACA,6BACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,MAAO,CACL,gCACA,uCACA,0CACA,oCACA,8BACA,6BACA,2BACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,MAAO,CACL,iCACA,wCACA,2CACA,qCACA,8BACA,6BACA,2BACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,WACR,MAAO,CACL,iCACA,wCACA,2CACA,oCACF,CACF,CACF,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,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"}

package/dist/components/stepper/StepperStepForward.js

@@ -1,2 +1,20 @@
-import*as n from"react";import{Button as p}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const a=({label:t,children:r,onClick:o,...l})=>{const{goToNextStep:e,activeStep:i}=m();return n.createElement(p,{size:"sm",...l,onClick:()=>{if(o)return o(()=>e==null?void 0:e());e==null||e()},className:"ml-auto"},r||(t==null?void 0:t(i)))};export{a as StepperStepForward};
-//# sourceMappingURL=StepperStepForward.js.map
+import { Button as e } from "../button/Button.js";
+import { useStepper as t } from "./stepper-context/StepperContext.js";
+import * as n 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?.();
+	};
+	return /* @__PURE__ */ n.createElement(e, {
+		size: "sm",
+		...o,
+		onClick: l,
+		className: "ml-auto"
+	}, i || r?.(c));
+};
+//#endregion
+export { r as StepperStepForward };
+
+//# sourceMappingURL=StepperStepForward.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepForward.js","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"],"names":["StepperStepForward","label","children","onClick","rest","goToNextStep","activeStep","useStepper","React","Button"],"mappings":"sIAMa,MAAAA,EAAqB,CAAC,CACjC,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAA4E,CAC1E,KAAM,CAAE,aAAAC,EAAc,WAAAC,CAAW,EAAIC,EAAAA,EASrC,OACEC,EAAA,cAACC,EAAA,CAAO,KAAK,KAAM,GAAGL,EAAM,QARV,IAAM,CACxB,GAAID,EACF,OAAOA,EAAQ,IAAME,GAAA,KAAAA,OAAAA,EAAgB,CAAA,EAEvCA,GAAA,MAAAA,EACF,CAAA,EAGoD,UAAU,SAAA,EACzDH,IAAYD,GAAA,KAAAA,OAAAA,EAAQK,GACvB,CAEJ"}
+{"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"}

package/dist/components/stepper/StepperStepLabel.js

@@ -1,2 +1,24 @@
-import{styled as t}from"../../styled.js";import{Text as e}from"../text/Text.js";const r=t(e,{base:["font-semibold"],variants:{direction:{vertical:["ml-3","text-left"],horizontal:["mt-3","text-center"]},status:{default:["font-normal","text-grey-700"],active:["text-primary-900"],viewed:["text-grey-1000"],completed:["text-primary-800"],success:["text-success"],reviewed:[]}}});export{r as StepperStepLabel};
-//# sourceMappingURL=StepperStepLabel.js.map
+import { styled as e } from "../../styled.js";
+import { Text as t } from "../text/Text.js";
+//#region src/components/stepper/StepperStepLabel.tsx
+var n = e(t, {
+	base: ["font-semibold"],
+	variants: {
+		direction: {
+			vertical: ["ml-3", "text-left"],
+			horizontal: ["mt-3", "text-center"]
+		},
+		status: {
+			default: ["font-normal", "text-grey-700"],
+			active: ["text-primary-900"],
+			viewed: ["text-grey-1000"],
+			completed: ["text-primary-800"],
+			success: ["text-success"],
+			reviewed: []
+		}
+	}
+});
+//#endregion
+export { n as StepperStepLabel };
+
+//# sourceMappingURL=StepperStepLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepLabel.js","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"],"names":["StepperStepLabel","styled","Text"],"mappings":"gFAIa,MAAAA,EAAmBC,EAAOC,EAAM,CAC3C,KAAM,CAAC,eAAe,EACtB,SAAU,CACR,UAAW,CACT,SAAU,CAAC,OAAQ,WAAW,EAC9B,WAAY,CAAC,OAAQ,aAAa,CACpC,EACA,OAAQ,CACN,QAAS,CAAC,cAAe,eAAe,EACxC,OAAQ,CAAC,kBAAkB,EAC3B,OAAQ,CAAC,gBAAgB,EACzB,UAAW,CAAC,kBAAkB,EAC9B,QAAS,CAAC,cAAc,EACxB,SAAU,CACZ,CAAA,CACF,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,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"}

package/dist/components/stepper/StepperSteps.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"StepperSteps.js","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"],"names":["StepperStepsContainer","styled","StepperSteps","className","steps","goToStep","activeStep","viewedSteps","allowSkip","direction","hideLabels","completedSteps","showCompletedIcons","useStepper","getBulletStatus","index","activeBullet","Status","getSeparatorStatus","_a","bulletStatus","React","step","separatorStatus","StepperStepContainer","StepperStepBullet","Icon","Ok","StepperStepLabel"],"mappings":"4aAYA,MAAMA,EAAwBC,EAAO,MAAO,CAC1C,KAAM,CAAC,OAAQ,iBAAiB,EAChC,SAAU,CACR,UAAW,CACT,SAAU,CAAC,UAAU,EACrB,WAAY,CAAC,UAAU,CACzB,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,UAAAC,CAAU,IAA0B,CACjE,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,eAAAC,EACA,mBAAAC,CACF,EAAIC,EAAW,EAETC,EAAmBC,GAAkB,CACzC,MAAMC,EAAeZ,EAAMW,CAAK,EAEhC,OAAIC,EAAa,OAAeA,EAAa,OACzCL,EAAe,SAAWP,EAAM,OAAea,EAAO,QACtDX,IAAeS,GAASJ,EAAe,SAASL,CAAU,EACrDW,EAAO,SACZX,IAAeS,EAAcE,EAAO,OACpCN,EAAe,SAASI,CAAK,EAAUE,EAAO,UAC9CV,EAAY,SAASQ,CAAK,EAAUE,EAAO,OACxCA,EAAO,OAChB,EAEMC,EAAsBH,GAAkB,CAhDhD,IAAAI,EAiDI,MAAMC,GAAeD,EAAAf,EAAMW,CAAK,IAAX,KAAAI,OAAAA,EAAc,OAEnC,OAAIR,EAAe,SAAWP,EAAM,OAC3Ba,EAAO,QAGZG,IAAiBH,EAAO,QACnBA,EAAO,QAGZG,IAAiBH,EAAO,WAAaF,EAAQ,KAAK,IAAI,GAAGR,CAAW,EAC/DU,EAAO,OAGZG,IAAiBH,EAAO,OACnBA,EAAO,OAGTA,EAAO,OAChB,EAEA,OACEI,EAAA,cAACrB,EAAA,CAAsB,UAAWG,EAAW,UAAWM,CAAAA,EACrDL,EAAM,IAAI,CAACkB,EAAMP,IAAU,CAC1B,MAAMK,EAAeN,EAAgBC,CAAK,EACpCQ,EAAkBL,EAAmBH,CAAK,EAEhD,OACEM,EAAA,cAACG,EAAA,CACC,SAAU,EACV,IAAK,QAAQT,CAAK,GAClB,UAAWN,EACX,UAAWc,EACX,OAAQH,EACR,MAAO,CAAE,UAAWhB,EAAM,QAAU,CAAE,EACtC,UACEK,IAAc,aACV,8BACA,8BAEN,YAAaD,CAEba,EAAAA,EAAA,cAACI,EAAA,CACC,GAAIjB,EAAY,SAAW,MAC3B,QAAS,IACPA,GAAaD,EAAY,SAASQ,CAAK,EACnCV,GAAA,KAAA,OAAAA,EAAWU,CACX,EAAA,OAEN,OAAQK,EACR,eAAcL,IAAUT,EAAa,OAAS,OAC9C,aAAagB,EAAK,MAA8B,GAAtB,QAAQP,EAAQ,CAAC,GAC3C,kBAAiBO,EAAK,MAAQ,QAAQP,CAAK,GAAK,OAChD,UACEP,GAAaD,EAAY,SAASQ,CAAK,EACnC,iBACA,eAGLO,EAAK,SAAWL,EAAO,SACvBL,GAAsBQ,IAAiBH,EAAO,UAC7CI,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAI,EAEdZ,EAAQ,CAEZ,EAECO,EAAK,OAAS,CAACZ,GACdW,EAAA,cAACO,EAAA,CACC,GAAG,OACH,GAAI,QAAQb,CAAK,GACjB,UAAWN,EACX,OAAQW,GAEPE,EAAK,KACR,CAEJ,CAEJ,CAAC,CACH,CAEJ"}
+{"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"}

package/dist/components/stepper/stepper-context/StepperContext.js

@@ -1,2 +1,48 @@
-import*as o from"react";const d=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1,completedSteps:[],showCompletedIcons:!1}),b=({children:s,stepCount:i,allowSkip:S,onComplete:p,onStepChange:l,direction:a,steps:h,hideLabels:v,showCompletedIcons:w})=>{const[e,r]=o.useState(0),[m,g]=o.useState([0]),[C,f]=o.useState([]),c=!i;o.useEffect(()=>{g(t=>t.includes(e)?t:[...t,e]),l==null||l(e)},[e,l]);const T=()=>{const t=p&&e===i-1,u=e<i-1;if((p||u)&&f(n=>n.includes(e)?n:[...n,e]),t)return p==null?void 0:p();if(u)return r(n=>n+1)},x=()=>{r(t=>t-1)},P=t=>{r(t)};return o.createElement(d.Provider,{value:{steps:h||Array(i).fill(""),goToPreviousStep:c?void 0:x,goToNextStep:c?void 0:T,goToStep:c?void 0:P,activeStep:e,viewedSteps:m,completedSteps:C,allowSkip:S,direction:a,hideLabels:v,showCompletedIcons:w}},s)},E=()=>{const s=o.useContext(d);if(!s)throw new Error("Ensure that you wrap any components with the root component Stepper");return s};export{b as StepperProvider,E as useStepper};
-//# sourceMappingURL=StepperContext.js.map
+import * as e from "react";
+//#region src/components/stepper/stepper-context/StepperContext.tsx
+var t = e.createContext({
+	steps: [],
+	goToPreviousStep: () => null,
+	goToNextStep: () => null,
+	goToStep: () => null,
+	activeStep: 0,
+	viewedSteps: [],
+	allowSkip: !1,
+	direction: "horizontal",
+	hideLabels: !1,
+	completedSteps: [],
+	showCompletedIcons: !1
+}), n = ({ children: n, stepCount: r, allowSkip: i, onComplete: a, onStepChange: o, direction: s, steps: c, hideLabels: l, showCompletedIcons: u }) => {
+	let [d, f] = e.useState(0), [p, m] = e.useState([0]), [h, g] = e.useState([]), _ = !r;
+	return e.useEffect(() => {
+		m((e) => e.includes(d) ? e : [...e, d]), o?.(d);
+	}, [d, o]), /* @__PURE__ */ e.createElement(t.Provider, { value: {
+		steps: c || Array(r).fill(""),
+		goToPreviousStep: _ ? void 0 : () => {
+			f((e) => e - 1);
+		},
+		goToNextStep: _ ? void 0 : () => {
+			let e = a && d === r - 1, t = d < r - 1;
+			if ((a || t) && g((e) => e.includes(d) ? e : [...e, d]), e) return a?.();
+			if (t) return f((e) => e + 1);
+		},
+		goToStep: _ ? void 0 : (e) => {
+			f(e);
+		},
+		activeStep: d,
+		viewedSteps: p,
+		completedSteps: h,
+		allowSkip: i,
+		direction: s,
+		hideLabels: l,
+		showCompletedIcons: u
+	} }, n);
+}, r = () => {
+	let n = e.useContext(t);
+	if (!n) throw Error("Ensure that you wrap any components with the root component Stepper");
+	return n;
+};
+//#endregion
+export { n as StepperProvider, r as useStepper };
+
+//# sourceMappingURL=StepperContext.js.map

package/dist/components/stepper/stepper-context/StepperContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperContext.js","sources":["../../../../src/components/stepper/stepper-context/StepperContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Context, StepperProviderProps } from '../types'\n\nconst StepperContext = React.createContext<Context>({\n  steps: [],\n  goToPreviousStep: () => null,\n  goToNextStep: () => null,\n  goToStep: () => null,\n  activeStep: 0,\n  viewedSteps: [],\n  allowSkip: false,\n  direction: 'horizontal',\n  hideLabels: false,\n  completedSteps: [],\n  showCompletedIcons: false\n})\n\nexport const StepperProvider = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction,\n  steps,\n  hideLabels,\n  showCompletedIcons\n}: React.PropsWithChildren<StepperProviderProps>) => {\n  const [activeStep, setActiveStep] = React.useState(0)\n\n  const [viewedSteps, setviewedSteps] = React.useState<number[]>([0])\n  const [completedSteps, setCompletedSteps] = React.useState<number[]>([])\n\n  const isControlled = !stepCount\n\n  React.useEffect(() => {\n    setviewedSteps((prev) =>\n      prev.includes(activeStep) ? prev : [...prev, activeStep]\n    )\n\n    onStepChange?.(activeStep)\n  }, [activeStep, onStepChange])\n\n  const goToNextStep = () => {\n    const isCompleted = onComplete && activeStep === stepCount - 1\n    const isNextStep = activeStep < stepCount - 1\n\n    if (onComplete || isNextStep) {\n      setCompletedSteps((prev) =>\n        prev.includes(activeStep) ? prev : [...prev, activeStep]\n      )\n    }\n\n    if (isCompleted) {\n      return onComplete?.()\n    }\n    if (isNextStep) {\n      return setActiveStep((current) => current + 1)\n    }\n  }\n\n  const goToPreviousStep = () => {\n    setActiveStep((current) => current - 1)\n  }\n\n  const goToStep = (index: number) => {\n    setActiveStep(index)\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        steps: steps || Array(stepCount).fill(''),\n        goToPreviousStep: isControlled ? undefined : goToPreviousStep,\n        goToNextStep: isControlled ? undefined : goToNextStep,\n        goToStep: isControlled ? undefined : goToStep,\n        activeStep,\n        viewedSteps,\n        completedSteps,\n        allowSkip,\n        direction,\n        hideLabels,\n        showCompletedIcons\n      }}\n    >\n      {children}\n    </StepperContext.Provider>\n  )\n}\n\nexport const useStepper = (): Context => {\n  const context = React.useContext(StepperContext)\n  if (!context)\n    throw new Error(\n      'Ensure that you wrap any components with the root component Stepper'\n    )\n\n  return context\n}\n"],"names":["StepperContext","React","StepperProvider","children","stepCount","allowSkip","onComplete","onStepChange","direction","steps","hideLabels","showCompletedIcons","activeStep","setActiveStep","viewedSteps","setviewedSteps","completedSteps","setCompletedSteps","isControlled","prev","goToNextStep","isCompleted","isNextStep","current","goToPreviousStep","goToStep","index","useStepper","context"],"mappings":"wBAIA,MAAMA,EAAiBC,EAAM,cAAuB,CAClD,MAAO,CAAA,EACP,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,SAAU,IAAM,KAChB,WAAY,EACZ,YAAa,CAAC,EACd,UAAW,GACX,UAAW,aACX,WAAY,GACZ,eAAgB,CAAC,EACjB,mBAAoB,EACtB,CAAC,EAEYC,EAAkB,CAAC,CAC9B,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EACA,MAAAC,EACA,WAAAC,EACA,mBAAAC,CACF,IAAqD,CACnD,KAAM,CAACC,EAAYC,CAAa,EAAIZ,EAAM,SAAS,CAAC,EAE9C,CAACa,EAAaC,CAAc,EAAId,EAAM,SAAmB,CAAC,CAAC,CAAC,EAC5D,CAACe,EAAgBC,CAAiB,EAAIhB,EAAM,SAAmB,CAAE,CAAA,EAEjEiB,EAAe,CAACd,EAEtBH,EAAM,UAAU,IAAM,CACpBc,EAAgBI,GACdA,EAAK,SAASP,CAAU,EAAIO,EAAO,CAAC,GAAGA,EAAMP,CAAU,CACzD,EAEAL,GAAA,MAAAA,EAAeK,CAAAA,CACjB,EAAG,CAACA,EAAYL,CAAY,CAAC,EAE7B,MAAMa,EAAe,IAAM,CACzB,MAAMC,EAAcf,GAAcM,IAAeR,EAAY,EACvDkB,EAAaV,EAAaR,EAAY,EAQ5C,IANIE,GAAcgB,IAChBL,EAAmBE,GACjBA,EAAK,SAASP,CAAU,EAAIO,EAAO,CAAC,GAAGA,EAAMP,CAAU,CACzD,EAGES,EACF,OAAOf,GAAA,YAAAA,EAET,EAAA,GAAIgB,EACF,OAAOT,EAAeU,GAAYA,EAAU,CAAC,CAEjD,EAEMC,EAAmB,IAAM,CAC7BX,EAAeU,GAAYA,EAAU,CAAC,CACxC,EAEME,EAAYC,GAAkB,CAClCb,EAAca,CAAK,CACrB,EAEA,OACEzB,EAAA,cAACD,EAAe,SAAf,CACC,MAAO,CACL,MAAOS,GAAS,MAAML,CAAS,EAAE,KAAK,EAAE,EACxC,iBAAkBc,EAAe,OAAYM,EAC7C,aAAcN,EAAe,OAAYE,EACzC,SAAUF,EAAe,OAAYO,EACrC,WAAAb,EACA,YAAAE,EACA,eAAAE,EACA,UAAAX,EACA,UAAAG,EACA,WAAAE,EACA,mBAAAC,CACF,CAECR,EAAAA,CACH,CAEJ,EAEawB,EAAa,IAAe,CACvC,MAAMC,EAAU3B,EAAM,WAAWD,CAAc,EAC/C,GAAI,CAAC4B,EACH,MAAM,IAAI,MACR,qEACF,EAEF,OAAOA,CACT"}
+{"version":3,"file":"StepperContext.js","names":[],"sources":["../../../../src/components/stepper/stepper-context/StepperContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Context, StepperProviderProps } from '../types'\n\nconst StepperContext = React.createContext<Context>({\n  steps: [],\n  goToPreviousStep: () => null,\n  goToNextStep: () => null,\n  goToStep: () => null,\n  activeStep: 0,\n  viewedSteps: [],\n  allowSkip: false,\n  direction: 'horizontal',\n  hideLabels: false,\n  completedSteps: [],\n  showCompletedIcons: false\n})\n\nexport const StepperProvider = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction,\n  steps,\n  hideLabels,\n  showCompletedIcons\n}: React.PropsWithChildren<StepperProviderProps>) => {\n  const [activeStep, setActiveStep] = React.useState(0)\n\n  const [viewedSteps, setviewedSteps] = React.useState<number[]>([0])\n  const [completedSteps, setCompletedSteps] = React.useState<number[]>([])\n\n  const isControlled = !stepCount\n\n  React.useEffect(() => {\n    setviewedSteps((prev) =>\n      prev.includes(activeStep) ? prev : [...prev, activeStep]\n    )\n\n    onStepChange?.(activeStep)\n  }, [activeStep, onStepChange])\n\n  const goToNextStep = () => {\n    const isCompleted = onComplete && activeStep === stepCount - 1\n    const isNextStep = activeStep < stepCount - 1\n\n    if (onComplete || isNextStep) {\n      setCompletedSteps((prev) =>\n        prev.includes(activeStep) ? prev : [...prev, activeStep]\n      )\n    }\n\n    if (isCompleted) {\n      return onComplete?.()\n    }\n    if (isNextStep) {\n      return setActiveStep((current) => current + 1)\n    }\n  }\n\n  const goToPreviousStep = () => {\n    setActiveStep((current) => current - 1)\n  }\n\n  const goToStep = (index: number) => {\n    setActiveStep(index)\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        steps: steps || Array(stepCount).fill(''),\n        goToPreviousStep: isControlled ? undefined : goToPreviousStep,\n        goToNextStep: isControlled ? undefined : goToNextStep,\n        goToStep: isControlled ? undefined : goToStep,\n        activeStep,\n        viewedSteps,\n        completedSteps,\n        allowSkip,\n        direction,\n        hideLabels,\n        showCompletedIcons\n      }}\n    >\n      {children}\n    </StepperContext.Provider>\n  )\n}\n\nexport const useStepper = (): Context => {\n  const context = React.useContext(StepperContext)\n  if (!context)\n    throw new Error(\n      'Ensure that you wrap any components with the root component Stepper'\n    )\n\n  return context\n}\n"],"mappings":";;AAIA,IAAM,IAAiB,EAAM,cAAuB;CAClD,OAAO,EAAE;CACT,wBAAwB;CACxB,oBAAoB;CACpB,gBAAgB;CAChB,YAAY;CACZ,aAAa,EAAE;CACf,WAAW;CACX,WAAW;CACX,YAAY;CACZ,gBAAgB,EAAE;CAClB,oBAAoB;CACrB,CAAC,EAEW,KAAmB,EAC9B,aACA,cACA,cACA,eACA,iBACA,cACA,UACA,eACA,4BACmD;CACnD,IAAM,CAAC,GAAY,KAAiB,EAAM,SAAS,EAAE,EAE/C,CAAC,GAAa,KAAkB,EAAM,SAAmB,CAAC,EAAE,CAAC,EAC7D,CAAC,GAAgB,KAAqB,EAAM,SAAmB,EAAE,CAAC,EAElE,IAAe,CAAC;AAoCtB,QAlCA,EAAM,gBAAgB;AAKpB,EAJA,GAAgB,MACd,EAAK,SAAS,EAAW,GAAG,IAAO,CAAC,GAAG,GAAM,EAAW,CACzD,EAED,IAAe,EAAW;IACzB,CAAC,GAAY,EAAa,CAAC,EA6B5B,kBAAA,cAAC,EAAe,UAAhB,EACE,OAAO;EACL,OAAO,KAAS,MAAM,EAAU,CAAC,KAAK,GAAG;EACzC,kBAAkB,IAAe,KAAA,UAZR;AAC7B,MAAe,MAAY,IAAU,EAAE;;EAYnC,cAAc,IAAe,KAAA,UA/BR;GACzB,IAAM,IAAc,KAAc,MAAe,IAAY,GACvD,IAAa,IAAa,IAAY;AAQ5C,QANI,KAAc,MAChB,GAAmB,MACjB,EAAK,SAAS,EAAW,GAAG,IAAO,CAAC,GAAG,GAAM,EAAW,CACzD,EAGC,EACF,QAAO,KAAc;AAEvB,OAAI,EACF,QAAO,GAAe,MAAY,IAAU,EAAE;;EAkB5C,UAAU,IAAe,KAAA,KAVb,MAAkB;AAClC,KAAc,EAAM;;EAUhB;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EAGuB,EADvB,EACuB;GAIjB,UAA4B;CACvC,IAAM,IAAU,EAAM,WAAW,EAAe;AAChD,KAAI,CAAC,EACH,OAAU,MACR,sEACD;AAEH,QAAO"}

package/dist/components/stepper/types.js

@@ -1,2 +1,8 @@
-var t=(E=>(E.ACTIVE="active",E.VIEWED="viewed",E.SUCCESS="success",E.DEFAULT="default",E.COMPLETED="completed",E.REVIEWED="reviewed",E))(t||{});export{t as Status};
-//# sourceMappingURL=types.js.map
+//#region src/components/stepper/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.ACTIVE = "active", e.VIEWED = "viewed", e.SUCCESS = "success", e.DEFAULT = "default", e.COMPLETED = "completed", e.REVIEWED = "reviewed", e;
+}({});
+//#endregion
+export { e as Status };
+
+//# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["export enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface IStepperProps {\n  className?: string\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface IStepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface IStepperStepsProps {\n  className?: string\n}\n"],"names":["Status"],"mappings":"AAAY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WANDA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["export enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface IStepperProps {\n  className?: string\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface IStepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface IStepperStepsProps {\n  className?: string\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,SAAA,UACA,EAAA,UAAA,WACA,EAAA,UAAA,WACA,EAAA,YAAA,aACA,EAAA,WAAA;KACD"}

package/dist/components/switch/Switch.js

@@ -1,2 +1,52 @@
-import*as t from"@radix-ui/react-switch";import*as a from"react";import{styled as o}from"../../styled.js";const i=o(t.Root,{base:["appearance-none","bg-grey-600","rounded-full","cursor-pointer","flex","overflow-hidden","relative","transition-all","duration-50","ease-out","hover:bg-grey-700","focus:outline-2","focus:outline-offset-1","focus:outline-primary-800","focus:outline-solid","data-[state=checked]:bg-primary-800","data-[state=checked]:hover:bg-primary-900","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{size:{md:["p-0.5","w-10"],lg:["p-1","w-16"]}}}),l=o(t.Thumb,{base:["bg-white","rounded-full","block","transition-transform","duration-50","will-change-transform"],variants:{size:{md:["data-[state=checked]:translate-x-5","size-4"],lg:["data-[state=checked]:translate-x-8","size-6"]}}}),r=({size:e="md",...s})=>a.createElement(i,{size:e,...s},a.createElement(l,{size:e}));r.displayName="Switch";export{r as Switch};
-//# sourceMappingURL=Switch.js.map
+import { styled as e } from "../../styled.js";
+import * as t from "react";
+import * as n from "@radix-ui/react-switch";
+//#region src/components/switch/Switch.tsx
+var r = e(n.Root, {
+	base: [
+		"appearance-none",
+		"bg-grey-600",
+		"rounded-full",
+		"cursor-pointer",
+		"flex",
+		"overflow-hidden",
+		"relative",
+		"transition-all",
+		"duration-50",
+		"ease-out",
+		"hover:bg-grey-700",
+		"focus:outline-2",
+		"focus:outline-offset-1",
+		"focus:outline-primary-800",
+		"focus:outline-solid",
+		"data-[state=checked]:bg-primary-800",
+		"data-[state=checked]:hover:bg-primary-900",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30"
+	],
+	variants: { size: {
+		md: ["p-0.5", "w-10"],
+		lg: ["p-1", "w-16"]
+	} }
+}), i = e(n.Thumb, {
+	base: [
+		"bg-white",
+		"rounded-full",
+		"block",
+		"transition-transform",
+		"duration-50",
+		"will-change-transform"
+	],
+	variants: { size: {
+		md: ["data-[state=checked]:translate-x-5", "size-4"],
+		lg: ["data-[state=checked]:translate-x-8", "size-6"]
+	} }
+}), a = ({ size: e = "md", ...n }) => /* @__PURE__ */ t.createElement(r, {
+	size: e,
+	...n
+}, /* @__PURE__ */ t.createElement(i, { size: e }));
+a.displayName = "Switch";
+//#endregion
+export { a as Switch };
+
+//# sourceMappingURL=Switch.js.map