@uva-glass/component-library 3.16.1 → 3.17.1

package/dist/assets/Backdrop.css

@@ -1 +1 @@
-._backdrop_k1x6d_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:100}@media (min-width: 28rem) and (min-height: 28rem){._backdrop_k1x6d_1{align-items:center;background:var(--color-black-transparent);display:flex;justify-content:center}}
+._backdrop_8s6aa_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:100;overflow:hidden}._backdrop_8s6aa_1:after{content:"";top:0;right:0;bottom:0;left:0;background-color:var(--color-uva-black);opacity:.5;pointer-events:none}@media (min-width: 28rem) and (min-height: 28rem){._backdrop_8s6aa_1{align-items:center;display:flex;justify-content:center}._backdrop_8s6aa_1:after{position:absolute}._backdrop_8s6aa_1>*{position:relative;z-index:1}}

package/dist/assets/Input.css

@@ -1 +1 @@
-._input_25til_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--color-black);color:var(--color-black);font-family:inherit;font-size:inherit;height:2rem;margin:0;padding:0 .5rem}._input--numeric_25til_13{text-align:right;width:8rem}._input--error_25til_18,._input_25til_1:invalid{border-color:var(--color-chilean-fire)}._input--full-with_25til_23{min-width:100%;width:0}._input_25til_1::placeholder{color:var(--color-black-transparent);font-size:inherit;opacity:1}._input_25til_1[type=file]{border:none}._input_25til_1:disabled{color:var(--color-black-transparent)}
+._input_whbfw_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--color-black);color:var(--color-black);font-family:inherit;font-size:inherit;height:2rem;margin:0;padding:0 .5rem}._input--numeric_whbfw_13{text-align:right;width:8rem}._input--error_whbfw_18,._input_whbfw_1:invalid{border-color:var(--color-chilean-fire)}._input--full-with_whbfw_23{min-width:100%;width:0}._input_whbfw_1::placeholder{color:var(--color-grey-500);font-size:inherit;opacity:1}._input_whbfw_1[type=file]{border:none}._input_whbfw_1:disabled{color:var(--color-grey-500)}

package/dist/assets/OverlayStepBar.css

@@ -1 +1 @@
-._overlay-step-bar__container_18gn9_1{align-items:center;background-color:var(--color-grey-50);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step_18gn9_10{align-items:center;background-color:var(--color-grey-50);color:var(--color-grey-500);display:flex;font-family:inherit;font-size:var(--font-size-default);gap:.5rem;height:100%;padding:0 2rem;position:relative}._overlay-step-bar__step_18gn9_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-grey-50);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step_18gn9_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step--active_18gn9_45{color:var(--color-black);font-weight:var(--semibold)}
+._overlay-step-bar__container_s2qo6_1{align-items:center;background-color:var(--color-grey-50);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step-wrapper_s2qo6_10{background-color:var(--color-grey-50);height:100%;position:relative}._overlay-step-bar__step-wrapper_s2qo6_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-grey-50);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step-wrapper_s2qo6_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step_s2qo6_10{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-grey-500);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-default);gap:.5rem;height:100%;margin-left:.5rem;padding:0 2rem 0 1.5rem;position:relative;width:calc(100% - .75rem)}._overlay-step-bar__step--label_s2qo6_56{display:none;text-decoration:none}._overlay-step-bar__step_s2qo6_10:hover ._overlay-step-bar__step--index_s2qo6_61,._overlay-step-bar__step_s2qo6_10:hover ._overlay-step-bar__step--label_s2qo6_56{text-decoration:underline}@media (min-width: 70rem){._overlay-step-bar__step--label_s2qo6_56{display:block}._overlay-step-bar__step_s2qo6_10:hover ._overlay-step-bar__step--index_s2qo6_61{text-decoration:none}}._overlay-step-bar__step_s2qo6_10:focus-visible{outline:.125rem dotted var(--color-cobalt);outline-offset:-.25rem;z-index:15}._overlay-step-bar__step--label_s2qo6_56:hover{text-decoration:underline}._overlay-step-bar__step--active_s2qo6_86{color:var(--color-black);font-weight:var(--semibold)}._overlay-step-bar__step--active_s2qo6_86 ._overlay-step-bar__step--label_s2qo6_56{display:block}._overlay-step-bar__step--active_s2qo6_86:hover ._overlay-step-bar__step--index_s2qo6_61,._overlay-step-bar__step--active_s2qo6_86:hover ._overlay-step-bar__step--label_s2qo6_56{cursor:default;text-decoration:none}

