@tedi-design-system/react 14.2.0-rc.2 → 14.2.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.2.0-rc.2",
+  "version": "14.2.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
+    "@commitlint/config-conventional": "^20.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
@@ -92,7 +92,7 @@
     "@storybook/theming": "8.6.14",
     "@svgr/webpack": "8.1.0",
     "@swc-node/register": "~1.9.1",
-    "@swc/core": "~1.5.7",
+    "@swc/core": "~1.14.0",
     "@swc/helpers": "~0.5.11",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
@@ -132,7 +132,7 @@
     "next": "^14.1.3",
     "prettier": "^2.8.8",
     "replace-in-file": "^7.1.0",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.83.1",
     "showdown": "^2.1.0",
     "storybook": "8.4.2",

package/src/community/components/stepper/step.d.ts

@@ -25,6 +25,12 @@ export interface StepProps {
      * Mark the step as completed
      */
     completed?: boolean;
+    /**
+     * Show completed icon next to the step label
+     * When true, a checkmark icon is displayed next to the step label even when the step is not marked as completed.
+     * @default false
+     */
+    showCompletedIcon?: boolean;
 }
 export declare const Step: (props: StepProps) => JSX.Element | null;
 export default Step;

package/src/community/components/stepper/stepper-nav.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("../../../../external/classnames/index.cjs.js"),M=require("react"),g=require("../icon/icon.cjs.js"),s=require("./stepper.module.scss.cjs.js"),I=require("./stepper-context.cjs.js"),k=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),w=require("../../helpers/hooks/use-layout.cjs.js"),m=v=>{const{getLabel:p}=k.useLabels(),{items:c,ariaLabel:b,completedLabel:f=p("stepper.completed"),notCompletedLabel:x=p("stepper.not-completed")}=v,_=w.useLayout(["mobile"]),{activeStep:i,handleActiveStepChange:h,allowStepLabelClick:l}=M.useContext(I.StepperContext),N=c.filter(e=>e.completed).map(e=>e.index),j=e=>typeof l=="boolean"?!l:l==="completed"?!e.completed:!(l==="completed-or-next"&&(e.completed||e.index===i+1||e.index===Math.max(...N)+1)),S=e=>{const{label:o,completed:a,index:n,id:L}=e,r=n===i,y=n<=i,d=j(e),q=u.default(s.default["stepper__nav-item"],{[s.default["stepper__nav-item--disabled"]]:d},{[s.default["stepper__nav-item--active"]]:y},{[s.default["stepper__nav-item--completed"]]:a}),C=u.default(s.default["stepper__nav-item-label"],{"visually-hidden":_&&!r});return t.jsxs("li",{className:q,children:[t.jsxs("button",{type:"button",role:"tab","aria-selected":r,"aria-controls":L,className:s.default["stepper__nav-item-inner"],onClick:()=>h(n),disabled:d,children:[t.jsxs("span",{className:s.default["stepper__nav-item-counter"],children:[a&&t.jsx(g.Icon,{name:"done",size:18}),!a&&n+1]}),t.jsx("span",{className:C,children:o}),a&&t.jsx("span",{className:"visually-hidden",children:f}),!a&&!r&&t.jsx("span",{className:"visually-hidden",children:x})]}),r&&t.jsx("span",{className:s.default["stepper__nav-item-arrow"]})]})};return t.jsx("nav",{role:"tablist","aria-label":b,children:t.jsx("ol",{className:s.default.stepper__nav,children:c.map((e,o)=>t.jsx(S,{...e},o))})})};exports.StepperNav=m;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),m=require("../../../../external/classnames/index.cjs.js"),I=require("react"),g=require("../icon/icon.cjs.js"),s=require("./stepper.module.scss.cjs.js"),w=require("./stepper-context.cjs.js"),k=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),A=require("../../helpers/hooks/use-layout.cjs.js"),v=b=>{const{getLabel:p}=k.useLabels(),{items:c,ariaLabel:f,completedLabel:x=p("stepper.completed"),notCompletedLabel:_=p("stepper.not-completed")}=b,h=A.useLayout(["mobile"]),{activeStep:i,handleActiveStepChange:N,allowStepLabelClick:l}=I.useContext(w.StepperContext),j=c.filter(e=>e.completed).map(e=>e.index),S=e=>typeof l=="boolean"?!l:l==="completed"?!e.completed:!(l==="completed-or-next"&&(e.completed||e.index===i+1||e.index===Math.max(...j)+1)),L=e=>{const{label:o,completed:a,index:n,id:y,showCompletedIcon:d}=e,r=n===i,C=n<=i,u=S(e),q=m.default(s.default["stepper__nav-item"],{[s.default["stepper__nav-item--disabled"]]:u},{[s.default["stepper__nav-item--active"]]:C},{[s.default["stepper__nav-item--completed"]]:a}),M=m.default(s.default["stepper__nav-item-label"],{"visually-hidden":h&&!r});return t.jsxs("li",{className:q,children:[t.jsxs("button",{type:"button",role:"tab","aria-selected":r,"aria-controls":y,className:s.default["stepper__nav-item-inner"],onClick:()=>N(n),disabled:u,children:[t.jsxs("span",{className:s.default["stepper__nav-item-counter"],children:[(a||d)&&t.jsx(g.Icon,{name:"done",size:18}),!a&&!d&&n+1]}),t.jsx("span",{className:M,children:o}),a&&t.jsx("span",{className:"visually-hidden",children:x}),!a&&!r&&t.jsx("span",{className:"visually-hidden",children:_})]}),r&&t.jsx("span",{className:s.default["stepper__nav-item-arrow"]})]})};return t.jsx("nav",{role:"tablist","aria-label":f,children:t.jsx("ol",{className:s.default.stepper__nav,children:c.map((e,o)=>t.jsx(L,{...e},o))})})};exports.StepperNav=v;exports.default=v;

