@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.12

package/styles/scss/ds/lib/spacing-dynamic.scss

@@ -0,0 +1,7 @@
+
+$spacing-dynamic-xs: var(--ds-spacing-dynamic-xs);
+$spacing-dynamic-s: var(--ds-spacing-dynamic-s);
+$spacing-dynamic-m: var(--ds-spacing-dynamic-m);
+$spacing-dynamic-l: var(--ds-spacing-dynamic-l);
+$spacing-dynamic-xl: var(--ds-spacing-dynamic-xl);
+$spacing-dynamic-xxl: var(--ds-spacing-dynamic-xxl);

package/styles/scss/ds/lib/spacing.scss

@@ -0,0 +1,20 @@
+$spacing-0: 0px;
+$spacing-1: 1px;
+$spacing-2: 2px;
+$spacing-4: 4px;
+$spacing-6: 6px;
+$spacing-8: 8px;
+$spacing-12: 12px;
+$spacing-14: 14px;
+$spacing-16: 16px;
+$spacing-20: 20px;
+$spacing-24: 24px;
+$spacing-32: 32px;
+$spacing-40: 40px;
+$spacing-48: 48px;
+$spacing-56: 56px;
+$spacing-64: 64px;
+$spacing-80: 80px;
+$spacing-96: 96px;
+$spacing-128: 128px;
+$spacing-160: 160px;

package/styles/scss/ds/lib/text.scss

@@ -0,0 +1,83 @@
+@use './ds-internal/_text' as *;
+
+
+@mixin text-large {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1.25rem,
+    1.6
+  );
+}
+
+@mixin text-large-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
+}
+
+@mixin text-medium {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.5
+  );
+}
+
+@mixin text-medium-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+}
+
+@mixin text-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin text-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}
+
+@mixin text-x-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.75rem,
+    1.33
+  );
+}
+
+@mixin text-x-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
+}
+
+@mixin text-xx-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.625rem,
+    1.6
+  );
+}
+
+
+@mixin utility-medium {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.25
+  );
+}
+
+@mixin utility-medium-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.25);
+}
+
+@mixin utility-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin utility-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}

package/styles/scss/ds/lib/theme.scss

