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

package/fieldset.yE6WV6Ls.js

@@ -1,98 +0,0 @@
-"use client";
-import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c } from "./chunks/index.CvOaL64Y.js";
-import "react";
-import { Asterisk as y } from "./asterisk.BlYjsfkN.js";
-import { DSHeading as w } from "./heading.C6k7Gakb.js";
-import { DSSystemFeedback as N } from "./systemfeedback.rBgdiL5T.js";
-import { g as j } from "./chunks/helpers.B1JT5ShS.js";
-import './assets/fieldset.DTFs_koU.css';const v = "_root_atnr0_63", E = "_child-wrapper_atnr0_69", M = "_legend_atnr0_76", q = "_legend--utility--m_atnr0_79", C = "_description_atnr0_90", P = "_description--small_atnr0_103", T = "_system-feedback_atnr0_107", t = {
-  root: v,
-  "child-wrapper": "_child-wrapper_atnr0_69",
-  childWrapper: E,
-  legend: M,
-  "legend--utility--m": "_legend--utility--m_atnr0_79",
-  legendUtilityM: q,
-  description: C,
-  "description--small": "_description--small_atnr0_103",
-  descriptionSmall: P,
-  "system-feedback": "_system-feedback_atnr0_107",
-  systemFeedback: T
-}, U = ({
-  description: o,
-  id: s,
-  legend: l,
-  systemFeedback: i
-}) => {
-  if (!s && (o || i))
-    throw new Error(
-      j(
-        "DSFieldset",
-        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
-      )
-    );
-  if (!l)
-    throw new Error(
-      j(
-        "DSFieldset",
-        "The legend prop is required. Please add the legend prop to the DSFieldset component."
-      )
-    );
-}, H = ({
-  children: o,
-  legend: s,
-  className: l,
-  description: i,
-  disabled: S = !1,
-  id: d,
-  invalid: p = !1,
-  required: m = !1,
-  systemFeedback: r,
-  ...b
-}) => {
-  process.env.NODE_ENV !== "production" && U({ description: i, id: d, legend: s, systemFeedback: r });
-  let n, _, g;
-  const a = typeof s == "object" && s !== void 0;
-  a && ({ headingSize: n, headingTag: _, headingText: g } = s);
-  const h = `${d}-feedback`, f = `${d}-description`, u = [
-    r && h,
-    i && f
-  ].filter(Boolean).join(" "), x = !a || n === "small" || n === "small-uppercase", D = c(t.root, l), F = c(t.legend, {
-    [t.legendUtilityM]: !a
-  }), k = c(t.description, {
-    [t.descriptionSmall]: x
-  });
-  return /* @__PURE__ */ e.jsxs(
-    "fieldset",
-    {
-      className: D,
-      disabled: S,
-      ...b,
-      "aria-invalid": p,
-      "aria-describedby": u || void 0,
-      children: [
-        /* @__PURE__ */ e.jsx("legend", { className: F, children: a ? /* @__PURE__ */ e.jsxs(w, { tag: _, size: n, children: [
-          g,
-          m && /* @__PURE__ */ e.jsx(y, {})
-        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          s,
-          m && /* @__PURE__ */ e.jsx(y, {})
-        ] }) }),
-        i && /* @__PURE__ */ e.jsx("span", { id: f, className: k, children: i }),
-        p && r && /* @__PURE__ */ e.jsx(
-          N,
-          {
-            id: h,
-            type: "invalid",
-            message: r,
-            className: t.systemFeedback
-          }
-        ),
-        /* @__PURE__ */ e.jsx("div", { className: t.childWrapper, children: o })
-      ]
-    }
-  );
-};
-export {
-  H as DSFieldset
-};

package/heading.C6k7Gakb.js

