@transferwise/components 0.0.0-experimental-4ced564 → 0.0.0-experimental-6a6c19f

package/build/i18n/zh-CN.json.js

@@ -25,7 +25,6 @@ var zhCN = {
 	"neptune.Label.optional": "（可选）",
 	"neptune.Link.opensInNewTab": "（在新标签页中打开）",
 	"neptune.MoneyInput.Select.placeholder": "请选择...",
-	"neptune.MoneyInput.Select.searchPlaceholder": "输入货币或国家/地区",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",

package/build/i18n/zh-CN.json.js.map

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

package/build/i18n/zh-CN.json.mjs

@@ -21,7 +21,6 @@ var zhCN = {
 	"neptune.Label.optional": "（可选）",
 	"neptune.Link.opensInNewTab": "（在新标签页中打开）",
 	"neptune.MoneyInput.Select.placeholder": "请选择...",
-	"neptune.MoneyInput.Select.searchPlaceholder": "输入货币或国家/地区",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",

package/build/i18n/zh-CN.json.mjs.map

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

package/build/i18n/zh-HK.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "（可選）",
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
-  "neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",

package/build/i18n/zh-HK.json.js

@@ -25,7 +25,6 @@ var zhHK = {
 	"neptune.Label.optional": "（可選）",
 	"neptune.Link.opensInNewTab": "（在新分頁中開啟）",
 	"neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
-	"neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
 	"neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",

package/build/i18n/zh-HK.json.js.map

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

package/build/i18n/zh-HK.json.mjs

@@ -21,7 +21,6 @@ var zhHK = {
 	"neptune.Label.optional": "（可選）",
 	"neptune.Link.opensInNewTab": "（在新分頁中開啟）",
 	"neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
-	"neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
 	"neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",

package/build/i18n/zh-HK.json.mjs.map

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

package/build/image/Image.js

@@ -10,7 +10,6 @@ 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,
@@ -28,27 +27,27 @@ const Image = ({
     elRef: elementReference,
     loading
   });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = React.useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
   return /*#__PURE__*/jsxRuntime.jsx("img", {
     ref: elementReference,
     id: id,
     alt: alt,
-    src: imageSource,
+    src: src,
+    loading: loading,
     className: clsx.clsx(['tw-image', {
       'tw-image__stretch': stretch,
       'tw-image__shrink': shrink
     }, className]),
     role: role,
-    onLoad: imageOnLoad,
+    onLoad: handleLoad,
     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 } 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;;;;;"}
+{"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;;;;"}

package/build/image/Image.mjs

@@ -1,12 +1,11 @@
 import { clsx } from 'clsx';
-import { useRef } from 'react';
+import { useRef, useCallback } 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,
@@ -24,26 +23,27 @@ const Image = ({
     elRef: elementReference,
     loading
   });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
   return /*#__PURE__*/jsx("img", {
     ref: elementReference,
     id: id,
     alt: alt,
-    src: imageSource,
+    src: src,
+    loading: loading,
     className: clsx(['tw-image', {
       'tw-image__stretch': stretch,
       'tw-image__shrink': shrink
     }, className]),
     role: role,
-    onLoad: imageOnLoad,
+    onLoad: handleLoad,
     onError: onError
   });
 };
 
-export { EmptyTransparentImage, Image as default };
+export { 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 } 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;;;;"}
+{"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;;;;"}

package/build/types/image/Image.d.ts

@@ -10,7 +10,6 @@ export interface ImageProps {
     role?: string;
     shrink?: boolean;
 }
-export declare const EmptyTransparentImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 declare const Image: ({ id, src, alt, onLoad, onError, className, loading, stretch, role, shrink, }: ImageProps) => import("react").JSX.Element;
 export default Image;
 //# sourceMappingURL=Image.d.ts.map

package/build/types/image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/image/Image.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,qBAAqB,+EAC4C,CAAC;AAE/E,QAAA,MAAM,KAAK,GAAI,+EAWZ,UAAU,gCA8BZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/image/Image.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,KAAK,GAAI,+EAWZ,UAAU,gCA+BZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4ced564",
+  "version": "0.0.0-experimental-6a6c19f",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "storybook": "^8.6.14",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.4",
-    "@wise/components-theming": "1.6.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.6.3"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",

package/src/i18n/cs.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Volitelné)",
   "neptune.Link.opensInNewTab": "(otevře se v nové kartě)",
   "neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Napište měnu nebo zemi",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Vybrat měnu",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kód země",

package/src/i18n/de.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
   "neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Gib eine Währung oder ein Land ein",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Wähle eine Währung",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",

package/src/i18n/es.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
   "neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Indica una divisa o país",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecciona una divisa",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código de país",

package/src/i18n/fr.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(facultatif)",
   "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Saisissez une devise ou un pays",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Sélectionnez une devise",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
   "neptune.PhoneNumberInput.countryCodeLabel": "Code pays",

package/src/i18n/hu.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Válaszható)",
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Írj be egy pénznemet vagy országot",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pénznem kiválasztása",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Országazonosító",

package/src/i18n/id.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Opsional)",
   "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Ketik nama mata uang atau negara",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pilih mata uang",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kode negara",

package/src/i18n/it.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Facoltativo)",
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Inserisci una valuta o un paese",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Scegli la valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Prefisso",

