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

package/radio.DTO5-Yzf.js

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

package/select.Dx80W7cW.js

@@ -1,190 +0,0 @@
-"use client";
-import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as _ } from "./chunks/index.CvOaL64Y.js";
-import { useRef as C, useState as q, useEffect as W } from "react";
-import { u as F } from "./chunks/useBreakpoint.5xBNDiCf.js";
-import { Asterisk as M } from "./asterisk.BlYjsfkN.js";
-import { DSIcon as O } from "./icon.CmAhxgHK.js";
-import { DSSystemFeedback as V } from "./systemfeedback.rBgdiL5T.js";
-import { g as u } from "./chunks/helpers.B1JT5ShS.js";
-import './assets/select.DLOQ6wu0.css';const J = "_root_1kpli_187", K = "_hint_1kpli_195", Q = "_label_1kpli_195", T = "_wrapper_1kpli_199", U = "_affix_1kpli_205", X = "_affix--small_1kpli_225", Y = "_affix--disabled_1kpli_237", Z = "_prefix_1kpli_240", z = "_affix--readonly_1kpli_243", G = "_suffix_1kpli_253", ee = "_action-button_1kpli_260", le = "_label--hidden_1kpli_277", te = "_feedback_1kpli_304", se = "_select-wrapper_1kpli_309", ne = "_select_1kpli_309", ae = "_select--invalid_1kpli_428", ie = "_select--small_1kpli_435", ce = "_input--has-leading-icon_1kpli_481", oe = "_input--has-action-button_1kpli_484", re = "_input--has-second-action-button_1kpli_487", _e = "_select--has-leading-icon_1kpli_490", de = "_select--has-action-button_1kpli_493", pe = "_select--has-second-action-button_1kpli_496", fe = "_select--has-affix_1kpli_499", ue = "_select--is-ready_1kpli_511", he = "_select--placeholder_1kpli_523", be = "_chevron_1kpli_532", ke = "_chevron--small_1kpli_536", me = "_chevron--disabled_1kpli_539", e = {
-  root: J,
-  hint: K,
-  label: Q,
-  wrapper: T,
-  affix: U,
-  "affix--small": "_affix--small_1kpli_225",
-  affixSmall: X,
-  "affix--disabled": "_affix--disabled_1kpli_237",
-  affixDisabled: Y,
-  prefix: Z,
-  "affix--readonly": "_affix--readonly_1kpli_243",
-  affixReadonly: z,
-  suffix: G,
-  "action-button": "_action-button_1kpli_260",
-  actionButton: ee,
-  "label--hidden": "_label--hidden_1kpli_277",
-  labelHidden: le,
-  feedback: te,
-  "select-wrapper": "_select-wrapper_1kpli_309",
-  selectWrapper: se,
-  select: ne,
-  "select--invalid": "_select--invalid_1kpli_428",
-  selectInvalid: ae,
-  "select--small": "_select--small_1kpli_435",
-  selectSmall: ie,
-  "input--has-leading-icon": "_input--has-leading-icon_1kpli_481",
-  inputHasLeadingIcon: ce,
-  "input--has-action-button": "_input--has-action-button_1kpli_484",
-  inputHasActionButton: oe,
-  "input--has-second-action-button": "_input--has-second-action-button_1kpli_487",
-  inputHasSecondActionButton: re,
-  "select--has-leading-icon": "_select--has-leading-icon_1kpli_490",
-  selectHasLeadingIcon: _e,
-  "select--has-action-button": "_select--has-action-button_1kpli_493",
-  selectHasActionButton: de,
-  "select--has-second-action-button": "_select--has-second-action-button_1kpli_496",
-  selectHasSecondActionButton: pe,
-  "select--has-affix": "_select--has-affix_1kpli_499",
-  selectHasAffix: fe,
-  "select--is-ready": "_select--is-ready_1kpli_511",
-  selectIsReady: ue,
-  "select--placeholder": "_select--placeholder_1kpli_523",
-  selectPlaceholder: he,
-  chevron: be,
-  "chevron--small": "_chevron--small_1kpli_536",
-  chevronSmall: ke,
-  "chevron--disabled": "_chevron--disabled_1kpli_539",
-  chevronDisabled: me
-}, xe = ({
-  id: l,
-  label: a,
-  options: n
-}) => {
-  if (!l)
-    throw new Error(
-      u(
-        "DSSelect",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
-      )
-    );
-  if (!a)
-    throw new Error(
-      u(
-        "DSSelect",
-        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`
-      )
-    );
-  if (!n || n.length === 0)
-    throw new Error(
-      u(
-        "DSSelect",
-        'Options are always required. Please add an "options" prop to the DSSelect component.'
-      )
-    );
-}, ve = (l, a, n) => l === "" || a !== void 0 && a !== "" ? !1 : !(n !== void 0 && n !== ""), Ae = ({
-  id: l,
-  label: a,
-  options: n,
-  className: H,
-  defaultValue: h,
-  disabled: b = !1,
-  hideLabel: w = !1,
-  hint: d,
-  invalid: r = !1,
-  placeholder: p = "Select",
-  required: k = !1,
-  size: m = "medium",
-  systemFeedback: f,
-  value: x,
-  ...D
-}) => {
-  process.env.NODE_ENV !== "production" && xe({
-    id: l,
-    label: a,
-    options: n
-  });
-  const o = C(null), [I, j] = q(
-    ve(p, h, x)
-  );
-  W(() => {
-    if (!o.current)
-      return;
-    const i = () => {
-      if (!o.current)
-        return;
-      const c = o.current.value;
-      j(c === "");
-    }, s = o.current;
-    return s.addEventListener("change", i), () => {
-      s.removeEventListener("change", i);
-    };
-  }, []);
-  const A = F(w), v = `${l}-label`, S = `${l}-feedback`, g = `${l}-hint`, B = d ? ` ${g}` : "", N = (i) => [
-    p && /* @__PURE__ */ t.jsx("option", { value: "", children: p }, `${l}-hidden-option-disabled-placeholder`),
-    ...i.map((s) => {
-      if ("options" in s) {
-        const { label: c, options: $ } = s;
-        return /* @__PURE__ */ t.jsx("optgroup", { label: c, children: $.map(y) }, c);
-      } else
-        return y(s);
-    })
-  ], y = ({ label: i, value: s, isDisabled: c }) => /* @__PURE__ */ t.jsx("option", { value: s, disabled: c, children: i }, s), P = _(e.root, H), E = _(e.select, {
-    [e.selectSmall]: m === "small",
-    [e.selectInvalid]: r,
-    [e.selectPlaceholder]: I
-  }), L = _(e.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [e.labelHidden]: A
-  }), R = _(e.chevron, {
-    [e.chevronSmall]: m === "small",
-    [e.chevronDisabled]: b
-  });
-  return /* @__PURE__ */ t.jsxs("div", { className: P, children: [
-    /* @__PURE__ */ t.jsxs("label", { className: L, id: v, htmlFor: l, children: [
-      a,
-      k && /* @__PURE__ */ t.jsx(M, {})
-    ] }),
-    d && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: g, children: d }),
-    r && f && /* @__PURE__ */ t.jsx(
-      V,
-      {
-        className: e.feedback,
-        message: f,
-        type: "invalid",
-        id: S,
-        "aria-live": "assertive"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
-      /* @__PURE__ */ t.jsx(
-        "select",
-        {
-          ...D,
-          id: l,
-          ref: o,
-          className: E,
-          "aria-labelledby": `${v}${B}`,
-          "aria-describedby": r && f ? S : void 0,
-          "aria-invalid": r,
-          defaultValue: h,
-          value: x,
-          disabled: b,
-          required: k,
-          children: N(n)
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        O,
-        {
-          name: "chevron-down",
-          className: R,
-          "aria-hidden": "true"
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Ae as DSSelect
-};

package/switch.BwGtQdnx.js

@@ -1,65 +0,0 @@
-"use client";
-import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as u } from "./chunks/index.CvOaL64Y.js";
-import "react";
-import { DSIcon as b } from "./icon.CmAhxgHK.js";
-import { DSSpinner as p } from "./spinner.CSzQEBx2.js";
-import './assets/switch.DVlaePGM.css';const f = "_root_ik5go_63", x = "_root--label-right_ik5go_91", j = "_root--stretched_ik5go_94", S = "_loader_ik5go_104", w = "_thumb_ik5go_157", C = "_root--checked_ik5go_172", o = {
-  root: f,
-  "root--label-right": "_root--label-right_ik5go_91",
-  rootLabelRight: x,
-  "root--stretched": "_root--stretched_ik5go_94",
-  rootStretched: j,
-  switch: "_switch_ik5go_99",
-  loader: S,
-  thumb: w,
-  "root--checked": "_root--checked_ik5go_172",
-  rootChecked: C
-}, E = ({
-  children: i,
-  aria: h,
-  alignLabel: l = "left",
-  checked: e = !1,
-  className: _,
-  dataTrackingid: n,
-  disabled: s = !1,
-  loading: r = !1,
-  stretched: d = !1,
-  onClick: a,
-  ...m
-}) => {
-  const k = u(o.root, _, {
-    [o.rootChecked]: e === !0,
-    [o.rootStretched]: d === !0,
-    [o.rootLabelRight]: l === "right"
-  }), g = (c) => {
-    if (s || r) {
-      c.preventDefault();
-      return;
-    }
-    a && a(c);
-  };
-  return /* @__PURE__ */ t.jsxs(
-    "button",
-    {
-      className: k,
-      "data-trackingid": n,
-      onClick: g,
-      ...h,
-      ...m,
-      type: "button",
-      role: "switch",
-      "aria-checked": e,
-      "aria-disabled": s || r,
-      "aria-busy": r,
-      children: [
-        /* @__PURE__ */ t.jsx("span", { children: i }),
-        !r && /* @__PURE__ */ t.jsx("span", { className: o.switch, children: /* @__PURE__ */ t.jsx("span", { className: o.thumb, children: /* @__PURE__ */ t.jsx(b, { name: "check", "aria-hidden": "true" }) }) }),
-        r && /* @__PURE__ */ t.jsx("span", { className: o.loader, children: /* @__PURE__ */ t.jsx(p, { aria: { "aria-label": "Loading state" } }) })
-      ]
-    }
-  );
-};
-export {
-  E as DSSwitch
-};

package/textarea.C8tp1ciU.js

@@ -1,193 +0,0 @@
-"use client";
-import { j as n } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as g } from "./chunks/index.CvOaL64Y.js";
-import { useState as c, useRef as oa, useEffect as b } from "react";
-import { u as ia, h as sa } from "./chunks/useBreakpoint.5xBNDiCf.js";
-import { g as k, p as H } from "./chunks/helpers.B1JT5ShS.js";
-import { Asterisk as ra } from "./asterisk.BlYjsfkN.js";
-import { DSSystemFeedback as la } from "./systemfeedback.rBgdiL5T.js";
-import './assets/textarea.BNOpd7Nf.css';const ca = "_textarea_au2z2_187", ua = "_textarea--invalid_au2z2_297", da = "_textarea--small_au2z2_304", _a = "_textarea--resize-auto_au2z2_316", fa = "_root_au2z2_326", xa = "_hint_au2z2_334", ba = "_label_au2z2_334", ha = "_affix_au2z2_338", ma = "_affix--small_au2z2_358", za = "_affix--disabled_au2z2_370", pa = "_prefix_au2z2_373", va = "_affix--readonly_au2z2_376", ga = "_suffix_au2z2_386", Sa = "_leading-icon_au2z2_393", Ca = "_leading-icon--small_au2z2_405", Ia = "_leading-icon--disabled_au2z2_408", ya = "_action-button_au2z2_417", ja = "_label--hidden_au2z2_434", wa = "_feedback_au2z2_461", Aa = "_char-count_au2z2_466", Da = "_char-count-announcer_au2z2_481", t = {
-  textarea: ca,
-  "textarea--invalid": "_textarea--invalid_au2z2_297",
-  textareaInvalid: ua,
-  "textarea--small": "_textarea--small_au2z2_304",
-  textareaSmall: da,
-  "textarea--resize-auto": "_textarea--resize-auto_au2z2_316",
-  textareaResizeAuto: _a,
-  root: fa,
-  hint: xa,
-  label: ba,
-  affix: ha,
-  "affix--small": "_affix--small_au2z2_358",
-  affixSmall: ma,
-  "affix--disabled": "_affix--disabled_au2z2_370",
-  affixDisabled: za,
-  prefix: pa,
-  "affix--readonly": "_affix--readonly_au2z2_376",
-  affixReadonly: va,
-  suffix: ga,
-  "leading-icon": "_leading-icon_au2z2_393",
-  leadingIcon: Sa,
-  "leading-icon--small": "_leading-icon--small_au2z2_405",
-  leadingIconSmall: Ca,
-  "leading-icon--disabled": "_leading-icon--disabled_au2z2_408",
-  leadingIconDisabled: Ia,
-  "action-button": "_action-button_au2z2_417",
-  actionButton: ya,
-  "label--hidden": "_label--hidden_au2z2_434",
-  labelHidden: ja,
-  feedback: wa,
-  "char-count": "_char-count_au2z2_466",
-  charCount: Aa,
-  "char-count-announcer": "_char-count-announcer_au2z2_481",
-  charCountAnnouncer: Da
-}, Ra = ({ id: o, label: d }) => {
-  if (!o)
-    throw new Error(
-      k(
-        "DSTextarea",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
-      )
-    );
-  if (!d)
-    throw new Error(
-      k(
-        "DSTextarea",
-        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`
-      )
-    );
-}, Va = ({
-  id: o,
-  label: d,
-  charsLimitText: V = "Character limit reached",
-  charsRemainingText: P = "Characters remaining:",
-  className: q,
-  defaultValue: M,
-  disabled: O = !1,
-  hint: h,
-  hideLabel: F = !1,
-  invalid: i = !1,
-  maxLength: a,
-  readonly: S = !1,
-  required: C = !1,
-  resize: _ = "vertical",
-  size: W = "medium",
-  systemFeedback: r,
-  value: m,
-  wrapperClassName: G,
-  onChange: I,
-  onInput: y,
-  ...J
-}) => {
-  process.env.NODE_ENV !== "production" && Ra({
-    id: o,
-    label: d
-  });
-  const [K, j] = c(M || ""), [l, w] = c(0), [Q, A] = c(0), [U, D] = c("off"), [R, z] = c(r), [p, v] = c(i), N = m !== void 0, f = N ? m : K, s = oa(null), X = ia(F);
-  b(() => {
-    if (!a || a <= 0)
-      return;
-    l >= a * 0.8 ? D("polite") : D("off");
-    const e = setTimeout(() => {
-      A(a - l || 0);
-    }, 1e3);
-    return () => clearTimeout(e);
-  }, [l]), b(() => {
-    j(f || ""), u(), a && a > 0 && (w(f.toString().length || 0), A(a - f.toString().length || 0));
-  }, [m]), b(() => {
-    i && r ? (z(r), v(i)) : !i && a && a >= 0 && l >= a ? (v(!0), z(V)) : (z(r), v(i));
-  }, [i, p, r, l]), b(() => {
-    if (sa && _ === "auto")
-      return u(), window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
-  }, [_, s.current]);
-  const Y = g(t.root, G), Z = g(t.textarea, q, {
-    // small textarea
-    [t.textareaSmall]: W === "small",
-    // invalid state
-    [t.textareaInvalid]: p,
-    // resize handling
-    [t.textareaResizeAuto]: _ === "auto"
-  }), L = g(t.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: X
-  }), T = `${o}-label`, B = `${o}-feedback`, E = `${o}-hint`, $ = `${o}-char-count-announcer`, aa = h ? ` ${E}` : "", u = () => {
-    if (s.current && _ === "auto") {
-      s.current.style.height = "auto";
-      const e = H(s.current.scrollHeight), x = H(2);
-      s.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
-      // from jumping as soon as the user starts typing.
-      e + x}rem`;
-    }
-  }, ea = () => {
-    const e = [];
-    return a && a > 0 && e.push($), i && r && e.push(B), e.length > 0 ? e.join(" ") : void 0;
-  }, ta = (e) => {
-    var x;
-    y && y(e), a && a > 0 && w(((x = s.current) == null ? void 0 : x.value.length) || 0), u();
-  }, na = (e) => {
-    I && I(e), N || j(e.target.value);
-  };
-  return /* @__PURE__ */ n.jsxs("div", { className: Y, children: [
-    /* @__PURE__ */ n.jsxs("label", { className: L, id: T, htmlFor: o, children: [
-      d,
-      C && /* @__PURE__ */ n.jsx(ra, {})
-    ] }),
-    h && /* @__PURE__ */ n.jsx("div", { className: t.hint, id: E, children: h }),
-    p && R && /* @__PURE__ */ n.jsx(
-      la,
-      {
-        className: t.feedback,
-        message: R,
-        type: "invalid",
-        id: B
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      "textarea",
-      {
-        className: Z,
-        id: o,
-        ref: s,
-        ...J,
-        "aria-labelledby": `${T}${aa}`,
-        "aria-describedby": ea(),
-        "aria-invalid": i,
-        "aria-disabled": S,
-        maxLength: a,
-        readOnly: S,
-        required: C,
-        disabled: O,
-        value: f,
-        defaultValue: void 0,
-        rows: void 0,
-        cols: void 0,
-        onChange: na,
-        onInput: ta
-      }
-    ),
-    a !== void 0 && a > 0 && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
-        l,
-        "/",
-        a
-      ] }),
-      /* @__PURE__ */ n.jsxs(
-        "div",
-        {
-          className: t.charCountAnnouncer,
-          id: $,
-          "aria-live": U,
-          "aria-atomic": "true",
-          children: [
-            P,
-            " ",
-            Q
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Va as DSTextarea
-};

package/title.BT-uIobN.js

@@ -1,36 +0,0 @@
-"use client";
-import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c } from "./chunks/index.CvOaL64Y.js";
-import './assets/title.1dq1eWy9.css';const n = "_root_1yriq_63", h = "_root--x-large_1yriq_66", m = "_root--large_1yriq_80", d = "_root--theme-dark_1yriq_94", x = "_dash_1yriq_97", r = {
-  root: n,
-  "root--x-large": "_root--x-large_1yriq_66",
-  rootXLarge: h,
-  "root--large": "_root--large_1yriq_80",
-  rootLarge: m,
-  "root--theme-dark": "_root--theme-dark_1yriq_94",
-  rootThemeDark: d,
-  dash: x
-}, k = ({
-  children: e,
-  className: a,
-  size: o = "x-large",
-  tag: s = "h1",
-  // Design suggested to set default tag to h1
-  theme: _ = "light",
-  ...l
-}) => {
-  const g = s, i = c(r.root, a, {
-    // sizes
-    [r.rootXLarge]: o === "x-large",
-    [r.rootLarge]: o === "large",
-    // dark theme
-    [r.rootThemeDark]: _ === "dark"
-  });
-  return /* @__PURE__ */ t.jsxs(g, { className: i, ...l, children: [
-    e,
-    /* @__PURE__ */ t.jsx("span", { className: r.dash, "aria-hidden": "true", children: "ƒ" })
-  ] });
-};
-export {
-  k as DSTitle
-};