@stihl-design-system/components 1.0.0-RC.46 → 1.0.0-RC.48

package/{popover.OcE_5SfG.js → popover.BBaqL7y9.js}

@@ -1,13 +1,13 @@
 "use client";
 import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
-import { D as c } from "./chunks/Popover.Cyf3CbLl.js";
+import { D as c } from "./chunks/Popover.CxZZ_y1Z.js";
 import "react";
-import "./chunks/floating-ui.react.CP5A99-c.js";
+import "./chunks/floating-ui.react.Chmq0RmI.js";
 import "./chunks/index.DQOqod3i.js";
-import "./chunks/helpers.CexwVao7.js";
+import "./chunks/Button.CCol--xy.js";
 import "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
-import "./chunks/Button.Dauhc5op.js";
+import "./chunks/helpers.CexwVao7.js";
 export {
   c as DSPopover
 };

package/progressindicator.D9CfVD95.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as t, Fragment as o, jsxs as g } from "react/jsx-runtime";
+import { d as x } from "./chunks/index.cKLI89Eg.js";
+import { c as l } from "./chunks/index.DQOqod3i.js";
+import { DSSpinner as N } from "./spinner.DtLnsqVV.js";
+import './assets/progressindicator.tyY_RVQ9.css';const v = "ds-input-file_root_1dac7_1", B = "ds-input-file_bar-background_1dac7_7", I = "ds-input-file_bar-background--dark_1dac7_23", T = "ds-input-file_bar-fill_1dac7_27", L = "ds-input-file_bar-fill--dark_1dac7_32", $ = "ds-input-file_bar-fill--error_1dac7_35", w = "ds-input-file_bar-fill-indeterminate_1dac7_46", E = "ds-input-file_bar-fill-indeterminate--dark_1dac7_61", S = "ds-input-file_percent-label_1dac7_70", j = "ds-input-file_percent-label--dark_1dac7_83", y = "ds-input-file_progress-text_1dac7_87", A = "ds-input-file_progress-text--dark_1dac7_102", P = "ds-input-file_progress-bar_1dac7_106", a = {
+  root: v,
+  barBackground: B,
+  barBackgroundDark: I,
+  barFill: T,
+  barFillDark: L,
+  barFillError: $,
+  barFillIndeterminate: w,
+  barFillIndeterminateDark: E,
+  percentLabel: S,
+  percentLabelDark: j,
+  progressText: y,
+  progressTextDark: A,
+  progressBar: P
+}, H = (F) => {
+  const r = x.c(17), {
+    className: c,
+    fileName: f,
+    id: p,
+    percent: n,
+    progressStatus: h,
+    variant: b,
+    theme: D,
+    t: e
+  } = F, i = (D === void 0 ? "light" : D) === "dark", s = n === "indeterminate";
+  let u;
+  r[0] !== e ? (u = e("uploadStatus"), r[0] = e, r[1] = u) : u = r[1];
+  let _;
+  r[2] !== f || r[3] !== s || r[4] !== e ? (_ = s ? `, ${e("fileListIndeterminate", {
+    fileName: f
+  })}` : "", r[2] = f, r[3] = s, r[4] = e, r[5] = _) : _ = r[5];
+  const d = `${u}${_}`, m = s ? void 0 : n;
+  let k;
+  return r[6] !== m || r[7] !== c || r[8] !== p || r[9] !== i || r[10] !== s || r[11] !== n || r[12] !== h || r[13] !== d || r[14] !== e || r[15] !== b ? (k = b === "text" ? /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t("span", { id: p, className: l(a.root, a.progressText, {
+    [a.progressTextDark]: i
+  }, c), role: "progressbar", "aria-label": d, "aria-valuenow": m, children: s ? /* @__PURE__ */ g(o, { children: [
+    /* @__PURE__ */ t(N, { aria: {
+      "aria-label": e("uploading")
+    } }),
+    /* @__PURE__ */ t("span", { children: e("uploading") })
+  ] }) : `${d} ${n}%` }) }) : b === "bar" ? /* @__PURE__ */ g(o, { children: [
+    /* @__PURE__ */ t("div", { id: p, className: l(a.root, a.progressBar, c), role: "progressbar", "aria-label": d, "aria-valuenow": m, children: s ? /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t("div", { className: l(a.barBackground, {
+      [a.barBackgroundDark]: i
+    }), "aria-hidden": "true", children: /* @__PURE__ */ t("div", { className: l(a.barFillIndeterminate, {
+      [a.barFillIndeterminateDark]: i
+    }) }) }) }) : /* @__PURE__ */ g(o, { children: [
+      /* @__PURE__ */ t("div", { className: l(a.barBackground, {
+        [a.barBackgroundDark]: i
+      }), "aria-hidden": "true", children: /* @__PURE__ */ t("div", { className: l(a.barFill, {
+        [a.barFillDark]: i,
+        [a.barFillError]: h === "error"
+      }), style: {
+        width: `${n}%`
+      } }) }),
+      /* @__PURE__ */ g("span", { className: l(a.percentLabel, {
+        [a.percentLabelDark]: i
+      }), "aria-hidden": "true", children: [
+        n,
+        "%"
+      ] })
+    ] }) }),
+    s && /* @__PURE__ */ t("div", { className: l(a.progressText, {
+      [a.progressTextDark]: i
+    }), children: e("uploading") })
+  ] }) : null, r[6] = m, r[7] = c, r[8] = p, r[9] = i, r[10] = s, r[11] = n, r[12] = h, r[13] = d, r[14] = e, r[15] = b, r[16] = k) : k = r[16], k;
+};
+export {
+  H as ProgressIndicator
+};

