@ssa-ui-kit/core 3.16.3 → 3.17.0

package/dist/components/FileAttachment/FileAttachment.d.ts

@@ -0,0 +1,36 @@
+import { FileAttachmentProps } from './types';
+/**
+ * FileAttachment - Read-only row displaying a single attached/uploading file
+ *
+ * @example
+ * ```tsx
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Progress bar look instead of the default percentage text
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   progressDisplay="bar"
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Omitting `progress` entirely shows just the file size, no progress copy —
+ * // e.g. a file that's been selected but whose upload hasn't started yet.
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ */
+declare const FileAttachment: ({ file, size, progress, progressDisplay, uploadingText, uploadedText, showDescription, icon, isDisabled, onRemove, className, css: cssProp, }: FileAttachmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default FileAttachment;

package/dist/components/FileAttachment/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useFilePreviewUrl } from './useFilePreviewUrl';

package/dist/components/FileAttachment/hooks/useFilePreviewUrl.d.ts

@@ -0,0 +1,2 @@
+/** Creates an object URL for a local File/Blob and revokes it on unmount or when `content` changes, avoiding a memory leak. */
+export declare const useFilePreviewUrl: (content?: File | Blob) => string | undefined;

package/dist/components/FileAttachment/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FileAttachment';
+export type * from './types';

package/dist/components/FileAttachment/styles.d.ts

@@ -0,0 +1,22 @@
+import { Theme } from '@emotion/react';
+export declare const iconSizeBySize: {
+    large: number;
+    small: number;
+};
+/** Placeholder glyph is inset ~20% on each side of its box in the design (40px box -> 24px glyph). */
+export declare const placeholderIconSizeBySize: {
+    large: number;
+    small: number;
+};
+export declare const container: (theme: Theme, size: "large" | "small") => import("@emotion/react").SerializedStyles;
+export declare const disabledContainer: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const iconWrapper: (size: "large" | "small") => import("@emotion/react").SerializedStyles;
+export declare const placeholderWrapper: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const previewImage: import("@emotion/react").SerializedStyles;
+export declare const textColumn: import("@emotion/react").SerializedStyles;
+export declare const title: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const description: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const dot: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const progressTrack: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const progressFill: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const deleteButton: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/FileAttachment/types.d.ts

@@ -0,0 +1,24 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { IconProps } from '../Icon/types';
+export interface FileAttachmentFile {
+    name: string;
+    size: number;
+    /** Local file/blob not yet uploaded — used to render an image preview via an object URL. Ignored for non-image file names. */
+    content?: File | Blob;
+    /** URL of an already-uploaded image, e.g. returned by the backend. Ignored for non-image file names. Takes precedence over `content`. */
+    previewUrl?: string;
+}
+export interface FileAttachmentProps {
+    file: FileAttachmentFile;
+    size?: 'large' | 'small';
+    progress?: number;
+    progressDisplay?: 'text' | 'bar';
+    uploadingText?: string;
+    uploadedText?: string;
+    showDescription?: boolean;
+    icon?: IconProps['name'];
+    isDisabled?: boolean;
+    onRemove?: () => void;
+    className?: string;
+    css?: Interpolation<Theme>;
+}

package/dist/components/FileAttachment/utils.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '../Icon/types';
+export declare const formatBytes: (bytes: number) => string;
+/** Returns the file-type icon for a known extension, or `null` when the design's grey Placeholder look should be used instead. */
+export declare const getFileTypeIcon: (fileName: string) => IconProps["name"] | null;
+/** Gates image-preview rendering strictly on the file name's extension, so a pdf/php/etc. is never rendered via `<img>` even if preview data is (incorrectly) supplied for it. */
+export declare const isImageFile: (fileName: string) => boolean;

package/dist/components/FileUpload/FileUpload.d.ts

@@ -4,7 +4,8 @@ import { FileUploadProps } from './types';
  *
  * Supports single and multi-file selection with built-in validation for
  * file formats and size. In multi-file mode, selected files are listed