package/dist/assets/variables.css

@@ -24,7 +24,6 @@
   --color-blue-400: #a3e7ff;
   --color-blue-50: #e0f7ff;
   --color-purple-400: #9747ff;
-  --color-black-transparent: rgba(0 0 0 / 50%);
   --color-cobalt: #0d4da5;
   --color-san-felix: #2c632e;
   --color-uva-green: #49a74c;
@@ -41,9 +40,8 @@
   --color-amour: #ffe5ec;
   --color-dandelion: #ffde66;
   --color-natural-wood: #fff6d6;
-  --color-uva-black: #1F1D20;
-  --color-uva-red-transparent: rgba(189 0 50 / 10%);
-  --color-electric-violet: #9747FF;
+  --color-uva-black: #1f1d20;
+  --color-electric-violet: #9747ff;
   --color-lemon-grass: #99998a;
   --color-vista-blue: #8feabb;
   --color-medium-aquamarine: #62df9f;
@@ -52,6 +50,5 @@
   --color-french-grey: #b3afb6;
   --color-columbia-blue: #a1e7fc;
   --color-light-cyan: #e1f8ff;
-  --color-lavender-transparent: rgba(235 235 236 / 50%);
-  --color-natural-wool: #FFF6D6;
+  --color-natural-wool: #fff6d6;
 }

