@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.
- package/build/common/hooks/useContainerSize.js +30 -0
- package/build/common/hooks/useContainerSize.js.map +1 -0
- package/build/common/hooks/useContainerSize.mjs +28 -0
- package/build/common/hooks/useContainerSize.mjs.map +1 -0
- package/build/common/hooks/useResizeObserver.js +3 -3
- package/build/common/hooks/useResizeObserver.js.map +1 -1
- package/build/common/hooks/useResizeObserver.mjs +3 -3
- package/build/common/hooks/useResizeObserver.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +3 -0
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +3 -0
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/field/Field.js +3 -2
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +3 -2
- package/build/field/Field.mjs.map +1 -1
- package/build/i18n/cs.json +2 -0
- package/build/i18n/cs.json.js +2 -0
- package/build/i18n/cs.json.js.map +1 -1
- package/build/i18n/cs.json.mjs +2 -0
- package/build/i18n/cs.json.mjs.map +1 -1
- package/build/i18n/de.json +2 -0
- package/build/i18n/de.json.js +2 -0
- package/build/i18n/de.json.js.map +1 -1
- package/build/i18n/de.json.mjs +2 -0
- package/build/i18n/de.json.mjs.map +1 -1
- package/build/i18n/en.json +2 -0
- package/build/i18n/en.json.js +2 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +2 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/i18n/es.json +2 -0
- package/build/i18n/es.json.js +2 -0
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/es.json.mjs +2 -0
- package/build/i18n/es.json.mjs.map +1 -1
- package/build/i18n/fr.json +2 -0
- package/build/i18n/fr.json.js +2 -0
- package/build/i18n/fr.json.js.map +1 -1
- package/build/i18n/fr.json.mjs +2 -0
- package/build/i18n/fr.json.mjs.map +1 -1
- package/build/i18n/hu.json +2 -0
- package/build/i18n/hu.json.js +2 -0
- package/build/i18n/hu.json.js.map +1 -1
- package/build/i18n/hu.json.mjs +2 -0
- package/build/i18n/hu.json.mjs.map +1 -1
- package/build/i18n/id.json +2 -0
- package/build/i18n/id.json.js +2 -0
- package/build/i18n/id.json.js.map +1 -1
- package/build/i18n/id.json.mjs +2 -0
- package/build/i18n/id.json.mjs.map +1 -1
- package/build/i18n/it.json +2 -0
- package/build/i18n/it.json.js +2 -0
- package/build/i18n/it.json.js.map +1 -1
- package/build/i18n/it.json.mjs +2 -0
- package/build/i18n/it.json.mjs.map +1 -1
- package/build/i18n/ja.json +2 -0
- package/build/i18n/ja.json.js +2 -0
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/ja.json.mjs +2 -0
- package/build/i18n/ja.json.mjs.map +1 -1
- package/build/i18n/nl.json +2 -0
- package/build/i18n/nl.json.js +2 -0
- package/build/i18n/nl.json.js.map +1 -1
- package/build/i18n/nl.json.mjs +2 -0
- package/build/i18n/nl.json.mjs.map +1 -1
- package/build/i18n/pl.json +2 -0
- package/build/i18n/pl.json.js +2 -0
- package/build/i18n/pl.json.js.map +1 -1
- package/build/i18n/pl.json.mjs +2 -0
- package/build/i18n/pl.json.mjs.map +1 -1
- package/build/i18n/pt.json +2 -0
- package/build/i18n/pt.json.js +2 -0
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/pt.json.mjs +2 -0
- package/build/i18n/pt.json.mjs.map +1 -1
- package/build/i18n/ro.json +2 -0
- package/build/i18n/ro.json.js +2 -0
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ro.json.mjs +2 -0
- package/build/i18n/ro.json.mjs.map +1 -1
- package/build/i18n/ru.json +2 -0
- package/build/i18n/ru.json.js +2 -0
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/ru.json.mjs +2 -0
- package/build/i18n/ru.json.mjs.map +1 -1
- package/build/i18n/th.json +2 -0
- package/build/i18n/th.json.js +2 -0
- package/build/i18n/th.json.js.map +1 -1
- package/build/i18n/th.json.mjs +2 -0
- package/build/i18n/th.json.mjs.map +1 -1
- package/build/i18n/tr.json +2 -0
- package/build/i18n/tr.json.js +2 -0
- package/build/i18n/tr.json.js.map +1 -1
- package/build/i18n/tr.json.mjs +2 -0
- package/build/i18n/tr.json.mjs.map +1 -1
- package/build/i18n/zh-CN.json +2 -0
- package/build/i18n/zh-CN.json.js +2 -0
- package/build/i18n/zh-CN.json.js.map +1 -1
- package/build/i18n/zh-CN.json.mjs +2 -0
- package/build/i18n/zh-CN.json.mjs.map +1 -1
- package/build/i18n/zh-HK.json +2 -0
- package/build/i18n/zh-HK.json.js +2 -0
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/i18n/zh-HK.json.mjs +2 -0
- package/build/i18n/zh-HK.json.mjs.map +1 -1
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +3 -2
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +3 -2
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/logo/Logo.js +77 -25
- package/build/logo/Logo.js.map +1 -1
- package/build/logo/Logo.mjs +79 -27
- package/build/logo/Logo.mjs.map +1 -1
- package/build/logo/logo-assets.js +68 -97
- package/build/logo/logo-assets.js.map +1 -1
- package/build/logo/logo-assets.mjs +62 -90
- package/build/logo/logo-assets.mjs.map +1 -1
- package/build/main.css +225 -59
- package/build/prompt/ActionPrompt/ActionPrompt.js +8 -40
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -40
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/CriticalBanner/CriticalBanner.js +143 -0
- package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs +141 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
- package/build/prompt/CriticalBanner/helpers.js +29 -0
- package/build/prompt/CriticalBanner/helpers.js.map +1 -0
- package/build/prompt/CriticalBanner/helpers.mjs +26 -0
- package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
- package/build/prompt/InfoPrompt/InfoPrompt.js +3 -2
- package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs +3 -2
- package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +11 -4
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +11 -4
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
- package/build/prompt/common/Expander/Expander.js +35 -0
- package/build/prompt/common/Expander/Expander.js.map +1 -0
- package/build/prompt/common/Expander/Expander.messages.js +17 -0
- package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
- package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
- package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
- package/build/prompt/common/Expander/Expander.mjs +33 -0
- package/build/prompt/common/Expander/Expander.mjs.map +1 -0
- package/build/prompt/helpers/promptMedia.js +52 -0
- package/build/prompt/helpers/promptMedia.js.map +1 -0
- package/build/prompt/helpers/promptMedia.mjs +50 -0
- package/build/prompt/helpers/promptMedia.mjs.map +1 -0
- package/build/styles/css/neptune.css +0 -1
- package/build/styles/logo/Logo.css +3 -23
- package/build/styles/main.css +225 -59
- package/build/styles/prompt/CriticalBanner/CriticalBanner.css +134 -0
- package/build/styles/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
- package/build/styles/prompt/InfoPrompt/InfoPrompt.css +24 -0
- package/build/styles/prompt/common/Expander/Expander.css +8 -0
- package/build/styles/styles/less/neptune.css +0 -1
- package/build/typeahead/Typeahead.js +3 -2
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +3 -2
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/common/hooks/useContainerSize.d.ts +14 -0
- package/build/types/common/hooks/useContainerSize.d.ts.map +1 -0
- package/build/types/common/hooks/useResizeObserver.d.ts +1 -1
- package/build/types/common/hooks/useResizeObserver.d.ts.map +1 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts +3 -0
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/index.d.ts +2 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts +33 -1
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/build/types/logo/logo-assets.d.ts +33 -9
- package/build/types/logo/logo-assets.d.ts.map +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +39 -0
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
- package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
- package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
- package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
- package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
- package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +35 -3
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
- package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
- package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
- package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
- package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
- package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
- package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
- package/build/types/prompt/index.d.ts +2 -0
- package/build/types/prompt/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +4 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +22 -18
- package/src/alert/Alert.story.tsx +30 -1
- package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
- package/src/button/_stories/Button.story.tsx +11 -0
- package/src/common/hooks/useContainerSize.test.tsx +125 -0
- package/src/common/hooks/useContainerSize.ts +32 -0
- package/src/common/hooks/useResizeObserver.ts +3 -2
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +4 -0
- package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +1 -1
- package/src/criticalBanner/CriticalCommsBanner.tsx +3 -0
- package/src/i18n/cs.json +2 -0
- package/src/i18n/de.json +2 -0
- package/src/i18n/en.json +2 -0
- package/src/i18n/es.json +2 -0
- package/src/i18n/fr.json +2 -0
- package/src/i18n/hu.json +2 -0
- package/src/i18n/id.json +2 -0
- package/src/i18n/it.json +2 -0
- package/src/i18n/ja.json +2 -0
- package/src/i18n/nl.json +2 -0
- package/src/i18n/pl.json +2 -0
- package/src/i18n/pt.json +2 -0
- package/src/i18n/ro.json +2 -0
- package/src/i18n/ru.json +2 -0
- package/src/i18n/th.json +2 -0
- package/src/i18n/tr.json +2 -0
- package/src/i18n/zh-CN.json +2 -0
- package/src/i18n/zh-HK.json +2 -0
- package/src/index.ts +2 -2
- package/src/logo/Logo.css +3 -23
- package/src/logo/Logo.less +3 -29
- package/src/logo/Logo.story.tsx +117 -89
- package/src/logo/Logo.test.story.tsx +15 -24
- package/src/logo/Logo.tsx +90 -28
- package/src/logo/logo-assets.tsx +36 -92
- package/src/main.css +225 -59
- package/src/main.less +3 -1
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
- package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +113 -0
- package/src/prompt/CriticalBanner/CriticalBanner.css +134 -0
- package/src/prompt/CriticalBanner/CriticalBanner.less +155 -0
- package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +635 -0
- package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +422 -0
- package/src/prompt/CriticalBanner/CriticalBanner.tsx +179 -0
- package/src/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
- package/src/prompt/CriticalBanner/CriticalBanner.vars.less +6 -0
- package/src/prompt/CriticalBanner/helpers.ts +39 -0
- package/src/prompt/CriticalBanner/index.ts +2 -0
- package/src/prompt/InfoPrompt/InfoPrompt.css +24 -0
- package/src/prompt/InfoPrompt/InfoPrompt.less +23 -0
- package/src/prompt/InfoPrompt/InfoPrompt.tsx +5 -1
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +56 -40
- package/src/prompt/common/Expander/Expander.css +8 -0
- package/src/prompt/common/Expander/Expander.less +9 -0
- package/src/prompt/common/Expander/Expander.messages.ts +14 -0
- package/src/prompt/common/Expander/Expander.test.tsx +167 -0
- package/src/prompt/common/Expander/Expander.tsx +83 -0
- package/src/prompt/helpers/promptMedia.tsx +79 -0
- package/src/prompt/index.ts +4 -0
- package/src/radio/Radio.story.tsx +1 -1
- package/src/section/Section.story.tsx +2 -8
- package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
- package/src/statusIcon/StatusIcon.test.tsx +0 -2
- 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":"
|
|
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;;;;"}
|
package/build/logo/Logo.js
CHANGED
|
@@ -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
|
-
|
|
41
|
-
|
|
73
|
+
type = 'WISE',
|
|
74
|
+
format = 'default',
|
|
75
|
+
display = 'responsive',
|
|
76
|
+
'aria-label': ariaLabel
|
|
42
77
|
}) {
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
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
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
package/build/logo/Logo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n
|
|
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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"}
|
package/build/logo/Logo.mjs
CHANGED
|
@@ -1,30 +1,63 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
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
|
-
|
|
37
|
-
|
|
69
|
+
type = 'WISE',
|
|
70
|
+
format = 'default',
|
|
71
|
+
display = 'responsive',
|
|
72
|
+
'aria-label': ariaLabel
|
|
38
73
|
}) {
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
package/build/logo/Logo.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBYA;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;IAMRC;AAAZ,CAAA,UAAYA,WAAW,EAAA;AACrBA,EAAAA,WAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzBA,EAAAA,WAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJWA,WAAW,KAAXA,WAAW,GAAA,EAAA,CAAA,CAAA;IAMXC;AAAZ,CAAA,UAAYA,UAAU,EAAA;AACpBA,EAAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,UAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC;AACjCA,EAAAA,UAAA,CAAA,kBAAA,CAAA,GAAA,kBAAqC;AACvC,CAAC,EAJWA,UAAU,KAAVA,UAAU,GAAA,EAAA,CAAA,CAAA;AA0CtB,MAAMC,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,aAAa,EAAE;CACwB;AAEzC,MAAMC,UAAU,GAA6C;EAC3DC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;AACnBC,EAAAA;CACD;AAED;;;;;AAKG;AACW,SAAUC,IAAIA,CAAC;EAC3BC,SAAS;AACTC,EAAAA,IAAI,GAAG,MAAM;AACbC,EAAAA,MAAM,GAAG,SAAS;AAClBC,EAAAA,OAAO,GAAG,YAAY;AACtB,EAAA,YAAY,EAAEC;AAAS,CACb,EAAA;EACV,MAAMC,UAAU,GAAG,CAACC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;EACnD,MAAMC,OAAO,GAAGN,OAAO,KAAK,SAAS,IAAKA,OAAO,KAAK,YAAY,IAAIE,UAAW;EAEjF,MAAMK,SAAS,GAAGD,OAAO,GAAG,UAAU,GAAGE,YAAY,CAACV,IAAI,EAAEC,MAAM,CAAC;AACnE,EAAA,MAAMU,KAAK,GAAGpB,UAAU,CAACkB,SAAS,CAAC;EACnC,MAAM;IAAEG,KAAK;AAAEC,IAAAA;AAAM,GAAE,GAAGC,oBAAoB,CAACL,SAAS,CAAC;AAEzD,EAAA,oBACEM,GAAA,CAAA,MAAA,EAAA;AACEhB,IAAAA,SAAS,EAAEiB,IAAI,CAAC,SAAS,EAAEjB,SAAS,CAAE;AACtCkB,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYd,SAAS,IAAIhB,WAAW,CAACa,IAAI,CAAE;AAC3CkB,IAAAA,KAAK,EACH;MACE,kBAAkB,EAAE,CAAA,EAAGN,KAAK,CAAA,EAAA,CAAI;MAChC,mBAAmB,EAAE,GAAGC,MAAM,CAAA,EAAA;KAEjC;AAAAM,IAAAA,QAAA,eAEDJ,GAAA,CAACJ,KAAK,EAAA,EAAA;AACR,GAAM,CAAC;AAEX;AAEA,SAASD,YAAYA,CAACV,IAAmB,EAAEC,MAAuB,EAAA;EAChE,IAAIA,MAAM,KAAK,SAAS,EAAE;IACxB,IAAID,IAAI,KAAK,eAAe,EAAE;AAC5B,MAAA,OAAOC,MAAM,KAAK,kBAAkB,GAAG,uBAAuB,GAAG,qBAAqB;AACxF,IAAA;IACA,IAAID,IAAI,KAAK,eAAe,EAAE;AAC5B,MAAA,OAAOC,MAAM,KAAK,kBAAkB,GAAG,uBAAuB,GAAG,qBAAqB;AACxF,IAAA;AACF,EAAA;AACA,EAAA,OAAO,UAAU;AACnB;;;;"}
|