@stihl-design-system/components 1.0.0-RC.32 → 1.0.0-RC.35

package/chunks/helpers.CexwVao7.js

@@ -0,0 +1,38 @@
+"use client";
+import l from "react";
+const f = (e) => typeof e != "number" || isNaN(e) ? 0 : e / 16, m = (e, t) => `[STIHL Design System] - [${e}]: ${t}`, d = (e, t) => `The "${e}" prop is required. Please add the "${e}" prop to the ${t} component.`, y = (e, t) => e?.closest(t), u = (e, t, a) => {
+  let r = !1;
+  const n = {
+    fn: t,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- any is needed here to allow any React component type to be checked
+    displayName: t.displayName || t.name
+  };
+  return l.Children.forEach(e, (s) => {
+    if (r || !l.isValidElement(s))
+      return;
+    if (s.type === n.fn) {
+      r = !0;
+      return;
+    }
+    const i = s.type, o = (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- any is needed here to allow any React component type to be checked
+      i.displayName || i.name
+    );
+    if (typeof o == "string" && o === n.displayName) {
+      r = !0;
+      return;
+    }
+    const p = s.props;
+    if (a && p.children && u(p.children, n.fn, a)) {
+      r = !0;
+      return;
+    }
+  }), r;
+};
+export {
+  y as a,
+  u as c,
+  m as g,
+  f as p,
+  d as r
+};

package/chunks/{index.CgTHIF3K.js → index.D-sRdssb.js}

@@ -147,7 +147,7 @@ function ee() {
   }
   function Y(e, r) {
     const i = p.get(e);
-    i != null && i.delete(r);
+    i?.delete(r);
   }
   function Z(e) {
     const r = w(null);

package/chunks/{index.CEyLAtio.js → index.DL9mof6u.js}

@@ -10,7 +10,7 @@ var o = { exports: {} };
 */
 var i;
 function p() {
-  return i || (i = 1, function(e) {
+  return i || (i = 1, (function(e) {
     (function() {
       var u = {}.hasOwnProperty;
       function s() {
@@ -39,7 +39,7 @@ function p() {
       }
       e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
     })();
-  }(o)), o.exports;
+  })(o)), o.exports;
 }
 var l = p();
 const m = /* @__PURE__ */ c(l);

package/chunks/{is-animation-disabled.CUl4N3LI.js → is-animation-disabled.B-V_68K-.js}

@@ -1,6 +1,6 @@
 "use client";
 import { h as i } from "./has-window.ut_-aShB.js";
-const n = (t) => i && (t == null ? void 0 : t.getBoundingClientRect()) || DOMRect.fromRect({
+const o = (e) => i && e?.getBoundingClientRect() || DOMRect.fromRect({
   x: 0,
   y: 0,
   width: 0,
@@ -8,13 +8,13 @@ const n = (t) => i && (t == null ? void 0 : t.getBoundingClientRect()) || DOMRec
 }), r = () => {
   if (i) {
     const {
-      matches: t
-    } = window.matchMedia("(prefers-reduced-motion: reduce)"), e = getComputedStyle(document.documentElement).getPropertyValue("--ds-animation-duration").trim();
-    return e === "0s" || e === "0ms" || t;
+      matches: e
+    } = window.matchMedia("(prefers-reduced-motion: reduce)"), t = getComputedStyle(document.documentElement).getPropertyValue("--ds-animation-duration").trim();
+    return t === "0s" || t === "0ms" || e;
   } else
     return !0;
 };
 export {
-  n as g,
+  o as g,
   r as i
 };

package/chunks/{map.CXgG1iGz.js → map.DNl7PF61.js}

@@ -4,7 +4,7 @@ const i = ({
   title: l,
   titleId: t,
   ...a
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 17 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "m5.6.9 4.7 2L16.1.5v12.2l-5.7 2.4-4.7-2L0 15.5V3.3zM2 12.5l2.7-1.2V3.5L2 4.7zm7.3 0-2.7-1.1V3.5l2.7 1.2zm2-.1 2.7-1.1V3.5l-2.7 1.2z", clipRule: "evenodd" }));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "m5.565.9 4.671 2L16 .5v12.2l-5.665 2.4-4.67-2L0 15.5V3.3zM1.988 12.5l2.683-1.2V3.5L1.988 4.7zm7.254 0L6.56 11.4V3.5l2.683 1.2zm1.988-.1 2.683-1.1V3.5L11.23 4.7z", clipRule: "evenodd" }));
 export {
   i as default
 };

