@transferwise/components 46.136.1 → 46.137.1

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 (264) hide show
  1. package/build/common/hooks/useContainerSize.js +30 -0
  2. package/build/common/hooks/useContainerSize.js.map +1 -0
  3. package/build/common/hooks/useContainerSize.mjs +28 -0
  4. package/build/common/hooks/useContainerSize.mjs.map +1 -0
  5. package/build/common/hooks/useResizeObserver.js +3 -3
  6. package/build/common/hooks/useResizeObserver.js.map +1 -1
  7. package/build/common/hooks/useResizeObserver.mjs +3 -3
  8. package/build/common/hooks/useResizeObserver.mjs.map +1 -1
  9. package/build/criticalBanner/CriticalCommsBanner.js +3 -0
  10. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  11. package/build/criticalBanner/CriticalCommsBanner.mjs +3 -0
  12. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  13. package/build/field/Field.js +3 -2
  14. package/build/field/Field.js.map +1 -1
  15. package/build/field/Field.mjs +3 -2
  16. package/build/field/Field.mjs.map +1 -1
  17. package/build/i18n/cs.json +2 -0
  18. package/build/i18n/cs.json.js +2 -0
  19. package/build/i18n/cs.json.js.map +1 -1
  20. package/build/i18n/cs.json.mjs +2 -0
  21. package/build/i18n/cs.json.mjs.map +1 -1
  22. package/build/i18n/de.json +2 -0
  23. package/build/i18n/de.json.js +2 -0
  24. package/build/i18n/de.json.js.map +1 -1
  25. package/build/i18n/de.json.mjs +2 -0
  26. package/build/i18n/de.json.mjs.map +1 -1
  27. package/build/i18n/en.json +2 -0
  28. package/build/i18n/en.json.js +2 -0
  29. package/build/i18n/en.json.js.map +1 -1
  30. package/build/i18n/en.json.mjs +2 -0
  31. package/build/i18n/en.json.mjs.map +1 -1
  32. package/build/i18n/es.json +2 -0
  33. package/build/i18n/es.json.js +2 -0
  34. package/build/i18n/es.json.js.map +1 -1
  35. package/build/i18n/es.json.mjs +2 -0
  36. package/build/i18n/es.json.mjs.map +1 -1
  37. package/build/i18n/fr.json +2 -0
  38. package/build/i18n/fr.json.js +2 -0
  39. package/build/i18n/fr.json.js.map +1 -1
  40. package/build/i18n/fr.json.mjs +2 -0
  41. package/build/i18n/fr.json.mjs.map +1 -1
  42. package/build/i18n/hu.json +2 -0
  43. package/build/i18n/hu.json.js +2 -0
  44. package/build/i18n/hu.json.js.map +1 -1
  45. package/build/i18n/hu.json.mjs +2 -0
  46. package/build/i18n/hu.json.mjs.map +1 -1
  47. package/build/i18n/id.json +2 -0
  48. package/build/i18n/id.json.js +2 -0
  49. package/build/i18n/id.json.js.map +1 -1
  50. package/build/i18n/id.json.mjs +2 -0
  51. package/build/i18n/id.json.mjs.map +1 -1
  52. package/build/i18n/it.json +2 -0
  53. package/build/i18n/it.json.js +2 -0
  54. package/build/i18n/it.json.js.map +1 -1
  55. package/build/i18n/it.json.mjs +2 -0
  56. package/build/i18n/it.json.mjs.map +1 -1
  57. package/build/i18n/ja.json +2 -0
  58. package/build/i18n/ja.json.js +2 -0
  59. package/build/i18n/ja.json.js.map +1 -1
  60. package/build/i18n/ja.json.mjs +2 -0
  61. package/build/i18n/ja.json.mjs.map +1 -1
  62. package/build/i18n/nl.json +2 -0
  63. package/build/i18n/nl.json.js +2 -0
  64. package/build/i18n/nl.json.js.map +1 -1
  65. package/build/i18n/nl.json.mjs +2 -0
  66. package/build/i18n/nl.json.mjs.map +1 -1
  67. package/build/i18n/pl.json +2 -0
  68. package/build/i18n/pl.json.js +2 -0
  69. package/build/i18n/pl.json.js.map +1 -1
  70. package/build/i18n/pl.json.mjs +2 -0
  71. package/build/i18n/pl.json.mjs.map +1 -1
  72. package/build/i18n/pt.json +2 -0
  73. package/build/i18n/pt.json.js +2 -0
  74. package/build/i18n/pt.json.js.map +1 -1
  75. package/build/i18n/pt.json.mjs +2 -0
  76. package/build/i18n/pt.json.mjs.map +1 -1
  77. package/build/i18n/ro.json +2 -0
  78. package/build/i18n/ro.json.js +2 -0
  79. package/build/i18n/ro.json.js.map +1 -1
  80. package/build/i18n/ro.json.mjs +2 -0
  81. package/build/i18n/ro.json.mjs.map +1 -1
  82. package/build/i18n/ru.json +2 -0
  83. package/build/i18n/ru.json.js +2 -0
  84. package/build/i18n/ru.json.js.map +1 -1
  85. package/build/i18n/ru.json.mjs +2 -0
  86. package/build/i18n/ru.json.mjs.map +1 -1
  87. package/build/i18n/th.json +2 -0
  88. package/build/i18n/th.json.js +2 -0
  89. package/build/i18n/th.json.js.map +1 -1
  90. package/build/i18n/th.json.mjs +2 -0
  91. package/build/i18n/th.json.mjs.map +1 -1
  92. package/build/i18n/tr.json +2 -0
  93. package/build/i18n/tr.json.js +2 -0
  94. package/build/i18n/tr.json.js.map +1 -1
  95. package/build/i18n/tr.json.mjs +2 -0
  96. package/build/i18n/tr.json.mjs.map +1 -1
  97. package/build/i18n/zh-CN.json +2 -0
  98. package/build/i18n/zh-CN.json.js +2 -0
  99. package/build/i18n/zh-CN.json.js.map +1 -1
  100. package/build/i18n/zh-CN.json.mjs +2 -0
  101. package/build/i18n/zh-CN.json.mjs.map +1 -1
  102. package/build/i18n/zh-HK.json +2 -0
  103. package/build/i18n/zh-HK.json.js +2 -0
  104. package/build/i18n/zh-HK.json.js.map +1 -1
  105. package/build/i18n/zh-HK.json.mjs +2 -0
  106. package/build/i18n/zh-HK.json.mjs.map +1 -1
  107. package/build/index.js +2 -0
  108. package/build/index.js.map +1 -1
  109. package/build/index.mjs +1 -0
  110. package/build/index.mjs.map +1 -1
  111. package/build/listItem/Prompt/ListItemPrompt.js +3 -2
  112. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  113. package/build/listItem/Prompt/ListItemPrompt.mjs +3 -2
  114. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  115. package/build/logo/Logo.js +77 -25
  116. package/build/logo/Logo.js.map +1 -1
  117. package/build/logo/Logo.mjs +79 -27
  118. package/build/logo/Logo.mjs.map +1 -1
  119. package/build/logo/logo-assets.js +68 -97
  120. package/build/logo/logo-assets.js.map +1 -1
  121. package/build/logo/logo-assets.mjs +62 -90
  122. package/build/logo/logo-assets.mjs.map +1 -1
  123. package/build/main.css +225 -59
  124. package/build/prompt/ActionPrompt/ActionPrompt.js +8 -40
  125. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  126. package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -40
  127. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  128. package/build/prompt/CriticalBanner/CriticalBanner.js +143 -0
  129. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
  130. package/build/prompt/CriticalBanner/CriticalBanner.mjs +141 -0
  131. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
  132. package/build/prompt/CriticalBanner/helpers.js +29 -0
  133. package/build/prompt/CriticalBanner/helpers.js.map +1 -0
  134. package/build/prompt/CriticalBanner/helpers.mjs +26 -0
  135. package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
  136. package/build/prompt/InfoPrompt/InfoPrompt.js +3 -2
  137. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  138. package/build/prompt/InfoPrompt/InfoPrompt.mjs +3 -2
  139. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  140. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +11 -4
  141. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
  142. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +11 -4
  143. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
  144. package/build/prompt/common/Expander/Expander.js +35 -0
  145. package/build/prompt/common/Expander/Expander.js.map +1 -0
  146. package/build/prompt/common/Expander/Expander.messages.js +17 -0
  147. package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
  148. package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
  149. package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
  150. package/build/prompt/common/Expander/Expander.mjs +33 -0
  151. package/build/prompt/common/Expander/Expander.mjs.map +1 -0
  152. package/build/prompt/helpers/promptMedia.js +52 -0
  153. package/build/prompt/helpers/promptMedia.js.map +1 -0
  154. package/build/prompt/helpers/promptMedia.mjs +50 -0
  155. package/build/prompt/helpers/promptMedia.mjs.map +1 -0
  156. package/build/styles/css/neptune.css +0 -1
  157. package/build/styles/logo/Logo.css +3 -23
  158. package/build/styles/main.css +225 -59
  159. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +134 -0
  160. package/build/styles/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
  161. package/build/styles/prompt/InfoPrompt/InfoPrompt.css +24 -0
  162. package/build/styles/prompt/common/Expander/Expander.css +8 -0
  163. package/build/styles/styles/less/neptune.css +0 -1
  164. package/build/typeahead/Typeahead.js +3 -2
  165. package/build/typeahead/Typeahead.js.map +1 -1
  166. package/build/typeahead/Typeahead.mjs +3 -2
  167. package/build/typeahead/Typeahead.mjs.map +1 -1
  168. package/build/types/common/hooks/useContainerSize.d.ts +14 -0
  169. package/build/types/common/hooks/useContainerSize.d.ts.map +1 -0
  170. package/build/types/common/hooks/useResizeObserver.d.ts +1 -1
  171. package/build/types/common/hooks/useResizeObserver.d.ts.map +1 -1
  172. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +3 -0
  173. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  174. package/build/types/index.d.ts +2 -2
  175. package/build/types/index.d.ts.map +1 -1
  176. package/build/types/logo/Logo.d.ts +33 -1
  177. package/build/types/logo/Logo.d.ts.map +1 -1
  178. package/build/types/logo/logo-assets.d.ts +33 -9
  179. package/build/types/logo/logo-assets.d.ts.map +1 -1
  180. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
  181. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  182. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +39 -0
  183. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
  184. package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
  185. package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
  186. package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
  187. package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
  188. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  189. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +35 -3
  190. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
  191. package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
  192. package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
  193. package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
  194. package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
  195. package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
  196. package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
  197. package/build/types/prompt/index.d.ts +2 -0
  198. package/build/types/prompt/index.d.ts.map +1 -1
  199. package/build/types/test-utils/index.d.ts +4 -0
  200. package/build/types/test-utils/index.d.ts.map +1 -1
  201. package/package.json +22 -18
  202. package/src/alert/Alert.story.tsx +30 -1
  203. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
  204. package/src/button/_stories/Button.story.tsx +11 -0
  205. package/src/common/hooks/useContainerSize.test.tsx +125 -0
  206. package/src/common/hooks/useContainerSize.ts +32 -0
  207. package/src/common/hooks/useResizeObserver.ts +3 -2
  208. package/src/criticalBanner/CriticalCommsBanner.story.tsx +4 -0
  209. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +1 -1
  210. package/src/criticalBanner/CriticalCommsBanner.tsx +3 -0
  211. package/src/i18n/cs.json +2 -0
  212. package/src/i18n/de.json +2 -0
  213. package/src/i18n/en.json +2 -0
  214. package/src/i18n/es.json +2 -0
  215. package/src/i18n/fr.json +2 -0
  216. package/src/i18n/hu.json +2 -0
  217. package/src/i18n/id.json +2 -0
  218. package/src/i18n/it.json +2 -0
  219. package/src/i18n/ja.json +2 -0
  220. package/src/i18n/nl.json +2 -0
  221. package/src/i18n/pl.json +2 -0
  222. package/src/i18n/pt.json +2 -0
  223. package/src/i18n/ro.json +2 -0
  224. package/src/i18n/ru.json +2 -0
  225. package/src/i18n/th.json +2 -0
  226. package/src/i18n/tr.json +2 -0
  227. package/src/i18n/zh-CN.json +2 -0
  228. package/src/i18n/zh-HK.json +2 -0
  229. package/src/index.ts +2 -2
  230. package/src/logo/Logo.css +3 -23
  231. package/src/logo/Logo.less +3 -29
  232. package/src/logo/Logo.story.tsx +117 -89
  233. package/src/logo/Logo.test.story.tsx +15 -24
  234. package/src/logo/Logo.tsx +90 -28
  235. package/src/logo/logo-assets.tsx +36 -92
  236. package/src/main.css +225 -59
  237. package/src/main.less +3 -1
  238. package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
  239. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +113 -0
  240. package/src/prompt/CriticalBanner/CriticalBanner.css +134 -0
  241. package/src/prompt/CriticalBanner/CriticalBanner.less +155 -0
  242. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +635 -0
  243. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +422 -0
  244. package/src/prompt/CriticalBanner/CriticalBanner.tsx +179 -0
  245. package/src/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
  246. package/src/prompt/CriticalBanner/CriticalBanner.vars.less +6 -0
  247. package/src/prompt/CriticalBanner/helpers.ts +39 -0
  248. package/src/prompt/CriticalBanner/index.ts +2 -0
  249. package/src/prompt/InfoPrompt/InfoPrompt.css +24 -0
  250. package/src/prompt/InfoPrompt/InfoPrompt.less +23 -0
  251. package/src/prompt/InfoPrompt/InfoPrompt.tsx +5 -1
  252. package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +56 -40
  253. package/src/prompt/common/Expander/Expander.css +8 -0
  254. package/src/prompt/common/Expander/Expander.less +9 -0
  255. package/src/prompt/common/Expander/Expander.messages.ts +14 -0
  256. package/src/prompt/common/Expander/Expander.test.tsx +167 -0
  257. package/src/prompt/common/Expander/Expander.tsx +83 -0
  258. package/src/prompt/helpers/promptMedia.tsx +79 -0
  259. package/src/prompt/index.ts +4 -0
  260. package/src/radio/Radio.story.tsx +1 -1
  261. package/src/section/Section.story.tsx +2 -8
  262. package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
  263. package/src/statusIcon/StatusIcon.test.tsx +0 -2
  264. package/src/styles/less/neptune.css +0 -1
