@transferwise/components 46.45.0 → 46.46.0

package/build/navigationOption/NavigationOption.mjs

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import Chevron from '../chevron/Chevron.mjs';
+import Option from '../common/Option/Option.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Position } from '../common/propsValues/position.mjs';
+
+const NavigationOption = /*#__PURE__*/forwardRef(({
+  as: component = 'button',
+  disabled = false,
+  onClick,
+  className,
+  ...rest
+}, reference) => {
+  if ('href' in rest && rest.href) {
+    component = 'a';
+  }
+  return /*#__PURE__*/jsx(Option, {
+    ...rest,
+    ref: reference,
+    as: component,
+    className: classNames('np-navigation-option', className),
+    button: /*#__PURE__*/jsx(Chevron, {
+      orientation: Position.RIGHT,
+      disabled: disabled,
+      className: "d-block"
+    }),
+    disabled: disabled,
+    onClick: event => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(event);
+      }
+    }
+  });
+});
+
+export { NavigationOption as default };
+//# sourceMappingURL=NavigationOption.mjs.map

package/build/navigationOption/NavigationOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\ntype NavigationOptionProps = OptionProps;\n\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n    if ('href' in rest && rest.href) {\n      component = 'a';\n    }\n\n    return (\n      <Option\n        {...rest}\n        ref={reference}\n        as={component}\n        className={classNames('np-navigation-option', className)}\n        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n        disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      />\n    );\n  },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","classNames","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;AAUA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC,IAAAA;AAAM,CAAA,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG,CAAA;AACjB,GAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,UAAU,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACzDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC,SAAA;AAAS,KAAG,CAAC;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE,CAAA;AACtB,QAAA,OAAA;AACF,OAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC,CAAA;AAChB,OAAA;AACF,KAAA;AAAE,GACF,CAAA,CAAA;AAEN,CAAC;;;;"}

package/build/navigationOptionsList/NavigationOptionsList.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+const NavigationOptionList = ({
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("ul", {
+    className: "np-navigation-options-list",
+    children: React.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx("li", {
+      className: "np-navigation-options-list__item",
+      children: child
+    }, child?.toString()))
+  });
+};
+
+module.exports = NavigationOptionList;
+//# sourceMappingURL=NavigationOptionsList.js.map

package/build/navigationOptionsList/NavigationOptionsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;AAOMA,MAAAA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA,QAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK,KAAAA;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL,CAAA;AAAC,GACA,CAAC,CAAA;AAET;;;;"}

package/build/navigationOptionsList/NavigationOptionsList.mjs

@@ -0,0 +1,17 @@
+import { Children } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const NavigationOptionList = ({
+  children
+}) => {
+  return /*#__PURE__*/jsx("ul", {
+    className: "np-navigation-options-list",
+    children: Children.map(children, child => /*#__PURE__*/jsx("li", {
+      className: "np-navigation-options-list__item",
+      children: child
+    }, child?.toString()))
+  });
+};
+
+export { NavigationOptionList as default };
+//# sourceMappingURL=NavigationOptionsList.mjs.map

package/build/navigationOptionsList/NavigationOptionsList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n  children: React.ReactNode;\n}\n\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n  return (\n    <ul className=\"np-navigation-options-list\">\n      {Children.map(children, (child) => (\n        <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAOMA,MAAAA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA,QAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK,KAAAA;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL,CAAA;AAAC,GACA,CAAC,CAAA;AAET;;;;"}

