@transferwise/components 0.0.0-experimental-45bc551 → 0.0.0-experimental-358e009

package/build/main.css

@@ -920,6 +920,83 @@
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.wds-inline-prompt {
+  display: inline-flex;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt__media-wrapper {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
+}
 .np-dot {
   --np-dot-size: 14px;
   position: relative;
@@ -5335,103 +5412,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
-.wds-prompt {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  display: flex;
-  word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
-  text-align: left;
-  word-break: break-word;
-}
-.wds-prompt__content-wrapper {
-  display: grid;
-  grid-gap: 16px;
-  grid-gap: var(--Prompt-gap, var(--size-16));
-  gap: 16px;
-  gap: var(--Prompt-gap, var(--size-16));
-  grid-template-columns: auto 1fr;
-  width: 100%;
-}
-.wds-prompt__media-wrapper {
-  align-self: flex-start;
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-}
-.wds-prompt__media-wrapper .tw-icon-tags,
-.wds-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
-.wds-prompt__actions-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  gap: var(--Prompt-actions-gap, var(--size-8));
-  grid-column-start: 2;
-}
-@media (max-width: 991px) {
-  .wds-prompt__actions-wrapper {
-    grid-column: span 2;
-    width: 100%;
-  }
-}
-.wds-inline-prompt {
-  --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
-  display: inline-flex;
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-}
-.wds-inline-prompt:has(a),
-.wds-inline-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-inline-prompt:has(a):hover,
-.wds-inline-prompt:has(button):hover {
-  background-color: var(--color-sentiment-background-surface-hover);
-}
-.wds-inline-prompt:has(a):active,
-.wds-inline-prompt:has(button):active {
-  background-color: var(--color-sentiment-background-surface-active);
-}
-.wds-inline-prompt--full-width {
-  width: 100%;
-}
-.wds-inline-prompt--muted {
-  opacity: 0.93;
-  filter: grayscale(1);
-}
-.wds-inline-prompt a,
-.wds-inline-prompt button {
-  color: var(--color-sentiment-content-primary);
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-inline-prompt a:hover,
-.wds-inline-prompt button:hover {
-  color: var(--color-sentiment-content-primary-hover);
-}
-.wds-inline-prompt a:active,
-.wds-inline-prompt button:active {
-  color: var(--color-sentiment-content-primary-active);
-}
-.wds-inline-prompt a:first-of-type:before,
-.wds-inline-prompt button:first-of-type:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
-  stroke: currentColor;
-}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -28,7 +28,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var Body = require('../../body/Body.js');
-var PrimitivePrompt = require('../PrimitivePrompt/PrimitivePrompt.js');
+var SentimentSurface = require('../../sentimentSurface/SentimentSurface.js');
 
 const InlinePrompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.POSITIVE,
@@ -40,7 +40,7 @@ const InlinePrompt = ({
   mediaLabel,
   width = 'auto',
   'data-testid': dataTestId,
-  ...restProps
+  ...rest
 }) => {
   const surfaceSentiment = sentiment$1 === sentiment.Sentiment.POSITIVE ? 'success' : sentiment$1;
   const renderMedia = () => {
@@ -69,19 +69,21 @@ const InlinePrompt = ({
       iconLabel: mediaLabel
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
+  return /*#__PURE__*/jsxRuntime.jsxs(SentimentSurface.default, {
     sentiment: surfaceSentiment,
-    media: renderMedia(),
     "data-testid": dataTestId,
-    className: clsx.clsx('wds-inline-prompt', {
+    className: clsx.clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment$1}`, {
       'wds-inline-prompt--full-width': width === 'full',
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading
     }, className),
-    ...restProps,
-    children: /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "wds-inline-prompt__media-wrapper",
+      children: renderMedia()
+    }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
       children: children
-    })
+    })]
   });
 };
 

package/build/prompt/InlinePrompt/InlinePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n   * replaced by a plain icon.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   */\n  mediaLabel?: string;\n  /**\n   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n   * @default auto\n   */\n  width?: 'auto' | 'full';\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  width = 'auto',\n  'data-testid': dataTestId,\n  ...restProps\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <PrimitivePrompt\n      sentiment={surfaceSentiment}\n      media={renderMedia()}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        {\n          'wds-inline-prompt--full-width': width === 'full',\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...restProps}\n    >\n      <Body>{children}</Body>\n    </PrimitivePrompt>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACM,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEM,cAAA,CAACQ,+BAAe,EAAA;AACdtB,IAAAA,SAAS,EAAEY,gBAAiB;IAC5BL,KAAK,EAAEM,WAAW,EAAG;AACrB,IAAA,aAAA,EAAaH,UAAW;AACxBL,IAAAA,SAAS,EAAEkB,SAAI,CACb,mBAAmB,EACnB;MACE,+BAA+B,EAAEd,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,SAAS;IAAAL,QAAA,eAEbQ,cAAA,CAACU,YAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;KAAe;AACxB,GAAiB,CAAC;AAEtB;;;;"}
+{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n   * replaced by a plain icon.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   */\n  mediaLabel?: string;\n  /**\n   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n   * @default auto\n   */\n  width?: 'auto' | 'full';\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  width = 'auto',\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--full-width': width === 'full',\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEc,eAAA,CAACC,wBAAgB,EAAA;AACfvB,IAAAA,SAAS,EAAEY,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBL,SAAS,EAAEmB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBxB,WAAS,EAAE,EACjC;MACE,+BAA+B,EAAES,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,IAAI;AAAAL,IAAAA,QAAA,gBAERQ,cAAA,CAAA,KAAA,EAAA;AAAKT,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEO,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACW,YAAI,EAAA;AAAAnB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -22,11 +22,11 @@ import { clsx } from 'clsx';
 import 'react';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
-import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
+import SentimentSurface from '../../sentimentSurface/SentimentSurface.mjs';
 
 const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,
@@ -38,7 +38,7 @@ const InlinePrompt = ({
   mediaLabel,
   width = 'auto',
   'data-testid': dataTestId,
-  ...restProps
+  ...rest
 }) => {
   const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
   const renderMedia = () => {
@@ -67,19 +67,21 @@ const InlinePrompt = ({
       iconLabel: mediaLabel
     });
   };
-  return /*#__PURE__*/jsx(PrimitivePrompt, {
+  return /*#__PURE__*/jsxs(SentimentSurface, {
     sentiment: surfaceSentiment,
-    media: renderMedia(),
     "data-testid": dataTestId,
-    className: clsx('wds-inline-prompt', {
+    className: clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment}`, {
       'wds-inline-prompt--full-width': width === 'full',
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading
     }, className),
-    ...restProps,
-    children: /*#__PURE__*/jsx(Body, {
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "wds-inline-prompt__media-wrapper",
+      children: renderMedia()
+    }), /*#__PURE__*/jsx(Body, {
       children: children
-    })
+    })]
   });
 };
 

package/build/prompt/InlinePrompt/InlinePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n   * replaced by a plain icon.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   */\n  mediaLabel?: string;\n  /**\n   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n   * @default auto\n   */\n  width?: 'auto' | 'full';\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  width = 'auto',\n  'data-testid': dataTestId,\n  ...restProps\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <PrimitivePrompt\n      sentiment={surfaceSentiment}\n      media={renderMedia()}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        {\n          'wds-inline-prompt--full-width': width === 'full',\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...restProps}\n    >\n      <Body>{children}</Body>\n    </PrimitivePrompt>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACM,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEM,GAAA,CAACQ,eAAe,EAAA;AACdtB,IAAAA,SAAS,EAAEY,gBAAiB;IAC5BL,KAAK,EAAEM,WAAW,EAAG;AACrB,IAAA,aAAA,EAAaH,UAAW;AACxBL,IAAAA,SAAS,EAAEkB,IAAI,CACb,mBAAmB,EACnB;MACE,+BAA+B,EAAEd,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,SAAS;IAAAL,QAAA,eAEbQ,GAAA,CAACU,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;KAAe;AACxB,GAAiB,CAAC;AAEtB;;;;"}
+{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n   * replaced by a plain icon.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   */\n  mediaLabel?: string;\n  /**\n   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n   * @default auto\n   */\n  width?: 'auto' | 'full';\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  width = 'auto',\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--full-width': width === 'full',\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEc,IAAA,CAACC,gBAAgB,EAAA;AACfvB,IAAAA,SAAS,EAAEY,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBL,SAAS,EAAEmB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBxB,SAAS,EAAE,EACjC;MACE,+BAA+B,EAAES,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,IAAI;AAAAL,IAAAA,QAAA,gBAERQ,GAAA,CAAA,KAAA,EAAA;AAAKT,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEO,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACW,IAAI,EAAA;AAAAnB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/styles/main.css

@@ -920,6 +920,83 @@
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.wds-inline-prompt {
+  display: inline-flex;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt__media-wrapper {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
+}
 .np-dot {
   --np-dot-size: 14px;
   position: relative;
@@ -5335,103 +5412,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
-.wds-prompt {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  display: flex;
-  word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
-  text-align: left;
-  word-break: break-word;
-}
-.wds-prompt__content-wrapper {
-  display: grid;
-  grid-gap: 16px;
-  grid-gap: var(--Prompt-gap, var(--size-16));
-  gap: 16px;
-  gap: var(--Prompt-gap, var(--size-16));
-  grid-template-columns: auto 1fr;
-  width: 100%;
-}
-.wds-prompt__media-wrapper {
-  align-self: flex-start;
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-}
-.wds-prompt__media-wrapper .tw-icon-tags,
-.wds-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
-.wds-prompt__actions-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  gap: var(--Prompt-actions-gap, var(--size-8));
-  grid-column-start: 2;
-}
-@media (max-width: 991px) {
-  .wds-prompt__actions-wrapper {
-    grid-column: span 2;
-    width: 100%;
-  }
-}
-.wds-inline-prompt {
-  --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
-  display: inline-flex;
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-}
-.wds-inline-prompt:has(a),
-.wds-inline-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-inline-prompt:has(a):hover,
-.wds-inline-prompt:has(button):hover {
-  background-color: var(--color-sentiment-background-surface-hover);
-}
-.wds-inline-prompt:has(a):active,
-.wds-inline-prompt:has(button):active {
-  background-color: var(--color-sentiment-background-surface-active);
-}
-.wds-inline-prompt--full-width {
-  width: 100%;
-}
-.wds-inline-prompt--muted {
-  opacity: 0.93;
-  filter: grayscale(1);
-}
-.wds-inline-prompt a,
-.wds-inline-prompt button {
-  color: var(--color-sentiment-content-primary);
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-inline-prompt a:hover,
-.wds-inline-prompt button:hover {
-  color: var(--color-sentiment-content-primary-hover);
-}
-.wds-inline-prompt a:active,
-.wds-inline-prompt button:active {
-  color: var(--color-sentiment-content-primary-active);
-}
-.wds-inline-prompt a:first-of-type:before,
-.wds-inline-prompt button:first-of-type:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
-  stroke: currentColor;
-}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -1,9 +1,18 @@
 .wds-inline-prompt {
-  --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
   display: inline-flex;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
   border-radius: 10px;
   border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
 }
 .wds-inline-prompt:has(a),
 .wds-inline-prompt:has(button) {
@@ -45,6 +54,18 @@
   position: absolute;
   inset: 0;
 }
+.wds-inline-prompt__media-wrapper {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
   width: 16px;
   width: var(--size-16);