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

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,6 +1,5 @@
 import { FieldsetHTMLAttributes } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
-
 export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /** DSCheckbox elements within the checkbox group. */
     children: React.ReactNode;
@@ -15,13 +14,13 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: FieldsetProps['legend'];
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the checkboxes.
+     * Set the direction of the checkboxes.
      * @default 'vertical'
      */
-    alignment?: 'vertical' | 'horizontal';
-    /** Short descriptive text displayed beneath the legend. */
-    description?: FieldsetProps['description'];
+    direction?: 'vertical' | 'horizontal';
     /** Disables the checkbox group, preventing user interaction.
      * @default false
      */
@@ -42,7 +41,7 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
 }
 /**
  * The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
- * complete with customizable legends, alignment options, and integrated validation feedback,
+ * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
  * */
-export declare const DSCheckboxGroup: ({ children, legend, alignment, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;

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

@@ -1,5 +1,4 @@
 import { CheckboxGroupProps } from './CheckboxGroup';
-
 type ValidationProps = Pick<CheckboxGroupProps, 'children' | 'description' | 'id' | 'legend' | 'systemFeedback'>;
 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,5 +1,4 @@
 import { CustomReactSelectProps } from '../CustomReactSelect/CustomReactSelect';
-
 type CommonComboboxProps = {
     /** Opens the dropdown on click or focus.
      * @default false

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

@@ -1,7 +1,6 @@
 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'>;
 /**
@@ -16,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

@@ -3,7 +3,6 @@ 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'>;

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

@@ -1,16 +1,3 @@
 import { AriaLiveMessages, GroupBase } from 'react-select';
 import { 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;
 export declare const defaultAriaLiveMessages: (translations: ComboboxAriaTranslations) => AriaLiveMessages<unknown, boolean, GroupBase<unknown>>;
-export {};

package/components/CustomReactSelect/OptionCheckbox.d.ts

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

package/components/Dialog/Dialog.d.ts

@@ -1,5 +1,4 @@
 import { DialogHTMLAttributes } from 'react';
-
 export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
     /** Content within the Dialog. */
     children: React.ReactNode;

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

@@ -1,5 +1,4 @@
 import { DialogProps } from './Dialog';
-
 type ValidationProps = Pick<DialogProps, 'tabIndex'>;
 /**
  * Validates the given properties of the DSDialog component for common configuration errors.

package/components/Drawer/Drawer.d.ts

@@ -1,6 +1,5 @@
 import { DialogHTMLAttributes } from 'react';
 import { DrawerPosition } from './Drawer.utils';
-
 export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
     /** Content within the Drawer. */
     children: React.ReactNode;

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

@@ -1,5 +1,4 @@
 import { DrawerProps } from './Drawer';
-
 export declare const DRAWER_POSITION: readonly ["start", "end"];
 export type DrawerPosition = (typeof DRAWER_POSITION)[number];
 type ValidationProps = Pick<DrawerProps, 'tabIndex'>;

package/components/Fieldset/Fieldset.d.ts

@@ -1,6 +1,5 @@
 import { FieldsetHTMLAttributes } from 'react';
 import { Legend } from './Fieldset.utils';
-
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /** Child elements within the fieldset. */
     children: React.ReactNode;

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

@@ -1,9 +1,15 @@
 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'>;

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,6 +1,5 @@
 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.

package/components/Heading/Heading.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { Theme } from '../../types';
 import { HeadingSize, HeadingTag } from './Heading.utils';
-
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Content within the heading. */
     children: React.ReactNode;

package/components/Icon/Icon.d.ts

@@ -1,7 +1,6 @@
 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-label'? string;}`

package/components/Icon/Icon.utils.d.ts

@@ -1,5 +1,4 @@
 import { IconName } from '../../types';
-
 export type IconAriaAttribute = 'aria-label';
 export declare const ICON_SIZE: readonly ["large", "medium", "small", "x-small"];
 export type IconSize = (typeof ICON_SIZE)[number];

package/components/Input/Input.d.ts

@@ -2,7 +2,6 @@ import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable, IconName } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { InputSize, SupportedInputTypes } from './Input.utils';
-
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Unique id for the input. */
     id: string;

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

@@ -1,5 +1,4 @@
 import { InputProps } from './Input';
-
 export declare const MAX_PREFIX_LENGTH = 8;
 export declare const MAX_SUFFIX_LENGTH = 5;
 export declare const INPUT_SIZE: readonly ["medium", "small"];

package/components/InputPassword/InputPassword.d.ts

@@ -1,7 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
-
 export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
     /** Unique id for the input. */
     id: string;

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

@@ -1,5 +1,4 @@
 import { InputPasswordProps } from './InputPassword';
-
 type ValidationProps = Pick<InputPasswordProps, 'id' | 'label'>;
 /**
  * Validates the given properties of the DSInputPassword component for common configuration errors.

package/components/InputSearch/InputSearch.d.ts

@@ -1,7 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
-
 export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
     /** Unique id for the input. */
     id: string;

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

@@ -1,5 +1,4 @@
 import { InputSearchProps } from './InputSearch';
-
 type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
 /**
  * Validates the given properties of the DSInputSearch component for common configuration errors.

package/components/InputStepper/InputStepper.d.ts

@@ -1,7 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
-
 export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
     /** Unique id for the input. */
     id: string;

package/components/InputStepper/InputStepper.utils.d.ts

@@ -1,5 +1,4 @@
 import { InputStepperProps } from './InputStepper';
-
 type ValidationProps = Pick<InputStepperProps, 'id' | 'label' | 'prefix' | 'suffix'>;
 /**
  * Validates the given properties of the DSInputStepper component for common configuration errors.

package/components/Link/Link.d.ts

@@ -1,7 +1,6 @@
 import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
-
 export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** ARIA attributes to enhance accessibility.
      *  `{'aria-label'? string;`

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -1,6 +1,5 @@
 import { CommonLinkProps } from '../Link/Link';
 import { LinkStandaloneVariant } from './LinkStandalone.utils';
-
 export interface LinkStandaloneProps extends CommonLinkProps {
     /** Content within the link. */
     children: React.ReactNode;

package/components/Logo/Logo.d.ts

@@ -1,8 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
 import { LogoAriaAttribute, LogoTarget, LogoVariant } from './Logo.utils';
-
-export interface LogoProps extends HTMLAttributes<HTMLOrSVGElement | HTMLAnchorElement> {
+export interface LogoProps extends HTMLAttributes<SVGElement | HTMLAnchorElement> {
     /** If the DSLogo is used with an href prop, make sure to add a descriptive label to inform screen reader users what the link stands for.
      *  `{'aria-label'? string;}`
      */

package/components/Logo/Logo.utils.d.ts

@@ -1,5 +1,4 @@
 import { LinkTarget } from '../../types';
-
 export type LogoTarget = LinkTarget;
 export type LogoVariant = 'standard' | 'background';
 export type LogoAriaAttribute = 'aria-label';

package/components/Notification/Notification.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 import { NotificationVariant } from './Notification.utils';
-
 export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
     /** Content within the Notification. */
     children: React.ReactNode;

package/components/Notification/Notification.utils.d.ts

@@ -1,5 +1,4 @@
 import { IconName } from '../../types';
-
 export declare const NOTIFICATION_VARIANT: readonly ["success", "error", "warning", "info"];
 export type NotificationVariant = (typeof NOTIFICATION_VARIANT)[number];
 export declare const NOTIFICATION_ICONS: Record<NotificationVariant, IconName>;

package/components/Radio/Radio.d.ts

@@ -1,6 +1,5 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
-
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Label text displayed next to the radio. */
     label: string;

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,6 @@
 import { FieldsetHTMLAttributes } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
 import { RadioGroupOption } from './RadioGroup.utils';
-
 export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
@@ -22,16 +21,16 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
      * @prop {{label: string; value: string; customArea?: React.ReactNode; hint?: string}[]} options
      */
     options: RadioGroupOption[];
-    /**
-     * Set the alignment of the radio buttons.
-     * `alignment="horizontal"` is not possible if a `hint` or `customArea` is passed to the `options`.
-     * @default 'vertical'
-     */
-    alignment?: 'vertical' | 'horizontal';
     /** Value of the selected Option in **uncontrolled RadioGroup** component. */
     defaultValue?: string;
     /** Short descriptive text displayed beneath the legend. */
     description?: FieldsetProps['description'];
+    /**
+     * Set the direction of the radio buttons.
+     * `direction="horizontal"` is not possible if a `hint` or `customArea` is passed to the `options`.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
     /** Disables the radio group, preventing user interaction.
      * @default false
      */
@@ -60,7 +59,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, alignment options, and integrated validation feedback,
+ * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
  * */
 export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

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

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

package/components/Select/Select.d.ts

@@ -1,7 +1,6 @@
 import { SelectHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
-
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     /** Unique id for the select. */
     id: string;

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

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { GroupBase, OptionsOrGroups } from 'react-select';
 import { SelectProps } from './Select';
-
 type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
 export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
     label: string;

package/components/SkipToContent/SkipToContent.d.ts

@@ -1,5 +1,4 @@
 import { LinkProps } from '../Link/Link';
-
 export interface SkipToContentProps extends Pick<LinkProps, 'className' | 'theme'> {
     /** Content within the SkipToContent Link.
      * @default 'Skip to main content'

package/components/Spinner/Spinner.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
 import { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
-
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`

package/components/Switch/Switch.d.ts

@@ -1,7 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import { SelectedAriaAttributes } from '../../types';
 import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
-
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Content within the label. */
     children: React.ReactNode;

package/components/SystemFeedback/SystemFeedback.d.ts

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

package/components/Text/Text.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { Theme } from '../../types';
 import { TextSize, TextTag, TextWeight } from './Text.utils';
-
 export interface TextProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElement | HTMLLegendElement | HTMLParagraphElement | HTMLSpanElement | HTMLTimeElement> {
     /** Content of the text. */
     children: React.ReactNode;

package/components/Textarea/Textarea.d.ts

@@ -1,7 +1,6 @@
 import { TextareaHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { TextareaSize } from './Textarea.utils';
-
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
     /** Unique id for the textarea. */
     id: string;

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

@@ -1,5 +1,4 @@
 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'>;

package/components/Title/Title.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { Theme } from '../../types';
 import { TitleSize, TitleTag } from './Title.utils';
-
 export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Content of the title. */
     children: React.ReactNode;

package/components/Toast/Toast.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 import { ToastVariant } from './Toast.utils';
-
 export interface ToastProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     /** Message displayed in the Toast. */
     message: string;