package/build/nudge/Nudge.js

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var art = require('@wise/art');
+var classNames = require('classnames');
+var React = require('react');
+var Body = require('../body/Body.js');
+var CloseButton = require('../common/closeButton/CloseButton.js');
+var Link = require('../link/Link.js');
+var Action = require('../common/action/Action.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const STORAGE_NAME = 'dismissedNudges';
+const getLocalStorage = () => {
+  try {
+    const storageItem = localStorage.getItem(STORAGE_NAME);
+    if (storageItem) {
+      const storage = JSON.parse(storageItem);
+      if (Array.isArray(storage)) {
+        return storage.map(item => String(item));
+      }
+    }
+    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+  } catch (error) {}
+  return [];
+};
+const Nudge = ({
+  media,
+  mediaName,
+  title,
+  link,
+  href,
+  onClick,
+  onDismiss,
+  persistDismissal,
+  isPreviouslyDismissed,
+  id,
+  className,
+  action
+}) => {
+  const [isDismissed, setIsDismissed] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  const handleOnDismiss = () => {
+    const dismissedNudgesStorage = getLocalStorage();
+    if (persistDismissal && id) {
+      try {
+        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
+        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+      } catch (error) {}
+      setIsDismissed(true);
+    }
+    if (onDismiss) {
+      onDismiss();
+    }
+  };
+  React.useEffect(() => {
+    if (persistDismissal && id) {
+      const dismissedNudgesStorage = getLocalStorage();
+      let isDismissed = false;
+      if (dismissedNudgesStorage?.find(item => item === id)) {
+        setIsDismissed(true);
+        isDismissed = true;
+      }
+      if (isPreviouslyDismissed) {
+        isPreviouslyDismissed(isDismissed);
+      }
+    }
+    setIsMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, persistDismissal]);
+  if (persistDismissal && (isDismissed || !isMounted)) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('wds-nudge', className),
+    id: id,
+    children: [!!mediaName && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "wds-nudge-media",
+      children: /*#__PURE__*/jsxRuntime.jsx(art.Illustration, {
+        name: mediaName,
+        className: classNames__default.default(`wds-nudge-media-${mediaName}`),
+        size: "small",
+        disablePadding: true,
+        alt: ""
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "wds-nudge-container",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "wds-nudge-content",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+          type: typography.Typography.BODY_LARGE,
+          className: classNames__default.default('wds-nudge-body'),
+          children: title
+        }), link && /*#__PURE__*/jsxRuntime.jsx(Link, {
+          href: href,
+          type: typography.Typography.LINK_LARGE,
+          className: "wds-nudge-link",
+          onClick: onClick,
+          children: link
+        }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
+          action: action,
+          className: "m-t-1"
+        })]
+      }), onDismiss || persistDismissal ? /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+        className: "wds-nudge-control",
+        size: "sm",
+        onClick: handleOnDismiss
+      }) : null]
+    })]
+  });
+};
+
+exports.STORAGE_NAME = STORAGE_NAME;
+exports.default = Nudge;
+//# sourceMappingURL=Nudge.js.map

