@transferwise/components 46.160.3 → 46.160.5

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 (26) hide show
  1. package/build/FlowNavigation/FlowNavigation.js +6 -4
  2. package/build/FlowNavigation/FlowNavigation.js.map +1 -1
  3. package/build/FlowNavigation/FlowNavigation.mjs +6 -4
  4. package/build/FlowNavigation/FlowNavigation.mjs.map +1 -1
  5. package/build/main.css +28 -0
  6. package/build/styles/FlowNavigation/FlowNavigation.css +10 -0
  7. package/build/styles/PocketSurface/PocketSurface.css +1 -0
  8. package/build/styles/SentimentSurface/SentimentSurface.css +5 -0
  9. package/build/styles/css/neptune.css +11 -0
  10. package/build/styles/main.css +28 -0
  11. package/build/styles/styles/less/neptune.css +11 -0
  12. package/build/types/FlowNavigation/FlowNavigation.d.ts.map +1 -1
  13. package/package.json +13 -13
  14. package/src/FlowNavigation/FlowNavigation.css +10 -0
  15. package/src/FlowNavigation/FlowNavigation.less +11 -0
  16. package/src/FlowNavigation/FlowNavigation.tsx +6 -4
  17. package/src/PocketSurface/PocketSurface.css +1 -0
  18. package/src/Prompt/ActionPrompt/_stories/ActionPrompt.story.tsx +5 -1
  19. package/src/Prompt/InfoPrompt/_stories/InfoPrompt.story.tsx +12 -9
  20. package/src/Prompt/InlinePrompt/_stories/InlinePrompt.story.tsx +5 -5
  21. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less +2 -1
  22. package/src/SentimentSurface/SentimentSurface.css +5 -0
  23. package/src/SentimentSurface/SentimentSurface.less +5 -0
  24. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +6 -2
  25. package/src/main.css +28 -0
  26. package/src/styles/less/neptune.css +11 -0
package/build/FlowNavigation/FlowNavigation.js CHANGED
@@ -51,12 +51,13 @@ const FlowNavigation = ({
51
51
  const intl = reactIntl.useIntl();
52
52
  const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
53
53
  const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
54
+ const hasSteps = steps && steps.length > 0;
55
+ const displayGoBack = onGoBack != null && activeStep > 0;
54
56
  const closeButton = onClose != null && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
55
57
  size: "lg",
56
58
  onClick: onClose
57
59
  });
58
60
  const newAvatar = done ? null : avatar;
59
- const displayGoBack = onGoBack != null && activeStep > 0;
60
61
  const flowHeaderContent = /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
61
62
  className: clsx.clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
62
63
  'np-flow-navigation--xs-max': !screenSm,
@@ -75,7 +76,7 @@ const FlowNavigation = ({
75
76
  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
76
77
  className: "np-flow-header__left",
77
78
  children: logo
78
- }), !screenSm && !done && steps && steps.length > 0 && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel.default, {
79
+ }), !screenSm && !done && hasSteps && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel.default, {
79
80
  className: "m-x-1",
80
81
  steps: steps,
81
82
  activeLabel: activeStep
@@ -87,7 +88,7 @@ const FlowNavigation = ({
87
88
  className: "m-x-1"
88
89
  }), closeButton]
89
90
  }),
90
- bottomContent: !done && steps && steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
91
+ bottomContent: !done && hasSteps ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
91
92
  activeStep: activeStep,
92
93
  steps: steps,
93
94
  className: clsx.clsx('np-flow-navigation__stepper')
@@ -97,7 +98,8 @@ const FlowNavigation = ({
97
98
  return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
98
99
  size: "fluid",
99
100
  className: clsx.clsx('np-flow-navigation', {
100
- 'np-flow-navigation--border-bottom': showBottomBorder
101
+ 'np-flow-navigation--border-bottom': showBottomBorder,
102
+ 'np-flow-navigation--no-steps': !hasSteps || done
101
103
  }),
102
104
  children: flowHeaderContent
103
105
  });