package/radio.DjToa2aV.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as B, jsxs as ge } from "react/jsx-runtime";
+import { d as Ne } from "./chunks/index.cKLI89Eg.js";
+import { c as f } from "./chunks/index.DQOqod3i.js";
+import { forwardRef as We, useRef as ve, useState as xe, useEffect as He } from "react";
+import './assets/radio.9hUUyg8R.css';const Ae = (U) => U.replace(/\s+/g, ""), Be = "ds-radio_root_1c2bg_1", Ue = "ds-radio_root--dark_1c2bg_24", Ie = "ds-radio_root--disabled_1c2bg_27", Se = "ds-radio_root--with-custom-area_1c2bg_30", $e = "ds-radio_root--with-custom-area--above_1c2bg_33", we = "ds-radio_radio_1c2bg_41", je = "ds-radio_dot_1c2bg_64", Ee = "ds-radio_radio--invalid_1c2bg_88", Ve = "ds-radio_radio--dark_1c2bg_92", Oe = "ds-radio_label_1c2bg_108", Re = "ds-radio_label--bold_1c2bg_125", Te = "ds-radio_label--with-custom-area_1c2bg_137", qe = "ds-radio_custom-area_1c2bg_141", ze = "ds-radio_custom-area--disabled_1c2bg_149", Fe = "ds-radio_custom-area--above_1c2bg_152", Ge = "ds-radio_hint_1c2bg_159", Je = "ds-radio_hint--visible_1c2bg_183", Ke = "ds-radio_hint--unchecked-hidden_1c2bg_187", Le = "ds-radio_input_1c2bg_193", Me = "ds-radio_input--dark_1c2bg_294", t = {
+  root: Be,
+  rootDark: Ue,
+  rootDisabled: Ie,
+  rootWithCustomArea: Se,
+  rootWithCustomAreaAbove: $e,
+  radio: we,
+  dot: je,
+  radioInvalid: Ee,
+  radioDark: Ve,
+  label: Oe,
+  labelBold: Re,
+  labelWithCustomArea: Te,
+  customArea: qe,
+  customAreaDisabled: ze,
+  customAreaAbove: Fe,
+  hint: Ge,
+  hintVisible: Je,
+  hintUncheckedHidden: Ke,
+  input: Le,
+  inputDark: Me
+}, Pe = We((U, g) => {
+  const e = Ne.c(98);
+  let I, v, i, h, l, u, r, b, A, S, $, w, j, E, V, O, c;
+  e[0] !== U ? ({
+    label: u,
+    name: r,
+    value: c,
+    checked: I,
+    className: v,
+    customArea: i,
+    isCustomAreaAbove: S,
+    defaultChecked: $,
+    disabled: w,
+    fieldsetId: h,
+    hint: l,
+    invalid: j,
+    isBold: E,
+    hideUncheckedHint: V,
+    theme: O,
+    onChange: b,
+    ...A
+  } = U, e[0] = U, e[1] = I, e[2] = v, e[3] = i, e[4] = h, e[5] = l, e[6] = u, e[7] = r, e[8] = b, e[9] = A, e[10] = S, e[11] = $, e[12] = w, e[13] = j, e[14] = E, e[15] = V, e[16] = O, e[17] = c) : (I = e[1], v = e[2], i = e[3], h = e[4], l = e[5], u = e[6], r = e[7], b = e[8], A = e[9], S = e[10], $ = e[11], w = e[12], j = e[13], E = e[14], V = e[15], O = e[16], c = e[17]);
+  const _ = S === void 0 ? !1 : S, pe = $ === void 0 ? !1 : $, s = w === void 0 ? !1 : w, p = j === void 0 ? !1 : j, se = E === void 0 ? !1 : E, d = V === void 0 ? !1 : V, ke = O === void 0 ? "light" : O, Ce = ve(null), o = ve(null), [ye, De] = xe(pe), R = I !== void 0, a = R ? I : ye;
+  let T, q;
+  e[18] !== a || e[19] !== d ? (T = () => {
+    o.current && (d ? (o.current.style.height === "0px" || o.current.style.height === "") && a ? (o.current.style.height = `${o.current.scrollHeight}px`, o.current.style.opacity = "1") : a || (o.current.style.opacity = "0", o.current.style.height = "0px", o.current.style.pointerEvents = "none") : (o.current.style.height === "0px" || o.current.style.height === "") && (o.current.style.height = "auto", o.current.style.opacity = "1"));
+  }, q = [o, a, d], e[18] = a, e[19] = d, e[20] = T, e[21] = q) : (T = e[20], q = e[21]), He(T, q);
+  const n = ke === "dark", oe = !!i, ie = !!i && _;
+  let z;
+  e[22] !== v || e[23] !== s || e[24] !== n || e[25] !== oe || e[26] !== ie ? (z = f(t.root, {
+    [t.rootDark]: n,
+    [t.rootDisabled]: s,
+    [t.rootWithCustomArea]: oe,
+    [t.rootWithCustomAreaAbove]: ie
+  }, v), e[22] = v, e[23] = s, e[24] = n, e[25] = oe, e[26] = ie, e[27] = z) : z = e[27];
+  const le = z, ae = !!i;
+  let F;
+  e[28] !== se || e[29] !== ae ? (F = f(t.label, {
+    [t.labelBold]: se,
+    [t.labelWithCustomArea]: ae
+  }), e[28] = se, e[29] = ae, e[30] = F) : F = e[30];
+  const re = F;
+  let G;
+  e[31] !== a || e[32] !== d || e[33] !== l ? (G = () => !d && l ? !0 : !!(d && l && a), e[31] = a, e[32] = d, e[33] = l, e[34] = G) : G = e[34];
+  const J = G, ce = d && !J();
+  let K;
+  e[35] !== J || e[36] !== ce ? (K = f(t.hint, {
+    [t.hintUncheckedHidden]: ce,
+    [t.hintVisible]: J()
+  }), e[35] = J, e[36] = ce, e[37] = K) : K = e[37];
+  const de = K;
+  let L;
+  e[38] !== n ? (L = f(t.input, {
+    [t.inputDark]: n
+  }), e[38] = n, e[39] = L) : L = e[39];
+  const ne = L;
+  let M;
+  e[40] !== p || e[41] !== n ? (M = f(t.radio, {
+    [t.radioDark]: n,
+    [t.radioInvalid]: p
+  }), e[40] = p, e[41] = n, e[42] = M) : M = e[42];
+  const ue = M;
+  let P;
+  e[43] !== s ? (P = f(t.customArea, {
+    [t.customAreaDisabled]: s
+  }), e[43] = s, e[44] = P) : P = e[44];
+  const he = P;
+  let Q;
+  e[45] !== s ? (Q = f(t.customArea, t.customAreaAbove, {
+    [t.customAreaDisabled]: s
+  }), e[45] = s, e[46] = Q) : Q = e[46];
+  const be = Q;
+  let X;
+  e[47] !== s || e[48] !== R || e[49] !== b ? (X = (m) => {
+    if (s) {
+      m.preventDefault();
+      return;
+    }
+    R || De(m.target.checked), b && b(m);
+  }, e[47] = s, e[48] = R, e[49] = b, e[50] = X) : X = e[50];
+  const _e = X;
+  let Y;
+  e[51] !== l || e[52] !== r || e[53] !== c ? (Y = l ? `${Ae(r)}-${Ae(c)}-description` : void 0, e[51] = l, e[52] = r, e[53] = c, e[54] = Y) : Y = e[54];
+  const k = Y;
+  let Z;
+  e[55] !== k || e[56] !== h || e[57] !== p ? (Z = [p && h && `${h}-feedback`, k].filter(Boolean).join(" ") || void 0, e[55] = k, e[56] = h, e[57] = p, e[58] = Z) : Z = e[58];
+  const me = Z;
+  let C;
+  e[59] !== g ? (C = (m) => {
+    typeof g == "function" ? g(m) : g !== null && (g.current = m), Ce.current = m;
+  }, e[59] = g, e[60] = C) : C = e[60];
+  const fe = typeof u == "string" ? u : void 0;
+  let y;
+  e[61] !== me || e[62] !== a || e[63] !== s || e[64] !== _e || e[65] !== ne || e[66] !== r || e[67] !== A || e[68] !== C || e[69] !== fe || e[70] !== c ? (y = /* @__PURE__ */ B("input", { type: "radio", value: c, name: r, className: ne, ref: C, onChange: _e, ...A, disabled: s, checked: a, "aria-label": fe, "aria-describedby": me }), e[61] = me, e[62] = a, e[63] = s, e[64] = _e, e[65] = ne, e[66] = r, e[67] = A, e[68] = C, e[69] = fe, e[70] = c, e[71] = y) : y = e[71];
+  let ee;
+  e[72] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (ee = /* @__PURE__ */ B("div", { className: t.dot }), e[72] = ee) : ee = e[72];
+  let D;
+  e[73] !== ue ? (D = /* @__PURE__ */ B("span", { className: ue, children: ee }), e[73] = ue, e[74] = D) : D = e[74];
+  let N;
+  e[75] !== i || e[76] !== be || e[77] !== _ ? (N = i && _ && /* @__PURE__ */ B("div", { className: be, children: i }), e[75] = i, e[76] = be, e[77] = _, e[78] = N) : N = e[78];
+  let W;
+  e[79] !== i || e[80] !== he || e[81] !== _ ? (W = i && !_ && /* @__PURE__ */ B("div", { className: he, children: i }), e[79] = i, e[80] = he, e[81] = _, e[82] = W) : W = e[82];
+  let x;
+  e[83] !== k || e[84] !== l || e[85] !== de ? (x = /* @__PURE__ */ B("span", { id: k, className: de, ref: o, children: l }), e[83] = k, e[84] = l, e[85] = de, e[86] = x) : x = e[86];
+  let H;
+  e[87] !== u || e[88] !== re || e[89] !== W || e[90] !== x ? (H = /* @__PURE__ */ ge("span", { className: re, children: [
+    u,
+    W,
+    x
+  ] }), e[87] = u, e[88] = re, e[89] = W, e[90] = x, e[91] = H) : H = e[91];
+  let te;
+  return e[92] !== le || e[93] !== y || e[94] !== D || e[95] !== N || e[96] !== H ? (te = /* @__PURE__ */ ge("label", { className: le, children: [
+    y,
+    D,
+    N,
+    H
+  ] }), e[92] = le, e[93] = y, e[94] = D, e[95] = N, e[96] = H, e[97] = te) : te = e[97], te;
+});
+Pe.displayName = "DSRadio";
+export {
+  Pe as DSRadio
+};

