@transferwise/components 0.0.0-experimental-b6b6dc1 → 0.0.0-experimental-a308934

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 (104) hide show
  1. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +2 -3
  2. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
  3. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +2 -3
  4. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
  5. package/build/field/Field.js +5 -4
  6. package/build/field/Field.js.map +1 -1
  7. package/build/field/Field.mjs +5 -4
  8. package/build/field/Field.mjs.map +1 -1
  9. package/build/i18n/en.json +2 -0
  10. package/build/i18n/en.json.js +2 -0
  11. package/build/i18n/en.json.js.map +1 -1
  12. package/build/i18n/en.json.mjs +2 -0
  13. package/build/i18n/en.json.mjs.map +1 -1
  14. package/build/index.js +2 -0
  15. package/build/index.js.map +1 -1
  16. package/build/index.mjs +1 -0
  17. package/build/index.mjs.map +1 -1
  18. package/build/listItem/Prompt/ListItemPrompt.js +5 -4
  19. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  20. package/build/listItem/Prompt/ListItemPrompt.mjs +5 -4
  21. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  22. package/build/main.css +85 -29
  23. package/build/prompt/ActionPrompt/ActionPrompt.js +8 -40
  24. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  25. package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -40
  26. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  27. package/build/prompt/CriticalBanner/CriticalBanner.js +145 -0
  28. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
  29. package/build/prompt/CriticalBanner/CriticalBanner.mjs +143 -0
  30. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
  31. package/build/prompt/CriticalBanner/helpers.js +29 -0
  32. package/build/prompt/CriticalBanner/helpers.js.map +1 -0
  33. package/build/prompt/CriticalBanner/helpers.mjs +26 -0
  34. package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
  35. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +2 -0
  36. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
  37. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +2 -0
  38. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
  39. package/build/prompt/common/Expander/Expander.js +47 -0
  40. package/build/prompt/common/Expander/Expander.js.map +1 -0
  41. package/build/prompt/common/Expander/Expander.messages.js +17 -0
  42. package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
  43. package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
  44. package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
  45. package/build/prompt/common/Expander/Expander.mjs +44 -0
  46. package/build/prompt/common/Expander/Expander.mjs.map +1 -0
  47. package/build/prompt/helpers/promptMedia.js +52 -0
  48. package/build/prompt/helpers/promptMedia.js.map +1 -0
  49. package/build/prompt/helpers/promptMedia.mjs +50 -0
  50. package/build/prompt/helpers/promptMedia.mjs.map +1 -0
  51. package/build/styles/main.css +85 -29
  52. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +39 -0
  53. package/build/styles/prompt/common/Expander/Expander.css +8 -0
  54. package/build/typeahead/Typeahead.js +5 -4
  55. package/build/typeahead/Typeahead.js.map +1 -1
  56. package/build/typeahead/Typeahead.mjs +5 -4
  57. package/build/typeahead/Typeahead.mjs.map +1 -1
  58. package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
  59. package/build/types/index.d.ts +2 -2
  60. package/build/types/index.d.ts.map +1 -1
  61. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
  62. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  63. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +43 -0
  64. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
  65. package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
  66. package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
  67. package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
  68. package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
  69. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +8 -3
  70. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
  71. package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
  72. package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
  73. package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
  74. package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
  75. package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
  76. package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
  77. package/build/types/prompt/index.d.ts +2 -0
  78. package/build/types/prompt/index.d.ts.map +1 -1
  79. package/build/types/test-utils/index.d.ts +4 -0
  80. package/build/types/test-utils/index.d.ts.map +1 -1
  81. package/package.json +4 -4
  82. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +2 -3
  83. package/src/i18n/en.json +2 -0
  84. package/src/index.ts +2 -2
  85. package/src/main.css +85 -29
  86. package/src/main.less +3 -1
  87. package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
  88. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
  89. package/src/prompt/CriticalBanner/CriticalBanner.css +39 -0
  90. package/src/prompt/CriticalBanner/CriticalBanner.less +45 -0
  91. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +476 -0
  92. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +67 -0
  93. package/src/prompt/CriticalBanner/CriticalBanner.tsx +188 -0
  94. package/src/prompt/CriticalBanner/helpers.ts +39 -0
  95. package/src/prompt/CriticalBanner/index.ts +2 -0
  96. package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +9 -2
  97. package/src/prompt/common/Expander/Expander.css +8 -0
  98. package/src/prompt/common/Expander/Expander.less +9 -0
  99. package/src/prompt/common/Expander/Expander.messages.ts +14 -0
  100. package/src/prompt/common/Expander/Expander.test.tsx +167 -0
  101. package/src/prompt/common/Expander/Expander.tsx +83 -0
  102. package/src/prompt/helpers/promptMedia.tsx +79 -0
  103. package/src/prompt/index.ts +4 -0
  104. package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
