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

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

@@ -1,12 +1,9 @@
-/// <reference types="react" />
-import type { IconName } from '../../types';
+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];
 export declare const useDynamicSvgImport: (iconName: IconName) => {
     isLoading: boolean;
-    SVGIcon: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }> | undefined;
-    setShouldLoad: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    SVGIcon: string | undefined;
+    setShouldLoad: import('react').Dispatch<import('react').SetStateAction<boolean>>;
 };

package/components/Input/Input.d.ts

@@ -1,47 +1,60 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable, IconName } from '../../types';
-import { type IconProps } from '../Icon/Icon';
-import { type InputSize, type SupportedInputTypes } from './Input.utils';
+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 */
+    /** 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 action button or icon */
+    /** Accessibility label for the action button or icon. */
     actionButtonLabel?: string;
-    /** Name of the icon used in the action button */
+    /** Name of the icon used in the action button. */
     actionButtonIconName?: IconName;
-    /** Custom source URL for the action button icon */
+    /** Custom source URL for the action button icon. */
     actionButtonIconSource?: IconProps['source'];
-    /** Callback function triggered when the action button is clicked */
+    /** Callback function called when the action button is clicked. */
     actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /** 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;
-    /** Name of the leading icon */
+    /** Name of the leading icon. */
     leadingIconName?: IconName;
-    /** URL or path for a custom leading icon */
+    /** URL or path for a custom leading icon. */
     leadingIconSource?: IconProps['source'];
-    /** Marks the input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** 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;
-    /** 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;
-    /** Type of the input */
+    /** Type of the input.
+     * @default 'text'
+     */
     type?: SupportedInputTypes;
 }
 /**

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

@@ -1,4 +1,4 @@
-import type { InputProps } from './Input';
+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,34 +1,51 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import type { InputSize } from '../Input/Input.utils';
-export interface InputPasswordProps 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 InputPasswordProps 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;
-    /** The value of autocomplete to use for the input */
+    /** The value of autocomplete to use for the input.
+     * @default 'new-password'
+     */
     autocomplete?: 'new-password' | 'current-password' | 'off';
-    /** 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;
-    /** 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;
-    /** The show password button text label (for assistive technologies) */
+    /** The show password button text label (for assistive technologies).
+     * @default 'Show password'
+     */
     showPasswordText?: string;
-    /** The hide password button text label (for assistive technologies) */
+    /** The hide password button text label (for assistive technologies).
+     * @default 'Hide password'
+     */
     hidePasswordText?: string;
 }
 /**

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

@@ -1,4 +1,4 @@
-import type { InputPasswordProps } from './InputPassword';
+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,36 +1,51 @@
-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,4 @@
-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,69 @@
-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,4 @@
-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,59 @@
-/// <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,13 @@
-/// <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,29 @@
-import type { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, Theme } from '../../types';
-import type { LogoAriaAttribute, LogoTarget } 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
+import { HTMLAttributes } from 'react';
+import { SelectedAriaAttributes, Theme } from '../../types';
+import { LogoAriaAttribute, LogoTarget, LogoVariant } from './Logo.utils';
+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;}`
      */
     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,4 @@
-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,35 @@
+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,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,27 +1,44 @@
-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>>;