package/build/FlowNavigation/FlowNavigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const newAvatar = done ? null : avatar;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && steps && steps.length > 0 && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && steps && steps.length > 0 ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","closeButton","CloseButton","size","onClick","newAvatar","displayGoBack","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","length","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":"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"}
1
+ {"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && hasSteps && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && hasSteps ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n 'np-flow-navigation--no-steps': !hasSteps || done,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":"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"}
package/build/FlowNavigation/FlowNavigation.mjs CHANGED
@@ -47,12 +47,13 @@ const FlowNavigation = ({
47
47
  const intl = useIntl();
48
48
  const screenSm = useScreenSize(Breakpoint.SMALL);
49
49
  const screenLg = useScreenSize(Breakpoint.LARGE);
50
+ const hasSteps = steps && steps.length > 0;
51
+ const displayGoBack = onGoBack != null && activeStep > 0;
50
52
  const closeButton = onClose != null && /*#__PURE__*/jsx(CloseButton, {
51
53
  size: "lg",
52
54
  onClick: onClose
53
55
  });
54
56
  const newAvatar = done ? null : avatar;
55
- const displayGoBack = onGoBack != null && activeStep > 0;
56
57
  const flowHeaderContent = /*#__PURE__*/jsx(FlowHeader, {
57
58
  className: clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
58
59
  'np-flow-navigation--xs-max': !screenSm,
@@ -71,7 +72,7 @@ const FlowNavigation = ({
71
72
  }) : /*#__PURE__*/jsx("div", {
72
73
  className: "np-flow-header__left",
73
74
  children: logo
74
- }), !screenSm && !done && steps && steps.length > 0 && /*#__PURE__*/jsx(AnimatedLabel, {
75
+ }), !screenSm && !done && hasSteps && /*#__PURE__*/jsx(AnimatedLabel, {
75
76
  className: "m-x-1",
76
77
  steps: steps,
77
78
  activeLabel: activeStep
@@ -83,7 +84,7 @@ const FlowNavigation = ({
83
84
  className: "m-x-1"
84
85
  }), closeButton]
85
86
  }),
86
- bottomContent: !done && steps && steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
87
+ bottomContent: !done && hasSteps ? /*#__PURE__*/jsx(Stepper, {
87
88
  activeStep: activeStep,
88
89
  steps: steps,
89
90
  className: clsx('np-flow-navigation__stepper')
@@ -93,7 +94,8 @@ const FlowNavigation = ({
93
94
  return /*#__PURE__*/jsx(Container, {
94
95
  size: "fluid",
95
96
  className: clsx('np-flow-navigation', {
96
- 'np-flow-navigation--border-bottom': showBottomBorder
97
+ 'np-flow-navigation--border-bottom': showBottomBorder,
98
+ 'np-flow-navigation--no-steps': !hasSteps || done
97
99
  }),
98
100
  children: flowHeaderContent
99
101
  });
package/build/FlowNavigation/FlowNavigation.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const newAvatar = done ? null : avatar;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && steps && steps.length > 0 && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && steps && steps.length > 0 ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","closeButton","CloseButton","size","onClick","newAvatar","displayGoBack","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","length","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAuB5B,MAAMC,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,GAAGN,WAAW;AAClBO,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;EACRC,KAAK;AACLC,EAAAA,gBAAgB,GAAG;AAAI,CACH,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtB,EAAA,MAAMC,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;EAEhD,MAAMC,WAAW,GAAGZ,OAAO,IAAI,IAAI,iBAAIP,GAAA,CAACoB,WAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAEf;AAAQ,IAAG;AAElF,EAAA,MAAMgB,SAAS,GAAGjB,IAAI,GAAG,IAAI,GAAGF,MAAM;EACtC,MAAMoB,aAAa,GAAGhB,QAAQ,IAAI,IAAI,IAAIL,UAAU,GAAG,CAAC;AAExD,EAAA,MAAMsB,iBAAiB,gBACrBzB,GAAA,CAAC0B,UAAU,EAAA;IACTC,SAAS,EAAEC,IAAI,CACb,6BAA6B,EAC7Bf,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;MACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,MAAA,wBAAwB,EAAEA,QAAQ;AAClC,MAAA,wBAAwB,EAAEI;AAC3B,KAAA,CACL;IACFY,WAAW,eACTC,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,CACG,CAACnB,QAAQ,IAAIW,aAAa,gBACzBxB,GAAA,CAACiC,UAAU,EAAA;AACTZ,QAAAA,IAAI,EAAE,EAAG;AACTa,QAAAA,QAAQ,EAAC,UAAU;AACnBC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,YAAA,EAAYxB,IAAI,CAACyB,aAAa,CAACC,QAAQ,CAACC,IAAI,CAAE;AAC9ChB,QAAAA,OAAO,EAAEd,QAAS;AAAAwB,QAAAA,QAAA,eAElBhC,GAAA,CAACuC,SAAS,EAAA,EAAA;OACA,CAAC,gBAEbvC,GAAA,CAAA,KAAA,EAAA;AAAK2B,QAAAA,SAAS,EAAC,sBAAsB;AAAAK,QAAAA,QAAA,EAAE3B;AAAI,OAAM,CAClD,EACA,CAACQ,QAAQ,IAAI,CAACP,IAAI,IAAIG,KAAK,IAAIA,KAAK,CAAC+B,MAAM,GAAG,CAAC,iBAC9CxC,GAAA,CAACyC,aAAa,EAAA;AAACd,QAAAA,SAAS,EAAC,OAAO;AAAClB,QAAAA,KAAK,EAAEA,KAAM;AAACiC,QAAAA,WAAW,EAAEvC;AAAW,OAAA,CACxE;AAAA,KACH,CACD;AACDwC,IAAAA,YAAY,eACVb,IAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,iFAAiF;AAAAK,MAAAA,QAAA,GAC7FT,SAAS,EACTA,SAAS,IAAIJ,WAAW,iBAAInB,GAAA,CAAA,MAAA,EAAA;AAAM2B,QAAAA,SAAS,EAAC;OAAO,CAAG,EACtDR,WAAW;AAAA,KACT,CACN;AACDyB,IAAAA,aAAa,EACX,CAACtC,IAAI,IAAIG,KAAK,IAAIA,KAAK,CAAC+B,MAAM,GAAG,CAAC,gBAChCxC,GAAA,CAAC6C,OAAO,EAAA;AACN1C,MAAAA,UAAU,EAAEA,UAAW;AACvBM,MAAAA,KAAK,EAAEA,KAAM;MACbkB,SAAS,EAAEC,IAAI,CAAC,6BAA6B;KAAE,CAC/C,GACA,IACL;IACDkB,MAAM,EAAE,CAAC7B,QAAQ,GAAG8B,MAAM,CAACC,QAAQ,GAAGD,MAAM,CAACE;AAAW,GAAA,CAE3D;EAED,oBACEjD,GAAA,CAACkD,SAAS,EAAA;AACR7B,IAAAA,IAAI,EAAC,OAAO;AACZM,IAAAA,SAAS,EAAEC,IAAI,CAAC,oBAAoB,EAAE;AACpC,MAAA,mCAAmC,EAAElB;AACtC,KAAA,CAAE;AAAAsB,IAAAA,QAAA,EAEFP;AAAiB,GACT,CAAC;AAEhB;;;;"}
1
+ {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && hasSteps && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && hasSteps ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n 'np-flow-navigation--no-steps': !hasSteps || done,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAuB5B,MAAMC,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,GAAGN,WAAW;AAClBO,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;EACRC,KAAK;AACLC,EAAAA,gBAAgB,GAAG;AAAI,CACH,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtB,EAAA,MAAMC,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;EAEhD,MAAMC,QAAQ,GAAGV,KAAK,IAAIA,KAAK,CAACW,MAAM,GAAG,CAAC;EAC1C,MAAMC,aAAa,GAAGb,QAAQ,IAAI,IAAI,IAAIL,UAAU,GAAG,CAAC;EAExD,MAAMmB,WAAW,GAAGf,OAAO,IAAI,IAAI,iBAAIP,GAAA,CAACuB,WAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAElB;AAAQ,IAAG;AAClF,EAAA,MAAMmB,SAAS,GAAGpB,IAAI,GAAG,IAAI,GAAGF,MAAM;AAEtC,EAAA,MAAMuB,iBAAiB,gBACrB3B,GAAA,CAAC4B,UAAU,EAAA;IACTC,SAAS,EAAEC,IAAI,CACb,6BAA6B,EAC7BjB,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;MACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,MAAA,wBAAwB,EAAEA,QAAQ;AAClC,MAAA,wBAAwB,EAAEI;AAC3B,KAAA,CACL;IACFc,WAAW,eACTC,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,CACG,CAACrB,QAAQ,IAAIQ,aAAa,gBACzBrB,GAAA,CAACmC,UAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnBC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,QAAQ,CAACC,IAAI,CAAE;AAC9Cf,QAAAA,OAAO,EAAEjB,QAAS;AAAA0B,QAAAA,QAAA,eAElBlC,GAAA,CAACyC,SAAS,EAAA,EAAA;OACA,CAAC,gBAEbzC,GAAA,CAAA,KAAA,EAAA;AAAK6B,QAAAA,SAAS,EAAC,sBAAsB;AAAAK,QAAAA,QAAA,EAAE7B;AAAI,OAAM,CAClD,EACA,CAACQ,QAAQ,IAAI,CAACP,IAAI,IAAIa,QAAQ,iBAC7BnB,GAAA,CAAC0C,aAAa,EAAA;AAACb,QAAAA,SAAS,EAAC,OAAO;AAACpB,QAAAA,KAAK,EAAEA,KAAM;AAACkC,QAAAA,WAAW,EAAExC;AAAW,OAAA,CACxE;AAAA,KACH,CACD;AACDyC,IAAAA,YAAY,eACVZ,IAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,iFAAiF;AAAAK,MAAAA,QAAA,GAC7FR,SAAS,EACTA,SAAS,IAAIJ,WAAW,iBAAItB,GAAA,CAAA,MAAA,EAAA;AAAM6B,QAAAA,SAAS,EAAC;OAAO,CAAG,EACtDP,WAAW;AAAA,KACT,CACN;IACDuB,aAAa,EACX,CAACvC,IAAI,IAAIa,QAAQ,gBACfnB,GAAA,CAAC8C,OAAO,EAAA;AACN3C,MAAAA,UAAU,EAAEA,UAAW;AACvBM,MAAAA,KAAK,EAAEA,KAAM;MACboB,SAAS,EAAEC,IAAI,CAAC,6BAA6B;KAAE,CAC/C,GACA,IACL;IACDiB,MAAM,EAAE,CAAC9B,QAAQ,GAAG+B,MAAM,CAACC,QAAQ,GAAGD,MAAM,CAACE;AAAW,GAAA,CAE3D;EAED,oBACElD,GAAA,CAACmD,SAAS,EAAA;AACR3B,IAAAA,IAAI,EAAC,OAAO;AACZK,IAAAA,SAAS,EAAEC,IAAI,CAAC,oBAAoB,EAAE;AACpC,MAAA,mCAAmC,EAAEpB,gBAAgB;MACrD,8BAA8B,EAAE,CAACS,QAAQ,IAAIb;AAC9C,KAAA,CAAE;AAAA4B,IAAAA,QAAA,EAEFP;AAAiB,GACT,CAAC;AAEhB;;;;"}
package/build/main.css CHANGED
@@ -140,6 +140,7 @@
140
140
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
141
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
142
  }
143
+
143
144
  /**
144
145
  * Do not edit directly, this file was auto-generated.
145
146
  */
@@ -322,6 +323,7 @@
322
323
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
323
324
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
324
325
  }
326
+
325
327
  /**
326
328
  * Do not edit directly, this file was auto-generated.
327
329
  */
@@ -504,6 +506,7 @@
504
506
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
505
507
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
506
508
  }
509
+
507
510
  /**
508
511
  * Do not edit directly, this file was auto-generated.
509
512
  */
@@ -686,6 +689,7 @@
686
689
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
687
690
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
688
691
  }
692
+
689
693
  /**
690
694
  * Do not edit directly, this file was auto-generated.
691
695
  */
@@ -868,6 +872,7 @@
868
872
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
869
873
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
870
874
  }
875
+
871
876
  /**
872
877
  * Do not edit directly, this file was auto-generated.
873
878
  */
@@ -1050,6 +1055,7 @@
1050
1055
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1051
1056
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1052
1057
  }
1058
+
1053
1059
  /**
1054
1060
  * Do not edit directly, this file was auto-generated.
1055
1061
  */
@@ -1232,6 +1238,7 @@
1232
1238
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1233
1239
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1234
1240
  }
1241
+
1235
1242
  /**
1236
1243
  * Do not edit directly, this file was auto-generated.
1237
1244
  */
@@ -1415,6 +1422,7 @@
1415
1422
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1416
1423
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1417
1424
  }
