@transferwise/components 0.0.0-experimental-3d57e31 → 0.0.0-experimental-1f719c5

package/build/uploadInput/UploadInput.js

@@ -3,7 +3,7 @@
 var clsx = require('clsx');
 var React = require('react');
 var reactIntl = require('react-intl');
-var Button_resolver = require('../button/Button.resolver.js');
+var Button = require('../button/Button.js');
 require('../common/theme.js');
 require('../common/direction.js');
 var control = require('../common/propsValues/control.js');
@@ -294,13 +294,13 @@ const UploadInput = ({
       body: deleteConfirm?.body !== undefined ? deleteConfirm.body : formatMessage(UploadInput_messages.deleteModalBody),
       open: !!markedFileForDelete,
       footer: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
           block: true,
           onClick: () => {
             setMarkedFileForDelete(null);
           },
           children: deleteConfirm?.cancelText || formatMessage(UploadInput_messages.deleteModalCancelButtonText)
-        }), /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
           block: true,
           priority: control.Priority.SECONDARY,
           type: control.ControlType.NEGATIVE,

package/build/uploadInput/UploadInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over a allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & Pick<\n  UploadButtonProps,\n  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n  /**\n   * Focuses the UploadItem component.\n   */\n  focus: () => void;\n\n  /**\n   * Required id of the UploadItem component.\n   */\n  id: string | number;\n\n  /**\n   * Optional status of the UploadItem component.\n   */\n  status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const { formatMessage } = useIntl();\n  const uploadInputRef = useRef<HTMLInputElement | null>(null);\n  let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n    setUploadedFiles(updateFn);\n    uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n  }\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    updateFileList((list) => [...list, recentUploadedFile]);\n  }\n\n  function removeFileFromList(file: UploadedFile) {\n    updateFileList((list) =>\n      list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n    );\n    fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n  }\n\n  function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n    updateFileList((list) =>\n      list.map((fileInList) =>\n        fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n      ),\n    );\n  }\n\n  const removeFile = async (file: UploadedFile) => {\n    const { id, status } = file;\n    fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n    if (status === Status.FAILED) {\n      removeFileFromList(file);\n      return Promise.resolve();\n    }\n\n    if (onDeleteFile && id) {\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      return onDeleteFile(id)\n        .then(() => {\n          removeFileFromList(file);\n        })\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n\n    const failedUpload = {\n      id: generateFileId(file),\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      const formData = new FormData();\n\n      if (file) {\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        if (!isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n        if (existingFile) {\n          removeFileFromList(existingFile);\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id: generateFileId(file),\n          filename: file.name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (onFilesChange && mounted) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(\n    uploadInputRef.current,\n  );\n\n  const handleFocus = (fileId: string | number) => {\n    fileRefs = fileRefs.filter((ref) => {\n      return ref && ref.id !== markedFileForDelete?.id;\n    });\n\n    const filesCount = fileRefs.length;\n    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;\n\n    if (filesCount > 1) {\n      const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n      const currentFileId = fileRefs?.[currentFileIndex]?.id;\n      const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n      // if last file, select a previous one\n      if (currentFileId === lastFileId) {\n        next = fileRefs[filesCount - 2];\n      } else {\n        next = fileRefs[currentFileIndex + 1];\n      }\n    }\n    setNextFocusable(next);\n  };\n\n  const handleRefocus = () => {\n    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {\n      setTimeout(() => {\n        nextFocusable.focus();\n      }, 0);\n    }\n  };\n\n  return (\n    <>\n      <div\n        role=\"group\"\n        className={clsx('np-upload-input', className, { disabled })}\n        {...inputAttributes}\n      >\n        <div\n          className=\"np-upload-input__section\"\n          aria-live=\"polite\"\n          aria-relevant=\"all\"\n          role=\"region\"\n        >\n          {uploadedFiles.map((file, index) => (\n            <UploadItem\n              key={file.id}\n              ref={(el: UploadItemRef | null) => {\n                if (\n                  el &&\n                  el.id !== markedFileForDelete?.id &&\n                  !fileRefs.some((ref) => ref && ref.id === el.id) &&\n                  el.status !== 'processing'\n                ) {\n                  fileRefs.push(el);\n                }\n              }}\n              file={file}\n              singleFileUpload={!multiple}\n              canDelete={\n                (!!onDeleteFile || file.status === Status.FAILED) &&\n                (!file.status || !PROGRESS_STATUSES.has(file.status))\n              }\n              onDelete={\n                file.status === Status.FAILED\n                  ? async () => {\n                      await removeFile(file);\n                      handleRefocus();\n                    }\n                  : () => setMarkedFileForDelete(file)\n              }\n              onDownload={onDownload}\n              onFocus={() => handleFocus(file.id)}\n            />\n          ))}\n        </div>\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n            <UploadButton\n              ref={uploadInputRef}\n              id={id}\n              uploadButtonTitle={uploadButtonTitle}\n              disabled={areMaximumFilesUploadedAlready() || disabled}\n              multiple={multiple}\n              fileTypes={fileTypes}\n              sizeLimit={sizeLimit}\n              description={description}\n              maxFiles={maxFiles}\n              withEntries={Boolean(uploadedFiles.length)}\n              onChange={addFiles}\n            />\n          </div>\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              tabIndex={markedFileForDelete ? 0 : -1}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  void removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onUnmount={handleRefocus}\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","currentFileIndex","findIndex","currentFileId","lastFileId","handleRefocus","focus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}
+{"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over a allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & Pick<\n  UploadButtonProps,\n  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n  /**\n   * Focuses the UploadItem component.\n   */\n  focus: () => void;\n\n  /**\n   * Required id of the UploadItem component.\n   */\n  id: string | number;\n\n  /**\n   * Optional status of the UploadItem component.\n   */\n  status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const { formatMessage } = useIntl();\n  const uploadInputRef = useRef<HTMLInputElement | null>(null);\n  let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n    setUploadedFiles(updateFn);\n    uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n  }\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    updateFileList((list) => [...list, recentUploadedFile]);\n  }\n\n  function removeFileFromList(file: UploadedFile) {\n    updateFileList((list) =>\n      list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n    );\n    fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n  }\n\n  function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n    updateFileList((list) =>\n      list.map((fileInList) =>\n        fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n      ),\n    );\n  }\n\n  const removeFile = async (file: UploadedFile) => {\n    const { id, status } = file;\n    fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n    if (status === Status.FAILED) {\n      removeFileFromList(file);\n      return Promise.resolve();\n    }\n\n    if (onDeleteFile && id) {\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      return onDeleteFile(id)\n        .then(() => {\n          removeFileFromList(file);\n        })\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n\n    const failedUpload = {\n      id: generateFileId(file),\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      const formData = new FormData();\n\n      if (file) {\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        if (!isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n        if (existingFile) {\n          removeFileFromList(existingFile);\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id: generateFileId(file),\n          filename: file.name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (onFilesChange && mounted) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(\n    uploadInputRef.current,\n  );\n\n  const handleFocus = (fileId: string | number) => {\n    fileRefs = fileRefs.filter((ref) => {\n      return ref && ref.id !== markedFileForDelete?.id;\n    });\n\n    const filesCount = fileRefs.length;\n    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;\n\n    if (filesCount > 1) {\n      const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n      const currentFileId = fileRefs?.[currentFileIndex]?.id;\n      const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n      // if last file, select a previous one\n      if (currentFileId === lastFileId) {\n        next = fileRefs[filesCount - 2];\n      } else {\n        next = fileRefs[currentFileIndex + 1];\n      }\n    }\n    setNextFocusable(next);\n  };\n\n  const handleRefocus = () => {\n    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {\n      setTimeout(() => {\n        nextFocusable.focus();\n      }, 0);\n    }\n  };\n\n  return (\n    <>\n      <div\n        role=\"group\"\n        className={clsx('np-upload-input', className, { disabled })}\n        {...inputAttributes}\n      >\n        <div\n          className=\"np-upload-input__section\"\n          aria-live=\"polite\"\n          aria-relevant=\"all\"\n          role=\"region\"\n        >\n          {uploadedFiles.map((file, index) => (\n            <UploadItem\n              key={file.id}\n              ref={(el: UploadItemRef | null) => {\n                if (\n                  el &&\n                  el.id !== markedFileForDelete?.id &&\n                  !fileRefs.some((ref) => ref && ref.id === el.id) &&\n                  el.status !== 'processing'\n                ) {\n                  fileRefs.push(el);\n                }\n              }}\n              file={file}\n              singleFileUpload={!multiple}\n              canDelete={\n                (!!onDeleteFile || file.status === Status.FAILED) &&\n                (!file.status || !PROGRESS_STATUSES.has(file.status))\n              }\n              onDelete={\n                file.status === Status.FAILED\n                  ? async () => {\n                      await removeFile(file);\n                      handleRefocus();\n                    }\n                  : () => setMarkedFileForDelete(file)\n              }\n              onDownload={onDownload}\n              onFocus={() => handleFocus(file.id)}\n            />\n          ))}\n        </div>\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n            <UploadButton\n              ref={uploadInputRef}\n              id={id}\n              uploadButtonTitle={uploadButtonTitle}\n              disabled={areMaximumFilesUploadedAlready() || disabled}\n              multiple={multiple}\n              fileTypes={fileTypes}\n              sizeLimit={sizeLimit}\n              description={description}\n              maxFiles={maxFiles}\n              withEntries={Boolean(uploadedFiles.length)}\n              onChange={addFiles}\n            />\n          </div>\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              tabIndex={markedFileForDelete ? 0 : -1}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  void removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onUnmount={handleRefocus}\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","currentFileIndex","findIndex","currentFileId","lastFileId","handleRefocus","focus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}

package/build/uploadInput/UploadInput.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../button/Button.resolver.mjs';
+import Button from '../button/Button.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import { Priority, ControlType } from '../common/propsValues/control.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3d57e31",
+  "version": "0.0.0-experimental-1f719c5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,13 +91,13 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-3d57e31",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "14.20.1",
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-3d57e31",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/avatarLayout/AvatarLayout.css

@@ -11,20 +11,13 @@
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
-[dir="rtl"] .np-avatar-layout-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-}
 .np-avatar-layout-diagonal-child {
   margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
-[dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-left: 0;
-  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-}
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -36,6 +29,3 @@
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
-[dir="rtl"] .np-avatar-layout-horizontal-child {
-  margin-right: calc(var(--np-avatar-offset) * -1);
-}

package/src/avatarLayout/AvatarLayout.less

@@ -13,29 +13,16 @@
           transparent 0,
           transparent calc(var(--np-avatar-size) / 2 + 2px),
           black 0);
-    
-      :dir(rtl) & {
-        mask-image:
-          radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
-            transparent 0,
-            transparent calc(var(--np-avatar-size) / 2 + 2px),
-            black 0);
-      }
     }
 
     &-child {
       margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
       margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
-
-      :dir(rtl) & {
-        margin-left: 0;
-        margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-      }
     }
   }
 
   &-horizontal {
-    width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
+    width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
     height: var(--np-avatar-layout-size);
 
     &-mask {
@@ -47,10 +34,6 @@
 
     &-child {
       margin-left: calc(var(--np-avatar-offset) * -1);
-
-      :dir(rtl) & {
-        margin-right: calc(var(--np-avatar-offset) * -1);
-      }
     }
   }
-}
+}

package/src/avatarLayout/AvatarLayout.tsx

@@ -1,6 +1,5 @@
 import { clsx } from 'clsx';
 import AvatarView, { AvatarViewProps } from '../avatarView';
-import { useDirection } from '../common/hooks';
 
 type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
   AvatarViewProps,
@@ -25,7 +24,6 @@ export default function AvatarLayout({
 }: Props) {
   const orientation =
     size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;
-  const { isRTL } = useDirection();
   const isDiagonal = orientation === 'diagonal';
   const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
   return avatars.length < 1 ? null : avatars.length === 1 ? (
@@ -40,6 +38,7 @@ export default function AvatarLayout({
         '--np-avatar-layout-size': `${size}px`,
         '--np-avatar-size': `${avatarSize}px`,
         '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
+        '--np-avatar-avatars-count': avatars.length,
       }}
       {...restProps}
     >
@@ -48,14 +47,8 @@ export default function AvatarLayout({
           // eslint-disable-next-line react/no-array-index-key
           key={index}
           className={clsx(
-            {
-              [`np-avatar-layout-${orientation}-child`]:
-                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,
-            },
-            {
-              [`np-avatar-layout-${orientation}-mask`]:
-                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,
-            },
+            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },
+            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },
           )}
         >
           <AvatarView

package/src/button/Button.css

@@ -1,212 +1,23 @@
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --color-contrast: #FFFFFF;
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-contrast);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
-}
-.wds-Button:hover {
-  background-color: var(--Button-background-hover);
-}
-.wds-Button:active {
-  background-color: var(--Button-background-active);
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button.wds-Button--disabled:hover,
-.wds-Button:disabled:hover,
-.wds-Button.wds-Button--disabled:active,
-.wds-Button:disabled:active {
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-background-hover);
-  --Button-background-active: var(--Button-secondary-background-active);
-  --Button-color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-background-hover);
-  --Button-background-active: var(--Button-tertiary-background-active);
-  --Button-color: var(--Button-tertiary-color);
-}
-.wds-Button--tertiary .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
-}
-.wds-Button--minimal {
-  --Button-background: var(--Button-minimal-background);
-  --Button-background-hover: var(--Button-minimal-background-hover);
-  --Button-background-active: var(--Button-minimal-background-active);
-  --Button-color: var(--Button-minimal-color);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-thickness: 1px;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --Button-background-hover: var(--Button-primary-negative-background-hover);
-  --Button-background-active: var(--Button-primary-negative-background-active);
-  --Button-color: var(--Button-primary-negative-color);
-}
-.wds-Button--negative.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-negative-background);
-  --Button-background-hover: var(--Button-secondary-negative-background-hover);
-  --Button-background-active: var(--Button-secondary-negative-background-active);
-  --Button-color: var(--Button-secondary-negative-color);
-}
-.wds-Button--large {
-  padding: var(--Button-large-padding);
-}
-.wds-Button--medium {
-  padding: var(--Button-medium-padding);
-}
-.wds-Button--medium:has(.wds-Button-avatars) {
-  padding-inline-start: 8px;
-  padding-inline-start: var(--size-8);
-}
-.wds-Button--medium:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
-  padding-inline-end: var(--size-8);
-}
-.wds-Button--medium .wds-Button-icon--start {
-  margin-inline-end: var(--Button-label-gap);
-}
-.wds-Button--small {
-  padding: var(--Button-small-padding);
-}
-.wds-Button--small:has(.wds-Button-icon--start) {
-  padding-inline-start: 8px;
-  padding-inline-start: var(--size-8);
-}
-.wds-Button--small:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
-  padding-inline-end: var(--size-8);
-}
-.wds-Button--block {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-content {
-  position: relative;
-}
-.wds-Button-content--loading .wds-Button-label,
-.wds-Button-content--loading .wds-Button-media,
-.wds-Button-content--loading .wds-Button-icon {
-  visibility: hidden;
-  opacity: 0;
-}
-.wds-Button-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--Button-label-gap);
+.np-btn {
   position: relative;
 }
-.wds-Button-loader {
+.np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-.wds-Button-loader .process-circle {
-  stroke: var(--Button-color);
-}
-/* RTL Styles */
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
-  transform: rotate(180deg);
-}
-[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
-  transform: rotate(180deg);
+  left: 24px;
+  left: var(--size-24);
 }
-/* Avatar border transparency */
-/* dark buttons get 20% transparency, light buttons get 12% */
-.wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
 }
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+.np-btn.np-btn-xs > span.btn-loader {
+  background-size: 16px 16px;
 }
-.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
-.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
-.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+.np-btn.np-btn-xs.btn-block > span.btn-loader {
+  top: 0;
 }
-.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
-.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+.np-btn.disabled[class] {
+  pointer-events: auto;
 }