@@ -1,44 +0,0 @@
-"use client";
-import { j as p } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c } from "./chunks/index.CvOaL64Y.js";
-import './assets/heading.5HpYs7wS.css';const u = "_root_tyh2a_63", h = "_root--x-large_tyh2a_66", d = "_root--large_tyh2a_80", g = "_root--medium_tyh2a_94", i = "_root--medium-uppercase_tyh2a_102", n = "_root--small_tyh2a_110", y = "_root--small-uppercase_tyh2a_118", x = "_root--theme-dark_tyh2a_126", o = {
-  root: u,
-  "root--x-large": "_root--x-large_tyh2a_66",
-  rootXLarge: h,
-  "root--large": "_root--large_tyh2a_80",
-  rootLarge: d,
-  "root--medium": "_root--medium_tyh2a_94",
-  rootMedium: g,
-  "root--medium-uppercase": "_root--medium-uppercase_tyh2a_102",
-  rootMediumUppercase: i,
-  "root--small": "_root--small_tyh2a_110",
-  rootSmall: n,
-  "root--small-uppercase": "_root--small-uppercase_tyh2a_118",
-  rootSmallUppercase: y,
-  "root--theme-dark": "_root--theme-dark_tyh2a_126",
-  rootThemeDark: x
-}, L = ({
-  children: t,
-  className: a,
-  size: r = "medium",
-  tag: e = "h2",
-  // default tag because of SEO reasons (h1 should be used only once per page)
-  theme: m = "light",
-  ..._
-}) => {
-  const s = e, l = c(o.root, a, {
-    // sizes
-    [o.rootXLarge]: r === "x-large",
-    [o.rootLarge]: r === "large",
-    [o.rootMedium]: r == "medium",
-    [o.rootMediumUppercase]: r == "medium-uppercase",
-    [o.rootSmall]: r == "small",
-    [o.rootSmallUppercase]: r == "small-uppercase",
-    // dark theme
-    [o.rootThemeDark]: m === "dark"
-  });
-  return /* @__PURE__ */ p.jsx(s, { className: l, ..._, children: t });
-};
-export {
-  L as DSHeading
-};

package/input.vP5xcwzV.js

