@stihl-design-system/components 1.0.0-RC.34 → 1.0.0-RC.36

package/chunks/{useBreakpoint.BzR_yaIv.js → useBreakpoint.1txsny17.js}

@@ -1,5 +1,6 @@
 "use client";
-import { useState as u, useEffect as c } from "react";
+import { useState as u } from "react";
+import { u as c } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
 const o = {
   base: 0,
   s: 320,
@@ -14,8 +15,8 @@ const o = {
     else
       break;
   return n;
-}, b = (e) => e && typeof e == "object" && "base" in e, f = () => {
-  const [e, n] = u("base");
+}, 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;
@@ -23,8 +24,10 @@ const o = {
   };
   return e;
 }, B = (e) => {
-  const n = f();
-  if (e && typeof e != "object" || !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;

package/combobox.C2XUM4fM.js

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

@@ -2,7 +2,7 @@ import { IconName } from '../../types';
 import { ComboboxProps } from './Combobox';
 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.
@@ -12,7 +12,7 @@ export type ComboboxFilterOption<Option> = FilterOptionOption<Option>;
  * @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 {
@@ -56,6 +56,7 @@ 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: Record<ComboboxLanguage, ComboboxAriaTranslations>;

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

@@ -47,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 {};

package/components/InputNumber/InputNumber.d.ts

@@ -61,8 +61,25 @@ export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElem
      * @default 0
      */
     min?: number | string;
+    /** The interval between legal numbers of the input.
+     * @default 1
+     */
+    step?: number | string;
     /** Text displayed as a prefix inside the input, maximum 8 characters. */
     prefix?: string;
+    /** 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;
+    };
     /** Enables the readonly state of the input.
      * @default false
      */
@@ -71,10 +88,6 @@ export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElem
      * @default false
      */
     required?: boolean;
-    /** The interval between legal numbers of the input.
-     * @default 1
-     */
-    step?: number | string;
     /** Text displayed as a suffix inside the input, maximum 5 characters. */
     suffix?: string;
     /** Defines a system feedback message, shown when `invalid={true}`. */

package/components/InputNumber/InputNumber.utils.d.ts

@@ -1,5 +1,5 @@
 import { InputNumberProps } from './InputNumber';
-type ValidationProps = Pick<InputNumberProps, 'id' | 'label' | 'prefix' | 'suffix'>;
+type ValidationProps = Pick<InputNumberProps, 'id' | 'label' | 'prefix' | 'suffix' | 'hideLabel' | 'popoverContent'>;
 export declare const isValidValue: (value: string | number | readonly string[] | undefined | null) => boolean;
 /**
  * Validates the given properties of the DSInputNumber component for common configuration errors.
@@ -9,5 +9,5 @@ export declare const isValidValue: (value: string | number | readonly string[] |
  * @param validationProps - The subset of DSInputNumber properties to validate. This includes
  *                          properties related to the prefix, suffix, icons and action button of the input.
  */
-export declare const validateInputNumberProps: ({ id, label, prefix, suffix, }: ValidationProps) => void;
+export declare const validateInputNumberProps: ({ id, label, prefix, suffix, hideLabel, popoverContent, }: ValidationProps) => void;
 export {};

package/components/InputPassword/InputPassword.d.ts

@@ -25,6 +25,19 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * @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;
+    };
     /** Enables the readonly state of the input.
      * @default false
      */

package/components/InputPassword/InputPassword.utils.d.ts

@@ -1,5 +1,5 @@
 import { InputPasswordProps } from './InputPassword';
-type ValidationProps = Pick<InputPasswordProps, 'id' | 'label'>;
+type ValidationProps = Pick<InputPasswordProps, 'id' | 'label' | 'hideLabel' | 'popoverContent'>;
 /**
  * Validates the given properties of the DSInputPassword component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -8,5 +8,5 @@ type ValidationProps = Pick<InputPasswordProps, 'id' | 'label'>;
  * @param validationProps - The subset of DSInputPassword properties to validate. This includes
  *                          id and label.
  */
-export declare const validateInputPasswordProps: ({ id, label }: ValidationProps) => void;
+export declare const validateInputPasswordProps: ({ id, label, hideLabel, popoverContent, }: ValidationProps) => void;
 export {};

package/components/InputSearch/InputSearch.d.ts

@@ -25,6 +25,19 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
      * @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;
+    };
     /** Enables the readonly state of the input.
      * @default false
      */

package/components/InputSearch/InputSearch.utils.d.ts

@@ -1,5 +1,5 @@
 import { InputSearchProps } from './InputSearch';
-type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
+type ValidationProps = Pick<InputSearchProps, 'id' | 'label' | 'hideLabel' | 'popoverContent'>;
 /**
  * Validates the given properties of the DSInputSearch component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -8,7 +8,7 @@ type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
  * @param validationProps - The subset of DSInputSearch properties to validate. This includes
  *                          id and label.
  */
-export declare const validateInputSearchProps: ({ id, label }: ValidationProps) => void;
+export declare const validateInputSearchProps: ({ id, label, hideLabel, popoverContent, }: ValidationProps) => void;
 /**
  * Determines whether the specified HTMLElement is within a form element.
  *

package/components/LinkButton/LinkButton.d.ts

@@ -53,6 +53,11 @@ export interface LinkButtonProps extends CommonLinkProps {
      * @default 'medium'
      */
     size?: LinkButtonSize;
+    /** Stretches the link over the parent's width.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    stretched?: BreakpointCustomizable<boolean>;
     /** Visual style variant of the link.
      * @default 'filled'
      */

package/components/LinkButton/LinkButton.utils.d.ts

@@ -7,19 +7,18 @@ export type LinkButtonIconPosition = 'left' | 'right';
 export type LinkButtonRel = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
 export type LinkButtonReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
 export type LinkButtonAriaAttribute = 'aria-label' | 'aria-current' | 'aria-labelledby';
-type ValidationProps = Pick<LinkButtonProps, 'variant' | 'size' | 'theme'>;
+type ValidationProps = Pick<LinkButtonProps, 'hideLabel' | 'iconName' | 'iconSource' | 'isFlush' | 'size' | 'stretched' | 'theme' | 'variant'>;
 /**
  * Performs runtime validation on a subset of `DSLinkButton` 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 `DSLinkButton` component. These are validated to ensure
  *                          they are used in supported combinations.
  */
-export declare const validateLinkButtonProps: ({ variant, size, theme, }: ValidationProps) => void;
+export declare const validateLinkButtonProps: ({ hideLabel, iconName, iconSource, isFlush, size, stretched, theme, variant, }: ValidationProps) => void;
 export {};

package/components/RadioGroup/RadioGroup.d.ts

@@ -45,6 +45,19 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
      * @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 radio group as required.
      *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend.
      * @default false

package/components/RadioGroup/RadioGroup.utils.d.ts

@@ -1,8 +1,9 @@
 import { RadioProps } from '../Radio/Radio';
 import { RadioGroupProps } from './RadioGroup';
 export type RadioGroupOption = Pick<RadioProps, 'label' | 'value' | 'className' | 'customArea' | 'hint' | 'isCustomAreaAbove'>;
-type ValidationProps = Pick<RadioGroupProps, 'legend' | 'name' | 'options' | 'description' | 'direction' | 'id' | 'systemFeedback'>;
+type ValidationProps = Pick<RadioGroupProps, 'legend' | 'name' | 'options' | 'description' | 'direction' | 'hideUncheckedHints' | 'id' | 'systemFeedback'>;
 export declare const optionsHaveHint: (options: RadioGroupOption[]) => boolean;
 export declare const optionsHaveCustomAreaInline: (options: RadioGroupOption[]) => boolean;
-export declare const validateRadioGroupProps: ({ legend, name, options, description, direction, id, systemFeedback, }: ValidationProps) => void;
+export declare const optionsHaveCustomAreaAbove: (options: RadioGroupOption[]) => boolean;
+export declare const validateRadioGroupProps: ({ legend, name, options, description, direction, hideUncheckedHints, id, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/Scroller/Scroller.test.d.ts

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

package/components/Select/Select.d.ts

@@ -28,6 +28,19 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      * @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;
+    };
     /** Modifies the empty option label to ensure a conscious choice.
      * @default 'Select'
      */

package/components/Select/Select.utils.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { GroupBase, OptionsOrGroups } from 'react-select';
 import { SelectProps } from './Select';
-type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
+type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options' | 'hideLabel' | 'popoverContent'>;
 export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
     label: string;
     value: string | number;
@@ -19,7 +19,7 @@ export type SelectSize = (typeof SELECT_SIZE)[number];
  * @param validationProps - The subset of DSSelect properties to validate. This includes
  *                          id and label.
  */
-export declare const validateSelectProps: ({ id, label, options, }: ValidationProps) => void;
+export declare const validateSelectProps: ({ id, label, options, hideLabel, popoverContent, }: ValidationProps) => void;
 /**
  * Determines the initial visibility of the placeholder based on the `placeholder` string and
  * the values of `defaultValue` and `value` from the props.

package/components/Slider/Slider.d.ts

@@ -51,6 +51,19 @@ export interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
         suffix?: string;
         size?: InputSize;
     };
+    /** 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;
+    };
 }
 /**
  * The `<DSSlider />` component is a flexible range input that allows users to select a value within a defined range.

package/components/Textarea/Textarea.d.ts

@@ -31,6 +31,19 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     invalid?: boolean;
     /** Maximum length of the textarea value - if set, a character counter is visible beneath the textarea. */
     maxLength?: number;
+    /** 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;
+    };
     /** Enables the readonly state of the textarea.
      * @default false
      */

package/components/Textarea/Textarea.utils.d.ts

@@ -1,7 +1,7 @@
 import { TextareaProps } from './Textarea';
 export declare const TEXTAREA_SIZE: readonly ["medium", "small"];
 export type TextareaSize = (typeof TEXTAREA_SIZE)[number];
-type ValidationProps = Pick<TextareaProps, 'id' | 'label'>;
+type ValidationProps = Pick<TextareaProps, 'id' | 'label' | 'hideLabel' | 'popoverContent'>;
 /**
  * Validates the given properties of the DSTextarea component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -9,5 +9,5 @@ type ValidationProps = Pick<TextareaProps, 'id' | 'label'>;
  *
  * @param validationProps - The subset of DSTextarea properties to validate.
  */
-export declare const validateTextareaProps: ({ id, label }: ValidationProps) => void;
+export declare const validateTextareaProps: ({ id, label, hideLabel, popoverContent, }: ValidationProps) => void;
 export {};