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

package/styles/scss/lib/_text.scss

@@ -1,7 +1,8 @@
 // Base mixin for text styles
 @mixin base-text($fontFamily, $fontSize, $lineHeight) {
   font-family: #{unquote(
-      $fontFamily + ', Arial Narrow, Arial, Heiti SC, sans-serif'
+      $fontFamily +
+        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
     )};
   font-style: normal;
   font-variant: normal;
@@ -12,52 +13,98 @@
   line-height: $lineHeight;
 }
 
+// Mixin for regular text
+@mixin base-text-regular($fontFamily, $fontSize, $lineHeight) {
+  @include base-text($fontFamily, $fontSize, $lineHeight);
+  /* x-height 414 https://vertical-metrics.netlify.app/ */
+  font-size-adjust: 0.414;
+}
+
+// Mixin for bold text
+@mixin base-text-bold($fontFamily, $fontSize, $lineHeight) {
+  @include base-text($fontFamily, $fontSize, $lineHeight);
+  /* x-height 426 https://vertical-metrics.netlify.app/ */
+  font-size-adjust: 0.426;
+}
+
 // Mixins for specific text sizes
 @mixin ds-text-large {
-  @include base-text('STIHL Contraface Digital Text Regular', 1.25rem, 1.6);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1.25rem,
+    1.6
+  );
 }
 
 @mixin ds-text-large-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
 }
 
 @mixin ds-text-medium {
-  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.5);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.5
+  );
 }
 
 @mixin ds-text-medium-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
 }
 
 @mixin ds-text-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
 }
 
 @mixin ds-text-small-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
 }
 
 @mixin ds-text-x-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.75rem, 1.33);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.75rem,
+    1.33
+  );
 }
 
 @mixin ds-text-x-small-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
 }
 
 @mixin ds-text-xx-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.625rem, 1.6);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.625rem,
+    1.6
+  );
 }
 
 // Utility text styles
 @mixin ds-utility-medium {
-  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.25);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.25
+  );
 }
 
 @mixin ds-utility-medium-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.25);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.25);
 }
 
 @mixin ds-utility-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin ds-utility-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
 }

package/styles/scss/lib/_theme.scss

@@ -70,13 +70,14 @@ $ds-theme-light-background-color-tertiary: $ds-color-core-grey-light;
 $ds-theme-light-background-color-transparent-hover: $ds-color-core-black-opacity-10;
 $ds-theme-light-background-color-transparent-pressed: $ds-color-core-black-opacity-10;
 $ds-theme-light-border-color-feedback-error: $ds-color-core-red-base;
+$ds-theme-light-border-color-feedback-info: $ds-color-core-grey-dark;
 $ds-theme-light-border-color-feedback-success: $ds-color-core-green-base;
 $ds-theme-light-border-color-feedback-warning: $ds-color-core-yellow-base;
 $ds-theme-light-border-color-focus: $ds-color-core-grey-ultra-deep;
 $ds-theme-light-border-color-primary-disabled: $ds-color-core-black-opacity-50;
 $ds-theme-light-border-color-primary-inverse: $ds-color-core-white-base;
 $ds-theme-light-border-color-primary: $ds-color-core-grey-ultra-deep;
-$ds-theme-light-border-color-secondary-disabled: $ds-color-core-black-opacity-50;
+$ds-theme-light-border-color-secondary-disabled: $ds-color-core-black-opacity-10;
 $ds-theme-light-border-color-secondary: $ds-color-core-grey-base;
 $ds-theme-light-border-color-tertiary: $ds-color-core-grey-mid;
 $ds-theme-light-content-color-brand-disabled: $ds-color-core-black-opacity-50;
@@ -107,10 +108,10 @@ $ds-theme-dark-background-color-brand-disabled: $ds-color-core-grey-mid;
 $ds-theme-dark-background-color-brand-hover: $ds-color-core-orange-dark;
 $ds-theme-dark-background-color-brand-pressed: $ds-color-core-orange-dark;
 $ds-theme-dark-background-color-brand: $ds-color-core-orange-base;
