@stihl-design-system/components 1.0.0-RC.3 → 1.0.0-RC.31

package/components/Heading/Heading.d.ts

@@ -1,19 +1,26 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } 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;
 }
 /**
  * The `DSHeading` component is used to specify heading styling and hierarchy in documents.
  * It allows for consistent heading styles across different parts of your application.
+ *
+ * Design in Figma: [Heading](https://www.figma.com/design/d9wrOp4aCplDsV9AVC87Xn/Typography-%F0%9F%85%B0%EF%B8%8F?node-id=3-2186&t=TeSgud7dB5pnld5s-11)
  * */
 export declare const DSHeading: ({ children, className, size, tag, theme, ...rest }: HeadingProps) => JSX.Element;

package/components/Icon/Icon.d.ts

@@ -1,24 +1,31 @@
-import { HTMLProps, SVGProps } from 'react';
+import { HTMLProps, JSX, 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;
 }
 /**
  * The STIHL Iconography ranges from content and feature icons to product or system icons.
  * The STIHL Design System is using an SVG icon system to visually present an icon object.
  * Icons are provided as assets and can be bundled into the application.
+ *
+ * Design in Figma: [Icon](https://www.figma.com/design/U218NNP4OsipaHOtv5flns/Iconography-%E2%9E%A1%EF%B8%8F?node-id=0-1)
  */
 export declare const DSIcon: ({ aria, className, name, size, source, theme, ...rest }: IconProps & (HTMLProps<HTMLImageElement> | SVGProps<SVGSVGElement>)) => JSX.Element;

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

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

package/components/Input/Input.d.ts