- * below the input with individual remove controls.
+ * below the input with individual remove controls. Single-file mode can opt
+ * into the same list treatment via `showFileAttachment`.
  *
  * @example
  * ```tsx
@@ -32,6 +33,36 @@ import { FileUploadProps } from './types';
  *   onChange={setFiles}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-file with per-file upload progress, driven by the consumer's own
+ * // upload requests — FileUpload only handles local selection, so it has no
+ * // progress data of its own.
+ * <FileUpload
+ *   isMultiFile
+ *   value={files}
+ *   onChange={setFiles}
+ *   uploadProgress={[
+ *     { name: 'report.pdf', progress: 50 },
+ *     { name: 'photo.png', progress: 100 },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Single file, shown as a FileAttachment card below the input (icon,
+ * // size, delete button, image preview) instead of inline text next to the
+ * // button. `uploadProgress` here can just be a single number, since there's
+ * // only ever one file.
+ * <FileUpload
+ *   showFileAttachment
+ *   value={file}
+ *   onChange={(files) => setFile(files[0])}
+ *   uploadProgress={70}
+ * />
+ * ```
  */
-declare const FileUpload: ({ label, placeholder, helperText, actionText, error, disabled, css, className, allowedFormats, maxFileSize, isMultiFile, maxFiles, withDropArea, uploadedSectionTitle, value, onChange, onFileRejected, }: FileUploadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const FileUpload: ({ label, placeholder, helperText, actionText, error, disabled, css, className, allowedFormats, maxFileSize, isMultiFile, maxFiles, withDropArea, uploadedSectionTitle, uploadProgress, showFileAttachment, value, onChange, onFileRejected, }: FileUploadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default FileUpload;

package/dist/components/FileUpload/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './FileUpload';
-export { default as FileUploadItem } from './FileUploadItem';
-export type { FileUploadProps, FileRejectionReason } from './types';
+export type { FileUploadProps, FileRejectionReason, FileUploadProgress, FileUploadProgressEntry, } from './types';

package/dist/components/FileUpload/styles.d.ts

@@ -16,9 +16,3 @@ export declare const dropAreaAction: (theme: Theme) => import("@emotion/react").
 export declare const dropAreaClearButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const filesList: import("@emotion/react").SerializedStyles;
 export declare const filesListTitle: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const fileItem: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const fileIconWrapper: import("@emotion/react").SerializedStyles;
-export declare const fileInfo: import("@emotion/react").SerializedStyles;
-export declare const fileName: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const fileSize: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const deleteButton: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/FileUpload/types.d.ts

@@ -1,5 +1,11 @@
 import { Interpolation, Theme } from '@emotion/react';
 export type FileRejectionReason = 'size' | 'format';
+export interface FileUploadProgressEntry {
+    name: string;
+    progress: number;
+}
+/** A single percentage applies to every listed file uniformly; a list matches per-file by `name` — files with no matching entry show no progress. */
+export type FileUploadProgress = number | FileUploadProgressEntry[];
 export interface FileUploadProps {
     label?: string;
     placeholder?: string;
@@ -14,6 +20,10 @@ export interface FileUploadProps {
     maxFiles?: number;
     withDropArea?: boolean;
     uploadedSectionTitle?: string;
+    /** Upload progress for files in the multi-file list (`isMultiFile`). FileUpload only handles local selection, not the network upload itself — pass this in as the consumer's own upload reports progress. Files with no corresponding progress show just their size. */
+    uploadProgress?: FileUploadProgress;
+    /** Single-file mode only (`!isMultiFile`, ignored when `withDropArea` is set — its own selected-file view already covers this): show the selected file as a `FileAttachment` card below the input, instead of inline text next to the button. The input row then always shows `placeholder`, matching how multi-file mode behaves. */
+    showFileAttachment?: boolean;
     className?: string;
     value?: File | File[];
     onChange?: (files: File[]) => void;

package/dist/components/index.d.ts

@@ -41,8 +41,9 @@ export * from './ColorPicker';
 export * from './SearchBox';
 export type * from './SearchBox/types';
 export { default as FileUpload } from './FileUpload';
-export { FileUploadItem } from './FileUpload';
 export type * from './FileUpload/types';
+export { default as FileAttachment } from './FileAttachment';
+export type * from './FileAttachment/types';
 export * from './Field';
 export { default as Form } from './Form';
 export { default as FormAction } from './FormAction';

package/dist/index.js

@@ -7999,8 +7999,8 @@ __webpack_require__.d(__webpack_exports__, {
   DropdownOptions: () => (/* reexport */ DropdownOptions_DropdownOptions),
   DropdownToggle: () => (/* reexport */ DropdownToggle_DropdownToggle),
   Field: () => (/* reexport */ index_parts_namespaceObject),
+  FileAttachment: () => (/* reexport */ FileAttachment_FileAttachment),
   FileUpload: () => (/* reexport */ FileUpload_FileUpload),
-  FileUploadItem: () => (/* reexport */ FileUpload_FileUploadItem),
   Filters: () => (/* reexport */ Filters),
   FiltersMultiSelect: () => (/* reexport */ FiltersMultiSelect),
   FiltersMultiSelectEmpty: () => (/* reexport */ FiltersMultiSelectEmpty),
@@ -20626,11 +20626,11 @@ const multipleStyles = ({
   isOpen
 }) => {
   const borderColor = isOpen ? theme.palette.primary.main : theme.colors.grey;
-  return /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:space-between;height:40px;padding:11px 15px 9px 10px;font-size:14px;font-weight:500;color:", theme.colors.greyDarker, ";border:1px solid ", borderColor, ";border-radius:12px;background:", theme.colors.white, ";max-width:250px;svg path{stroke:", theme.colors.greyDarker, ";}&:disabled{background:", theme.colors.greyLighter, ";border-color:", theme.colors.grey, ";color:", theme.colors.greyDarker60, ";cursor:default;svg path{stroke:", theme.colors.grey, ";}}&:focus:not(:disabled){border-color:", theme.palette.primary.main, ";}&:hover:not(:disabled){border-color:", isOpen ? theme.palette.primary.main : theme.colors.greyDarker80, ";}" + ( true ? "" : 0),  true ? "" : 0);
+  return /*#__PURE__*/(0,react_namespaceObject.css)("height:40px;padding:11px 15px 9px 10px;font-size:14px;font-weight:500;color:", theme.colors.greyDarker, ";border:1px solid ", borderColor, ";border-radius:12px;background:", theme.colors.white, ";max-width:250px;svg path{stroke:", theme.colors.greyDarker, ";}&:disabled{background:", theme.colors.greyLighter, ";border-color:", theme.colors.grey, ";color:", theme.colors.greyDarker60, ";cursor:default;svg path{stroke:", theme.colors.grey, ";}}&:focus:not(:disabled){border-color:", theme.palette.primary.main, ";}&:hover:not(:disabled){border-color:", isOpen ? theme.palette.primary.main : theme.colors.greyDarker80, ";}" + ( true ? "" : 0),  true ? "" : 0);
 };
 const DropdownToggleBase = /*#__PURE__*/base_default()("button",  true ? {
   target: "er3kf7h0"
-} : 0)("display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:8px;position:relative;width:auto;height:44px;padding:0 14px;font:inherit;font-size:14px;font-weight:500;text-align:left;line-height:18px;cursor:pointer;outline:inherit;border-radius:12px;", ({
+} : 0)("display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:8px;position:relative;width:auto;height:44px;padding:0 14px;font:inherit;font-size:14px;font-weight:500;text-align:left;line-height:18px;cursor:pointer;outline:inherit;border-radius:12px;", ({
   isMultiple,
   isOpen,
   disabled,
@@ -28423,6 +28423,207 @@ const SearchBox = ({
 
 
 
+;// ./src/components/FileAttachment/utils.ts
+const formatBytes = bytes => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${Math.round(bytes / (1024 * 1024))} MB`;
+};
+const EXTENSION_ICON_MAP = {
+  pdf: 'file-pdf',
+  doc: 'file-word',
+  docx: 'file-word',
+  xls: 'excel-download',
+  xlsx: 'excel-download'
+};
+
+/** Returns the file-type icon for a known extension, or `null` when the design's grey Placeholder look should be used instead. */
+const getFileTypeIcon = fileName => {
+  const extension = fileName.split('.').pop()?.toLowerCase();
+  return extension && EXTENSION_ICON_MAP[extension] || null;
+};
+const IMAGE_FILE_NAME_REGEX = /\.(png|jpe?g|gif|webp|bmp|avif|svg)$/i;
+
+/** Gates image-preview rendering strictly on the file name's extension, so a pdf/php/etc. is never rendered via `<img>` even if preview data is (incorrectly) supplied for it. */
+const isImageFile = fileName => IMAGE_FILE_NAME_REGEX.test(fileName);
+;// ./src/components/FileAttachment/hooks/useFilePreviewUrl.ts
+
+
+/** Creates an object URL for a local File/Blob and revokes it on unmount or when `content` changes, avoiding a memory leak. */
+const useFilePreviewUrl = content => {
+  const [url, setUrl] = (0,external_react_namespaceObject.useState)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!content) {
+      setUrl(undefined);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(content);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [content]);
+  return url;
+};
+;// ./src/components/FileAttachment/styles.ts
+function FileAttachment_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const paddingBySize = {
+  large: 16,
+  small: 12
+};
+const iconSizeBySize = {
+  large: 40,
+  small: 24
+};
+/** Placeholder glyph is inset ~20% on each side of its box in the design (40px box -> 24px glyph). */
+const placeholderIconSizeBySize = {
+  large: 24,
+  small: 14
+};
+const container = (theme, size) => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:8px;width:100%;padding:", paddingBySize[size], "px;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";border-radius:12px;" + ( true ? "" : 0),  true ? "" : 0);
+const disabledContainer = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.colors.greyLighter, ";" + ( true ? "" : 0),  true ? "" : 0);
+const iconWrapper = size => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:", iconSizeBySize[size], "px;height:", iconSizeBySize[size], "px;" + ( true ? "" : 0),  true ? "" : 0);
+const placeholderWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.palette.secondary.dark, ";border-radius:4px;" + ( true ? "" : 0),  true ? "" : 0);
+const previewImage =  true ? {
+  name: "rys4i",
+  styles: "width:100%;height:100%;border-radius:4px;object-fit:cover;display:block"
+} : 0;
+const textColumn =  true ? {
+  name: "1vjbjgs",
+  styles: "flex:1;min-width:0;display:flex;flex-direction:column;gap:4px"
+} : 0;
+const title = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:600;color:", theme.colors.greyDarker, ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
+const description = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:6px;font-size:0.875rem;font-weight:500;color:", theme.colors.greyDarker60, ";white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
+const dot = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;width:4px;height:4px;border-radius:50%;background:", theme.colors.greyDarker60, ";" + ( true ? "" : 0),  true ? "" : 0);
+const progressTrack = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;flex-shrink:0;overflow:hidden;width:60px;height:4px;border-radius:4px;background:", theme.palette.secondary.light, ";" + ( true ? "" : 0),  true ? "" : 0);
+const progressFill = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;top:0;left:0;height:4px;border-radius:4px;background:", theme.palette.primary.main, ";" + ( true ? "" : 0),  true ? "" : 0);
+const deleteButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;cursor:pointer;color:", theme.colors.greyDarker60, ";transition:color 0.15s ease;&:hover{color:", theme.palette.error.main, ";}&:disabled{cursor:default;color:", theme.colors.grey, ";}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/FileAttachment/FileAttachment.tsx
+
+
+
+
+
+
+/**
+ * FileAttachment - Read-only row displaying a single attached/uploading file
+ *
+ * @example
+ * ```tsx
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Progress bar look instead of the default percentage text
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   progressDisplay="bar"
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Omitting `progress` entirely shows just the file size, no progress copy —
+ * // e.g. a file that's been selected but whose upload hasn't started yet.
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ */
+
+const FileAttachment = ({
+  file,
+  size = 'large',
+  progress,
+  progressDisplay = 'text',
+  uploadingText = 'Uploading',
+  uploadedText = 'Uploaded Successfully',
+  showDescription = true,
+  icon,
+  isDisabled = false,
+  onRemove,
+  className,
+  css: cssProp
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const clampedProgress = progress === undefined ? undefined : Math.min(100, Math.max(0, progress));
+  const isUploaded = clampedProgress !== undefined && clampedProgress >= 100;
+  const iconName = icon ?? getFileTypeIcon(file.name);
+  const canPreviewImage = !icon && isImageFile(file.name);
+  const objectPreviewUrl = useFilePreviewUrl(canPreviewImage ? file.content : undefined);
+  const previewSrc = canPreviewImage ? file.previewUrl ?? objectPreviewUrl : undefined;
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: [container(theme, size), isDisabled && disabledContainer(theme), cssProp,  true ? "" : 0,  true ? "" : 0],
+    className: className,
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: [iconWrapper(size), !iconName && !previewSrc && placeholderWrapper(theme),  true ? "" : 0,  true ? "" : 0],
+      children: previewSrc ? (0,jsx_runtime_namespaceObject.jsx)("img", {
+        src: previewSrc,
+        alt: "",
+        css: previewImage
+      }) : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: iconName ?? 'picture',
+        size: iconName ? iconSizeBySize[size] : placeholderIconSizeBySize[size],
+        color: iconName ? theme.colors.greyDarker60 : theme.colors.white
+      })
+    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: textColumn,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: title(theme),
+        children: file.name
+      }), showDescription && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: description(theme),
+        children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+          children: formatBytes(file.size)
+        }), clampedProgress !== undefined && (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+            children: "|"
+          }), progressDisplay === 'bar' ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+              css: progressTrack(theme),
+              role: "progressbar",
+              children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+                css: progressFill(theme),
+                style: {
+                  width: `${clampedProgress}%`
+                }
+              })
+            }), (0,jsx_runtime_namespaceObject.jsxs)("span", {
+              children: [clampedProgress, "%"]
+            })]
+          }) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [(0,jsx_runtime_namespaceObject.jsxs)("span", {
+              children: [clampedProgress, "%"]
+            }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+              css: dot(theme)
+            }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+              children: isUploaded ? uploadedText : uploadingText
+            })]
+          })]
+        })]
+      })]
+    }), onRemove && (0,jsx_runtime_namespaceObject.jsx)("button", {
+      type: "button",
+      css: deleteButton(theme),
+      disabled: isDisabled,
+      onClick: onRemove,
+      "aria-label": `Remove ${file.name}`,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "delete",
+        size: 16,
+        color: "currentColor"
+      })
+    })]
+  });
+};
+/* harmony default export */ const FileAttachment_FileAttachment = (FileAttachment);
 ;// ./src/components/FileUpload/styles.ts
 function FileUpload_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -28461,71 +28662,6 @@ const filesList =  true ? {
   styles: "display:flex;flex-direction:column;gap:8px;margin-top:12px"
 } : 0;
 const filesListTitle = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:500;color:", theme.colors.greyDarker, ";margin-bottom:4px;" + ( true ? "" : 0),  true ? "" : 0);
