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

package/components/InputSearch/InputSearch.d.ts

@@ -1,36 +1,52 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import type { InputSize } from '../Input/Input.utils';
-export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** Unique id for the input */
+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;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** Accessibility label for the clear button */
+    /** Accessibility label for the clear button.
+     * @default 'Clear search field'
+     */
     clearButtonLabel?: string;
-    /** Disables the input, preventing user interaction */
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the input label, can be responsive
+    /** Hides the input 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 input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Enables the readonly state of the input */
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** Accessibility label for the submit button */
+    /** Accessibility label for the submit button.
+     * @default 'Search'
+     */
     submitButtonLabel?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** Value of the input */
+    /** Value of the input. */
     value?: string;
-    /** Callback function triggered when the submit button is clicked */
+    /** Callback function called when the submit button is clicked. */
     submitButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**

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

@@ -1,4 +1,5 @@
-import type { InputSearchProps } from './InputSearch';
+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,46 +1,70 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type InputSize } from '../Input/Input.utils';
-export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** Unique id for the input */
+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;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** Text used for assistive technologies when the value changes */
+    /** Text used for assistive technologies when the value changes.
+     * @default 'Value changed to'
+     */
     announcementText?: string;
-    /** Disables the input, preventing user interaction */
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Accessibility label for the decrease button */
+    /** Accessibility label for the decrease button.
+     * @default 'Decrease'
+     */
     decreaseAmountButtonLabel?: string;
-    /** Hides the input label, can be responsive
+    /** Hides the input 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;
-    /** Accessibility label for the increase button */
+    /** Accessibility label for the increase button.
+     * @default 'Increase'
+     */
     increaseAmountButtonLabel?: string;
-    /** Marks the input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** The maximum value for the input */
+    /** The maximum value for the input.
+     * @default 100
+     */
     max?: number;
-    /** The minimum value for the input */
+    /** The minimum value for the input.
+     * @default 0
+     */
     min?: number;
-    /** Text displayed as a prefix inside the input, maximum 8 characters */
+    /** Text displayed as a prefix inside the input, maximum 8 characters. */
     prefix?: string;
-    /** Enables the readonly state of the input */
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** The interval between legal numbers of the input */
+    /** The interval between legal numbers of the input.
+     * @default 1
+     */
     step?: number;
-    /** Text displayed as a suffix inside the input, maximum 5 characters */
+    /** Text displayed as a suffix inside the input, maximum 5 characters. */
     suffix?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** Value of the input */
+    /** Value of the input. */
     value?: string;
 }
 /**

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

@@ -1,4 +1,5 @@
-import type { InputStepperProps } from './InputStepper';
+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,47 +1,60 @@
-/// <reference types="react" />
-import type { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
-import { type IconProps } from '../Icon/Icon';
-import type { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
+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 attributes to enhance accessibility.
      *  `{'aria-label'? string;`
      *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
      *  `'aria-labelledby'?: string;}`
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
-    /** Identifier for analytics tracking */
+    /** Identifier for analytics tracking. */
     dataTrackingid?: string;
-    /** Specifies that the target will be downloaded and opens native browser download dialog */
+    /** Specifies that the target will be downloaded and opens native browser download dialog. */
     download?: string;
-    /** Defines the URL to link to */
+    /** Defines the URL to link to. */
     href?: string;
-    /** Name of the icon to display */
+    /** Name of the icon to display. */
     iconName?: IconName;
-    /** The position of the icon */
+    /** The position of the icon.
+     * @default 'left'
+     */
     iconPosition?: LinkIconPosition;
-    /** URL or path for a custom icon */
+    /** URL or path for a custom icon. */
     iconSource?: IconProps['source'];
-    /** Defines the referrer information send with the link */
+    /** Defines the referrer information send with the link. */
     referrerPolicy?: LinkReferrerPolicy;
-    /** Defines the rel attribute */
+    /** Defines the rel attribute. */
     rel?: LinkRel;
