@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.11

package/components/CheckboxGroup/CheckboxGroup.utils.d.ts

@@ -1,4 +1,4 @@
-import type { CheckboxGroupProps } from './CheckboxGroup';
+import { CheckboxGroupProps } from './CheckboxGroup';
 type ValidationProps = Pick<CheckboxGroupProps, 'children' | 'description' | 'id' | 'legend' | 'systemFeedback'>;
-export declare const validateProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
+export declare const validateCheckboxGroupProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/ChipGroup/Chip.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+interface ChipProps extends Omit<Chip, 'onClick'>, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    groupId: string;
+    isRemovable: boolean;
+    lang?: ChipGroupLanguage;
+    selectionMode: ChipGroupSelectionMode;
+    size?: ChipGroupSize;
+    translations?: ChipGroupAriaTranslations;
+}
+export declare const DSChip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** An array of Chip Objects containing the id and label and other optional parameters.
+     * `{id: string; label: string; disabled?: boolean; iconName?: IconName; isSelected?: boolean; onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;}[]`*/
+    chips: Chip[];
+    /** Unique id for the DSChipGroup. */
+    id: string;
+    /** Label text displayed above the DSChipGroup. */
+    label: string;
+    /** Hides the DSChipGroup label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Allows removal of Chips.
+     * @default false
+     */
+    isRemovable?: boolean;
+    /** Sets language to use for the screen reader messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: ChipGroupLanguage;
+    /** Defines if only one Chip or multiple Chips can be selected. Ignored if `isRemovable=true`.
+     * @default 'single'
+     */
+    selectionMode?: ChipGroupSelectionMode;
+    /** Size of the Chips.
+     * @default 'medium'
+     */
+    size?: ChipGroupSize;
+    /** Translations for the DSChipGroup. Use our [customization page](/?path=/story/components-chip-group-translations--documentation) for creating custom translations. */
+    translations?: ChipGroupAriaTranslations;
+    /** Callback function called when the selection of the DSChipGroup changes. */
+    onChipsChange?: (chips: Chip[]) => void;
+}
+/**
+ * A component for selecting single or multiple chips, with options for selection (like radio buttons) or removal.
+ * Supports different sizes. Use icons sparingly to reduce cognitive load.
+ */
+export declare const DSChipGroup: React.FC<ChipGroupProps>;

package/components/ChipGroup/ChipGroup.test.d.ts

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

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

@@ -0,0 +1,60 @@
+import { IconName } from '../../types';
+import { ChipGroupProps } from './ChipGroup';
+type ValidationProps = Pick<ChipGroupProps, 'id' | 'chips' | 'label'>;
+export declare const validateChipGroupProps: ({ chips, id, label, }: ValidationProps) => void;
+export declare const validateIsLiveRegionPresent: () => void;
+export interface Chip {
+    /** Unique id for the Chip. */
+    id: string | number;
+    /** Label text displayed inside the Chip. */
+    label: string;
+    /** Disables the Chip, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** Displays the Chip as selected */
+    isSelected?: boolean;
+    /** Callback function called when the Chip is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export declare const CHIP_GROUP_SIZE: readonly ["medium", "small"];
+export type ChipGroupSize = (typeof CHIP_GROUP_SIZE)[number];
+export type ChipGroupSelectionMode = 'single' | 'multiple';
+export type ChipGroupLanguage = 'de' | 'en';
+export type ChipGroupAriaTranslations = typeof DS_CHIP_GROUP_TRANSLATIONS_EN;
+export declare const DS_CHIP_GROUP_TRANSLATIONS_EN: {
+    disabled: string;
+    selected: string;
+    selectChip: string;
+    unselectAction: string;
+    selectAction: string;
+    addToSelection: string;
+    removeFromSelection: string;
+    removeChip: string;
+    titleDisabled: string;
+    titleRemovable: string;
+    titleDeactivate: string;
+    titleActivate: string;
+};
+export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: {
+    disabled: string;
+    selected: string;
+    selectChip: string;
+    unselectAction: string;
+    selectAction: string;
+    addToSelection: string;
+    removeFromSelection: string;
+    removeChip: string;
+    titleDisabled: string;
+    titleRemovable: string;
+    titleDeactivate: string;
+    titleActivate: string;
+};
+export declare const DS_CHIP_GROUP_TRANSLATIONS: {
+    [key in ChipGroupLanguage]: ChipGroupAriaTranslations;
+};
+export declare const getChipAriaLabel: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, label: string, disabled: boolean | undefined, isSelected: boolean | undefined, selectionMode: ChipGroupSelectionMode, isRemovable: boolean | undefined) => string;
+export declare const getChipTitle: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, disabled: boolean | undefined, isSelected: boolean | undefined, isRemovable: boolean | undefined) => string;
+export {};

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

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

package/components/Combobox/Combobox.d.ts

@@ -1,18 +1,23 @@
-/// <reference types="react" />
-import { type CustomReactSelectProps } from '../CustomReactSelect/CustomReactSelect';
+import { CustomReactSelectProps } from '../CustomReactSelect/CustomReactSelect';
 type CommonComboboxProps = {
-    /** Opens the dropdown on click or focus */
+    /** Opens the dropdown on click or focus.
+     * @default false
+     */
     dropdownOnFocus?: boolean;
 };
 export type ComboboxProps = Omit<(CustomReactSelectProps<false> & {
-    /** Defines if only one option or multiple options can be selected */
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
     variant?: 'single';
 }) | (CustomReactSelectProps<true> & {
-    /** Defines if only one option or multiple options can be selected */
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
     variant: 'multi';
 }), 'isMulti' | 'openMenuOnClick' | 'openMenuOnFocus'> & CommonComboboxProps;
 /**
  * The DSCombobox component offers an autocomplete-style interface, allowing for efficient and intuitive selection from a dynamic list of options, suitable for both single and multi-select purposes.
  * */
