@transferwise/components 0.0.0-experimental-68d1b00 → 0.0.0-experimental-40e4505

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -4,9 +4,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
-import { Size, Status, Typography, Sentiment } from '../../common';
+import { Size, Status, Typography } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
-import StatusIcon from '../../statusIcon/StatusIcon';
 import { UploadedFile, UploadError } from '../types';
 
 import MESSAGES from './UploadItem.messages';
@@ -38,6 +37,8 @@ interface UploadItemRef {
 export enum TEST_IDS {
   uploadItem = 'uploadItem',
   mediaBody = 'mediaBody',
+  link = 'link',
+  action = 'action',
 }
 
 const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
@@ -46,6 +47,7 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     const { status, filename, error, errors, url } = file;
     const linkRef = useRef<HTMLAnchorElement>(null);
     const buttonRef = useRef<HTMLButtonElement>(null);
+    const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
 
     useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
       focus: (): void => {
@@ -57,8 +59,6 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
       },
     }));
 
-    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
@@ -152,16 +152,20 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     return (
       <div
         className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
-        data-testid={TEST_IDS.uploadItem}
+        data-testid={`${file.id}-${TEST_IDS.uploadItem}`}
       >
         <UploadItemLink
           ref={linkRef}
           url={isSucceeded ? url : undefined}
           singleFileUpload={singleFileUpload}
+          data-testid={`${file.id}-${TEST_IDS.link}`}
           onDownload={onDownloadFile}
         >
           <span className="np-upload-input__icon">{getIcon()}</span>
-          <div className="np-upload-input__item-content" data-testid={TEST_IDS.mediaBody}>
+          <div
+            className="np-upload-input__item-content"
+            data-testid={`${file.id}-${TEST_IDS.mediaBody}`}
+          >
             <Body type={Typography.BODY_LARGE} className="np-upload-input__title text-word-break">
               {getTitle()}
             </Body>
@@ -175,6 +179,8 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
               aria-label={formatMessage(MESSAGES.removeFile, { filename })}
               className="np-upload-input__item-button"
               type="button"
+              tabIndex={0}
+              data-testid={`${file.id}-${TEST_IDS.action}`}
               onClick={() => onDelete()}
             >
               <Bin size={16} />

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -10,7 +10,14 @@ type UploadItemLinkProps = PropsWithChildren<{
 export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
   ({ children, url, onDownload, singleFileUpload }, ref) => {
     if (!url) {
-      return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;
+      return (
+        <div
+          ref={ref as React.RefObject<HTMLDivElement>}
+          className={clsx('np-upload-input__item-container')}
+        >
+          {children}
+        </div>
+      );
     }
 
     return (
@@ -23,6 +30,7 @@ export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, Upl
           'np-upload-input__item-link',
           singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
         )}
+        tabIndex={0}
         onClick={onDownload}
       >
         {children}

package/build/styles/table/Table.css

@@ -1,215 +0,0 @@
-.np-table {
-  width: 100%;
-  background-color: transparent;
-}
-.np-table-container {
-  padding: 8px;
-  padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.np-table-container--loading .np-table-header {
-  min-width: calc(160px * 2);
-}
-.np-table-container--center {
-  margin-right: auto;
-  margin-left: auto;
-}
-.np-table-container--full-width {
-  width: 100%;
-}
-.np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
-  background-attachment: local, local, scroll, scroll;
-  overflow-x: auto;
-  border-radius: 10px;
-}
-.np-theme-personal--dark .np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
-}
-.np-table-row:last-child .np-table-cell:first-child {
-  border-bottom-left-radius: 10px;
-}
-.np-table-row:last-child .np-table-cell:last-child {
-  border-bottom-right-radius: 10px;
-}
-.np-table-row--clickable:hover .np-table-cell {
-  background-color: var(--color-background-screen-hover);
-  cursor: pointer;
-}
-.np-table-row--separator .np-table-cell {
-  padding: 0;
-}
-.np-table-header,
-.np-table-cell {
-  padding: 0;
-}
-.np-table-header:first-child,
-.np-table-cell:first-child {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-.np-table-header:first-child .np-table-header-content,
-.np-table-cell:first-child .np-table-header-content,
-.np-table-header:first-child .np-table-cell-content,
-.np-table-cell:first-child .np-table-cell-content {
-  padding-left: 0;
-}
-.np-table-header:last-child,
-.np-table-cell:last-child {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-table-header:last-child .np-table-header-content,
-.np-table-cell:last-child .np-table-header-content,
-.np-table-header:last-child .np-table-cell-content,
-.np-table-cell:last-child .np-table-cell-content {
-  padding-right: 0;
-}
-.np-table-header .np-text-body-large-bold,
-.np-table-cell .np-text-body-large-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.np-table-header.np-table-header--right,
-.np-table-cell.np-table-cell--right {
-  padding-right: calc(8px + 12px);
-  padding-right: calc(var(--size-8) + var(--size-12));
-}
-.np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
-  text-align: right;
-}
-.np-table-header.np-table-header--right .np-table-header-content,
-.np-table-cell.np-table-cell--right .np-table-content {
-  justify-content: end;
-}
-.np-table-header-content,
-.np-table-content {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.np-table-header {
-  min-width: 160px;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-bottom: 8px;
-  padding-bottom: var(--size-8);
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-table-header-content {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-}
-.np-table-header--has-error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell {
-  padding: 16px 8px;
-  padding: var(--size-16) var(--size-8);
-}
-.np-table-cell--primary {
-  min-width: 200px;
-}
-.np-table-cell--currency .np-text-body-default {
-  white-space: nowrap;
-}
-.np-table-cell--status .status-circle {
-  width: 24px;
-  height: 24px;
-}
-.np-table-cell--status .status-circle .status-icon > svg {
-  width: 21px;
-  height: 21px;
-}
-.np-table-cell .tw-chevron {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.np-table-cell-separator {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
-  height: 1px;
-  padding: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-table-cell .np-text-body-default {
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-}
-.np-table-cell .np-text-body-large-bold {
-  display: flex;
-  align-items: center;
-  color: #37517e;
-  color: var(--color-content-primary);
-  white-space: nowrap;
-}
-.np-table-cell .np-table-content--success {
-  color: var(--color-sentiment-positive);
-}
-.np-table-cell .np-table-content--error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell .tw-loader {
-  margin: 150px auto;
-}
-@media (max-width: 320px) {
-  .np-table-cell .tw-loader {
-    margin-top: 70px;
-    margin-bottom: 70px;
-  }
-}
-.np-table-content {
-  gap: 12px;
-  gap: var(--size-12);
-}
-.np-table-content--success,
-.np-table-content--error {
-  gap: 4px;
-  gap: var(--size-4);
-}
-.np-table-content--success .np-table-content-text,
-.np-table-content--error .np-table-content-text {
-  line-height: 155%;
-}
-.np-table-content-media {
-  flex-shrink: 0;
-}
-.np-table-content-body {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-table-content--reversed {
-  flex-direction: row-reverse;
-}
-.np-table-content--reversed .np-table-content-body {
-  align-items: end;
-}
-.np-table-empty-data {
-  display: flex;
-  align-items: center;
-}
-.np-table-empty-data .status-circle {
-  margin-right: 12px;
-  margin-right: var(--size-12);
-}

package/build/types/table/Table.d.ts

@@ -1,23 +0,0 @@
-import { TableHeaderType } from './TableHeader';
-import { TableRowClickableType, TableRowType } from './TableRow';
-export interface TableProps {
-    data: {
-        headers?: TableHeaderType[];
-        content?: TableRowType[] | TableRowClickableType[];
-        onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
-    };
-    loading?: boolean;
-    className?: string | undefined;
-    fullWidth?: boolean;
-    error?: {
-        message?: string;
-        action?: {
-            href?: string;
-            text?: string;
-        };
-    };
-    onRetry?: () => void;
-}
-declare const Table: React.FC<TableProps>;
-export default Table;
-//# sourceMappingURL=Table.d.ts.map

package/build/types/table/Table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAoB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAiB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAS3E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;QAC5B,OAAO,CAAC,EAAE,YAAY,EAAE,GAAG,qBAAqB,EAAE,CAAC;QACnD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;KACtE,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE;YACP,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuF/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/table/Table.messages.d.ts

@@ -1,12 +0,0 @@
-declare const _default: {
-    refreshPage: {
-        id: string;
-        defaultMessage: string;
-    };
-    emptyData: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=Table.messages.d.ts.map

package/build/types/table/Table.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.messages.d.ts","sourceRoot":"","sources":["../../../src/table/Table.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}

package/build/types/table/TableCell.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-interface TextPropsType {
-    primaryText?: string;
-    secondaryText?: string;
-}
-interface StatusPropsType {
-    status?: 'error' | 'success';
-}
-export interface LeadingContentType extends TextPropsType, StatusPropsType {
-    initials?: string;
-}
-export interface TextContentType extends StatusPropsType {
-    text?: string;
-}
-interface CurrencyType {
-    value: string | number;
-    currency: string;
-}
-export interface CurrencyContentType extends StatusPropsType {
-    primaryCurrency?: CurrencyType;
-    secondaryCurrency?: CurrencyType;
-}
-export interface StatusContentType extends TextPropsType {
-    sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
-}
-export interface TableCellProps {
-    type?: 'leading' | 'text' | 'currency' | 'status';
-    content?: LeadingContentType & TextContentType & CurrencyContentType & StatusContentType;
-    alignment?: 'right' | 'left';
-    className?: string;
-    colSpan?: number;
-    hasSeparator?: boolean;
-    children?: React.ReactNode;
-}
-declare const TableCell: ({ type, content, alignment, className, colSpan, hasSeparator, children, }: TableCellProps) => React.JSX.Element;
-export default TableCell;
-//# sourceMappingURL=TableCell.d.ts.map

package/build/types/table/TableCell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,aAAa;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,eAAe;IACvB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAGD,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,eAAe;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,iBAAiB,CAAC,EAAE,YAAY,CAAC;CAClC;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IAClD,OAAO,CAAC,EAAE,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IACzF,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,8EAQZ,cAAc,sBAwFhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/table/TableHeader.d.ts

@@ -1,12 +0,0 @@
-export interface TableHeaderType {
-    header?: string;
-    className?: string;
-    alignment?: 'right' | 'left';
-    hasError?: boolean;
-}
-export interface TableHeaderProps extends TableHeaderType {
-    hasActionColumn?: boolean;
-}
-declare const TableHeader: React.FC<TableHeaderProps>;
-export default TableHeader;
-//# sourceMappingURL=TableHeader.d.ts.map

package/build/types/table/TableHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/table/TableHeader.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgC3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/table/TableRow.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { TableCellProps } from './TableCell';
-export interface TableRowType {
-    rowContent?: TableCellProps[];
-}
-export interface TableRowClickableType extends TableRowType {
-    id: number | string;
-}
-export interface TableRowProps {
-    rowData?: TableRowType | TableRowClickableType;
-    hasSeparator?: boolean;
-    children?: React.ReactNode;
-    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
-}
-declare const TableRow: ({ rowData, hasSeparator, children, onRowClick }: TableRowProps) => React.JSX.Element;
-export default TableRow;
-//# sourceMappingURL=TableRow.d.ts.map

package/build/types/table/TableRow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,YAAY,GAAG,qBAAqB,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;CACtE;AAED,QAAA,MAAM,QAAQ,oDAA6D,aAAa,sBAsCvF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/table/TableStatusText.d.ts

@@ -1,9 +0,0 @@
-export interface TableStatusTextProps {
-    text: string;
-    className?: string;
-    status?: 'success' | 'error';
-    typography?: 'default' | 'large-bold';
-}
-declare const TableStatusText: React.FC<TableStatusTextProps>;
-export default TableStatusText;
-//# sourceMappingURL=TableStatusText.d.ts.map

package/build/types/table/TableStatusText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableStatusText.d.ts","sourceRoot":"","sources":["../../../src/table/TableStatusText.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACvC;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsBnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build/types/table/index.d.ts

@@ -1,6 +0,0 @@
-export { default } from './Table';
-export type { TableProps } from './Table';
-export type { TableRowType, TableRowClickableType } from './TableRow';
-export type { TableHeaderType } from './TableHeader';
-export type { LeadingContentType, TextContentType, CurrencyContentType, StatusContentType, TableCellProps, } from './TableCell';
-//# sourceMappingURL=index.d.ts.map

package/build/types/table/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,GACf,MAAM,aAAa,CAAC"}

package/src/table/Table.css

@@ -1,215 +0,0 @@
-.np-table {
-  width: 100%;
-  background-color: transparent;
-}
-.np-table-container {
-  padding: 8px;
-  padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.np-table-container--loading .np-table-header {
-  min-width: calc(160px * 2);
-}
-.np-table-container--center {
-  margin-right: auto;
-  margin-left: auto;
-}
-.np-table-container--full-width {
-  width: 100%;
-}
-.np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
-  background-attachment: local, local, scroll, scroll;
-  overflow-x: auto;
-  border-radius: 10px;
-}
-.np-theme-personal--dark .np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
-}
-.np-table-row:last-child .np-table-cell:first-child {
-  border-bottom-left-radius: 10px;
-}
-.np-table-row:last-child .np-table-cell:last-child {
-  border-bottom-right-radius: 10px;
-}
-.np-table-row--clickable:hover .np-table-cell {
-  background-color: var(--color-background-screen-hover);
-  cursor: pointer;
-}
-.np-table-row--separator .np-table-cell {
-  padding: 0;
-}
-.np-table-header,
-.np-table-cell {
-  padding: 0;
-}
-.np-table-header:first-child,
-.np-table-cell:first-child {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-.np-table-header:first-child .np-table-header-content,
-.np-table-cell:first-child .np-table-header-content,
-.np-table-header:first-child .np-table-cell-content,
-.np-table-cell:first-child .np-table-cell-content {
-  padding-left: 0;
-}
-.np-table-header:last-child,
-.np-table-cell:last-child {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-table-header:last-child .np-table-header-content,
-.np-table-cell:last-child .np-table-header-content,
-.np-table-header:last-child .np-table-cell-content,
-.np-table-cell:last-child .np-table-cell-content {
-  padding-right: 0;
-}
-.np-table-header .np-text-body-large-bold,
-.np-table-cell .np-text-body-large-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.np-table-header.np-table-header--right,
-.np-table-cell.np-table-cell--right {
-  padding-right: calc(8px + 12px);
-  padding-right: calc(var(--size-8) + var(--size-12));
-}
-.np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
-  text-align: right;
-}
-.np-table-header.np-table-header--right .np-table-header-content,
-.np-table-cell.np-table-cell--right .np-table-content {
-  justify-content: end;
-}
-.np-table-header-content,
-.np-table-content {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.np-table-header {
-  min-width: 160px;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-bottom: 8px;
-  padding-bottom: var(--size-8);
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-table-header-content {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-}
-.np-table-header--has-error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell {
-  padding: 16px 8px;
-  padding: var(--size-16) var(--size-8);
-}
-.np-table-cell--primary {
-  min-width: 200px;
-}
-.np-table-cell--currency .np-text-body-default {
-  white-space: nowrap;
-}
-.np-table-cell--status .status-circle {
-  width: 24px;
-  height: 24px;
-}
-.np-table-cell--status .status-circle .status-icon > svg {
-  width: 21px;
-  height: 21px;
-}
-.np-table-cell .tw-chevron {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.np-table-cell-separator {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
-  height: 1px;
-  padding: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-table-cell .np-text-body-default {
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-}
-.np-table-cell .np-text-body-large-bold {
-  display: flex;
-  align-items: center;
-  color: #37517e;
-  color: var(--color-content-primary);
-  white-space: nowrap;
-}
-.np-table-cell .np-table-content--success {
-  color: var(--color-sentiment-positive);
-}
-.np-table-cell .np-table-content--error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell .tw-loader {
-  margin: 150px auto;
-}
-@media (max-width: 320px) {
-  .np-table-cell .tw-loader {
-    margin-top: 70px;
-    margin-bottom: 70px;
-  }
-}
-.np-table-content {
-  gap: 12px;
-  gap: var(--size-12);
-}
-.np-table-content--success,
-.np-table-content--error {
-  gap: 4px;
-  gap: var(--size-4);
-}
-.np-table-content--success .np-table-content-text,
-.np-table-content--error .np-table-content-text {
-  line-height: 155%;
-}
-.np-table-content-media {
-  flex-shrink: 0;
-}
-.np-table-content-body {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-table-content--reversed {
-  flex-direction: row-reverse;
-}
-.np-table-content--reversed .np-table-content-body {
-  align-items: end;
-}
-.np-table-empty-data {
-  display: flex;
-  align-items: center;
-}
-.np-table-empty-data .status-circle {
-  margin-right: 12px;
-  margin-right: var(--size-12);
-}