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

package/chunks/Select.fXeQJXtz.js

@@ -1,191 +0,0 @@
-"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

@@ -1,195 +0,0 @@
-"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
-};

package/chunks/Toast.DA_CQ9J-.js

@@ -1,89 +0,0 @@
-"use client";
-import { j as n } from "./jsx-runtime.C115EyI4.js";
-import { c as e } from "./index.CvOaL64Y.js";
-import { forwardRef as f } from "react";
-import { DSButton as u } from "../button.DH0h6uPs.js";
-import { D as g } from "./Icon.C2o2seDb.js";
-import '../assets/Toast.Dsvs1zdM.css';const h = "_root_m9wn3_80", p = "_root--closing_m9wn3_94", x = "_fade-out_m9wn3_1", I = "_move-in_m9wn3_1", S = "_root--success_m9wn3_129", N = "_root--info_m9wn3_133", j = "_root--warning_m9wn3_137", v = "_content_m9wn3_142", C = "_content--hide-icon_m9wn3_149", D = "_icon_m9wn3_153", O = "_message_m9wn3_157", o = {
-  root: h,
-  "root--closing": "_root--closing_m9wn3_94",
-  rootClosing: p,
-  "fade-out": "_fade-out_m9wn3_1",
-  fadeOut: x,
-  "move-in": "_move-in_m9wn3_1",
-  moveIn: I,
-  "root--success": "_root--success_m9wn3_129",
-  rootSuccess: S,
-  "root--info": "_root--info_m9wn3_133",
-  rootInfo: N,
-  "root--warning": "_root--warning_m9wn3_137",
-  rootWarning: j,
-  content: v,
-  "content--hide-icon": "_content--hide-icon_m9wn3_149",
-  contentHideIcon: C,
-  icon: D,
-  message: O
-}, T = {
-  success: "circle-check-colored",
-  warning: "triangle-exclamationmark-colored",
-  info: "circle-info-colored"
-}, H = f(
-  ({
-    message: s,
-    className: r,
-    hideIcon: c = !1,
-    variant: t = "info",
-    onClick: i,
-    onMouseEnter: a,
-    onMouseLeave: _,
-    ...m
-  }, l) => {
-    const d = e(o.root, r, {
-      [o.rootSuccess]: t === "success",
-      [o.rootWarning]: t === "warning",
-      [o.rootInfo]: t === "info"
-    }), w = e(o.content, {
-      [o.contentHideIcon]: c
-    });
-    return /* @__PURE__ */ n.jsx(
-      "aside",
-      {
-        className: d,
-        ref: l,
-        popover: "manual",
-        "data-ds-toast": !0,
-        onMouseEnter: a,
-        onMouseLeave: _,
-        "aria-label": s,
-        ...m,
-        children: /* @__PURE__ */ n.jsxs("div", { className: w, children: [
-          !c && /* @__PURE__ */ n.jsx(
-            g,
-            {
-              name: T[t],
-              className: o.icon,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ n.jsx("div", { className: o.message, children: s }),
-          /* @__PURE__ */ n.jsx(
-            u,
-            {
-              hideLabel: !0,
-              iconName: "cross",
-              size: "small",
-              variant: "ghost",
-              onClick: i,
-              children: "Close toast"
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-H.displayName = "DSToast";
-export {
-  H as D,
-  o as s
-};

package/floatingactionbutton.CCIj9Fjr.js

@@ -1,87 +0,0 @@
-"use client";
-import { j as a } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as t } from "./chunks/index.CvOaL64Y.js";
-import { D as k } from "./chunks/Icon.C2o2seDb.js";
-import { DSSpinner as D } from "./spinner.D-xrotcu.js";
-import './assets/floatingactionbutton.DRYentYC.css';const S = "_root_pixlx_76", j = "_root--dark_pixlx_137", H = "_root--small_pixlx_177", y = "_loader_pixlx_198", N = "_icon--hidden_pixlx_210", C = "_label--hidden_pixlx_214", o = {
-  root: S,
-  "root--dark": "_root--dark_pixlx_137",
-  rootDark: j,
-  "root--small": "_root--small_pixlx_177",
-  rootSmall: H,
-  loader: y,
-  "icon--hidden": "_icon--hidden_pixlx_210",
-  iconHidden: N,
-  "label--hidden": "_label--hidden_pixlx_214",
-  labelHidden: C
-}, E = ({
-  aria: c,
-  children: _,
-  className: x,
-  dataTrackingid: m,
-  disabled: r = !1,
-  iconName: s = "placeholder",
-  iconSource: i,
-  loading: l = !1,
-  size: p = "medium",
-  theme: e = "light",
-  onClick: n,
-  ...b
-}) => {
-  const u = t(
-    o.root,
-    o.rootIconOnlySmall,
-    x,
-    {
-      // dark theme
-      [o.rootDark]: e === "dark",
-      // size
-      [o.rootSmall]: p === "small"
-    }
-  ), h = t(o.icon, {
-    // set icon opacity to 0 when loading to prevent button size from changing
-    [o.iconHidden]: l
-  }), f = (d) => {
-    if (r || l) {
-      d.preventDefault();
-      return;
-    }
-    n && n(d);
-  };
-  return /* @__PURE__ */ a.jsxs(
-    "button",
-    {
-      className: u,
-      "data-trackingid": m,
-      type: "button",
-      onClick: f,
-      ...c,
-      ...b,
-      "aria-disabled": r || l,
-      "aria-busy": l,
-      children: [
-        l && /* @__PURE__ */ a.jsx(
-          D,
-          {
-            className: o.loader,
-            aria: { "aria-label": "Loading state" }
-          }
-        ),
-        /* @__PURE__ */ a.jsx("span", { className: t(o.label, o.labelHidden), children: _ }),
-        (s || i) && /* @__PURE__ */ a.jsx(
-          k,
-          {
-            name: s,
-            theme: e,
-            source: i,
-            className: h,
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  E as DSFloatingActionButton
-};