@@ -0,0 +1,162 @@
+
+
+
+$color-core-black-base: #050505;
+$color-core-black-opacity-10: #0000001A;
+$color-core-black-opacity-50: #00000080;
+$color-core-blue-base: #249ABE;
+$color-core-blue-dark: #1E71A1;
+$color-core-blue-deep: #19618B;
+$color-core-blue-light: #D4ECF7;
+$color-core-blue-mid: #8DCFE8;
+$color-core-forest-base: #4A9E5F;
+$color-core-forest-dark: #3C8653;
+$color-core-forest-deep: #2D7644;
+$color-core-forest-light: #DBF0E1;
+$color-core-forest-mid: #77C089;
+$color-core-green-base: #749F4A;
+$color-core-green-dark: #5B863C;
+$color-core-green-deep: #46762D;
+$color-core-green-light: #E5F0DB;
+$color-core-green-mid: #9BC077;
+$color-core-grey-base: #B1B1B1;
+$color-core-grey-dark: #666666;
+$color-core-grey-deep: #444444;
+$color-core-grey-light: #EDEDED;
+$color-core-grey-mid: #DADADA;
+$color-core-grey-ultra-deep: #252525;
+$color-core-grey-ultra-light: #F8F8F8;
+$color-core-orange-base: #F37A1F;
+$color-core-orange-dark: #E9640C;
+$color-core-orange-deep: #D9480F;
+$color-core-orange-light: #FEE2CD;
+$color-core-orange-mid: #F7A669;
+$color-core-red-base: #D43B3B;
+$color-core-red-dark: #B72427;
+$color-core-red-deep: #A5181D;
+$color-core-red-light: #EEBCBD;
+$color-core-red-mid: #DA6B6D;
+$color-core-white-base: #FFFFFF;
+$color-core-white-opacity-15: #FFFFFF26;
+$color-core-white-opacity-50: #FFFFFF80;
+$color-core-yellow-base: #FDC543;
+$color-core-yellow-dark: #F9A521;
+$color-core-yellow-deep: #EE8F00;
+$color-core-yellow-light: #FDECC3;
+$color-core-yellow-mid: #FED277;
+
+
+$theme-light-background-color-brand-disabled: $color-core-grey-mid;
+$theme-light-background-color-brand-hover: $color-core-orange-dark;
+$theme-light-background-color-brand-pressed: $color-core-orange-dark;
+$theme-light-background-color-brand: $color-core-orange-base;
+$theme-light-background-color-feedback-error: $color-core-red-light;
+$theme-light-background-color-feedback-info: $color-core-grey-light;
+$theme-light-background-color-feedback-success: $color-core-green-light;
+$theme-light-background-color-feedback-warning: $color-core-yellow-light;
+$theme-light-background-color-primary-disabled: $color-core-white-base;
+$theme-light-background-color-primary-hover: $color-core-grey-light;
+$theme-light-background-color-primary-inverse-disabled: $color-core-grey-mid;
+$theme-light-background-color-primary-inverse-hover: $color-core-grey-deep;
+$theme-light-background-color-primary-inverse-pressed: $color-core-grey-deep;
+$theme-light-background-color-primary-inverse: $color-core-grey-ultra-deep;
+$theme-light-background-color-primary-pressed: $color-core-grey-light;
+$theme-light-background-color-primary: $color-core-white-base;
+$theme-light-background-color-secondary-disabled: $color-core-grey-ultra-light;
+$theme-light-background-color-secondary-inverse: $color-core-grey-deep;
+$theme-light-background-color-secondary: $color-core-grey-ultra-light;
+$theme-light-background-color-sustainability: $color-core-forest-light;
+$theme-light-background-color-tertiary: $color-core-grey-light;
+$theme-light-background-color-transparent-hover: $color-core-black-opacity-10;
+$theme-light-background-color-transparent-pressed: $color-core-black-opacity-10;
+$theme-light-border-color-feedback-error: $color-core-red-base;
+$theme-light-border-color-feedback-info: $color-core-grey-dark;
+$theme-light-border-color-feedback-success: $color-core-green-base;
+$theme-light-border-color-feedback-warning: $color-core-yellow-base;
+$theme-light-border-color-focus: $color-core-grey-ultra-deep;
+$theme-light-border-color-primary-disabled: $color-core-black-opacity-50;
+$theme-light-border-color-primary-inverse: $color-core-white-base;
+$theme-light-border-color-primary: $color-core-grey-ultra-deep;
+$theme-light-border-color-secondary-disabled: $color-core-black-opacity-10;
+$theme-light-border-color-secondary: $color-core-grey-base;
+$theme-light-border-color-tertiary: $color-core-grey-mid;
+$theme-light-content-color-brand-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-brand-hover: $color-core-orange-deep;
+$theme-light-content-color-brand-pressed: $color-core-orange-deep;
+$theme-light-content-color-brand: $color-core-orange-dark;
+$theme-light-content-color-feedback-error: $color-core-red-base;
+$theme-light-content-color-feedback-info: $color-core-grey-base;
+$theme-light-content-color-feedback-success: $color-core-green-base;
+$theme-light-content-color-feedback-warning: $color-core-yellow-base;
+$theme-light-content-color-interaction-accent-hover: $color-core-blue-deep;
+$theme-light-content-color-interaction-accent-pressed: $color-core-blue-deep;
+$theme-light-content-color-interaction-accent: $color-core-blue-dark;
+$theme-light-content-color-interaction-neutral: $color-core-grey-ultra-deep;
+$theme-light-content-color-primary-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-primary-inverse-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-primary-inverse: $color-core-white-base;
+$theme-light-content-color-primary-on-brand-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-primary-on-brand: $color-core-grey-ultra-deep;
+$theme-light-content-color-primary: $color-core-grey-ultra-deep;
+$theme-light-content-color-secondary-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-secondary: $color-core-grey-dark;
+$theme-light-content-color-sustainability: $color-core-forest-base;
+$theme-light-content-color-tertiary: $color-core-grey-base;
+
+
+$theme-dark-background-color-brand-disabled: $color-core-grey-mid;
+$theme-dark-background-color-brand-hover: $color-core-orange-dark;
+$theme-dark-background-color-brand-pressed: $color-core-orange-dark;
+$theme-dark-background-color-brand: $color-core-orange-base;
+$theme-dark-background-color-feedback-error: $color-core-grey-deep;
+$theme-dark-background-color-feedback-info: $color-core-grey-deep;
+$theme-dark-background-color-feedback-success: $color-core-grey-deep;
+$theme-dark-background-color-feedback-warning: $color-core-grey-deep;
+$theme-dark-background-color-primary-disabled: $color-core-black-base;
+$theme-dark-background-color-primary-hover: $color-core-grey-deep;
+$theme-dark-background-color-primary-inverse-disabled: $color-core-grey-mid;
+$theme-dark-background-color-primary-inverse-hover: $color-core-grey-mid;
+$theme-dark-background-color-primary-inverse-pressed: $color-core-grey-mid;
+$theme-dark-background-color-primary-inverse: $color-core-grey-ultra-light;
+$theme-dark-background-color-primary-pressed: $color-core-grey-deep;
+$theme-dark-background-color-primary: $color-core-black-base;
+$theme-dark-background-color-secondary-disabled: $color-core-grey-ultra-deep;
+$theme-dark-background-color-secondary-inverse: $color-core-grey-light;
+$theme-dark-background-color-secondary: $color-core-grey-ultra-deep;
+$theme-dark-background-color-sustainability: $color-core-grey-deep;
+$theme-dark-background-color-tertiary: $color-core-grey-ultra-deep;
+$theme-dark-background-color-transparent-hover: $color-core-white-opacity-15;
+$theme-dark-background-color-transparent-pressed: $color-core-white-opacity-15;
+$theme-dark-border-color-feedback-error: $color-core-red-base;
+$theme-dark-border-color-feedback-info: $color-core-grey-dark;
+$theme-dark-border-color-feedback-success: $color-core-green-base;
+$theme-dark-border-color-feedback-warning: $color-core-yellow-base;
+$theme-dark-border-color-focus: $color-core-white-base;
+$theme-dark-border-color-primary-disabled: $color-core-white-opacity-50;
+$theme-dark-border-color-primary-inverse: $color-core-grey-ultra-deep;
+$theme-dark-border-color-primary: $color-core-grey-ultra-light;
+$theme-dark-border-color-secondary-disabled: $color-core-white-opacity-15;
+$theme-dark-border-color-secondary: $color-core-grey-dark;
+$theme-dark-border-color-tertiary: $color-core-grey-deep;
+$theme-dark-content-color-brand-disabled: $color-core-white-opacity-50;
+$theme-dark-content-color-brand-hover: $color-core-orange-mid;
+$theme-dark-content-color-brand-pressed: $color-core-orange-mid;
+$theme-dark-content-color-brand: $color-core-orange-base;
+$theme-dark-content-color-feedback-error: $color-core-red-mid;
+$theme-dark-content-color-feedback-info: $color-core-grey-base;
+$theme-dark-content-color-feedback-success: $color-core-green-mid;
+$theme-dark-content-color-feedback-warning: $color-core-yellow-mid;
+$theme-dark-content-color-interaction-accent-hover: $color-core-blue-mid;
+$theme-dark-content-color-interaction-accent-pressed: $color-core-blue-mid;
+$theme-dark-content-color-interaction-accent: $color-core-blue-mid;
+$theme-dark-content-color-interaction-neutral: $color-core-white-base;
+$theme-dark-content-color-primary-disabled: $color-core-white-opacity-50;
+$theme-dark-content-color-primary-inverse-disabled: $color-core-black-opacity-50;
+$theme-dark-content-color-primary-inverse: $color-core-grey-ultra-deep;
+$theme-dark-content-color-primary-on-brand-disabled: $color-core-black-opacity-50;
+$theme-dark-content-color-primary-on-brand: $color-core-grey-ultra-deep;
+$theme-dark-content-color-primary: $color-core-white-base;
+$theme-dark-content-color-secondary-disabled: $color-core-white-opacity-50;
+$theme-dark-content-color-secondary: $color-core-grey-base;
+$theme-dark-content-color-sustainability: $color-core-forest-mid;
+$theme-dark-content-color-tertiary: $color-core-grey-dark;

