@react-magma/dropzone 6.0.1-next.0 → 7.0.0

package/dist/fileuploader.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileuploader.umd.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  InsertDriveFileIcon,\n  ImageIcon,\n  AudiotrackIcon,\n  VideocamIcon,\n  FileExcelIcon,\n  FilePdfIcon,\n  FilePowerpointIcon,\n  FileWordIcon,\n  FileZipIcon,\n  IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n  file: FilePreview;\n  isInverse?: boolean;\n}\n\nconst icons = {\n  default: {\n    Icon: InsertDriveFileIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  word: {\n    Icon: FileWordIcon,\n    style: {\n      color: magma.colors.info500,\n    },\n  },\n  excel: {\n    Icon: FileExcelIcon,\n    style: {\n      color: magma.colors.success500,\n    },\n  },\n  powerpoint: {\n    Icon: FilePowerpointIcon,\n    style: {\n      color: magma.colors.warning500,\n    },\n  },\n  pdf: {\n    Icon: FilePdfIcon,\n    style: {\n      color: magma.colors.danger500,\n    },\n  },\n  image: {\n    Icon: ImageIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  video: {\n    Icon: VideocamIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  audio: {\n    Icon: AudiotrackIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  archive: {\n    Icon: FileZipIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n};\n\nconst iconMapping: {\n  [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n  default: icons.default,\n  xlsx: icons.excel,\n  xlsm: icons.excel,\n  xlsb: icons.excel,\n  xltx: icons.excel,\n  xls: icons.excel,\n  xlt: icons.excel,\n  doc: icons.word,\n  docx: icons.word,\n  docm: icons.word,\n  dotx: icons.word,\n  dotm: icons.word,\n  docb: icons.word,\n  pptx: icons.powerpoint,\n  pptm: icons.powerpoint,\n  ppt: icons.powerpoint,\n  pdf: icons.pdf,\n  png: icons.image,\n  svg: icons.image,\n  image: icons.image,\n  audio: icons.audio,\n  video: icons.video,\n  zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n  const { path = '', type = '' } = file;\n  const category = type.split('/')[0];\n  const extension = path.split('.').pop() || 'default';\n  const { Icon, style } =\n    iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n  return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n  bytes: number | undefined,\n  decimalPoint: number = 2,\n  bytesLabel: string = 'Bytes'\n) => {\n  if (bytes === undefined) return;\n  if (bytes == 0) return `0 ${bytesLabel}`;\n  const k = 1024;\n  const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return (\n    parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n  );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n  CheckCircleIcon,\n  CloseIcon,\n  DeleteIcon,\n  ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n  ButtonColor,\n  ButtonVariant,\n  Card,\n  Flex,\n  FlexAlignItems,\n  FlexBehavior,\n  FlexProps,\n  I18nContext,\n  I18nInterface,\n  IconButton,\n  InverseContext,\n  ThemeContext,\n  ThemeInterface,\n  Transition,\n  Spinner,\n  styled,\n  useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n  accept?: string | string[];\n  file: FilePreview;\n  isInverse?: boolean;\n  maxSize?: number;\n  minSize?: number;\n  onDeleteFile?: (file: FilePreview) => void;\n  onRemoveFile?: (file: FilePreview) => void;\n  /**\n   * @internal\n   */\n  testId?: string;\n  thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n  background-image: ${({ file }) =>\n    `url('${'preview' in file && file.preview}')`};\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: inline-block;\n  vertical-align: middle;\n  height: 40px;\n  width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n  display: grid;\n  grid-template-areas: 'inner-div';\n  height: auto;\n  place-items: center;\n  width: 46px;\n  & > div {\n    display: inline-block;\n    right: 0;\n    grid-area: inner-div;\n  }\n`;\n\nconst IconStyles = {\n  marginRight: '12px',\n  display: 'flex',\n};\n\nconst Errors = styled.div`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n  padding: 16px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n  height: 56px;\n  padding: 0 8px 0 16px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n  overflow: hidden;\n  white-space: nowrap;\n  align-items: center;\n  text-overflow: ellipsis;\n  display: block;\n  margin-right: 24px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n  background-color: none;\n  border-color: ${({ file, theme, isInverse }) =>\n    file.errors\n      ? isInverse\n        ? theme.colors.danger200\n        : theme.colors.danger\n      : theme.colors.neutral300};\n  border-width: 1px;\n  margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n  display: block;\n\n  > div {\n    display: flex;\n    align-self: center;\n    margin-right: 12px;\n  }\n`;\n\nconst ErrorMessage = styled.span`\n  display: block;\n`;\n\nconst formatError = (\n  error: { header?: string; message: string; code: string },\n  constraints: {\n    maxSize?: number;\n    minSize?: number;\n    accept?: string | string[];\n  },\n  byteLabel: string\n) => {\n  const accept =\n    Array.isArray(constraints.accept) && constraints.accept.length === 1\n      ? constraints.accept[0]\n      : constraints.accept;\n  const messageSuffix = Array.isArray(accept)\n    ? `one of ${accept.join(', ')}`\n    : accept;\n  switch (error.code) {\n    case 'file-too-large':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(\n          constraints.maxSize,\n          2,\n          byteLabel\n        )}.`,\n      };\n    case 'file-too-small':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(\n          constraints.minSize,\n          2,\n          byteLabel\n        )}.`,\n      };\n    case 'file-invalid-type':\n      return { ...error, message: `${error.message}: ${messageSuffix}` };\n    default:\n      return error;\n  }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n  // eslint-disable-next-line complexity\n  (props, ref) => {\n    const {\n      accept,\n      file,\n      isInverse: isInverseProp,\n      maxSize,\n      minSize,\n      onDeleteFile,\n      onRemoveFile,\n      testId,\n      thumbnails,\n      ...rest\n    } = props;\n\n    const theme: ThemeInterface = useContext(ThemeContext);\n    const i18n: I18nInterface = React.useContext(I18nContext);\n    const isInverse = useIsInverse(isInverseProp);\n    const [actions, setActions] = useState(<CloseIcon />);\n\n    const handleRemoveFile = () => {\n      onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n    };\n\n    const handleDeleteFile = () => {\n      onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n    };\n\n    const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n      const [done, setDone] = useState<boolean>(false);\n\n      useEffect(() => {\n        let mounted = true;\n        setTimeout(() => {\n          if (mounted) {\n            setDone(true);\n          }\n        }, 1000);\n        return () => {\n          mounted = false;\n        };\n      }, [status]);\n\n      if (status === 'error' || status === 'ready') {\n        return (\n          <StatusIcons>\n            <IconButton\n              onClick={handleRemoveFile}\n              variant={ButtonVariant.link}\n              color={ButtonColor.secondary}\n              aria-label={i18n.dropzone.removeFile}\n              icon={<CloseIcon />}\n            />\n          </StatusIcons>\n        );\n      }\n\n      if (status === 'pending') {\n        return (\n          <StatusIcons>\n            <Spinner\n              color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n            />\n          </StatusIcons>\n        );\n      }\n\n      return (\n        <StatusIcons>\n          <Transition isOpen={!done} unmountOnExit fade>\n            <CheckCircleIcon\n              color={isInverse ? theme.colors.success200 : theme.colors.success}\n              style={{ marginTop: '4px' }}\n            />\n          </Transition>\n          <Transition isOpen={done} unmountOnExit fade>\n            <IconButton\n              onClick={handleDeleteFile}\n              variant={ButtonVariant.link}\n              color={ButtonColor.secondary}\n              aria-label={i18n.dropzone.deleteFile}\n              icon={<DeleteIcon />}\n            />\n          </Transition>\n        </StatusIcons>\n      );\n    };\n\n    useEffect(() => {\n      setActions(<FinishedActions status={file?.processor?.status} />);\n    }, [file?.processor?.status]);\n\n    return (\n      <InverseContext.Provider value={{ isInverse }}>\n        <StyledCard\n          isInverse={isInverse}\n          theme={theme}\n          file={file}\n          data-testid={props.testId}\n          ref={ref}\n          role={file.errors ? 'alert' : ''}\n        >\n          <StyledFlex\n            theme={theme}\n            behavior={FlexBehavior.container}\n            alignItems={FlexAlignItems.center}\n            {...rest}\n          >\n            <Flex\n              behavior={FlexBehavior.item}\n              alignItems={FlexAlignItems.center}\n              style={IconStyles}\n            >\n              {file.errors ? (\n                <ErrorIcon\n                  color={\n                    isInverse ? theme.colors.danger200 : theme.colors.danger\n                  }\n                  size={24}\n                />\n              ) : file.preview &&\n                thumbnails &&\n                file.type &&\n                file.type.startsWith('image') ? (\n                <Thumb role=\"img\" file={file} />\n              ) : (\n                <FileIcon isInverse={isInverse} file={file} />\n              )}\n            </Flex>\n            <FileName xs behavior={FlexBehavior.item} theme={theme}>\n              {file.name}\n            </FileName>\n            {file.processor && file.processor.status === 'pending' && (\n              <Flex\n                role=\"progressbar\"\n                style={{ marginLeft: 'auto' }}\n                behavior={FlexBehavior.item}\n              >\n                {file.processor.percent}\n              </Flex>\n            )}\n            <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n          </StyledFlex>\n          {file.errors && (\n            <Errors theme={theme}>\n              {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n                const { header = '', message } = formatError(\n                  { code, ...rest, ...i18n.dropzone.errors[code] },\n                  { accept, minSize, maxSize },\n                  i18n.dropzone.bytes\n                );\n                return (\n                  <React.Fragment key={code}>\n                    <ErrorHeader\n                      style={{\n                        color: isInverse\n                          ? theme.colors.danger200\n                          : theme.colors.danger,\n                      }}\n                    >\n                      {header}\n                    </ErrorHeader>\n                    <ErrorMessage>{message}</ErrorMessage>\n                  </React.Fragment>\n                );\n              })}\n            </Errors>\n          )}\n        </StyledCard>\n      </InverseContext.Provider>\n    );\n  }\n);\n","/* eslint-disable no-empty-pattern */\n/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  DropzoneRootProps,\n  FileRejection,\n} from 'react-dropzone';\nimport {\n  Button,\n  ButtonColor,\n  ButtonVariant,\n  Flex,\n  FlexBehavior,\n  FlexProps,\n  FormFieldContainer,\n  FormFieldContainerBaseProps,\n  I18nContext,\n  I18nInterface,\n  InverseContext,\n  ThemeContext,\n  ThemeInterface,\n  styled,\n  useGenerateId,\n  useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n  file: FilePreview;\n  onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n  onFinish?: ({}: { file: FilePreview }) => void;\n  onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n  | 'error'\n  | 'dragAccept'\n  | 'dragReject'\n  | 'dragActive'\n  | 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n  extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n  /**\n   * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n   */\n  accept?: string | string[];\n  /**\n   * Enable/Disable the input\n   */\n  disabled?: boolean;\n  /**\n   * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n   */\n  dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n  /**\n   * Content of the helper message.\n   */\n  helperMessage?: string;\n  /**\n   * @internal\n   */\n  id?: string;\n  /**\n   * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n   * @default 0\n   */\n  maxFiles?: number;\n  /**\n   * Minimum accepted number of files.\n   */\n  minFiles?: number;\n  /**\n   * Maximum file size (in bytes)\n   * @default Infinity\n   */\n  maxSize?: number;\n  /**\n   * Minimum file size (in bytes)\n   * @default 0\n   */\n  minSize?: number;\n  /**\n   * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n   * @default true\n   */\n  multiple?: boolean;\n  /**\n   * If true, disables drag 'n' drop\n   * @default false\n   */\n  noDrag?: boolean;\n  /**\n   * Callback for when a file is deleted\n   */\n  onDeleteFile?: (file: FilePreview) => void;\n  /**\n   * Callback for when a file is deleted\n   */\n  onRemoveFile?: (file: FilePreview) => void;\n  /**\n   * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n   */\n  onSendFile?: (props: OnSendFileProps) => void;\n  /**\n   * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n   * @default false\n   */\n  sendFiles?: boolean;\n  /**\n   * @internal\n   */\n  testId?: string;\n  /**\n   * Show thumbnails for images in lieu of the file icon.\n   * @default true\n   */\n  thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n  DropzoneRootProps &\n    FlexProps & {\n      dragState?: DragState;\n      noDrag?: boolean;\n      isInverse?: boolean;\n    }\n>`\n  flex-direction: column;\n  align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n  border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n  border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n    noDrag\n      ? `0px`\n      : dragState === 'dragReject' || dragState === 'error'\n      ? isInverse\n        ? `1px dashed ${theme.colors.danger200}`\n        : `1px dashed ${theme.colors.danger}`\n      : dragState === 'dragActive'\n      ? `1px dashed ${theme.colors.primary}`\n      : dragState === 'dragAccept'\n      ? `1px dashed ${theme.colors.success}`\n      : `1px dashed ${theme.colors.neutral400}`};\n\n  border-style: ${({ dragState = 'default' }) =>\n    dragState === 'error' ? 'solid' : 'dashed'};\n  background-color: ${({ theme, noDrag, isInverse }) =>\n    noDrag\n      ? 'transparent'\n      : isInverse\n      ? transparentize(0.75, theme.colors.neutral900)\n      : theme.colors.neutral200};\n  outline: none;\n  transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n  color: ${({ theme, isInverse }) =>\n    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n  display: block;\n  font-size: 14px;\n  margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n  color: ${({ theme, isInverse }) =>\n    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n  margin: 0 0 24px 0;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n  font-weight: 500;\n  padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n  (props, ref) => {\n    const {\n      accept,\n      containerStyle,\n      disabled,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      dropzoneOptions = {\n        multiple: true,\n      },\n      helperMessage,\n      id: defaultId,\n      inputSize,\n      isInverse: isInverseProp,\n      isLabelVisuallyHidden,\n      labelStyle,\n      labelText,\n      maxFiles,\n      minFiles,\n      maxSize,\n      minSize,\n      multiple = true,\n      noDrag = false,\n      onSendFile,\n      onDeleteFile,\n      onRemoveFile,\n      sendFiles = false,\n      testId,\n      thumbnails = true,\n      ...rest\n    } = props;\n\n    const [files, setFiles] = React.useState<FilePreview[]>([]);\n    const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n\n    const isInverse = useIsInverse(isInverseProp);\n    const theme: ThemeInterface = React.useContext(ThemeContext);\n    const i18n: I18nInterface = React.useContext(I18nContext);\n    const id = useGenerateId(defaultId);\n\n    const onDrop = React.useCallback(\n      (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n        setFiles((files: FilePreview[]) => [\n          ...files,\n          ...acceptedFiles.map((file: FilePreview) =>\n            Object.assign(file, {\n              preview: URL.createObjectURL(file),\n            })\n          ),\n          ...rejectedFiles.map(\n            ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n              Object.assign(file, {\n                errors,\n              })\n          ),\n        ]);\n      },\n      []\n    );\n\n    const {\n      getInputProps,\n      getRootProps,\n      isDragAccept,\n      isDragActive,\n      isDragReject,\n      open,\n    } = useDropzone({\n      noClick: true,\n      disabled,\n      multiple,\n      maxSize,\n      minSize,\n      accept,\n      onDrop,\n      noDrag,\n    });\n\n    const inputProps = getInputProps({ id });\n\n    const dragState: DragState = errorMessage\n      ? 'error'\n      : isDragAccept\n      ? 'dragAccept'\n      : isDragReject\n      ? 'dragReject'\n      : isDragActive\n      ? 'dragActive'\n      : 'default';\n\n    const handleRemoveFile = (removedFile: FilePreview) => {\n      setFiles(files => files.filter(file => file !== removedFile));\n      onRemoveFile &&\n        typeof onRemoveFile === 'function' &&\n        onRemoveFile(removedFile);\n    };\n\n    const handleDeleteFile = (removedFile: FilePreview) => {\n      setFiles(files => files.filter(file => file !== removedFile));\n      onDeleteFile &&\n        typeof onDeleteFile === 'function' &&\n        onDeleteFile(removedFile);\n    };\n\n    const setProgress = (props: { percent: number; file: FilePreview }) => {\n      setFiles(files =>\n        files.map(file =>\n          file === props.file\n            ? Object.assign(file, {\n                processor: {\n                  ...file.processor,\n                  percent: `${props.percent}%`,\n                  status: 'pending',\n                },\n              })\n            : file\n        )\n      );\n    };\n\n    const setFinished = (props: { file: FilePreview }) => {\n      setFiles(files =>\n        files.map(file =>\n          file === props.file\n            ? Object.assign(file, {\n                processor: {\n                  ...file.processor,\n                  percent: '',\n                  status: 'finished',\n                },\n              })\n            : file\n        )\n      );\n    };\n\n    const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n      setFiles(files =>\n        files.map(file =>\n          file === props.file\n            ? Object.assign(file, {\n                errors: props.errors,\n                processor: { ...file.processor, status: 'error' },\n              })\n            : file\n        )\n      );\n    };\n\n    const formatError = (\n      code: string | null,\n      constraints: { maxFiles?: number; minFiles?: number }\n    ) => {\n      if (code === null) return null;\n      const error = i18n.dropzone.errors[code];\n      switch (code) {\n        case 'too-many-files':\n          return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n        case 'too-few-files':\n          return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n        default:\n          return error.message;\n      }\n    };\n\n    React.useEffect(\n      () => () => {\n        files.forEach(\n          file => file.preview && URL.revokeObjectURL(file.preview)\n        );\n      },\n      [files]\n    );\n\n    React.useEffect(() => {\n      const minFileError = minFiles && files.length < minFiles;\n      const maxFileError = maxFiles && files.length > maxFiles;\n\n      setErrorMessage(\n        formatError(\n          maxFileError\n            ? 'too-many-files'\n            : minFileError\n            ? 'too-few-files'\n            : null,\n          { minFiles, maxFiles }\n        )\n      );\n\n      if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n        setFiles((files: FilePreview[]) => {\n          return files.map((file: FilePreview) => {\n            !file.errors &&\n              !file.processor &&\n              onSendFile &&\n              onSendFile({\n                file,\n                onError: setError,\n                onFinish: setFinished,\n                onProgress: setProgress,\n              });\n            return file;\n          });\n        });\n      }\n    }, [sendFiles, files.length, onSendFile]);\n\n    return (\n      <InverseContext.Provider value={{ isInverse }}>\n        <FormFieldContainer\n          actionable={false}\n          containerStyle={containerStyle}\n          errorMessage={errorMessage}\n          fieldId={id}\n          inputSize={inputSize}\n          isInverse={isInverse}\n          isLabelVisuallyHidden={isLabelVisuallyHidden}\n          labelStyle={labelStyle}\n          labelText={labelText}\n          messageStyle={{ minHeight: 0 }}\n          data-testid={testId}\n        >\n          <HelperMessage theme={theme} isInverse={isInverse}>\n            {helperMessage}\n          </HelperMessage>\n          <Container\n            behavior={FlexBehavior.container}\n            dragState={dragState}\n            isInverse={isInverse}\n            noDrag={noDrag}\n            theme={theme}\n            {...getRootProps()}\n            {...rest}\n            testId={testId}\n            tabIndex={-1}\n          >\n            <input\n              ref={ref}\n              type={inputProps.type}\n              accept={inputProps.accept}\n              autoComplete={inputProps.autoComplete}\n              id={inputProps.id}\n              multiple={inputProps.multiple}\n              onChange={inputProps.onChange}\n              onClick={inputProps.onClick}\n              style={inputProps.style}\n              tabIndex={inputProps.tabIndex}\n            />\n            {noDrag ? (\n              <Flex xs behavior={FlexBehavior.item}>\n                <Button\n                  color={ButtonColor.primary}\n                  disabled={disabled}\n                  isInverse={isInverse}\n                  onClick={open}\n                  style={{ margin: 0 }}\n                >\n                  {i18n.dropzone.browseFiles}\n                </Button>\n              </Flex>\n            ) : (\n              <Flex behavior={FlexBehavior.item}>\n                <CloudUploadIcon\n                  aria-hidden=\"true\"\n                  color={\n                    isInverse\n                      ? theme.colors.neutral100\n                      : theme.colors.neutral500\n                  }\n                  size={48}\n                />\n                <Wrapper isInverse={isInverse} theme={theme}>\n                  {i18n.dropzone.dragMessage}\n                </Wrapper>\n                <Button\n                  color={ButtonColor.primary}\n                  disabled={disabled}\n                  isInverse={isInverse}\n                  onClick={open}\n                  style={{ margin: 0 }}\n                  variant={ButtonVariant.solid}\n                >\n                  {i18n.dropzone.browseFiles}\n                </Button>\n              </Flex>\n            )}\n          </Container>\n        </FormFieldContainer>\n        {files.map((file: FilePreview) => (\n          <Preview\n            accept={accept}\n            file={file}\n            isInverse={isInverse}\n            key={file.name}\n            maxSize={maxSize}\n            minSize={minSize}\n            onDeleteFile={handleDeleteFile}\n            onRemoveFile={handleRemoveFile}\n            thumbnails={thumbnails}\n          />\n        ))}\n      </InverseContext.Provider>\n    );\n  }\n);\n"],"names":["default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","icons","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","file","isInverse","path","type","split","pop","iconMapping","extension","category","_jsx","size","iconSizes","medium","bytes","decimalPoint","bytesLabel","undefined","Math","floor","log","pow","i","toFixed","sizes","styled","div","preview","marginRight","display","theme","neutral300","typeScale","size02","fontSize","lineHeight","Flex","Card","errors","danger200","danger","span","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","status","done","setDone","useEffect","setTimeout","mounted","StatusIcons","IconButton","onClick","handleRemoveFile","variant","ButtonVariant","link","ButtonColor","secondary","i18n","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","handleDeleteFile","deleteFile","DeleteIcon","FinishedActions","processor","_file$processor","_file$processor2","InverseContext","Provider","value","StyledCard","testId","role","StyledFlex","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","IconStyles","ErrorIcon","startsWith","Thumb","FileIcon","FileName","xs","name","marginLeft","percent","Errors","slice","map","code","error","constraints","byteLabel","Array","isArray","length","join","message","formatFileSize","messageSuffix","formatError","header","Fragment","ErrorHeader","ErrorMessage","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","neutral700","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","useCallback","acceptedFiles","rejectedFiles","assign","URL","createObjectURL","useDropzone","noClick","onDrop","getRootProps","isDragAccept","isDragActive","isDragReject","open","getInputProps","removedFile","filter","Object","forEach","revokeObjectURL","maxFileError","minFileError","onError","setError","onFinish","setFinished","onProgress","setProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","HelperMessage","Container","tabIndex","inputProps","autoComplete","onChange","Button","margin","browseFiles","CloudUploadIcon","Wrapper","dragMessage","solid","Preview"],"mappings":"goBAsBc,CACZA,QAAS,CACPC,KAAMC,sBACNC,MAAO,CACLC,MAAOC,QAAMC,OAAOC,aAGxBC,KAAM,CACJP,KAAMQ,eACNN,MAAO,CACLC,MAAOC,QAAMC,OAAOI,UAGxBC,MAAO,CACLV,KAAMW,gBACNT,MAAO,CACLC,MAAOC,QAAMC,OAAOO,aAGxBC,WAAY,CACVb,KAAMc,qBACNZ,MAAO,CACLC,MAAOC,QAAMC,OAAOU,aAGxBC,IAAK,CACHhB,KAAMiB,cACNf,MAAO,CACLC,MAAOC,QAAMC,OAAOa,YAGxBC,MAAO,CACLnB,KAAMoB,YACNlB,MAAO,CACLC,MAAOC,QAAMC,OAAOC,aAGxBe,MAAO,CACLrB,KAAMsB,eACNpB,MAAO,CACLC,MAAOC,QAAMC,OAAOC,aAGxBiB,MAAO,CACLvB,KAAMwB,iBACNtB,MAAO,CACLC,MAAOC,QAAMC,OAAOC,aAGxBmB,QAAS,CACPzB,KAAM0B,cACNxB,MAAO,CACLC,MAAOC,QAAMC,OAAOC,gBAOtB,CACFP,QAAS4B,UACTC,KAAMD,EAAMjB,MACZmB,KAAMF,EAAMjB,MACZoB,KAAMH,EAAMjB,MACZqB,KAAMJ,EAAMjB,MACZsB,IAAKL,EAAMjB,MACXuB,IAAKN,EAAMjB,MACXwB,IAAKP,EAAMpB,KACX4B,KAAMR,EAAMpB,KACZ6B,KAAMT,EAAMpB,KACZ8B,KAAMV,EAAMpB,KACZ+B,KAAMX,EAAMpB,KACZgC,KAAMZ,EAAMpB,KACZiC,KAAMb,EAAMd,WACZ4B,KAAMd,EAAMd,WACZ6B,IAAKf,EAAMd,WACXG,IAAKW,EAAMX,IACX2B,IAAKhB,EAAMR,MACXyB,IAAKjB,EAAMR,MACXA,MAAOQ,EAAMR,MACbI,MAAOI,EAAMJ,MACbF,MAAOM,EAAMN,MACbwB,IAAKlB,EAAMF,WAGW,oBAAGqB,KAAMC,IAAAA,YACED,EAAzBE,KAAAA,aAAO,OAAkBF,EAAdG,mBAAO,MACJC,MAAM,KAAK,KACfF,EAAKE,MAAM,KAAKC,OAAS,YAEzCC,EAAYC,IAAcD,EAAYE,IAAaF,UAErD,OAAOG,QAHCvD,MAGKwD,KAAMpD,QAAMqD,UAAUC,OAAQxD,MAAO6C,EAAY,KAHhD7C,OAIhB,qaCnH8B,SAC5ByD,EACAC,EACAC,GAEA,YAHAD,IAAAA,EAAuB,YACvBC,IAAAA,EAAqB,cAEPC,IAAVH,EAAJ,CACA,GAAa,GAATA,EAAY,WAAYE,EAC5B,MACc,CAACA,EAAY,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,QAC3DE,KAAKC,MAAMD,KAAKE,IAAIN,GAASI,KAAKE,IAFlC,OAGV,mBACcN,EAAQI,KAAKG,IAJjB,KAIwBC,IAAIC,QAAQR,IAAiB,IAAMS,EAAMF,GAE7E,uHCmCcG,SAAOC,iMACC,oBAAGzB,oBACb,eAAqBA,EAAK0B,kBASlBF,SAAOC,gOAaR,CACjBE,YAAa,OACbC,QAAS,UAGIJ,SAAOC,6GACI,qBAAGI,MAAkBtE,OAAOuE,UAAU,EAEjD,qBAAGD,MAAkBE,UAAUC,OAAOC,QAAQ,EAC5C,qBAAGJ,MAAkBE,UAAUC,OAAOE,UAAU,KAG9CV,SAAOW,OAAPX,qGAGJ,qBAAGK,MAAkBE,UAAUC,OAAOC,QAAQ,EAC5C,qBAAGJ,MAAkBE,UAAUC,OAAOE,UAAU,KAGhDV,SAAOW,OAAPX,qMAOF,qBAAGK,MAAkBE,UAAUC,OAAOC,QAAQ,EAC5C,qBAAGJ,MAAkBE,UAAUC,OAAOE,UAAU,KAG9CV,SAAOY,OAAPZ,4GAED,gBAASK,IAAAA,eAAN7B,KACZqC,SADyBpC,UAGxB4B,EAAMtE,OAAO+E,UACbT,EAAMtE,OAAOgF,OACfV,EAAMtE,OAAOuE,UAAU,KAKXN,SAAOgB,oIAUNhB,SAAOgB,4CA8CLC,aAErB,SAACC,EAAOC,WAYFD,EAVFE,OACA5C,EASE0C,EATF1C,KACW6C,EAQTH,EARFzC,UACA6C,EAOEJ,EAPFI,QACAC,EAMEL,EANFK,QACAC,EAKEN,EALFM,aACAC,EAIEP,EAJFO,aAEAC,EAEER,EAFFQ,WACGC,IACDT,OAE0BU,aAAWC,kBACbC,UAAMF,WAAWG,iBAC3BC,eAAaX,KACDY,WAAShD,MAACiD,iBAAjCC,OAASC,SAES,WACvBX,GAAwC,sBAAcA,EAAajD,EACrE,IAEyB,WACvBgD,GAAwC,sBAAcA,EAAahD,EACrE,IAEwB,oBAAG6D,OAAAA,aAAS,YACVJ,YAAkB,GAAnCK,OAAMC,OAcb,OAZAC,YAAU,WACR,OAAc,EAMd,OALAC,WAAW,WACLC,GACFH,GAAQ,EAEZ,EAAG,gBAEDG,GAAU,CACZ,CACF,EAAG,CAACL,IAEW,UAAXA,GAAiC,UAAXA,EAEtBpD,MAAC0D,YACC1D,MAAC2D,cACCC,QAASC,EACTC,QAASC,gBAAcC,KACvBpH,MAAOqH,cAAYC,UACnB,aAAYC,EAAKC,SAASC,WAC1BC,KAAMtE,MAACiD,oBAMA,YAAXG,EAEApD,MAAC0D,YACC1D,MAACuE,WACC3H,MAAO4C,EAAY4B,EAAMtE,OAAO0H,WAAapD,EAAMtE,OAAO2H,YAOhEC,OAAChB,aACC1D,MAAC2E,cAAWC,QAASvB,EAAMwB,iBAAcC,iBACvC9E,MAAC+E,mBACCnI,MAAO4C,EAAY4B,EAAMtE,OAAOkI,WAAa5D,EAAMtE,OAAOmI,QAC1DtI,MAAO,CAAEuI,UAAW,WAGxBlF,MAAC2E,cAAWC,OAAQvB,EAAMwB,iBAAcC,iBACtC9E,MAAC2D,cACCC,QAASuB,EACTrB,QAASC,gBAAcC,KACvBpH,MAAOqH,cAAYC,UACnB,aAAYC,EAAKC,SAASgB,WAC1Bd,KAAMtE,MAACqF,uBAKjB,EAMA,OAJA9B,YAAU,iBACRJ,EAAWnD,MAACsF,GAAgBlC,aAAQ7D,YAAAA,EAAMgG,kBAANC,EAAiBpC,SACvD,EAAG,OAAC7D,YAAAA,EAAMgG,kBAANE,EAAiBrC,SAGnBpD,MAAC0F,iBAAeC,UAASC,MAAO,CAAEpG,UAAAA,YAChCkF,OAACmB,GACCrG,UAAWA,EACX4B,MAAOA,EACP7B,KAAMA,EACN,cAAa0C,EAAM6D,OACnB5D,IAAKA,EACL6D,KAAMxG,EAAKqC,OAAS,QAAU,aAE9B8C,OAACsB,KACC5E,MAAOA,EACP6E,SAAUC,eAAaC,UACvBC,WAAYC,iBAAeC,QACvB5D,aAEJ1C,MAAC0B,QACCuE,SAAUC,eAAaK,KACvBH,WAAYC,iBAAeC,OAC3B3J,MAAO6J,WAENjH,EAAKqC,OACJ5B,MAACyG,aACC7J,MACE4C,EAAY4B,EAAMtE,OAAO+E,UAAYT,EAAMtE,OAAOgF,OAEpD7B,KAAM,KAENV,EAAK0B,SACPwB,GACAlD,EAAKG,MACLH,EAAKG,KAAKgH,WAAW,SACrB1G,MAAC2G,GAAMZ,KAAK,MAAMxG,KAAMA,IAExBS,MAAC4G,GAASpH,UAAWA,EAAWD,KAAMA,MAG1CS,MAAC6G,GAASC,MAAGb,SAAUC,eAAaK,KAAMnF,MAAOA,WAC9C7B,EAAKwH,OAEPxH,EAAKgG,WAAuC,YAA1BhG,EAAKgG,UAAUnC,QAChCpD,MAAC0B,QACCqE,KAAK,cACLpJ,MAAO,CAAEqK,WAAY,QACrBf,SAAUC,eAAaK,cAEtBhH,EAAKgG,UAAU0B,UAGpBjH,MAAC0B,QAAKuE,SAAUC,eAAaK,cAAOrD,QAErC3D,EAAKqC,QACJ5B,MAACkH,GAAO9F,MAAOA,WACZ7B,EAAKqC,OAAOuF,MAAM,EAAG,GAAGC,IAAI,oBAAGC,OA5L1B,SAClBC,EACAC,EAKAC,GAEA,MACEC,MAAMC,QAAQH,EAAYpF,SAAyC,IAA9BoF,EAAYpF,OAAOwF,OACpDJ,EAAYpF,OAAO,GACnBoF,EAAYpF,SACIsF,MAAMC,QAAQvF,aACtBA,EAAOyF,KAAK,MACtBzF,EACJ,OAAQmF,EAAMD,MACZ,IAAK,iBACH,YACKC,GACHO,QAAYP,EAAMO,YAAWC,EAC3BP,EAAYlF,QACZ,EACAmF,SAGN,IAAK,iBACH,YACKF,GACHO,QAAYP,EAAMO,YAAWC,EAC3BP,EAAYjF,QACZ,EACAkF,SAGN,IAAK,oBACH,YAAYF,GAAOO,QAAYP,EAAMO,aAAYE,IACnD,QACE,SAEN,CAqJiDC,IAC7BX,KAAAA,UAAkBlD,EAAKC,SAASxC,OAAOyF,IACzC,CAAElF,OAAAA,EAAQG,QAAAA,EAASD,QAAAA,GACnB8B,EAAKC,SAAShE,WAHR6H,OAAaJ,IAAAA,QAKrB,OACEnD,OAAC7B,UAAMqF,oBACLlI,MAACmI,GACCxL,MAAO,CACLC,MAAO4C,EACH4B,EAAMtE,OAAO+E,UACbT,EAAMtE,OAAOgF,4BAXR,OAgBb9B,MAACoI,YAAcP,MAVIR,EAazB,SAMZ,ySClNgBtG,SAAOW,OAAPX,+PASD,qBAAGsH,OAAuB,OAAS,QAAQ,EACvC,qBAAGA,OAAuB,OAAS,QAAQ,EAChD,qBAAGA,OAAuB,OAAS,QAAQ,EAC9C,qBAAGA,OAAuB,MAAQ,MAAM,EAClC,qBAAGA,OAAuB,MAAQ,KAAK,EAC9C,oBAAGC,UAAAA,aAAY,YAAmBlH,IAAAA,eAARiH,aAGhB,eAAdC,GAA4C,UAAdA,IAHe9I,wBAK7B4B,EAAMtE,OAAO+E,wBACbT,EAAMtE,OAAOgF,OACf,eAAdwG,gBACclH,EAAMtE,OAAO2H,QACb,eAAd6D,gBACclH,EAAMtE,OAAOmI,sBACb7D,EAAMtE,OAAOyL,UAAY,EAE7B,oBAAGD,gBACH,sBADe,aACL,QAAU,QAAQ,EACxB,oBAAGlH,eAAOiH,OAExB,gBAFgC7I,UAIhCgJ,iBAAe,IAAMpH,EAAMtE,OAAO2L,YAClCrH,EAAMtE,OAAO4L,UAAU,EAEf,+BAAGL,OAAgC,EAAI,2BAGjCtH,SAAOgB,sGAClB,oBAAGX,eAAO5B,UACL4B,EAAMtE,OAAO0H,WAAapD,EAAMtE,OAAO6L,UAAU,KAMjD5H,SAAOC,yIACZ,oBAAGI,eAAO5B,UACL4B,EAAMtE,OAAO0H,WAAapD,EAAMtE,OAAO6L,UAAU,EAElD,qBAAGvH,MAAkBE,UAAUC,OAAOC,QAAQ,EAC5C,qBAAGJ,MAAkBE,UAAUC,OAAOE,UAAU,EAEpD,qBAAGL,MAAkBwH,WAAWC,SAAS,cAE9BhG,UAAMb,WAC5B,SAACC,EAAOC,GAEJC,MA2BEF,EA3BFE,OACA2G,EA0BE7G,EA1BF6G,eACAC,EAyBE9G,EAzBF8G,SAKAC,EAoBE/G,EApBF+G,cACIC,EAmBFhH,EAnBFiH,GACAC,EAkBElH,EAlBFkH,UACW/G,EAiBTH,EAjBFzC,UACA4J,EAgBEnH,EAhBFmH,sBACAC,EAeEpH,EAfFoH,WACAC,EAcErH,EAdFqH,UACAC,EAaEtH,EAbFsH,SACAC,EAYEvH,EAZFuH,SACAnH,EAWEJ,EAXFI,QACAC,EAUEL,EAVFK,UAUEL,EATFwH,SAAAA,kBASExH,EARFoG,OAAAA,gBACAqB,EAOEzH,EAPFyH,WACAnH,EAMEN,EANFM,aACAC,EAKEP,EALFO,eAKEP,EAJF0H,UAAAA,gBACA7D,EAGE7D,EAHF6D,SAGE7D,EAFFQ,WAAAA,gBACGC,IACDT,OAEsBY,UAAMG,SAAwB,IAAjD4G,OAAOC,SAC0BhH,UAAMG,SAAwB,MAA/D8G,OAAcC,SAEHhH,eAAaX,KACDS,UAAMF,WAAWC,kBACnBC,UAAMF,WAAWG,iBAClCkH,gBAAcf,KAEVpG,UAAMoH,YACnB,SAACC,EAA8BC,GAC7BN,EAAS,SAACD,mBACLA,EACAM,EAAc9C,IAAI,SAAC7H,iBACb6K,OAAO7K,EAAM,CAClB0B,QAASoJ,IAAIC,gBAAgB/K,IAC7B,GAED4K,EAAc/C,IACf,0BACSgD,SADN7K,KACmB,CAClBqC,SAFKA,QAGL,KAGV,EACA,MAUE2I,cAAY,CACdC,SAAS,EACTzB,SAAAA,EACAU,SAAAA,EACApH,QAAAA,EACAC,QAAAA,EACAH,OAAAA,EACAsI,OAAAA,EACApC,OAAAA,IAbAqC,IAAAA,aACAC,KAAAA,aACAC,KAAAA,aACAC,KAAAA,aACAC,KAAAA,SAYiBC,IAjBjBA,eAiB+B,CAAE7B,GAAAA,OAENY,EACzB,QACAa,GACA,aACAE,GACA,aACAD,GACA,aACA,aAEqB,SAACI,GACxBnB,EAAS,SAAAD,YAAeqB,OAAO,SAAA1L,cAAiByL,CAAW,EAAC,GAC5DxI,GAC0B,sBACxBA,EAAawI,EACjB,KAEyB,SAACA,GACxBnB,EAAS,SAAAD,YAAeqB,OAAO,SAAA1L,cAAiByL,CAAW,EAAC,GAC5DzI,GAC0B,sBACxBA,EAAayI,EACjB,KAEoB,SAAC/I,GACnB4H,EAAS,SAAAD,YACDxC,IAAI,SAAA7H,cACC0C,EAAM1C,KACX2L,OAAOd,OAAO7K,EAAM,CAClBgG,eACKhG,EAAKgG,WACR0B,QAAYhF,EAAMgF,YAClB7D,OAAQ,cAGZ7D,CAAI,EACT,EAEL,KAEoB,SAAC0C,GACnB4H,EAAS,SAAAD,YACDxC,IAAI,SAAA7H,cACC0C,EAAM1C,KACX2L,OAAOd,OAAO7K,EAAM,CAClBgG,eACKhG,EAAKgG,WACR0B,QAAS,GACT7D,OAAQ,eAGZ7D,CAAI,EACT,EAEL,KAEiB,SAAC0C,GAChB4H,EAAS,SAAAD,YACDxC,IAAI,SAAA7H,cACC0C,EAAM1C,KACX2L,OAAOd,OAAO7K,EAAM,CAClBqC,OAAQK,EAAML,OACd2D,eAAgBhG,EAAKgG,WAAWnC,OAAQ,YAE1C7D,CAAI,EACT,EAEL,EA4DA,OA1CAsD,UAAMU,UACJ,6BACEqG,EAAMuB,QACJ,SAAA5L,YAAa0B,SAAWoJ,IAAIe,gBAAgB7L,EAAK0B,QAAQ,EAE7D,CAAC,EACD,CAAC2I,IAGH/G,UAAMU,UAAU,WACd,MAAqBiG,GAAYI,EAAMjC,OAAS6B,IAC3BD,GAAYK,EAAMjC,OAAS4B,EAEhDQ,EA7BkB,SAClB1C,EACAE,GAEA,GAAa,OAATF,EAAe,YACnB,MAAclD,EAAKC,SAASxC,OAAOyF,GACnC,OAAQA,GACN,IAAK,iBACH,SAAgBQ,YAAWN,EAAYgC,aAAYpF,EAAKC,SAASwF,UACnE,IAAK,gBACH,SAAgB/B,YAAWN,EAAYiC,aAAYrF,EAAKC,SAASwF,UACnE,QACE,SAAa/B,QAEnB,CAgBIG,CACEqD,EACI,iBACAC,EACA,gBACA,KACJ,CAAE9B,SAAAA,EAAUD,SAAAA,KAIZI,GAAaC,EAAMjC,OAAS,IAAM0D,IAAiBC,GACrDzB,EAAS,SAACD,GACR,SAAaxC,IAAI,SAAC7H,GAUhB,OATCA,EAAKqC,SACHrC,EAAKgG,WACNmE,GACAA,EAAW,CACTnK,KAAAA,EACAgM,QAASC,GACTC,SAAUC,GACVC,WAAYC,MAGlB,EACF,EAEJ,EAAG,CAACjC,EAAWC,EAAMjC,OAAQ+B,IAG3BhF,OAACgB,iBAAeC,UAASC,MAAO,CAAEpG,UAAAA,aAChCkF,OAACmH,sBACCC,YAAY,EACZhD,eAAgBA,EAChBgB,aAAcA,EACdiC,QAAS7C,EACTC,UAAWA,EACX3J,UAAWA,EACX4J,sBAAuBA,EACvBC,WAAYA,EACZC,UAAWA,EACX0C,aAAc,CAAEC,UAAW,GAC3B,cAAanG,YAEb9F,MAACkM,GAAc9K,MAAOA,EAAO5B,UAAWA,WACrCwJ,IAEHtE,OAACyH,KACClG,SAAUC,eAAaC,UACvBmC,UAAWA,GACX9I,UAAWA,EACX6I,OAAQA,EACRjH,MAAOA,GACHsJ,IACAhI,GACJoD,OAAQA,EACRsG,UAAW,YAEXpM,eACEkC,IAAKA,EACLxC,KAAM2M,GAAW3M,KACjByC,OAAQkK,GAAWlK,OACnBmK,aAAcD,GAAWC,aACzBpD,GAAImD,GAAWnD,GACfO,SAAU4C,GAAW5C,SACrB8C,SAAUF,GAAWE,SACrB3I,QAASyI,GAAWzI,QACpBjH,MAAO0P,GAAW1P,MAClByP,SAAUC,GAAWD,WAEtB/D,EACCrI,MAAC0B,QAAKoF,MAAGb,SAAUC,eAAaK,cAC9BvG,MAACwM,UACC5P,MAAOqH,cAAYQ,QACnBsE,SAAUA,EACVvJ,UAAWA,EACXoE,QAASkH,GACTnO,MAAO,CAAE8P,OAAQ,YAEhBtI,EAAKC,SAASsI,gBAInBhI,OAAChD,QAAKuE,SAAUC,eAAaK,eAC3BvG,MAAC2M,mBACC,cAAY,OACZ/P,MACE4C,EACI4B,EAAMtE,OAAO0H,WACbpD,EAAMtE,OAAOC,WAEnBkD,KAAM,KAERD,MAAC4M,GAAQpN,UAAWA,EAAW4B,MAAOA,WACnC+C,EAAKC,SAASyI,cAEjB7M,MAACwM,UACC5P,MAAOqH,cAAYQ,QACnBsE,SAAUA,EACVvJ,UAAWA,EACXoE,QAASkH,GACTnO,MAAO,CAAE8P,OAAQ,GACjB3I,QAASC,gBAAc+I,eAEtB3I,EAAKC,SAASsI,wBAMxB9C,EAAMxC,IAAI,SAAC7H,UACVS,MAAC+M,GACC5K,OAAQA,EACR5C,KAAMA,EACNC,UAAWA,EAEX6C,QAASA,EACTC,QAASA,EACTC,aAAc4C,GACd3C,aAAcqB,GACdpB,WAAYA,GALPlD,EAAKwH,KAMV,KAIV"}
+{"version":3,"file":"fileuploader.umd.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  InsertDriveFileIcon,\n  ImageIcon,\n  AudiotrackIcon,\n  VideocamIcon,\n  FileExcelIcon,\n  FilePdfIcon,\n  FilePowerpointIcon,\n  FileWordIcon,\n  FileZipIcon,\n  IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n  file: FilePreview;\n  isInverse?: boolean;\n}\n\nconst icons = {\n  default: {\n    Icon: InsertDriveFileIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  word: {\n    Icon: FileWordIcon,\n    style: {\n      color: magma.colors.info500,\n    },\n  },\n  excel: {\n    Icon: FileExcelIcon,\n    style: {\n      color: magma.colors.success500,\n    },\n  },\n  powerpoint: {\n    Icon: FilePowerpointIcon,\n    style: {\n      color: magma.colors.warning500,\n    },\n  },\n  pdf: {\n    Icon: FilePdfIcon,\n    style: {\n      color: magma.colors.danger500,\n    },\n  },\n  image: {\n    Icon: ImageIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  video: {\n    Icon: VideocamIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  audio: {\n    Icon: AudiotrackIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  archive: {\n    Icon: FileZipIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n};\n\nconst iconMapping: {\n  [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n  default: icons.default,\n  xlsx: icons.excel,\n  xlsm: icons.excel,\n  xlsb: icons.excel,\n  xltx: icons.excel,\n  xls: icons.excel,\n  xlt: icons.excel,\n  doc: icons.word,\n  docx: icons.word,\n  docm: icons.word,\n  dotx: icons.word,\n  dotm: icons.word,\n  docb: icons.word,\n  pptx: icons.powerpoint,\n  pptm: icons.powerpoint,\n  ppt: icons.powerpoint,\n  pdf: icons.pdf,\n  png: icons.image,\n  svg: icons.image,\n  image: icons.image,\n  audio: icons.audio,\n  video: icons.video,\n  zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n  const { path = '', type = '' } = file;\n  const category = type.split('/')[0];\n  const extension = path.split('.').pop() || 'default';\n  const { Icon, style } =\n    iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n  return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n  bytes: number | undefined,\n  decimalPoint: number = 2,\n  bytesLabel: string = 'Bytes'\n) => {\n  if (bytes === undefined) return;\n  if (bytes == 0) return `0 ${bytesLabel}`;\n  const k = 1024;\n  const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return (\n    parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n  );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n  CheckCircleIcon,\n  CloseIcon,\n  DeleteIcon,\n  ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n  ButtonColor,\n  ButtonVariant,\n  Card,\n  Flex,\n  FlexAlignItems,\n  FlexBehavior,\n  FlexProps,\n  I18nContext,\n  I18nInterface,\n  IconButton,\n  InverseContext,\n  ThemeContext,\n  ThemeInterface,\n  Transition,\n  Spinner,\n  useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nimport styled, { CreateStyled } from '@emotion/styled';\n\nconst typedStyled = styled as CreateStyled<ThemeInterface>;\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n  accept?: string | string[];\n  file: FilePreview;\n  isInverse?: boolean;\n  maxSize?: number;\n  minSize?: number;\n  onDeleteFile?: (file: FilePreview) => void;\n  onRemoveFile?: (file: FilePreview) => void;\n  /**\n   * @internal\n   */\n  testId?: string;\n  thumbnails: boolean;\n}\n\nconst Thumb = typedStyled.div<{ file: FilePreview }>`\n  background-image: ${({ file }) =>\n    `url('${'preview' in file && file.preview}')`};\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: inline-block;\n  vertical-align: middle;\n  height: 40px;\n  width: 40px;\n`;\n\nconst StatusIcons = typedStyled.div`\n  display: grid;\n  grid-template-areas: 'inner-div';\n  height: auto;\n  place-items: center;\n  width: 46px;\n  & > div {\n    display: inline-block;\n    right: 0;\n    grid-area: inner-div;\n  }\n`;\n\nconst IconStyles = {\n  marginRight: '12px',\n  display: 'flex',\n};\n\nconst Errors = typedStyled.div`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n  padding: 16px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = typedStyled(Flex)`\n  height: 56px;\n  padding: 0 8px 0 16px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = typedStyled(Flex)`\n  overflow: hidden;\n  white-space: nowrap;\n  align-items: center;\n  text-overflow: ellipsis;\n  display: block;\n  margin-right: 24px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = typedStyled(Card)<{ file: FilePreview; isInverse: boolean }>`\n  background-color: none;\n  border-color: ${({ file, theme, isInverse }) =>\n    file.errors\n      ? isInverse\n        ? theme.colors.danger200\n        : theme.colors.danger\n      : theme.colors.neutral300};\n  border-width: 1px;\n  margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n  display: block;\n\n  > div {\n    display: flex;\n    align-self: center;\n    margin-right: 12px;\n  }\n`;\n\nconst ErrorMessage = styled.span`\n  display: block;\n`;\n\nconst formatError = (\n  error: { header?: string; message: string; code: string },\n  constraints: {\n    maxSize?: number;\n    minSize?: number;\n    accept?: string | string[];\n  },\n  byteLabel: string\n) => {\n  const accept =\n    Array.isArray(constraints.accept) && constraints.accept.length === 1\n      ? constraints.accept[0]\n      : constraints.accept;\n  const messageSuffix = Array.isArray(accept)\n    ? `one of ${accept.join(', ')}`\n    : accept;\n  switch (error.code) {\n    case 'file-too-large':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(\n          constraints.maxSize,\n          2,\n          byteLabel\n        )}.`,\n      };\n    case 'file-too-small':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(\n          constraints.minSize,\n          2,\n          byteLabel\n        )}.`,\n      };\n    case 'file-invalid-type':\n      return { ...error, message: `${error.message}: ${messageSuffix}` };\n    default:\n      return error;\n  }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n  // eslint-disable-next-line complexity\n  (props, ref) => {\n    const {\n      accept,\n      file,\n      isInverse: isInverseProp,\n      maxSize,\n      minSize,\n      onDeleteFile,\n      onRemoveFile,\n      testId,\n      thumbnails,\n      ...rest\n    } = props;\n\n    const theme: ThemeInterface = useContext(ThemeContext);\n    const i18n: I18nInterface = React.useContext(I18nContext);\n    const isInverse = useIsInverse(isInverseProp);\n    const [actions, setActions] = useState(<CloseIcon />);\n\n    const handleRemoveFile = () => {\n      onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n    };\n\n    const handleDeleteFile = () => {\n      onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n    };\n\n    const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n      const [done, setDone] = useState<boolean>(false);\n\n      useEffect(() => {\n        let mounted = true;\n        setTimeout(() => {\n          if (mounted) {\n            setDone(true);\n          }\n        }, 1000);\n        return () => {\n          mounted = false;\n        };\n      }, [status]);\n\n      if (status === 'error' || status === 'ready') {\n        return (\n          <StatusIcons>\n            <IconButton\n              onClick={handleRemoveFile}\n              variant={ButtonVariant.link}\n              color={ButtonColor.secondary}\n              aria-label={i18n.dropzone.removeFile}\n              icon={<CloseIcon />}\n            />\n          </StatusIcons>\n        );\n      }\n\n      if (status === 'pending') {\n        return (\n          <StatusIcons>\n            <Spinner\n              color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n            />\n          </StatusIcons>\n        );\n      }\n\n      return (\n        <StatusIcons>\n          <Transition isOpen={!done} unmountOnExit fade>\n            <CheckCircleIcon\n              color={isInverse ? theme.colors.success200 : theme.colors.success}\n              style={{ marginTop: '4px' }}\n            />\n          </Transition>\n          <Transition isOpen={done} unmountOnExit fade>\n            <IconButton\n              onClick={handleDeleteFile}\n              variant={ButtonVariant.link}\n              color={ButtonColor.secondary}\n              aria-label={i18n.dropzone.deleteFile}\n              icon={<DeleteIcon />}\n            />\n          </Transition>\n        </StatusIcons>\n      );\n    };\n\n    useEffect(() => {\n      setActions(<FinishedActions status={file?.processor?.status} />);\n    }, [file?.processor?.status]);\n\n    return (\n      <InverseContext.Provider value={{ isInverse }}>\n        <StyledCard\n          isInverse={isInverse}\n          theme={theme}\n          file={file}\n          data-testid={props.testId}\n          ref={ref}\n          role={file.errors ? 'alert' : ''}\n        >\n          <StyledFlex\n            theme={theme}\n            behavior={FlexBehavior.container}\n            alignItems={FlexAlignItems.center}\n            {...rest}\n          >\n            <Flex\n              behavior={FlexBehavior.item}\n              alignItems={FlexAlignItems.center}\n              style={IconStyles}\n            >\n              {file.errors ? (\n                <ErrorIcon\n                  color={\n                    isInverse ? theme.colors.danger200 : theme.colors.danger\n                  }\n                  size={24}\n                />\n              ) : file.preview &&\n                thumbnails &&\n                file.type &&\n                file.type.startsWith('image') ? (\n                <Thumb role=\"img\" file={file} />\n              ) : (\n                <FileIcon isInverse={isInverse} file={file} />\n              )}\n            </Flex>\n            <FileName xs behavior={FlexBehavior.item} theme={theme}>\n              {file.name}\n            </FileName>\n            {file.processor && file.processor.status === 'pending' && (\n              <Flex\n                role=\"progressbar\"\n                style={{ marginLeft: 'auto' }}\n                behavior={FlexBehavior.item}\n              >\n                {file.processor.percent}\n              </Flex>\n            )}\n            <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n          </StyledFlex>\n          {file.errors && (\n            <Errors theme={theme}>\n              {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n                const { header = '', message } = formatError(\n                  { code, ...rest, ...i18n.dropzone.errors[code] },\n                  { accept, minSize, maxSize },\n                  i18n.dropzone.bytes\n                );\n                return (\n                  <React.Fragment key={code}>\n                    <ErrorHeader\n                      style={{\n                        color: isInverse\n                          ? theme.colors.danger200\n                          : theme.colors.danger,\n                      }}\n                    >\n                      {header}\n                    </ErrorHeader>\n                    <ErrorMessage>{message}</ErrorMessage>\n                  </React.Fragment>\n                );\n              })}\n            </Errors>\n          )}\n        </StyledCard>\n      </InverseContext.Provider>\n    );\n  }\n);\n","/* eslint-disable no-empty-pattern */\n/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React from 'react';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  DropzoneRootProps,\n  FileRejection,\n} from 'react-dropzone';\nimport {\n  Button,\n  ButtonColor,\n  ButtonVariant,\n  Flex,\n  FlexBehavior,\n  FlexProps,\n  FormFieldContainer,\n  FormFieldContainerBaseProps,\n  I18nContext,\n  I18nInterface,\n  InverseContext,\n  ThemeContext,\n  ThemeInterface,\n  useGenerateId,\n  useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\nimport styled, { CreateStyled } from '@emotion/styled';\n\nconst typedStyled = styled as CreateStyled<ThemeInterface>;\n\nexport interface OnSendFileProps {\n  file: FilePreview;\n  onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n  onFinish?: ({}: { file: FilePreview }) => void;\n  onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n  | 'error'\n  | 'dragAccept'\n  | 'dragReject'\n  | 'dragActive'\n  | 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n  extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n  /**\n   * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n   */\n  accept?: string | string[];\n  /**\n   * Enable/Disable the input\n   */\n  disabled?: boolean;\n  /**\n   * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n   */\n  dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n  /**\n   * Content of the helper message.\n   */\n  helperMessage?: string;\n  /**\n   * @internal\n   */\n  id?: string;\n  /**\n   * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n   * @default 0\n   */\n  maxFiles?: number;\n  /**\n   * Minimum accepted number of files.\n   */\n  minFiles?: number;\n  /**\n   * Maximum file size (in bytes)\n   * @default Infinity\n   */\n  maxSize?: number;\n  /**\n   * Minimum file size (in bytes)\n   * @default 0\n   */\n  minSize?: number;\n  /**\n   * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n   * @default true\n   */\n  multiple?: boolean;\n  /**\n   * If true, disables drag 'n' drop\n   * @default false\n   */\n  noDrag?: boolean;\n  /**\n   * Callback for when a file is deleted\n   */\n  onDeleteFile?: (file: FilePreview) => void;\n  /**\n   * Callback for when a file is deleted\n   */\n  onRemoveFile?: (file: FilePreview) => void;\n  /**\n   * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n   */\n  onSendFile?: (props: OnSendFileProps) => void;\n  /**\n   * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n   * @default false\n   */\n  sendFiles?: boolean;\n  /**\n   * @internal\n   */\n  testId?: string;\n  /**\n   * Show thumbnails for images in lieu of the file icon.\n   * @default true\n   */\n  thumbnails?: boolean;\n}\n\nconst Container = typedStyled(Flex)<\n  DropzoneRootProps &\n    FlexProps & {\n      dragState?: DragState;\n      noDrag?: boolean;\n      isInverse?: boolean;\n    }\n>`\n  flex-direction: column;\n  align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n  border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n  border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n    noDrag\n      ? `0px`\n      : dragState === 'dragReject' || dragState === 'error'\n      ? isInverse\n        ? `1px dashed ${theme.colors.danger200}`\n        : `1px dashed ${theme.colors.danger}`\n      : dragState === 'dragActive'\n      ? `1px dashed ${theme.colors.primary}`\n      : dragState === 'dragAccept'\n      ? `1px dashed ${theme.colors.success}`\n      : `1px dashed ${theme.colors.neutral400}`};\n\n  border-style: ${({ dragState = 'default' }) =>\n    dragState === 'error' ? 'solid' : 'dashed'};\n  background-color: ${({ theme, noDrag, isInverse }) =>\n    noDrag\n      ? 'transparent'\n      : isInverse\n      ? transparentize(0.75, theme.colors.neutral900)\n      : theme.colors.neutral200};\n  outline: none;\n  transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = typedStyled.span<{ isInverse?: boolean }>`\n  color: ${({ theme, isInverse }) =>\n    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n  display: block;\n  font-size: 14px;\n  margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = typedStyled.div<{ isInverse?: boolean }>`\n  color: ${({ theme, isInverse }) =>\n    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n  margin: 0 0 24px 0;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n  font-weight: 500;\n  padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n  (props, ref) => {\n    const {\n      accept,\n      containerStyle,\n      disabled,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      dropzoneOptions = {\n        multiple: true,\n      },\n      helperMessage,\n      id: defaultId,\n      inputSize,\n      isInverse: isInverseProp,\n      isLabelVisuallyHidden,\n      labelStyle,\n      labelText,\n      maxFiles,\n      minFiles,\n      maxSize,\n      minSize,\n      multiple = true,\n      noDrag = false,\n      onSendFile,\n      onDeleteFile,\n      onRemoveFile,\n      sendFiles = false,\n      testId,\n      thumbnails = true,\n      ...rest\n    } = props;\n\n    const [files, setFiles] = React.useState<FilePreview[]>([]);\n    const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n\n    const isInverse = useIsInverse(isInverseProp);\n    const theme: ThemeInterface = React.useContext(ThemeContext);\n    const i18n: I18nInterface = React.useContext(I18nContext);\n    const id = useGenerateId(defaultId);\n\n    const onDrop = React.useCallback(\n      (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n        setFiles((files: FilePreview[]) => [\n          ...files,\n          ...acceptedFiles.map((file: FilePreview) =>\n            Object.assign(file, {\n              preview: URL.createObjectURL(file),\n            })\n          ),\n          ...rejectedFiles.map(\n            ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n              Object.assign(file, {\n                errors,\n              })\n          ),\n        ]);\n      },\n      []\n    );\n\n    const {\n      getInputProps,\n      getRootProps,\n      isDragAccept,\n      isDragActive,\n      isDragReject,\n      open,\n    } = useDropzone({\n      noClick: true,\n      disabled,\n      multiple,\n      maxSize,\n      minSize,\n      accept,\n      onDrop,\n      noDrag,\n    });\n\n    const inputProps = getInputProps({ id });\n\n    const dragState: DragState = errorMessage\n      ? 'error'\n      : isDragAccept\n      ? 'dragAccept'\n      : isDragReject\n      ? 'dragReject'\n      : isDragActive\n      ? 'dragActive'\n      : 'default';\n\n    const handleRemoveFile = (removedFile: FilePreview) => {\n      setFiles(files => files.filter(file => file !== removedFile));\n      onRemoveFile &&\n        typeof onRemoveFile === 'function' &&\n        onRemoveFile(removedFile);\n    };\n\n    const handleDeleteFile = (removedFile: FilePreview) => {\n      setFiles(files => files.filter(file => file !== removedFile));\n      onDeleteFile &&\n        typeof onDeleteFile === 'function' &&\n        onDeleteFile(removedFile);\n    };\n\n    const setProgress = (props: { percent: number; file: FilePreview }) => {\n      setFiles(files =>\n        files.map(file =>\n          file === props.file\n            ? Object.assign(file, {\n                processor: {\n                  ...file.processor,\n                  percent: `${props.percent}%`,\n                  status: 'pending',\n                },\n              })\n            : file\n        )\n      );\n    };\n\n    const setFinished = (props: { file: FilePreview }) => {\n      setFiles(files =>\n        files.map(file =>\n          file === props.file\n            ? Object.assign(file, {\n                processor: {\n                  ...file.processor,\n                  percent: '',\n                  status: 'finished',\n                },\n              })\n            : file\n        )\n      );\n    };\n\n    const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n      setFiles(files =>\n        files.map(file =>\n          file === props.file\n            ? Object.assign(file, {\n                errors: props.errors,\n                processor: { ...file.processor, status: 'error' },\n              })\n            : file\n        )\n      );\n    };\n\n    const formatError = (\n      code: string | null,\n      constraints: { maxFiles?: number; minFiles?: number }\n    ) => {\n      if (code === null) return null;\n      const error = i18n.dropzone.errors[code];\n      switch (code) {\n        case 'too-many-files':\n          return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n        case 'too-few-files':\n          return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n        default:\n          return error.message;\n      }\n    };\n\n    React.useEffect(\n      () => () => {\n        files.forEach(\n          file => file.preview && URL.revokeObjectURL(file.preview)\n        );\n      },\n      [files]\n    );\n\n    React.useEffect(() => {\n      const minFileError = minFiles && files.length < minFiles;\n      const maxFileError = maxFiles && files.length > maxFiles;\n\n      setErrorMessage(\n        formatError(\n          maxFileError\n            ? 'too-many-files'\n            : minFileError\n            ? 'too-few-files'\n            : null,\n          { minFiles, maxFiles }\n        )\n      );\n\n      if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n        setFiles((files: FilePreview[]) => {\n          return files.map((file: FilePreview) => {\n            !file.errors &&\n              !file.processor &&\n              onSendFile &&\n              onSendFile({\n                file,\n                onError: setError,\n                onFinish: setFinished,\n                onProgress: setProgress,\n              });\n            return file;\n          });\n        });\n      }\n    }, [sendFiles, files.length, onSendFile]);\n\n    return (\n      <InverseContext.Provider value={{ isInverse }}>\n        <FormFieldContainer\n          actionable={false}\n          containerStyle={containerStyle}\n          errorMessage={errorMessage}\n          fieldId={id}\n          inputSize={inputSize}\n          isInverse={isInverse}\n          isLabelVisuallyHidden={isLabelVisuallyHidden}\n          labelStyle={labelStyle}\n          labelText={labelText}\n          messageStyle={{ minHeight: 0 }}\n          data-testid={testId}\n        >\n          <HelperMessage theme={theme} isInverse={isInverse}>\n            {helperMessage}\n          </HelperMessage>\n          <Container\n            behavior={FlexBehavior.container}\n            dragState={dragState}\n            isInverse={isInverse}\n            noDrag={noDrag}\n            theme={theme}\n            {...getRootProps()}\n            {...rest}\n            testId={testId}\n            tabIndex={-1}\n          >\n            <input\n              ref={ref}\n              type={inputProps.type}\n              accept={inputProps.accept}\n              autoComplete={inputProps.autoComplete}\n              id={inputProps.id}\n              multiple={inputProps.multiple}\n              onChange={inputProps.onChange}\n              onClick={inputProps.onClick}\n              style={inputProps.style}\n              tabIndex={inputProps.tabIndex}\n            />\n            {noDrag ? (\n              <Flex xs behavior={FlexBehavior.item}>\n                <Button\n                  color={ButtonColor.primary}\n                  disabled={disabled}\n                  isInverse={isInverse}\n                  onClick={open}\n                  style={{ margin: 0 }}\n                >\n                  {i18n.dropzone.browseFiles}\n                </Button>\n              </Flex>\n            ) : (\n              <Flex behavior={FlexBehavior.item}>\n                <CloudUploadIcon\n                  aria-hidden=\"true\"\n                  color={\n                    isInverse\n                      ? theme.colors.neutral100\n                      : theme.colors.neutral500\n                  }\n                  size={48}\n                />\n                <Wrapper isInverse={isInverse} theme={theme}>\n                  {i18n.dropzone.dragMessage}\n                </Wrapper>\n                <Button\n                  color={ButtonColor.primary}\n                  disabled={disabled}\n                  isInverse={isInverse}\n                  onClick={open}\n                  style={{ margin: 0 }}\n                  variant={ButtonVariant.solid}\n                >\n                  {i18n.dropzone.browseFiles}\n                </Button>\n              </Flex>\n            )}\n          </Container>\n        </FormFieldContainer>\n        {files.map((file: FilePreview) => (\n          <Preview\n            accept={accept}\n            file={file}\n            isInverse={isInverse}\n            key={file.name}\n            maxSize={maxSize}\n            minSize={minSize}\n            onDeleteFile={handleDeleteFile}\n            onRemoveFile={handleRemoveFile}\n            thumbnails={thumbnails}\n          />\n        ))}\n      </InverseContext.Provider>\n    );\n  }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","_ref","file","isInverse","_file$path","path","_file$type","type","category","split","extension","pop","_ref2","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","typedStyled","styled","Thumb","div","_templateObject","_taggedTemplateLiteralLoose","preview","StatusIcons","_templateObject2","IconStyles","marginRight","display","Errors","_templateObject3","theme","neutral300","_ref3","typeScale","size02","fontSize","_ref4","lineHeight","StyledFlex","Flex","_templateObject4","_ref5","_ref6","FileName","_templateObject5","_ref7","_ref8","StyledCard","Card","_templateObject6","_ref9","errors","danger200","danger","ErrorHeader","span","_templateObject7","ErrorMessage","_templateObject8","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","_objectWithoutPropertiesLoose","_excluded","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","_useState","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","_ref10","status","_ref10$status","_useState2","done","setDone","useEffect","mounted","setTimeout","children","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","_file$processor","processor","_file$processor2","InverseContext","Provider","value","testId","role","_extends","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","_ref11","code","_formatError","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","_excluded2","_formatError$header","header","Fragment","Container","noDrag","_ref6$dragState","dragState","neutral400","_ref7$dragState","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","_ref12","_ref13","_ref14","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","_props$multiple","multiple","_props$noDrag","onSendFile","_props$sendFiles","sendFiles","_props$thumbnails","_React$useState","files","setFiles","_React$useState2","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","concat","Object","assign","URL","createObjectURL","_ref15","_useDropzone","useDropzone","noClick","getRootProps","isDragAccept","isDragActive","isDragReject","open","inputProps","getInputProps","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","autoComplete","onChange","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/dropzone",
-  "version": "6.0.1-next.0",
+  "version": "7.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,7 +30,7 @@
     "@emotion/styled": "^10.0.27",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.3.1-next.0",
+    "react-magma-dom": "^4.4.0-next.2",
     "react-magma-icons": "^3.0.0"
   },
   "dependencies": {
@@ -42,7 +42,7 @@
     "@emotion/styled": "^10.0.27",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.3.1-next.0",
+    "react-magma-dom": "^4.4.0",
     "react-magma-icons": "^3.0.0"
   }
 }

package/src/components/dropzone/Dropzone.tsx

@@ -26,7 +26,6 @@ import {
   InverseContext,
   ThemeContext,
   ThemeInterface,
-  styled,
   useGenerateId,
   useIsInverse,
 } from 'react-magma-dom';
@@ -35,6 +34,9 @@ import { CloudUploadIcon } from 'react-magma-icons';
 import { Preview } from './Preview';
 import { FilePreview, FileError } from './FilePreview';
 import { transparentize } from 'polished';
+import styled, { CreateStyled } from '@emotion/styled';
+
+const typedStyled = styled as CreateStyled<ThemeInterface>;
 
 export interface OnSendFileProps {
   file: FilePreview;
@@ -130,7 +132,7 @@ export interface DropzoneProps
   thumbnails?: boolean;
 }
 
-const Container = styled(Flex)<
+const Container = typedStyled(Flex)<
   DropzoneRootProps &
     FlexProps & {
       dragState?: DragState;
@@ -169,7 +171,7 @@ const Container = styled(Flex)<
   transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};
 `;
 
-const HelperMessage = styled.span<{ isInverse?: boolean }>`
+const HelperMessage = typedStyled.span<{ isInverse?: boolean }>`
   color: ${({ theme, isInverse }) =>
     isInverse ? theme.colors.neutral100 : theme.colors.neutral700};
   display: block;
@@ -177,7 +179,7 @@ const HelperMessage = styled.span<{ isInverse?: boolean }>`
   margin: -8px 0 16px 0;
 `;
 
-const Wrapper = styled.div<{ isInverse?: boolean }>`
+const Wrapper = typedStyled.div<{ isInverse?: boolean }>`
   color: ${({ theme, isInverse }) =>
     isInverse ? theme.colors.neutral100 : theme.colors.neutral700};
   margin: 0 0 24px 0;

package/src/components/dropzone/Preview.tsx

@@ -23,7 +23,6 @@ import {
   ThemeInterface,
   Transition,
   Spinner,
-  styled,
   useIsInverse,
 } from 'react-magma-dom';
 
@@ -31,6 +30,10 @@ import { FileIcon } from './FileIcon';
 import { FilePreview } from './FilePreview';
 import { formatFileSize } from './utils';
 
+import styled, { CreateStyled } from '@emotion/styled';
+
+const typedStyled = styled as CreateStyled<ThemeInterface>;
+
 export interface PreviewProps extends Omit<FlexProps, 'behavior'> {
   accept?: string | string[];
   file: FilePreview;
@@ -46,7 +49,7 @@ export interface PreviewProps extends Omit<FlexProps, 'behavior'> {
   thumbnails: boolean;
 }
 
-const Thumb = styled.div<{ file: FilePreview }>`
+const Thumb = typedStyled.div<{ file: FilePreview }>`
   background-image: ${({ file }) =>
     `url('${'preview' in file && file.preview}')`};
   background-repeat: no-repeat;
@@ -57,7 +60,7 @@ const Thumb = styled.div<{ file: FilePreview }>`
   width: 40px;
 `;
 
-const StatusIcons = styled.div`
+const StatusIcons = typedStyled.div`
   display: grid;
   grid-template-areas: 'inner-div';
   height: auto;
@@ -75,21 +78,21 @@ const IconStyles = {
   display: 'flex',
 };
 
-const Errors = styled.div`
+const Errors = typedStyled.div`
   border-top: 1px solid ${({ theme }) => theme.colors.neutral300};
   padding: 16px;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
 `;
 
-const StyledFlex = styled(Flex)`
+const StyledFlex = typedStyled(Flex)`
   height: 56px;
   padding: 0 8px 0 16px;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
 `;
 
-const FileName = styled(Flex)`
+const FileName = typedStyled(Flex)`
   overflow: hidden;
   white-space: nowrap;
   align-items: center;
@@ -100,7 +103,7 @@ const FileName = styled(Flex)`
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
 `;
 
-const StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`
+const StyledCard = typedStyled(Card)<{ file: FilePreview; isInverse: boolean }>`
   background-color: none;
   border-color: ${({ file, theme, isInverse }) =>
     file.errors