baseui 14.0.0 → 15.0.1

package/file-uploader/index.js

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   FileUploader: true,
-  StyledRoot: true,
-  StyledFileDragAndDrop: true,
-  StyledContentMessage: true,
-  StyledContentSeparator: true,
-  StyledErrorMessage: true,
-  StyledHiddenInput: true
+  StyledFileRow: true,
+  StyledFileRowColumn: true,
+  StyledFileRowContent: true,
+  StyledFileRowFileName: true,
+  StyledFileRowText: true,
+  StyledFileRowUploadMessage: true,
+  StyledFileRowUploadText: true,
+  StyledFileRows: true,
+  StyledHint: true,
+  StyledImagePreviewThumbnail: true,
+  StyledItemPreviewContainer: true,
+  StyledLabel: true,
+  StyledParentRoot: true
 };
 Object.defineProperty(exports, "FileUploader", {
   enumerable: true,
@@ -18,40 +25,82 @@ Object.defineProperty(exports, "FileUploader", {
     return _fileUploader.default;
   }
 });
-Object.defineProperty(exports, "StyledContentMessage", {
+Object.defineProperty(exports, "StyledFileRow", {
   enumerable: true,
   get: function () {
-    return _styledComponents.StyledContentMessage;
+    return _styledComponents.StyledFileRow;
   }
 });
-Object.defineProperty(exports, "StyledContentSeparator", {
+Object.defineProperty(exports, "StyledFileRowColumn", {
   enumerable: true,
   get: function () {
-    return _styledComponents.StyledContentSeparator;
+    return _styledComponents.StyledFileRowColumn;
   }
 });
-Object.defineProperty(exports, "StyledErrorMessage", {
+Object.defineProperty(exports, "StyledFileRowContent", {
   enumerable: true,
   get: function () {
-    return _styledComponents.StyledErrorMessage;
+    return _styledComponents.StyledFileRowContent;
   }
 });
-Object.defineProperty(exports, "StyledFileDragAndDrop", {
+Object.defineProperty(exports, "StyledFileRowFileName", {
   enumerable: true,
   get: function () {
-    return _styledComponents.StyledFileDragAndDrop;
+    return _styledComponents.StyledFileRowFileName;
   }
 });
-Object.defineProperty(exports, "StyledHiddenInput", {
+Object.defineProperty(exports, "StyledFileRowText", {
   enumerable: true,
   get: function () {
-    return _styledComponents.StyledHiddenInput;
+    return _styledComponents.StyledFileRowText;
   }
 });
-Object.defineProperty(exports, "StyledRoot", {
+Object.defineProperty(exports, "StyledFileRowUploadMessage", {
   enumerable: true,
   get: function () {
-    return _styledComponents.StyledRoot;
+    return _styledComponents.StyledFileRowUploadMessage;
+  }
+});
+Object.defineProperty(exports, "StyledFileRowUploadText", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledFileRowUploadText;
+  }
+});
+Object.defineProperty(exports, "StyledFileRows", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledFileRows;
+  }
+});
+Object.defineProperty(exports, "StyledHint", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledHint;
+  }
+});
+Object.defineProperty(exports, "StyledImagePreviewThumbnail", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledImagePreviewThumbnail;
+  }
+});
+Object.defineProperty(exports, "StyledItemPreviewContainer", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledItemPreviewContainer;
+  }
+});
+Object.defineProperty(exports, "StyledLabel", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledLabel;
+  }
+});
+Object.defineProperty(exports, "StyledParentRoot", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledParentRoot;
   }
 });
 var _fileUploader = _interopRequireDefault(require("./file-uploader"));

package/file-uploader/locale.d.ts

@@ -1,15 +1,15 @@
 export type FileUploaderLocale = {
-    dropFilesToUpload: string;
-    or: string;
-    browseFiles: string;
-    retry: string;
-    cancel: string;
+    added: string;
+    buttonText: string;
+    contentMessage: string;
+    error: string;
+    processed: string;
 };
 declare const locale: {
-    dropFilesToUpload: string;
-    or: string;
-    browseFiles: string;
-    retry: string;
-    cancel: string;
+    added: string;
+    buttonText: string;
+    contentMessage: string;
+    error: string;
+    processed: string;
 };
 export default locale;

package/file-uploader/locale.js