@@ -2,47 +2,76 @@ 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 */
-    actionButtonLabel?: string;
-    /** Name of the icon used in the action button */
-    actionButtonIconName?: IconName;
-    /** Custom source URL for the action button icon */
-    actionButtonIconSource?: IconProps['source'];
-    /** Callback function triggered when the action button is clicked */
-    actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /** Disables the input, preventing user interaction */
+    /** Action button props:
+     *
+     * `label`: Accessibility label for the action button or icon.
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `iconName`: Name of the icon used in the action button.
+     *
+     * `iconSource`: Custom source URL for the action button icon.
+     *
+     * `onClick`: Callback function called when the action button is clicked.
+     */
+    actionButtonProps?: {
+        label: string;
+        [key: `data-${string}`]: string | undefined;
+        iconName?: IconName;
+        iconSource?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
+    /**
+     * Provides hints to the browser for what type of data the input expects.
+     * Use standardized values from the W3C specification for input purposes:
+     * https://www.w3.org/TR/WCAG21/#input-purposes.
+     */
+    autoComplete?: string;
+    /** 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;
 }
 /**
@@ -51,5 +80,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * a leading icon, prefix and suffix.
  *
  * Depending on the `type` prop it expects different input types.
+ *
+ * Design in Figma: [Input](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1744-7211&t=UBsmFURFENnuYSW1-4)
  */
-export declare const DSInput: ({ id, label, actionButtonLabel, actionButtonIconName, actionButtonIconSource, actionButtonOnClick, className, disabled, hint, hideLabel, invalid, leadingIconName, leadingIconSource, prefix, readonly, required, size, suffix, systemFeedback, type, ...rest }: InputProps) => JSX.Element;
+export declare const DSInput: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,14 +1,13 @@
 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"];
 export type InputSize = (typeof INPUT_SIZE)[number];
-export declare const SUPPORTED_INPUT_TYPES: readonly ["color", "date", "datetime-local", "email", "file", "month", "number", "range", "tel", "text", "time", "url"];
+export declare const SUPPORTED_INPUT_TYPES: readonly ["color", "date", "datetime-local", "email", "month", "number", "range", "tel", "text", "time", "url"];
 export type SupportedInputTypes = (typeof SUPPORTED_INPUT_TYPES)[number];
-export declare const UNSUPPORTED_INPUT_TYPES: readonly ["week", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"];
+export declare const UNSUPPORTED_INPUT_TYPES: readonly ["week", "file", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"];
 export type UnSupportedInputTypes = (typeof UNSUPPORTED_INPUT_TYPES)[number];
-type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonIconName' | 'actionButtonIconSource'>;
+type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonProps'>;
 /**
  * Validates the given properties of the DSInput component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -17,14 +16,14 @@ type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | '
  * @param validationProps - The subset of DSInput properties to validate. This includes
  *                          properties related to the prefix, suffix, icons and action button of the input.
  */
-export declare const validateInputProps: ({ id, label, prefix, suffix, leadingIconName, leadingIconSource, actionButtonIconName, actionButtonIconSource, }: ValidationProps) => void;
+export declare const validateInputProps: ({ id, label, prefix, suffix, leadingIconName, leadingIconSource, actionButtonProps, }: ValidationProps) => void;
 /**
  * Validates the input type for the DSInput component and provides warnings for certain unsupported types.
  *
  * @param {SupportedInputTypes} type - The input type to validate.
  * @throws {Error} Throws an error if the input type is not supported by the DSInput component.
  */
-export declare const validateType: (type: SupportedInputTypes | UnSupportedInputTypes) => void;
+export declare const validateType: (type: SupportedInputTypes | UnSupportedInputTypes, autoComplete?: string | undefined) => void;
 /**
  * Checks if the current browser supports the 'showPicker' attribute for date/time input fields
  * and is a compatible browser (Chrome, Chromium, Chrome on iOS, or Microsoft Edge).

package/components/InputFile/InputFile.d.ts

@@ -0,0 +1,91 @@
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { ButtonVariant } from '../Button/Button.utils';
+import { InputFileLanguage, InputFileTranslations } from './InputFile.utils';
+export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Unique id for the input. */
+    id: string;
+    /** Label text displayed above the input. */
+    label: string;
+    /** Defines the file types the input file should accept. */
+    accept?: string;
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The remove button visible in the file list, when file(s) were selected by the user:
+     *
+     * `data-*`: Custom data attributes, which will have the index of the selected file appended at the end of the value.
+     */
+    fileListItemRemoveButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+    };
+    /** 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 OR in the dropzone. */
+    hint?: string;
+    /** Input File button props:
+     *
+     * `label`: Accessibility label for the action button or icon.
+     * * (default) Depends on lang and multi props, 'Choose File', 'Choose Files', 'Datei auswählen' or 'Dateien auswählen'.
+     *
+     * `variant`: Visual style variant of the button.
+     * (default) 'outline'
+     *
+     * `data-*`: Custom data attributes.
+     */
+    inputFileButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+        variant?: Extract<ButtonVariant, 'outline' | 'filled'>;
+    };
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
+    invalid?: boolean;
+    /** Moves the hint outside of the dropzone.
+     * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default {base: true, m: false}
+     */
+    isHintOutsideDropzone?: BreakpointCustomizable<boolean>;
+    /** Sets language to use for messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: InputFileLanguage;
+    /** Maximum size allowed in MegaBytes.
+     * @default 7
+     */
+    maxSizeInMb?: number;
+    /** Allow multiple file selection.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Indicates that the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /** Show a bigger dropzone to drag & drop files into instead of only a button.
+     * @default false
+     */
+    showDropzone?: boolean;
+    /** Show a file list after file selection. */
+    showFileList?: boolean;
+    /** Defines a system feedback message, shown when `invalid={true}`. */
+    systemFeedback?: string;
+    /** Translations for the DSInputFile. Use our [customization page](/?path=/story/components-inputs-input-file-translations--documentation) for creating custom translations. */
+    translations?: InputFileTranslations;
+    /** Callback function invoked when files are selected. */
+    onFilesSelect?: (files: File[]) => void;
+}
+export interface FileWithFeedback extends File {
+    feedback?: string;
+}
+/**
+ * The `<DSInputFile />` allows users to select and upload files, such as images, documents, or videos. It ensures a clear, accessible, and user-friendly way to manage file uploads.
+ *
+ * Design in Figma: [Input File](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=32314-6485&t=QXC7W0qCpEbPrh2M-11)
+ */
+export declare const DSInputFile: import('react').ForwardRefExoticComponent<InputFileProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/InputFile/InputFile.test.d.ts

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

package/components/InputFile/InputFile.utils.d.ts