-    /** The target of the link */
+    /** The target of the link.
+     * @default '_self'
+     */
     target?: LinkTarget;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 export interface LinkProps extends CommonLinkProps {
-    /** Content within the link */
+    /** Content within the link. */
     children: React.ReactNode;
-    /** Hides the link label, can be responsive
+    /** Hides the link label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Aligns `variant='ghost'` with text */
+    /** Aligns `variant='ghost'` with text.
+     * @default false
+     */
     isFlush?: boolean;
-    /** Size of the link */
+    /** Size of the link.
+     * @default 'medium'
+     */
     size?: LinkSize;
-    /** Visual style variant of the link */
+    /** Visual style variant of the link.
+     * @default 'filled'
+     */
     variant?: LinkVariant;
 }
 /**

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -1,12 +1,14 @@
-/// <reference types="react" />
-import { type CommonLinkProps } from '../Link/Link';
-import { type LinkStandaloneVariant } from './LinkStandalone.utils';
+import { CommonLinkProps } from '../Link/Link';
+import { LinkStandaloneVariant } from './LinkStandalone.utils';
+
 export interface LinkStandaloneProps extends CommonLinkProps {
-    /** Content within the link */
+    /** Content within the link. */
     children: React.ReactNode;
-    /** Enables the active state */
+    /** Sets an underline. */
     active?: boolean;
-    /** Visual style variant of the Link Standalone */
+    /** Visual style variant of the Link Standalone.
+     * @default 'neutral'
+     */
     variant?: LinkStandaloneVariant;
 }
 /**

package/components/Logo/Logo.d.ts

@@ -1,21 +1,30 @@
-import type { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, Theme } from '../../types';
-import type { LogoAriaAttribute, LogoTarget } from './Logo.utils';
+import { HTMLAttributes } from 'react';
+import { SelectedAriaAttributes, Theme } from '../../types';
+import { LogoAriaAttribute, LogoTarget, LogoVariant } from './Logo.utils';
+
 export interface LogoProps extends HTMLAttributes<HTMLOrSVGElement | 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
+    /** 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;}`
      */
     aria?: SelectedAriaAttributes<LogoAriaAttribute>;
-    /** Defines the URL to link to. When providing an url then the component will be rendered as a link */
+    /** Defines the URL to link to. When providing an url then the component will be rendered as a link. */
     href?: string;
-    /** The target of the link */
+    /** The target of the link.
+     * @default '_self'
+     */
     target?: LogoTarget;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
+    /** Defines the variant, `standard` is only available with `light` theme.
+     * @default 'standard'
+     */
+    variant?: LogoVariant;
 }
 /**
  * This component is used to display the logo.
  *
  * It can be also used as a link by providing a `href` and an `aria-label`.
  */
-export declare const DSLogo: ({ aria, className, href, target, theme, ...rest }: LogoProps) => JSX.Element;
+export declare const DSLogo: ({ aria, className, href, target, theme, variant, ...rest }: LogoProps) => JSX.Element;

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

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

package/components/Notification/Notification.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } 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''
+     */
+    closeButtonLabel?: string;
+    /** Content within the Notification's action bar. For example a CTA button. */
+    customActionArea?: React.ReactNode;
+    /** Hides the close button.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Hides the icon.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Defines the variant.
+     * @default 'info'
+     */
+    variant?: NotificationVariant;
+    /** Callback function called when the close button is clicked. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * An inline notification component that can be used to provide system feedback messages
+ * or highlight important content.
+ *
+ * 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, hideCloseButton, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;

package/components/Notification/Notification.test.d.ts

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

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

@@ -0,0 +1,5 @@
+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,27 +1,45 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-    /** Label text displayed next to the radio */
-    label: React.ReactNode;
-    /** Name of the radio group */
+    /** Label text displayed next to the radio. */
+    label: string;
+    /** Name of the radio group. */
     name: string;
-    /** Set the value of the radio */
+    /** Set the value of the radio. */
     value: string;
-    /** Disables the radio, preventing user interaction */
+    /** Controls whether the radio is checked. */
+    checked?: boolean;
+    /** Allows the addition of e.g. decorative icons for an option.  */
+    customArea?: React.ReactNode;
+    /** Disables the radio, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the radio label, can be responsive
+    /** Hides the radio label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Controls whether the radio is checked. */
-    checked?: boolean;
-    /** Marks the radio as invalid, typically used for form validation */
+    /** Makes the label use `ds-utility-medium-bold` if any option has a `hint` and `hideUncheckedHint` is set to false.
+     * @default false
+     */
+    isBold?: boolean;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Marks the radio as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Callback function triggered when the state of the radio changes */
+    /** Controls whether the hint is displayed when the radio button is not checked.
+     * @default false
+     */
+    hideUncheckedHint?: boolean;
+    /** Callback function called when the state of the radio changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * Generally used in radio groups—collections of radio buttons describing a set of related options.
  * Only one radio button in a given group can be selected at the same time.
  * */
