@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.
Files changed (120) hide show
  1. package/build/field/Field.js +5 -4
  2. package/build/field/Field.js.map +1 -1
  3. package/build/field/Field.mjs +5 -4
  4. package/build/field/Field.mjs.map +1 -1
  5. package/build/i18n/en.json +2 -0
  6. package/build/i18n/en.json.js +2 -0
  7. package/build/i18n/en.json.js.map +1 -1
  8. package/build/i18n/en.json.mjs +2 -0
  9. package/build/i18n/en.json.mjs.map +1 -1
  10. package/build/index.js +2 -0
  11. package/build/index.js.map +1 -1
  12. package/build/index.mjs +1 -0
  13. package/build/index.mjs.map +1 -1
  14. package/build/listItem/Prompt/ListItemPrompt.js +5 -4
  15. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  16. package/build/listItem/Prompt/ListItemPrompt.mjs +5 -4
  17. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  18. package/build/main.css +107 -51
  19. package/build/moneyInput/MoneyInput.js +12 -28
  20. package/build/moneyInput/MoneyInput.js.map +1 -1
  21. package/build/moneyInput/MoneyInput.mjs +14 -30
  22. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  23. package/build/moneyInput/currencyFormatting.js +2 -8
  24. package/build/moneyInput/currencyFormatting.js.map +1 -1
  25. package/build/moneyInput/currencyFormatting.mjs +4 -5
  26. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  27. package/build/prompt/ActionPrompt/ActionPrompt.js +8 -40
  28. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  29. package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -40
  30. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  31. package/build/prompt/CriticalBanner/CriticalBanner.js +145 -0
  32. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
  33. package/build/prompt/CriticalBanner/CriticalBanner.mjs +143 -0
  34. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
  35. package/build/prompt/CriticalBanner/helpers.js +29 -0
  36. package/build/prompt/CriticalBanner/helpers.js.map +1 -0
  37. package/build/prompt/CriticalBanner/helpers.mjs +26 -0
  38. package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
  39. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +2 -0
  40. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
  41. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +2 -0
  42. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
  43. package/build/prompt/common/Expander/Expander.js +47 -0
  44. package/build/prompt/common/Expander/Expander.js.map +1 -0
  45. package/build/prompt/common/Expander/Expander.messages.js +17 -0
  46. package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
  47. package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
  48. package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
  49. package/build/prompt/common/Expander/Expander.mjs +44 -0
  50. package/build/prompt/common/Expander/Expander.mjs.map +1 -0
  51. package/build/prompt/helpers/promptMedia.js +52 -0
  52. package/build/prompt/helpers/promptMedia.js.map +1 -0
  53. package/build/prompt/helpers/promptMedia.mjs +50 -0
  54. package/build/prompt/helpers/promptMedia.mjs.map +1 -0
  55. package/build/styles/css/neptune.css +22 -22
  56. package/build/styles/less/neptune-tokens.less +4 -4
  57. package/build/styles/main.css +107 -51
  58. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +39 -0
  59. package/build/styles/prompt/common/Expander/Expander.css +8 -0
  60. package/build/styles/props/neptune-tokens.css +2 -2
  61. package/build/styles/styles/less/neptune.css +22 -22
  62. package/build/typeahead/Typeahead.js +5 -4
  63. package/build/typeahead/Typeahead.js.map +1 -1
  64. package/build/typeahead/Typeahead.mjs +5 -4
  65. package/build/typeahead/Typeahead.mjs.map +1 -1
  66. package/build/types/index.d.ts +2 -2
  67. package/build/types/index.d.ts.map +1 -1
  68. package/build/types/moneyInput/MoneyInput.d.ts +0 -6
  69. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  70. package/build/types/moneyInput/currencyFormatting.d.ts +3 -4
  71. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  72. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
  73. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  74. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +40 -0
  75. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
  76. package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
  77. package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
  78. package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
  79. package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
  80. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +8 -3
  81. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
  82. package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
  83. package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
  84. package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
  85. package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
  86. package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
  87. package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
  88. package/build/types/prompt/index.d.ts +2 -0
  89. package/build/types/prompt/index.d.ts.map +1 -1
  90. package/build/types/test-utils/index.d.ts +4 -0
  91. package/build/types/test-utils/index.d.ts.map +1 -1
  92. package/package.json +16 -16
  93. package/src/i18n/en.json +2 -0
  94. package/src/index.ts +2 -2
  95. package/src/main.css +107 -51
  96. package/src/main.less +3 -1
  97. package/src/moneyInput/MoneyInput.story.tsx +1 -10
  98. package/src/moneyInput/MoneyInput.test.story.tsx +1 -141
  99. package/src/moneyInput/MoneyInput.test.tsx +0 -45
  100. package/src/moneyInput/MoneyInput.tsx +3 -27
  101. package/src/moneyInput/currencyFormatting.ts +5 -11
  102. package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
  103. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
  104. package/src/prompt/CriticalBanner/CriticalBanner.css +39 -0
  105. package/src/prompt/CriticalBanner/CriticalBanner.less +45 -0
  106. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +645 -0
  107. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +304 -0
  108. package/src/prompt/CriticalBanner/CriticalBanner.tsx +185 -0
  109. package/src/prompt/CriticalBanner/helpers.ts +39 -0
  110. package/src/prompt/CriticalBanner/index.ts +2 -0
  111. package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +9 -2
  112. package/src/prompt/common/Expander/Expander.css +8 -0
  113. package/src/prompt/common/Expander/Expander.less +9 -0
  114. package/src/prompt/common/Expander/Expander.messages.ts +14 -0
  115. package/src/prompt/common/Expander/Expander.test.tsx +167 -0
  116. package/src/prompt/common/Expander/Expander.tsx +83 -0
  117. package/src/prompt/helpers/promptMedia.tsx +79 -0
  118. package/src/prompt/index.ts +4 -0
  119. package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
  120. 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\n * @default success\n */\n sentiment?: Sentiment;\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 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 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","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;AAmCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,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;AACfV,IAAAA,SAAS,EAAEA,SAAU;IACrBI,SAAS,EAAEO,SAAI,CAAC,YAAY,EAAE,eAAeX,SAAS,CAAA,CAAE,EAAEI,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;;;;"}
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\n * @default success\n */\n sentiment?: Sentiment;\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 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 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","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;AAmCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,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;AACfV,IAAAA,SAAS,EAAEA,SAAU;IACrBI,SAAS,EAAEO,IAAI,CAAC,YAAY,EAAE,eAAeX,SAAS,CAAA,CAAE,EAAEI,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;;;;"}
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, this file was auto-generated.
3
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
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, this file was auto-generated.
146
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
395
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
644
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
893
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
1142
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
1325
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
1508
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
1692
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
1876
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
2060
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
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, this file was auto-generated.
3
- // Generated on Tue, 31 Mar 2026 13:02:10 GMT
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, this file was auto-generated.
224
- // Generated on Tue, 31 Mar 2026 13:02:10 GMT
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;