@transferwise/components 0.0.0-experimental-43daa3c → 0.0.0-experimental-e1c4386

package/build/actionOption/ActionOption.js

@@ -22,7 +22,8 @@ const ActionOption = ({
   className,
   showMediaAtAllSizes,
   showMediaCircle,
-  isContainerAligned
+  isContainerAligned,
+  as
 }) => {
   const sharedProps = {
     media,
@@ -33,7 +34,8 @@ const ActionOption = ({
     showMediaAtAllSizes,
     showMediaCircle,
     className: classNames__default.default('tw-action-option', className),
-    isContainerAligned
+    isContainerAligned,
+    as
   };
   const getAriaLabel = () => {
     const labels = [];

package/build/actionOption/ActionOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;;;;;AAoBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;AACfC,EAAAA,kBAAAA;AAAkB,CACA,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBR,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEK,2BAAU,CAAC,kBAAkB,EAAEL,SAAS,CAAC;AACpDG,IAAAA,kBAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOV,KAAK,KAAK,QAAQ,EAAE;AAC7BU,MAAAA,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BiB,MAAAA,MAAM,CAACC,IAAI,CAAClB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOiB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXvB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYY,EAAAA,YAAY,EAAG;AAC3BX,MAAAA,OAAO,EAAEA,OAAQ;AAAAoB,MAAAA,QAAA,EAEhBzB,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
+{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;;;;;AAqBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,2BAAU,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IACpDG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/actionOption/ActionOption.mjs

@@ -16,7 +16,8 @@ const ActionOption = ({
   className,
   showMediaAtAllSizes,
   showMediaCircle,
-  isContainerAligned
+  isContainerAligned,
+  as
 }) => {
   const sharedProps = {
     media,
@@ -27,7 +28,8 @@ const ActionOption = ({
     showMediaAtAllSizes,
     showMediaCircle,
     className: classNames('tw-action-option', className),
-    isContainerAligned
+    isContainerAligned,
+    as
   };
   const getAriaLabel = () => {
     const labels = [];

package/build/actionOption/ActionOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AAoBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;AACfC,EAAAA,kBAAAA;AAAkB,CACA,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBR,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEK,UAAU,CAAC,kBAAkB,EAAEL,SAAS,CAAC;AACpDG,IAAAA,kBAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOV,KAAK,KAAK,QAAQ,EAAE;AAC7BU,MAAAA,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BiB,MAAAA,MAAM,CAACC,IAAI,CAAClB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOiB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXvB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYY,EAAAA,YAAY,EAAG;AAC3BX,MAAAA,OAAO,EAAEA,OAAQ;AAAAoB,MAAAA,QAAA,EAEhBzB,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
+{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AAqBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,UAAU,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IACpDG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/main.css

@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/build/styles/main.css

@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/build/styles/uploadInput/uploadButton/UploadButton.css

@@ -37,3 +37,8 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}

package/build/styles/uploadInput/uploadItem/UploadItem.css

@@ -3,9 +3,9 @@
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -17,27 +17,27 @@
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -52,38 +52,41 @@
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/build/types/actionOption/ActionOption.d.ts

@@ -11,7 +11,8 @@ export type ActionOptionProps = {
     priority?: PriorityPrimary | PrioritySecondary;
     showMediaCircle?: boolean;
     isContainerAligned?: boolean;
+    as?: React.ElementType;
 } & CommonProps;
-declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, }: ActionOptionProps) => import("react").JSX.Element;
+declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as, }: ActionOptionProps) => import("react").JSX.Element;
 export default ActionOption;
 //# sourceMappingURL=ActionOption.d.ts.map

package/build/types/actionOption/ActionOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAY,eAAe,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAAC;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,kJAaf,iBAAiB,gCA0CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAY,eAAe,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAAC;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/uploadInput/uploadItem/{UploadItemBody.d.ts → UploadItemLink.d.ts}

@@ -4,6 +4,6 @@ type UploadItemLinkProps = PropsWithChildren<{
     onDownload?: (event: MouseEvent) => void;
     singleFileUpload: boolean;
 }>;
-export declare const UploadItemBody: ({ children, url, onDownload, singleFileUpload, }: UploadItemLinkProps) => import("react").JSX.Element;
+export declare const UploadItemLink: ({ children, url, onDownload, singleFileUpload, }: UploadItemLinkProps) => import("react").JSX.Element;
 export {};
-//# sourceMappingURL=UploadItemBody.d.ts.map
+//# sourceMappingURL=UploadItemLink.d.ts.map

package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItemLink.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qDAKxB,mBAAmB,gCAmBrB,CAAC"}

package/build/uploadInput/uploadItem/UploadItem.js

@@ -9,7 +9,7 @@ var Body = require('../../body/Body.js');
 var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var UploadItem_messages = require('./UploadItem.messages.js');
-var UploadItemBody = require('./UploadItemBody.js');
+var UploadItemLink = require('./UploadItemLink.js');
 var jsxRuntime = require('react/jsx-runtime');
 var sentiment = require('../../common/propsValues/sentiment.js');
 var status = require('../../common/propsValues/status.js');
@@ -126,12 +126,12 @@ const UploadItem = ({
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames__default.default('np-upload-item', {
-      'np-upload-item__link': isSucceeded
+      'np-upload-item--link': isSucceeded
     }),
     "data-testid": exports.TEST_IDS.uploadItem,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-upload-item__body",
-      children: [/*#__PURE__*/jsxRuntime.jsx(UploadItemBody.UploadItemBody, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(UploadItemLink.UploadItemLink, {
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,

package/build/uploadInput/uploadItem/UploadItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemBody } from './UploadItemBody';\n\nexport type UploadItemProps = JSX.IntrinsicAttributes & {\n  file: UploadedFile;\n  /**\n   * Is this Item part of a multiple- or single-file UploadInput\n   */\n  singleFileUpload: boolean;\n  canDelete: boolean;\n  onDelete: () => void;\n\n  /**\n   * Callback to be called when the file link is clicked.\n   * When provided, you need to manually trigger actions to load/download the file.\n   *\n   * @param file\n   */\n  onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n  uploadItem = 'uploadItem',\n  mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n  file,\n  canDelete,\n  onDelete,\n  onDownload,\n  singleFileUpload,\n}: UploadItemProps) => {\n  const { formatMessage } = useIntl();\n  const { status, filename, error, errors, url } = file;\n\n  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n  const getIcon = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;\n    }\n\n    let processIndicator: React.ReactNode;\n\n    switch (status) {\n      case Status.PROCESSING:\n      case Status.PENDING:\n        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n        break;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;\n    }\n\n    return processIndicator;\n  };\n\n  const getErrorMessage = (error?: UploadError) =>\n    typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n  const getMultipleErrors = (errors?: UploadError[]) => {\n    if (!errors?.length) {\n      return null;\n    }\n\n    if (errors?.length === 1) {\n      return getErrorMessage(errors[0]);\n    }\n\n    return (\n      <ul className=\"np-upload-input-errors m-b-0\">\n        {errors.map((error, index) => {\n          // eslint-disable-next-line react/no-array-index-key\n          return <li key={index}>{getErrorMessage(error)}</li>;\n        })}\n      </ul>\n    );\n  };\n\n  const getDescription = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return (\n        <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n        </Body>\n      );\n    }\n\n    switch (status) {\n      case Status.PENDING:\n        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n      case Status.PROCESSING:\n        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        return (\n          <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n            {formatMessage(MESSAGES.uploaded)}\n          </Body>\n        );\n    }\n  };\n\n  const getTitle = () => {\n    return filename || formatMessage(MESSAGES.uploadedFile);\n  };\n\n  const onDownloadFile = (event: React.MouseEvent): void => {\n    if (onDownload) {\n      event.preventDefault();\n      onDownload(file);\n    }\n  };\n\n  return (\n    <div\n      className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}\n      data-testid={TEST_IDS.uploadItem}\n    >\n      <div className=\"np-upload-item__body\">\n        <UploadItemBody\n          url={isSucceeded ? url : undefined}\n          singleFileUpload={singleFileUpload}\n          onDownload={onDownloadFile}\n        >\n          <div className=\"np-upload-button\" aria-live=\"polite\">\n            <div className=\"media\">\n              <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n              <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n                <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n                {getDescription()}\n              </div>\n            </div>\n          </div>\n        </UploadItemBody>\n        {canDelete && (\n          <button\n            aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n            className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {\n              'np-upload-item--single-file': singleFileUpload,\n            })}\n            type=\"button\"\n            onClick={() => onDelete()}\n          >\n            <Bin size={16} />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","StatusIcon","size","Size","SMALL","sentiment","Sentiment","NEGATIVE","processIndicator","PROCESSING","PENDING","ProcessIndicator","EXTRA_SMALL","DONE","POSITIVE","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","className","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","classNames","uploadItem","_jsxs","UploadItemBody","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
+{"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = JSX.IntrinsicAttributes & {\n  file: UploadedFile;\n  /**\n   * Is this Item part of a multiple- or single-file UploadInput\n   */\n  singleFileUpload: boolean;\n  canDelete: boolean;\n  onDelete: () => void;\n\n  /**\n   * Callback to be called when the file link is clicked.\n   * When provided, you need to manually trigger actions to load/download the file.\n   *\n   * @param file\n   */\n  onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n  uploadItem = 'uploadItem',\n  mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n  file,\n  canDelete,\n  onDelete,\n  onDownload,\n  singleFileUpload,\n}: UploadItemProps) => {\n  const { formatMessage } = useIntl();\n  const { status, filename, error, errors, url } = file;\n\n  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n  const getIcon = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;\n    }\n\n    let processIndicator: React.ReactNode;\n\n    switch (status) {\n      case Status.PROCESSING:\n      case Status.PENDING:\n        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n        break;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;\n    }\n\n    return processIndicator;\n  };\n\n  const getErrorMessage = (error?: UploadError) =>\n    typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n  const getMultipleErrors = (errors?: UploadError[]) => {\n    if (!errors?.length) {\n      return null;\n    }\n\n    if (errors?.length === 1) {\n      return getErrorMessage(errors[0]);\n    }\n\n    return (\n      <ul className=\"np-upload-input-errors m-b-0\">\n        {errors.map((error, index) => {\n          // eslint-disable-next-line react/no-array-index-key\n          return <li key={index}>{getErrorMessage(error)}</li>;\n        })}\n      </ul>\n    );\n  };\n\n  const getDescription = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return (\n        <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n        </Body>\n      );\n    }\n\n    switch (status) {\n      case Status.PENDING:\n        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n      case Status.PROCESSING:\n        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        return (\n          <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n            {formatMessage(MESSAGES.uploaded)}\n          </Body>\n        );\n    }\n  };\n\n  const getTitle = () => {\n    return filename || formatMessage(MESSAGES.uploadedFile);\n  };\n\n  const onDownloadFile = (event: React.MouseEvent): void => {\n    if (onDownload) {\n      event.preventDefault();\n      onDownload(file);\n    }\n  };\n\n  return (\n    <div\n      className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n      data-testid={TEST_IDS.uploadItem}\n    >\n      <div className=\"np-upload-item__body\">\n        <UploadItemLink\n          url={isSucceeded ? url : undefined}\n          singleFileUpload={singleFileUpload}\n          onDownload={onDownloadFile}\n        >\n          <div className=\"np-upload-button\" aria-live=\"polite\">\n            <div className=\"media\">\n              <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n              <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n                <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n                {getDescription()}\n              </div>\n            </div>\n          </div>\n        </UploadItemLink>\n        {canDelete && (\n          <button\n            aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n            className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {\n              'np-upload-item--single-file': singleFileUpload,\n            })}\n            type=\"button\"\n            onClick={() => onDelete()}\n          >\n            <Bin size={16} />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","StatusIcon","size","Size","SMALL","sentiment","Sentiment","NEGATIVE","processIndicator","PROCESSING","PENDING","ProcessIndicator","EXTRA_SMALL","DONE","POSITIVE","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","className","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","classNames","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}

package/build/uploadInput/uploadItem/UploadItem.mjs

@@ -5,7 +5,7 @@ import Body from '../../body/Body.mjs';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import MESSAGES from './UploadItem.messages.mjs';
-import { UploadItemBody } from './UploadItemBody.mjs';
+import { UploadItemLink } from './UploadItemLink.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Sentiment } from '../../common/propsValues/sentiment.mjs';
 import { Status } from '../../common/propsValues/status.mjs';
@@ -118,12 +118,12 @@ const UploadItem = ({
   };
   return /*#__PURE__*/jsx("div", {
     className: classNames('np-upload-item', {
-      'np-upload-item__link': isSucceeded
+      'np-upload-item--link': isSucceeded
     }),
     "data-testid": TEST_IDS.uploadItem,
     children: /*#__PURE__*/jsxs("div", {
       className: "np-upload-item__body",
-      children: [/*#__PURE__*/jsx(UploadItemBody, {
+      children: [/*#__PURE__*/jsx(UploadItemLink, {
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,

package/build/uploadInput/uploadItem/UploadItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemBody } from './UploadItemBody';\n\nexport type UploadItemProps = JSX.IntrinsicAttributes & {\n  file: UploadedFile;\n  /**\n   * Is this Item part of a multiple- or single-file UploadInput\n   */\n  singleFileUpload: boolean;\n  canDelete: boolean;\n  onDelete: () => void;\n\n  /**\n   * Callback to be called when the file link is clicked.\n   * When provided, you need to manually trigger actions to load/download the file.\n   *\n   * @param file\n   */\n  onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n  uploadItem = 'uploadItem',\n  mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n  file,\n  canDelete,\n  onDelete,\n  onDownload,\n  singleFileUpload,\n}: UploadItemProps) => {\n  const { formatMessage } = useIntl();\n  const { status, filename, error, errors, url } = file;\n\n  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n  const getIcon = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;\n    }\n\n    let processIndicator: React.ReactNode;\n\n    switch (status) {\n      case Status.PROCESSING:\n      case Status.PENDING:\n        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n        break;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;\n    }\n\n    return processIndicator;\n  };\n\n  const getErrorMessage = (error?: UploadError) =>\n    typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n  const getMultipleErrors = (errors?: UploadError[]) => {\n    if (!errors?.length) {\n      return null;\n    }\n\n    if (errors?.length === 1) {\n      return getErrorMessage(errors[0]);\n    }\n\n    return (\n      <ul className=\"np-upload-input-errors m-b-0\">\n        {errors.map((error, index) => {\n          // eslint-disable-next-line react/no-array-index-key\n          return <li key={index}>{getErrorMessage(error)}</li>;\n        })}\n      </ul>\n    );\n  };\n\n  const getDescription = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return (\n        <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n        </Body>\n      );\n    }\n\n    switch (status) {\n      case Status.PENDING:\n        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n      case Status.PROCESSING:\n        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        return (\n          <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n            {formatMessage(MESSAGES.uploaded)}\n          </Body>\n        );\n    }\n  };\n\n  const getTitle = () => {\n    return filename || formatMessage(MESSAGES.uploadedFile);\n  };\n\n  const onDownloadFile = (event: React.MouseEvent): void => {\n    if (onDownload) {\n      event.preventDefault();\n      onDownload(file);\n    }\n  };\n\n  return (\n    <div\n      className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}\n      data-testid={TEST_IDS.uploadItem}\n    >\n      <div className=\"np-upload-item__body\">\n        <UploadItemBody\n          url={isSucceeded ? url : undefined}\n          singleFileUpload={singleFileUpload}\n          onDownload={onDownloadFile}\n        >\n          <div className=\"np-upload-button\" aria-live=\"polite\">\n            <div className=\"media\">\n              <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n              <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n                <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n                {getDescription()}\n              </div>\n            </div>\n          </div>\n        </UploadItemBody>\n        {canDelete && (\n          <button\n            aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n            className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {\n              'np-upload-item--single-file': singleFileUpload,\n            })}\n            type=\"button\"\n            onClick={() => onDelete()}\n          >\n            <Bin size={16} />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","StatusIcon","size","Size","SMALL","sentiment","Sentiment","NEGATIVE","processIndicator","PROCESSING","PENDING","ProcessIndicator","EXTRA_SMALL","DONE","POSITIVE","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","className","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","classNames","uploadItem","_jsxs","UploadItemBody","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
+{"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = JSX.IntrinsicAttributes & {\n  file: UploadedFile;\n  /**\n   * Is this Item part of a multiple- or single-file UploadInput\n   */\n  singleFileUpload: boolean;\n  canDelete: boolean;\n  onDelete: () => void;\n\n  /**\n   * Callback to be called when the file link is clicked.\n   * When provided, you need to manually trigger actions to load/download the file.\n   *\n   * @param file\n   */\n  onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n  uploadItem = 'uploadItem',\n  mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n  file,\n  canDelete,\n  onDelete,\n  onDownload,\n  singleFileUpload,\n}: UploadItemProps) => {\n  const { formatMessage } = useIntl();\n  const { status, filename, error, errors, url } = file;\n\n  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n  const getIcon = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;\n    }\n\n    let processIndicator: React.ReactNode;\n\n    switch (status) {\n      case Status.PROCESSING:\n      case Status.PENDING:\n        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n        break;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;\n    }\n\n    return processIndicator;\n  };\n\n  const getErrorMessage = (error?: UploadError) =>\n    typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n  const getMultipleErrors = (errors?: UploadError[]) => {\n    if (!errors?.length) {\n      return null;\n    }\n\n    if (errors?.length === 1) {\n      return getErrorMessage(errors[0]);\n    }\n\n    return (\n      <ul className=\"np-upload-input-errors m-b-0\">\n        {errors.map((error, index) => {\n          // eslint-disable-next-line react/no-array-index-key\n          return <li key={index}>{getErrorMessage(error)}</li>;\n        })}\n      </ul>\n    );\n  };\n\n  const getDescription = () => {\n    if (error || errors?.length || status === Status.FAILED) {\n      return (\n        <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n        </Body>\n      );\n    }\n\n    switch (status) {\n      case Status.PENDING:\n        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n      case Status.PROCESSING:\n        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n      case Status.SUCCEEDED:\n      case Status.DONE:\n      default:\n        return (\n          <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n            {formatMessage(MESSAGES.uploaded)}\n          </Body>\n        );\n    }\n  };\n\n  const getTitle = () => {\n    return filename || formatMessage(MESSAGES.uploadedFile);\n  };\n\n  const onDownloadFile = (event: React.MouseEvent): void => {\n    if (onDownload) {\n      event.preventDefault();\n      onDownload(file);\n    }\n  };\n\n  return (\n    <div\n      className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n      data-testid={TEST_IDS.uploadItem}\n    >\n      <div className=\"np-upload-item__body\">\n        <UploadItemLink\n          url={isSucceeded ? url : undefined}\n          singleFileUpload={singleFileUpload}\n          onDownload={onDownloadFile}\n        >\n          <div className=\"np-upload-button\" aria-live=\"polite\">\n            <div className=\"media\">\n              <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n              <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n                <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n                {getDescription()}\n              </div>\n            </div>\n          </div>\n        </UploadItemLink>\n        {canDelete && (\n          <button\n            aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n            className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {\n              'np-upload-item--single-file': singleFileUpload,\n            })}\n            type=\"button\"\n            onClick={() => onDelete()}\n          >\n            <Bin size={16} />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","StatusIcon","size","Size","SMALL","sentiment","Sentiment","NEGATIVE","processIndicator","PROCESSING","PENDING","ProcessIndicator","EXTRA_SMALL","DONE","POSITIVE","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","className","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","classNames","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}

package/build/uploadInput/uploadItem/UploadItemLink.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const UploadItemLink = ({
+  children,
+  url,
+  onDownload,
+  singleFileUpload
+}) => {
+  if (!url) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("a", {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: classNames__default.default('np-upload-item__link', singleFileUpload ? 'np-upload-item--single-file' : ''),
+    onClick: onDownload,
+    children: children
+  });
+};
+
+exports.UploadItemLink = UploadItemLink;
+//# sourceMappingURL=UploadItemLink.js.map

package/build/uploadInput/uploadItem/UploadItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n  children,\n  url,\n  onDownload,\n  singleFileUpload,\n}: UploadItemLinkProps) => {\n  if (!url) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={classnames(\n        'np-upload-item__link',\n        singleFileUpload ? 'np-upload-item--single-file' : '',\n      )}\n      onClick={onDownload}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;;;;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,2BAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}

package/build/uploadInput/uploadItem/{UploadItemBody.mjs → UploadItemLink.mjs}

@@ -1,6 +1,7 @@
+import classNames from 'classnames';
 import { jsx } from 'react/jsx-runtime';
 
-const UploadItemBody = ({
+const UploadItemLink = ({
   children,
   url,
   onDownload,
@@ -15,11 +16,11 @@ const UploadItemBody = ({
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
+    className: classNames('np-upload-item__link', singleFileUpload ? 'np-upload-item--single-file' : ''),
     onClick: onDownload,
     children: children
   });
 };
 
-export { UploadItemBody };
-//# sourceMappingURL=UploadItemBody.mjs.map
+export { UploadItemLink };
+//# sourceMappingURL=UploadItemLink.mjs.map

package/build/uploadInput/uploadItem/UploadItemLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n  children,\n  url,\n  onDownload,\n  singleFileUpload,\n}: UploadItemLinkProps) => {\n  if (!url) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={classnames(\n        'np-upload-item__link',\n        singleFileUpload ? 'np-upload-item--single-file' : '',\n      )}\n      onClick={onDownload}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,UAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-43daa3c",
+  "version": "0.0.0-experimental-e1c4386",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.1",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.12.0",
+    "@transferwise/neptune-css": "0.0.0-experimental-e1c4386",
     "@wise/components-theming": "1.4.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.9.6",
+    "@transferwise/neptune-css": "0.0.0-experimental-e1c4386",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/actionOption/ActionOption.tsx

@@ -16,6 +16,7 @@ export type ActionOptionProps = {
   priority?: PriorityPrimary | PrioritySecondary;
   showMediaCircle?: boolean;
   isContainerAligned?: boolean;
+  as?: React.ElementType;
 } & CommonProps;
 
 const ActionOption = ({
@@ -31,6 +32,7 @@ const ActionOption = ({
   showMediaAtAllSizes,
   showMediaCircle,
   isContainerAligned,
+  as,
 }: ActionOptionProps) => {
   const sharedProps = {
     media,
@@ -42,6 +44,7 @@ const ActionOption = ({
     showMediaCircle,
     className: classNames('tw-action-option', className),
     isContainerAligned,
+    as,
   };
 
   const getAriaLabel = (): string | undefined => {

package/src/main.css

@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/src/uploadInput/uploadButton/UploadButton.css

@@ -37,3 +37,8 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}

package/src/uploadInput/uploadButton/UploadButton.less

@@ -47,3 +47,9 @@
     align-items: flex-start;
   }
 }
+
+.np-upload-icon{
+  @media (max-width: 320px){
+    padding-left: 0;
+  }
+}

package/src/uploadInput/uploadItem/UploadItem.css

@@ -3,9 +3,9 @@
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -17,27 +17,27 @@
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -52,38 +52,41 @@
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/src/uploadInput/uploadItem/UploadItem.less

@@ -5,9 +5,9 @@
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 
-  &:first-child ~ div:not(.np-upload-item__link):before,
-  &:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-  &.np-upload-item__link:hover .np-upload-item--link:after {
+  &:first-child ~ div:not(.np-upload-item--link):before,
+  &:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+  &.np-upload-item--link:hover .np-upload-item__link:after {
     display: block;
     position: absolute;
     height: 1px;
@@ -17,12 +17,12 @@
     width: calc(100% - 2 * var(--size-16));
   }
 
-  &:first-child ~ div:not(.np-upload-item__link):before,
-  &:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+  &:first-child ~ div:not(.np-upload-item--link):before,
+  &:not(:first-child).np-upload-item--link .np-upload-item__link:before {
     top: 0;
   }
 
-  &.np-upload-item__link:hover .np-upload-item--link:after {
+  &.np-upload-item--link:hover .np-upload-item__link:after {
     bottom: -1px;
   }
 
@@ -33,7 +33,7 @@
   }
 
   &:not(:first-child) {
-    .np-upload-item--link:hover {
+    .np-upload-item__link:hover {
       border-top-color: var(--color-border-neutral);
     }
   }
@@ -43,10 +43,10 @@
   }
 
 
-  &.np-upload-item__link:hover + .np-upload-item,
-  &.np-upload-item__link:hover + .np-upload-button-container {
+  &.np-upload-item--link:hover + .np-upload-item,
+  &.np-upload-item--link:hover + .np-upload-button-container {
     &:before,
-    .np-upload-item--link:before {
+    .np-upload-item__link:before {
       display: none;
     }
   }
@@ -67,12 +67,12 @@
 }
 
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
 
-.np-upload-item__link {
+.np-upload-item--link {
   a {
     flex: 1;
     text-decoration: none;
@@ -103,6 +103,10 @@
       }
     }
   }
+
+  &:first-of-type a {
+    border-top: 0;
+  }
 }
 
 .np-upload-item__body {

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -9,7 +9,7 @@ import StatusIcon from '../../statusIcon/StatusIcon';
 import { UploadedFile, UploadError } from '../types';
 
 import MESSAGES from './UploadItem.messages';
-import { UploadItemBody } from './UploadItemBody';
+import { UploadItemLink } from './UploadItemLink';
 
 export type UploadItemProps = JSX.IntrinsicAttributes & {
   file: UploadedFile;
@@ -127,11 +127,11 @@ const UploadItem = ({
 
   return (
     <div
-      className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}
+      className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
       data-testid={TEST_IDS.uploadItem}
     >
       <div className="np-upload-item__body">
-        <UploadItemBody
+        <UploadItemLink
           url={isSucceeded ? url : undefined}
           singleFileUpload={singleFileUpload}
           onDownload={onDownloadFile}
@@ -145,7 +145,7 @@ const UploadItem = ({
               </div>
             </div>
           </div>
-        </UploadItemBody>
+        </UploadItemLink>
         {canDelete && (
           <button
             aria-label={formatMessage(MESSAGES.removeFile, { filename })}

package/src/uploadInput/uploadItem/{UploadItemBody.tsx → UploadItemLink.tsx}

@@ -1,4 +1,5 @@
 import { PropsWithChildren, MouseEvent } from 'react';
+import classnames from 'classnames';
 
 type UploadItemLinkProps = PropsWithChildren<{
   url?: string;
@@ -6,7 +7,7 @@ type UploadItemLinkProps = PropsWithChildren<{
   singleFileUpload: boolean;
 }>;
 
-export const UploadItemBody = ({
+export const UploadItemLink = ({
   children,
   url,
   onDownload,
@@ -21,7 +22,10 @@ export const UploadItemBody = ({
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}
+      className={classnames(
+        'np-upload-item__link',
+        singleFileUpload ? 'np-upload-item--single-file' : '',
+      )}
       onClick={onDownload}
     >
       {children}

package/build/types/uploadInput/uploadItem/UploadItemBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UploadItemBody.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qDAKxB,mBAAmB,gCAgBrB,CAAC"}

package/build/uploadInput/uploadItem/UploadItemBody.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-
-const UploadItemBody = ({
-  children,
-  url,
-  onDownload,
-  singleFileUpload
-}) => {
-  if (!url) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: children
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx("a", {
-    href: url,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
-    onClick: onDownload,
-    children: children
-  });
-};
-
-exports.UploadItemBody = UploadItemBody;
-//# sourceMappingURL=UploadItemBody.js.map

package/build/uploadInput/uploadItem/UploadItemBody.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UploadItemBody.js","sources":["../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemBody = ({\n  children,\n  url,\n  onDownload,\n  singleFileUpload,\n}: UploadItemLinkProps) => {\n  if (!url) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}\n      onClick={onDownload}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["UploadItemBody","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","onClick"],"mappings":";;;;AAQO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;AACzBC,IAAAA,SAAS,EAAEL,gBAAgB,GAAG,6BAA6B,GAAG,sBAAuB;AACrFM,IAAAA,OAAO,EAAEP,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}

package/build/uploadInput/uploadItem/UploadItemBody.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"UploadItemBody.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemBody = ({\n  children,\n  url,\n  onDownload,\n  singleFileUpload,\n}: UploadItemLinkProps) => {\n  if (!url) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}\n      onClick={onDownload}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["UploadItemBody","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","onClick"],"mappings":";;AAQO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;AACzBC,IAAAA,SAAS,EAAEL,gBAAgB,GAAG,6BAA6B,GAAG,sBAAuB;AACrFM,IAAAA,OAAO,EAAEP,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}