@stihl-design-system/components 1.0.0-RC.41 → 1.0.0-RC.43

package/components/InputFile/InputFile.d.ts

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { ButtonVariant } from '../Button/Button.utils';
+import { ProgressIndicatorVariant } from './FileList/ProgressIndicator/ProgressIndicator';
 import { InputFileLanguage, InputFileTranslations } from './InputFile.utils';
 export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Unique id for the input. */
@@ -13,13 +14,16 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
      * @default false
      */
     disabled?: boolean;
-    /** The remove button visible in the file list, when file(s) were selected by the user:
+    /** **Controlled** files prop. When provided, component becomes controlled and internal selection state is ignored.
+     * Each file can optionally include upload meta and action button props.
      *
-     * `data-*`: Custom data attributes, which will have the index of the selected file appended at the end of the value.
+     *  `{ feedback?: string;`
+     *  `uploadStatus?: 'uploading' | 'error' | 'success';`
+     *  `uploadPercent?: 'indeterminate' | number;`
+     *  `removeButtonProps?: { [key: 'data-${string}']: string | undefined; onClick: () => void; }; }`
+     *  `retryButtonProps?: { [key: 'data-${string}']: string | undefined; onClick: () => void; }; }`
      */
-    fileListItemRemoveButtonProps?: {
-        [key: `data-${string}`]: string | undefined;
-    };
+    files?: FileWithUploadMeta[];
     /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
      * @default false
@@ -55,6 +59,14 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
      * @default 'en'
      */
     lang?: InputFileLanguage;
+    /** Maximum size allowed in MegaBytes.
+     * @default 7
+     */
+    maxSizeInMb?: number;
+    /** Allow multiple file selection.
+     * @default false
+     */
+    multiple?: boolean;
     /** Shows an info button next to the label that triggers a popover with the passed content. */
     popoverContent?: React.ReactNode;
     /** Popover info button props:
@@ -68,14 +80,6 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
         [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
      */
@@ -86,15 +90,45 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
     showDropzone?: boolean;
     /** Show a file list after file selection. */
     showFileList?: boolean;
+    /** Defines how upload progress is shown (bar = progress bar, text = simple text indicator, undefined = no progress UI). */
+    showProgress?: ProgressIndicatorVariant;
     /** 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;
+    onFilesSelect?: (files: FileWithUploadMeta[]) => void;
 }
-export interface FileWithFeedback extends File {
+export type FileUploadStatus = 'uploading' | 'error' | 'success';
+export interface FileWithUploadMeta extends File {
+    /** System feedback shown to the user. */
     feedback?: string;
+    /** Current upload status of the file. */
+    uploadStatus?: FileUploadStatus;
+    /** Upload progress percentage (0 - 100) or 'indeterminate' if not available.
+     * @default 'indeterminate'
+     */
+    uploadPercent?: 'indeterminate' | number;
+    /** Remove button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `onClick`: Callback function called when the remove button is clicked.
+     */
+    removeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        onClick: () => void;
+    };
+    /** Retry button props used when `uploadStatus === 'error'`:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `onClick`: Callback function called when the retry button is clicked.
+     */
+    retryButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        onClick: () => void;
+    };
 }
 /**
  * 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.

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

@@ -6,9 +6,16 @@ export declare const DS_INPUT_FILE_TRANSLATIONS_EN: {
     feedbackFileSize: string;
     feedbackFileType: string;
     fileListRemoveSelectionButtonLabel: string;
+    fileListCancelUploadButtonLabel: string;
+    fileListDeleteFileButtonLabel: string;
+    fileListIndeterminate: string;
     fileListPreviewAltText: string;
     filesSelectedHint: string;
     required: string;
+    uploadStatus: string;
+    uploading: string;
+    success: string;
+    retry: string;
     togglePopover: string;
 };
 export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
@@ -16,9 +23,16 @@ export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
     feedbackFileSize: string;
     feedbackFileType: string;
     fileListRemoveSelectionButtonLabel: string;
+    fileListCancelUploadButtonLabel: string;
+    fileListDeleteFileButtonLabel: string;
+    fileListIndeterminate: string;
     fileListPreviewAltText: string;
     filesSelectedHint: string;
     required: string;
+    uploadStatus: string;
+    uploading: string;
+    success: string;
+    retry: string;
     togglePopover: string;
 };
 export declare const DS_INPUT_FILE_TRANSLATIONS: {

package/components/LinkButton/LinkButton.d.ts

@@ -3,7 +3,7 @@ import { IconProps } from '../Icon/Icon';
 import { LinkButtonAriaAttribute, LinkButtonIconPosition, LinkButtonReferrerPolicy, LinkButtonRel, LinkButtonSize, LinkButtonVariant } from './LinkButton.utils';
 export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** ARIA attributes to enhance accessibility.
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
      *  `'aria-labelledby'?: string;}`
      */