1425
+
1418
1426
  /**
1419
1427
  * Do not edit directly, this file was auto-generated.
1420
1428
  */
@@ -1598,6 +1606,7 @@
1598
1606
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1599
1607
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1600
1608
  }
1609
+
1601
1610
  /**
1602
1611
  * Do not edit directly, this file was auto-generated.
1603
1612
  */
@@ -1781,6 +1790,7 @@
1781
1790
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1782
1791
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1783
1792
  }
1793
+
1784
1794
  /**
1785
1795
  * Do not edit directly, this file was auto-generated.
1786
1796
  */
@@ -1964,7 +1974,9 @@
1964
1974
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1965
1975
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1966
1976
  }
1977
+
1967
1978
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1979
+
1968
1980
  /**
1969
1981
  * Do not edit directly, this file was auto-generated.
1970
1982
  */
@@ -2409,6 +2421,7 @@
2409
2421
  --color-sentiment-background-surface-active: #F8CD20;
2410
2422
  --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
2411
2423
  }
2424
+
2412
2425
  /**
2413
2426
  * Do not edit directly, this file was auto-generated.
2414
2427
  */
@@ -2557,6 +2570,7 @@
2557
2570
  --color-interactive-control-active: #471358;
2558
2571
  --color-background-screen: #260a2f;
2559
2572
  }
2573
+
2560
2574
  @font-face {
2561
2575
  font-family: Inter;
2562
2576
  font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
19795
19809
  background-color: var(--color-sentiment-background-surface);
19796
19810
  color: var(--color-sentiment-content-primary);
19797
19811
  }
19812
+ .wds-sentiment-surface strong,
19813
+ .wds-sentiment-surface b {
19814
+ color: var(--color-sentiment-content-primary);
19815
+ }
19798
19816
  .wds-pocket-surface {
19799
19817
  background-color: #ffffff;
19800
19818
  background-color: var(--color-background-screen);
@@ -22323,6 +22341,16 @@ button.np-option {
22323
22341
  min-block-size: 128px;
22324
22342
  }
22325
22343
  }
22344
+ .np-flow-navigation--no-steps {
22345
+ block-size: 80px;
22346
+ min-block-size: 80px;
22347
+ }
22348
+ @media (min-width: 320.02px) {
22349
+ .np-flow-navigation--no-steps {
22350
+ block-size: 80px;
22351
+ min-block-size: 80px;
22352
+ }
22353
+ }
22326
22354
  .np-flow-navigation--border-bottom {
22327
22355
  border-block-end: 1px solid rgba(0,0,0,0.10196);
22328
22356
  border-block-end: 1px solid #0000001a;
package/build/styles/FlowNavigation/FlowNavigation.css CHANGED
@@ -11,6 +11,16 @@
11
11
  min-block-size: 128px;
12
12
  }
