@transferwise/components 0.0.0-experimental-75b7b1e → 0.0.0-experimental-c5ba52c

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -8,21 +8,33 @@ import StatusIcon from '../statusIcon/StatusIcon';
 
 interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
   url?: string;
+  ariaLabel?: string;
   altText?: string;
   statusIcon?: Sentiment;
 }
 
-const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {
+const OptionalBadge = ({
+  url,
+  altText,
+  statusIcon,
+  children,
+  ariaLabel,
+  ...rest
+}: OptionalBadgeProps) => {
   if (url) {
     return (
-      <Badge badge={<img src={url} alt={altText} />} {...rest}>
+      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>
         {children}
       </Badge>
     );
   }
   if (statusIcon) {
     return (
-      <Badge badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />} {...rest}>
+      <Badge
+        aria-label={ariaLabel}
+        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}
+        {...rest}
+      >
         {children}
       </Badge>
     );
@@ -32,6 +44,7 @@ const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: Optional
 
 export type AvatarWrapperProps = {
   url?: string;
+  'aria-label'?: string;
   profileType?: ProfileTypeBusiness | ProfileTypePersonal;
   profileId?: string;
   name?: string;
@@ -57,6 +70,7 @@ export type AvatarWrapperProps = {
 
 const AvatarWrapper = ({
   url,
+  'aria-label': ariaLabel,
   profileType,
   profileId,
   badgeUrl,
@@ -73,18 +87,22 @@ const AvatarWrapper = ({
   useEffect(() => setImageLoadError(false), [url]);
 
   const getAvatarProps = () => {
+    let updatedAvatarProps = avatarProps;
+    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
+      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };
+    }
     if (url && !hasImageLoadError) {
       return {
         type: AvatarType.THUMBNAIL,
         children: <img src={url} alt="" onError={() => setImageLoadError(true)} />,
-        ...avatarProps,
+        ...updatedAvatarProps,
       };
     }
     if (profileType) {
       return {
         type: AvatarType.ICON,
         children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <ProfileIcon size="24" />,
-        ...avatarProps,
+        ...updatedAvatarProps,
       };
     }
     if (name) {
@@ -92,19 +110,20 @@ const AvatarWrapper = ({
         type: AvatarType.INITIALS,
         children: <>{getInitials(name)}</>,
         backgroundColorSeed: profileId?.toString(),
-        ...avatarProps,
+        ...updatedAvatarProps,
       };
     }
     return {
       type: AvatarType.ICON,
       children: <ProfileIcon size="24" />,
-      ...avatarProps,
+      ...updatedAvatarProps,
     };
   };
 
   return (
     <OptionalBadge
       url={badgeUrl}
+      ariaLabel={ariaLabel}
       altText={badgeAltText}
       statusIcon={badgeStatusIcon}
       {...badgeProps}

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -73,70 +73,6 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 </div>
 `;
 
-exports[`FlowNavigationAvatar with a name AND profileType with a badge status icon passed renders the badge 1`] = `
-<div
-  class="tw-badge tw-badge-border-light tw-badge-sm"
->
-  <div
-    class="tw-badge__children"
-  >
-    <div
-      class="tw-avatar tw-avatar--48 tw-avatar--icon"
-    >
-      <div
-        class="tw-avatar__content"
-      >
-        <span
-          aria-hidden="true"
-          class="tw-icon tw-icon-person "
-          data-testid="person-icon"
-          role="presentation"
-        >
-          <svg
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
-            />
-          </svg>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    class="tw-badge__content"
-  >
-    <span
-      class="status-circle status-circle-sm positive"
-      data-testid="status-icon"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-check status-icon light"
-        data-testid="check-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          viewBox="0 0 24 24"
-          width="16"
-        >
-          <path
-            d="M20.143 6.427 9.557 16.97 4.2 11.57 3 12.77l5.957 6a.846.846 0 0 0 .6.257.846.846 0 0 0 .6-.257L21.343 7.627l-1.2-1.2Z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
 exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
 <div
   class="tw-badge tw-badge-border-light tw-badge-lg"

package/src/badge/Badge.spec.tsx

@@ -33,4 +33,12 @@ describe('Badge', () => {
 
     expect(screen.getByText(childText).parentElement).toHaveClass('tw-badge__children');
   });
+
+  it('adds aria-label to badge if it is passed in', () => {
+    const ariaLabel = 'badge-aria-label';
+
+    renderBadge({ 'aria-label': ariaLabel });
+
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
 });

package/src/badge/Badge.tsx

@@ -17,6 +17,7 @@ export type BadgeProps = {
   children: ReactNode;
   size?: SizeSmall | SizeMedium | SizeLarge;
   border?: ThemeDark | ThemeLight;
+  'aria-label'?: string;
 } & CommonProps;
 
 const Badge = ({
@@ -24,6 +25,7 @@ const Badge = ({
   className = undefined,
   size = Size.SMALL,
   border = Theme.LIGHT,
+  'aria-label': ariaLabel,
   children,
 }: BadgeProps) => {
   const classes: string = classNames(
@@ -36,7 +38,7 @@ const Badge = ({
   );
 
   return (
-    <div className={classes}>
+    <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
       <div className="tw-badge__content">{badge}</div>
     </div>

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

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

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