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

package/chunks/{Input.utils.f8f3286f.js → Input.utils.ChV6RJsh.js}

@@ -1,7 +1,9 @@
 "use client";
-import { g as t } from "./helpers.ea3ca41a.js";
-import "react";
-const p = typeof document < "u", a = 8, i = 5, u = [
+import { useLayoutEffect as p, useEffect as u } from "react";
+import { h } from "./useBreakpoint.5xBNDiCf.js";
+import { g as t } from "./helpers.B1JT5ShS.js";
+import { h as l } from "./has-document.r9i9TxKV.js";
+const f = h ? p : u, a = 8, i = 5, U = ["medium", "small"], S = [
   "color",
   "date",
   "datetime-local",
@@ -14,7 +16,7 @@ const p = typeof document < "u", a = 8, i = 5, u = [
   "text",
   "time",
   "url"
-], l = [
+], w = [
   "week",
   "hidden",
   "button",
@@ -26,15 +28,15 @@ const p = typeof document < "u", a = 8, i = 5, u = [
   "submit",
   "image",
   "datetime"
-], I = ({
+], P = ({
   id: e,
   label: n,
   prefix: o,
   suffix: s,
   leadingIconName: r,
   leadingIconSource: d,
-  actionButtonIconName: c,
-  actionButtonIconSource: m
+  actionButtonIconName: m,
+  actionButtonIconSource: c
 }) => {
   if (!e)
     throw new Error(
@@ -65,14 +67,14 @@ const p = typeof document < "u", a = 8, i = 5, u = [
       "DSInput",
       "Prefix and a leading Icon cannot be used at the same time."
     )
-  ), s && (c || m) && console.warn(
+  ), s && (m || c) && console.warn(
     t(
       "DSInput",
       "Suffix and an action button cannot be used at the same time."
     )
   );
-}, b = (e) => {
-  if (!u.includes(e) && !l.includes(e))
+}, g = (e) => {
+  if (!S.includes(e) && !w.includes(e))
     throw new Error(
       t(
         "DSInput",
@@ -94,13 +96,18 @@ const p = typeof document < "u", a = 8, i = 5, u = [
     hidden: 'Type hidden is not supported by DSInput component. Use a default <input type="hidden" /> element instead.'
   };
   n[e] && console.warn(t("DSInput", n[e]));
-}, h = () => p && "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), D = (e, n) => h() && (e || n), T = (e) => e === "date" || e === "datetime-local" || e === "month", y = (e) => e === "time";
+}, I = () => l && "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), E = (e, n) => I() && (e || n), k = (e) => e === "date" || e === "datetime-local" || e === "month", x = (e) => e === "time";
 export {
+  U as I,
   a as M,
-  b as a,
-  i as b,
-  y as c,
-  T as i,
-  D as s,
-  I as v
+  S,
+  w as U,
+  i as a,
+  g as b,
+  x as c,
+  I as h,
+  k as i,
+  E as s,
+  f as u,
+  P as v
 };

package/chunks/InputPassword.Dgo95-PU.js

@@ -0,0 +1,140 @@
+"use client";
+import { j as a } from "./jsx-runtime.C115EyI4.js";
+import { c as i } from "./index.CvOaL64Y.js";
+import { useState as A } from "react";
+import { u as D } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as C } from "../asterisk.DDn-yX4P.js";
+import { DSButton as L } from "../button.DH0h6uPs.js";
+import { DSSystemFeedback as $ } from "../systemfeedback.ZzRUAVYX.js";
+import { g as x } from "./helpers.B1JT5ShS.js";
+import '../assets/InputPassword.Cf394z47.css';const E = "_input_1pqhx_226", R = "_input--invalid_1pqhx_338", V = "_input--small_1pqhx_345", O = "_input--has-leading-icon_1pqhx_399", F = "_input--has-action-button_1pqhx_402", M = "_input--has-second-action-button_1pqhx_405", T = "_input--has-affix_1pqhx_417", G = "_input--is-ready_1pqhx_431", J = "_root_1pqhx_438", K = "_hint_1pqhx_446", Q = "_label_1pqhx_446", U = "_wrapper_1pqhx_450", W = "_action-button_1pqhx_456", X = "_label--hidden_1pqhx_475", Y = "_feedback_1pqhx_504", t = {
+  input: E,
+  "input--invalid": "_input--invalid_1pqhx_338",
+  inputInvalid: R,
+  "input--small": "_input--small_1pqhx_345",
+  inputSmall: V,
+  "input--has-leading-icon": "_input--has-leading-icon_1pqhx_399",
+  inputHasLeadingIcon: O,
+  "input--has-action-button": "_input--has-action-button_1pqhx_402",
+  inputHasActionButton: F,
+  "input--has-second-action-button": "_input--has-second-action-button_1pqhx_405",
+  inputHasSecondActionButton: M,
+  "input--has-affix": "_input--has-affix_1pqhx_417",
+  inputHasAffix: T,
+  "input--is-ready": "_input--is-ready_1pqhx_431",
+  inputIsReady: G,
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: U,
+  "action-button": "_action-button_1pqhx_456",
+  actionButton: W,
+  "label--hidden": "_label--hidden_1pqhx_475",
+  labelHidden: X,
+  feedback: Y
+}, Z = ({ id: n, label: s }) => {
+  if (!n)
+    throw new Error(
+      x(
+        "DSInputPassword",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
+      )
+    );
+  if (!s)
+    throw new Error(
+      x(
+        "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}.`
+      )
+    );
+}, pt = ({
+  id: n,
+  label: s,
+  autocomplete: b = "new-password",
+  className: f,
+  disabled: c = !1,
+  hidePasswordText: q = "Hide password",
+  hint: e,
+  hideLabel: w = !1,
+  invalid: o = !1,
+  readonly: r = !1,
+  required: d = !1,
+  showPasswordText: y = "Show password",
+  size: p = "medium",
+  systemFeedback: l,
+  ...S
+}) => {
+  process.env.NODE_ENV !== "production" && Z({
+    id: n,
+    label: s
+  });
+  const [u, I] = A(!1), _ = `${n}-label`, h = `${n}-feedback`, m = `${n}-hint`, v = e ? ` ${m}` : "", B = D(w), H = i(t.root, f), g = i(t.input, {
+    // small input
+    [t.inputSmall]: p === "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]: B
+  }), N = i(t.actionButton, {
+    [t.actionButtonSmall]: p === "small"
+  }), j = () => {
+    I((k) => !k);
+  };
+  return /* @__PURE__ */ a.jsxs("div", { className: H, 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: m, children: e }),
+    o && l && /* @__PURE__ */ a.jsx(
+      $,
+      {
+        className: t.feedback,
+        message: l,
+        type: "invalid",
+        id: h
+      }
+    ),
+    /* @__PURE__ */ a.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ a.jsx(
+        "input",
+        {
+          className: g,
+          id: n,
+          ...S,
+          "aria-labelledby": `${_}${v}`,
+          "aria-describedby": o && l ? h : void 0,
+          "aria-invalid": o,
+          "aria-disabled": r,
+          readOnly: r,
+          required: d,
+          disabled: c,
+          autoComplete: b,
+          type: u ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        L,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: u ? "eye-closed" : "eye",
+          variant: "ghost",
+          className: N,
+          size: p,
+          onClick: j,
+          type: "button",
+          disabled: c,
+          children: u ? q : y
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  pt as D,
+  Z as v
+};

package/chunks/InputSearch.BFof0pBn.js

@@ -0,0 +1,189 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import { useState as G, useRef as N, useEffect as w } from "react";
+import { g as S, a as J } from "./helpers.B1JT5ShS.js";
+import { u as K } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as Q } from "../asterisk.DDn-yX4P.js";
+import { DSButton as D } from "../button.DH0h6uPs.js";
+import { DSSystemFeedback as U } from "../systemfeedback.ZzRUAVYX.js";
+import '../assets/InputSearch.eCRQoxjN.css';const X = "_input_8z3ht_226", Y = "_input--invalid_8z3ht_338", Z = "_input--small_8z3ht_345", tt = "_input--has-leading-icon_8z3ht_399", nt = "_input--has-action-button_8z3ht_402", et = "_input--has-second-action-button_8z3ht_405", at = "_input--has-affix_8z3ht_417", st = "_input--is-ready_8z3ht_431", ot = "_root_8z3ht_438", it = "_hint_8z3ht_446", ct = "_label_8z3ht_446", ut = "_wrapper_8z3ht_450", lt = "_action-button_8z3ht_456", rt = "_second-action-button_8z3ht_460", pt = "_label--hidden_8z3ht_479", ht = "_feedback_8z3ht_508", t = {
+  input: X,
+  "input--invalid": "_input--invalid_8z3ht_338",
+  inputInvalid: Y,
+  "input--small": "_input--small_8z3ht_345",
+  inputSmall: Z,
+  "input--has-leading-icon": "_input--has-leading-icon_8z3ht_399",
+  inputHasLeadingIcon: tt,
+  "input--has-action-button": "_input--has-action-button_8z3ht_402",
+  inputHasActionButton: nt,
+  "input--has-second-action-button": "_input--has-second-action-button_8z3ht_405",
+  inputHasSecondActionButton: et,
+  "input--has-affix": "_input--has-affix_8z3ht_417",
+  inputHasAffix: at,
+  "input--is-ready": "_input--is-ready_8z3ht_431",
+  inputIsReady: st,
+  root: ot,
+  hint: it,
+  label: ct,
+  wrapper: ut,
+  "action-button": "_action-button_8z3ht_456",
+  actionButton: lt,
+  "second-action-button": "_second-action-button_8z3ht_460",
+  secondActionButton: rt,
+  "label--hidden": "_label--hidden_8z3ht_479",
+  labelHidden: pt,
+  feedback: ht
+}, _t = ({ id: n, label: u }) => {
+  if (!n)
+    throw new Error(
+      S(
+        "DSInputSearch",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
+      )
+    );
+  if (!u)
+    throw new Error(
+      S(
+        "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) => !!J(n, "form"), Bt = ({
+  id: n,
+  label: u,
+  className: A,
+  clearButtonLabel: H = "Clear search field",
+  disabled: l = !1,
+  hint: d,
+  hideLabel: E = !1,
+  invalid: r = !1,
+  readonly: s = !1,
+  required: I = !1,
+  size: o = "medium",
+  submitButtonLabel: j = "Search",
+  systemFeedback: m,
+  value: b,
+  submitButtonOnClick: C,
+  onChange: g,
+  ...k
+}) => {
+  process.env.NODE_ENV !== "production" && _t({
+    id: n,
+    label: u
+  });
+  const [p, v] = G(b), f = N(null), h = N(null), L = K(E);
+  w(() => {
+    v(b);
+  }, [b]), w(() => {
+    f.current && !dt(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
+      S(
+        "DSInputSearch",
+        `The DSInputSearch component with the id "${n}" is not within a form element. This may cause issues with form submission. Please ensure the DSInputSearch component is within a form element.`
+      )
+    );
+  }, []);
+  const z = `${n}-label`, B = `${n}-feedback`, y = `${n}-hint`, V = d ? ` ${y}` : "", x = p !== "" && p !== void 0 && p !== null, O = c(t.root, A), P = c(t.input, {
+    // small input
+    [t.inputSmall]: o === "small",
+    // invalid state
+    [t.inputInvalid]: r,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0,
+    // action second action button
+    [t.inputHasSecondActionButton]: x && !s && !l
+  }), $ = c(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: L
+  }), R = c(t.actionButton, {
+    [t.actionButtonSmall]: o === "small"
+  }), q = c(t.secondActionButton, {
+    [t.secondActionButtonSmall]: o === "small"
+  }), T = (a, i) => {
+    const W = Object.getPrototypeOf(a), _ = Object.getOwnPropertyDescriptor(
+      W,
+      "value"
+    );
+    _ != null && _.set ? _.set.call(a, i) : a.value = i;
+  }, F = () => {
+    var i;
+    if (!h.current) return;
+    T(h.current, "");
+    const a = new Event("change", { bubbles: !0 });
+    (i = h.current) == null || i.dispatchEvent(a);
+  }, M = (a) => {
+    v(a.target.value), g && g(a);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: O, ref: f, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: $, id: z, htmlFor: n, children: [
+      u,
+      I && /* @__PURE__ */ e.jsx(Q, {})
+    ] }),
+    d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: y, children: d }),
+    r && m && /* @__PURE__ */ e.jsx(
+      U,
+      {
+        className: t.feedback,
+        message: m,
+        type: "invalid",
+        id: B
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: P,
+          id: n,
+          ref: h,
+          ...k,
+          "aria-labelledby": `${z}${V}`,
+          "aria-describedby": r && m ? B : void 0,
+          "aria-invalid": r,
+          "aria-disabled": s,
+          readOnly: s,
+          required: I,
+          disabled: l,
+          type: "search",
+          value: p,
+          onChange: M
+        }
+      ),
+      x && !s && !l && /* @__PURE__ */ e.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "cross",
+          className: q,
+          variant: "ghost",
+          size: o,
+          onClick: F,
+          type: "button",
+          tabIndex: -1,
+          children: H
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "magnifying-glass",
+          className: R,
+          variant: "ghost",
+          size: o,
+          onClick: C,
+          type: "submit",
+          disabled: l || s,
+          children: j
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Bt as D,
+  dt as i,
+  _t as v
+};

package/chunks/InputStepper.4IqLa5tX.js

@@ -0,0 +1,291 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import { useState as f, useRef as N, useEffect as w } from "react";
+import { u as ft } from "./useBreakpoint.5xBNDiCf.js";
+import { M as E, a as H, u as M } from "./Input.utils.ChV6RJsh.js";
+import { Asterisk as mt } from "../asterisk.DDn-yX4P.js";
+import { DSButton as X } from "../button.DH0h6uPs.js";
+import { DSSystemFeedback as gt } from "../systemfeedback.ZzRUAVYX.js";
+import { g as S } from "./helpers.B1JT5ShS.js";
+import '../assets/InputStepper.B80KulYE.css';const ht = "_input_td0g0_226", bt = "_input--invalid_td0g0_338", xt = "_input--small_td0g0_345", St = "_input--has-leading-icon_td0g0_399", yt = "_input--has-action-button_td0g0_402", It = "_input--has-second-action-button_td0g0_405", vt = "_input--has-affix_td0g0_417", At = "_input--is-ready_td0g0_431", Bt = "_root_td0g0_441", Dt = "_hint_td0g0_449", Nt = "_label_td0g0_449", wt = "_wrapper_td0g0_453", Et = "_affix_td0g0_459", Ht = "_affix--small_td0g0_481", Lt = "_affix--disabled_td0g0_495", jt = "_prefix_td0g0_498", Rt = "_affix--readonly_td0g0_501", kt = "_suffix_td0g0_511", Ct = "_action-button_td0g0_518", $t = "_label--hidden_td0g0_537", Ft = "_feedback_td0g0_566", Vt = "_second-action-button_td0g0_580", Pt = "_value-announcer_td0g0_584", n = {
+  input: ht,
+  "input--invalid": "_input--invalid_td0g0_338",
+  inputInvalid: bt,
+  "input--small": "_input--small_td0g0_345",
+  inputSmall: xt,
+  "input--has-leading-icon": "_input--has-leading-icon_td0g0_399",
+  inputHasLeadingIcon: St,
+  "input--has-action-button": "_input--has-action-button_td0g0_402",
+  inputHasActionButton: yt,
+  "input--has-second-action-button": "_input--has-second-action-button_td0g0_405",
+  inputHasSecondActionButton: It,
+  "input--has-affix": "_input--has-affix_td0g0_417",
+  inputHasAffix: vt,
+  "input--is-ready": "_input--is-ready_td0g0_431",
+  inputIsReady: At,
+  root: Bt,
+  hint: Dt,
+  label: Nt,
+  wrapper: wt,
+  affix: Et,
+  "affix--small": "_affix--small_td0g0_481",
+  affixSmall: Ht,
+  "affix--disabled": "_affix--disabled_td0g0_495",
+  affixDisabled: Lt,
+  prefix: jt,
+  "affix--readonly": "_affix--readonly_td0g0_501",
+  affixReadonly: Rt,
+  suffix: kt,
+  "action-button": "_action-button_td0g0_518",
+  actionButton: Ct,
+  "label--hidden": "_label--hidden_td0g0_537",
+  labelHidden: $t,
+  feedback: Ft,
+  "second-action-button": "_second-action-button_td0g0_580",
+  secondActionButton: Vt,
+  "value-announcer": "_value-announcer_td0g0_584",
+  valueAnnouncer: Pt
+}, Tt = ({
+  id: a,
+  label: m,
+  prefix: g,
+  suffix: h
+}) => {
+  if (!a)
+    throw new Error(
+      S(
+        "DSInputStepper",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
+      )
+    );
+  if (!m)
+    throw new Error(
+      S(
+        "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}.`
+      )
+    );
+  g && g.length > E && console.warn(
+    S(
+      "DSInputStepper",
+      `Prefix length must not exceed ${E} characters.`
+    )
+  ), h && h.length > H && console.warn(
+    S(
+      "DSInputStepper",
+      `Suffix length must not exceed ${H} characters.`
+    )
+  );
+}, Qt = ({
+  id: a,
+  label: m,
+  announcementText: g = "Value changed to",
+  className: h,
+  disabled: r = !1,
+  decreaseAmountButtonLabel: q = "Decrease",
+  hint: y,
+  hideLabel: G = !1,
+  invalid: b = !1,
+  increaseAmountButtonLabel: O = "Increase",
+  prefix: u,
+  max: L = 100,
+  min: j = 0,
+  readonly: p = !1,
+  required: R = !1,
+  size: o = "medium",
+  step: U = 1,
+  suffix: d,
+  systemFeedback: I,
+  value: x,
+  onChange: k,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Tt({
+    id: a,
+    label: m,
+    prefix: u,
+    suffix: d
+  });
+  const [K, Q] = f(!1), [_, v] = f(x), [A, C] = f(""), [Y, Z] = f(!1), [z, tt] = f({}), s = N(null), nt = u == null ? void 0 : u.substring(0, E), B = N(null), et = d == null ? void 0 : d.substring(0, H), D = N(null), at = ft(G);
+  w(() => {
+    x && v(x);
+  }, [x]), w(() => {
+    if (A) {
+      const t = setTimeout(() => {
+        C("");
+      }, 3e3);
+      return () => clearTimeout(t);
+    }
+  }, [A]), w(() => {
+    var i;
+    const t = (l) => {
+      l.preventDefault();
+    };
+    return (i = s.current) == null || i.addEventListener("wheel", t, {
+      // 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", t);
+    };
+  }, []), M(() => {
+    const t = o === "medium" ? 16 : 8, i = {};
+    if (B.current) {
+      const l = B.current.offsetWidth;
+      i.paddingInlineStart = t + l + "px";
+    }
+    if (D.current) {
+      const l = D.current.offsetWidth;
+      i.paddingInlineEnd = t + l + "px";
+    }
+    tt(i), Q(!0);
+  }, [u, d, o, Y]), M(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), Z(!0));
+    })();
+  }, []);
+  const $ = c(n.affix, {
+    [n.affixSmall]: o === "small",
+    [n.affixDisabled]: r,
+    [n.affixReadonly]: p
+  }), F = `${a}-label`, V = `${a}-feedback`, P = `${a}-hint`, T = `${a}-value-announcer`, st = y ? ` ${P}` : "", ot = c(n.root, h), it = c(n.input, {
+    // small input
+    [n.inputSmall]: o === "small",
+    // invalid state
+    [n.inputInvalid]: b,
+    // prefix/suffix
+    [n.inputHasAffix]: u || d,
+    [n.inputIsReady]: K
+  }), lt = c(n.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [n.labelHidden]: at
+  }), ct = c(n.secondActionButton, {
+    [n.secondActionButtonSmall]: o === "small"
+  }), ut = c(n.actionButton, {
+    [n.actionButtonSmall]: o === "small"
+  }), dt = () => {
+    const t = [T];
+    return b && I && t.push(V), t.join(" ");
+  }, W = () => {
+    var t;
+    if (s.current) {
+      v(s.current.value);
+      const i = new Event("change", { bubbles: !0 });
+      (t = s.current) == null || t.dispatchEvent(i), C(`${g} ${s.current.value}`);
+    }
+  }, rt = () => {
+    var t;
+    (t = s.current) == null || t.stepDown(), W();
+  }, pt = () => {
+    var t;
+    (t = s.current) == null || t.stepUp(), W();
+  }, _t = (t) => {
+    v(t.target.value), k && k(t);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: ot, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: lt, id: F, htmlFor: a, children: [
+      m,
+      R && /* @__PURE__ */ e.jsx(mt, {})
+    ] }),
+    y && /* @__PURE__ */ e.jsx("div", { className: n.hint, id: P, children: y }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: n.valueAnnouncer,
+        id: T,
+        children: A
+      }
+    ),
+    b && I && /* @__PURE__ */ e.jsx(
+      gt,
+      {
+        className: n.feedback,
+        message: I,
+        type: "invalid",
+        id: V
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: n.wrapper, children: [
+      u && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, n.prefix),
+          ref: B,
+          "aria-disabled": r,
+          children: nt
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: it,
+          id: a,
+          ref: s,
+          ...J,
+          style: z,
+          "aria-labelledby": `${F}${st}`,
+          "aria-describedby": dt(),
+          "aria-invalid": b,
+          "aria-disabled": p,
+          disabled: r,
+          min: j,
+          max: L,
+          readOnly: p,
+          required: R,
+          step: U,
+          type: "number",
+          value: _,
+          onChange: _t
+        }
+      ),
+      d && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, n.suffix),
+          ref: D,
+          "aria-disabled": r,
+          children: et
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "minus",
+          variant: "filled",
+          className: ct,
+          size: o,
+          onClick: rt,
+          disabled: r || p || !!_ && Number(_) <= j,
+          type: "button",
+          children: q
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "plus",
+          variant: "filled",
+          className: ut,
+          size: o,
+          onClick: pt,
+          disabled: r || p || !!_ && Number(_) >= L,
+          type: "button",
+          children: O
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Qt as D,
+  Tt as v
+};