package/src/i18n/ja.json

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

package/src/i18n/nl.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Optioneel)",
   "neptune.Link.opensInNewTab": "(wordt geopend in een nieuw tabblad)",
   "neptune.MoneyInput.Select.placeholder": "Selecteer een optie...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Typ een valuta of land",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecteer valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Landcode",
@@ -36,7 +35,7 @@
   "neptune.StatusIcon.iconLabel.success": "Gelukt:",
   "neptune.StatusIcon.iconLabel.warning": "Waarschuwing:",
   "neptune.Summary.statusDone": "Item klaar",
-  "neptune.Summary.statusNotDone": "Te doen-item",
+  "neptune.Summary.statusNotDone": "Item te doen",
   "neptune.Summary.statusPending": "Item in behandeling",
   "neptune.Table.actionHeader": "Actie",
   "neptune.Table.emptyData": "Geen resultaten gevonden",
@@ -47,7 +46,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.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
+  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand.",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
   "neptune.Upload.retry": "Opnieuw proberen",
@@ -60,7 +59,7 @@
   "neptune.UploadButton.maximumFiles": "Maximaal {maxFiles} bestanden.",
   "neptune.UploadButton.uploadFile": "Bestand uploaden",
   "neptune.UploadButton.uploadFiles": "Bestanden uploaden",
-  "neptune.UploadInput.deleteModalBody": "Als je dit bestand verwijdert, wordt het van ons systeem gewist.",
+  "neptune.UploadInput.deleteModalBody": "Door dit bestand te verwijderen, wordt het uit ons systeem verwijderd.",
   "neptune.UploadInput.deleteModalCancelButtonText": "Annuleren",
   "neptune.UploadInput.deleteModalConfirmButtonText": "Verwijderen",
   "neptune.UploadInput.deleteModalTitle": "Weet je zeker dat je dit bestand wilt verwijderen?",

package/src/i18n/pl.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(opcjonalne)",
   "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Wpisz walutę lub kraj",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Wybierz walutę",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Numer kierunkowy",

package/src/i18n/pt.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(abre em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Digite uma moeda ou país",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecione a moeda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código do país",

package/src/i18n/ro.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Opțional)",
   "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Tastează o monedă sau țară",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selectează moneda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Codul țării",

package/src/i18n/ru.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(необязательно)",
   "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Введите валюту или страну",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Выберите валюту",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Код страны",

package/src/i18n/th.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(ไม่บังคับ)",
   "neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "ป้อนสกุลเงินหรือประเทศ",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "เลือกสกุลเงิน",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",

package/src/i18n/tr.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "Bir para birimi veya ülke girin",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Para birimi seçin",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ülke kodu",

package/src/i18n/zh-CN.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "（可选）",
   "neptune.Link.opensInNewTab": "（在新标签页中打开）",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
-  "neptune.MoneyInput.Select.searchPlaceholder": "输入货币或国家/地区",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",

package/src/i18n/zh-HK.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "（可選）",
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
-  "neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",

package/src/image/Image.spec.tsx

@@ -1,7 +1,7 @@
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 
-import { EmptyTransparentImage, ImageProps } from './Image';
+import { ImageProps } from './Image';
 
 import Image from '.';
 
@@ -32,14 +32,14 @@ describe('Image', () => {
   });
 
   describe('when lazy loading is enabled', () => {
-    it('renders the image with EmptyTransparentImage if element is not visible', () => {
+    it('renders the image with actual src even if element is not visible', () => {
       jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
       render(<Image {...props} />);
 
       const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
-      expect(image.src).toStrictEqual(EmptyTransparentImage);
+      expect(image.src).toStrictEqual(props.src);
     });
 
     it('renders the image with src if element is visible', () => {

package/src/image/Image.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 
 import { useHasIntersected } from '../common/hooks';
 
@@ -16,9 +16,6 @@ export interface ImageProps {
   shrink?: boolean;
 }
 
-export const EmptyTransparentImage =
-  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-
 const Image = ({
   id,
   src,
@@ -33,20 +30,21 @@ const Image = ({
 }: ImageProps) => {
   const elementReference = useRef<HTMLImageElement>(null);
   const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
 
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
 
   return (
     <img
       ref={elementReference}
       id={id}
       alt={alt}
-      src={imageSource}
+      src={src}
+      loading={loading}
       className={clsx([
         'tw-image',
         {
@@ -56,7 +54,7 @@ const Image = ({
         className,
       ])}
       role={role}
-      onLoad={imageOnLoad}
+      onLoad={handleLoad}
       onError={onError}
     />
   );

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`PromoCard matches snapshot 1`] = `
     <img
       alt="Test Image"
       class="tw-image tw-image__stretch tw-image__shrink"
+      loading="lazy"
       src="test.jpg"
     />
   </div>

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -33,6 +33,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>
@@ -67,6 +68,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>