package/components/LinkCard/LinkCard.d.ts

@@ -1,4 +1,5 @@
 import { AnchorHTMLAttributes, JSX } from 'react';
+import { FlagProps } from '../Flag/Flag';
 import { LinkButtonProps } from '../LinkButton/LinkButton';
 import { CardHeading } from './LinkCard.utils';
 type DecorativeLinkButtonProps = Pick<LinkButtonProps, 'iconPosition' | 'iconName' | 'size' | 'hideLabel'> & {
@@ -29,8 +30,12 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} heading
      */
     heading: CardHeading;
-    /** Orange brand flag text displayed on the image. */
-    brandFlag?: string;
+    /**
+     * Brand flag displayed on the image.
+     *
+     * Can be either a simple `string` (uses default `orange-base` color) or `FlagProps` for full customization.
+     */
+    brandFlag?: string | FlagProps;
     /**
      * ClassNames for various parts of the LinkCard can be provided via the `cardClassNames` prop.
      * - `brandFlag?: string` className for the brand flag element.
@@ -64,8 +69,10 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     flagListAriaLabel?: string;
     /**
      * 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.
      */
-    flags?: string[];
+    flags?: (string | FlagProps)[];
     /** Defines the URL to link to. */
     href?: string;
     /** Image element to be displayed within the card. */
@@ -82,6 +89,11 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
      * @default 'vertical'
      */
     orientation?: 'vertical' | 'horizontal';
+    /**
+     * Sets the padding for the content inside the card.
+     * @default 'medium'
+     */
+    padding?: 'small' | 'medium';
 }
 /**
  * A simple, accessible Card component that can be used as a link to navigate to other pages.
@@ -90,7 +102,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=26075-11591&p=f&t=WDN78eWtKR9F8yYp-11)
  */
 export declare const DSLinkCard: {
-    ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, linkComponent, metaData, orientation, ...rest }: LinkCardProps): JSX.Element;
+    ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, linkComponent, metaData, orientation, padding, ...rest }: LinkCardProps): JSX.Element;
     displayName: string;
 };
 export {};

package/components/Logo/Logo.d.ts

