@stihl-design-system/components 1.0.0-RC.46 → 1.0.0-RC.48

package/components/InputNumber/InputNumber.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'value'> {
     /** Unique id for the input. */
@@ -99,6 +99,13 @@ export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElem
     /** Value of the input. */
     value?: InputHTMLAttributes<HTMLInputElement>['value'];
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface InputNumberPropsWithTheme extends InputNumberProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `<DSInputNumber />` component is a versatile input field that allows users to easily enter a value and decrease or increase it as needed.
  * It comes in two sizes (medium & small) and supports various customizations including a prefix and suffix.

package/components/InputPassword/InputPassword.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
     /** Unique id for the input. */
@@ -68,6 +68,13 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
         showPasswordText?: string;
     };
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface InputPasswordPropsWithTheme extends InputPasswordProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `<DSInputPassword />` component is an input field that allows users to enter and edit passwords.
  * It comes in two sizes (medium & small) and supports various customizations including a label,

package/components/InputSearch/InputSearch.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
     /** Unique id for the input. */
@@ -69,6 +69,13 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
     /** Value of the input. */
     value?: string;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface InputSearchPropsWithTheme extends InputSearchProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `<DSInputSearch />` component can be used as a dedicated search field input.
  * It comes in two sizes (medium & small) and supports various customizations including a label,

package/components/LinkCard/LinkCard.d.ts

@@ -45,7 +45,7 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     /**
      * Brand flag displayed on the image.
      *
-     * Can be either a simple `string` (uses default `orange-base` color) or `FlagProps` for full customization.
+     * Can be either a simple `string` (uses default `promo-highlight` color) or `FlagProps` for full customization.
      */
     brandFlag?: string | FlagProps;
     /**
@@ -83,7 +83,7 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     /**
      * Array of DSFlag components to be displayed on the card.
      *
-     * Each flag can be either a simple `string` (uses default `grey-light` color) or `FlagProps` for full customization.
+     * Each flag can be either a simple `string` (uses default `status-info` color) or `FlagProps` for full customization.
      */
     flags?: (string | FlagProps)[];
     /**
@@ -92,7 +92,13 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     graphicArea?: React.ReactNode;
     /** Defines the URL to link to. */
     href?: string;
-    /** Image element to be displayed within the card. */
+    /**
+     * Media element (image, video, etc.) to be displayed within the card.
+     */
+    mediaArea?: React.ReactNode;
+    /**
+     * @deprecated Use `mediaArea` instead. Will be removed with stable release.
+     */
     img?: React.ReactNode;
     /** Link component to be used for the navigation. */
     linkComponent?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
@@ -126,7 +132,7 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
  * Design in Figma: [Link Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=43951-17695)
  */
 export declare const DSLinkCard: {
-    ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, linkComponent, metaData, orientation, padding, graphicArea, variant, ...rest }: LinkCardProps): JSX.Element;
+    ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, mediaArea, img, linkComponent, metaData, orientation, padding, graphicArea, variant, ...rest }: LinkCardProps): JSX.Element;
     displayName: string;
 };
 export {};

package/components/LinkCard/LinkCard.utils.d.ts

@@ -1,4 +1,4 @@
 import { LinkCardProps } from './LinkCard';
-type ValidationProps = Pick<LinkCardProps, 'href' | 'linkComponent' | 'flags' | 'flagListAriaLabel' | 'heading' | 'img' | 'brandFlag' | 'decorativeLinkButtonProps'>;
-export declare const validateLinkCardProps: ({ href, linkComponent, flags, flagListAriaLabel, heading, img, brandFlag, decorativeLinkButtonProps, }: ValidationProps) => void;
+type ValidationProps = Pick<LinkCardProps, 'href' | 'linkComponent' | 'flags' | 'flagListAriaLabel' | 'heading' | 'mediaArea' | 'img' | 'brandFlag' | 'decorativeLinkButtonProps'>;
+export declare const validateLinkCardProps: ({ href, linkComponent, flags, flagListAriaLabel, heading, mediaArea, img, brandFlag, decorativeLinkButtonProps, }: ValidationProps) => void;
 export {};

