@stihl-design-system/components 1.0.0-RC.2 → 1.0.0-RC.3

package/inputstepper.BBMQr6kM.js

@@ -0,0 +1,290 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import { useState as f, useRef as N, useEffect as w, useLayoutEffect as M } from "react";
+import { u as bn } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as mn } from "./asterisk.DU8THnoC.js";
+import { DSButton as X } from "./button.BUUGRxIp.js";
+import { M as E, b as H } from "./chunks/Input.utils.Bly6ZzLI.js";
+import { DSSystemFeedback as hn } from "./systemfeedback.C7iXO5A1.js";
+import { g as y } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/inputstepper.paPJix5A.css';const xn = "_input_134nb_187", Sn = "_input--invalid_134nb_298", yn = "_input--small_134nb_305", In = "_input--has-leading-icon_134nb_351", vn = "_input--has-action-button_134nb_354", gn = "_input--has-second-action-button_134nb_357", An = "_input--has-affix_134nb_369", Bn = "_input--is-ready_134nb_381", Dn = "_root_134nb_388", Nn = "_hint_134nb_396", wn = "_label_134nb_396", En = "_wrapper_134nb_400", Hn = "_affix_134nb_406", Ln = "_affix--small_134nb_426", jn = "_affix--disabled_134nb_438", Rn = "_prefix_134nb_441", kn = "_affix--readonly_134nb_444", Cn = "_suffix_134nb_454", $n = "_action-button_134nb_461", Fn = "_label--hidden_134nb_478", Vn = "_feedback_134nb_505", Pn = "_second-action-button_134nb_519", Tn = "_value-announcer_134nb_523", t = {
+  input: xn,
+  "input--invalid": "_input--invalid_134nb_298",
+  inputInvalid: Sn,
+  "input--small": "_input--small_134nb_305",
+  inputSmall: yn,
+  "input--has-leading-icon": "_input--has-leading-icon_134nb_351",
+  inputHasLeadingIcon: In,
+  "input--has-action-button": "_input--has-action-button_134nb_354",
+  inputHasActionButton: vn,
+  "input--has-second-action-button": "_input--has-second-action-button_134nb_357",
+  inputHasSecondActionButton: gn,
+  "input--has-affix": "_input--has-affix_134nb_369",
+  inputHasAffix: An,
+  "input--is-ready": "_input--is-ready_134nb_381",
+  inputIsReady: Bn,
+  root: Dn,
+  hint: Nn,
+  label: wn,
+  wrapper: En,
+  affix: Hn,
+  "affix--small": "_affix--small_134nb_426",
+  affixSmall: Ln,
+  "affix--disabled": "_affix--disabled_134nb_438",
+  affixDisabled: jn,
+  prefix: Rn,
+  "affix--readonly": "_affix--readonly_134nb_444",
+  affixReadonly: kn,
+  suffix: Cn,
+  "action-button": "_action-button_134nb_461",
+  actionButton: $n,
+  "label--hidden": "_label--hidden_134nb_478",
+  labelHidden: Fn,
+  feedback: Vn,
+  "second-action-button": "_second-action-button_134nb_519",
+  secondActionButton: Pn,
+  "value-announcer": "_value-announcer_134nb_523",
+  valueAnnouncer: Tn
+}, Wn = ({
+  id: a,
+  label: b,
+  prefix: m,
+  suffix: h
+}) => {
+  if (!a)
+    throw new Error(
+      y(
+        "DSInputStepper",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
+      )
+    );
+  if (!b)
+    throw new Error(
+      y(
+        "DSInputStepper",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputStepper component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+  m && m.length > E && console.warn(
+    y(
+      "DSInputStepper",
+      `Prefix length must not exceed ${E} characters.`
+    )
+  ), h && h.length > H && console.warn(
+    y(
+      "DSInputStepper",
+      `Suffix length must not exceed ${H} characters.`
+    )
+  );
+}, Yn = ({
+  id: a,
+  label: b,
+  announcementText: m = "Value changed to",
+  className: h,
+  disabled: d = !1,
+  decreaseAmountButtonLabel: q = "Decrease",
+  hint: I,
+  hideLabel: G = !1,
+  invalid: x = !1,
+  increaseAmountButtonLabel: O = "Increase",
+  prefix: u,
+  max: L = 100,
+  min: j = 0,
+  readonly: p = !1,
+  required: R = !1,
+  size: i = "medium",
+  step: U = 1,
+  suffix: r,
+  systemFeedback: v,
+  value: S,
+  onChange: k,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Wn({
+    id: a,
+    label: b,
+    prefix: u,
+    suffix: r
+  });
+  const [K, Q] = f(!1), [_, g] = f(S), [A, C] = f(""), [Y, Z] = f(!1), [z, nn] = f({}), s = N(null), tn = u == null ? void 0 : u.substring(0, E), B = N(null), en = r == null ? void 0 : r.substring(0, H), D = N(null), an = bn(G);
+  w(() => {
+    S && g(S);
+  }, [S]), w(() => {
+    if (A) {
+      const n = setTimeout(() => {
+        C("");
+      }, 3e3);
+      return () => clearTimeout(n);
+    }
+  }, [A]), w(() => {
+    var o;
+    const n = (l) => {
+      l.preventDefault();
+    };
+    return (o = s.current) == null || o.addEventListener("wheel", n, {
+      // The { passive: false } option is used to indicate that the event listener wants to cancel the event, allowing preventDefault to work as expected.
+      passive: !1
+    }), () => {
+      var l;
+      (l = s.current) == null || l.removeEventListener("wheel", n);
+    };
+  }, []), M(() => {
+    const n = i === "medium" ? 16 : 8, o = {};
+    if (B.current) {
+      const l = B.current.offsetWidth;
+      o.paddingInlineStart = n + l + "px";
+    }
+    if (D.current) {
+      const l = D.current.offsetWidth;
+      o.paddingInlineEnd = n + l + "px";
+    }
+    nn(o), Q(!0);
+  }, [u, r, i, Y]), M(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), Z(!0));
+    })();
+  }, []);
+  const $ = c(t.affix, {
+    [t.affixSmall]: i === "small",
+    [t.affixDisabled]: d,
+    [t.affixReadonly]: p
+  }), F = `${a}-label`, V = `${a}-feedback`, P = `${a}-hint`, T = `${a}-value-announcer`, sn = I ? ` ${P}` : "", on = c(t.root, h), ln = c(t.input, {
+    // small input
+    [t.inputSmall]: i === "small",
+    // invalid state
+    [t.inputInvalid]: x,
+    // prefix/suffix
+    [t.inputHasAffix]: u || r,
+    [t.inputIsReady]: K
+  }), cn = c(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: an
+  }), un = c(t.secondActionButton, {
+    [t.secondActionButtonSmall]: i === "small"
+  }), rn = c(t.actionButton, {
+    [t.actionButtonSmall]: i === "small"
+  }), dn = () => {
+    const n = [T];
+    return x && v && n.push(V), n.join(" ");
+  }, W = () => {
+    var n;
+    if (s.current) {
+      g(s.current.value);
+      const o = new Event("change", { bubbles: !0 });
+      (n = s.current) == null || n.dispatchEvent(o), C(`${m} ${s.current.value}`);
+    }
+  }, pn = () => {
+    var n;
+    (n = s.current) == null || n.stepDown(), W();
+  }, _n = () => {
+    var n;
+    (n = s.current) == null || n.stepUp(), W();
+  }, fn = (n) => {
+    g(n.target.value), k && k(n);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: on, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: cn, id: F, htmlFor: a, children: [
+      b,
+      R && /* @__PURE__ */ e.jsx(mn, {})
+    ] }),
+    I && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: P, children: I }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: t.valueAnnouncer,
+        id: T,
+        children: A
+      }
+    ),
+    x && v && /* @__PURE__ */ e.jsx(
+      hn,
+      {
+        className: t.feedback,
+        message: v,
+        type: "invalid",
+        id: V
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
+      u && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, t.prefix),
+          ref: B,
+          "aria-disabled": d,
+          children: tn
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: ln,
+          id: a,
+          ref: s,
+          ...J,
+          style: z,
+          "aria-labelledby": `${F}${sn}`,
+          "aria-describedby": dn(),
+          "aria-invalid": x,
+          "aria-disabled": p,
+          disabled: d,
+          min: j,
+          max: L,
+          readOnly: p,
+          required: R,
+          step: U,
+          type: "number",
+          value: _,
+          onChange: fn
+        }
+      ),
+      r && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, t.suffix),
+          ref: D,
+          "aria-disabled": d,
+          children: en
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "minus",
+          variant: "filled",
+          className: un,
+          size: i,
+          onClick: pn,
+          disabled: d || p || !!_ && Number(_) <= j,
+          type: "button",
+          children: q
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "plus",
+          variant: "filled",
+          className: rn,
+          size: i,
+          onClick: _n,
+          disabled: d || p || !!_ && Number(_) >= L,
+          type: "button",
+          children: O
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Yn as DSInputStepper
+};