-export declare const DSRadio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const DSRadio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,51 +1,61 @@
-import { type FieldsetHTMLAttributes } from 'react';
-import { type FieldsetProps } from '../Fieldset/Fieldset';
-import { type RadioGroupOption } from './RadioGroup.utils';
+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.
      * 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: FieldsetProps['legend'];
-    /** Name of the radio group */
+    /** Name of the radio group. */
     name: string;
     /**
-     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button
-     * `{label: string; value: string}[]`
-     * @prop {{label: string; value: string}[]} options
+     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button.
+     * `{label: string; value: string; customArea?: React.ReactNode; hint?: string}[]`
+     * @prop {{label: string; value: string; customArea?: React.ReactNode; hint?: string}[]} options
      */
     options: RadioGroupOption[];
     /**
-     * Set the alignment of the radio buttons
+     * 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
-     */
+    /** Value of the selected Option in **uncontrolled RadioGroup** component. */
     defaultValue?: string;
-    /** Short descriptive text displayed beneath the legend */
+    /** Short descriptive text displayed beneath the legend. */
     description?: FieldsetProps['description'];
-    /** Disables the radio group, preventing user interaction */
+    /** Disables the radio group, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Controls whether the hint is displayed when the radio buttons are not checked. If set to `false` labels of radio buttons with hints will be displayed in bold.
+     * @default false
+     */
+    hideUncheckedHints?: boolean;
+    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the radio group as invalid, typically used for form validation */
+    /** Marks the radio group as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
     /** Marks the radio group as required.
-     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend
+     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend.
+     * @default false
      * */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Set the value of the selected option */
+    /** Set the value of the selected option. */
     value?: string;
-    /** Callback function triggered when the value of the radio group changes */
+    /** Callback function called when the value of the radio group changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**
@@ -53,4 +63,4 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
  * complete with customizable legends, alignment options, and integrated validation feedback,
  * enhancing the user experience in form designs.
  * */
-export declare const DSRadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,9 @@
-import type { RadioProps } from '../Radio/Radio';
-import type { RadioGroupProps } from './RadioGroup';
-export type RadioGroupOption = Pick<RadioProps, 'label' | 'value'>;
-type ValidationProps = Pick<RadioGroupProps, 'description' | 'id' | 'legend' | 'name' | 'options' | 'systemFeedback'>;
-export declare const validateProps: ({ description, id, legend, name, options, systemFeedback, }: ValidationProps) => void;
+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'>;
+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 {};

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

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

package/components/Select/Select.d.ts

@@ -1,35 +1,47 @@
-import { type SelectHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type SelectOptionsOrOptGroups, type SelectSize } from './Select.utils';
+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 */
+    /** Unique id for the select. */
     id: string;
-    /** Label text displayed above the select */
+    /** Label text displayed above the select. */
     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 SelectOption = {label: string; value: string | number; isDisabled?: boolean;}`
      *  `type SelectOptionsGroup = {label: string; options: SelectOption[];}`
      *  `type SelectOptionsOrOptGroups = (SelectOption | SelectOptionsGroup)[];`
      * */
     options: SelectOptionsOrOptGroups;
-    /** Disables the select, preventing user interaction */
+    /** Disables the select, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the select label, can be responsive
+    /** Hides the select 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 select as invalid, typically used for form validation */
+    /** Marks the select as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Modifies the empty option label to ensure a conscious choice. */
+    /** Modifies the empty option label to ensure a conscious choice.
+     * @default 'Select'
+     */
     placeholder?: string;
-    /** Indicates that the select is required */
+    /** Indicates that the select is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the select */
+    /** Size of the select.
+     * @default 'medium'
+     */
     size?: SelectSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**

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

@@ -1,6 +1,7 @@
-import type { HTMLAttributes } from 'react';
-import type { GroupBase, OptionsOrGroups } from 'react-select';
-import type { SelectProps } from './Select';
+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;