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

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

@@ -1,5 +1,10 @@
 import { PopoverProps } from './Popover';
-export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOpen, popoverOffset, onOpenChange: setControlledOpen, }?: PopoverProps) => {
+/**
+ * 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) => {
     placement: import('@floating-ui/utils').Placement;
     strategy: import('@floating-ui/utils').Strategy;
     middlewareData: import('@floating-ui/core').MiddlewareData;
@@ -45,9 +50,35 @@ export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOp
     open: boolean;
     popoverOffset: number;
     setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+    arrowRef: import('react').RefObject<SVGSVGElement | null>;
+    showArrow: boolean;
+    defaultAnchorButtonProps: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    } | undefined;
+    variant: "default" | "grey";
 };
-export declare const validatePopoverAnchor: (children: React.ReactNode) => void;
-export declare const validatePopoverChildren: ({ hasContent, hasAnchor, }: {
+/**
+ * Validates the children of the Popover component in development environment.
+ * - Check for children presence
+ * - Validate that <DSPopover.Anchor> and <DSPopover.Content> are used together.
+ *
+ * @param {Object} childrenObject
+ * @param {React.ReactNode} childrenObject.children - The Popover children.
+ * @param {boolean} childrenObject.hasContent - Whether <DSPopover.Content> is present.
+ * @param {boolean} childrenObject.hasAnchor - Whether <DSPopover.Anchor> is present.
+ * @returns {void}
+ */
+export declare const validatePopoverChildren: ({ children, hasContent, hasAnchor, }: {
+    children: React.ReactNode;
     hasContent: boolean;
     hasAnchor: boolean;
 }) => void;
+type ValidationProps = Pick<PopoverProps, 'showArrow' | 'variant'>;
+/**
+ * Validates Popover props in development environment.
+ *
+ * @param props Popover props to validate
+ */
+export declare const validatePopoverProps: ({ showArrow, variant, }: ValidationProps) => void;
+export {};

package/components/Scroller/Scroller.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes, JSX } from 'react';
+import { HTMLAttributes } from 'react';
 export interface ScrollerProps extends HTMLAttributes<HTMLDivElement> {
     /** Content to be displayed within the scroller. */
     children?: React.ReactNode;
+    /** Additional class name to apply to the scrolling element. */
+    scrollerClassName?: string;
+    /** Additional class name to apply to the scroll buttons. */
+    scrollerButtonClassName?: string;
     /** Scrolls the scroll area to the left either smooth or immediately.
      *  `{scrollPosition: number;`
      *  `isSmooth?: boolean;}`
@@ -17,4 +21,4 @@ export interface ScrollerProps extends HTMLAttributes<HTMLDivElement> {
  *
  * Design in Figma: [Scroller](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6263-49213&t=wRBNgx5siTv3aUkL-11)
  */
-export declare const DSScroller: ({ children, className, scrollToPosition, ...rest }: ScrollerProps) => JSX.Element;
+export declare const DSScroller: import('react').ForwardRefExoticComponent<ScrollerProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/Stepper/Step.d.ts

@@ -0,0 +1,33 @@
+import { default as React, JSX } from 'react';
+import { StepState } from './Step.utils';
+import { StepperTranslations } from './Stepper.utils';
+/** Local copy of the Step data contract to avoid circular dependency with `Stepper.tsx`. */
+export interface Step {
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+    state?: StepState;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface StepperStepProps {
+    /** Step object */
+    step: Step;
+    /** Index of this step in the list */
+    index: number;
+    /** Orientation of the Stepper */
+    orientation: 'horizontal' | 'vertical';
+    /** Total number of steps */
+    stepsCount: number;
+    /** Translation function */
+    t: (key: keyof StepperTranslations, replacements?: string[]) => 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 */
+    buttonRef?: (el: HTMLButtonElement | null) => void;
+}
+/**
+ * Presentational single Step inside the DSStepper.
+ * Keeps the markup & ARIA logic isolated from the Stepper container.
+ */
+export declare const StepperStep: ({ step, index, stepsCount, t, onStepClick, buttonRef, orientation, }: StepperStepProps) => JSX.Element;
+export default StepperStep;

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

@@ -0,0 +1,5 @@
+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;

package/components/Stepper/Stepper.d.ts

@@ -0,0 +1,56 @@
+import { default as React, JSX } from 'react';
+import { SelectedAriaAttributes } from '../../types';
+import { StepState } from './Step.utils';
+import { StepperAlignment, StepperAriaAttributes, StepperLanguage, StepperOrientation, StepperTranslations } from './Stepper.utils';
+export interface Step {
+    /** Label text displayed for the Step. */
+    label: string;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Disables the Step, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * State of the Step. If set to 'current', the step is highlighted as the current step.
+     * @default undefined
+     */
+    state?: StepState;
+    /** Callback function called when the Step is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<StepperAriaAttributes>;
+    /** An array of Step Objects containing the label and other optional parameters.
+     * `{label: string; hint: string; disabled?: boolean; state?: 'current' | 'completed' | undefined; onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;}[]`*/
+    steps: Step[];
+    /** Callback function called when the selection of the Stepper changes. */
+    onStepChange: (selectedStepIndex: number) => void;
+    /** Alignment of the DSStepper.
+     * @default 'left'
+     */
+    alignment?: StepperAlignment;
+    /** Sets language to use for the screen reader messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: StepperLanguage;
+    /** Orientation of the DSStepper.
+     * @default 'horizontal'
+     */
+    orientation?: StepperOrientation;
+    /** Translations for the DSStepper. Use our [customization page](/?path=/story/components-stepper-translations--documentation) for creating custom translations. */
+    translations?: StepperTranslations;
+}
+/**
+ * The `<DSStepper />` component provides an accessible step-based navigation pattern following the `aria-current="step"` specification.
+ * It is a **controlled component** and does not manage its own state.
+ * It renders steps as buttons inside an ordered list (`<ol>`) wrapped in a semantic `<nav>` landmark.
+ * Horizontal overflow is handled via `<DSScroller>` preventing line wrapping while enabling keyboard and pointer based scrolling.
+ *
+ * Design in Figma: [Stepper](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-10497)
+ */
+export declare const DSStepper: ({ aria, className, steps, orientation, alignment, lang, translations, onStepChange, ...rest }: StepperProps) => JSX.Element;

package/components/Stepper/Stepper.test.d.ts

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

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

@@ -0,0 +1,30 @@
+import { Step } from './Step';
+import { StepperProps } from './Stepper';
+export type StepperAriaAttributes = 'aria-label' | 'aria-labelledby';
+export declare const STEPPER_ALIGNMENT: readonly ["left", "center"];
+export type StepperAlignment = (typeof STEPPER_ALIGNMENT)[number];
+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 declare const validateIsLiveRegionPresentForStepper: () => void;
+export type StepperLanguage = 'en' | 'de';
+export type StepperTranslations = typeof DS_STEPPER_TRANSLATIONS_EN;
+export declare const DS_STEPPER_TRANSLATIONS_EN: {
+    current: string;
+    completed: string;
+    step: string;
+    of: string;
+};
+export declare const DS_STEPPER_TRANSLATIONS_DE: StepperTranslations;
+export declare const DS_STEPPER_TRANSLATIONS: Record<StepperLanguage, StepperTranslations>;
+/**
+ * Get the current step in the stepper.
+ * If no step is marked as 'current', the last step with a defined state is returned.
+ * If no steps have a defined state, the first step is returned.
+ * @param steps The array of steps.
+ * @returns The current step.
+ */
+export declare const getCurrentStep: (steps: Step[]) => Step;
+export declare const getCurrentStepIndex: (steps: Step[]) => number;
+export declare const isStepClickable: (state: Step["state"], disabled: boolean | undefined) => boolean;

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

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

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,40 @@
+import { HTMLProps, JSX } from 'react';
+import { OpenChangeReason, Placement } from '@floating-ui/react';
+export interface TooltipProps {
+    /** Content within the Tooltip. */
+    children?: React.ReactNode;
+    /** Opens the Tooltip on initial render.
+     * @default false
+     */
+    initialOpen?: boolean;
+    /** The placement of the Tooltip relative to the anchor element.
+     * @default 'top'
+     */
+    placement?: Placement;
+    /** The offset distance in "px" between the Tooltip and its anchor element.
+     * @default 6
+     */
+    tooltipOffset?: number;
+    /** Controls the open state of the Tooltip. If provided, it will be a controlled component.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** A function that is called when the open state should change. */
+    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+}
+/**
+ * The Tooltip component is used to display additional information or actions related to an anchor element. It is opened on hover or focus. It can be positioned relative to the anchor and supports various placements and offsets.
+ *
+ * Design in Figma: [Tooltip](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/branch/HovZmjHiwxguawTWTO6ibS/Core-Components-%F0%9F%92%A0?node-id=26075-11658&p=f&t=TYKSgw0ZlRDBBUfn-11)
+ * */
+export declare const Tooltip: {
+    ({ children, ...rest }: TooltipProps): JSX.Element;
+    /** attach static members */
+    Anchor: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & TooltipAnchorProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+interface TooltipAnchorProps {
+    children: React.ReactNode;
+}
+export {};

package/components/Tooltip/Tooltip.test.d.ts

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

package/components/Tooltip/Tooltip.utils.d.ts

@@ -0,0 +1,70 @@
+import { TooltipProps } from './Tooltip';
+/**
+ * Tooltip hook for managing tooltip state and behavior.
+ * @param TooltipProps Tooltip props
+ * @returns Tooltip state and actions
+ */
+export declare function useTooltip({ initialOpen, placement, isOpen: controlledOpen, tooltipOffset, onOpenChange: setControlledOpen, }?: TooltipProps): {
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@floating-ui/utils').Strategy;
+    middlewareData: import('@floating-ui/core').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    tooltipOffset: number;
+    setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+};
+export declare const validateTooltipAnchor: (children: React.ReactNode) => void;
+/**
+ * Validates the children of the tooltip component in development environment.
+ * - Check for children presence
+ * - Validate that <Tooltip.Anchor> and <Tooltip.Content> are used together.
+ *
+ * @param {Object} childrenObject
+ * @param {React.ReactNode} childrenObject.children - The Tooltip children.
+ * @param {boolean} childrenObject.hasContent - Whether <Tooltip.Content> is present.
+ * @param {boolean} childrenObject.hasAnchor - Whether <Tooltip.Anchor> is present.
+ * @returns {void}
+ */
+export declare const validateTooltipChildren: ({ children, hasContent, hasAnchor, }: {
+    children: React.ReactNode;
+    hasContent: boolean;
+    hasAnchor: boolean;
+}) => void;

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

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

package/components/TopBar/TopBar.d.ts

@@ -30,11 +30,11 @@ export interface BrandAreaLogoProps {
     target?: LogoTarget;
 }
 export interface BrandAddOnProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Content of the brand addOn. */
-    children: React.ReactNode;
-    /** Sub title below the title. **Only available with `variant="double"`**. */
+    /** Content of the brand add-on. */
+    children?: React.ReactNode;
+    /** Sub title displayed below the `children` to create a two line brand add-on. */
     subTitle?: string;
-    /** Variant of the brand addOn.
+    /** Predefined variant of the brand add-on.
      * @default 'single'
      */
     variant?: BrandAddOnVariant;

package/components/TopBar/TopBar.utils.d.ts

@@ -10,5 +10,5 @@ export declare const validateTopBarChildren: ({ hasBrandArea, hasPrimaryArea, ha
  * @returns `true` if the value is undefined, null, or a non-array object with no own enumerable properties; otherwise, `false`.
  */
 export declare const isEmptyObjectOrUndefined: (obj: unknown) => boolean;
-export declare const BRAND_ADDON_VARIANT: readonly ["double", "single"];
+export declare const BRAND_ADDON_VARIANT: readonly ["100years"];
 export type BrandAddOnVariant = (typeof BRAND_ADDON_VARIANT)[number];

package/customreactselect.BFN8cYJi.js

@@ -0,0 +1,14 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.D-sRdssb.js";
+import "./chunks/index.DL9mof6u.js";
+import "react";
+import { c as u } from "./chunks/CustomReactSelect.Dg3wC_VH.js";
+import "./chunks/useBreakpoint.BzR_yaIv.js";
+import "./asterisk.B2ih8VwF.js";
+import "./chunks/Icon.CDLyB7Pv.js";
+import "./chunks/SystemFeedback.CjlARKki.js";
+import "./optioncheckbox.nBVwGv6c.js";
+export {
+  u as CustomReactSelect
+};

package/dialog.CzM_Cxp0.js

@@ -0,0 +1,9 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DL9mof6u.js";
+import "react";
+import "./chunks/Button.DCZgBNmA.js";
+import { D as e } from "./chunks/Dialog.DpqSVrYR.js";
+export {
+  e as DSDialog
+};

package/drawer._A9MQ8Cj.js

@@ -0,0 +1,9 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DL9mof6u.js";
+import "react";
+import "./chunks/Button.DCZgBNmA.js";
+import { D as e } from "./chunks/Drawer.DISWybOa.js";
+export {
+  e as DSDrawer
+};

package/fieldset.CId-NtI5.js

@@ -0,0 +1,11 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DL9mof6u.js";
+import "react";
+import "./asterisk.B2ih8VwF.js";
+import "./heading.DHLpT4dc.js";
+import "./chunks/SystemFeedback.CjlARKki.js";
+import { D as l } from "./chunks/Fieldset.DiMtr6Vw.js";
+export {
+  l as DSFieldset
+};

package/{filelist.nunJKxkv.js → filelist.DgVuWpR3.js}

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
-import { d as P } from "./chunks/index.CgTHIF3K.js";
-import { D as k } from "./chunks/Button.B7xF1E19.js";
-import { D as u } from "./chunks/Icon.DGTYCv63.js";
-import { D as S } from "./chunks/SystemFeedback.B9f67mjJ.js";
-import { c as j } from "./chunks/index.CEyLAtio.js";
-import './assets/filelist.H_wKcSPX.css';const F = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), z = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), y = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), C = /[^\p{L}\d]+/giu, E = "$1\0$2", N = "";
-function R(t) {
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { d as P } from "./chunks/index.D-sRdssb.js";
+import { D as k } from "./chunks/Button.DCZgBNmA.js";
+import { D as u } from "./chunks/Icon.CDLyB7Pv.js";
+import { D as S } from "./chunks/SystemFeedback.CjlARKki.js";
+import { c as j } from "./chunks/index.DL9mof6u.js";
+import './assets/filelist.H_wKcSPX.css';const F = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), z = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), y = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), C = /[^\p{L}\d]+/giu, I = "$1\0$2", E = "";
+function N(t) {
   let e = t.trim();
-  e = e.replace(F, E).replace(z, E), e = e.replace(C, "\0");
+  e = e.replace(F, I).replace(z, I), e = e.replace(C, "\0");
   let a = 0, s = e.length;
   for (; e.charAt(a) === "\0"; )
     a++;
@@ -19,7 +19,7 @@ function R(t) {
   return e.slice(a, s).split(/\0/g);
 }
 function A(t) {
-  const e = R(t);
+  const e = N(t);
   for (let a = 0; a < e.length; a++) {
     const s = e[a], c = y.exec(s);
     if (c) {
@@ -31,7 +31,7 @@ function A(t) {
 }
 function D(t, e) {
   const [a, s, c] = q(t, e);
-  return a + s.map(U(e == null ? void 0 : e.locale)).join((e == null ? void 0 : e.delimiter) ?? " ") + c;
+  return a + s.map(U(e?.locale)).join(e?.delimiter ?? " ") + c;
 }
 function T(t, e) {
   return D(t, { delimiter: "-", ...e });
@@ -40,7 +40,7 @@ function U(t) {
   return t === !1 ? (e) => e.toLowerCase() : (e) => e.toLocaleLowerCase(t);
 }
 function q(t, e = {}) {
-  const a = e.split ?? (e.separateNumbers ? A : R), s = e.prefixCharacters ?? N, c = e.suffixCharacters ?? N;
+  const a = e.split ?? (e.separateNumbers ? A : N), s = e.prefixCharacters ?? E, c = e.suffixCharacters ?? E;
   let i = 0, f = t.length;
   for (; i < t.length; ) {
     const d = t.charAt(i);
@@ -115,33 +115,32 @@ const W = "ds-file-list_root_qx1ja_1", $ = "ds-file-list_file-wrapper_qx1ja_7",
   const d = f, x = Q;
   let b;
   e[2] !== i ? (b = (n) => {
-    var h;
-    const r = ((h = n.name.split(".").pop()) == null ? void 0 : h.toLowerCase()) || "", {
+    const r = n.name.split(".").pop()?.toLowerCase() || "", {
       nonDisplayableImages: p,
-      documents: g,
-      videos: L,
-      archives: w
+      documents: h,
+      videos: g,
+      archives: L
     } = J;
-    return n.type.startsWith("image/") ? p.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-image", className: l.fileIcon }) : /* @__PURE__ */ o("img", { src: URL.createObjectURL(n), alt: `${i("fileListPreviewAltText")} ${n.name}`, className: l.preview }) : g.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-doc", className: l.fileIcon }) : n.type === "application/pdf" ? /* @__PURE__ */ o(u, { name: "file-type-pdf", className: l.fileIcon }) : n.type.startsWith("video/") && L.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-video", className: l.fileIcon }) : w.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-zip", className: l.fileIcon }) : /* @__PURE__ */ o(u, { name: "file", className: l.fileIcon });
+    return n.type.startsWith("image/") ? p.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-image", className: l.fileIcon }) : /* @__PURE__ */ o("img", { src: URL.createObjectURL(n), alt: `${i("fileListPreviewAltText")} ${n.name}`, className: l.preview }) : h.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-doc", className: l.fileIcon }) : n.type === "application/pdf" ? /* @__PURE__ */ o(u, { name: "file-type-pdf", className: l.fileIcon }) : n.type.startsWith("video/") && g.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-video", className: l.fileIcon }) : L.includes(r) ? /* @__PURE__ */ o(u, { name: "file-type-zip", className: l.fileIcon }) : /* @__PURE__ */ o(u, { name: "file", className: l.fileIcon });
   }, e[2] = i, e[3] = b) : b = e[3];
   const v = b;
   let m;
   if (e[4] !== d || e[5] !== a || e[6] !== v || e[7] !== s || e[8] !== i) {
     let n;
     e[10] !== d || e[11] !== v || e[12] !== s || e[13] !== i ? (n = (r, p) => {
-      const g = Object.fromEntries(Object.entries(d).map((L) => {
-        const [w, h] = L;
-        return [w, `${h}-${p}`];
+      const h = Object.fromEntries(Object.entries(d).map((g) => {
+        const [L, R] = g;
+        return [L, `${R}-${p}`];
       }));
-      return /* @__PURE__ */ I("div", { className: j(l.fileWrapper, {
+      return /* @__PURE__ */ w("div", { className: j(l.fileWrapper, {
         [l.fileWrapperInvalid]: r.feedback
       }), children: [
         v(r),
-        /* @__PURE__ */ I("div", { className: l.fileDetails, children: [
+        /* @__PURE__ */ w("div", { className: l.fileDetails, children: [
           /* @__PURE__ */ o("span", { className: l.fileName, children: r.name }),
           /* @__PURE__ */ o("span", { className: l.fileSize, children: V(r.size) })
         ] }),
-        /* @__PURE__ */ I(k, { ...g, className: l.removeButton, onClick: () => s(p), hideLabel: !0, iconName: "cross", size: "small", variant: "ghost", type: "button", "aria-describedby": r.feedback ? x(r.name) : void 0, "aria-invalid": r.feedback ? !0 : void 0, children: [
+        /* @__PURE__ */ w(k, { ...h, className: l.removeButton, onClick: () => s(p), hideLabel: !0, iconName: "cross", size: "small", variant: "ghost", type: "button", "aria-describedby": r.feedback ? x(r.name) : void 0, "aria-invalid": r.feedback ? !0 : void 0, children: [
           i("fileListRemoveSelectionButtonLabel", [r.name]),
           "."
         ] }),

package/{flag.D_iN8iD6.js → flag.CE32qHPa.js}

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as y, jsx as p } from "react/jsx-runtime";
-import { d as L } from "./chunks/index.CgTHIF3K.js";
-import { c as u } from "./chunks/index.CEyLAtio.js";
-import { D as w } from "./chunks/Icon.DGTYCv63.js";
+import { d as L } from "./chunks/index.D-sRdssb.js";
+import { c as u } from "./chunks/index.DL9mof6u.js";
+import { D as w } from "./chunks/Icon.CDLyB7Pv.js";
 import './assets/flag.C7i3MAAP.css';const b = "ds-flag_root_14d3h_1", x = "ds-flag_root--color-grey-light_14d3h_28", G = "ds-flag_root--color-yellow-light_14d3h_31", N = "ds-flag_root--color-red-light_14d3h_34", S = "ds-flag_root--color-green-light_14d3h_37", D = "ds-flag_root--color-orange-base_14d3h_40", C = {
   root: b,
   "root--color-grey-light": "ds-flag_root--color-grey-light_14d3h_28",

package/floatingactionbutton.Bsnncudt.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsxs as q, jsx as S } from "react/jsx-runtime";
+import { d as J } from "./chunks/index.D-sRdssb.js";
+import { c as T } from "./chunks/index.DL9mof6u.js";
+import { D as K } from "./chunks/Icon.CDLyB7Pv.js";
+import { DSSpinner as M } from "./spinner.C9qCeq0R.js";
+import { Tooltip as $ } from "./tooltip.QJe_bfO-.js";
+import { forwardRef as P } from "react";
+import './assets/floatingactionbutton.l0nvFiJU.css';const Q = "ds-floating-action-button_root_1any0_1", U = "ds-floating-action-button_root--dark_1any0_70", V = "ds-floating-action-button_root--small_1any0_108", W = "ds-floating-action-button_loader_1any0_129", X = "ds-floating-action-button_icon--hidden_1any0_141", Y = "ds-floating-action-button_label--hidden_1any0_145", l = {
+  root: Q,
+  rootDark: U,
+  rootSmall: V,
+  loader: W,
+  iconHidden: X,
+  labelHidden: Y
+}, Z = P((z, B) => {
+  const t = J.c(51);
+  let s, r, c, n, i, d, p, _, h, g, y, a;
+  t[0] !== z ? ({
+    aria: s,
+    children: r,
+    className: c,
+    disabled: p,
+    iconName: _,
+    iconSource: n,
+    loading: h,
+    size: g,
+    theme: y,
+    tooltip: a,
+    onClick: i,
+    ...d
+  } = z, t[0] = z, t[1] = s, t[2] = r, t[3] = c, t[4] = n, t[5] = i, t[6] = d, t[7] = p, t[8] = _, t[9] = h, t[10] = g, t[11] = y, t[12] = a) : (s = t[1], r = t[2], c = t[3], n = t[4], i = t[5], d = t[6], p = t[7], _ = t[8], h = t[9], g = t[10], y = t[11], a = t[12]);
+  const D = p === void 0 ? !1 : p, N = _ === void 0 ? "placeholder" : _, o = h === void 0 ? !1 : h, G = g === void 0 ? "medium" : g, k = y === void 0 ? "light" : y, E = k === "dark", F = G === "small";
+  let C;
+  t[13] !== c || t[14] !== E || t[15] !== F ? (C = T(l.root, l.rootIconOnlySmall, c, {
+    [l.rootDark]: E,
+    [l.rootSmall]: F
+  }), t[13] = c, t[14] = E, t[15] = F, t[16] = C) : C = t[16];
+  const I = C;
+  let H;
+  t[17] !== o ? (H = T(l.icon, {
+    [l.iconHidden]: o
+  }), t[17] = o, t[18] = H) : H = t[18];
+  const w = H;
+  let v;
+  t[19] !== D || t[20] !== o || t[21] !== i ? (v = (e) => {
+    if (D || o) {
+      e.preventDefault();
+      return;
+    }
+    i && i(e);
+  }, t[19] = D, t[20] = o, t[21] = i, t[22] = v) : v = t[22];
+  const L = v, R = D || o;
+  let m;
+  t[23] !== o ? (m = o && /* @__PURE__ */ S(M, { className: l.loader, aria: {
+    "aria-label": "Loading state"
+  } }), t[23] = o, t[24] = m) : m = t[24];
+  let x;
+  t[25] === Symbol.for("react.memo_cache_sentinel") ? (x = T(l.label, l.labelHidden), t[25] = x) : x = t[25];
+  let f;
+  t[26] !== r ? (f = /* @__PURE__ */ S("span", { className: x, children: r }), t[26] = r, t[27] = f) : f = t[27];
+  let u;
+  t[28] !== w || t[29] !== N || t[30] !== n || t[31] !== k ? (u = (N || n) && /* @__PURE__ */ S(K, { name: N, theme: k, source: n, className: w, "aria-hidden": "true" }), t[28] = w, t[29] = N, t[30] = n, t[31] = k, t[32] = u) : u = t[32];
+  let A;
+  t[33] !== s || t[34] !== L || t[35] !== o || t[36] !== B || t[37] !== d || t[38] !== I || t[39] !== R || t[40] !== m || t[41] !== f || t[42] !== u ? (A = /* @__PURE__ */ q("button", { className: I, type: "button", onClick: L, ...s, ...d, "aria-disabled": R, "aria-busy": o, ref: B, children: [
+    m,
+    f,
+    u
+  ] }), t[33] = s, t[34] = L, t[35] = o, t[36] = B, t[37] = d, t[38] = I, t[39] = R, t[40] = m, t[41] = f, t[42] = u, t[43] = A) : A = t[43];
+  const O = A;
+  if (a) {
+    let e;
+    t[44] !== O ? (e = /* @__PURE__ */ S($.Anchor, { children: O }), t[44] = O, t[45] = e) : e = t[45];
+    let b;
+    t[46] !== a ? (b = /* @__PURE__ */ S($.Content, { children: a }), t[46] = a, t[47] = b) : b = t[47];
+    let j;
+    return t[48] !== e || t[49] !== b ? (j = /* @__PURE__ */ q($, { placement: "top", tooltipOffset: 6, children: [
+      e,
+      b
+    ] }), t[48] = e, t[49] = b, t[50] = j) : j = t[50], j;
+  }
+  return O;
+});
+Z.displayName = "DSFloatingActionButton";
+export {
+  Z as DSFloatingActionButton
+};

package/header.CelAkqtp.js

@@ -0,0 +1,12 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.D-sRdssb.js";
+import "./chunks/index.DL9mof6u.js";
+import "react";
+import "./chunks/helpers.CexwVao7.js";
+import "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import { a as s, D } from "./chunks/Header.7TQL_J9t.js";
+export {
+  s as DSHeader,
+  D as DSHeaderContext
+};

package/{heading.BXFBZhKv.js → heading.DHLpT4dc.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as X } from "react/jsx-runtime";
-import { d as D } from "./chunks/index.CgTHIF3K.js";
-import { c as T } from "./chunks/index.CEyLAtio.js";
+import { d as D } from "./chunks/index.D-sRdssb.js";
+import { c as T } from "./chunks/index.DL9mof6u.js";
 import './assets/heading.B-rdLVZD.css';const v = "ds-heading_root_6kuzl_1", N = "ds-heading_root--x-large_6kuzl_4", j = "ds-heading_root--x-large-uppercase_6kuzl_19", y = "ds-heading_root--large_6kuzl_35", C = "ds-heading_root--large-uppercase_6kuzl_50", E = "ds-heading_root--medium_6kuzl_66", H = "ds-heading_root--medium-uppercase_6kuzl_75", $ = "ds-heading_root--small_6kuzl_85", b = "ds-heading_root--small-uppercase_6kuzl_94", q = "ds-heading_root--theme-dark_6kuzl_104", o = {
   root: v,
   rootXLarge: N,

package/icon.vzkPwgjZ.js

@@ -0,0 +1,9 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.D-sRdssb.js";
+import "./chunks/index.DL9mof6u.js";
+import "react";
+import { D as e } from "./chunks/Icon.CDLyB7Pv.js";
+export {
+  e as DSIcon
+};