@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/combobox.DzSEFo_5.js

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

package/combobox.d.ts

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

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,43 @@
+import { DetailsHTMLAttributes } from 'react';
+import { AccordionSize, ChevronPosition, Summary } from './Accordion.utils';
+export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
+    /** Content to be displayed within the accordion. */
+    children: React.ReactNode;
+    /**
+     * The `summary` prop can either be a simple `string` or an object with specific properties.
+     * When provided as a string, it represents the summary text directly.
+     * When provided as an object, it allows for more detailed configuration, including:
+     * - `headingText: string` The text content for the summary.
+     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
+     * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h2'`
+     *
+     * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} summary
+     */
+    summary: Summary;
+    /** Specifies the position of the chevron icon.
+     * @default 'right'
+     */
+    chevronPosition?: ChevronPosition;
+    /** Custom area below the summary. **Cannot be used together with numberIndicatorValue**. */
+    hint?: React.ReactNode;
+    /** Aligns the accordion with text.
+     * @default false
+     */
+    isFlush?: boolean;
+    /** Determines if the Accordion is open.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** Number Indicator value displayed next to the label. **Cannot be used together with hint**. */
+    numberIndicatorValue?: string;
+    /** Size of the accordion.
+     * @default 'medium'
+     */
+    size?: AccordionSize;
+}
+/**
+ * A component that renders an accordion using the `details` HTML element.
+ *
+ * Design in Figma: [Accordion](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=17260-166)
+ */
+export declare const DSAccordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDetailsElement>>;

package/components/Accordion/Accordion.utils.d.ts

