@transferwise/components 0.0.0-experimental-3ab6847 → 0.0.0-experimental-0e85724

package/build/Snackbar/Snackbar.mjs

@@ -1,122 +1,125 @@
-import { useRef, useState, useEffect } from 'react';
+import { Component, createRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import Button from '../Button/Button.resolver.mjs';
 import Body from '../Body/Body.mjs';
+import { DirectionContext } from '../Provider/Direction/DirectionProvider.mjs';
 import withNextPortalWrapper from '../WithNextPortal/WithNextPortal.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const CSS_TRANSITION_DURATION = 400;
-const Snackbar = props => {
-  const bodyRef = useRef(null);
-  const leaveTimeout = useRef(0);
-  const transitionTimeout = useRef(0);
-  /** The props of the last committed render, as `this.props` was in the class component. */
-  const committedProps = useRef(props);
-  const [state, setState] = useState({
-    visible: false,
-    text: ''
-  });
-  useEffect(() => () => {
-    window.clearTimeout(leaveTimeout.current);
-    window.clearTimeout(transitionTimeout.current);
-  }, []);
-  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously
-  // relied on, including the shouldComponentUpdate guard that ignored every update without text.
-  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state
-  // updates are what keep this conversion behaviour-identical to the class component.
-  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  useEffect(() => {
-    const previousProps = committedProps.current;
-    committedProps.current = props;
+class Snackbar extends Component {
+  bodyRef = /*#__PURE__*/createRef();
+  timeout = 0;
+  transitionTimeout = 0;
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      text: ''
+    };
+  }
+  componentWillUnmount() {
+    window.clearTimeout(this.timeout);
+    window.clearTimeout(this.transitionTimeout);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (!nextProps.text) {
+      return false;
+    }
+    if (nextProps.timestamp === this.props.timestamp && nextState.visible === this.state.visible && nextState.text === this.state.text) {
+      return false;
+    }
+    return true;
+  }
+  setLeaveTimeout = () => {
+    const {
+      timeout
+    } = this.props;
+    this.timeout = window.setTimeout(() => {
+      this.setState({
+        visible: false
+      });
+    }, timeout);
+  };
+  componentDidUpdate(previousProps) {
     const {
       action,
       text,
-      timeout,
       timestamp
-    } = props;
-    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
-    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
-    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.
-    const updateWhileTextIsPresent = update => {
-      if (committedProps.current.text) {
-        update();
-      }
-    };
-    const setLeaveTimeout = () => {
-      leaveTimeout.current = window.setTimeout(() => {
-        updateWhileTextIsPresent(() => setState(current => ({
-          ...current,
-          visible: false
-        })));
-      }, timeout);
-    };
-    const show = () => {
-      setState(current => ({
-        ...current,
+    } = this.props;
+    if (!previousProps.text) {
+      this.setState({
         visible: true,
         action,
         text
-      }));
-      setLeaveTimeout();
-    };
-    if (!text) {
-      return;
-    }
-    if (!previousProps.text) {
-      show();
+      }, () => {
+        this.setLeaveTimeout();
+      });
     } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(leaveTimeout.current);
-      if (state.visible) {
-        setState(current => ({
-          ...current,
+      window.clearTimeout(this.timeout);
+      if (this.state.visible) {
+        this.setState({
           visible: false
-        }));
-        transitionTimeout.current = window.setTimeout(() => {
-          updateWhileTextIsPresent(show);
-        }, CSS_TRANSITION_DURATION);
+        }, () => {
+          this.transitionTimeout = window.setTimeout(() => {
+            this.setState({
+              visible: true,
+              action,
+              text
+            });
+            this.setLeaveTimeout();
+          }, CSS_TRANSITION_DURATION);
+        });
       } else {
-        show();
+        this.setState({
+          visible: true,
+          action,
+          text
+        });
+        this.setLeaveTimeout();
       }
     }
-  });
-  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  const {
-    action,
-    text,
-    visible
-  } = state;
-  const {
-    timeout
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    className: "snackbar",
-    "aria-live": "assertive",
-    role: "alert",
-    children: /*#__PURE__*/jsx(CSSTransition, {
-      nodeRef: bodyRef,
-      in: visible,
-      classNames: "snackbar__text-container",
-      timeout: {
-        appear: 0,
-        enter: timeout,
-        exit: CSS_TRANSITION_DURATION
-      },
-      unmountOnExit: true,
-      children: /*#__PURE__*/jsxs(Body, {
-        ref: bodyRef,
-        as: "span",
-        className: "snackbar__text",
-        children: [text, action ? /*#__PURE__*/jsx(Button, {
-          className: "snackbar__text__action",
-          v2: true,
-          size: "sm",
-          onClick: action.onClick,
-          children: action.label
-        }) : null]
+  }
+  render() {
+    const {
+      action,
+      text,
+      visible
+    } = this.state;
+    const {
+      timeout
+    } = this.props;
+    return /*#__PURE__*/jsx("div", {
+      className: "snackbar",
+      "aria-live": "assertive",
+      role: "alert",
+      children: /*#__PURE__*/jsx(CSSTransition, {
+        nodeRef: this.bodyRef,
+        in: visible,
+        classNames: "snackbar__text-container",
+        timeout: {
+          appear: 0,
+          enter: timeout,
+          exit: CSS_TRANSITION_DURATION
+        },
+        unmountOnExit: true,
+        children: /*#__PURE__*/jsxs(Body, {
+          ref: this.bodyRef,
+          as: "span",
+          className: "snackbar__text",
+          children: [text, action ? /*#__PURE__*/jsx(Button, {
+            className: "snackbar__text__action",
+            v2: true,
+            size: "sm",
+            onClick: action.onClick,
+            children: action.label
+          }) : null]
+        })
       })
-    })
-  });
-};
+    });
+  }
+}
+Snackbar.contextType = DirectionContext;
 var SnackbarPortal = withNextPortalWrapper(Snackbar);
 
 export { Snackbar, SnackbarPortal as default };