-export declare const DSCombobox: ({ id, label, disabled, dropdownOnFocus, hideLabel, invalid, lang, required, variant, ...rest }: ComboboxProps) => JSX.Element;
+export declare const DSCombobox: ({ id, label, className, disabled, dropdownOnFocus, hideLabel, invalid, lang, required, variant, ...rest }: ComboboxProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
-import type { IconName } from '../../types';
-import type { ComboboxProps } from './Combobox';
-import type { GroupBase, OptionsOrGroups } from 'react-select';
+import { IconName } from '../../types';
+import { ComboboxProps } from './Combobox';
+import { GroupBase, OptionsOrGroups } from 'react-select';
 export type ComboboxVariant = 'single' | 'multi';
 type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
 /**
@@ -15,9 +15,15 @@ export declare const validateComboboxProps: ({ id, label, options, }: Validation
 export declare const COMBOBOX_SIZE: readonly ["medium", "small"];
 export type ComboboxSize = (typeof COMBOBOX_SIZE)[number];
 export interface ComboboxOption {
+    /** Label text displayed as the option. */
     label: string;
+    /** Value of the option. */
     value: string | number;
+    /** Name of the icon to display. */
     leadingIconName?: IconName;
+    /** Disables the Option, preventing user interaction.
+     * @default false
+     */
     isDisabled?: boolean;
 }
 export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;

package/components/CustomReactSelect/CustomReactSelect.d.ts

