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

package/inputpassword.-MXq8baU.js

@@ -0,0 +1,139 @@
+"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 A } from "react";
+import { u as D } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as C } from "./asterisk.DU8THnoC.js";
+import { DSButton as L } from "./button.BUUGRxIp.js";
+import { DSSystemFeedback as $ } from "./systemfeedback.C7iXO5A1.js";
+import { g as b } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/inputpassword.C3Uyj7oA.css';const E = "_input_8z84y_187", q = "_input--invalid_8z84y_297", R = "_input--small_8z84y_304", V = "_input--has-leading-icon_8z84y_350", O = "_input--has-action-button_8z84y_353", F = "_input--has-second-action-button_8z84y_356", M = "_input--has-affix_8z84y_368", T = "_input--is-ready_8z84y_380", G = "_root_8z84y_387", J = "_hint_8z84y_395", K = "_label_8z84y_395", Q = "_wrapper_8z84y_399", U = "_action-button_8z84y_405", W = "_label--hidden_8z84y_422", X = "_feedback_8z84y_449", t = {
+  input: E,
+  "input--invalid": "_input--invalid_8z84y_297",
+  inputInvalid: q,
+  "input--small": "_input--small_8z84y_304",
+  inputSmall: R,
+  "input--has-leading-icon": "_input--has-leading-icon_8z84y_350",
+  inputHasLeadingIcon: V,
+  "input--has-action-button": "_input--has-action-button_8z84y_353",
+  inputHasActionButton: O,
+  "input--has-second-action-button": "_input--has-second-action-button_8z84y_356",
+  inputHasSecondActionButton: F,
+  "input--has-affix": "_input--has-affix_8z84y_368",
+  inputHasAffix: M,
+  "input--is-ready": "_input--is-ready_8z84y_380",
+  inputIsReady: T,
+  root: G,
+  hint: J,
+  label: K,
+  wrapper: Q,
+  "action-button": "_action-button_8z84y_405",
+  actionButton: U,
+  "label--hidden": "_label--hidden_8z84y_422",
+  labelHidden: W,
+  feedback: X
+}, Y = ({ 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: w = "Hide password",
+  hint: e,
+  hideLabel: z = !1,
+  invalid: o = !1,
+  readonly: r = !1,
+  required: d = !1,
+  showPasswordText: S = "Show password",
+  size: l = "medium",
+  systemFeedback: u,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && Y({
+    id: n,
+    label: s
+  });
+  const [p, I] = A(!1), _ = `${n}-label`, m = `${n}-feedback`, y = `${n}-hint`, B = e ? ` ${y}` : "", H = D(z), g = i(t.root, f), v = 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
+  }), P = i(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: H
+  }), N = i(t.actionButton, {
+    [t.actionButtonSmall]: l === "small"
+  }), j = () => {
+    I((k) => !k);
+  };
+  return /* @__PURE__ */ a.jsxs("div", { className: g, children: [
+    /* @__PURE__ */ a.jsxs("label", { className: P, id: _, htmlFor: n, children: [
+      s,
+      d && /* @__PURE__ */ a.jsx(C, {})
+    ] }),
+    e && /* @__PURE__ */ a.jsx("div", { className: t.hint, id: y, children: e }),
+    o && u && /* @__PURE__ */ a.jsx(
+      $,
+      {
+        className: t.feedback,
+        message: u,
+        type: "invalid",
+        id: m
+      }
+    ),
+    /* @__PURE__ */ a.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ a.jsx(
+        "input",
+        {
+          className: v,
+          id: n,
+          ...x,
+          "aria-labelledby": `${_}${B}`,
+          "aria-describedby": o && u ? m : void 0,
+          "aria-invalid": o,
+          "aria-disabled": r,
+          readOnly: r,
+          required: d,
+          disabled: c,
+          autoComplete: h,
+          type: p ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        L,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: p ? "eye-closed" : "eye",
+          variant: "ghost",
+          className: N,
+          size: l,
+          onClick: j,
+          type: "button",
+          disabled: c,
+          children: p ? w : S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  lt as DSInputPassword
+};

package/{inputsearch.6e913fc6.js → inputsearch.CoYTSjox.js}

@@ -1,40 +1,40 @@
-import "./assets/InputSearch.888f630a.css";
-import { j as e } from "./chunks/jsx-runtime.5c071667.js";
-import { c } from "./chunks/index.8021d3e0.js";
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
 import { useState as J, useRef as w, useEffect as A } from "react";
-import { g as y, a as K } from "./chunks/helpers.ea3ca41a.js";
-import { u as Q } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { Asterisk as U } from "./asterisk.cb74ea72.js";
-import { DSButton as D } from "./button.87ad387c.js";
-import { DSSystemFeedback as X } from "./systemfeedback.8515a4e0.js";
-const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small_1ym7n_190", tt = "_input--has-leading-icon_1ym7n_236", nt = "_input--has-action-button_1ym7n_239", et = "_input--has-second-action-button_1ym7n_242", at = "_input--has-affix_1ym7n_254", ot = "_input--is-ready_1ym7n_266", st = "_root_1ym7n_273", it = "_hint_1ym7n_281", ct = "_label_1ym7n_281", ut = "_wrapper_1ym7n_285", lt = "_action-button_1ym7n_291", rt = "_second-action-button_1ym7n_295", pt = "_label--hidden_1ym7n_312", mt = "_feedback_1ym7n_339", t = {
+import { g as y, a as K } from "./chunks/helpers.B1JT5ShS.js";
+import { u as Q } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as U } from "./asterisk.DU8THnoC.js";
+import { DSButton as D } from "./button.BUUGRxIp.js";
+import { DSSystemFeedback as X } from "./systemfeedback.C7iXO5A1.js";
+import './assets/inputsearch.tL3e9-Ob.css';const Y = "_input_17rym_187", Z = "_input--invalid_17rym_297", z = "_input--small_17rym_304", tt = "_input--has-leading-icon_17rym_350", nt = "_input--has-action-button_17rym_353", et = "_input--has-second-action-button_17rym_356", at = "_input--has-affix_17rym_368", st = "_input--is-ready_17rym_380", ot = "_root_17rym_387", it = "_hint_17rym_395", ct = "_label_17rym_395", rt = "_wrapper_17rym_399", ut = "_action-button_17rym_405", lt = "_second-action-button_17rym_409", pt = "_label--hidden_17rym_426", mt = "_feedback_17rym_453", t = {
   input: Y,
-  "input--invalid": "_input--invalid_1ym7n_183",
+  "input--invalid": "_input--invalid_17rym_297",
   inputInvalid: Z,
-  "input--small": "_input--small_1ym7n_190",
+  "input--small": "_input--small_17rym_304",
   inputSmall: z,
-  "input--has-leading-icon": "_input--has-leading-icon_1ym7n_236",
+  "input--has-leading-icon": "_input--has-leading-icon_17rym_350",
   inputHasLeadingIcon: tt,
-  "input--has-action-button": "_input--has-action-button_1ym7n_239",
+  "input--has-action-button": "_input--has-action-button_17rym_353",
   inputHasActionButton: nt,
-  "input--has-second-action-button": "_input--has-second-action-button_1ym7n_242",
+  "input--has-second-action-button": "_input--has-second-action-button_17rym_356",
   inputHasSecondActionButton: et,
-  "input--has-affix": "_input--has-affix_1ym7n_254",
+  "input--has-affix": "_input--has-affix_17rym_368",
   inputHasAffix: at,
-  "input--is-ready": "_input--is-ready_1ym7n_266",
-  inputIsReady: ot,
-  root: st,
+  "input--is-ready": "_input--is-ready_17rym_380",
+  inputIsReady: st,
+  root: ot,
   hint: it,
   label: ct,
-  wrapper: ut,
-  "action-button": "_action-button_1ym7n_291",
-  actionButton: lt,
-  "second-action-button": "_second-action-button_1ym7n_295",
-  secondActionButton: rt,
-  "label--hidden": "_label--hidden_1ym7n_312",
+  wrapper: rt,
+  "action-button": "_action-button_17rym_405",
+  actionButton: ut,
+  "second-action-button": "_second-action-button_17rym_409",
+  secondActionButton: lt,
+  "label--hidden": "_label--hidden_17rym_426",
   labelHidden: pt,
   feedback: mt
-}, _t = ({ id: n, label: u }) => {
+}, _t = ({ id: n, label: r }) => {
   if (!n)
     throw new Error(
       y(
@@ -42,25 +42,25 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
         'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
       )
     );
-  if (!u)
+  if (!r)
     throw new Error(
       y(
         "DSInputSearch",
         `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputSearch component. If you don't want to display a label, set hideLabel={true}.`
       )
     );
-}, dt = (n) => !!K(n, "form"), xt = ({
+}, dt = (n) => !!K(n, "form"), Bt = ({
   id: n,
-  label: u,
+  label: r,
   className: H,
   clearButtonLabel: E = "Clear search field",
-  disabled: l = !1,
+  disabled: u = !1,
   hint: d,
   hideLabel: j = !1,
-  invalid: r = !1,
-  readonly: o = !1,
+  invalid: l = !1,
+  readonly: s = !1,
   required: S = !1,
-  size: s = "medium",
+  size: o = "medium",
   submitButtonLabel: C = "Search",
   systemFeedback: h,
   value: b,
@@ -70,7 +70,7 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
 }) => {
   process.env.NODE_ENV !== "production" && _t({
     id: n,
-    label: u
+    label: r
   });
   const [p, g] = J(b), f = w(null), m = w(null), V = Q(j);
   A(() => {
@@ -85,20 +85,20 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
   }, []);
   const v = `${n}-label`, B = `${n}-feedback`, x = `${n}-hint`, O = d ? ` ${x}` : "", N = p !== "" && p !== void 0 && p !== null, P = c(t.root, H), $ = c(t.input, {
     // small input
-    [t.inputSmall]: s === "small",
+    [t.inputSmall]: o === "small",
     // invalid state
-    [t.inputInvalid]: r,
+    [t.inputInvalid]: l,
     // action button - input password always has an action button
     [t.inputHasActionButton]: !0,
     // action second action button
-    [t.inputHasSecondActionButton]: N && !o && !l
+    [t.inputHasSecondActionButton]: N && !s && !u
   }), R = c(t.label, {
     // hide label only visually to keep them available for assistive technologies
     [t.labelHidden]: V
   }), q = c(t.actionButton, {
-    [t.actionButtonSmall]: s === "small"
+    [t.actionButtonSmall]: o === "small"
   }), T = c(t.secondActionButton, {
-    [t.secondActionButtonSmall]: s === "small"
+    [t.secondActionButtonSmall]: o === "small"
   }), F = (a, i) => {
     const G = Object.getPrototypeOf(a), _ = Object.getOwnPropertyDescriptor(
       G,
@@ -117,11 +117,11 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
   };
   return /* @__PURE__ */ e.jsxs("div", { className: P, ref: f, children: [
     /* @__PURE__ */ e.jsxs("label", { className: R, id: v, htmlFor: n, children: [
-      u,
+      r,
       S && /* @__PURE__ */ e.jsx(U, {})
     ] }),
     d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: x, children: d }),
-    r && h && /* @__PURE__ */ e.jsx(
+    l && h && /* @__PURE__ */ e.jsx(
       X,
       {
         className: t.feedback,
@@ -139,18 +139,18 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
           ref: m,
           ...L,
           "aria-labelledby": `${v}${O}`,
-          "aria-describedby": r && h ? B : void 0,
-          "aria-invalid": r,
-          "aria-disabled": o,
-          readOnly: o,
+          "aria-describedby": l && h ? B : void 0,
+          "aria-invalid": l,
+          "aria-disabled": s,
+          readOnly: s,
           required: S,
-          disabled: l,
+          disabled: u,
           type: "search",
           value: p,
           onChange: W
         }
       ),
-      N && !o && !l && /* @__PURE__ */ e.jsx(
+      N && !s && !u && /* @__PURE__ */ e.jsx(
         D,
         {
           hideLabel: !0,
@@ -158,7 +158,7 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
           iconName: "cross",
           className: T,
           variant: "ghost",
-          size: s,
+          size: o,
           onClick: M,
           type: "button",
           tabIndex: -1,
@@ -173,10 +173,10 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
           iconName: "magnifying-glass",
           className: q,
           variant: "ghost",
-          size: s,
+          size: o,
           onClick: k,
           type: "submit",
-          disabled: l || o,
+          disabled: u || s,
           children: C
         }
       )
@@ -184,5 +184,5 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
   ] });
 };
 export {
-  xt as DSInputSearch
+  Bt as DSInputSearch
 };

package/inputstepper.BBMQr6kM.js

@@ -0,0 +1,290 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import { useState as f, useRef as N, useEffect as w, useLayoutEffect as M } from "react";
+import { u as bn } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as mn } from "./asterisk.DU8THnoC.js";
+import { DSButton as X } from "./button.BUUGRxIp.js";
+import { M as E, b as H } from "./chunks/Input.utils.Bly6ZzLI.js";
+import { DSSystemFeedback as hn } from "./systemfeedback.C7iXO5A1.js";
+import { g as y } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/inputstepper.paPJix5A.css';const xn = "_input_134nb_187", Sn = "_input--invalid_134nb_298", yn = "_input--small_134nb_305", In = "_input--has-leading-icon_134nb_351", vn = "_input--has-action-button_134nb_354", gn = "_input--has-second-action-button_134nb_357", An = "_input--has-affix_134nb_369", Bn = "_input--is-ready_134nb_381", Dn = "_root_134nb_388", Nn = "_hint_134nb_396", wn = "_label_134nb_396", En = "_wrapper_134nb_400", Hn = "_affix_134nb_406", Ln = "_affix--small_134nb_426", jn = "_affix--disabled_134nb_438", Rn = "_prefix_134nb_441", kn = "_affix--readonly_134nb_444", Cn = "_suffix_134nb_454", $n = "_action-button_134nb_461", Fn = "_label--hidden_134nb_478", Vn = "_feedback_134nb_505", Pn = "_second-action-button_134nb_519", Tn = "_value-announcer_134nb_523", t = {
+  input: xn,
+  "input--invalid": "_input--invalid_134nb_298",
+  inputInvalid: Sn,
+  "input--small": "_input--small_134nb_305",
+  inputSmall: yn,
+  "input--has-leading-icon": "_input--has-leading-icon_134nb_351",
+  inputHasLeadingIcon: In,
+  "input--has-action-button": "_input--has-action-button_134nb_354",
+  inputHasActionButton: vn,
+  "input--has-second-action-button": "_input--has-second-action-button_134nb_357",
+  inputHasSecondActionButton: gn,
+  "input--has-affix": "_input--has-affix_134nb_369",
+  inputHasAffix: An,
+  "input--is-ready": "_input--is-ready_134nb_381",
+  inputIsReady: Bn,
+  root: Dn,
+  hint: Nn,
+  label: wn,
+  wrapper: En,
+  affix: Hn,
+  "affix--small": "_affix--small_134nb_426",
+  affixSmall: Ln,
+  "affix--disabled": "_affix--disabled_134nb_438",
+  affixDisabled: jn,
+  prefix: Rn,
+  "affix--readonly": "_affix--readonly_134nb_444",
+  affixReadonly: kn,
+  suffix: Cn,
+  "action-button": "_action-button_134nb_461",
+  actionButton: $n,
+  "label--hidden": "_label--hidden_134nb_478",
+  labelHidden: Fn,
+  feedback: Vn,
+  "second-action-button": "_second-action-button_134nb_519",
+  secondActionButton: Pn,
+  "value-announcer": "_value-announcer_134nb_523",
+  valueAnnouncer: Tn
+}, Wn = ({
+  id: a,
+  label: b,
+  prefix: m,
+  suffix: h
+}) => {
+  if (!a)
+    throw new Error(
+      y(
+        "DSInputStepper",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
+      )
+    );
+  if (!b)
+    throw new Error(
+      y(
+        "DSInputStepper",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputStepper component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+  m && m.length > E && console.warn(
+    y(
+      "DSInputStepper",
+      `Prefix length must not exceed ${E} characters.`
+    )
+  ), h && h.length > H && console.warn(
+    y(
+      "DSInputStepper",
+      `Suffix length must not exceed ${H} characters.`
+    )
+  );
+}, Yn = ({
+  id: a,
+  label: b,
+  announcementText: m = "Value changed to",
+  className: h,
+  disabled: d = !1,
+  decreaseAmountButtonLabel: q = "Decrease",
+  hint: I,
+  hideLabel: G = !1,
+  invalid: x = !1,
+  increaseAmountButtonLabel: O = "Increase",
+  prefix: u,
+  max: L = 100,
+  min: j = 0,
+  readonly: p = !1,
+  required: R = !1,
+  size: i = "medium",
+  step: U = 1,
+  suffix: r,
+  systemFeedback: v,
+  value: S,
+  onChange: k,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Wn({
+    id: a,
+    label: b,
+    prefix: u,
+    suffix: r
+  });
+  const [K, Q] = f(!1), [_, g] = f(S), [A, C] = f(""), [Y, Z] = f(!1), [z, nn] = f({}), s = N(null), tn = u == null ? void 0 : u.substring(0, E), B = N(null), en = r == null ? void 0 : r.substring(0, H), D = N(null), an = bn(G);
+  w(() => {
+    S && g(S);
+  }, [S]), w(() => {
+    if (A) {
+      const n = setTimeout(() => {
+        C("");
+      }, 3e3);
+      return () => clearTimeout(n);
+    }
+  }, [A]), w(() => {
+    var o;
+    const n = (l) => {
+      l.preventDefault();
+    };
+    return (o = s.current) == null || o.addEventListener("wheel", n, {
+      // The { passive: false } option is used to indicate that the event listener wants to cancel the event, allowing preventDefault to work as expected.
+      passive: !1
+    }), () => {
+      var l;
+      (l = s.current) == null || l.removeEventListener("wheel", n);
+    };
+  }, []), M(() => {
+    const n = i === "medium" ? 16 : 8, o = {};
+    if (B.current) {
+      const l = B.current.offsetWidth;
+      o.paddingInlineStart = n + l + "px";
+    }
+    if (D.current) {
+      const l = D.current.offsetWidth;
+      o.paddingInlineEnd = n + l + "px";
+    }
+    nn(o), Q(!0);
+  }, [u, r, i, Y]), M(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), Z(!0));
+    })();
+  }, []);
+  const $ = c(t.affix, {
+    [t.affixSmall]: i === "small",
+    [t.affixDisabled]: d,
+    [t.affixReadonly]: p
+  }), F = `${a}-label`, V = `${a}-feedback`, P = `${a}-hint`, T = `${a}-value-announcer`, sn = I ? ` ${P}` : "", on = c(t.root, h), ln = c(t.input, {
+    // small input
+    [t.inputSmall]: i === "small",
+    // invalid state
+    [t.inputInvalid]: x,
+    // prefix/suffix
+    [t.inputHasAffix]: u || r,
+    [t.inputIsReady]: K
+  }), cn = c(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: an
+  }), un = c(t.secondActionButton, {
+    [t.secondActionButtonSmall]: i === "small"
+  }), rn = c(t.actionButton, {
+    [t.actionButtonSmall]: i === "small"
+  }), dn = () => {
+    const n = [T];
+    return x && v && n.push(V), n.join(" ");
+  }, W = () => {
+    var n;
+    if (s.current) {
+      g(s.current.value);
+      const o = new Event("change", { bubbles: !0 });
+      (n = s.current) == null || n.dispatchEvent(o), C(`${m} ${s.current.value}`);
+    }
+  }, pn = () => {
+    var n;
+    (n = s.current) == null || n.stepDown(), W();
+  }, _n = () => {
+    var n;
+    (n = s.current) == null || n.stepUp(), W();
+  }, fn = (n) => {
+    g(n.target.value), k && k(n);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: on, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: cn, id: F, htmlFor: a, children: [
+      b,
+      R && /* @__PURE__ */ e.jsx(mn, {})
+    ] }),
+    I && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: P, children: I }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: t.valueAnnouncer,
+        id: T,
+        children: A
+      }
+    ),
+    x && v && /* @__PURE__ */ e.jsx(
+      hn,
+      {
+        className: t.feedback,
+        message: v,
+        type: "invalid",
+        id: V
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
+      u && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, t.prefix),
+          ref: B,
+          "aria-disabled": d,
+          children: tn
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: ln,
+          id: a,
+          ref: s,
+          ...J,
+          style: z,
+          "aria-labelledby": `${F}${sn}`,
+          "aria-describedby": dn(),
+          "aria-invalid": x,
+          "aria-disabled": p,
+          disabled: d,
+          min: j,
+          max: L,
+          readOnly: p,
+          required: R,
+          step: U,
+          type: "number",
+          value: _,
+          onChange: fn
+        }
+      ),
+      r && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, t.suffix),
+          ref: D,
+          "aria-disabled": d,
+          children: en
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "minus",
+          variant: "filled",
+          className: un,
+          size: i,
+          onClick: pn,
+          disabled: d || p || !!_ && Number(_) <= j,
+          type: "button",
+          children: q
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "plus",
+          variant: "filled",
+          className: rn,
+          size: i,
+          onClick: _n,
+          disabled: d || p || !!_ && Number(_) >= L,
+          type: "button",
+          children: O
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Yn as DSInputStepper
+};