package/build/Snackbar/Snackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  text: React.ReactNode;\n  /** @deprecated */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\n  visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const leaveTimeout = useRef(0);\n  const transitionTimeout = useRef(0);\n  /** The props of the last committed render, as `this.props` was in the class component. */\n  const committedProps = useRef(props);\n\n  const [state, setState] = useState<SnackbarState>({\n    visible: false,\n    text: '',\n  });\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(leaveTimeout.current);\n      window.clearTimeout(transitionTimeout.current);\n    },\n    [],\n  );\n\n  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n  // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n  // updates are what keep this conversion behaviour-identical to the class component.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useEffect(() => {\n    const previousProps = committedProps.current;\n    committedProps.current = props;\n\n    const { action, text, timeout, timestamp } = props;\n\n    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n    const updateWhileTextIsPresent = (update: () => void) => {\n      if (committedProps.current.text) {\n        update();\n      }\n    };\n\n    const setLeaveTimeout = () => {\n      leaveTimeout.current = window.setTimeout(() => {\n        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n      }, timeout);\n    };\n\n    const show = () => {\n      setState((current) => ({ ...current, visible: true, action, text }));\n      setLeaveTimeout();\n    };\n\n    if (!text) {\n      return;\n    }\n\n    if (!previousProps.text) {\n      show();\n    } else if (previousProps.timestamp !== timestamp) {\n      window.clearTimeout(leaveTimeout.current);\n\n      if (state.visible) {\n        setState((current) => ({ ...current, visible: false }));\n        transitionTimeout.current = window.setTimeout(() => {\n          updateWhileTextIsPresent(show);\n        }, CSS_TRANSITION_DURATION);\n      } else {\n        show();\n      }\n    }\n  });\n  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n  const { action, text, visible } = state;\n  const { timeout } = props;\n\n  return (\n    <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n      <CSSTransition\n        nodeRef={bodyRef}\n        in={visible}\n        classNames=\"snackbar__text-container\"\n        timeout={{\n          appear: 0,\n          enter: timeout,\n          exit: CSS_TRANSITION_DURATION,\n        }}\n        unmountOnExit\n      >\n        <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n          {text}\n          {action ? (\n            <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n              {action.label}\n            </Button>\n          ) : null}\n        </Body>\n      </CSSTransition>\n    </div>\n  );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","previousProps","action","timeout","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { Component, createRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport { DirectionContext } from '../Provider/Direction';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  text: React.ReactNode;\n  /** @deprecated */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\n  visible: boolean;\n}\n\nexport class Snackbar extends Component<SnackbarProps, SnackbarState> {\n  bodyRef = createRef<HTMLSpanElement>();\n  timeout = 0;\n  transitionTimeout = 0;\n\n  constructor(props: SnackbarProps) {\n    super(props);\n    this.state = {\n      visible: false,\n      text: '',\n    };\n  }\n\n  componentWillUnmount() {\n    window.clearTimeout(this.timeout);\n    window.clearTimeout(this.transitionTimeout);\n  }\n\n  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {\n    if (!nextProps.text) {\n      return false;\n    }\n    if (\n      nextProps.timestamp === this.props.timestamp &&\n      nextState.visible === this.state.visible &&\n      nextState.text === this.state.text\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  setLeaveTimeout = () => {\n    const { timeout } = this.props;\n\n    this.timeout = window.setTimeout(() => {\n      this.setState({ visible: false });\n    }, timeout);\n  };\n\n  componentDidUpdate(previousProps: SnackbarProps) {\n    const { action, text, timestamp } = this.props;\n\n    if (!previousProps.text) {\n      this.setState({ visible: true, action, text }, () => {\n        this.setLeaveTimeout();\n      });\n    } else if (previousProps.timestamp !== timestamp) {\n      window.clearTimeout(this.timeout);\n\n      if (this.state.visible) {\n        this.setState({ visible: false }, () => {\n          this.transitionTimeout = window.setTimeout(() => {\n            this.setState({ visible: true, action, text });\n            this.setLeaveTimeout();\n          }, CSS_TRANSITION_DURATION);\n        });\n      } else {\n        this.setState({ visible: true, action, text });\n        this.setLeaveTimeout();\n      }\n    }\n  }\n\n  render() {\n    const { action, text, visible } = this.state;\n    const { timeout } = this.props;\n\n    return (\n      <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n        <CSSTransition\n          nodeRef={this.bodyRef}\n          in={visible}\n          classNames=\"snackbar__text-container\"\n          timeout={{\n            appear: 0,\n            enter: timeout,\n            exit: CSS_TRANSITION_DURATION,\n          }}\n          unmountOnExit\n        >\n          <Body ref={this.bodyRef} as=\"span\" className=\"snackbar__text\">\n            {text}\n            {action ? (\n              <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n                {action.label}\n              </Button>\n            ) : null}\n          </Body>\n        </CSSTransition>\n      </div>\n    );\n  }\n}\n\nSnackbar.contextType = DirectionContext;\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","Component","bodyRef","createRef","timeout","transitionTimeout","constructor","props","state","visible","text","componentWillUnmount","window","clearTimeout","shouldComponentUpdate","nextProps","nextState","timestamp","setLeaveTimeout","setTimeout","setState","componentDidUpdate","previousProps","action","render","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","contextType","DirectionContext","withNextPortal"],"mappings":"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"}

