@stihl-design-system/components 1.0.0-RC.13 → 1.0.0-RC.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.13",
+  "version": "1.0.0-RC.14",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.stihl.de/",
   "keywords": [
@@ -139,8 +139,8 @@
   },
   "peerDependencies": {
     "classnames": "^2.5.1",
-    "react": ">=17.0.0 <=19",
-    "react-dom": ">=17.0.0 <=19",
+    "react": ">=17.0.0 <20",
+    "react-dom": ">=17.0.0 <20",
     "react-intersection-observer": "^9.10.2",
     "react-select": "^5.8.1"
   }

package/{radio.DEILy_lV.js → radio.B-2uuWHq.js}

@@ -2,7 +2,7 @@
 import { j as i } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c as h } from "./chunks/index.CvOaL64Y.js";
 import { forwardRef as $, useRef as C, useState as E, useEffect as L, useCallback as O } from "react";
-import { u as P } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { u as P } from "./chunks/useBreakpoint.B8XxjSVJ.js";
 import './assets/radio.X-RTl_jo.css';const v = (o) => o.replace(/\s+/g, ""), U = "ds-radio_root_tdhm5_1", q = "ds-radio_root--disabled_tdhm5_21", z = "ds-radio_root--with-custom-area_tdhm5_24", F = "ds-radio_radio_tdhm5_28", G = "ds-radio_dot_tdhm5_45", J = "ds-radio_radio--invalid_tdhm5_69", K = "ds-radio_label_tdhm5_74", M = "ds-radio_label--bold_tdhm5_88", Q = "ds-radio_label--hidden_tdhm5_99", T = "ds-radio_label--with-custom-area_tdhm5_111", X = "ds-radio_custom-area_tdhm5_115", Y = "ds-radio_hint_tdhm5_123", Z = "ds-radio_hint--visible_tdhm5_146", tt = "ds-radio_hint--unchecked-hidden_tdhm5_150", dt = "ds-radio_hint--hidden_tdhm5_155", et = "ds-radio_input_tdhm5_168", t = {
   root: U,
   "root--disabled": "ds-radio_root--disabled_tdhm5_21",

package/{radiogroup.DeU-HdlP.js → radiogroup.DM_lF4hI.js}

@@ -2,9 +2,9 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./chunks/Fieldset.Cjmkgxxk.js";
-import "./radio.DEILy_lV.js";
-import { D as a } from "./chunks/RadioGroup.Crj7NoOs.js";
+import "./chunks/Fieldset.Ct_JFRs9.js";
+import "./radio.B-2uuWHq.js";
+import { D as a } from "./chunks/RadioGroup.D10-pe9H.js";
 export {
   a as DSRadioGroup
 };

package/{select.BYraFJzz.js → select.COLuwr89.js}

@@ -2,11 +2,11 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./chunks/useBreakpoint.B8XxjSVJ.js";
 import "./asterisk.DpzETKdT.js";
 import "./chunks/Icon.BCmt_XBG.js";
 import "./systemfeedback.C3Pfxxpp.js";
-import { D as s } from "./chunks/Select.E6gLFYLk.js";
+import { D as s } from "./chunks/Select.DsLnW29U.js";
 export {
   s as DSSelect
 };

package/{skiptocontent.BxvpIB7H.js → skiptocontent.DxogCFvU.js}

@@ -1,9 +1,9 @@
 "use client";
 import { j as k } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c as p } from "./chunks/index.CvOaL64Y.js";
-import { g as s } from "./chunks/helpers.B1JT5ShS.js";
+import { g as s } from "./chunks/helpers.CcqWV-wZ.js";
 import "react";
