@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.3

package/switch.96fd1689.js

@@ -1,65 +0,0 @@
-import "./assets/Switch.781e3de6.css";
-import { j as t } from "./chunks/jsx-runtime.5c071667.js";
-import { c as u } from "./chunks/index.8021d3e0.js";
-import "react";
-import { DSIcon as b } from "./icon.b4211784.js";
-import { DSSpinner as f } from "./spinner.ee015469.js";
-const x = "_root_19ej2_25", k = "_root--label-right_19ej2_53", S = "_root--stretched_19ej2_56", g = "_loader_19ej2_66", w = "_thumb_19ej2_119", C = "_root--checked_19ej2_134", e = {
-  root: x,
-  "root--label-right": "_root--label-right_19ej2_53",
-  rootLabelRight: k,
-  "root--stretched": "_root--stretched_19ej2_56",
-  rootStretched: S,
-  switch: "_switch_19ej2_61",
-  loader: g,
-  thumb: w,
-  "root--checked": "_root--checked_19ej2_134",
-  rootChecked: C
-}, I = ({
-  children: h,
-  aria: i,
-  alignLabel: l = "left",
-  checked: r = !1,
-  className: _,
-  dataTrackingid: n,
-  disabled: s = !1,
-  loading: o = !1,
-  stretched: d = !1,
-  onClick: a,
-  ...m
-}) => {
-  const j = u(e.root, _, {
-    [e.rootChecked]: r === !0,
-    [e.rootStretched]: d === !0,
-    [e.rootLabelRight]: l === "right"
-  }), p = (c) => {
-    if (s || o) {
-      c.preventDefault();
-      return;
-    }
-    a && a(c);
-  };
-  return /* @__PURE__ */ t.jsxs(
-    "button",
-    {
-      className: j,
-      "data-trackingid": n,
-      onClick: p,
-      ...i,
-      ...m,
-      type: "button",
-      role: "switch",
-      "aria-checked": r,
-      "aria-disabled": s || o,
-      "aria-busy": o,
-      children: [
-        /* @__PURE__ */ t.jsx("span", { children: h }),
-        !o && /* @__PURE__ */ t.jsx("span", { className: e.switch, children: /* @__PURE__ */ t.jsx("span", { className: e.thumb, children: /* @__PURE__ */ t.jsx(b, { name: "check", "aria-hidden": "true" }) }) }),
-        o && /* @__PURE__ */ t.jsx("span", { className: e.loader, children: /* @__PURE__ */ t.jsx(f, { aria: { "aria-label": "Loading state" } }) })
-      ]
-    }
-  );
-};
-export {
-  I as DSSwitch
-};

package/systemfeedback.8515a4e0.js

@@ -1,25 +0,0 @@
-import "./assets/SystemFeedback.c30264c0.css";
-import { j as o } from "./chunks/jsx-runtime.5c071667.js";
-import { c } from "./chunks/index.8021d3e0.js";
-import { DSIcon as n } from "./icon.b4211784.js";
-const i = "_root_1adys_25", m = {
-  root: i
-}, l = {
-  valid: "circle-check-colored",
-  invalid: "diamond-exclamationmark-colored",
-  warning: "triangle-exclamationmark-colored"
-}, j = ({
-  className: r,
-  message: e,
-  type: s,
-  ...t
-}) => {
-  const a = c(m.root, r);
-  return /* @__PURE__ */ o.jsxs("div", { className: a, ...t, role: "alert", children: [
-    /* @__PURE__ */ o.jsx(n, { name: l[s], "aria-hidden": "true" }),
-    e
-  ] });
-};
-export {
-  j as DSSystemFeedback
-};

package/text.de8facb9.js

@@ -1,57 +0,0 @@
-import "./assets/Text.ac70cc84.css";
-import { j } from "./chunks/jsx-runtime.5c071667.js";
-import { c as x } from "./chunks/index.8021d3e0.js";
-const c = "_root_1d3j7_25", n = "_root--large_1d3j7_31", u = "_root--large-bold_1d3j7_41", b = "_root--medium_1d3j7_51", S = "_root--medium-bold_1d3j7_61", g = "_root--small_1d3j7_71", B = "_root--small-bold_1d3j7_81", i = "_root--x-small_1d3j7_91", X = "_root--x-small-bold_1d3j7_101", k = "_root--xx-small_1d3j7_111", p = "_root--theme-dark_1d3j7_121", o = {
-  root: c,
-  "root--large": "_root--large_1d3j7_31",
-  rootLarge: n,
-  "root--large-bold": "_root--large-bold_1d3j7_41",
-  rootLargeBold: u,
-  "root--medium": "_root--medium_1d3j7_51",
-  rootMedium: b,
-  "root--medium-bold": "_root--medium-bold_1d3j7_61",
-  rootMediumBold: S,
-  "root--small": "_root--small_1d3j7_71",
-  rootSmall: g,
-  "root--small-bold": "_root--small-bold_1d3j7_81",
-  rootSmallBold: B,
-  "root--x-small": "_root--x-small_1d3j7_91",
-  rootXSmall: i,
-  "root--x-small-bold": "_root--x-small-bold_1d3j7_101",
-  rootXSmallBold: X,
-  "root--xx-small": "_root--xx-small_1d3j7_111",
-  rootXxSmall: k,
-  "root--theme-dark": "_root--theme-dark_1d3j7_121",
-  rootThemeDark: p
-}, h = ({
-  children: t,
-  className: m,
-  size: l = "medium",
-  tag: d = "p",
-  theme: a = "light",
-  weight: r = "normal",
-  ..._
-}) => {
-  const s = d, e = x(o.root, m, {
-    // large
-    [o.rootLarge]: l === "large",
-    [o.rootLargeBold]: l === "large" && r === "bold",
-    // medium
-    [o.rootMedium]: l == "medium",
-    [o.rootMediumBold]: l === "medium" && r === "bold",
-    // small
-    [o.rootSmall]: l == "small",
-    [o.rootSmallBold]: l == "small" && r === "bold",
-    // x-small
-    [o.rootXSmall]: l == "x-small",
-    [o.rootXSmallBold]: l == "x-small" && r === "bold",
-    // xx-small
-    [o.rootXxSmall]: l == "xx-small",
-    // dark theme
-    [o.rootThemeDark]: a === "dark"
-  });
-  return /* @__PURE__ */ j.jsx(s, { className: e, ..._, children: t });
-};
-export {
-  h as DSText
-};

