@stihl-design-system/components 1.0.0-RC.34 → 1.0.0-RC.36

package/chunks/{Dialog.DpqSVrYR.js → Dialog.DMxHRrxo.js}

@@ -2,7 +2,7 @@
 import { jsx as n, jsxs as E } from "react/jsx-runtime";
 import { c as r } from "./index.DL9mof6u.js";
 import { useRef as g, useState as F, useEffect as v } from "react";
-import { D as W } from "./Button.DCZgBNmA.js";
+import { D as W } from "./Button.CQlIao-Z.js";
 import { g as x } from "./helpers.CexwVao7.js";
 import "./index.D-sRdssb.js";
 import '../assets/Dialog.DJkn65Es.css';const R = "ds-dialog_root_kvopn_5", y = "ds-dialog_content-wrapper_kvopn_166", z = "ds-dialog_content-wrapper--no-footer_kvopn_172", L = "ds-dialog_close-button_kvopn_180", M = "ds-dialog_header_kvopn_193", j = "ds-dialog_content_kvopn_166", H = "ds-dialog_footer_kvopn_195", I = "ds-dialog_header--scrollable_kvopn_216", O = "ds-dialog_header--close-button_kvopn_225", P = "ds-dialog_content--no-footer_kvopn_238", T = "ds-dialog_footer--scrollable_kvopn_245", o = {

package/chunks/{Drawer.DISWybOa.js → Drawer.CatmvDHJ.js}

@@ -2,7 +2,7 @@
 import { jsx as t, jsxs as F } from "react/jsx-runtime";
 import { c as n } from "./index.DL9mof6u.js";
 import { useRef as p, useState as R, useEffect as v } from "react";
-import { D as k } from "./Button.DCZgBNmA.js";
+import { D as k } from "./Button.CQlIao-Z.js";
 import { g as x } from "./helpers.CexwVao7.js";
 import "./index.D-sRdssb.js";
 import '../assets/Drawer.x3BCQvWE.css';const I = "ds-drawer_root_4nbv0_10", O = "ds-drawer_root--end_4nbv0_68", y = "ds-drawer_content-wrapper_4nbv0_169", z = "ds-drawer_content-wrapper--no-footer_4nbv0_175", L = "ds-drawer_close-button_4nbv0_178", M = "ds-drawer_header_4nbv0_191", P = "ds-drawer_content_4nbv0_169", j = "ds-drawer_footer_4nbv0_193", H = "ds-drawer_header--scrollable_4nbv0_214", T = "ds-drawer_header--close-button_4nbv0_223", A = "ds-drawer_content--no-footer_4nbv0_237", V = "ds-drawer_footer--scrollable_4nbv0_244", o = {

package/chunks/Fieldset.Bk8W5h13.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs as d, jsx as r, Fragment as M } from "react/jsx-runtime";
+import { c as m } from "./index.DL9mof6u.js";
+import "react";
+import { Asterisk as S } from "../asterisk.B2ih8VwF.js";
+import { DSHeading as P } from "../heading.DHLpT4dc.js";
+import { D as x } from "./Popover.C9tT8xkE.js";
+import { D as E } from "./SystemFeedback.CjlARKki.js";
+import { g as y } from "./helpers.CexwVao7.js";
+import "./index.D-sRdssb.js";
+import '../assets/Fieldset.Oqu7pOBv.css';const q = "ds-fieldset_root_1rlhb_1", A = "ds-fieldset_child-wrapper_1rlhb_98", T = "ds-fieldset_legend-wrapper_1rlhb_105", U = "ds-fieldset_legend_1rlhb_105", z = "ds-fieldset_legend--utility--m_1rlhb_116", B = "ds-fieldset_description_1rlhb_128", C = "ds-fieldset_description--small_1rlhb_142", I = "ds-fieldset_system-feedback_1rlhb_146", e = {
+  root: q,
+  childWrapper: A,
+  legendWrapper: T,
+  legend: U,
+  legendUtilityM: z,
+  description: B,
+  descriptionSmall: C,
+  systemFeedback: I
+}, O = ({
+  description: a,
+  id: s,
+  legend: n,
+  systemFeedback: t
+}) => {
+  if (!s && (a || t))
+    throw new Error(y("DSFieldset", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSFieldset component.'));
+  if (!n)
+    throw new Error(y("DSFieldset", "The legend prop is required. Please add the legend prop to the DSFieldset component."));
+}, X = ({
+  children: a,
+  legend: s,
+  className: n,
+  description: t,
+  disabled: u = !1,
+  id: c,
+  invalid: p = !1,
+  popoverContent: h,
+  popoverInfoButtonProps: F,
+  required: f = !1,
+  systemFeedback: i,
+  ...N
+}) => {
+  process.env.NODE_ENV !== "production" && O({
+    description: t,
+    id: c,
+    legend: s,
+    systemFeedback: i
+  });
+  let l, g, _;
+  const o = typeof s == "object" && s !== void 0;
+  o && ({
+    headingSize: l,
+    headingTag: g,
+    headingText: _
+  } = s);
+  const b = `${c}-feedback`, D = `${c}-description`, v = [p && i && b, t && D].filter(Boolean).join(" ") || void 0, w = !o || l === "small" || l === "small-uppercase", k = m(e.root, n), W = m(e.legend, {
+    [e.legendUtilityM]: !o
+  }), j = m(e.description, {
+    [e.descriptionSmall]: w
+  });
+  return /* @__PURE__ */ d("fieldset", { className: k, disabled: u, ...N, "aria-invalid": p, "aria-describedby": v, children: [
+    /* @__PURE__ */ d("legend", { className: W, children: [
+      /* @__PURE__ */ r("span", { className: e.legendWrapper, children: o ? /* @__PURE__ */ d(P, { tag: g, size: l, children: [
+        _,
+        f && /* @__PURE__ */ r(S, {})
+      ] }) : /* @__PURE__ */ d(M, { children: [
+        s,
+        f && /* @__PURE__ */ r(S, {})
+      ] }) }),
+      h && /* @__PURE__ */ r(x, { placement: "top", defaultAnchorButtonProps: F, children: h })
+    ] }),
+    t && /* @__PURE__ */ r("span", { id: D, className: j, children: t }),
+    p && i && /* @__PURE__ */ r(E, { id: b, variant: "error", message: i, className: e.systemFeedback }),
+    /* @__PURE__ */ r("div", { className: e.childWrapper, children: a })
+  ] });
+};
+export {
+  X as D,
+  O as v
+};

package/chunks/{Header.7TQL_J9t.js → Header.18sOO0Gf.js}

@@ -6,7 +6,7 @@ import { useState as O, useEffect as ae, useContext as re, createContext as xe,
 import { g as Y, c as F, p as he } from "./helpers.CexwVao7.js";
 import { u as De } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
 import { DSLogo as Pe } from "../logo.DprmD8HU.js";
-import { Logo100Years as Te } from "../logo100years.B4d_DIiB.js";
+import { Logo100Years as Te } from "../logo100years.DDzCrczW.js";
 import '../assets/Header.CNqtWTxB.css';const Ee = (s) => {
   const e = T.c(3), t = 0, [n, r] = O("down");
   let a, d;

package/chunks/{Input.utils.Dkw7gRrr.js → Input.utils.CL1u4Ctq.js}

@@ -2,16 +2,18 @@
 import { g as t } from "./helpers.CexwVao7.js";
 import "react";
 import "./index.D-sRdssb.js";
-const i = 8, r = 5, w = ["medium", "small"], m = ["color", "date", "datetime-local", "email", "month", "number", "range", "tel", "text", "time", "url"], u = ["week", "file", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"], b = ({
-  id: e,
+const r = 8, d = 5, I = ["medium", "small"], u = ["color", "date", "datetime-local", "email", "month", "number", "range", "tel", "text", "time", "url"], l = ["week", "file", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"], T = ({
+  hideLabel: e,
+  id: o,
   label: a,
-  prefix: o,
-  suffix: s,
-  leadingIconName: d,
-  leadingIconSource: c,
+  prefix: s,
+  popoverContent: c,
+  suffix: i,
+  leadingIconName: m,
+  leadingIconSource: p,
   actionButtonProps: n
 }) => {
-  if (!e)
+  if (!o)
     throw new Error(t("DSInput", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInput component.'));
   if (!a)
     throw new Error(t("DSInput", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInput component. If you don't want to display a label, set hideLabel={true}.`));
@@ -19,13 +21,13 @@ const i = 8, r = 5, w = ["medium", "small"], m = ["color", "date", "datetime-loc
     throw new Error(t("DSInput", "The action button needs to have a label for a11y reasons. Please add a label to the actionButtonProps."));
   if (n && !n?.iconName && !n?.iconSource)
     throw new Error(t("DSInput", "The action button needs to have an iconName or iconSource. Please add an iconName or iconSource to the actionButtonProps."));
-  o && o.length > i && console.warn(t("DSInput", `Prefix length must not exceed ${i} characters.`)), s && s.length > r && console.warn(t("DSInput", `Suffix length must not exceed ${r} characters.`)), o && (d || c) && console.warn(t("DSInput", "Prefix and a leading Icon cannot be used at the same time.")), s && (n?.iconName || n?.iconSource) && console.warn(t("DSInput", "Suffix and an action button cannot be used at the same time."));
-}, I = (e, a) => {
-  if (!m.includes(e) && !u.includes(e))
+  s && s.length > r && console.warn(t("DSInput", `Prefix length must not exceed ${r} characters.`)), i && i.length > d && console.warn(t("DSInput", `Suffix length must not exceed ${d} characters.`)), s && (m || p) && console.warn(t("DSInput", "Prefix and a leading Icon cannot be used at the same time.")), i && (n?.iconName || n?.iconSource) && console.warn(t("DSInput", "Suffix and an action button cannot be used at the same time.")), e && c && console.warn(t("DSInput", "Using a popover when hideLabel is set to true is not supported."));
+}, D = (e, o) => {
+  if (!u.includes(e) && !l.includes(e))
     throw new Error(t("DSInput", `The type "${e}" is not supported by the DSInput component.`));
-  if (a === "off" && e === "number")
+  if (o === "off" && e === "number")
     return;
-  const o = {
+  const a = {
     number: "Type number is not recommended. Use type text with inputmode numeric/decimal or DSInputNumber component instead.",
     button: "Type button is not recommended. Use DSButton component instead.",
     file: "Type file is not recommended. Use DSInputFile component instead.",
@@ -40,18 +42,18 @@ const i = 8, r = 5, w = ["medium", "small"], m = ["color", "date", "datetime-loc
     week: "Type week is not recommended. Mobile safari does not support type week.",
     hidden: 'Type hidden is not supported by DSInput component. Use a default <input type="hidden" /> element instead.'
   };
-  o[e] && console.warn(t("DSInput", o[e]));
-}, p = () => "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), T = (e, a) => p() && (e || a), D = (e) => e === "date" || e === "datetime-local" || e === "month", y = (e) => e === "time";
+  a[e] && console.warn(t("DSInput", a[e]));
+}, h = () => "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), f = (e, o) => h() && (e || o), y = (e) => e === "date" || e === "datetime-local" || e === "month", U = (e) => e === "time";
 export {
-  w as I,
-  i as M,
-  m as S,
-  u as U,
-  r as a,
-  I as b,
-  y as c,
-  p as h,
-  D as i,
-  T as s,
-  b as v
+  I,
+  r as M,
+  u as S,
+  l as U,
+  d as a,
+  D as b,
+  U as c,
+  h,
+  y as i,
+  f as s,
+  T as v
 };

package/chunks/InputFile.CjK3gEst.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsxs as D, jsx as r, Fragment as _e } from "react/jsx-runtime";
+import { c as f } from "./index.DL9mof6u.js";
+import { forwardRef as he, useState as Q, useRef as Ie, useCallback as ve } from "react";
+import { t as we } from "./translate.nuU7uChI.js";
+import { u as P } from "./useBreakpoint.1txsny17.js";
+import "./index.D-sRdssb.js";
+import { g as Se } from "./AriaLiveRegions.utils.CybNIBSa.js";
+import { Asterisk as Fe } from "../asterisk.B2ih8VwF.js";
+import { D as ze } from "./Button.CQlIao-Z.js";
+import { FileList as Ne } from "../filelist.Bcu6TZRj.js";
+import { D as Le } from "./Icon.CDLyB7Pv.js";
+import { D as ke } from "./Popover.C9tT8xkE.js";
+import { D as ye } from "./SystemFeedback.CjlARKki.js";
+import { g as _ } from "./helpers.CexwVao7.js";
+import '../assets/InputFile.D7Ihod7B.css';const Be = "ds-input-file_root_ad2pg_1", Te = "ds-input-file_browse-button--is-dragging-filled_ad2pg_1", Ae = "ds-input-file_browse-button--is-dragging_ad2pg_1", Pe = "ds-input-file_hint_ad2pg_14", $e = "ds-input-file_label-wrapper_ad2pg_14", Ce = "ds-input-file_label_ad2pg_14", Re = "ds-input-file_label--disabled_ad2pg_33", Ee = "ds-input-file_label-wrapper--hidden_ad2pg_45", We = "ds-input-file_feedback_ad2pg_73", qe = "ds-input-file_dropzone_ad2pg_77", xe = "ds-input-file_dropzone--disabled_ad2pg_83", He = "ds-input-file_dropzone--invalid_ad2pg_97", Oe = "ds-input-file_dropzone--is-dragging_ad2pg_100", Ve = "ds-input-file_hint-drop-zone_ad2pg_103", je = "ds-input-file_upload-icon_ad2pg_106", Me = "ds-input-file_browse-button-dropzone--is-dragging_ad2pg_109", Ue = "ds-input-file_instructions_ad2pg_112", Ze = "ds-input-file_input_ad2pg_149", Ge = "ds-input-file_required-sr-info_ad2pg_153", t = {
+  root: Be,
+  browseButtonIsDraggingFilled: Te,
+  browseButtonIsDragging: Ae,
+  hint: Pe,
+  labelWrapper: $e,
+  label: Ce,
+  labelDisabled: Re,
+  labelWrapperHidden: Ee,
+  feedback: We,
+  dropzone: qe,
+  dropzoneDisabled: xe,
+  dropzoneInvalid: He,
+  dropzoneIsDragging: Oe,
+  hintDropZone: Ve,
+  uploadIcon: je,
+  browseButtonDropzoneIsDragging: Me,
+  instructions: Ue,
+  input: Ze,
+  requiredSrInfo: Ge
+}, Je = {
+  dragAndDropInstructions: "Drag and drop files here or",
+  feedbackFileSize: "File too large. Maximum file size is",
+  feedbackFileType: "File type not allowed",
+  // {0} is the file name
+  fileListRemoveSelectionButtonLabel: "Remove {0} from selected files",
+  fileListPreviewAltText: "Preview of",
+  filesSelectedHint: "The following files are selected",
+  required: "required",
+  togglePopover: "Toggle popover"
+}, Ke = {
+  dragAndDropInstructions: "Dateien hier hin ziehen oder",
+  feedbackFileSize: "Datei zu groß. Maximale Dateigröße ist",
+  feedbackFileType: "Dateityp nicht zugelassen",
+  // {0} is the file name
+  fileListRemoveSelectionButtonLabel: "Datei {0} aus der Auswahl entfernen",
+  fileListPreviewAltText: "Vorschau von",
+  filesSelectedHint: "Die folgenden Dateien sind ausgewählt",
+  required: "erforderlich",
+  togglePopover: "Popover öffnen/schließen"
+}, X = {
+  en: Je,
+  de: Ke
+}, Qe = (a, d) => {
+  const o = d.split(",").map((l) => l.trim().toLowerCase()).filter(Boolean), g = a.name.toLowerCase(), n = a.type.toLowerCase();
+  return o.some((l) => {
+    if (l.startsWith("."))
+      return g.endsWith(l);
+    if (l.endsWith("/*")) {
+      const [h] = n.split("/");
+      return h === l.slice(0, -2);
+    }
+    return n === l;
+  });
+}, Xe = ({
+  id: a,
+  label: d,
+  inputFileButtonProps: o,
+  hideLabel: g,
+  popoverContent: n
+}) => {
+  if (!a)
+    throw new Error(_("DSInputFile", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputFile component.'));
+  if (!d)
+    throw new Error(_("DSInputFile", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputFile component. If you don't want to display a label, set hideLabel={true}.`));
+  if (o && o.label?.trim() === "")
+    throw new Error(_("DSInputFile", "The input file button needs to have a label for a11y reasons. Please add a label to the inputFileButtonProps."));
+  if (o && o.variant && o.variant !== "outline" && o.variant !== "filled")
+    throw new Error(_("DSInputFile", "The inputFileButtonProps variant value can only be 'outline' for DSInputFile components inside forms or 'filled' for standalone DSInputFile components."));
+  g && n && console.warn(_("DSInputFile", "Using a popover when hideLabel is set to true is not supported."));
+}, Ye = he(({
+  id: a,
+  label: d,
+  accept: o,
+  className: g,
+  disabled: n = !1,
+  fileListItemRemoveButtonProps: l,
+  hideLabel: h = !1,
+  hint: b,
+  inputFileButtonProps: $,
+  invalid: I = !1,
+  isHintOutsideDropzone: Y = {
+    base: !0,
+    m: !1
+  },
+  lang: S = "en",
+  maxSizeInMb: F = 7,
+  multiple: m = !1,
+  popoverContent: z,
+  popoverInfoButtonProps: C,
+  required: R = !1,
+  showFileList: ee = !0,
+  showDropzone: p = !1,
+  systemFeedback: N,
+  translations: L,
+  onFilesSelect: E,
+  ...te
+}, v) => {
+  const c = we(L || X[S]);
+  process.env.NODE_ENV !== "production" && Xe({
+    id: a,
+    label: d,
+    inputFileButtonProps: $,
+    hideLabel: P(h),
+    popoverContent: z
+  });
+  const {
+    label: ne = S === "en" ? `Choose File${m ? "s" : ""}` : `Datei${m ? "en" : ""} auswählen`,
+    variant: k = "outline",
+    ...oe
+  } = $ || {}, ie = {
+    ...C,
+    label: L && L.togglePopover || C?.label || X[S].togglePopover
+  }, [W, q] = Q([]), w = Ie(null), [u, y] = Q(!1), re = F * 1024 * 1024, B = `${a}-label`, x = `${a}-feedback`, T = `${a}-hint`, H = b ? ` ${T}` : "", O = P(h), V = P(Y), ae = f(t.root, g), se = f(t.dropzone, {
+    [t.dropzoneDisabled]: n,
+    [t.dropzoneInvalid]: I,
+    [t.dropzoneIsDragging]: u
+  }), le = f(t.label, {
+    [t.labelDisabled]: n
+  }), de = f(t.labelWrapper, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelWrapperHidden]: O
+  }), pe = f(t.browseButton, {
+    [t.browseButtonIsDragging]: u && k === "outline",
+    [t.browseButtonIsDraggingFilled]: u && k === "filled"
+  }), ce = f(t.browseButtonDropzone, {
+    [t.browseButtonDropzoneIsDragging]: u
+  }), ue = [I && N && x].filter(Boolean).join(" ") || void 0, fe = (e) => {
+    w.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+  }, j = (e) => {
+    if (!e)
+      return;
+    const s = [];
+    for (const i of e)
+      if (o && !Qe(i, o) && (i.feedback = `${c("feedbackFileType")}: ${i.type}.`), i.size > re && (i.feedback = `${c("feedbackFileSize")} ${F} MB.`), s.push(i), !m && s.length > 0)
+        break;
+    s.length > 0 && (q(() => {
+      const i = [...s], K = i.map(({
+        name: A,
+        feedback: De = ""
+      }) => `${A} ${De}`).join(", ");
+      return setTimeout(() => {
+        me(`${c("filesSelectedHint")}: ${K}.`);
+      }, 1e3), i;
+    }), E?.(s));
+  }, M = (e) => {
+    n || (w.current?.click(), e.stopPropagation());
+  }, U = (e) => {
+    e.preventDefault(), u || y(!0);
+  }, Z = (e) => {
+    e.preventDefault(), u && y(!1);
+  }, G = ve((e) => {
+    e.preventDefault(), !n && (y(!1), j(e.dataTransfer.files));
+  }, [m, o, F, n]), ge = (e) => {
+    j(e.target.files), w?.current && (w.current.value = "");
+  }, be = (e) => {
+    q((s) => {
+      const i = s.filter((K, A) => A !== e);
+      return E?.(i), i;
+    });
+  }, me = (e) => {
+    const s = Se();
+    s && (s.innerText = e, setTimeout(() => {
+      s.innerText = "";
+    }, 350));
+  }, J = () => /* @__PURE__ */ r(ze, { ...oe, className: p ? ce : pe, type: "button", variant: k, size: p ? "small" : "medium", disabled: n, iconName: p ? void 0 : "upload", onClick: M, "aria-describedby": ue, "aria-invalid": I, children: ne });
+  return /* @__PURE__ */ D("div", { className: ae, children: [
+    /* @__PURE__ */ D("div", { className: de, children: [
+      /* @__PURE__ */ D("label", { className: le, id: B, htmlFor: a, children: [
+        d,
+        R && /* @__PURE__ */ D(_e, { children: [
+          /* @__PURE__ */ r(Fe, {}),
+          /* @__PURE__ */ r("span", { className: t.requiredSrInfo, children: c("required") })
+        ] })
+      ] }),
+      z && !O && /* @__PURE__ */ r(ke, { placement: "top", defaultAnchorButtonProps: ie, children: z })
+    ] }),
+    b && (V || !p) && /* @__PURE__ */ r("div", { className: t.hint, id: T, children: b }),
+    !p && /* @__PURE__ */ r(
+      "div",
+      {
+        onDragOver: U,
+        onDragLeave: Z,
+        onDrop: G,
+        "aria-labelledby": `${B}${H}`,
+        "aria-disabled": n,
+        children: J()
+      }
+    ),
+    p && /* @__PURE__ */ D(
+      "div",
+      {
+        className: se,
+        onClick: (e) => M(e),
+        onDragOver: U,
+        onDragLeave: Z,
+        onDrop: G,
+        "aria-labelledby": `${B}${H}`,
+        "aria-disabled": n,
+        children: [
+          /* @__PURE__ */ r(Le, { name: "upload", className: t.uploadIcon, size: "x-large" }),
+          /* @__PURE__ */ r("p", { id: "file-upload-instructions", className: t.instructions, children: c("dragAndDropInstructions") }),
+          J(),
+          b && !V && /* @__PURE__ */ r("div", { className: t.hintDropZone, id: T, children: b })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r("input", { ...te, type: "file", className: t.input, id: a, ref: fe, accept: o, multiple: m, "aria-hidden": "true", required: R, disabled: n, onChange: ge }),
+    I && N && /* @__PURE__ */ r(ye, { className: t.feedback, message: N, variant: "error", id: x }),
+    W.length > 0 && ee && /* @__PURE__ */ r(Ne, { files: W, onRemoveFile: be, fileListItemRemoveButtonProps: l, t: c })
+  ] });
+});
+Ye.displayName = "DSInputFile";
+export {
+  Ye as D,
+  Je as a,
+  Ke as b,
+  X as c,
+  Qe as f,
+  Xe as v
+};

package/chunks/InputNumber.wfDjnz58.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import { c as r } from "./index.DL9mof6u.js";
+import { forwardRef as Be, useState as m, useRef as E, useEffect as W } from "react";
+import { h as Le } from "./has-window.ut_-aShB.js";
+import { u as J } from "./useBreakpoint.1txsny17.js";
+import { u as K } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import "./index.D-sRdssb.js";
+import { Asterisk as Re } from "../asterisk.B2ih8VwF.js";
+import { D as Q } from "./Button.CQlIao-Z.js";
+import { M as k, a as P } from "./Input.utils.CL1u4Ctq.js";
+import { D as Ee } from "./Popover.C9tT8xkE.js";
+import { D as We } from "./SystemFeedback.CjlARKki.js";
+import { g as f } from "./helpers.CexwVao7.js";
+import '../assets/InputNumber.z_UqRYdv.css';const ke = "ds-input-number_input_1nvt0_1", Pe = "ds-input-number_input--small_1nvt0_9", Ce = "ds-input-number_input--invalid_1nvt0_121", Ve = "ds-input-number_input--has-affix_1nvt0_197", $e = "ds-input-number_input--is-ready_1nvt0_211", He = "ds-input-number_root_1nvt0_222", Fe = "ds-input-number_hint_1nvt0_222", Te = "ds-input-number_label-wrapper_1nvt0_222", Me = "ds-input-number_wrapper_1nvt0_226", Xe = "ds-input-number_affix_1nvt0_232", je = "ds-input-number_affix--small_1nvt0_253", qe = "ds-input-number_prefix_1nvt0_266", Ue = "ds-input-number_suffix_1nvt0_272", Ge = "ds-input-number_affix--disabled_1nvt0_278", Oe = "ds-input-number_affix--readonly_1nvt0_289", Je = "ds-input-number_action-button_1nvt0_325", Ke = "ds-input-number_label_1nvt0_222", Qe = "ds-input-number_label--disabled_1nvt0_344", Ye = "ds-input-number_label-wrapper--hidden_1nvt0_356", Ze = "ds-input-number_feedback_1nvt0_384", ze = "ds-input-number_second-action-button_1nvt0_397", et = "ds-input-number_value-announcer_1nvt0_401", e = {
+  input: ke,
+  inputSmall: Pe,
+  inputInvalid: Ce,
+  inputHasAffix: Ve,
+  inputIsReady: $e,
+  root: He,
+  hint: Fe,
+  labelWrapper: Te,
+  wrapper: Me,
+  affix: Xe,
+  affixSmall: je,
+  prefix: qe,
+  suffix: Ue,
+  affixDisabled: Ge,
+  affixReadonly: Oe,
+  actionButton: Je,
+  label: Ke,
+  labelDisabled: Qe,
+  labelWrapperHidden: Ye,
+  feedback: Ze,
+  secondActionButton: ze,
+  valueAnnouncer: et
+}, Y = (n) => n != null && n !== "", tt = ({
+  id: n,
+  label: b,
+  prefix: _,
+  suffix: h,
+  hideLabel: s,
+  popoverContent: x
+}) => {
+  if (!n)
+    throw new Error(f("DSInputNumber", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputNumber component.'));
+  if (!b)
+    throw new Error(f("DSInputNumber", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputNumber component. If you don't want to display a label, set hideLabel={true}.`));
+  _ && _.length > k && console.warn(f("DSInputNumber", `Prefix length must not exceed ${k} characters.`)), h && h.length > P && console.warn(f("DSInputNumber", `Suffix length must not exceed ${P} characters.`)), s && x && console.warn(f("DSInputNumber", "Using a popover when hideLabel is set to true is not supported."));
+}, nt = Be(({
+  id: n,
+  label: b,
+  announcementText: _ = "Value changed to",
+  className: h,
+  disabled: s = !1,
+  decreaseAmountButtonProps: x,
+  hint: y,
+  hideLabel: C = !1,
+  invalid: v = !1,
+  increaseAmountButtonProps: Z,
+  prefix: u,
+  max: V = 100,
+  min: $ = 0,
+  popoverContent: D,
+  popoverInfoButtonProps: z,
+  readonly: l = !1,
+  required: H = !1,
+  size: i = "medium",
+  step: ee = 1,
+  suffix: c,
+  systemFeedback: A,
+  value: S,
+  onChange: F,
+  ...te
+}, I) => {
+  process.env.NODE_ENV !== "production" && tt({
+    id: n,
+    label: b,
+    prefix: u,
+    suffix: c,
+    hideLabel: J(C),
+    popoverContent: D
+  });
+  const {
+    label: ne = "Decrease",
+    tooltip: ae,
+    ...se
+  } = x || {}, {
+    label: oe = "Increase",
+    tooltip: re,
+    ...ie
+  } = Z || {}, [ue, le] = m(!1), [p, g] = m(S), [w, T] = m(""), [ce, pe] = m(!1), [de, me] = m({}), o = E(null), fe = (t) => {
+    o.current = t, typeof I == "function" ? I(t) : I && (I.current = t);
+  }, be = u?.substring(0, k), B = E(null), _e = c?.substring(0, P), L = E(null), M = J(C);
+  W(() => {
+    g(S);
+  }, [S]), W(() => {
+    if (w) {
+      const t = setTimeout(() => {
+        T("");
+      }, 3e3);
+      return () => clearTimeout(t);
+    }
+  }, [w]), W(() => {
+    const t = (d) => {
+      d.preventDefault();
+    };
+    return o.current?.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
+    }), () => {
+      o.current?.removeEventListener("wheel", t);
+    };
+  }, []), K(() => {
+    const t = i === "medium" ? 16 : 8, d = {};
+    if (B.current) {
+      const R = B.current.offsetWidth;
+      d.paddingInlineStart = t + R + "px";
+    }
+    if (L.current) {
+      const R = L.current.offsetWidth;
+      d.paddingInlineEnd = t + R + "px";
+    }
+    me(d), le(!0);
+  }, [u, c, i, ce]), K(() => {
+    Le && (async () => {
+      "fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), pe(!0));
+    })();
+  }, []);
+  const X = r(e.affix, {
+    [e.affixSmall]: i === "small",
+    [e.affixDisabled]: s,
+    [e.affixReadonly]: l
+  }), j = `${n}-label`, q = `${n}-feedback`, U = `${n}-hint`, G = `${n}-value-announcer`, he = y ? ` ${U}` : "", ve = r(e.root, h), Ie = r(e.input, {
+    // small input
+    [e.inputSmall]: i === "small",
+    // invalid state
+    [e.inputInvalid]: v,
+    // prefix/suffix
+    [e.inputHasAffix]: u || c,
+    [e.inputIsReady]: ue
+  }), Ne = r(e.label, {
+    [e.labelDisabled]: s
+  }), xe = r(e.labelWrapper, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelWrapperHidden]: M
+  }), ye = r(e.secondActionButton, {
+    [e.secondActionButtonSmall]: i === "small"
+  }), De = r(e.actionButton, {
+    [e.actionButtonSmall]: i === "small"
+  }), Ae = () => {
+    const t = [G];
+    return v && A && t.push(q), t.join(" ");
+  }, O = () => {
+    if (o.current) {
+      g(o.current.value);
+      const t = new Event("change", {
+        bubbles: !0
+      });
+      o.current?.dispatchEvent(t), T(`${_} ${o.current.value}`);
+    }
+  }, Se = () => {
+    o.current?.stepDown(), O();
+  }, ge = () => {
+    o.current?.stepUp(), O();
+  }, we = (t) => {
+    g(t.target.value), F && F(t);
+  };
+  return /* @__PURE__ */ N("div", { className: ve, children: [
+    /* @__PURE__ */ N("div", { className: xe, children: [
+      /* @__PURE__ */ N("label", { className: Ne, id: j, htmlFor: n, children: [
+        b,
+        H && /* @__PURE__ */ a(Re, {})
+      ] }),
+      D && !M && /* @__PURE__ */ a(Ee, { placement: "top", defaultAnchorButtonProps: z, children: D })
+    ] }),
+    y && /* @__PURE__ */ a("div", { className: e.hint, id: U, children: y }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: e.valueAnnouncer,
+        id: G,
+        children: w
+      }
+    ),
+    /* @__PURE__ */ N("div", { className: e.wrapper, children: [
+      u && /* @__PURE__ */ a(
+        "span",
+        {
+          className: r(X, e.prefix),
+          ref: B,
+          "aria-disabled": s,
+          children: be
+        }
+      ),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          className: Ie,
+          id: n,
+          ...te,
+          style: de,
+          ref: fe,
+          "aria-labelledby": `${j}${he}`,
+          "aria-describedby": Ae(),
+          "aria-invalid": v,
+          "aria-disabled": l,
+          disabled: s,
+          min: $,
+          max: V,
+          readOnly: l,
+          required: H,
+          step: ee,
+          type: "number",
+          value: p,
+          onChange: we
+        }
+      ),
+      c && /* @__PURE__ */ a(
+        "span",
+        {
+          className: r(X, e.suffix),
+          ref: L,
+          "aria-disabled": s,
+          children: _e
+        }
+      ),
+      /* @__PURE__ */ a(Q, { ...se, hideLabel: !0, theme: "light", iconName: "minus", variant: "filled", className: ye, size: i, onClick: Se, tooltip: ae, disabled: s || l || Y(p) && Number(p) <= Number($), type: "button", children: ne }),
+      /* @__PURE__ */ a(Q, { ...ie, hideLabel: !0, theme: "light", iconName: "plus", variant: "filled", tooltip: re, className: De, size: i, onClick: ge, disabled: s || l || Y(p) && Number(p) >= Number(V), type: "button", children: oe })
+    ] }),
+    v && A && /* @__PURE__ */ a(We, { className: e.feedback, message: A, variant: "error", id: q })
+  ] });
+});
+nt.displayName = "DSInputNumber";
+export {
+  nt as D,
+  Y as i,
+  tt as v
+};