-$ds-theme-dark-background-color-feedback-error: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-feedback-info: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-feedback-success: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-feedback-warning: $ds-color-core-grey-ultra-deep;
+$ds-theme-dark-background-color-feedback-error: $ds-color-core-grey-deep;
+$ds-theme-dark-background-color-feedback-info: $ds-color-core-grey-deep;
+$ds-theme-dark-background-color-feedback-success: $ds-color-core-grey-deep;
+$ds-theme-dark-background-color-feedback-warning: $ds-color-core-grey-deep;
 $ds-theme-dark-background-color-primary-disabled: $ds-color-core-black-base;
 $ds-theme-dark-background-color-primary-hover: $ds-color-core-grey-deep;
 $ds-theme-dark-background-color-primary-inverse-disabled: $ds-color-core-grey-mid;
@@ -122,18 +123,19 @@ $ds-theme-dark-background-color-primary: $ds-color-core-black-base;
 $ds-theme-dark-background-color-secondary-disabled: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-background-color-secondary-inverse: $ds-color-core-grey-light;
 $ds-theme-dark-background-color-secondary: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-sustainability: $ds-color-core-grey-ultra-deep;
+$ds-theme-dark-background-color-sustainability: $ds-color-core-grey-deep;
 $ds-theme-dark-background-color-tertiary: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-background-color-transparent-hover: $ds-color-core-white-opacity-15;
 $ds-theme-dark-background-color-transparent-pressed: $ds-color-core-white-opacity-15;
 $ds-theme-dark-border-color-feedback-error: $ds-color-core-red-base;
+$ds-theme-dark-border-color-feedback-info: $ds-color-core-grey-dark;
 $ds-theme-dark-border-color-feedback-success: $ds-color-core-green-base;
 $ds-theme-dark-border-color-feedback-warning: $ds-color-core-yellow-base;
 $ds-theme-dark-border-color-focus: $ds-color-core-white-base;
 $ds-theme-dark-border-color-primary-disabled: $ds-color-core-white-opacity-50;
 $ds-theme-dark-border-color-primary-inverse: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-border-color-primary: $ds-color-core-grey-ultra-light;
-$ds-theme-dark-border-color-secondary-disabled: $ds-color-core-white-opacity-50;
+$ds-theme-dark-border-color-secondary-disabled: $ds-color-core-white-opacity-15;
 $ds-theme-dark-border-color-secondary: $ds-color-core-grey-dark;
 $ds-theme-dark-border-color-tertiary: $ds-color-core-grey-deep;
 $ds-theme-dark-content-color-brand-disabled: $ds-color-core-white-opacity-50;

package/styles/scss/lib/_transition.scss

@@ -1,3 +1,4 @@
+@import '_animation.scss';
 /**
  *
  * This mixin provides a concise way to set transitions with a default
@@ -7,20 +8,38 @@
  * motion and adjusts the transition duration accordingly.
  *
  * Example Usage:
- * @include transition(opacity, transform);
+ * @include ds-transition((opacity, transform), '250', 'ease-out');
+ * @include ds-transition(width, $easing-key: 'ease-out');
  */