@@ -12,10 +12,10 @@ LICENSE file in the root directory of this source tree.
 */
 
 const locale = {
-  dropFilesToUpload: 'Drop files here to upload...',
-  or: '',
-  browseFiles: 'Browse files',
-  retry: 'Retry Upload',
-  cancel: 'Cancel'
+  added: 'Uploading',
+  buttonText: 'Browse files',
+  contentMessage: 'or drop to upload',
+  error: 'Upload failed: ',
+  processed: 'Upload successful'
 };
 var _default = exports.default = locale;

package/file-uploader/styled-components.d.ts

@@ -1,7 +1,14 @@
 import type { StyleProps } from './types';
-export declare const StyledFileDragAndDrop: import("styletron-react").StyletronComponent<"div", StyleProps>;
-export declare const StyledContentMessage: import("styletron-react").StyletronComponent<"div", StyleProps>;
-export declare const StyledContentSeparator: import("styletron-react").StyletronComponent<"div", StyleProps>;
-export declare const StyledErrorMessage: import("styletron-react").StyletronComponent<"div", StyleProps>;
-export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", StyleProps>;
-export declare const StyledHiddenInput: import("styletron-react").StyletronComponent<"input", {}>;
+export declare const StyledFileRow: import("styletron-react").StyletronComponent<"li", StyleProps>;
+export declare const StyledFileRowColumn: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledFileRowContent: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledFileRowFileName: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledFileRowText: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledFileRowUploadMessage: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledFileRowUploadText: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledFileRows: import("styletron-react").StyletronComponent<"ul", StyleProps>;
+export declare const StyledHint: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledImagePreviewThumbnail: import("styletron-react").StyletronComponent<"img", StyleProps>;
+export declare const StyledItemPreviewContainer: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledLabel: import("styletron-react").StyletronComponent<"label", StyleProps>;
+export declare const StyledParentRoot: import("styletron-react").StyletronComponent<"div", StyleProps>;

package/file-uploader/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledRoot = exports.StyledHiddenInput = exports.StyledFileDragAndDrop = exports.StyledErrorMessage = exports.StyledContentSeparator = exports.StyledContentMessage = void 0;
+exports.StyledParentRoot = exports.StyledLabel = exports.StyledItemPreviewContainer = exports.StyledImagePreviewThumbnail = exports.StyledHint = exports.StyledFileRows = exports.StyledFileRowUploadText = exports.StyledFileRowUploadMessage = exports.StyledFileRowText = exports.StyledFileRowFileName = exports.StyledFileRowContent = exports.StyledFileRowColumn = exports.StyledFileRow = void 0;
 var _styles = require("../styles");
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -12,72 +12,269 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-const StyledFileDragAndDrop = exports.StyledFileDragAndDrop = (0, _styles.styled)('div', props => {
-  const borderColor = props.$isDragActive ? props.$theme.colors.borderAccent : props.$theme.colors.fileUploaderBorderColorDefault;
-  const borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
+const StyledFileRow = exports.StyledFileRow = (0, _styles.styled)('li', props => {
+  const {
+    $theme: {
+      animation,
+      sizing
+    }
+  } = props;
+  return {
+    animationDuration: animation.timing400,
+    animationFillMode: 'forwards',
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)',
+        opacity: 0
+      },
+      '50%': {
+        opacity: 1
+      },
+      '100%': {
+        transform: 'translateY(0px)',
+        opacity: 1
+      }
+    },
+    paddingTop: sizing.scale500,
+    paddingRight: sizing.scale500,
+    paddingBottom: sizing.scale500,
+    paddingLeft: sizing.scale500,
+    gap: sizing.scale500,
+    height: 'fit-content',
+    display: 'flex',
+    alignItems: 'center'
+  };
+});
+StyledFileRow.displayName = "StyledFileRow";
+StyledFileRow.displayName = 'StyledFileRow';
+const StyledFileRowColumn = exports.StyledFileRowColumn = (0, _styles.styled)('div', () => {
   return {
     alignItems: 'center',
-    backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundAccentLight : props.$theme.colors.fileUploaderBackgroundColor,
-    borderLeftColor: borderColor,
-    borderRightColor: borderColor,
-    borderTopColor: borderColor,
-    borderBottomColor: borderColor,
-    borderLeftStyle: borderStyle,
-    borderRightStyle: borderStyle,
-    borderTopStyle: borderStyle,
-    borderBottomStyle: borderStyle,
-    borderLeftWidth: props.$theme.sizing.scale0,
-    borderRightWidth: props.$theme.sizing.scale0,
-    borderTopWidth: props.$theme.sizing.scale0,
-    borderBottomWidth: props.$theme.sizing.scale0,
-    borderTopLeftRadius: props.$theme.borders.radius400,
-    borderTopRightRadius: props.$theme.borders.radius400,
-    borderBottomLeftRadius: props.$theme.borders.radius400,
-    borderBottomRightRadius: props.$theme.borders.radius400,
-    boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'column',
-    outline: 'none',
-    paddingTop: props.$theme.sizing.scale900,
-    paddingRight: props.$theme.sizing.scale800,
-    paddingBottom: props.$afterFileDrop ? props.$theme.sizing.scale300 : props.$theme.sizing.scale900,
-    paddingLeft: props.$theme.sizing.scale800,
-    width: '100%'
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+    overflow: 'auto'
   };
 });