@@ -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;;;;"}
@@ -32176,6 +32176,91 @@ html:not([dir="rtl"]) .np-navigation-option {
32176
32176
  padding: 0;
32177
32177
  }
32178
32178
 
32179
+ .wds-action-prompt {
32180
+ --Prompt-padding: var(--size-16);
32181
+ --Prompt-actions-gap: var(--size-8);
32182
+ --Prompt-gap: var(--size-10) var(--size-16);
32183
+ --Prompt-border-radius: var(--radius-large);
32184
+ }
32185
+
32186
+ .wds-action-prompt--media-image {
32187
+ width: 48px;
32188
+ width: var(--size-48);
32189
+ height: 48px;
32190
+ height: var(--size-48);
32191
+ -o-object-fit: contain;
32192
+ object-fit: contain;
32193
+ }
32194
+
32195
+ @media (max-width: 767px) {
32196
+ .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
32197
+ flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
32198
+ min-width: -moz-fit-content;
32199
+ min-width: fit-content;
32200
+ }
32201
+ }
32202
+
32203
+ .wds-action-prompt__content {
32204
+ max-width: calc(48px * 10);
32205
+ max-width: calc(var(--size-48) * 10);
32206
+ }
32207
+
32208
+ .wds-critical-banner {
32209
+ --Prompt-padding: var(--size-16);
32210
+ --Prompt-actions-gap: var(--size-8);
32211
+ --Prompt-gap: var(--size-10) var(--size-16);
32212
+ --Prompt-border-radius: 0;
32213
+ }
32214
+
32215
+ .wds-critical-banner--media-image {
32216
+ width: 48px;
32217
+ width: var(--size-48);
32218
+ height: 48px;
32219
+ height: var(--size-48);
32220
+ -o-object-fit: contain;
32221
+ object-fit: contain;
32222
+ }
32223
+
32224
+ @media (max-width: 767px) {
32225
+ .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
32226
+ flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
32227
+ min-width: -moz-fit-content;
32228
+ min-width: fit-content;
32229
+ }
32230
+ }
32231
+
32232
+ .wds-critical-banner__description--collapsed {
32233
+ display: -webkit-box;
32234
+ -webkit-line-clamp: 2;
32235
+ -webkit-box-orient: vertical;
32236
+ overflow: hidden;
32237
+ }
32238
+
32239
+ .wds-critical-banner .wds-prompt__content-wrapper {
32240
+ grid-template-columns: auto 1fr auto;
32241
+ align-items: flex-start;
32242
+ }
32243
+
32244
+ .wds-critical-banner__text-wrapper {
32245
+ min-width: 0;
32246
+ }
32247
+
32248
+ @media (max-width: 767px) {
32249
+ .wds-critical-banner .wds-prompt__actions-wrapper {
32250
+ grid-column: span 3;
32251
+ }
32252
+ }
32253
+
32254
+ .wds-expander-toggle {
32255
+ align-self: flex-start;
32256
+ flex-shrink: 0;
32257
+ transition: transform 0.2s ease-in-out;
32258
+ }
32259
+
32260
+ .wds-expander-toggle--collapsed {
32261
+ transform: rotate(180deg);
32262
+ }
32263
+
32179
32264
  .wds-radio-group .np-radio:last-child label {
32180
32265
  margin-bottom: 0;
32181
32266
  }