package/styles/scss/ds/lib/transition.scss

@@ -0,0 +1,36 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'animation' as *;
+
+@mixin transition($properties, $duration-key: '100', $easing-key: 'linear') {
+  @if list.length($properties) == 0 or $properties == null {
+    @error "[STIHL Design System] - [ds.transition()]: No properties provided for ds.transition() mixin.";
+  }
+
+  $duration: map.get($animation-durations, $duration-key);
+  $easing: map.get($animation-easing-functions, $easing-key);
+
+  @if not map.has-key($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($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: list.append(
+      $transition-values,
+      #{$prop} #{$duration} #{$easing},
+      comma
+    );
+  }
+  & {
+    transition: $transition-values;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+  }
+}

package/switch.DI8YYa5G.js

@@ -0,0 +1,65 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as w } from "./chunks/index.CvOaL64Y.js";
+import "react";
+import { D as b } from "./chunks/Icon.BCmt_XBG.js";
+import { DSSpinner as p } from "./spinner.Bq97Og-6.js";
+import './assets/switch.gw6aa3kx.css';const f = "ds-switch_root_gdcld_1", x = "ds-switch_root--label-right_gdcld_40", j = "ds-switch_root--stretched_gdcld_43", k = "ds-switch_loader_gdcld_53", S = "ds-switch_thumb_gdcld_111", C = "ds-switch_root--checked_gdcld_126", s = {
+  root: f,
+  "root--label-right": "ds-switch_root--label-right_gdcld_40",
+  rootLabelRight: x,
+  "root--stretched": "ds-switch_root--stretched_gdcld_43",
+  rootStretched: j,
+  switch: "ds-switch_switch_gdcld_48",
+  loader: k,
+  thumb: S,
+  "root--checked": "ds-switch_root--checked_gdcld_126",
+  rootChecked: C
+}, E = ({
+  children: a,
+  aria: h,
+  alignLabel: i = "left",
+  checked: r = !1,
+  className: l,
+  dataTrackingid: _,
+  disabled: e = !1,
+  loading: o = !1,
+  stretched: n = !1,
+  onClick: c,
+  ...m
+}) => {
+  const g = w(s.root, l, {
+    [s.rootChecked]: r === !0,
+    [s.rootStretched]: n === !0,
+    [s.rootLabelRight]: i === "right"
+  }), u = (d) => {
+    if (e || o) {
+      d.preventDefault();
+      return;
+    }
+    c && c(d);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      className: g,
+      "data-trackingid": _,
+      onClick: u,
+      ...h,
+      ...m,
+      type: "button",
+      role: "switch",
+      "aria-checked": r,
+      "aria-disabled": e || o,
+      "aria-busy": o,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: a }),
+        !o && /* @__PURE__ */ t.jsx("span", { className: s.switch, children: /* @__PURE__ */ t.jsx("span", { className: s.thumb, children: /* @__PURE__ */ t.jsx(b, { name: "check", "aria-hidden": "true" }) }) }),
+        o && /* @__PURE__ */ t.jsx("span", { className: s.loader, children: /* @__PURE__ */ t.jsx(p, { 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 → systemfeedback.C3Pfxxpp.js}

@@ -1,8 +1,8 @@
 "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 = {
+import { D as n } from "./chunks/Icon.BCmt_XBG.js";
+import './assets/systemfeedback.BPz5YlPC.css';const i = "ds-system-feedback_root_1l65g_1", l = {
   root: i
 }, m = {
   valid: "circle-check-colored",
@@ -10,14 +10,14 @@ import './assets/systemfeedback.Sq0bAIyf.css';const i = "_root_10tno_76", l = {
   warning: "triangle-exclamationmark-colored"
 }, p = ({
   className: e,
-  message: r,
-  type: s,
+  message: s,
+  type: r,
   ...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
+    /* @__PURE__ */ o.jsx(n, { name: m[r], "aria-hidden": "true" }),
+    s
   ] });
 };
 export {

package/systemfeedback.d.ts

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

package/text.DThvTwm8.js

@@ -0,0 +1,57 @@
+"use client";
+import { j as x } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as k } from "./chunks/index.CvOaL64Y.js";
+import './assets/text.DjTG_qNb.css';const c = "ds-text_root_12k0t_1", n = "ds-text_root--large_12k0t_7", u = "ds-text_root--large-bold_12k0t_18", b = "ds-text_root--medium_12k0t_29", S = "ds-text_root--medium-bold_12k0t_40", g = "ds-text_root--small_12k0t_51", B = "ds-text_root--small-bold_12k0t_62", i = "ds-text_root--x-small_12k0t_73", X = "ds-text_root--x-small-bold_12k0t_84", L = "ds-text_root--xx-small_12k0t_95", M = "ds-text_root--theme-dark_12k0t_189", o = {
+  root: c,
+  "root--large": "ds-text_root--large_12k0t_7",
+  rootLarge: n,
+  "root--large-bold": "ds-text_root--large-bold_12k0t_18",
+  rootLargeBold: u,
+  "root--medium": "ds-text_root--medium_12k0t_29",
+  rootMedium: b,
+  "root--medium-bold": "ds-text_root--medium-bold_12k0t_40",
+  rootMediumBold: S,
+  "root--small": "ds-text_root--small_12k0t_51",
+  rootSmall: g,
+  "root--small-bold": "ds-text_root--small-bold_12k0t_62",
+  rootSmallBold: B,
+  "root--x-small": "ds-text_root--x-small_12k0t_73",
+  rootXSmall: i,
+  "root--x-small-bold": "ds-text_root--x-small-bold_12k0t_84",
+  rootXSmallBold: X,
+  "root--xx-small": "ds-text_root--xx-small_12k0t_95",
+  rootXxSmall: L,
+  "root--theme-dark": "ds-text_root--theme-dark_12k0t_189",
+  rootThemeDark: M
+}, h = ({
+  children: r,
+  className: m,
+  size: t = "medium",
+  tag: d = "p",
+  theme: a = "light",
+  weight: l = "normal",
+  ...s
+}) => {
+  const _ = d, e = k(o.root, m, {
+    // large
+    [o.rootLarge]: t === "large",
+    [o.rootLargeBold]: t === "large" && l === "bold",
+    // medium
+    [o.rootMedium]: t == "medium",
+    [o.rootMediumBold]: t === "medium" && l === "bold",
+    // small
+    [o.rootSmall]: t == "small",
+    [o.rootSmallBold]: t == "small" && l === "bold",
+    // x-small
+    [o.rootXSmall]: t == "x-small",
+    [o.rootXSmallBold]: t == "x-small" && l === "bold",
+    // xx-small
+    [o.rootXxSmall]: t == "xx-small",
+    // dark theme
+    [o.rootThemeDark]: a === "dark"
+  });
+  return /* @__PURE__ */ x.jsx(_, { className: e, ...s, children: r });
+};
+export {
+  h as DSText
+};

package/text.d.ts

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

package/{textarea.CtQtGqn5.js → textarea.CBvH0ljM.js}

@@ -4,9 +4,9 @@ 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.Bewrp0Za.js";
+import "./asterisk.DpzETKdT.js";
+import "./systemfeedback.C3Pfxxpp.js";
+import { D as x } from "./chunks/Textarea.DUBSOpNL.js";
 export {
   x as DSTextarea
 };

package/textarea.d.ts

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

package/title.DqzdB2Gq.js

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

package/title.d.ts

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

package/toast.d.ts

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

package/{toast.DVd9dLs2.js → toast.n1QUINSA.js}

@@ -2,9 +2,9 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./button.DH0h6uPs.js";
-import "./chunks/Icon.C2o2seDb.js";
-import { D as s } from "./chunks/Toast.DA_CQ9J-.js";
+import "./button.M4nXjcUn.js";
+import "./chunks/Icon.BCmt_XBG.js";
+import { D as s } from "./chunks/Toast.DyEi2GEP.js";
 export {
   s as DSToast
 };

package/{toastmanager.Dh0gzFkM.js → toastmanager.B7EZ4JSI.js}

@@ -2,8 +2,8 @@
 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 { g as E, b as w } from "./chunks/AriaLiveRegions.utils.D2ni4Yrf.js";
-import { D as _, s as U } from "./chunks/Toast.DA_CQ9J-.js";
+import { b as E, g as w } from "./chunks/AriaLiveRegions.utils.BGSZafnS.js";
+import { D as _, s as U } from "./chunks/Toast.DyEi2GEP.js";
 import { h as q } from "./chunks/has-document.r9i9TxKV.js";
 const Q = () => {
   if (!E() || !w())

package/toastmanager.d.ts

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

package/utils/index.d.ts

@@ -2,5 +2,6 @@ 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/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,5 +1,4 @@
 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

package/utils/useIsomorphicLayoutEffect.d.ts

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-
 /**
  * A custom hook that conditionally uses `useLayoutEffect` or `useEffect` based on the environment.
  *

package/utils/vitest.setup.d.ts

@@ -1,4 +1,3 @@
-
 export declare function showPopoverPolyfill(): void;
 export declare function hidePopoverPolyfill(): void;
 export declare function showModalPolyfill(): void;

package/arialiveregions.BK4T7Vhk.js

@@ -1,27 +0,0 @@
-"use client";
-import { j as s } from "./chunks/jsx-runtime.C115EyI4.js";
-import { v as r, A as n, a } from "./chunks/AriaLiveRegions.utils.D2ni4Yrf.js";
-import './assets/arialiveregions.GsGx2USO.css';const l = "_sr-only_echuy_76", e = {
-  "sr-only": "_sr-only_echuy_76",
-  srOnly: l
-}, i = () => (r(), /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-  /* @__PURE__ */ s.jsx(
-    "span",
-    {
-      id: n,
-      role: "alert",
-      className: e.srOnly
-    }
-  ),
-  /* @__PURE__ */ s.jsx(
-    "span",
-    {
-      id: a,
-      role: "status",
-      className: e.srOnly
-    }
-  )
-] }));
-export {
-  i as DSAriaLiveRegions
-};