13
13
  }
14
+ .np-flow-navigation--no-steps {
15
+ block-size: 80px;
16
+ min-block-size: 80px;
17
+ }
18
+ @media (min-width: 320.02px) {
19
+ .np-flow-navigation--no-steps {
20
+ block-size: 80px;
21
+ min-block-size: 80px;
22
+ }
23
+ }
14
24
  .np-flow-navigation--border-bottom {
15
25
  border-block-end: 1px solid rgba(0,0,0,0.10196);
16
26
  border-block-end: 1px solid #0000001a;
package/build/styles/PocketSurface/PocketSurface.css CHANGED
@@ -146,6 +146,7 @@
146
146
  --color-interactive-control-active: #471358;
147
147
  --color-background-screen: #260a2f;
148
148
  }
149
+
149
150
  .wds-pocket-surface {
150
151
  background-color: #ffffff;
151
152
  background-color: var(--color-background-screen);
package/build/styles/SentimentSurface/SentimentSurface.css CHANGED
@@ -442,6 +442,7 @@
442
442
  --color-sentiment-background-surface-active: #F8CD20;
443
443
  --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
444
444
  }
445
+
445
446
  .wds-sentiment-surface {
446
447
  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
447
448
  }
@@ -449,3 +450,7 @@
449
450
  background-color: var(--color-sentiment-background-surface);
450
451
  color: var(--color-sentiment-content-primary);
451
452
  }
453
+ .wds-sentiment-surface strong,
454
+ .wds-sentiment-surface b {
455
+ color: var(--color-sentiment-content-primary);
456
+ }
package/build/styles/css/neptune.css CHANGED
@@ -140,6 +140,7 @@
140
140
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
141
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
142
  }
143
+
143
144
  /**
144
145
  * Do not edit directly, this file was auto-generated.
145
146
  */
@@ -322,6 +323,7 @@
322
323
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
323
324
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
324
325
  }
326
+
325
327
  /**
326
328
  * Do not edit directly, this file was auto-generated.
327
329
  */
@@ -504,6 +506,7 @@
504
506
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
505
507
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
506
508
  }
509
+
507
510
  /**
508
511
  * Do not edit directly, this file was auto-generated.
509
512
  */
@@ -686,6 +689,7 @@
686
689
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
687
690
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
688
691
  }
692
+
689
693
  /**
690
694
  * Do not edit directly, this file was auto-generated.
691
695
  */
@@ -868,6 +872,7 @@
868
872
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
869
873
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
870
874
  }
875
+
871
876
  /**
872
877
  * Do not edit directly, this file was auto-generated.
873
878
  */
@@ -1050,6 +1055,7 @@
1050
1055
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1051
1056
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1052
1057
  }
1058
+
1053
1059
  /**
1054
1060
  * Do not edit directly, this file was auto-generated.
1055
1061
  */
@@ -1232,6 +1238,7 @@
1232
1238
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1233
1239
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1234
1240
  }
1241
+
1235
1242
  /**
1236
1243
  * Do not edit directly, this file was auto-generated.
1237
1244
  */
@@ -1415,6 +1422,7 @@
1415
1422
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1416
1423
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1417
1424
  }
1425
+
1418
1426
  /**
1419
1427
  * Do not edit directly, this file was auto-generated.
1420
1428
  */
@@ -1598,6 +1606,7 @@
1598
1606
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1599
1607
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1600
1608
  }
1609
+
1601
1610
  /**
1602
1611
  * Do not edit directly, this file was auto-generated.
1603
1612
  */
@@ -1781,6 +1790,7 @@
1781
1790
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1782
1791
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1783
1792
  }
1793
+
1784
1794
  /**
1785
1795
  * Do not edit directly, this file was auto-generated.
1786
1796
  */
@@ -1964,6 +1974,7 @@
1964
1974
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1965
1975
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1966
1976
  }
1977
+
1967
1978
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1968
1979
  @font-face {
1969
1980
  font-family: Inter;
package/build/styles/main.css CHANGED
@@ -140,6 +140,7 @@
140
140
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
141
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
142
  }
143
+
143
144
  /**
144
145
  * Do not edit directly, this file was auto-generated.
145
146
  */
@@ -322,6 +323,7 @@
322
323
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
323
324
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
324
325
  }
326
+
325
327
  /**
326
328
  * Do not edit directly, this file was auto-generated.
327
329
  */
@@ -504,6 +506,7 @@
504
506
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
505
507
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
506
508
  }
509
+
507
510
  /**
508
511
  * Do not edit directly, this file was auto-generated.
509
512
  */
@@ -686,6 +689,7 @@
686
689
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
687
690
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
688
691
  }
692
+
689
693
  /**
690
694
  * Do not edit directly, this file was auto-generated.
691
695
  */
@@ -868,6 +872,7 @@
868
872
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
869
873
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
870
874
  }
875
+
871
876
  /**
872
877
  * Do not edit directly, this file was auto-generated.
873
878
  */
@@ -1050,6 +1055,7 @@
1050
1055
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1051
1056
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1052
1057
  }
1058
+
1053
1059
  /**
1054
1060
  * Do not edit directly, this file was auto-generated.
1055
1061
  */
@@ -1232,6 +1238,7 @@
1232
1238
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1233
1239
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1234
1240
  }
1241
+
1235
1242
  /**
1236
1243
  * Do not edit directly, this file was auto-generated.
1237
1244
  */
@@ -1415,6 +1422,7 @@
1415
1422
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1416
1423
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1417
1424
  }
1425
+
1418
1426
  /**
1419
1427
  * Do not edit directly, this file was auto-generated.
1420
1428
  */
@@ -1598,6 +1606,7 @@
1598
1606
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1599
1607
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1600
1608
  }
1609
+
1601
1610
  /**
1602
1611
  * Do not edit directly, this file was auto-generated.
1603
1612
  */
@@ -1781,6 +1790,7 @@
1781
1790
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1782
1791
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1783
1792
  }
1793
+
1784
1794
  /**
1785
1795
  * Do not edit directly, this file was auto-generated.
1786
1796
  */
@@ -1964,7 +1974,9 @@
1964
1974
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1965
1975
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1966
1976
  }
1977
+
1967
1978
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1979
+
1968
1980
  /**
1969
1981
  * Do not edit directly, this file was auto-generated.
1970
1982
  */
@@ -2409,6 +2421,7 @@
2409
2421
  --color-sentiment-background-surface-active: #F8CD20;
2410
2422
  --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
2411
2423
  }
2424
+
2412
2425
  /**
2413
2426
  * Do not edit directly, this file was auto-generated.
2414
2427
  */
