@stihl-design-system/components 1.0.0-RC.32 → 1.0.0-RC.34

package/chunks/Textarea.Du2RII5u.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsxs as l, jsx as h, Fragment as de } from "react/jsx-runtime";
+import { c as m } from "./index.DL9mof6u.js";
+import { forwardRef as ue, useState as c, useRef as fe, useEffect as p } from "react";
+import { g as q, p as z } from "./helpers.CexwVao7.js";
+import { u as _e } from "./useBreakpoint.BzR_yaIv.js";
+import "./index.D-sRdssb.js";
+import { Asterisk as be } from "../asterisk.B2ih8VwF.js";
+import { D as he } from "./SystemFeedback.CjlARKki.js";
+import '../assets/Textarea.y3MW7VW0.css';const me = "ds-textarea_textarea_16wji_1", pe = "ds-textarea_textarea--small_16wji_9", xe = "ds-textarea_textarea--invalid_16wji_121", we = "ds-textarea_textarea--resize-auto_16wji_145", ve = "ds-textarea_root_16wji_155", Ce = "ds-textarea_hint_16wji_155", Se = "ds-textarea_label_16wji_155", je = "ds-textarea_label--hidden_16wji_294", ye = "ds-textarea_label--disabled_16wji_307", Ae = "ds-textarea_feedback_16wji_327", De = "ds-textarea_footer_16wji_331", Ie = "ds-textarea_footer--has-system-feedback_16wji_336", Te = "ds-textarea_char-count_16wji_345", ke = "ds-textarea_char-count-announcer_16wji_358", a = {
+  textarea: me,
+  textareaSmall: pe,
+  textareaInvalid: xe,
+  textareaResizeAuto: we,
+  root: ve,
+  hint: Ce,
+  label: Se,
+  labelHidden: je,
+  labelDisabled: ye,
+  feedback: Ae,
+  footer: De,
+  footerHasSystemFeedback: Ie,
+  charCount: Te,
+  charCountAnnouncer: ke
+}, qe = ["medium", "small"], Ne = ({
+  id: r,
+  label: u
+}) => {
+  if (!r)
+    throw new Error(q("DSTextarea", 'A unique "id" prop is required. Please add a unique "id" prop to the DSTextarea component.'));
+  if (!u)
+    throw new Error(q("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}.`));
+}, Re = ue(({
+  id: r,
+  label: u,
+  charsLimitText: M = "Character limit reached",
+  charsRemainingText: O = "Characters remaining:",
+  className: X,
+  defaultValue: Z,
+  disabled: y = !1,
+  hint: x,
+  hideLabel: G = !1,
+  invalid: s = !1,
+  maxLength: e,
+  readonly: A = !1,
+  required: D = !1,
+  resize: f = "vertical",
+  size: J = "medium",
+  systemFeedback: n,
+  value: w,
+  wrapperClassName: K,
+  onChange: I,
+  onInput: T,
+  ...Q
+}, _) => {
+  process.env.NODE_ENV !== "production" && Ne({
+    id: r,
+    label: u
+  });
+  const [U, k] = c(Z || ""), [i, N] = c(0), [W, R] = c(0), [Y, E] = c("off"), [H, v] = c(n), [C, S] = c(s), g = w !== void 0, b = g ? w : U, o = fe(null), $ = e !== void 0 && e > 0, j = C && H, L = (t) => {
+    o.current = t, typeof _ == "function" ? _(t) : _ && (_.current = t);
+  }, ee = _e(G);
+  p(() => {
+    if (!e || e <= 0)
+      return;
+    i >= e * 0.8 ? E("polite") : E("off");
+    const t = setTimeout(() => {
+      R(e - i || 0);
+    }, 1e3);
+    return () => clearTimeout(t);
+  }, [i]), p(() => {
+    k(b || ""), d(), e && e > 0 && (N(b.toString().length || 0), R(e - b.toString().length || 0));
+  }, [w]), p(() => {
+    s && n ? (v(n), S(s)) : !s && e && e >= 0 && i >= e ? (S(!0), v(M)) : (v(n), S(s));
+  }, [s, C, n, i]), p(() => {
+    if (f === "auto")
+      return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
+  }, [f, o.current]);
+  const te = m(a.root, K), ae = m(a.textarea, X, {
+    // small textarea
+    [a.textareaSmall]: J === "small",
+    // invalid state
+    [a.textareaInvalid]: C,
+    // resize handling
+    [a.textareaResizeAuto]: f === "auto"
+  }), re = m(a.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [a.labelHidden]: ee,
+    [a.labelDisabled]: y
+  }), se = m(a.footer, {
+    [a.footerHasSystemFeedback]: j
+  }), V = `${r}-label`, F = `${r}-feedback`, P = `${r}-hint`, B = `${r}-char-count-announcer`, oe = x ? ` ${P}` : "", d = () => {
+    if (o.current && f === "auto") {
+      o.current.style.height = "auto";
+      const t = z(o.current.scrollHeight), ce = z(2);
+      o.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.
+      t + ce}rem`;
+    }
+  }, ne = () => {
+    const t = [];
+    return e && e > 0 && t.push(B), s && n && t.push(F), t.length > 0 ? t.join(" ") : void 0;
+  }, ie = (t) => {
+    T && T(t), e && e > 0 && N(o.current?.value.length || 0), d();
+  }, le = (t) => {
+    I && I(t), g || k(t.target.value);
+  };
+  return /* @__PURE__ */ l("div", { className: te, children: [
+    /* @__PURE__ */ l("label", { className: re, id: V, htmlFor: r, children: [
+      u,
+      D && /* @__PURE__ */ h(be, {})
+    ] }),
+    x && /* @__PURE__ */ h("div", { className: a.hint, id: P, children: x }),
+    /* @__PURE__ */ h(
+      "textarea",
+      {
+        className: ae,
+        id: r,
+        ...Q,
+        ref: L,
+        "aria-labelledby": `${V}${oe}`,
+        "aria-describedby": ne(),
+        "aria-invalid": s,
+        "aria-disabled": A,
+        maxLength: e,
+        readOnly: A,
+        required: D,
+        disabled: y,
+        value: b,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: le,
+        onInput: ie
+      }
+    ),
+    $ || j ? /* @__PURE__ */ l("div", { className: se, children: [
+      j && /* @__PURE__ */ h(he, { className: a.feedback, message: H, variant: "error", id: F }),
+      $ && /* @__PURE__ */ l(de, { children: [
+        /* @__PURE__ */ l("div", { className: a.charCount, "aria-hidden": "true", children: [
+          i,
+          "/",
+          e
+        ] }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: a.charCountAnnouncer,
+            id: B,
+            "aria-live": Y,
+            "aria-atomic": "true",
+            children: [
+              O,
+              " ",
+              W
+            ]
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+});
+Re.displayName = "DSTextarea";
+export {
+  Re as D,
+  qe as T,
+  Ne as v
+};

package/chunks/Toast.ug_RjGgF.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as S, jsxs as y } from "react/jsx-runtime";
+import { d as E } from "./index.D-sRdssb.js";
+import { c as W } from "./index.DL9mof6u.js";
+import { forwardRef as L } from "react";
+import { D as M } from "./Button.DCZgBNmA.js";
+import { D as O } from "./Icon.CDLyB7Pv.js";
+import '../assets/Toast.CGyKXb4V.css';const P = "ds-toast_root_1jbef_5", z = "ds-toast_root--closing_1jbef_15", A = "ds-toast_root--success_1jbef_56", R = "ds-toast_root--info_1jbef_60", $ = "ds-toast_root--warning_1jbef_64", q = "ds-toast_content_1jbef_69", F = "ds-toast_content--hide-icon_1jbef_76", G = "ds-toast_icon_1jbef_80", J = "ds-toast_message_1jbef_84", s = {
+  root: P,
+  rootClosing: z,
+  rootSuccess: A,
+  rootInfo: R,
+  rootWarning: $,
+  content: q,
+  contentHideIcon: F,
+  icon: G,
+  message: J
+}, K = {
+  success: "circle-check-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, Q = L((C, D) => {
+  const o = E.c(44);
+  let e, n, t, c, a, l, i, p, h;
+  o[0] !== C ? ({
+    message: t,
+    className: e,
+    closeButtonProps: n,
+    hideIcon: p,
+    variant: h,
+    onClick: c,
+    onMouseEnter: a,
+    onMouseLeave: l,
+    ...i
+  } = C, o[0] = C, o[1] = e, o[2] = n, o[3] = t, o[4] = c, o[5] = a, o[6] = l, o[7] = i, o[8] = p, o[9] = h) : (e = o[1], n = o[2], t = o[3], c = o[4], a = o[5], l = o[6], i = o[7], p = o[8], h = o[9]);
+  const r = p === void 0 ? !1 : p, d = h === void 0 ? "info" : h;
+  let f;
+  o[10] !== n ? (f = n || {}, o[10] = n, o[11] = f) : f = o[11];
+  let m, j;
+  o[12] !== f ? ({
+    label: j,
+    ...m
+  } = f, o[12] = f, o[13] = m, o[14] = j) : (m = o[13], j = o[14]);
+  const x = j === void 0 ? "Close toast" : j, w = d === "success", T = d === "warning", k = d === "info";
+  let v;
+  o[15] !== e || o[16] !== w || o[17] !== T || o[18] !== k ? (v = W(s.root, e, {
+    [s.rootSuccess]: w,
+    [s.rootWarning]: T,
+    [s.rootInfo]: k
+  }), o[15] = e, o[16] = w, o[17] = T, o[18] = k, o[19] = v) : v = o[19];
+  const B = v;
+  let I;
+  o[20] !== r ? (I = W(s.content, {
+    [s.contentHideIcon]: r
+  }), o[20] = r, o[21] = I) : I = o[21];
+  const H = I;
+  let _;
+  o[22] !== r || o[23] !== d ? (_ = !r && /* @__PURE__ */ S(O, { name: K[d], className: s.icon, "aria-hidden": "true" }), o[22] = r, o[23] = d, o[24] = _) : _ = o[24];
+  let u;
+  o[25] !== t ? (u = /* @__PURE__ */ S("div", { className: s.message, children: t }), o[25] = t, o[26] = u) : u = o[26];
+  let g;
+  o[27] !== x || o[28] !== c || o[29] !== m ? (g = /* @__PURE__ */ S(M, { ...m, hideLabel: !0, iconName: "cross", size: "small", variant: "ghost", onClick: c, children: x }), o[27] = x, o[28] = c, o[29] = m, o[30] = g) : g = o[30];
+  let b;
+  o[31] !== H || o[32] !== _ || o[33] !== u || o[34] !== g ? (b = /* @__PURE__ */ y("div", { className: H, children: [
+    _,
+    u,
+    g
+  ] }), o[31] = H, o[32] = _, o[33] = u, o[34] = g, o[35] = b) : b = o[35];
+  let N;
+  return o[36] !== t || o[37] !== a || o[38] !== l || o[39] !== D || o[40] !== i || o[41] !== B || o[42] !== b ? (N = /* @__PURE__ */ S("aside", { className: B, ref: D, popover: "manual", "data-ds-toast": !0, onMouseEnter: a, onMouseLeave: l, "aria-label": t, ...i, children: b }), o[36] = t, o[37] = a, o[38] = l, o[39] = D, o[40] = i, o[41] = B, o[42] = b, o[43] = N) : N = o[43], N;
+});
+Q.displayName = "DSToast";
+export {
+  Q as D,
+  s
+};

package/chunks/{arrow-clockwise.BefOjGPg.js → arrow-clockwise.C4iOgjOc.js}

@@ -4,7 +4,7 @@ const c = ({
   title: l,
   titleId: t,
   ...a
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 17 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M16 .5v7H9v-2h3.6l-1.5-1.6c-.1-.1-.3-.2-.5-.4-2.1-1.5-5.1-1.3-7 .6-2.1 2.2-2.1 5.6 0 7.8 2.2 2.1 5.6 2.1 7.8 0 .7-.7 1.2-1.5 1.4-2.4h2.1c-.3 1.4-1 2.7-2 3.8-2.9 2.9-7.7 2.9-10.6 0s-2.9-7.7 0-10.6C5-.1 9.4-.2 12.3 2.3c.2.1.3.3.5.4L14 4.1V.5z" }));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M16 .5v7H9v-2h3.6l-1.5-1.6c-.1-.1-.3-.2-.5-.4-2.1-1.5-5.1-1.3-7 .6-2.1 2.2-2.1 5.6 0 7.8 2.2 2.1 5.6 2.1 7.8 0 .7-.7 1.2-1.5 1.4-2.4h2.1c-.3 1.4-1 2.7-2 3.8-2.9 2.9-7.7 2.9-10.6 0s-2.9-7.7 0-10.6C5-.1 9.4-.2 12.3 2.3c.2.1.3.3.5.4L14 4.1V.5z" }));
 export {
   c as default
 };

package/chunks/{arrow-counterclockwise.C7Ov32BZ.js → arrow-counterclockwise.CgQAuBUe.js}

@@ -4,7 +4,7 @@ const c = ({
   title: l,
   titleId: t,
   ...a
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 17 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M.125.5v7h7v-2h-3.6l1.5-1.6c.1-.1.3-.2.5-.4 2.1-1.5 5.1-1.3 7 .6 2.1 2.2 2.1 5.6 0 7.8-2.2 2.1-5.6 2.1-7.8 0-.7-.7-1.2-1.5-1.4-2.4h-2.1c.3 1.4 1 2.7 2 3.8 2.9 2.9 7.7 2.9 10.6 0s2.9-7.7 0-10.6c-2.7-2.8-7.1-2.9-10-.4-.2.1-.3.3-.5.4l-1.2 1.4V.5z" }));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M.125.5v7h7v-2h-3.6l1.5-1.6c.1-.1.3-.2.5-.4 2.1-1.5 5.1-1.3 7 .6 2.1 2.2 2.1 5.6 0 7.8-2.2 2.1-5.6 2.1-7.8 0-.7-.7-1.2-1.5-1.4-2.4h-2.1c.3 1.4 1 2.7 2 3.8 2.9 2.9 7.7 2.9 10.6 0s2.9-7.7 0-10.6c-2.7-2.8-7.1-2.9-10-.4-.2.1-.3.3-.5.4l-1.2 1.4V.5z" }));
 export {
   c as default
 };

package/chunks/{circle-check-colored.Bye_GwLy.js → circle-check-colored.qP2s3vjI.js}

@@ -4,7 +4,7 @@ const r = ({
   title: l,
   titleId: t,
   ...a
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "#749F4A", d: "M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8" }), /* @__PURE__ */ e.createElement("path", { fill: "#fff", d: "m6.4 12-4-4 1.128-1.128L6.4 9.736l6.072-6.072L13.6 4.8z" })));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "#749f4a", d: "M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8" }), /* @__PURE__ */ e.createElement("path", { fill: "#fff", d: "m6.4 12-4-4 1.128-1.128L6.4 9.736l6.072-6.072L13.6 4.8z" })));
 export {
   r as default
 };

package/chunks/{diamond-exclamationmark-colored.WNKYwZ8q.js → diamond-exclamationmark-colored.CzYiaTZ0.js}

@@ -4,7 +4,7 @@ const n = ({
   title: l,
   titleId: a,
   ...t
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: a }, l) : null, /* @__PURE__ */ e.createElement("path", { fill: "#D43B3B", d: "m8 0 8 8-8 8-8-8z" }), /* @__PURE__ */ e.createElement("path", { fill: "#fff", fillRule: "evenodd", d: "M8.7 8.9 9.2 4H6.8l.5 4.9zM6.9 11c0 .6.5 1.1 1.1 1.1s1.1-.4 1.1-1.1c0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1", clipRule: "evenodd" }));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: a }, l) : null, /* @__PURE__ */ e.createElement("path", { fill: "#d43b3b", d: "m8 0 8 8-8 8-8-8z" }), /* @__PURE__ */ e.createElement("path", { fill: "#fff", fillRule: "evenodd", d: "M8.7 8.9 9.2 4H6.8l.5 4.9zM6.9 11c0 .6.5 1.1 1.1 1.1s1.1-.4 1.1-1.1c0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1", clipRule: "evenodd" }));
 export {
   n as default
 };

package/chunks/feather.l1E4nFBx.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const a = ({
+  title: l,
+  titleId: c,
+  ...t
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": c, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: c }, l) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M8.241 14.362V10.82a7.8 7.8 0 0 0 2.186.304q.285.002.582-.018V9.83c-2.488.15-4.14-.68-5.44-2.458-.564-.767-.99-1.184-1.273-2.073C5.5 4.5 6.75 4.739 7.5 5L6.249 6.02l.591.621c.1.105 2.39 2.436 7.655 1.887-.432 1.847-1.843 5.553-6.254 5.825m-2.269-.961c-.695-.504-2.158-1.742-3.054-3.77.273-1.27.743-2.808.743-2.808s.649 1.009 1.16 1.578c.978 1.093 1.794 1.847 2.98 2.282zm9.24-6.583c-3.653.567-5.87-.317-6.902-.925l1.215-1.32-1.284-.728c-1.07-.5-2.672-.629-4.215-.283C3.642 1.557 3.996.027 4 0H2.738c-.007.122-.426 1.872 0 4C.925 4.98.02 6.375 0 6.407l1.029 1.35c.055-.077.657-.939 1.657-1.692-.515 1.066-1.214 2.763-1.37 3.557l-.058.304.11.276c1.373 3.42 4.393 4.877 4.507 4.945l.412.232.716-1.062v1.678l.616.005h.096c5.86 0 7.918-5.407 8.188-8.284L16 6.691l-.782.123z" })));
+export {
+  a as default
+};

package/chunks/file-type-doc.B_RSSYbu.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const a = ({
+  title: l,
+  titleId: c,
+  ...t
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": c, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: c }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M3.333 1.327h5.334V5.31h4v4.148H14V3.982L10 0H2v9.457h1.333zM12 3.982l-2-1.991v1.991z", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { d: "M0 15.931V10.75h2.014c1.5 0 2.633.983 2.633 2.591s-1.133 2.591-2.633 2.591zm1.393-1.173h.467c.843 0 1.363-.557 1.363-1.418s-.52-1.418-1.363-1.418h-.467zM7.81 16c-1.501 0-2.795-1.098-2.795-2.66s1.294-2.652 2.795-2.652 2.794 1.09 2.794 2.652S9.31 16 7.81 16m0-1.204c.872 0 1.37-.64 1.37-1.456s-.498-1.448-1.37-1.448-1.37.633-1.37 1.448c0 .816.497 1.456 1.37 1.456m8.19-.031c-.513.861-1.233 1.235-2.29 1.235-1.462 0-2.71-1.098-2.71-2.66a2.62 2.62 0 0 1 2.634-2.652c1.126 0 1.815.472 2.251 1.112l-1.049.71c-.199-.306-.52-.618-1.179-.618-.765 0-1.232.633-1.232 1.448 0 .816.482 1.456 1.278 1.456.674 0 1.003-.305 1.225-.717z" }));
+export {
+  a as default
+};