@@ -3,7 +3,7 @@ import { SelectedAriaAttributes, Theme } from '../../types';
 import { Logo, LogoAriaAttribute, LogoTarget } from './Logo.utils';
 export interface LogoProps extends HTMLAttributes<SVGElement | HTMLAnchorElement> {
     /** If the DSLogo is used with an href prop, make sure to add a descriptive label to inform screen reader users what the link stands for.
-     *  `{'aria-label'? string;}`
+     *  `{'aria-label'?: string;}`
      */
     aria?: SelectedAriaAttributes<LogoAriaAttribute>;
     /**

package/components/NavigationTabs/NavigationTabs.d.ts

@@ -19,7 +19,7 @@ export interface NavigationTab {
 }
 export interface NavigationTabsProps extends HTMLAttributes<HTMLDivElement> {
     /** ARIA attributes to ensure accessibility
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-labelledby'?: string;}`
      * */
     aria: SelectedAriaAttributes<TabListAriaAttributes>;

package/components/Spinner/Spinner.d.ts

@@ -3,7 +3,7 @@ import { SelectedAriaAttributes, Theme } from '../../types';
 import { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     /** ARIA attributes to enhance accessibility.
-     * `{'aria-label'? string;}`
+     * `{'aria-label'?: string;}`
      */
     aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
     /** Size of the spinner.

package/components/Stepper/Stepper.d.ts

@@ -21,7 +21,7 @@ export interface Step {
 }
 export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
     /** ARIA attributes to enhance accessibility
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-labelledby'?: string;}`
      * */
     aria: SelectedAriaAttributes<StepperAriaAttributes>;

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

@@ -7,7 +7,6 @@ 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: {

package/components/Switch/Switch.d.ts

@@ -5,7 +5,7 @@ export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Content within the label. */
     children: React.ReactNode;
     /** ARIA attributes to enhance accessibility.
-     * `{'aria-label'? string;}`
+     * `{'aria-label'?: string;}`
      */
     aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
     /** Alignment of the label.

package/components/Tabs/TabList/TabList.d.ts

@@ -6,7 +6,7 @@ import { TabsAlignment } from '../Tabs.utils';
 import { TabListAriaAttributes } from './TabList.utils';
 export type TabListProps<IsNavigation extends boolean> = {
     /** ARIA attributes to enhance accessibility
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-labelledby'?: string;}`
      * */
     aria: SelectedAriaAttributes<TabListAriaAttributes>;

package/components/Toast/ToastManager.utils.d.ts

@@ -1,2 +1 @@
-export declare const validateIsLiveRegionPresent: () => void;
 export declare const validateMultipleToastsOnPage: () => void;

package/components/TopBar/TopBar.d.ts

@@ -12,7 +12,7 @@ export interface BrandAreaLogoProps {
     /**
      * `aria`: Accessibility attributes for screen readers.
      * Ensure to provide a descriptive label via `aria-label`.
-     * `{'aria-label'? string;}`
+     * `{'aria-label'?: string;}`
      */
     aria: SelectedAriaAttributes<LogoAriaAttribute>;
     /** Defines the URL to link to. If you provide a URL, the component will be rendered as a link.

package/{customreactselect.D7YraWJ7.js → customreactselect.DbPXuk-C.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.DBsnmMPl.js";
+import { c as f } from "./chunks/CustomReactSelect.Dtf3mXJ_.js";
 import "./chunks/useBreakpoint.1txsny17.js";
 import "./asterisk.Dwtdwpkq.js";
-import "./chunks/Icon.m6sMB6vl.js";
-import "./chunks/Popover.C5wtha5l.js";
-import "./chunks/SystemFeedback.DFN6Y2cw.js";
-import "./optioncheckbox.v8Plcgeg.js";
+import "./chunks/Icon.BoxUJQDT.js";
+import "./chunks/Popover.BSL3AilG.js";
+import "./chunks/SystemFeedback.C2XFC5WN.js";
+import "./optioncheckbox.DvF4Vr4C.js";
 export {
   f as CustomReactSelect
 };

package/{dialog.CBovd8em.js → dialog.wzLHG12h.js}

@@ -2,8 +2,8 @@
 import "react/jsx-runtime";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import "./chunks/Button.DpGeheky.js";
-import { D as e } from "./chunks/Dialog.C-rcs_Up.js";
+import "./chunks/Button.BdqkFovu.js";
+import { D as e } from "./chunks/Dialog.9tejL9sZ.js";
 export {
   e as DSDialog
 };

package/{drawer.D5F0KXI2.js → drawer.DnHZCC60.js}

@@ -2,8 +2,8 @@
 import "react/jsx-runtime";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import "./chunks/Button.DpGeheky.js";
-import { D as e } from "./chunks/Drawer.D0d557c5.js";
+import "./chunks/Button.BdqkFovu.js";
+import { D as e } from "./chunks/Drawer.DIFMs4Gh.js";
 export {
   e as DSDrawer
 };

package/{fieldset.DgbZ_K_l.js → fieldset.DUU39krR.js}

@@ -4,9 +4,9 @@ import "./chunks/index.DQOqod3i.js";
 import "react";
 import "./asterisk.Dwtdwpkq.js";
 import "./heading.BHSklXho.js";
-import "./chunks/Popover.C5wtha5l.js";
-import "./chunks/SystemFeedback.DFN6Y2cw.js";
-import { D } from "./chunks/Fieldset.7WM7w62l.js";
+import "./chunks/Popover.BSL3AilG.js";
+import "./chunks/SystemFeedback.C2XFC5WN.js";
+import { D } from "./chunks/Fieldset.8jatF24R.js";
 export {
   D as DSFieldset
 };

package/filelist.d.ts

@@ -1,2 +1,2 @@
-export * from './components/FileList/FileList'
+export * from './components/InputFile/FileList/FileList'
 export {}

package/filelist.zRCzEN5D.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsxs as _, jsx as u } from "react/jsx-runtime";
+import { d as N } from "./chunks/index.cKLI89Eg.js";
+import { c as R } from "./chunks/index.DQOqod3i.js";
+import { D as L } from "./chunks/Button.BdqkFovu.js";
+import { D as F } from "./chunks/SystemFeedback.C2XFC5WN.js";
+import { FilePreview as B } from "./filepreview.CK8DA0aR.js";
+import { ProgressIndicator as A } from "./progressindicator.DYKf69nk.js";
+import './assets/filelist.CHVupL8T.css';const I = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), y = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), U = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), D = /[^\p{L}\d]+/giu, g = "$1\0$2", k = "";
+function E(r) {
+  let e = r.trim();
+  e = e.replace(I, g).replace(y, g), e = e.replace(D, "\0");
+  let a = 0, o = e.length;
+  for (; e.charAt(a) === "\0"; )
+    a++;
+  if (a === o)
+    return [];
+  for (; e.charAt(o - 1) === "\0"; )
+    o--;
+  return e.slice(a, o).split(/\0/g);
+}
+function T(r) {
+  const e = E(r);
+  for (let a = 0; a < e.length; a++) {
+    const o = e[a], s = U.exec(o);
+    if (s) {
+      const n = s.index + (s[1] ?? s[2]).length;
+      e.splice(a, 1, o.slice(0, n), o.slice(n));
+    }
+  }
+  return e;
+}
+function W(r, e) {
+  const [a, o, s] = z(r, e);
+  return a + o.map($(e?.locale)).join(e?.delimiter ?? " ") + s;
+}
+function S(r, e) {
+  return W(r, { delimiter: "-", ...e });
+}
+function $(r) {
+  return r === !1 ? (e) => e.toLowerCase() : (e) => e.toLocaleLowerCase(r);
+}
+function z(r, e = {}) {
+  const a = e.split ?? (e.separateNumbers ? T : E), o = e.prefixCharacters ?? k, s = e.suffixCharacters ?? k;
+  let n = 0, i = r.length;
+  for (; n < r.length; ) {
+    const p = r.charAt(n);
+    if (!o.includes(p))
+      break;
+    n++;
+  }
+  for (; i > n; ) {
+    const p = i - 1, c = r.charAt(p);
+    if (!s.includes(c))
+      break;
+    i = p;
+  }
+  return [
+    r.slice(0, n),
+    a(r.slice(n, i)),
+    r.slice(i)
+  ];
+}
+const M = "ds-input-file_root_xvo5t_1", j = "ds-input-file_file-wrapper_xvo5t_7", X = "ds-input-file_file-wrapper--invalid_xvo5t_16", G = "ds-input-file_file-details_xvo5t_20", H = "ds-input-file_file-name_xvo5t_34", K = "ds-input-file_file-size_xvo5t_38", O = "ds-input-file_progress-bar_xvo5t_54", V = "ds-input-file_feedback_xvo5t_59", d = {
+  root: M,
+  fileWrapper: j,
+  fileWrapperInvalid: X,
+  fileDetails: G,
+  fileName: H,
+  fileSize: K,
+  progressBar: O,
+  feedback: V
+}, q = (r) => r >= 1024 * 1024 ? (r / (1024 * 1024)).toFixed(1) + " MB" : r >= 1024 ? (r / 1024).toFixed(0) + " KB" : r + " B", ae = (r) => {
+  const e = N.c(11), {
+    files: a,
+    onRemoveFile: o,
+    t: s,
+    showProgress: n
+  } = r, i = J, p = Q;
+  let c;
+  if (e[0] !== a || e[1] !== o || e[2] !== n || e[3] !== s) {
+    let h;
+    e[5] !== o || e[6] !== n || e[7] !== s ? (h = (t, b) => {
+      const l = t.uploadStatus === "error", m = t.uploadStatus === "success", f = t.uploadStatus === "uploading";
+      let P = "indeterminate";
+      if (t.uploadPercent !== void 0 && t.uploadPercent !== "indeterminate") {
+        const C = m ? 100 : 0, w = t.uploadPercent === void 0 ? C : t.uploadPercent;
+        P = Math.min(Math.max(w, 0), 100);
+      }
+      const x = f ? s("fileListCancelUploadButtonLabel", [t.name]) : m ? s("fileListDeleteFileButtonLabel", [t.name]) : s("fileListRemoveSelectionButtonLabel", [t.name]);
+      return /* @__PURE__ */ _("div", { className: R(d.fileWrapper, {
+        [d.fileWrapperInvalid]: l
+      }), "aria-busy": f ? "true" : "false", "aria-describedby": f ? p(t.name) : i(t.name), "aria-invalid": l ? !0 : void 0, children: [
+        /* @__PURE__ */ u(B, { file: t, t: s }),
+        /* @__PURE__ */ _("div", { className: d.fileDetails, children: [
+          /* @__PURE__ */ u("span", { className: d.fileName, children: t.name }),
+          /* @__PURE__ */ u("span", { className: d.fileSize, children: q(t.size) })
+        ] }),
+        /* @__PURE__ */ _("div", { children: [
+          l && t.retryButtonProps && /* @__PURE__ */ _(L, { ...t.retryButtonProps, onClick: t.retryButtonProps.onClick, hideLabel: !0, iconName: "arrow-counterclockwise", size: "small", variant: "ghost", type: "button", "aria-describedby": t.feedback ? i(t.name) : void 0, tooltip: s("retry"), children: [
+            s("retry"),
+            "."
+          ] }),
+          (f || m) && !t.removeButtonProps?.onClick ? null : /* @__PURE__ */ _(L, { ...t.removeButtonProps, onClick: () => {
+            t.uploadStatus !== void 0 && t.removeButtonProps?.onClick ? t.removeButtonProps?.onClick() : o(b);
+          }, hideLabel: !0, iconName: "cross", size: "small", variant: "ghost", type: "button", "aria-describedby": t.feedback && l ? i(t.name) : void 0, tooltip: x, children: [
+            x,
+            "."
+          ] })
+        ] }),
+        (f || l) && n && /* @__PURE__ */ u(A, { id: p(t.name), fileName: t.name, percent: P, progressStatus: l ? "error" : "uploading", className: d.progressBar, variant: n, t: s }),
+        (t.feedback && (l || m) || t.feedback === void 0 && m) && /* @__PURE__ */ u(F, { variant: l ? "error" : "success", id: i(t.name), message: t.feedback || s("success"), className: d.feedback })
+      ] }, b + t.name);
+    }, e[5] = o, e[6] = n, e[7] = s, e[8] = h) : h = e[8], c = a.map(h), e[0] = a, e[1] = o, e[2] = n, e[3] = s, e[4] = c;
+  } else
+    c = e[4];
+  let v;
+  return e[9] !== c ? (v = /* @__PURE__ */ u("div", { className: d.root, children: c }), e[9] = c, e[10] = v) : v = e[10], v;
+};
+function J(r) {
+  return `file-feedback-${S(r)}`;
+}
+function Q(r) {
+  return `progress-${S(r)}`;
+}
+export {
+  ae as FileList
+};