@@ -2557,6 +2570,7 @@
2557
2570
  --color-interactive-control-active: #471358;
2558
2571
  --color-background-screen: #260a2f;
2559
2572
  }
2573
+
2560
2574
  @font-face {
2561
2575
  font-family: Inter;
2562
2576
  font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
19795
19809
  background-color: var(--color-sentiment-background-surface);
19796
19810
  color: var(--color-sentiment-content-primary);
19797
19811
  }
19812
+ .wds-sentiment-surface strong,
19813
+ .wds-sentiment-surface b {
19814
+ color: var(--color-sentiment-content-primary);
19815
+ }
19798
19816
  .wds-pocket-surface {
19799
19817
  background-color: #ffffff;
19800
19818
  background-color: var(--color-background-screen);
@@ -22323,6 +22341,16 @@ button.np-option {
22323
22341
  min-block-size: 128px;
22324
22342
  }
22325
22343
  }
22344
+ .np-flow-navigation--no-steps {
22345
+ block-size: 80px;
22346
+ min-block-size: 80px;
22347
+ }
22348
+ @media (min-width: 320.02px) {
22349
+ .np-flow-navigation--no-steps {
22350
+ block-size: 80px;
22351
+ min-block-size: 80px;
22352
+ }
22353
+ }
22326
22354
  .np-flow-navigation--border-bottom {
22327
22355
  border-block-end: 1px solid rgba(0,0,0,0.10196);
22328
22356
  border-block-end: 1px solid #0000001a;
package/build/styles/styles/less/neptune.css CHANGED
@@ -140,6 +140,7 @@
140
140
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
141
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
142
  }
143
+
143
144
  /**
144
145
  * Do not edit directly, this file was auto-generated.
145
146
  */
@@ -322,6 +323,7 @@
322
323
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
323
324
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
324
325
  }
326
+
325
327
  /**
326
328
  * Do not edit directly, this file was auto-generated.
327
329
  */
@@ -504,6 +506,7 @@
504
506
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
505
507
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
506
508
  }
509
+
507
510
  /**
508
511
  * Do not edit directly, this file was auto-generated.
509
512
  */
@@ -686,6 +689,7 @@
686
689
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
687
690
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
688
691
  }
692
+
689
693
  /**
690
694
  * Do not edit directly, this file was auto-generated.
691
695
  */
@@ -868,6 +872,7 @@
868
872
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
869
873
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
870
874
  }
875
+
871
876
  /**
872
877
  * Do not edit directly, this file was auto-generated.
873
878
  */
@@ -1050,6 +1055,7 @@
1050
1055
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1051
1056
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1052
1057
  }
1058
+
1053
1059
  /**
1054
1060
  * Do not edit directly, this file was auto-generated.
1055
1061
  */
@@ -1232,6 +1238,7 @@
1232
1238
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1233
1239
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1234
1240
  }
1241
+
1235
1242
  /**
1236
1243
  * Do not edit directly, this file was auto-generated.
1237
1244
  */
@@ -1415,6 +1422,7 @@
1415
1422
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1416
1423
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1417
1424
  }
1425
+
1418
1426
  /**
1419
1427
  * Do not edit directly, this file was auto-generated.
1420
1428
  */
@@ -1598,6 +1606,7 @@
1598
1606
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1599
1607
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1600
1608
  }
1609
+
1601
1610
  /**
1602
1611
  * Do not edit directly, this file was auto-generated.
1603
1612
  */
@@ -1781,6 +1790,7 @@
1781
1790
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1782
1791
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1783
1792
  }
1793
+
1784
1794
  /**
1785
1795
  * Do not edit directly, this file was auto-generated.
1786
1796
  */
@@ -1964,6 +1974,7 @@
1964
1974
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1965
1975
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1966
1976
  }
1977
+
1967
1978
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1968
1979
  @font-face {
1969
1980
  font-family: Inter;
package/build/types/FlowNavigation/FlowNavigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,iFASrB,mBAAmB,gCAyErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,iFASrB,mBAAmB,gCA2ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.160.3",
3
+ "version": "46.160.5",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -44,27 +44,27 @@
44
44
  "@babel/preset-env": "^7.29.7",
45
45
  "@babel/preset-react": "^7.29.7",
46
46
  "@babel/preset-typescript": "^7.29.7",
47
- "@formatjs/cli": "^6.16.14",
47
+ "@formatjs/cli": "^6.16.19",
48
48
  "@rollup/plugin-babel": "^7.1.0",
49
49
  "@rollup/plugin-json": "^6.1.0",
50
50
  "@rollup/plugin-node-resolve": "^16.0.3",
51
51
  "@rollup/plugin-typescript": "^12.3.0",
52
52
  "@rollup/plugin-url": "^8.0.2",
53
- "@storybook/addon-a11y": "^10.5.4",
54
- "@storybook/addon-docs": "^10.5.4",
53
+ "@storybook/addon-a11y": "^10.5.10",
54
+ "@storybook/addon-docs": "^10.5.10",
55
55
  "@storybook/addon-mcp": "^0.7.0",
56
56
  "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
57
- "@storybook/react-webpack5": "^10.5.4",
57
+ "@storybook/react-webpack5": "^10.5.10",
58
58
  "@testing-library/dom": "^10.4.1",
59
59
  "@testing-library/jest-dom": "^6.9.1",
60
60
  "@testing-library/react": "^16.3.2",
61
- "@testing-library/user-event": "^14.6.1",
61
+ "@testing-library/user-event": "^14.6.6",
62
62
  "@transferwise/icons": "^4.4.4",
63
63
  "@tsconfig/recommended": "^1.0.13",
64
64
  "@types/babel__core": "^7.20.5",
65
65
  "@types/commonmark": "^0.27.10",
66
66
  "@types/jest": "^29.5.14",
67
- "@types/lodash": "4.17.24",
67
+ "@types/lodash": "4.17.25",
68
68
  "@types/lodash.clamp": "^4.0.9",
69
69
  "@types/lodash.debounce": "^4.0.9",
70
70
  "@types/react": "^18.3.31",
@@ -77,7 +77,7 @@
77
77
  "@wise/eslint-config": "^14.2.1",
78
78
  "babel-plugin-formatjs": "^11.3.16",
79
79
  "eslint": "^9.39.5",
80
- "eslint-plugin-storybook": "^10.5.4",
80
+ "eslint-plugin-storybook": "^10.5.10",
81
81
  "gulp": "^5.0.1",
82
82
  "jest": "^29.7.0",
83
83
  "jest-environment-jsdom": "^29.7.0",
@@ -86,9 +86,9 @@
86
86
  "lodash.times": "^4.3.2",
87
87
  "react-intl": "^7.1.14",
88
88
  "react-live": "^4.1.8",
89
- "rollup": "^4.62.2",
89
+ "rollup": "^4.62.5",
90
90
  "rollup-preserve-directives": "^1.1.3",
91
- "storybook": "^10.5.4",
91
+ "storybook": "^10.5.10",
92
92
  "storybook-addon-tag-badges": "^3.1.0",
93
93
  "storybook-addon-test-codegen": "^3.0.4",
94
94
  "@transferwise/less-config": "3.2.0",
@@ -115,13 +115,13 @@
115
115
  "@transferwise/neptune-validation": "^3.3.4",
116
116
  "clsx": "^2.1.1",
117
117
  "commonmark": "^0.31.2",
118
- "core-js": "^3.49.0",
119
- "motion": "^12.42.2",
118
+ "core-js": "^3.50.0",
119
+ "motion": "^12.43.0",
120
120
  "lodash.clamp": "^4.0.3",
121
121
  "lodash.debounce": "^4.0.8",
122
122
  "merge-props": "^6.0.0",
123
123
  "react-transition-group": "^4.4.5",
124
- "virtua": "^0.50.0"
124
+ "virtua": "^0.50.4"
125
125
  },
