@stihl-design-system/components 1.0.0-RC.7 → 1.0.0-RC.9

package/chunks/Select.Cl2eJR1z.js

@@ -0,0 +1,191 @@
+"use client";
+import { j as s } from "./jsx-runtime.C115EyI4.js";
+import { c as _ } from "./index.CvOaL64Y.js";
+import { useRef as C, useState as q, useEffect as W } from "react";
+import { u as F } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as M } from "../asterisk.DDn-yX4P.js";
+import { D as O } from "./Icon.n4XZrQ4N.js";
+import { DSSystemFeedback as T } from "../systemfeedback._8gatmgR.js";
+import { g as h } from "./helpers.B1JT5ShS.js";
+import '../assets/Select.BptsMxz4.css';const V = "_root_15gy6_226", Z = "_hint_15gy6_234", J = "_label_15gy6_234", K = "_wrapper_15gy6_238", Q = "_affix_15gy6_244", U = "_affix--small_15gy6_266", X = "_affix--disabled_15gy6_280", Y = "_prefix_15gy6_283", z = "_affix--readonly_15gy6_286", G = "_suffix_15gy6_296", ee = "_action-button_15gy6_303", te = "_label--hidden_15gy6_322", se = "_feedback_15gy6_351", ae = "_select-wrapper_15gy6_356", ne = "_select_15gy6_356", le = "_select--invalid_15gy6_474", ce = "_select--small_15gy6_481", oe = "_input--has-leading-icon_15gy6_535", ie = "_input--has-action-button_15gy6_538", re = "_input--has-second-action-button_15gy6_541", _e = "_select--has-leading-icon_15gy6_544", de = "_select--has-action-button_15gy6_547", fe = "_select--has-second-action-button_15gy6_550", ue = "_select--has-affix_15gy6_553", he = "_select--is-ready_15gy6_567", pe = "_select--placeholder_15gy6_584", ge = "_chevron_15gy6_593", ye = "_chevron--small_15gy6_597", be = "_chevron--disabled_15gy6_600", e = {
+  root: V,
+  hint: Z,
+  label: J,
+  wrapper: K,
+  affix: Q,
+  "affix--small": "_affix--small_15gy6_266",
+  affixSmall: U,
+  "affix--disabled": "_affix--disabled_15gy6_280",
+  affixDisabled: X,
+  prefix: Y,
+  "affix--readonly": "_affix--readonly_15gy6_286",
+  affixReadonly: z,
+  suffix: G,
+  "action-button": "_action-button_15gy6_303",
+  actionButton: ee,
+  "label--hidden": "_label--hidden_15gy6_322",
+  labelHidden: te,
+  feedback: se,
+  "select-wrapper": "_select-wrapper_15gy6_356",
+  selectWrapper: ae,
+  select: ne,
+  "select--invalid": "_select--invalid_15gy6_474",
+  selectInvalid: le,
+  "select--small": "_select--small_15gy6_481",
+  selectSmall: ce,
+  "input--has-leading-icon": "_input--has-leading-icon_15gy6_535",
+  inputHasLeadingIcon: oe,
+  "input--has-action-button": "_input--has-action-button_15gy6_538",
+  inputHasActionButton: ie,
+  "input--has-second-action-button": "_input--has-second-action-button_15gy6_541",
+  inputHasSecondActionButton: re,
+  "select--has-leading-icon": "_select--has-leading-icon_15gy6_544",
+  selectHasLeadingIcon: _e,
+  "select--has-action-button": "_select--has-action-button_15gy6_547",
+  selectHasActionButton: de,
+  "select--has-second-action-button": "_select--has-second-action-button_15gy6_550",
+  selectHasSecondActionButton: fe,
+  "select--has-affix": "_select--has-affix_15gy6_553",
+  selectHasAffix: ue,
+  "select--is-ready": "_select--is-ready_15gy6_567",
+  selectIsReady: he,
+  "select--placeholder": "_select--placeholder_15gy6_584",
+  selectPlaceholder: pe,
+  chevron: ge,
+  "chevron--small": "_chevron--small_15gy6_597",
+  chevronSmall: ye,
+  "chevron--disabled": "_chevron--disabled_15gy6_600",
+  chevronDisabled: be
+}, Be = ["medium", "small"], me = ({
+  id: t,
+  label: l,
+  options: n
+}) => {
+  if (!t)
+    throw new Error(
+      h(
+        "DSSelect",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
+      )
+    );
+  if (!l)
+    throw new Error(
+      h(
+        "DSSelect",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+  if (!n || n.length === 0)
+    throw new Error(
+      h(
+        "DSSelect",
+        'Options are always required. Please add an "options" prop to the DSSelect component.'
+      )
+    );
+}, xe = (t, l, n) => t === "" || l !== void 0 && l !== "" ? !1 : !(n !== void 0 && n !== ""), Ee = ({
+  id: t,
+  label: l,
+  options: n,
+  className: H,
+  defaultValue: p,
+  disabled: g = !1,
+  hideLabel: I = !1,
+  hint: d,
+  invalid: r = !1,
+  placeholder: f = "Select",
+  required: y = !1,
+  size: b = "medium",
+  systemFeedback: u,
+  value: m,
+  ...w
+}) => {
+  process.env.NODE_ENV !== "production" && me({
+    id: t,
+    label: l,
+    options: n
+  });
+  const i = C(null), [j, A] = q(
+    xe(f, p, m)
+  );
+  W(() => {
+    if (!i.current) return;
+    const c = () => {
+      if (!i.current) return;
+      const o = i.current.value;
+      A(o === "");
+    }, a = i.current;
+    return a.addEventListener("change", c), () => {
+      a.removeEventListener("change", c);
+    };
+  }, []);
+  const B = F(I), x = `${t}-label`, v = `${t}-feedback`, S = `${t}-hint`, E = d ? ` ${S}` : "", L = (c) => [
+    f && /* @__PURE__ */ s.jsx("option", { value: "", children: f }, `${t}-hidden-option-disabled-placeholder`),
+    ...c.map((a) => {
+      if ("options" in a) {
+        const { label: o, options: $ } = a;
+        return /* @__PURE__ */ s.jsx("optgroup", { label: o, children: $.map(D) }, o);
+      } else
+        return D(a);
+    })
+  ], D = ({ label: c, value: a, isDisabled: o }) => /* @__PURE__ */ s.jsx("option", { value: a, disabled: o, children: c }, a), N = _(e.root, H), P = _(e.select, {
+    [e.selectSmall]: b === "small",
+    [e.selectInvalid]: r,
+    [e.selectPlaceholder]: j
+  }), k = _(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: B
+  }), R = _(e.chevron, {
+    [e.chevronSmall]: b === "small",
+    [e.chevronDisabled]: g
+  });
+  return /* @__PURE__ */ s.jsxs("div", { className: N, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: k, id: x, htmlFor: t, children: [
+      l,
+      y && /* @__PURE__ */ s.jsx(M, {})
+    ] }),
+    d && /* @__PURE__ */ s.jsx("div", { className: e.hint, id: S, children: d }),
+    r && u && /* @__PURE__ */ s.jsx(
+      T,
+      {
+        className: e.feedback,
+        message: u,
+        type: "invalid",
+        id: v,
+        "aria-live": "assertive"
+      }
+    ),
+    /* @__PURE__ */ s.jsxs("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ s.jsx(
+        "select",
+        {
+          ...w,
+          id: t,
+          ref: i,
+          className: P,
+          "aria-labelledby": `${x}${E}`,
+          "aria-describedby": r && u ? v : void 0,
+          "aria-invalid": r,
+          defaultValue: p,
+          value: m,
+          disabled: g,
+          required: y,
+          children: L(n)
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        O,
+        {
+          name: "chevron-down",
+          className: R,
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ee as D,
+  Be as S,
+  xe as g,
+  me as v
+};

package/chunks/Textarea.Sk9-GXfs.js

@@ -0,0 +1,195 @@
+"use client";
+import { j as s } from "./jsx-runtime.C115EyI4.js";
+import { c as g } from "./index.CvOaL64Y.js";
+import { useState as c, useRef as na, useEffect as m } from "react";
+import { u as oa, h as ia } from "./useBreakpoint.5xBNDiCf.js";
+import { g as k, p as H } from "./helpers.B1JT5ShS.js";
+import { Asterisk as ra } from "../asterisk.DDn-yX4P.js";
+import { DSSystemFeedback as la } from "../systemfeedback._8gatmgR.js";
+import '../assets/Textarea.CIIVh03G.css';const ca = "_textarea_seaaz_226", da = "_textarea--invalid_seaaz_338", _a = "_textarea--small_seaaz_345", ua = "_textarea--resize-auto_seaaz_365", fa = "_root_seaaz_375", xa = "_hint_seaaz_383", ma = "_label_seaaz_383", ba = "_affix_seaaz_387", ha = "_affix--small_seaaz_409", za = "_affix--disabled_seaaz_423", pa = "_prefix_seaaz_426", va = "_affix--readonly_seaaz_429", ga = "_suffix_seaaz_439", Sa = "_leading-icon_seaaz_446", Ia = "_leading-icon--small_seaaz_458", Ca = "_leading-icon--disabled_seaaz_461", ya = "_action-button_seaaz_470", Aa = "_label--hidden_seaaz_489", Da = "_feedback_seaaz_518", ja = "_char-count_seaaz_523", wa = "_char-count-announcer_seaaz_540", t = {
+  textarea: ca,
+  "textarea--invalid": "_textarea--invalid_seaaz_338",
+  textareaInvalid: da,
+  "textarea--small": "_textarea--small_seaaz_345",
+  textareaSmall: _a,
+  "textarea--resize-auto": "_textarea--resize-auto_seaaz_365",
+  textareaResizeAuto: ua,
+  root: fa,
+  hint: xa,
+  label: ma,
+  affix: ba,
+  "affix--small": "_affix--small_seaaz_409",
+  affixSmall: ha,
+  "affix--disabled": "_affix--disabled_seaaz_423",
+  affixDisabled: za,
+  prefix: pa,
+  "affix--readonly": "_affix--readonly_seaaz_429",
+  affixReadonly: va,
+  suffix: ga,
+  "leading-icon": "_leading-icon_seaaz_446",
+  leadingIcon: Sa,
+  "leading-icon--small": "_leading-icon--small_seaaz_458",
+  leadingIconSmall: Ia,
+  "leading-icon--disabled": "_leading-icon--disabled_seaaz_461",
+  leadingIconDisabled: Ca,
+  "action-button": "_action-button_seaaz_470",
+  actionButton: ya,
+  "label--hidden": "_label--hidden_seaaz_489",
+  labelHidden: Aa,
+  feedback: Da,
+  "char-count": "_char-count_seaaz_523",
+  charCount: ja,
+  "char-count-announcer": "_char-count-announcer_seaaz_540",
+  charCountAnnouncer: wa
+}, Va = ["medium", "small"], Ra = ({ id: n, label: _ }) => {
+  if (!n)
+    throw new Error(
+      k(
+        "DSTextarea",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
+      )
+    );
+  if (!_)
+    throw new Error(
+      k(
+        "DSTextarea",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+}, Pa = ({
+  id: n,
+  label: _,
+  charsLimitText: V = "Character limit reached",
+  charsRemainingText: P = "Characters remaining:",
+  className: q,
+  defaultValue: M,
+  disabled: O = !1,
+  hint: b,
+  hideLabel: F = !1,
+  invalid: o = !1,
+  maxLength: a,
+  readonly: S = !1,
+  required: I = !1,
+  resize: u = "vertical",
+  size: W = "medium",
+  systemFeedback: r,
+  value: h,
+  wrapperClassName: X,
+  onChange: C,
+  onInput: y,
+  ...Z
+}) => {
+  process.env.NODE_ENV !== "production" && Ra({
+    id: n,
+    label: _
+  });
+  const [G, A] = c(M || ""), [l, D] = c(0), [J, j] = c(0), [K, w] = c("off"), [R, z] = c(r), [p, v] = c(o), T = h !== void 0, f = T ? h : G, i = na(null), Q = oa(F);
+  m(() => {
+    if (!a || a <= 0)
+      return;
+    l >= a * 0.8 ? w("polite") : w("off");
+    const e = setTimeout(() => {
+      j(a - l || 0);
+    }, 1e3);
+    return () => clearTimeout(e);
+  }, [l]), m(() => {
+    A(f || ""), d(), a && a > 0 && (D(f.toString().length || 0), j(a - f.toString().length || 0));
+  }, [h]), m(() => {
+    o && r ? (z(r), v(o)) : !o && a && a >= 0 && l >= a ? (v(!0), z(V)) : (z(r), v(o));
+  }, [o, p, r, l]), m(() => {
+    if (ia && u === "auto")
+      return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
+  }, [u, i.current]);
+  const U = g(t.root, X), Y = g(t.textarea, q, {
+    // small textarea
+    [t.textareaSmall]: W === "small",
+    // invalid state
+    [t.textareaInvalid]: p,
+    // resize handling
+    [t.textareaResizeAuto]: u === "auto"
+  }), L = g(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: Q
+  }), E = `${n}-label`, N = `${n}-feedback`, B = `${n}-hint`, $ = `${n}-char-count-announcer`, aa = b ? ` ${B}` : "", d = () => {
+    if (i.current && u === "auto") {
+      i.current.style.height = "auto";
+      const e = H(i.current.scrollHeight), x = H(2);
+      i.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
+      // from jumping as soon as the user starts typing.
+      e + x}rem`;
+    }
+  }, ea = () => {
+    const e = [];
+    return a && a > 0 && e.push($), o && r && e.push(N), e.length > 0 ? e.join(" ") : void 0;
+  }, ta = (e) => {
+    var x;
+    y && y(e), a && a > 0 && D(((x = i.current) == null ? void 0 : x.value.length) || 0), d();
+  }, sa = (e) => {
+    C && C(e), T || A(e.target.value);
+  };
+  return /* @__PURE__ */ s.jsxs("div", { className: U, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: L, id: E, htmlFor: n, children: [
+      _,
+      I && /* @__PURE__ */ s.jsx(ra, {})
+    ] }),
+    b && /* @__PURE__ */ s.jsx("div", { className: t.hint, id: B, children: b }),
+    p && R && /* @__PURE__ */ s.jsx(
+      la,
+      {
+        className: t.feedback,
+        message: R,
+        type: "invalid",
+        id: N
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "textarea",
+      {
+        className: Y,
+        id: n,
+        ref: i,
+        ...Z,
+        "aria-labelledby": `${E}${aa}`,
+        "aria-describedby": ea(),
+        "aria-invalid": o,
+        "aria-disabled": S,
+        maxLength: a,
+        readOnly: S,
+        required: I,
+        disabled: O,
+        value: f,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: sa,
+        onInput: ta
+      }
+    ),
+    a !== void 0 && a > 0 && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
+        l,
+        "/",
+        a
+      ] }),
+      /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          className: t.charCountAnnouncer,
+          id: $,
+          "aria-live": K,
+          "aria-atomic": "true",
+          children: [
+            P,
+            " ",
+            J
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Pa as D,
+  Va as T,
+  Ra as v
+};

package/chunks/{Toast.RON4bFPY.js → Toast.D9DAuz2m.js}

@@ -1,25 +1,25 @@
 "use client";
 import { j as n } from "./jsx-runtime.C115EyI4.js";
-import { c } from "./index.CvOaL64Y.js";
-import { forwardRef as u } from "react";
-import { DSButton as g } from "../button.L1lgCuM9.js";
-import { D as h } from "./Icon.n4XZrQ4N.js";
-import '../assets/Toast.BzVaebc0.css';const p = "_root_127fr_80", x = "_root--closing_127fr_89", I = "_fade-out_127fr_1", S = "_move-in_127fr_1", N = "_root--success_127fr_124", j = "_root--info_127fr_128", v = "_root--warning_127fr_132", w = "_content_127fr_137", C = "_content--hide-icon_127fr_144", D = "_icon_127fr_148", O = "_message_127fr_152", o = {
-  root: p,
-  "root--closing": "_root--closing_127fr_89",
-  rootClosing: x,
-  "fade-out": "_fade-out_127fr_1",
-  fadeOut: I,
-  "move-in": "_move-in_127fr_1",
-  moveIn: S,
-  "root--success": "_root--success_127fr_124",
-  rootSuccess: N,
-  "root--info": "_root--info_127fr_128",
-  rootInfo: j,
-  "root--warning": "_root--warning_127fr_132",
-  rootWarning: v,
-  content: w,
-  "content--hide-icon": "_content--hide-icon_127fr_144",
+import { c as e } from "./index.CvOaL64Y.js";
+import { forwardRef as f } from "react";
+import { DSButton as u } from "../button.CkHCQg3Y.js";
+import { D as g } from "./Icon.n4XZrQ4N.js";
+import '../assets/Toast.Dsvs1zdM.css';const h = "_root_m9wn3_80", p = "_root--closing_m9wn3_94", x = "_fade-out_m9wn3_1", I = "_move-in_m9wn3_1", S = "_root--success_m9wn3_129", N = "_root--info_m9wn3_133", j = "_root--warning_m9wn3_137", v = "_content_m9wn3_142", C = "_content--hide-icon_m9wn3_149", D = "_icon_m9wn3_153", O = "_message_m9wn3_157", o = {
+  root: h,
+  "root--closing": "_root--closing_m9wn3_94",
+  rootClosing: p,
+  "fade-out": "_fade-out_m9wn3_1",
+  fadeOut: x,
+  "move-in": "_move-in_m9wn3_1",
+  moveIn: I,
+  "root--success": "_root--success_m9wn3_129",
+  rootSuccess: S,
+  "root--info": "_root--info_m9wn3_133",
+  rootInfo: N,
+  "root--warning": "_root--warning_m9wn3_137",
+  rootWarning: j,
+  content: v,
+  "content--hide-icon": "_content--hide-icon_m9wn3_149",
   contentHideIcon: C,
   icon: D,
   message: O
@@ -27,38 +27,38 @@ import '../assets/Toast.BzVaebc0.css';const p = "_root_127fr_80", x = "_root--cl
   success: "circle-check-colored",
   warning: "triangle-exclamationmark-colored",
   info: "circle-info-colored"
-}, H = u(
+}, H = f(
   ({
     message: s,
-    className: e,
-    hideIcon: r = !1,
+    className: r,
+    hideIcon: c = !1,
     variant: t = "info",
     onClick: i,
     onMouseEnter: a,
     onMouseLeave: _,
-    ...f
+    ...m
   }, l) => {
-    const m = c(o.root, e, {
+    const d = e(o.root, r, {
       [o.rootSuccess]: t === "success",
       [o.rootWarning]: t === "warning",
       [o.rootInfo]: t === "info"
-    }), d = c(o.content, {
-      [o.contentHideIcon]: r
+    }), w = e(o.content, {
+      [o.contentHideIcon]: c
     });
     return /* @__PURE__ */ n.jsx(
       "aside",
       {
-        className: m,
+        className: d,
         ref: l,
         popover: "manual",
         "data-ds-toast": !0,
         onMouseEnter: a,
         onMouseLeave: _,
         "aria-label": s,
-        ...f,
-        children: /* @__PURE__ */ n.jsxs("div", { className: d, children: [
-          !r && /* @__PURE__ */ n.jsx(
-            h,
+        ...m,
+        children: /* @__PURE__ */ n.jsxs("div", { className: w, children: [
+          !c && /* @__PURE__ */ n.jsx(
+            g,
             {
               name: T[t],
               className: o.icon,
@@ -67,7 +67,7 @@ import '../assets/Toast.BzVaebc0.css';const p = "_root_127fr_80", x = "_root--cl
           ),
           /* @__PURE__ */ n.jsx("div", { className: o.message, children: s }),
           /* @__PURE__ */ n.jsx(
-            g,
+            u,
             {
               hideLabel: !0,
               iconName: "cross",

package/{combobox.CRlhqmuO.js → combobox.jDpV6bv-.js}

@@ -1,6 +1,6 @@
 "use client";
 import { j as u } from "./chunks/jsx-runtime.C115EyI4.js";
-import { v as x, c as C } from "./chunks/CustomReactSelect.5dHi6PEO.js";
+import { v as x, c as C } from "./chunks/CustomReactSelect.C4rTVlvy.js";
 const v = ({
   id: s,
   label: o,

package/components/Button/Button.d.ts

@@ -37,7 +37,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     theme?: Theme;
     /** Visual style variant of the button */
     variant?: ButtonVariant;
-    /** Callback function triggered when the button is clicked */
+    /** Callback function called when the button is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**

package/components/Checkbox/Checkbox.d.ts

@@ -18,7 +18,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     /** Defines a system feedback message, shown when `invalid={true}` */
     systemFeedback?: string;
-    /** Callback function triggered when the state of the checkbox changes */
+    /** Callback function called when the state of the checkbox changes */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/components/CustomReactSelect/CustomReactSelect.d.ts

@@ -47,9 +47,9 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
     translations?: ComboboxAriaTranslations;
     /** Value of the DSCombobox */
     value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Callback function triggered when the selection of the DSCombobox changes */
+    /** Callback function called when the selection of the DSCombobox changes */
     onChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
-    /** Callback function triggered when the value of the DSCombobox input changes */
+    /** Callback function called when the value of the DSCombobox input changes */
     onInputChange?: (newValue: string) => void;
 }
 /**

package/components/Dialog/Dialog.d.ts

@@ -1,11 +1,30 @@
 import { HTMLAttributes } from 'react';
 
-type DialogProps = {
+export type DialogProps = {
+    /** Content within the Dialog */
     children: React.ReactNode;
+    /** Label for the close button */
+    closeButtonLabel?: string;
+    /** Disables closing the Dialog by clicking on the backdrop */
+    disableBackdropClose?: boolean;
+    /** Content within the Dialog's footer. For example a CTA button. */
     footer?: React.ReactNode;
+    /** Content within the Dialog's header. For example a Heading. */
     header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Dialog is open */
     isOpen?: boolean;
+    /** Callback function called when the Dialog is closed */
     onClose?: () => void;
 } & HTMLAttributes<HTMLDialogElement>;
-export declare const DSDialog: ({ children, className, footer, header, isOpen, onClose, }: DialogProps) => JSX.Element;
-export {};
+/**
+ * A component that renders a modal dialog, which can be used for displaying
+ * important messages, forms, or confirmations.
+ *
+ * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
+ */
+export declare const DSDialog: ({ children, className, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;

package/components/Dialog/Dialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Dialog/Dialog.utils.d.ts

@@ -0,0 +1,12 @@
+import { DialogProps } from './Dialog';
+
+type ValidationProps = Pick<DialogProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDialog component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSDialog properties to validate.
+ */
+export declare const validateDialogProps: ({ tabIndex }: ValidationProps) => void;
+export {};

package/components/Dialog/Dialog.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from 'react';
+import { DrawerPosition } from './Drawer.utils';
+
+export type DrawerProps = {
+    /** Content within the Drawer */
+    children: React.ReactNode;
+    /** Label for the close button */
+    closeButtonLabel?: string;
+    /** Disables closing the Drawer by clicking on the backdrop */
+    disableBackdropClose?: boolean;
+    /** Content within the Drawer's footer. For example a CTA button. */
+    footer?: React.ReactNode;
+    /** Content within the Drawer's header. For example a Heading. */
+    header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Drawer is open */
+    isOpen?: boolean;
+    /** Specifies the final position of the Drawer after opening. */
+    position?: DrawerPosition;
+    /** Callback function called when the Drawer is closed */
+    onClose?: () => void;
+} & HTMLAttributes<HTMLDialogElement>;
+/**
+ * A component that renders a modal drawer, which can be used for navigation,
+ * displaying additional information, or providing extra controls.
+ */
+export declare const DSDrawer: ({ children, className, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;

package/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Drawer/Drawer.utils.d.ts

@@ -0,0 +1,14 @@
+import { DrawerProps } from './Drawer';
+
+export declare const DRAWER_POSITION: readonly ["start", "end"];
+export type DrawerPosition = (typeof DRAWER_POSITION)[number];
+type ValidationProps = Pick<DrawerProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDrawer component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSDrawer properties to validate.
+ */
+export declare const validateDrawerProps: ({ tabIndex }: ValidationProps) => void;
+export {};

package/components/Drawer/Drawer.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Input/Input.d.ts

@@ -14,7 +14,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     actionButtonIconName?: IconName;
     /** Custom source URL for the action button icon */
     actionButtonIconSource?: IconProps['source'];
-    /** Callback function triggered when the action button is clicked */
+    /** Callback function called when the action button is clicked */
     actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Disables the input, preventing user interaction */
     disabled?: boolean;

package/components/InputSearch/InputSearch.d.ts

@@ -31,7 +31,7 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
     size?: InputSize;
     /** Value of the input */
     value?: string;
-    /** Callback function triggered when the submit button is clicked */
+    /** Callback function called when the submit button is clicked */
     submitButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**