package/dist/components/Backdrop/Backdrop.js

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import '../../assets/Backdrop.css';const s = "_backdrop_k1x6d_1", a = {
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/Backdrop.css';const s = "_backdrop_8s6aa_1", r = {
   backdrop: s
-}, p = ({ children: o, ...c }) => /* @__PURE__ */ r("div", { ...c, className: a.backdrop, children: o });
+}, d = ({ children: o, ...a }) => /* @__PURE__ */ c("div", { ...a, className: r.backdrop, children: o });
 export {
-  p as Backdrop
+  d as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map

package/dist/components/Input/Input.js

@@ -1,28 +1,28 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as _ } from "react";
-import { c } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Input.css';const f = "_input_25til_1", t = {
-  input: f,
-  "input--numeric": "_input--numeric_25til_13",
-  "input--error": "_input--error_25til_18",
-  "input--full-with": "_input--full-with_25til_23"
-}, x = _(function({ id: i, appearance: r, type: n = "text", isNumeric: u, fullWidth: p, ...o }, e) {
-  return /* @__PURE__ */ l(
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Input.css';const c = "_input_whbfw_1", t = {
+  input: c,
+  "input--numeric": "_input--numeric_whbfw_13",
+  "input--error": "_input--error_whbfw_18",
+  "input--full-with": "_input--full-with_whbfw_23"
+}, a = w(function({ id: r, appearance: n, type: i = "text", isNumeric: u, fullWidth: p, ...o }, e) {
+  return /* @__PURE__ */ f(
     "input",
     {
       ...o,
       ref: e,
-      id: i,
-      className: c(t.input, {
-        [t["input--error"]]: r === "error",
+      id: r,
+      className: _(t.input, {
+        [t["input--error"]]: n === "error",
         [t["input--full-with"]]: p,
         [t["input--numeric"]]: u
       }),
-      type: n
+      type: i
     }
   );
 });
 export {
-  x as Input
+  a as Input
 };
 //# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.stories.js

@@ -1,11 +1,11 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Input as t } from "./Input.js";
+import { Input as a } from "./Input.js";
 const r = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>
-`, u = {
+`, d = {
   title: "Atoms/Input",
-  component: t,
+  component: a,
   argTypes: {
     appearance: {
       table: {
@@ -18,20 +18,22 @@ const r = `
   },
   args: {
     id: "30daa7c7",
-    type: "text"
+    type: "text",
+    disabled: !1,
+    placeholder: ""
   },
   parameters: {
-    inspectComponent: t,
+    inspectComponent: a,
     codeString: r
   }
-}, e = (a) => /* @__PURE__ */ n(t, { ...a }), p = e.bind({});
+}, e = (t) => /* @__PURE__ */ n(a, { ...t }), p = e.bind({});
 p.args = {};
-const o = e.bind({});
-o.args = {
+const l = e.bind({});
+l.args = {
   fullWidth: !0
 };
-const i = e.bind({});
-i.args = {
+const o = e.bind({});
+o.args = {
   isNumeric: !0
 };
 const s = e.bind({});
@@ -39,10 +41,10 @@ s.args = {
   appearance: "error"
 };
 export {
-  o as FullWidth,
+  l as FullWidth,
   p as InputExample,
-  i as Numeric,
+  o as Numeric,
   s as WithErrorAppearance,
-  u as default
+  d as default
 };
 //# sourceMappingURL=Input.stories.js.map

package/dist/components/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n  },\n  parameters: {\n    inspectComponent: Input,\n    codeString: codeString,\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,CAAE,CAAA;AAC5CG,EAAa,OAAO,CAAC;AAEd,MAAMC,IAAYJ,EAAS,KAAK,CAAE,CAAA;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,CAAE,CAAA;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,CAAE,CAAA;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}
+{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n    disabled: false,\n    placeholder: '',\n  },\n  parameters: {\n    inspectComponent: Input,\n    codeString: codeString,\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,CAAE,CAAA;AAC5CG,EAAa,OAAO,CAAC;AAEd,MAAMC,IAAYJ,EAAS,KAAK,CAAE,CAAA;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,CAAE,CAAA;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,CAAE,CAAA;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}

package/dist/components/OverlayStepBar/OverlayStepBar.d.ts

@@ -3,5 +3,7 @@ export interface OverlayStepBarProps {
     stepLabels: string[];
     /** activeStep number starting with 1. */
     activeStep: number;
+    /** navigate to step. */
+    onStepClick?: (step: number) => void;
 }
-export declare const OverlayStepBar: ({ stepLabels, activeStep }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverlayStepBar: ({ stepLabels, activeStep, onStepClick }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OverlayStepBar/OverlayStepBar.js

@@ -1,22 +1,30 @@
-import { jsx as e, Fragment as n, jsxs as o } from "react/jsx-runtime";
-import { c as p } from "../../clsx-OuTLNxxd.js";
-import '../../assets/OverlayStepBar.css';const t = {
-  "overlay-step-bar__container": "_overlay-step-bar__container_18gn9_1",
-  "overlay-step-bar__step": "_overlay-step-bar__step_18gn9_10",
-  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_18gn9_45"
-}, i = ({ stepLabels: r, activeStep: s = 0 }) => (s > r.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ e("div", { className: t["overlay-step-bar__container"], children: r.length && r.map((_, a) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ o(
-  "span",
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import '../../assets/OverlayStepBar.css';const r = {
+  "overlay-step-bar__container": "_overlay-step-bar__container_s2qo6_1",
+  "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_s2qo6_10",
+  "overlay-step-bar__step": "_overlay-step-bar__step_s2qo6_10",
+  "overlay-step-bar__step--label": "_overlay-step-bar__step--label_s2qo6_56",
+  "overlay-step-bar__step--index": "_overlay-step-bar__step--index_s2qo6_61",
+  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_s2qo6_86"
+}, v = ({ stepLabels: _, activeStep: a = 0, onStepClick: t }) => (a > _.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ s("div", { className: r["overlay-step-bar__container"], children: _.length && _.map((p, e) => /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step-wrapper"], children: /* @__PURE__ */ o(
+  "button",
   {
-    className: p(t["overlay-step-bar__step"], [
-      a === s - 1 && t["overlay-step-bar__step--active"]
+    className: l(r["overlay-step-bar__step"], [
+      e === a - 1 && r["overlay-step-bar__step--active"]
     ]),
+    ...t && { onClick: () => t(e + 1) },
+    type: "button",
+    "aria-label": `Step ${e + 1}`,
+    "aria-current": e === a - 1 ? "step" : void 0,
+    disabled: e === a - 1,
     children: [
-      /* @__PURE__ */ e("span", { children: a + 1 }),
-      /* @__PURE__ */ e("span", { children: _ })
+      /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step--index"], children: e + 1 }),
+      /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step--label"], children: p })
     ]
   }
-) }, `${a}_${_}`)) }));
+) }, `${e}_${p}`)) }));
 export {
-  i as OverlayStepBar
+  v as OverlayStepBar
 };
 //# sourceMappingURL=OverlayStepBar.js.map

package/dist/components/OverlayStepBar/OverlayStepBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n  /** Array of strings. */\n  stepLabels: string[];\n  /** activeStep number starting with 1. */\n  activeStep: number;\n}\n\nexport const OverlayStepBar = ({ stepLabels, activeStep = 0 }: OverlayStepBarProps) => {\n  if (activeStep > stepLabels.length) {\n    console.error('activeStep is greater than the number of steps');\n  }\n\n  return (\n    <div className={styles['overlay-step-bar__container']}>\n      {stepLabels.length &&\n        stepLabels.map((label, index) => (\n          <Fragment key={`${index}_${label}`}>\n            <span\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n            >\n              <span>{index + 1}</span>\n              <span>{label}</span>\n            </span>\n          </Fragment>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","jsx","styles","label","index","Fragment","jsxs","clsx"],"mappings":";;;;;;GAYaA,IAAiB,CAAC,EAAE,YAAAC,GAAY,YAAAC,IAAa,SACpDA,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD,GAI7D,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAAH,EAAW,UACVA,EAAW,IAAI,CAACI,GAAOC,wBACpBC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,MAChDE,MAAUJ,IAAa,KAAKE,EAAO,gCAAgC;AAAA,IAAA,CACpE;AAAA,IAED,UAAA;AAAA,MAAC,gBAAAD,EAAA,QAAA,EAAM,cAAQ,EAAE,CAAA;AAAA,MACjB,gBAAAA,EAAC,UAAM,UAAME,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,KAPF,GAAGC,CAAK,IAAID,CAAK,EAShC,CACD,GACL;"}
+{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n  /** Array of strings. */\n  stepLabels: string[];\n  /** activeStep number starting with 1. */\n  activeStep: number;\n  /** navigate to step. */\n  onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({ stepLabels, activeStep = 0, onStepClick }: OverlayStepBarProps) => {\n  if (activeStep > stepLabels.length) {\n    console.error('activeStep is greater than the number of steps');\n  }\n\n  return (\n    <div className={styles['overlay-step-bar__container']}>\n      {stepLabels.length &&\n        stepLabels.map((label, index) => (\n          <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n            <button\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n              {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n              type=\"button\"\n              aria-label={`Step ${index + 1}`}\n              aria-current={index === activeStep - 1 ? 'step' : undefined}\n              disabled={index === activeStep - 1}\n            >\n              <span className={styles[`overlay-step-bar__step--index`]}>{index + 1}</span>\n              <span className={styles[`overlay-step-bar__step--label`]}>{label}</span>\n            </button>\n          </span>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","onStepClick","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;GAaaA,IAAiB,CAAC,EAAE,YAAAC,GAAY,YAAAC,IAAa,GAAG,aAAAC,SACvDD,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD,qBAI7D,OAAI,EAAA,WAAWG,EAAO,6BAA6B,GACjD,YAAW,UACVH,EAAW,IAAI,CAACI,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,MAChDE,MAAUJ,IAAa,KAAKE,EAAO,gCAAgC;AAAA,IAAA,CACpE;AAAA,IACA,GAAID,KAAe,EAAE,SAAS,MAAMA,EAAYG,IAAQ,CAAC,EAAE;AAAA,IAC5D,MAAK;AAAA,IACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,IAC7B,gBAAcA,MAAUJ,IAAa,IAAI,SAAS;AAAA,IAClD,UAAUI,MAAUJ,IAAa;AAAA,IAEjC,UAAA;AAAA,MAAA,gBAAAK,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,cAAQ,GAAE;AAAA,wBACpE,QAAK,EAAA,WAAWA,EAAO,+BAA+B,GAAI,UAAMC,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,KAZ1D,GAAGC,CAAK,IAAID,CAAK,EAc5B,CACD,GACL;"}

package/dist/components/OverlayStepBar/OverlayStepBar.stories.js

@@ -1,22 +1,40 @@
 import { jsx as s } from "react/jsx-runtime";
-import { OverlayStepBar as e } from "./OverlayStepBar.js";
-const r = "<OverlayStepBar stelLabels={[string]} activeStep={number}/>", i = {
+import { useState as c } from "react";
+import { OverlayStepBar as t } from "./OverlayStepBar.js";
+const i = "<OverlayStepBar stepLabels={[string]} activeStep={number} onStepClick={(step) => void}/>", b = {
   title: "Molecules/OverlayStepBar",
-  component: e,
-  argTypes: {},
+  component: t,
+  argTypes: {
+    activeStep: { control: "number" },
+    stepLabels: { control: "object" },
+    onStepClick: { action: "stepClicked" }
+  },
   parameters: {
-    inspectComponent: e,
-    codeString: r
+    inspectComponent: t,
+    codeString: i
   }
-}, a = (t) => /* @__PURE__ */ s(e, { ...t }), l = {
-  stepLabels: ["BasicDetails", "Lecturers", "PeriodPlanning", "Assessment", "Miscellaneous", "Overview"],
+}, a = (e) => {
+  const [n, r] = c(e.activeStep || 1);
+  return /* @__PURE__ */ s(
+    t,
+    {
+      ...e,
+      activeStep: n,
+      onStepClick: (o) => {
+        var p;
+        r(o), (p = e.onStepClick) == null || p.call(e, o);
+      }
+    }
+  );
+}, l = {
+  stepLabels: ["BasicDetails", "Lecturers", "PeriodPlanning", "Assessment", "Miscellaneous", "Overview"]
+}, S = a.bind({});
+S.args = {
+  ...l,
   activeStep: 2
-}, n = a.bind({});
-n.args = {
-  ...l
 };
 export {
-  n as OverlayStepBarExample,
-  i as default
+  S as OverlayStepBarExample,
+  b as default
 };
 //# sourceMappingURL=OverlayStepBar.stories.js.map

package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar stelLabels={[string]} activeStep={number}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {},\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => <OverlayStepBar {...args} />;\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['BasicDetails', 'Lecturers', 'PeriodPlanning', 'Assessment', 'Miscellaneous', 'Overview'],\n  activeStep: 2,\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","jsx","defaultArgs","OverlayStepBarExample"],"mappings":";;AAKA,MAAMA,IAAa,+DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAE7EE,IAA4C;AAAA,EAChD,YAAY,CAAC,gBAAgB,aAAa,kBAAkB,cAAc,iBAAiB,UAAU;AAAA,EACrG,YAAY;AACd,GAEaC,IAAwBJ,EAAS,KAAK,CAAE,CAAA;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}
+{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar stepLabels={[string]} activeStep={number} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {\n    activeStep: { control: 'number' },\n    stepLabels: { control: 'object' },\n    onStepClick: { action: 'stepClicked' },\n  },\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n  const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n  return (\n    <OverlayStepBar\n      {...args}\n      activeStep={activeStep}\n      onStepClick={(step) => {\n        setActiveStep(step);\n        args.onStepClick?.(step);\n      }}\n    />\n  );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['BasicDetails', 'Lecturers', 'PeriodPlanning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n  activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","_a","defaultArgs","OverlayStepBarExample"],"mappings":";;;AAOA,MAAMA,IAAa,4FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,aAAa,EAAE,QAAQ,cAAc;AAAA,EACvC;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAG/D,SAAA,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;;AACrB,QAAAH,EAAcG,CAAI,IAClBC,IAAAN,EAAK,gBAAL,QAAAM,EAAA,KAAAN,GAAmBK;AAAA,MAAI;AAAA,IACzB;AAAA,EACF;AAEJ,GAEME,IAA4C;AAAA,EAChD,YAAY,CAAC,gBAAgB,aAAa,kBAAkB,cAAc,iBAAiB,UAAU;AACvG,GAEaC,IAAwBT,EAAS,KAAK,CAAE,CAAA;AACrDS,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.16.1",
+  "version": "3.17.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,9 +64,9 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.3",
+    "@types/node": "^22.15.12",
     "@types/react-dom": "^19.1.3",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.3",
     "@uva-glass/eslint-config": "^1.3.10",
     "@uva-glass/stylelint-config": "^1.2.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -81,7 +81,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jsdom": "^26.1.0",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.5.3",
@@ -99,7 +99,7 @@
     "vite-plugin-static-copy": "^2.3.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vite": "^6.3.4"
+    "vite": "^6.3.5"
   },
   "dependencies": {
     "@babel/preset-env": "^7.27.1",