@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/components/FileList/FileList.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Formats a file size in bytes into a human-readable string using appropriate units (bytes, kb, mb).
+ *
+ * @param {number} fileSizeInBytes - The size of the file in bytes.
+ * @returns {string} The formatted file size as a string with the appropriate unit (bytes, kb, mb).
+ *
+ * @example
+ * formatFileSize(500); // "500 bytes"
+ * formatFileSize(2048); // "2 kb"
+ * formatFileSize(10485760); // "10 mb"
+ */
+export declare const formatFileSize: (fileSizeInBytes: number) => string;
+export declare const FILE_ICON_EXTENSIONS: {
+    nonDisplayableImages: string[];
+    documents: string[];
+    videos: string[];
+    archives: string[];
+};

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

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

package/components/Flag/Flag.d.ts

@@ -0,0 +1,26 @@
+import { IconName } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { FlagColor } from './Flag.utils';
+import { JSX } from 'react';
+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.
+ *
+ * Design in Figma: [Flag](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=19511-2443)
+ * */
+export declare const DSFlag: ({ children, className, color, iconName, iconSource, ...rest }: FlagProps) => JSX.Element;

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

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

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

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

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,7 +1,11 @@
+import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
-
 export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel' | 'iconPosition' | 'variant' | 'isFlush'> {
     children: React.ReactNode;
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
+    iconName?: IconName;
 }
 /**
  * FABs are used to highlight actions by laying over the content.
@@ -9,5 +13,7 @@ export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel'
  * Sizes:
  * - medium (e.g. back-to-top)
  * - small (e.g. menu drawer of the sidebar navigation)
+ *
+ * Design in Figma: [Floating Action Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-5095&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSFloatingActionButton: ({ aria, children, className, dataTrackingid, disabled, iconName, iconSource, loading, size, theme, onClick, ...rest }: FloatingActionButtonProps) => JSX.Element;
+export declare const DSFloatingActionButton: import('react').ForwardRefExoticComponent<FloatingActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/Header/Header.d.ts

@@ -0,0 +1,67 @@
+import { JSX } from 'react';
+import { BrandAddOnProps, BrandAreaLogoProps } from '../TopBar/TopBar';
+import { HeaderVariant, SlotProps } from './Header.utils';
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Brand add-on props:
+     *
+     * `children`: Content of the brand add-on.
+     *
+     * `subTitle`: Sub title displayed below the `children` to create a two line brand add-on.
+     *
+     * `variant`: Predefined variant of the brand add-on.
+     */
+    brandAddOnProps?: BrandAddOnProps;
+    /** Content of the Header. */
+    children?: React.ReactNode;
+    /** Makes the DSHeader sticky on scroll.
+     * @default false
+     */
+    isHeaderSticky?: boolean;
+    /** Logo props:
+     *
+     * `aria`: Accessibility attributes for screen readers.
+     *         Ensure to provide a descriptive label via `aria-label`.
+     *
+     * `href`: Defines the URL to link to. If you provide a URL, the component will be rendered as a link.
+     *         Defaults to `'/'`.
+     *
+     * `logo`: Defines which logo to display (e.g., main or sub-brand).
+     *         Defaults to `'main'`.
+     *
+     * `target`: Specifies the target of the link.
+     *           Defaults to `'_self'`.
+     * */
+    logoProps?: BrandAreaLogoProps;
+    /** Sets the visual style variant of the DSHeader.
+     * @default 'main'
+     */
+    variant?: HeaderVariant;
+}
+export declare const DSHeaderContext: import('react').Context<{
+    variant: HeaderVariant;
+    bannerAreaRef?: React.MutableRefObject<HTMLDivElement | null>;
+    brandAddOnProps?: BrandAddOnProps;
+    hasBrandAddOn?: boolean;
+    setHasBrandAddOn?: React.Dispatch<React.SetStateAction<boolean>>;
+    isFixedMainNavigation?: boolean;
+    isHeaderSticky?: boolean;
+    isMobile?: boolean;
+    isStickyMainNavigationVisible?: boolean;
+    mainNavigationAreaRef?: React.MutableRefObject<HTMLDivElement | null>;
+    topBarAreaRef?: React.MutableRefObject<HTMLDivElement | null>;
+    logoProps?: BrandAreaLogoProps;
+}>;
+/**
+ * The `<DSHeader />` component renders a semantic `<header>` element that
+ * serves as the top-level container for your page’s header region.
+ * It manages the DSTopBar element and renders any children passed to it.
+ *
+ * Design in Figma: [Header](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=5381-2186&t=7P7x6ASRWyOtQQJG-4)
+ */
+export declare const DSHeader: {
+    ({ children, brandAddOnProps, className, isHeaderSticky, variant, logoProps, ...rest }: HeaderProps): JSX.Element;
+    /** attach static members */
+    BannerArea: import('react').FC<SlotProps>;
+    MainNavigationArea: import('react').FC<SlotProps>;
+    displayName: string;
+};

package/components/Header/Header.utils.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export declare const HEADER_VARIANT: readonly ["full", "main"];
+export type HeaderVariant = (typeof HEADER_VARIANT)[number];
+/** Props for any “slot” component */
+export interface SlotProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/** Props for slot component with optional children */
+export interface OptionalSlotProps extends Omit<SlotProps, 'children'> {
+    children?: React.ReactNode;
+}
+export declare const validateHeaderChildren: ({ hasBrandArea, hasPrimaryArea, hasSecondaryArea, }: {
+    hasBrandArea: boolean;
+    hasPrimaryArea: boolean;
+    hasSecondaryArea: boolean;
+}) => void;

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

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

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,89 @@ 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 */
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** 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 +93,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, 'hideLabel' | 'id' | 'label' | 'prefix' | 'popoverContent' | '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: ({ hideLabel, id, label, prefix, popoverContent, 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,104 @@
+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;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** 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,48 @@
+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;
+    togglePopover: string;
+};
+export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
+    dragAndDropInstructions: string;
+    feedbackFileSize: string;
+    feedbackFileType: string;
+    fileListRemoveSelectionButtonLabel: string;
+    fileListPreviewAltText: string;
+    filesSelectedHint: string;
+    required: string;
+    togglePopover: 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' | 'hideLabel' | 'popoverContent'>;
+/**
+ * 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, hideLabel, popoverContent, }: ValidationProps) => void;
+export {};

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

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