@@ -1,60 +1,72 @@
-/// <reference types="react" />
-import { type GroupBase } from 'react-select';
-import type { BreakpointCustomizable, Optional } from '../../types';
-import { type ComboboxAriaTranslations, type ComboboxLanguage, type ComboboxOption, type ComboboxOptionsGroup, type ComboboxOptionsOrOptGroups, type ComboboxSize } from '../Combobox/Combobox.utils';
-import type { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
-import type { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
+import { GroupBase } from 'react-select';
+import { BreakpointCustomizable, Optional } from '../../types';
+import { ComboboxAriaTranslations, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox/Combobox.utils';
+import { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
+import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 type IncludedReactSelectKeys = 'className' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
 type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<Optional<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, 'inputValue'>, IncludedReactSelectKeys>;
 type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>;
 export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup>, PickedReactSelectStateManagerProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
-    /** Unique id for the DSCombobox */
+    /** Unique id for the DSCombobox. */
     id: string;
-    /** Label text displayed above the DSCombobox */
+    /** Label text displayed above the DSCombobox. */
     label: string;
     /**
-     * Defines the options, can be a mixed array of options and option groups
+     * Defines the options, can be a mixed array of options and option groups.
      *  `type ComboboxOption = {label: string; value: string | number; leadingIconName?: IconName; isDisabled?: boolean;}`
      *  `type ComboboxOptionsGroup = {label: string; options: ComboboxOption[];}`
      *  `type ComboboxOptionsOrOptGroups = (ComboboxOption | ComboboxOptionsGroup)[];`
      * */
     options: ComboboxOptionsOrOptGroups;
-    /** The value of autocomplete to use for the DSCombobox */
+    /** The value of autocomplete to use for the DSCombobox. */
     autoComplete?: string;
-    /** Value of the selected Option in **uncontrolled DSCombobox** component */
+    /** Value of the selected Option in **uncontrolled DSCombobox** component. */
     defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Disables the DSCombobox, preventing user interaction */
+    /** Disables the DSCombobox, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the DSCombobox label, can be responsive
+    /** Hides the DSCombobox label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the DSCombobox as invalid, typically used for form validation */
+    /** Marks the DSCombobox as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Allows selection of multiple options */
+    /** Allows selection of multiple options.
+     * @default false
+     */
     isMulti: boolean;
-    /** Sets language to use for the screen reader messages and "No Options found" message, if no translations object is provided */
+    /** Sets language to use for the screen reader messages and "No options found" message, if no translations object is provided.
+     * @default 'en'
+     */
     lang?: ComboboxLanguage;
-    /** Indicates that the DSCombobox is required */
+    /** Indicates that the DSCombobox is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the input */
+    /** Size of the Combobox.
+     * @default 'medium'
+     */
     size?: ComboboxSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`- */
     systemFeedback?: string;
     /** Translations for the DSCombobox. Use our [customization page](/?path=/story/components-combobox-translations--documentation) for creating custom translations. */
     translations?: ComboboxAriaTranslations;
-    /** Value of the DSCombobox */
+    /** Value of the DSCombobox. */
     value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Callback function triggered when the selection of the DSCombobox changes */
-    onChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
-    /** Callback function triggered when the value of the DSCombobox input changes */
+    /** Callback function called when the selection of the DSCombobox changes. */
+    onValueChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
+    /** Callback function called when the value of the DSCombobox input changes. */
     onInputChange?: (newValue: string) => void;
 }
 /**
  * Internal customized react select component, which is in parts exposed to our consumers
- * via the DSCombobox component
+ * via the DSCombobox component.
  * */
-export declare const CustomReactSelect: <IsMulti extends boolean>({ id, label, options, className, disabled, hint, hideLabel, invalid, isMulti, lang, required, size, systemFeedback, translations, value, onChange, onInputChange, ...rest }: CustomReactSelectProps<IsMulti>) => JSX.Element;
+export declare const CustomReactSelect: <IsMulti extends boolean>({ id, label, options, className, disabled, hint, hideLabel, invalid, isMulti, lang, required, size, systemFeedback, translations, value, onValueChange, onInputChange, ...rest }: CustomReactSelectProps<IsMulti>) => JSX.Element;
 export {};

package/components/CustomReactSelect/CustomReactSelect.utils.d.ts

@@ -1,15 +1,3 @@
-import type { AriaLiveMessages, GroupBase } from 'react-select';
-import type { ComboboxAriaTranslations } from '../Combobox/Combobox.utils';
-type ComboboxAriaTranslationKey = keyof ComboboxAriaTranslations;
-/**
- * Translates a given key using specified translations and dynamic replacements of placeholders like {0} or {1}.
- * Unmatched placeholders in the translation are removed.
- *
- * @param {ComboboxAriaTranslationKey} key - The key identifying the text to be translated.
- * @param {ComboboxAriaTranslations} translations - Object containing translation mappings.
- * @param {string[]} [replacements=[]] - Optional array of replacement strings for placeholders in the translation.
- * @returns {string} The translated string with placeholders replaced by corresponding values in replacements array or removed if no match is found.
- */
-export declare const translate: (key: ComboboxAriaTranslationKey, translations: ComboboxAriaTranslations, replacements?: string[]) => string;
+import { AriaLiveMessages, GroupBase } from 'react-select';
+import { ComboboxAriaTranslations } from '../Combobox/Combobox.utils';
 export declare const defaultAriaLiveMessages: (translations: ComboboxAriaTranslations) => AriaLiveMessages<unknown, boolean, GroupBase<unknown>>;
-export {};

package/components/CustomReactSelect/OptionCheckbox.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 export interface CheckboxProps extends HTMLAttributes<HTMLDivElement> {
     /** Content displayed next to the checkbox */
     label: string;

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,34 @@
+import { DialogHTMLAttributes } from 'react';
+export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    /** Content within the Dialog. */
+    children: React.ReactNode;
+    /** Label for the close button. */
+    closeButtonLabel?: string;
+    /** Disables closing the Dialog by clicking on the backdrop.
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /** Content within the Dialog's footer. For example a CTA button. */
+    footer?: React.ReactNode;
+    /** Content within the Dialog's header. For example a Heading. */
+    header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Dialog is open.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** Callback function called when the Dialog is closed. */
+    onClose?: () => void;
+}
+/**
+ * A component that renders a modal dialog, which can be used for displaying
+ * important messages, forms, or confirmations.
+ *
+ * <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 DSDialog: ({ children, className, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;

package/components/Dialog/Dialog.test.d.ts

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

package/components/Dialog/Dialog.utils.d.ts

@@ -0,0 +1,11 @@
+import { DialogProps } from './Dialog';
+type ValidationProps = Pick<DialogProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDialog 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 DSDialog properties to validate.
+ */
+export declare const validateDialogProps: ({ tabIndex }: ValidationProps) => void;
+export {};

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

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

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,39 @@
+import { DialogHTMLAttributes } from 'react';
+import { DrawerPosition } from './Drawer.utils';
+export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    /** Content within the Drawer. */
+    children: React.ReactNode;
+    /** Label for the close button.
+     * @default 'Close modal'
+     */
+    closeButtonLabel?: string;
+    /** Disables closing the Drawer by clicking on the backdrop.
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /** Content within the Drawer's footer. For example a CTA button. */
+    footer?: React.ReactNode;
+    /** Content within the Drawer's header. For example a Heading. */
+    header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Drawer is open.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** Specifies the final position of the Drawer after opening.
+     * @default 'start'
+     */
+    position?: DrawerPosition;
+    /** Callback function called when the Drawer is closed. */
+    onClose?: () => void;
+}
+/**
+ * A component that renders a modal drawer, which can be used for navigation,
+ * displaying additional information, or providing extra controls.
+ */
+export declare const DSDrawer: ({ children, className, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;

package/components/Drawer/Drawer.test.d.ts

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

package/components/Drawer/Drawer.utils.d.ts

@@ -0,0 +1,13 @@
+import { DrawerProps } from './Drawer';
+export declare const DRAWER_POSITION: readonly ["start", "end"];
+export type DrawerPosition = (typeof DRAWER_POSITION)[number];
+type ValidationProps = Pick<DrawerProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDrawer 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 DSDrawer properties to validate.
+ */
+export declare const validateDrawerProps: ({ tabIndex }: ValidationProps) => void;
+export {};

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

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

package/components/Fieldset/Fieldset.d.ts

@@ -1,32 +1,37 @@
-import { type FieldsetHTMLAttributes } from 'react';
-import { type Legend } from './Fieldset.utils';
+import { FieldsetHTMLAttributes } from 'react';
+import { Legend } from './Fieldset.utils';
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** Child elements within the fieldset */
+    /** Child elements within the fieldset. */
     children: React.ReactNode;
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
      * When provided as a string, it represents the legend text directly.
      * When provided as an object, it allows for more detailed configuration, including:
      * - `headingText: string` The text content for the legend.
-     * - `headingSize?: 'x-large' | 'large' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
+     * - `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; }} legend
      */
     legend: Legend;
-    /** Short descriptive text displayed beneath the legend */
+    /** Short descriptive text displayed beneath the legend. */
     description?: string | React.ReactNode;
-    /** Disables the fieldset, preventing user interaction */
+    /** Disables the fieldset, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the fieldset as invalid, typically used for form validation */
+    /** Marks the fieldset as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
     /**
-     * Undocumented property for visually setting the Asterisk
+     * Undocumented property for visually setting the Asterisk.
+     * @default false
      */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**

package/components/Fieldset/Fieldset.utils.d.ts

@@ -1,10 +1,17 @@
-import type { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
-import type { FieldsetProps } from './Fieldset';
+import { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
+import { FieldsetProps } from './Fieldset';
 export type Legend = string | {
+    /** The text content for the legend. */
     headingText: string;
+    /** Defines the size of the heading, using predefined size types.
+     * @default 'medium'
+     */
     headingSize?: HeadingSize;
+    /** Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc.
+     * @default 'h2'
+     */
     headingTag?: HeadingTag;
 };
 type ValidationProps = Pick<FieldsetProps, 'description' | 'id' | 'legend' | 'systemFeedback'>;
-export declare const validateProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
+export declare const validateFieldsetProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/Flag/Flag.d.ts

@@ -0,0 +1,23 @@
+import { IconName } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { FlagColor } from './Flag.utils';
+export interface FlagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Content within the Flag. */
+    children: React.ReactNode;
+    /**
+     * Background color of the Flag. It can either be a predefined color token (recommended) or a custom color value (e.g. #F37A1F).
+     *
+     * Possible predefined values: `grey-light` `yellow-light` `red-light` `green-light` `orange-base`
+     *
+     * @default 'grey-light'
+     */
+    color: FlagColor;
+    /** Name of the icon to display. */
+    iconName?: IconName;
+    /** URL or path for a custom icon. */
+    iconSource?: IconProps['source'];
+}
+/**
+ * A read-only component, often representing a status or category.
+ * */
+export declare const DSFlag: ({ children, className, color, iconName, iconSource, ...rest }: FlagProps) => JSX.Element;

package/components/Flag/Flag.test.d.ts

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

package/components/Flag/Flag.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const FLAG_COLOR: readonly ["grey-light", "yellow-light", "red-light", "green-light", "orange-base"];
+export type FlagColor = (typeof FLAG_COLOR)[number] | (string & Record<never, never>);

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,7 +1,11 @@
-/// <reference types="react" />
-import type { ButtonProps } from '../Button/Button';
+import { IconName } from '../../types';
+import { ButtonProps } from '../Button/Button';
 export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel' | 'iconPosition' | 'variant' | 'isFlush'> {
     children: React.ReactNode;
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
+    iconName?: IconName;
 }
 /**
  * FABs are used to highlight actions by laying over the content.

package/components/Heading/Heading.d.ts

@@ -1,14 +1,20 @@
-import type { HTMLAttributes } from 'react';
-import type { Theme } from '../../types';
-import type { HeadingSize, HeadingTag } from './Heading.utils';
+import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
+import { HeadingSize, HeadingTag } from './Heading.utils';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-    /** Content within the heading */
+    /** Content within the heading. */
     children: React.ReactNode;
-    /** Size of the heading */
+    /** Size of the heading.
+     * @default 'medium'
+     */
     size?: HeadingSize;
-    /** Specifies the HTML tag to be used for the heading */
+    /** Specifies the HTML tag to be used for the heading.
+     * @default 'h2'
+     */
     tag?: HeadingTag;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 /**

package/components/Heading/Heading.utils.d.ts

@@ -1,4 +1,4 @@
-export declare const HEADING_SIZE: readonly ["x-large", "large", "medium", "medium-uppercase", "small", "small-uppercase"];
+export declare const HEADING_SIZE: readonly ["x-large", "x-large-uppercase", "large", "large-uppercase", "medium", "medium-uppercase", "small", "small-uppercase"];
 export type HeadingSize = typeof HEADING_SIZE[number];
 export declare const HEADING_TAG: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export type HeadingTag = typeof HEADING_TAG[number];

package/components/Icon/Icon.d.ts

@@ -1,18 +1,24 @@
-import { type HTMLProps, type SVGProps } from 'react';
-import type { IconName, SelectedAriaAttributes, Theme } from '../../types';
-import { type IconAriaAttribute, type IconSize } from './Icon.utils';
+import { HTMLProps, SVGProps } from 'react';
+import { IconName, SelectedAriaAttributes, Theme } from '../../types';
+import { IconAriaAttribute, IconSize } from './Icon.utils';
 export interface IconProps {
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
-    /** Name of the icon to display */
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
     name?: IconName;
-    /** Size of the icon */
+    /** Size of the icon.
+     * @default 'large'
+     */
     size?: IconSize;
-    /** URL or path for a custom icon */
+    /** URL or path for a custom icon. */
     source?: string;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 /**