package/build/i18n/de.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Vorwahl",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.StatusIcon.iconLabel.error": "Fehler:",

package/build/i18n/de.json.js

@@ -39,6 +39,7 @@ var de = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
+	"neptune.PhoneNumberInput.phoneNumberPrefix": "Vorwahl",
 	"neptune.Select.searchPlaceholder": "Wird gesucht...",
 	"neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
 	"neptune.StatusIcon.iconLabel.error": "Fehler:",

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

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

package/build/i18n/de.json.mjs

@@ -35,6 +35,7 @@ var de = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
+	"neptune.PhoneNumberInput.phoneNumberPrefix": "Vorwahl",
 	"neptune.Select.searchPlaceholder": "Wird gesucht...",
 	"neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
 	"neptune.StatusIcon.iconLabel.error": "Fehler:",

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

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

package/build/i18n/fr.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
   "neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Indicatif",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.StatusIcon.iconLabel.error": "Erreur :",

package/build/i18n/fr.json.js

@@ -39,6 +39,7 @@ var fr = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
+	"neptune.PhoneNumberInput.phoneNumberPrefix": "Indicatif",
 	"neptune.Select.searchPlaceholder": "Recherche...",
 	"neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
 	"neptune.StatusIcon.iconLabel.error": "Erreur :",

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

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

