@transferwise/components 0.0.0-experimental-bab2370 → 0.0.0-experimental-9cfa4db

package/build/i18n/id.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
   "neptune.Upload.csSuccessText": "Pengunggahan selesai!",
   "neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
   "neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
   "neptune.Upload.psButtonText": "Batalkan",
   "neptune.Upload.psProcessingText": "Mengunggah...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Atau pilih file",
   "neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
   "neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
   "neptune.UploadButton.allFileTypes": "Semua jenis file",
   "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
   "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

package/build/i18n/id.json.js

@@ -49,6 +49,7 @@ var id = {
 	"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
 	"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
 	"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
 	"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
 	"neptune.Upload.psButtonText": "Batalkan",
 	"neptune.Upload.psProcessingText": "Mengunggah...",
@@ -56,6 +57,7 @@ var id = {
 	"neptune.Upload.usButtonText": "Atau pilih file",
 	"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
 	"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
 	"neptune.UploadButton.allFileTypes": "Semua jenis file",
 	"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
 	"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

package/build/i18n/id.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/id.json.mjs

@@ -45,6 +45,7 @@ var id = {
 	"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
 	"neptune.Upload.csSuccessText": "Pengunggahan selesai!",
 	"neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
 	"neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
 	"neptune.Upload.psButtonText": "Batalkan",
 	"neptune.Upload.psProcessingText": "Mengunggah...",
@@ -52,6 +53,7 @@ var id = {
 	"neptune.Upload.usButtonText": "Atau pilih file",
 	"neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
 	"neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
 	"neptune.UploadButton.allFileTypes": "Semua jenis file",
 	"neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
 	"neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

package/build/i18n/id.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/nl.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
   "neptune.Upload.csSuccessText": "Uploaden voltooid!",
   "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
   "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Of selecteer een bestand",
   "neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
   "neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
   "neptune.UploadButton.allFileTypes": "Alle bestandstypen",
   "neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

package/build/i18n/nl.json.js

@@ -49,6 +49,7 @@ var nl = {
 	"neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
 	"neptune.Upload.csSuccessText": "Uploaden voltooid!",
 	"neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
 	"neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
 	"neptune.Upload.psButtonText": "Annuleren",
 	"neptune.Upload.psProcessingText": "Uploaden...",
@@ -56,6 +57,7 @@ var nl = {
 	"neptune.Upload.usButtonText": "Of selecteer een bestand",
 	"neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
 	"neptune.UploadButton.allFileTypes": "Alle bestandstypen",
 	"neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

package/build/i18n/nl.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"nl.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"nl.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/nl.json.mjs

@@ -45,6 +45,7 @@ var nl = {
 	"neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
 	"neptune.Upload.csSuccessText": "Uploaden voltooid!",
 	"neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+	"neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
 	"neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
 	"neptune.Upload.psButtonText": "Annuleren",
 	"neptune.Upload.psProcessingText": "Uploaden...",
@@ -52,6 +53,7 @@ var nl = {
 	"neptune.Upload.usButtonText": "Of selecteer een bestand",
 	"neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+	"neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
 	"neptune.UploadButton.allFileTypes": "Alle bestandstypen",
 	"neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
 	"neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

package/build/i18n/nl.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"nl.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"nl.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -3166,6 +3166,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/build/styles/listItem/ListItem.css

@@ -522,6 +522,8 @@
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/build/styles/main.css

@@ -3166,6 +3166,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bab2370",
+  "version": "0.0.0-experimental-9cfa4db",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,9 +83,9 @@
     "storybook": "^9.0.18",
     "storybook-addon-tag-badges": "^2.0.1",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
     "@wise/components-theming": "1.6.4",
+    "@transferwise/less-config": "3.1.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/i18n/id.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
   "neptune.Upload.csSuccessText": "Pengunggahan selesai!",
   "neptune.Upload.csTooLargeMessage": "Harap berikan file yang lebih kecil dari {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Harap berikan file yang lebih kecil",
   "neptune.Upload.csWrongTypeMessage": "Tipe file ini tidak didukung. Mohon coba lagi dengan file yang berbeda",
   "neptune.Upload.psButtonText": "Batalkan",
   "neptune.Upload.psProcessingText": "Mengunggah...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Atau pilih file",
   "neptune.Upload.usDropMessage": "Letakkan file untuk mulai mengunggah",
   "neptune.Upload.usPlaceholder": "Seret dan lepas file yang kurang dari {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Seret dan lepaskan file",
   "neptune.UploadButton.allFileTypes": "Semua jenis file",
   "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
   "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",

package/src/i18n/nl.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
   "neptune.Upload.csSuccessText": "Uploaden voltooid!",
   "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Verstrek een kleiner bestand",
   "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Of selecteer een bestand",
   "neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
   "neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Sleep een bestand hierheen",
   "neptune.UploadButton.allFileTypes": "Alle bestandstypen",
   "neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",

package/src/listItem/ListItem.css

@@ -522,6 +522,8 @@
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/src/listItem/ListItem.less

@@ -6,6 +6,7 @@
   list-style: none;
   width: 100%;
   border-radius: var(--radius-medium);
+  background-color: var(--color-background-screen);
   position: relative;
   padding: var(--size-12) 0;
   container-type: inline-size;

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -2,15 +2,7 @@ import { useState } from 'react';
 import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import {
-  InfoCircle,
-  Documents,
-  Warning,
-  Home,
-  Globe,
-  People,
-  Link as LinkIcon,
-} from '@transferwise/icons';
+import { InfoCircle, Documents } from '@transferwise/icons';
 import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
 import Modal from '../../modal';
 import Link from '../../link';
@@ -31,7 +23,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/Common Scenarios',
+  title: 'Content/ListItem/common scenarios',
   tags: ['autodocs'],
   args: {
     title: lorem5,
@@ -234,112 +226,3 @@ export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
     );
   },
 });
-
-export const Summary: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#f8f9fa' },
-        { name: 'dark', value: '#343a40' },
-      ],
-    },
-  },
-  render: () => {
-    const listItems = (
-      <List>
-        <ListItem
-          title="System maintenance"
-          subtitle="Scheduled downtime notification"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <Warning />
-            </ListItem.AvatarView>
-          }
-          control={
-            <ListItem.IconButton partiallyInteractive>
-              <InfoCircle />
-            </ListItem.IconButton>
-          }
-        />
-        <ListItem
-          title="One link, one QR code, many uses"
-          subtitle="Quick Pay is a unique link and QR code for your business to get paid online and in person."
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <LinkIcon />
-            </ListItem.AvatarView>
-          }
-        />
-        <ListItem
-          title="Action required"
-          subtitle="Update your payment address"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <Home />
-            </ListItem.AvatarView>
-          }
-          additionalInfo={
-            <ListItem.AdditionalInfo
-              action={{ label: 'Change Address', onClick: () => console.log('hello') }}
-            />
-          }
-        />
-        <ListItem
-          title="Action required"
-          subtitle="Update your payment address"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <Home />
-            </ListItem.AvatarView>
-          }
-          additionalInfo={
-            <ListItem.AdditionalInfo
-              action={{ label: 'Change Address', onClick: () => console.log('hello') }}
-            />
-          }
-          control={
-            <ListItem.IconButton partiallyInteractive>
-              <InfoCircle />
-            </ListItem.IconButton>
-          }
-        />
-        <ListItem
-          title="Receive money from around the world"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <Globe />
-            </ListItem.AvatarView>
-          }
-        />
-        <ListItem
-          title="Let customers pay in a currency they trust"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <People />
-            </ListItem.AvatarView>
-          }
-        />
-      </List>
-    );
-    return (
-      <>
-        <div style={{ padding: '24px', width: '450px' }}>{listItems}</div>
-        <div
-          style={{
-            padding: '24px',
-            width: '450px',
-            backgroundColor: 'var(--color-background-neutral)',
-          }}
-        >
-          {listItems}
-        </div>
-      </>
-    );
-  },
-};

package/src/main.css

@@ -3166,6 +3166,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;