@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/chunks/Select.DkDZo0ky.js

@@ -1,193 +0,0 @@
-"use client";
-import { j as t } from "./jsx-runtime.C-kxDJ4g.js";
-import { c as _ } from "./index.CvOaL64Y.js";
-import { useRef as $, useState as C, useEffect as W } from "react";
-import { u as F } from "./useBreakpoint.5xBNDiCf.js";
-import { Asterisk as M } from "../asterisk.DU8THnoC.js";
-import { D as O } from "./Icon.9gDIp6p4.js";
-import { DSSystemFeedback as T } from "../systemfeedback.4Hkfigi-.js";
-import { g as f } from "./helpers.B1JT5ShS.js";
-import '../assets/Select.D2qBxaHP.css';const V = "_root_quxca_187", Z = "_hint_quxca_195", J = "_label_quxca_195", K = "_wrapper_quxca_199", Q = "_affix_quxca_205", U = "_affix--small_quxca_225", X = "_affix--disabled_quxca_237", Y = "_prefix_quxca_240", z = "_affix--readonly_quxca_243", G = "_suffix_quxca_253", ee = "_action-button_quxca_260", ae = "_label--hidden_quxca_277", te = "_feedback_quxca_304", se = "_select-wrapper_quxca_309", ce = "_select_quxca_309", ne = "_select--invalid_quxca_428", le = "_select--small_quxca_435", oe = "_input--has-leading-icon_quxca_481", ie = "_input--has-action-button_quxca_484", re = "_input--has-second-action-button_quxca_487", _e = "_select--has-leading-icon_quxca_490", ue = "_select--has-action-button_quxca_493", de = "_select--has-second-action-button_quxca_496", xe = "_select--has-affix_quxca_499", fe = "_select--is-ready_quxca_511", he = "_select--placeholder_quxca_523", pe = "_chevron_quxca_532", be = "_chevron--small_quxca_536", me = "_chevron--disabled_quxca_539", e = {
-  root: V,
-  hint: Z,
-  label: J,
-  wrapper: K,
-  affix: Q,
-  "affix--small": "_affix--small_quxca_225",
-  affixSmall: U,
-  "affix--disabled": "_affix--disabled_quxca_237",
-  affixDisabled: X,
-  prefix: Y,
-  "affix--readonly": "_affix--readonly_quxca_243",
-  affixReadonly: z,
-  suffix: G,
-  "action-button": "_action-button_quxca_260",
-  actionButton: ee,
-  "label--hidden": "_label--hidden_quxca_277",
-  labelHidden: ae,
-  feedback: te,
-  "select-wrapper": "_select-wrapper_quxca_309",
-  selectWrapper: se,
-  select: ce,
-  "select--invalid": "_select--invalid_quxca_428",
-  selectInvalid: ne,
-  "select--small": "_select--small_quxca_435",
-  selectSmall: le,
-  "input--has-leading-icon": "_input--has-leading-icon_quxca_481",
-  inputHasLeadingIcon: oe,
-  "input--has-action-button": "_input--has-action-button_quxca_484",
-  inputHasActionButton: ie,
-  "input--has-second-action-button": "_input--has-second-action-button_quxca_487",
-  inputHasSecondActionButton: re,
-  "select--has-leading-icon": "_select--has-leading-icon_quxca_490",
-  selectHasLeadingIcon: _e,
-  "select--has-action-button": "_select--has-action-button_quxca_493",
-  selectHasActionButton: ue,
-  "select--has-second-action-button": "_select--has-second-action-button_quxca_496",
-  selectHasSecondActionButton: de,
-  "select--has-affix": "_select--has-affix_quxca_499",
-  selectHasAffix: xe,
-  "select--is-ready": "_select--is-ready_quxca_511",
-  selectIsReady: fe,
-  "select--placeholder": "_select--placeholder_quxca_523",
-  selectPlaceholder: he,
-  chevron: pe,
-  "chevron--small": "_chevron--small_quxca_536",
-  chevronSmall: be,
-  "chevron--disabled": "_chevron--disabled_quxca_539",
-  chevronDisabled: me
-}, Ae = ["medium", "small"], qe = ({
-  id: a,
-  label: n,
-  options: c
-}) => {
-  if (!a)
-    throw new Error(
-      f(
-        "DSSelect",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
-      )
-    );
-  if (!n)
-    throw new Error(
-      f(
-        "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 (!c || c.length === 0)
-    throw new Error(
-      f(
-        "DSSelect",
-        'Options are always required. Please add an "options" prop to the DSSelect component.'
-      )
-    );
-}, ve = (a, n, c) => a === "" || n !== void 0 && n !== "" ? !1 : !(c !== void 0 && c !== ""), Be = ({
-  id: a,
-  label: n,
-  options: c,
-  className: D,
-  defaultValue: h,
-  disabled: p = !1,
-  hideLabel: H = !1,
-  hint: u,
-  invalid: r = !1,
-  placeholder: d = "Select",
-  required: b = !1,
-  size: m = "medium",
-  systemFeedback: x,
-  value: q,
-  ...I
-}) => {
-  process.env.NODE_ENV !== "production" && qe({
-    id: a,
-    label: n,
-    options: c
-  });
-  const i = $(null), [w, j] = C(
-    ve(d, h, q)
-  );
-  W(() => {
-    if (!i.current)
-      return;
-    const l = () => {
-      if (!i.current)
-        return;
-      const o = i.current.value;
-      j(o === "");
-    }, s = i.current;
-    return s.addEventListener("change", l), () => {
-      s.removeEventListener("change", l);
-    };
-  }, []);
-  const A = F(H), v = `${a}-label`, S = `${a}-feedback`, g = `${a}-hint`, B = u ? ` ${g}` : "", E = (l) => [
-    d && /* @__PURE__ */ t.jsx("option", { value: "", children: d }, `${a}-hidden-option-disabled-placeholder`),
-    ...l.map((s) => {
-      if ("options" in s) {
-        const { label: o, options: R } = s;
-        return /* @__PURE__ */ t.jsx("optgroup", { label: o, children: R.map(y) }, o);
-      } else
-        return y(s);
-    })
-  ], y = ({ label: l, value: s, isDisabled: o }) => /* @__PURE__ */ t.jsx("option", { value: s, disabled: o, children: l }, s), L = _(e.root, D), N = _(e.select, {
-    [e.selectSmall]: m === "small",
-    [e.selectInvalid]: r,
-    [e.selectPlaceholder]: w
-  }), P = _(e.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [e.labelHidden]: A
-  }), k = _(e.chevron, {
-    [e.chevronSmall]: m === "small",
-    [e.chevronDisabled]: p
-  });
-  return /* @__PURE__ */ t.jsxs("div", { className: L, children: [
-    /* @__PURE__ */ t.jsxs("label", { className: P, id: v, htmlFor: a, children: [
-      n,
-      b && /* @__PURE__ */ t.jsx(M, {})
-    ] }),
-    u && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: g, children: u }),
-    r && x && /* @__PURE__ */ t.jsx(
-      T,
-      {
-        className: e.feedback,
-        message: x,
-        type: "invalid",
-        id: S,
-        "aria-live": "assertive"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
-      /* @__PURE__ */ t.jsx(
-        "select",
-        {
-          ...I,
-          id: a,
-          ref: i,
-          className: N,
-          "aria-labelledby": `${v}${B}`,
-          "aria-describedby": r && x ? S : void 0,
-          "aria-invalid": r,
-          defaultValue: h,
-          value: q,
-          disabled: p,
-          required: b,
-          children: E(c)
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        O,
-        {
-          name: "chevron-down",
-          className: k,
-          "aria-hidden": "true"
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Be as D,
-  Ae as S,
-  ve as g,
-  qe as v
-};

package/chunks/Textarea.C938p79X.js

@@ -1,195 +0,0 @@
-"use client";
-import { j as n } from "./jsx-runtime.C-kxDJ4g.js";
-import { c as S } from "./index.CvOaL64Y.js";
-import { useState as c, useRef as le, useEffect as x } from "react";
-import { u as oe, h as se } from "./useBreakpoint.5xBNDiCf.js";
-import { g as H, p as V } from "./helpers.B1JT5ShS.js";
-import { Asterisk as ie } from "../asterisk.DU8THnoC.js";
-import { DSSystemFeedback as re } from "../systemfeedback.4Hkfigi-.js";
-import '../assets/Textarea.BKbocznb.css';const ce = "_textarea_1elbe_187", de = "_textarea--invalid_1elbe_297", _e = "_textarea--small_1elbe_304", ue = "_textarea--resize-auto_1elbe_316", fe = "_root_1elbe_326", be = "_hint_1elbe_334", xe = "_label_1elbe_334", me = "_affix_1elbe_338", he = "_affix--small_1elbe_358", pe = "_affix--disabled_1elbe_370", ve = "_prefix_1elbe_373", ge = "_affix--readonly_1elbe_376", Se = "_suffix_1elbe_386", Ie = "_leading-icon_1elbe_393", Ce = "_leading-icon--small_1elbe_405", ye = "_leading-icon--disabled_1elbe_408", Ae = "_action-button_1elbe_417", De = "_label--hidden_1elbe_434", je = "_feedback_1elbe_461", we = "_char-count_1elbe_466", Re = "_char-count-announcer_1elbe_481", t = {
-  textarea: ce,
-  "textarea--invalid": "_textarea--invalid_1elbe_297",
-  textareaInvalid: de,
-  "textarea--small": "_textarea--small_1elbe_304",
-  textareaSmall: _e,
-  "textarea--resize-auto": "_textarea--resize-auto_1elbe_316",
-  textareaResizeAuto: ue,
-  root: fe,
-  hint: be,
-  label: xe,
-  affix: me,
-  "affix--small": "_affix--small_1elbe_358",
-  affixSmall: he,
-  "affix--disabled": "_affix--disabled_1elbe_370",
-  affixDisabled: pe,
-  prefix: ve,
-  "affix--readonly": "_affix--readonly_1elbe_376",
-  affixReadonly: ge,
-  suffix: Se,
-  "leading-icon": "_leading-icon_1elbe_393",
-  leadingIcon: Ie,
-  "leading-icon--small": "_leading-icon--small_1elbe_405",
-  leadingIconSmall: Ce,
-  "leading-icon--disabled": "_leading-icon--disabled_1elbe_408",
-  leadingIconDisabled: ye,
-  "action-button": "_action-button_1elbe_417",
-  actionButton: Ae,
-  "label--hidden": "_label--hidden_1elbe_434",
-  labelHidden: De,
-  feedback: je,
-  "char-count": "_char-count_1elbe_466",
-  charCount: we,
-  "char-count-announcer": "_char-count-announcer_1elbe_481",
-  charCountAnnouncer: Re
-}, ze = ["medium", "small"], Te = ({ id: l, label: _ }) => {
-  if (!l)
-    throw new Error(
-      H(
-        "DSTextarea",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
-      )
-    );
-  if (!_)
-    throw new Error(
-      H(
-        "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}.`
-      )
-    );
-}, Pe = ({
-  id: l,
-  label: _,
-  charsLimitText: z = "Character limit reached",
-  charsRemainingText: P = "Characters remaining:",
-  className: q,
-  defaultValue: M,
-  disabled: O = !1,
-  hint: m,
-  hideLabel: F = !1,
-  invalid: o = !1,
-  maxLength: e,
-  readonly: I = !1,
-  required: C = !1,
-  resize: u = "vertical",
-  size: W = "medium",
-  systemFeedback: i,
-  value: h,
-  wrapperClassName: X,
-  onChange: y,
-  onInput: A,
-  ...Z
-}) => {
-  process.env.NODE_ENV !== "production" && Te({
-    id: l,
-    label: _
-  });
-  const [G, D] = c(M || ""), [r, j] = c(0), [J, w] = c(0), [K, R] = c("off"), [T, p] = c(i), [v, g] = c(o), E = h !== void 0, f = E ? h : G, s = le(null), Q = oe(F);
-  x(() => {
-    if (!e || e <= 0)
-      return;
-    r >= e * 0.8 ? R("polite") : R("off");
-    const a = setTimeout(() => {
-      w(e - r || 0);
-    }, 1e3);
-    return () => clearTimeout(a);
-  }, [r]), x(() => {
-    D(f || ""), d(), e && e > 0 && (j(f.toString().length || 0), w(e - f.toString().length || 0));
-  }, [h]), x(() => {
-    o && i ? (p(i), g(o)) : !o && e && e >= 0 && r >= e ? (g(!0), p(z)) : (p(i), g(o));
-  }, [o, v, i, r]), x(() => {
-    if (se && u === "auto")
-      return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
-  }, [u, s.current]);
-  const U = S(t.root, X), Y = S(t.textarea, q, {
-    // small textarea
-    [t.textareaSmall]: W === "small",
-    // invalid state
-    [t.textareaInvalid]: v,
-    // resize handling
-    [t.textareaResizeAuto]: u === "auto"
-  }), L = S(t.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: Q
-  }), N = `${l}-label`, B = `${l}-feedback`, $ = `${l}-hint`, k = `${l}-char-count-announcer`, ee = m ? ` ${$}` : "", d = () => {
-    if (s.current && u === "auto") {
-      s.current.style.height = "auto";
-      const a = V(s.current.scrollHeight), b = V(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.
-      a + b}rem`;
-    }
-  }, ae = () => {
-    const a = [];
-    return e && e > 0 && a.push(k), o && i && a.push(B), a.length > 0 ? a.join(" ") : void 0;
-  }, te = (a) => {
-    var b;
-    A && A(a), e && e > 0 && j(((b = s.current) == null ? void 0 : b.value.length) || 0), d();
-  }, ne = (a) => {
-    y && y(a), E || D(a.target.value);
-  };
-  return /* @__PURE__ */ n.jsxs("div", { className: U, children: [
-    /* @__PURE__ */ n.jsxs("label", { className: L, id: N, htmlFor: l, children: [
-      _,
-      C && /* @__PURE__ */ n.jsx(ie, {})
-    ] }),
-    m && /* @__PURE__ */ n.jsx("div", { className: t.hint, id: $, children: m }),
-    v && T && /* @__PURE__ */ n.jsx(
-      re,
-      {
-        className: t.feedback,
-        message: T,
-        type: "invalid",
-        id: B
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      "textarea",
-      {
-        className: Y,
-        id: l,
-        ref: s,
-        ...Z,
-        "aria-labelledby": `${N}${ee}`,
-        "aria-describedby": ae(),
-        "aria-invalid": o,
-        "aria-disabled": I,
-        maxLength: e,
-        readOnly: I,
-        required: C,
-        disabled: O,
-        value: f,
-        defaultValue: void 0,
-        rows: void 0,
-        cols: void 0,
-        onChange: ne,
-        onInput: te
-      }
-    ),
-    e !== void 0 && e > 0 && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
-        r,
-        "/",
-        e
-      ] }),
-      /* @__PURE__ */ n.jsxs(
-        "div",
-        {
-          className: t.charCountAnnouncer,
-          id: k,
-          "aria-live": K,
-          "aria-atomic": "true",
-          children: [
-            P,
-            " ",
-            J
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Pe as D,
-  ze as T,
-  Te as v
-};

package/chunks/Toast.CLYrwQVO.js

@@ -1,89 +0,0 @@
-"use client";
-import { j as n } from "./jsx-runtime.C-kxDJ4g.js";
-import { c as e } from "./index.CvOaL64Y.js";
-import { forwardRef as f } from "react";
-import { DSButton as u } from "../button.DX_nxoJC.js";
-import { D as k } from "./Icon.9gDIp6p4.js";
-import '../assets/Toast.CAP_EwDX.css';const y = "_root_pyklq_67", g = "_root--closing_pyklq_76", q = "_fade-out_pyklq_1", h = "_move-in_pyklq_1", x = "_root--success_pyklq_111", I = "_root--info_pyklq_115", S = "_root--warning_pyklq_119", N = "_content_pyklq_124", j = "_content--hide-icon_pyklq_131", v = "_icon_pyklq_135", w = "_message_pyklq_139", o = {
-  root: y,
-  "root--closing": "_root--closing_pyklq_76",
-  rootClosing: g,
-  "fade-out": "_fade-out_pyklq_1",
-  fadeOut: q,
-  "move-in": "_move-in_pyklq_1",
-  moveIn: h,
-  "root--success": "_root--success_pyklq_111",
-  rootSuccess: x,
-  "root--info": "_root--info_pyklq_115",
-  rootInfo: I,
-  "root--warning": "_root--warning_pyklq_119",
-  rootWarning: S,
-  content: N,
-  "content--hide-icon": "_content--hide-icon_pyklq_131",
-  contentHideIcon: j,
-  icon: v,
-  message: w
-}, C = {
-  success: "circle-check-colored",
-  warning: "triangle-exclamationmark-colored",
-  info: "circle-info-colored"
-}, D = f(
-  ({
-    message: s,
-    className: r,
-    hideIcon: c = !1,
-    variant: t = "info",
-    onClick: i,
-    onMouseEnter: a,
-    onMouseLeave: _,
-    ...l
-  }, m) => {
-    const p = e(o.root, r, {
-      [o.rootSuccess]: t === "success",
-      [o.rootWarning]: t === "warning",
-      [o.rootInfo]: t === "info"
-    }), d = e(o.content, {
-      [o.contentHideIcon]: c
-    });
-    return /* @__PURE__ */ n.jsx(
-      "aside",
-      {
-        className: p,
-        ref: m,
-        popover: "manual",
-        "data-ds-toast": !0,
-        onMouseEnter: a,
-        onMouseLeave: _,
-        "aria-label": s,
-        ...l,
-        children: /* @__PURE__ */ n.jsxs("div", { className: d, children: [
-          !c && /* @__PURE__ */ n.jsx(
-            k,
-            {
-              name: C[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"
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-D.displayName = "DSToast";
-export {
-  D,
-  o as s
-};

package/chunks/helpers.B1JT5ShS.js

@@ -1,7 +0,0 @@
-"use client";
-const e = (s) => typeof s != "number" || isNaN(s) ? 0 : s / 16, r = (s, t) => `[STIHL Design System] - [${s}]: ${t}`, n = (s, t) => s == null ? void 0 : s.closest(t);
-export {
-  n as a,
-  r as g,
-  e as p
-};

package/chunks/index.CvOaL64Y.js

@@ -1,45 +0,0 @@
-"use client";
-function a(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-var i = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-(function(e) {
-  (function() {
-    var f = {}.hasOwnProperty;
-    function s() {
-      for (var t = "", r = 0; r < arguments.length; r++) {
-        var n = arguments[r];
-        n && (t = o(t, u(n)));
-      }
-      return t;
-    }
-    function u(t) {
-      if (typeof t == "string" || typeof t == "number")
-        return t;
-      if (typeof t != "object")
-        return "";
-      if (Array.isArray(t))
-        return s.apply(null, t);
-      if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
-        return t.toString();
-      var r = "";
-      for (var n in t)
-        f.call(t, n) && t[n] && (r = o(r, n));
-      return r;
-    }
-    function o(t, r) {
-      return r ? t ? t + " " + r : t + r : t;
-    }
-    e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
-  })();
-})(i);
-var c = i.exports;
-const p = /* @__PURE__ */ a(c);
-export {
-  p as c
-};