-StyledFileDragAndDrop.displayName = "StyledFileDragAndDrop";
-StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
-const StyledContentMessage = exports.StyledContentMessage = (0, _styles.styled)('div',
-// @ts-ignore
-({
-  $theme,
-  $afterFileDrop,
-  $isDragActive
-}) => ({
-  ...($afterFileDrop ? $theme.typography.LabelMedium : $theme.typography.LabelSmall),
-  color: $afterFileDrop ? $theme.colors.contentPrimary : $isDragActive ? $theme.colors.contentAccent : null,
-  marginTop: $afterFileDrop ? $theme.sizing.scale100 : null,
-  marginBottom: $afterFileDrop ? $theme.sizing.scale100 : null
-}));
-StyledContentMessage.displayName = "StyledContentMessage";
-StyledContentMessage.displayName = 'StyledContentMessage';
-const StyledContentSeparator = exports.StyledContentSeparator = StyledContentMessage;
-
-// @ts-ignore
-const StyledErrorMessage = exports.StyledErrorMessage = (0, _styles.styled)('div', props => ({
-  ...props.$theme.typography.LabelMedium,
-  color: props.$theme.colors.contentNegative,
-  marginTop: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
-  marginBottom: props.$afterFileDrop ? props.$theme.sizing.scale100 : null
-}));
-StyledErrorMessage.displayName = "StyledErrorMessage";
-StyledErrorMessage.displayName = 'StyledErrorMessage';
-const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', props => ({
-  ...props.$theme.typography.font300,
-  color: props.$theme.colors.fileUploaderMessageColor
-}));
-StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
-const StyledHiddenInput = exports.StyledHiddenInput = (0, _styles.styled)('input', {});
-StyledHiddenInput.displayName = "StyledHiddenInput";
-StyledHiddenInput.displayName = 'StyledHiddenInput';
+StyledFileRowColumn.displayName = "StyledFileRowColumn";
+StyledFileRowColumn.displayName = 'StyledFileRowColumn';
+const StyledFileRowContent = exports.StyledFileRowContent = (0, _styles.styled)('div', props => {
+  const {
+    $theme: {
+      sizing
+    }
+  } = props;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: sizing.scale500,
+    justifyContent: 'space-between',
+    width: '100%',
+    height: sizing.scale1000
+  };
+});
+StyledFileRowContent.displayName = "StyledFileRowContent";
+StyledFileRowContent.displayName = 'StyledFileRowContent';
+const StyledFileRowFileName = exports.StyledFileRowFileName = (0, _styles.styled)('div', props => {
+  const {
+    $theme: {
+      colors,
+      typography
+    }
+  } = props;
+  return {
+    ...typography.LabelSmall,
+    color: colors.contentPrimary,
+    width: '100%',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  };
+});
+StyledFileRowFileName.displayName = "StyledFileRowFileName";
+StyledFileRowColumn.displayName = 'StyledFileRowColumn';
+const StyledFileRowText = exports.StyledFileRowText = (0, _styles.styled)('div', props => {
+  const {
+    $theme: {
+      sizing
+    }
+  } = props;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    gap: sizing.scale0,
+    flexGrow: 1,
+    overflow: 'auto'
+  };
+});
+StyledFileRowText.displayName = "StyledFileRowText";
+StyledFileRowColumn.displayName = 'StyledFileRowColumn';
+const StyledFileRowUploadMessage = exports.StyledFileRowUploadMessage = (0, _styles.styled)('div', props => {
+  const {
+    $color,
+    $theme: {
+      sizing,
+      typography
+    }
+  } = props;
+  return {
+    ...typography.ParagraphXSmall,
+    color: $color,
+    alignItems: 'center',
+    gap: sizing.scale100,
+    display: 'flex',
+    flexDirection: 'row'
+  };
+});
+StyledFileRowUploadMessage.displayName = "StyledFileRowUploadMessage";
+StyledFileRowUploadMessage.displayName = 'StyledFileRowUploadMessage';
+const StyledFileRowUploadText = exports.StyledFileRowUploadText = (0, _styles.styled)('div', props => {
+  const {
+    $color
+  } = props;
+  return {
+    color: $color ? $color : 'inherit',
+    width: '100%',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  };
+});
+StyledFileRowUploadText.displayName = "StyledFileRowUploadText";
+StyledFileRowUploadText.displayName = 'StyledFileRowUploadText';
+const StyledFileRows = exports.StyledFileRows = (0, _styles.styled)('ul', props => {
+  const {
+    $theme: {
+      animation,
+      borders,
+      sizing
+    }
+  } = props;
+  return {
+    animationDuration: animation.timing500,
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeInOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)'
+      },
+      '100%': {
+        transform: 'translateX(-0px)'
+      }
+    },
+    ...borders.border200,
+    borderRadius: borders.radius400,
+    borderWidth: sizing.scale0,
+    listStyle: 'none',
+    padding: 0,
+    marginTop: 0,
+    marginBottom: sizing.scale300
+  };
+});
+StyledFileRows.displayName = "StyledFileRows";
+StyledFileRows.displayName = 'StyledFileRows';
+const StyledHint = exports.StyledHint = (0, _styles.styled)('div', props => {
+  const {
+    $fileCount,
+    $theme: {
+      animation,
+      colors,
+      typography
+    }
+  } = props;
+  let fontColor = colors.contentTertiary;
+  const animations = $fileCount > 0 ? {
+    animationDuration: animation.timing500,
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeInOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)'
+      },
+      '100%': {
+        transform: 'translateX(-0px)'
+      }
+    }
+  } : {};
+  return {
+    ...animations,
+    ...typography.ParagraphSmall,
+    color: fontColor
+  };
+});
+StyledHint.displayName = "StyledHint";
+StyledHint.displayName = 'StyledHint';
+const StyledImagePreviewThumbnail = exports.StyledImagePreviewThumbnail = (0, _styles.styled)('img', props => {
+  const {
+    $alt,
+    $src,
+    $theme: {
+      borders,
+      colors
+    }
+  } = props;
+  return {
+    alt: $alt,
+    borderRadius: borders.radius300,
+    outline: `1px ${colors.borderTransparent}`,
+    className: 'thumb',
+    src: $src,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover'
+  };
+});
+StyledImagePreviewThumbnail.displayName = "StyledImagePreviewThumbnail";
+StyledImagePreviewThumbnail.displayName = 'StyledImagePreviewThumbnail';
+const StyledItemPreviewContainer = exports.StyledItemPreviewContainer = (0, _styles.styled)('div', props => {
+  const {
+    $theme: {
+      sizing
+    }
+  } = props;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: sizing.scale1200,
+    height: sizing.scale1200
+  };
+});
+StyledItemPreviewContainer.displayName = "StyledItemPreviewContainer";
+StyledItemPreviewContainer.displayName = 'StyledItemPreviewContainer';
+const StyledLabel = exports.StyledLabel = (0, _styles.styled)('label', props => {
+  const {
+    $disabled,
+    $theme: {
+      colors,
+      sizing,
+      typography
+    }
+  } = props;
+  return {
+    ...typography.LabelSmall,
+    width: '100%',
+    color: $disabled ? colors.contentStateDisabled : colors.contentPrimary,
+    display: 'block',
+    marginBottom: sizing.scale300
+  };
+});
+StyledLabel.displayName = "StyledLabel";
+StyledLabel.displayName = 'StyledLabel';
+const StyledParentRoot = exports.StyledParentRoot = (0, _styles.styled)('div', () => {
+  return {
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+StyledParentRoot.displayName = "StyledParentRoot";
+StyledParentRoot.displayName = 'StyledParentRoot';

package/file-uploader/types.d.ts

@@ -1,37 +1,54 @@
-import type { DropzoneProps } from 'react-dropzone';
-import type { DragEvent } from 'react';
 import type { Override } from '../helpers/overrides';
-export type StyleProps = {
-    $afterFileDrop: boolean;
-    $isDisabled: boolean;
-    $isDragActive: boolean;
-    $isDragAccept: boolean;
-    $isDragReject: boolean;
-    $isFocused: boolean;
+import type { FILE_STATUS } from './constants';
+import type { FileUploaderBasicOverrides, FileUploaderBasicProps, StyleProps as FileUploaderBasicStyleProps } from '../file-uploader-basic/types';
+export type StyleProps = FileUploaderBasicStyleProps & {
+    $alt: string;
+    $color: string;
+    $fileCount: number;
+    $src: string;
 };
 export type FileUploaderOverrides = {
-    Root?: Override;
-    FileDragAndDrop?: Override;
-    ContentMessage?: Override;
-    ContentSeparator?: Override;
-    HiddenInput?: Override;
-    ProgressMessage?: Override;
-    ErrorMessage?: Override;
-    ButtonComponent?: Override;
-    CancelButtonComponent?: Override;
-    RetryButtonComponent?: Override;
-    Spinner?: Override;
-    ProgressBar?: Override;
+    CircleCheckFilledIcon?: Override;
+    CircleExclamationPointFilledIcon?: Override;
+    DeleteButtonComponent?: Override;
+    FileRow?: Override;
+    FileRowColumn?: Override;
+    FileRowContent?: Override;
+    FileRowFileName?: Override;
+    FileRowText?: Override;
+    FileRowUploadMessage?: Override;
+    FileRowUploadText?: Override;
+    FileRows?: Override;
+    Hint?: Override;
+    ImagePreviewThumbnail?: Override;
+    ItemPreviewContainer?: Override;
+    Label?: Override;
+    PaperclipFilledIcon?: Override;
+    ParentRoot?: Override;
+    TrashCanFilledIcon?: Override;
 };
-export type FileUploaderProps = Omit<DropzoneProps, 'accept'> & {
-    accept?: string[] | string;
-    disableClick?: boolean;
-    'aria-describedby'?: string;
-    errorMessage?: string;
-    onCancel?: () => unknown;
-    onRetry?: () => unknown;
-    overrides?: FileUploaderOverrides;
-    progressAmount?: number;
-    progressMessage?: string;
+export type FileRow = {
+    errorMessage: string | null;
+    file: File;
+    id: string;
+    fileInfo?: any;
+    imagePreviewThumbnail?: any;
+    progressAmount: number;
+    /** Defines the status of a file */
+    status: keyof typeof FILE_STATUS;
+};
+export type FileUploaderProps = Omit<FileUploaderBasicProps, 'onDrop' | 'onDropAccepted' | 'onDropRejected' | 'overrides'> & {
+    fileRows: FileRow[];
+    hint?: string;
+    itemPreview?: boolean;
+    label?: string;
+    maxFiles?: number;
+    overrides?: FileUploaderBasicOverrides & FileUploaderOverrides;
+    /** Function to run on each file, returns "errorMessage: null" on success and "errorMessage: string" for failures */
+    processFileOnDrop?: (fileToProcess: File, fileToProcessId: string, fileRows: FileRow[]) => Promise<{
+        errorMessage: string | null;
+        fileInfo?: any;
+    }>;
+    progressAmountStartValue?: number;
+    setFileRows: (fileRows: FileRow[]) => void;
 };
-export type DropFilesEventHandler = (accepted: File[], rejected: File[], event: DragEvent<HTMLElement>) => unknown;

package/file-uploader/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '../styles';
+import { type ARIA_LIVE_ELEMENT_ID } from './constants';
+export declare const destructureStyleOverride: (styleOverride: any, theme: Theme) => any;
+export declare const formatBytes: (bytes: number) => string;
+export declare const handleAriaLiveUpdates: (elementId: ARIA_LIVE_ELEMENT_ID, updateMessage: string) => void;

package/file-uploader/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleAriaLiveUpdates = exports.formatBytes = exports.destructureStyleOverride = void 0;
+var _constants = require("./constants");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const destructureStyleOverride = (styleOverride, theme) => {
+  if (typeof styleOverride === 'function') {
+    return styleOverride({
+      $theme: theme
+    });
+  } else {
+    return styleOverride;
+  }
+};
+exports.destructureStyleOverride = destructureStyleOverride;
+const formatBytes = bytes => {
+  if (bytes === 0) return '0 bytes';
+  const k = 1000;
+  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+exports.formatBytes = formatBytes;
+const handleAriaLiveUpdates = (elementId, updateMessage) => {
+  const liveRegion = document.getElementById(elementId);
+  if (liveRegion) {
+    liveRegion.textContent = updateMessage;
+  }
+  setTimeout(() => {
+    const liveRegion = document.getElementById(elementId);
+    if (liveRegion) {
+      liveRegion.textContent = null;
+    }
+  }, _constants.ARIA_LIVE_TIMEOUT_MS);
+};
+exports.handleAriaLiveUpdates = handleAriaLiveUpdates;