enefit-design-system 0.9.2-ds.2 → 0.9.2-ds.4

package/dist/DsForm/fields.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as s, jsxs as x, Fragment as T } from "react/jsx-runtime";
-import { useState as f, useRef as w } from "react";
+import { jsx as l, jsxs as x, Fragment as k } from "react/jsx-runtime";
+import { useState as C, useRef as w } from "react";
 /* empty css                                */
 /* empty css                                */
 /* empty css                               */
@@ -98,34 +98,34 @@ import "../Card/CardBody.js";
 import "../Card/CardFooter.js";
 import "../FileUpload/FileUpload.js";
 import "../FormFields/FormFields.js";
-import { useRevealContext as g } from "./RevealContext.js";
+import { useRevealContext as d } from "./RevealContext.js";
 function v(e, n) {
   const {
-    required: r,
-    read_only: t,
+    required: o,
+    read_only: r,
     default_value: i,
     default_selected_value: a,
-    validation_pattern: l,
+    validation_pattern: s,
     __component: p,
     type: m,
-    layout: o,
+    layout: t,
     values: u,
     items: b,
     reveal: c,
-    select_name: d,
-    selectItems: h,
+    select_name: h,
+    selectItems: g,
     selectDefaultSelectedKey: ae,
     selectPlaceholder: ie,
     choice_type: ue,
     heading: se,
-    body: le,
-    severity: me,
+    body: me,
+    severity: le,
     link_title: pe,
     link_url: ce,
     accept: ve,
-    rows: de,
-    suffix: he,
-    infoHint: ge,
+    rows: he,
+    suffix: ge,
+    infoHint: de,
     title: Ce,
     size: R,
     variant: fe,
@@ -138,81 +138,81 @@ function v(e, n) {
     // if/when a renderer needs to honour a per-field override.
     labelSuffix: be,
     ...D
-  } = e, { value: F, errorMessage: Ve, ...k } = D, V = {
-    ...k,
-    required: r,
-    readOnly: t,
+  } = e, { value: F, errorMessage: Ve, ...T } = D, V = {
+    ...T,
+    required: o,
+    readOnly: r,
     size: R ?? n
   };
   return F !== void 0 ? V.value = F : i !== void 0 && (V.defaultValue = i), V;
 }
-function _(e) {
-  const { controllableNames: n } = g();
+function f(e) {
+  const { controllableNames: n } = d();
   return !!e.name && n.has(e.name);
 }
-function C(e) {
-  const n = _(e), { revealCache: r, onRevealCache: t } = g(), i = w(
-    n && e.name ? r[e.name] : void 0
+function _(e) {
+  const n = f(e), { revealCache: o, onRevealCache: r } = d(), i = w(
+    n && e.name ? o[e.name] : void 0
   );
   if (!n || !e.name) return {};
   const a = e.name;
   return {
     defaultValue: i.current,
-    onChange: (l) => t(a, l)
+    onChange: (s) => r(a, s)
   };
 }
 function M({ field: e }) {
-  const n = v(e), r = C(e), t = e.validation_pattern ? new RegExp(e.validation_pattern) : void 0, i = (a) => {
-    if (!(!a || !a.trim()) && t && !t.test(a.trim()))
+  const n = v(e), o = _(e), r = e.validation_pattern ? new RegExp(e.validation_pattern) : void 0, i = (a) => {
+    if (!(!a || !a.trim()) && r && !r.test(a.trim()))
       return " ";
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     y,
     {
       ...n,
-      defaultValue: r.defaultValue ?? n.defaultValue,
-      onChange: r.onChange ? (a) => r.onChange?.(a) : void 0,
+      defaultValue: o.defaultValue ?? n.defaultValue,
+      onChange: o.onChange ? (a) => o.onChange?.(a) : void 0,
       validate: i
     }
   );
 }
 function O({ field: e }) {
-  const n = v(e), r = C(e);
-  return /* @__PURE__ */ s(
+  const n = v(e), o = _(e);
+  return /* @__PURE__ */ l(
     y,
     {
       type: "email",
       autoComplete: "email",
       ...n,
-      defaultValue: r.defaultValue ?? n.defaultValue,
-      onChange: r.onChange ? (t) => r.onChange?.(t) : void 0
+      defaultValue: o.defaultValue ?? n.defaultValue,
+      onChange: o.onChange ? (r) => o.onChange?.(r) : void 0
     }
   );
 }
 function U({ field: e }) {
-  const n = v(e), r = C(e);
-  return /* @__PURE__ */ s(
+  const n = v(e), o = _(e);
+  return /* @__PURE__ */ l(
     K,
     {
       ...n,
       rows: e.rows,
-      defaultValue: r.defaultValue ?? n.defaultValue,
-      onChange: r.onChange ? (t) => r.onChange?.(t) : void 0
+      defaultValue: o.defaultValue ?? n.defaultValue,
+      onChange: o.onChange ? (r) => o.onChange?.(r) : void 0
     }
   );
 }
 function $({ field: e, context: n }) {
-  const r = v(e), t = C(e), i = e.validation_pattern ? new RegExp(e.validation_pattern) : /^[\d\s\-+()]+$/, a = (p) => {
+  const o = v(e), r = _(e), i = e.validation_pattern ? new RegExp(e.validation_pattern) : /^[\d\s\-+()]+$/, a = (p) => {
     if (p && !i.test(p))
       return " ";
-  }, l = n?.phoneCountries;
-  return /* @__PURE__ */ s(
+  }, s = n?.phoneCountries;
+  return /* @__PURE__ */ l(
     z,
     {
-      ...r,
-      defaultValue: t.defaultValue ?? r.defaultValue,
-      onChange: t.onChange ? (p) => t.onChange?.(p) : void 0,
-      countries: e.selectItems ?? l,
+      ...o,
+      defaultValue: r.defaultValue ?? o.defaultValue,
+      onChange: r.onChange ? (p) => r.onChange?.(p) : void 0,
+      countries: e.selectItems ?? s,
       defaultCountry: e.selectDefaultSelectedKey,
       countriesName: e.select_name,
       validate: a
@@ -220,158 +220,171 @@ function $({ field: e, context: n }) {
   );
 }
 function B({ field: e }) {
-  const n = v(e), r = C(e), t = e.validation_pattern ? new RegExp(e.validation_pattern) : /^\d{6,20}$/, i = (a) => {
-    if (!(!a || !a.trim()) && !t.test(a.trim()))
+  const n = v(e), o = _(e), r = e.validation_pattern ? new RegExp(e.validation_pattern) : /^\d{6,20}$/, i = (a) => {
+    if (!(!a || !a.trim()) && !r.test(a.trim()))
       return " ";
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     y,
     {
       ...n,
-      defaultValue: r.defaultValue ?? n.defaultValue,
-      onChange: r.onChange ? (a) => r.onChange?.(a) : void 0,
+      defaultValue: o.defaultValue ?? n.defaultValue,
+      onChange: o.onChange ? (a) => o.onChange?.(a) : void 0,
       validate: i
     }
   );
 }
 function J({ field: e }) {
-  const n = v(e), { triggerValues: r, revealCache: t, onTriggerChange: i, onRevealCache: a } = g(), l = _(e), [p] = f(() => {
+  const n = v(e), { triggerValues: o, revealCache: r, onTriggerChange: i, onRevealCache: a } = d(), s = f(e), [p] = C(() => {
     if (!e.name) return e.default_selected_value;
-    const o = r[e.name];
-    if (o !== void 0) return o;
-    if (l) {
-      const u = t[e.name];
+    const t = o[e.name];
+    if (t !== void 0) return t;
+    if (s) {
+      const u = r[e.name];
       if (u !== void 0) return u;
     }
     return e.default_selected_value;
-  }), m = (e.values ?? []).map((o) => ({
-    value: o.value,
-    label: o.title
+  }), m = (e.values ?? []).map((t) => ({
+    value: t.value,
+    label: t.title
   }));
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     j,
     {
       ...n,
       defaultValue: p,
       items: m,
       placeholder: e.placeholder,
-      onChange: (o) => {
-        e.name && (i(e.name, o), l && a(e.name, o));
+      onChange: (t) => {
+        e.name && (i(e.name, t), s && a(e.name, t));
       }
     }
   );
 }
 function Q({ field: e }) {
-  const n = v(e), { triggerValues: r, revealCache: t, onTriggerChange: i, onRevealCache: a } = g(), l = !!e.reveal, p = _(e), [m] = f(() => {
+  const n = v(e), { triggerValues: o, revealCache: r, onTriggerChange: i, onRevealCache: a } = d(), s = !!e.reveal, p = f(e), [m] = C(() => {
     if (!e.name) return !!e.default_value;
-    if (l) {
-      const o = r[e.name];
-      if (o !== void 0) return o;
+    if (s) {
+      const t = o[e.name];
+      if (t !== void 0) return t;
     }
     if (p) {
-      const o = t[e.name];
-      if (o !== void 0) return o;
+      const t = r[e.name];
+      if (t !== void 0) return t;
     }
     return !!e.default_value;
   });
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     S,
     {
       ...n,
       label: e.label,
       defaultChecked: m,
-      onChange: (o) => {
-        e.name && (l && i(e.name, o), p && a(e.name, o));
+      onChange: (t) => {
+        e.name && (s && i(e.name, t), p && a(e.name, t));
       }
     }
   );
 }
 function W({ field: e }) {
-  const n = v(e), { triggerValues: r, revealCache: t, onTriggerChange: i, onRevealCache: a } = g(), l = _(e), [p] = f(() => {
+  const n = v(e), { triggerValues: o, revealCache: r, onTriggerChange: i, onRevealCache: a } = d(), s = f(e), [p] = C(() => {
     if (!e.name)
       return e.default_value ? [e.default_value] : void 0;
-    const o = r[e.name];
-    if (o !== void 0) return o;
-    if (l) {
-      const u = t[e.name];
+    const t = o[e.name];
+    if (t !== void 0) return t;
+    if (s) {
+      const u = r[e.name];
       if (u !== void 0) return u;
     }
     return e.default_value ? [e.default_value] : void 0;
-  }), m = (e.items ?? []).map((o) => ({
-    value: o.value ?? o.label,
-    label: o.label,
-    description: o.description
+  }), m = (e.items ?? []).map((t) => ({
+    value: t.value ?? t.label,
+    label: t.label,
+    description: t.description
   }));
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     L,
     {
       ...n,
       defaultValue: p,
       items: m,
-      onChange: (o) => {
-        e.name && (i(e.name, o), l && a(e.name, o));
+      onChange: (t) => {
+        e.name && (i(e.name, t), s && a(e.name, t));
       }
     }
   );
 }
 function X({ field: e }) {
-  const n = v(e), { triggerValues: r, revealCache: t, onTriggerChange: i, onRevealCache: a } = g(), l = _(e), [p] = f(() => {
+  const n = v(e), { triggerValues: o, revealCache: r, onTriggerChange: i, onRevealCache: a } = d(), s = f(e), [p] = C(() => {
     if (!e.name) return e.default_value;
-    const o = r[e.name];
-    if (o !== void 0) return o;
-    if (l) {
-      const u = t[e.name];
+    const t = o[e.name];
+    if (t !== void 0) return t;
+    if (s) {
+      const u = r[e.name];
       if (u !== void 0) return u;
     }
     return e.default_value;
-  }), m = (e.items ?? []).map((o) => ({
-    value: o.value ?? "",
-    label: o.label,
-    description: o.description
+  }), m = (e.items ?? []).map((t) => ({
+    value: t.value ?? "",
+    label: t.label,
+    description: t.description
   }));
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     P,
     {
       ...n,
       name: e.name ?? "",
       defaultValue: p,
       items: m,
-      onChange: (o) => {
-        e.name && (i(e.name, o), l && a(e.name, o));
+      onChange: (t) => {
+        e.name && (i(e.name, t), s && a(e.name, t));
       }
     }
   );
 }
 function Y({ field: e }) {
-  const n = v(e), r = (e.items ?? []).map((t) => ({
+  const n = v(e), { triggerValues: o, revealCache: r, onTriggerChange: i, onRevealCache: a } = d(), s = f(e), [p] = C(() => {
+    if (!e.name)
+      return e.default_value ? [e.default_value] : void 0;
+    const t = o[e.name];
+    if (t !== void 0) return t;
+    if (s) {
+      const u = r[e.name];
+      if (u !== void 0) return u;
+    }
+    return e.default_value ? [e.default_value] : void 0;
+  }), m = (e.items ?? []).map((t) => ({
     value: t.value ?? "",
     label: t.label,
     description: t.description
   }));
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     G,
     {
       ...n,
       name: e.name ?? "",
-      defaultValue: e.default_value ? [e.default_value] : void 0,
+      defaultValue: p,
       layout: e.layout === "one_column" ? "column" : "row",
-      items: r
+      items: m,
+      onChange: (t) => {
+        e.name && (i(e.name, t), s && a(e.name, t));
+      }
     }
   );
 }
 function Z({ field: e }) {
-  const n = v(e), r = C(e);
-  return /* @__PURE__ */ s(
+  const n = v(e), o = _(e);
+  return /* @__PURE__ */ l(
     E,
     {
       ...n,
-      defaultValue: r.defaultValue ?? n.defaultValue,
-      onChange: r.onChange ? (t) => r.onChange?.(t) : void 0
+      defaultValue: o.defaultValue ?? n.defaultValue,
+      onChange: o.onChange ? (r) => o.onChange?.(r) : void 0
     }
   );
 }
 function ee({ field: e }) {
-  return e.name ? /* @__PURE__ */ s(
+  return e.name ? /* @__PURE__ */ l(
     "input",
     {
       type: "hidden",
@@ -381,51 +394,51 @@ function ee({ field: e }) {
   ) : null;
 }
 function te({ field: e, context: n }) {
-  const [r, t] = f([]), i = r.filter((m) => m.status === "done" && m.url).map((m) => m.url).join(`
+  const [o, r] = C([]), i = o.filter((m) => m.status === "done" && m.url).map((m) => m.url).join(`
 
-`), a = n, l = async (m) => {
-    const o = Array.from(m);
-    for (const u of o) {
+`), a = n, s = async (m) => {
+    const t = Array.from(m);
+    for (const u of t) {
       const b = a?.onFileValidate?.(u);
       if (b) {
-        t((c) => [
+        r((c) => [
           ...c,
           { file: u, status: "error", error: b }
         ]);
         continue;
       }
-      if (t((c) => [...c, { file: u, status: "uploading" }]), !a?.onFileUpload) {
-        t(
+      if (r((c) => [...c, { file: u, status: "uploading" }]), !a?.onFileUpload) {
+        r(
           (c) => c.map(
-            (d) => d.file === u ? { ...d, status: "done" } : d
+            (h) => h.file === u ? { ...h, status: "done" } : h
           )
         );
         continue;
       }
       try {
         const c = await a.onFileUpload(u);
-        t(
-          (d) => d.map(
-            (h) => h.file === u ? { ...h, status: "done", url: c } : h
+        r(
+          (h) => h.map(
+            (g) => g.file === u ? { ...g, status: "done", url: c } : g
           )
         );
       } catch (c) {
-        t(
-          (d) => d.map(
-            (h) => h.file === u ? {
-              ...h,
+        r(
+          (h) => h.map(
+            (g) => g.file === u ? {
+              ...g,
               status: "error",
               error: c instanceof Error ? c.message : String(c)
-            } : h
+            } : g
           )
         );
       }
     }
   }, p = (m) => {
-    t((o) => o.filter((u) => u.file !== m));
+    r((t) => t.filter((u) => u.file !== m));
   };
-  return /* @__PURE__ */ x(T, { children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ x(k, { children: [
+    /* @__PURE__ */ l(
       N,
       {
         label: e.label,
@@ -435,31 +448,31 @@ function te({ field: e, context: n }) {
         required: e.required,
         readOnly: e.read_only,
         size: e.size,
-        onAddFiles: l,
+        onAddFiles: s,
         onRemoveFile: p
       }
     ),
-    e.name ? /* @__PURE__ */ s("input", { type: "hidden", name: e.name, value: i }) : null
+    e.name ? /* @__PURE__ */ l("input", { type: "hidden", name: e.name, value: i }) : null
   ] });
 }
 function oe({ field: e, context: n }) {
-  const r = v(e), t = n;
-  return /* @__PURE__ */ s(
+  const o = v(e), r = n;
+  return /* @__PURE__ */ l(
     I,
     {
-      ...r,
+      ...o,
       placeholder: e.placeholder,
-      onSearch: t?.onAddressSearch,
-      loadingLabel: e.loadingLabel ?? t?.loadingLabel,
-      emptyLabel: e.emptyLabel ?? t?.emptyLabel,
-      errorLabel: e.errorLabel ?? t?.errorLabel,
+      onSearch: r?.onAddressSearch,
+      loadingLabel: e.loadingLabel ?? r?.loadingLabel,
+      emptyLabel: e.emptyLabel ?? r?.emptyLabel,
+      errorLabel: e.errorLabel ?? r?.errorLabel,
       allowsCustomValue: !0
     }
   );
 }
 function re({ field: e }) {
   return /* @__PURE__ */ x("div", { className: "ds-form__heading", children: [
-    e.heading ? /* @__PURE__ */ s(
+    e.heading ? /* @__PURE__ */ l(
       A,
       {
         variant: e.variant ?? "h5",
@@ -467,21 +480,21 @@ function re({ field: e }) {
         children: e.heading
       }
     ) : null,
-    e.body ? /* @__PURE__ */ s(q, { as: "div", children: e.body }) : null
+    e.body ? /* @__PURE__ */ l(q, { as: "div", children: e.body }) : null
   ] });
 }
 function ne({
   field: e,
   linkComponent: n
 }) {
-  const r = e.severity === "notify" ? "info" : e.severity, t = e.link_title && e.link_url ? n ? n(e.link_url, e.link_title) : /* @__PURE__ */ s("a", { href: e.link_url, children: e.link_title }) : void 0;
-  return /* @__PURE__ */ s(
+  const o = e.severity === "notify" ? "info" : e.severity, r = e.link_title && e.link_url ? n ? n(e.link_url, e.link_title) : /* @__PURE__ */ l("a", { href: e.link_url, children: e.link_title }) : void 0;
+  return /* @__PURE__ */ l(
     H,
     {
-      variant: r,
+      variant: o,
       title: e.title,
       description: e.description,
-      children: t
+      children: r
     }
   );
 }

package/dist/DsForm/utils.js

@@ -1,4 +1,4 @@
-function s(t) {
+function c(t) {
   return t ? t.trim().split(/[\s,;]+/).filter(Boolean) : [];
 }
 function l(t) {
@@ -6,42 +6,49 @@ function l(t) {
   if (!Array.isArray(t)) return a;
   for (const e of t)
     e.items?.forEach((r) => {
-      s(r.reveal).forEach((n) => a.add(n));
+      c(r.reveal).forEach((n) => a.add(n));
     }), e.values?.forEach((r) => {
-      s(r.reveal).forEach((n) => a.add(n));
-    }), e.type === "checkbox" && s(e.reveal).forEach((r) => a.add(r));
+      c(r.reveal).forEach((n) => a.add(n));
+    }), e.type === "checkbox" && c(e.reveal).forEach((r) => a.add(r));
   return a;
 }
-function i(t, a) {
+function p(t, a) {
   if (!Array.isArray(t)) return /* @__PURE__ */ new Set();
   const e = t.filter((r) => r.name).flatMap((r) => {
     const n = a[r.name];
     if (r.type === "radio-group") {
-      const o = r.items?.find((u) => u.value === n);
-      return s(o?.reveal);
+      const s = r.items?.find((u) => u.value === n);
+      return c(s?.reveal);
     }
     if (r.type === "select") {
-      const o = r.values?.find((u) => u.value === n);
-      return s(o?.reveal);
+      const s = r.values?.find((u) => u.value === n);
+      return c(s?.reveal);
     }
     if (r.type === "checkbox-group") {
-      const o = Array.isArray(n) ? n : [];
+      const s = Array.isArray(n) ? n : [];
       return (r.items ?? []).filter((u) => {
-        const c = u.value ?? u.label;
-        return c && o.includes(c);
-      }).flatMap((u) => s(u.reveal));
+        const o = u.value ?? u.label;
+        return o && s.includes(o);
+      }).flatMap((u) => c(u.reveal));
     }
-    return r.type === "checkbox" && n ? s(r.reveal) : [];
+    if (r.type === "choice-group") {
+      const s = Array.isArray(n) ? n : [];
+      return (r.items ?? []).filter((u) => {
+        const o = u.value ?? u.label;
+        return o && s.includes(o);
+      }).flatMap((u) => c(u.reveal));
+    }
+    return r.type === "checkbox" && n ? c(r.reveal) : [];
   });
   return new Set(e);
 }
-function p(t, a, e) {
+function i(t, a, e) {
   return !t.name || !a.has(t.name) ? !0 : e.has(t.name);
 }
 function v(t) {
-  return Array.isArray(t) ? t.filter((a) => a.name).reduce((a, e) => (e.type === "radio-group" && e.default_value !== void 0 ? a[e.name] = e.default_value : e.type === "select" && e.default_selected_value !== void 0 ? a[e.name] = e.default_selected_value : e.type === "checkbox" && e.default_value !== void 0 ? a[e.name] = !!e.default_value : e.type === "checkbox-group" && e.default_value !== void 0 && (a[e.name] = [e.default_value]), a), {}) : {};
+  return Array.isArray(t) ? t.filter((a) => a.name).reduce((a, e) => (e.type === "radio-group" && e.default_value !== void 0 ? a[e.name] = e.default_value : e.type === "select" && e.default_selected_value !== void 0 ? a[e.name] = e.default_selected_value : e.type === "checkbox" && e.default_value !== void 0 ? a[e.name] = !!e.default_value : e.type === "checkbox-group" && e.default_value !== void 0 ? a[e.name] = [e.default_value] : e.type === "choice-group" && e.default_value !== void 0 && (a[e.name] = [e.default_value]), a), {}) : {};
 }
-function f(t) {
+function y(t) {
   if (!t || !Array.isArray(t))
     return { steps: null, fields: t || [] };
   if (!t.some((n) => n.type === "step"))
@@ -58,9 +65,9 @@ function f(t) {
 }
 export {
   l as collectControllableNames,
-  i as getRevealedNames,
-  f as groupFields,
+  p as getRevealedNames,
+  y as groupFields,
   v as initialTriggerValues,
-  p as isFieldVisible,
-  s as parseRevealNames
+  i as isFieldVisible,
+  c as parseRevealNames
 };

package/dist/DsStepper/DsStepper.js

@@ -1,89 +1,90 @@
 "use client";
-import { jsxs as n, jsx as s, Fragment as F } from "react/jsx-runtime";
-import { forwardRef as T, useRef as $, useEffect as q } from "react";
-import { DsIcon as w } from "../DsIcon/DsIcon.js";
-import { cn as v } from "../utils/dsClass.js";
+import { jsxs as n, jsx as t, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as F, useRef as T, useEffect as $ } from "react";
+import q from "../output/icons/IconCheckXs.js";
+import C from "../output/icons/IconCheckSm.js";
+import { cn as b } from "../utils/dsClass.js";
 /* empty css              */
-function z(r, t) {
-  return r < t ? "completed" : r === t ? "active" : "upcoming";
+function E(r, s) {
+  return r < s ? "completed" : r === s ? "active" : "upcoming";
 }
-function E(r, t, i) {
-  return t ? !!(r === "completed" && i) : !1;
+function H(r, s, i) {
+  return s ? !!(r === "completed" && i) : !1;
 }
-const K = T(
+const K = F(
   function({
-    items: t,
+    items: s,
     value: i,
     onChange: p,
-    allowPrevStepSelect: h = !1,
+    allowPrevStepSelect: v = !1,
     focusOnActiveChange: d = !1,
     size: u = "default",
-    ariaLabels: f,
+    ariaLabels: m,
     className: N,
-    ...x
-  }, k) {
-    const I = f?.nav ?? "Steps", S = f?.completed ?? "completed", o = Math.max(0, t.findIndex((e) => e.value === i)), y = u === "small" ? "small" : "default", m = $(null);
-    q(() => {
+    ...k
+  }, x) {
+    const I = m?.nav ?? "Steps", S = m?.completed ?? "completed", o = Math.max(0, s.findIndex((e) => e.value === i)), g = u === "small" ? "small" : "default", f = T(null);
+    $(() => {
       if (!d) return;
-      const e = m.current;
+      const e = f.current;
       if (!e) return;
       (e.querySelector(
         "button, [tabindex]"
       ) ?? e).focus();
     }, [o, d]);
-    const l = t[o];
+    const l = s[o];
     return /* @__PURE__ */ n(
       "nav",
       {
-        ref: k,
+        ref: x,
         "aria-label": I,
-        className: v(
+        className: b(
           "ds-stepper",
           u === "small" && "ds-stepper--small",
           N
         ),
-        ...x,
+        ...k,
         children: [
-          /* @__PURE__ */ s("ol", { className: "ds-stepper__list", children: t.map((e, c) => {
-            const a = z(c, o), D = e.disabled ?? !1, L = t.slice(c + 1).every((j) => j.disabled), _ = E(
+          /* @__PURE__ */ t("ol", { className: "ds-stepper__list", children: s.map((e, c) => {
+            const a = E(c, o), w = e.disabled ?? !1, y = s.slice(c + 1).every((j) => j.disabled), h = H(
               a,
               p,
-              h
-            ), R = a === "completed" ? /* @__PURE__ */ s(w, { icon: "check", size: y, "aria-hidden": "true" }) : c + 1, b = /* @__PURE__ */ n(F, { children: [
-              /* @__PURE__ */ s(
+              v
+            ), L = a === "completed" ? g === "small" ? /* @__PURE__ */ t(q, { "aria-hidden": !0, width: 16, height: 16 }) : /* @__PURE__ */ t(C, { "aria-hidden": !0, width: 24, height: 24 }) : c + 1, _ = /* @__PURE__ */ n(D, { children: [
+              /* @__PURE__ */ t(
                 "span",
                 {
                   className: "ds-stepper__indicator",
                   "aria-hidden": "true",
-                  children: R
+                  children: L
                 }
               ),
-              /* @__PURE__ */ s("span", { className: "ds-stepper__title", children: e.label }),
-              e.description != null && e.description !== "" ? /* @__PURE__ */ s("span", { className: "ds-stepper__description", children: e.description }) : null
-            ] }), g = a === "completed" ? `${e.label}, ${S}` : e.label;
+              /* @__PURE__ */ t("span", { className: "ds-stepper__title", children: e.label }),
+              e.description != null && e.description !== "" ? /* @__PURE__ */ t("span", { className: "ds-stepper__description", children: e.description }) : null
+            ] }), R = a === "completed" ? `${e.label}, ${S}` : e.label;
             return /* @__PURE__ */ n(
               "li",
               {
-                ref: a === "active" ? m : void 0,
-                className: v(
+                ref: a === "active" ? f : void 0,
+                className: b(
                   "ds-stepper__item",
-                  D && "ds-stepper__item--hidden"
+                  w && "ds-stepper__item--hidden"
                 ),
                 "data-state": a,
                 "aria-current": a === "active" ? "step" : void 0,
-                "aria-label": g,
-                tabIndex: a === "active" && d && !_ ? -1 : void 0,
+                "aria-label": R,
+                tabIndex: a === "active" && d && !h ? -1 : void 0,
                 children: [
-                  _ ? /* @__PURE__ */ s(
+                  h ? /* @__PURE__ */ t(
                     "button",
                     {
                       type: "button",
                       className: "ds-stepper__button",
                       onClick: () => p?.(e.value),
-                      children: b
+                      children: _
                     }
-                  ) : b,
-                  L ? null : /* @__PURE__ */ s(
+                  ) : _,
+                  y ? null : /* @__PURE__ */ t(
                     "span",
                     {
                       className: "ds-stepper__separator",
@@ -97,8 +98,8 @@ const K = T(
             );
           }) }),
           l ? /* @__PURE__ */ n("div", { className: "ds-stepper__active-step", "aria-hidden": "true", children: [
-            /* @__PURE__ */ s("p", { className: "ds-stepper__active-title", children: l.label }),
-            l.description != null && l.description !== "" ? /* @__PURE__ */ s("p", { className: "ds-stepper__active-description", children: l.description }) : null
+            /* @__PURE__ */ t("p", { className: "ds-stepper__active-title", children: l.label }),
+            l.description != null && l.description !== "" ? /* @__PURE__ */ t("p", { className: "ds-stepper__active-description", children: l.description }) : null
           ] }) : null
         ]
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "enefit-design-system",
-    "version": "0.9.2-ds.2",
+    "version": "0.9.2-ds.4",
     "description": "Enefit design system",
     "type": "module",
     "types": "dist/index.d.ts",