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

package/chunks/{Dialog.Z5ESJQMi.js → Dialog.Fwr6vLiK.js}

@@ -1,65 +1,65 @@
 "use client";
 import { j as n } from "./jsx-runtime.C115EyI4.js";
 import { c as s } from "./index.CvOaL64Y.js";
-import { useRef as h, useState as w, useEffect as b } from "react";
-import { DSButton as x } from "../button.DH0h6uPs.js";
-import { g as j } from "./helpers.B1JT5ShS.js";
-import '../assets/Dialog.fiQvxJg_.css';const B = "_dialog_1yzgd_80", E = "_content-wrapper_1yzgd_151", C = "_content-wrapper--no-footer_1yzgd_157", F = "_close-button_1yzgd_165", W = "_header_1yzgd_178", k = "_content_1yzgd_151", R = "_footer_1yzgd_180", L = "_header--scrollable_1yzgd_201", M = "_header--close-button_1yzgd_210", H = "_content--no-footer_1yzgd_223", I = "_footer--scrollable_1yzgd_230", o = {
-  dialog: B,
-  "content-wrapper": "_content-wrapper_1yzgd_151",
-  contentWrapper: E,
-  "content-wrapper--no-footer": "_content-wrapper--no-footer_1yzgd_157",
-  contentWrapperNoFooter: C,
-  "close-button": "_close-button_1yzgd_165",
-  closeButton: F,
-  header: W,
-  content: k,
-  footer: R,
-  "header--scrollable": "_header--scrollable_1yzgd_201",
+import { useRef as h, useState as x, useEffect as b } from "react";
+import { DSButton as j } from "../button.C5opEJ6x.js";
+import { g as B } from "./helpers.B1JT5ShS.js";
+import '../assets/Dialog.B0pucIEI.css';const E = "_dialog_17zim_80", C = "_content-wrapper_17zim_236", F = "_content-wrapper--no-footer_17zim_242", W = "_close-button_17zim_250", k = "_header_17zim_263", R = "_content_17zim_236", y = "_footer_17zim_265", L = "_header--scrollable_17zim_286", M = "_header--close-button_17zim_295", H = "_content--no-footer_17zim_308", I = "_footer--scrollable_17zim_315", o = {
+  dialog: E,
+  "content-wrapper": "_content-wrapper_17zim_236",
+  contentWrapper: C,
+  "content-wrapper--no-footer": "_content-wrapper--no-footer_17zim_242",
+  contentWrapperNoFooter: F,
+  "close-button": "_close-button_17zim_250",
+  closeButton: W,
+  header: k,
+  content: R,
+  footer: y,
+  "header--scrollable": "_header--scrollable_17zim_286",
   headerScrollable: L,
-  "header--close-button": "_header--close-button_1yzgd_210",
+  "header--close-button": "_header--close-button_17zim_295",
   headerCloseButton: M,
-  "content--no-footer": "_content--no-footer_1yzgd_223",
+  "content--no-footer": "_content--no-footer_17zim_308",
   contentNoFooter: H,
-  "footer--scrollable": "_footer--scrollable_1yzgd_230",
+  "footer--scrollable": "_footer--scrollable_17zim_315",
   footerScrollable: I
 }, O = ({ tabIndex: r }) => {
   if (r || r === 0)
     throw new Error(
-      j(
+      B(
         "DSDialog",
         "Do not pass the tabindex property to the DSDialog component as it is not interactive and does not receive focus. The DSDialogs contents, including the close button contained in the DSDialog, can receive focus and be interactive."
       )
     );
 }, G = ({
   children: r,
-  className: m,
-  closeButtonLabel: y = "Close dialog",
-  disableBackdropClose: z = !1,
+  className: g,
+  closeButtonLabel: z = "Close dialog",
+  disableBackdropClose: D = !1,
   footer: c,
-  header: D,
+  header: S,
   hideCloseButton: a = !1,
-  isOpen: d = !1,
+  isOpen: i = !1,
   onClose: l,
-  ...i
+  ..._
 }) => {
   if (process.env.NODE_ENV !== "production") {
-    const { tabIndex: e } = i;
+    const { tabIndex: e } = _;
     O({
       tabIndex: e
     });
   }
-  const t = h(null), _ = h(null), [u, S] = w(!1);
+  const t = h(null), d = h(null), [m, v] = x(!1);
   b(() => {
-    const e = _.current;
+    const e = d.current;
     if (e) {
-      const g = () => {
-        S(
+      const u = () => {
+        v(
           e.scrollHeight > e.clientHeight
         );
       };
-      g();
-      const p = new ResizeObserver(g);
+      u();
+      const p = new ResizeObserver(u);
       return p.observe(e), () => {
         p.disconnect();
       };
@@ -67,34 +67,34 @@ import '../assets/Dialog.fiQvxJg_.css';const B = "_dialog_1yzgd_80", E = "_conte
   }, []), b(() => {
     const e = t.current;
     if (e)
-      return e.addEventListener("close", f), d ? e.showModal() : e.close(), () => {
+      return e.addEventListener("close", f), i ? e.showModal() : e.close(), () => {
         e.removeEventListener("close", f);
       };
-  }, [d, l]);
+  }, [i, l]);
   const f = () => {
     l && l();
-  }, v = (e) => {
-    z || t.current && e.target === t.current && t.current.close();
-  }, N = () => {
+  }, N = (e) => {
+    D || t.current && e.target === t.current && t.current.close();
+  }, w = () => {
     t.current && t.current.close();
   };
   return /* @__PURE__ */ n.jsx(
     "dialog",
     {
-      ...i,
+      ..._,
       ref: t,
       className: o.dialog,
-      onMouseDown: (e) => v(e),
+      onMouseDown: (e) => N(e),
       "aria-modal": "true",
       children: /* @__PURE__ */ n.jsxs(
         "div",
         {
-          className: s(o.contentWrapper, m, {
+          className: s(o.contentWrapper, g, {
             [o.contentWrapperNoFooter]: !c
           }),
           children: [
             !a && /* @__PURE__ */ n.jsx(
-              x,
+              j,
               {
                 className: o.closeButton,
                 hideLabel: !0,
@@ -102,8 +102,8 @@ import '../assets/Dialog.fiQvxJg_.css';const B = "_dialog_1yzgd_80", E = "_conte
                 size: "small",
                 type: "button",
                 variant: "ghost",
-                onClick: () => N(),
-                children: y
+                onClick: () => w(),
+                children: z
               }
             ),
             /* @__PURE__ */ n.jsx(
@@ -111,15 +111,15 @@ import '../assets/Dialog.fiQvxJg_.css';const B = "_dialog_1yzgd_80", E = "_conte
               {
                 className: s(o.header, {
                   [o.headerCloseButton]: !a,
-                  [o.headerScrollable]: u
+                  [o.headerScrollable]: m
                 }),
-                children: D
+                children: S
               }
             ),
             /* @__PURE__ */ n.jsx(
               "div",
               {
-                ref: _,
+                ref: d,
                 className: s(o.content, {
                   [o.contentNoFooter]: !c
                 }),
@@ -131,7 +131,7 @@ import '../assets/Dialog.fiQvxJg_.css';const B = "_dialog_1yzgd_80", E = "_conte
               "footer",
               {
                 className: s(o.footer, {
-                  [o.footerScrollable]: u
+                  [o.footerScrollable]: m
                 }),
                 children: c
               }

package/chunks/{Drawer.BdowMqE0.js → Drawer.CKoYzQHd.js}

@@ -2,31 +2,31 @@
 import { j as r } from "./jsx-runtime.C115EyI4.js";
 import { c as n } from "./index.CvOaL64Y.js";
 import { useRef as b, useState as j, useEffect as w } from "react";
-import { DSButton as B } from "../button.DH0h6uPs.js";
+import { DSButton as B } from "../button.C5opEJ6x.js";
 import { g as R } from "./helpers.B1JT5ShS.js";
-import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawer--end_h62s5_143", F = "_content-wrapper_h62s5_161", k = "_content-wrapper--no-footer_h62s5_167", I = "_close-button_h62s5_170", O = "_header_h62s5_183", y = "_content_h62s5_161", z = "_footer_h62s5_185", L = "_header--scrollable_h62s5_206", M = "_header--close-button_h62s5_215", H = "_content--no-footer_h62s5_229", P = "_footer--scrollable_h62s5_236", o = {
+import '../assets/Drawer.CATBzfY7.css';const W = "_drawer_1h1ai_85", C = "_drawer--end_1h1ai_143", F = "_content-wrapper_1h1ai_246", k = "_content-wrapper--no-footer_1h1ai_252", I = "_close-button_1h1ai_255", O = "_header_1h1ai_268", y = "_content_1h1ai_246", z = "_footer_1h1ai_270", L = "_header--scrollable_1h1ai_291", M = "_header--close-button_1h1ai_300", H = "_content--no-footer_1h1ai_314", P = "_footer--scrollable_1h1ai_321", o = {
   drawer: W,
-  "drawer--end": "_drawer--end_h62s5_143",
+  "drawer--end": "_drawer--end_1h1ai_143",
   drawerEnd: C,
-  "content-wrapper": "_content-wrapper_h62s5_161",
+  "content-wrapper": "_content-wrapper_1h1ai_246",
   contentWrapper: F,
-  "content-wrapper--no-footer": "_content-wrapper--no-footer_h62s5_167",
+  "content-wrapper--no-footer": "_content-wrapper--no-footer_1h1ai_252",
   contentWrapperNoFooter: k,
-  "close-button": "_close-button_h62s5_170",
+  "close-button": "_close-button_1h1ai_255",
   closeButton: I,
   header: O,
   content: y,
   footer: z,
-  "header--scrollable": "_header--scrollable_h62s5_206",
+  "header--scrollable": "_header--scrollable_1h1ai_291",
   headerScrollable: L,
-  "header--close-button": "_header--close-button_h62s5_215",
+  "header--close-button": "_header--close-button_1h1ai_300",
   headerCloseButton: M,
-  "content--no-footer": "_content--no-footer_h62s5_229",
+  "content--no-footer": "_content--no-footer_1h1ai_314",
   contentNoFooter: H,
-  "footer--scrollable": "_footer--scrollable_h62s5_236",
+  "footer--scrollable": "_footer--scrollable_1h1ai_321",
   footerScrollable: P
-}, K = ["start", "end"], T = ({ tabIndex: s }) => {
-  if (s || s === 0)
+}, K = ["start", "end"], T = ({ tabIndex: a }) => {
+  if (a || a === 0)
     throw new Error(
       R(
         "DSDrawer",
@@ -34,7 +34,7 @@ import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawe
       )
     );
 }, Q = ({
-  children: s,
+  children: a,
   className: m,
   closeButtonLabel: D = "Close modal",
   disableBackdropClose: S = !1,
@@ -42,27 +42,27 @@ import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawe
   header: N,
   hideCloseButton: l = !1,
   position: v = "start",
-  isOpen: d = !1,
-  onClose: a,
-  ..._
+  isOpen: i = !1,
+  onClose: s,
+  ...d
 }) => {
   if (process.env.NODE_ENV !== "production") {
-    const { tabIndex: e } = _;
+    const { tabIndex: e } = d;
     T({
       tabIndex: e
     });
   }
-  const t = b(null), h = b(null), [i, E] = j(!1);
+  const t = b(null), _ = b(null), [h, E] = j(!1);
   w(() => {
-    const e = h.current;
+    const e = _.current;
     if (e) {
-      const f = () => {
+      const u = () => {
         E(
           e.scrollHeight > e.clientHeight
         );
       };
-      f();
-      const p = new ResizeObserver(f);
+      u();
+      const p = new ResizeObserver(u);
       return p.observe(e), () => {
         p.disconnect();
       };
@@ -70,12 +70,12 @@ import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawe
   }, []), w(() => {
     const e = t.current;
     if (e)
-      return e.addEventListener("close", u), d ? e.showModal() : e.close(), () => {
-        e.removeEventListener("close", u);
+      return e.addEventListener("close", f), i ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", f);
       };
-  }, [d, a]);
-  const u = () => {
-    a && a();
+  }, [i, s]);
+  const f = () => {
+    s && s();
   }, x = (e) => {
     S || t.current && e.target === t.current && t.current.close();
   }, g = () => {
@@ -84,7 +84,7 @@ import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawe
   return /* @__PURE__ */ r.jsx(
     "dialog",
     {
-      ..._,
+      ...d,
       ref: t,
       className: n(o.drawer, {
         [o.drawerEnd]: v === "end"
@@ -116,7 +116,7 @@ import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawe
               {
                 className: n(o.header, {
                   [o.headerCloseButton]: !l,
-                  [o.headerScrollable]: i
+                  [o.headerScrollable]: h
                 }),
                 children: N
               }
@@ -124,19 +124,19 @@ import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawe
             /* @__PURE__ */ r.jsx(
               "div",
               {
-                ref: h,
+                ref: _,
                 className: n(o.content, {
                   [o.contentNoFooter]: !c
                 }),
                 tabIndex: 0,
-                children: s
+                children: a
               }
             ),
             c && /* @__PURE__ */ r.jsx(
               "footer",
               {
                 className: n(o.footer, {
-                  [o.footerScrollable]: i
+                  [o.footerScrollable]: h
                 }),
                 children: c
               }

package/chunks/Fieldset.C9K8BYmH.js

@@ -0,0 +1,99 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import "react";
+import { Asterisk as y } from "../asterisk.DDn-yX4P.js";
+import { DSHeading as v } from "../heading.CAkraI2D.js";
+import { DSSystemFeedback as w } from "../systemfeedback.ZzRUAVYX.js";
+import { g as j } from "./helpers.B1JT5ShS.js";
+import '../assets/Fieldset.CwDhKRUL.css';const N = "_root_2e6a5_76", E = "_child-wrapper_2e6a5_172", M = "_legend_2e6a5_179", q = "_legend--utility--m_2e6a5_183", C = "_description_2e6a5_196", P = "_description--small_2e6a5_211", T = "_system-feedback_2e6a5_215", i = {
+  root: N,
+  "child-wrapper": "_child-wrapper_2e6a5_172",
+  childWrapper: E,
+  legend: M,
+  "legend--utility--m": "_legend--utility--m_2e6a5_183",
+  legendUtilityM: q,
+  description: C,
+  "description--small": "_description--small_2e6a5_211",
+  descriptionSmall: P,
+  "system-feedback": "_system-feedback_2e6a5_215",
+  systemFeedback: T
+}, U = ({
+  description: l,
+  id: s,
+  legend: n,
+  systemFeedback: t
+}) => {
+  if (!s && (l || t))
+    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 (!n)
+    throw new Error(
+      j(
+        "DSFieldset",
+        "The legend prop is required. Please add the legend prop to the DSFieldset component."
+      )
+    );
+}, H = ({
+  children: l,
+  legend: s,
+  className: n,
+  description: t,
+  disabled: S = !1,
+  id: d,
+  invalid: p = !1,
+  required: m = !1,
+  systemFeedback: a,
+  ...b
+}) => {
+  process.env.NODE_ENV !== "production" && U({ description: t, id: d, legend: s, systemFeedback: a });
+  let o, _, g;
+  const r = typeof s == "object" && s !== void 0;
+  r && ({ headingSize: o, headingTag: _, headingText: g } = s);
+  const h = `${d}-feedback`, f = `${d}-description`, u = [
+    a && h,
+    t && f
+  ].filter(Boolean).join(" "), x = !r || o === "small" || o === "small-uppercase", D = c(i.root, n), F = c(i.legend, {
+    [i.legendUtilityM]: !r
+  }), k = c(i.description, {
+    [i.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: r ? /* @__PURE__ */ e.jsxs(v, { tag: _, size: o, children: [
+          g,
+          m && /* @__PURE__ */ e.jsx(y, {})
+        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          s,
+          m && /* @__PURE__ */ e.jsx(y, {})
+        ] }) }),
+        t && /* @__PURE__ */ e.jsx("span", { id: f, className: k, children: t }),
+        p && a && /* @__PURE__ */ e.jsx(
+          w,
+          {
+            id: h,
+            type: "invalid",
+            message: a,
+            className: i.systemFeedback
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: l })
+      ]
+    }
+  );
+};
+export {
+  H as D,
+  U as v
+};

package/chunks/InputPassword.C7pNeWGx.js

@@ -0,0 +1,143 @@
+"use client";
+import { j as n } from "./jsx-runtime.C115EyI4.js";
+import { c as e } from "./index.CvOaL64Y.js";
+import { useState as A } from "react";
+import { u as C } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as L } from "../asterisk.DDn-yX4P.js";
+import { DSButton as $ } from "../button.C5opEJ6x.js";
+import { DSSystemFeedback as E } from "../systemfeedback.ZzRUAVYX.js";
+import { g as h } from "./helpers.B1JT5ShS.js";
+import '../assets/InputPassword.DOAAzj-O.css';const q = "_input_l9tjo_226", R = "_input--invalid_l9tjo_343", V = "_input--small_l9tjo_350", O = "_input--has-leading-icon_l9tjo_404", F = "_input--has-action-button_l9tjo_407", M = "_input--has-second-action-button_l9tjo_410", T = "_input--has-affix_l9tjo_422", G = "_input--is-ready_l9tjo_436", J = "_root_l9tjo_443", K = "_hint_l9tjo_451", Q = "_label_l9tjo_451", U = "_wrapper_l9tjo_455", W = "_action-button_l9tjo_461", X = "_label--hidden_l9tjo_480", Y = "_label--disabled_l9tjo_493", Z = "_feedback_l9tjo_514", t = {
+  input: q,
+  "input--invalid": "_input--invalid_l9tjo_343",
+  inputInvalid: R,
+  "input--small": "_input--small_l9tjo_350",
+  inputSmall: V,
+  "input--has-leading-icon": "_input--has-leading-icon_l9tjo_404",
+  inputHasLeadingIcon: O,
+  "input--has-action-button": "_input--has-action-button_l9tjo_407",
+  inputHasActionButton: F,
+  "input--has-second-action-button": "_input--has-second-action-button_l9tjo_410",
+  inputHasSecondActionButton: M,
+  "input--has-affix": "_input--has-affix_l9tjo_422",
+  inputHasAffix: T,
+  "input--is-ready": "_input--is-ready_l9tjo_436",
+  inputIsReady: G,
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: U,
+  "action-button": "_action-button_l9tjo_461",
+  actionButton: W,
+  "label--hidden": "_label--hidden_l9tjo_480",
+  labelHidden: X,
+  "label--disabled": "_label--disabled_l9tjo_493",
+  labelDisabled: Y,
+  feedback: Z
+}, z = ({ id: a, label: o }) => {
+  if (!a)
+    throw new Error(
+      h(
+        "DSInputPassword",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
+      )
+    );
+  if (!o)
+    throw new Error(
+      h(
+        "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}.`
+      )
+    );
+}, ut = ({
+  id: a,
+  label: o,
+  autocomplete: j = "new-password",
+  className: f,
+  disabled: i = !1,
+  hidePasswordText: w = "Hide password",
+  hint: l,
+  hideLabel: y = !1,
+  invalid: s = !1,
+  readonly: c = !1,
+  required: r = !1,
+  showPasswordText: S = "Show password",
+  size: u = "medium",
+  systemFeedback: p,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && z({
+    id: a,
+    label: o
+  });
+  const [d, I] = A(!1), _ = `${a}-label`, b = `${a}-feedback`, m = `${a}-hint`, v = l ? ` ${m}` : "", B = C(y), H = e(t.root, f), g = e(t.input, {
+    // small input
+    [t.inputSmall]: u === "small",
+    // invalid state
+    [t.inputInvalid]: s,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0
+  }), D = e(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: B,
+    [t.labelDisabled]: i
+  }), P = e(t.actionButton, {
+    [t.actionButtonSmall]: u === "small"
+  }), N = () => {
+    I((k) => !k);
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: H, children: [
+    /* @__PURE__ */ n.jsxs("label", { className: D, id: _, htmlFor: a, children: [
+      o,
+      r && /* @__PURE__ */ n.jsx(L, {})
+    ] }),
+    l && /* @__PURE__ */ n.jsx("div", { className: t.hint, id: m, children: l }),
+    s && p && /* @__PURE__ */ n.jsx(
+      E,
+      {
+        className: t.feedback,
+        message: p,
+        type: "invalid",
+        id: b
+      }
+    ),
+    /* @__PURE__ */ n.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          className: g,
+          id: a,
+          ...x,
+          "aria-labelledby": `${_}${v}`,
+          "aria-describedby": s && p ? b : void 0,
+          "aria-invalid": s,
+          "aria-disabled": c,
+          readOnly: c,
+          required: r,
+          disabled: i,
+          autoComplete: j,
+          type: d ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        $,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: d ? "eye-closed" : "eye",
+          variant: "ghost",
+          className: P,
+          size: u,
+          onClick: N,
+          type: "button",
+          disabled: i,
+          children: d ? w : S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ut as D,
+  z as v
+};