@transferwise/components 46.149.1 → 46.150.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/build/avatar/Avatar.js.map +1 -1
  2. package/build/avatar/Avatar.mjs.map +1 -1
  3. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  4. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  5. package/build/card/Card.js.map +1 -1
  6. package/build/card/Card.mjs.map +1 -1
  7. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  8. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  9. package/build/index.js +17 -14
  10. package/build/index.js.map +1 -1
  11. package/build/index.mjs +9 -8
  12. package/build/index.mjs.map +1 -1
  13. package/build/inlineAlert/InlineAlert.js.map +1 -1
  14. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  15. package/build/main.css +11 -39
  16. package/build/navigationOption/NavigationOption.js.map +1 -1
  17. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  18. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  19. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  20. package/build/prompt/CriticalBanner/CriticalBanner.js +1 -7
  21. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -1
  22. package/build/prompt/CriticalBanner/CriticalBanner.mjs +1 -7
  23. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
  24. package/build/select/Select.js.map +1 -1
  25. package/build/select/Select.mjs.map +1 -1
  26. package/build/styles/main.css +11 -39
  27. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +11 -36
  28. package/build/types/avatar/Avatar.d.ts +9 -0
  29. package/build/types/avatar/Avatar.d.ts.map +1 -1
  30. package/build/types/avatar/index.d.ts +1 -1
  31. package/build/types/avatar/index.d.ts.map +1 -1
  32. package/build/types/avatarWrapper/AvatarWrapper.d.ts +3 -0
  33. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  34. package/build/types/avatarWrapper/index.d.ts +2 -2
  35. package/build/types/avatarWrapper/index.d.ts.map +1 -1
  36. package/build/types/button/Button.types.d.ts +1 -1
  37. package/build/types/button/Button.types.d.ts.map +1 -1
  38. package/build/types/button/index.d.ts +2 -2
  39. package/build/types/button/index.d.ts.map +1 -1
  40. package/build/types/card/Card.d.ts +3 -0
  41. package/build/types/card/Card.d.ts.map +1 -1
  42. package/build/types/carousel/index.d.ts +1 -1
  43. package/build/types/carousel/index.d.ts.map +1 -1
  44. package/build/types/checkboxButton/index.d.ts +1 -0
  45. package/build/types/checkboxButton/index.d.ts.map +1 -1
  46. package/build/types/checkboxOption/index.d.ts +1 -0
  47. package/build/types/checkboxOption/index.d.ts.map +1 -1
  48. package/build/types/chevron/index.d.ts +1 -0
  49. package/build/types/chevron/index.d.ts.map +1 -1
  50. package/build/types/chips/index.d.ts +2 -0
  51. package/build/types/chips/index.d.ts.map +1 -1
  52. package/build/types/common/Option/index.d.ts +1 -0
  53. package/build/types/common/Option/index.d.ts.map +1 -1
  54. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +6 -0
  55. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  56. package/build/types/criticalBanner/index.d.ts +1 -1
  57. package/build/types/criticalBanner/index.d.ts.map +1 -1
  58. package/build/types/decision/index.d.ts +1 -0
  59. package/build/types/decision/index.d.ts.map +1 -1
  60. package/build/types/definitionList/index.d.ts +1 -1
  61. package/build/types/definitionList/index.d.ts.map +1 -1
  62. package/build/types/expressiveMoneyInput/index.d.ts +1 -1
  63. package/build/types/expressiveMoneyInput/index.d.ts.map +1 -1
  64. package/build/types/index.d.ts +34 -19
  65. package/build/types/index.d.ts.map +1 -1
  66. package/build/types/inlineAlert/InlineAlert.d.ts +3 -0
  67. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  68. package/build/types/inlineAlert/index.d.ts +1 -0
  69. package/build/types/inlineAlert/index.d.ts.map +1 -1
  70. package/build/types/instructionsList/index.d.ts +1 -1
  71. package/build/types/instructionsList/index.d.ts.map +1 -1
  72. package/build/types/listItem/ListItem.d.ts +1 -1
  73. package/build/types/logo/index.d.ts +2 -1
  74. package/build/types/logo/index.d.ts.map +1 -1
  75. package/build/types/navigationOption/NavigationOption.d.ts +3 -0
  76. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  77. package/build/types/navigationOption/index.d.ts +1 -0
  78. package/build/types/navigationOption/index.d.ts.map +1 -1
  79. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +3 -0
  80. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
  81. package/build/types/nudge/index.d.ts +1 -0
  82. package/build/types/nudge/index.d.ts.map +1 -1
  83. package/build/types/phoneNumberInput/index.d.ts +1 -0
  84. package/build/types/phoneNumberInput/index.d.ts.map +1 -1
  85. package/build/types/promoCard/index.d.ts +2 -0
  86. package/build/types/promoCard/index.d.ts.map +1 -1
  87. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
  88. package/build/types/select/Select.d.ts +3 -0
  89. package/build/types/select/Select.d.ts.map +1 -1
  90. package/build/types/snackbar/index.d.ts +2 -0
  91. package/build/types/snackbar/index.d.ts.map +1 -1
  92. package/build/types/statusIcon/index.d.ts +1 -1
  93. package/build/types/statusIcon/index.d.ts.map +1 -1
  94. package/build/types/table/index.d.ts +4 -3
  95. package/build/types/table/index.d.ts.map +1 -1
  96. package/build/types/tabs/index.d.ts +3 -0
  97. package/build/types/tabs/index.d.ts.map +1 -1
  98. package/build/types/tile/index.d.ts +1 -0
  99. package/build/types/tile/index.d.ts.map +1 -1
  100. package/build/types/uploadInput/index.d.ts +1 -0
  101. package/build/types/uploadInput/index.d.ts.map +1 -1
  102. package/package.json +1 -1
  103. package/src/avatar/Avatar.tsx +9 -2
  104. package/src/avatar/index.ts +1 -1
  105. package/src/avatarWrapper/AvatarWrapper.tsx +3 -0
  106. package/src/avatarWrapper/index.ts +2 -3
  107. package/src/button/Button.types.ts +1 -1
  108. package/src/button/index.ts +14 -2
  109. package/src/card/Card.tsx +3 -0
  110. package/src/carousel/index.ts +7 -1
  111. package/src/checkboxButton/index.ts +2 -0
  112. package/src/checkboxOption/index.ts +2 -0
  113. package/src/chevron/index.ts +2 -0
  114. package/src/chips/index.ts +3 -0
  115. package/src/common/Option/index.ts +1 -0
  116. package/src/criticalBanner/CriticalCommsBanner.tsx +6 -0
  117. package/src/criticalBanner/index.ts +1 -1
  118. package/src/decision/index.ts +2 -0
  119. package/src/definitionList/index.ts +1 -1
  120. package/src/expressiveMoneyInput/index.ts +1 -1
  121. package/src/index.ts +66 -18
  122. package/src/inlineAlert/InlineAlert.tsx +3 -0
  123. package/src/inlineAlert/index.ts +2 -0
  124. package/src/instructionsList/index.ts +1 -1
  125. package/src/logo/index.ts +2 -1
  126. package/src/main.css +11 -39
  127. package/src/navigationOption/NavigationOption.tsx +3 -0
  128. package/src/navigationOption/index.ts +2 -0
  129. package/src/navigationOptionsList/NavigationOptionsList.tsx +3 -0
  130. package/src/nudge/index.ts +2 -0
  131. package/src/phoneNumberInput/index.ts +2 -0
  132. package/src/promoCard/index.ts +8 -0
  133. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +1 -4
  134. package/src/prompt/CriticalBanner/CriticalBanner.css +11 -36
  135. package/src/prompt/CriticalBanner/CriticalBanner.less +17 -49
  136. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +1 -43
  137. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +0 -21
  138. package/src/prompt/CriticalBanner/CriticalBanner.test.tsx +3 -11
  139. package/src/prompt/CriticalBanner/CriticalBanner.tsx +1 -5
  140. package/src/select/Select.tsx +3 -0
  141. package/src/snackbar/index.ts +3 -0
  142. package/src/ssr.test.tsx +6 -3
  143. package/src/statusIcon/index.ts +1 -1
  144. package/src/table/index.ts +5 -2
  145. package/src/tabs/index.ts +3 -0
  146. package/src/tile/index.ts +1 -0
  147. package/src/uploadInput/index.ts +2 -0
  148. package/build/avatarWrapper/index.js +0 -10
  149. package/build/avatarWrapper/index.js.map +0 -1
  150. package/build/avatarWrapper/index.mjs +0 -6
  151. package/build/avatarWrapper/index.mjs.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarTheme = 'light' | 'dark';\n\n/**\n * @deprecated Avatar is deprecated, use AvatarView and associated typings\n */\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n /** @default false */\n outlined?: boolean;\n /** @default 48 */\n size?: AvatarSize;\n /** @default 'light' */\n theme?: AvatarTheme;\n /** @default 'thumbnail' */\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <div\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [errorUrl, setErrorUrl] = useState<string | undefined>(undefined);\n\n const hasImageLoadError = errorUrl === url;\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setErrorUrl(url)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","errorUrl","setErrorUrl","useState","undefined","hasImageLoadError","isBusinessProfile","ProfileType","BUSINESS","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