@@ -34600,32 +34685,3 @@ html:not([dir="rtl"]) .np-navigation-option {
34600
34685
  .np-list-item__action {
34601
34686
  flex-shrink: 0;
34602
34687
  }
34603
-
34604
- .wds-action-prompt {
34605
- --Prompt-padding: var(--size-16);
34606
- --Prompt-actions-gap: var(--size-8);
34607
- --Prompt-gap: var(--size-10) var(--size-16);
34608
- --Prompt-border-radius: var(--radius-large);
34609
- }
34610
-
34611
- .wds-action-prompt--media-image {
34612
- width: 48px;
34613
- width: var(--size-48);
34614
- height: 48px;
34615
- height: var(--size-48);
34616
- -o-object-fit: contain;
34617
- object-fit: contain;
34618
- }
34619
-
34620
- @media (max-width: 767px) {
34621
- .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
34622
- flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
34623
- min-width: -moz-fit-content;
34624
- min-width: fit-content;
34625
- }
34626
- }
34627
-
34628
- .wds-action-prompt__content {
34629
- max-width: calc(48px * 10);
34630
- max-width: calc(var(--size-48) * 10);
34631
- }
@@ -0,0 +1,39 @@
1
+ .wds-critical-banner {
2
+ --Prompt-padding: var(--size-16);
3
+ --Prompt-actions-gap: var(--size-8);
4
+ --Prompt-gap: var(--size-10) var(--size-16);
5
+ --Prompt-border-radius: 0;
6
+ }
7
+ .wds-critical-banner--media-image {
8
+ width: 48px;
9
+ width: var(--size-48);
10
+ height: 48px;
11
+ height: var(--size-48);
12
+ -o-object-fit: contain;
13
+ object-fit: contain;
14
+ }
15
+ @media (max-width: 767px) {
16
+ .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
17
+ flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
18
+ min-width: -moz-fit-content;
19
+ min-width: fit-content;
20
+ }
21
+ }
22
+ .wds-critical-banner__description--collapsed {
23
+ display: -webkit-box;
24
+ -webkit-line-clamp: 2;
25
+ -webkit-box-orient: vertical;
26
+ overflow: hidden;
27
+ }
28
+ .wds-critical-banner .wds-prompt__content-wrapper {
29
+ grid-template-columns: auto 1fr auto;
30
+ align-items: flex-start;
31
+ }
32
+ .wds-critical-banner__text-wrapper {
33
+ min-width: 0;
34
+ }
35
+ @media (max-width: 767px) {
36
+ .wds-critical-banner .wds-prompt__actions-wrapper {
37
+ grid-column: span 3;
38
+ }
39
+ }
@@ -0,0 +1,8 @@
1
+ .wds-expander-toggle {
2
+ align-self: flex-start;
3
+ flex-shrink: 0;
4
+ transition: transform 0.2s ease-in-out;
5
+ }
6
+ .wds-expander-toggle--collapsed {
7
+ transform: rotate(180deg);
8
+ }
@@ -32,17 +32,18 @@ require('../common/fileType.js');
32
32
  require('../common/closeButton/CloseButton.messages.js');
33
33
  var jsxRuntime = require('react/jsx-runtime');
34
34
  var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
35
- require('../statusIcon/StatusIcon.js');
36
35
  require('../body/Body.js');
37
36
  require('../button/Button.resolver.js');
37
+ require('../sentimentSurface/SentimentSurface.js');
38
+ require('../primitives/PrimitiveButton/PrimitiveButton.js');
39
+ require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
38
40
  require('../badge/Badge.js');
39
41
  require('@wise/art');
42
+ require('../statusIcon/StatusIcon.js');
40
43
  require('@transferwise/neptune-validation');
41
44
  require('../provider/direction/DirectionProvider.js');
42
- require('../sentimentSurface/SentimentSurface.js');
43
- require('../primitives/PrimitiveButton/PrimitiveButton.js');
44
- require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
45
45
  require('../link/Link.messages.js');
46
+ require('../prompt/common/Expander/Expander.messages.js');
46
47
  var contexts = require('../inputs/contexts.js');
47
48
  var TypeaheadInput = require('./typeaheadInput/TypeaheadInput.js');
48
49
  var TypeaheadOption = require('./typeaheadOption/TypeaheadOption.js');