-@mixin transition($properties...) {
+@mixin ds-transition($properties, $duration-key: '100', $easing-key: 'linear') {
   @if length($properties) == 0 or $properties == null {
-    @error "No properties provided for transition mixin.";
+    @error "[STIHL Design System] - [ds-transition()]: No properties provided for ds-transition() mixin.";
+  }
+
+  $duration: map-get($ds-animation-durations, $duration-key);
+  $easing: map-get($ds-animation-easing-functions, $easing-key);
+
+  @if not map-has-key($ds-animation-durations, $duration-key) {
+    @error "[STIHL Design System] - [ds-transition()]: Duration key '#{$duration-key}' is not available in the ds-transition() mixin.";
+  }
+
+  @if not map-has-key($ds-animation-easing-functions, $easing-key) {
+    @error "[STIHL Design System] - [ds-transition()]: Easing key '#{$easing-key}' is not available in the ds-transition() mixin.";
   }
 
   $transition-values: ();
   @each $prop in $properties {
-    $transition-values: append($transition-values, #{$prop} 0.3s ease, comma);
+    $transition-values: append(
+      $transition-values,
+      #{$prop} #{$duration} #{$easing},
+      comma
+    );
   }
-  transition: $transition-values;
+  & {
+    transition: $transition-values;
 
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 0ms;
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 }

package/switch.CoNnIhM4.js

@@ -0,0 +1,65 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as b } from "./chunks/index.CvOaL64Y.js";
+import "react";
+import { D as y } from "./chunks/Icon.C2o2seDb.js";
+import { DSSpinner as f } from "./spinner.D-xrotcu.js";
+import './assets/switch.C1Ei0-z8.css';const x = "_root_10ymp_76", j = "_root--label-right_10ymp_116", k = "_root--stretched_10ymp_119", S = "_loader_10ymp_129", g = "_thumb_10ymp_187", w = "_root--checked_10ymp_202", o = {
+  root: x,
+  "root--label-right": "_root--label-right_10ymp_116",
+  rootLabelRight: j,
+  "root--stretched": "_root--stretched_10ymp_119",
+  rootStretched: k,
+  switch: "_switch_10ymp_124",
+  loader: S,
+  thumb: g,
+  "root--checked": "_root--checked_10ymp_202",
+  rootChecked: w
+}, E = ({
+  children: h,
+  aria: i,
+  alignLabel: l = "left",
+  checked: e = !1,
+  className: m,
+  dataTrackingid: _,
+  disabled: s = !1,
+  loading: r = !1,
+  stretched: n = !1,
+  onClick: a,
+  ...p
+}) => {
+  const d = b(o.root, m, {
+    [o.rootChecked]: e === !0,
+    [o.rootStretched]: n === !0,
+    [o.rootLabelRight]: l === "right"
+  }), u = (c) => {
+    if (s || r) {
+      c.preventDefault();
+      return;
+    }
+    a && a(c);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      className: d,
+      "data-trackingid": _,
+      onClick: u,
+      ...i,
+      ...p,
+      type: "button",
+      role: "switch",
+      "aria-checked": e,
+      "aria-disabled": s || r,
+      "aria-busy": r,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: h }),
+        !r && /* @__PURE__ */ t.jsx("span", { className: o.switch, children: /* @__PURE__ */ t.jsx("span", { className: o.thumb, children: /* @__PURE__ */ t.jsx(y, { name: "check", "aria-hidden": "true" }) }) }),
+        r && /* @__PURE__ */ t.jsx("span", { className: o.loader, children: /* @__PURE__ */ t.jsx(f, { aria: { "aria-label": "Loading state" } }) })
+      ]
+    }
+  );
+};
+export {
+  E as DSSwitch
+};

package/switch.d.ts

@@ -1 +1,2 @@
 export * from './components/Switch/Switch'
+export {}

package/systemfeedback.ZzRUAVYX.js

@@ -0,0 +1,25 @@
+"use client";
+import { j as o } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import { D as n } from "./chunks/Icon.C2o2seDb.js";
+import './assets/systemfeedback.Sq0bAIyf.css';const i = "_root_10tno_76", l = {
+  root: i
+}, m = {
+  valid: "circle-check-colored",
+  invalid: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored"
+}, p = ({
+  className: e,
+  message: r,
+  type: s,
+  ...t
+}) => {
+  const a = c(l.root, e);
+  return /* @__PURE__ */ o.jsxs("div", { className: a, ...t, role: "alert", children: [
+    /* @__PURE__ */ o.jsx(n, { name: m[s], "aria-hidden": "true" }),
+    r
+  ] });
+};
+export {
+  p as DSSystemFeedback
+};

package/systemfeedback.d.ts

@@ -1 +1,2 @@
 export * from './components/SystemFeedback/SystemFeedback'
+export {}

package/text.d.ts

@@ -1 +1,2 @@
 export * from './components/Text/Text'
+export {}

package/text.fMcHzVbH.js

