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

package/components/InputStepper/InputStepper.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
@@ -14,10 +14,17 @@ export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputEle
      * @default false
      */
     disabled?: boolean;
-    /** Accessibility label for the decrease button.
-     * @default 'Decrease'
+    /** Decrease amount button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the decrease button.
+     * (default) 'Decrease'
      */
-    decreaseAmountButtonLabel?: string;
+    decreaseAmountButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
      * @default false
@@ -25,10 +32,17 @@ export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputEle
     hideLabel?: BreakpointCustomizable<boolean>;
     /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Accessibility label for the increase button.
-     * @default 'Increase'
+    /** Increase amount button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the increase button.
+     * (default) 'Increase'
      */
-    increaseAmountButtonLabel?: string;
+    increaseAmountButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Marks the input as invalid, typically used for form validation.
      * @default false
      */
@@ -71,5 +85,7 @@ export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputEle
  * It comes in two sizes (medium & small) and supports various customizations including a prefix and suffix.
  *
  * Next to the input field, there are two buttons to increase or decrease the input value.
+ *
+ * Design in Figma: [Input Stepper](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6769&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputStepper: ({ id, label, announcementText, className, disabled, decreaseAmountButtonLabel, hint, hideLabel, invalid, increaseAmountButtonLabel, prefix, max, min, readonly, required, size, step, suffix, systemFeedback, value, onChange, ...rest }: InputStepperProps) => JSX.Element;
+export declare const DSInputStepper: ({ id, label, announcementText, className, disabled, decreaseAmountButtonProps, hint, hideLabel, invalid, increaseAmountButtonProps, prefix, max, min, readonly, required, size, step, suffix, systemFeedback, value, onChange, ...rest }: InputStepperProps) => JSX.Element;

package/components/Link/Link.d.ts

@@ -1,6 +1,7 @@
 import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
+import { JSX } from 'react';
 export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** ARIA attributes to enhance accessibility.
      *  `{'aria-label'? string;`
@@ -8,8 +9,8 @@ export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorEl
      *  `'aria-labelledby'?: string;}`
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
-    /** Identifier for analytics tracking. */
-    dataTrackingid?: string;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
     /** Specifies that the target will be downloaded and opens native browser download dialog. */
     download?: string;
     /** Defines the URL to link to. */
@@ -58,5 +59,7 @@ export interface LinkProps extends CommonLinkProps {
 }
 /**
  * Use the Link component when you want the users to navigate to another internal or external page.
+ *
+ * Design in Figma: [Link](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=162-126)
  * */
-export declare const DSLink: ({ children, aria, className, dataTrackingid, download, hideLabel, href, iconName, iconPosition, iconSource, isFlush, referrerPolicy, rel, size, target, theme, variant, ...rest }: LinkProps) => JSX.Element;
+export declare const DSLink: ({ children, aria, className, download, hideLabel, href, iconName, iconPosition, iconSource, isFlush, referrerPolicy, rel, size, target, theme, variant, ...rest }: LinkProps) => JSX.Element;

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -1,5 +1,6 @@
 import { CommonLinkProps } from '../Link/Link';
 import { LinkStandaloneVariant } from './LinkStandalone.utils';
+import { JSX } from 'react';
 export interface LinkStandaloneProps extends CommonLinkProps {
     /** Content within the link. */
     children: React.ReactNode;
@@ -12,5 +13,7 @@ export interface LinkStandaloneProps extends CommonLinkProps {
 }
 /**
  * Use LinkStandalone when you want the users to navigate to another internal or external page.
+ *
+ * Design in Figma: [Link Standalone](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-7210&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSLinkStandalone: ({ children, aria, active, className, dataTrackingid, download, href, iconName, iconPosition, iconSource, referrerPolicy, rel, target, theme, variant, ...rest }: LinkStandaloneProps) => JSX.Element;
+export declare const DSLinkStandalone: ({ children, aria, active, className, download, href, iconName, iconPosition, iconSource, referrerPolicy, rel, target, theme, variant, ...rest }: LinkStandaloneProps) => JSX.Element;

package/components/Logo/Logo.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
 import { LogoAriaAttribute, LogoTarget, LogoVariant } from './Logo.utils';
 export interface LogoProps extends HTMLAttributes<SVGElement | HTMLAnchorElement> {
@@ -25,5 +25,7 @@ export interface LogoProps extends HTMLAttributes<SVGElement | HTMLAnchorElement
  * This component is used to display the logo.
  *
  * It can be also used as a link by providing a `href` and an `aria-label`.
+ *
+ * Design in Figma: [Logo](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=9050-2)
  */
 export declare const DSLogo: ({ aria, className, href, target, theme, variant, ...rest }: LogoProps) => JSX.Element;

package/components/NavigationTabs/NavigationTabs.d.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes, JSX } from 'react';
+import { IconName, SelectedAriaAttributes } from '../../types';
+import { TabListAriaAttributes } from '../Tabs/TabList/TabList.utils';
+import { NavigationTabsAlignment } from './NavigationTabs.utils';
+export interface NavigationTab {
+    /** Unique id for the NavigationTab. */
+    id: string;
+    /** Link component to be used for the navigation. */
+    linkComponent: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
+        onClick?: () => void;
+        to?: string;
+    }>;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** Number Indicator value displayed next to the label. */
+    numberIndicatorValue?: string;
+}
+export interface NavigationTabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** ARIA attributes to ensure accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<TabListAriaAttributes>;
+    /** NavigationTab array structure with optional and required parameters
+     *  `{ id: string;`
+     *  `linkComponent: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & { onClick?: () => void; to?: string; }>;`
+     *  `iconName?: IconName;`
+     *  `numberIndicatorValue?: string; }[]`
+     */
+    tabs: NavigationTab[];
+    /** Alignment of the NavigationTabs.
+     * @default 'left'
+     */
+    alignment?: NavigationTabsAlignment;
+    /** Index of the tab that should be active. */
+    activeTabIndex?: number;
+}
+/**
+ * The Navigation Tabs component is a link list and often used as secondary navigation. The components main function is to navigate to another page url.
+ *
+ * Design in Figma: [Navigation Tabs](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=24564-335&t=UBsmFURFENnuYSW1-11)
+ */
+export declare const DSNavigationTabs: ({ aria, tabs, alignment, className, activeTabIndex, ...rest }: NavigationTabsProps) => JSX.Element;