package/build/i18n/fr.json.mjs

@@ -35,6 +35,7 @@ var fr = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
+	"neptune.PhoneNumberInput.phoneNumberPrefix": "Indicatif",
 	"neptune.Select.searchPlaceholder": "Recherche...",
 	"neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
 	"neptune.StatusIcon.iconLabel.error": "Erreur :",

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

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

package/build/i18n/th.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

package/build/i18n/th.json.js

@@ -39,6 +39,7 @@ var th = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
+	"neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
 	"neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

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

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

package/build/i18n/th.json.mjs

@@ -35,6 +35,7 @@ var th = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
+	"neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
 	"neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

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

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

package/build/main.css

@@ -23806,6 +23806,11 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;

package/build/styles/ListItem/ListItem.css

@@ -397,6 +397,11 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;

package/build/styles/main.css

@@ -23806,6 +23806,11 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;

package/build/types/ListItem/ListItem.d.ts

@@ -28,6 +28,11 @@ export type ListItemProps = {
      * Highlights the list item as an action to be taken or already taken. <br />
      */
     spotlight?: 'active' | 'inactive';
+    /**
+     * Vertical padding of the list item, in pixels.
+     * @default 12
+     */
+    paddingY?: 12 | 24;
     title: ReactNode;
     subtitle?: ReactNode;
     /**
@@ -72,7 +77,7 @@ export type ListItemProps = {
  * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)
  */
 export declare const ListItem: {
-    ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, disabledPromptMessage, className, valueColumnWidth, id, }: ListItemProps): import("react").JSX.Element;
+    ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, paddingY, valueTitle, valueSubtitle, control, disabled, disabledPromptMessage, className, valueColumnWidth, id, }: ListItemProps): import("react").JSX.Element;
     Image: {
         ({ alt, size, className, ...props }: import("./Image").ListItemImageProps): import("react").JSX.Element;
         displayName: string;

package/build/types/ListItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACvB,iBAAiB,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOf,CAAC;AA6GF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACvB,iBAAiB,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;oNAkBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Of,CAAC;AA6GF,eAAe,QAAQ,CAAC"}

package/build/types/Snackbar/Snackbar.d.ts

@@ -1,3 +1,4 @@
+import { Component } from 'react';
 import type { ThemeDark, ThemeLight } from '../common';
 export interface SnackbarProps {
     action?: {
@@ -10,7 +11,20 @@ export interface SnackbarProps {
     timeout: number;
     timestamp: number;
 }
-export declare const Snackbar: (props: SnackbarProps) => import("react").JSX.Element;
+interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
+    visible: boolean;
+}
+export declare class Snackbar extends Component<SnackbarProps, SnackbarState> {
+    bodyRef: import("react").RefObject<HTMLSpanElement>;
+    timeout: number;
+    transitionTimeout: number;
+    constructor(props: SnackbarProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState): boolean;
+    setLeaveTimeout: () => void;
+    componentDidUpdate(previousProps: SnackbarProps): void;
+    render(): import("react").JSX.Element;
+}
 declare const _default: (props: SnackbarProps) => import("react").ReactPortal | null;
 export default _default;
 //# sourceMappingURL=Snackbar.d.ts.map

package/build/types/Snackbar/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAMD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAmG5C,CAAC;;AAEF,wBAAwC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9E,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IACnE,OAAO,6CAAgC;IACvC,OAAO,SAAK;IACZ,iBAAiB,SAAK;gBAEV,KAAK,EAAE,aAAa;IAQhC,oBAAoB;IAKpB,qBAAqB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa;IAexE,eAAe,aAMb;IAEF,kBAAkB,CAAC,aAAa,EAAE,aAAa;IAwB/C,MAAM;CA6BP;;AAID,wBAAwC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3ab6847",
+  "version": "0.0.0-experimental-0e85724",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/ListItem/ListItem.css

@@ -397,6 +397,11 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;

package/src/ListItem/ListItem.less

@@ -11,6 +11,10 @@
   padding: var(--size-12) 0;
   container-type: inline-size;
 
+  &-paddingY-24 {
+    padding: var(--size-24) 0;
+  }
+
   & + .wds-list-item-spotlight,
   .wds-list-item-spotlight + & {
     margin-top: var(--size-16);

package/src/ListItem/ListItem.test.tsx

@@ -1513,6 +1513,23 @@ describe('ListItem', () => {
     });
   });
 
+  describe('paddingY', () => {
+    it('uses the default vertical padding when not set', () => {
+      render(<ListItem title="Test Title" />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the default vertical padding when set to 12', () => {
+      render(<ListItem title="Test Title" paddingY={12} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the larger vertical padding when set to 24', () => {
+      render(<ListItem title="Test Title" paddingY={24} />);
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-24');
+    });
+  });
+
   describe('disable states', () => {
     describe('short-lived', () => {
       it('should override existing prompt if disabled and disabledPromptMessage are set', () => {

package/src/ListItem/ListItem.tsx

@@ -59,6 +59,11 @@ export type ListItemProps = {
    * Highlights the list item as an action to be taken or already taken. <br />
    */
   spotlight?: 'active' | 'inactive';
+  /**
+   * Vertical padding of the list item, in pixels.
+   * @default 12
+   */
+  paddingY?: 12 | 24;
   title: ReactNode;
   subtitle?: ReactNode;
   /**
@@ -112,6 +117,7 @@ export const ListItem = ({
   inverted,
   media,
   spotlight,
+  paddingY = 12,
   valueTitle,
   valueSubtitle,
   control = null,
@@ -232,6 +238,7 @@ export const ListItem = ({
             'wds-list-item-partially-interactive': isPartiallyInteractive,
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
+            'wds-list-item-paddingY-24': paddingY === 24,
             disabled: disabled && !isPartiallyInteractive,
             'disabled--has-prompt-reason':
               !disabledPromptMessage && disabled && !isPartiallyInteractive,

package/src/ListItem/_stories/ListItem.layout.test.story.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Plane } from '@transferwise/icons';
 import List from '../../List';
 import { ListItem, type ListItemProps } from '../ListItem';
 import { lorem10, lorem20, lorem5 } from '../../test-utils';
@@ -61,6 +62,28 @@ export const GapsBetweenItems: Story = {
   },
 };
 
+export const PaddingY: Story = {
+  render: () => {
+    const props = {
+      title: lorem5,
+      subtitle: lorem10,
+      media: <ListItem.AvatarLayout size={32} avatars={[{ asset: <Plane /> }, { asset: '7+' }]} />,
+      control: CONTROLS.navigation,
+    };
+    return (
+      <List>
+        {([12, 24] as const).map((paddingY) => (
+          <Fragment key={paddingY}>
+            <ListItem {...props} paddingY={paddingY} />
+            <ListItem {...props} paddingY={paddingY} spotlight="active" />
+            <ListItem {...props} paddingY={paddingY} spotlight="inactive" />
+          </Fragment>
+        ))}
+      </List>
+    );
+  },
+};
+
 type PreviewStoryArgs = ListItemProps & {
   previewImageSize: ListItemMediaSize;
   previewWithLineGuides: boolean;