package/link.BN6AZfhG.js

@@ -0,0 +1,115 @@
+"use client";
+import { j as h } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as g } from "./chunks/index.CvOaL64Y.js";
+import { u as i } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { DSIcon as p } from "./icon.PX9_1kNB.js";
+import './assets/link.V7pJOW1p.css';const F = "_root_1rqzw_125", H = "_root--highlight_1rqzw_191", S = "_root--dark-highlight_1rqzw_191", x = "_root--filled_1rqzw_269", b = "_root--outline_1rqzw_297", j = "_root--ghost_1rqzw_324", L = "_root--ghost-flush_1rqzw_349", C = "_root--small_1rqzw_355", N = "_root--dark-filled_1rqzw_430", T = "_root--dark-outline_1rqzw_489", B = "_root--dark-ghost_1rqzw_547", E = "_root--dark-ghost-flush_1rqzw_603", R = "_root--icon-left_1rqzw_662", V = "_root--icon-only_1rqzw_678", A = "_root--icon-only-small_1rqzw_682", J = "_label--hidden_1rqzw_689", o = {
+  root: F,
+  "root--highlight": "_root--highlight_1rqzw_191",
+  rootHighlight: H,
+  "root--dark-highlight": "_root--dark-highlight_1rqzw_191",
+  rootDarkHighlight: S,
+  "root--filled": "_root--filled_1rqzw_269",
+  rootFilled: x,
+  "root--outline": "_root--outline_1rqzw_297",
+  rootOutline: b,
+  "root--ghost": "_root--ghost_1rqzw_324",
+  rootGhost: j,
+  "root--ghost-flush": "_root--ghost-flush_1rqzw_349",
+  rootGhostFlush: L,
+  "root--small": "_root--small_1rqzw_355",
+  rootSmall: C,
+  "root--dark-filled": "_root--dark-filled_1rqzw_430",
+  rootDarkFilled: N,
+  "root--dark-outline": "_root--dark-outline_1rqzw_489",
+  rootDarkOutline: T,
+  "root--dark-ghost": "_root--dark-ghost_1rqzw_547",
+  rootDarkGhost: B,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_1rqzw_603",
+  rootDarkGhostFlush: E,
+  "root--icon-left": "_root--icon-left_1rqzw_662",
+  rootIconLeft: R,
+  "root--icon-only": "_root--icon-only_1rqzw_678",
+  rootIconOnly: V,
+  "root--icon-only-small": "_root--icon-only-small_1rqzw_682",
+  rootIconOnlySmall: A,
+  "label--hidden": "_label--hidden_1rqzw_689",
+  labelHidden: J
+}, U = ({
+  children: c,
+  aria: k,
+  className: u,
+  dataTrackingid: q,
+  download: w,
+  hideLabel: _ = !1,
+  href: n,
+  iconName: e,
+  iconPosition: f = "left",
+  iconSource: a,
+  isFlush: l = !1,
+  referrerPolicy: z,
+  rel: m,
+  size: s = "medium",
+  target: D = "_self",
+  theme: r = "light",
+  variant: t = "filled",
+  ...y
+}) => {
+  const G = g(o.root, u, {
+    // variant
+    [o.rootFilled]: t === "filled",
+    [o.rootHighlight]: t === "highlight",
+    [o.rootOutline]: t === "outline",
+    [o.rootGhost]: t === "ghost" && l !== !0,
+    // isFlush
+    [o.rootGhostFlush]: t === "ghost" && l === !0,
+    // dark theme
+    [o.rootDarkFilled]: r === "dark" && t === "filled",
+    [o.rootDarkHighlight]: r === "dark" && t === "highlight",
+    [o.rootDarkOutline]: r === "dark" && t === "outline",
+    [o.rootDarkGhost]: r === "dark" && t === "ghost" && l !== !0,
+    // dark isFlush
+    [o.rootDarkGhostFlush]: r === "dark" && t === "ghost" && l === !0,
+    // size
+    [o.rootSmall]: s === "small",
+    // icon position
+    [o.rootIconLeft]: f === "left",
+    // icon only
+    [o.rootIconOnly]: i(_) && s === "medium",
+    [o.rootIconOnlySmall]: i(_) && s === "small"
+  }), O = g({
+    // hide label only visually to keep them available for assistive technologies
+    [o.labelHidden]: i(_)
+  }), I = r === "light" && t === "filled" || r === "dark" && t === "outline" || r === "dark" && t === "ghost" ? "dark" : "light", d = n === void 0 ? "span" : "a";
+  return /* @__PURE__ */ h.jsxs(
+    d,
+    {
+      className: G,
+      "data-trackingid": q,
+      ...d === "a" && {
+        href: n,
+        target: D,
+        rel: m,
+        referrerPolicy: z,
+        download: w
+      },
+      ...k,
+      ...y,
+      children: [
+        /* @__PURE__ */ h.jsx("span", { className: O, children: c }),
+        (e || a) && /* @__PURE__ */ h.jsx(
+          p,
+          {
+            name: e,
+            theme: I,
+            source: a,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  U as DSLink
+};

package/linkstandalone.4-fyRd08.js

@@ -0,0 +1,79 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as x } from "./chunks/index.CvOaL64Y.js";
+import { DSIcon as H } from "./icon.PX9_1kNB.js";
+import "react";
+import './assets/linkstandalone.D3RbBp23.css';const j = "_root_p84sd_63", v = "_root--highlight_p84sd_134", L = "_root--neutral-dark_p84sd_205", N = "_root--highlight-dark_p84sd_276", I = "_root--active_p84sd_347", A = "_root--icon-left_p84sd_353", o = {
+  root: j,
+  "root--highlight": "_root--highlight_p84sd_134",
+  rootHighlight: v,
+  "root--neutral-dark": "_root--neutral-dark_p84sd_205",
+  rootNeutralDark: L,
+  "root--highlight-dark": "_root--highlight-dark_p84sd_276",
+  rootHighlightDark: N,
+  "root--active": "_root--active_p84sd_347",
+  rootActive: I,
+  "root--icon-left": "_root--icon-left_p84sd_353",
+  rootIconLeft: A
+}, C = ({
+  children: e,
+  aria: _,
+  active: g,
+  className: n,
+  dataTrackingid: c,
+  download: d,
+  href: s,
+  iconName: a,
+  iconPosition: p = "left",
+  iconSource: l,
+  referrerPolicy: k,
+  rel: u,
+  target: f = "_self",
+  theme: t = "light",
+  variant: r = "neutral",
+  ...m
+}) => {
+  const D = x(o.root, n, {
+    // variant
+    [o.rootHighlight]: r === "highlight",
+    // theme
+    [o.rootNeutralDark]: t === "dark" && r === "neutral",
+    [o.rootHighlightDark]: t === "dark" && r === "highlight",
+    // active
+    [o.rootActive]: g,
+    // icon position
+    [o.rootIconLeft]: p === "left"
+  }), h = s === void 0 ? "span" : "a";
+  return /* @__PURE__ */ i.jsxs(
+    h,
+    {
+      className: D,
+      "data-trackingid": c,
+      ...h === "a" && {
+        href: s,
+        target: f,
+        rel: u,
+        referrerPolicy: k,
+        download: d
+      },
+      ..._,
+      ...m,
+      children: [
+        /* @__PURE__ */ i.jsx("span", { className: o.label, children: e }),
+        (a || l) && /* @__PURE__ */ i.jsx(
+          H,
+          {
+            name: a,
+            theme: t,
+            source: l,
+            size: "medium",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C as DSLinkStandalone
+};

package/{logo.DXWgPUY4.js → logo.C_oJ8isW.js}

@@ -1,32 +1,33 @@
 "use client";
 import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as o } from "./chunks/index.CvOaL64Y.js";
-import './assets/logo.BbHYgnWo.css';const v = "_anchor_12s9w_63", k = "_svg_12s9w_64", e = "_anchor--dark_12s9w_103", d = "_svg-background_12s9w_134", x = "_svg-background--dark_12s9w_137", w = "_svg-text_12s9w_140", u = "_svg-text--dark_12s9w_143", s = {
-  anchor: v,
-  svg: k,
+import { c as n } from "./chunks/index.CvOaL64Y.js";
+import './assets/logo.BbHYgnWo.css';const l = "_anchor_12s9w_63", v = "_svg_12s9w_64", e = "_anchor--dark_12s9w_103", x = "_svg-background_12s9w_134", w = "_svg-background--dark_12s9w_137", u = "_svg-text_12s9w_140", i = "_svg-text--dark_12s9w_143", s = {
+  anchor: l,
+  svg: v,
   "anchor--dark": "_anchor--dark_12s9w_103",
   anchorDark: e,
   "svg-background": "_svg-background_12s9w_134",
-  svgBackground: d,
+  svgBackground: x,
   "svg-background--dark": "_svg-background--dark_12s9w_137",
-  svgBackgroundDark: x,
+  svgBackgroundDark: w,
   "svg-text": "_svg-text_12s9w_140",
-  svgText: w,
+  svgText: u,
   "svg-text--dark": "_svg-text--dark_12s9w_143",
-  svgTextDark: u
-}, D = ({
-  aria: n,
-  className: g,
+  svgTextDark: i
+}, B = ({
+  aria: _,
+  className: c,
   href: r,
   target: h = "_self",
-  theme: _ = "light",
-  ...l
+  theme: g,
+  variant: k = "standard",
+  ...d
 }) => {
-  const c = _ === "dark", t = /* @__PURE__ */ a.jsxs(
+  const t = k === "background" || g === "dark", o = /* @__PURE__ */ a.jsxs(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: o(s.svg, !r && g),
+      className: n(s.svg, !r && c),
       viewBox: "0 0 408 179",
       width: "100%",
       height: "100%",
@@ -35,14 +36,14 @@ import './assets/logo.BbHYgnWo.css';const v = "_anchor_12s9w_63", k = "_svg_12s9
         /* @__PURE__ */ a.jsx(
           "path",
           {
-            className: c ? s.svgBackgroundDark : s.svgBackground,
+            className: t ? s.svgBackgroundDark : s.svgBackground,
             d: "M408 0H0v179h408V0Z"
           }
         ),
         /* @__PURE__ */ a.jsx(
           "path",
           {
-            className: c ? s.svgTextDark : s.svgText,
+            className: t ? s.svgTextDark : s.svgText,
             d: "M195.459 56.314h-61.656l-4.936 16.193h20.668l-15.304 50.179h20.106l15.293-50.18h20.893l4.936-16.192ZM62.286 66.62l-5.353 17.558c-2.384 7.814 1.957 13.531 9.637 13.531h25.065a1.626 1.626 0 0 1 1.288.7 1.638 1.638 0 0 1 .207 1.454l-1.349 4.42a3.37 3.37 0 0 1-2.8 2.154H49.624l-4.993 16.249h50.816c5.622 0 10.39-2.605 12.842-10.645l5.094-16.677c2.406-7.894-2.081-13.532-9.086-13.532H79.108c-1.394 0-1.945-1.015-1.563-2.255l1.35-4.42a3.385 3.385 0 0 1 1.185-1.872 3.368 3.368 0 0 1 2.087-.733h36.253l4.937-16.193H75.251c-6.87-.045-11.155 4.364-12.965 10.261ZM320.571 106.493l15.304-50.18h-20.218l-20.23 66.373h63.017l4.936-16.193h-42.809ZM282.653 56.314l-7.771 25.484H250.83l7.77-25.484h-19.319l-20.23 66.372h19.308l7.736-25.372h24.053l-7.725 25.372h19.836l20.23-66.372h-19.836ZM205.917 56.314l-20.229 66.372h20.218l20.23-66.372h-20.219Z"
           }
         )
@@ -52,17 +53,17 @@ import './assets/logo.BbHYgnWo.css';const v = "_anchor_12s9w_63", k = "_svg_12s9
   return r ? /* @__PURE__ */ a.jsx(
     "a",
     {
-      className: o(s.anchor, g, {
-        [s.anchorDark]: c
+      className: n(s.anchor, c, {
+        [s.anchorDark]: g === "dark"
       }),
       href: r,
       target: h,
-      ...n,
-      ...l,
-      children: t
+      ..._,
+      ...d,
+      children: o
     }
-  ) : t;
+  ) : o;
 };
 export {
-  D as DSLogo
+  B as DSLogo
 };

package/{optioncheckbox.CYikfEsE.js → optioncheckbox.-DRnW_ch.js}

@@ -1,7 +1,7 @@
 "use client";
 import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
 import { c as s } from "./chunks/index.CvOaL64Y.js";
-import { DSIcon as _ } from "./icon.CmAhxgHK.js";
+import { DSIcon as _ } from "./icon.PX9_1kNB.js";
 import './assets/optioncheckbox.C-K1FLhc.css';const l = "_root_1sig6_125", k = "_root--disabled_1sig6_144", d = "_checkbox_1sig6_148", n = "_icon-check_1sig6_162", r = "_checkbox--checked_1sig6_181", x = "_checkbox--disabled_1sig6_184", m = "_label_1sig6_201", c = {
   root: l,
   "root--disabled": "_root--disabled_1sig6_144",

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.2",
+  "version": "1.0.0-RC.3",
   "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://designsystem.stihl.de",
+  "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
   "keywords": [
     "stihl",
     "design",

package/radio.Bhu9OUY-.js

@@ -0,0 +1,79 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as i } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as H, useRef as I, useState as R, useCallback as S } from "react";
+import { u as g } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import './assets/radio.CSHQGdpr.css';const B = "_root_vnfdb_63", V = "_root--disabled_vnfdb_82", w = "_radio_vnfdb_86", E = "_dot_vnfdb_101", L = "_radio--invalid_vnfdb_123", O = "_label_vnfdb_128", P = "_label--hidden_vnfdb_138", U = "_input_vnfdb_151", o = {
+  root: B,
+  "root--disabled": "_root--disabled_vnfdb_82",
+  rootDisabled: V,
+  radio: w,
+  dot: E,
+  "radio--invalid": "_radio--invalid_vnfdb_123",
+  radioInvalid: L,
+  label: O,
+  "label--hidden": "_label--hidden_vnfdb_138",
+  labelHidden: P,
+  input: U
+}, q = H(
+  ({
+    label: l,
+    name: c,
+    value: _,
+    defaultChecked: f = !1,
+    disabled: n = !1,
+    hideLabel: b = !1,
+    checked: r,
+    invalid: u = !1,
+    className: v,
+    onChange: d,
+    ...m
+  }, s) => {
+    const p = I(null), [h, x] = R(f), t = r !== void 0, C = t ? r : h, j = g(b), k = i(
+      o.root,
+      {
+        [o.rootDisabled]: n
+      },
+      v
+    ), N = i(o.label, {
+      // hide label only visually to keep them available for assistive technologies
+      [o.labelHidden]: j
+    }), D = i(o.radio, {
+      [o.radioInvalid]: u
+    }), y = S(
+      (a) => {
+        if (n) {
+          a.preventDefault();
+          return;
+        }
+        t || x(a.target.checked), d && d(a);
+      },
+      [n, t, d]
+    );
+    return /* @__PURE__ */ e.jsxs("label", { className: k, children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "radio",
+          value: _,
+          name: c,
+          className: o.input,
+          ref: (a) => {
+            typeof s == "function" ? s(a) : s !== null && (s.current = a), p.current = a;
+          },
+          onChange: y,
+          ...m,
+          disabled: n,
+          checked: C,
+          "aria-label": typeof l == "string" ? l : void 0
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { className: D, children: /* @__PURE__ */ e.jsx("div", { className: o.dot }) }),
+      /* @__PURE__ */ e.jsx("span", { className: N, children: l })
+    ] });
+  }
+);
+q.displayName = "DSRadio";
+export {
+  q as DSRadio
+};

package/{radiogroup.7ptQiohb.js → radiogroup.oILRMrX-.js}

@@ -2,9 +2,9 @@
 import { j as d } from "./chunks/jsx-runtime.C-kxDJ4g.js";
 import { c as N } from "./chunks/index.CvOaL64Y.js";
 import { forwardRef as P, useState as C } from "react";
-import { DSFieldset as y } from "./fieldset.yE6WV6Ls.js";
-import { DSRadio as z } from "./radio.DTO5-Yzf.js";
-import { s as c } from "./chunks/RadioGroup.module.B35YQcsb.js";
+import { DSFieldset as y } from "./fieldset.DGcIKzDI.js";
+import { DSRadio as z } from "./radio.Bhu9OUY-.js";
+import { s as c } from "./chunks/RadioGroup.module.bi3leRes.js";
 import { g as a } from "./chunks/helpers.B1JT5ShS.js";
 const f = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, M = ({
   description: o,