@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-a322f91

package/build/common/locale/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { IntlShape } from 'react-intl/src/types';\nimport { Direction } from '../direction';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'cs',\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'nl',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n\n/**\n * Provides the localized currency name for a given currency code.\n * @param intl The `intl` object from `react-intl` used for localization.\n * @param currencyCode The ISO 4217 currency code (e.g., `USD`, `EUR`, `JPY`).\n * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.\n */\nexport function getLocaleCurrencyName(intl: IntlShape, currencyCode: string) {\n  return typeof Intl.DisplayNames === 'function'\n    ? intl.formatDisplayName(currencyCode, { type: 'currency', fallback: 'code' })\n    : currencyCode;\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR","getLocaleCurrencyName","intl","currencyCode","DisplayNames","formatDisplayName","type","fallback"],"mappings":";;;;AAGO,MAAMA,YAAY,GAAG;AACrB,MAAMC,cAAc,GAAG;AAE9B;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI;AAExC;;AAEG;MACUC,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI;AAGN;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ;IAClE,CAAC,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;AACtB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ;AACjB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAI,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAI,IAAI;AACzF;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,mBAAS,CAACC,GAAG,GACbD,mBAAS,CAACE,GAAG;AACnB;AAEA;;;;;AAKG;AACG,SAAUC,qBAAqBA,CAACC,IAAe,EAAEC,YAAoB,EAAA;AACzE,EAAA,OAAO,OAAOlB,IAAI,CAACmB,YAAY,KAAK,UAAU,GAC1CF,IAAI,CAACG,iBAAiB,CAACF,YAAY,EAAE;AAAEG,IAAAA,IAAI,EAAE,UAAU;AAAEC,IAAAA,QAAQ,EAAE;GAAQ,CAAC,GAC5EJ,YAAY;AAClB;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { IntlShape } from 'react-intl/src/types';\nimport { formatCurrencyCode } from '@transferwise/formatting';\nimport { Direction } from '../direction';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'cs',\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'nl',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n\n/**\n * Provides the localized currency name for a given currency code.\n * @param intl The `intl` object from `react-intl` used for localization.\n * @param currencyCode The ISO 4217 currency code (e.g., `USD`, `EUR`, `JPY`).\n * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.\n */\nexport function getLocaleCurrencyName(intl: IntlShape, currencyCode: string) {\n  if (typeof Intl.DisplayNames === 'function') {\n    const localisedName = intl.formatDisplayName(currencyCode, {\n      type: 'currency',\n      fallback: 'none',\n    });\n    return localisedName != null ? localisedName : formatCurrencyCode(currencyCode);\n  }\n  return formatCurrencyCode(currencyCode);\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR","getLocaleCurrencyName","intl","currencyCode","DisplayNames","localisedName","formatDisplayName","type","fallback","formatCurrencyCode"],"mappings":";;;;;AAIO,MAAMA,YAAY,GAAG;AACrB,MAAMC,cAAc,GAAG;AAE9B;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI;AAExC;;AAEG;MACUC,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI;AAGN;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ;IAClE,CAAC,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;AACtB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ;AACjB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAI,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAI,IAAI;AACzF;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,mBAAS,CAACC,GAAG,GACbD,mBAAS,CAACE,GAAG;AACnB;AAEA;;;;;AAKG;AACG,SAAUC,qBAAqBA,CAACC,IAAe,EAAEC,YAAoB,EAAA;AACzE,EAAA,IAAI,OAAOlB,IAAI,CAACmB,YAAY,KAAK,UAAU,EAAE;AAC3C,IAAA,MAAMC,aAAa,GAAGH,IAAI,CAACI,iBAAiB,CAACH,YAAY,EAAE;AACzDI,MAAAA,IAAI,EAAE,UAAU;AAChBC,MAAAA,QAAQ,EAAE;AACX,KAAA,CAAC;IACF,OAAOH,aAAa,IAAI,IAAI,GAAGA,aAAa,GAAGI,6BAAkB,CAACN,YAAY,CAAC;AACjF,EAAA;EACA,OAAOM,6BAAkB,CAACN,YAAY,CAAC;AACzC;;;;;;;;;;;;"}

package/build/common/locale/index.mjs

@@ -1,3 +1,4 @@
+import { formatCurrencyCode } from '@transferwise/formatting';
 import { Direction } from '../direction.mjs';
 
 const DEFAULT_LANG = 'en';
@@ -78,10 +79,14 @@ function getDirectionFromLocale(locale) {
  * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.
  */
 function getLocaleCurrencyName(intl, currencyCode) {
-  return typeof Intl.DisplayNames === 'function' ? intl.formatDisplayName(currencyCode, {
-    type: 'currency',
-    fallback: 'code'
-  }) : currencyCode;
+  if (typeof Intl.DisplayNames === 'function') {
+    const localisedName = intl.formatDisplayName(currencyCode, {
+      type: 'currency',
+      fallback: 'none'
+    });
+    return localisedName != null ? localisedName : formatCurrencyCode(currencyCode);
+  }
+  return formatCurrencyCode(currencyCode);
 }
 
 export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, getLocaleCurrencyName };

package/build/common/locale/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { IntlShape } from 'react-intl/src/types';\nimport { Direction } from '../direction';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'cs',\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'nl',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n\n/**\n * Provides the localized currency name for a given currency code.\n * @param intl The `intl` object from `react-intl` used for localization.\n * @param currencyCode The ISO 4217 currency code (e.g., `USD`, `EUR`, `JPY`).\n * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.\n */\nexport function getLocaleCurrencyName(intl: IntlShape, currencyCode: string) {\n  return typeof Intl.DisplayNames === 'function'\n    ? intl.formatDisplayName(currencyCode, { type: 'currency', fallback: 'code' })\n    : currencyCode;\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR","getLocaleCurrencyName","intl","currencyCode","DisplayNames","formatDisplayName","type","fallback"],"mappings":";;AAGO,MAAMA,YAAY,GAAG;AACrB,MAAMC,cAAc,GAAG;AAE9B;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI;AAExC;;AAEG;MACUC,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI;AAGN;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ;IAClE,CAAC,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;AACtB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ;AACjB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAI,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAI,IAAI;AACzF;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,SAAS,CAACC,GAAG,GACbD,SAAS,CAACE,GAAG;AACnB;AAEA;;;;;AAKG;AACG,SAAUC,qBAAqBA,CAACC,IAAe,EAAEC,YAAoB,EAAA;AACzE,EAAA,OAAO,OAAOlB,IAAI,CAACmB,YAAY,KAAK,UAAU,GAC1CF,IAAI,CAACG,iBAAiB,CAACF,YAAY,EAAE;AAAEG,IAAAA,IAAI,EAAE,UAAU;AAAEC,IAAAA,QAAQ,EAAE;GAAQ,CAAC,GAC5EJ,YAAY;AAClB;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { IntlShape } from 'react-intl/src/types';\nimport { formatCurrencyCode } from '@transferwise/formatting';\nimport { Direction } from '../direction';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'cs',\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'nl',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n\n/**\n * Provides the localized currency name for a given currency code.\n * @param intl The `intl` object from `react-intl` used for localization.\n * @param currencyCode The ISO 4217 currency code (e.g., `USD`, `EUR`, `JPY`).\n * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.\n */\nexport function getLocaleCurrencyName(intl: IntlShape, currencyCode: string) {\n  if (typeof Intl.DisplayNames === 'function') {\n    const localisedName = intl.formatDisplayName(currencyCode, {\n      type: 'currency',\n      fallback: 'none',\n    });\n    return localisedName != null ? localisedName : formatCurrencyCode(currencyCode);\n  }\n  return formatCurrencyCode(currencyCode);\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR","getLocaleCurrencyName","intl","currencyCode","DisplayNames","localisedName","formatDisplayName","type","fallback","formatCurrencyCode"],"mappings":";;;AAIO,MAAMA,YAAY,GAAG;AACrB,MAAMC,cAAc,GAAG;AAE9B;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI;AAExC;;AAEG;MACUC,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI;AAGN;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ;IAClE,CAAC,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;AACtB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ;AACjB,IAAA;AACF,EAAA;AACA,EAAA,OAAO,IAAI;AACb;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAI,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAI,IAAI;AACzF;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,SAAS,CAACC,GAAG,GACbD,SAAS,CAACE,GAAG;AACnB;AAEA;;;;;AAKG;AACG,SAAUC,qBAAqBA,CAACC,IAAe,EAAEC,YAAoB,EAAA;AACzE,EAAA,IAAI,OAAOlB,IAAI,CAACmB,YAAY,KAAK,UAAU,EAAE;AAC3C,IAAA,MAAMC,aAAa,GAAGH,IAAI,CAACI,iBAAiB,CAACH,YAAY,EAAE;AACzDI,MAAAA,IAAI,EAAE,UAAU;AAChBC,MAAAA,QAAQ,EAAE;AACX,KAAA,CAAC;IACF,OAAOH,aAAa,IAAI,IAAI,GAAGA,aAAa,GAAGI,kBAAkB,CAACN,YAAY,CAAC;AACjF,EAAA;EACA,OAAOM,kBAAkB,CAACN,YAAY,CAAC;AACzC;;;;"}

package/build/common/panel/Panel.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
-var reactPopper = require('react-popper');
 require('../theme.js');
 require('../direction.js');
+require('@transferwise/neptune-tokens');
 require('../propsValues/control.js');
-require('../propsValues/breakpoint.js');
 require('../propsValues/size.js');
 require('../propsValues/typography.js');
 require('../propsValues/width.js');
@@ -24,6 +24,7 @@ require('../propsValues/variant.js');
 require('../propsValues/scroll.js');
 require('../propsValues/markdownNodeType.js');
 require('../fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../closeButton/CloseButton.messages.js');
@@ -31,7 +32,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var Dimmer = require('../../dimmer/Dimmer.js');
 var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 
-const POPOVER_OFFSET = [0, 16];
+const POPOVER_OFFSET = 16;
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
 // This mapping forces popover to try the four available positions before going back to the initial chosen one.
@@ -54,60 +55,57 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   considerHeight = false,
   ...rest
 }, reference) {
-  const [arrowElement, setArrowElement] = React.useState(null);
-  const [popperElement, setPopperElement] = React.useState(null);
-  const modifiers = [];
+  const arrowRef = React.useRef(null);
+  const middleware = [];
+  if (arrow) {
+    middleware.push(react.offset(POPOVER_OFFSET));
+  }
+  if (flip && fallbackPlacements[position$1]) {
+    middleware.push(react.flip({
+      fallbackPlacements: fallbackPlacements[position$1]
+    }));
+  }
   if (altAxis) {
-    modifiers.push({
-      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
-      name: 'preventOverflow',
-      options: {
-        altAxis: true,
-        tether: false
-      }
-    });
+    middleware.push(react.shift());
   }
   if (arrow) {
-    modifiers.push({
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        options: {
-          padding: 8 // 8px from the edges of the popper
-        }
-      }
-    });
-    // This lets you displace a popper element from its reference element.
-    modifiers.push({
-      name: 'offset',
-      options: {
-        offset: POPOVER_OFFSET
-      }
-    });
+    middleware.push(react.arrow({
+      element: arrowRef,
+      padding: 8
+    }));
   }
-  if (flip && fallbackPlacements[position$1]) {
-    modifiers.push({
-      name: 'flip',
-      options: {
-        fallbackPlacements: fallbackPlacements[position$1]
+  if (considerHeight) {
+    middleware.push(react.size({
+      padding: POPOVER_OFFSET,
+      apply: ({
+        elements,
+        availableHeight
+      }) => {
+        elements.floating.style.setProperty('--np-panel-available-height', `${availableHeight}px`);
       }
-    });
+    }));
   }
   const {
-    styles,
-    attributes,
-    forceUpdate
-  } = reactPopper.usePopper(anchorRef.current, popperElement, {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating({
     placement: position$1,
-    modifiers
+    middleware,
+    elements: {
+      reference: anchorRef.current
+    },
+    whileElementsMounted: open ? react.autoUpdate : undefined
   });
-  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-  // it is most simple just to always position before opening
-  React.useEffect(() => {
-    if (open && forceUpdate) {
-      forceUpdate();
-    }
-  }, [open]);
+  const arrowStyle = {
+    ...(middlewareData.arrow?.x != null ? {
+      left: middlewareData.arrow.x
+    } : {}),
+    ...(middlewareData.arrow?.y != null ? {
+      top: middlewareData.arrow.y
+    } : {})
+  };
   const contentStyle = {
     ...(anchorWidth ? {
       width: anchorRef.current?.clientWidth
@@ -123,12 +121,10 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       id: overlayId,
       ...rest,
-      ref: setPopperElement,
+      ref: refs.setFloating,
       role: "dialog",
-      style: {
-        ...styles.popper
-      },
-      ...attributes.popper,
+      style: floatingStyles,
+      "data-popper-placement": placement,
       className: clsx.clsx('np-panel', {
         'np-panel--open': open
       }, rest.className),
@@ -137,9 +133,9 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
         style: contentStyle,
         className: clsx.clsx('np-panel__content'),
         children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: setArrowElement,
+          ref: arrowRef,
           className: clsx.clsx('np-panel__arrow'),
-          style: styles.arrow
+          style: arrowStyle
         })]
       })
     })

package/build/common/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/panel/Panel.mjs

@@ -1,10 +1,10 @@
+import { offset, flip, shift, arrow, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useEffect, useContext } from 'react';
-import { usePopper } from 'react-popper';
+import { forwardRef, useRef, useContext } from 'react';
 import '../theme.mjs';
 import '../direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../propsValues/control.mjs';
-import '../propsValues/breakpoint.mjs';
 import '../propsValues/size.mjs';
 import '../propsValues/typography.mjs';
 import '../propsValues/width.mjs';
@@ -20,6 +20,7 @@ import '../propsValues/variant.mjs';
 import '../propsValues/scroll.mjs';
 import '../propsValues/markdownNodeType.mjs';
 import '../fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../closeButton/CloseButton.messages.mjs';
@@ -27,7 +28,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import Dimmer from '../../dimmer/Dimmer.mjs';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
 
-const POPOVER_OFFSET = [0, 16];
+const POPOVER_OFFSET = 16;
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
 // This mapping forces popover to try the four available positions before going back to the initial chosen one.
@@ -38,8 +39,8 @@ const fallbackPlacements = {
   [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
 };
 const Panel = /*#__PURE__*/forwardRef(function Panel({
-  arrow = false,
-  flip = true,
+  arrow: arrow$1 = false,
+  flip: flip$1 = true,
   altAxis = false,
   children,
   open = false,
@@ -50,60 +51,57 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   considerHeight = false,
   ...rest
 }, reference) {
-  const [arrowElement, setArrowElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const modifiers = [];
+  const arrowRef = useRef(null);
+  const middleware = [];
+  if (arrow$1) {
+    middleware.push(offset(POPOVER_OFFSET));
+  }
+  if (flip$1 && fallbackPlacements[position]) {
+    middleware.push(flip({
+      fallbackPlacements: fallbackPlacements[position]
+    }));
+  }
   if (altAxis) {
-    modifiers.push({
-      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
-      name: 'preventOverflow',
-      options: {
-        altAxis: true,
-        tether: false
-      }
-    });
+    middleware.push(shift());
   }
-  if (arrow) {
-    modifiers.push({
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        options: {
-          padding: 8 // 8px from the edges of the popper
-        }
-      }
-    });
-    // This lets you displace a popper element from its reference element.
-    modifiers.push({
-      name: 'offset',
-      options: {
-        offset: POPOVER_OFFSET
-      }
-    });
+  if (arrow$1) {
+    middleware.push(arrow({
+      element: arrowRef,
+      padding: 8
+    }));
   }
-  if (flip && fallbackPlacements[position]) {
-    modifiers.push({
-      name: 'flip',
-      options: {
-        fallbackPlacements: fallbackPlacements[position]
+  if (considerHeight) {
+    middleware.push(size({
+      padding: POPOVER_OFFSET,
+      apply: ({
+        elements,
+        availableHeight
+      }) => {
+        elements.floating.style.setProperty('--np-panel-available-height', `${availableHeight}px`);
       }
-    });
+    }));
   }
   const {
-    styles,
-    attributes,
-    forceUpdate
-  } = usePopper(anchorRef.current, popperElement, {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = useFloating({
     placement: position,
-    modifiers
+    middleware,
+    elements: {
+      reference: anchorRef.current
+    },
+    whileElementsMounted: open ? autoUpdate : undefined
   });
-  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-  // it is most simple just to always position before opening
-  useEffect(() => {
-    if (open && forceUpdate) {
-      forceUpdate();
-    }
-  }, [open]);
+  const arrowStyle = {
+    ...(middlewareData.arrow?.x != null ? {
+      left: middlewareData.arrow.x
+    } : {}),
+    ...(middlewareData.arrow?.y != null ? {
+      top: middlewareData.arrow.y
+    } : {})
+  };
   const contentStyle = {
     ...(anchorWidth ? {
       width: anchorRef.current?.clientWidth
@@ -119,12 +117,10 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
     children: /*#__PURE__*/jsx("div", {
       id: overlayId,
       ...rest,
-      ref: setPopperElement,
+      ref: refs.setFloating,
       role: "dialog",
-      style: {
-        ...styles.popper
-      },
-      ...attributes.popper,
+      style: floatingStyles,
+      "data-popper-placement": placement,
       className: clsx('np-panel', {
         'np-panel--open': open
       }, rest.className),
@@ -132,10 +128,10 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
         ref: reference,
         style: contentStyle,
         className: clsx('np-panel__content'),
-        children: [children, arrow && /*#__PURE__*/jsx("div", {
-          ref: setArrowElement,
+        children: [children, arrow$1 && /*#__PURE__*/jsx("div", {
+          ref: arrowRef,
           className: clsx('np-panel__arrow'),
-          style: styles.arrow
+          style: arrowStyle
         })]
       })
     })

package/build/common/panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/responsivePanel/ResponsivePanel.js

@@ -6,8 +6,8 @@ var React = require('react');
 var documentIosClick = require('../domHelpers/documentIosClick.js');
 require('../theme.js');
 require('../direction.js');
+require('@transferwise/neptune-tokens');
 require('../propsValues/control.js');
-require('../propsValues/breakpoint.js');
 require('../propsValues/size.js');
 require('../propsValues/typography.js');
 require('../propsValues/width.js');
@@ -23,6 +23,7 @@ require('../propsValues/variant.js');
 require('../propsValues/scroll.js');
 require('../propsValues/markdownNodeType.js');
 require('../fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('clsx');
 require('react-intl');

package/build/common/responsivePanel/ResponsivePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.js","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,gBAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;YACZC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,6BAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,cAAA,CAACC,mBAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,cAAA,CAACE,aAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"ResponsivePanel.js","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,gBAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;YACZC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,6BAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,cAAA,CAACC,mBAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,cAAA,CAACE,aAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}

package/build/common/responsivePanel/ResponsivePanel.mjs

@@ -2,8 +2,8 @@ import { forwardRef } from 'react';
 import { isServerSide } from '../domHelpers/documentIosClick.mjs';
 import '../theme.mjs';
 import '../direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../propsValues/control.mjs';
-import '../propsValues/breakpoint.mjs';
 import '../propsValues/size.mjs';
 import '../propsValues/typography.mjs';
 import '../propsValues/width.mjs';
@@ -19,6 +19,7 @@ import '../propsValues/variant.mjs';
 import '../propsValues/scroll.mjs';
 import '../propsValues/markdownNodeType.mjs';
 import '../fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'clsx';
 import 'react-intl';

package/build/common/responsivePanel/ResponsivePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.mjs","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,UAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,SAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,YAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,GAAA,CAACC,WAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,GAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"ResponsivePanel.mjs","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,UAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,SAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,YAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,GAAA,CAACC,WAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,GAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}