@@ -0,0 +1,57 @@
+"use client";
+import { j as b } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as x } from "./chunks/index.CvOaL64Y.js";
+import './assets/text.DxKFcfY6.css';const c = "_root_112bt_76", n = "_root--large_112bt_82", u = "_root--large-bold_112bt_94", S = "_root--medium_112bt_106", g = "_root--medium-bold_112bt_118", B = "_root--small_112bt_130", i = "_root--small-bold_112bt_142", X = "_root--x-small_112bt_154", k = "_root--x-small-bold_112bt_166", L = "_root--xx-small_112bt_178", M = "_root--theme-dark_112bt_275", o = {
+  root: c,
+  "root--large": "_root--large_112bt_82",
+  rootLarge: n,
+  "root--large-bold": "_root--large-bold_112bt_94",
+  rootLargeBold: u,
+  "root--medium": "_root--medium_112bt_106",
+  rootMedium: S,
+  "root--medium-bold": "_root--medium-bold_112bt_118",
+  rootMediumBold: g,
+  "root--small": "_root--small_112bt_130",
+  rootSmall: B,
+  "root--small-bold": "_root--small-bold_112bt_142",
+  rootSmallBold: i,
+  "root--x-small": "_root--x-small_112bt_154",
+  rootXSmall: X,
+  "root--x-small-bold": "_root--x-small-bold_112bt_166",
+  rootXSmallBold: k,
+  "root--xx-small": "_root--xx-small_112bt_178",
+  rootXxSmall: L,
+  "root--theme-dark": "_root--theme-dark_112bt_275",
+  rootThemeDark: M
+}, h = ({
+  children: r,
+  className: m,
+  size: l = "medium",
+  tag: a = "p",
+  theme: _ = "light",
+  weight: t = "normal",
+  ...d
+}) => {
+  const s = a, e = x(o.root, m, {
+    // large
+    [o.rootLarge]: l === "large",
+    [o.rootLargeBold]: l === "large" && t === "bold",
+    // medium
+    [o.rootMedium]: l == "medium",
+    [o.rootMediumBold]: l === "medium" && t === "bold",
+    // small
+    [o.rootSmall]: l == "small",
+    [o.rootSmallBold]: l == "small" && t === "bold",
+    // x-small
+    [o.rootXSmall]: l == "x-small",
+    [o.rootXSmallBold]: l == "x-small" && t === "bold",
+    // xx-small
+    [o.rootXxSmall]: l == "xx-small",
+    // dark theme
+    [o.rootThemeDark]: _ === "dark"
+  });
+  return /* @__PURE__ */ b.jsx(s, { className: e, ...d, children: r });
+};
+export {
+  h as DSText
+};

package/textarea.DJc527nX.js

@@ -0,0 +1,12 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./chunks/helpers.B1JT5ShS.js";
+import "./asterisk.DDn-yX4P.js";
+import "./systemfeedback.ZzRUAVYX.js";
+import { D as x } from "./chunks/Textarea.DcB8hKnO.js";
+export {
+  x as DSTextarea
+};

package/textarea.d.ts

@@ -1 +1,2 @@
 export * from './components/Textarea/Textarea'
+export {}

package/title.LY1ylQsb.js

@@ -0,0 +1,36 @@
+"use client";
+import { j as o } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as g } from "./chunks/index.CvOaL64Y.js";
+import './assets/title.f74Bosn-.css';const n = "_root_1lq13_76", h = "_root--x-large-uppercase_1lq13_79", m = "_root--large-uppercase_1lq13_96", d = "_root--theme-dark_1lq13_113", u = "_dash_1lq13_116", r = {
+  root: n,
+  "root--x-large-uppercase": "_root--x-large-uppercase_1lq13_79",
+  rootXLargeUppercase: h,
+  "root--large-uppercase": "_root--large-uppercase_1lq13_96",
+  rootLargeUppercase: m,
+  "root--theme-dark": "_root--theme-dark_1lq13_113",
+  rootThemeDark: d,
+  dash: u
+}, q = ({
+  children: a,
+  className: t,
+  size: e = "x-large",
+  tag: s = "h1",
+  // Design suggested to set default tag to h1
+  theme: p = "light",
+  ...c
+}) => {
+  const l = s, _ = g(r.root, t, {
+    // sizes
+    [r.rootXLargeUppercase]: e === "x-large",
+    [r.rootLargeUppercase]: e === "large",
+    // dark theme
+    [r.rootThemeDark]: p === "dark"
+  });
+  return /* @__PURE__ */ o.jsxs(l, { className: _, ...c, children: [
+    a,
+    /* @__PURE__ */ o.jsx("span", { className: r.dash, "aria-hidden": "true", children: "ƒ" })
+  ] });
+};
+export {
+  q as DSTitle
+};