package/components/NavigationTabs/NavigationTabs.test.d.ts

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

package/components/NavigationTabs/NavigationTabs.utils.d.ts

@@ -0,0 +1,6 @@
+import { NavigationTabsProps } from './NavigationTabs';
+export declare const NAVIGATION_TABS_ALIGNMENT: readonly ["left", "center"];
+export type NavigationTabsAlignment = (typeof NAVIGATION_TABS_ALIGNMENT)[number];
+export declare const NAVIGATION_TABS_DIRECTION: readonly ["prev", "next"];
+export type NavigationTabsDirection = (typeof NAVIGATION_TABS_DIRECTION)[number];
+export declare const validateNavigationTabsProps: ({ aria, tabs, activeTabIndex, }: NavigationTabsProps) => void;

package/components/Notification/Notification.d.ts

@@ -1,12 +1,19 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { NotificationVariant } from './Notification.utils';
 export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
     /** Content within the Notification. */
     children: React.ReactNode;
-    /** Label for the close button.
-     * @default 'Close notification''
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close notification'
      */
-    closeButtonLabel?: string;
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Content within the Notification's action bar. For example a CTA button. */
     customActionArea?: React.ReactNode;
     /** Hides the icon.
@@ -24,8 +31,10 @@ export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
  * An inline notification component that can be used to provide system feedback messages
  * or highlight important content.
  *
+ * Design in Figma: [Notification](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=7251-8)
+ *
  * The background color and icon vary based on the value of the `variant` prop.
  *
  * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
  */