@@ -0,0 +1,16 @@
+import { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
+import { AccordionProps } from './Accordion';
+export declare const ACCORDION_SIZE: readonly ["medium", "small", "x-small"];
+export type AccordionSize = (typeof ACCORDION_SIZE)[number];
+export declare const ACCORDION_OPEN_STATE_INDICATOR: readonly ["chevron", "caret"];
+export type AccordionOpenStateIndicator = (typeof ACCORDION_OPEN_STATE_INDICATOR)[number];
+export declare const CHEVRON_POSITION: readonly ["left", "right"];
+export type ChevronPosition = (typeof CHEVRON_POSITION)[number];
+export type Summary = string | {
+    headingText: string;
+    headingSize?: HeadingSize;
+    headingTag?: HeadingTag;
+};
+type ValidationProps = Pick<AccordionProps, 'children' | 'hint' | 'numberIndicatorValue' | 'summary'>;
+export declare const validateAccordionProps: ({ children, hint, numberIndicatorValue, summary, }: ValidationProps) => void;
+export {};

package/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,63 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconName, SelectedAriaAttributes } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { ActionButtonAriaAttribute, ActionButtonChevronDirection, ActionButtonIconPosition, ActionButtonIconSize, ActionButtonIndentLevel, ActionButtonWeight } from './ActionButton.utils';
+export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Content within the button. */
+    children: React.ReactNode;
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-expanded'?: boolean | 'true' | 'false';`
+     *  `'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';`
+     *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`
+     * */
+    aria?: SelectedAriaAttributes<ActionButtonAriaAttribute>;
+    /** Direction of the optional chevron icon. If a direction is set, a chevron icon is displayed.   */
+    chevronDirection?: ActionButtonChevronDirection;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Disables the button, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Name of the icon to display. */
+    iconName?: IconName;
+    /** Position of the icon. `iconPosition='top'` requires either an `iconName` or `iconSource` to be set.
+     * @default 'left'
+     */
+    iconPosition?: ActionButtonIconPosition;
+    /** Size of the icon. **Only available with `iconPosition='left'` and a custom `iconSource`**.
+     * @default 'large'
+     */
+    iconSize?: ActionButtonIconSize;
+    /** URL or path for a custom icon. */
+    iconSource?: IconProps['source'];
+    /** Indent level of the button, used to align the button with other elements e.g. inside a DSAccordion. **Only available with `iconPosition='left'`**.
+     * @default 0
+     */
+    indentLevel?: ActionButtonIndentLevel;
+    /** Enables the active state.
+     * @default false
+     */
+    isActive?: boolean;
+    /** Number Indicator value displayed next to the label or above the icon. */
+    numberIndicatorValue?: string;
+    /** Stretches the button over the parent's width. **Only available with `iconPosition='left'`**.
+     * @default false
+     */
+    stretched?: boolean;
+    /** Defines the weight. **Only available with `iconPosition='left'`**.
+     * @default 'normal'
+     */
+    weight?: ActionButtonWeight;
+    /** Tooltip content. */
+    tooltip?: string;
+    /** Callback function called when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Use the ActionButton component when you want the users to trigger an action, used in the DSDrawer as a mobile menu, as a parent of a Popover or in the DSTopBar of the DSHeader.
+ *
+ * Design in Figma: [Action Item](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6307-72257&t=6MyKQ9TAUdzZ1XaJ-4)
+ * */
+export declare const DSActionButton: import('react').ForwardRefExoticComponent<ActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/ActionButton/ActionButton.utils.d.ts

@@ -0,0 +1,22 @@
+import { ActionButtonProps } from './ActionButton';
+export declare const ACTION_BUTTON_ICON_POSITION: readonly ["left", "top"];
+export type ActionButtonIconPosition = (typeof ACTION_BUTTON_ICON_POSITION)[number];
+export declare const ACTION_BUTTON_ICON_SIZE: readonly ["large", "x-large"];
+export type ActionButtonIconSize = (typeof ACTION_BUTTON_ICON_SIZE)[number];
+export declare const ACTION_BUTTON_INDENT_LEVEL: readonly [0, 1];
+export type ActionButtonIndentLevel = (typeof ACTION_BUTTON_INDENT_LEVEL)[number];
+export declare const ACTION_BUTTON_WEIGHT: readonly ["normal", "bold"];
+export type ActionButtonWeight = (typeof ACTION_BUTTON_WEIGHT)[number];
+export declare const ACTION_BUTTON_CHEVRON_DIRECTION: readonly ["up", "down", "right", "left"];
+export type ActionButtonChevronDirection = (typeof ACTION_BUTTON_CHEVRON_DIRECTION)[number];
+export type ActionButtonAriaAttribute = 'aria-label' | 'aria-expanded' | 'aria-pressed' | 'aria-haspopup';
+type ValidationProps = Pick<ActionButtonProps, 'iconName' | 'iconSize' | 'iconSource' | 'iconPosition' | 'indentLevel' | 'stretched' | 'weight'>;
+/**
+ * Performs runtime validation on a subset of `DSActionButton` props to detect
+ * misconfigurations during development.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ */
+export declare const validateActionButtonProps: ({ iconName, iconSize, iconSource, iconPosition, indentLevel, stretched, weight, }: ValidationProps) => void;
+export {};

package/components/ActionLink/ActionLink.d.ts

@@ -0,0 +1,38 @@
+import { CommonLinkProps } from '../LinkButton/LinkButton';
+import { ActionLinkIconPosition, ActionLinkIconSize, ActionLinkIndentLevel, ActionLinkWeight } from './ActionLink.utils';
+export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition' | 'theme'> {
+    /** Content within the link. */
+    children: React.ReactNode;
+    /** The position of the icon. `iconPosition='top'` requires either an `iconName` or `iconSource` to be set.
+     * @default 'left'
+     */
+    iconPosition?: ActionLinkIconPosition;
+    /** Size of the icon. **Only available with `iconPosition='left'` and a custom `iconSource`**.
+     * @default 'large'
+     */
+    iconSize?: ActionLinkIconSize;
+    /** Indent level of the link, used to align the link with other elements e.g. inside a DSAccordion. **Only available with `iconPosition='left'`**.
+     * @default 0
+     */
+    indentLevel?: ActionLinkIndentLevel;
+    /** Enables the active state.
+     * @default false
+     */
+    isActive?: boolean;
+    /** Number Indicator value displayed next to the label or above the icon. */
+    numberIndicatorValue?: string;
+    /** Stretches the link over the parent's width. **Only available with `iconPosition='left'`**.
+     * @default false
+     */
+    stretched?: boolean;
+    /** Defines the weight. **Only available with `iconPosition='left'`**.
+     * @default 'normal'
+     */
+    weight?: ActionLinkWeight;
+}
+/**
+ * Use the ActionLink component when you want the users to navigate to another internal or external page, used in the DSDrawer as a mobile menu or in the DSTopBar of the DSHeader.
+ *
+ * Design in Figma: [Action Item](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6307-72257&t=6MyKQ9TAUdzZ1XaJ-4)
+ * */
+export declare const DSActionLink: import('react').ForwardRefExoticComponent<ActionLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/ActionLink/ActionLink.test.d.ts

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

package/components/ActionLink/ActionLink.utils.d.ts

@@ -0,0 +1,19 @@
+import { ActionLinkProps } from './ActionLink';
+export declare const ACTION_LINK_ICON_POSITION: readonly ["left", "top"];
+export type ActionLinkIconPosition = (typeof ACTION_LINK_ICON_POSITION)[number];
+export declare const ACTION_LINK_ICON_SIZE: readonly ["large", "x-large"];
+export type ActionLinkIconSize = (typeof ACTION_LINK_ICON_SIZE)[number];
+export declare const ACTION_LINK_INDENT_LEVEL: readonly [0, 1];
+export type ActionLinkIndentLevel = (typeof ACTION_LINK_INDENT_LEVEL)[number];
+export declare const ACTION_LINK_WEIGHT: readonly ["normal", "bold"];
+export type ActionLinkWeight = (typeof ACTION_LINK_WEIGHT)[number];
+type ValidationProps = Pick<ActionLinkProps, 'iconName' | 'iconSize' | 'iconSource' | 'iconPosition' | 'indentLevel' | 'stretched' | 'weight'>;
+/**
+ * Performs runtime validation on a subset of `DSActionLink` props to detect
+ * misconfigurations during development.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ */
+export declare const validateActionLinkProps: ({ iconName, iconSize, iconSource, iconPosition, indentLevel, stretched, weight, }: ValidationProps) => void;
+export {};

package/components/ActionLink/ActionLink.utils.test.d.ts

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

package/components/AriaLiveRegions/AriaLiveRegions.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 /**
  * A component that provides hidden ARIA live regions for accessibility, allowing screen readers to announce changes dynamically.
  */

package/components/AriaLiveRegions/AriaLiveRegions.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const ARIA_LIVE_REGION_ALERT_ID = "ds-alert-live-region";
 export declare const ARIA_LIVE_REGION_STATUS_ID = "ds-status-live-region";
-export declare const getAriaAlertLiveRegionElement: () => HTMLElement | null;
-export declare const getAriaStatusLiveRegionElement: () => HTMLElement | null;
+export declare const getAriaAlertLiveRegionElement: () => HTMLElement | null | undefined;
+export declare const getAriaStatusLiveRegionElement: () => HTMLElement | null | undefined;
 export declare const validateMultipleDSAriaLiveRegionsOnPage: () => void;

package/components/Asterisk/Asterisk.d.ts

@@ -1 +1,2 @@
+import { JSX } from 'react';
 export declare const Asterisk: () => JSX.Element;

package/components/Banner/Banner.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, JSX } from 'react';
+import { BannerVariant } from './Banner.utils';
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the Banner. */
+    children?: React.ReactNode;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close banner'
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Defines the variant.
+     * @default 'default'
+     */
+    variant?: BannerVariant;
+    /** Shows a close button if provided and is called when the close button is clicked. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Use the Banner component to highlight temporary, non-critical marketing content—such as promotions, campaigns,
+ * or events—without disrupting the user experience.
+ *
+ * Avoid using it for critical updates or system messages; use notifications for those instead.
+ *
+ * Design in Figma: [Banner](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/branch/E1V1SOH56AJFI8POcjNHhO/Web-Pattern-Library?node-id=7171-10859&t=DJuQNlSCRz2j9IRs-11)
+ * */
+export declare const DSBanner: ({ className, closeButtonProps, children, variant, onClose, ...rest }: BannerProps) => JSX.Element;

package/components/Banner/Banner.test.d.ts

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

package/components/Banner/Banner.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const BANNER_VARIANT: readonly ["default", "secondary", "highlight"];
+export type BannerVariant = (typeof BANNER_VARIANT)[number];

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,45 @@
+import { SelectedAriaAttributes } from '../../types';
+import { BreadcrumbAriaAttributes } from './Breadcrumb.utils';
+import { JSX } from 'react';
+export interface BreadcrumbLink {
+    /** The link label text. */
+    label: string;
+    /** The href for the link if no framework-specific link component wrapper is provided. */
+    href?: string;
+    /**  Name of the icon to display.*/
+    iconName?: string;
+    /** The framework-specific link component wrapper, e.g., `Link` for `next` or `react-router-dom`. */
+    wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** ARIA attributes to ensure accessibility
+     *
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<BreadcrumbAriaAttributes>;
+    /** Breadcrumb link array structure with optional and required parameters
+     *  `{ label: string;`
+     *  `href?: string;`
+     *  `iconName?: IconName;`
+     *  `wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;}[]`
+     */
+    links: BreadcrumbLink[];
+    /** Show all (...) button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the show all button.
+     * (default) 'Show all links'
+     */
+    showAllButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+}
+/**
+ * A breadcrumb provides orientation to users within the structure of a website or application.
+ *
+ * Design in Figma: [Breadcrumb](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=23527-3393)
+ * */
+export declare const DSBreadcrumb: ({ aria, className, links, showAllButtonProps, ...rest }: BreadcrumbProps) => JSX.Element;

package/components/Breadcrumb/Breadcrumb.test.d.ts

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

package/components/Breadcrumb/Breadcrumb.utils.d.ts

@@ -0,0 +1,4 @@
+import { BreadcrumbProps } from './Breadcrumb';
+export type BreadcrumbAriaAttributes = 'aria-label' | 'aria-labelledby';
+export declare const MAX_VISIBLE_LINKS = 4;
+export declare const validateBreadcrumbProps: ({ aria, links }: BreadcrumbProps) => void;

package/components/Button/Button.d.ts

@@ -2,9 +2,8 @@ import { ButtonHTMLAttributes } from 'react';
 import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { ButtonAriaAttribute, ButtonSize, ButtonVariant } from './Button.utils';
-
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content within the button */
+    /** Content within the button. */
     children: React.ReactNode;
     /** ARIA attributes to enhance accessibility
      *  `{'aria-label'? string;`
@@ -13,34 +12,60 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`
      * */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
-    /** Identifier for analytics tracking */
-    dataTrackingid?: string;
-    /** Disables the button, preventing user interaction */
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Disables the button, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the button label, can be responsive
+    /** Hides the button label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Name of the icon to display */
+    /** Name of the icon to display. */
     iconName?: IconName;
-    /** Position of the icon */
+    /** Position of the icon.
+     * @default 'left'
+     */
     iconPosition?: 'left' | 'right';
-    /** URL or path for a custom icon */
+    /** URL or path for a custom icon. */
     iconSource?: IconProps['source'];
-    /** Aligns `variant='ghost'` with text */
+    /** Aligns `variant='ghost'` with text.
+     * @default false
+     */
     isFlush?: boolean;
-    /** Shows loading indicator */
+    /** Shows loading indicator.
+     * @default false
+     */
     loading?: boolean;
-    /** Size of the button */
+    /** Size of the button.
+     * @default 'medium'
+     */
     size?: ButtonSize;
-    /** Defines the theme */
+    /** 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'
+     */
     theme?: Theme;
-    /** Visual style variant of the button */
+    /**
+     * Tooltip content.
+     */
+    tooltip?: string;
+    /** Visual style variant of the button.
+     * @default 'filled'
+     */
     variant?: ButtonVariant;
-    /** Callback function triggered when the button is clicked */
+    /** Callback function called when the button is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * Use the Button component to initialize an important action or to highlight the user journey.
+ *
+ * Design in Figma: [Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-3943&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSButton: ({ children, aria, className, dataTrackingid, disabled, hideLabel, iconName, iconPosition, iconSource, isFlush, loading, size, theme, variant, onClick, ...rest }: ButtonProps) => JSX.Element;
+export declare const DSButton: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,22 @@
+import { ButtonProps } from './Button';
 export declare const BUTTON_SIZE: readonly ["medium", "small"];
 export type ButtonSize = (typeof BUTTON_SIZE)[number];
-export declare const BUTTON_VARIANT: readonly ["filled", "highlight", "outline", "ghost"];
+export declare const BUTTON_VARIANT: readonly ["highlight", "filled", "outline", "ghost", "navigation"];
 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, '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 props occur.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ * @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: ({ hideLabel, iconName, iconSource, isFlush, size, stretched, theme, variant, }: ValidationProps) => void;
+export {};

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

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

package/components/ButtonRound/ButtonRound.d.ts

@@ -1,11 +1,20 @@
+import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
 import { ButtonRoundVariant } from './ButtonRound.utils';
-
 export interface ButtonRoundProps extends Omit<ButtonProps, 'hideLabel' | 'size' | 'iconPosition' | 'isFlush'> {
     children: React.ReactNode;
+    /** Visual style variant of the button.
+     * @default 'filled'
+     */
     variant?: ButtonRoundVariant;
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
+    iconName?: IconName;
 }
 /**
- * Icon only Buttons should only used for functions where visible labels are not needed to define the function e.g. modal close or paginations buttons.
+ * Icon only Buttons should only used for functions where visible labels are not needed to define the function e.g. modal close or pagination buttons.
+ *
+ * Design in Figma: [Button Round](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-4016&t=UBsmFURFENnuYSW1-4)
  * */