-
-// ─── File item ────────────────────────────────────────────────────────────────
-
-const fileItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:12px;padding:12px 16px;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";border-radius:12px;" + ( true ? "" : 0),  true ? "" : 0);
-const fileIconWrapper =  true ? {
-  name: "1xuq60z",
-  styles: "flex-shrink:0;display:flex;align-items:center;justify-content:center"
-} : 0;
-const fileInfo =  true ? {
-  name: "1k33dov",
-  styles: "flex:1;display:flex;flex-direction:column;gap:2px;min-width:0"
-} : 0;
-const fileName = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:600;color:", theme.colors.greyDarker, ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
-const fileSize = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.75rem;font-weight:400;color:", theme.colors.greyDarker60, ";" + ( true ? "" : 0),  true ? "" : 0);
-const deleteButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:8px;cursor:pointer;color:", theme.colors.greyDarker60, ";transition:color 0.15s ease,background 0.15s ease;&:hover{color:", theme.palette.error.main, ";background:", theme.colors.greyLighter, ";}&:disabled{cursor:not-allowed;opacity:0.5;}" + ( true ? "" : 0),  true ? "" : 0);
-;// ./src/components/FileUpload/FileUploadItem.tsx
-
-
-
-
-const formatFileSize = bytes => {
-  if (bytes === 0) return '0 B';
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-};
-const FileUploadItem = ({
-  file,
-  onRemove,
-  disabled
-}) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
-    css: fileItem(theme),
-    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
-      css: fileIconWrapper,
-      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-        name: "file-pdf",
-        size: 32,
-        color: theme.colors.greyDarker60
-      })
-    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
-      css: fileInfo,
-      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
-        css: fileName(theme),
-        children: file.name
-      }), (0,jsx_runtime_namespaceObject.jsx)("span", {
-        css: fileSize(theme),
-        children: formatFileSize(file.size)
-      })]
-    }), (0,jsx_runtime_namespaceObject.jsx)("button", {
-      css: deleteButton(theme),
-      type: "button",
-      disabled: disabled,
-      onClick: () => onRemove(file),
-      "aria-label": `Remove ${file.name}`,
-      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-        name: "bin",
-        size: 16,
-        color: "currentColor"
-      })
-    })]
-  });
-};
-/* harmony default export */ const FileUpload_FileUploadItem = (FileUploadItem);
 ;// ./src/components/FileUpload/FileUpload.tsx
 
 