@@ -26,17 +26,18 @@ import '../../common/closeButton/CloseButton.messages.mjs';
26
26
  import { jsx } from 'react/jsx-runtime';
27
27
  import { ListItemContext } from '../ListItemContext.mjs';
28
28
  import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
29
- import '../../statusIcon/StatusIcon.mjs';
30
29
  import '../../body/Body.mjs';
31
30
  import '../../button/Button.resolver.mjs';
31
+ import '../../prompt/PrimitivePrompt/PrimitivePrompt.mjs';
32
32
  import '../../badge/Badge.mjs';
33
33
  import '@wise/art';
34
+ import '../../statusIcon/StatusIcon.mjs';
34
35
  import '@transferwise/neptune-validation';
35
36
  import '../../provider/direction/DirectionProvider.mjs';
36
- import '../../sentimentSurface/SentimentSurface.mjs';
37
37
  import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
38
38
  import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
39
39
  import '../../link/Link.messages.mjs';
40
+ import '../../prompt/common/Expander/Expander.messages.mjs';
40
41
 
41
42
  const Prompt = ({
42
43
  sentiment = Sentiment.NEUTRAL,
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n media,\n loading,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n media={media}\n loading={loading}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
1
+ {"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n media,\n loading,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n media={media}\n loading={loading}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
@@ -3,32 +3,65 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var clsx = require('clsx');
6
- var logoAssets = require('./logo-assets.js');
6
+ var logoAssets$1 = require('./logo-assets.js');
7
+ require('../common/theme.js');
8
+ require('../common/direction.js');
9
+ require('../common/propsValues/control.js');
10
+ var breakpoint = require('../common/propsValues/breakpoint.js');
11
+ require('../common/propsValues/size.js');
12
+ require('../common/propsValues/typography.js');
13
+ require('../common/propsValues/width.js');
14
+ require('../common/propsValues/type.js');
15
+ require('../common/propsValues/dateMode.js');
16
+ require('../common/propsValues/monthFormat.js');
17
+ require('../common/propsValues/position.js');
18
+ require('../common/propsValues/layouts.js');
19
+ require('../common/propsValues/status.js');
20
+ require('../common/propsValues/sentiment.js');
21
+ require('../common/propsValues/profileType.js');
22
+ require('../common/propsValues/variant.js');
23
+ require('../common/propsValues/scroll.js');
24
+ require('../common/propsValues/markdownNodeType.js');
25
+ require('../common/fileType.js');
26
+ require('@transferwise/formatting');
27
+ require('@transferwise/icons');
28
+ require('react');
29
+ require('react-intl');
30
+ require('../common/closeButton/CloseButton.messages.js');
7
31
  var jsxRuntime = require('react/jsx-runtime');
32
+ var useScreenSize = require('../common/hooks/useScreenSize.js');
8
33
 
9
- const svgPaths = {
10
- WISE: logoAssets.LogoWise,
11
- WISE_BUSINESS: logoAssets.LogoWise,
12
- WISE_INVERSE: logoAssets.LogoWiseInverse,
13
- WISE_BUSINESS_INVERSE: logoAssets.LogoWiseInverse,
14
- WISE_PLATFORM: logoAssets.LogoWisePlatform,
15
- WISE_PLATFORM_INVERSE: logoAssets.LogoWisePlatformInverse,
16
- WISE_FLAG: logoAssets.LogoFlag,
17
- WISE_FLAG_INVERSE: logoAssets.LogoFlagInverse,
18
- WISE_FLAG_PLATFORM: logoAssets.LogoFlagPlatform,
19
- WISE_FLAG_PLATFORM_INVERSE: logoAssets.LogoFlagPlatformInverse
20
- };
21
34
  exports.LogoType = void 0;
22
35
  (function (LogoType) {
23
36
  LogoType["WISE"] = "WISE";
24
37
  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
25
38
  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
26
39
  })(exports.LogoType || (exports.LogoType = {}));
40
+ exports.LogoDisplay = void 0;
41
+ (function (LogoDisplay) {
42
+ LogoDisplay["RESPONSIVE"] = "responsive";
43
+ LogoDisplay["COMPACT"] = "compact";
44
+ LogoDisplay["FULL"] = "full";
45
+ })(exports.LogoDisplay || (exports.LogoDisplay = {}));
46
+ exports.LogoFormat = void 0;
47
+ (function (LogoFormat) {
48
+ LogoFormat["DEFAULT"] = "default";
49
+ LogoFormat["PRIMARY_LOCKUP"] = "primary-lockup";
50
+ LogoFormat["SECONDARY_LOCKUP"] = "secondary-lockup";
51
+ })(exports.LogoFormat || (exports.LogoFormat = {}));
27
52
  const labelByType = {
28
53
  WISE: 'Wise',
29
54
  WISE_BUSINESS: 'Wise Business',
30
55
  WISE_PLATFORM: 'Wise Platform'
31
56
  };
57
+ const logoAssets = {
58
+ FastFlag: logoAssets$1.FastFlag,
59
+ WiseLogo: logoAssets$1.WiseLogo,
60
+ WiseBusinessPrimary: logoAssets$1.WiseBusinessPrimary,
61
+ WiseBusinessSecondary: logoAssets$1.WiseBusinessSecondary,
62
+ WisePlatformPrimary: logoAssets$1.WisePlatformPrimary,
63
+ WisePlatformSecondary: logoAssets$1.WisePlatformSecondary
64
+ };
32
65
  /**
33
66
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
34
67
  * and the full wordmark on ≥576px (small breakpoint and above).
@@ -37,22 +70,41 @@ const labelByType = {
37
70
  */
38
71
  function Logo({
39
72
  className,
40
- inverse,
41
- type = 'WISE'
73
+ type = 'WISE',
74
+ format = 'default',
75
+ display = 'responsive',
76
+ 'aria-label': ariaLabel
42
77
  }) {
43
- const LogoSm = svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
44
- const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
45
- return /*#__PURE__*/jsxRuntime.jsxs("span", {
46
- "aria-label": labelByType[type],
78
+ const isScreenSm = !useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
79
+ const compact = display === 'compact' || display === 'responsive' && isScreenSm;
80
+ const assetName = compact ? 'FastFlag' : getAssetName(type, format);
81
+ const Asset = logoAssets[assetName];
82
+ const {
83
+ width,
84
+ height
85
+ } = logoAssets$1.logoAssetsDimensions[assetName];
86
+ return /*#__PURE__*/jsxRuntime.jsx("span", {
87
+ className: clsx.clsx('np-logo', className),
47
88
  role: "img",
48
- className: clsx.clsx(className, 'np-logo'),
49
- children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
50
- className: "np-logo-svg np-logo-svg--size-sm"
51
- }), /*#__PURE__*/jsxRuntime.jsx(LogoMd, {
52
- className: "np-logo-svg np-logo-svg--size-md"
53
- })]
89
+ "aria-label": ariaLabel ?? labelByType[type],
90
+ style: {
91
+ '--wds-logo-width': `${width}px`,
92
+ '--wds-logo-height': `${height}px`
93
+ },
94
+ children: /*#__PURE__*/jsxRuntime.jsx(Asset, {})
54
95
  });
55
96
  }
97
+ function getAssetName(type, format) {
98
+ if (format !== 'default') {
99
+ if (type === 'WISE_BUSINESS') {
100
+ return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
101
+ }
102
+ if (type === 'WISE_PLATFORM') {
103
+ return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
104
+ }
105
+ }
106
+ return 'WiseLogo';
107
+ }
56
108
 
57
109
  exports.default = Logo;
58
110
  //# sourceMappingURL=Logo.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n const LogoSm =\n svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n return (\n <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n </span>\n );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;;;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,mBAAQ;AACdC,EAAAA,aAAa,EAAED,mBAAQ;AACvBE,EAAAA,YAAY,EAAEC,0BAAe;AAC7BC,EAAAA,qBAAqB,EAAED,0BAAe;AACtCE,EAAAA,aAAa,EAAEC,2BAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,kCAAuB;AAC9CC,EAAAA,SAAS,EAAEC,mBAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,0BAAe;AAClCC,EAAAA,kBAAkB,EAAEC,2BAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;AAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAqBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAEzC;;;;;AAKG;AACW,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,eAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,cAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,cAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n FastFlag,\n logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n RESPONSIVE = 'responsive',\n COMPACT = 'compact',\n FULL = 'full',\n}\n\nexport enum LogoFormat {\n DEFAULT = 'default',\n PRIMARY_LOCKUP = 'primary-lockup',\n SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n * @deprecated dark mode comes out of the box, this property has no effect\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n /**\n * Controls which logo variant is shown.\n * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n * @default 'responsive'\n */\n display?: `${LogoDisplay}`;\n /**\n * Controls the format of the logo.\n * - `\"default\"`: plain Wise wordmark, no product name.\n * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n * @default 'default'\n */\n format?: `${LogoFormat}`;\n /**\n * Override default ({@link labelByType}) screen reader messages\n */\n 'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n FastFlag,\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n className,\n type = 'WISE',\n format = 'default',\n display = 'responsive',\n 'aria-label': ariaLabel,\n}: LogoProps) {\n const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n const Asset = logoAssets[assetName];\n const { width, height } = logoAssetsDimensions[assetName];\n\n return (\n <span\n className={clsx('np-logo', className)}\n role=\"img\"\n aria-label={ariaLabel ?? labelByType[type]}\n style={\n {\n '--wds-logo-width': `${width}px`,\n '--wds-logo-height': `${height}px`,\n } as React.CSSProperties\n }\n >\n <Asset />\n </span>\n );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n if (format !== 'default') {\n if (type === 'WISE_BUSINESS') {\n return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n }\n if (type === 'WISE_PLATFORM') {\n return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n }\n }\n return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":"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"}
@@ -1,30 +1,63 @@
1
1
  import { clsx } from 'clsx';
2
- import { LogoFlagPlatformInverse, LogoFlagPlatform, LogoFlagInverse, LogoFlag, LogoWisePlatformInverse, LogoWisePlatform, LogoWiseInverse, LogoWise } from './logo-assets.mjs';
3
- import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { logoAssetsDimensions, WisePlatformSecondary, WisePlatformPrimary, WiseBusinessSecondary, WiseBusinessPrimary, WiseLogo, FastFlag } from './logo-assets.mjs';
3
+ import '../common/theme.mjs';
4
+ import '../common/direction.mjs';
5
+ import '../common/propsValues/control.mjs';
6
+ import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
7
+ import '../common/propsValues/size.mjs';
8
+ import '../common/propsValues/typography.mjs';
9
+ import '../common/propsValues/width.mjs';
10
+ import '../common/propsValues/type.mjs';
11
+ import '../common/propsValues/dateMode.mjs';
12
+ import '../common/propsValues/monthFormat.mjs';
13
+ import '../common/propsValues/position.mjs';
14
+ import '../common/propsValues/layouts.mjs';
15
+ import '../common/propsValues/status.mjs';
16
+ import '../common/propsValues/sentiment.mjs';
17
+ import '../common/propsValues/profileType.mjs';
18
+ import '../common/propsValues/variant.mjs';
19
+ import '../common/propsValues/scroll.mjs';
20
+ import '../common/propsValues/markdownNodeType.mjs';
21
+ import '../common/fileType.mjs';
22
+ import '@transferwise/formatting';
23
+ import '@transferwise/icons';
24
+ import 'react';
25
+ import 'react-intl';
26
+ import '../common/closeButton/CloseButton.messages.mjs';
27
+ import { jsx } from 'react/jsx-runtime';
28
+ import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
4
29
 
5
- const svgPaths = {
6
- WISE: LogoWise,
7
- WISE_BUSINESS: LogoWise,
8
- WISE_INVERSE: LogoWiseInverse,
9
- WISE_BUSINESS_INVERSE: LogoWiseInverse,
10
- WISE_PLATFORM: LogoWisePlatform,
11
- WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,
12
- WISE_FLAG: LogoFlag,
13
- WISE_FLAG_INVERSE: LogoFlagInverse,
14
- WISE_FLAG_PLATFORM: LogoFlagPlatform,
15
- WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse
16
- };
17
30
  var LogoType;
18
31
  (function (LogoType) {
19
32
  LogoType["WISE"] = "WISE";
20
33
  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
21
34
  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
22
35
  })(LogoType || (LogoType = {}));
36
+ var LogoDisplay;
37
+ (function (LogoDisplay) {
38
+ LogoDisplay["RESPONSIVE"] = "responsive";
39
+ LogoDisplay["COMPACT"] = "compact";
40
+ LogoDisplay["FULL"] = "full";
41
+ })(LogoDisplay || (LogoDisplay = {}));
42
+ var LogoFormat;
43
+ (function (LogoFormat) {
44
+ LogoFormat["DEFAULT"] = "default";
45
+ LogoFormat["PRIMARY_LOCKUP"] = "primary-lockup";
46
+ LogoFormat["SECONDARY_LOCKUP"] = "secondary-lockup";
47
+ })(LogoFormat || (LogoFormat = {}));
23
48
  const labelByType = {
24
49
  WISE: 'Wise',
25
50
  WISE_BUSINESS: 'Wise Business',
26
51
  WISE_PLATFORM: 'Wise Platform'
27
52
  };
53
+ const logoAssets = {
54
+ FastFlag,
55
+ WiseLogo,
56
+ WiseBusinessPrimary,
57
+ WiseBusinessSecondary,
58
+ WisePlatformPrimary,
59
+ WisePlatformSecondary
60
+ };
28
61
  /**
29
62
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
30
63
  * and the full wordmark on ≥576px (small breakpoint and above).
@@ -33,22 +66,41 @@ const labelByType = {
33
66
  */
34
67
  function Logo({
35
68
  className,
36
- inverse,
37
- type = 'WISE'
69
+ type = 'WISE',
70
+ format = 'default',
71
+ display = 'responsive',
72
+ 'aria-label': ariaLabel
38
73
  }) {
39
- const LogoSm = svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
40
- const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
41
- return /*#__PURE__*/jsxs("span", {
42
- "aria-label": labelByType[type],
74
+ const isScreenSm = !useScreenSize(Breakpoint.SMALL);
75
+ const compact = display === 'compact' || display === 'responsive' && isScreenSm;
76
+ const assetName = compact ? 'FastFlag' : getAssetName(type, format);
77
+ const Asset = logoAssets[assetName];
78
+ const {
79
+ width,
80
+ height
81
+ } = logoAssetsDimensions[assetName];
82
+ return /*#__PURE__*/jsx("span", {
83
+ className: clsx('np-logo', className),
43
84
  role: "img",
44
- className: clsx(className, 'np-logo'),
45
- children: [/*#__PURE__*/jsx(LogoSm, {
46
- className: "np-logo-svg np-logo-svg--size-sm"
47
- }), /*#__PURE__*/jsx(LogoMd, {
48
- className: "np-logo-svg np-logo-svg--size-md"
49
- })]
85
+ "aria-label": ariaLabel ?? labelByType[type],
86
+ style: {
87
+ '--wds-logo-width': `${width}px`,
88
+ '--wds-logo-height': `${height}px`
89
+ },
90
+ children: /*#__PURE__*/jsx(Asset, {})
50
91
  });
51
92
  }
93
+ function getAssetName(type, format) {
94
+ if (format !== 'default') {
95
+ if (type === 'WISE_BUSINESS') {
96
+ return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
97
+ }
98
+ if (type === 'WISE_PLATFORM') {
99
+ return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
100
+ }
101
+ }
102
+ return 'WiseLogo';
103
+ }
52
104
 
53
- export { LogoType, Logo as default };
105
+ export { LogoDisplay, LogoFormat, LogoType, Logo as default };
54
106
  //# sourceMappingURL=Logo.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n LogoWise,\n LogoWiseInverse,\n LogoWisePlatform,\n LogoWisePlatformInverse,\n LogoFlag,\n LogoFlagInverse,\n LogoFlagPlatform,\n LogoFlagPlatformInverse,\n} from './logo-assets';\n\nconst svgPaths = {\n WISE: LogoWise,\n WISE_BUSINESS: LogoWise,\n WISE_INVERSE: LogoWiseInverse,\n WISE_BUSINESS_INVERSE: LogoWiseInverse,\n WISE_PLATFORM: LogoWisePlatform,\n WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,\n WISE_FLAG: LogoFlag,\n WISE_FLAG_INVERSE: LogoFlagInverse,\n WISE_FLAG_PLATFORM: LogoFlagPlatform,\n WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,\n};\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {\n const LogoSm =\n svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];\n const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];\n\n return (\n <span aria-label={labelByType[type]} role=\"img\" className={clsx(className, 'np-logo')}>\n <LogoSm className=\"np-logo-svg np-logo-svg--size-sm\" />\n <LogoMd className=\"np-logo-svg np-logo-svg--size-md\" />\n </span>\n );\n}\n"],"names":["svgPaths","WISE","LogoWise","WISE_BUSINESS","WISE_INVERSE","LogoWiseInverse","WISE_BUSINESS_INVERSE","WISE_PLATFORM","LogoWisePlatform","WISE_PLATFORM_INVERSE","LogoWisePlatformInverse","WISE_FLAG","LogoFlag","WISE_FLAG_INVERSE","LogoFlagInverse","WISE_FLAG_PLATFORM","LogoFlagPlatform","WISE_FLAG_PLATFORM_INVERSE","LogoFlagPlatformInverse","LogoType","labelByType","Logo","className","inverse","type","LogoSm","LogoMd","_jsxs","role","clsx","children","_jsx"],"mappings":";;;;AAaA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,IAAI,EAAEC,QAAQ;AACdC,EAAAA,aAAa,EAAED,QAAQ;AACvBE,EAAAA,YAAY,EAAEC,eAAe;AAC7BC,EAAAA,qBAAqB,EAAED,eAAe;AACtCE,EAAAA,aAAa,EAAEC,gBAAgB;AAC/BC,EAAAA,qBAAqB,EAAEC,uBAAuB;AAC9CC,EAAAA,SAAS,EAAEC,QAAQ;AACnBC,EAAAA,iBAAiB,EAAEC,eAAe;AAClCC,EAAAA,kBAAkB,EAAEC,gBAAgB;AACpCC,EAAAA,0BAA0B,EAAEC;CAC7B;IAEWC;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;AAqBpB,MAAMC,WAAW,GAAG;AAClBnB,EAAAA,IAAI,EAAE,MAAM;AACZE,EAAAA,aAAa,EAAE,eAAe;AAC9BI,EAAAA,aAAa,EAAE;CACwB;AAEzC;;;;;AAKG;AACW,SAAUc,IAAIA,CAAC;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG;AAAM,CAAa,EAAA;AAC3E,EAAA,MAAMC,MAAM,GACVzB,QAAQ,CAAC,CAAA,SAAA,EAAYwB,IAAI,KAAK,eAAe,GAAG,WAAW,GAAG,EAAE,GAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AACjG,EAAA,MAAMG,MAAM,GAAG1B,QAAQ,CAAC,CAAA,EAAGwB,IAAI,CAAA,EAAGD,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAC;AAE9D,EAAA,oBACEI,IAAA,CAAA,MAAA,EAAA;IAAM,YAAA,EAAYP,WAAW,CAACI,IAAI,CAAE;AAACI,IAAAA,IAAI,EAAC,KAAK;AAACN,IAAAA,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAE,SAAS,CAAE;IAAAQ,QAAA,EAAA,cACpFC,GAAA,CAACN,MAAM,EAAA;AAACH,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACpD,eAAAS,GAAA,CAACL,MAAM,EAAA;AAACJ,MAAAA,SAAS,EAAC;AAAkC,KAAA,CACtD;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n FastFlag,\n logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n WISE = 'WISE',\n WISE_BUSINESS = 'WISE_BUSINESS',\n WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n RESPONSIVE = 'responsive',\n COMPACT = 'compact',\n FULL = 'full',\n}\n\nexport enum LogoFormat {\n DEFAULT = 'default',\n PRIMARY_LOCKUP = 'primary-lockup',\n SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport interface LogoProps {\n /** Extra classes applied to Logo */\n className?: string;\n /**\n * Renders a light-coloured version suited for dark backgrounds.\n * @default false\n * @deprecated dark mode comes out of the box, this property has no effect\n */\n inverse?: boolean;\n /**\n * What type of logo to display\n * @default 'WISE'\n */\n type?: `${LogoType}`;\n /**\n * Controls which logo variant is shown.\n * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n * @default 'responsive'\n */\n display?: `${LogoDisplay}`;\n /**\n * Controls the format of the logo.\n * - `\"default\"`: plain Wise wordmark, no product name.\n * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n * @default 'default'\n */\n format?: `${LogoFormat}`;\n /**\n * Override default ({@link labelByType}) screen reader messages\n */\n 'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n WISE: 'Wise',\n WISE_BUSINESS: 'Wise Business',\n WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n FastFlag,\n WiseLogo,\n WiseBusinessPrimary,\n WiseBusinessSecondary,\n WisePlatformPrimary,\n WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n className,\n type = 'WISE',\n format = 'default',\n display = 'responsive',\n 'aria-label': ariaLabel,\n}: LogoProps) {\n const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n const Asset = logoAssets[assetName];\n const { width, height } = logoAssetsDimensions[assetName];\n\n return (\n <span\n className={clsx('np-logo', className)}\n role=\"img\"\n aria-label={ariaLabel ?? labelByType[type]}\n style={\n {\n '--wds-logo-width': `${width}px`,\n '--wds-logo-height': `${height}px`,\n } as React.CSSProperties\n }\n >\n <Asset />\n </span>\n );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n if (format !== 'default') {\n if (type === 'WISE_BUSINESS') {\n return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n }\n if (type === 'WISE_PLATFORM') {\n return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n }\n }\n return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":"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"}