-export declare const DSButtonRound: ({ children, aria, className, dataTrackingid, disabled, iconName, iconSource, loading, theme, variant, onClick, ...rest }: ButtonRoundProps) => JSX.Element;
+export declare const DSButtonRound: import('react').ForwardRefExoticComponent<ButtonRoundProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/Checkbox/Checkbox.d.ts

@@ -1,27 +1,43 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
-
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
-    /** Content displayed next to the checkbox */
+    /** Content displayed next to the checkbox. */
     label: string;
-    /** Controls whether the checkbox is checked. */
+    /**
+     * Id of the parent DSCheckboxGroup, required when setting a `systemFeedback` and `invalid={true}` on the DSCheckboxGroup.
+     */
+    checkboxGroupId?: string;
+    /** Controls whether the checkbox is checked.
+     * @default false
+     */
     checked?: boolean;
-    /** Disables the checkbox, preventing user interaction */
+    /** Disables the checkbox, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the checkbox label, can be responsive
+    /** Hides the checkbox label, can be responsive.
      * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      * */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Sets the checkbox to an indeterminate state, distinct from checked or unchecked */
+    /** Unique id for the checkbox. Needs to be set if systemFeedback is provided */
+    id?: string;
+    /** Sets the checkbox to an indeterminate state, distinct from checked or unchecked.
+     * @default false
+     */
     indeterminate?: boolean;
-    /** Marks the checkbox as invalid, typically used for form validation */
+    /** Marks the checkbox as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Callback function triggered when the state of the checkbox changes */
+    /** Callback function called when the state of the checkbox changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * A control element that allows users to make a binary choice. It can either be checked or unchecked.
+ *
+ * Design in Figma: [Checkbox](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1017-2328&t=UBsmFURFENnuYSW1-11)
  * */
 export declare const DSCheckbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/Checkbox/Checkbox.utils.d.ts

@@ -0,0 +1,11 @@
+import { CheckboxProps } from './Checkbox';
+type ValidationProps = Pick<CheckboxProps, 'label' | 'id' | 'invalid' | 'systemFeedback'>;
+/**
+ * Validates the given properties of the DSCheckbox component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSCheckbox properties to validate.
+ */
+export declare const validateCheckboxProps: ({ label, id, invalid, systemFeedback, }: ValidationProps) => void;
+export {};

package/components/Checkbox/Checkbox.utils.test.d.ts

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