@stihl-design-system/components 1.0.0-RC.32 → 1.0.0-RC.35

package/chunks/InputFile.Bki3bs3U.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.Cn5yg7dG.js";
+import { FileList as Ne } from "../filelist.BG6SGVJ8.js";
+import { D as Le } from "./Icon.CDLyB7Pv.js";
+import { D as ke } from "./Popover.D7McfVaH.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.B43cqBH0.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.Cn5yg7dG.js";
+import { M as k, a as P } from "./Input.utils.CL1u4Ctq.js";
+import { D as Ee } from "./Popover.D7McfVaH.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
+};

package/chunks/InputPassword.DcdMjsXr.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c as e } from "./index.DL9mof6u.js";
+import { forwardRef as F, useState as M, useRef as U } from "react";
+import { u as I } from "./useBreakpoint.1txsny17.js";
+import { Asterisk as G } from "../asterisk.B2ih8VwF.js";
+import { D as J } from "./Button.Cn5yg7dG.js";
+import { D as K } from "./Popover.D7McfVaH.js";
+import { D as Q } from "./SystemFeedback.CjlARKki.js";
+import { g as f } from "./helpers.CexwVao7.js";
+import "./index.D-sRdssb.js";
+import '../assets/InputPassword.DZENjxJ9.css';const X = "ds-input-password_input_l2ovg_1", Y = "ds-input-password_input--small_l2ovg_9", Z = "ds-input-password_input--invalid_l2ovg_121", z = "ds-input-password_input--has-action-button_l2ovg_182", ss = "ds-input-password_root_l2ovg_218", as = "ds-input-password_hint_l2ovg_218", ts = "ds-input-password_label-wrapper_l2ovg_218", os = "ds-input-password_wrapper_l2ovg_222", es = "ds-input-password_action-button_l2ovg_228", ns = "ds-input-password_label_l2ovg_218", rs = "ds-input-password_label--disabled_l2ovg_247", ls = "ds-input-password_label-wrapper--hidden_l2ovg_259", is = "ds-input-password_feedback_l2ovg_287", s = {
+  input: X,
+  inputSmall: Y,
+  inputInvalid: Z,
+  inputHasActionButton: z,
+  root: ss,
+  hint: as,
+  labelWrapper: ts,
+  wrapper: os,
+  actionButton: es,
+  label: ns,
+  labelDisabled: rs,
+  labelWrapperHidden: ls,
+  feedback: is
+}, ps = ({
+  id: a,
+  label: n,
+  hideLabel: p,
+  popoverContent: d
+}) => {
+  if (!a)
+    throw new Error(f("DSInputPassword", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputPassword component.'));
+  if (!n)
+    throw new Error(f("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}.`));
+  p && d && console.warn(f("DSInputPassword", "Using a popover when hideLabel is set to true is not supported."));
+}, ds = F(({
+  id: a,
+  label: n,
+  autoComplete: p = "new-password",
+  className: d,
+  disabled: c = !1,
+  hint: u,
+  hideLabel: h = !1,
+  invalid: r = !1,
+  popoverContent: w,
+  popoverInfoButtonProps: B,
+  readonly: v = !1,
+  required: g = !1,
+  togglePasswordVisibilityButtonProps: N,
+  size: b = "medium",
+  systemFeedback: m,
+  ...k
+}, l) => {
+  process.env.NODE_ENV !== "production" && ps({
+    id: a,
+    label: n,
+    hideLabel: I(h),
+    popoverContent: w
+  });
+  const {
+    hidePasswordText: H = "Hide password",
+    showPasswordText: A = "Show password",
+    ...W
+  } = N || {}, [_, x] = M(!1), P = `${a}-label`, D = `${a}-feedback`, S = `${a}-hint`, L = u ? ` ${S}` : "", $ = [r && m && D].filter(Boolean).join(" ") || void 0, y = I(h), C = e(s.root, d), E = e(s.input, {
+    // small input
+    [s.inputSmall]: b === "small",
+    // invalid state
+    [s.inputInvalid]: r,
+    // action button - input password always has an action button
+    [s.inputHasActionButton]: !0
+  }), R = e(s.label, {
+    [s.labelDisabled]: c
+  }), T = e(s.labelWrapper, {
+    // hide label only visually to keep them available for assistive technologies
+    [s.labelWrapperHidden]: y
+  }), V = e(s.actionButton, {
+    [s.actionButtonSmall]: b === "small"
+  }), j = U(null), q = (o) => {
+    j.current = o, typeof l == "function" ? l(o) : l && (l.current = o);
+  }, O = () => {
+    x((o) => !o);
+  };
+  return /* @__PURE__ */ i("div", { className: C, children: [
+    /* @__PURE__ */ i("div", { className: T, children: [
+      /* @__PURE__ */ i("label", { className: R, id: P, htmlFor: a, children: [
+        n,
+        g && /* @__PURE__ */ t(G, {})
+      ] }),
+      w && !y && /* @__PURE__ */ t(K, { placement: "top", defaultAnchorButtonProps: B, children: w })
+    ] }),
+    u && /* @__PURE__ */ t("div", { className: s.hint, id: S, children: u }),
+    /* @__PURE__ */ i("div", { className: s.wrapper, children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          className: E,
+          id: a,
+          ...k,
+          ref: q,
+          "aria-labelledby": `${P}${L}`,
+          "aria-describedby": $,
+          "aria-invalid": r,
+          "aria-disabled": v,
+          readOnly: v,
+          required: g,
+          disabled: c,
+          autoComplete: p,
+          type: _ ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ t(J, { ...W, hideLabel: !0, theme: "light", iconName: _ ? "eye-closed" : "eye", variant: "ghost", className: V, size: b, onClick: O, type: "button", disabled: c, children: _ ? H : A })
+    ] }),
+    r && m && /* @__PURE__ */ t(Q, { className: s.feedback, message: m, variant: "error", id: D })
+  ] });
+});
+ds.displayName = "DSInputPassword";
+export {
+  ds as D,
+  ps as v
+};