@@ -1,236 +0,0 @@
-"use client";
-import { j as n } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as l } from "./chunks/index.CvOaL64Y.js";
-import { useState as p, useRef as k, useLayoutEffect as B, useEffect as ia } from "react";
-import { u as sa } from "./chunks/useBreakpoint.5xBNDiCf.js";
-import { Asterisk as ea } from "./asterisk.BlYjsfkN.js";
-import { DSButton as T } from "./button.Di5XtChf.js";
-import { DSIcon as la } from "./icon.CmAhxgHK.js";
-import { DSSystemFeedback as oa } from "./systemfeedback.rBgdiL5T.js";
-import { v as ca, a as da, M as _a, b as ua, s as fa, i as v, c as ra } from "./chunks/Input.utils.Bly6ZzLI.js";
-import './assets/input.GpXQJqEO.css';const ha = "_input_hw550_187", pa = "_input--invalid_hw550_297", ma = "_input--small_hw550_304", ba = "_input--has-leading-icon_hw550_350", wa = "_input--has-action-button_hw550_353", xa = "_input--has-second-action-button_hw550_356", ga = "_input--has-affix_hw550_368", Ia = "_input--is-ready_hw550_380", ya = "_root_hw550_387", Sa = "_hint_hw550_395", Ha = "_label_hw550_395", ka = "_wrapper_hw550_399", va = "_affix_hw550_405", Ca = "_affix--small_hw550_425", Ra = "_affix--disabled_hw550_437", La = "_prefix_hw550_440", ja = "_affix--readonly_hw550_443", Aa = "_suffix_hw550_453", Da = "_leading-icon_hw550_460", Na = "_leading-icon--small_hw550_472", Ba = "_leading-icon--disabled_hw550_475", Ta = "_action-button_hw550_484", Ea = "_label--hidden_hw550_501", Fa = "_feedback_hw550_528", a = {
-  input: ha,
-  "input--invalid": "_input--invalid_hw550_297",
-  inputInvalid: pa,
-  "input--small": "_input--small_hw550_304",
-  inputSmall: ma,
-  "input--has-leading-icon": "_input--has-leading-icon_hw550_350",
-  inputHasLeadingIcon: ba,
-  "input--has-action-button": "_input--has-action-button_hw550_353",
-  inputHasActionButton: wa,
-  "input--has-second-action-button": "_input--has-second-action-button_hw550_356",
-  inputHasSecondActionButton: xa,
-  "input--has-affix": "_input--has-affix_hw550_368",
-  inputHasAffix: ga,
-  "input--is-ready": "_input--is-ready_hw550_380",
-  inputIsReady: Ia,
-  root: ya,
-  hint: Sa,
-  label: Ha,
-  wrapper: ka,
-  affix: va,
-  "affix--small": "_affix--small_hw550_425",
-  affixSmall: Ca,
-  "affix--disabled": "_affix--disabled_hw550_437",
-  affixDisabled: Ra,
-  prefix: La,
-  "affix--readonly": "_affix--readonly_hw550_443",
-  affixReadonly: ja,
-  suffix: Aa,
-  "leading-icon": "_leading-icon_hw550_460",
-  leadingIcon: Da,
-  "leading-icon--small": "_leading-icon--small_hw550_472",
-  leadingIconSmall: Na,
-  "leading-icon--disabled": "_leading-icon--disabled_hw550_475",
-  leadingIconDisabled: Ba,
-  "action-button": "_action-button_hw550_484",
-  actionButton: Ta,
-  "label--hidden": "_label--hidden_hw550_501",
-  labelHidden: Ea,
-  feedback: Fa
-}, Ja = ({
-  id: d,
-  label: C,
-  actionButtonLabel: E,
-  actionButtonIconName: u,
-  actionButtonIconSource: m,
-  actionButtonOnClick: F,
-  className: P,
-  disabled: i = !1,
-  hint: b,
-  hideLabel: O = !1,
-  invalid: f = !1,
-  leadingIconName: r,
-  leadingIconSource: h,
-  prefix: s,
-  readonly: _ = !1,
-  required: R = !1,
-  size: e = "medium",
-  suffix: t,
-  systemFeedback: w,
-  type: o = "text",
-  ...$
-}) => {
-  process.env.NODE_ENV !== "production" && (ca({
-    id: d,
-    label: C,
-    prefix: s,
-    suffix: t,
-    leadingIconName: r,
-    leadingIconSource: h,
-    actionButtonIconName: u,
-    actionButtonIconSource: m
-  }), da(o));
-  const [W, X] = p(!1), [M, V] = p(!1), [x, G] = p(!1), [U, J] = p({}), g = k(null), K = s == null ? void 0 : s.substring(0, _a), I = k(null), Q = t == null ? void 0 : t.substring(0, ua), y = k(null), Y = sa(O);
-  B(() => {
-    const c = e === "medium" ? 16 : 8, S = {};
-    if (I.current) {
-      const H = I.current.offsetWidth;
-      S.paddingLeft = c + H + "px";
-    }
-    if (y.current) {
-      const H = y.current.offsetWidth;
-      S.paddingRight = c + H + "px";
-    }
-    J(S), X(!0);
-  }, [s, t, e, M]), B(() => {
-    (async () => {
-      "fonts" in document && (await document.fonts.load(
-        '1em "STIHL Contraface Digital Text Regular"'
-      ), V(!0));
-    })();
-  }, []), ia(() => {
-    const c = fa(
-      v(o),
-      ra(o)
-    );
-    G(c);
-  }, [o]);
-  const L = l(a.affix, {
-    [a.affixSmall]: e === "small",
-    [a.affixDisabled]: i,
-    [a.affixReadonly]: _
-  }), j = `${d}-label`, A = `${d}-feedback`, D = `${d}-hint`, Z = b ? ` ${D}` : "", q = l(a.root, P), z = l(a.input, {
-    // small input
-    [a.inputSmall]: e === "small",
-    // invalid state
-    [a.inputInvalid]: f,
-    // leading icon
-    [a.inputHasLeadingIcon]: r || h,
-    // prefix/suffix
-    [a.inputHasAffix]: s || t,
-    // action button
-    [a.inputHasActionButton]: u || m || x,
-    [a.inputIsReady]: W
-  }), aa = l(a.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [a.labelHidden]: Y
-  }), na = l(a.leadingIcon, {
-    [a.leadingIconSmall]: e === "small",
-    [a.leadingIconDisabled]: i
-  }), N = l(a.actionButton, {
-    [a.actionButtonSmall]: e === "small"
-  }), ta = (c) => {
-    g.current && !i && !_ && g.current.showPicker(), c.preventDefault();
-  };
-  return /* @__PURE__ */ n.jsxs("div", { className: q, children: [
-    /* @__PURE__ */ n.jsxs("label", { className: aa, id: j, htmlFor: d, children: [
-      C,
-      R && /* @__PURE__ */ n.jsx(ea, {})
-    ] }),
-    b && /* @__PURE__ */ n.jsx("div", { className: a.hint, id: D, children: b }),
-    f && w && /* @__PURE__ */ n.jsx(
-      oa,
-      {
-        className: a.feedback,
-        message: w,
-        type: "invalid",
-        id: A
-      }
-    ),
-    /* @__PURE__ */ n.jsxs("div", { className: a.wrapper, children: [
-      s && /* @__PURE__ */ n.jsx(
-        "span",
-        {
-          className: l(L, a.prefix),
-          ref: I,
-          "aria-disabled": i,
-          children: K
-        }
-      ),
-      !s && (r || h) && /* @__PURE__ */ n.jsx(
-        la,
-        {
-          name: r,
-          theme: "light",
-          source: h,
-          className: na,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ n.jsx(
-        "input",
-        {
-          type: o,
-          className: z,
-          id: d,
-          ref: g,
-          ...$,
-          style: U,
-          "aria-labelledby": `${j}${Z}`,
-          "aria-describedby": f && w ? A : void 0,
-          "aria-invalid": f,
-          "aria-disabled": _,
-          readOnly: _,
-          required: R,
-          disabled: i
-        }
-      ),
-      t && /* @__PURE__ */ n.jsx(
-        "span",
-        {
-          className: l(L, a.suffix),
-          ref: y,
-          "aria-disabled": i,
-          children: Q
-        }
-      ),
-      !t && !x && (u || m) && /* @__PURE__ */ n.jsx(
-        T,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: u,
-          variant: "ghost",
-          className: N,
-          size: e,
-          onClick: F,
-          type: "button",
-          disabled: i || _,
-          children: E
-        }
-      ),
-      !t && x && !_ && !i && /* @__PURE__ */ n.jsxs(
-        T,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: v(o) ? "calendar" : "clock",
-          variant: "ghost",
-          className: N,
-          size: e,
-          onClick: ta,
-          type: "button",
-          children: [
-            "Open ",
-            v(o) ? "date" : "time",
-            " picker"
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Ja as DSInput
-};

package/inputpassword.BiQ8ORmn.js

@@ -1,139 +0,0 @@
-"use client";
-import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as i } from "./chunks/index.CvOaL64Y.js";
-import { useState as D } from "react";
-import { u as C } from "./chunks/useBreakpoint.5xBNDiCf.js";
-import { Asterisk as L } from "./asterisk.BlYjsfkN.js";
-import { DSButton as $ } from "./button.Di5XtChf.js";
-import { DSSystemFeedback as E } from "./systemfeedback.rBgdiL5T.js";
-import { g as b } from "./chunks/helpers.B1JT5ShS.js";
-import './assets/inputpassword.B9J1hCcj.css';const q = "_input_w95w8_187", R = "_input--invalid_w95w8_297", V = "_input--small_w95w8_304", O = "_input--has-leading-icon_w95w8_350", F = "_input--has-action-button_w95w8_353", M = "_input--has-second-action-button_w95w8_356", T = "_input--has-affix_w95w8_368", G = "_input--is-ready_w95w8_380", J = "_root_w95w8_387", K = "_hint_w95w8_395", Q = "_label_w95w8_395", U = "_wrapper_w95w8_399", W = "_action-button_w95w8_405", X = "_label--hidden_w95w8_422", Y = "_feedback_w95w8_449", t = {
-  input: q,
-  "input--invalid": "_input--invalid_w95w8_297",
-  inputInvalid: R,
-  "input--small": "_input--small_w95w8_304",
-  inputSmall: V,
-  "input--has-leading-icon": "_input--has-leading-icon_w95w8_350",
-  inputHasLeadingIcon: O,
-  "input--has-action-button": "_input--has-action-button_w95w8_353",
-  inputHasActionButton: F,
-  "input--has-second-action-button": "_input--has-second-action-button_w95w8_356",
-  inputHasSecondActionButton: M,
-  "input--has-affix": "_input--has-affix_w95w8_368",
-  inputHasAffix: T,
-  "input--is-ready": "_input--is-ready_w95w8_380",
-  inputIsReady: G,
-  root: J,
-  hint: K,
-  label: Q,
-  wrapper: U,
-  "action-button": "_action-button_w95w8_405",
-  actionButton: W,
-  "label--hidden": "_label--hidden_w95w8_422",
-  labelHidden: X,
-  feedback: Y
-}, Z = ({ id: n, label: s }) => {
-  if (!n)
-    throw new Error(
-      b(
-        "DSInputPassword",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
-      )
-    );
-  if (!s)
-    throw new Error(
-      b(
-        "DSInputPassword",
-        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`
-      )
-    );
-}, lt = ({
-  id: n,
-  label: s,
-  autocomplete: h = "new-password",
-  className: f,
-  disabled: c = !1,
-  hidePasswordText: y = "Hide password",
-  hint: e,
-  hideLabel: S = !1,
-  invalid: o = !1,
-  readonly: r = !1,
-  required: d = !1,
-  showPasswordText: x = "Show password",
-  size: l = "medium",
-  systemFeedback: u,
-  ...I
-}) => {
-  process.env.NODE_ENV !== "production" && Z({
-    id: n,
-    label: s
-  });
-  const [p, B] = D(!1), w = `${n}-label`, _ = `${n}-feedback`, m = `${n}-hint`, H = e ? ` ${m}` : "", g = C(S), v = i(t.root, f), P = i(t.input, {
-    // small input
-    [t.inputSmall]: l === "small",
-    // invalid state
-    [t.inputInvalid]: o,
-    // action button - input password always has an action button
-    [t.inputHasActionButton]: !0
-  }), N = i(t.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: g
-  }), j = i(t.actionButton, {
-    [t.actionButtonSmall]: l === "small"
-  }), k = () => {
-    B((A) => !A);
-  };
-  return /* @__PURE__ */ a.jsxs("div", { className: v, children: [
-    /* @__PURE__ */ a.jsxs("label", { className: N, id: w, htmlFor: n, children: [
-      s,
-      d && /* @__PURE__ */ a.jsx(L, {})
-    ] }),
-    e && /* @__PURE__ */ a.jsx("div", { className: t.hint, id: m, children: e }),
-    o && u && /* @__PURE__ */ a.jsx(
-      E,
-      {
-        className: t.feedback,
-        message: u,
-        type: "invalid",
-        id: _
-      }
-    ),
-    /* @__PURE__ */ a.jsxs("div", { className: t.wrapper, children: [
-      /* @__PURE__ */ a.jsx(
-        "input",
-        {
-          className: P,
-          id: n,
-          ...I,
-          "aria-labelledby": `${w}${H}`,
-          "aria-describedby": o && u ? _ : void 0,
-          "aria-invalid": o,
-          "aria-disabled": r,
-          readOnly: r,
-          required: d,
-          disabled: c,
-          autoComplete: h,
-          type: p ? "text" : "password"
-        }
-      ),
-      /* @__PURE__ */ a.jsx(
-        $,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: p ? "eye-closed" : "eye",
-          variant: "ghost",
-          className: j,
-          size: l,
-          onClick: k,
-          type: "button",
-          disabled: c,
-          children: p ? y : x
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  lt as DSInputPassword
-};