@transferwise/components 46.78.0 → 46.79.0

package/build/nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\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={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`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={clsx('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","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":";;;;;;;;;;AAWO,MAAMA,YAAY,GAAG,kBAAiB;AAE7C,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC,CAAA;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC,CAAA;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC,CAAA;AAC5C,OAAA;AACF,KAAA;AACA;AACF,GAAC,CAAC,OAAOE,KAAK,EAAE,EAAC;AAEjB,EAAA,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAmDKC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,gBAAgB;EAChBC,qBAAqB;EACrBC,EAAE;EACFC,SAAS;AACTC,EAAAA,MAAAA;AAAM,CACA,KAAI;EACV,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACrD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC,CAAA;EAEjD,MAAMG,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAGhC,eAAe,EAAE,CAAA;IAEhD,IAAIqB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFrB,QAAAA,YAAY,CAAC+B,OAAO,CAAClC,YAAY,EAAEM,IAAI,CAAC6B,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAET,EAAE,CAAC,CAAC,CAAC,CAAA;AACnF;AACF,OAAC,CAAC,OAAOX,KAAK,EAAE,EAAC;MAEjBe,cAAc,CAAC,IAAI,CAAC,CAAA;AACtB,KAAA;AAEA,IAAA,IAAIP,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE,CAAA;AACb,KAAA;GACD,CAAA;AAEDe,EAAAA,SAAS,CAAC,MAAK;IACb,IAAId,gBAAgB,IAAIE,EAAE,EAAE;AAC1B,MAAA,MAAMS,sBAAsB,GAAGhC,eAAe,EAAE,CAAA;MAChD,IAAI0B,WAAW,GAAG,KAAK,CAAA;MAEvB,IAAIM,sBAAsB,EAAEI,IAAI,CAAE1B,IAAI,IAAKA,IAAI,KAAKa,EAAE,CAAC,EAAE;QACvDI,cAAc,CAAC,IAAI,CAAC,CAAA;AACpBD,QAAAA,WAAW,GAAG,IAAI,CAAA;AACpB,OAAA;AAEA,MAAA,IAAIJ,qBAAqB,EAAE;QACzBA,qBAAqB,CAACI,WAAW,CAAC,CAAA;AACpC,OAAA;AACF,KAAA;IAEAI,YAAY,CAAC,IAAI,CAAC,CAAA;AAClB;AACF,GAAC,EAAE,CAACP,EAAE,EAAEF,gBAAgB,CAAC,CAAC,CAAA;AAE1B,EAAA,IAAIA,gBAAgB,KAAKK,WAAW,IAAI,CAACG,SAAS,CAAC,EAAE;AACnD,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,oBACEQ,IAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEc,IAAI,CAAC,WAAW,EAAEd,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAAgB,IAAAA,QAAA,EAClD,CAAA,CAAC,CAACxB,SAAS,iBACVyB,GAAA,CAAA,KAAA,EAAA;AAAKhB,MAAAA,SAAS,EAAC,iBAAiB;MAAAe,QAAA,eAC9BC,GAAA,CAACC,YAAY,EAAA;AACXC,QAAAA,IAAI,EAAE3B,SAA+B;AACrCS,QAAAA,SAAS,EAAEc,IAAI,CAAC,CAAmBvB,gBAAAA,EAAAA,SAAS,EAAE,CAAE;AAChD4B,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC,EAAA;OAER,CAAA;KAAK,CACN,eACDR,IAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,qBAAqB;AAAAe,MAAAA,QAAA,gBAClCF,IAAA,CAAA,KAAA,EAAA;AAAKb,QAAAA,SAAS,EAAC,mBAAmB;QAAAe,QAAA,EAAA,cAChCC,GAAA,CAACM,IAAI,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACzB,UAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClEvB,KAAAA;AAAK,SACF,CACN,EAACC,IAAI,iBACHuB,GAAA,CAACU,IAAI,EAAA;AACHhC,UAAAA,IAAI,EAAEA,IAAK;UACX6B,IAAI,EAAEC,UAAU,CAACG,UAAW;AAC5B3B,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAAoB,UAAAA,QAAA,EAEhBtB,IAAAA;AAAI,SACD,CACP,EACAQ,MAAM,iBAAIe,GAAA,CAACY,MAAM,EAAA;AAAC3B,UAAAA,MAAM,EAAEA,MAAO;AAACD,UAAAA,SAAS,EAAC,OAAA;AAAO,UAAG,CAAA;OACpD,CACL,EAACJ,SAAS,IAAIC,gBAAgB,gBAC5BmB,GAAA,CAACa,WAAW,EAAA;AAAC7B,QAAAA,SAAS,EAAC,mBAAmB;AAACmB,QAAAA,IAAI,EAAC,IAAI;AAACxB,QAAAA,OAAO,EAAEY,eAAAA;OAAgB,CAAG,GAC/E,IAAI,CAAA;AAAA,KACL,CACP,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\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={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName as IllustrationNames}\n            className={clsx(`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={clsx('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","clsx","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

@@ -1,11 +1,29 @@
 'use strict';
 
 var clsx = require('clsx');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+var size = require('../common/propsValues/size.js');
+require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
 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');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 function OverlayHeader({

package/build/overlayHeader/OverlayHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.js","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('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","clsx"],"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,SAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,SAAI,CAAC,OAAO,CAAA;UAAK,EAC3DZ,WAAW,CAAA;OACT,CAAA;KAGX,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"OverlayHeader.js","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('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","clsx"],"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,SAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,SAAI,CAAC,OAAO,CAAA;UAAK,EAC3DZ,WAAW,CAAA;OACT,CAAA;KAGX,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/overlayHeader/OverlayHeader.mjs

@@ -1,9 +1,27 @@
 import { clsx } from 'clsx';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+import '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
 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({

package/build/overlayHeader/OverlayHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.mjs","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('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","clsx"],"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,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,IAAI,CAAC,OAAO,CAAA;UAAK,EAC3DZ,WAAW,CAAA;OACT,CAAA;KAGX,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"OverlayHeader.mjs","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('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","clsx"],"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,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,IAAI,CAAC,OAAO,CAAA;UAAK,EAC3DZ,WAAW,CAAA;OACT,CAAA;KAGX,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/phoneNumberInput/PhoneNumberInput.js

@@ -2,6 +2,29 @@
 
 var React = require('react');
 var reactIntl = require('react-intl');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+var size = require('../common/propsValues/size.js');
+require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/icons');
+require('clsx');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
 var contexts = require('../inputs/contexts.js');
 var SelectInput = require('../inputs/SelectInput.js');
 var PhoneNumberInput_messages = require('./PhoneNumberInput.messages.js');
@@ -14,8 +37,6 @@ 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 = {};

package/build/phoneNumberInput/PhoneNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  searchPlaceholder?: string;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /** List of iso3 codes of countries to remove from the list */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  return (\n    <div\n      role=\"group\"\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledBy}\n      className=\"tw-telephone\"\n    >\n      <div className=\"tw-telephone__country-select\">\n        <SelectInput\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size}`}>\n          <input\n            id={id}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            className=\"form-control\"\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  searchPlaceholder?: string;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /** List of iso3 codes of countries to remove from the list */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  return (\n    <div\n      role=\"group\"\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledBy}\n      className=\"tw-telephone\"\n    >\n      <div className=\"tw-telephone__country-select\">\n        <SelectInput\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size}`}>\n          <input\n            id={id}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            className=\"form-control\"\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}

package/build/phoneNumberInput/PhoneNumberInput.mjs

@@ -1,5 +1,28 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+import '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/icons';
+import 'clsx';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useInputAttributes } from '../inputs/contexts.mjs';
 import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput.mjs';
 import messages from './PhoneNumberInput.messages.mjs';
@@ -12,8 +35,6 @@ import { cleanNumber } from './utils/cleanNumber/cleanNumber.mjs';
 import { sortArrayByProperty } from './utils/sortArrayByProperty/sortArrayByProperty.mjs';
 import { groupCountriesByPrefix } from './utils/groupCountriesByPrefix/groupCountriesByPrefix.mjs';
 import { excludeCountries } from './utils/excludeCountries/excludeCountries.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Size } from '../common/propsValues/size.mjs';
 
 const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
 const defaultSelectProps = {};

package/build/phoneNumberInput/PhoneNumberInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  searchPlaceholder?: string;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /** List of iso3 codes of countries to remove from the list */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  return (\n    <div\n      role=\"group\"\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledBy}\n      className=\"tw-telephone\"\n    >\n      <div className=\"tw-telephone__country-select\">\n        <SelectInput\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size}`}>\n          <input\n            id={id}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            className=\"form-control\"\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  searchPlaceholder?: string;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /** List of iso3 codes of countries to remove from the list */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder = 'Prefix',\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n  useEffect(() => {\n    if (internalValue.suffix) {\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    if (broadcastedValue === null) {\n      setBroadcastedValue(internalValue);\n      return;\n    }\n\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    setBroadcastedValue(internalValue);\n  }, [onChange, broadcastedValue, internalValue]);\n\n  return (\n    <div\n      role=\"group\"\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledBy}\n      className=\"tw-telephone\"\n    >\n      <div className=\"tw-telephone__country-select\">\n        <SelectInput\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder}\n          disabled={disabled}\n          size={size}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size}`}>\n          <input\n            id={id}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            className=\"form-control\"\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}

package/build/popover/Popover.js

@@ -2,12 +2,32 @@
 
 var clsx = require('clsx');
 var React = require('react');
-var Title = require('../title/Title.js');
-var jsxRuntime = require('react/jsx-runtime');
-var logActionRequired = require('../utilities/logActionRequired.js');
-var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
 var position = require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/icons');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
+var Title = require('../title/Title.js');
+var logActionRequired = require('../utilities/logActionRequired.js');
 
 function resolvePlacement(preferredPlacement) {
   switch (preferredPlacement) {

package/build/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className={clsx('np-popover', className)}>\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className=\"np-popover__container\"\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className={clsx('np-popover', className)}>\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className=\"np-popover__container\"\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU,CAAA;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK,CAAA;AACd,IAAA,KAAK,aAAa,CAAA;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ,CAAA;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB,CAAA;AAC7B,GAAA;AACF,CAAA;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACD,CAAA,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC,CAAA;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAA0Bd,uBAAAA,EAAAA,kBAAkB,CAAwDY,qDAAAA,EAAAA,iBAAiB,WAAW,CACjI,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC,CAAA;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC,CAAA;AACdV,IAAAA,OAAO,IAAI,CAAA;GACZ,CAAA;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,SAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,oBAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,kBAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI,CAAA;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC,CAAA;AAClC,SAAA;OACD,CAAC,GACF3B,QAAAA;AAAQ,KACR,CACN,eAAAqB,cAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EACtDK,CAAAA,KAAK,iBACJgB,cAAA,CAACY,KAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK,KAAAA;SACI,CACR,EACAH,OAAO,CAAA;OACL,CAAA;AACP,KAAiB,CACnB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/popover/Popover.mjs

@@ -1,11 +1,31 @@
 import { clsx } from 'clsx';
 import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
-import Title from '../title/Title.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { logActionRequired } from '../utilities/logActionRequired.mjs';
-import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
+import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
+import '../common/propsValues/width.mjs';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
 import { Position } from '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/icons';
+import 'react-intl';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
+import Title from '../title/Title.mjs';
+import { logActionRequired } from '../utilities/logActionRequired.mjs';
 
 function resolvePlacement(preferredPlacement) {
   switch (preferredPlacement) {

package/build/popover/Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className={clsx('np-popover', className)}>\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className=\"np-popover__container\"\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":"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"}
+{"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className={clsx('np-popover', className)}>\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className=\"np-popover__container\"\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":"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"}

package/build/processIndicator/ProcessIndicator.js

@@ -2,8 +2,29 @@
 
 var clsx = require('clsx');
 var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+require('../common/theme.js');
+require('../common/direction.js');
+require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
+require('../common/propsValues/size.js');
+require('../common/propsValues/typography.js');
+require('../common/propsValues/width.js');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
 var status = require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/icons');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 const radius = {
   xxs: 6,

package/build/processIndicator/ProcessIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  status?: ProcessIndicatorStatus;\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
+{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  status?: ProcessIndicatorStatus;\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,MAAM,GAAG;AAAEC,EAAAA,GAAG,EAAE,CAAC;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAA;CAAI,CAAA;AAEjD,MAAMC,wBAAwB,GAAG,IAAI,CAAA;AAehB,MAAAC,gBAAiB,SAAQC,eAG7C,CAAA;AAIC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,MAAM,EAAE,YAAY;AACpBC,IAAAA,IAAI,EAAE,IAAA;GACkC,CAAA;AAE1CC,EAAAA,QAAQ,GAAG,CAAC,CAAA;AACZC,EAAAA,OAAO,GAAG,CAAC,CAAA;EAEXC,WAAAA,CAAYC,KAAgC,EAAA;IAC1C,KAAK,CAACA,KAAK,CAAC,CAAA;IACZ,IAAI,CAACC,KAAK,GAAG;MACXN,MAAM,EAAEK,KAAK,CAACL,MAAM;MACpBC,IAAI,EAAEI,KAAK,CAACJ,IAAAA;KACb,CAAA;AACH,GAAA;AAEA;;;;AAIG;AACHM,EAAAA,iBAAiBA,GAAA;AACf,IAAA,IAAI,CAACL,QAAQ,GAAGM,MAAM,CAACC,WAAW,CAAC,MAAK;MACtC,MAAM;AAAET,QAAAA,MAAM,EAAEU,YAAY;AAAET,QAAAA,IAAI,EAAEU,UAAU;AAAEC,QAAAA,oBAAAA;OAAsB,GAAG,IAAI,CAACP,KAAK,CAAA;MACnF,MAAM;AAAEL,QAAAA,MAAM,EAAEa,aAAa;AAAEZ,QAAAA,IAAI,EAAEa,WAAAA;OAAa,GAAG,IAAI,CAACR,KAAK,CAAA;MAE/D,IAAIO,aAAa,KAAKH,YAAY,EAAE;QAClC,IAAI,CAACK,QAAQ,CAAC;AAAEf,UAAAA,MAAM,EAAEU,YAAAA;AAAY,SAAE,EAAE,MAAK;AAC3C,UAAA,IAAIE,oBAAoB,EAAE;AACxB,YAAA,IAAI,CAACT,OAAO,GAAGK,MAAM,CAACQ,UAAU,CAAC,MAAK;cACpCJ,oBAAoB,CAACF,YAAY,CAAC,CAAA;aACnC,EAAEd,wBAAwB,CAAC,CAAA;AAC9B,WAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAA;MAEA,IAAIkB,WAAW,KAAKH,UAAU,EAAE;QAC9B,IAAI,CAACI,QAAQ,CAAC;AAAEd,UAAAA,IAAI,EAAEU,UAAAA;AAAY,SAAA,CAAC,CAAA;AACrC,OAAA;KACD,EAAEf,wBAAwB,CAAC,CAAA;AAC9B,GAAA;AAEA;;;AAGG;AACHqB,EAAAA,qBAAqBA,CAACC,SAAoC,EAAEC,SAAgC,EAAA;IAC1F,MAAMC,YAAY,GAAGF,SAAS,CAAClB,MAAM,KAAKmB,SAAS,CAACnB,MAAM,CAAA;IAC1D,MAAMqB,UAAU,GAAGH,SAAS,CAACjB,IAAI,KAAKkB,SAAS,CAAClB,IAAI,CAAA;IAEpD,OAAOmB,YAAY,IAAIC,UAAU,CAAA;AACnC,GAAA;AAEA;AACAC,EAAAA,oBAAoBA,GAAA;AAClBd,IAAAA,MAAM,CAACe,aAAa,CAAC,IAAI,CAACrB,QAAQ,CAAC,CAAA;AACnCM,IAAAA,MAAM,CAACgB,YAAY,CAAC,IAAI,CAACrB,OAAO,CAAC,CAAA;AACnC,GAAA;AAEAsB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MAAEC,SAAS;AAAE,MAAA,aAAa,EAAEC,UAAAA;KAAY,GAAG,IAAI,CAACtB,KAAK,CAAA;IAC3D,MAAM;MAAEJ,IAAI;AAAED,cAAAA,QAAAA;KAAQ,GAAG,IAAI,CAACM,KAAK,CAAA;IACnC,MAAMsB,OAAO,GAAGC,SAAI,CAAC,mBAAmB5B,IAAI,CAAA,CAAE,EAAEyB,SAAS,EAAE;AACzD,MAAA,CAAC,gBAAgB,GAAG1B,QAAM,KAAK8B,aAAM,CAACC,MAAM;AAC5C,MAAA,CAAC,iBAAiB,GAAG/B,QAAM,KAAK8B,aAAM,CAACE,MAAM;AAC7C,MAAA,CAAC,CAAiB,eAAA,CAAA,GAAGhC,QAAM,KAAK8B,aAAM,CAACG,SAAAA;AACxC,KAAA,CAAC,CAAA;AAEF,IAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAEE,OAAQ;AAAC,MAAA,aAAA,EAAaD,UAAW;AAAAQ,MAAAA,QAAA,gBAChDD,eAAA,CAAA,MAAA,EAAA;AAAMR,QAAAA,SAAS,EAAC,wBAAwB;AAAAS,QAAAA,QAAA,gBACtCC,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC,yBAAA;SAChB,CAAA,eAAAU,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC,uBAAA;AAAuB,SACzC,CAAA,CAAA;OAAM,CACN,eAAAU,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,KAAK,EAAC,4BAA4B;AAAAF,QAAAA,QAAA,eACrCC,cAAA,CAAA,QAAA,EAAA;AAAQV,UAAAA,SAAS,EAAC,gBAAgB;AAACY,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,CAAC,EAAEjD,MAAM,CAACU,IAAI,CAAE;AAACwC,UAAAA,WAAW,EAAC,KAAA;SACpF,CAAA;AAAA,OAAK,CACP,CAAA;AAAA,KAAM,CAAC,CAAA;AAEX,GAAA;;;;;"}