package/chunks/moon.5yILPYXs.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const c = ({
+  title: l,
+  titleId: a,
+  ...t
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: a }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M3.992 8c0 2.761 2.229 5 4.978 5a4.7 4.7 0 0 0 1.15-.158c-2.403-2.707-2.39-7.042.103-9.683Q9.62 3.002 8.97 3C6.22 3 3.992 5.239 3.992 8m8.125-6.248A6.9 6.9 0 0 0 8.97 1C5.12 1 2 4.134 2 8s3.12 7 6.97 7c.989 0 2.04-.267 2.99-.694A7.9 7.9 0 0 0 14 13a5.2 5.2 0 0 1-1.921-1.031c-2.349-2.015-2.338-5.87.044-7.84A5.2 5.2 0 0 1 14 3.155a7 7 0 0 0-1.883-1.402", clipRule: "evenodd" }));
+export {
+  c as default
+};

package/chunks/muscle.DbNjWasV.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const c = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M0 5.895c3.5-.723 6.5-.723 10 2.68l1-3.216-2-1.097V1.69L10.4 0H14l2 4.262-2 11.628s-3.911.247-6.4 0c-3.018-.3-5.6-1.153-7.6-1.689zm2 6.244v-4.1s2.726-.911 5.6 1.42c.976.792 2.9 2.68 2.9 2.68l2.5-6.78V4.287l-2-1.071V2.144h2l1 2.143V5.36l-1.6 8.842s-4.214-.267-4.4-.267c-3.018 0-6-1.795-6-1.795", clipRule: "evenodd" }));
+export {
+  c as default
+};

package/chunks/petrol.BGWwCsTw.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const n = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M4.414 0 1 3.46l1.394 1.413 3.414-3.46zm6.053 6.511 1.38 1.399-1.38 1.398 1.38 1.398-1.38 1.399-1.38-1.399-1.379 1.399-1.38-1.399 1.38-1.398-1.38-1.398 1.38-1.399 1.38 1.399z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M3.175 5.712 8.792.02H15V16H3.175zm1.971 8.29h7.883V2.017H9.58L5.146 6.51z", clipRule: "evenodd" }));
+export {
+  n as default
+};

package/chunks/sun.CY6ttzTL.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const m = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M9 16H7v-2.75h2zm-4.005-3.58L3.05 14.364 1.636 12.95l1.944-1.945zm9.369.53-1.414 1.414-1.945-1.945 1.414-1.414z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M8 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { d: "M2.75 9H0V7h2.75zM16 9h-2.75V7H16zM4.995 3.581 3.581 4.995 1.636 3.051 3.05 1.636zm9.369-.531L12.42 4.995 11.005 3.58l1.945-1.944zM9 2.75H7V0h2z" })));
+export {
+  m as default
+};

package/chunks/{triangle-exclamationmark-colored.CbVC3Gzi.js → triangle-exclamationmark-colored.e93zvQ6Q.js}