package/filepreview.CK8DA0aR.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { d as z } from "./chunks/index.cKLI89Eg.js";
+import { useState as N } from "react";
+import { D as w } from "./chunks/Icon.BoxUJQDT.js";
+import './assets/filepreview.2cdH-1Xs.css';const S = "ds-input-file_preview_15s1u_1", E = "ds-input-file_root_15s1u_7", D = "ds-input-file_file-icon_15s1u_7", u = {
+  preview: S,
+  root: E,
+  fileIcon: D
+}, x = {
+  nonDisplayableImages: ["heic", "heif", "raw", "cr2", "cr3", "nef", "arw", "orf", "rw2", "dng", "svgz", "jp2", "jxl", "dds", "exr", "psd", "ai", "indd"],
+  documents: [
+    "doc",
+    "docx",
+    "odt",
+    "fodt",
+    "gdoc",
+    "rtf",
+    "dot",
+    "dotx",
+    "pages",
+    "wpd",
+    "abw",
+    "tmd",
+    "lwp",
+    "wps",
+    "wks",
+    // Excel and spreadsheet formats
+    "xls",
+    "xlsx",
+    "xlsm",
+    "xlsb",
+    "xlt",
+    "xltx",
+    "ods",
+    "fods",
+    "csv",
+    "tsv",
+    "gsheet"
+  ],
+  videos: ["mp4", "m4v", "mov", "webm", "ogv", "avi", "wmv", "flv", "f4v", "mkv", "3gp", "3g2", "ts", "vob", "rm", "rmvb", "mpeg", "mpg"],
+  archives: ["zip", "rar", "7z", "tar", "gz", "tar.gz", "tgz", "xz", "tar.xz", "bz2", "tar.bz2", "lzma", "cab", "iso"]
+}, L = (f, e) => {
+  const {
+    documents: t,
+    videos: r,
+    archives: p
+  } = x;
+  return f.type.startsWith("image/") ? "file-type-image" : t.includes(e) ? "file-type-doc" : f.type === "application/pdf" ? "file-type-pdf" : f.type.startsWith("video/") && r.includes(e) ? "file-type-video" : p.includes(e) ? "file-type-zip" : "file";
+}, T = (f) => {
+  const e = z.c(25), {
+    file: t,
+    t: r
+  } = f, [p, h] = N(!1);
+  let o, l, a, n, i;
+  if (e[0] !== t || e[1] !== p || e[2] !== r) {
+    i = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
+    e: {
+      const _ = t.name.split(".").pop()?.toLowerCase() || "", {
+        nonDisplayableImages: I
+      } = x, b = t.type.startsWith("image/") && !I.includes(_);
+      if (b && p) {
+        let s;
+        e[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ d("span", { className: u.root, children: /* @__PURE__ */ d(w, { "aria-hidden": "true", name: "file-type-image", className: u.fileIcon }) }), e[8] = s) : s = e[8], i = s;
+        break e;
+      }
+      if (b) {
+        let s;
+        e[9] !== t ? (s = URL.createObjectURL(t), e[9] = t, e[10] = s) : s = e[10];
+        let m;
+        e[11] !== t.name || e[12] !== r ? (m = r("fileListPreviewAltText", [t.name]), e[11] = t.name, e[12] = r, e[13] = m) : m = e[13];
+        let g;
+        e[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = () => {
+          h(!0);
+        }, e[14] = g) : g = e[14];
+        let y;
+        e[15] !== s || e[16] !== m ? (y = /* @__PURE__ */ d("img", { src: s, alt: m, className: u.preview, onError: g }), e[15] = s, e[16] = m, e[17] = y) : y = e[17], i = y;
+        break e;
+      }
+      n = u.root, o = w, l = "true", a = L(t, _);
+    }
+    e[0] = t, e[1] = p, e[2] = r, e[3] = o, e[4] = l, e[5] = a, e[6] = n, e[7] = i;
+  } else
+    o = e[3], l = e[4], a = e[5], n = e[6], i = e[7];
+  if (i !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
+    return i;
+  let c;
+  e[18] !== o || e[19] !== l || e[20] !== a ? (c = /* @__PURE__ */ d(o, { "aria-hidden": l, name: a, className: u.fileIcon }), e[18] = o, e[19] = l, e[20] = a, e[21] = c) : c = e[21];
+  let v;
+  return e[22] !== n || e[23] !== c ? (v = /* @__PURE__ */ d("span", { className: n, children: c }), e[22] = n, e[23] = c, e[24] = v) : v = e[24], v;
+};
+export {
+  T as FilePreview
+};

package/filepreview.d.ts

@@ -0,0 +1,2 @@
+export * from './components/InputFile/FileList/FilePreview/FilePreview'
+export {}

package/{flag.D-wrUioF.js → flag.02uD-ADh.js}

@@ -2,7 +2,7 @@
 import { jsxs as y, jsx as p } from "react/jsx-runtime";
 import { d as L } from "./chunks/index.cKLI89Eg.js";
 import { c as u } from "./chunks/index.DQOqod3i.js";
-import { D as w } from "./chunks/Icon.m6sMB6vl.js";
+import { D as w } from "./chunks/Icon.BoxUJQDT.js";
 import './assets/flag.CyCIPu_J.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.CE-Rz0dx.js → floatingactionbutton.BwmRfmD_.js}

@@ -2,9 +2,9 @@
 import { jsxs as q, jsx as S } from "react/jsx-runtime";
 import { d as J } from "./chunks/index.cKLI89Eg.js";
 import { c as T } from "./chunks/index.DQOqod3i.js";
-import { D as K } from "./chunks/Icon.m6sMB6vl.js";
-import { DSSpinner as M } from "./spinner.CRVyui04.js";
-import { Tooltip as $ } from "./tooltip._lP4aMV2.js";
+import { D as K } from "./chunks/Icon.BoxUJQDT.js";
+import { DSSpinner as M } from "./spinner.ww3wgdUU.js";
+import { Tooltip as $ } from "./tooltip.C6HKano9.js";
 import { forwardRef as P } from "react";
 import './assets/floatingactionbutton.CTbMRM9Q.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,

package/{icon.ByLYRkPZ.js → icon.DFM8rDOR.js}

@@ -3,7 +3,7 @@ import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import { D as e } from "./chunks/Icon.m6sMB6vl.js";
+import { D as e } from "./chunks/Icon.BoxUJQDT.js";
 export {
   e as DSIcon
 };

package/index.d.ts

@@ -2,9 +2,12 @@ export * from './components/Accordion/Accordion';
 export * from './components/Accordion/Accordion.utils';
 export * from './components/ActionButton/ActionButton';
 export * from './components/ActionButton/ActionButton.utils';
+export * from './components/ActionCard/ActionCard';
+export * from './components/ActionCard/ActionCard.utils';
 export * from './components/ActionLink/ActionLink';
 export * from './components/ActionLink/ActionLink.utils';
 export * from './components/AriaLiveRegions/AriaLiveRegions';
+export * from './components/AriaLiveRegions/AriaLiveRegions.utils';
 export * from './components/Banner/Banner';
 export * from './components/Banner/Banner.utils';
 export * from './components/Breadcrumb/Breadcrumb';