package/{radiogroup.N06_e0b8.js → radiogroup.mc-8lw65.js}

@@ -3,9 +3,9 @@ import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import "./chunks/Fieldset.DxhNhprT.js";
-import "./radio.DxdVKoxe.js";
-import { D as s } from "./chunks/RadioGroup.D3omhLuC.js";
+import "./chunks/Fieldset.BBMuLKps.js";
+import "./radio.DjToa2aV.js";
+import { D as s } from "./chunks/RadioGroup.CO91_5hA.js";
 export {
   s as DSRadioGroup
 };

package/{scroller.CwTXbzb8.js → scroller.CgWp2WXG.js}

@@ -2,11 +2,10 @@
 import { jsxs as H, jsx as i } from "react/jsx-runtime";
 import { c as a } from "./chunks/index.DQOqod3i.js";
 import { forwardRef as I, useState as _, useRef as d } from "react";
-import { i as v, g as S } from "./chunks/is-animation-disabled.B-V_68K-.js";
+import { D as v } from "./chunks/Button.CCol--xy.js";
+import { u as S } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
 import { g as W } from "./chunks/helpers.CexwVao7.js";
-import { u as R } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
-import "./chunks/index.cKLI89Eg.js";
-import { D as L } from "./chunks/Button.Dauhc5op.js";
+import { i as R, g as L } from "./chunks/is-animation-disabled.B-V_68K-.js";
 import './assets/scroller.BGlPnnPD.css';function P(...u) {
   return (l) => {
     for (const s of u)
@@ -31,12 +30,12 @@ const T = "ds-scroller_root_3ktti_1", M = "ds-scroller_scroll-wrapper_3ktti_6",
   const [m, w] = _(!1), [p, N] = _(!1), c = d(null), t = d(null), y = d(!1), f = () => {
     g();
   };
-  R(() => {
+  S(() => {
     const r = new ResizeObserver(f);
     return t.current && r.observe(t.current), () => {
       r.disconnect();
     };
-  }, []), R(() => {
+  }, []), S(() => {
     const r = [
       // utility large bold -- assuming that it is used with DSButton or DSLinkButton variant="navigation"
       "18px 'STIHL Contraface Digital Text Bold'"
@@ -52,18 +51,18 @@ const T = "ds-scroller_root_3ktti_1", M = "ds-scroller_scroll-wrapper_3ktti_6",
   const D = () => {
     t.current && n?.scrollPosition && t.current.scrollTo({
       left: n.scrollPosition,
-      behavior: v() || !n.isSmooth ? "instant" : "smooth"
+      behavior: R() || !n.isSmooth ? "instant" : "smooth"
     });
   }, g = () => {
     if (t.current && c.current) {
-      const r = S(t.current), e = S(c.current);
+      const r = L(t.current), e = L(c.current);
       w(e.left < r.left), N(e.right > r.right + 4);
     }
   }, b = (r) => {
     const e = z(r);
     t.current?.scrollTo({
       left: e,
-      behavior: v() ? "instant" : "smooth"
+      behavior: R() ? "instant" : "smooth"
     });
   }, z = (r) => {
     if (!c.current || !t.current)
@@ -84,10 +83,10 @@ const T = "ds-scroller_root_3ktti_1", M = "ds-scroller_scroll-wrapper_3ktti_6",
         children: /* @__PURE__ */ i("div", { className: C, ref: c, children: u })
       }
     ),
-    /* @__PURE__ */ i(L, { variant: "filled", className: a(o.scrollButton, h, {
+    /* @__PURE__ */ i(v, { variant: "filled", className: a(o.scrollButton, h, {
       [o.scrollButtonHidden]: !m
     }), hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", type: "button", onClick: () => b("prev"), children: "Left" }),
-    /* @__PURE__ */ i(L, { variant: "filled", className: a(o.scrollButton, o.scrollButtonRight, h, {
+    /* @__PURE__ */ i(v, { variant: "filled", className: a(o.scrollButton, o.scrollButtonRight, h, {
       [o.scrollButtonHidden]: !p
     }), hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", type: "button", onClick: () => b("next"), children: "Right" })
   ] });

package/select.DTZ6a6Ag.js

@@ -0,0 +1,13 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DQOqod3i.js";
+import "react";
+import "./asterisk.Dwtdwpkq.js";
+import "./chunks/Icon.DYtaQgbw.js";
+import "./chunks/Popover.CxZZ_y1Z.js";
+import "./chunks/SystemFeedback.DhWcYjnu.js";
+import { D } from "./chunks/Select.EzoMdk1u.js";
+import "./chunks/useBreakpoint.1txsny17.js";
+export {
+  D as DSSelect
+};

package/{skeleton.DUkBgXxO.js → skeleton.CNJdNVav.js}

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _ } from "react/jsx-runtime";
 import { d as v } from "./chunks/index.cKLI89Eg.js";
-import { c as L } from "./chunks/index.DQOqod3i.js";
-import './assets/skeleton.BjozXDiQ.css';const M = "ds-skeleton_line_q6f73_26", N = "ds-skeleton_shimmer-slide_q6f73_1", C = "ds-skeleton_line--title-x-large_q6f73_57", z = "ds-skeleton_line--title-large_q6f73_60", W = "ds-skeleton_line--heading-x-large_q6f73_63", w = "ds-skeleton_line--heading-large_q6f73_66", $ = "ds-skeleton_line--heading-medium_q6f73_69", j = "ds-skeleton_line--heading-small_q6f73_72", A = "ds-skeleton_line--text-large_q6f73_75", E = "ds-skeleton_line--text-medium_q6f73_78", b = "ds-skeleton_line--text-small_q6f73_81", B = "ds-skeleton_line--text-x-small_q6f73_84", F = "ds-skeleton_line--text-xx-small_q6f73_87", G = "ds-skeleton_line--utility-large_q6f73_90", I = "ds-skeleton_line--utility-medium_q6f73_93", J = "ds-skeleton_line--utility-small_q6f73_96", K = "ds-skeleton_line--utility-x-small-demi_q6f73_99", O = "ds-skeleton_line--heading-x-large-uppercase_q6f73_106", P = "ds-skeleton_line--heading-large-uppercase_q6f73_109", Q = "ds-skeleton_line--theme-dark_q6f73_113", R = "ds-skeleton_multi-line-wrapper_q6f73_143", V = "ds-skeleton_multi-line_q6f73_143", Y = "ds-skeleton_multi-line--title-x-large_q6f73_182", Z = "ds-skeleton_multi-line--title-large_q6f73_185", ee = "ds-skeleton_multi-line--heading-x-large_q6f73_188", le = "ds-skeleton_multi-line--heading-large_q6f73_191", ie = "ds-skeleton_multi-line--heading-medium_q6f73_194", te = "ds-skeleton_multi-line--heading-small_q6f73_197", ne = "ds-skeleton_multi-line--text-large_q6f73_200", se = "ds-skeleton_multi-line--text-medium_q6f73_203", ae = "ds-skeleton_multi-line--text-small_q6f73_206", me = "ds-skeleton_multi-line--text-x-small_q6f73_209", _e = "ds-skeleton_multi-line--text-xx-small_q6f73_212", de = "ds-skeleton_multi-line--utility-large_q6f73_215", re = "ds-skeleton_multi-line--utility-medium_q6f73_218", ue = "ds-skeleton_multi-line--utility-small_q6f73_221", oe = "ds-skeleton_multi-line--utility-x-small-demi_q6f73_224", ge = "ds-skeleton_multi-line--heading-x-large-uppercase_q6f73_231", ce = "ds-skeleton_multi-line--heading-large-uppercase_q6f73_234", ke = "ds-skeleton_multi-line--theme-dark_q6f73_238", xe = "ds-skeleton_rectangle_q6f73_268", fe = "ds-skeleton_rectangle--theme-dark_q6f73_299", qe = "ds-skeleton_circle_q6f73_329", Le = "ds-skeleton_circle--theme-dark_q6f73_361", s = {
+import { c as h } from "./chunks/index.DQOqod3i.js";
+import './assets/skeleton.BjozXDiQ.css';const M = "ds-skeleton_line_q6f73_26", N = "ds-skeleton_shimmer-slide_q6f73_1", C = "ds-skeleton_line--title-x-large_q6f73_57", z = "ds-skeleton_line--title-large_q6f73_60", W = "ds-skeleton_line--heading-x-large_q6f73_63", w = "ds-skeleton_line--heading-large_q6f73_66", $ = "ds-skeleton_line--heading-medium_q6f73_69", j = "ds-skeleton_line--heading-small_q6f73_72", A = "ds-skeleton_line--text-large_q6f73_75", E = "ds-skeleton_line--text-medium_q6f73_78", b = "ds-skeleton_line--text-small_q6f73_81", B = "ds-skeleton_line--text-x-small_q6f73_84", F = "ds-skeleton_line--text-xx-small_q6f73_87", G = "ds-skeleton_line--utility-large_q6f73_90", I = "ds-skeleton_line--utility-medium_q6f73_93", J = "ds-skeleton_line--utility-small_q6f73_96", K = "ds-skeleton_line--utility-x-small-demi_q6f73_99", O = "ds-skeleton_line--heading-x-large-uppercase_q6f73_106", P = "ds-skeleton_line--heading-large-uppercase_q6f73_109", Q = "ds-skeleton_line--theme-dark_q6f73_113", R = "ds-skeleton_multi-line-wrapper_q6f73_143", V = "ds-skeleton_multi-line_q6f73_143", Y = "ds-skeleton_multi-line--title-x-large_q6f73_182", Z = "ds-skeleton_multi-line--title-large_q6f73_185", ee = "ds-skeleton_multi-line--heading-x-large_q6f73_188", le = "ds-skeleton_multi-line--heading-large_q6f73_191", ie = "ds-skeleton_multi-line--heading-medium_q6f73_194", te = "ds-skeleton_multi-line--heading-small_q6f73_197", ne = "ds-skeleton_multi-line--text-large_q6f73_200", se = "ds-skeleton_multi-line--text-medium_q6f73_203", ae = "ds-skeleton_multi-line--text-small_q6f73_206", me = "ds-skeleton_multi-line--text-x-small_q6f73_209", _e = "ds-skeleton_multi-line--text-xx-small_q6f73_212", de = "ds-skeleton_multi-line--utility-large_q6f73_215", re = "ds-skeleton_multi-line--utility-medium_q6f73_218", ue = "ds-skeleton_multi-line--utility-small_q6f73_221", oe = "ds-skeleton_multi-line--utility-x-small-demi_q6f73_224", ge = "ds-skeleton_multi-line--heading-x-large-uppercase_q6f73_231", ce = "ds-skeleton_multi-line--heading-large-uppercase_q6f73_234", ke = "ds-skeleton_multi-line--theme-dark_q6f73_238", xe = "ds-skeleton_rectangle_q6f73_268", fe = "ds-skeleton_rectangle--theme-dark_q6f73_299", qe = "ds-skeleton_circle_q6f73_329", he = "ds-skeleton_circle--theme-dark_q6f73_361", s = {
   line: M,
   "shimmer-slide": "ds-skeleton_shimmer-slide_q6f73_1",
   shimmerSlide: N,
@@ -87,22 +87,22 @@ import './assets/skeleton.BjozXDiQ.css';const M = "ds-skeleton_line_q6f73_26", N
   rectangleThemeDark: fe,
   circle: qe,
   "circle--theme-dark": "ds-skeleton_circle--theme-dark_q6f73_361",
-  circleThemeDark: Le
-}, Te = (h) => {
+  circleThemeDark: he
+}, Te = (L) => {
   const e = v.c(39);
   let i, t, d, r, u, o;
-  e[0] !== h ? ({
+  e[0] !== L ? ({
     className: i,
     textSize: d,
     textLineCount: r,
     theme: u,
     variant: o,
     ...t
-  } = h, e[0] = h, e[1] = i, e[2] = t, e[3] = d, e[4] = r, e[5] = u, e[6] = o) : (i = e[1], t = e[2], d = e[3], r = e[4], u = e[5], o = e[6]);
+  } = L, e[0] = L, e[1] = i, e[2] = t, e[3] = d, e[4] = r, e[5] = u, e[6] = o) : (i = e[1], t = e[2], d = e[3], r = e[4], u = e[5], o = e[6]);
   const g = d === void 0 ? "text-medium" : d, U = r === void 0 ? 3 : r, X = u === void 0 ? "light" : u, k = o === void 0 ? "single-line" : o, p = g.startsWith("title-"), n = X === "dark";
   if (k === "rectangle") {
     let l;
-    e[7] !== i || e[8] !== n ? (l = L(s.rectangle, i, {
+    e[7] !== i || e[8] !== n ? (l = h(s.rectangle, i, {
       [s.rectangleThemeDark]: n
     }), e[7] = i, e[8] = n, e[9] = l) : l = e[9];
     let a;
@@ -110,7 +110,7 @@ import './assets/skeleton.BjozXDiQ.css';const M = "ds-skeleton_line_q6f73_26", N
   }
   if (k === "circle") {
     let l;
-    e[13] !== i || e[14] !== n ? (l = L(s.circle, i, {
+    e[13] !== i || e[14] !== n ? (l = h(s.circle, i, {
       [s.circleThemeDark]: n
     }), e[13] = i, e[14] = n, e[15] = l) : l = e[15];
     let a;
@@ -118,7 +118,7 @@ import './assets/skeleton.BjozXDiQ.css';const M = "ds-skeleton_line_q6f73_26", N
   }
   const y = g ? s[`line--${g}`] : void 0;
   let x;
-  e[19] !== i || e[20] !== n || e[21] !== y ? (x = L(s.line, y, i, {
+  e[19] !== i || e[20] !== n || e[21] !== y ? (x = h(s.line, y, i, {
     [s.lineThemeDark]: n
   }), e[19] = i, e[20] = n, e[21] = y, e[22] = x) : x = e[22];
   const T = x;
@@ -130,7 +130,7 @@ import './assets/skeleton.BjozXDiQ.css';const M = "ds-skeleton_line_q6f73_26", N
   let f;
   if (e[26] !== n || e[27] !== S || e[28] !== c) {
     let l;
-    e[30] !== n || e[31] !== c ? (l = (a, D) => /* @__PURE__ */ _("div", { className: L(s.multiLine, c, {
+    e[30] !== n || e[31] !== c ? (l = (a, D) => /* @__PURE__ */ _("div", { className: h(s.multiLine, c, {
       [s.multiLineThemeDark]: n
     }) }, D), e[30] = n, e[31] = c, e[32] = l) : l = e[32], f = Array.from({
       length: S

package/{skiptocontent.Bujq9t3i.js → skiptocontent.BsRpWvyu.js}

@@ -2,13 +2,13 @@
 import { jsx as u } from "react/jsx-runtime";
 import { d as g } from "./chunks/index.cKLI89Eg.js";
 import { c as w } from "./chunks/index.DQOqod3i.js";
+import { D as T } from "./chunks/LinkButton.BxG7fx1O.js";
+import { forwardRef as _ } from "react";
 import { g as S } from "./chunks/helpers.CexwVao7.js";
-import { forwardRef as T } from "react";
-import { D as _ } from "./chunks/LinkButton.DHcfHamd.js";
 import './assets/skiptocontent.CTSDC_kG.css';const v = "ds-skip-to-content_root_uqkjt_1", C = "ds-skip-to-content_root--dark_uqkjt_8", D = {
   root: v,
   rootDark: C
-}, E = T((m, d) => {
+}, E = _((m, d) => {
   const t = g.c(16);
   let o, e, s, r, n;
   t[0] !== m ? ({
@@ -27,7 +27,7 @@ import './assets/skiptocontent.CTSDC_kG.css';const v = "ds-skip-to-content_root_
   }), t[6] = o, t[7] = p, t[8] = l) : l = t[8];
   const k = l, f = `#${a}`;
   let c;
-  return t[9] !== h || t[10] !== d || t[11] !== e || t[12] !== k || t[13] !== f || t[14] !== i ? (c = /* @__PURE__ */ u(_, { ...e, className: k, href: f, theme: i, ref: d, children: h }), t[9] = h, t[10] = d, t[11] = e, t[12] = k, t[13] = f, t[14] = i, t[15] = c) : c = t[15], c;
+  return t[9] !== h || t[10] !== d || t[11] !== e || t[12] !== k || t[13] !== f || t[14] !== i ? (c = /* @__PURE__ */ u(T, { ...e, className: k, href: f, theme: i, ref: d, children: h }), t[9] = h, t[10] = d, t[11] = e, t[12] = k, t[13] = f, t[14] = i, t[15] = c) : c = t[15], c;
 });
 E.displayName = "DSSkipToContent";
 export {

package/{slider.JAKEAwOB.js → slider.BMGAihY0.js}

@@ -3,10 +3,10 @@ import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
 import "./chunks/index.DQOqod3i.js";
 import "react";
+import "./input.Dh0ws-9j.js";
+import "./chunks/Popover.CxZZ_y1Z.js";
+import { D } from "./chunks/Slider.CX38t4Sk.js";
 import "./chunks/useBreakpoint.1txsny17.js";
-import "./input.DNdSFW5k.js";
-import "./chunks/Popover.Cyf3CbLl.js";
-import { D } from "./chunks/Slider.d3gCkWL_.js";
 export {
   D as DSSlider
 };

package/{spinner.D1W-X96t.js → spinner.DtLnsqVV.js}

@@ -2,7 +2,7 @@
 import { jsxs as x, jsx as w } from "react/jsx-runtime";
 import { d as y } from "./chunks/index.cKLI89Eg.js";
 import { c as L } from "./chunks/index.DQOqod3i.js";
-import { D as v } from "./chunks/Icon.B0WqYErA.js";
+import { D as v } from "./chunks/Icon.DYtaQgbw.js";
 import './assets/spinner.C7QSv7jc.css';const I = "ds-spinner_root_awbzc_1", N = "ds-spinner_root-size-small_awbzc_10", O = "ds-spinner_root-size-medium_awbzc_14", R = "ds-spinner_root-size-large_awbzc_18", D = "ds-spinner_root-size-x-large_awbzc_22", M = "ds-spinner_root-size-inherit_awbzc_26", X = "ds-spinner_screenReaderOnly_awbzc_51", o = {
   root: I,
   rootSizeSmall: N,

package/step.DCQ6CawJ.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as o, jsxs as O } from "react/jsx-runtime";
+import { d as V } from "./chunks/index.cKLI89Eg.js";
+import { c as L } from "./chunks/index.DQOqod3i.js";
+import "react";
+import { D as P } from "./chunks/Button.CCol--xy.js";
+import { D as A } from "./chunks/Icon.DYtaQgbw.js";
+import './assets/step.DOAmuuEQ.css';const E = "ds-stepper_step_1x7q2_1", I = "ds-stepper_step-content_1x7q2_5", R = "ds-stepper_step-button_1x7q2_12", w = "ds-stepper_step-button--horizontal_1x7q2_49", F = "ds-stepper_step-button--vertical_1x7q2_58", G = "ds-stepper_step-button--current_1x7q2_69", J = "ds-stepper_step-button--completed_1x7q2_107", K = "ds-stepper_step-button--disabled_1x7q2_135", M = "ds-stepper_step-number_1x7q2_166", Q = "ds-stepper_step-label_1x7q2_176", T = "ds-stepper_step-hint_1x7q2_184", U = "ds-stepper_step-number--current_1x7q2_213", W = "ds-stepper_step-label--current_1x7q2_239", X = "ds-stepper_sr-only_1x7q2_268", s = {
+  step: E,
+  stepContent: I,
+  stepButton: R,
+  stepButtonHorizontal: w,
+  stepButtonVertical: F,
+  stepButtonCurrent: G,
+  stepButtonCompleted: J,
+  stepButtonDisabled: K,
+  stepNumber: M,
+  stepLabel: Q,
+  stepHint: T,
+  stepNumberCurrent: U,
+  stepLabelCurrent: W,
+  srOnly: X
+}, Y = (r, t, e, p, _) => {
+  const b = `${r("step")} ${t + 1} ${r("of")} ${e}`, C = _ ? r("current") : p.state === "completed" ? r("completed") : "";
+  return [b, p.label, C].filter(Boolean).join(" - ");
+}, ot = (r) => {
+  const t = V.c(41), {
+    step: e,
+    index: p,
+    stepsCount: _,
+    t: b,
+    onStepClick: C,
+    buttonRef: D,
+    orientation: k
+  } = r, n = e.state === "current", l = e.disabled || !e.state;
+  let f;
+  t[0] !== p || t[1] !== n || t[2] !== e || t[3] !== _ || t[4] !== b ? (f = Y(b, p, _, e, n), t[0] = p, t[1] = n, t[2] = e, t[3] = _, t[4] = b, t[5] = f) : f = t[5];
+  const S = f, y = k === "horizontal" ? s.stepButtonHorizontal : s.stepButtonVertical, z = e.state === "completed";
+  let B;
+  t[6] !== n || t[7] !== l || t[8] !== y || t[9] !== z ? (B = L(s.stepButton, y, {
+    [s.stepButtonCurrent]: n,
+    [s.stepButtonCompleted]: z,
+    [s.stepButtonDisabled]: l
+  }), t[6] = n, t[7] = l, t[8] = y, t[9] = z, t[10] = B) : B = t[10];
+  const H = B;
+  let h;
+  t[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = L(s.stepContent), t[11] = h) : h = t[11];
+  const v = h;
+  let x;
+  t[12] !== n ? (x = L(s.stepNumber, {
+    [s.stepNumberCurrent]: n
+  }), t[12] = n, t[13] = x) : x = t[13];
+  const $ = x;
+  let N;
+  t[14] !== n ? (N = L(s.stepLabel, {
+    [s.stepLabelCurrent]: n
+  }), t[14] = n, t[15] = N) : N = t[15];
+  const g = N, j = n ? "step" : void 0;
+  let a;
+  t[16] !== p || t[17] !== e.state ? (a = e.state === "completed" ? /* @__PURE__ */ o(A, { name: "check", size: "medium", theme: "light" }) : p + 1, t[16] = p, t[17] = e.state, t[18] = a) : a = t[18];
+  let c;
+  t[19] !== $ || t[20] !== a ? (c = /* @__PURE__ */ o("span", { className: $, "aria-hidden": "true", children: a }), t[19] = $, t[20] = a, t[21] = c) : c = t[21];
+  let i;
+  t[22] !== e.label || t[23] !== g ? (i = /* @__PURE__ */ o("span", { className: g, children: e.label }), t[22] = e.label, t[23] = g, t[24] = i) : i = t[24];
+  let u;
+  t[25] !== e.hint ? (u = e.hint && /* @__PURE__ */ o("span", { className: s.stepHint, children: e.hint }), t[25] = e.hint, t[26] = u) : u = t[26];
+  let d;
+  t[27] !== S ? (d = /* @__PURE__ */ o("span", { className: s.srOnly, children: S }), t[27] = S, t[28] = d) : d = t[28];
+  let m;
+  t[29] !== c || t[30] !== i || t[31] !== u || t[32] !== d ? (m = /* @__PURE__ */ O("span", { className: v, children: [
+    c,
+    i,
+    u,
+    d
+  ] }), t[29] = c, t[30] = i, t[31] = u, t[32] = d, t[33] = m) : m = t[33];
+  let q;
+  return t[34] !== D || t[35] !== l || t[36] !== C || t[37] !== H || t[38] !== m || t[39] !== j ? (q = /* @__PURE__ */ o("li", { className: s.step, children: /* @__PURE__ */ o(P, { type: "button", variant: "ghost", className: H, "aria-current": j, disabled: l, onClick: C, ref: D, children: m }) }), t[34] = D, t[35] = l, t[36] = C, t[37] = H, t[38] = m, t[39] = j, t[40] = q) : q = t[40], q;
+};
+export {
+  ot as StepperStep,
+  ot as default
+};

package/stepper.D7-7BdSv.js

@@ -0,0 +1,15 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DQOqod3i.js";
+import "react";
+import "./chunks/AriaLiveRegions.utils.xoETe2Ps.js";
+import "./scroller.CgWp2WXG.js";
+import { D as f } from "./chunks/Stepper.Ds_aIEF8.js";
+import "./step.DCQ6CawJ.js";
+import "./chunks/translate.DSb-TdWR.js";
+import "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import "./chunks/helpers.CexwVao7.js";
+import "./chunks/is-animation-disabled.B-V_68K-.js";
+export {
+  f as DSStepper
+};

package/styles/js/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/animation';
 export * from './lib/breakpoint';
 export * from './lib/spacing';
+export * from './lib/spacing-rem';
 export * from './lib/theme';

package/styles/js/index.es.js

@@ -26,7 +26,6 @@ const r = {
   6: "6px",
   8: "8px",
   12: "12px",
-  14: "14px",
   16: "16px",
   20: "20px",
   24: "24px",
@@ -39,6 +38,26 @@ const r = {
   96: "96px",
   128: "128px",
   160: "160px"
+}, d = {
+  0: "0rem",
+  1: "0.0625rem",
+  2: "0.125rem",
+  4: "0.25rem",
+  6: "0.375rem",
+  8: "0.5rem",
+  12: "0.75rem",
+  16: "1rem",
+  20: "1.25rem",
+  24: "1.5rem",
+  32: "2rem",
+  40: "2.5rem",
+  48: "3rem",
+  56: "3.5rem",
+  64: "4rem",
+  80: "5rem",
+  96: "6rem",
+  128: "8rem",
+  160: "10rem"
 }, e = {
   black: {
     base: "#050505",
@@ -102,7 +121,7 @@ const r = {
     light: "#FDECC3",
     mid: "#FED277"
   }
-}, d = {
+}, s = {
   light: {
     background: {
       brandDisabled: e.grey.mid,
@@ -244,6 +263,7 @@ export {
   r as DS_ANIMATION,
   a as DS_BREAKPOINT,
   e as DS_COLOR_CORE,
-  d as DS_COLOR_TOKEN,
-  i as DS_SPACING
+  s as DS_COLOR_TOKEN,
+  i as DS_SPACING,
+  d as DS_SPACING_REM
 };

package/styles/js/lib/spacing-rem.d.ts

@@ -0,0 +1,21 @@
+export declare const DS_SPACING_REM: {
+    0: string;
+    1: string;
+    2: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+    56: string;
+    64: string;
+    80: string;
+    96: string;
+    128: string;
+    160: string;
+};

package/styles/js/lib/spacing.d.ts

@@ -6,7 +6,6 @@ export declare const DS_SPACING: {
     6: string;
     8: string;
     12: string;
-    14: string;
     16: string;
     20: string;
     24: string;