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

package/chunks/Link.module.15dedc23.js

@@ -0,0 +1,37 @@
+import "../assets/Link.75834750.css";
+const o = "_root_13jhz_49", t = "_root--highlight_13jhz_115", r = "_root--dark-highlight_13jhz_115", l = "_root--filled_13jhz_193", _ = "_root--outline_13jhz_221", h = "_root--ghost_13jhz_248", n = "_root--ghost-flush_13jhz_273", s = "_root--small_13jhz_279", i = "_root--dark-filled_13jhz_354", a = "_root--dark-outline_13jhz_413", e = "_root--dark-ghost_13jhz_471", d = "_root--dark-ghost-flush_13jhz_527", c = "_root--icon-left_13jhz_586", g = "_root--icon-only_13jhz_602", j = "_root--icon-only-small_13jhz_606", z = "_label--hidden_13jhz_613", u = {
+  root: o,
+  "root--highlight": "_root--highlight_13jhz_115",
+  rootHighlight: t,
+  "root--dark-highlight": "_root--dark-highlight_13jhz_115",
+  rootDarkHighlight: r,
+  "root--filled": "_root--filled_13jhz_193",
+  rootFilled: l,
+  "root--outline": "_root--outline_13jhz_221",
+  rootOutline: _,
+  "root--ghost": "_root--ghost_13jhz_248",
+  rootGhost: h,
+  "root--ghost-flush": "_root--ghost-flush_13jhz_273",
+  rootGhostFlush: n,
+  "root--small": "_root--small_13jhz_279",
+  rootSmall: s,
+  "root--dark-filled": "_root--dark-filled_13jhz_354",
+  rootDarkFilled: i,
+  "root--dark-outline": "_root--dark-outline_13jhz_413",
+  rootDarkOutline: a,
+  "root--dark-ghost": "_root--dark-ghost_13jhz_471",
+  rootDarkGhost: e,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_13jhz_527",
+  rootDarkGhostFlush: d,
+  "root--icon-left": "_root--icon-left_13jhz_586",
+  rootIconLeft: c,
+  "root--icon-only": "_root--icon-only_13jhz_602",
+  rootIconOnly: g,
+  "root--icon-only-small": "_root--icon-only-small_13jhz_606",
+  rootIconOnlySmall: j,
+  "label--hidden": "_label--hidden_13jhz_613",
+  labelHidden: z
+};
+export {
+  u as s
+};

package/{combobox.f98a4472.js → combobox.d93091e0.js}

@@ -1,6 +1,6 @@
 "use client";
 import { j as p } from "./chunks/jsx-runtime.5c071667.js";