package/src/community/components/stepper/stepper-nav.d.ts

@@ -15,6 +15,12 @@ export interface StepperNavItem {
      * The position of the step
      */
     index: number;
+    /**
+     * Show completed icon next to the step label
+     * When true, a checkmark icon is displayed next to the step label even when the step is not marked as completed.
+     * @default false
+     */
+    showCompletedIcon?: boolean;
 }
 export interface StepperNavProps {
     /**

package/src/community/components/stepper/stepper-nav.es.js

@@ -1,54 +1,54 @@
 import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import u from "../../../../external/classnames/index.es.js";
+import v from "../../../../external/classnames/index.es.js";
 import g from "react";
 import { Icon as j } from "../icon/icon.es.js";
 import t from "./stepper.module.scss.es.js";
 import { StepperContext as k } from "./stepper-context.es.js";
-import { useLabels as w } from "../../../tedi/providers/label-provider/use-labels.es.js";
-import { useLayout as A } from "../../helpers/hooks/use-layout.es.js";
-const H = (v) => {
-  const { getLabel: c } = w(), {
+import { useLabels as A } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { useLayout as B } from "../../helpers/hooks/use-layout.es.js";
+const J = (b) => {
+  const { getLabel: c } = A(), {
     items: m,
-    ariaLabel: b,
-    completedLabel: f = c("stepper.completed"),
-    notCompletedLabel: _ = c("stepper.not-completed")
-  } = v, h = A(["mobile"]), { activeStep: o, handleActiveStepChange: N, allowStepLabelClick: l } = g.useContext(k), x = m.filter((e) => e.completed).map((e) => e.index), S = (e) => typeof l == "boolean" ? !l : l === "completed" ? !e.completed : !(l === "completed-or-next" && (e.completed || e.index === o + 1 || e.index === Math.max(...x) + 1)), L = (e) => {
-    const { label: p, completed: s, index: r, id: y } = e, n = r === o, C = r <= o, d = S(e), I = u(
+    ariaLabel: f,
+    completedLabel: _ = c("stepper.completed"),
+    notCompletedLabel: h = c("stepper.not-completed")
+  } = b, N = B(["mobile"]), { activeStep: o, handleActiveStepChange: x, allowStepLabelClick: l } = g.useContext(k), S = m.filter((e) => e.completed).map((e) => e.index), L = (e) => typeof l == "boolean" ? !l : l === "completed" ? !e.completed : !(l === "completed-or-next" && (e.completed || e.index === o + 1 || e.index === Math.max(...S) + 1)), y = (e) => {
+    const { label: p, completed: s, index: r, id: C, showCompletedIcon: d } = e, n = r === o, I = r <= o, u = L(e), M = v(
       t["stepper__nav-item"],
-      { [t["stepper__nav-item--disabled"]]: d },
-      { [t["stepper__nav-item--active"]]: C },
+      { [t["stepper__nav-item--disabled"]]: u },
+      { [t["stepper__nav-item--active"]]: I },
       { [t["stepper__nav-item--completed"]]: s }
-    ), M = u(t["stepper__nav-item-label"], {
-      "visually-hidden": h && !n
+    ), w = v(t["stepper__nav-item-label"], {
+      "visually-hidden": N && !n
     });
-    return /* @__PURE__ */ i("li", { className: I, children: [
+    return /* @__PURE__ */ i("li", { className: M, children: [
       /* @__PURE__ */ i(
         "button",
         {
           type: "button",
           role: "tab",
           "aria-selected": n,
-          "aria-controls": y,
+          "aria-controls": C,
           className: t["stepper__nav-item-inner"],
-          onClick: () => N(r),
-          disabled: d,
+          onClick: () => x(r),
+          disabled: u,
           children: [
             /* @__PURE__ */ i("span", { className: t["stepper__nav-item-counter"], children: [
-              s && /* @__PURE__ */ a(j, { name: "done", size: 18 }),
-              !s && r + 1
+              (s || d) && /* @__PURE__ */ a(j, { name: "done", size: 18 }),
+              !s && !d && r + 1
             ] }),
-            /* @__PURE__ */ a("span", { className: M, children: p }),
-            s && /* @__PURE__ */ a("span", { className: "visually-hidden", children: f }),
-            !s && !n && /* @__PURE__ */ a("span", { className: "visually-hidden", children: _ })
+            /* @__PURE__ */ a("span", { className: w, children: p }),
+            s && /* @__PURE__ */ a("span", { className: "visually-hidden", children: _ }),
+            !s && !n && /* @__PURE__ */ a("span", { className: "visually-hidden", children: h })
           ]
         }
       ),
       n && /* @__PURE__ */ a("span", { className: t["stepper__nav-item-arrow"] })
     ] });
   };
-  return /* @__PURE__ */ a("nav", { role: "tablist", "aria-label": b, children: /* @__PURE__ */ a("ol", { className: t.stepper__nav, children: m.map((e, p) => /* @__PURE__ */ a(L, { ...e }, p)) }) });
+  return /* @__PURE__ */ a("nav", { role: "tablist", "aria-label": f, children: /* @__PURE__ */ a("ol", { className: t.stepper__nav, children: m.map((e, p) => /* @__PURE__ */ a(y, { ...e }, p)) }) });
 };
 export {
-  H as StepperNav,
-  H as default
+  J as StepperNav,
+  J as default
 };

package/src/community/components/stepper/stepper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),_=require("../../../../external/classnames/index.cjs.js"),t=require("react"),q=require("./step.cjs.js"),j=require("./stepper.module.scss.cjs.js"),H=require("./stepper-context.cjs.js"),g=require("./stepper-nav.cjs.js"),R=require("../card/card-header/card-header.cjs.js"),w=require("../card/card.cjs.js"),B=require("../card/card-content/card-content.cjs.js"),h=a=>{const{activeStep:n,defaultActiveStep:N,onActiveStepChange:s,allowStepLabelClick:p=!0,children:k,className:d,ariaLabel:u,completedLabel:m,notCompletedLabel:S,card:c}=a,[v,y]=t.useState(N||0),o=t.useCallback((e=a.activeStep)=>typeof e<"u",[a.activeStep]),C=t.useCallback(e=>{s==null||s(e),o(n)||y(e)},[n,o,s]),f=t.useMemo(()=>o(n)?n:v,[n,v,o]),l=t.Children.map(k,e=>t.isValidElement(e)&&e.type===q.Step?e:null),x=l==null?void 0:l.map((e,i)=>t.cloneElement(e,{key:i,index:i,...e.props})),b=()=>t.Children.toArray(a.children).filter(e=>t.isValidElement(e)&&e.type===q.Step).map((e,i)=>{const{label:L,completed:P,id:V}=e.props;return{label:L,completed:!!P,index:i,id:V}}),M=t.useMemo(()=>({activeStep:f,handleActiveStepChange:C,allowStepLabelClick:p}),[p,f,C]),A=_.default(j.default.stepper,d,{[j.default["stepper--card"]]:!!c}),E=()=>{if(c){const e=c===!0?{}:c;return r.jsxs(w.Card,{padding:1.5,...e,"data-name":"stepper",className:A,children:[r.jsx(R.CardHeader,{padding:0,background:"white",children:r.jsx(g.StepperNav,{items:b(),ariaLabel:u,completedLabel:m,notCompletedLabel:S})}),r.jsx(B.CardContent,{children:x})]})}return r.jsxs("div",{"data-name":"stepper",className:d,children:[r.jsx(g.StepperNav,{items:b(),ariaLabel:u,completedLabel:m,notCompletedLabel:S}),x]})};return r.jsx(H.StepperContext.Provider,{value:M,children:E()})};exports.Stepper=h;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),w=require("../../../../external/classnames/index.cjs.js"),t=require("react"),q=require("./step.cjs.js"),j=require("./stepper.module.scss.cjs.js"),H=require("./stepper-context.cjs.js"),g=require("./stepper-nav.cjs.js"),I=require("../card/card-header/card-header.cjs.js"),R=require("../card/card.cjs.js"),B=require("../card/card-content/card-content.cjs.js"),h=a=>{const{activeStep:n,defaultActiveStep:N,onActiveStepChange:s,allowStepLabelClick:p=!0,children:k,className:d,ariaLabel:u,completedLabel:m,notCompletedLabel:S,card:c}=a,[v,y]=t.useState(N||0),o=t.useCallback((e=a.activeStep)=>typeof e<"u",[a.activeStep]),C=t.useCallback(e=>{s==null||s(e),o(n)||y(e)},[n,o,s]),f=t.useMemo(()=>o(n)?n:v,[n,v,o]),i=t.Children.map(k,e=>t.isValidElement(e)&&e.type===q.Step?e:null),x=i==null?void 0:i.map((e,l)=>t.cloneElement(e,{key:l,index:l,...e.props})),b=()=>t.Children.toArray(a.children).filter(e=>t.isValidElement(e)&&e.type===q.Step).map((e,l)=>{const{label:L,completed:P,id:V,showCompletedIcon:_}=e.props;return{label:L,completed:!!P,index:l,id:V,showCompletedIcon:_}}),M=t.useMemo(()=>({activeStep:f,handleActiveStepChange:C,allowStepLabelClick:p}),[p,f,C]),A=w.default(j.default.stepper,d,{[j.default["stepper--card"]]:!!c}),E=()=>{if(c){const e=c===!0?{}:c;return r.jsxs(R.Card,{padding:1.5,...e,"data-name":"stepper",className:A,children:[r.jsx(I.CardHeader,{padding:0,background:"white",children:r.jsx(g.StepperNav,{items:b(),ariaLabel:u,completedLabel:m,notCompletedLabel:S})}),r.jsx(B.CardContent,{children:x})]})}return r.jsxs("div",{"data-name":"stepper",className:d,children:[r.jsx(g.StepperNav,{items:b(),ariaLabel:u,completedLabel:m,notCompletedLabel:S}),x]})};return r.jsx(H.StepperContext.Provider,{value:M,children:E()})};exports.Stepper=h;exports.default=h;