package/assets/Accordion.lFv7Q_RG.css

@@ -1 +0,0 @@
-._details_15or5_76{max-width:948px;min-width:288px;border-bottom:1px solid #B1B1B1}._details_15or5_76:only-of-type{border-bottom:none}._details_15or5_76::details-content{block-size:0;overflow:hidden;opacity:0;transition-property:block-size,content-visibility,opacity;transition-behavior:allow-discrete;transition-duration:var(--ds-animation-duration, .25s);transition-timing-function:cubic-bezier(.5,0,1,1)}@media (prefers-reduced-motion: reduce){._details_15or5_76::details-content{transition-duration:0ms}}._details_15or5_76[open]::details-content{transition-timing-function:cubic-bezier(0,0,.5,1);block-size:auto;block-size:calc-size(auto);opacity:1}@media (min-width: 1024px){._details_15or5_76{min-width:213px}}._summary_15or5_112{cursor:pointer;padding-block-start:12px;padding-inline-end:16px;padding-block-end:12px;padding-inline-start:16px;list-style:none}._summary_15or5_112:focus{outline:2px solid;outline-color:#252525;outline-offset:0px}@media screen and (forced-colors: active){._summary_15or5_112:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){._summary_15or5_112:focus{outline:revert;outline-offset:revert}._summary_15or5_112:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:0px}@media screen and (forced-colors: active){._summary_15or5_112:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}._summary_15or5_112::-webkit-details-marker{display:none}._summary--utility--m_15or5_153{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:1rem;line-height:1.25;font-size-adjust:.414}._summary_15or5_112{transition:background-color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){._summary_15or5_112{transition-duration:0ms}}@media (hover: hover){._summary_15or5_112:hover{background-color:#ededed}}._summary--flush_15or5_178{color:#252525;position:relative;padding-inline-start:0;padding-inline-end:0}@media (hover: hover){._summary--flush_15or5_178:hover:before{background-color:#ededed}}._summary--flush_15or5_178:before{content:"";position:absolute;top:0;right:-16px;bottom:0;left:-16px}._summary--flush_15or5_178:before{transition:background-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){._summary--flush_15or5_178:before{transition-duration:0ms}}._summary--flush_15or5_178:focus,._summary--flush_15or5_178:focus-visible{outline:none}._summary--flush_15or5_178:focus:before{outline:2px solid;outline-color:#252525;outline-offset:0px}@media screen and (forced-colors: active){._summary--flush_15or5_178:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){._summary--flush_15or5_178:focus:before{outline:revert;outline-offset:revert}._summary--flush_15or5_178:focus-visible:before{outline:2px solid;outline-color:#252525;outline-offset:0px}@media screen and (forced-colors: active){._summary--flush_15or5_178:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}._summary--small_15or5_238{padding-block-start:8px;padding-block-end:8px}._summary-content-wrapper_15or5_243{display:flex;justify-content:space-between;align-items:center;gap:16px}._summary-content-wrapper--flush_15or5_249{position:relative;z-index:1}._summary-content-wrapper--chevron-left_15or5_253{flex-flow:row-reverse;justify-content:flex-end}._heading-summary-wrapper_15or5_258{flex-grow:1}._hint_15or5_262{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414;display:block;margin-block-start:4px}._icon_15or5_277{transform:rotate(0)}._icon_15or5_277{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(.5,0,1,1)}@media (prefers-reduced-motion: reduce){._icon_15or5_277{transition-duration:0ms}}._icon--open_15or5_288{transform:rotate(-180deg)}._icon--open_15or5_288{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){._icon--open_15or5_288{transition-duration:0ms}}._content-wrapper_15or5_300{padding-block-start:4px;padding-inline-end:16px;padding-block-end:32px;padding-inline-start:16px}._content-wrapper--flush_15or5_306{padding-inline-start:0;padding-inline-end:0}._content-wrapper--small_15or5_310{padding-block-start:4px;padding-block-end:20px}