package/components/NumberIndicator/NumberIndicator.d.ts

@@ -1,8 +1,13 @@
+import { Theme } from '../../types/common-types';
 import { NumberIndicatorVariant } from './NumberIndicator.utils';
 import { JSX } from 'react';
 export interface NumberIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Content within the NumberIndicator. */
     label?: string;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
     /**
      * Variant of the NumberIndicator.
      *
@@ -10,4 +15,4 @@ export interface NumberIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
      */
     variant?: NumberIndicatorVariant;
 }
-export declare const NumberIndicator: ({ label, className, variant, ...rest }: NumberIndicatorProps) => JSX.Element;
+export declare const NumberIndicator: ({ label, className, theme, variant, ...rest }: NumberIndicatorProps) => JSX.Element;

package/components/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import { JSX, ReactElement } from 'react';
-import { SelectedAriaAttributes } from '../../types';
+import { SelectedAriaAttributes, Theme } from '../../types';
 import { PaginationAlignment, PaginationAriaAttributes, PaginationLanguage, PaginationTranslations } from './Pagination.utils';
 export interface PaginationLink {
     /** The href for the link if no framework-specific link component wrapper is provided. */
@@ -26,7 +26,10 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
      * @default 'right'
      */
     alignment?: PaginationAlignment;
-    /** Sets language to use for the screen reader messages, if no translations object is provided.
+    /** Sets language for screen reader messages and ICU plural rule resolution.
+     * Use `'de'` or `'en'` for preconfigured translations, or any
+     * [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
+     * when providing a custom `translations` object.
      * @default 'en'
      */
     lang?: PaginationLanguage;
@@ -40,6 +43,10 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
     links?: PaginationLink[];
     /** Translations for the DSPagination. Use our [customization page](/?path=/story/components-pagination-translations--documentation) for creating custom translations. */
     translations?: PaginationTranslations;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
     /** Callback when a new page is selected. */
     onPageChange?: (nextPageIndex: number) => void;
 }
@@ -48,4 +55,4 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  *
  * Design in Figma: [Pagination](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-11456)
  */
-export declare const DSPagination: ({ aria, activePageIndex, itemsPerPage, totalItemsCount, className, alignment, lang, links, translations, onPageChange, ...rest }: PaginationProps) => JSX.Element;
+export declare const DSPagination: ({ aria, activePageIndex, itemsPerPage, totalItemsCount, className, alignment, lang, links, theme, translations, onPageChange, ...rest }: PaginationProps) => JSX.Element;

package/components/Pagination/Pagination.utils.d.ts

@@ -1,7 +1,25 @@
+import { DSLanguage } from '../../utils';
 import { PaginationProps } from './Pagination';
 export type PaginationAriaAttributes = 'aria-label' | 'aria-labelledby';