-export declare const DSNotification: ({ children, variant, className, closeButtonLabel, customActionArea, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;
+export declare const DSNotification: ({ children, variant, className, closeButtonProps, customActionArea, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;

package/components/NumberIndicator/NumberIndicator.d.ts

@@ -1,4 +1,5 @@
 import { NumberIndicatorVariant } from './NumberIndicator.utils';
+import { JSX } from 'react';
 export interface NumberIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Content within the NumberIndicator. */
     label?: string;

package/components/RadioGroup/RadioGroup.d.ts

@@ -61,5 +61,7 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
  * The `DSRadioGroup` component offers a cohesive and accessible solution for grouping radio buttons,
  * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
+ *
+ * Design in Figma: [Radio Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=860-2728)
  * */
 export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { SelectHTMLAttributes } from 'react';
+import { SelectHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
@@ -47,6 +47,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
  * Use the DSSelect component to efficiently navigate through and select from a range of options,
  * enhancing user interaction and decision-making in your application.
  *
+ * Design in Figma: [Select](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8139-4888)
  *
  * <div className="ds-alert">If you are looking for a component with a **custom dropdown** or the ability to **filter** and **select multiple options**, please take a look at
  * [DSCombobox](/docs/components-combobox--documentation)</div>

package/components/SkipToContent/SkipToContent.d.ts

@@ -1,4 +1,5 @@
 import { LinkProps } from '../Link/Link';
+import { JSX } from 'react';
 export interface SkipToContentProps extends Pick<LinkProps, 'className' | 'theme'> {
     /** Content within the SkipToContent Link.
      * @default 'Skip to main content'
@@ -13,5 +14,7 @@ export interface SkipToContentProps extends Pick<LinkProps, 'className' | 'theme
  * The `<DSSkipToContent />` component is an accessibility feature that allows users, especially those using screen readers or keyboard navigation, to quickly jump to the targeted content of a webpage without having to focus all the navigation items first. This improves the user experience by making it easier and faster to access important information.
  *
  * Focus the section below by using the tab key to see the "Skip To Content" component in action.
+ *
+ * Design in Figma: [Skip To Content](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=16333-2371)
  */
 export declare const DSSkipToContent: ({ children, className, targetElementId, theme, ...rest }: SkipToContentProps) => JSX.Element;

package/components/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
 import { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
@@ -15,4 +15,10 @@ export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
      */
     theme?: Theme;
 }
+/**
+ *
+ * Shows the loading state and that the user request is being processed.
+ *
+ * Design in Figma: [Spinner](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26-3)
+ */
 export declare const DSSpinner: ({ aria, className, size, theme, ...rest }: SpinnerProps) => JSX.Element;

package/components/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, JSX } from 'react';
 import { SelectedAriaAttributes } from '../../types';
 import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -16,8 +16,8 @@ export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     checked?: boolean;
-    /** Identifier for analytics tracking. */
-    dataTrackingid?: string;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
     /** Disables the switch, preventing user interaction.
      * @default false
      */
@@ -35,5 +35,7 @@ export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 /**
  * Often used in settings, in which users can communicate their choice through binary selection.
+ *
+ * Design in Figma: [Switch](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=513-2)
  * */
-export declare const DSSwitch: ({ children, aria, alignLabel, checked, className, dataTrackingid, disabled, loading, stretched, onClick, ...rest }: SwitchProps) => JSX.Element;
+export declare const DSSwitch: ({ children, aria, alignLabel, checked, className, disabled, loading, stretched, onClick, ...rest }: SwitchProps) => JSX.Element;

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { SystemFeedbackType } from './SystemFeedback.utils';
 export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
     /** Defines the message. */

package/components/Tabs/TabList/NavigationTabList/NavigationTabList.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react';
+import { NavigationTab } from '../../../NavigationTabs/NavigationTabs';
+interface NavigationTabListProps {
+    tabs: NavigationTab[];
+    tabRefs: React.MutableRefObject<HTMLAnchorElement[]>;
+    scrollerClass: string;
+    scrollerRef: React.MutableRefObject<HTMLUListElement>;
+    selectedTabIndex: number;
+    handleNavigationKeydown: (event: React.KeyboardEvent<HTMLAnchorElement>, index: number) => void;
+    setSelectedTab: (index: number) => void;
+}
+/**
+ * The NavigationTabList component is an internal component used inside the TabList component.
+ * It renders an unordered list with list items that contain anchor elements.
+ *
+ * Consumers can pass in a link component which is cloned and modified. This allows us to add
+ * DSIcon and NumberIndicator and other props.
+ * Additionally the link component can be a regular anchor element or a Link component from
+ * React Router/Next or any other routing framework.
+ */
+export declare const NavigationTabList: ({ tabs, tabRefs, scrollerClass, scrollerRef, selectedTabIndex, handleNavigationKeydown, setSelectedTab, }: NavigationTabListProps) => JSX.Element;
+export {};

package/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,38 @@
+import { Dispatch, HTMLAttributes, SetStateAction, JSX } from 'react';
+import { SelectedAriaAttributes } from '../../../types';
+import { NavigationTab } from '../../NavigationTabs/NavigationTabs';
+import { Tab } from '../Tabs';
+import { TabsAlignment } from '../Tabs.utils';
+import { TabListAriaAttributes } from './TabList.utils';
+export type TabListProps<IsNavigation extends boolean> = {
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<TabListAriaAttributes>;
+    selectedTabIndex: number;
+    setSelectedTabIndex: Dispatch<SetStateAction<number>>;
+    /** An array of Tab Objects containing the id, content, label, and other optional parameters.
+     * `{id: string; content: React.ReactNode; label: string; iconName?: IconName; numberIndicatorValue?: string;}[]`*/
+    tabs: IsNavigation extends true ? NavigationTab[] : Tab[];
+    /** Alignment of the Tabs.
+     * @default 'left'
+     */
+    alignment?: TabsAlignment;
+    /** Index of the tab to be selected when Tabs are rendered the first time.
+     * @default 0
+     * */
+    defaultSelectedTabIndex?: number;
+    /** Sets the TabList to navigation mode, using links instead of buttons */
+    isNavigation?: boolean;
+    /** Callback function called when the selected tab changes. */
+    onTabChange?: (selectedTabIndex: number) => void;
+} & HTMLAttributes<HTMLDivElement> & (IsNavigation extends false ? {
+    id: string;
+} : unknown);
+/**
+ *
+ * The TabList component is an internal component used in DSTabs and DSNavigationTabs.
+ * It dynamically renders either a div with role="tablist" or a nav element based on the isNavigation prop.
+ */
+export declare const TabList: <IsNavigation extends boolean>({ aria, id: tabListId, selectedTabIndex, setSelectedTabIndex, tabs, alignment, className, defaultSelectedTabIndex, isNavigation, onTabChange, ...rest }: TabListProps<IsNavigation>) => JSX.Element;

package/components/Tabs/TabList/TabList.utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns the bounding rectangle of a DOM element or a default DOMRect object with 0 values if unavailable.
+ */
+export declare const getRect: (element: HTMLElement | null) => DOMRect;
+export declare const SCROLL_MARGIN_INLINE = 48;
+export type TabListAriaAttributes = 'aria-label' | 'aria-labelledby';

package/components/Tabs/TabList/TabList.utils.test.d.ts

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

package/components/Tabs/TabPane/TabPane.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, JSX } from 'react';
 export interface TabPaneProps {
     id: string;
     content: ReactNode;

package/components/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { IconName } from '../../types';
 import { TabsAlignment } from './Tabs.utils';
 export interface Tab {
@@ -17,7 +17,12 @@ export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
     /** Unique id for the tab list. */
     id: string;
     /** An array of Tab Objects containing the id, content, label, and other optional parameters.
-     * `{id: string; content: React.ReactNode; label: string; iconName?: IconName; numberIndicatorValue?: string;}[]`*/
+     *  `{ content: React.ReactNode;`
+     *  `id: string;`
+     *  `label: string;`
+     *  `iconName?: IconName;`
+     *  `numberIndicatorValue?: string; }[]`
+     */
     tabs: Tab[];
     /** Alignment of the Tabs.
      * @default 'left'
@@ -38,5 +43,7 @@ export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
  * A component for organizing content into tabbed sections, allowing users to navigate between them.
  * Supports single selection to maintain focus on one content area at a time.
  * Avoid excessive tabs to prevent overwhelming the user.
+ *
+ * Design in Figma: [Tabs](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=24564-313&t=UBsmFURFENnuYSW1-11)
  */
 export declare const DSTabs: ({ id: tabListId, tabs, alignment, className, classNameTabPane, defaultSelectedTabIndex, onTabChange, ...rest }: TabsProps) => JSX.Element;

package/components/Tabs/Tabs.utils.d.ts

@@ -3,9 +3,4 @@ export declare const TABS_ALIGNMENT: readonly ["left", "center"];
 export type TabsAlignment = (typeof TABS_ALIGNMENT)[number];
 export declare const TABS_DIRECTION: readonly ["prev", "next"];
 export type TabsDirection = (typeof TABS_DIRECTION)[number];
-/**
- * Returns the bounding rectangle of a DOM element or a default DOMRect object with 0 values if unavailable.
- */
-export declare const getRect: (element: HTMLElement | null) => DOMRect;
-export declare const SCROLL_MARGIN_INLINE = 48;
-export declare const validateTabsProps: ({ id, tabs }: TabsProps) => void;
+export declare const validateTabsProps: ({ id, tabs, defaultSelectedTabIndex, }: TabsProps) => void;

package/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { Theme } from '../../types';
 import { TextSize, TextTag, TextWeight } from './Text.utils';
 export interface TextProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElement | HTMLLegendElement | HTMLParagraphElement | HTMLSpanElement | HTMLTimeElement> {
@@ -22,8 +22,10 @@ export interface TextProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElem
     weight?: TextWeight;
 }
 /**
- *  The `DSText` component is designed for displaying body text and paragraphs,
- *  ensuring consistent sizing across different viewports.
- *  It is a versatile component that can be used in various parts of your application where text content is needed.
+ * The `DSText` component is designed for displaying body text and paragraphs,
+ * ensuring consistent sizing across different viewports.
+ * It is a versatile component that can be used in various parts of your application where text content is needed.
+ *
+ * Design in Figma: [Text](https://www.figma.com/design/d9wrOp4aCplDsV9AVC87Xn/Typography-%F0%9F%85%B0%EF%B8%8F?node-id=3-2301&t=TeSgud7dB5pnld5s-11)
  */
 export declare const DSText: ({ children, className, size, tag, theme, weight, ...rest }: TextProps) => JSX.Element;

package/components/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { TextareaSize } from './Textarea.utils';
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
@@ -55,5 +55,7 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
 /**
  * The `<DSTextarea />` component allows users to enter and edit multi line text.
  * It comes in two sizes (medium & small) and supports various customizations
+ *
+ * Design in Figma: [Textarea](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=4937-4402)
  */
 export declare const DSTextarea: ({ id, label, charsLimitText, charsRemainingText, className, defaultValue, disabled, hint, hideLabel, invalid, maxLength, readonly, required, resize, size, systemFeedback, value, wrapperClassName, onChange, onInput, ...rest }: TextareaProps) => JSX.Element;

package/components/Title/Title.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { Theme } from '../../types';
 import { TitleSize, TitleTag } from './Title.utils';
 export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
@@ -22,5 +22,7 @@ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
  * It's intended for primary emotional headlines that should be prominent,
  * accompanied by a stand line for reinforcement.
  * The component ensures impactful headline presentation in your application.
+ *
+ * Design in Figma: [Title](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=7-77&t=ZOQH7XUcmLFb8aah-11)
  */
 export declare const DSTitle: ({ children, className, size, tag, theme, ...rest }: TitleProps) => JSX.Element;

package/components/Toast/Toast.d.ts

@@ -21,6 +21,8 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'
 /**
  * Toasts are small, non-intrusive messages that appear temporarily to provide feedback or information.
  *
+ * Design in Figma: [Toast](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8844-4923)
+ *
  * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
  *
  * */

package/customreactselect.CW5-QQSM.js

@@ -0,0 +1,14 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import { c as u } from "./chunks/CustomReactSelect.C2yN7CYh.js";
+import "./chunks/useBreakpoint.CMOR9ZOB.js";
+import "./asterisk.DUzshaw5.js";
+import "./chunks/Icon.DhKyUWtM.js";
+import "./systemfeedback.7I6fnqjX.js";
+import "./optioncheckbox.DcckSTrV.js";
+export {
+  u as CustomReactSelect
+};

package/dialog.DuAgAwfs.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import "./button.Ywd82k7O.js";
+import { D } from "./chunks/Dialog.CjzCKRr2.js";
+export {
+  D as DSDialog
+};

package/drawer.D3E46fH1.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import "./button.Ywd82k7O.js";
+import { D } from "./chunks/Drawer.m2JeVNBp.js";
+export {
+  D as DSDrawer
+};

package/fieldset.4UygHVV3.js

@@ -0,0 +1,12 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import "./asterisk.DUzshaw5.js";
+import "./heading.6LOBHJG6.js";
+import "./systemfeedback.7I6fnqjX.js";
+import { D } from "./chunks/Fieldset.DfWsQgjD.js";
+export {
+  D as DSFieldset
+};

package/flag.BJk5fHMs.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs as y, jsx as p } from "react/jsx-runtime";
+import { d as L } from "./chunks/index.CgTHIF3K.js";
+import { c as u } from "./chunks/index.CEyLAtio.js";
+import { D as w } from "./chunks/Icon.DhKyUWtM.js";
+import './assets/flag.C7i3MAAP.css';const b = "ds-flag_root_14d3h_1", x = "ds-flag_root--color-grey-light_14d3h_28", G = "ds-flag_root--color-yellow-light_14d3h_31", N = "ds-flag_root--color-red-light_14d3h_34", S = "ds-flag_root--color-green-light_14d3h_37", D = "ds-flag_root--color-orange-base_14d3h_40", C = {
+  root: b,
+  "root--color-grey-light": "ds-flag_root--color-grey-light_14d3h_28",
+  rootColorGreyLight: x,
+  "root--color-yellow-light": "ds-flag_root--color-yellow-light_14d3h_31",
+  rootColorYellowLight: G,
+  "root--color-red-light": "ds-flag_root--color-red-light_14d3h_34",
+  rootColorRedLight: N,
+  "root--color-green-light": "ds-flag_root--color-green-light_14d3h_37",
+  rootColorGreenLight: S,
+  "root--color-orange-base": "ds-flag_root--color-orange-base_14d3h_40",
+  rootColorOrangeBase: D
+}, R = (n) => {
+  const o = L.c(23);
+  let e, s, r, t, l, c;
+  o[0] !== n ? ({
+    children: e,
+    className: s,
+    color: r,
+    iconName: t,
+    iconSource: l,
+    ...c
+  } = n, o[0] = n, o[1] = e, o[2] = s, o[3] = r, o[4] = t, o[5] = l, o[6] = c) : (e = o[1], s = o[2], r = o[3], t = o[4], l = o[5], c = o[6]);
+  const g = typeof r == "string" && C[`root--color-${r}`];
+  let a;
+  o[7] !== r || o[8] !== g ? (a = g ? {} : {
+    backgroundColor: r
+  }, o[7] = r, o[8] = g, o[9] = a) : a = o[9];
+  const _ = a, f = C[`root--color-${r}`];
+  let d;
+  o[10] !== s || o[11] !== g || o[12] !== f ? (d = u(C.root, s, {
+    [f]: g
+  }), o[10] = s, o[11] = g, o[12] = f, o[13] = d) : d = o[13];
+  const m = d;
+  let i;
+  o[14] !== t || o[15] !== l ? (i = (t || l) && /* @__PURE__ */ p(w, { name: t, theme: "light", source: l, "aria-hidden": "true" }), o[14] = t, o[15] = l, o[16] = i) : i = o[16];
+  let h;
+  return o[17] !== e || o[18] !== _ || o[19] !== c || o[20] !== m || o[21] !== i ? (h = /* @__PURE__ */ y("span", { className: m, style: _, ...c, children: [
+    i,
+    e
+  ] }), o[17] = e, o[18] = _, o[19] = c, o[20] = m, o[21] = i, o[22] = h) : h = o[22], h;
+};
+export {
+  R as DSFlag
+};