package/title.d.ts

@@ -1 +1,2 @@
 export * from './components/Title/Title'
+export {}

package/toast.D48GFmp0.js

@@ -0,0 +1,10 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.C5opEJ6x.js";
+import "./chunks/Icon.C2o2seDb.js";
+import { D as s } from "./chunks/Toast.DrzxdzVW.js";
+export {
+  s as DSToast
+};

package/toast.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Toast/Toast'
+export {}

package/toastmanager.Dl8-Q3ED.js

@@ -0,0 +1,119 @@
+"use client";
+import { j as g } from "./chunks/jsx-runtime.C115EyI4.js";
+import { createContext as y, useContext as C, useState as S, useRef as O, useEffect as A, useMemo as j } from "react";
+import { g as a } from "./chunks/helpers.B1JT5ShS.js";
+import { b as E, g as w } from "./chunks/AriaLiveRegions.utils.BGSZafnS.js";
+import { D as _, s as U } from "./chunks/Toast.DrzxdzVW.js";
+import { h as q } from "./chunks/has-document.r9i9TxKV.js";
+const Q = () => {
+  if (!E() || !w())
+    throw new Error(
+      a(
+        "DSToast",
+        'The DSAriaLiveRegions component has to be placed at the root of your application, as close to the "body" as possible, e.g. in your "App.tsx" or "layout.tsx".'
+      )
+    );
+}, k = () => {
+  if (!q)
+    return;
+  if (document.querySelectorAll("[data-ds-toast]").length > 1)
+    throw new Error(
+      a(
+        "DSToast",
+        'The destructured "toast" element should only be used once in the DOM.'
+      )
+    );
+}, i = "data-ds-toast-timeout-id", D = "closing", B = 1e4, x = y(void 0), J = () => {
+  const n = C(x);
+  if (!n)
+    throw new Error(
+      a(
+        "DSToastProvider",
+        "useDSToast must be used within a <DSToastProvider />, which wraps around your root component."
+      )
+    );
+  return n;
+}, K = ({
+  children: n
+}) => {
+  const [u, c] = S([]), [s, l] = S(null), o = O(null);
+  A(() => {
+    !s && u.length > 0 && setTimeout(() => {
+      l(u[0]);
+    });
+  }, [u]), A(() => {
+    s && (L(s.message, s.variant), I());
+  }, [s]);
+  const m = () => {
+    var e;
+    return ((e = o.current) == null ? void 0 : e.getAttribute(i)) || null;
+  }, T = (e) => {
+    var t;
+    (t = o.current) == null || t.setAttribute(i, e);
+  }, p = () => {
+    var e;
+    return (e = o.current) == null ? void 0 : e.removeAttribute(i);
+  }, L = (e, t) => {
+    if (t === "warning") {
+      const r = E();
+      r && (r.innerText = e);
+    } else if (t === "success" || t === "info") {
+      const r = w();
+      r && (r.innerText = e);
+    }
+  }, d = (e, t) => {
+    Q();
+    const r = {
+      message: e,
+      hideIcon: t == null ? void 0 : t.hideIcon,
+      variant: (t == null ? void 0 : t.variant) || "info",
+      onClick: () => {
+        v();
+      },
+      onMouseEnter: M,
+      onMouseLeave: R
+    };
+    c((P) => [...P, r]);
+  }, M = () => {
+    f();
+  }, f = () => {
+    var t;
+    const e = m();
+    e && (clearTimeout(e), (t = o.current) == null || t.removeAttribute(i));
+  }, h = () => {
+    const e = setTimeout(() => {
+      v();
+    }, B);
+    T(String(e));
+  }, R = () => {
+    m() !== D && o.current && h();
+  }, I = () => {
+    var e;
+    k(), s && ((e = o.current) != null && e.showPopover) && (o.current.showPopover(), h());
+  }, v = () => {
+    f(), T(D), o.current && (o.current.addEventListener(
+      "animationend",
+      () => {
+        var e;
+        (e = o.current) != null && e.hidePopover && (o.current.hidePopover(), p(), o.current = null, c((t) => t.slice(1)), l(null));
+      },
+      {
+        once: !0
+        // removes event listener after being called once
+      }
+    ), o.current.classList.add(U.rootClosing));
+  }, b = j(
+    () => ({
+      queueDSToastMessage: d
+    }),
+    [d]
+  );
+  return /* @__PURE__ */ g.jsxs(x.Provider, { value: b, children: [
+    s ? /* @__PURE__ */ g.jsx(_, { ...s, ref: o }) : null,
+    n
+  ] });
+};
+export {
+  K as DSToastProvider,
+  J as useDSToast
+};

