@stihl-design-system/components 1.0.0-RC.47 → 1.0.0-RC.48

package/chunks/InputFile.y71Cd5J9.js

@@ -0,0 +1,260 @@
+"use client";
+import { jsxs as I, Fragment as ve, jsx as i } from "react/jsx-runtime";
+import { c as p } from "./index.DQOqod3i.js";
+import { forwardRef as Se, useState as te, useRef as Fe, useCallback as we } from "react";
+import { f as ke } from "./AriaLiveRegions.utils.xoETe2Ps.js";
+import { Asterisk as ze } from "../asterisk.Dwtdwpkq.js";
+import { D as Ne } from "./Button.CCol--xy.js";
+import { D as Le } from "./Icon.DYtaQgbw.js";
+import { D as Be } from "./Popover.CxZZ_y1Z.js";
+import { D as Pe } from "./SystemFeedback.DhWcYjnu.js";
+import { FileList as Te } from "../filelist.GrEwoM1u.js";
+import { g as y } from "./helpers.CexwVao7.js";
+import { u as q } from "./useBreakpoint.1txsny17.js";
+import { t as Ce } from "./translate.DSb-TdWR.js";
+import '../assets/InputFile.CDtghZtl.css';const Ae = "ds-input-file_root_sryt8_1", $e = "ds-input-file_browse-button--is-dragging-filled_sryt8_1", Ue = "ds-input-file_browse-button--is-dragging_sryt8_1", We = "ds-input-file_hint_sryt8_14", qe = "ds-input-file_label-wrapper_sryt8_14", Re = "ds-input-file_label_sryt8_14", Ee = "ds-input-file_label--disabled_sryt8_33", xe = "ds-input-file_label--dark_sryt8_37", He = "ds-input-file_label-wrapper--hidden_sryt8_53", Me = "ds-input-file_hint--dark_sryt8_80", Oe = "ds-input-file_feedback_sryt8_84", Ve = "ds-input-file_dropzone_sryt8_88", je = "ds-input-file_dropzone--disabled_sryt8_94", Ze = "ds-input-file_dropzone--invalid_sryt8_108", Ge = "ds-input-file_dropzone--is-dragging_sryt8_111", Je = "ds-input-file_hint-drop-zone_sryt8_114", Ke = "ds-input-file_upload-icon_sryt8_117", Qe = "ds-input-file_browse-button-dropzone--is-dragging_sryt8_120", Xe = "ds-input-file_instructions_sryt8_123", Ye = "ds-input-file_root--dark_sryt8_161", et = "ds-input-file_dropzone--dark_sryt8_168", tt = "ds-input-file_input_sryt8_199", ot = "ds-input-file_required-sr-info_sryt8_203", e = {
+  root: Ae,
+  browseButtonIsDraggingFilled: $e,
+  browseButtonIsDragging: Ue,
+  hint: We,
+  labelWrapper: qe,
+  label: Re,
+  labelDisabled: Ee,
+  labelDark: xe,
+  labelWrapperHidden: He,
+  hintDark: Me,
+  feedback: Oe,
+  dropzone: Ve,
+  dropzoneDisabled: je,
+  dropzoneInvalid: Ze,
+  dropzoneIsDragging: Ge,
+  hintDropZone: Je,
+  uploadIcon: Ke,
+  browseButtonDropzoneIsDragging: Qe,
+  instructions: Xe,
+  rootDark: Ye,
+  dropzoneDark: et,
+  input: tt,
+  requiredSrInfo: ot
+}, nt = {
+  dragAndDropInstructions: "Drag and drop files here or",
+  feedbackFileSize: "File too large. Maximum file size is",
+  feedbackFileType: "File type not allowed",
+  fileListRemoveSelectionButtonLabel: "Remove {fileName} from selected files",
+  fileListCancelUploadButtonLabel: "Cancel upload of {fileName}",
+  fileListDeleteFileButtonLabel: "Delete file {fileName}",
+  fileListIndeterminate: "{fileName} is uploading",
+  fileListPreviewAltText: "Preview of {fileName}",
+  filesSelectedHint: "The following files are selected",
+  required: "required",
+  uploadStatus: "Upload status",
+  uploading: "Uploading...",
+  success: "Upload complete",
+  retry: "Retry upload",
+  togglePopover: "Toggle popover"
+}, it = {
+  dragAndDropInstructions: "Dateien hier hin ziehen oder",
+  feedbackFileSize: "Datei zu groß. Maximale Dateigröße ist",
+  feedbackFileType: "Dateityp nicht zugelassen",
+  fileListRemoveSelectionButtonLabel: "Datei {fileName} aus der Auswahl entfernen",
+  fileListCancelUploadButtonLabel: "Upload von {fileName} abbrechen",
+  fileListDeleteFileButtonLabel: "Datei {fileName} löschen",
+  fileListIndeterminate: "{fileName} wird hochgeladen",
+  fileListPreviewAltText: "Vorschau von {fileName}",
+  filesSelectedHint: "Die folgenden Dateien sind ausgewählt",
+  required: "erforderlich",
+  uploadStatus: "Upload-Status",
+  uploading: "Wird hochgeladen...",
+  success: "Upload abgeschlossen",
+  retry: "Upload erneut versuchen",
+  togglePopover: "Popover öffnen/schließen"
+}, z = {
+  en: nt,
+  de: it
+}, st = (c, d) => {
+  const n = d.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean), u = c.name.toLowerCase(), r = c.type.toLowerCase();
+  return n.some((a) => {
+    if (a.startsWith("."))
+      return u.endsWith(a);
+    if (a.endsWith("/*")) {
+      const [s] = r.split("/");
+      return s === a.slice(0, -2);
+    }
+    return r === a;
+  });
+}, rt = ({
+  id: c,
+  label: d,
+  inputFileButtonProps: n,
+  hideLabel: u,
+  popoverContent: r
+}) => {
+  if (!c)
+    throw new Error(y("DSInputFile", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputFile component.'));
+  if (!d)
+    throw new Error(y("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 (n && n.label?.trim() === "")
+    throw new Error(y("DSInputFile", "The input file button needs to have a label for a11y reasons. Please add a label to the inputFileButtonProps."));
+  if (n && n.variant && n.variant !== "outline" && n.variant !== "filled")
+    throw new Error(y("DSInputFile", "The inputFileButtonProps variant value can only be 'outline' for DSInputFile components inside forms or 'filled' for standalone DSInputFile components."));
+  u && r && console.warn(y("DSInputFile", "Using a popover when hideLabel is set to true is not supported."));
+}, at = Se((c, d) => {
+  const {
+    id: n,
+    label: u,
+    accept: r,
+    className: a,
+    disabled: s = !1,
+    files: f,
+    hideLabel: R = !1,
+    hint: h,
+    inputFileButtonProps: E,
+    invalid: v = !1,
+    isHintOutsideDropzone: oe = {
+      base: !0,
+      m: !1
+    },
+    lang: S = "en",
+    maxSizeInMb: N = 7,
+    multiple: _ = !1,
+    popoverContent: L,
+    popoverInfoButtonProps: x,
+    required: H = !1,
+    showFileList: ne = !0,
+    showDropzone: b = !1,
+    systemFeedback: B,
+    theme: g = "light",
+    translations: P,
+    onFilesSelect: T,
+    showProgress: ie,
+    ...se
+  } = c, m = Ce(P || z[S] || z.en, S);
+  process.env.NODE_ENV !== "production" && rt({
+    id: n,
+    label: u,
+    inputFileButtonProps: E,
+    hideLabel: q(R),
+    popoverContent: L
+  });
+  const {
+    label: re = S === "en" ? `Choose File${_ ? "s" : ""}` : `Datei${_ ? "en" : ""} auswählen`,
+    variant: C = "outline",
+    ...ae
+  } = E || {}, [M, O] = te([]), le = {
+    ...x,
+    label: P && P.togglePopover || x?.label || (z[S] || z.en).togglePopover
+  }, F = Fe(null), [D, A] = te(!1), de = N * 1024 * 1024, $ = `${n}-label`, V = `${n}-feedback`, U = `${n}-hint`, j = h ? ` ${U}` : "", Z = q(R), G = q(oe), w = g === "dark", pe = p(e.root, a, {
+    [e.rootDark]: w
+  }), ce = p(e.dropzone, {
+    [e.dropzoneDark]: w,
+    [e.dropzoneDisabled]: s,
+    [e.dropzoneInvalid]: v,
+    [e.dropzoneIsDragging]: D
+  }), ue = p(e.label, {
+    [e.labelDark]: w,
+    [e.labelDisabled]: s
+  }), fe = p(e.labelWrapper, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelWrapperHidden]: Z
+  }), be = p(e.browseButton, {
+    [e.browseButtonIsDragging]: D && C === "outline",
+    [e.browseButtonIsDraggingFilled]: D && C === "filled"
+  }), ge = p(e.browseButtonDropzone, {
+    [e.browseButtonDropzoneIsDragging]: D
+  }), me = [v && B && V].filter(Boolean).join(" ") || void 0, De = (t) => {
+    F.current = t, typeof d == "function" ? d(t) : d && (d.current = t);
+  }, J = (t) => {
+    if (!t)
+      return;
+    const l = [];
+    for (const o of t)
+      if (r && !st(o, r) && (o.feedback = `${m("feedbackFileType")}: ${o.type}.`, o.uploadStatus = "error"), o.size > de && (o.feedback = `${m("feedbackFileSize")} ${N} MB.`, o.uploadStatus = "error"), o.uploadPercent = "indeterminate", l.push(o), !_ && l.length > 0)
+        break;
+    l.length > 0 && !f && O(() => {
+      const o = [...l], k = o.map(({
+        name: W,
+        feedback: ye = ""
+      }) => `${W} ${ye}`).join(", ");
+      return setTimeout(() => {
+        Ie(`${m("filesSelectedHint")}: ${k}.`);
+      }, 1e3), o;
+    }), T?.(l);
+  }, K = (t) => {
+    s || (F.current?.click(), t.stopPropagation());
+  }, Q = (t) => {
+    t.preventDefault(), D || A(!0);
+  }, X = (t) => {
+    t.preventDefault(), D && A(!1);
+  }, Y = we((t) => {
+    t.preventDefault(), !s && (A(!1), J(t.dataTransfer.files));
+  }, [_, r, N, s]), he = (t) => {
+    J(t.target.files), F?.current && (F.current.value = "");
+  }, _e = (t) => {
+    if (f) {
+      const l = f.filter((o, k) => k !== t);
+      T?.(l);
+    } else
+      O((l) => {
+        const o = l.filter((k, W) => W !== t);
+        return T?.(o), o;
+      });
+  }, Ie = (t) => {
+    ke(t, "DSInputFile");
+  }, ee = () => /* @__PURE__ */ i(Ne, { ...ae, className: b ? ge : be, type: "button", variant: C, size: b ? "small" : "medium", disabled: s, iconName: b ? void 0 : "upload", onClick: K, "aria-describedby": me, "aria-invalid": v, theme: g, children: re });
+  return /* @__PURE__ */ I("div", { className: pe, children: [
+    /* @__PURE__ */ I("div", { className: fe, children: [
+      /* @__PURE__ */ I("label", { className: ue, id: $, htmlFor: n, children: [
+        u,
+        H && /* @__PURE__ */ I(ve, { children: [
+          /* @__PURE__ */ i(ze, {}),
+          /* @__PURE__ */ i("span", { className: e.requiredSrInfo, children: m("required") })
+        ] })
+      ] }),
+      L && !Z && /* @__PURE__ */ i(Be, { placement: "top", defaultAnchorButtonProps: le, theme: g, children: L })
+    ] }),
+    h && (G || !b) && /* @__PURE__ */ i("div", { className: p(e.hint, {
+      [e.hintDark]: w
+    }), id: U, children: h }),
+    !b && /* @__PURE__ */ i(
+      "div",
+      {
+        onDragOver: Q,
+        onDragLeave: X,
+        onDrop: Y,
+        "aria-labelledby": `${$}${j}`,
+        "aria-disabled": s,
+        children: ee()
+      }
+    ),
+    b && /* @__PURE__ */ I(
+      "div",
+      {
+        className: ce,
+        onClick: (t) => K(t),
+        onDragOver: Q,
+        onDragLeave: X,
+        onDrop: Y,
+        "aria-labelledby": `${$}${j}`,
+        "aria-disabled": s,
+        children: [
+          /* @__PURE__ */ i(Le, { name: "upload", className: e.uploadIcon, size: "x-large", theme: g }),
+          /* @__PURE__ */ i("p", { id: "file-upload-instructions", className: e.instructions, children: m("dragAndDropInstructions") }),
+          ee(),
+          h && !G && /* @__PURE__ */ i("div", { className: e.hintDropZone, id: U, children: h })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i("input", { ...se, type: "file", className: e.input, id: n, ref: De, accept: r, multiple: _, "aria-hidden": "true", required: H, disabled: s, onChange: he }),
+    v && B && /* @__PURE__ */ i(Pe, { className: e.feedback, message: B, variant: "error", id: V, theme: g }),
+    (f ? f.length > 0 : M.length > 0) && ne && /* @__PURE__ */ i(Te, { files: f || M, onRemoveFile: _e, t: m, showProgress: ie, theme: g })
+  ] });
+});
+at.displayName = "DSInputFile";
+export {
+  at as D,
+  z as a,
+  it as b,
+  nt as c,
+  st as f,
+  rt as v
+};

package/chunks/InputNumber.Fn2YbF_s.js

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

package/chunks/InputPassword.DtT9yrlx.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { c as o } from "./index.DQOqod3i.js";
+import { forwardRef as U, useState as G, useRef as J } from "react";
+import { u as B } from "./useBreakpoint.1txsny17.js";
+import { Asterisk as K } from "../asterisk.Dwtdwpkq.js";
+import { D as Q } from "./Button.CCol--xy.js";
+import { D as X } from "./Popover.CxZZ_y1Z.js";
+import { D as Y } from "./SystemFeedback.DhWcYjnu.js";
+import { g as h } from "./helpers.CexwVao7.js";
+import '../assets/InputPassword.BgZo-RUc.css';const Z = "ds-input-password_input_1gisg_1", ss = "ds-input-password_input--small_1gisg_9", as = "ds-input-password_input--invalid_1gisg_127", ts = "ds-input-password_input--dark_1gisg_145", es = "ds-input-password_input--has-action-button_1gisg_296", os = "ds-input-password_root_1gisg_338", is = "ds-input-password_hint_1gisg_338", ns = "ds-input-password_label-wrapper_1gisg_338", rs = "ds-input-password_wrapper_1gisg_342", ls = "ds-input-password_action-button_1gisg_348", ds = "ds-input-password_label_1gisg_338", ps = "ds-input-password_label--disabled_1gisg_367", us = "ds-input-password_label--dark_1gisg_371", cs = "ds-input-password_label-wrapper--hidden_1gisg_387", bs = "ds-input-password_hint--dark_1gisg_414", ws = "ds-input-password_feedback_1gisg_418", s = {
+  input: Z,
+  inputSmall: ss,
+  inputInvalid: as,
+  inputDark: ts,
+  inputHasActionButton: es,
+  root: os,
+  hint: is,
+  labelWrapper: ns,
+  wrapper: rs,
+  actionButton: ls,
+  label: ds,
+  labelDisabled: ps,
+  labelDark: us,
+  labelWrapperHidden: cs,
+  hintDark: bs,
+  feedback: ws
+}, _s = ({
+  id: p,
+  label: t,
+  hideLabel: a,
+  popoverContent: n
+}) => {
+  if (!p)
+    throw new Error(h("DSInputPassword", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputPassword component.'));
+  if (!t)
+    throw new Error(h("DSInputPassword", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`));
+  a && n && console.warn(h("DSInputPassword", "Using a popover when hideLabel is set to true is not supported."));
+}, ms = U((p, t) => {
+  const {
+    id: a,
+    label: n,
+    autoComplete: I = "new-password",
+    className: N,
+    disabled: u = !1,
+    hint: c,
+    hideLabel: f = !1,
+    invalid: r = !1,
+    popoverContent: b,
+    popoverInfoButtonProps: C,
+    readonly: D = !1,
+    required: k = !1,
+    togglePasswordVisibilityButtonProps: H,
+    size: w = "medium",
+    systemFeedback: _,
+    theme: l = "light",
+    ...L
+  } = p;
+  process.env.NODE_ENV !== "production" && _s({
+    id: a,
+    label: n,
+    hideLabel: B(f),
+    popoverContent: b
+  });
+  const {
+    hidePasswordText: A = "Hide password",
+    showPasswordText: W = "Show password",
+    ...x
+  } = H || {}, [m, $] = G(!1), P = `${a}-label`, y = `${a}-feedback`, v = `${a}-hint`, q = c ? ` ${v}` : "", T = [r && _ && y].filter(Boolean).join(" ") || void 0, S = B(f), V = o(s.root, N), g = l === "dark", E = o(s.input, {
+    [s.inputDark]: g,
+    // small input
+    [s.inputSmall]: w === "small",
+    // invalid state
+    [s.inputInvalid]: r,
+    // action button - input password always has an action button
+    [s.inputHasActionButton]: !0
+  }), F = o(s.label, {
+    [s.labelDark]: g,
+    [s.labelDisabled]: u
+  }), R = o(s.labelWrapper, {
+    // hide label only visually to keep them available for assistive technologies
+    [s.labelWrapperHidden]: S
+  }), j = o(s.actionButton, {
+    [s.actionButtonSmall]: w === "small"
+  }), O = J(null), z = (i) => {
+    O.current = i, typeof t == "function" ? t(i) : t && (t.current = i);
+  }, M = () => {
+    $((i) => !i);
+  };
+  return /* @__PURE__ */ d("div", { className: V, children: [
+    /* @__PURE__ */ d("div", { className: R, children: [
+      /* @__PURE__ */ d("label", { className: F, id: P, htmlFor: a, children: [
+        n,
+        k && /* @__PURE__ */ e(K, {})
+      ] }),
+      b && !S && /* @__PURE__ */ e(X, { placement: "top", theme: l, defaultAnchorButtonProps: C, children: b })
+    ] }),
+    c && /* @__PURE__ */ e("div", { className: o(s.hint, {
+      [s.hintDark]: g
+    }), id: v, children: c }),
+    /* @__PURE__ */ d("div", { className: s.wrapper, children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          className: E,
+          id: a,
+          ...L,
+          ref: z,
+          "aria-labelledby": `${P}${q}`,
+          "aria-describedby": T,
+          "aria-invalid": r,
+          "aria-disabled": D,
+          readOnly: D,
+          required: k,
+          disabled: u,
+          autoComplete: I,
+          type: m ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ e(Q, { ...x, hideLabel: !0, theme: l, iconName: m ? "eye-closed" : "eye", variant: "ghost", className: j, size: w, onClick: M, type: "button", disabled: u, children: m ? A : W })
+    ] }),
+    r && _ && /* @__PURE__ */ e(Y, { className: s.feedback, message: _, variant: "error", id: y, theme: l })
+  ] });
+});
+ms.displayName = "DSInputPassword";
+export {
+  ms as D,
+  _s as v
+};