@@ -4,7 +4,7 @@ const c = ({
   title: l,
   titleId: a,
   ...t
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: a }, l) : null, /* @__PURE__ */ e.createElement("path", { fill: "#FDC543", d: "M8 0 0 16h16z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "m8.7 11.3.5-4.9H6.8l.5 4.9zm-1.8 2.1c0 .6.5 1.1 1.1 1.1s1.1-.4 1.1-1.1c0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1", clipRule: "evenodd" }));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: a }, l) : null, /* @__PURE__ */ e.createElement("path", { fill: "#fdc543", d: "M8 0 0 16h16z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "m8.7 11.3.5-4.9H6.8l.5 4.9zm-1.8 2.1c0 .6.5 1.1 1.1 1.1s1.1-.4 1.1-1.1c0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1", clipRule: "evenodd" }));
 export {
   c as default
 };

package/chunks/upload.BogDfonx.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const h = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M13 5 8 0 3 5l1.5 1.4L7 3.8V10h2V3.8l2.5 2.6z" }), /* @__PURE__ */ e.createElement("path", { d: "M4 8H0v8h16V8h-4v2h2v4H2v-4h2z" }));
+export {
+  h as default
+};

package/chunks/useBreakpoint.1txsny17.js

@@ -0,0 +1,45 @@
+"use client";
+import { useState as u } from "react";
+import { u as c } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
+const o = {
+  base: 0,
+  s: 320,
+  m: 768,
+  l: 1024,
+  xl: 1536
+}, a = ["base", "s", "m", "l", "xl"], k = (e) => {
+  let n = "base";
+  for (const t of a)
+    if (e >= o[t])
+      n = t;
+    else
+      break;
+  return n;
+}, f = (e) => e && typeof e == "object" && "base" in e, b = () => {
+  const [e, n] = u(void 0);
+  c(() => (t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t)), []);
+  const t = () => {
+    const r = window.innerWidth;
+    n(k(r));
+  };
+  return e;
+}, B = (e) => {
+  const n = b();
+  if (!n)
+    return !1;
+  if (e && typeof e != "object" || !f(e))
+    return e;
+  const t = [...a].reverse();
+  let r = e.base;
+  for (const s of t) {
+    const i = e[s];
+    if (i !== void 0 && o[n] >= o[s]) {
+      r = i;
+      break;
+    }
+  }
+  return r;
+};
+export {
+  B as u
+};

package/chunks/variants.-R3_RCW8.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const h = ({
+  title: t,
+  titleId: l,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": l, ...a }, t ? /* @__PURE__ */ e.createElement("title", { id: l }, t) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M10 16H0V6h10zm-8-2h6V8H2z", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { d: "M13 13h-2V5H3V3h10z" }), /* @__PURE__ */ e.createElement("path", { d: "M16 10h-2V2H6V0h10z" })));
+export {
+  h as default
+};

package/chunks/weight.DUPu2UT0.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const c = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "m15.614 14.039-1.516-7.767-.256-1.322h-3.678c.481-.525.776-1.23.776-2.001C10.94 1.322 9.64 0 8.04 0S5.143 1.322 5.143 2.949c0 .771.294 1.472.775 2H2.153l-.255 1.323L.38 14.04 0 16h16l-.381-1.961zm-7.573-12.4c.71 0 1.283.587 1.283 1.305 0 .719-.577 1.305-1.283 1.305A1.296 1.296 0 0 1 6.76 2.944c0-.718.576-1.304 1.282-1.304M2.775 14 4 7h8l1.39 7z" })));
+export {
+  c as default
+};