package/toastmanager.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Toast/ToastManager'
+export {}

package/types/icon-types.d.ts

@@ -1,2 +1,2 @@
-export declare const ICON_NAMES: readonly ["360", "academic-cap", "alarm-clock", "arrow-clockwise", "arrow-counterclockwise", "arrow-down", "arrow-down-line", "arrow-edge", "arrow-left", "arrow-out", "arrow-outline-left", "arrow-right", "arrow-up", "arrow-up-arrow-down", "at", "barcode-scanner", "battery", "bell", "bin", "bin-open", "bluetooth", "bookmark", "burger", "calendar", "camera", "cart", "cart-check", "cart-plus", "catalog", "certificate", "chain-link", "chainsaw", "check", "chevron-down", "chevron-left", "chevron-line-left", "chevron-line-right", "chevron-right", "chevron-up", "circle", "circle-check-colored", "circle-check-inverted", "circle-info-colored", "circle-info-inverted", "circle-pause", "circle-stroke", "clock", "coffee-cup", "compare", "connected-box", "connected-box-mobile", "connected-box-stationary", "cross", "diamond", "diamond-exclamationmark-colored", "diamond-exclamationmark-inverted", "diskette", "distance", "dots-connected", "download-complete", "envelope", "envelope-open", "exclamationmark", "exit", "eye", "eye-closed", "facebook", "filter", "finger-double-arrow", "flash", "fullscreen", "gear", "globe", "grid", "guidance", "haircross", "hanger", "headphones", "heart", "hexagon-arrow-clockwise", "horizontal-ellipsis", "house", "imow", "info", "instagram", "leave-fullscreen", "lightbulb", "linkedin", "list-three-rows", "list-two-rows", "loading-spinner", "lock", "magnifying-glass", "magnifying-glass-minus", "magnifying-glass-plus", "map", "minus", "mobile", "nine-squares", "note", "note-check", "note-plus", "number-input", "paperclip", "parcel", "pause", "pdf", "pen", "percent", "petrol", "phone", "pin", "pin-s", "pinterest", "placeholder", "play", "plug", "plus", "printer", "prohibition-sign", "questionmark", "security", "share", "shirt", "shop", "sound-off", "sound-on", "speechbubble", "speechbubbles", "square", "star", "star-half", "tag", "thumbs-down", "thumbs-up", "triangle", "triangle-exclamationmark-colored", "triangle-exclamationmark-inverted", "truck", "two-people-screen", "two-sheets", "upload", "user", "vertical-ellipsis", "wc", "wifi", "wifi-1bar", "wifi-2bars", "wifi-off", "wind-rose", "wrench", "x", "xing", "youtube"];
+export declare const ICON_NAMES: readonly ["360", "academic-cap", "alarm-clock", "arrow-clockwise", "arrow-counterclockwise", "arrow-down", "arrow-down-line", "arrow-edge", "arrow-left", "arrow-out", "arrow-outline-left", "arrow-right", "arrow-up", "arrow-up-arrow-down", "at", "barcode-scanner", "battery", "bell", "bin", "bin-open", "bluetooth", "bookmark", "burger", "calendar", "camera", "cart", "cart-check", "cart-plus", "catalog", "certificate", "chain-link", "chainsaw", "check", "chevron-down", "chevron-left", "chevron-line-left", "chevron-line-right", "chevron-right", "chevron-up", "circle", "circle-check-colored", "circle-check-inverted", "circle-info-colored", "circle-info-inverted", "circle-pause", "circle-stroke", "clock", "coffee-cup", "compare", "connected-box", "connected-box-mobile", "connected-box-stationary", "cross", "diamond", "diamond-exclamationmark-colored", "diamond-exclamationmark-inverted", "diskette", "distance", "dots-connected", "download-complete", "envelope", "envelope-open", "exclamationmark", "exit", "eye", "eye-closed", "facebook", "filter", "finger-double-arrow", "flash", "fullscreen", "gear", "globe", "grid", "guidance", "haircross", "hanger", "headphones", "heart", "hexagon-arrow-clockwise", "horizontal-ellipsis", "house", "imow", "info", "instagram", "leave-fullscreen", "lightbulb", "linkedin", "list-three-rows", "list-two-rows", "loading-spinner", "lock", "magnifying-glass", "magnifying-glass-minus", "magnifying-glass-plus", "map", "minus", "mobile", "nine-squares", "note", "note-check", "note-plus", "number-input", "paperclip", "parcel", "pause", "pdf", "pen", "percent", "petrol", "phone", "pin", "pin-s", "pinterest", "placeholder", "play", "plug", "plus", "printer", "prohibition-sign", "questionmark", "security", "share", "shirt", "shop", "sound-off", "sound-on", "speechbubble", "speechbubbles", "square", "star", "star-half", "tag", "thumbs-down", "thumbs-up", "triangle", "triangle-exclamationmark-colored", "triangle-exclamationmark-inverted", "truck", "two-people-screen", "two-sheets", "upload", "user", "vertical-ellipsis", "wc", "whatsapp", "wifi", "wifi-1bar", "wifi-2bars", "wifi-off", "wind-rose", "wrench", "x", "xing", "youtube"];
 export type IconName = typeof ICON_NAMES[number];