-export type PaginationLanguage = 'en' | 'de';
-export type PaginationTranslations = typeof DS_PAGINATION_TRANSLATIONS_EN;
+export type PaginationLanguage = DSLanguage;
+export type PaginationTranslations = {
+    /** Label for the "previous page" navigation button. */
+    previousPage: string;
+    /** Label for the "next page" navigation button. */
+    nextPage: string;
+    /**
+     * Label for a specific page link.
+     *
+     * Placeholder: `{pageNumber}` = the page number.
+     */
+    page: string;
+    /**
+     * Announced to indicate the current page position.
+     *
+     * Placeholders: `{currentPage}` = current page number, `{totalPages}` = total number of pages.
+     */
+    pageOf: string;
+};
 export type PaginationAlignment = 'left' | 'center' | 'right';
 export type PaginationVisiblePageCount = 5 | 7 | 9;
 export type PaginationPageItem = {
@@ -46,14 +64,9 @@ export declare const addDividers: (items: PaginationPageItem[]) => PaginationRen
  * @returns An array of pagination render items including dividers.
  */
 export declare const getPageItemsWithDividers: (totalPages: number, activePageIndex: number, pageItemCount: number) => PaginationRenderItem[];
-export declare const DS_PAGINATION_TRANSLATIONS_EN: {
-    previousPage: string;
-    nextPage: string;
-    page: string;
-    pageOf: string;
-};
+export declare const DS_PAGINATION_TRANSLATIONS_EN: PaginationTranslations;
 export declare const DS_PAGINATION_TRANSLATIONS_DE: PaginationTranslations;
-export declare const DS_PAGINATION_TRANSLATIONS: Record<PaginationLanguage, PaginationTranslations>;
+export declare const DS_PAGINATION_TRANSLATIONS: Record<string, PaginationTranslations>;
 type ValidatePaginationPropsParams = Pick<PaginationProps, 'activePageIndex' | 'aria' | 'itemsPerPage' | 'links' | 'totalItemsCount'>;
 export declare const validatePaginationProps: ({ activePageIndex, aria, itemsPerPage, links, totalItemsCount, }: ValidatePaginationPropsParams) => void;
 export {};

package/components/Popover/Popover.d.ts

@@ -1,5 +1,6 @@
 import { HTMLProps, JSX } from 'react';
 import { OpenChangeReason, Placement } from '@floating-ui/react';
+import { Theme } from '../../types/common-types';
 export interface PopoverProps {
     /** Content within the Popover. */
     children?: React.ReactNode;
@@ -41,13 +42,20 @@ export interface PopoverProps {
     /** A function that is called when the open state should change. */
     onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface PopoverPropsWithTheme extends PopoverProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The Popover component is used to display additional information or actions related to an anchor element. It can be positioned relative to the anchor and supports various placements and offsets.
  *
  * Design in Figma: [Popover](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=35223-10505)
  * */
 export declare const DSPopover: {
-    ({ children, ...rest }: PopoverProps): JSX.Element;
+    (props: PopoverProps): JSX.Element;
     /** attach static members */
     Anchor: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & PopoverAnchorProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
     Content: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & PopoverContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/Popover/Popover.utils.d.ts

@@ -1,10 +1,10 @@
-import { PopoverProps } from './Popover';
+import { PopoverProps, PopoverPropsWithTheme } from './Popover';
 /**
  * Popover hook for managing popover state and behavior.
  * @param PopoverProps Popover props
  * @returns Popover state and actions
  */
-export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOpen, popoverOffset, showArrow, variant, defaultAnchorButtonProps, onOpenChange: setControlledOpen, }?: PopoverProps) => {
+export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOpen, popoverOffset, showArrow, theme, variant, defaultAnchorButtonProps, onOpenChange: setControlledOpen, }?: PopoverPropsWithTheme) => {
     placement: import('@floating-ui/utils').Placement;
     strategy: import('@floating-ui/utils').Strategy;
     middlewareData: import('@floating-ui/core').MiddlewareData;
@@ -56,6 +56,7 @@ export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOp
         [key: `data-${string}`]: string | undefined;
         label?: string;
     } | undefined;
+    theme: "light" | "dark";
     variant: "default" | "grey";
 };
 /**

package/components/Radio/Radio.d.ts

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes } from 'react';
+import { Theme } from '../../types';
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Label text displayed next to the radio. */
     label: string;
@@ -32,6 +33,10 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
      * @default false
      */
     invalid?: boolean;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
     /** Controls whether the hint is displayed when the radio button is not checked.
      * @default false
      */

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,5 @@
 import { FieldsetHTMLAttributes } from 'react';
+import { Theme } from '../../types/common-types';
 import { FieldsetProps } from '../Fieldset/Fieldset';
 import { RadioGroupOption } from './RadioGroup.utils';
 export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
@@ -75,6 +76,13 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
     /** Callback function called when the value of the radio group changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface RadioGroupPropsWithTheme extends RadioGroupProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `DSRadioGroup` component offers a cohesive and accessible solution for grouping radio buttons,
  * complete with customizable legends, direction options, and integrated validation feedback,

package/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import { SelectHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     /** Unique id for the select. */
@@ -56,6 +56,13 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
     /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface SelectPropsWithTheme extends SelectProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * Use the DSSelect component to efficiently navigate through and select from a range of options,
  * enhancing user interaction and decision-making in your application.

