@transferwise/components 0.0.0-experimental-cb7b730 → 0.0.0-experimental-9463364

package/build/uploadInput/uploadButton/UploadButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.js","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {\n  ChangeEvent,\n  DragEvent,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string | readonly string[] | readonly FileType[];\nexport type UploadButtonProps = {\n  /**\n   * Disable the upload button if your app is not yet ready to accept uploads\n   */\n  disabled?: boolean;\n\n  /**\n   * Should be true, if the UploadInput has at least 1\n   * file (valid or invalid) listed.\n   */\n  withEntries?: boolean;\n\n  /**\n   * Allow multiple file uploads\n   */\n  multiple?: boolean;\n\n  /**\n   * List of allowed filetypes, eg. '*' | '.zip,application/zip' | ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n   */\n  fileTypes?: AllowedFileTypes;\n\n  /**\n   * Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n   */\n  sizeLimit?: number;\n\n  /**\n   * Description for the upload button\n   */\n  description?: string | undefined;\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Called when some files were successfully selected\n   *\n   * @param files\n   */\n  onChange: (files: FileList) => void;\n\n  /**\n   * Id for the upload input\n   */\n  id?: string;\n\n  /**\n   * Title for the upload button\n   */\n  uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n  uploadInput = 'uploadInput',\n  mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n  event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(\n  (\n    {\n      disabled,\n      withEntries,\n      multiple,\n      description,\n      fileTypes = imageFileTypes,\n      sizeLimit = DEFAULT_SIZE_LIMIT,\n      maxFiles,\n      onChange,\n      id = DEFAULT_FILE_INPUT_ID,\n      uploadButtonTitle,\n    },\n    ref: ForwardedRef<HTMLInputElement | null>,\n  ) => {\n    const { formatMessage } = useIntl();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useImperativeHandle(ref, () => {\n      if (!inputRef.current) {\n        throw new Error('inputRef.current is null');\n      }\n      return inputRef.current;\n    }, []);\n\n    const [isDropping, setIsDropping] = useState(false);\n\n    const dragCounter = useRef(0);\n\n    const reset = (): void => {\n      dragCounter.current = 0;\n      setIsDropping(false);\n    };\n\n    const onDragLeave = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current -= 1;\n      if (dragCounter.current === 0) {\n        setIsDropping(false);\n      }\n    };\n\n    const onDragEnter = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current += 1;\n      if (dragCounter.current === 1) {\n        setIsDropping(true);\n      }\n    };\n\n    const onDrop = (event: DragEvent): void => {\n      event.preventDefault();\n      reset();\n      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n        onChange(event.dataTransfer.files);\n      }\n    };\n\n    const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n      const { files } = event.target;\n\n      if (files) {\n        onChange(files);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    };\n\n    const getFileTypesDescription = (): string => {\n      if (fileTypes === '*') {\n        return fileTypes;\n      }\n\n      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n    };\n\n    function getDescription() {\n      if (description) {\n        return description;\n      }\n\n      const fileTypesDescription = getFileTypesDescription();\n\n      const derivedFileDescription =\n        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n      return formatMessage(MESSAGES.instructions, {\n        fileTypes: derivedFileDescription,\n        size: Math.round(sizeLimit / 1000),\n      });\n    }\n\n    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n      const areAllFilesAllowed = getFileTypesDescription() === '*';\n\n      if (areAllFilesAllowed) {\n        return {}; // file input by default allows all files\n      }\n\n      if (Array.isArray(fileTypes)) {\n        return { accept: fileTypes.join(',') };\n      }\n\n      return { accept: fileTypes as string };\n    }\n\n    function renderDescription() {\n      return (\n        <Body className=\"np-upload-input__text\">\n          {getDescription()}\n          {maxFiles && (\n            <>\n              <br />\n              {formatMessage(MESSAGES.maximumFiles, { maxFiles })}\n            </>\n          )}\n        </Body>\n      );\n    }\n\n    function renderButtonTitle() {\n      if (uploadButtonTitle) {\n        return uploadButtonTitle;\n      }\n      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n    }\n\n    return (\n      <label\n        className={clsx(\n          'np-upload-input__upload-button',\n          `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,\n          `np-upload-input__upload-button--${withEntries ? 'with-entries' : 'without-entries'}`,\n          {\n            'is-dropping': isDropping,\n          },\n        )}\n        htmlFor={id}\n        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n      >\n        <span className=\"np-upload-input__icon\">\n          <UploadIcon size={24} className=\"text-link\" />\n        </span>\n        <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n          <Body type={Typography.BODY_LARGE_BOLD} className=\"np-upload-input__title\">\n            {renderButtonTitle()}\n          </Body>\n          {renderDescription()}\n        </div>\n        <input\n          className=\"np-upload-input__upload-button-input sr-only\"\n          type=\"file\"\n          id={id}\n          {...getAcceptedTypes()}\n          {...(multiple && { multiple: true })}\n          ref={inputRef}\n          disabled={disabled}\n          name=\"file-upload\"\n          data-testid={TEST_IDS.uploadInput}\n          onChange={filesSelected}\n        />\n        {isDropping && (\n          <div\n            className={clsx(\n              'np-upload-input__drop-file-overlay',\n              'droppable-card',\n              'droppable-dropping-card',\n              'droppable-card-content',\n            )}\n          >\n            <PlusIcon className=\"m-x-1\" size={24} />\n            <div>{formatMessage(MESSAGES.dropFile)}</div>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\nUploadButton.displayName = 'UploadButton';\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","forwardRef","disabled","withEntries","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","ref","formatMessage","useIntl","inputRef","useRef","useImperativeHandle","current","Error","isDropping","setIsDropping","useState","dragCounter","reset","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","children","_Fragment","_jsx","maximumFiles","renderButtonTitle","uploadFiles","uploadFile","clsx","htmlFor","UploadIcon","mediaBody","type","Typography","BODY_LARGE_BOLD","name","uploadInput","PlusIcon","dropFile","displayName"],"mappings":"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"}
+{"version":3,"file":"UploadButton.js","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {\n  ChangeEvent,\n  DragEvent,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string | readonly string[] | readonly FileType[];\nexport type UploadButtonProps = {\n  /**\n   * Disable the upload button if your app is not yet ready to accept uploads\n   */\n  disabled?: boolean;\n\n  /**\n   * Should be true, if the UploadInput has at least 1\n   * file (valid or invalid) listed.\n   */\n  withEntries?: boolean;\n\n  /**\n   * Allow multiple file uploads\n   */\n  multiple?: boolean;\n\n  /**\n   * List of allowed filetypes, eg. '*' | '.zip,application/zip' | ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n   */\n  fileTypes?: AllowedFileTypes;\n\n  /**\n   * Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n   */\n  sizeLimit?: number;\n\n  /**\n   * Description for the upload button\n   */\n  description?: string | undefined;\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Called when some files were successfully selected\n   *\n   * @param files\n   */\n  onChange: (files: FileList) => void;\n\n  /**\n   * Id for the upload input\n   */\n  id?: string;\n\n  /**\n   * Title for the upload button\n   */\n  uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n  uploadInput = 'uploadInput',\n  mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n  event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(\n  (\n    {\n      disabled,\n      withEntries,\n      multiple,\n      description,\n      fileTypes = imageFileTypes,\n      sizeLimit = DEFAULT_SIZE_LIMIT,\n      maxFiles,\n      onChange,\n      id = DEFAULT_FILE_INPUT_ID,\n      uploadButtonTitle,\n    },\n    ref: ForwardedRef<HTMLInputElement | null>,\n  ) => {\n    const { formatMessage } = useIntl();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useImperativeHandle(ref, () => {\n      if (!inputRef.current) {\n        throw new Error('inputRef.current is null');\n      }\n      return inputRef.current;\n    }, []);\n\n    const [isDropping, setIsDropping] = useState(false);\n\n    const dragCounter = useRef(0);\n\n    const reset = (): void => {\n      dragCounter.current = 0;\n      setIsDropping(false);\n    };\n\n    const onDragLeave = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current -= 1;\n      if (dragCounter.current === 0) {\n        setIsDropping(false);\n      }\n    };\n\n    const onDragEnter = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current += 1;\n      if (dragCounter.current === 1) {\n        setIsDropping(true);\n      }\n    };\n\n    const onDrop = (event: DragEvent): void => {\n      event.preventDefault();\n      reset();\n      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n        onChange(event.dataTransfer.files);\n      }\n    };\n\n    const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n      const { files } = event.target;\n\n      if (files) {\n        onChange(files);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    };\n\n    const getFileTypesDescription = (): string => {\n      if (fileTypes === '*') {\n        return fileTypes;\n      }\n\n      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n    };\n\n    function getDescription() {\n      if (description) {\n        return description;\n      }\n\n      const fileTypesDescription = getFileTypesDescription();\n\n      const derivedFileDescription =\n        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n      if (sizeLimit >= Number.MAX_SAFE_INTEGER) {\n        return derivedFileDescription;\n      }\n\n      return formatMessage(MESSAGES.instructions, {\n        fileTypes: derivedFileDescription,\n        size: Math.round(sizeLimit / 1000),\n      });\n    }\n\n    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n      const areAllFilesAllowed = getFileTypesDescription() === '*';\n\n      if (areAllFilesAllowed) {\n        return {}; // file input by default allows all files\n      }\n\n      if (Array.isArray(fileTypes)) {\n        return { accept: fileTypes.join(',') };\n      }\n\n      return { accept: fileTypes as string };\n    }\n\n    function renderDescription() {\n      return (\n        <Body className=\"np-upload-input__text\">\n          {getDescription()}\n          {maxFiles && (\n            <>\n              <br />\n              {formatMessage(MESSAGES.maximumFiles, { maxFiles })}\n            </>\n          )}\n        </Body>\n      );\n    }\n\n    function renderButtonTitle() {\n      if (uploadButtonTitle) {\n        return uploadButtonTitle;\n      }\n      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n    }\n\n    return (\n      <label\n        className={clsx(\n          'np-upload-input__upload-button',\n          `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,\n          `np-upload-input__upload-button--${withEntries ? 'with-entries' : 'without-entries'}`,\n          {\n            'is-dropping': isDropping,\n          },\n        )}\n        htmlFor={id}\n        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n      >\n        <span className=\"np-upload-input__icon\">\n          <UploadIcon size={24} className=\"text-link\" />\n        </span>\n        <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n          <Body type={Typography.BODY_LARGE_BOLD} className=\"np-upload-input__title\">\n            {renderButtonTitle()}\n          </Body>\n          {renderDescription()}\n        </div>\n        <input\n          className=\"np-upload-input__upload-button-input sr-only\"\n          type=\"file\"\n          id={id}\n          {...getAcceptedTypes()}\n          {...(multiple && { multiple: true })}\n          ref={inputRef}\n          disabled={disabled}\n          name=\"file-upload\"\n          data-testid={TEST_IDS.uploadInput}\n          onChange={filesSelected}\n        />\n        {isDropping && (\n          <div\n            className={clsx(\n              'np-upload-input__drop-file-overlay',\n              'droppable-card',\n              'droppable-dropping-card',\n              'droppable-card-content',\n            )}\n          >\n            <PlusIcon className=\"m-x-1\" size={24} />\n            <div>{formatMessage(MESSAGES.dropFile)}</div>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\nUploadButton.displayName = 'UploadButton';\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","forwardRef","disabled","withEntries","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","ref","formatMessage","useIntl","inputRef","useRef","useImperativeHandle","current","Error","isDropping","setIsDropping","useState","dragCounter","reset","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","Number","MAX_SAFE_INTEGER","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","children","_Fragment","_jsx","maximumFiles","renderButtonTitle","uploadFiles","uploadFile","clsx","htmlFor","UploadIcon","mediaBody","type","Typography","BODY_LARGE_BOLD","name","uploadInput","PlusIcon","dropFile","displayName"],"mappings":"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"}

package/build/uploadInput/uploadButton/UploadButton.mjs

@@ -109,6 +109,9 @@ const UploadButton = /*#__PURE__*/forwardRef(({
     }
     const fileTypesDescription = getFileTypesDescription();
     const derivedFileDescription = fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
+    if (sizeLimit >= Number.MAX_SAFE_INTEGER) {
+      return derivedFileDescription;
+    }
     return formatMessage(MESSAGES.instructions, {
       fileTypes: derivedFileDescription,
       size: Math.round(sizeLimit / 1000)

package/build/uploadInput/uploadButton/UploadButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.mjs","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {\n  ChangeEvent,\n  DragEvent,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string | readonly string[] | readonly FileType[];\nexport type UploadButtonProps = {\n  /**\n   * Disable the upload button if your app is not yet ready to accept uploads\n   */\n  disabled?: boolean;\n\n  /**\n   * Should be true, if the UploadInput has at least 1\n   * file (valid or invalid) listed.\n   */\n  withEntries?: boolean;\n\n  /**\n   * Allow multiple file uploads\n   */\n  multiple?: boolean;\n\n  /**\n   * List of allowed filetypes, eg. '*' | '.zip,application/zip' | ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n   */\n  fileTypes?: AllowedFileTypes;\n\n  /**\n   * Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n   */\n  sizeLimit?: number;\n\n  /**\n   * Description for the upload button\n   */\n  description?: string | undefined;\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Called when some files were successfully selected\n   *\n   * @param files\n   */\n  onChange: (files: FileList) => void;\n\n  /**\n   * Id for the upload input\n   */\n  id?: string;\n\n  /**\n   * Title for the upload button\n   */\n  uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n  uploadInput = 'uploadInput',\n  mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n  event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(\n  (\n    {\n      disabled,\n      withEntries,\n      multiple,\n      description,\n      fileTypes = imageFileTypes,\n      sizeLimit = DEFAULT_SIZE_LIMIT,\n      maxFiles,\n      onChange,\n      id = DEFAULT_FILE_INPUT_ID,\n      uploadButtonTitle,\n    },\n    ref: ForwardedRef<HTMLInputElement | null>,\n  ) => {\n    const { formatMessage } = useIntl();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useImperativeHandle(ref, () => {\n      if (!inputRef.current) {\n        throw new Error('inputRef.current is null');\n      }\n      return inputRef.current;\n    }, []);\n\n    const [isDropping, setIsDropping] = useState(false);\n\n    const dragCounter = useRef(0);\n\n    const reset = (): void => {\n      dragCounter.current = 0;\n      setIsDropping(false);\n    };\n\n    const onDragLeave = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current -= 1;\n      if (dragCounter.current === 0) {\n        setIsDropping(false);\n      }\n    };\n\n    const onDragEnter = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current += 1;\n      if (dragCounter.current === 1) {\n        setIsDropping(true);\n      }\n    };\n\n    const onDrop = (event: DragEvent): void => {\n      event.preventDefault();\n      reset();\n      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n        onChange(event.dataTransfer.files);\n      }\n    };\n\n    const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n      const { files } = event.target;\n\n      if (files) {\n        onChange(files);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    };\n\n    const getFileTypesDescription = (): string => {\n      if (fileTypes === '*') {\n        return fileTypes;\n      }\n\n      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n    };\n\n    function getDescription() {\n      if (description) {\n        return description;\n      }\n\n      const fileTypesDescription = getFileTypesDescription();\n\n      const derivedFileDescription =\n        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n      return formatMessage(MESSAGES.instructions, {\n        fileTypes: derivedFileDescription,\n        size: Math.round(sizeLimit / 1000),\n      });\n    }\n\n    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n      const areAllFilesAllowed = getFileTypesDescription() === '*';\n\n      if (areAllFilesAllowed) {\n        return {}; // file input by default allows all files\n      }\n\n      if (Array.isArray(fileTypes)) {\n        return { accept: fileTypes.join(',') };\n      }\n\n      return { accept: fileTypes as string };\n    }\n\n    function renderDescription() {\n      return (\n        <Body className=\"np-upload-input__text\">\n          {getDescription()}\n          {maxFiles && (\n            <>\n              <br />\n              {formatMessage(MESSAGES.maximumFiles, { maxFiles })}\n            </>\n          )}\n        </Body>\n      );\n    }\n\n    function renderButtonTitle() {\n      if (uploadButtonTitle) {\n        return uploadButtonTitle;\n      }\n      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n    }\n\n    return (\n      <label\n        className={clsx(\n          'np-upload-input__upload-button',\n          `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,\n          `np-upload-input__upload-button--${withEntries ? 'with-entries' : 'without-entries'}`,\n          {\n            'is-dropping': isDropping,\n          },\n        )}\n        htmlFor={id}\n        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n      >\n        <span className=\"np-upload-input__icon\">\n          <UploadIcon size={24} className=\"text-link\" />\n        </span>\n        <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n          <Body type={Typography.BODY_LARGE_BOLD} className=\"np-upload-input__title\">\n            {renderButtonTitle()}\n          </Body>\n          {renderDescription()}\n        </div>\n        <input\n          className=\"np-upload-input__upload-button-input sr-only\"\n          type=\"file\"\n          id={id}\n          {...getAcceptedTypes()}\n          {...(multiple && { multiple: true })}\n          ref={inputRef}\n          disabled={disabled}\n          name=\"file-upload\"\n          data-testid={TEST_IDS.uploadInput}\n          onChange={filesSelected}\n        />\n        {isDropping && (\n          <div\n            className={clsx(\n              'np-upload-input__drop-file-overlay',\n              'droppable-card',\n              'droppable-dropping-card',\n              'droppable-card-content',\n            )}\n          >\n            <PlusIcon className=\"m-x-1\" size={24} />\n            <div>{formatMessage(MESSAGES.dropFile)}</div>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\nUploadButton.displayName = 'UploadButton';\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","forwardRef","disabled","withEntries","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","ref","formatMessage","useIntl","inputRef","useRef","useImperativeHandle","current","Error","isDropping","setIsDropping","useState","dragCounter","reset","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","children","_Fragment","_jsx","maximumFiles","renderButtonTitle","uploadFiles","uploadFile","clsx","htmlFor","UploadIcon","mediaBody","type","Typography","BODY_LARGE_BOLD","name","uploadInput","PlusIcon","dropFile","displayName"],"mappings":"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"}
+{"version":3,"file":"UploadButton.mjs","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {\n  ChangeEvent,\n  DragEvent,\n  useRef,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string | readonly string[] | readonly FileType[];\nexport type UploadButtonProps = {\n  /**\n   * Disable the upload button if your app is not yet ready to accept uploads\n   */\n  disabled?: boolean;\n\n  /**\n   * Should be true, if the UploadInput has at least 1\n   * file (valid or invalid) listed.\n   */\n  withEntries?: boolean;\n\n  /**\n   * Allow multiple file uploads\n   */\n  multiple?: boolean;\n\n  /**\n   * List of allowed filetypes, eg. '*' | '.zip,application/zip' | ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n   */\n  fileTypes?: AllowedFileTypes;\n\n  /**\n   * Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n   */\n  sizeLimit?: number;\n\n  /**\n   * Description for the upload button\n   */\n  description?: string | undefined;\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Called when some files were successfully selected\n   *\n   * @param files\n   */\n  onChange: (files: FileList) => void;\n\n  /**\n   * Id for the upload input\n   */\n  id?: string;\n\n  /**\n   * Title for the upload button\n   */\n  uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n  uploadInput = 'uploadInput',\n  mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n  event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(\n  (\n    {\n      disabled,\n      withEntries,\n      multiple,\n      description,\n      fileTypes = imageFileTypes,\n      sizeLimit = DEFAULT_SIZE_LIMIT,\n      maxFiles,\n      onChange,\n      id = DEFAULT_FILE_INPUT_ID,\n      uploadButtonTitle,\n    },\n    ref: ForwardedRef<HTMLInputElement | null>,\n  ) => {\n    const { formatMessage } = useIntl();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useImperativeHandle(ref, () => {\n      if (!inputRef.current) {\n        throw new Error('inputRef.current is null');\n      }\n      return inputRef.current;\n    }, []);\n\n    const [isDropping, setIsDropping] = useState(false);\n\n    const dragCounter = useRef(0);\n\n    const reset = (): void => {\n      dragCounter.current = 0;\n      setIsDropping(false);\n    };\n\n    const onDragLeave = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current -= 1;\n      if (dragCounter.current === 0) {\n        setIsDropping(false);\n      }\n    };\n\n    const onDragEnter = (event: DragEvent): void => {\n      event.preventDefault();\n      dragCounter.current += 1;\n      if (dragCounter.current === 1) {\n        setIsDropping(true);\n      }\n    };\n\n    const onDrop = (event: DragEvent): void => {\n      event.preventDefault();\n      reset();\n      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n        onChange(event.dataTransfer.files);\n      }\n    };\n\n    const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n      const { files } = event.target;\n\n      if (files) {\n        onChange(files);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    };\n\n    const getFileTypesDescription = (): string => {\n      if (fileTypes === '*') {\n        return fileTypes;\n      }\n\n      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n    };\n\n    function getDescription() {\n      if (description) {\n        return description;\n      }\n\n      const fileTypesDescription = getFileTypesDescription();\n\n      const derivedFileDescription =\n        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n      if (sizeLimit >= Number.MAX_SAFE_INTEGER) {\n        return derivedFileDescription;\n      }\n\n      return formatMessage(MESSAGES.instructions, {\n        fileTypes: derivedFileDescription,\n        size: Math.round(sizeLimit / 1000),\n      });\n    }\n\n    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n      const areAllFilesAllowed = getFileTypesDescription() === '*';\n\n      if (areAllFilesAllowed) {\n        return {}; // file input by default allows all files\n      }\n\n      if (Array.isArray(fileTypes)) {\n        return { accept: fileTypes.join(',') };\n      }\n\n      return { accept: fileTypes as string };\n    }\n\n    function renderDescription() {\n      return (\n        <Body className=\"np-upload-input__text\">\n          {getDescription()}\n          {maxFiles && (\n            <>\n              <br />\n              {formatMessage(MESSAGES.maximumFiles, { maxFiles })}\n            </>\n          )}\n        </Body>\n      );\n    }\n\n    function renderButtonTitle() {\n      if (uploadButtonTitle) {\n        return uploadButtonTitle;\n      }\n      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n    }\n\n    return (\n      <label\n        className={clsx(\n          'np-upload-input__upload-button',\n          `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,\n          `np-upload-input__upload-button--${withEntries ? 'with-entries' : 'without-entries'}`,\n          {\n            'is-dropping': isDropping,\n          },\n        )}\n        htmlFor={id}\n        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n      >\n        <span className=\"np-upload-input__icon\">\n          <UploadIcon size={24} className=\"text-link\" />\n        </span>\n        <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n          <Body type={Typography.BODY_LARGE_BOLD} className=\"np-upload-input__title\">\n            {renderButtonTitle()}\n          </Body>\n          {renderDescription()}\n        </div>\n        <input\n          className=\"np-upload-input__upload-button-input sr-only\"\n          type=\"file\"\n          id={id}\n          {...getAcceptedTypes()}\n          {...(multiple && { multiple: true })}\n          ref={inputRef}\n          disabled={disabled}\n          name=\"file-upload\"\n          data-testid={TEST_IDS.uploadInput}\n          onChange={filesSelected}\n        />\n        {isDropping && (\n          <div\n            className={clsx(\n              'np-upload-input__drop-file-overlay',\n              'droppable-card',\n              'droppable-dropping-card',\n              'droppable-card-content',\n            )}\n          >\n            <PlusIcon className=\"m-x-1\" size={24} />\n            <div>{formatMessage(MESSAGES.dropFile)}</div>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\nUploadButton.displayName = 'UploadButton';\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","forwardRef","disabled","withEntries","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","ref","formatMessage","useIntl","inputRef","useRef","useImperativeHandle","current","Error","isDropping","setIsDropping","useState","dragCounter","reset","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","Number","MAX_SAFE_INTEGER","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","children","_Fragment","_jsx","maximumFiles","renderButtonTitle","uploadFiles","uploadFile","clsx","htmlFor","UploadIcon","mediaBody","type","Typography","BODY_LARGE_BOLD","name","uploadInput","PlusIcon","dropFile","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-cb7b730",
+  "version": "0.0.0-experimental-9463364",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,20 +49,10 @@
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-viewport": "^8.6.14",
+    "@storybook/addon-a11y": "^9.0.17",
+    "@storybook/addon-docs": "^9.0.17",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/components": "^8.6.14",
-    "@storybook/core-events": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/react-webpack5": "^9.0.17",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -81,7 +71,7 @@
     "@wise/art": "^2.23.0",
     "@wise/eslint-config": "^12.4.0",
     "babel-plugin-formatjs": "^10.5.39",
-    "eslint": "^9.30.1",
+    "eslint": "^9.31.0",
     "gulp": "^5.0.1",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^29.7.0",
@@ -90,7 +80,9 @@
     "react-intl": "^7.1.11",
     "rollup": "^4.44.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.17",
+    "storybook-addon-tag-badges": "^2.0.1",
+    "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
     "@wise/components-theming": "1.6.4",

package/src/accordion/Accordion.css

@@ -1,21 +1,24 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-accordion-item {
+.np-accordion-item {
   display: block;
   width: 100%;
-}.np-accordion-item--open .media {
+}
+.np-accordion-item--open .media {
   border: 0 !important;
-}.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
+}
+.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
   background-color: transparent;
-}.np-accordion-item.np-accordion-item--dark .media-body,
+}
+.np-accordion-item.np-accordion-item--dark .media-body,
 .np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
-}.np-accordion-item__content {
+}
+.np-accordion-item__content {
   padding: 0 12px 24px 12px;
   padding: 0 var(--size-12) var(--size-24) var(--size-12);
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-}@media (min-width: 480px) {
+}
+@media (min-width: 480px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }
@@ -24,22 +27,28 @@
     padding-left: 0;
     padding-left: initial;
   }
-}.np-accordion-item .np-option .np-option__title {
+}
+.np-accordion-item .np-option .np-option__title {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.np-theme-personal .np-accordion-item--with-media .media {
+}
+.np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
   align-items: center;
-}.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
   padding: 0 56px 16px;
   padding: 0 var(--size-56) var(--size-16);
-}.np-theme-personal .np-accordion-item--with-icon .media {
+}
+.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
-}.np-theme-personal .np-accordion-item .decision__title {
+}
+.np-theme-personal .np-accordion-item .decision__title {
   font-size: 1.125rem;
   font-size: var(--font-size-18);
-}.np-theme-personal .np-accordion-item .np-option .np-option__title {
+}
+.np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-bottom: 0;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
@@ -47,14 +56,16 @@
   letter-spacing: var(--letter-spacing-negative-xs);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
-}.np-theme-personal .np-accordion-item .np-option .circle-sm {
+}
+.np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
   width: 24px;
   width: var(--size-24);
   height: 24px;
   height: var(--size-24);
   border-radius: 0;