126
126
  "publishConfig": {
127
127
  "access": "public",
package/src/FlowNavigation/FlowNavigation.css CHANGED
@@ -11,6 +11,16 @@
11
11
  min-block-size: 128px;
12
12
  }
13
13
  }
14
+ .np-flow-navigation--no-steps {
15
+ block-size: 80px;
16
+ min-block-size: 80px;
17
+ }
18
+ @media (min-width: 320.02px) {
19
+ .np-flow-navigation--no-steps {
20
+ block-size: 80px;
21
+ min-block-size: 80px;
22
+ }
23
+ }
14
24
  .np-flow-navigation--border-bottom {
15
25
  border-block-end: 1px solid rgba(0,0,0,0.10196);
16
26
  border-block-end: 1px solid #0000001a;
package/src/FlowNavigation/FlowNavigation.less CHANGED
@@ -15,6 +15,17 @@
15
15
  min-height: 128px;
16
16
  }
17
17
 
18
+ // When there are no steps, use 80px height on all screen sizes
19
+ &--no-steps {
20
+ height: 80px;
21
+ min-height: 80px;
22
+
23
+ @media (--screen-xs) {
24
+ height: 80px;
25
+ min-height: 80px;
26
+ }
27
+ }
28
+
18
29
  &--border-bottom {
19
30
  border-bottom: 1px solid var(--color-border-neutral);
20
31
  }