1
+ {"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\n/**\n * @deprecated Use AvatarView and associated typings\n */\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [errorUrl, setErrorUrl] = useState<string | undefined>(undefined);\n\n const hasImageLoadError = errorUrl === url;\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setErrorUrl(url)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","errorUrl","setErrorUrl","useState","undefined","hasImageLoadError","isBusinessProfile","ProfileType","BUSINESS","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [errorUrl, setErrorUrl] = useState<string | undefined>(undefined);\n\n const hasImageLoadError = errorUrl === url;\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setErrorUrl(url)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","errorUrl","setErrorUrl","useState","undefined","hasImageLoadError","isBusinessProfile","ProfileType","BUSINESS","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
1
+ {"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n ProfileType,\n ProfileTypePersonal,\n ProfileTypeBusiness,\n Size,\n Sentiment,\n getInitials,\n Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n url?: string;\n ariaLabel?: string;\n altText?: string;\n statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n url,\n altText,\n statusIcon,\n children,\n ariaLabel,\n ...rest\n}: OptionalBadgeProps) => {\n if (url) {\n return (\n <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n {children}\n </Badge>\n );\n }\n if (statusIcon) {\n return (\n <Badge\n aria-label={ariaLabel}\n badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n {...rest}\n >\n {children}\n </Badge>\n );\n }\n return <>{children}</>;\n};\n\n/**\n * @deprecated Use AvatarView and associated typings\n */\nexport type AvatarWrapperProps = {\n url?: string;\n 'aria-label'?: string;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n profileId?: string;\n name?: string;\n avatarProps?: AvatarProps;\n badgeProps?: BadgeProps;\n} & (\n | {\n badgeUrl: string;\n badgeAltText: string;\n badgeStatusIcon?: never;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon: Sentiment | Status.PENDING;\n }\n | {\n badgeUrl?: never;\n badgeAltText?: never;\n badgeStatusIcon?: never;\n }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n url,\n 'aria-label': ariaLabel,\n profileType,\n profileId,\n badgeUrl,\n badgeAltText,\n badgeStatusIcon,\n name,\n avatarProps,\n badgeProps,\n}: AvatarWrapperProps) => {\n const [errorUrl, setErrorUrl] = useState<string | undefined>(undefined);\n\n const hasImageLoadError = errorUrl === url;\n const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n const getAvatarProps = () => {\n let updatedAvatarProps = avatarProps;\n if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n }\n if (url && !hasImageLoadError) {\n return {\n type: AvatarType.THUMBNAIL,\n children: <img src={url} alt=\"\" onError={() => setErrorUrl(url)} />,\n ...updatedAvatarProps,\n };\n }\n if (profileType) {\n return {\n type: AvatarType.ICON,\n children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n }\n if (name) {\n return {\n type: AvatarType.INITIALS,\n children: <>{getInitials(name)}</>,\n backgroundColorSeed: profileId?.toString(),\n ...updatedAvatarProps,\n };\n }\n return {\n type: AvatarType.ICON,\n children: <Person size=\"24\" />,\n ...updatedAvatarProps,\n };\n };\n\n return (\n <OptionalBadge\n url={badgeUrl}\n ariaLabel={ariaLabel}\n altText={badgeAltText}\n statusIcon={badgeStatusIcon}\n {...badgeProps}\n >\n <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n </OptionalBadge>\n );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","errorUrl","setErrorUrl","useState","undefined","hasImageLoadError","isBusinessProfile","ProfileType","BUSINESS","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","Person","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n /** @default 'div' */\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,eAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,YAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\n/**\n * @deprecated Use ListItem and associated typings\n */\nexport interface CardProps {\n 'aria-label'?: string;\n /** @default 'div' */\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,eAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,YAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n /** @default 'div' */\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\n/**\n * @deprecated Use ListItem and associated typings\n */\nexport interface CardProps {\n 'aria-label'?: string;\n /** @default 'div' */\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB;AAAU,KAAA,CAGnE,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB;OAC/B;KAAE,CAEN,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA;AAAQ,KACL,CACP;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n target?: HTMLAnchorElement['target'];\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\n */\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={\n action && {\n onClick: action.onClick,\n href: action.href,\n target: action.target,\n text: action.label,\n as: 'button',\n }\n }\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED;;AAEG;AACH,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\n/**\n * @deprecated Use CriticalBanner and associated typings\n */\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\n/**\n * @deprecated Use CriticalBanner and associated typings\n */\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n target?: HTMLAnchorElement['target'];\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\n */\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={\n action && {\n onClick: action.onClick,\n href: action.href,\n target: action.target,\n text: action.label,\n as: 'button',\n }\n }\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED;;AAEG;AACH,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n target?: HTMLAnchorElement['target'];\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\n */\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={\n action && {\n onClick: action.onClick,\n href: action.href,\n target: action.target,\n text: action.label,\n as: 'button',\n }\n }\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED;;AAEG;AACH,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\n/**\n * @deprecated Use CriticalBanner and associated typings\n */\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\n/**\n * @deprecated Use CriticalBanner and associated typings\n */\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n target?: HTMLAnchorElement['target'];\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\n */\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={\n action && {\n onClick: action.onClick,\n href: action.href,\n target: action.target,\n text: action.label,\n as: 'button',\n }\n }\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED;;AAEG;AACH,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
package/build/index.js CHANGED
@@ -11,14 +11,7 @@ var AvatarView = require('./avatarView/AvatarView.js');
11
11
  var AvatarLayout = require('./avatarLayout/AvatarLayout.js');
12
12
  var AvatarWrapper = require('./avatarWrapper/AvatarWrapper.js');
13
13
  var Badge = require('./badge/Badge.js');
14
- require('@transferwise/icons');
15
- require('@wise/art');
16
- var StatusIcon = require('./statusIcon/StatusIcon.js');
17
- require('react');
18
- require('clsx');
19
- var neptuneTokens = require('@transferwise/neptune-tokens');
20
- require('react/jsx-runtime');
21
- var Image = require('./image/Image.js');
14
+ var BadgeAssets = require('./badge/BadgeAssets.js');
22
15
  var Body = require('./body/Body.js');
23
16
  var Button_resolver = require('./button/Button.resolver.js');
24
17
  var IconButton = require('./iconButton/IconButton.js');
@@ -50,6 +43,7 @@ var Emphasis = require('./emphasis/Emphasis.js');
50
43
  var Field = require('./field/Field.js');
51
44
  var FlowNavigation = require('./flowNavigation/FlowNavigation.js');
52
45
  var Header = require('./header/Header.js');
46
+ var Image = require('./image/Image.js');
53
47
  var infoPresentations = require('./info/infoPresentations.js');
54
48
  var Info = require('./info/Info.js');
55
49
  var InlineAlert = require('./inlineAlert/InlineAlert.js');
@@ -62,8 +56,12 @@ var Input = require('./inputs/Input.js');
62
56
  var InputGroup = require('./inputs/InputGroup.js');
63
57
  var SearchInput = require('./inputs/SearchInput.js');
64
58
  var SelectInput = require('./inputs/SelectInput/SelectInput.js');
59
+ require('@transferwise/icons');
60
+ require('clsx');
65
61
  require('react-intl');
66
62
  require('./dateLookup/dateTrigger/DateTrigger.messages.js');
63
+ require('react/jsx-runtime');
64
+ require('react');
67
65
  require('@headlessui/react');
68
66
  var SelectInputOptionContent = require('./inputs/SelectInput/OptionContent/SelectInputOptionContent.js');
69
67
  var SelectInputTriggerButton = require('./inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js');
@@ -108,6 +106,7 @@ var SlidingPanel = require('./slidingPanel/SlidingPanel.js');
108
106
  var Snackbar = require('./snackbar/Snackbar.js');
109
107
  var SnackbarContext = require('./snackbar/SnackbarContext.js');
110
108
  var SnackbarProvider = require('./snackbar/SnackbarProvider.js');
109
+ var StatusIcon = require('./statusIcon/StatusIcon.js');
111
110
  var Stepper = require('./stepper/Stepper.js');
112
111
  var Sticky = require('./sticky/Sticky.js');
113
112
  var Summary = require('./summary/Summary.js');
@@ -116,6 +115,7 @@ var SwitchOption = require('./switchOption/SwitchOption.js');
116
115
  var Tabs = require('./tabs/Tabs.js');
117
116
  var TextareaWithDisplayFormat = require('./textareaWithDisplayFormat/TextareaWithDisplayFormat.js');
118
117
  var Title = require('./title/Title.js');
118
+ var Tile = require('./tile/Tile.js');
119
119
  var Tooltip = require('./tooltip/Tooltip.js');
120
120
  var Typeahead = require('./typeahead/Typeahead.js');
121
121
  var Upload = require('./upload/Upload.js');
@@ -128,6 +128,7 @@ var useDirection = require('./common/hooks/useDirection/useDirection.js');
128
128
  var useLayout = require('./common/hooks/useLayout/useLayout.js');
129
129
  var useScreenSize = require('./common/hooks/useScreenSize.js');
130
130
  var useSnackbar = require('./snackbar/useSnackbar.js');
131
+ var neptuneTokens = require('@transferwise/neptune-tokens');
131
132
  var documentIosClick = require('./common/domHelpers/documentIosClick.js');
132
133
  var theme = require('./common/theme.js');
133
134
  var direction = require('./common/direction.js');
@@ -172,12 +173,7 @@ exports.AvatarView = AvatarView.default;
172
173
  exports.AvatarLayout = AvatarLayout.default;
173
174
  exports.AvatarWrapper = AvatarWrapper.default;
174
175
  exports.Badge = Badge.default;
175
- exports.StatusIcon = StatusIcon.default;
176
- Object.defineProperty(exports, "Breakpoint", {
177
- enumerable: true,
178
- get: function () { return neptuneTokens.Breakpoint; }
179
- });
180
- exports.Image = Image.default;
176
+ exports.BadgeAssets = BadgeAssets.default;
181
177
  exports.Body = Body.default;
182
178
  exports.Button = Button_resolver.default;
183
179
  exports.IconButton = IconButton.default;
@@ -217,6 +213,7 @@ exports.Emphasis = Emphasis.default;
217
213
  exports.Field = Field.Field;
218
214
  exports.FlowNavigation = FlowNavigation.default;
219
215
  exports.Header = Header.default;
216
+ exports.Image = Image.default;
220
217
  Object.defineProperty(exports, "InfoPresentation", {
221
218
  enumerable: true,
222
219
  get: function () { return infoPresentations.InfoPresentation; }
@@ -278,6 +275,7 @@ exports.SnackbarPortal = Snackbar.default;
278
275
  exports.SnackbarConsumer = SnackbarContext.SnackbarConsumer;
279
276
  exports.SnackbarContext = SnackbarContext.SnackbarContext;
280
277
  exports.SnackbarProvider = SnackbarProvider.default;
278
+ exports.StatusIcon = StatusIcon.default;
281
279
  exports.Stepper = Stepper.default;
282
280
  exports.Sticky = Sticky.default;
283
281
  exports.Summary = Summary.default;
@@ -286,6 +284,7 @@ exports.SwitchOption = SwitchOption.default;
286
284
  exports.Tabs = Tabs.default;
287
285
  exports.TextareaWithDisplayFormat = TextareaWithDisplayFormat.default;
288
286
  exports.Title = Title.default;
287
+ exports.Tile = Tile.default;
289
288
  exports.Tooltip = Tooltip.default;
290
289
  exports.Typeahead = Typeahead.default;
291
290
  exports.Upload = Upload.default;
@@ -301,6 +300,10 @@ exports.useDirection = useDirection.useDirection;
301
300
  exports.useLayout = useLayout.useLayout;
302
301
  exports.useScreenSize = useScreenSize.useScreenSize;
303
302
  exports.useSnackbar = useSnackbar.default;
303
+ Object.defineProperty(exports, "Breakpoint", {
304
+ enumerable: true,
305
+ get: function () { return neptuneTokens.Breakpoint; }
306
+ });
304
307
  exports.isBrowser = documentIosClick.isBrowser;
305
308
  exports.isServerSide = documentIosClick.isServerSide;
306
309
  Object.defineProperty(exports, "Theme", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.mjs CHANGED
@@ -9,14 +9,7 @@ export { default as AvatarView } from './avatarView/AvatarView.mjs';
9
9
  export { default as AvatarLayout } from './avatarLayout/AvatarLayout.mjs';
10
10
  export { default as AvatarWrapper } from './avatarWrapper/AvatarWrapper.mjs';
11
11
  export { default as Badge } from './badge/Badge.mjs';
12
- import '@transferwise/icons';
13
- import '@wise/art';
14
- export { default as StatusIcon } from './statusIcon/StatusIcon.mjs';
15
- import 'react';
16
- import 'clsx';
17
- export { Breakpoint } from '@transferwise/neptune-tokens';
18
- import 'react/jsx-runtime';
19
- export { default as Image } from './image/Image.mjs';
12
+ export { default as BadgeAssets } from './badge/BadgeAssets.mjs';
20
13
  export { default as Body } from './body/Body.mjs';
21
14
  export { default as Button } from './button/Button.resolver.mjs';
22
15
  export { default as IconButton } from './iconButton/IconButton.mjs';
@@ -48,6 +41,7 @@ export { default as Emphasis } from './emphasis/Emphasis.mjs';
48
41
  export { Field } from './field/Field.mjs';
49
42
  export { default as FlowNavigation } from './flowNavigation/FlowNavigation.mjs';
50
43
  export { default as Header } from './header/Header.mjs';
44
+ export { default as Image } from './image/Image.mjs';
51
45
  export { InfoPresentation } from './info/infoPresentations.mjs';
52
46
  export { default as Info } from './info/Info.mjs';
53
47
  export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
@@ -60,8 +54,12 @@ export { Input } from './inputs/Input.mjs';
60
54
  export { InputGroup } from './inputs/InputGroup.mjs';
61
55
  export { SearchInput } from './inputs/SearchInput.mjs';
62
56
  export { SelectInput } from './inputs/SelectInput/SelectInput.mjs';
57
+ import '@transferwise/icons';
58
+ import 'clsx';
63
59
  import 'react-intl';
64
60
  import './dateLookup/dateTrigger/DateTrigger.messages.mjs';
61
+ import 'react/jsx-runtime';
62
+ import 'react';
65
63
  import '@headlessui/react';
66
64
  export { SelectInputOptionContent } from './inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs';
67
65
  export { SelectInputTriggerButton } from './inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs';
@@ -106,6 +104,7 @@ export { default as SlidingPanel } from './slidingPanel/SlidingPanel.mjs';
106
104
  export { default as SnackbarPortal } from './snackbar/Snackbar.mjs';
107
105
  export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext.mjs';
108
106
  export { default as SnackbarProvider } from './snackbar/SnackbarProvider.mjs';
107
+ export { default as StatusIcon } from './statusIcon/StatusIcon.mjs';
109
108
  export { default as Stepper } from './stepper/Stepper.mjs';
110
109
  export { default as Sticky } from './sticky/Sticky.mjs';
111
110
  export { default as Summary } from './summary/Summary.mjs';
@@ -114,6 +113,7 @@ export { default as SwitchOption } from './switchOption/SwitchOption.mjs';
114
113
  export { default as Tabs } from './tabs/Tabs.mjs';
115
114
  export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat/TextareaWithDisplayFormat.mjs';
116
115
  export { default as Title } from './title/Title.mjs';
116
+ export { default as Tile } from './tile/Tile.mjs';
117
117
  export { default as Tooltip } from './tooltip/Tooltip.mjs';
118
118
  export { default as Typeahead } from './typeahead/Typeahead.mjs';
119
119
  export { default as Upload, UploadStep } from './upload/Upload.mjs';
@@ -126,6 +126,7 @@ export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
126
126
  export { useLayout } from './common/hooks/useLayout/useLayout.mjs';
127
127
  export { useScreenSize } from './common/hooks/useScreenSize.mjs';
128
128
  export { default as useSnackbar } from './snackbar/useSnackbar.mjs';
129
+ export { Breakpoint } from '@transferwise/neptune-tokens';
129
130
  export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
130
131
  export { Theme } from './common/theme.mjs';
131
132
  export { Direction } from './common/direction.mjs';
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/**\n * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;AAEG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AAAQ,CACS,EAAA;EACjB,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAAA,MAAA,EAASP,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\n/**\n * @deprecated Use InlinePrompt or Field and associated typings\n */\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/**\n * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;AAEG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AAAQ,CACS,EAAA;EACjB,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAAA,MAAA,EAASP,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/**\n * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;AAEG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AAAQ,CACS,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAAA,MAAA,EAASP,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\n/**\n * @deprecated Use InlinePrompt or Field and associated typings\n */\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n iconLabel?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/**\n * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n iconLabel,\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && (\n <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n )}\n <div>{children}</div>\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;AAEG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AAAQ,CACS,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAAA,MAAA,EAASP,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}
package/build/main.css CHANGED
@@ -32099,30 +32099,22 @@ html:not([dir="rtl"]) .np-navigation-option {
32099
32099
  inline-size: 100%;
32100
32100
  }
32101
32101
 
32102
- .wds-critical-banner__entry-mask {
32103
- display: grid;
32104
- grid-template-rows: 0fr;
32105
- overflow: hidden;
32106
- animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
32107
- }
32108
-
32109
32102
  @container critical-banner-overhang (max-width: 600px) {
32110
- .wds-critical-banner__entry-mask {
32103
+ .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
32111
32104
  --critical-banner-mobile-overhang-size: 32px;
32112
32105
  --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
32113
- var(--critical-banner-mobile-overhang-size) no-repeat,
32114
- radial-gradient(
32115
- circle at 0% 100%,
32116
- transparent var(--critical-banner-mobile-overhang-size),
32117
- #000 var(--critical-banner-mobile-overhang-size)
32118
- )
32119
- 100% 0 / var(--critical-banner-mobile-overhang-size)
32120
- var(--critical-banner-mobile-overhang-size) no-repeat;
32121
- }
32122
- .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
32106
+ var(--critical-banner-mobile-overhang-size) no-repeat,
32107
+ radial-gradient(
32108
+ circle at 0% 100%,
32109
+ transparent var(--critical-banner-mobile-overhang-size),
32110
+ #000 var(--critical-banner-mobile-overhang-size)
32111
+ )
32112
+ 100% 0 / var(--critical-banner-mobile-overhang-size)
32113
+ var(--critical-banner-mobile-overhang-size) no-repeat;
32114
+ margin-bottom: 32px;
32123
32115
  margin-bottom: var(--critical-banner-mobile-overhang-size);
32124
32116
  }
32125
- .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
32117
+ .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
32126
32118
  content: "";
32127
32119
  position: absolute;
32128
32120
  right: 0;
@@ -32136,21 +32128,6 @@ html:not([dir="rtl"]) .np-navigation-option {
32136
32128
  }
32137
32129
  }
32138
32130
 
32139
- .wds-critical-banner__entry-track {
32140
- min-height: 0;
32141
- }
32142
-
32143
- @keyframes wds-critical-banner-reveal-height {
32144
- from {
32145
- grid-template-rows: 0fr;
32146
- overflow: hidden;
32147
- }
32148
- to {
32149
- grid-template-rows: 1fr;
32150
- overflow: visible;
32151
- }
32152
- }
32153
-
32154
32131
  @media (prefers-reduced-motion: reduce) {
32155
32132
  .wds-critical-banner__description,
32156
32133
  .wds-critical-banner__title,
@@ -32158,11 +32135,6 @@ html:not([dir="rtl"]) .np-navigation-option {
32158
32135
  .wds-critical-banner__toggle {
32159
32136
  transition: none !important;
32160
32137
  }
32161
- .wds-critical-banner__entry-mask {
32162
- animation: none;
32163
- grid-template-rows: 1fr;
32164
- overflow: visible;
32165
- }
32166
32138
  }
32167
32139
 
32168
32140
  .wds-expander-toggle {
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\n/**\n * @deprecated Use ListItem and associated typings\n */\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\n/**\n * @deprecated Use ListItem and associated typings\n */\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
1
+ {"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\n/**\n * @deprecated Use List and ListItem and associated typings\n */\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAmBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
1
+ {"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\n/**\n * @deprecated Use List and ListItem and associated typings\n */\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAmBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}