@transferwise/components 0.0.0-experimental-70cb6d1 → 0.0.0-experimental-8bfed24
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/field/Field.js +5 -4
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +5 -4
- package/build/field/Field.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/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 +5 -4
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +5 -4
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/main.css +107 -51
- package/build/moneyInput/MoneyInput.js +12 -28
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +14 -30
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/moneyInput/currencyFormatting.js +2 -8
- package/build/moneyInput/currencyFormatting.js.map +1 -1
- package/build/moneyInput/currencyFormatting.mjs +4 -5
- package/build/moneyInput/currencyFormatting.mjs.map +1 -1
- 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 +145 -0
- package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs +143 -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/PrimitivePrompt/PrimitivePrompt.js +2 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +2 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
- package/build/prompt/common/Expander/Expander.js +47 -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 +44 -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 +22 -22
- package/build/styles/less/neptune-tokens.less +4 -4
- package/build/styles/main.css +107 -51
- package/build/styles/prompt/CriticalBanner/CriticalBanner.css +39 -0
- package/build/styles/prompt/common/Expander/Expander.css +8 -0
- package/build/styles/props/neptune-tokens.css +2 -2
- package/build/styles/styles/less/neptune.css +22 -22
- package/build/typeahead/Typeahead.js +5 -4
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +5 -4
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/index.d.ts +2 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/moneyInput/MoneyInput.d.ts +0 -6
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/moneyInput/currencyFormatting.d.ts +3 -4
- package/build/types/moneyInput/currencyFormatting.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 +40 -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/PrimitivePrompt/PrimitivePrompt.d.ts +8 -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 +16 -16
- package/src/i18n/en.json +2 -0
- package/src/index.ts +2 -2
- package/src/main.css +107 -51
- package/src/main.less +3 -1
- package/src/moneyInput/MoneyInput.story.tsx +1 -10
- package/src/moneyInput/MoneyInput.test.story.tsx +1 -141
- package/src/moneyInput/MoneyInput.test.tsx +0 -45
- package/src/moneyInput/MoneyInput.tsx +3 -27
- package/src/moneyInput/currencyFormatting.ts +5 -11
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
- package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
- package/src/prompt/CriticalBanner/CriticalBanner.css +39 -0
- package/src/prompt/CriticalBanner/CriticalBanner.less +45 -0
- package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +645 -0
- package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +304 -0
- package/src/prompt/CriticalBanner/CriticalBanner.tsx +185 -0
- package/src/prompt/CriticalBanner/helpers.ts +39 -0
- package/src/prompt/CriticalBanner/index.ts +2 -0
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +9 -2
- 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/sentimentSurface/SentimentSurface.story.tsx +43 -17
- package/src/styles/less/neptune.css +22 -22
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Helper to extract string from ReactNode for announcements.
|
|
3
|
+
* Complex ReactNodes (JSX elements) return empty string.
|
|
4
|
+
*/
|
|
5
|
+
const getStringValue = node => {
|
|
6
|
+
if (typeof node === 'string' || typeof node === 'number') {
|
|
7
|
+
return String(node);
|
|
8
|
+
}
|
|
9
|
+
return '';
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Builds the announcement string from visible content only.
|
|
13
|
+
* Content visibility depends on expanded state and presence of title.
|
|
14
|
+
*/
|
|
15
|
+
const buildAnnouncementString = ({
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
expanded,
|
|
19
|
+
actionLabel,
|
|
20
|
+
actionSecondaryLabel
|
|
21
|
+
}) => {
|
|
22
|
+
return [title ? getStringValue(title) : undefined, description && (expanded || !title) ? getStringValue(description) : undefined, expanded && actionLabel ? getStringValue(actionLabel) : undefined, expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined].filter(Boolean).join('|');
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { buildAnnouncementString, getStringValue };
|
|
26
|
+
//# sourceMappingURL=helpers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.mjs","sources":["../../../src/prompt/CriticalBanner/helpers.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\n/**\n * Helper to extract string from ReactNode for announcements.\n * Complex ReactNodes (JSX elements) return empty string.\n */\nexport const getStringValue = (node: ReactNode): string => {\n if (typeof node === 'string' || typeof node === 'number') {\n return String(node);\n }\n return '';\n};\n\n/**\n * Builds the announcement string from visible content only.\n * Content visibility depends on expanded state and presence of title.\n */\nexport const buildAnnouncementString = ({\n title,\n description,\n expanded,\n actionLabel,\n actionSecondaryLabel,\n}: {\n title?: ReactNode;\n description?: ReactNode;\n expanded: boolean;\n actionLabel?: ReactNode;\n actionSecondaryLabel?: ReactNode;\n}): string => {\n return [\n title ? getStringValue(title) : undefined,\n description && (expanded || !title) ? getStringValue(description) : undefined,\n expanded && actionLabel ? getStringValue(actionLabel) : undefined,\n expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined,\n ]\n .filter(Boolean)\n .join('|');\n};\n"],"names":["getStringValue","node","String","buildAnnouncementString","title","description","expanded","actionLabel","actionSecondaryLabel","undefined","filter","Boolean","join"],"mappings":"AAEA;;;AAGG;AACI,MAAMA,cAAc,GAAIC,IAAe,IAAY;EACxD,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IACxD,OAAOC,MAAM,CAACD,IAAI,CAAC;AACrB,EAAA;AACA,EAAA,OAAO,EAAE;AACX;AAEA;;;AAGG;AACI,MAAME,uBAAuB,GAAGA,CAAC;EACtCC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,WAAW;AACXC,EAAAA;AAAoB,CAOrB,KAAY;EACX,OAAO,CACLJ,KAAK,GAAGJ,cAAc,CAACI,KAAK,CAAC,GAAGK,SAAS,EACzCJ,WAAW,KAAKC,QAAQ,IAAI,CAACF,KAAK,CAAC,GAAGJ,cAAc,CAACK,WAAW,CAAC,GAAGI,SAAS,EAC7EH,QAAQ,IAAIC,WAAW,GAAGP,cAAc,CAACO,WAAW,CAAC,GAAGE,SAAS,EACjEH,QAAQ,IAAIE,oBAAoB,GAAGR,cAAc,CAACQ,oBAAoB,CAAC,GAAGC,SAAS,CACpF,CACEC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;AACd;;;;"}
|
|
@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
10
10
|
|
|
11
11
|
const PrimitivePrompt = ({
|
|
12
12
|
sentiment = 'success',
|
|
13
|
+
emphasis = 'base',
|
|
13
14
|
media,
|
|
14
15
|
actions,
|
|
15
16
|
onDismiss,
|
|
@@ -20,6 +21,7 @@ const PrimitivePrompt = ({
|
|
|
20
21
|
const intl = reactIntl.useIntl();
|
|
21
22
|
return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
|
|
22
23
|
sentiment: sentiment,
|
|
24
|
+
emphasis: emphasis,
|
|
23
25
|
className: clsx.clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
|
|
24
26
|
...restProps,
|
|
25
27
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme
|
|
1
|
+
{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme.\n * @default success\n */\n sentiment?: Sentiment;\n /**\n * The emphasis level affecting background and text contrast.\n * @default 'base\n */\n emphasis?: Emphasis;\n /**\n * Media to be displayed on the prompt (icon/image/etc).\n */\n media: ReactNode;\n /**\n * Any actions to be displayed on the prompt.\n */\n actions?: ReactNode;\n /**\n * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Test ID for testing tools\n */\n 'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n sentiment = 'success',\n emphasis = 'base',\n media,\n actions,\n onDismiss,\n className,\n children,\n ...restProps\n}: PrimitivePromptProps) => {\n const intl = useIntl();\n\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis={emphasis}\n className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n {...restProps}\n >\n <div\n className={clsx('wds-prompt__content-wrapper', {\n 'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n })}\n >\n <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n {children}\n {onDismiss && (\n <IconButton\n size={24}\n priority=\"secondary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onDismiss}\n >\n <Cross />\n </IconButton>\n )}\n {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n </div>\n </SentimentSurface>\n );\n};\n"],"names":["PrimitivePrompt","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;AAwCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,oBACEC,cAAA,CAACC,wBAAgB,EAAA;AACfX,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEO,SAAI,CAAC,YAAY,EAAE,eAAeZ,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbO,eAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAEO,SAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACR;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHI,cAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAEO,SAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRM,cAAA,CAACI,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEhB,SAAU;AAAAE,QAAAA,QAAA,eAEnBI,cAAA,CAACW,WAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAlB,OAAO,iBAAIO,cAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -8,6 +8,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
8
8
|
|
|
9
9
|
const PrimitivePrompt = ({
|
|
10
10
|
sentiment = 'success',
|
|
11
|
+
emphasis = 'base',
|
|
11
12
|
media,
|
|
12
13
|
actions,
|
|
13
14
|
onDismiss,
|
|
@@ -18,6 +19,7 @@ const PrimitivePrompt = ({
|
|
|
18
19
|
const intl = useIntl();
|
|
19
20
|
return /*#__PURE__*/jsx(SentimentSurface, {
|
|
20
21
|
sentiment: sentiment,
|
|
22
|
+
emphasis: emphasis,
|
|
21
23
|
className: clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
|
|
22
24
|
...restProps,
|
|
23
25
|
children: /*#__PURE__*/jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme
|
|
1
|
+
{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme.\n * @default success\n */\n sentiment?: Sentiment;\n /**\n * The emphasis level affecting background and text contrast.\n * @default 'base\n */\n emphasis?: Emphasis;\n /**\n * Media to be displayed on the prompt (icon/image/etc).\n */\n media: ReactNode;\n /**\n * Any actions to be displayed on the prompt.\n */\n actions?: ReactNode;\n /**\n * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Test ID for testing tools\n */\n 'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n sentiment = 'success',\n emphasis = 'base',\n media,\n actions,\n onDismiss,\n className,\n children,\n ...restProps\n}: PrimitivePromptProps) => {\n const intl = useIntl();\n\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis={emphasis}\n className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n {...restProps}\n >\n <div\n className={clsx('wds-prompt__content-wrapper', {\n 'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n })}\n >\n <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n {children}\n {onDismiss && (\n <IconButton\n size={24}\n priority=\"secondary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onDismiss}\n >\n <Cross />\n </IconButton>\n )}\n {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n </div>\n </SentimentSurface>\n );\n};\n"],"names":["PrimitivePrompt","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;AAwCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfX,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEO,IAAI,CAAC,YAAY,EAAE,eAAeZ,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbO,IAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAEO,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACR;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHI,GAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAEO,IAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRM,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEhB,SAAU;AAAAE,QAAAA,QAAA,eAEnBI,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAlB,OAAO,iBAAIO,GAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var icons = require('@transferwise/icons');
|
|
6
|
+
var IconButton = require('../../../iconButton/IconButton.js');
|
|
7
|
+
var reactIntl = require('react-intl');
|
|
8
|
+
var Expander_messages = require('./Expander.messages.js');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
|
|
11
|
+
// Helper for conditional rendering based on expanded state
|
|
12
|
+
function shouldShowWhenExpanded({
|
|
13
|
+
expanded,
|
|
14
|
+
hasContent,
|
|
15
|
+
alwaysShow = false
|
|
16
|
+
}) {
|
|
17
|
+
if (alwaysShow) {
|
|
18
|
+
return hasContent;
|
|
19
|
+
}
|
|
20
|
+
return expanded && hasContent;
|
|
21
|
+
}
|
|
22
|
+
// Reusable toggle button component
|
|
23
|
+
const ExpanderToggle = ({
|
|
24
|
+
expanded,
|
|
25
|
+
onToggle,
|
|
26
|
+
size = 24,
|
|
27
|
+
className,
|
|
28
|
+
'data-testid': testId
|
|
29
|
+
}) => {
|
|
30
|
+
const intl = reactIntl.useIntl();
|
|
31
|
+
return /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
32
|
+
size: size,
|
|
33
|
+
priority: "secondary",
|
|
34
|
+
"aria-label": intl.formatMessage(expanded ? Expander_messages.default.collapseAriaLabel : Expander_messages.default.expandAriaLabel),
|
|
35
|
+
"aria-expanded": expanded,
|
|
36
|
+
className: clsx.clsx('wds-expander-toggle', {
|
|
37
|
+
'wds-expander-toggle--collapsed': !expanded
|
|
38
|
+
}, className),
|
|
39
|
+
"data-testid": testId,
|
|
40
|
+
onClick: onToggle,
|
|
41
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronUp, {})
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.ExpanderToggle = ExpanderToggle;
|
|
46
|
+
exports.shouldShowWhenExpanded = shouldShowWhenExpanded;
|
|
47
|
+
//# sourceMappingURL=Expander.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.js","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\nimport messages from './Expander.messages';\n\nexport type ExpanderState = {\n expanded: boolean;\n toggle: () => void;\n setExpanded: (expanded: boolean) => void;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n const [expanded, setExpanded] = useState(initialExpanded);\n\n const toggle = useCallback(() => {\n setExpanded((prev) => !prev);\n }, []);\n\n return {\n expanded,\n toggle,\n setExpanded,\n };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n expanded,\n hasContent,\n alwaysShow = false,\n}: {\n expanded: boolean;\n hasContent: boolean;\n alwaysShow?: boolean;\n}): boolean {\n if (alwaysShow) {\n return hasContent;\n }\n\n return expanded && hasContent;\n}\n\nexport type ExpanderToggleProps = {\n expanded: boolean;\n onToggle?: () => void;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n className?: string;\n 'data-testid'?: string;\n};\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n expanded,\n onToggle,\n size = 24,\n className,\n 'data-testid': testId,\n}: ExpanderToggleProps) => {\n const intl = useIntl();\n\n return (\n <IconButton\n size={size}\n priority=\"secondary\"\n aria-label={intl.formatMessage(\n expanded ? messages.collapseAriaLabel : messages.expandAriaLabel,\n )}\n aria-expanded={expanded}\n className={clsx(\n 'wds-expander-toggle',\n { 'wds-expander-toggle--collapsed': !expanded },\n className,\n )}\n data-testid={testId}\n onClick={onToggle}\n >\n <ChevronUp />\n </IconButton>\n );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","className","testId","intl","useIntl","_jsx","IconButton","priority","formatMessage","messages","collapseAriaLabel","expandAriaLabel","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;;;;;AA4BA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAUA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,oBACEC,cAAA,CAACC,kBAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYJ,IAAI,CAACK,aAAa,CAC5Bb,QAAQ,GAAGc,yBAAQ,CAACC,iBAAiB,GAAGD,yBAAQ,CAACE,eAAe,CAChE;AACF,IAAA,eAAA,EAAehB,QAAS;AACxBM,IAAAA,SAAS,EAAEW,SAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACjB;KAAU,EAC/CM,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBW,IAAAA,OAAO,EAAEd,QAAS;AAAAe,IAAAA,QAAA,eAElBT,cAAA,CAACU,eAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var reactIntl = require('react-intl');
|
|
6
|
+
|
|
7
|
+
var messages = reactIntl.defineMessages({
|
|
8
|
+
expandAriaLabel: {
|
|
9
|
+
id: "neptune.Expander.expandAriaLabel"
|
|
10
|
+
},
|
|
11
|
+
collapseAriaLabel: {
|
|
12
|
+
id: "neptune.Expander.collapseAriaLabel"
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
exports.default = messages;
|
|
17
|
+
//# sourceMappingURL=Expander.messages.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.messages.js","sources":["../../../../src/prompt/common/Expander/Expander.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n expandAriaLabel: {\n id: 'neptune.Expander.expandAriaLabel',\n defaultMessage: 'Expand',\n description: 'Expand button for expander',\n },\n collapseAriaLabel: {\n id: 'neptune.Expander.collapseAriaLabel',\n defaultMessage: 'Collapse',\n description: 'Collapse button for expander',\n },\n});\n"],"names":["defineMessages","expandAriaLabel","id","collapseAriaLabel"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,eAAe,EAAE;IACfC,EAAE,EAAA;GAGH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { defineMessages } from 'react-intl';
|
|
2
|
+
|
|
3
|
+
var messages = defineMessages({
|
|
4
|
+
expandAriaLabel: {
|
|
5
|
+
id: "neptune.Expander.expandAriaLabel"
|
|
6
|
+
},
|
|
7
|
+
collapseAriaLabel: {
|
|
8
|
+
id: "neptune.Expander.collapseAriaLabel"
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
export { messages as default };
|
|
13
|
+
//# sourceMappingURL=Expander.messages.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.messages.mjs","sources":["../../../../src/prompt/common/Expander/Expander.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n expandAriaLabel: {\n id: 'neptune.Expander.expandAriaLabel',\n defaultMessage: 'Expand',\n description: 'Expand button for expander',\n },\n collapseAriaLabel: {\n id: 'neptune.Expander.collapseAriaLabel',\n defaultMessage: 'Collapse',\n description: 'Collapse button for expander',\n },\n});\n"],"names":["defineMessages","expandAriaLabel","id","collapseAriaLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,eAAe,EAAE;IACfC,EAAE,EAAA;GAGH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { ChevronUp } from '@transferwise/icons';
|
|
4
|
+
import IconButton from '../../../iconButton/IconButton.mjs';
|
|
5
|
+
import { useIntl } from 'react-intl';
|
|
6
|
+
import messages from './Expander.messages.mjs';
|
|
7
|
+
import { jsx } from 'react/jsx-runtime';
|
|
8
|
+
|
|
9
|
+
// Helper for conditional rendering based on expanded state
|
|
10
|
+
function shouldShowWhenExpanded({
|
|
11
|
+
expanded,
|
|
12
|
+
hasContent,
|
|
13
|
+
alwaysShow = false
|
|
14
|
+
}) {
|
|
15
|
+
if (alwaysShow) {
|
|
16
|
+
return hasContent;
|
|
17
|
+
}
|
|
18
|
+
return expanded && hasContent;
|
|
19
|
+
}
|
|
20
|
+
// Reusable toggle button component
|
|
21
|
+
const ExpanderToggle = ({
|
|
22
|
+
expanded,
|
|
23
|
+
onToggle,
|
|
24
|
+
size = 24,
|
|
25
|
+
className,
|
|
26
|
+
'data-testid': testId
|
|
27
|
+
}) => {
|
|
28
|
+
const intl = useIntl();
|
|
29
|
+
return /*#__PURE__*/jsx(IconButton, {
|
|
30
|
+
size: size,
|
|
31
|
+
priority: "secondary",
|
|
32
|
+
"aria-label": intl.formatMessage(expanded ? messages.collapseAriaLabel : messages.expandAriaLabel),
|
|
33
|
+
"aria-expanded": expanded,
|
|
34
|
+
className: clsx('wds-expander-toggle', {
|
|
35
|
+
'wds-expander-toggle--collapsed': !expanded
|
|
36
|
+
}, className),
|
|
37
|
+
"data-testid": testId,
|
|
38
|
+
onClick: onToggle,
|
|
39
|
+
children: /*#__PURE__*/jsx(ChevronUp, {})
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export { ExpanderToggle, shouldShowWhenExpanded };
|
|
44
|
+
//# sourceMappingURL=Expander.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.mjs","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\nimport messages from './Expander.messages';\n\nexport type ExpanderState = {\n expanded: boolean;\n toggle: () => void;\n setExpanded: (expanded: boolean) => void;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n const [expanded, setExpanded] = useState(initialExpanded);\n\n const toggle = useCallback(() => {\n setExpanded((prev) => !prev);\n }, []);\n\n return {\n expanded,\n toggle,\n setExpanded,\n };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n expanded,\n hasContent,\n alwaysShow = false,\n}: {\n expanded: boolean;\n hasContent: boolean;\n alwaysShow?: boolean;\n}): boolean {\n if (alwaysShow) {\n return hasContent;\n }\n\n return expanded && hasContent;\n}\n\nexport type ExpanderToggleProps = {\n expanded: boolean;\n onToggle?: () => void;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n className?: string;\n 'data-testid'?: string;\n};\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n expanded,\n onToggle,\n size = 24,\n className,\n 'data-testid': testId,\n}: ExpanderToggleProps) => {\n const intl = useIntl();\n\n return (\n <IconButton\n size={size}\n priority=\"secondary\"\n aria-label={intl.formatMessage(\n expanded ? messages.collapseAriaLabel : messages.expandAriaLabel,\n )}\n aria-expanded={expanded}\n className={clsx(\n 'wds-expander-toggle',\n { 'wds-expander-toggle--collapsed': !expanded },\n className,\n )}\n data-testid={testId}\n onClick={onToggle}\n >\n <ChevronUp />\n </IconButton>\n );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","className","testId","intl","useIntl","_jsx","IconButton","priority","formatMessage","messages","collapseAriaLabel","expandAriaLabel","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;;;AA4BA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAUA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYJ,IAAI,CAACK,aAAa,CAC5Bb,QAAQ,GAAGc,QAAQ,CAACC,iBAAiB,GAAGD,QAAQ,CAACE,eAAe,CAChE;AACF,IAAA,eAAA,EAAehB,QAAS;AACxBM,IAAAA,SAAS,EAAEW,IAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACjB;KAAU,EAC/CM,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBW,IAAAA,OAAO,EAAEd,QAAS;AAAAe,IAAAA,QAAA,eAElBT,GAAA,CAACU,SAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var icons = require('@transferwise/icons');
|
|
4
|
+
var AvatarView = require('../../avatarView/AvatarView.js');
|
|
5
|
+
var Image = require('../../image/Image.js');
|
|
6
|
+
var StatusIcon = require('../../statusIcon/StatusIcon.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function renderPromptMedia({
|
|
10
|
+
media,
|
|
11
|
+
sentiment,
|
|
12
|
+
mediaId,
|
|
13
|
+
imgClassName
|
|
14
|
+
}) {
|
|
15
|
+
if (media?.imgSrc) {
|
|
16
|
+
return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
|
|
17
|
+
id: mediaId,
|
|
18
|
+
src: media.imgSrc,
|
|
19
|
+
className: imgClassName,
|
|
20
|
+
alt: media['aria-label'] ?? ''
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
if (media?.avatar) {
|
|
24
|
+
const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
|
|
25
|
+
status: sentiment
|
|
26
|
+
};
|
|
27
|
+
return /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
28
|
+
...media.avatar,
|
|
29
|
+
badge: badge,
|
|
30
|
+
"aria-label": media['aria-label'],
|
|
31
|
+
"aria-hidden": media['aria-hidden'],
|
|
32
|
+
id: mediaId,
|
|
33
|
+
size: 48,
|
|
34
|
+
children: media.avatar.asset
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
38
|
+
id: mediaId,
|
|
39
|
+
size: 48,
|
|
40
|
+
"aria-label": media['aria-label'],
|
|
41
|
+
"aria-hidden": media['aria-hidden'],
|
|
42
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
|
|
43
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
|
|
44
|
+
id: mediaId,
|
|
45
|
+
size: 48,
|
|
46
|
+
sentiment: sentiment,
|
|
47
|
+
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
exports.renderPromptMedia = renderPromptMedia;
|
|
52
|
+
//# sourceMappingURL=promptMedia.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"promptMedia.js","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n media: PromptMedia;\n sentiment: PrimitivePromptProps['sentiment'];\n mediaId: string;\n imgClassName: string;\n};\n\nexport function renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className={imgClassName}\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,cAAA,CAACC,aAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,cAAA,CAACS,kBAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,cAAA,CAACS,kBAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,cAAA,CAACa,aAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,cAAA,CAACc,kBAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { GiftBox } from '@transferwise/icons';
|
|
2
|
+
import AvatarView from '../../avatarView/AvatarView.mjs';
|
|
3
|
+
import Image from '../../image/Image.mjs';
|
|
4
|
+
import StatusIcon from '../../statusIcon/StatusIcon.mjs';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function renderPromptMedia({
|
|
8
|
+
media,
|
|
9
|
+
sentiment,
|
|
10
|
+
mediaId,
|
|
11
|
+
imgClassName
|
|
12
|
+
}) {
|
|
13
|
+
if (media?.imgSrc) {
|
|
14
|
+
return /*#__PURE__*/jsx(Image, {
|
|
15
|
+
id: mediaId,
|
|
16
|
+
src: media.imgSrc,
|
|
17
|
+
className: imgClassName,
|
|
18
|
+
alt: media['aria-label'] ?? ''
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
if (media?.avatar) {
|
|
22
|
+
const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
|
|
23
|
+
status: sentiment
|
|
24
|
+
};
|
|
25
|
+
return /*#__PURE__*/jsx(AvatarView, {
|
|
26
|
+
...media.avatar,
|
|
27
|
+
badge: badge,
|
|
28
|
+
"aria-label": media['aria-label'],
|
|
29
|
+
"aria-hidden": media['aria-hidden'],
|
|
30
|
+
id: mediaId,
|
|
31
|
+
size: 48,
|
|
32
|
+
children: media.avatar.asset
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
|
|
36
|
+
id: mediaId,
|
|
37
|
+
size: 48,
|
|
38
|
+
"aria-label": media['aria-label'],
|
|
39
|
+
"aria-hidden": media['aria-hidden'],
|
|
40
|
+
children: /*#__PURE__*/jsx(GiftBox, {})
|
|
41
|
+
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
42
|
+
id: mediaId,
|
|
43
|
+
size: 48,
|
|
44
|
+
sentiment: sentiment,
|
|
45
|
+
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { renderPromptMedia };
|
|
50
|
+
//# sourceMappingURL=promptMedia.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"promptMedia.mjs","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n media: PromptMedia;\n sentiment: PrimitivePromptProps['sentiment'];\n mediaId: string;\n imgClassName: string;\n};\n\nexport function renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className={imgClassName}\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,GAAA,CAACC,KAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,GAAA,CAACS,UAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,GAAA,CAACS,UAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,GAAA,CAACa,OAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,GAAA,CAACc,UAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -142,8 +142,8 @@
|
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
/**
|
|
145
|
-
* Do not edit directly
|
|
146
|
-
* Generated on
|
|
145
|
+
* Do not edit directly
|
|
146
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
147
147
|
*/
|
|
148
148
|
|
|
149
149
|
.np-theme-personal {
|
|
@@ -391,8 +391,8 @@
|
|
|
391
391
|
}
|
|
392
392
|
|
|
393
393
|
/**
|
|
394
|
-
* Do not edit directly
|
|
395
|
-
* Generated on
|
|
394
|
+
* Do not edit directly
|
|
395
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
396
396
|
*/
|
|
397
397
|
|
|
398
398
|
.np-theme-personal--forest-green {
|
|
@@ -640,8 +640,8 @@
|
|
|
640
640
|
}
|
|
641
641
|
|
|
642
642
|
/**
|
|
643
|
-
* Do not edit directly
|
|
644
|
-
* Generated on
|
|
643
|
+
* Do not edit directly
|
|
644
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
645
645
|
*/
|
|
646
646
|
|
|
647
647
|
.np-theme-personal--bright-green {
|
|
@@ -889,8 +889,8 @@
|
|
|
889
889
|
}
|
|
890
890
|
|
|
891
891
|
/**
|
|
892
|
-
* Do not edit directly
|
|
893
|
-
* Generated on
|
|
892
|
+
* Do not edit directly
|
|
893
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
894
894
|
*/
|
|
895
895
|
|
|
896
896
|
.np-theme-personal--dark {
|
|
@@ -1138,8 +1138,8 @@
|
|
|
1138
1138
|
}
|
|
1139
1139
|
|
|
1140
1140
|
/**
|
|
1141
|
-
* Do not edit directly
|
|
1142
|
-
* Generated on
|
|
1141
|
+
* Do not edit directly
|
|
1142
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1143
1143
|
*/
|
|
1144
1144
|
|
|
1145
1145
|
.np-theme-platform {
|
|
@@ -1321,8 +1321,8 @@
|
|
|
1321
1321
|
}
|
|
1322
1322
|
|
|
1323
1323
|
/**
|
|
1324
|
-
* Do not edit directly
|
|
1325
|
-
* Generated on
|
|
1324
|
+
* Do not edit directly
|
|
1325
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1326
1326
|
*/
|
|
1327
1327
|
|
|
1328
1328
|
.np-theme-platform--forest-green {
|
|
@@ -1504,8 +1504,8 @@
|
|
|
1504
1504
|
}
|
|
1505
1505
|
|
|
1506
1506
|
/**
|
|
1507
|
-
* Do not edit directly
|
|
1508
|
-
* Generated on
|
|
1507
|
+
* Do not edit directly
|
|
1508
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1509
1509
|
*/
|
|
1510
1510
|
|
|
1511
1511
|
.np-theme-business {
|
|
@@ -1688,8 +1688,8 @@
|
|
|
1688
1688
|
}
|
|
1689
1689
|
|
|
1690
1690
|
/**
|
|
1691
|
-
* Do not edit directly
|
|
1692
|
-
* Generated on
|
|
1691
|
+
* Do not edit directly
|
|
1692
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1693
1693
|
*/
|
|
1694
1694
|
|
|
1695
1695
|
.np-theme-business--dark {
|
|
@@ -1872,8 +1872,8 @@
|
|
|
1872
1872
|
}
|
|
1873
1873
|
|
|
1874
1874
|
/**
|
|
1875
|
-
* Do not edit directly
|
|
1876
|
-
* Generated on
|
|
1875
|
+
* Do not edit directly
|
|
1876
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1877
1877
|
*/
|
|
1878
1878
|
|
|
1879
1879
|
.np-theme-business--forest-green {
|
|
@@ -2056,8 +2056,8 @@
|
|
|
2056
2056
|
}
|
|
2057
2057
|
|
|
2058
2058
|
/**
|
|
2059
|
-
* Do not edit directly
|
|
2060
|
-
* Generated on
|
|
2059
|
+
* Do not edit directly
|
|
2060
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
2061
2061
|
*/
|
|
2062
2062
|
|
|
2063
2063
|
.np-theme-business--bright-green {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
4
4
|
|
|
5
5
|
@color-dark-content-primary: #e2e6e8;
|
|
6
6
|
@color-dark-content-secondary: #c9cbce;
|
|
@@ -220,8 +220,8 @@
|
|
|
220
220
|
@font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
|
|
221
221
|
@font-family-display: 'Wise Sans', 'Inter', sans-serif;
|
|
222
222
|
|
|
223
|
-
// Do not edit directly
|
|
224
|
-
// Generated on
|
|
223
|
+
// Do not edit directly
|
|
224
|
+
// Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
225
225
|
|
|
226
226
|
@color-base-blue-light: #00b9ff;
|
|
227
227
|
@color-base-blue-mid: #00a2dd;
|