package/src/FlowNavigation/FlowNavigation.tsx CHANGED
@@ -52,10 +52,11 @@ const FlowNavigation = ({
52
52
  const screenSm = useScreenSize(Breakpoint.SMALL);
53
53
  const screenLg = useScreenSize(Breakpoint.LARGE);
54
54
 
55
- const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
55
+ const hasSteps = steps && steps.length > 0;
56
+ const displayGoBack = onGoBack != null && activeStep > 0;
56
57
 
58
+ const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
57
59
  const newAvatar = done ? null : avatar;
58
- const displayGoBack = onGoBack != null && activeStep > 0;
59
60
 
60
61
  const flowHeaderContent = (
61
62
  <FlowHeader
@@ -85,7 +86,7 @@ const FlowNavigation = ({
85
86
  ) : (
86
87
  <div className="np-flow-header__left">{logo}</div>
87
88
  )}
88
- {!screenSm && !done && steps && steps.length > 0 && (
89
+ {!screenSm && !done && hasSteps && (
89
90
  <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
90
91
  )}
91
92
  </>
@@ -98,7 +99,7 @@ const FlowNavigation = ({
98
99
  </div>
99
100
  }
100
101
  bottomContent={
101
- !done && steps && steps.length > 0 ? (
102
+ !done && hasSteps ? (
102
103
  <Stepper
103
104
  activeStep={activeStep}
104
105
  steps={steps}
@@ -115,6 +116,7 @@ const FlowNavigation = ({
115
116
  size="fluid"
116
117
  className={clsx('np-flow-navigation', {
117
118
  'np-flow-navigation--border-bottom': showBottomBorder,
119
+ 'np-flow-navigation--no-steps': !hasSteps || done,
118
120
  })}
119
121
  >
120
122
  {flowHeaderContent}
package/src/PocketSurface/PocketSurface.css CHANGED
@@ -146,6 +146,7 @@
146
146
  --color-interactive-control-active: #471358;
147
147
  --color-background-screen: #260a2f;
148
148
  }
149
+
149
150
  .wds-pocket-surface {
150
151
  background-color: #ffffff;
151
152
  background-color: var(--color-background-screen);
package/src/Prompt/ActionPrompt/_stories/ActionPrompt.story.tsx CHANGED
@@ -233,7 +233,11 @@ export const Sentiments: Story = {
233
233
  key={sentiment}
234
234
  sentiment={sentiment}
235
235
  title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} Action`}
236
- description={lorem10}
236
+ description={
237
+ <>
238
+ This is a <strong>{sentiment}</strong> prompt.
239
+ </>
240
+ }
237
241
  action={{ label: 'Primary', onClick: fn() }}
238
242
  actionSecondary={{ label: 'Secondary', onClick: fn() }}
239
243
  />
package/src/Prompt/InfoPrompt/_stories/InfoPrompt.story.tsx CHANGED
@@ -73,6 +73,8 @@ export default {
73
73
  },
74
74
  } satisfies Meta<InfoPromptProps>;
75
75
 
76
+ type Story = StoryObj<InfoPromptProps>;
77
+
76
78
  /**
77
79
  * Convenience controls for previewing rich markup,
78
80
  * not otherwise possible via Storybook
@@ -192,7 +194,7 @@ export const Sandbox = createSandboxStory({
192
194
  * - `warning`: Warning messages
193
195
  * - `proposition`: Promotional content (uses GiftBox icon by default)
194
196
  */
195
- export const Sentiments: StoryObj<InfoPromptProps> = {
197
+ export const Sentiments: Story = {
196
198
  render: (args: InfoPromptProps) => (
197
199
  <>
198
200
  <InfoPrompt {...args} sentiment="neutral" description="This is a neutral message." />
@@ -207,7 +209,7 @@ export const Sentiments: StoryObj<InfoPromptProps> = {
207
209
  /**
208
210
  * InfoPrompt can include both a title and description for more detailed messaging.
209
211
  */
210
- export const WithTitle: StoryObj<InfoPromptProps> = {
212
+ export const WithTitle: Story = {
211
213
  render: (args: InfoPromptProps) => (
212
214
  <>
213
215
  <InfoPrompt
@@ -236,7 +238,7 @@ export const WithTitle: StoryObj<InfoPromptProps> = {
236
238
  * Use the `action` prop to add a clickable link below the message.
237
239
  * Actions can have an `href` for navigation or an `onClick` for custom behavior.
238
240
  */
239
- export const WithAction: StoryObj<InfoPromptProps> = {
241
+ export const WithAction: Story = {
240
242
  render: (args: InfoPromptProps) => (
241
243
  <>
242
244
  <InfoPrompt
@@ -270,7 +272,7 @@ export const WithAction: StoryObj<InfoPromptProps> = {
270
272
  * **Important**: If the description contains an interactive element, do not use the `action` prop
271
273
  * simultaneously — InfoPrompt should have at most one interaction.
272
274
  */
273
- export const WithRichDescription: StoryObj<InfoPromptProps> = {
275
+ export const WithRichDescription: Story = {
274
276
  render: (args: InfoPromptProps) => (
275
277
  <>
276
278
  <InfoPrompt
@@ -282,7 +284,7 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
282
284
  <Link href="/fees" target="_blank" type="link-default">
283
285
  fee schedule
284
286
  </Link>
285
- .
287
+ . This has <strong>bold text</strong> that matches the sentiment color.
286
288
  </>
287
289
  }
288
290
  />
@@ -296,7 +298,8 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
296
298
  <Link href="/verify" type="link-default">
297
299
  verify your identity
298
300
  </Link>{' '}
299
- to continue sending money.
301
+ to continue sending money. This has <strong>bold text</strong> that matches the
302
+ sentiment color.
300
303
  </>
301
304
  }
302
305
  />
@@ -308,7 +311,7 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
308
311
  * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
309
312
  * Note: The component itself is not automatically removed - you must handle state management.
310
313
  */
311
- export const Dismissible: StoryObj<InfoPromptProps> = {
314
+ export const Dismissible: Story = {
312
315
  render: function Render() {
313
316
  const [showPrompt, setShowPrompt] = useState(true);
314
317
 
@@ -339,7 +342,7 @@ export const Dismissible: StoryObj<InfoPromptProps> = {
339
342
  * **Icon Overrides**: Replace default icons with custom icons to match the prompt's visual language to its content.
340
343
  * Success and proposition sentiments support both standard checkmark and confetti variations.
341
344
  */
342
- export const MediaTypes: StoryObj<InfoPromptProps> = {
345
+ export const MediaTypes: Story = {
343
346
  render: (args) => (
344
347
  <>
345
348
  <Title type="title-body">Default</Title>
@@ -392,7 +395,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
392
395
  *
393
396
  * [Visit wise.design](https://docs.wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
394
397
  */
395
- export const ParagraphWidth: StoryObj<PreviewStoryArgs> = {
398
+ export const ParagraphWidth: Story = {
396
399
  parameters: {
397
400
  docs: {
398
401
  canvas: {
package/src/Prompt/InlinePrompt/_stories/InlinePrompt.story.tsx CHANGED
@@ -135,19 +135,19 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
135
135
  return (
136
136
  <>
137
137
  <InlinePrompt {...props} {...previewProps} sentiment="neutral">
138
- This is a neutral prompt.
138
+ This is a <strong>neutral</strong> prompt.
139
139
  </InlinePrompt>
140
140
  <InlinePrompt {...props} {...previewProps} sentiment="negative">
141
- This is a negative prompt.
141
+ This is a <strong>negative</strong> prompt.
142
142
  </InlinePrompt>
143
143
  <InlinePrompt {...props} {...previewProps} sentiment="warning">
144
- This is a warning prompt.
144
+ This is a <strong>warning</strong> prompt.
145
145
  </InlinePrompt>
146
146
  <InlinePrompt {...props} {...previewProps} sentiment="positive">
147
- This is a positive prompt.
147
+ This is a <strong>positive</strong> prompt.
148
148
  </InlinePrompt>
149
149
  <InlinePrompt {...props} {...previewProps} sentiment="proposition">
150
- This is a proposition prompt.
150
+ This is a <strong>proposition</strong> prompt.
151
151
  </InlinePrompt>
152
152
  </>
153
153
  );
package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less CHANGED
@@ -3,7 +3,8 @@
3
3
  display: flex;
4
4
  gap: var(--Prompt-gap, var(--size-16));
5
5
  overflow-wrap: break-word;
6
- padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
6
+ padding: var(--Prompt-padding-y, var(--padding-x-small))
7
+ var(--Prompt-padding-x, var(--padding-x-small));
7
8
  text-align: left;
8
9
  word-break: break-word;
9
10
  width: 100%;
package/src/SentimentSurface/SentimentSurface.css CHANGED
@@ -442,6 +442,7 @@
442
442
  --color-sentiment-background-surface-active: #F8CD20;
443
443
  --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
444
444
  }
445
+
445
446
  .wds-sentiment-surface {
446
447
  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
447
448
  }
@@ -449,3 +450,7 @@
449
450
  background-color: var(--color-sentiment-background-surface);
450
451
  color: var(--color-sentiment-content-primary);
451
452
  }
453
+ .wds-sentiment-surface strong,
454
+ .wds-sentiment-surface b {
455
+ color: var(--color-sentiment-content-primary);
456
+ }
package/src/SentimentSurface/SentimentSurface.less CHANGED
@@ -7,4 +7,9 @@
7
7
  }
8
8
 
9
9
  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
10
+
11
+ strong,
12
+ b {
13
+ color: var(--color-sentiment-content-primary);
14
+ }
10
15
  }
package/src/SentimentSurface/_stories/SentimentSurface.story.tsx CHANGED
@@ -228,7 +228,9 @@ export const EmphasisLevels: Story = {
228
228
  sentiment={sentiment}
229
229
  emphasis="base"
230
230
  >
231
- <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
231
+ <div className="p-a-2 text-capitalize">
232
+ <strong>{sentiment}</strong> - Base emphasis
233
+ </div>
232
234
  </SentimentSurface>
233
235
  <SentimentSurface
234
236
  key={`${sentiment}-elevated`}
@@ -236,7 +238,9 @@ export const EmphasisLevels: Story = {
236
238
  sentiment={sentiment}
237
239
  emphasis="elevated"
238
240
  >
239
- <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
241
+ <div className="p-a-2 text-capitalize">
242
+ <strong>{sentiment}</strong> - Elevated emphasis
243
+ </div>
240
244
  </SentimentSurface>
241
245
  </div>
242
246
  ))}
package/src/main.css CHANGED
@@ -140,6 +140,7 @@
140
140
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
141
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
142
  }
143
+
143
144
  /**
144
145
  * Do not edit directly, this file was auto-generated.
145
146
  */
@@ -322,6 +323,7 @@
322
323
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
323
324
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
324
325
  }
326
+
325
327
  /**
326
328
  * Do not edit directly, this file was auto-generated.
327
329
  */
@@ -504,6 +506,7 @@
504
506
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
505
507
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
506
508
  }
509
+
507
510
  /**
508
511
  * Do not edit directly, this file was auto-generated.
509
512
  */
@@ -686,6 +689,7 @@
686
689
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
687
690
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
688
691
  }
692
+
689
693
  /**
690
694
  * Do not edit directly, this file was auto-generated.
691
695
  */
@@ -868,6 +872,7 @@
868
872
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
869
873
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
870
874
  }
875
+
871
876
  /**
872
877
  * Do not edit directly, this file was auto-generated.
873
878
  */
@@ -1050,6 +1055,7 @@
1050
1055
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1051
1056
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1052
1057
  }
1058
+
1053
1059
  /**
1054
1060
  * Do not edit directly, this file was auto-generated.
1055
1061
  */
@@ -1232,6 +1238,7 @@
1232
1238
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1233
1239
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1234
1240
  }
1241
+
1235
1242
  /**
1236
1243
  * Do not edit directly, this file was auto-generated.
1237
1244
  */
@@ -1415,6 +1422,7 @@
1415
1422
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1416
1423
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1417
1424
  }
1425
+
1418
1426
  /**
1419
1427
  * Do not edit directly, this file was auto-generated.
1420
1428
  */
@@ -1598,6 +1606,7 @@
1598
1606
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1599
1607
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1600
1608
  }
1609
+
1601
1610
  /**
1602
1611
  * Do not edit directly, this file was auto-generated.
1603
1612
  */
@@ -1781,6 +1790,7 @@
1781
1790
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1782
1791
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1783
1792
  }
1793
+
1784
1794
  /**
1785
1795
  * Do not edit directly, this file was auto-generated.
1786
1796
  */
@@ -1964,7 +1974,9 @@
1964
1974
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1965
1975
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1966
1976
  }
1977
+
1967
1978
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1979
+
1968
1980
  /**
1969
1981
  * Do not edit directly, this file was auto-generated.
1970
1982
  */
@@ -2409,6 +2421,7 @@
2409
2421
  --color-sentiment-background-surface-active: #F8CD20;
2410
2422
  --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
2411
2423
  }
2424
+
2412
2425
  /**
2413
2426
  * Do not edit directly, this file was auto-generated.
2414
2427
  */
@@ -2557,6 +2570,7 @@
2557
2570
  --color-interactive-control-active: #471358;
2558
2571
  --color-background-screen: #260a2f;
2559
2572
  }
2573
+
2560
2574
  @font-face {
2561
2575
  font-family: Inter;
2562
2576
  font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
19795
19809
  background-color: var(--color-sentiment-background-surface);
19796
19810
  color: var(--color-sentiment-content-primary);
19797
19811
  }
19812
+ .wds-sentiment-surface strong,
19813
+ .wds-sentiment-surface b {
19814
+ color: var(--color-sentiment-content-primary);
19815
+ }
19798
19816
  .wds-pocket-surface {
19799
19817
  background-color: #ffffff;
19800
19818
  background-color: var(--color-background-screen);
@@ -22323,6 +22341,16 @@ button.np-option {
22323
22341
  min-block-size: 128px;
22324
22342
  }
22325
22343
  }
22344
+ .np-flow-navigation--no-steps {
22345
+ block-size: 80px;
22346
+ min-block-size: 80px;
22347
+ }
22348
+ @media (min-width: 320.02px) {
22349
+ .np-flow-navigation--no-steps {
22350
+ block-size: 80px;
22351
+ min-block-size: 80px;
22352
+ }
22353
+ }
22326
22354
  .np-flow-navigation--border-bottom {
22327
22355
  border-block-end: 1px solid rgba(0,0,0,0.10196);
22328
22356
  border-block-end: 1px solid #0000001a;
package/src/styles/less/neptune.css CHANGED
@@ -140,6 +140,7 @@
140
140
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
141
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
142
  }
143
+
143
144
  /**
144
145
  * Do not edit directly, this file was auto-generated.
145
146
  */
@@ -322,6 +323,7 @@
322
323
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
323
324
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
324
325
  }
326
+
325
327
  /**
326
328
  * Do not edit directly, this file was auto-generated.
327
329
  */
@@ -504,6 +506,7 @@
504
506
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
505
507
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
506
508
  }
509
+
507
510
  /**
508
511
  * Do not edit directly, this file was auto-generated.
509
512
  */
@@ -686,6 +689,7 @@
686
689
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
687
690
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
688
691
  }
692
+
689
693
  /**
690
694
  * Do not edit directly, this file was auto-generated.
691
695
  */
@@ -868,6 +872,7 @@
868
872
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
869
873
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
870
874
  }
875
+
871
876
  /**
872
877
  * Do not edit directly, this file was auto-generated.
873
878
  */
@@ -1050,6 +1055,7 @@
1050
1055
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1051
1056
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1052
1057
  }
1058
+
1053
1059
  /**
1054
1060
  * Do not edit directly, this file was auto-generated.
1055
1061
  */
@@ -1232,6 +1238,7 @@
1232
1238
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1233
1239
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1234
1240
  }
1241
+
1235
1242
  /**
1236
1243
  * Do not edit directly, this file was auto-generated.
1237
1244
  */
@@ -1415,6 +1422,7 @@
1415
1422
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1416
1423
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1417
1424
  }
1425
+
1418
1426
  /**
1419
1427
  * Do not edit directly, this file was auto-generated.
1420
1428
  */
@@ -1598,6 +1606,7 @@
1598
1606
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1599
1607
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1600
1608
  }
1609
+
1601
1610
  /**
1602
1611
  * Do not edit directly, this file was auto-generated.
1603
1612
  */
@@ -1781,6 +1790,7 @@
1781
1790
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1782
1791
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1783
1792
  }
1793
+
1784
1794
  /**
1785
1795
  * Do not edit directly, this file was auto-generated.
1786
1796
  */
@@ -1964,6 +1974,7 @@
1964
1974
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1965
1975
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1966
1976
  }
1977
+
1967
1978
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1968
1979
  @font-face {
1969
1980
  font-family: Inter;