@@ -0,0 +1,46 @@
+import { InputFileProps } from './InputFile';
+export type InputFileLanguage = 'de' | 'en';
+export type InputFileTranslations = typeof DS_INPUT_FILE_TRANSLATIONS_EN;
+export declare const DS_INPUT_FILE_TRANSLATIONS_EN: {
+    dragAndDropInstructions: string;
+    feedbackFileSize: string;
+    feedbackFileType: string;
+    fileListRemoveSelectionButtonLabel: string;
+    fileListPreviewAltText: string;
+    filesSelectedHint: string;
+    required: string;
+};
+export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
+    dragAndDropInstructions: string;
+    feedbackFileSize: string;
+    feedbackFileType: string;
+    fileListRemoveSelectionButtonLabel: string;
+    fileListPreviewAltText: string;
+    filesSelectedHint: string;
+    required: string;
+};
+export declare const DS_INPUT_FILE_TRANSLATIONS: {
+    [key in InputFileLanguage]: InputFileTranslations;
+};
+/**
+ * @param file  the File you just got from input.files[0]
+ * @param acceptAttr  the literal string from your <input accept="…">
+ * @returns true if the file would have been allowed by the browser’s picker UI
+ */
+export declare const fileMatchesAccept: (file: File, acceptAttr: string) => boolean;
+type ValidationProps = Pick<InputFileProps, 'id' | 'label' | 'inputFileButtonProps'>;
+/**
+ * Validates the required props for the `DSInputFile` component.
+ *
+ * Ensures that:
+ * - A unique `id` is provided.
+ * - A `label` is provided for accessibility (a11y) reasons.
+ * - If `inputFileButtonProps` is provided, it must include a `label` for accessibility.
+ *
+ * Throws descriptive errors if any of the conditions are not met.
+ *
+ * @param {ValidationProps} params -The subset of DSInputFile properties to validate. This includes
+ *                          properties related to the prefix, suffix, icons and action button of the input.
+ */
+export declare const validateInputFileProps: ({ id, label, inputFileButtonProps, }: ValidationProps) => void;
+export {};

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

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

package/components/InputPassword/InputPassword.d.ts

@@ -1,36 +1,59 @@
 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 */
+    /** 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 */
-    autocomplete?: 'new-password' | 'current-password' | 'off';
-    /** Disables the input, preventing user interaction */
+    /** The value of autoComplete to use for the input.
+     * @default 'new-password'
+     */
+    autoComplete?: 'new-password' | 'current-password' | 'off';
+    /** 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) */
-    showPasswordText?: string;
-    /** The hide password button text label (for assistive technologies) */
-    hidePasswordText?: string;
+    /** Toggle password visibility button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `hidePasswordText`: The hide password button text label (for assistive technologies).
+     * (default) 'Hide password'
+     *
+     * `showPasswordText`: The show password button text label (for assistive technologies).
+     * (default) 'Show password'
+     */
+    togglePasswordVisibilityButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        hidePasswordText?: string;
+        showPasswordText?: string;
+    };
 }
 /**
  * The `<DSInputPassword />` component is an input field that allows users to enter and edit passwords.
@@ -38,5 +61,7 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
  * a hint and a system feedback message.
  *
  * The user can toggle the visibility of the password by clicking on the action button.
+ *
+ * Design in Figma: [Input Password](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6655&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputPassword: ({ id, label, autocomplete, className, disabled, hidePasswordText, hint, hideLabel, invalid, readonly, required, showPasswordText, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;
+export declare const DSInputPassword: import('react').ForwardRefExoticComponent<InputPasswordProps & import('react').RefAttributes<HTMLInputElement>>;

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,38 +1,60 @@
 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 */
+    /** 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 */
-    submitButtonLabel?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Submit button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the submit button.
+     *  (default) 'Search'
+     *
+     * `onClick`: Callback function called when the submit button is clicked.
+     */
+    submitButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
+    /** 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 */
-    submitButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * The `<DSInputSearch />` component can be used as a dedicated search field input.
@@ -41,5 +63,7 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
  *
  * A search button is always available on the right to submit the search request.
  * Additionally when the input is filled, a button to clear the input value becomes visible.
+ *
+ * Design in Figma: [Input Search](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6712&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputSearch: ({ id, label, className, clearButtonLabel, disabled, hint, hideLabel, invalid, readonly, required, size, submitButtonLabel, systemFeedback, value, submitButtonOnClick, onChange, ...rest }: InputSearchProps) => JSX.Element;
+export declare const DSInputSearch: import('react').ForwardRefExoticComponent<InputSearchProps & import('react').RefAttributes<HTMLInputElement>>;

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.