@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.3

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",
@@ -34,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    '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,IAAoB,EAAO,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"}
+{"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"}

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

@@ -1,48 +1,60 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/stepper/stepper-context/StepperContext.tsx
-var t = e.createContext({
+var StepperContext = React$1.createContext({
 	steps: [],
 	goToPreviousStep: () => null,
 	goToNextStep: () => null,
 	goToStep: () => null,
 	activeStep: 0,
 	viewedSteps: [],
-	allowSkip: !1,
+	allowSkip: false,
 	direction: "horizontal",
-	hideLabels: !1,
+	hideLabels: false,
 	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;
+	showCompletedIcons: false
+});
+var StepperProvider = ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons }) => {
+	const [activeStep, setActiveStep] = React$1.useState(0);
+	const [viewedSteps, setviewedSteps] = React$1.useState([0]);
+	const [completedSteps, setCompletedSteps] = React$1.useState([]);
+	const isControlled = !stepCount;
+	React$1.useEffect(() => {
+		setviewedSteps((prev) => prev.includes(activeStep) ? prev : [...prev, activeStep]);
+		onStepChange?.(activeStep);
+	}, [activeStep, onStepChange]);
+	const goToNextStep = () => {
+		const isCompleted = onComplete && activeStep === stepCount - 1;
+		const isNextStep = activeStep < stepCount - 1;
+		if (onComplete || isNextStep) setCompletedSteps((prev) => prev.includes(activeStep) ? prev : [...prev, activeStep]);
+		if (isCompleted) return onComplete?.();
+		if (isNextStep) return setActiveStep((current) => current + 1);
+	};
+	const goToPreviousStep = () => {
+		setActiveStep((current) => current - 1);
+	};
+	const goToStep = (index) => {
+		setActiveStep(index);
+	};
+	return /* @__PURE__ */ React$1.createElement(StepperContext.Provider, { value: {
+		steps: steps || Array(stepCount).fill(""),
+		goToPreviousStep: isControlled ? void 0 : goToPreviousStep,
+		goToNextStep: isControlled ? void 0 : goToNextStep,
+		goToStep: isControlled ? void 0 : goToStep,
+		activeStep,
+		viewedSteps,
+		completedSteps,
+		allowSkip,
+		direction,
+		hideLabels,
+		showCompletedIcons
+	} }, children);
+};
+var useStepper = () => {
+	const context = React$1.useContext(StepperContext);
+	if (!context) throw new Error("Ensure that you wrap any components with the root component Stepper");
+	return context;
 };
 //#endregion
-export { n as StepperProvider, r as useStepper };
+export { StepperProvider, useStepper };
 
 //# sourceMappingURL=StepperContext.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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,iBAAiB,QAAM,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;AAEF,IAAa,mBAAmB,EAC9B,UACA,WACA,WACA,YACA,cACA,WACA,OACA,YACA,yBACmD;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,EAAE;CAErD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,EAAE,CAAC;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,QAAM,SAAmB,EAAE,CAAC;CAExE,MAAM,eAAe,CAAC;AAEtB,SAAM,gBAAgB;AACpB,kBAAgB,SACd,KAAK,SAAS,WAAW,GAAG,OAAO,CAAC,GAAG,MAAM,WAAW,CACzD;AAED,iBAAe,WAAW;IACzB,CAAC,YAAY,aAAa,CAAC;CAE9B,MAAM,qBAAqB;EACzB,MAAM,cAAc,cAAc,eAAe,YAAY;EAC7D,MAAM,aAAa,aAAa,YAAY;AAE5C,MAAI,cAAc,WAChB,oBAAmB,SACjB,KAAK,SAAS,WAAW,GAAG,OAAO,CAAC,GAAG,MAAM,WAAW,CACzD;AAGH,MAAI,YACF,QAAO,cAAc;AAEvB,MAAI,WACF,QAAO,eAAe,YAAY,UAAU,EAAE;;CAIlD,MAAM,yBAAyB;AAC7B,iBAAe,YAAY,UAAU,EAAE;;CAGzC,MAAM,YAAY,UAAkB;AAClC,gBAAc,MAAM;;AAGtB,QACE,wBAAA,cAAC,eAAe,UAAhB,EACE,OAAO;EACL,OAAO,SAAS,MAAM,UAAU,CAAC,KAAK,GAAG;EACzC,kBAAkB,eAAe,KAAA,IAAY;EAC7C,cAAc,eAAe,KAAA,IAAY;EACzC,UAAU,eAAe,KAAA,IAAY;EACrC;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EAGuB,EADvB,SACuB;;AAI9B,IAAa,mBAA4B;CACvC,MAAM,UAAU,QAAM,WAAW,eAAe;AAChD,KAAI,CAAC,QACH,OAAM,IAAI,MACR,sEACD;AAEH,QAAO"}

package/dist/components/stepper/types.js

@@ -1,8 +1,14 @@
 //#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;
+var Status = /* @__PURE__ */ function(Status) {
+	Status["ACTIVE"] = "active";
+	Status["VIEWED"] = "viewed";
+	Status["SUCCESS"] = "success";
+	Status["DEFAULT"] = "default";
+	Status["COMPLETED"] = "completed";
+	Status["REVIEWED"] = "reviewed";
+	return Status;
 }({});
 //#endregion
-export { e as Status };
+export { Status };
 
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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,SAAL,yBAAA,QAAA;AACL,QAAA,YAAA;AACA,QAAA,YAAA;AACA,QAAA,aAAA;AACA,QAAA,aAAA;AACA,QAAA,eAAA;AACA,QAAA,cAAA;;KACD"}