-import { DSLink as c } from "./link.DREJAoPG.js";
+import { DSLink as c } from "./link.L8O_InKe.js";
 import './assets/skiptocontent.PTL3256m.css';const h = "ds-skip-to-content_root_uqkjt_1", m = "ds-skip-to-content_root--dark_uqkjt_8", r = {
   root: h,
   "root--dark": "ds-skip-to-content_root--dark_uqkjt_8",

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

@@ -69,6 +69,7 @@ $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-background-color-transparent: $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;
@@ -127,6 +128,7 @@ $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-background-color-transparent: $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;

package/tabpane.BnQBzVXw.js

@@ -0,0 +1,8 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import { T as m } from "./chunks/TabPane.CYuUi0oL.js";
+export {
+  m as TabPane
+};

package/tabpane.d.ts

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

package/tabs.BaELlVri.js

@@ -0,0 +1,15 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/has-window.ut_-aShB.js";
+import "./chunks/helpers.CcqWV-wZ.js";
+import { D as f } from "./chunks/Tabs.D_JAsvoh.js";
+import "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import "./button.BfcWQZhx.js";
+import "./chunks/Icon.BCmt_XBG.js";
+import "./numberindicator.UU7FSouT.js";
+import "./chunks/TabPane.CYuUi0oL.js";
+export {
+  f as DSTabs
+};

package/tabs.d.ts

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

package/textarea.Wcl_pVBb.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/has-window.ut_-aShB.js";
+import "./chunks/helpers.CcqWV-wZ.js";
+import "./chunks/useBreakpoint.B8XxjSVJ.js";
+import "./asterisk.DpzETKdT.js";
+import "./systemfeedback.C3Pfxxpp.js";
+import { D } from "./chunks/Textarea.Dh9R9YdZ.js";
+export {
+  D as DSTextarea
+};

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

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

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

@@ -1,12 +1,12 @@
 "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.DyEi2GEP.js";
-import { h as q } from "./chunks/has-document.r9i9TxKV.js";
+import { g as a } from "./chunks/helpers.CcqWV-wZ.js";
+import { b as D, g as E } from "./chunks/AriaLiveRegions.utils.Bq6Mp2bE.js";
+import { D as _, s as U } from "./chunks/Toast.j7LPnQ36.js";
+import { h as q } from "./chunks/has-window.ut_-aShB.js";
 const Q = () => {
-  if (!E() || !w())
+  if (!D() || !E())
     throw new Error(
       a(
         "DSToast",
@@ -23,7 +23,7 @@ const Q = () => {
         '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 = () => {
+}, i = "data-ds-toast-timeout-id", w = "closing", B = 1e4, x = y(void 0), H = () => {
   const n = C(x);
   if (!n)
     throw new Error(
@@ -33,7 +33,7 @@ const Q = () => {
       )
     );
   return n;
-}, K = ({
+}, J = ({
   children: n
 }) => {
   const [u, c] = S([]), [s, l] = S(null), o = O(null);
@@ -44,10 +44,10 @@ const Q = () => {
   }, [u]), A(() => {
     s && (L(s.message, s.variant), I());
   }, [s]);
-  const m = () => {
+  const T = () => {
     var e;
     return ((e = o.current) == null ? void 0 : e.getAttribute(i)) || null;
-  }, T = (e) => {
+  }, m = (e) => {
     var t;
     (t = o.current) == null || t.setAttribute(i, e);
   }, p = () => {
@@ -55,10 +55,10 @@ const Q = () => {
     return (e = o.current) == null ? void 0 : e.removeAttribute(i);
   }, L = (e, t) => {
     if (t === "warning") {
-      const r = E();
+      const r = D();
       r && (r.innerText = e);
     } else if (t === "success" || t === "info") {
-      const r = w();
+      const r = E();
       r && (r.innerText = e);
     }
   }, d = (e, t) => {
@@ -78,20 +78,20 @@ const Q = () => {
     f();
   }, f = () => {
     var t;
-    const e = m();
+    const e = T();
     e && (clearTimeout(e), (t = o.current) == null || t.removeAttribute(i));
   }, h = () => {
     const e = setTimeout(() => {
       v();
     }, B);
-    T(String(e));
+    m(String(e));
   }, R = () => {
-    m() !== D && o.current && h();
+    T() !== w && 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(
+    f(), m(w), o.current && (o.current.addEventListener(
       "animationend",
       () => {
         var e;
@@ -114,6 +114,6 @@ const Q = () => {
   ] });
 };
 export {
-  K as DSToastProvider,
-  J as useDSToast
+  J as DSToastProvider,
+  H as useDSToast
 };

package/utils/helpers.d.ts

@@ -17,6 +17,13 @@ export declare const pixelToRem: (px: number) => number;
  * @returns {string} A message with a standardized format: "[STIHL Design System] - [componentName]: message".
  */
 export declare const generateDSMessage: (componentName: string, message: string) => string;
+/**
+ * Generates a message for a required prop that is missing from a component.
+ *
+ * @param {string} propName - The name of the prop that is required.
+ * @param {string} componentName - The name of the component that is missing the required prop.
+ */
+export declare const requiredPropMessage: (propName: string, componentName: string) => string;
 /**
  * Retrieves the closest ancestor of the given element that matches a specified selector.
  *

package/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './has-window';
 export * from './helpers';
+export * from './isAnimationDisabled';
 export * from './remove-spaces';
 export * from './theme';
 export * from './translate';

package/utils/isAnimationDisabled.d.ts

@@ -0,0 +1 @@
+export declare const isAnimationDisabled: () => boolean;

package/chunks/AriaLiveRegions.utils.BGSZafnS.js

@@ -1,34 +0,0 @@
-"use client";
-import { g as i } from "./helpers.B1JT5ShS.js";
-import "react";
-import { h as s } from "./has-document.r9i9TxKV.js";
-const e = "ds-alert-live-region", t = "ds-status-live-region", g = () => document.getElementById(e), c = () => document.getElementById(t), m = () => {
-  if (!s)
-    return;
-  const n = document.querySelectorAll(
-    `#${e}`
-  ), o = document.querySelectorAll(
-    `#${t}`
-  );
-  if (n.length > 1)
-    throw new Error(
-      i(
-        "DSAriaLiveRegions",
-        `The DSAriaLiveRegions component with id="${e}" should only be present once on the page. Found ${n.length} instances.`
-      )
-    );
-  if (o.length > 1)
-    throw new Error(
-      i(
-        "DSAriaLiveRegions",
-        `The DSAriaLiveRegions component with id="${t}" should only be present once on the page. Found ${o.length} instances.`
-      )
-    );
-};
-export {
-  e as A,
-  t as a,
-  g as b,
-  c as g,
-  m as v
-};

package/chunks/RadioGroup.Crj7NoOs.js

@@ -1,137 +0,0 @@
-"use client";
-import { j as h } from "./jsx-runtime.C115EyI4.js";
-import { c as y } from "./index.CvOaL64Y.js";
-import { forwardRef as C, useState as N } from "react";
-import { D as I } from "./Fieldset.Cjmkgxxk.js";
-import { DSRadio as A } from "../radio.DEILy_lV.js";
-import { g as a } from "./helpers.B1JT5ShS.js";
-import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_1", M = "ds-radio-group_root--horizontal_12fot_9", O = "ds-radio-group_root--invalid_12fot_12", f = {
-  root: B,
-  "root--horizontal": "ds-radio-group_root--horizontal_12fot_9",
-  rootHorizontal: M,
-  "root--invalid": "ds-radio-group_root--invalid_12fot_12",
-  rootInvalid: O
-}, m = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, v = (o) => o.some(({ hint: e }) => !!e), z = (o) => o.some(({ customArea: e }) => !!e), V = ({
-  legend: o,
-  name: e,
-  options: t,
-  description: l,
-  direction: i,
-  id: s,
-  systemFeedback: n
-}) => {
-  if (!s && (l || n))
-    throw new Error(
-      a(
-        "DSRadioGroup",
-        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSRadioGroup component.'
-      )
-    );
-  if (!o)
-    throw new Error(
-      a("DSRadioGroup", m("legend"))
-    );
-  if (!e)
-    throw new Error(
-      a("DSRadioGroup", m("name"))
-    );
-  if (!t)
-    throw new Error(
-      a("DSRadioGroup", m("options"))
-    );
-  if (i === "horizontal" && v(t))
-    throw new Error(
-      a(
-        "DSRadioGroup",
-        "Horizontal direction is not possible when options contain a hint. Please remove hints or change direction property to 'vertical'."
-      )
-    );
-  if (i === "horizontal" && z(t))
-    throw new Error(
-      a(
-        "DSRadioGroup",
-        "Horizontal direction is not possible when options contain a custom area. Please remove custom areas or change direction property to 'vertical'."
-      )
-    );
-}, $ = C(
-  ({
-    legend: o,
-    name: e,
-    options: t,
-    className: l,
-    defaultValue: i,
-    description: s,
-    direction: n = "vertical",
-    disabled: d = !1,
-    hideUncheckedHints: D = !1,
-    id: c,
-    invalid: p = !1,
-    required: w = !1,
-    systemFeedback: u,
-    value: S,
-    onChange: _,
-    ...G
-  }, E) => {
-    process.env.NODE_ENV !== "production" && V({
-      legend: o,
-      name: e,
-      options: t,
-      description: s,
-      direction: n,
-      id: c,
-      systemFeedback: u
-    });
-    const [H, x] = N(i), g = S !== void 0, R = g ? S : H, P = y(f.root, {
-      // In case of longer copy, use vertical direction
-      [f.rootHorizontal]: n === "horizontal" && !v(t) && !z(t),
-      [f.rootInvalid]: p && !!u
-    }), j = (r) => {
-      if (d) {
-        r.preventDefault();
-        return;
-      }
-      g || x(
-        r.target.value
-      ), _ && _(r);
-    }, q = v(t) && !D;
-    return /* @__PURE__ */ h.jsx(
-      I,
-      {
-        id: c,
-        legend: o,
-        className: l,
-        description: s,
-        disabled: d,
-        required: w,
-        invalid: p,
-        systemFeedback: u,
-        ...G,
-        role: "radiogroup",
-        onChange: j,
-        children: /* @__PURE__ */ h.jsx("div", { className: P, children: t.map((r) => /* @__PURE__ */ h.jsx(
-          A,
-          {
-            name: e,
-            checked: r.value === R,
-            disabled: d,
-            hideUncheckedHint: D,
-            hint: r.hint,
-            invalid: p,
-            isBold: q,
-            required: w,
-            ref: r.value === R ? E : null,
-            ...r
-          },
-          c + r.label + r.value + r.hint
-        )) })
-      }
-    );
-  }
-);
-$.displayName = "DSRadioGroup";
-export {
-  $ as D,
-  z as a,
-  v as o,
-  V as v
-};

package/chunks/has-document.r9i9TxKV.js

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

package/chunks/helpers.B1JT5ShS.js

@@ -1,7 +0,0 @@
-"use client";
-const e = (s) => typeof s != "number" || isNaN(s) ? 0 : s / 16, r = (s, t) => `[STIHL Design System] - [${s}]: ${t}`, n = (s, t) => s == null ? void 0 : s.closest(t);
-export {
-  n as a,
-  r as g,
-  e as p
-};

package/inputstepper.C7KD1-0S.js

@@ -1,13 +0,0 @@
-"use client";
-import "./chunks/jsx-runtime.C115EyI4.js";
-import "./chunks/index.CvOaL64Y.js";
-import "react";
-import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./chunks/Input.utils.ChV6RJsh.js";
-import "./asterisk.DpzETKdT.js";
-import "./button.M4nXjcUn.js";
-import "./systemfeedback.C3Pfxxpp.js";
-import { D } from "./chunks/InputStepper.xmWGU9pU.js";
-export {
-  D as DSInputStepper
-};

package/textarea.CBvH0ljM.js

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

package/utils/has-document.d.ts

@@ -1 +0,0 @@
-export declare const hasDocument: boolean;