@transferwise/components 0.0.0-experimental-c81666a → 0.0.0-experimental-bb07bc5

package/build/i18n/ja.json

@@ -21,7 +21,7 @@
   "neptune.Label.optional": "（任意）",
   "neptune.Link.opensInNewTab": "（新しいタブで開きます）",
   "neptune.MoneyInput.Select.placeholder": "選択してください...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "通貨または国をご入力ください",
+  "neptune.MoneyInput.Select.searchPlaceholder": "通貨または国を入力してください",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "通貨を選択してください",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
   "neptune.PhoneNumberInput.countryCodeLabel": "国コード",

package/build/i18n/ja.json.js

@@ -25,7 +25,7 @@ var ja = {
 	"neptune.Label.optional": "（任意）",
 	"neptune.Link.opensInNewTab": "（新しいタブで開きます）",
 	"neptune.MoneyInput.Select.placeholder": "選択してください...",
-	"neptune.MoneyInput.Select.searchPlaceholder": "通貨または国をご入力ください",
+	"neptune.MoneyInput.Select.searchPlaceholder": "通貨または国を入力してください",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "通貨を選択してください",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
 	"neptune.PhoneNumberInput.countryCodeLabel": "国コード",

package/build/i18n/ja.json.mjs

@@ -21,7 +21,7 @@ var ja = {
 	"neptune.Label.optional": "（任意）",
 	"neptune.Link.opensInNewTab": "（新しいタブで開きます）",
 	"neptune.MoneyInput.Select.placeholder": "選択してください...",
-	"neptune.MoneyInput.Select.searchPlaceholder": "通貨または国をご入力ください",
+	"neptune.MoneyInput.Select.searchPlaceholder": "通貨または国を入力してください",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "通貨を選択してください",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
 	"neptune.PhoneNumberInput.countryCodeLabel": "国コード",

package/build/image/Image.js

@@ -10,6 +10,7 @@ var useHasIntersected = require('../common/hooks/useHasIntersected/useHasInterse
 require('../common/propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 const Image = ({
   id,
   src,
@@ -27,27 +28,27 @@ const Image = ({
     elRef: elementReference,
     loading
   });
-  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
-  const handleLoad = React.useCallback(() => {
-    if (hasIntersected && onLoad) {
-      onLoad();
-    }
-  }, [hasIntersected, onLoad]);
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
   return /*#__PURE__*/jsxRuntime.jsx("img", {
     ref: elementReference,
     id: id,
     alt: alt,
-    src: src,
-    loading: loading,
+    src: imageSource,
     className: clsx.clsx(['tw-image', {
       'tw-image__stretch': stretch,
       'tw-image__shrink': shrink
     }, className]),
     role: role,
-    onLoad: handleLoad,
+    onLoad: imageOnLoad,
     onError: onError
   });
 };
 
+exports.EmptyTransparentImage = EmptyTransparentImage;
 exports.default = Image;
 //# sourceMappingURL=Image.js.map

package/build/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n  // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n  const handleLoad = useCallback(() => {\n    if (hasIntersected && onLoad) {\n      onLoad();\n    }\n  }, [hasIntersected, onLoad]);\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={src}\n      loading={loading}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={handleLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,iBAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,GAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}
+{"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nexport const EmptyTransparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n  let imageSource = src;\n  let imageOnLoad = onLoad;\n\n  if (loading === 'lazy' && !hasIntersected) {\n    imageSource = EmptyTransparentImage;\n    imageOnLoad = undefined;\n  }\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={imageSource}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={imageOnLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["EmptyTransparentImage","Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","imageSource","imageOnLoad","undefined","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,qBAAqB,GAChC;AAEIC,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;EAChF,IAAIS,WAAW,GAAGd,GAAG;EACrB,IAAIe,WAAW,GAAGb,MAAM;AAExB,EAAA,IAAIG,OAAO,KAAK,MAAM,IAAI,CAACM,cAAc,EAAE;AACzCG,IAAAA,WAAW,GAAGjB,qBAAqB;AACnCkB,IAAAA,WAAW,GAAGC,SAAS;AACzB;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEc,WAAY;AACjBV,IAAAA,SAAS,EAAEe,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEb,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEa,WAAY;AACpBZ,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;;"}

package/build/image/Image.mjs

@@ -1,11 +1,12 @@
 import { clsx } from 'clsx';
-import { useRef, useCallback } from 'react';
+import { useRef } from 'react';
 import '@transferwise/neptune-validation';
 import '../provider/direction/DirectionProvider.mjs';
 import { useHasIntersected } from '../common/hooks/useHasIntersected/useHasIntersected.mjs';
 import '../common/propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
 
+const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 const Image = ({
   id,
   src,
@@ -23,27 +24,26 @@ const Image = ({
     elRef: elementReference,
     loading
   });
-  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
-  const handleLoad = useCallback(() => {
-    if (hasIntersected && onLoad) {
-      onLoad();
-    }
-  }, [hasIntersected, onLoad]);
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
   return /*#__PURE__*/jsx("img", {
     ref: elementReference,
     id: id,
     alt: alt,
-    src: src,
-    loading: loading,
+    src: imageSource,
     className: clsx(['tw-image', {
       'tw-image__stretch': stretch,
       'tw-image__shrink': shrink
     }, className]),
     role: role,
-    onLoad: handleLoad,
+    onLoad: imageOnLoad,
     onError: onError
   });
 };
 
-export { Image as default };
+export { EmptyTransparentImage, Image as default };
 //# sourceMappingURL=Image.mjs.map

package/build/image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n  // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n  const handleLoad = useCallback(() => {\n    if (hasIntersected && onLoad) {\n      onLoad();\n    }\n  }, [hasIntersected, onLoad]);\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={src}\n      loading={loading}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={handleLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,WAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,GAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}
+{"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nexport const EmptyTransparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n  let imageSource = src;\n  let imageOnLoad = onLoad;\n\n  if (loading === 'lazy' && !hasIntersected) {\n    imageSource = EmptyTransparentImage;\n    imageOnLoad = undefined;\n  }\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={imageSource}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={imageOnLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["EmptyTransparentImage","Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","imageSource","imageOnLoad","undefined","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBO,MAAMA,qBAAqB,GAChC;AAEIC,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;EAChF,IAAIS,WAAW,GAAGd,GAAG;EACrB,IAAIe,WAAW,GAAGb,MAAM;AAExB,EAAA,IAAIG,OAAO,KAAK,MAAM,IAAI,CAACM,cAAc,EAAE;AACzCG,IAAAA,WAAW,GAAGjB,qBAAqB;AACnCkB,IAAAA,WAAW,GAAGC,SAAS;AACzB;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEc,WAAY;AACjBV,IAAAA,SAAS,EAAEe,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEb,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEa,WAAY;AACpBZ,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}

package/build/index.js

@@ -274,6 +274,7 @@ Object.defineProperty(exports, "UploadStep", {
 	get: function () { return Upload.UploadStep; }
 });
 exports.UploadInput = UploadInput.default;
+exports.Item = Table.default;
 exports.Table = Table.default;
 exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;

package/build/index.js.map

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

package/build/index.mjs

@@ -105,7 +105,7 @@ export { default as Tooltip } from './tooltip/Tooltip.mjs';
 export { default as Typeahead } from './typeahead/Typeahead.mjs';
 export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
-export { default as Table } from './table/Table.mjs';
+export { default as Item, default as Table } from './table/Table.mjs';
 import '@transferwise/neptune-validation';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';

package/build/main.css

@@ -2662,6 +2662,218 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.wds-list-item {
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.wds-list-item .partially-interactive {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.wds-list-item label,
+.wds-list-item a {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.wds-list-item-interactive label {
+  cursor: pointer;
+}
+.wds-list-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
+  background-color: var(--Button-background-hover);
+  color: var(--Button-color-hover);
+  transition: none;
+}
+.wds-list-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-interactive .wds-list-item-control .wds-Button {
+  transition: none;
+}
+.wds-list-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.wds-list-item-body {
+  width: 100%;
+}
+.wds-list-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-value {
+  flex: 0 0 auto;
+}
+.wds-list-item-control {
+  flex: 0 0 auto;
+}
+.wds-list-item-navigation,
+.wds-list-item-navigation:hover,
+.wds-list-item-navigation:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.wds-list-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-list-item-prompt {
+  display: inline-flex;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-list-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/build/styles/listItem/ListItem.css

@@ -0,0 +1,212 @@
+.wds-list-item {
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.wds-list-item .partially-interactive {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.wds-list-item label,
+.wds-list-item a {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.wds-list-item-interactive label {
+  cursor: pointer;
+}
+.wds-list-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
+  background-color: var(--Button-background-hover);
+  color: var(--Button-color-hover);
+  transition: none;
+}
+.wds-list-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-interactive .wds-list-item-control .wds-Button {
+  transition: none;
+}
+.wds-list-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.wds-list-item-body {
+  width: 100%;
+}
+.wds-list-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-value {
+  flex: 0 0 auto;
+}
+.wds-list-item-control {
+  flex: 0 0 auto;
+}
+.wds-list-item-navigation,
+.wds-list-item-navigation:hover,
+.wds-list-item-navigation:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.wds-list-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-list-item-prompt {
+  display: inline-flex;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-list-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}