-}.np-theme-personal .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item__content {
   padding: 0 56px 16px 16px;
   padding: 0 var(--size-56) var(--size-16) var(--size-16);
   border-bottom: none;

package/src/accordion/Accordion.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
 
 import { Scroll, Size } from '../common';

package/src/actionButton/ActionButton.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Settings } from '@transferwise/icons';
 
 import { storyConfig } from '../test-utils/story-config';
@@ -12,7 +12,8 @@ import ActionButton from './ActionButton';
  */
 export default {
   component: ActionButton,
-  title: 'Actions/ActionButton (Deprecated)',
+  title: 'Actions/ActionButton',
+  tags: ['deprecated'],
 } satisfies Meta<typeof ActionButton>;
 
 type Story = StoryObj<typeof ActionButton>;

package/src/actionOption/ActionOption.story.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
 import { Nudge, Title, Typography } from '..';

package/src/alert/Alert.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { lorem40 } from '../test-utils';

package/src/alert/Alert.tests.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '..';
 import Alert, { type AlertProps } from './Alert';
 

package/src/avatar/Avatar.css

@@ -1,13 +1,12 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.tw-avatar {
+.tw-avatar {
   position: relative;
   border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
-}.tw-avatar .tw-avatar__content {
+}
+.tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
@@ -22,58 +21,73 @@
   max-width: 100%;
   overflow: hidden;
   width: 100%;
-}.tw-avatar--outlined {
+}
+.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
-}.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
-}.tw-avatar--thumbnail * {
+}
+.tw-avatar--thumbnail * {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-}.tw-avatar--icon * {
+}
+.tw-avatar--icon * {
   max-height: 100%;
   max-width: 100%;
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
   color: #37517e;
   color: var(--color-content-primary);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-}.tw-avatar.tw-avatar--branded .tw-avatar__content {
+}
+.tw-avatar.tw-avatar--branded .tw-avatar__content {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
-}.tw-avatar--24 {
+}
+.tw-avatar--24 {
   min-width: 24px;
   width: 24px;
   height: 24px;
-}.tw-avatar--24.tw-avatar--emoji,
+}
+.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
-}.tw-avatar--24.tw-avatar--initials {
+}
+.tw-avatar--24.tw-avatar--initials {
   font-size: 8.4px;
-}.tw-avatar--24.tw-avatar--branded {
+}
+.tw-avatar--24.tw-avatar--branded {
   font-size: 10.8px;
-}.tw-avatar--24.tw-avatar--outlined {
+}
+.tw-avatar--24.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--24.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,25 +97,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--40 {
+}
+.tw-avatar--40 {
   min-width: 40px;
   width: 40px;
   height: 40px;
-}.tw-avatar--40.tw-avatar--emoji,
+}
+.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
-}.tw-avatar--40.tw-avatar--initials {
+}
+.tw-avatar--40.tw-avatar--initials {
   font-size: 14px;
-}.tw-avatar--40.tw-avatar--branded {
+}
+.tw-avatar--40.tw-avatar--branded {
   font-size: 18px;
-}.tw-avatar--40.tw-avatar--outlined {
+}
+.tw-avatar--40.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--40.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -111,25 +132,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--48 {
+}
+.tw-avatar--48 {
   min-width: 48px;
   width: 48px;
   height: 48px;
-}.tw-avatar--48.tw-avatar--emoji,
+}
+.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
-}.tw-avatar--48.tw-avatar--initials {
+}
+.tw-avatar--48.tw-avatar--initials {
   font-size: 16.8px;
-}.tw-avatar--48.tw-avatar--branded {
+}
+.tw-avatar--48.tw-avatar--branded {
   font-size: 21.6px;
-}.tw-avatar--48.tw-avatar--outlined {
+}
+.tw-avatar--48.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--48.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -139,25 +167,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--56 {
+}
+.tw-avatar--56 {
   min-width: 56px;
   width: 56px;
   height: 56px;
-}.tw-avatar--56.tw-avatar--emoji,
+}
+.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
-}.tw-avatar--56.tw-avatar--initials {
+}
+.tw-avatar--56.tw-avatar--initials {
   font-size: 19.6px;
-}.tw-avatar--56.tw-avatar--branded {
+}
+.tw-avatar--56.tw-avatar--branded {
   font-size: 25.2px;
-}.tw-avatar--56.tw-avatar--outlined {
+}
+.tw-avatar--56.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--56.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -167,25 +202,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--72 {
+}
+.tw-avatar--72 {
   min-width: 72px;
   width: 72px;
   height: 72px;
-}.tw-avatar--72.tw-avatar--emoji,
+}
+.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
-}.tw-avatar--72.tw-avatar--initials {
+}
+.tw-avatar--72.tw-avatar--initials {
   font-size: 25.2px;
-}.tw-avatar--72.tw-avatar--branded {
+}
+.tw-avatar--72.tw-avatar--branded {
   font-size: 32.4px;
-}.tw-avatar--72.tw-avatar--outlined {
+}
+.tw-avatar--72.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--72.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -195,11 +237,14 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar img {
+}
+.tw-avatar img {
   width: 100%;
   height: 100%;
-}.np-theme-personal .tw-avatar--outlined {
+}
+.np-theme-personal .tw-avatar--outlined {
   border-color: var(--color-interactive-primary);
-}.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }

package/src/avatar/Avatar.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import * as wiseIcons from '@transferwise/icons';
 import { Flag } from '@wise/art';
 
@@ -12,7 +12,8 @@ import Avatar, { AvatarType } from '.';
  */
 export default {
   component: Avatar,
-  title: 'Content/Avatar (Deprecated)',
+  title: 'Content/Avatar',
+  tags: ['deprecated'],
 } satisfies Meta<typeof Avatar>;
 
 type Story = StoryObj<typeof Avatar>;

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
 import { Flag } from '@wise/art';