package/build/nudge/Nudge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport classNames from 'classnames';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: ActionOptions;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={classNames('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={classNames(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>\n            {title}\n          </Body>\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","classNames","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}

package/build/nudge/Nudge.mjs

@@ -0,0 +1,112 @@
+import { Illustration } from '@wise/art';
+import classNames from 'classnames';
+import { useState, useEffect } from 'react';
+import Body from '../body/Body.mjs';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import Link from '../link/Link.mjs';
+import { Action } from '../common/action/Action.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../common/propsValues/typography.mjs';
+
+const STORAGE_NAME = 'dismissedNudges';
+const getLocalStorage = () => {
+  try {
+    const storageItem = localStorage.getItem(STORAGE_NAME);
+    if (storageItem) {
+      const storage = JSON.parse(storageItem);
+      if (Array.isArray(storage)) {
+        return storage.map(item => String(item));
+      }
+    }
+    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+  } catch (error) {}
+  return [];
+};
+const Nudge = ({
+  media,
+  mediaName,
+  title,
+  link,
+  href,
+  onClick,
+  onDismiss,
+  persistDismissal,
+  isPreviouslyDismissed,
+  id,
+  className,
+  action
+}) => {
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const handleOnDismiss = () => {
+    const dismissedNudgesStorage = getLocalStorage();
+    if (persistDismissal && id) {
+      try {
+        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
+        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+      } catch (error) {}
+      setIsDismissed(true);
+    }
+    if (onDismiss) {
+      onDismiss();
+    }
+  };
+  useEffect(() => {
+    if (persistDismissal && id) {
+      const dismissedNudgesStorage = getLocalStorage();
+      let isDismissed = false;
+      if (dismissedNudgesStorage?.find(item => item === id)) {
+        setIsDismissed(true);
+        isDismissed = true;
+      }
+      if (isPreviouslyDismissed) {
+        isPreviouslyDismissed(isDismissed);
+      }
+    }
+    setIsMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, persistDismissal]);
+  if (persistDismissal && (isDismissed || !isMounted)) {
+    return null;
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('wds-nudge', className),
+    id: id,
+    children: [!!mediaName && /*#__PURE__*/jsx("div", {
+      className: "wds-nudge-media",
+      children: /*#__PURE__*/jsx(Illustration, {
+        name: mediaName,
+        className: classNames(`wds-nudge-media-${mediaName}`),
+        size: "small",
+        disablePadding: true,
+        alt: ""
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "wds-nudge-container",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "wds-nudge-content",
+        children: [/*#__PURE__*/jsx(Body, {
+          type: Typography.BODY_LARGE,
+          className: classNames('wds-nudge-body'),
+          children: title
+        }), link && /*#__PURE__*/jsx(Link, {
+          href: href,
+          type: Typography.LINK_LARGE,
+          className: "wds-nudge-link",
+          onClick: onClick,
+          children: link
+        }), action && /*#__PURE__*/jsx(Action, {
+          action: action,
+          className: "m-t-1"
+        })]
+      }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(CloseButton, {
+        className: "wds-nudge-control",
+        size: "sm",
+        onClick: handleOnDismiss
+      }) : null]
+    })]
+  });
+};
+
+export { STORAGE_NAME, Nudge as default };
+//# sourceMappingURL=Nudge.mjs.map

package/build/nudge/Nudge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport classNames from 'classnames';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`;\n\ntype BaseProps = {\n  /** @deprecated use `mediaName` property instead */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: ActionOptions;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={classNames('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={classNames(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>\n            {title}\n          </Body>\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","classNames","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}

package/build/overlayHeader/OverlayHeader.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var classNames = require('classnames');
+var CloseButton = require('../common/closeButton/CloseButton.js');
+var FlowHeader = require('../common/flowHeader/FlowHeader.js');
+var Logo = require('../logo/Logo.js');
+var jsxRuntime = require('react/jsx-runtime');
+var size = require('../common/propsValues/size.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
+function OverlayHeader({
+  avatar,
+  onClose,
+  logo = defaultLogo
+}) {
+  const closeButton = onClose && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+    size: size.Size.LARGE,
+    onClick: onClose
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "np-overlay-header d-flex justify-content-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader, {
+      className: "np-overlay-header__content p-a-3",
+      leftContent: logo,
+      rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames__default.default('d-flex', 'align-items-center', 'order-2'),
+        children: [avatar, avatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: classNames__default.default('m-x-1')
+        }), closeButton]
+      })
+    })
+  });
+}
+
+module.exports = OverlayHeader;
+//# sourceMappingURL=OverlayHeader.js.map

package/build/overlayHeader/OverlayHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHeader.js","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { Size } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader';\nimport Logo from '../logo';\n\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={classNames('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={classNames('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","classNames"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG,CAAA;AAEJ,SAAAC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN,WAAAA;AAAiC,CAAA,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,cAAA,CAACO,uBAAW,EAAA;IAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP,OAAAA;AAAQ,GAAA,CAAG,CAAA;AAClF,EAAA,oBACEJ,cAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,cAAA,CAACc,UAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,eAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,2BAAU,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GACnEV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,2BAAU,CAAC,OAAO,CAAA;UAAK,EACjEZ,WAAW,CAAA;OACT,CAAA;KAGX,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/overlayHeader/OverlayHeader.mjs

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
+import Logo from '../logo/Logo.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Size } from '../common/propsValues/size.mjs';
+
+const defaultLogo = /*#__PURE__*/jsx(Logo, {});
+function OverlayHeader({
+  avatar,
+  onClose,
+  logo = defaultLogo
+}) {
+  const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
+    size: Size.LARGE,
+    onClick: onClose
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "np-overlay-header d-flex justify-content-center",
+    children: /*#__PURE__*/jsx(FlowHeader, {
+      className: "np-overlay-header__content p-a-3",
+      leftContent: logo,
+      rightContent: /*#__PURE__*/jsxs("div", {
+        className: classNames('d-flex', 'align-items-center', 'order-2'),
+        children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
+          className: classNames('m-x-1')
+        }), closeButton]
+      })
+    })
+  });
+}
+
+export { OverlayHeader as default };
+//# sourceMappingURL=OverlayHeader.mjs.map

package/build/overlayHeader/OverlayHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHeader.mjs","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { Size } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader';\nimport Logo from '../logo';\n\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={classNames('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={classNames('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","classNames"],"mappings":";;;;;;;AAeA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG,CAAA;AAEJ,SAAAC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN,WAAAA;AAAiC,CAAA,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,GAAA,CAACO,WAAW,EAAA;IAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP,OAAAA;AAAQ,GAAA,CAAG,CAAA;AAClF,EAAA,oBACEJ,GAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,GAAA,CAACc,UAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,IAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,UAAU,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GACnEV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,UAAU,CAAC,OAAO,CAAA;UAAK,EACjEZ,WAAW,CAAA;OACT,CAAA;KAGX,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/phoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var contexts = require('../inputs/contexts.js');
+var SelectInput = require('../inputs/SelectInput.js');
+var PhoneNumberInput_messages = require('./PhoneNumberInput.messages.js');
+var countries = require('./data/countries.js');
+var index = require('./utils/setDefaultPrefix/index.js');
+var isValidPhoneNumber = require('./utils/isValidPhoneNumber/isValidPhoneNumber.js');
+var index$1 = require('./utils/explodeNumberModel/index.js');
+var index$2 = require('./utils/findCountryByPrefix/index.js');
+var cleanNumber = require('./utils/cleanNumber/cleanNumber.js');
+var sortArrayByProperty = require('./utils/sortArrayByProperty/sortArrayByProperty.js');
+var groupCountriesByPrefix = require('./utils/groupCountriesByPrefix/groupCountriesByPrefix.js');
+var excludeCountries = require('./utils/excludeCountries/excludeCountries.js');
+var jsxRuntime = require('react/jsx-runtime');
+var size = require('../common/propsValues/size.js');
+
+const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
+const defaultSelectProps = {};
+const defaultDisabledCountries = [];
+const PhoneNumberInput = ({
+  id,
+  'aria-labelledby': ariaLabelledByProp,
+  required,
+  disabled,
+  initialValue,
+  onChange,
+  onFocus,
+  onBlur,
+  countryCode,
+  searchPlaceholder = 'Prefix',
+  size: size$1 = size.Size.MEDIUM,
+  placeholder,
+  selectProps = defaultSelectProps,
+  disabledCountries = defaultDisabledCountries
+}) => {
+  const inputAttributes = contexts.useInputAttributes({
+    nonLabelable: true
+  });
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
+  const {
+    locale,
+    formatMessage
+  } = reactIntl.useIntl();
+  const [internalValue, setInternalValue] = React.useState(() => {
+    const cleanValue = initialValue ? cleanNumber.cleanNumber(initialValue) : null;
+    if (!cleanValue || !isValidPhoneNumber.isValidPhoneNumber(cleanValue)) {
+      return {
+        prefix: index.setDefaultPrefix(locale, countryCode),
+        suffix: ''
+      };
+    }
+    return index$1.explodeNumberModel(cleanValue);
+  });
+  const [broadcastedValue, setBroadcastedValue] = React.useState(null);
+  const [suffixDirty, setSuffixDirty] = React.useState(false);
+  React.useEffect(() => {
+    if (internalValue.suffix) {
+      setSuffixDirty(true);
+    }
+  }, [internalValue.suffix]);
+  const countriesByPrefix = React.useMemo(() => groupCountriesByPrefix.groupCountriesByPrefix(sortArrayByProperty.sortArrayByProperty(excludeCountries.excludeCountries(countries, disabledCountries), 'iso3')), [disabledCountries]);
+  const onSuffixChange = event => {
+    const suffix = event.target.value;
+    if (ALLOWED_PHONE_CHARS.test(suffix)) {
+      setInternalValue(prev => ({
+        ...prev,
+        suffix
+      }));
+    }
+  };
+  const onPaste = event => {
+    if (!event.nativeEvent.clipboardData) {
+      return;
+    }
+    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(/(\s|-)+/g, '');
+    const pastedNumber = index$1.explodeNumberModel(pastedValue);
+    if (pastedNumber.prefix != null && countriesByPrefix.has(pastedNumber.prefix) && ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)) {
+      setInternalValue(pastedNumber);
+    }
+  };
+  React.useEffect(() => {
+    if (broadcastedValue === null) {
+      setBroadcastedValue(internalValue);
+      return;
+    }
+    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+    if (internalPhoneNumber === broadcastedPhoneNumber) {
+      return;
+    }
+    const newValue = isValidPhoneNumber.isValidPhoneNumber(internalPhoneNumber) ? cleanNumber.cleanNumber(internalPhoneNumber) : null;
+    onChange(newValue, internalValue.prefix ?? '');
+    setBroadcastedValue(internalValue);
+  }, [onChange, broadcastedValue, internalValue]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "group",
+    ...inputAttributes,
+    "aria-labelledby": ariaLabelledBy,
+    className: "tw-telephone",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "tw-telephone__country-select",
+      children: /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInput, {
+        placeholder: formatMessage(PhoneNumberInput_messages.selectInputPlaceholder),
+        items: [...countriesByPrefix].map(([prefix, countries]) => ({
+          type: 'option',
+          value: prefix,
+          filterMatchers: [prefix, ...countries.map(country => country.name), ...countries.map(country => country.iso3)]
+        })),
+        value: internalValue.prefix,
+        renderValue: (prefix, withinTrigger) => /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInputOptionContent, {
+          title: prefix,
+          note: withinTrigger ? undefined : countriesByPrefix.get(prefix)?.map(country => country.iso3).join(', ')
+        }),
+        filterable: true,
+        filterPlaceholder: searchPlaceholder,
+        disabled: disabled,
+        size: size$1,
+        onChange: prefix => {
+          const country = prefix != null ? index$2.findCountryByPrefix(prefix) : null;
+          setInternalValue(prev => ({
+            ...prev,
+            prefix,
+            format: country?.phoneFormat
+          }));
+        },
+        onClose: () => {
+          if (suffixDirty) {
+            onBlur?.();
+          }
+        },
+        ...selectProps
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "tw-telephone__number-input",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: `input-group input-group-${size$1}`,
+        children: /*#__PURE__*/jsxRuntime.jsx("input", {
+          id: id,
+          autoComplete: "tel-national",
+          name: "phoneNumber",
+          inputMode: "numeric",
+          value: internalValue.suffix,
+          className: "form-control",
+          disabled: disabled,
+          required: required,
+          placeholder: placeholder,
+          onChange: onSuffixChange,
+          onPaste: onPaste,
+          onFocus: onFocus,
+          onBlur: () => onBlur?.()
+        })
+      })
+    })]
+  });
+};
+
+module.exports = PhoneNumberInput;
+//# sourceMappingURL=PhoneNumberInput.js.map