@stihl-design-system/components 1.0.0-RC.6 → 1.0.0-RC.8

package/chunks/Dialog.o7bcfCBf.js

@@ -0,0 +1,148 @@
+"use client";
+import { j as n } from "./jsx-runtime.C115EyI4.js";
+import { c as s } from "./index.CvOaL64Y.js";
+import { useRef as v, useState as x, useEffect as b } from "react";
+import { DSButton as j } from "../button.DPrDynn_.js";
+import { g as B } from "./helpers.B1JT5ShS.js";
+import '../assets/Dialog.DdLMmOLt.css';const E = "_dialog_qvh8h_80", C = "_content-wrapper_qvh8h_151", F = "_content-wrapper--no-footer_qvh8h_157", W = "_close-button_qvh8h_165", k = "_header_qvh8h_178", R = "_content_qvh8h_151", y = "_footer_qvh8h_180", z = "_header--scrollable_qvh8h_201", L = "_header--close-button_qvh8h_210", M = "_content--no-footer_qvh8h_223", H = "_footer--scrollable_qvh8h_230", o = {
+  dialog: E,
+  "content-wrapper": "_content-wrapper_qvh8h_151",
+  contentWrapper: C,
+  "content-wrapper--no-footer": "_content-wrapper--no-footer_qvh8h_157",
+  contentWrapperNoFooter: F,
+  "close-button": "_close-button_qvh8h_165",
+  closeButton: W,
+  header: k,
+  content: R,
+  footer: y,
+  "header--scrollable": "_header--scrollable_qvh8h_201",
+  headerScrollable: z,
+  "header--close-button": "_header--close-button_qvh8h_210",
+  headerCloseButton: L,
+  "content--no-footer": "_content--no-footer_qvh8h_223",
+  contentNoFooter: M,
+  "footer--scrollable": "_footer--scrollable_qvh8h_230",
+  footerScrollable: H
+}, I = ({ tabIndex: r }) => {
+  if (r || r === 0)
+    throw new Error(
+      B(
+        "DSDialog",
+        "Do not pass the tabindex property to the DSDialog component as it is not interactive and does not receive focus. The DSDialogs contents, including the close button contained in the DSDialog, can receive focus and be interactive."
+      )
+    );
+}, G = ({
+  children: r,
+  className: m,
+  closeButtonLabel: g = "Close dialog",
+  disableBackdropClose: q = !1,
+  footer: c,
+  header: D,
+  hideCloseButton: a = !1,
+  isOpen: h,
+  onClose: l,
+  ...i
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { tabIndex: e } = i;
+    I({
+      tabIndex: e
+    });
+  }
+  const t = v(null), _ = v(null), [d, S] = x(!1);
+  b(() => {
+    const e = _.current;
+    if (e) {
+      const f = () => {
+        S(
+          e.scrollHeight > e.clientHeight
+        );
+      };
+      f();
+      const p = new ResizeObserver(f);
+      return p.observe(e), () => {
+        p.disconnect();
+      };
+    }
+  }, []), b(() => {
+    const e = t.current;
+    if (e)
+      return e.addEventListener("close", u), h ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", u);
+      };
+  }, [h, l]);
+  const u = () => {
+    l && l();
+  }, N = (e) => {
+    q || t.current && e.target === t.current && t.current.close();
+  }, w = () => {
+    t.current && t.current.close();
+  };
+  return /* @__PURE__ */ n.jsx(
+    "dialog",
+    {
+      ...i,
+      ref: t,
+      className: o.dialog,
+      onMouseDown: (e) => N(e),
+      "aria-modal": "true",
+      children: /* @__PURE__ */ n.jsxs(
+        "div",
+        {
+          className: s(o.contentWrapper, m, {
+            [o.contentWrapperNoFooter]: !c
+          }),
+          children: [
+            !a && /* @__PURE__ */ n.jsx(
+              j,
+              {
+                className: o.closeButton,
+                hideLabel: !0,
+                iconName: "cross",
+                size: "small",
+                type: "button",
+                variant: "ghost",
+                onClick: () => w(),
+                children: g
+              }
+            ),
+            /* @__PURE__ */ n.jsx(
+              "header",
+              {
+                className: s(o.header, {
+                  [o.headerCloseButton]: !a,
+                  [o.headerScrollable]: d
+                }),
+                children: D
+              }
+            ),
+            /* @__PURE__ */ n.jsx(
+              "div",
+              {
+                ref: _,
+                className: s(o.content, {
+                  [o.contentNoFooter]: !c
+                }),
+                tabIndex: 0,
+                children: r
+              }
+            ),
+            c && /* @__PURE__ */ n.jsx(
+              "footer",
+              {
+                className: s(o.footer, {
+                  [o.footerScrollable]: d
+                }),
+                children: c
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  G as D,
+  I as v
+};

package/chunks/Drawer.VbG4cfgJ.js

@@ -0,0 +1,154 @@
+"use client";
+import { j as r } from "./jsx-runtime.C115EyI4.js";
+import { c as n } from "./index.CvOaL64Y.js";
+import { useRef as b, useState as j, useEffect as w } from "react";
+import { DSButton as B } from "../button.DPrDynn_.js";
+import { g as R } from "./helpers.B1JT5ShS.js";
+import '../assets/Drawer.BqBgbSuP.css';const W = "_drawer_h62s5_85", C = "_drawer--end_h62s5_143", F = "_content-wrapper_h62s5_161", k = "_content-wrapper--no-footer_h62s5_167", I = "_close-button_h62s5_170", O = "_header_h62s5_183", y = "_content_h62s5_161", z = "_footer_h62s5_185", L = "_header--scrollable_h62s5_206", M = "_header--close-button_h62s5_215", H = "_content--no-footer_h62s5_229", P = "_footer--scrollable_h62s5_236", o = {
+  drawer: W,
+  "drawer--end": "_drawer--end_h62s5_143",
+  drawerEnd: C,
+  "content-wrapper": "_content-wrapper_h62s5_161",
+  contentWrapper: F,
+  "content-wrapper--no-footer": "_content-wrapper--no-footer_h62s5_167",
+  contentWrapperNoFooter: k,
+  "close-button": "_close-button_h62s5_170",
+  closeButton: I,
+  header: O,
+  content: y,
+  footer: z,
+  "header--scrollable": "_header--scrollable_h62s5_206",
+  headerScrollable: L,
+  "header--close-button": "_header--close-button_h62s5_215",
+  headerCloseButton: M,
+  "content--no-footer": "_content--no-footer_h62s5_229",
+  contentNoFooter: H,
+  "footer--scrollable": "_footer--scrollable_h62s5_236",
+  footerScrollable: P
+}, K = ["start", "end"], T = ({ tabIndex: s }) => {
+  if (s || s === 0)
+    throw new Error(
+      R(
+        "DSDrawer",
+        "Do not pass the tabindex property to the DSDrawer component as it is not interactive and does not receive focus. The DSDrawers contents, including the close button contained in the DSDrawer, can receive focus and be interactive."
+      )
+    );
+}, Q = ({
+  children: s,
+  className: m,
+  closeButtonLabel: D = "Close modal",
+  disableBackdropClose: S = !1,
+  footer: c,
+  header: N,
+  hideCloseButton: l = !1,
+  position: v = "start",
+  isOpen: d,
+  onClose: a,
+  ..._
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { tabIndex: e } = _;
+    T({
+      tabIndex: e
+    });
+  }
+  const t = b(null), h = b(null), [i, E] = j(!1);
+  w(() => {
+    const e = h.current;
+    if (e) {
+      const f = () => {
+        E(
+          e.scrollHeight > e.clientHeight
+        );
+      };
+      f();
+      const p = new ResizeObserver(f);
+      return p.observe(e), () => {
+        p.disconnect();
+      };
+    }
+  }, []), w(() => {
+    const e = t.current;
+    if (e)
+      return e.addEventListener("close", u), d ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", u);
+      };
+  }, [d, a]);
+  const u = () => {
+    a && a();
+  }, x = (e) => {
+    S || t.current && e.target === t.current && t.current.close();
+  }, g = () => {
+    t.current && t.current.close();
+  };
+  return /* @__PURE__ */ r.jsx(
+    "dialog",
+    {
+      ..._,
+      ref: t,
+      className: n(o.drawer, {
+        [o.drawerEnd]: v === "end"
+      }),
+      onMouseDown: (e) => x(e),
+      "aria-modal": "true",
+      children: /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          className: n(o.contentWrapper, m, {
+            [o.contentWrapperNoFooter]: !c
+          }),
+          children: [
+            !l && /* @__PURE__ */ r.jsx(
+              B,
+              {
+                className: o.closeButton,
+                hideLabel: !0,
+                iconName: "cross",
+                size: "small",
+                type: "button",
+                variant: "ghost",
+                onClick: () => g(),
+                children: D
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "header",
+              {
+                className: n(o.header, {
+                  [o.headerCloseButton]: !l,
+                  [o.headerScrollable]: i
+                }),
+                children: N
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "div",
+              {
+                ref: h,
+                className: n(o.content, {
+                  [o.contentNoFooter]: !c
+                }),
+                tabIndex: 0,
+                children: s
+              }
+            ),
+            c && /* @__PURE__ */ r.jsx(
+              "footer",
+              {
+                className: n(o.footer, {
+                  [o.footerScrollable]: i
+                }),
+                children: c
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Q as D,
+  K as a,
+  T as v
+};

package/chunks/{Input.utils.AKWCNkpA.js → Input.utils.BGUhXCNP.js}

@@ -1,7 +1,8 @@
 "use client";
 import { g as t } from "./helpers.B1JT5ShS.js";
 import "react";
-const p = typeof document < "u", a = 8, i = 5, I = ["medium", "small"], u = [
+import { h as p } from "./has-document.r9i9TxKV.js";
+const a = 8, i = 5, T = ["medium", "small"], u = [
   "color",
   "date",
   "datetime-local",
@@ -26,15 +27,15 @@ const p = typeof document < "u", a = 8, i = 5, I = ["medium", "small"], u = [
   "submit",
   "image",
   "datetime"
-], T = ({
+], b = ({
   id: e,
   label: n,
   prefix: o,
   suffix: s,
   leadingIconName: r,
   leadingIconSource: d,
-  actionButtonIconName: c,
-  actionButtonIconSource: m
+  actionButtonIconName: m,
+  actionButtonIconSource: c
 }) => {
   if (!e)
     throw new Error(
@@ -65,13 +66,13 @@ const p = typeof document < "u", a = 8, i = 5, I = ["medium", "small"], u = [
       "DSInput",
       "Prefix and a leading Icon cannot be used at the same time."
     )
-  ), s && (c || m) && console.warn(
+  ), s && (m || c) && console.warn(
     t(
       "DSInput",
       "Suffix and an action button cannot be used at the same time."
     )
   );
-}, b = (e) => {
+}, D = (e) => {
   if (!u.includes(e) && !l.includes(e))
     throw new Error(
       t(
@@ -94,17 +95,17 @@ const p = typeof document < "u", a = 8, i = 5, I = ["medium", "small"], u = [
     hidden: 'Type hidden is not supported by DSInput component. Use a default <input type="hidden" /> element instead.'
   };
   n[e] && console.warn(t("DSInput", n[e]));
-}, h = () => p && "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), D = (e, n) => h() && (e || n), y = (e) => e === "date" || e === "datetime-local" || e === "month", U = (e) => e === "time";
+}, h = () => p && "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), y = (e, n) => h() && (e || n), U = (e) => e === "date" || e === "datetime-local" || e === "month", P = (e) => e === "time";
 export {
-  I,
+  T as I,
   a as M,
   u as S,
   l as U,
   i as a,
-  b,
-  U as c,
+  D as b,
+  P as c,
   h,
-  y as i,
-  D as s,
-  T as v
+  U as i,
+  y as s,
+  b as v
 };

package/chunks/{InputPassword.a7zHKrmM.js → InputPassword.TlusvIds.js}

@@ -4,7 +4,7 @@ import { c as i } from "./index.CvOaL64Y.js";
 import { useState as D } from "react";
 import { u as C } from "./useBreakpoint.5xBNDiCf.js";
 import { Asterisk as L } from "../asterisk.Cjbk-xZi.js";
-import { DSButton as $ } from "../button.L1lgCuM9.js";
+import { DSButton as $ } from "../button.DPrDynn_.js";
 import { DSSystemFeedback as E } from "../systemfeedback.CUWch42u.js";
 import { g as b } from "./helpers.B1JT5ShS.js";
 import '../assets/InputPassword.VCNO8ANM.css';const q = "_input_1s7sy_226", R = "_input--invalid_1s7sy_336", V = "_input--small_1s7sy_343", O = "_input--has-leading-icon_1s7sy_395", F = "_input--has-action-button_1s7sy_398", M = "_input--has-second-action-button_1s7sy_401", T = "_input--has-affix_1s7sy_413", G = "_input--is-ready_1s7sy_427", J = "_root_1s7sy_434", K = "_hint_1s7sy_442", Q = "_label_1s7sy_442", U = "_wrapper_1s7sy_446", W = "_action-button_1s7sy_452", X = "_label--hidden_1s7sy_469", Y = "_feedback_1s7sy_496", s = {

package/chunks/{InputSearch.DITRiB92.js → InputSearch.BbCdCCax.js}

@@ -5,7 +5,7 @@ import { useState as G, useRef as N, useEffect as w } from "react";
 import { g as S, a as J } from "./helpers.B1JT5ShS.js";
 import { u as K } from "./useBreakpoint.5xBNDiCf.js";
 import { Asterisk as Q } from "../asterisk.Cjbk-xZi.js";
-import { DSButton as D } from "../button.L1lgCuM9.js";
+import { DSButton as D } from "../button.DPrDynn_.js";
 import { DSSystemFeedback as U } from "../systemfeedback.CUWch42u.js";
 import '../assets/InputSearch.BMRAb95l.css';const X = "_input_12zpu_226", Y = "_input--invalid_12zpu_336", Z = "_input--small_12zpu_343", tt = "_input--has-leading-icon_12zpu_395", nt = "_input--has-action-button_12zpu_398", et = "_input--has-second-action-button_12zpu_401", at = "_input--has-affix_12zpu_413", st = "_input--is-ready_12zpu_427", ot = "_root_12zpu_434", it = "_hint_12zpu_442", ut = "_label_12zpu_442", ct = "_wrapper_12zpu_446", lt = "_action-button_12zpu_452", pt = "_second-action-button_12zpu_456", rt = "_label--hidden_12zpu_473", _t = "_feedback_12zpu_500", t = {
   input: X,

package/chunks/{InputStepper.BkncCNwJ.js → InputStepper.DR3NR_II.js}

@@ -4,8 +4,8 @@ import { c } from "./index.CvOaL64Y.js";
 import { useState as _, useRef as N, useEffect as w, useLayoutEffect as M } from "react";
 import { u as _t } from "./useBreakpoint.5xBNDiCf.js";
 import { Asterisk as ft } from "../asterisk.Cjbk-xZi.js";
-import { DSButton as X } from "../button.L1lgCuM9.js";
-import { M as E, a as H } from "./Input.utils.AKWCNkpA.js";
+import { DSButton as X } from "../button.DPrDynn_.js";
+import { M as E, a as H } from "./Input.utils.BGUhXCNP.js";
 import { DSSystemFeedback as ht } from "../systemfeedback.CUWch42u.js";
 import { g as y } from "./helpers.B1JT5ShS.js";
 import '../assets/InputStepper.BKjqNi-i.css';const mt = "_input_xdphx_226", bt = "_input--invalid_xdphx_336", St = "_input--small_xdphx_343", yt = "_input--has-leading-icon_xdphx_395", vt = "_input--has-action-button_xdphx_398", It = "_input--has-second-action-button_xdphx_401", gt = "_input--has-affix_xdphx_413", At = "_input--is-ready_xdphx_427", Bt = "_root_xdphx_437", Dt = "_hint_xdphx_445", Nt = "_label_xdphx_445", wt = "_wrapper_xdphx_449", Et = "_affix_xdphx_455", Ht = "_affix--small_xdphx_475", Lt = "_affix--disabled_xdphx_487", jt = "_prefix_xdphx_490", Rt = "_affix--readonly_xdphx_493", kt = "_suffix_xdphx_503", Ct = "_action-button_xdphx_510", $t = "_label--hidden_xdphx_527", Ft = "_feedback_xdphx_554", Vt = "_second-action-button_xdphx_568", Pt = "_value-announcer_xdphx_572", n = {

package/chunks/{Notification.DVVuSOqG.js → Notification.B6a6FOlS.js}

@@ -1,8 +1,8 @@
 "use client";
 import { j as e } from "./jsx-runtime.C115EyI4.js";
 import { c as s } from "./index.CvOaL64Y.js";
-import { D as p } from "./Icon.n4XZrQ4N.js";
-import { DSButton as g } from "../button.L1lgCuM9.js";
+import { DSButton as p } from "../button.DPrDynn_.js";
+import { D as g } from "./Icon.n4XZrQ4N.js";
 import '../assets/Notification.Bg63cvs4.css';const N = "_root_l12pe_76", f = "_root--success_l12pe_100", h = "_root--error_l12pe_104", I = "_root--warning_l12pe_108", x = "_root--hide-icon_l12pe_112", A = "_content_l12pe_126", C = "_content--hide-close-button_l12pe_133", H = "_content--hide-icon_l12pe_136", j = "_icon_l12pe_140", S = "_message_l12pe_144", w = "_custom-action-area_l12pe_157", o = {
   root: N,
   "root--success": "_root--success_l12pe_100",
@@ -61,7 +61,7 @@ import '../assets/Notification.Bg63cvs4.css';const N = "_root_l12pe_76", f = "_r
   return /* @__PURE__ */ e.jsxs("div", { className: d, ...m, role: T[t], children: [
     /* @__PURE__ */ e.jsxs("div", { className: u, children: [
       !n && /* @__PURE__ */ e.jsx(
-        p,
+        g,
         {
           name: O[t],
           className: o.icon,
@@ -70,7 +70,7 @@ import '../assets/Notification.Bg63cvs4.css';const N = "_root_l12pe_76", f = "_r
       ),
       /* @__PURE__ */ e.jsx("div", { className: o.message, children: i }),
       !r && /* @__PURE__ */ e.jsx(
-        g,
+        p,
         {
           hideLabel: !0,
           iconName: "cross",

package/chunks/Toast.BpyBIPFW.js

@@ -0,0 +1,89 @@
+"use client";
+import { j as c } from "./jsx-runtime.C115EyI4.js";
+import { c as e } from "./index.CvOaL64Y.js";
+import { forwardRef as u } from "react";
+import { DSButton as g } from "../button.DPrDynn_.js";
+import { D as h } from "./Icon.n4XZrQ4N.js";
+import '../assets/Toast.ChT0hchk.css';const p = "_root_cdscl_80", x = "_root--closing_cdscl_94", I = "_fade-out_cdscl_1", S = "_move-in_cdscl_1", N = "_root--success_cdscl_129", j = "_root--info_cdscl_133", v = "_root--warning_cdscl_137", w = "_content_cdscl_142", C = "_content--hide-icon_cdscl_149", D = "_icon_cdscl_153", O = "_message_cdscl_157", o = {
+  root: p,
+  "root--closing": "_root--closing_cdscl_94",
+  rootClosing: x,
+  "fade-out": "_fade-out_cdscl_1",
+  fadeOut: I,
+  "move-in": "_move-in_cdscl_1",
+  moveIn: S,
+  "root--success": "_root--success_cdscl_129",
+  rootSuccess: N,
+  "root--info": "_root--info_cdscl_133",
+  rootInfo: j,
+  "root--warning": "_root--warning_cdscl_137",
+  rootWarning: v,
+  content: w,
+  "content--hide-icon": "_content--hide-icon_cdscl_149",
+  contentHideIcon: C,
+  icon: D,
+  message: O
+}, T = {
+  success: "circle-check-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, H = u(
+  ({
+    message: n,
+    className: r,
+    hideIcon: t = !1,
+    variant: s = "info",
+    onClick: i,
+    onMouseEnter: a,
+    onMouseLeave: _,
+    ...l
+  }, d) => {
+    const m = e(o.root, r, {
+      [o.rootSuccess]: s === "success",
+      [o.rootWarning]: s === "warning",
+      [o.rootInfo]: s === "info"
+    }), f = e(o.content, {
+      [o.contentHideIcon]: t
+    });
+    return /* @__PURE__ */ c.jsx(
+      "aside",
+      {
+        className: m,
+        ref: d,
+        popover: "manual",
+        "data-ds-toast": !0,
+        onMouseEnter: a,
+        onMouseLeave: _,
+        "aria-label": n,
+        ...l,
+        children: /* @__PURE__ */ c.jsxs("div", { className: f, children: [
+          !t && /* @__PURE__ */ c.jsx(
+            h,
+            {
+              name: T[s],
+              className: o.icon,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ c.jsx("div", { className: o.message, children: n }),
+          /* @__PURE__ */ c.jsx(
+            g,
+            {
+              hideLabel: !0,
+              iconName: "cross",
+              size: "small",
+              variant: "ghost",
+              onClick: i,
+              children: "Close toast"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+H.displayName = "DSToast";
+export {
+  H as D,
+  o as s
+};

package/chunks/has-document.r9i9TxKV.js

@@ -0,0 +1,5 @@
+"use client";
+const e = typeof document < "u";
+export {
+  e as h
+};

package/{combobox.CRlhqmuO.js → combobox.Dgp3kvFR.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.BVv0Zcvc.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 {};