package/combobox.CGEDlMo0.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _ } from "react/jsx-runtime";
+import { d as $ } from "./chunks/index.D-sRdssb.js";
+import { v as z, c as A } from "./chunks/CustomReactSelect.BA3hUVkh.js";
+import { forwardRef as G } from "react";
+const H = G((x, N) => {
+  const t = $.c(36);
+  let a, r, e, d, o, l, p, i, c, s, v, u, n, f, m;
+  if (t[0] !== x) {
+    const {
+      id: q,
+      label: B,
+      className: I,
+      disabled: w,
+      dropdownOnFocus: D,
+      filterOption: L,
+      hideLabel: E,
+      invalid: F,
+      lang: M,
+      popoverContent: R,
+      popoverInfoButtonProps: j,
+      required: P,
+      tabSelectsValue: V,
+      variant: h,
+      ...k
+    } = x;
+    if (l = q, i = B, a = I, d = L, s = R, v = j, n = k, r = w === void 0 ? !1 : w, e = D === void 0 ? !1 : D, o = E === void 0 ? !1 : E, p = F === void 0 ? !1 : F, c = M === void 0 ? "en" : M, u = P === void 0 ? !1 : P, f = V === void 0 ? !0 : V, m = h === void 0 ? "single" : h, process.env.NODE_ENV !== "production") {
+      const {
+        options: y
+      } = n;
+      z({
+        id: l,
+        label: i,
+        options: y,
+        hideLabel: o,
+        popoverContent: s
+      });
+    }
+    t[0] = x, t[1] = a, t[2] = r, t[3] = e, t[4] = d, t[5] = o, t[6] = l, t[7] = p, t[8] = i, t[9] = c, t[10] = s, t[11] = v, t[12] = u, t[13] = n, t[14] = f, t[15] = m;
+  } else
+    a = t[1], r = t[2], e = t[3], d = t[4], o = t[5], l = t[6], p = t[7], i = t[8], c = t[9], s = t[10], v = t[11], u = t[12], n = t[13], f = t[14], m = t[15];
+  const b = m === "multi", S = !e || b;
+  let C;
+  t[16] !== a || t[17] !== r || t[18] !== e || t[19] !== d || t[20] !== o || t[21] !== l || t[22] !== p || t[23] !== b || t[24] !== i || t[25] !== c || t[26] !== s || t[27] !== v || t[28] !== N || t[29] !== u || t[30] !== n || t[31] !== S || t[32] !== f ? (C = {
+    id: l,
+    label: i,
+    className: a,
+    disabled: r,
+    filterOption: d,
+    hideLabel: o,
+    isMulti: b,
+    invalid: p,
+    lang: c,
+    openMenuOnClick: e,
+    openMenuOnFocus: e,
+    isClearable: S,
+    required: u,
+    ref: N,
+    tabSelectsValue: f,
+    popoverContent: s,
+    popoverInfoButtonProps: v,
+    ...n
+  }, t[16] = a, t[17] = r, t[18] = e, t[19] = d, t[20] = o, t[21] = l, t[22] = p, t[23] = b, t[24] = i, t[25] = c, t[26] = s, t[27] = v, t[28] = N, t[29] = u, t[30] = n, t[31] = S, t[32] = f, t[33] = C) : C = t[33];
+  const g = C;
+  let O;
+  return t[34] !== g ? (O = /* @__PURE__ */ _(A, { ...g }), t[34] = g, t[35] = O) : O = t[35], O;
+});
+H.displayName = "DSCombobox";
+export {
+  H as DSCombobox
+};

package/components/Button/Button.d.ts

@@ -43,6 +43,11 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * @default 'medium'
      */
     size?: ButtonSize;
+    /** Stretches the button over the parent's width.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    stretched?: BreakpointCustomizable<boolean>;
     /** Defines the theme.
      * @default 'light'
      */

package/components/Button/Button.utils.d.ts

@@ -5,19 +5,18 @@ export declare const BUTTON_VARIANT: readonly ["highlight", "filled", "outline",
 export type ButtonVariant = (typeof BUTTON_VARIANT)[number];
 export type ButtonIconPosition = 'left' | 'right';
 export type ButtonAriaAttribute = 'aria-label' | 'aria-expanded' | 'aria-pressed' | 'aria-haspopup';
-type ValidationProps = Pick<ButtonProps, 'variant' | 'size' | 'theme'>;
+type ValidationProps = Pick<ButtonProps, 'hideLabel' | 'iconName' | 'iconSource' | 'isFlush' | 'size' | 'stretched' | 'theme' | 'variant'>;
 /**
  * Performs runtime validation on a subset of `DSButton` props to detect
  * misconfigurations during development.
  *
- * This function provides warnings or throws errors when invalid combinations
- * of `variant`, `size`, or `theme` are detected—particularly for the `navigation` variant.
+ * This function provides warnings or throws errors when invalid combinations of props occur.
  *
  * Intended for development use only; should not be used in production environments.
  *
- * @param validationProps - An object containing the `variant`, `size`, and `theme` props
+ * @param validationProps - An object containing the props to validate
  *                          from the `DSButton` component. These are validated to ensure
  *                          they are used in supported combinations.
  */
-export declare const validateButtonProps: ({ variant, size, theme, }: ValidationProps) => void;
+export declare const validateButtonProps: ({ hideLabel, iconName, iconSource, isFlush, size, stretched, theme, variant, }: ValidationProps) => void;
 export {};

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -31,6 +31,19 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
      * @default false
      */
     invalid?: boolean;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Marks the checkbox group as required.
      *  When this property is set, an asterisk (*) is automatically appended to the checkbox group's legend.
      * @default false
@@ -46,4 +59,4 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
  *
  * Design in Figma: [Checkbox Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=5626-11362&t=UBsmFURFENnuYSW1-4)
  * */
-export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;

package/components/ChipGroup/ChipGroup.utils.d.ts

@@ -52,9 +52,7 @@ export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: {
     tooltipDeactivate: string;
     tooltipActivate: string;
 };
-export declare const DS_CHIP_GROUP_TRANSLATIONS: {
-    [key in ChipGroupLanguage]: ChipGroupAriaTranslations;
-};
+export declare const DS_CHIP_GROUP_TRANSLATIONS: Record<ChipGroupLanguage, ChipGroupAriaTranslations>;
 export declare const getChipAriaLabel: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, label: string, disabled: boolean | undefined, isSelected: boolean | undefined, selectionMode: ChipGroupSelectionMode, isRemovable: boolean | undefined) => string;
 export declare const getChipTooltip: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, disabled: boolean | undefined, isSelected: boolean | undefined, isRemovable: boolean | undefined) => string;
 export {};

