@stihl-design-system/components 1.0.0-RC.0 → 1.0.0-RC.10

package/chunks/Notification.BhwbaXqk.js

@@ -0,0 +1,93 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c as s } from "./index.CvOaL64Y.js";
+import { DSButton as u } from "../button.DH0h6uPs.js";
+import { D as b } from "./Icon.C2o2seDb.js";
+import '../assets/Notification.DK6agBGS.css';const g = "_root_70bef_76", N = "_root--success_70bef_102", h = "_root--error_70bef_106", I = "_root--warning_70bef_110", x = "_root--hide-icon_70bef_114", A = "_content_70bef_128", C = "_content--hide-close-button_70bef_135", H = "_content--hide-icon_70bef_138", j = "_icon_70bef_142", S = "_message_70bef_146", p = "_custom-action-area_70bef_161", o = {
+  root: g,
+  "root--success": "_root--success_70bef_102",
+  rootSuccess: N,
+  "root--error": "_root--error_70bef_106",
+  rootError: h,
+  "root--warning": "_root--warning_70bef_110",
+  rootWarning: I,
+  "root--hide-icon": "_root--hide-icon_70bef_114",
+  rootHideIcon: x,
+  content: A,
+  "content--hide-close-button": "_content--hide-close-button_70bef_135",
+  contentHideCloseButton: C,
+  "content--hide-icon": "_content--hide-icon_70bef_138",
+  contentHideIcon: H,
+  icon: j,
+  message: S,
+  "custom-action-area": "_custom-action-area_70bef_161",
+  customActionArea: p
+}, R = [
+  "success",
+  "error",
+  "warning",
+  "info"
+], w = {
+  success: "circle-check-colored",
+  error: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, O = {
+  error: "alert",
+  warning: "alert",
+  info: "status",
+  success: "status"
+}, B = ({
+  children: i,
+  variant: t = "info",
+  className: a,
+  closeButtonLabel: _ = "Close notification",
+  customActionArea: c,
+  hideCloseButton: r = !1,
+  hideIcon: n = !1,
+  onClose: l,
+  ...f
+}) => {
+  const m = s(o.root, a, {
+    [o.rootSuccess]: t === "success",
+    [o.rootError]: t === "error",
+    [o.rootWarning]: t === "warning",
+    [o.rootInfo]: t === "info",
+    [o.rootHideIcon]: n
+  }), d = s(o.content, {
+    [o.contentHideCloseButton]: r,
+    [o.contentHideIcon]: n
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: m, ...f, role: O[t], children: [
+    /* @__PURE__ */ e.jsxs("div", { className: d, children: [
+      !n && /* @__PURE__ */ e.jsx(
+        b,
+        {
+          name: w[t],
+          className: o.icon,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { className: o.message, children: i }),
+      !r && /* @__PURE__ */ e.jsx(
+        u,
+        {
+          hideLabel: !0,
+          iconName: "cross",
+          isFlush: !0,
+          variant: "ghost",
+          size: "small",
+          onClick: l,
+          type: "button",
+          children: _
+        }
+      )
+    ] }),
+    c && /* @__PURE__ */ e.jsx("div", { className: s({ [o.customActionArea]: !n }), children: c })
+  ] });
+};
+export {
+  B as D,
+  R as N,
+  w as a
+};

package/chunks/RadioGroup.C5jbCJM4.js

@@ -0,0 +1,132 @@
+"use client";
+import { j as h } from "./jsx-runtime.C115EyI4.js";
+import { c as C } from "./index.CvOaL64Y.js";
+import { forwardRef as N, useState as A } from "react";
+import { D as B } from "./Fieldset.COGbZwry.js";
+import { DSRadio as M } from "../radio.CWGJtmKl.js";
+import { s as m } from "./RadioGroup.module.BBZwHDjW.js";
+import { g as t } from "./helpers.B1JT5ShS.js";
+const f = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, D = (o) => o.some(({ hint: a }) => !!a), E = (o) => o.some(({ customArea: a }) => !!a), O = ({
+  legend: o,
+  name: a,
+  options: e,
+  alignment: s,
+  description: i,
+  id: l,
+  systemFeedback: n
+}) => {
+  if (!l && (i || n))
+    throw new Error(
+      t(
+        "DSRadioGroup",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSRadioGroup component.'
+      )
+    );
+  if (!o)
+    throw new Error(
+      t("DSRadioGroup", f("legend"))
+    );
+  if (!a)
+    throw new Error(
+      t("DSRadioGroup", f("name"))
+    );
+  if (!e)
+    throw new Error(
+      t("DSRadioGroup", f("options"))
+    );
+  if (s === "horizontal" && D(e))
+    throw new Error(
+      t(
+        "DSRadioGroup",
+        "Horizontal alignment is not possible when options contain a hint. Please remove hints or change alignment property to 'vertical'."
+      )
+    );
+  if (s === "horizontal" && E(e))
+    throw new Error(
+      t(
+        "DSRadioGroup",
+        "Horizontal alignment is not possible when options contain a custom area. Please remove custom areas or change alignment property to 'vertical'."
+      )
+    );
+}, V = N(
+  ({
+    legend: o,
+    name: a,
+    options: e,
+    alignment: s = "vertical",
+    className: i,
+    defaultValue: l,
+    description: n,
+    disabled: p = !1,
+    hideUncheckedHints: g = !1,
+    id: u,
+    invalid: c = !1,
+    required: w = !1,
+    systemFeedback: d,
+    value: S,
+    onChange: v,
+    ...x
+  }, z) => {
+    process.env.NODE_ENV !== "production" && O({
+      legend: o,
+      name: a,
+      options: e,
+      alignment: s,
+      description: n,
+      id: u,
+      systemFeedback: d
+    });
+    const [H, P] = A(l), R = S !== void 0, G = R ? S : H, j = C(m.group, {
+      // In case of longer copy, use vertical alignment
+      [m.groupHorizontal]: s === "horizontal" && !D(e) && !E(e),
+      [m.groupInvalid]: c && !!d
+    }), q = (r) => {
+      if (p) {
+        r.preventDefault();
+        return;
+      }
+      R || P(
+        r.target.value
+      ), v && v(r);
+    }, y = D(e) && !g;
+    return /* @__PURE__ */ h.jsx(
+      B,
+      {
+        id: u,
+        legend: o,
+        className: i,
+        description: n,
+        disabled: p,
+        required: w,
+        invalid: c,
+        systemFeedback: d,
+        ...x,
+        role: "radiogroup",
+        onChange: q,
+        children: /* @__PURE__ */ h.jsx("div", { className: j, children: e.map((r) => /* @__PURE__ */ h.jsx(
+          M,
+          {
+            name: a,
+            checked: r.value === G,
+            disabled: p,
+            hideUncheckedHint: g,
+            hint: r.hint,
+            invalid: c,
+            isBold: y,
+            required: w,
+            ref: r.value === G ? z : null,
+            ...r
+          },
+          u + r.label + r.value + r.hint
+        )) })
+      }
+    );
+  }
+);
+V.displayName = "DSRadioGroup";
+export {
+  V as D,
+  E as a,
+  D as o,
+  O as v
+};

package/chunks/RadioGroup.module.BBZwHDjW.js

@@ -0,0 +1,11 @@
+"use client";
+import '../assets/RadioGroup.Bz3_xkZU.css';const o = "_group_2f5rk_76", r = "_group--horizontal_2f5rk_84", n = "_group--invalid_2f5rk_87", _ = {
+  group: o,
+  "group--horizontal": "_group--horizontal_2f5rk_84",
+  groupHorizontal: r,
+  "group--invalid": "_group--invalid_2f5rk_87",
+  groupInvalid: n
+};
+export {
+  _ as s
+};

package/chunks/Select.fXeQJXtz.js

@@ -0,0 +1,191 @@
+"use client";
+import { j as s } from "./jsx-runtime.C115EyI4.js";
+import { c as _ } from "./index.CvOaL64Y.js";
+import { useRef as C, useState as q, useEffect as W } from "react";
+import { u as F } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as M } from "../asterisk.DDn-yX4P.js";
+import { D as O } from "./Icon.C2o2seDb.js";
+import { DSSystemFeedback as T } from "../systemfeedback.ZzRUAVYX.js";
+import { g as h } from "./helpers.B1JT5ShS.js";
+import '../assets/Select.BptsMxz4.css';const V = "_root_15gy6_226", Z = "_hint_15gy6_234", J = "_label_15gy6_234", K = "_wrapper_15gy6_238", Q = "_affix_15gy6_244", U = "_affix--small_15gy6_266", X = "_affix--disabled_15gy6_280", Y = "_prefix_15gy6_283", z = "_affix--readonly_15gy6_286", G = "_suffix_15gy6_296", ee = "_action-button_15gy6_303", te = "_label--hidden_15gy6_322", se = "_feedback_15gy6_351", ae = "_select-wrapper_15gy6_356", ne = "_select_15gy6_356", le = "_select--invalid_15gy6_474", ce = "_select--small_15gy6_481", oe = "_input--has-leading-icon_15gy6_535", ie = "_input--has-action-button_15gy6_538", re = "_input--has-second-action-button_15gy6_541", _e = "_select--has-leading-icon_15gy6_544", de = "_select--has-action-button_15gy6_547", fe = "_select--has-second-action-button_15gy6_550", ue = "_select--has-affix_15gy6_553", he = "_select--is-ready_15gy6_567", pe = "_select--placeholder_15gy6_584", ge = "_chevron_15gy6_593", ye = "_chevron--small_15gy6_597", be = "_chevron--disabled_15gy6_600", e = {
+  root: V,
+  hint: Z,
+  label: J,
+  wrapper: K,
+  affix: Q,
+  "affix--small": "_affix--small_15gy6_266",
+  affixSmall: U,
+  "affix--disabled": "_affix--disabled_15gy6_280",
+  affixDisabled: X,
+  prefix: Y,
+  "affix--readonly": "_affix--readonly_15gy6_286",
+  affixReadonly: z,
+  suffix: G,
+  "action-button": "_action-button_15gy6_303",
+  actionButton: ee,
+  "label--hidden": "_label--hidden_15gy6_322",
+  labelHidden: te,
+  feedback: se,
+  "select-wrapper": "_select-wrapper_15gy6_356",
+  selectWrapper: ae,
+  select: ne,
+  "select--invalid": "_select--invalid_15gy6_474",
+  selectInvalid: le,
+  "select--small": "_select--small_15gy6_481",
+  selectSmall: ce,
+  "input--has-leading-icon": "_input--has-leading-icon_15gy6_535",
+  inputHasLeadingIcon: oe,
+  "input--has-action-button": "_input--has-action-button_15gy6_538",
+  inputHasActionButton: ie,
+  "input--has-second-action-button": "_input--has-second-action-button_15gy6_541",
+  inputHasSecondActionButton: re,
+  "select--has-leading-icon": "_select--has-leading-icon_15gy6_544",
+  selectHasLeadingIcon: _e,
+  "select--has-action-button": "_select--has-action-button_15gy6_547",
+  selectHasActionButton: de,
+  "select--has-second-action-button": "_select--has-second-action-button_15gy6_550",
+  selectHasSecondActionButton: fe,
+  "select--has-affix": "_select--has-affix_15gy6_553",
+  selectHasAffix: ue,
+  "select--is-ready": "_select--is-ready_15gy6_567",
+  selectIsReady: he,
+  "select--placeholder": "_select--placeholder_15gy6_584",
+  selectPlaceholder: pe,
+  chevron: ge,
+  "chevron--small": "_chevron--small_15gy6_597",
+  chevronSmall: ye,
+  "chevron--disabled": "_chevron--disabled_15gy6_600",
+  chevronDisabled: be
+}, Be = ["medium", "small"], me = ({
+  id: t,
+  label: l,
+  options: n
+}) => {
+  if (!t)
+    throw new Error(
+      h(
+        "DSSelect",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
+      )
+    );
+  if (!l)
+    throw new Error(
+      h(
+        "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(
+      h(
+        "DSSelect",
+        'Options are always required. Please add an "options" prop to the DSSelect component.'
+      )
+    );
+}, xe = (t, l, n) => t === "" || l !== void 0 && l !== "" ? !1 : !(n !== void 0 && n !== ""), Ee = ({
+  id: t,
+  label: l,
+  options: n,
+  className: H,
+  defaultValue: p,
+  disabled: g = !1,
+  hideLabel: I = !1,
+  hint: d,
+  invalid: r = !1,
+  placeholder: f = "Select",
+  required: y = !1,
+  size: b = "medium",
+  systemFeedback: u,
+  value: m,
+  ...w
+}) => {
+  process.env.NODE_ENV !== "production" && me({
+    id: t,
+    label: l,
+    options: n
+  });
+  const i = C(null), [j, A] = q(
+    xe(f, p, m)
+  );
+  W(() => {
+    if (!i.current) return;
+    const c = () => {
+      if (!i.current) return;
+      const o = i.current.value;
+      A(o === "");
+    }, a = i.current;
+    return a.addEventListener("change", c), () => {
+      a.removeEventListener("change", c);
+    };
+  }, []);
+  const B = F(I), x = `${t}-label`, v = `${t}-feedback`, S = `${t}-hint`, E = d ? ` ${S}` : "", L = (c) => [
+    f && /* @__PURE__ */ s.jsx("option", { value: "", children: f }, `${t}-hidden-option-disabled-placeholder`),
+    ...c.map((a) => {
+      if ("options" in a) {
+        const { label: o, options: $ } = a;
+        return /* @__PURE__ */ s.jsx("optgroup", { label: o, children: $.map(D) }, o);
+      } else
+        return D(a);
+    })
+  ], D = ({ label: c, value: a, isDisabled: o }) => /* @__PURE__ */ s.jsx("option", { value: a, disabled: o, children: c }, a), N = _(e.root, H), P = _(e.select, {
+    [e.selectSmall]: b === "small",
+    [e.selectInvalid]: r,
+    [e.selectPlaceholder]: j
+  }), k = _(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: B
+  }), R = _(e.chevron, {
+    [e.chevronSmall]: b === "small",
+    [e.chevronDisabled]: g
+  });
+  return /* @__PURE__ */ s.jsxs("div", { className: N, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: k, id: x, htmlFor: t, children: [
+      l,
+      y && /* @__PURE__ */ s.jsx(M, {})
+    ] }),
+    d && /* @__PURE__ */ s.jsx("div", { className: e.hint, id: S, children: d }),
+    r && u && /* @__PURE__ */ s.jsx(
+      T,
+      {
+        className: e.feedback,
+        message: u,
+        type: "invalid",
+        id: v,
+        "aria-live": "assertive"
+      }
+    ),
+    /* @__PURE__ */ s.jsxs("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ s.jsx(
+        "select",
+        {
+          ...w,
+          id: t,
+          ref: i,
+          className: P,
+          "aria-labelledby": `${x}${E}`,
+          "aria-describedby": r && u ? v : void 0,
+          "aria-invalid": r,
+          defaultValue: p,
+          value: m,
+          disabled: g,
+          required: y,
+          children: L(n)
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        O,
+        {
+          name: "chevron-down",
+          className: R,
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ee as D,
+  Be as S,
+  xe as g,
+  me as v
+};

package/chunks/Textarea.Bewrp0Za.js

@@ -0,0 +1,195 @@
+"use client";
+import { j as s } from "./jsx-runtime.C115EyI4.js";
+import { c as g } from "./index.CvOaL64Y.js";
+import { useState as c, useRef as na, useEffect as m } from "react";
+import { u as oa, h as ia } from "./useBreakpoint.5xBNDiCf.js";
+import { g as k, p as H } from "./helpers.B1JT5ShS.js";
+import { Asterisk as ra } from "../asterisk.DDn-yX4P.js";
+import { DSSystemFeedback as la } from "../systemfeedback.ZzRUAVYX.js";
+import '../assets/Textarea.CIIVh03G.css';const ca = "_textarea_seaaz_226", da = "_textarea--invalid_seaaz_338", _a = "_textarea--small_seaaz_345", ua = "_textarea--resize-auto_seaaz_365", fa = "_root_seaaz_375", xa = "_hint_seaaz_383", ma = "_label_seaaz_383", ba = "_affix_seaaz_387", ha = "_affix--small_seaaz_409", za = "_affix--disabled_seaaz_423", pa = "_prefix_seaaz_426", va = "_affix--readonly_seaaz_429", ga = "_suffix_seaaz_439", Sa = "_leading-icon_seaaz_446", Ia = "_leading-icon--small_seaaz_458", Ca = "_leading-icon--disabled_seaaz_461", ya = "_action-button_seaaz_470", Aa = "_label--hidden_seaaz_489", Da = "_feedback_seaaz_518", ja = "_char-count_seaaz_523", wa = "_char-count-announcer_seaaz_540", t = {
+  textarea: ca,
+  "textarea--invalid": "_textarea--invalid_seaaz_338",
+  textareaInvalid: da,
+  "textarea--small": "_textarea--small_seaaz_345",
+  textareaSmall: _a,
+  "textarea--resize-auto": "_textarea--resize-auto_seaaz_365",
+  textareaResizeAuto: ua,
+  root: fa,
+  hint: xa,
+  label: ma,
+  affix: ba,
+  "affix--small": "_affix--small_seaaz_409",
+  affixSmall: ha,
+  "affix--disabled": "_affix--disabled_seaaz_423",
+  affixDisabled: za,
+  prefix: pa,
+  "affix--readonly": "_affix--readonly_seaaz_429",
+  affixReadonly: va,
+  suffix: ga,
+  "leading-icon": "_leading-icon_seaaz_446",
+  leadingIcon: Sa,
+  "leading-icon--small": "_leading-icon--small_seaaz_458",
+  leadingIconSmall: Ia,
+  "leading-icon--disabled": "_leading-icon--disabled_seaaz_461",
+  leadingIconDisabled: Ca,
+  "action-button": "_action-button_seaaz_470",
+  actionButton: ya,
+  "label--hidden": "_label--hidden_seaaz_489",
+  labelHidden: Aa,
+  feedback: Da,
+  "char-count": "_char-count_seaaz_523",
+  charCount: ja,
+  "char-count-announcer": "_char-count-announcer_seaaz_540",
+  charCountAnnouncer: wa
+}, Va = ["medium", "small"], Ra = ({ id: n, label: _ }) => {
+  if (!n)
+    throw new Error(
+      k(
+        "DSTextarea",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
+      )
+    );
+  if (!_)
+    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}.`
+      )
+    );
+}, Pa = ({
+  id: n,
+  label: _,
+  charsLimitText: V = "Character limit reached",
+  charsRemainingText: P = "Characters remaining:",
+  className: q,
+  defaultValue: M,
+  disabled: O = !1,
+  hint: b,
+  hideLabel: F = !1,
+  invalid: o = !1,
+  maxLength: a,
+  readonly: S = !1,
+  required: I = !1,
+  resize: u = "vertical",
+  size: W = "medium",
+  systemFeedback: r,
+  value: h,
+  wrapperClassName: X,
+  onChange: C,
+  onInput: y,
+  ...Z
+}) => {
+  process.env.NODE_ENV !== "production" && Ra({
+    id: n,
+    label: _
+  });
+  const [G, A] = c(M || ""), [l, D] = c(0), [J, j] = c(0), [K, w] = c("off"), [R, z] = c(r), [p, v] = c(o), T = h !== void 0, f = T ? h : G, i = na(null), Q = oa(F);
+  m(() => {
+    if (!a || a <= 0)
+      return;
+    l >= a * 0.8 ? w("polite") : w("off");
+    const e = setTimeout(() => {
+      j(a - l || 0);
+    }, 1e3);
+    return () => clearTimeout(e);
+  }, [l]), m(() => {
+    A(f || ""), d(), a && a > 0 && (D(f.toString().length || 0), j(a - f.toString().length || 0));
+  }, [h]), m(() => {
+    o && r ? (z(r), v(o)) : !o && a && a >= 0 && l >= a ? (v(!0), z(V)) : (z(r), v(o));
+  }, [o, p, r, l]), m(() => {
+    if (ia && u === "auto")
+      return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
+  }, [u, i.current]);
+  const U = g(t.root, X), Y = g(t.textarea, q, {
+    // small textarea
+    [t.textareaSmall]: W === "small",
+    // invalid state
+    [t.textareaInvalid]: p,
+    // resize handling
+    [t.textareaResizeAuto]: u === "auto"
+  }), L = g(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: Q
+  }), E = `${n}-label`, N = `${n}-feedback`, B = `${n}-hint`, $ = `${n}-char-count-announcer`, aa = b ? ` ${B}` : "", d = () => {
+    if (i.current && u === "auto") {
+      i.current.style.height = "auto";
+      const e = H(i.current.scrollHeight), x = H(2);
+      i.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($), o && r && e.push(N), e.length > 0 ? e.join(" ") : void 0;
+  }, ta = (e) => {
+    var x;
+    y && y(e), a && a > 0 && D(((x = i.current) == null ? void 0 : x.value.length) || 0), d();
+  }, sa = (e) => {
+    C && C(e), T || A(e.target.value);
+  };
+  return /* @__PURE__ */ s.jsxs("div", { className: U, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: L, id: E, htmlFor: n, children: [
+      _,
+      I && /* @__PURE__ */ s.jsx(ra, {})
+    ] }),
+    b && /* @__PURE__ */ s.jsx("div", { className: t.hint, id: B, children: b }),
+    p && R && /* @__PURE__ */ s.jsx(
+      la,
+      {
+        className: t.feedback,
+        message: R,
+        type: "invalid",
+        id: N
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "textarea",
+      {
+        className: Y,
+        id: n,
+        ref: i,
+        ...Z,
+        "aria-labelledby": `${E}${aa}`,
+        "aria-describedby": ea(),
+        "aria-invalid": o,
+        "aria-disabled": S,
+        maxLength: a,
+        readOnly: S,
+        required: I,
+        disabled: O,
+        value: f,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: sa,
+        onInput: ta
+      }
+    ),
+    a !== void 0 && a > 0 && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
+        l,
+        "/",
+        a
+      ] }),
+      /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          className: t.charCountAnnouncer,
+          id: $,
+          "aria-live": K,
+          "aria-atomic": "true",
+          children: [
+            P,
+            " ",
+            J
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Pa as D,
+  Va as T,
+  Ra as v
+};