@@ -28536,14 +28672,23 @@ const FileUploadItem = ({
 
 
 
+
 const normalizeValue = value => {
   if (!value) return [];
   return Array.isArray(value) ? value : [value];
 };
-const formatBytes = bytes => {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
-  return `${Math.round(bytes / (1024 * 1024))} MB`;
+
+/**
+ * Matches by the Nth occurrence of a name rather than the first, so files
+ * that share a name (e.g. two "photo.png" from different folders) each get
+ * their own progress entry instead of colliding on the same one.
+ */
+const getFileProgress = (file, index, files, uploadProgress) => {
+  if (uploadProgress === undefined) return undefined;
+  if (typeof uploadProgress === 'number') return uploadProgress;
+  const occurrence = files.slice(0, index + 1).filter(f => f.name === file.name).length;
+  const matches = uploadProgress.filter(entry => entry.name === file.name);
+  return matches[occurrence - 1]?.progress;
 };
 
 /**
@@ -28551,7 +28696,8 @@ const formatBytes = bytes => {
  *
  * Supports single and multi-file selection with built-in validation for
  * file formats and size. In multi-file mode, selected files are listed
- * below the input with individual remove controls.
+ * below the input with individual remove controls. Single-file mode can opt
+ * into the same list treatment via `showFileAttachment`.
  *
  * @example
  * ```tsx
@@ -28579,6 +28725,36 @@ const formatBytes = bytes => {
  *   onChange={setFiles}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-file with per-file upload progress, driven by the consumer's own
+ * // upload requests — FileUpload only handles local selection, so it has no
+ * // progress data of its own.
+ * <FileUpload
+ *   isMultiFile
+ *   value={files}
+ *   onChange={setFiles}
+ *   uploadProgress={[
+ *     { name: 'report.pdf', progress: 50 },
+ *     { name: 'photo.png', progress: 100 },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Single file, shown as a FileAttachment card below the input (icon,
+ * // size, delete button, image preview) instead of inline text next to the
+ * // button. `uploadProgress` here can just be a single number, since there's
+ * // only ever one file.
+ * <FileUpload
+ *   showFileAttachment
+ *   value={file}
+ *   onChange={(files) => setFile(files[0])}
+ *   uploadProgress={70}
+ * />
+ * ```
  */
 const FileUpload = ({
   label,
@@ -28595,6 +28771,8 @@ const FileUpload = ({
   maxFiles,
   withDropArea = false,
   uploadedSectionTitle,
+  uploadProgress,
+  showFileAttachment = false,
   value,
   onChange,
   onFileRejected
@@ -28657,8 +28835,8 @@ const FileUpload = ({
   };
   const acceptAttr = allowedFormats?.map(f => `.${f}`).join(',');
   const hasError = !!error;
-  const inlineFileName = !isMultiFile && files[0]?.name;
-  const showUploadedFiles = isMultiFile && files.length > 0;
+  const inlineFileName = !isMultiFile && !showFileAttachment && files[0]?.name;
+  const attachmentFiles = isMultiFile || showFileAttachment && !withDropArea ? files : [];
   return (0,jsx_runtime_namespaceObject.jsxs)("div", {
     css: [wrapper, css,  true ? "" : 0,  true ? "" : 0],
     className: className,
@@ -28684,7 +28862,7 @@ const FileUpload = ({
       onKeyDown: e => e.key === 'Enter' && !files[0] && handleChooseClick(),
       children: !isMultiFile && files[0] ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [(0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-          name: "file-pdf",
+          name: getFileTypeIcon(files[0].name) ?? 'picture',
           size: 36,
           color: theme.colors.greyDarker60
         }), (0,jsx_runtime_namespaceObject.jsx)("span", {
@@ -28741,15 +28919,20 @@ const FileUpload = ({
         marginTop: 12
       } : undefined,
       children: error || helperText
-    }), showUploadedFiles && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    }), attachmentFiles.length > 0 && (0,jsx_runtime_namespaceObject.jsxs)("div", {
       css: filesList,
       children: [uploadedSectionTitle && (0,jsx_runtime_namespaceObject.jsx)("span", {
         css: filesListTitle(theme),
         children: uploadedSectionTitle
-      }), files.map((file, index) => (0,jsx_runtime_namespaceObject.jsx)(FileUpload_FileUploadItem, {
-        file: file,
-        onRemove: handleRemove,
-        disabled: disabled
+      }), attachmentFiles.map((file, index) => (0,jsx_runtime_namespaceObject.jsx)(FileAttachment_FileAttachment, {
+        file: {
+          name: file.name,
+          size: file.size,
+          content: file
+        },
+        progress: getFileProgress(file, index, files, uploadProgress),
+        onRemove: () => handleRemove(file),
+        isDisabled: disabled
       }, `${file.name}-${index}`))]
     })]
   });
@@ -53986,7 +54169,7 @@ function History_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have trie
 
 const FIRST_LINE_TOP_PADDING = 2;
 const FIRST_LINE_HEIGHT = 20;
-const container =  true ? {
+const styles_container =  true ? {
   name: "1fttcpj",
   styles: "display:flex;flex-direction:column"
 } : 0;
@@ -54053,7 +54236,7 @@ const History_History = ({
   const circleTopOffset = Math.max(0, FIRST_LINE_TOP_PADDING + (FIRST_LINE_HEIGHT - circleSize) / 2);
   return (0,jsx_runtime_namespaceObject.jsx)("div", {
     "data-testid": "history",
-    css: container,
+    css: styles_container,
     style: sx,
     children: items.map((item, index) => {
       const isLast = index === items.length - 1;
@@ -54088,11 +54271,11 @@ const History_History = ({
 function Pagination_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
-/** Square 26x26 cell shared by page/selected/arrow buttons (design "Number" atom). */
+/** 26px-tall cell shared by page/selected/arrow buttons (design "Number" atom); width grows past 26 to fit multi-digit page numbers instead of clipping/overlapping. */
 const baseBtnStyles = {
-  width: 26,
+  minWidth: 26,
   height: 26,
-  padding: 0,
+  padding: '0 4px',
   borderRadius: 6,
   justifyContent: 'center',
   fontSize: 14,
@@ -54319,8 +54502,8 @@ const PageButton = ({
  * - Proper focus management
  */
 var PaginationButtons_ref =  true ? {
-  name: "1lcc3va",
-  styles: "display:flex;align-items:center;gap:0"
+  name: "1q7mb2q",
+  styles: "display:flex;align-items:center;gap:2px"
 } : 0;
 const PaginationButtons = ({
   range,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "3.16.3",
+  "version": "3.17.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -39,8 +39,8 @@
     "luxon": "3.5.0",
     "plotly.js": "3.0.0",
     "react-plotly.js": "2.6.0",
-    "@ssa-ui-kit/hooks": "^3.16.3",
-    "@ssa-ui-kit/utils": "^3.16.3"
+    "@ssa-ui-kit/hooks": "^3.17.0",
+    "@ssa-ui-kit/utils": "^3.17.0"
   },
   "devDependencies": {
     "@emotion/css": "11.13.5",

package/dist/components/FileUpload/FileUploadItem.d.ts

@@ -1,7 +0,0 @@
-interface FileUploadItemProps {
-    file: File;
-    onRemove: (file: File) => void;
-    disabled?: boolean;
-}
-declare const FileUploadItem: ({ file, onRemove, disabled }: FileUploadItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default FileUploadItem;