@stihl-design-system/components 1.0.0-RC.8 → 1.0.0-RC.9

package/chunks/Textarea.Sk9-GXfs.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._8gatmgR.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.D9DAuz2m.js

@@ -0,0 +1,89 @@
+"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.CkHCQg3Y.js";
+import { D as g } from "./Icon.n4XZrQ4N.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/{combobox.Dgp3kvFR.js → combobox.jDpV6bv-.js}

@@ -1,6 +1,6 @@
 "use client";
 import { j as u } from "./chunks/jsx-runtime.C115EyI4.js";
-import { v as x, c as C } from "./chunks/CustomReactSelect.BVv0Zcvc.js";
+import { v as x, c as C } from "./chunks/CustomReactSelect.C4rTVlvy.js";
 const v = ({
   id: s,
   label: o,

package/{customreactselect.BxkJi_UE.js → customreactselect.C2QK_Q8T.js}

@@ -2,12 +2,12 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import { c as l } from "./chunks/CustomReactSelect.BVv0Zcvc.js";
+import { c as l } from "./chunks/CustomReactSelect.C4rTVlvy.js";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.Cjbk-xZi.js";
+import "./asterisk.DDn-yX4P.js";
 import "./chunks/Icon.n4XZrQ4N.js";
-import "./systemfeedback.CUWch42u.js";
-import "./optioncheckbox.C4l2UIak.js";
+import "./systemfeedback._8gatmgR.js";
+import "./optioncheckbox.DwQEfxGG.js";
 export {
   l as CustomReactSelect
 };

package/{dialog.CVFl9IVY.js → dialog.BPX7RJtQ.js}

@@ -2,8 +2,8 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./button.DPrDynn_.js";
-import { D as e } from "./chunks/Dialog.o7bcfCBf.js";
+import "./button.CkHCQg3Y.js";
+import { D as e } from "./chunks/Dialog.TPjJ_yxK.js";
 export {
   e as DSDialog
 };

package/{drawer.BheN3lap.js → drawer.BfEPcSsQ.js}

@@ -2,8 +2,8 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./button.DPrDynn_.js";
-import { D as e } from "./chunks/Drawer.VbG4cfgJ.js";
+import "./button.CkHCQg3Y.js";
+import { D as e } from "./chunks/Drawer.DrLGSch-.js";
 export {
   e as DSDrawer
 };

package/fieldset.4yvz0e7M.js

@@ -0,0 +1,11 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./asterisk.DDn-yX4P.js";
+import "./heading.CAkraI2D.js";
+import "./systemfeedback._8gatmgR.js";
+import { D as l } from "./chunks/Fieldset.P09LInkT.js";
+export {
+  l as DSFieldset
+};

package/heading.CAkraI2D.js

@@ -0,0 +1,50 @@
+"use client";
+import { j as l } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import './assets/heading.6bER-Eac.css';const u = "_root_11ho3_76", g = "_root--x-large_11ho3_79", h = "_root--x-large-uppercase_11ho3_95", d = "_root--large_11ho3_112", n = "_root--large-uppercase_11ho3_128", i = "_root--medium_11ho3_145", x = "_root--medium-uppercase_11ho3_155", L = "_root--small_11ho3_166", U = "_root--small-uppercase_11ho3_176", k = "_root--theme-dark_11ho3_187", o = {
+  root: u,
+  "root--x-large": "_root--x-large_11ho3_79",
+  rootXLarge: g,
+  "root--x-large-uppercase": "_root--x-large-uppercase_11ho3_95",
+  rootXLargeUppercase: h,
+  "root--large": "_root--large_11ho3_112",
+  rootLarge: d,
+  "root--large-uppercase": "_root--large-uppercase_11ho3_128",
+  rootLargeUppercase: n,
+  "root--medium": "_root--medium_11ho3_145",
+  rootMedium: i,
+  "root--medium-uppercase": "_root--medium-uppercase_11ho3_155",
+  rootMediumUppercase: x,
+  "root--small": "_root--small_11ho3_166",
+  rootSmall: L,
+  "root--small-uppercase": "_root--small-uppercase_11ho3_176",
+  rootSmallUppercase: U,
+  "root--theme-dark": "_root--theme-dark_11ho3_187",
+  rootThemeDark: k
+}, X = ({
+  children: e,
+  className: a,
+  size: r = "medium",
+  tag: t = "h2",
+  // default tag because of SEO reasons (h1 should be used only once per page)
+  theme: p = "light",
+  ...s
+}) => {
+  const _ = t, m = c(o.root, a, {
+    // sizes
+    [o.rootXLarge]: r === "x-large",
+    [o.rootXLargeUppercase]: r === "x-large-uppercase",
+    [o.rootLarge]: r === "large",
+    [o.rootLargeUppercase]: r === "large-uppercase",
+    [o.rootMedium]: r == "medium",
+    [o.rootMediumUppercase]: r == "medium-uppercase",
+    [o.rootSmall]: r == "small",
+    [o.rootSmallUppercase]: r == "small-uppercase",
+    // dark theme
+    [o.rootThemeDark]: p === "dark"
+  });
+  return /* @__PURE__ */ l.jsx(_, { className: m, ...s, children: e });
+};
+export {
+  X as DSHeading
+};

package/index.es.js

@@ -1,35 +1,35 @@
 "use client";
 import { DSAriaLiveRegions as x } from "./arialiveregions.BK4T7Vhk.js";
-import { DSButton as N } from "./button.DPrDynn_.js";
-import { DSButtonRound as _ } from "./buttonround.ix_-O4l1.js";
-import { DSCheckbox as f } from "./checkbox.hoVQ37RP.js";
-import { D as h, v as A } from "./chunks/CheckboxGroup.kG1WWhe_.js";
-import { DSCombobox as O } from "./combobox.Dgp3kvFR.js";
-import { C as P, b as C, a as R, D as L, v as B } from "./chunks/CustomReactSelect.BVv0Zcvc.js";
-import { D as X, v as b } from "./chunks/Dialog.o7bcfCBf.js";
-import { a as Z, D as F, v as H } from "./chunks/Drawer.VbG4cfgJ.js";
-import { D as w, v as M } from "./chunks/Fieldset.B1vsrHNv.js";
+import { DSButton as N } from "./button.CkHCQg3Y.js";
+import { DSButtonRound as _ } from "./buttonround.DX3u2Fio.js";
+import { DSCheckbox as f } from "./checkbox.BbmCDJCm.js";
+import { D as h, v as A } from "./chunks/CheckboxGroup.Dx_Hn8Dl.js";
+import { DSCombobox as O } from "./combobox.jDpV6bv-.js";
+import { C as P, b as C, a as R, D as L, v as B } from "./chunks/CustomReactSelect.C4rTVlvy.js";
+import { D as X, v as b } from "./chunks/Dialog.TPjJ_yxK.js";
+import { a as Z, D as F, v as H } from "./chunks/Drawer.DrLGSch-.js";
+import { D as w, v as M } from "./chunks/Fieldset.P09LInkT.js";
 import { DSFloatingActionButton as K } from "./floatingactionbutton.D_e4vz2G.js";
-import { DSHeading as y } from "./heading.BTNroD1E.js";
+import { DSHeading as y } from "./heading.CAkraI2D.js";
 import { D as q, I as j, u as z } from "./chunks/Icon.n4XZrQ4N.js";
-import { DSInput as Q } from "./input.CfO9lL_o.js";
-import { I as oo, M as ao, a as eo, S as ro, U as to, h as so, i as po, c as io, s as So, v as lo, b as mo } from "./chunks/Input.utils.BGUhXCNP.js";
-import { D as no, v as Io } from "./chunks/InputPassword.TlusvIds.js";
-import { D as xo, i as No, v as uo } from "./chunks/InputSearch.BbCdCCax.js";
-import { D as co, v as fo } from "./chunks/InputStepper.DR3NR_II.js";
-import { DSLink as ho } from "./link.CIY7SOpm.js";
-import { DSLinkStandalone as vo } from "./linkstandalone.DNe0Nydm.js";
+import { DSInput as Q } from "./input.lLMqAG-6.js";
+import { I as oo, M as ao, a as eo, S as ro, U as to, h as so, i as po, c as io, s as So, v as lo, b as mo } from "./chunks/Input.utils.ChV6RJsh.js";
+import { D as no, v as Io } from "./chunks/InputPassword.CSc1c98k.js";
+import { D as xo, i as No, v as uo } from "./chunks/InputSearch.DrgdGFT_.js";
+import { D as co, v as fo } from "./chunks/InputStepper.DJEuIr4C.js";
+import { DSLink as ho } from "./link.KZaBufPM.js";
+import { DSLinkStandalone as vo } from "./linkstandalone.B6tN-NXD.js";
 import { DSLogo as go } from "./logo.CqukakYv.js";
-import { D as Co, a as Ro, N as Lo } from "./chunks/Notification.B6a6FOlS.js";
-import { D as Uo, a as Xo, o as bo, v as Go } from "./chunks/RadioGroup.BO4pbAJw.js";
-import { D as Fo, S as Ho, g as ko, v as wo } from "./chunks/Select.COdS787F.js";
-import { DSSkipToContent as Vo } from "./skiptocontent.ALhHiH8t.js";
+import { D as Co, a as Ro, N as Lo } from "./chunks/Notification.B68mMDiB.js";
+import { D as Uo, a as Xo, o as bo, v as Go } from "./chunks/RadioGroup.B5jRveyI.js";
+import { D as Fo, S as Ho, g as ko, v as wo } from "./chunks/Select.Cl2eJR1z.js";
+import { DSSkipToContent as Vo } from "./skiptocontent.fP4SOp-p.js";
 import { DSSpinner as Wo } from "./spinner.DVa112nj.js";
-import { DSSwitch as Yo } from "./switch.rd7PdLc9.js";
-import { DSText as jo } from "./text.CrYUewrP.js";
-import { D as Jo, T as Qo, v as $o } from "./chunks/Textarea.oqCrSopu.js";
-import { DSTitle as aa } from "./title.Dvp8LKJt.js";
-import { DSToastProvider as ra, useDSToast as ta } from "./toastmanager.6mUZ8eCN.js";
+import { DSSwitch as Yo } from "./switch.KO8HZPNL.js";
+import { DSText as jo } from "./text.rgDKQBrU.js";
+import { D as Jo, T as Qo, v as $o } from "./chunks/Textarea.Sk9-GXfs.js";
+import { DSTitle as aa } from "./title.LY1ylQsb.js";
+import { DSToastProvider as ra, useDSToast as ta } from "./toastmanager.DifUvJcg.js";
 const o = ["medium", "small"], a = [
   "filled",
   "highlight",