package/textarea.b8c40c8b.js

@@ -1,189 +0,0 @@
-import "./assets/Textarea.12046393.css";
-import { j as n } from "./chunks/jsx-runtime.5c071667.js";
-import { c as C } from "./chunks/index.8021d3e0.js";
-import { useState as c, useRef as oe, useEffect as x } from "react";
-import { u as re, h as se } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { g as H, p as V } from "./chunks/helpers.ea3ca41a.js";
-import { Asterisk as ie } from "./asterisk.cb74ea72.js";
-import { DSSystemFeedback as le } from "./systemfeedback.8515a4e0.js";
-const ce = "_textarea_1mfm3_73", fe = "_textarea--invalid_1mfm3_183", me = "_textarea--small_1mfm3_190", de = "_textarea--resize-auto_1mfm3_202", ue = "_root_1mfm3_212", _e = "_hint_1mfm3_220", xe = "_label_1mfm3_220", he = "_affix_1mfm3_224", be = "_affix--small_1mfm3_242", pe = "_affix--disabled_1mfm3_254", ve = "_prefix_1mfm3_258", Se = "_suffix_1mfm3_264", Ce = "_leading-icon_1mfm3_269", Ie = "_leading-icon--small_1mfm3_274", ge = "_action-button_1mfm3_278", je = "_label--hidden_1mfm3_295", we = "_feedback_1mfm3_322", Ae = "_char-count_1mfm3_327", ye = "_char-count-announcer_1mfm3_342", t = {
-  textarea: ce,
-  "textarea--invalid": "_textarea--invalid_1mfm3_183",
-  textareaInvalid: fe,
-  "textarea--small": "_textarea--small_1mfm3_190",
-  textareaSmall: me,
-  "textarea--resize-auto": "_textarea--resize-auto_1mfm3_202",
-  textareaResizeAuto: de,
-  root: ue,
-  hint: _e,
-  label: xe,
-  affix: he,
-  "affix--small": "_affix--small_1mfm3_242",
-  affixSmall: be,
-  "affix--disabled": "_affix--disabled_1mfm3_254",
-  affixDisabled: pe,
-  prefix: ve,
-  suffix: Se,
-  "leading-icon": "_leading-icon_1mfm3_269",
-  leadingIcon: Ce,
-  "leading-icon--small": "_leading-icon--small_1mfm3_274",
-  leadingIconSmall: Ie,
-  "action-button": "_action-button_1mfm3_278",
-  actionButton: ge,
-  "label--hidden": "_label--hidden_1mfm3_295",
-  labelHidden: je,
-  feedback: we,
-  "char-count": "_char-count_1mfm3_327",
-  charCount: Ae,
-  "char-count-announcer": "_char-count-announcer_1mfm3_342",
-  charCountAnnouncer: ye
-}, De = ({ id: o, label: m }) => {
-  if (!o)
-    throw new Error(
-      H(
-        "DSTextarea",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
-      )
-    );
-  if (!m)
-    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}.`
-      )
-    );
-}, Ve = ({
-  id: o,
-  label: m,
-  charsLimitText: z = "Character limit reached",
-  charsRemainingText: P = "Characters remaining:",
-  className: q,
-  defaultValue: M,
-  disabled: O = !1,
-  hint: h,
-  hideLabel: F = !1,
-  invalid: r = !1,
-  maxLength: e,
-  readonly: I = !1,
-  required: g = !1,
-  resize: d = "vertical",
-  size: W = "medium",
-  systemFeedback: i,
-  value: b,
-  wrapperClassName: G,
-  onChange: j,
-  onInput: w,
-  ...J
-}) => {
-  process.env.NODE_ENV !== "production" && De({
-    id: o,
-    label: m
-  });
-  const [K, A] = c(M || ""), [l, y] = c(0), [Q, D] = c(0), [U, N] = c("off"), [R, p] = c(i), [v, S] = c(r), T = b !== void 0, u = T ? b : K, s = oe(null), X = re(F);
-  x(() => {
-    if (!e || e <= 0)
-      return;
-    l >= e * 0.8 ? N("polite") : N("off");
-    const a = setTimeout(() => {
-      D(e - l || 0);
-    }, 1e3);
-    return () => clearTimeout(a);
-  }, [l]), x(() => {
-    A(u || ""), f(), e && e > 0 && (y(u.toString().length || 0), D(e - u.toString().length || 0));
-  }, [b]), x(() => {
-    r && i ? (p(i), S(r)) : !r && e && e >= 0 && l >= e ? (S(!0), p(z)) : (p(i), S(r));
-  }, [r, v, i, l]), x(() => {
-    if (se && d === "auto")
-      return f(), window.addEventListener("resize", f), () => window.removeEventListener("resize", f);
-  }, [d, s.current]);
-  const Y = C(t.root, G), Z = C(t.textarea, q, {
-    // small textarea
-    [t.textareaSmall]: W === "small",
-    // invalid state
-    [t.textareaInvalid]: v,
-    // resize handling
-    [t.textareaResizeAuto]: d === "auto"
-  }), L = C(t.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: X
-  }), B = `${o}-label`, E = `${o}-feedback`, $ = `${o}-hint`, k = `${o}-char-count-announcer`, ee = h ? ` ${$}` : "", f = () => {
-    if (s.current && d === "auto") {
-      s.current.style.height = "auto";
-      const a = V(s.current.scrollHeight), _ = 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 + _}rem`;
-    }
-  }, ae = () => {
-    const a = [];
-    return e && e > 0 && a.push(k), r && i && a.push(E), a.length > 0 ? a.join(" ") : void 0;
-  }, te = (a) => {
-    var _;
-    w && w(a), e && e > 0 && y(((_ = s.current) == null ? void 0 : _.value.length) || 0), f();
-  }, ne = (a) => {
-    j && j(a), T || A(a.target.value);
-  };
-  return /* @__PURE__ */ n.jsxs("div", { className: Y, children: [
-    /* @__PURE__ */ n.jsxs("label", { className: L, id: B, htmlFor: o, children: [
-      m,
-      g && /* @__PURE__ */ n.jsx(ie, {})
-    ] }),
-    h && /* @__PURE__ */ n.jsx("div", { className: t.hint, id: $, children: h }),
-    v && R && /* @__PURE__ */ n.jsx(
-      le,
-      {
-        className: t.feedback,
-        message: R,
-        type: "invalid",
-        id: E
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      "textarea",
-      {
-        className: Z,
-        id: o,
-        ref: s,
-        ...J,
-        "aria-labelledby": `${B}${ee}`,
-        "aria-describedby": ae(),
-        "aria-invalid": r,
-        "aria-disabled": I,
-        maxLength: e,
-        readOnly: I,
-        required: g,
-        disabled: O,
-        value: u,
-        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: [
-        l,
-        "/",
-        e
-      ] }),
-      /* @__PURE__ */ n.jsxs(
-        "div",
-        {
-          className: t.charCountAnnouncer,
-          id: k,
-          "aria-live": U,
-          "aria-atomic": "true",
-          children: [
-            P,
-            " ",
-            Q
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Ve as DSTextarea
-};

package/title.7be43d50.js

@@ -1,36 +0,0 @@
-import "./assets/Title.e9e5a7e6.css";
-import { j as t } from "./chunks/jsx-runtime.5c071667.js";
-import { c as n } from "./chunks/index.8021d3e0.js";
-const h = "_root_wvgfu_25", m = "_root--x-large_wvgfu_28", d = "_root--large_wvgfu_42", u = "_root--theme-dark_wvgfu_56", f = "_dash_wvgfu_59", o = {
-  root: h,
-  "root--x-large": "_root--x-large_wvgfu_28",
-  rootXLarge: m,
-  "root--large": "_root--large_wvgfu_42",
-  rootLarge: d,
-  "root--theme-dark": "_root--theme-dark_wvgfu_56",
-  rootThemeDark: u,
-  dash: f
-}, w = ({
-  children: e,
-  className: a,
-  size: r = "x-large",
-  tag: s = "h1",
-  // Design suggested to set default tag to h1
-  theme: g = "light",
-  ..._
-}) => {
-  const l = s, c = n(o.root, a, {
-    // sizes
-    [o.rootXLarge]: r === "x-large",
-    [o.rootLarge]: r === "large",
-    // dark theme
-    [o.rootThemeDark]: g === "dark"
-  });
-  return /* @__PURE__ */ t.jsxs(l, { className: c, ..._, children: [
-    e,
-    /* @__PURE__ */ t.jsx("span", { className: o.dash, "aria-hidden": "true", children: "ƒ" })
-  ] });
-};
-export {
-  w as DSTitle
-};