package/components/Combobox/Combobox.utils.d.ts

@@ -1,8 +1,9 @@
 import { IconName } from '../../types';
 import { ComboboxProps } from './Combobox';
-import { GroupBase, OptionsOrGroups } from 'react-select';
+import { FilterOptionOption, GroupBase, OptionsOrGroups } from 'react-select';
 export type ComboboxVariant = 'single' | 'multi';
-type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
+type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options' | 'hideLabel' | 'popoverContent'>;
+export type ComboboxFilterOption<Option> = FilterOptionOption<Option>;
 /**
  * Validates the given properties of the DSCombobox component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -11,7 +12,7 @@ type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
  * @param validationProps - The subset of DSCombobox properties to validate. This includes
  *                          id and label.
  */
-export declare const validateComboboxProps: ({ id, label, options, }: ValidationProps) => void;
+export declare const validateComboboxProps: ({ id, label, options, hideLabel, popoverContent, }: ValidationProps) => void;
 export declare const COMBOBOX_SIZE: readonly ["medium", "small"];
 export type ComboboxSize = (typeof COMBOBOX_SIZE)[number];
 export interface ComboboxOption {
@@ -55,9 +56,8 @@ export declare const DS_COMBOBOX_TRANSLATIONS_EN: {
     result_one: string;
     result_other: string;
     resultsAvailable: string;
+    togglePopover: string;
 };
 export declare const DS_COMBOBOX_TRANSLATIONS_DE: ComboboxAriaTranslations;
-export declare const DS_COMBOBOX_TRANSLATIONS: {
-    [key in ComboboxLanguage]: ComboboxAriaTranslations;
-};
+export declare const DS_COMBOBOX_TRANSLATIONS: Record<ComboboxLanguage, ComboboxAriaTranslations>;
 export {};

package/components/Combobox/CustomReactSelect/CustomReactSelect.d.ts

@@ -1,9 +1,9 @@
 import { GroupBase } from 'react-select';
 import { BreakpointCustomizable, Optional } from '../../../types';
-import { ComboboxAriaTranslations, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox.utils';
+import { ComboboxAriaTranslations, ComboboxFilterOption, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox.utils';
 import { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
-type IncludedReactSelectKeys = 'className' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
+type IncludedReactSelectKeys = 'className' | 'filterOption' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
 type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, IncludedReactSelectKeys>, IncludedReactSelectKeys>;
 type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>, 'defaultInputValue'>;
 export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup>, PickedReactSelectStateManagerProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
@@ -26,6 +26,8 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
      * @default false
      */
     disabled?: boolean;
+    /** Custom method to filter whether an option should be displayed in the menu */
+    filterOption?: ((option: ComboboxFilterOption<ComboboxOption>, inputValue: string) => boolean) | null;
     /** Hides the DSCombobox label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
      * @default false
@@ -45,6 +47,19 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
      * @default 'en'
      */
     lang?: ComboboxLanguage;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Indicates that the DSCombobox is required.
      * @default false
      */

package/components/Fieldset/Fieldset.d.ts

@@ -26,6 +26,19 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
      * @default false
      */
     invalid?: boolean;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /**
      * Undocumented property for visually setting the Asterisk.
      * @default false
@@ -39,4 +52,4 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
  *
  * Design in Figma: [Fieldset](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=8-154)
  * */
-export declare const DSFieldset: ({ children, legend, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;
+export declare const DSFieldset: ({ children, legend, className, description, disabled, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;

package/components/Input/Input.d.ts

@@ -51,6 +51,19 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      * @default false
      */
     invalid?: boolean;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Text displayed as a prefix inside the input, maximum 8 characters. */
     prefix?: string;
     /** Enables the readonly state of the input.

package/components/Input/Input.utils.d.ts

@@ -7,7 +7,7 @@ export declare const SUPPORTED_INPUT_TYPES: readonly ["color", "date", "datetime
 export type SupportedInputTypes = (typeof SUPPORTED_INPUT_TYPES)[number];
 export declare const UNSUPPORTED_INPUT_TYPES: readonly ["week", "file", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"];
 export type UnSupportedInputTypes = (typeof UNSUPPORTED_INPUT_TYPES)[number];
-type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonProps'>;
+type ValidationProps = Pick<InputProps, 'hideLabel' | 'id' | 'label' | 'prefix' | 'popoverContent' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonProps'>;
 /**
  * Validates the given properties of the DSInput component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -16,7 +16,7 @@ type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | '
  * @param validationProps - The subset of DSInput properties to validate. This includes
  *                          properties related to the prefix, suffix, icons and action button of the input.
  */
-export declare const validateInputProps: ({ id, label, prefix, suffix, leadingIconName, leadingIconSource, actionButtonProps, }: ValidationProps) => void;
+export declare const validateInputProps: ({ hideLabel, id, label, prefix, popoverContent, suffix, leadingIconName, leadingIconSource, actionButtonProps, }: ValidationProps) => void;
 /**
  * Validates the input type for the DSInput component and provides warnings for certain unsupported types.
  *

package/components/InputFile/InputFile.d.ts

@@ -55,6 +55,19 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
      * @default 'en'
      */
     lang?: InputFileLanguage;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Maximum size allowed in MegaBytes.
      * @default 7
      */

package/components/InputFile/InputFile.utils.d.ts

@@ -9,6 +9,7 @@ export declare const DS_INPUT_FILE_TRANSLATIONS_EN: {
     fileListPreviewAltText: string;
     filesSelectedHint: string;
     required: string;
+    togglePopover: string;
 };
 export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
     dragAndDropInstructions: string;
@@ -18,6 +19,7 @@ export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
     fileListPreviewAltText: string;
     filesSelectedHint: string;
     required: string;
+    togglePopover: string;
 };
 export declare const DS_INPUT_FILE_TRANSLATIONS: {
     [key in InputFileLanguage]: InputFileTranslations;
@@ -28,7 +30,7 @@ export declare const DS_INPUT_FILE_TRANSLATIONS: {
  * @returns true if the file would have been allowed by the browser’s picker UI
  */
 export declare const fileMatchesAccept: (file: File, acceptAttr: string) => boolean;
-type ValidationProps = Pick<InputFileProps, 'id' | 'label' | 'inputFileButtonProps'>;
+type ValidationProps = Pick<InputFileProps, 'id' | 'label' | 'inputFileButtonProps' | 'hideLabel' | 'popoverContent'>;
 /**
  * Validates the required props for the `DSInputFile` component.
  *
@@ -42,5 +44,5 @@ type ValidationProps = Pick<InputFileProps, 'id' | 'label' | 'inputFileButtonPro
  * @param {ValidationProps} params -The subset of DSInputFile properties to validate. This includes
  *                          properties related to the prefix, suffix, icons and action button of the input.
  */
-export declare const validateInputFileProps: ({ id, label, inputFileButtonProps, }: ValidationProps) => void;
+export declare const validateInputFileProps: ({ id, label, inputFileButtonProps, hideLabel, popoverContent, }: ValidationProps) => void;
 export {};