npm - @transferwise/components - Versions diffs - 0.0.0-experimental-bee317b → 0.0.0-experimental-5d8d65a - Mend

@transferwise/components 0.0.0-experimental-bee317b → 0.0.0-experimental-5d8d65a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/build/card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/*\n @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const isOpen = !!(isExpanded && children);\n\n return (\n <Element\n ref={reference}\n className={classNames('np-card', className, {\n 'np-card--expanded': isOpen,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-label={ariaLabel}\n as={children ? 'button' : 'div'}\n className={classNames('np-card__button')}\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n onClick={children ? () => onClick?.(!isExpanded) : undefined}\n />\n <div\n className={classNames('np-card__divider', {\n 'np-card__divider--expanded': isOpen,\n })}\n />\n {isOpen && (\n <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","classNames","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;~~AA0BA~~,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,eAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,2BAAU,CAAC,SAAS,EAAEN,SAAS,EAAE;AAC1C,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,2BAAU,CAAC,iBAAiB,CAAE;AACzCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,cAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,cAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,2BAAU,CAAC,kBAAkB,EAAE;AACxC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,cAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const isOpen = !!(isExpanded && children);\n\n return (\n <Element\n ref={reference}\n className={classNames('np-card', className, {\n 'np-card--expanded': isOpen,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-label={ariaLabel}\n as={children ? 'button' : 'div'}\n className={classNames('np-card__button')}\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n onClick={children ? () => onClick?.(!isExpanded) : undefined}\n />\n <div\n className={classNames('np-card__divider', {\n 'np-card__divider--expanded': isOpen,\n })}\n />\n {isOpen && (\n <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","classNames","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,eAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,2BAAU,CAAC,SAAS,EAAEN,SAAS,EAAE;AAC1C,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,2BAAU,CAAC,iBAAiB,CAAE;AACzCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,cAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,cAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,2BAAU,CAAC,kBAAkB,EAAE;AACxC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,cAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/card/Card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/*\n @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const isOpen = !!(isExpanded && children);\n\n return (\n <Element\n ref={reference}\n className={classNames('np-card', className, {\n 'np-card--expanded': isOpen,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-label={ariaLabel}\n as={children ? 'button' : 'div'}\n className={classNames('np-card__button')}\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n onClick={children ? () => onClick?.(!isExpanded) : undefined}\n />\n <div\n className={classNames('np-card__divider', {\n 'np-card__divider--expanded': isOpen,\n })}\n />\n {isOpen && (\n <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","classNames","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;~~AA0BA~~,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,IAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,UAAU,CAAC,SAAS,EAAEN,SAAS,EAAE;AAC1C,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,UAAU,CAAC,iBAAiB,CAAE;AACzCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,GAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,UAAU,CAAC,kBAAkB,EAAE;AACxC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,GAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const isOpen = !!(isExpanded && children);\n\n return (\n <Element\n ref={reference}\n className={classNames('np-card', className, {\n 'np-card--expanded': isOpen,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-label={ariaLabel}\n as={children ? 'button' : 'div'}\n className={classNames('np-card__button')}\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n onClick={children ? () => onClick?.(!isExpanded) : undefined}\n />\n <div\n className={classNames('np-card__divider', {\n 'np-card__divider--expanded': isOpen,\n })}\n />\n {isOpen && (\n <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","classNames","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;AAsBA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,IAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,UAAU,CAAC,SAAS,EAAEN,SAAS,EAAE;AAC1C,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,UAAU,CAAC,iBAAiB,CAAE;AACzCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,GAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,UAAU,CAAC,kBAAkB,EAAE;AACxC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,GAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/main.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/card/Card.d.ts CHANGED Viewed

@@ -11,10 +11,6 @@ export interface CardProps {
     'data-testid'?: string;
     onClick?: (nextIsExpanded: boolean) => void;
 }
-/**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
- * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
- */
 declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<unknown>>;
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

