@transferwise/components 0.0.0-experimental-1072d5f → 0.0.0-experimental-80ec562

package/src/inputs/SelectInput.tsx

@@ -28,6 +28,9 @@ import { useInputAttributes, WithInputAttributesProps } from './contexts';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import messages from './SelectInput.messages';
+import { debounce } from 'lodash';
+
+const DEFAULT_OPTIONS_PAGE_SIZE = 10;
 
 function searchableString(value: string) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
@@ -288,6 +291,11 @@ export function SelectInput<T = string, M extends boolean = false>({
   const listboxRef = useRef<HTMLDivElement>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
+  const hasGroups = items.filter((item) => item.type === 'group').length > 0;
+
+  // TODO - Logic here up for debate
+  const enableShowMore = !!filterable && items.length > DEFAULT_OPTIONS_PAGE_SIZE && !hasGroups;
+
   return (
     <ListboxBase
       name={name}
@@ -393,6 +401,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
               filterQuery={filterQuery}
+              enableShowMore={enableShowMore}
               onFilterChange={setFilterQuery}
             />
           </OptionsOverlay>
@@ -483,6 +492,7 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
   onFilterChange: (query: string) => void;
+  enableShowMore: boolean;
 }
 
 function SelectInputOptions<T = string>({
@@ -494,12 +504,15 @@ function SelectInputOptions<T = string>({
   searchInputRef,
   listboxRef,
   filterQuery,
+  enableShowMore,
   onFilterChange,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
 
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
+  const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);
+
   const needle = useMemo(() => {
     if (filterable) {
       return filterQuery ? searchableString(filterQuery) : null;
@@ -522,6 +535,13 @@ function SelectInputOptions<T = string>({
   const statusId = useId();
   const listboxId = useId();
 
+  const onShowMore = () => {
+    setNumberOfOptionsShown((prev) => prev + DEFAULT_OPTIONS_PAGE_SIZE);
+  };
+
+  const displayShowMoreLink =
+    enableShowMore && needle === null && numberOfOptionsShown < items.length;
+
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -590,7 +610,10 @@ function SelectInputOptions<T = string>({
           tabIndex={0}
           className="np-select-input-listbox"
         >
-          {(needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => (
+          {(needle != null
+            ? dedupeSelectInputItems(items)
+            : items.slice(0, numberOfOptionsShown)
+          ).map((item, index) => (
             <SelectInputItemView
               // eslint-disable-next-line react/no-array-index-key
               key={index}
@@ -601,7 +624,7 @@ function SelectInputOptions<T = string>({
           ))}
         </div>
 
-        {renderFooter != null ? (
+        {renderFooter != null || displayShowMoreLink ? (
           <footer className="np-select-input-footer">
             <div
               role="none"
@@ -612,10 +635,13 @@ function SelectInputOptions<T = string>({
                 }
               }}
             >
-              {renderFooter({
-                resultsEmpty,
-                queryNormalized: needle,
-              })}
+              {displayShowMoreLink ? <ShowMoreOption onClick={onShowMore} /> : null}
+              {renderFooter
+                ? renderFooter({
+                    resultsEmpty,
+                    queryNormalized: needle,
+                  })
+                : null}
             </div>
           </footer>
         ) : null}
@@ -624,6 +650,22 @@ function SelectInputOptions<T = string>({
   );
 }
 
+function ShowMoreOption({ onClick }: { onClick: () => void }) {
+  const intl = useIntl();
+
+  return (
+    <a
+      href=""
+      onClick={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+    >
+      {intl.formatMessage(messages.showMore)}
+    </a>
+  );
+}
+
 interface SelectInputItemViewProps<
   T = string,
   I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,

package/src/main.css

@@ -5472,11 +5472,6 @@ 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;
@@ -5568,9 +5563,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;
@@ -5582,27 +5577,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,
@@ -5617,41 +5612,38 @@ 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,8 +37,3 @@ 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,9 +47,3 @@
     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,41 +52,38 @@
   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,10 +103,6 @@
       }
     }
   }
-
-  &:first-of-type a {
-    border-top: 0;
-  }
 }
 
 .np-upload-item__body {

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,4 +1,4 @@
-import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
+import { Bin } 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 { UploadItemLink } from './UploadItemLink';
+import { UploadItemBody } from './UploadItemBody';
 
 export type UploadItemProps = JSX.IntrinsicAttributes & {
   file: UploadedFile;
@@ -46,13 +46,9 @@ 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.
-   */
   const getIcon = () => {
     if (error || errors?.length || status === Status.FAILED) {
-      return <CrossCircleFill size={24} className="text-negative" />;
+      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;
     }
 
     let processIndicator: React.ReactNode;
@@ -65,7 +61,7 @@ const UploadItem = ({
       case Status.SUCCEEDED:
       case Status.DONE:
       default:
-        processIndicator = <CheckCircleFill size={24} className="text-positive" />;
+        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;
     }
 
     return processIndicator;
@@ -131,11 +127,11 @@ const UploadItem = ({
 
   return (
     <div
-      className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
+      className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}
       data-testid={TEST_IDS.uploadItem}
     >
       <div className="np-upload-item__body">
-        <UploadItemLink
+        <UploadItemBody
           url={isSucceeded ? url : undefined}
           singleFileUpload={singleFileUpload}
           onDownload={onDownloadFile}
@@ -149,7 +145,7 @@ const UploadItem = ({
               </div>
             </div>
           </div>
-        </UploadItemLink>
+        </UploadItemBody>
         {canDelete && (
           <button
             aria-label={formatMessage(MESSAGES.removeFile, { filename })}

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

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

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

@@ -1 +0,0 @@
-{"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/UploadItemLink.js

@@ -1,32 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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/UploadItemLink.mjs.map

@@ -1 +0,0 @@
-{"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;;;;"}