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

package/input.BAxvG272.js

@@ -0,0 +1,236 @@
+"use client";
+import { j as n } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as l } from "./chunks/index.CvOaL64Y.js";
+import { useState as x, useRef as k, useLayoutEffect as w, useEffect as ia } from "react";
+import { u as sa } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as ea } from "./asterisk.Cjbk-xZi.js";
+import { DSButton as E } from "./button.DlFWwHuA.js";
+import { D as la } from "./chunks/Icon.n4XZrQ4N.js";
+import { DSSystemFeedback as oa } from "./systemfeedback.CUWch42u.js";
+import { v as da, b as ca, M as _a, a as ua, s as fa, c as ra, i as v } from "./chunks/Input.utils.AKWCNkpA.js";
+import './assets/input.71tOIrpp.css';const pa = "_input_1jdyx_226", xa = "_input--invalid_1jdyx_336", ma = "_input--small_1jdyx_343", ya = "_input--has-leading-icon_1jdyx_395", ja = "_input--has-action-button_1jdyx_398", ha = "_input--has-second-action-button_1jdyx_401", ba = "_input--has-affix_1jdyx_413", ga = "_input--is-ready_1jdyx_427", Ia = "_root_1jdyx_434", Sa = "_hint_1jdyx_442", Ha = "_label_1jdyx_442", ka = "_wrapper_1jdyx_446", va = "_affix_1jdyx_452", Ca = "_affix--small_1jdyx_472", Ra = "_affix--disabled_1jdyx_484", Da = "_prefix_1jdyx_487", La = "_affix--readonly_1jdyx_490", Aa = "_suffix_1jdyx_500", Na = "_leading-icon_1jdyx_507", Ba = "_leading-icon--small_1jdyx_519", wa = "_leading-icon--disabled_1jdyx_522", Ea = "_action-button_1jdyx_531", Ta = "_label--hidden_1jdyx_548", Fa = "_feedback_1jdyx_575", a = {
+  input: pa,
+  "input--invalid": "_input--invalid_1jdyx_336",
+  inputInvalid: xa,
+  "input--small": "_input--small_1jdyx_343",
+  inputSmall: ma,
+  "input--has-leading-icon": "_input--has-leading-icon_1jdyx_395",
+  inputHasLeadingIcon: ya,
+  "input--has-action-button": "_input--has-action-button_1jdyx_398",
+  inputHasActionButton: ja,
+  "input--has-second-action-button": "_input--has-second-action-button_1jdyx_401",
+  inputHasSecondActionButton: ha,
+  "input--has-affix": "_input--has-affix_1jdyx_413",
+  inputHasAffix: ba,
+  "input--is-ready": "_input--is-ready_1jdyx_427",
+  inputIsReady: ga,
+  root: Ia,
+  hint: Sa,
+  label: Ha,
+  wrapper: ka,
+  affix: va,
+  "affix--small": "_affix--small_1jdyx_472",
+  affixSmall: Ca,
+  "affix--disabled": "_affix--disabled_1jdyx_484",
+  affixDisabled: Ra,
+  prefix: Da,
+  "affix--readonly": "_affix--readonly_1jdyx_490",
+  affixReadonly: La,
+  suffix: Aa,
+  "leading-icon": "_leading-icon_1jdyx_507",
+  leadingIcon: Na,
+  "leading-icon--small": "_leading-icon--small_1jdyx_519",
+  leadingIconSmall: Ba,
+  "leading-icon--disabled": "_leading-icon--disabled_1jdyx_522",
+  leadingIconDisabled: wa,
+  "action-button": "_action-button_1jdyx_531",
+  actionButton: Ea,
+  "label--hidden": "_label--hidden_1jdyx_548",
+  labelHidden: Ta,
+  feedback: Fa
+}, Ja = ({
+  id: c,
+  label: C,
+  actionButtonLabel: T,
+  actionButtonIconName: u,
+  actionButtonIconSource: m,
+  actionButtonOnClick: F,
+  className: P,
+  disabled: i = !1,
+  hint: y,
+  hideLabel: O = !1,
+  invalid: f = !1,
+  leadingIconName: r,
+  leadingIconSource: p,
+  prefix: s,
+  readonly: _ = !1,
+  required: R = !1,
+  size: e = "medium",
+  suffix: t,
+  systemFeedback: j,
+  type: o = "text",
+  ...$
+}) => {
+  process.env.NODE_ENV !== "production" && (da({
+    id: c,
+    label: C,
+    prefix: s,
+    suffix: t,
+    leadingIconName: r,
+    leadingIconSource: p,
+    actionButtonIconName: u,
+    actionButtonIconSource: m
+  }), ca(o));
+  const [W, X] = x(!1), [M, V] = x(!1), [h, G] = x(!1), [U, J] = x({}), b = k(null), K = s == null ? void 0 : s.substring(0, _a), g = k(null), Q = t == null ? void 0 : t.substring(0, ua), I = k(null), Y = sa(O);
+  w(() => {
+    const d = e === "medium" ? 16 : 8, S = {};
+    if (g.current) {
+      const H = g.current.offsetWidth;
+      S.paddingInlineStart = d + H + "px";
+    }
+    if (I.current) {
+      const H = I.current.offsetWidth;
+      S.paddingInlineEnd = d + H + "px";
+    }
+    J(S), X(!0);
+  }, [s, t, e, M]), w(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), V(!0));
+    })();
+  }, []), ia(() => {
+    const d = fa(
+      v(o),
+      ra(o)
+    );
+    G(d);
+  }, [o]);
+  const D = l(a.affix, {
+    [a.affixSmall]: e === "small",
+    [a.affixDisabled]: i,
+    [a.affixReadonly]: _
+  }), L = `${c}-label`, A = `${c}-feedback`, N = `${c}-hint`, Z = y ? ` ${N}` : "", 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 || p,
+    // prefix/suffix
+    [a.inputHasAffix]: s || t,
+    // action button
+    [a.inputHasActionButton]: u || m || h,
+    [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
+  }), B = l(a.actionButton, {
+    [a.actionButtonSmall]: e === "small"
+  }), ta = (d) => {
+    b.current && !i && !_ && b.current.showPicker(), d.preventDefault();
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: q, children: [
+    /* @__PURE__ */ n.jsxs("label", { className: aa, id: L, htmlFor: c, children: [
+      C,
+      R && /* @__PURE__ */ n.jsx(ea, {})
+    ] }),
+    y && /* @__PURE__ */ n.jsx("div", { className: a.hint, id: N, children: y }),
+    f && j && /* @__PURE__ */ n.jsx(
+      oa,
+      {
+        className: a.feedback,
+        message: j,
+        type: "invalid",
+        id: A
+      }
+    ),
+    /* @__PURE__ */ n.jsxs("div", { className: a.wrapper, children: [
+      s && /* @__PURE__ */ n.jsx(
+        "span",
+        {
+          className: l(D, a.prefix),
+          ref: g,
+          "aria-disabled": i,
+          children: K
+        }
+      ),
+      !s && (r || p) && /* @__PURE__ */ n.jsx(
+        la,
+        {
+          name: r,
+          theme: "light",
+          source: p,
+          className: na,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          type: o,
+          className: z,
+          id: c,
+          ref: b,
+          ...$,
+          style: U,
+          "aria-labelledby": `${L}${Z}`,
+          "aria-describedby": f && j ? A : void 0,
+          "aria-invalid": f,
+          "aria-disabled": _,
+          readOnly: _,
+          required: R,
+          disabled: i
+        }
+      ),
+      t && /* @__PURE__ */ n.jsx(
+        "span",
+        {
+          className: l(D, a.suffix),
+          ref: I,
+          "aria-disabled": i,
+          children: Q
+        }
+      ),
+      !t && !h && (u || m) && /* @__PURE__ */ n.jsx(
+        E,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: u,
+          variant: "ghost",
+          className: B,
+          size: e,
+          onClick: F,
+          type: "button",
+          disabled: i || _,
+          children: T
+        }
+      ),
+      !t && h && !_ && !i && /* @__PURE__ */ n.jsxs(
+        E,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: v(o) ? "calendar" : "clock",
+          variant: "ghost",
+          className: B,
+          size: e,
+          onClick: ta,
+          type: "button",
+          children: [
+            "Open ",
+            v(o) ? "date" : "time",
+            " picker"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ja as DSInput
+};

package/inputpassword.mn9qFlfs.js

@@ -0,0 +1,12 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.Cjbk-xZi.js";
+import "./button.DlFWwHuA.js";
+import "./systemfeedback.CUWch42u.js";
+import { D as n } from "./chunks/InputPassword.DTqI58Z4.js";
+export {
+  n as DSInputPassword
+};

package/inputsearch.qQJj9yFd.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/helpers.B1JT5ShS.js";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.Cjbk-xZi.js";
+import "./button.DlFWwHuA.js";
+import "./systemfeedback.CUWch42u.js";
+import { D as s } from "./chunks/InputSearch.IwQATLKh.js";
+export {
+  s as DSInputSearch
+};

package/inputstepper.DhbHujiM.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.Cjbk-xZi.js";
+import "./button.DlFWwHuA.js";
+import "./chunks/Input.utils.AKWCNkpA.js";
+import "./systemfeedback.CUWch42u.js";
+import { D } from "./chunks/InputStepper.Jew1ETB6.js";
+export {
+  D as DSInputStepper
+};

package/link.SAcKvzJ3.js

@@ -0,0 +1,115 @@
+"use client";
+import { j as d } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as g } from "./chunks/index.CvOaL64Y.js";
+import { u as h } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { D as H } from "./chunks/Icon.n4XZrQ4N.js";
+import './assets/link.D61tKkSK.css';const S = "_root_rd44x_151", b = "_root--highlight_rd44x_219", j = "_root--dark-highlight_rd44x_219", L = "_root--filled_rd44x_297", C = "_root--outline_rd44x_325", N = "_root--ghost_rd44x_352", T = "_root--ghost-flush_rd44x_377", B = "_root--small_rd44x_383", E = "_root--dark-filled_rd44x_460", R = "_root--dark-outline_rd44x_519", V = "_root--dark-ghost_rd44x_577", q = "_root--dark-ghost-flush_rd44x_633", w = "_root--icon-left_rd44x_692", A = "_root--icon-only_rd44x_708", J = "_root--icon-only-small_rd44x_717", K = "_label--hidden_rd44x_728", o = {
+  root: S,
+  "root--highlight": "_root--highlight_rd44x_219",
+  rootHighlight: b,
+  "root--dark-highlight": "_root--dark-highlight_rd44x_219",
+  rootDarkHighlight: j,
+  "root--filled": "_root--filled_rd44x_297",
+  rootFilled: L,
+  "root--outline": "_root--outline_rd44x_325",
+  rootOutline: C,
+  "root--ghost": "_root--ghost_rd44x_352",
+  rootGhost: N,
+  "root--ghost-flush": "_root--ghost-flush_rd44x_377",
+  rootGhostFlush: T,
+  "root--small": "_root--small_rd44x_383",
+  rootSmall: B,
+  "root--dark-filled": "_root--dark-filled_rd44x_460",
+  rootDarkFilled: E,
+  "root--dark-outline": "_root--dark-outline_rd44x_519",
+  rootDarkOutline: R,
+  "root--dark-ghost": "_root--dark-ghost_rd44x_577",
+  rootDarkGhost: V,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_rd44x_633",
+  rootDarkGhostFlush: q,
+  "root--icon-left": "_root--icon-left_rd44x_692",
+  rootIconLeft: w,
+  "root--icon-only": "_root--icon-only_rd44x_708",
+  rootIconOnly: A,
+  "root--icon-only-small": "_root--icon-only-small_rd44x_717",
+  rootIconOnlySmall: J,
+  "label--hidden": "_label--hidden_rd44x_728",
+  labelHidden: K
+}, W = ({
+  children: c,
+  aria: k,
+  className: u,
+  dataTrackingid: x,
+  download: f,
+  hideLabel: s = !1,
+  href: i,
+  iconName: n,
+  iconPosition: m = "left",
+  iconSource: a,
+  isFlush: l = !1,
+  referrerPolicy: D,
+  rel: y,
+  size: _ = "medium",
+  target: G = "_self",
+  theme: r = "light",
+  variant: t = "filled",
+  ...O
+}) => {
+  const I = g(o.root, u, {
+    // variant
+    [o.rootFilled]: t === "filled",
+    [o.rootHighlight]: t === "highlight",
+    [o.rootOutline]: t === "outline",
+    [o.rootGhost]: t === "ghost" && l !== !0,
+    // isFlush
+    [o.rootGhostFlush]: t === "ghost" && l === !0,
+    // dark theme
+    [o.rootDarkFilled]: r === "dark" && t === "filled",
+    [o.rootDarkHighlight]: r === "dark" && t === "highlight",
+    [o.rootDarkOutline]: r === "dark" && t === "outline",
+    [o.rootDarkGhost]: r === "dark" && t === "ghost" && l !== !0,
+    // dark isFlush
+    [o.rootDarkGhostFlush]: r === "dark" && t === "ghost" && l === !0,
+    // size
+    [o.rootSmall]: _ === "small",
+    // icon position
+    [o.rootIconLeft]: m === "left",
+    // icon only
+    [o.rootIconOnly]: h(s) && _ === "medium",
+    [o.rootIconOnlySmall]: h(s) && _ === "small"
+  }), p = g({
+    // hide label only visually to keep them available for assistive technologies
+    [o.labelHidden]: h(s)
+  }), F = r === "light" && t === "filled" || r === "dark" && t === "outline" || r === "dark" && t === "ghost" ? "dark" : "light", e = i === void 0 ? "span" : "a";
+  return /* @__PURE__ */ d.jsxs(
+    e,
+    {
+      className: I,
+      "data-trackingid": x,
+      ...e === "a" && {
+        href: i,
+        target: G,
+        rel: y,
+        referrerPolicy: D,
+        download: f
+      },
+      ...k,
+      ...O,
+      children: [
+        /* @__PURE__ */ d.jsx("span", { className: p, children: c }),
+        (n || a) && /* @__PURE__ */ d.jsx(
+          H,
+          {
+            name: n,
+            theme: F,
+            source: a,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as DSLink
+};

package/linkstandalone.DNe0Nydm.js

@@ -0,0 +1,79 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as x } from "./chunks/index.CvOaL64Y.js";
+import { D as H } from "./chunks/Icon.n4XZrQ4N.js";
+import "react";
+import './assets/linkstandalone.Bx8Uvo0G.css';const j = "_root_79ned_76", v = "_root--highlight_79ned_152", L = "_root--neutral-dark_79ned_228", N = "_root--highlight-dark_79ned_304", I = "_root--active_79ned_380", A = "_root--icon-left_79ned_386", o = {
+  root: j,
+  "root--highlight": "_root--highlight_79ned_152",
+  rootHighlight: v,
+  "root--neutral-dark": "_root--neutral-dark_79ned_228",
+  rootNeutralDark: L,
+  "root--highlight-dark": "_root--highlight-dark_79ned_304",
+  rootHighlightDark: N,
+  "root--active": "_root--active_79ned_380",
+  rootActive: I,
+  "root--icon-left": "_root--icon-left_79ned_386",
+  rootIconLeft: A
+}, C = ({
+  children: h,
+  aria: s,
+  active: _,
+  className: g,
+  dataTrackingid: c,
+  download: d,
+  href: e,
+  iconName: a,
+  iconPosition: k = "left",
+  iconSource: n,
+  referrerPolicy: u,
+  rel: f,
+  target: m = "_self",
+  theme: t = "light",
+  variant: r = "neutral",
+  ...D
+}) => {
+  const p = x(o.root, g, {
+    // variant
+    [o.rootHighlight]: r === "highlight",
+    // theme
+    [o.rootNeutralDark]: t === "dark" && r === "neutral",
+    [o.rootHighlightDark]: t === "dark" && r === "highlight",
+    // active
+    [o.rootActive]: _,
+    // icon position
+    [o.rootIconLeft]: k === "left"
+  }), l = e === void 0 ? "span" : "a";
+  return /* @__PURE__ */ i.jsxs(
+    l,
+    {
+      className: p,
+      "data-trackingid": c,
+      ...l === "a" && {
+        href: e,
+        target: m,
+        rel: f,
+        referrerPolicy: u,
+        download: d
+      },
+      ...s,
+      ...D,
+      children: [
+        /* @__PURE__ */ i.jsx("span", { className: o.label, children: h }),
+        (a || n) && /* @__PURE__ */ i.jsx(
+          H,
+          {
+            name: a,
+            theme: t,
+            source: n,
+            size: "medium",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C as DSLinkStandalone
+};

package/{logo.C_oJ8isW.js → logo.BR_CUXFl.js}

@@ -1,19 +1,19 @@
 "use client";
-import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { j as a } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c as n } from "./chunks/index.CvOaL64Y.js";
-import './assets/logo.BbHYgnWo.css';const l = "_anchor_12s9w_63", v = "_svg_12s9w_64", e = "_anchor--dark_12s9w_103", x = "_svg-background_12s9w_134", w = "_svg-background--dark_12s9w_137", u = "_svg-text_12s9w_140", i = "_svg-text--dark_12s9w_143", s = {
-  anchor: l,
-  svg: v,
-  "anchor--dark": "_anchor--dark_12s9w_103",
-  anchorDark: e,
-  "svg-background": "_svg-background_12s9w_134",
-  svgBackground: x,
-  "svg-background--dark": "_svg-background--dark_12s9w_137",
-  svgBackgroundDark: w,
-  "svg-text": "_svg-text_12s9w_140",
-  svgText: u,
-  "svg-text--dark": "_svg-text--dark_12s9w_143",
-  svgTextDark: i
+import './assets/logo.C05WqGId.css';const d = "_anchor_1z0x0_76", l = "_svg_1z0x0_77", v = "_anchor--dark_1z0x0_116", e = "_svg-background_1z0x0_147", u = "_svg-background--dark_1z0x0_150", i = "_svg-text_1z0x0_153", z = "_svg-text--dark_1z0x0_156", s = {
+  anchor: d,
+  svg: l,
+  "anchor--dark": "_anchor--dark_1z0x0_116",
+  anchorDark: v,
+  "svg-background": "_svg-background_1z0x0_147",
+  svgBackground: e,
+  "svg-background--dark": "_svg-background--dark_1z0x0_150",
+  svgBackgroundDark: u,
+  "svg-text": "_svg-text_1z0x0_153",
+  svgText: i,
+  "svg-text--dark": "_svg-text--dark_1z0x0_156",
+  svgTextDark: z
 }, B = ({
   aria: _,
   className: c,
@@ -21,7 +21,7 @@ import './assets/logo.BbHYgnWo.css';const l = "_anchor_12s9w_63", v = "_svg_12s9
   target: h = "_self",
   theme: g,
   variant: k = "standard",
-  ...d
+  ...x
 }) => {
   const t = k === "background" || g === "dark", o = /* @__PURE__ */ a.jsxs(
     "svg",
@@ -59,7 +59,7 @@ import './assets/logo.BbHYgnWo.css';const l = "_anchor_12s9w_63", v = "_svg_12s9
       href: r,
       target: h,
       ..._,
-      ...d,
+      ...x,
       children: o
     }
   ) : o;

package/notification.CnJOdQza.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "./chunks/Icon.n4XZrQ4N.js";
+import { D as e } from "./chunks/Notification.DbflCBIL.js";
+import "./button.DlFWwHuA.js";
+export {
+  e as DSNotification
+};

package/notification.d.ts

@@ -0,0 +1 @@
+export * from './components/Notification/Notification'

package/{optioncheckbox.-DRnW_ch.js → optioncheckbox.C4l2UIak.js}

@@ -1,20 +1,20 @@
 "use client";
-import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { j as e } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c as s } from "./chunks/index.CvOaL64Y.js";
-import { DSIcon as _ } from "./icon.PX9_1kNB.js";
-import './assets/optioncheckbox.C-K1FLhc.css';const l = "_root_1sig6_125", k = "_root--disabled_1sig6_144", d = "_checkbox_1sig6_148", n = "_icon-check_1sig6_162", r = "_checkbox--checked_1sig6_181", x = "_checkbox--disabled_1sig6_184", m = "_label_1sig6_201", c = {
+import { D as _ } from "./chunks/Icon.n4XZrQ4N.js";
+import './assets/optioncheckbox.BdRJHcSw.css';const l = "_root_1v9si_151", k = "_root--disabled_1v9si_170", d = "_checkbox_1v9si_174", n = "_icon-check_1v9si_190", r = "_checkbox--checked_1v9si_211", x = "_checkbox--disabled_1v9si_214", m = "_label_1v9si_231", c = {
   root: l,
-  "root--disabled": "_root--disabled_1sig6_144",
+  "root--disabled": "_root--disabled_1v9si_170",
   rootDisabled: k,
   checkbox: d,
-  "icon-check": "_icon-check_1sig6_162",
+  "icon-check": "_icon-check_1v9si_190",
   iconCheck: n,
-  "checkbox--checked": "_checkbox--checked_1sig6_181",
+  "checkbox--checked": "_checkbox--checked_1v9si_211",
   checkboxChecked: r,
-  "checkbox--disabled": "_checkbox--disabled_1sig6_184",
+  "checkbox--disabled": "_checkbox--disabled_1v9si_214",
   checkboxDisabled: x,
   label: m
-}, j = ({
+}, D = ({
   label: i,
   checked: h,
   className: a,
@@ -39,5 +39,5 @@ import './assets/optioncheckbox.C-K1FLhc.css';const l = "_root_1sig6_125", k = "
   ] }) });
 };
 export {
-  j as OptionCheckbox
+  D as OptionCheckbox
 };