-import { v as u, C as x } from "./chunks/CustomReactSelect.9d0a378a.js";
+import { v as u, C as x } from "./chunks/CustomReactSelect.2e4e7ba0.js";
 const j = ({
   id: s,
   label: o,

package/{customreactselect.a53f9932.js → customreactselect.7c77375a.js}

@@ -2,12 +2,12 @@
 import "./chunks/jsx-runtime.5c071667.js";
 import "./chunks/index.8021d3e0.js";
 import "react";
-import { C as l } from "./chunks/CustomReactSelect.9d0a378a.js";
+import { C as l } from "./chunks/CustomReactSelect.2e4e7ba0.js";
 import "./chunks/useBreakpoint.6c1b06c2.js";
-import "./asterisk.91abccec.js";
+import "./asterisk.cb74ea72.js";
 import "./icon.b4211784.js";
-import "./systemfeedback.6bbd1505.js";
-import "./optioncheckbox.7195f001.js";
+import "./systemfeedback.8515a4e0.js";
+import "./optioncheckbox.2369560b.js";
 export {
   l as CustomReactSelect
 };

package/fieldset.fdd84bda.js

@@ -0,0 +1,98 @@
+import "./assets/Fieldset.729910fe.css";
+import { j as e } from "./chunks/jsx-runtime.5c071667.js";
+import { c } from "./chunks/index.8021d3e0.js";
+import "react";
+import { Asterisk as y } from "./asterisk.cb74ea72.js";
+import { DSHeading as w } from "./heading.c02dcb70.js";
+import { DSSystemFeedback as N } from "./systemfeedback.8515a4e0.js";
+import { g as j } from "./chunks/helpers.ea3ca41a.js";
+const v = "_root_iig2d_25", E = "_child-wrapper_iig2d_31", M = "_legend_iig2d_38", q = "_legend--utility--m_iig2d_41", C = "_description_iig2d_52", P = "_description--small_iig2d_65", T = "_system-feedback_iig2d_69", s = {
+  root: v,
+  "child-wrapper": "_child-wrapper_iig2d_31",
+  childWrapper: E,
+  legend: M,
+  "legend--utility--m": "_legend--utility--m_iig2d_41",
+  legendUtilityM: q,
+  description: C,
+  "description--small": "_description--small_iig2d_65",
+  descriptionSmall: P,
+  "system-feedback": "_system-feedback_iig2d_69",
+  systemFeedback: T
+}, U = ({
+  description: l,
+  id: i,
+  legend: n,
+  systemFeedback: t
+}) => {
+  if (!i && (l || t))
+    throw new Error(
+      j(
+        "DSFieldset",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
+      )
+    );
+  if (!n)
+    throw new Error(
+      j(
+        "DSFieldset",
+        "The legend prop is required. Please add the legend prop to the DSFieldset component."
+      )
+    );
+}, L = ({
+  children: l,
+  legend: i,
+  className: n,
+  description: t,
+  disabled: S = !1,
+  id: a,
+  invalid: p = !1,
+  required: m = !1,
+  systemFeedback: o,
+  ...b
+}) => {
+  process.env.NODE_ENV !== "production" && U({ description: t, id: a, legend: i, systemFeedback: o });
+  let r, g, _;
+  const d = typeof i == "object" && i !== void 0;
+  d && ({ headingSize: r, headingTag: g, headingText: _ } = i);
+  const h = `${a}-feedback`, f = `${a}-description`, u = [
+    o && h,
+    t && f
+  ].filter(Boolean).join(" "), x = !d || r === "small" || r === "small-uppercase", D = c(s.root, n), F = c(s.legend, {
+    [s.legendUtilityM]: !d
+  }), k = c(s.description, {
+    [s.descriptionSmall]: x
+  });
+  return /* @__PURE__ */ e.jsxs(
+    "fieldset",
+    {
+      className: D,
+      disabled: S,
+      ...b,
+      "aria-invalid": p,
+      "aria-describedby": u || void 0,
+      children: [
+        /* @__PURE__ */ e.jsx("legend", { className: F, children: d ? /* @__PURE__ */ e.jsxs(w, { tag: g, size: r, children: [
+          _,
+          m && /* @__PURE__ */ e.jsx(y, {})
+        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          i,
+          m && /* @__PURE__ */ e.jsx(y, {})
+        ] }) }),
+        t && /* @__PURE__ */ e.jsx("span", { id: f, className: k, children: t }),
+        p && o && /* @__PURE__ */ e.jsx(
+          N,
+          {
+            id: h,
+            type: "invalid",
+            message: o,
+            className: s.systemFeedback
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: s.childWrapper, children: l })
+      ]
+    }
+  );
+};
+export {
+  L as DSFieldset
+};

package/heading.c02dcb70.js

@@ -0,0 +1,44 @@
+import "./assets/Heading.50f5e903.css";
+import { j as p } from "./chunks/jsx-runtime.5c071667.js";
+import { c as n } from "./chunks/index.8021d3e0.js";
+const c = "_root_zvknl_25", u = "_root--x-large_zvknl_28", k = "_root--large_zvknl_42", d = "_root--medium_zvknl_56", g = "_root--medium-uppercase_zvknl_64", i = "_root--small_zvknl_72", v = "_root--small-uppercase_zvknl_80", z = "_root--theme-dark_zvknl_88", o = {
+  root: c,
+  "root--x-large": "_root--x-large_zvknl_28",
+  rootXLarge: u,
+  "root--large": "_root--large_zvknl_42",
+  rootLarge: k,
+  "root--medium": "_root--medium_zvknl_56",
+  rootMedium: d,
+  "root--medium-uppercase": "_root--medium-uppercase_zvknl_64",
+  rootMediumUppercase: g,
+  "root--small": "_root--small_zvknl_72",
+  rootSmall: i,
+  "root--small-uppercase": "_root--small-uppercase_zvknl_80",
+  rootSmallUppercase: v,
+  "root--theme-dark": "_root--theme-dark_zvknl_88",
+  rootThemeDark: z
+}, L = ({
+  children: e,
+  className: t,
+  size: r = "medium",
+  tag: a = "h2",
+  // default tag because of SEO reasons (h1 should be used only once per page)
+  theme: l = "light",
+  ...m
+}) => {
+  const _ = a, s = n(o.root, t, {
+    // sizes
+    [o.rootXLarge]: r === "x-large",
+    [o.rootLarge]: r === "large",
+    [o.rootMedium]: r == "medium",
+    [o.rootMediumUppercase]: r == "medium-uppercase",
+    [o.rootSmall]: r == "small",
+    [o.rootSmallUppercase]: r == "small-uppercase",
+    // dark theme
+    [o.rootThemeDark]: l === "dark"
+  });
+  return /* @__PURE__ */ p.jsx(_, { className: s, ...m, children: e });
+};
+export {
+  L as DSHeading
+};

package/index.es.js

@@ -1,27 +1,27 @@
 "use client";
-import { DSButton as t } from "./button.89b2675b.js";
-import { DSButtonRound as p } from "./buttonround.c60c8034.js";
-import { DSCheckbox as x } from "./checkbox.7d414047.js";
-import { DSCheckboxGroup as f } from "./checkboxgroup.e9e25471.js";
-import { DSCombobox as n } from "./combobox.f98a4472.js";
-import { DSFieldset as u } from "./fieldset.fb7b7e49.js";
+import { DSButton as t } from "./button.87ad387c.js";
+import { DSButtonRound as p } from "./buttonround.ecb24c29.js";
+import { DSCheckbox as x } from "./checkbox.42617f46.js";
+import { DSCheckboxGroup as f } from "./checkboxgroup.fa110fdf.js";
+import { DSCombobox as n } from "./combobox.d93091e0.js";
+import { DSFieldset as u } from "./fieldset.fdd84bda.js";
 import { DSFloatingActionButton as c } from "./floatingactionbutton.281b5465.js";
-import { DSHeading as l } from "./heading.cb7698f4.js";
+import { DSHeading as l } from "./heading.c02dcb70.js";
 import { DSIcon as b } from "./icon.b4211784.js";
-import { DSInput as k } from "./input.abb902e3.js";
-import { DSInputPassword as g } from "./inputpassword.11c12c66.js";
-import { DSInputSearch as C } from "./inputsearch.0c88e71a.js";
-import { DSInputStepper as T } from "./inputstepper.b74dac4d.js";
-import { DSLink as F } from "./link.cd3720d1.js";
-import { DSLinkStandalone as R } from "./linkstandalone.26b52de0.js";
+import { DSInput as k } from "./input.064e0bbf.js";
+import { DSInputPassword as g } from "./inputpassword.f76c2f62.js";
+import { DSInputSearch as C } from "./inputsearch.6e913fc6.js";
+import { DSInputStepper as T } from "./inputstepper.2047ec77.js";
+import { DSLink as F } from "./link.5eb13d6e.js";
+import { DSLinkStandalone as R } from "./linkstandalone.edfd6288.js";
 import { DSLogo as H } from "./logo.e6576fe3.js";
-import { DSRadioGroup as j } from "./radiogroup.6a22fe96.js";
-import { DSSelect as v } from "./select.2ff31eab.js";
+import { DSRadioGroup as j } from "./radiogroup.e1c8ea3d.js";
+import { DSSelect as v } from "./select.88d40c51.js";
 import { DSSpinner as z } from "./spinner.ee015469.js";
-import { DSSwitch as J } from "./switch.2f011fcc.js";
-import { DSText as M } from "./text.8d80704f.js";
-import { DSTextarea as O } from "./textarea.e156b0ce.js";
-import { DSTitle as U } from "./title.d855a8e4.js";
+import { DSSwitch as J } from "./switch.96fd1689.js";
+import { DSText as M } from "./text.de8facb9.js";
+import { DSTextarea as O } from "./textarea.b8c40c8b.js";
+import { DSTitle as U } from "./title.7be43d50.js";
 export {
   t as DSButton,
   p as DSButtonRound,

package/input.064e0bbf.js

@@ -0,0 +1,230 @@
+import "./assets/Input.92913cfe.css";
+import { j as i } from "./chunks/jsx-runtime.5c071667.js";
+import { c as e } from "./chunks/index.8021d3e0.js";
+import { useState as m, useRef as v, useLayoutEffect as D, useEffect as nt } from "react";
+import { u as st } from "./chunks/useBreakpoint.6c1b06c2.js";
+import { Asterisk as et } from "./asterisk.cb74ea72.js";
+import { DSButton as T } from "./button.87ad387c.js";
+import { DSIcon as lt } from "./icon.b4211784.js";
+import { DSSystemFeedback as ot } from "./systemfeedback.8515a4e0.js";
+import { v as ut, a as ct, M as dt, b as _t, s as rt, i as C, c as pt } from "./chunks/Input.utils.f8f3286f.js";
+const ft = "_input_11iuy_73", mt = "_input--invalid_11iuy_183", yt = "_input--small_11iuy_190", ht = "_input--has-leading-icon_11iuy_236", bt = "_input--has-action-button_11iuy_239", xt = "_input--has-second-action-button_11iuy_242", gt = "_input--has-affix_11iuy_254", St = "_input--is-ready_11iuy_266", It = "_root_11iuy_273", Ht = "_hint_11iuy_281", kt = "_label_11iuy_281", vt = "_wrapper_11iuy_285", Ct = "_affix_11iuy_291", Lt = "_affix--small_11iuy_309", jt = "_affix--disabled_11iuy_321", At = "_prefix_11iuy_325", Rt = "_suffix_11iuy_331", Nt = "_leading-icon_11iuy_336", Bt = "_leading-icon--small_11iuy_341", wt = "_action-button_11iuy_345", Dt = "_label--hidden_11iuy_362", Tt = "_feedback_11iuy_389", t = {
+  input: ft,
+  "input--invalid": "_input--invalid_11iuy_183",
+  inputInvalid: mt,
+  "input--small": "_input--small_11iuy_190",
+  inputSmall: yt,
+  "input--has-leading-icon": "_input--has-leading-icon_11iuy_236",
+  inputHasLeadingIcon: ht,
+  "input--has-action-button": "_input--has-action-button_11iuy_239",
+  inputHasActionButton: bt,
+  "input--has-second-action-button": "_input--has-second-action-button_11iuy_242",
+  inputHasSecondActionButton: xt,
+  "input--has-affix": "_input--has-affix_11iuy_254",
+  inputHasAffix: gt,
+  "input--is-ready": "_input--is-ready_11iuy_266",
+  inputIsReady: St,
+  root: It,
+  hint: Ht,
+  label: kt,
+  wrapper: vt,
+  affix: Ct,
+  "affix--small": "_affix--small_11iuy_309",
+  affixSmall: Lt,
+  "affix--disabled": "_affix--disabled_11iuy_321",
+  affixDisabled: jt,
+  prefix: At,
+  suffix: Rt,
+  "leading-icon": "_leading-icon_11iuy_336",
+  leadingIcon: Nt,
+  "leading-icon--small": "_leading-icon--small_11iuy_341",
+  leadingIconSmall: Bt,
+  "action-button": "_action-button_11iuy_345",
+  actionButton: wt,
+  "label--hidden": "_label--hidden_11iuy_362",
+  labelHidden: Dt,
+  feedback: Tt
+}, Ut = ({
+  id: c,
+  label: L,
+  actionButtonLabel: E,
+  actionButtonIconName: _,
+  actionButtonIconSource: y,
+  actionButtonOnClick: F,
+  className: P,
+  disabled: l = !1,
+  hint: h,
+  hideLabel: O = !1,
+  invalid: r = !1,
+  leadingIconName: p,
+  leadingIconSource: f,
+  prefix: n,
+  readonly: d = !1,
+  required: j = !1,
+  size: s = "medium",
+  suffix: a,
+  systemFeedback: b,
+  type: o = "text",
+  ...$
+}) => {
+  process.env.NODE_ENV !== "production" && (ut({
+    id: c,
+    label: L,
+    prefix: n,
+    suffix: a,
+    leadingIconName: p,
+    leadingIconSource: f,
+    actionButtonIconName: _,
+    actionButtonIconSource: y
+  }), ct(o));
+  const [W, X] = m(!1), [M, V] = m(!1), [x, G] = m(!1), [U, J] = m({}), g = v(null), K = n == null ? void 0 : n.substring(0, dt), S = v(null), Q = a == null ? void 0 : a.substring(0, _t), I = v(null), Y = st(O);
+  D(() => {
+    const u = s === "medium" ? 16 : 8, H = {};
+    if (S.current) {
+      const k = S.current.offsetWidth;
+      H.paddingLeft = u + k + "px";
+    }
+    if (I.current) {
+      const k = I.current.offsetWidth;
+      H.paddingRight = u + k + "px";
+    }
+    J(H), X(!0);
+  }, [n, a, s, M]), D(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), V(!0));
+    })();
+  }, []), nt(() => {
+    const u = rt(
+      C(o),
+      pt(o)
+    );
+    G(u);
+  }, [o]);
+  const A = e(t.affix, {
+    [t.affixSmall]: s === "small",
+    [t.affixDisabled]: l
+  }), R = `${c}-label`, N = `${c}-feedback`, B = `${c}-hint`, Z = h ? ` ${B}` : "", q = e(t.root, P), z = e(t.input, {
+    // small input
+    [t.inputSmall]: s === "small",
+    // invalid state
+    [t.inputInvalid]: r,
+    // leading icon
+    [t.inputHasLeadingIcon]: p || f,
+    // prefix/suffix
+    [t.inputHasAffix]: n || a,
+    // action button
+    [t.inputHasActionButton]: _ || y || x,
+    [t.inputIsReady]: W
+  }), tt = e(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: Y
+  }), it = e(t.leadingIcon, {
+    [t.leadingIconSmall]: s === "small"
+  }), w = e(t.actionButton, {
+    [t.actionButtonSmall]: s === "small"
+  }), at = (u) => {
+    g.current && !l && !d && g.current.showPicker(), u.preventDefault();
+  };
+  return /* @__PURE__ */ i.jsxs("div", { className: q, children: [
+    /* @__PURE__ */ i.jsxs("label", { className: tt, id: R, htmlFor: c, children: [
+      L,
+      j && /* @__PURE__ */ i.jsx(et, {})
+    ] }),
+    h && /* @__PURE__ */ i.jsx("div", { className: t.hint, id: B, children: h }),
+    r && b && /* @__PURE__ */ i.jsx(
+      ot,
+      {
+        className: t.feedback,
+        message: b,
+        type: "invalid",
+        id: N
+      }
+    ),
+    /* @__PURE__ */ i.jsxs("div", { className: t.wrapper, children: [
+      n && /* @__PURE__ */ i.jsx(
+        "span",
+        {
+          className: e(A, t.prefix),
+          ref: S,
+          "aria-disabled": l,
+          children: K
+        }
+      ),
+      !n && (p || f) && /* @__PURE__ */ i.jsx(
+        lt,
+        {
+          name: p,
+          theme: "light",
+          source: f,
+          className: it,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ i.jsx(
+        "input",
+        {
+          type: o,
+          className: z,
+          id: c,
+          ref: g,
+          ...$,
+          style: U,
+          "aria-labelledby": `${R}${Z}`,
+          "aria-describedby": r && b ? N : void 0,
+          "aria-invalid": r,
+          "aria-disabled": d,
+          readOnly: d,
+          required: j,
+          disabled: l
+        }
+      ),
+      a && /* @__PURE__ */ i.jsx(
+        "span",
+        {
+          className: e(A, t.suffix),
+          ref: I,
+          "aria-disabled": l,
+          children: Q
+        }
+      ),
+      !a && !x && (_ || y) && /* @__PURE__ */ i.jsx(
+        T,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: _,
+          variant: "ghost",
+          className: w,
+          size: s,
+          onClick: F,
+          type: "button",
+          disabled: l || d,
+          children: E
+        }
+      ),
+      !a && x && !d && !l && /* @__PURE__ */ i.jsxs(
+        T,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: C(o) ? "calendar" : "clock",
+          variant: "ghost",
+          className: w,
+          size: s,
+          onClick: at,
+          type: "button",
+          children: [
+            "Open ",
+            C(o) ? "date" : "time",
+            " picker"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ut as DSInput
+};

package/inputpassword.f76c2f62.js

@@ -0,0 +1,139 @@
+import "./assets/InputPassword.d7b9c937.css";
+import { j as a } from "./chunks/jsx-runtime.5c071667.js";
+import { c as o } from "./chunks/index.8021d3e0.js";
+import { useState as D } from "react";
+import { u as C } from "./chunks/useBreakpoint.6c1b06c2.js";
+import { Asterisk as L } from "./asterisk.cb74ea72.js";
+import { DSButton as $ } from "./button.87ad387c.js";
+import { DSSystemFeedback as E } from "./systemfeedback.8515a4e0.js";
+import { g as h } from "./chunks/helpers.ea3ca41a.js";
+const q = "_input_1encj_73", R = "_input--invalid_1encj_183", V = "_input--small_1encj_190", O = "_input--has-leading-icon_1encj_236", F = "_input--has-action-button_1encj_239", M = "_input--has-second-action-button_1encj_242", T = "_input--has-affix_1encj_254", G = "_input--is-ready_1encj_266", J = "_root_1encj_273", K = "_hint_1encj_281", Q = "_label_1encj_281", U = "_wrapper_1encj_285", W = "_action-button_1encj_291", X = "_label--hidden_1encj_308", Y = "_feedback_1encj_335", n = {
+  input: q,
+  "input--invalid": "_input--invalid_1encj_183",
+  inputInvalid: R,
+  "input--small": "_input--small_1encj_190",
+  inputSmall: V,
+  "input--has-leading-icon": "_input--has-leading-icon_1encj_236",
+  inputHasLeadingIcon: O,
+  "input--has-action-button": "_input--has-action-button_1encj_239",
+  inputHasActionButton: F,
+  "input--has-second-action-button": "_input--has-second-action-button_1encj_242",
+  inputHasSecondActionButton: M,
+  "input--has-affix": "_input--has-affix_1encj_254",
+  inputHasAffix: T,
+  "input--is-ready": "_input--is-ready_1encj_266",
+  inputIsReady: G,
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: U,
+  "action-button": "_action-button_1encj_291",
+  actionButton: W,
+  "label--hidden": "_label--hidden_1encj_308",
+  labelHidden: X,
+  feedback: Y
+}, Z = ({ id: t, label: e }) => {
+  if (!t)
+    throw new Error(
+      h(
+        "DSInputPassword",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
+      )
+    );
+  if (!e)
+    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}.`
+      )
+    );
+}, pn = ({
+  id: t,
+  label: e,
+  autocomplete: f = "new-password",
+  className: j,
+  disabled: u = !1,
+  hidePasswordText: w = "Hide password",
+  hint: i,
+  hideLabel: y = !1,
+  invalid: s = !1,
+  readonly: r = !1,
+  required: d = !1,
+  showPasswordText: S = "Show password",
+  size: c = "medium",
+  systemFeedback: l,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && Z({
+    id: t,
+    label: e
+  });
+  const [p, I] = D(!1), _ = `${t}-label`, m = `${t}-feedback`, b = `${t}-hint`, B = i ? ` ${b}` : "", H = C(y), g = o(n.root, j), v = o(n.input, {
+    // small input
+    [n.inputSmall]: c === "small",
+    // invalid state
+    [n.inputInvalid]: s,
+    // action button - input password always has an action button
+    [n.inputHasActionButton]: !0
+  }), P = o(n.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [n.labelHidden]: H
+  }), N = o(n.actionButton, {
+    [n.actionButtonSmall]: c === "small"
+  }), k = () => {
+    I((A) => !A);
+  };
+  return /* @__PURE__ */ a.jsxs("div", { className: g, children: [
+    /* @__PURE__ */ a.jsxs("label", { className: P, id: _, htmlFor: t, children: [
+      e,
+      d && /* @__PURE__ */ a.jsx(L, {})
+    ] }),
+    i && /* @__PURE__ */ a.jsx("div", { className: n.hint, id: b, children: i }),
+    s && l && /* @__PURE__ */ a.jsx(
+      E,
+      {
+        className: n.feedback,
+        message: l,
+        type: "invalid",
+        id: m
+      }
+    ),
+    /* @__PURE__ */ a.jsxs("div", { className: n.wrapper, children: [
+      /* @__PURE__ */ a.jsx(
+        "input",
+        {
+          className: v,
+          id: t,
+          ...x,
+          "aria-labelledby": `${_}${B}`,
+          "aria-describedby": s && l ? m : void 0,
+          "aria-invalid": s,
+          "aria-disabled": r,
+          readOnly: r,
+          required: d,
+          disabled: u,
+          autoComplete: f,
+          type: p ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        $,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: p ? "eye-closed" : "eye",
+          variant: "ghost",
+          className: N,
+          size: c,
+          onClick: k,
+          type: "button",
+          disabled: u,
+          children: p ? w : S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  pn as DSInputPassword
+};