package/build/types/card/Card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/card/Card.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED~~;;;GAGG;AACH~~,QAAA,MAAM,IAAI,+FAoDR,CAAC;AAEH,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/card/Card.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,IAAI,+FAoDR,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,~~gCAyHjB~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCA8HjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -7,11 +7,9 @@ var classNames = require('classnames');
 var reactIntl = require('react-intl');
 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');
 var size = require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
@@ -43,11 +41,16 @@ const UploadItem = ({
     url
   } = file;
   const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!url;
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
   const getIcon = () => {
     if (error || errors?.length || status$1 === status.Status.FAILED) {
-      return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-        size: size.Size.SMALL,
-        sentiment: sentiment.Sentiment.NEGATIVE
+      return /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
+        size: 24,
+        className: "emphasis--negative"
       });
     }
     let processIndicator;
@@ -62,9 +65,9 @@ const UploadItem = ({
       case status.Status.SUCCEEDED:
       case status.Status.DONE:
       default:
-        processIndicator = /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-          size: size.Size.SMALL,
-          sentiment: sentiment.Sentiment.POSITIVE
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
+          size: 24,
+          className: "emphasis--positive"
         });
     }
     return processIndicator;
@@ -126,12 +129,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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } 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 /\n We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--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 = <CheckCircleFill size={24} className=\"emphasis--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","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","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 CHANGED Viewed

@@ -1,13 +1,11 @@
-import { Bin } from '@transferwise/icons';
+import { Bin, CrossCircleFill, CheckCircleFill } from '@transferwise/icons';
 import classNames from 'classnames';
 import { useIntl } from 'react-intl';
 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';
 import { Size } from '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
@@ -35,11 +33,16 @@ const UploadItem = ({
     url
   } = file;
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
   const getIcon = () => {
     if (error || errors?.length || status === Status.FAILED) {
-      return /*#__PURE__*/jsx(StatusIcon, {
-        size: Size.SMALL,
-        sentiment: Sentiment.NEGATIVE
+      return /*#__PURE__*/jsx(CrossCircleFill, {
+        size: 24,
+        className: "emphasis--negative"
       });
     }
     let processIndicator;
@@ -54,9 +57,9 @@ const UploadItem = ({
       case Status.SUCCEEDED:
       case Status.DONE:
       default:
-        processIndicator = /*#__PURE__*/jsx(StatusIcon, {
-          size: Size.SMALL,
-          sentiment: Sentiment.POSITIVE
+        processIndicator = /*#__PURE__*/jsx(CheckCircleFill, {
+          size: 24,
+          className: "emphasis--positive"
         });
     }
     return processIndicator;
@@ -118,12 +121,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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } 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 /\n We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--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 = <CheckCircleFill size={24} className=\"emphasis--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","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bee317b",
+  "version": "0.0.0-experimental-5d8d65a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,13 +92,13 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.12.0",
-    "@wise/components-theming": "1.4.0",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "0.0.0-experimental-5d8d65a",
+    "@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-5d8d65a",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/card/Card.tsx CHANGED Viewed

@@ -20,10 +20,6 @@ export interface CardProps {
   onClick?: (nextIsExpanded: boolean) => void;
 }
-/**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
- * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
- */
 const Card = forwardRef(function Card(
   {
     'aria-label': ariaLabel,

package/src/main.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/uploadInput/uploadItem/UploadItem.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Bin } from '@transferwise/icons';
+import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import classNames from 'classnames';
 import { useIntl } from 'react-intl';
@@ -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;
@@ -46,9 +46,14 @@ const UploadItem = ({
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
   const getIcon = () => {
     if (error || errors?.length || status === Status.FAILED) {
-      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;
+      return <CrossCircleFill size={24} className="emphasis--negative" />;
     }
     let processIndicator: React.ReactNode;
@@ -61,7 +66,7 @@ const UploadItem = ({
       case Status.SUCCEEDED:
       case Status.DONE:
       default:
-        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;
+        processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
     }
     return processIndicator;
@@ -127,11 +132,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 +150,7 @@ const UploadItem = ({
               </div>
             </div>
           </div>
-        </UploadItemBody>
+        </UploadItemLink>
         {canDelete && (
           <button
             aria-label={formatMessage(MESSAGES.removeFile, { filename })}

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;;;;"}