@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.11

package/input.v7qB7wPJ.js

@@ -0,0 +1,239 @@
+"use client";
+import { j as s } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as l } from "./chunks/index.CvOaL64Y.js";
+import { useState as h, useRef as D, useEffect as ta } from "react";
+import { u as ia } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { v as ea, b as la, M as oa, a as ca, u as B, s as da, c as pa, i as k } from "./chunks/Input.utils.ChV6RJsh.js";
+import { Asterisk as _a } from "./asterisk.DDn-yX4P.js";
+import { DSButton as E } from "./button.C5opEJ6x.js";
+import { D as ua } from "./chunks/Icon.C2o2seDb.js";
+import { DSSystemFeedback as fa } from "./systemfeedback.ZzRUAVYX.js";
+import './assets/input.Q5oKkmW2.css';const ra = "_input_7spwh_226", ha = "_input--invalid_7spwh_343", ma = "_input--small_7spwh_350", ba = "_input--has-leading-icon_7spwh_404", wa = "_input--has-action-button_7spwh_407", xa = "_input--has-second-action-button_7spwh_410", ga = "_input--has-affix_7spwh_422", Ia = "_input--is-ready_7spwh_436", Sa = "_root_7spwh_443", ya = "_hint_7spwh_451", Ha = "_label_7spwh_451", Da = "_wrapper_7spwh_455", ka = "_affix_7spwh_461", va = "_affix--small_7spwh_483", Ca = "_affix--disabled_7spwh_497", Ra = "_prefix_7spwh_505", ja = "_affix--readonly_7spwh_508", La = "_suffix_7spwh_518", Aa = "_leading-icon_7spwh_525", Na = "_leading-icon--small_7spwh_537", Ba = "_leading-icon--disabled_7spwh_540", Ea = "_action-button_7spwh_549", Ta = "_label--hidden_7spwh_568", Fa = "_label--disabled_7spwh_581", Pa = "_feedback_7spwh_602", a = {
+  input: ra,
+  "input--invalid": "_input--invalid_7spwh_343",
+  inputInvalid: ha,
+  "input--small": "_input--small_7spwh_350",
+  inputSmall: ma,
+  "input--has-leading-icon": "_input--has-leading-icon_7spwh_404",
+  inputHasLeadingIcon: ba,
+  "input--has-action-button": "_input--has-action-button_7spwh_407",
+  inputHasActionButton: wa,
+  "input--has-second-action-button": "_input--has-second-action-button_7spwh_410",
+  inputHasSecondActionButton: xa,
+  "input--has-affix": "_input--has-affix_7spwh_422",
+  inputHasAffix: ga,
+  "input--is-ready": "_input--is-ready_7spwh_436",
+  inputIsReady: Ia,
+  root: Sa,
+  hint: ya,
+  label: Ha,
+  wrapper: Da,
+  affix: ka,
+  "affix--small": "_affix--small_7spwh_483",
+  affixSmall: va,
+  "affix--disabled": "_affix--disabled_7spwh_497",
+  affixDisabled: Ca,
+  prefix: Ra,
+  "affix--readonly": "_affix--readonly_7spwh_508",
+  affixReadonly: ja,
+  suffix: La,
+  "leading-icon": "_leading-icon_7spwh_525",
+  leadingIcon: Aa,
+  "leading-icon--small": "_leading-icon--small_7spwh_537",
+  leadingIconSmall: Na,
+  "leading-icon--disabled": "_leading-icon--disabled_7spwh_540",
+  leadingIconDisabled: Ba,
+  "action-button": "_action-button_7spwh_549",
+  actionButton: Ea,
+  "label--hidden": "_label--hidden_7spwh_568",
+  labelHidden: Ta,
+  "label--disabled": "_label--disabled_7spwh_581",
+  labelDisabled: Fa,
+  feedback: Pa
+}, Ka = ({
+  id: d,
+  label: v,
+  actionButtonLabel: T,
+  actionButtonIconName: _,
+  actionButtonIconSource: m,
+  actionButtonOnClick: F,
+  className: P,
+  disabled: n = !1,
+  hint: b,
+  hideLabel: O = !1,
+  invalid: u = !1,
+  leadingIconName: f,
+  leadingIconSource: r,
+  prefix: i,
+  readonly: p = !1,
+  required: C = !1,
+  size: e = "medium",
+  suffix: t,
+  systemFeedback: w,
+  type: o = "text",
+  ...$
+}) => {
+  process.env.NODE_ENV !== "production" && (ea({
+    id: d,
+    label: v,
+    prefix: i,
+    suffix: t,
+    leadingIconName: f,
+    leadingIconSource: r,
+    actionButtonIconName: _,
+    actionButtonIconSource: m
+  }), la(o));
+  const [W, X] = h(!1), [M, V] = h(!1), [x, G] = h(!1), [U, J] = h({}), g = D(null), K = i == null ? void 0 : i.substring(0, oa), I = D(null), Q = t == null ? void 0 : t.substring(0, ca), S = D(null), Y = ia(O);
+  B(() => {
+    const c = e === "medium" ? 16 : 8, y = {};
+    if (I.current) {
+      const H = I.current.offsetWidth;
+      y.paddingInlineStart = c + H + "px";
+    }
+    if (S.current) {
+      const H = S.current.offsetWidth;
+      y.paddingInlineEnd = c + H + "px";
+    }
+    J(y), X(!0);
+  }, [i, t, e, M]), B(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), V(!0));
+    })();
+  }, []), ta(() => {
+    const c = da(
+      k(o),
+      pa(o)
+    );
+    G(c);
+  }, [o]);
+  const R = l(a.affix, {
+    [a.affixSmall]: e === "small",
+    [a.affixDisabled]: n,
+    [a.affixReadonly]: p
+  }), j = `${d}-label`, L = `${d}-feedback`, A = `${d}-hint`, Z = b ? ` ${A}` : "", q = l(a.root, P), z = l(a.input, {
+    // small input
+    [a.inputSmall]: e === "small",
+    // invalid state
+    [a.inputInvalid]: u,
+    // leading icon
+    [a.inputHasLeadingIcon]: f || r,
+    // prefix/suffix
+    [a.inputHasAffix]: i || t,
+    // action button
+    [a.inputHasActionButton]: _ || m || x,
+    [a.inputIsReady]: W
+  }), aa = l(a.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [a.labelHidden]: Y,
+    [a.labelDisabled]: n
+  }), sa = l(a.leadingIcon, {
+    [a.leadingIconSmall]: e === "small",
+    [a.leadingIconDisabled]: n
+  }), N = l(a.actionButton, {
+    [a.actionButtonSmall]: e === "small"
+  }), na = (c) => {
+    g.current && !n && !p && g.current.showPicker(), c.preventDefault();
+  };
+  return /* @__PURE__ */ s.jsxs("div", { className: q, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: aa, id: j, htmlFor: d, children: [
+      v,
+      C && /* @__PURE__ */ s.jsx(_a, {})
+    ] }),
+    b && /* @__PURE__ */ s.jsx("div", { className: a.hint, id: A, children: b }),
+    u && w && /* @__PURE__ */ s.jsx(
+      fa,
+      {
+        className: a.feedback,
+        message: w,
+        type: "invalid",
+        id: L
+      }
+    ),
+    /* @__PURE__ */ s.jsxs("div", { className: a.wrapper, children: [
+      i && /* @__PURE__ */ s.jsx(
+        "span",
+        {
+          className: l(R, a.prefix),
+          ref: I,
+          "aria-disabled": n,
+          children: K
+        }
+      ),
+      !i && (f || r) && /* @__PURE__ */ s.jsx(
+        ua,
+        {
+          name: f,
+          theme: "light",
+          source: r,
+          className: sa,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        "input",
+        {
+          type: o,
+          className: z,
+          id: d,
+          ref: g,
+          ...$,
+          style: U,
+          "aria-labelledby": `${j}${Z}`,
+          "aria-describedby": u && w ? L : void 0,
+          "aria-invalid": u,
+          "aria-disabled": p,
+          readOnly: p,
+          required: C,
+          disabled: n
+        }
+      ),
+      t && /* @__PURE__ */ s.jsx(
+        "span",
+        {
+          className: l(R, a.suffix),
+          ref: S,
+          "aria-disabled": n,
+          children: Q
+        }
+      ),
+      !t && !x && (_ || m) && /* @__PURE__ */ s.jsx(
+        E,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: _,
+          variant: "ghost",
+          className: N,
+          size: e,
+          onClick: F,
+          type: "button",
+          disabled: n || p,
+          children: T
+        }
+      ),
+      !t && x && !p && !n && /* @__PURE__ */ s.jsxs(
+        E,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: k(o) ? "calendar" : "clock",
+          variant: "ghost",
+          className: N,
+          size: e,
+          onClick: na,
+          type: "button",
+          children: [
+            "Open ",
+            k(o) ? "date" : "time",
+            " picker"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ka as DSInput
+};

package/{inputpassword.nsYu6YeB.js → inputpassword.CSjh1GU7.js}

@@ -4,9 +4,9 @@ import "./chunks/index.CvOaL64Y.js";
 import "react";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
 import "./asterisk.DDn-yX4P.js";
-import "./button.DH0h6uPs.js";
+import "./button.C5opEJ6x.js";
 import "./systemfeedback.ZzRUAVYX.js";
-import { D as n } from "./chunks/InputPassword.Dgo95-PU.js";
+import { D as n } from "./chunks/InputPassword.C7pNeWGx.js";
 export {
   n as DSInputPassword
 };

package/inputpassword.d.ts

@@ -1 +1,2 @@
 export * from './components/InputPassword/InputPassword'
+export {}

package/{inputsearch.ZGIrDrcv.js → inputsearch.DyznOWLK.js}

@@ -5,9 +5,9 @@ import "react";
 import "./chunks/helpers.B1JT5ShS.js";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
 import "./asterisk.DDn-yX4P.js";
-import "./button.DH0h6uPs.js";
+import "./button.C5opEJ6x.js";
 import "./systemfeedback.ZzRUAVYX.js";
-import { D as s } from "./chunks/InputSearch.BFof0pBn.js";
+import { D as s } from "./chunks/InputSearch.B24rcIJ_.js";
 export {
   s as DSInputSearch
 };

package/inputsearch.d.ts

@@ -1 +1,2 @@
 export * from './components/InputSearch/InputSearch'
+export {}

package/{inputstepper.BvY36hA1.js → inputstepper.3BLb7s0P.js}

@@ -5,9 +5,9 @@ import "react";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
 import "./chunks/Input.utils.ChV6RJsh.js";
 import "./asterisk.DDn-yX4P.js";
-import "./button.DH0h6uPs.js";
+import "./button.C5opEJ6x.js";
 import "./systemfeedback.ZzRUAVYX.js";
-import { D } from "./chunks/InputStepper.4IqLa5tX.js";
+import { D } from "./chunks/InputStepper.CEW-bieQ.js";
 export {
   D as DSInputStepper
 };

package/inputstepper.d.ts

@@ -1 +1,2 @@
 export * from './components/InputStepper/InputStepper'
+export {}

package/link.Clk5_BYp.js

@@ -0,0 +1,116 @@
+"use client";
+import { j as i } 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 "react";
+import { D as H } from "./chunks/Icon.C2o2seDb.js";
+import './assets/link.DhZqkLMP.css';const S = "_root_18w5p_151", x = "_root--highlight_18w5p_228", b = "_root--dark-highlight_18w5p_228", j = "_root--filled_18w5p_306", L = "_root--outline_18w5p_334", C = "_root--ghost_18w5p_361", N = "_root--ghost-flush_18w5p_386", T = "_root--small_18w5p_392", B = "_root--dark-filled_18w5p_474", E = "_root--dark-outline_18w5p_533", R = "_root--dark-ghost_18w5p_591", V = "_root--dark-ghost-flush_18w5p_647", q = "_root--icon-left_18w5p_711", A = "_root--icon-only_18w5p_727", J = "_root--icon-only-small_18w5p_736", K = "_label--hidden_18w5p_747", o = {
+  root: S,
+  "root--highlight": "_root--highlight_18w5p_228",
+  rootHighlight: x,
+  "root--dark-highlight": "_root--dark-highlight_18w5p_228",
+  rootDarkHighlight: b,
+  "root--filled": "_root--filled_18w5p_306",
+  rootFilled: j,
+  "root--outline": "_root--outline_18w5p_334",
+  rootOutline: L,
+  "root--ghost": "_root--ghost_18w5p_361",
+  rootGhost: C,
+  "root--ghost-flush": "_root--ghost-flush_18w5p_386",
+  rootGhostFlush: N,
+  "root--small": "_root--small_18w5p_392",
+  rootSmall: T,
+  "root--dark-filled": "_root--dark-filled_18w5p_474",
+  rootDarkFilled: B,
+  "root--dark-outline": "_root--dark-outline_18w5p_533",
+  rootDarkOutline: E,
+  "root--dark-ghost": "_root--dark-ghost_18w5p_591",
+  rootDarkGhost: R,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_18w5p_647",
+  rootDarkGhostFlush: V,
+  "root--icon-left": "_root--icon-left_18w5p_711",
+  rootIconLeft: q,
+  "root--icon-only": "_root--icon-only_18w5p_727",
+  rootIconOnly: A,
+  "root--icon-only-small": "_root--icon-only-small_18w5p_736",
+  rootIconOnlySmall: J,
+  "label--hidden": "_label--hidden_18w5p_747",
+  labelHidden: K
+}, X = ({
+  children: c,
+  aria: k,
+  className: p,
+  dataTrackingid: u,
+  download: w,
+  hideLabel: s = !1,
+  href: n,
+  iconName: a,
+  iconPosition: f = "left",
+  iconSource: e,
+  isFlush: r = !1,
+  referrerPolicy: m,
+  rel: D,
+  size: _ = "medium",
+  target: y = "_self",
+  theme: l = "light",
+  variant: t = "filled",
+  ...G
+}) => {
+  const O = g(o.root, p, {
+    // variant
+    [o.rootFilled]: t === "filled",
+    [o.rootHighlight]: t === "highlight",
+    [o.rootOutline]: t === "outline",
+    [o.rootGhost]: t === "ghost" && r !== !0,
+    // isFlush
+    [o.rootGhostFlush]: t === "ghost" && r === !0,
+    // dark theme
+    [o.rootDarkFilled]: l === "dark" && t === "filled",
+    [o.rootDarkHighlight]: l === "dark" && t === "highlight",
+    [o.rootDarkOutline]: l === "dark" && t === "outline",
+    [o.rootDarkGhost]: l === "dark" && t === "ghost" && r !== !0,
+    // dark isFlush
+    [o.rootDarkGhostFlush]: l === "dark" && t === "ghost" && r === !0,
+    // size
+    [o.rootSmall]: _ === "small",
+    // icon position
+    [o.rootIconLeft]: f === "left",
+    // icon only
+    [o.rootIconOnly]: h(s) && _ === "medium",
+    [o.rootIconOnlySmall]: h(s) && _ === "small"
+  }), I = g({
+    // hide label only visually to keep them available for assistive technologies
+    [o.labelHidden]: h(s)
+  }), F = l === "light" && t === "filled" || l === "dark" && t === "outline" || l === "dark" && t === "ghost" ? "dark" : "light", d = n === void 0 ? "span" : "a";
+  return /* @__PURE__ */ i.jsxs(
+    d,
+    {
+      className: O,
+      "data-trackingid": u,
+      ...d === "a" && {
+        href: n,
+        target: y,
+        rel: D,
+        referrerPolicy: m,
+        download: w
+      },
+      ...k,
+      ...G,
+      children: [
+        /* @__PURE__ */ i.jsx("span", { className: I, children: c }),
+        (a || e) && /* @__PURE__ */ i.jsx(
+          H,
+          {
+            name: a,
+            theme: F,
+            source: e,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  X as DSLink
+};

package/link.d.ts

@@ -1 +1,2 @@
 export * from './components/Link/Link'
+export {}

package/linkstandalone.BXERmqdN.js

@@ -0,0 +1,80 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as p } from "./chunks/index.CvOaL64Y.js";
+import { D as x } from "./chunks/Icon.C2o2seDb.js";
+import "react";
+import './assets/linkstandalone.Dwz-_O8q.css';const H = "_link-standalone_auko9_76", j = "_link-standalone--highlight_auko9_146", v = "_link-standalone--neutral-dark_auko9_160", L = "_link-standalone--highlight-dark_auko9_211", N = "_link-standalone--active_auko9_262", I = "_link-standalone--icon-left_auko9_269", n = {
+  "link-standalone": "_link-standalone_auko9_76",
+  linkStandalone: H,
+  "link-standalone--highlight": "_link-standalone--highlight_auko9_146",
+  linkStandaloneHighlight: j,
+  "link-standalone--neutral-dark": "_link-standalone--neutral-dark_auko9_160",
+  linkStandaloneNeutralDark: v,
+  "link-standalone--highlight-dark": "_link-standalone--highlight-dark_auko9_211",
+  linkStandaloneHighlightDark: L,
+  "link-standalone--active": "_link-standalone--active_auko9_262",
+  linkStandaloneActive: N,
+  "link-standalone--icon-left": "_link-standalone--icon-left_auko9_269",
+  linkStandaloneIconLeft: I
+}, C = ({
+  children: s,
+  aria: d,
+  active: _,
+  className: h,
+  dataTrackingid: r,
+  download: g,
+  href: i,
+  iconName: o,
+  iconPosition: c = "left",
+  iconSource: e,
+  referrerPolicy: u,
+  rel: S,
+  target: f = "_self",
+  theme: a = "light",
+  variant: l = "neutral",
+  ...m
+}) => {
+  const D = p(n.linkStandalone, h, {
+    // variant
+    [n.linkStandaloneHighlight]: l === "highlight",
+    // theme
+    [n.linkStandaloneNeutralDark]: a === "dark" && l === "neutral",
+    [n.linkStandaloneHighlightDark]: a === "dark" && l === "highlight",
+    // active
+    [n.linkStandaloneActive]: _,
+    // icon position
+    [n.linkStandaloneIconLeft]: c === "left"
+  }), k = i === void 0 ? "span" : "a";
+  return /* @__PURE__ */ t.jsxs(
+    k,
+    {
+      className: D,
+      "data-trackingid": r,
+      ...k === "a" && {
+        href: i,
+        target: f,
+        rel: S,
+        referrerPolicy: u,
+        download: g
+      },
+      ...d,
+      ...m,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { className: n.label, children: s }),
+        (o || e) && /* @__PURE__ */ t.jsx(
+          x,
+          {
+            name: o,
+            theme: a,
+            source: e,
+            size: "medium",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C as DSLinkStandalone
+};

package/linkstandalone.d.ts

@@ -1 +1,2 @@
 export * from './components/LinkStandalone/LinkStandalone'
+export {}

package/logo.d.ts

@@ -1 +1,2 @@
 export * from './components/Logo/Logo'
+export {}

package/{notification.BAS13UQ6.js → notification.0kX1GMaB.js}

@@ -1,9 +1,9 @@
 "use client";
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
-import "./button.DH0h6uPs.js";
+import "./button.C5opEJ6x.js";
 import "./chunks/Icon.C2o2seDb.js";
-import { D as e } from "./chunks/Notification.BhwbaXqk.js";
+import { D as e } from "./chunks/Notification.BXVN7_Fs.js";
 export {
   e as DSNotification
 };

package/notification.d.ts

@@ -1 +1,2 @@
 export * from './components/Notification/Notification'
+export {}

package/{optioncheckbox.DZWwtx6f.js → optioncheckbox.BPN3f6l_.js}

@@ -2,20 +2,20 @@
 import { j as o } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c as s } from "./chunks/index.CvOaL64Y.js";
 import { D as _ } from "./chunks/Icon.C2o2seDb.js";
-import './assets/optioncheckbox.BJJAph5_.css';const l = "_root_oj6mx_151", i = "_root--disabled_oj6mx_172", k = "_checkbox_oj6mx_176", d = "_icon-check_oj6mx_192", n = "_checkbox--checked_oj6mx_213", r = "_checkbox--disabled_oj6mx_216", m = "_label_oj6mx_233", c = {
+import './assets/optioncheckbox.C62HtIj5.css';const l = "_root_o64ji_151", k = "_root--disabled_o64ji_172", d = "_checkbox_o64ji_176", n = "_icon-check_o64ji_192", r = "_checkbox--checked_o64ji_213", x = "_checkbox--disabled_o64ji_216", j = "_label_o64ji_233", c = {
   root: l,
-  "root--disabled": "_root--disabled_oj6mx_172",
-  rootDisabled: i,
-  checkbox: k,
-  "icon-check": "_icon-check_oj6mx_192",
-  iconCheck: d,
-  "checkbox--checked": "_checkbox--checked_oj6mx_213",
-  checkboxChecked: n,
-  "checkbox--disabled": "_checkbox--disabled_oj6mx_216",
-  checkboxDisabled: r,
-  label: m
+  "root--disabled": "_root--disabled_o64ji_172",
+  rootDisabled: k,
+  checkbox: d,
+  "icon-check": "_icon-check_o64ji_192",
+  iconCheck: n,
+  "checkbox--checked": "_checkbox--checked_o64ji_213",
+  checkboxChecked: r,
+  "checkbox--disabled": "_checkbox--disabled_o64ji_216",
+  checkboxDisabled: x,
+  label: j
 }, D = ({
-  label: x,
+  label: i,
   checked: h,
   className: a,
   disabled: e
@@ -35,7 +35,7 @@ import './assets/optioncheckbox.BJJAph5_.css';const l = "_root_oj6mx_151", i = "
         "aria-hidden": "true"
       }
     ) }),
-    /* @__PURE__ */ o.jsx("span", { className: c.label, children: x })
+    /* @__PURE__ */ o.jsx("span", { className: c.label, children: i })
   ] }) });
 };
 export {

package/optioncheckbox.d.ts

@@ -1 +1,2 @@
 export * from './components/CustomReactSelect/OptionCheckbox'
+export {}