package/utils/index.d.ts

@@ -1,4 +1,7 @@
 export * from './has-window';
 export * from './helpers';
+export * from './remove-spaces';
 export * from './theme';
+export * from './translate';
 export * from './useBreakpoint';
+export * from './useIsomorphicLayoutEffect';

package/utils/remove-spaces.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Removes all spaces from the input string.
+ * @param str The input string.
+ * @returns The string without spaces.
+ */
+export declare const removeSpaces: (str: string) => string;

package/utils/remove-spaces.test.d.ts

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

package/utils/render-documentation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type DocumentationRenderOptions = {
     hideCodeExample?: boolean;
     hideControls?: boolean;

package/utils/translate.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Translates a given key using specified translations and dynamic replacements of placeholders like {0} or {1}.
+ * Unmatched placeholders in the translation are removed.
+ *
+ * @param key - The key identifying the text to be translated.
+ * @param translations - Object containing translation mappings.
+ * @param {string[]} [replacements=[]] - Optional array of replacement strings for placeholders in the translation.
+ * @returns {string} The translated string with placeholders replaced by corresponding values in replacements array or removed if no match is found.
+ */
+export declare const translate: <T extends Record<string, string>>(key: keyof T, translations: T, replacements?: string[]) => string;
+export declare const translateWithTranslations: <T extends Record<string, string>>(translations: T) => (key: keyof T, replacements?: string[]) => string;

package/utils/translate.test.d.ts

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

package/utils/useBreakpoint.d.ts

@@ -1,4 +1,4 @@
-import { type BreakpointCustomizable } from './breakpoint-customizable';
+import { BreakpointCustomizable } from './breakpoint-customizable';
 /**
  * A React hook that consumes a `BreakpointCustomizable` property and returns the value
  * corresponding to the current breakpoint. If the property is a primitive value, it is