package/src/community/components/stepper/stepper.es.js

@@ -1,28 +1,28 @@
-import { jsx as a, jsxs as g } from "react/jsx-runtime";
-import w from "../../../../external/classnames/index.es.js";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import _ from "../../../../external/classnames/index.es.js";
 import t from "react";
 import { Step as k } from "./step.es.js";
 import y from "./stepper.module.scss.es.js";
 import { StepperContext as B } from "./stepper-context.es.js";
 import { StepperNav as N } from "./stepper-nav.es.js";
 import { CardHeader as H } from "../card/card-header/card-header.es.js";
-import { Card as I } from "../card/card.es.js";
-import { CardContent as R } from "../card/card-content/card-content.es.js";
-const U = (o) => {
+import { Card as R } from "../card/card.es.js";
+import { CardContent as q } from "../card/card-content/card-content.es.js";
+const W = (a) => {
   const {
     activeStep: r,
     defaultActiveStep: x,
     onActiveStepChange: n,
-    allowStepLabelClick: c = !0,
+    allowStepLabelClick: i = !0,
     children: A,
     className: m,
     ariaLabel: d,
     completedLabel: u,
     notCompletedLabel: f,
     card: p
-  } = o, [C, E] = t.useState(x || 0), s = t.useCallback(
-    (e = o.activeStep) => typeof e < "u",
-    [o.activeStep]
+  } = a, [C, E] = t.useState(x || 0), s = t.useCallback(
+    (e = a.activeStep) => typeof e < "u",
+    [a.activeStep]
   ), S = t.useCallback(
     (e) => {
       n == null || n(e), s(r) || E(e);
@@ -31,20 +31,20 @@ const U = (o) => {
   ), v = t.useMemo(
     () => s(r) ? r : C,
     [r, C, s]
-  ), l = t.Children.map(A, (e) => t.isValidElement(e) && e.type === k ? e : null), b = l == null ? void 0 : l.map((e, i) => t.cloneElement(e, {
-    key: i,
-    index: i,
+  ), c = t.Children.map(A, (e) => t.isValidElement(e) && e.type === k ? e : null), b = c == null ? void 0 : c.map((e, l) => t.cloneElement(e, {
+    key: l,
+    index: l,
     ...e.props
-  })), h = () => t.Children.toArray(o.children).filter((e) => t.isValidElement(e) && e.type === k).map((e, i) => {
-    const { label: V, completed: j, id: _ } = e.props;
-    return { label: V, completed: !!j, index: i, id: _ };
+  })), h = () => t.Children.toArray(a.children).filter((e) => t.isValidElement(e) && e.type === k).map((e, l) => {
+    const { label: V, completed: j, id: w, showCompletedIcon: I } = e.props;
+    return { label: V, completed: !!j, index: l, id: w, showCompletedIcon: I };
   }), L = t.useMemo(
-    () => ({ activeStep: v, handleActiveStepChange: S, allowStepLabelClick: c }),
-    [c, v, S]
-  ), M = w(y.stepper, m, {
+    () => ({ activeStep: v, handleActiveStepChange: S, allowStepLabelClick: i }),
+    [i, v, S]
+  ), M = _(y.stepper, m, {
     [y["stepper--card"]]: !!p
-  }), P = () => p ? /* @__PURE__ */ g(I, { padding: 1.5, ...p === !0 ? {} : p, "data-name": "stepper", className: M, children: [
-    /* @__PURE__ */ a(H, { padding: 0, background: "white", children: /* @__PURE__ */ a(
+  }), P = () => p ? /* @__PURE__ */ g(R, { padding: 1.5, ...p === !0 ? {} : p, "data-name": "stepper", className: M, children: [
+    /* @__PURE__ */ o(H, { padding: 0, background: "white", children: /* @__PURE__ */ o(
       N,
       {
         items: h(),
@@ -53,9 +53,9 @@ const U = (o) => {
         notCompletedLabel: f
       }
     ) }),
-    /* @__PURE__ */ a(R, { children: b })
+    /* @__PURE__ */ o(q, { children: b })
   ] }) : /* @__PURE__ */ g("div", { "data-name": "stepper", className: m, children: [
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ o(
       N,
       {
         items: h(),
@@ -66,9 +66,9 @@ const U = (o) => {
     ),
     b
   ] });
-  return /* @__PURE__ */ a(B.Provider, { value: L, children: P() });
+  return /* @__PURE__ */ o(B.Provider, { value: L, children: P() });
 };
 export {
-  U as Stepper,
-  U as default
+  W as Stepper,
+  W as default
 };

package/src/community/components/vertical-stepper/step-item/step-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),f=require("../../../../tedi/components/base/typography/text/text.cjs.js"),n=require("../../../../tedi/components/base/icon/icon.cjs.js"),I=require("../../../../tedi/components/buttons/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),c=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),R=({children:t,className:h,isSelected:d,hasIcon:r,title:p,href:N,onClick:u,state:l="default",info:a,isOpen:m,onToggle:x})=>{const[g,q]=C.useState(!1),j=m??g,v=i=>{x&&x(i),m===void 0&&q(i)},k=y.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:d,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:j},h);return e.jsxs("li",{role:"treeitem","aria-selected":d,className:k,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(I.Collapse,{onToggle:v,open:j,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(c.Row,{alignItems:"start",children:e.jsx(o.Col,{children:e.jsxs(f.Text,{className:s.default["stepper-link"],children:[p,r&&l==="error"&&e.jsx(n.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),r&&l==="completed"&&e.jsx(n.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})})}),e.jsx(c.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["stepper-link-container"],children:e.jsx("a",{href:N,onClick:i=>{i.preventDefault(),u&&u()},className:s.default["stepper-link"],children:e.jsxs(f.Text,{children:[p,e.jsxs("span",{className:s.default["stepper-link-icon"],children:[r&&l==="error"&&e.jsx(n.Icon,{name:"error",color:"danger",size:16,display:"inline"}),r&&l==="completed"&&e.jsx(n.Icon,{name:"check",color:"success",size:16,display:"inline"})]})]})})}),e.jsx(c.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),I=require("react"),j=require("../../../../tedi/components/base/typography/text/text.cjs.js"),c=require("../../../../tedi/components/base/icon/icon.cjs.js"),k=require("../../../../tedi/components/buttons/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),i=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),R=({children:t,className:h,isSelected:p,hasIcon:r,title:d,href:N,onClick:u,state:l="default",info:a,isOpen:m,onToggle:x})=>{const[g,q]=I.useState(!1),f=m??g,v=n=>{x&&x(n),m===void 0&&q(n)},y=C.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:p,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:f},h);return e.jsxs("li",{role:"treeitem","aria-selected":p,className:y,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(k.Collapse,{onToggle:v,open:f,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(i.Row,{alignItems:"start",children:e.jsx(o.Col,{children:e.jsxs(j.Text,{element:"span",className:s.default["stepper-link"],children:[d,r&&l==="error"&&e.jsx(c.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),r&&l==="completed"&&e.jsx(c.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})}),e.jsx(i.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["stepper-link-container"],children:e.jsx("a",{href:N,onClick:n=>{n.preventDefault(),u&&u()},children:e.jsxs(j.Text,{element:"span",className:s.default["stepper-link"],children:[d,r&&l==="error"&&e.jsx(c.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),r&&l==="completed"&&e.jsx(c.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})}),e.jsx(i.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=R;

package/src/community/components/vertical-stepper/step-item/step-item.es.js

@@ -1,97 +1,94 @@
-import { jsxs as s, jsx as e, Fragment as g } from "react/jsx-runtime";
-import T from "../../../../../external/classnames/index.es.js";
-import j from "react";
-import { Text as k } from "../../../../tedi/components/base/typography/text/text.es.js";
-import { Icon as c } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Collapse as I } from "../../../../tedi/components/buttons/collapse/collapse.es.js";
-import r from "../vertical-stepper.module.scss.es.js";
-import { Row as n } from "../../../../tedi/components/layout/grid/row.es.js";
-import { Col as p } from "../../../../tedi/components/layout/grid/col.es.js";
+import { jsxs as i, jsx as s, Fragment as g } from "react/jsx-runtime";
+import j from "../../../../../external/classnames/index.es.js";
+import I from "react";
+import { Text as v } from "../../../../tedi/components/base/typography/text/text.es.js";
+import { Icon as t } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Collapse as R } from "../../../../tedi/components/buttons/collapse/collapse.es.js";
+import e from "../vertical-stepper.module.scss.es.js";
+import { Row as c } from "../../../../tedi/components/layout/grid/row.es.js";
+import { Col as o } from "../../../../tedi/components/layout/grid/col.es.js";
 const E = ({
-  children: i,
-  className: v,
+  children: l,
+  className: k,
   isSelected: m,
-  hasIcon: o,
+  hasIcon: p,
   title: d,
-  href: _,
-  onClick: h,
-  state: l = "default",
+  href: x,
+  onClick: f,
+  state: r = "default",
   info: a,
-  isOpen: f,
+  isOpen: h,
   onToggle: N
 }) => {
-  const [x, y] = j.useState(!1), u = f ?? x, z = (t) => {
-    N && N(t), f === void 0 && y(t);
-  }, C = T(
-    r["stepper-item"],
+  const [y, z] = I.useState(!1), u = h ?? y, C = (n) => {
+    N && N(n), h === void 0 && z(n);
+  }, T = j(
+    e["stepper-item"],
     {
-      [r[l]]: l,
-      [r.selected]: m,
-      [r["has-info"]]: a && !i,
-      [r["info-with-children"]]: a && i,
-      [r["stepper-collapse-open"]]: u
+      [e[r]]: r,
+      [e.selected]: m,
+      [e["has-info"]]: a && !l,
+      [e["info-with-children"]]: a && l,
+      [e["stepper-collapse-open"]]: u
     },
-    v
+    k
   );
-  return /* @__PURE__ */ s("li", { role: "treeitem", "aria-selected": m, className: C, children: [
-    /* @__PURE__ */ e("span", { className: r["stepper-counter"] }),
-    /* @__PURE__ */ e("div", { className: r["stepper-content"], children: i ? /* @__PURE__ */ e(
-      I,
+  return /* @__PURE__ */ i("li", { role: "treeitem", "aria-selected": m, className: T, children: [
+    /* @__PURE__ */ s("span", { className: e["stepper-counter"] }),
+    /* @__PURE__ */ s("div", { className: e["stepper-content"], children: l ? /* @__PURE__ */ s(
+      R,
       {
-        onToggle: z,
+        onToggle: C,
         open: u,
         hideCollapseText: !0,
         id: "vertical-stepper-collapse",
-        className: r["stepper-item-collapse"],
-        title: /* @__PURE__ */ s(g, { children: [
-          /* @__PURE__ */ e(n, { alignItems: "start", children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ s(k, { className: r["stepper-link"], children: [
+        className: e["stepper-item-collapse"],
+        title: /* @__PURE__ */ i(g, { children: [
+          /* @__PURE__ */ s(c, { alignItems: "start", children: /* @__PURE__ */ s(o, { children: /* @__PURE__ */ i(v, { element: "span", className: e["stepper-link"], children: [
             d,
-            o && l === "error" && /* @__PURE__ */ e(
-              c,
+            p && r === "error" && /* @__PURE__ */ s(
+              t,
               {
                 name: "error",
                 color: "danger",
                 size: 16,
                 display: "inline",
-                className: r["radio__tooltip-icon"]
+                className: e["stepper-icon"]
               }
             ),
-            o && l === "completed" && /* @__PURE__ */ e(
-              c,
+            p && r === "completed" && /* @__PURE__ */ s(
+              t,
               {
                 name: "check",
                 color: "success",
                 size: 16,
                 display: "inline",
-                className: r["radio__tooltip-icon"]
+                className: e["stepper-icon"]
               }
             )
           ] }) }) }),
-          /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { children: a }) })
+          /* @__PURE__ */ s(c, { children: /* @__PURE__ */ s(o, { children: a }) })
         ] }),
-        children: i && /* @__PURE__ */ e("ul", { className: r["sub-item-list"], children: i })
+        children: l && /* @__PURE__ */ s("ul", { className: e["sub-item-list"], children: l })
       }
-    ) : /* @__PURE__ */ s(g, { children: [
-      /* @__PURE__ */ e("div", { className: r["stepper-link-container"], children: /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ i(g, { children: [
+      /* @__PURE__ */ s("div", { className: e["stepper-link-container"], children: /* @__PURE__ */ s(
         "a",
         {
-          href: _,
-          onClick: (t) => {
-            t.preventDefault(), h && h();
+          href: x,
+          onClick: (n) => {
+            n.preventDefault(), f && f();
           },
-          className: r["stepper-link"],
-          children: /* @__PURE__ */ s(k, { children: [
+          children: /* @__PURE__ */ i(v, { element: "span", className: e["stepper-link"], children: [
             d,
-            /* @__PURE__ */ s("span", { className: r["stepper-link-icon"], children: [
-              o && l === "error" && /* @__PURE__ */ e(c, { name: "error", color: "danger", size: 16, display: "inline" }),
-              o && l === "completed" && /* @__PURE__ */ e(c, { name: "check", color: "success", size: 16, display: "inline" })
-            ] })
+            p && r === "error" && /* @__PURE__ */ s(t, { name: "error", color: "danger", size: 16, display: "inline", className: e["stepper-icon"] }),
+            p && r === "completed" && /* @__PURE__ */ s(t, { name: "check", color: "success", size: 16, display: "inline", className: e["stepper-icon"] })
           ] })
         }
       ) }),
-      /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { children: a }) })
+      /* @__PURE__ */ s(c, { children: /* @__PURE__ */ s(o, { children: a }) })
     ] }) }),
-    /* @__PURE__ */ e("div", { className: r["stepper-line"] })
+    /* @__PURE__ */ s("div", { className: e["stepper-line"] })
   ] });
 };
 export {

package/src/community/components/vertical-stepper/sub-item/sub-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),f=require("../../../../tedi/components/base/typography/text/text.cjs.js"),r=require("../../../../tedi/components/base/icon/icon.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),p=({children:a,className:n,state:t="default",isSelected:l,hasIcon:i,title:c,href:o,as:d="a",onClick:u})=>{const m=d,x=j.default(s.default["sub-item"],{[s.default[t]]:t,[s.default.selected]:l},n);return e.jsxs(e.Fragment,{children:[e.jsxs("li",{role:"treeitem",className:x,"aria-selected":l,children:[e.jsx("span",{className:s.default["sub-item-dot-container"],children:e.jsx("span",{className:s.default["sub-item-dot"]})}),e.jsx("span",{className:s.default["sub-item-text"],children:e.jsx(m,{href:o,onClick:u,children:e.jsxs(f.Text,{children:[c,i&&t==="error"&&e.jsx(r.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),i&&t==="completed"&&e.jsx(r.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})})})]}),e.jsx("div",{children:a})]})};exports.SubItem=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),f=require("../../../../tedi/components/base/typography/text/text.cjs.js"),i=require("../../../../tedi/components/base/icon/icon.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),j=({children:n,className:r,state:t="default",isSelected:l,hasIcon:a,title:c,href:u,as:d="a",onClick:m})=>{const o=d,x=p.default(s.default["sub-item"],{[s.default[t]]:t,[s.default.selected]:l},r);return e.jsxs(e.Fragment,{children:[e.jsxs("li",{role:"treeitem",className:x,"aria-selected":l,children:[e.jsx("span",{className:s.default["sub-item-dot-container"],children:e.jsx("span",{className:s.default["sub-item-dot"]})}),e.jsx("span",{className:s.default["sub-item-text"],children:e.jsx(o,{href:u,onClick:m,className:s.default["sub-item-link"],children:e.jsxs(f.Text,{element:"span",className:s.default["sub-item-title"],children:[c,a&&t==="error"&&e.jsx(i.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),a&&t==="completed"&&e.jsx(i.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})})]}),e.jsx("div",{children:n})]})};exports.SubItem=j;

package/src/community/components/vertical-stepper/sub-item/sub-item.es.js

@@ -1,55 +1,37 @@
-import { jsxs as i, Fragment as b, jsx as s } from "react/jsx-runtime";
+import { jsxs as r, Fragment as b, jsx as s } from "react/jsx-runtime";
 import f from "../../../../../external/classnames/index.es.js";
 import { Text as h } from "../../../../tedi/components/base/typography/text/text.es.js";
-import { Icon as l } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Icon as a } from "../../../../tedi/components/base/icon/icon.es.js";
 import e from "../vertical-stepper.module.scss.es.js";
 const z = ({
-  children: a,
-  className: t,
-  state: r = "default",
-  isSelected: o,
-  hasIcon: m,
-  title: c,
-  href: n,
-  as: d = "a",
-  onClick: p
+  children: t,
+  className: c,
+  state: m = "default",
+  isSelected: i,
+  hasIcon: l,
+  title: n,
+  href: o,
+  as: p = "a",
+  onClick: d
 }) => {
-  const u = d, N = f(
+  const u = p, N = f(
     e["sub-item"],
     {
-      [e[r]]: r,
-      [e.selected]: o
+      [e[m]]: m,
+      [e.selected]: i
     },
-    t
+    c
   );
-  return /* @__PURE__ */ i(b, { children: [
-    /* @__PURE__ */ i("li", { role: "treeitem", className: N, "aria-selected": o, children: [
+  return /* @__PURE__ */ r(b, { children: [
+    /* @__PURE__ */ r("li", { role: "treeitem", className: N, "aria-selected": i, children: [
       /* @__PURE__ */ s("span", { className: e["sub-item-dot-container"], children: /* @__PURE__ */ s("span", { className: e["sub-item-dot"] }) }),
-      /* @__PURE__ */ s("span", { className: e["sub-item-text"], children: /* @__PURE__ */ s(u, { href: n, onClick: p, children: /* @__PURE__ */ i(h, { children: [
-        c,
-        m && r === "error" && /* @__PURE__ */ s(
-          l,
-          {
-            name: "error",
-            color: "danger",
-            size: 16,
-            display: "inline",
-            className: e["radio__tooltip-icon"]
-          }
-        ),
-        m && r === "completed" && /* @__PURE__ */ s(
-          l,
-          {
-            name: "check",
-            color: "success",
-            size: 16,
-            display: "inline",
-            className: e["radio__tooltip-icon"]
-          }
-        )
+      /* @__PURE__ */ s("span", { className: e["sub-item-text"], children: /* @__PURE__ */ s(u, { href: o, onClick: d, className: e["sub-item-link"], children: /* @__PURE__ */ r(h, { element: "span", className: e["sub-item-title"], children: [
+        n,
+        l && m === "error" && /* @__PURE__ */ s(a, { name: "error", color: "danger", size: 16, display: "inline", className: e["stepper-icon"] }),
+        l && m === "completed" && /* @__PURE__ */ s(a, { name: "check", color: "success", size: 16, display: "inline", className: e["stepper-icon"] })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ s("div", { children: a })
+    /* @__PURE__ */ s("div", { children: t })
   ] });
 };
 export {

package/src/community/components/vertical-stepper/vertical-stepper.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="stepper-71e70cf4",t="completed-c59c99e2",s="error-eb9ee41a",p="disabled-bfb62e80",r="selected-c539d0b0",c={stepper:e,"stepper-item":"stepper-item-e267f101","stepper-separator":"stepper-separator-9dd26e0d","info-with-children":"info-with-children-02cbca6b","stepper-collapse-open":"stepper-collapse-open-65c57c8f","stepper-line":"stepper-line-0db6c4be",completed:t,"stepper-counter":"stepper-counter-5b8e1c15","stepper-link":"stepper-link-2ff892c1",error:s,disabled:p,default:"default-8405064b",selected:r,"stepper-content":"stepper-content-931e3146","stepper-item-collapse":"stepper-item-collapse-aec95d4f","sub-item-list":"sub-item-list-27bfca48","sub-item":"sub-item-8061f7a9","sub-item-children":"sub-item-children-5f7e590a","sub-item-dot":"sub-item-dot-7329e3ad","sub-item-dot-container":"sub-item-dot-container-16d7de04","sub-item-text":"sub-item-text-77a4a125","stepper--compact":"stepper--compact-04f601b0","has-info":"has-info-6196e454","stepper-link-container":"stepper-link-container-36f9e633","stepper-link-icon":"stepper-link-icon-09d5a621"};exports.completed=t;exports.default=c;exports.disabled=p;exports.error=s;exports.selected=r;exports.stepper=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="stepper-71e70cf4",t="completed-c59c99e2",s="error-eb9ee41a",p="disabled-bfb62e80",r="selected-c539d0b0",c={stepper:e,"stepper-item":"stepper-item-e267f101","stepper-separator":"stepper-separator-9dd26e0d","info-with-children":"info-with-children-02cbca6b","stepper-collapse-open":"stepper-collapse-open-65c57c8f","stepper-line":"stepper-line-0db6c4be",completed:t,"stepper-counter":"stepper-counter-5b8e1c15","stepper-link":"stepper-link-2ff892c1",error:s,disabled:p,default:"default-8405064b",selected:r,"stepper-content":"stepper-content-931e3146","stepper-item-collapse":"stepper-item-collapse-aec95d4f","stepper-icon":"stepper-icon-f48fc356","sub-item-list":"sub-item-list-27bfca48","sub-item":"sub-item-8061f7a9","sub-item-children":"sub-item-children-5f7e590a","sub-item-dot":"sub-item-dot-7329e3ad","sub-item-dot-container":"sub-item-dot-container-16d7de04","sub-item-text":"sub-item-text-77a4a125","sub-item-title":"sub-item-title-b97a9817","stepper--compact":"stepper--compact-04f601b0","has-info":"has-info-6196e454","stepper-link-container":"stepper-link-container-36f9e633"};exports.completed=t;exports.default=c;exports.disabled=p;exports.error=s;exports.selected=r;exports.stepper=e;

package/src/community/components/vertical-stepper/vertical-stepper.module.scss.es.js

@@ -14,16 +14,17 @@ const e = "stepper-71e70cf4", t = "completed-c59c99e2", p = "error-eb9ee41a", s
   selected: r,
   "stepper-content": "stepper-content-931e3146",
   "stepper-item-collapse": "stepper-item-collapse-aec95d4f",
+  "stepper-icon": "stepper-icon-f48fc356",
   "sub-item-list": "sub-item-list-27bfca48",
   "sub-item": "sub-item-8061f7a9",
   "sub-item-children": "sub-item-children-5f7e590a",
   "sub-item-dot": "sub-item-dot-7329e3ad",
   "sub-item-dot-container": "sub-item-dot-container-16d7de04",
   "sub-item-text": "sub-item-text-77a4a125",
+  "sub-item-title": "sub-item-title-b97a9817",
   "stepper--compact": "stepper--compact-04f601b0",
   "has-info": "has-info-6196e454",
-  "stepper-link-container": "stepper-link-container-36f9e633",
-  "stepper-link-icon": "stepper-link-icon-09d5a621"
+  "stepper-link-container": "stepper-link-container-36f9e633"
 };
 export {
   t as completed,