package/components/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Unique id for the Slider. */
@@ -65,6 +65,13 @@ export interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
         label?: string;
     };
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface SliderPropsWithTheme extends SliderProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `<DSSlider />` component is a flexible range input that allows users to select a value within a defined range.
  * It supports various customizations, including a label, hint, tooltip and an optional number input for precise value selection.

package/components/Stepper/Step.d.ts

@@ -19,7 +19,7 @@ export interface StepperStepProps {
     /** Total number of steps */
     stepsCount: number;
     /** Translation function */
-    t: (key: keyof StepperTranslations, replacements?: string[]) => string;
+    t: (key: keyof StepperTranslations, values?: Record<string, string | number>) => string;
     /** Called when the button is clicked (index is already bound in parent) */
     onStepClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Collect the ref for scroll / focus management */

package/components/Stepper/Step.utils.d.ts

@@ -2,4 +2,4 @@ import { Step } from './Step';
 import { StepperTranslations } from './Stepper.utils';
 export declare const STEP_STATE: readonly ["current", "completed", undefined];
 export type StepState = (typeof STEP_STATE)[number];
-export declare const getStepAriaLabel: (t: (key: keyof StepperTranslations, replacements?: string[]) => string, index: number, total: number, step: Step, isCurrent: boolean) => string;
+export declare const getStepAriaLabel: (t: (key: keyof StepperTranslations, values?: Record<string, string | number>) => string, index: number, total: number, step: Step, isCurrent: boolean) => string;

package/components/Stepper/Stepper.d.ts

@@ -34,7 +34,10 @@ export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
      * @default 'left'
      */
     alignment?: StepperAlignment;
-    /** Sets language to use for the screen reader messages, if no translations object is provided.
+    /** Sets language for screen reader messages and ICU plural rule resolution.
+     * Use `'de'` or `'en'` for preconfigured translations, or any
+     * [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
+     * when providing a custom `translations` object.
      * @default 'en'
      */
     lang?: StepperLanguage;

package/components/Stepper/Stepper.utils.d.ts

@@ -1,3 +1,4 @@
+import { DSLanguage } from '../../utils';
 import { Step } from './Step';
 import { StepperProps } from './Stepper';
 export type StepperAriaAttributes = 'aria-label' | 'aria-labelledby';
@@ -7,16 +8,20 @@ export declare const STEPPER_ORIENTATION: readonly ["horizontal", "vertical"];
 export type StepperOrientation = (typeof STEPPER_ORIENTATION)[number];
 export type ValidateStepperPropsParams = Pick<StepperProps, 'aria' | 'steps'>;
 export declare const validateStepperProps: ({ aria, steps, }: ValidateStepperPropsParams) => void;
-export type StepperLanguage = 'en' | 'de';
-export type StepperTranslations = typeof DS_STEPPER_TRANSLATIONS_EN;
-export declare const DS_STEPPER_TRANSLATIONS_EN: {
+export type StepperLanguage = DSLanguage;
+export type StepperTranslations = {
+    /** Label for the current step. */
     current: string;
+    /** Word "completed" used in step state announcements. */
     completed: string;
+    /** Word "Step" used in step announcements. */
     step: string;
+    /** Word "of" used in step position announcements (e.g. "Step 1 of 3"). */
     of: string;
 };
+export declare const DS_STEPPER_TRANSLATIONS_EN: StepperTranslations;
 export declare const DS_STEPPER_TRANSLATIONS_DE: StepperTranslations;
-export declare const DS_STEPPER_TRANSLATIONS: Record<StepperLanguage, StepperTranslations>;
+export declare const DS_STEPPER_TRANSLATIONS: Record<string, StepperTranslations>;
 /**
  * Get the current step in the stepper.
  * If no step is marked as 'current', the last step with a defined state is returned.

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, JSX } from 'react';
+import { Theme } from '../../types/common-types';
 import { SystemFeedbackVariant } from './SystemFeedback.utils';
 export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
     /** Unique id for connecting the system feedback with aria attributes like aria-describedby. */
@@ -8,6 +9,13 @@ export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
     /** Defines the variant (e.g. "error", "success" or "warning"). */
     variant: SystemFeedbackVariant;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface SystemFeedbackPropsWithTheme extends SystemFeedbackProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * Use the SystemFeedback component to provide clear and immediate feedback to the user
  * about the status of a system process or validation state.
@@ -16,4 +24,4 @@ export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
  *
  * <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 DSSystemFeedback: ({ id, message, variant, className, ...rest }: SystemFeedbackProps) => JSX.Element;
+export declare const DSSystemFeedback: (props: SystemFeedbackProps) => JSX.Element;

package/components/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { TextareaHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { TextareaSize } from './Textarea.utils';
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
     /** Unique id for the textarea. */
@@ -65,6 +65,13 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     /** CSS className that can be set on the wrapping container of `<DSTextarea />`.  */
     wrapperClassName?: string;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface TextareaPropsWithTheme extends TextareaProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `<DSTextarea />` component allows users to enter and edit multi line text.
  * It comes in two sizes (medium & small) and supports various customizations

package/{customreactselect.B1FFXsJ8.js → customreactselect.L0zSh3Tg.js}

@@ -3,13 +3,13 @@ import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import { c as f } from "./chunks/CustomReactSelect.yVERtd4R.js";
-import "./chunks/useBreakpoint.1txsny17.js";
+import { c as f } from "./chunks/CustomReactSelect.DTAavYaz.js";
 import "./asterisk.Dwtdwpkq.js";
-import "./chunks/Icon.B0WqYErA.js";
-import "./chunks/Popover.Cyf3CbLl.js";
-import "./chunks/SystemFeedback.Dq3ZphgG.js";
-import "./optioncheckbox.BQo8riVL.js";
+import "./chunks/Icon.DYtaQgbw.js";
+import "./chunks/Popover.CxZZ_y1Z.js";
+import "./chunks/SystemFeedback.DhWcYjnu.js";
+import "./optioncheckbox.tlMEoyT0.js";
+import "./chunks/useBreakpoint.1txsny17.js";
 export {
   f as CustomReactSelect
 };

package/{dialog.ZQ-HnvZs.js → dialog.Ddq8o8Od.js}

@@ -2,8 +2,8 @@
 import "react/jsx-runtime";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import "./chunks/Button.Dauhc5op.js";
-import { D as e } from "./chunks/Dialog.mP1tZEbW.js";
+import "./chunks/Button.CCol--xy.js";
+import { D as e } from "./chunks/Dialog.guuxflWL.js";
 export {
   e as DSDialog
 };

package/{drawer.D0-RM0WZ.js → drawer.rbbjQvqL.js}

@@ -2,8 +2,8 @@
 import "react/jsx-runtime";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import "./chunks/Button.Dauhc5op.js";
-import { D as e } from "./chunks/Drawer.D6IG0DRe.js";
+import "./chunks/Button.CCol--xy.js";
+import { a as e } from "./chunks/Drawer.CjUZu6GW.js";
 export {
   e as DSDrawer
 };

package/{fieldset.BzOeuWjO.js → fieldset.BHf3XK2q.js}

@@ -5,9 +5,9 @@ import "react";
 import "./chunks/useBreakpoint.1txsny17.js";
 import "./asterisk.Dwtdwpkq.js";
 import "./heading.BHSklXho.js";
-import "./chunks/Popover.Cyf3CbLl.js";
-import "./chunks/SystemFeedback.Dq3ZphgG.js";
-import { D as a } from "./chunks/Fieldset.DxhNhprT.js";
+import "./chunks/Popover.CxZZ_y1Z.js";
+import "./chunks/SystemFeedback.DhWcYjnu.js";
+import { D as a } from "./chunks/Fieldset.BBMuLKps.js";
 export {
   a as DSFieldset
 };