@transferwise/components 46.124.1 → 46.125.0

package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { ReactNode } from 'react';\n\nexport type PrimitivePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: ReactNode;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n  sentiment = 'success',\n  media,\n  actions,\n  onDismiss,\n  className,\n  children,\n  ...restProps\n}: PrimitivePromptProps) => {\n  const intl = useIntl();\n\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n      {...restProps}\n    >\n      <div className=\"wds-prompt__content-wrapper\">\n        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n        {children}\n        {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton\n          size={24}\n          priority=\"secondary\"\n          aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n          onClick={onDismiss}\n        >\n          <Cross />\n        </IconButton>\n      )}\n    </SentimentSurface>\n  );\n};\n"],"names":["PrimitivePrompt","sentiment","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsxs","SentimentSurface","clsx","_jsx","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;AAmCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,oBACEC,eAAA,CAACC,wBAAgB,EAAA;AACfV,IAAAA,SAAS,EAAEA,SAAU;IACrBI,SAAS,EAAEO,SAAI,CAAC,YAAY,EAAE,eAAeX,SAAS,CAAA,CAAE,EAAEI,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,gBAEbI,eAAA,CAAA,KAAA,EAAA;AAAKL,MAAAA,SAAS,EAAC,6BAA6B;AAAAC,MAAAA,QAAA,gBAC1CO,cAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAEO,SAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;AAAK,OAAM,CAC/D,EAACI,QAAQ,EACRH,OAAO,iBAAIU,cAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;AAAA,KACrE,CACL,EAACC,SAAS,iBACRS,cAAA,CAACC,kBAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,EAAG;AACTC,MAAAA,QAAQ,EAAC,WAAW;AACpB,MAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,MAAAA,OAAO,EAAEhB,SAAU;AAAAE,MAAAA,QAAA,eAEnBO,cAAA,CAACQ,WAAK,EAAA,EAAA;AACR,KAAY,CACb;AAAA,GACe,CAAC;AAEvB;;;;"}
+{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { ReactNode } from 'react';\n\nexport type PrimitivePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: ReactNode;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n  sentiment = 'success',\n  media,\n  actions,\n  onDismiss,\n  className,\n  children,\n  ...restProps\n}: PrimitivePromptProps) => {\n  const intl = useIntl();\n\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n      {...restProps}\n    >\n      <div\n        className={clsx('wds-prompt__content-wrapper', {\n          'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n        })}\n      >\n        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n        {children}\n        {onDismiss && (\n          <IconButton\n            size={24}\n            priority=\"secondary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={onDismiss}\n          >\n            <Cross />\n          </IconButton>\n        )}\n        {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n      </div>\n    </SentimentSurface>\n  );\n};\n"],"names":["PrimitivePrompt","sentiment","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;AAmCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,oBACEC,cAAA,CAACC,wBAAgB,EAAA;AACfV,IAAAA,SAAS,EAAEA,SAAU;IACrBI,SAAS,EAAEO,SAAI,CAAC,YAAY,EAAE,eAAeX,SAAS,CAAA,CAAE,EAAEI,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbO,eAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAEO,SAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACR;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHI,cAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAEO,SAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRM,cAAA,CAACI,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEhB,SAAU;AAAAE,QAAAA,QAAA,eAEnBI,cAAA,CAACW,WAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAlB,OAAO,iBAAIO,cAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB;;;;"}

package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs

@@ -4,7 +4,7 @@ import SentimentSurface from '../../sentimentSurface/SentimentSurface.mjs';
 import IconButton from '../../iconButton/IconButton.mjs';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const PrimitivePrompt = ({
   sentiment = 'success',
@@ -16,26 +16,28 @@ const PrimitivePrompt = ({
   ...restProps
 }) => {
   const intl = useIntl();
-  return /*#__PURE__*/jsxs(SentimentSurface, {
+  return /*#__PURE__*/jsx(SentimentSurface, {
     sentiment: sentiment,
     className: clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
     ...restProps,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "wds-prompt__content-wrapper",
+    children: /*#__PURE__*/jsxs("div", {
+      className: clsx('wds-prompt__content-wrapper', {
+        'wds-prompt__content-wrapper--with-dismiss': !!onDismiss
+      }),
       children: [/*#__PURE__*/jsx("div", {
         className: clsx('wds-prompt__media-wrapper'),
         children: media
-      }), children, actions && /*#__PURE__*/jsx("div", {
+      }), children, onDismiss && /*#__PURE__*/jsx(IconButton, {
+        size: 24,
+        priority: "secondary",
+        "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
+        onClick: onDismiss,
+        children: /*#__PURE__*/jsx(Cross, {})
+      }), actions && /*#__PURE__*/jsx("div", {
         className: "wds-prompt__actions-wrapper",
         children: actions
       })]
-    }), onDismiss && /*#__PURE__*/jsx(IconButton, {
-      size: 24,
-      priority: "secondary",
-      "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
-      onClick: onDismiss,
-      children: /*#__PURE__*/jsx(Cross, {})
-    })]
+    })
   });
 };
 

package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { ReactNode } from 'react';\n\nexport type PrimitivePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: ReactNode;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n  sentiment = 'success',\n  media,\n  actions,\n  onDismiss,\n  className,\n  children,\n  ...restProps\n}: PrimitivePromptProps) => {\n  const intl = useIntl();\n\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n      {...restProps}\n    >\n      <div className=\"wds-prompt__content-wrapper\">\n        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n        {children}\n        {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton\n          size={24}\n          priority=\"secondary\"\n          aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n          onClick={onDismiss}\n        >\n          <Cross />\n        </IconButton>\n      )}\n    </SentimentSurface>\n  );\n};\n"],"names":["PrimitivePrompt","sentiment","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsxs","SentimentSurface","clsx","_jsx","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;AAmCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,IAAA,CAACC,gBAAgB,EAAA;AACfV,IAAAA,SAAS,EAAEA,SAAU;IACrBI,SAAS,EAAEO,IAAI,CAAC,YAAY,EAAE,eAAeX,SAAS,CAAA,CAAE,EAAEI,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,gBAEbI,IAAA,CAAA,KAAA,EAAA;AAAKL,MAAAA,SAAS,EAAC,6BAA6B;AAAAC,MAAAA,QAAA,gBAC1CO,GAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAEO,IAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;AAAK,OAAM,CAC/D,EAACI,QAAQ,EACRH,OAAO,iBAAIU,GAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;AAAA,KACrE,CACL,EAACC,SAAS,iBACRS,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,EAAG;AACTC,MAAAA,QAAQ,EAAC,WAAW;AACpB,MAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,MAAAA,OAAO,EAAEhB,SAAU;AAAAE,MAAAA,QAAA,eAEnBO,GAAA,CAACQ,KAAK,EAAA,EAAA;AACR,KAAY,CACb;AAAA,GACe,CAAC;AAEvB;;;;"}
+{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { ReactNode } from 'react';\n\nexport type PrimitivePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: ReactNode;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n  sentiment = 'success',\n  media,\n  actions,\n  onDismiss,\n  className,\n  children,\n  ...restProps\n}: PrimitivePromptProps) => {\n  const intl = useIntl();\n\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n      {...restProps}\n    >\n      <div\n        className={clsx('wds-prompt__content-wrapper', {\n          'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n        })}\n      >\n        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n        {children}\n        {onDismiss && (\n          <IconButton\n            size={24}\n            priority=\"secondary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={onDismiss}\n          >\n            <Cross />\n          </IconButton>\n        )}\n        {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n      </div>\n    </SentimentSurface>\n  );\n};\n"],"names":["PrimitivePrompt","sentiment","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;AAmCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfV,IAAAA,SAAS,EAAEA,SAAU;IACrBI,SAAS,EAAEO,IAAI,CAAC,YAAY,EAAE,eAAeX,SAAS,CAAA,CAAE,EAAEI,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbO,IAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAEO,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACR;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHI,GAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAEO,IAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRM,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEhB,SAAU;AAAAE,QAAAA,QAAA,eAEnBI,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAlB,OAAO,iBAAIO,GAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB;;;;"}

package/build/styles/main.css

@@ -5337,8 +5337,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .wds-prompt {
   border-radius: 10px;
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
   padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
@@ -5354,6 +5356,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   grid-template-columns: auto 1fr;
   width: 100%;
 }
+.wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto 1fr auto;
+}
 .wds-prompt__media-wrapper {
   align-self: flex-start;
   padding-top: calc(4px - 1px);
@@ -5369,12 +5374,16 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
+  grid-column-end: 3;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
   }
+  .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
 }
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
@@ -7423,3 +7432,24 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/build/styles/prompt/ActionPrompt/ActionPrompt.css

@@ -0,0 +1,21 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -1,7 +1,9 @@
 .wds-prompt {
   border-radius: 10px;
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
   padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
@@ -17,6 +19,9 @@
   grid-template-columns: auto 1fr;
   width: 100%;
 }
+.wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto 1fr auto;
+}
 .wds-prompt__media-wrapper {
   align-self: flex-start;
   padding-top: calc(4px - 1px);
@@ -32,10 +37,14 @@
   gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
+  grid-column-end: 3;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
   }
+  .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
 }

package/build/tabs/Tabs.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var web = require('@react-spring/web');
 var clsx = require('clsx');
 var clamp = require('lodash.clamp');
 var React = require('react');
@@ -40,17 +39,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var clamp__default = /*#__PURE__*/_interopDefault(clamp);
 
 const MIN_INDEX = 0;
-const SpacerWidth = {
-  default: 0,
-  xs: 8,
-  sm: 16,
-  md: 24,
-  lg: 32
-};
 class Tabs extends React.Component {
   static defaultProps = {
     changeTabOnSwipe: true,
-    transitionSpacing: 'default',
     headerWidth: width.Width.BLOCK
   };
   containerReference = /*#__PURE__*/React.createRef();
@@ -58,25 +49,15 @@ class Tabs extends React.Component {
     super(props);
     this.state = {
       start: null,
-      translateX: 0,
-      translateFrom: 0,
-      translateTo: 0,
       translateLineX: null,
-      isAnimating: false,
       isSwiping: false,
       isScrolling: false,
-      lastSwipeVelocity: 0,
-      fullWidthTabs: props.headerWidth === width.Width.BLOCK,
-      currentSwipe: [],
-      selectedTabIndex: props.selected
+      fullWidthTabs: props.headerWidth === width.Width.BLOCK
     };
   }
   container = null;
   containerWidth = 0;
   tabRefs = [];
-  get filteredTabsLength() {
-    return this.props.tabs.filter(tab => !tab.disabled).length;
-  }
   get MAX_INDEX() {
     return this.props.tabs.length - 1;
   }
@@ -86,7 +67,7 @@ class Tabs extends React.Component {
     } = this.props;
     this.setTabWidth();
     this.switchTab(clamp__default.default(selected, MIN_INDEX, this.MAX_INDEX));
-    this.animateToTab(clamp__default.default(selected, MIN_INDEX, this.MAX_INDEX), true);
+    this.animateLine(clamp__default.default(selected, MIN_INDEX, this.MAX_INDEX));
     document.body.addEventListener('touchmove', this.disableScroll, {
       passive: false
     });
@@ -95,7 +76,7 @@ class Tabs extends React.Component {
     });
     window.addEventListener('resize', this.handleResize);
   }
-  componentDidUpdate(previousProps, previousState) {
+  componentDidUpdate(previousProps) {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
@@ -108,15 +89,11 @@ class Tabs extends React.Component {
     const previousDisabledTabsLength = previousProps.tabs.filter(tab => !tab.disabled).length;
     const currentHeaderWidth = this.props.headerWidth;
     const previousFullHeaderWidth = previousProps.headerWidth;
-    const {
-      animatePanelsOnClick
-    } = this.props;
-    const instantOnClick = !animatePanelsOnClick && !previousState.isSwiping;
     if (currentHeaderWidth !== previousFullHeaderWidth || currentTabsLength !== previousTabsLength) {
       this.setTabWidth();
     }
     if (currentSelected !== previousSelected || currentDisabledTabsLength !== previousDisabledTabsLength || currentSelectedTabIsDisabled !== previousSelectedTabIsDisabled) {
-      this.animateToTab(clamp__default.default(currentSelected, MIN_INDEX, this.MAX_INDEX), currentSelected === previousSelected || instantOnClick);
+      this.animateLine(clamp__default.default(currentSelected, MIN_INDEX, this.MAX_INDEX));
     }
   }
   componentWillUnmount() {
@@ -126,11 +103,6 @@ class Tabs extends React.Component {
   }
   handleResize = () => {
     this.setContainerWidth(this.container);
-    this.setState(({
-      selectedTabIndex
-    }) => ({
-      translateTo: -(this.containerWidth * selectedTabIndex)
-    }));
   };
   setContainerRefAndWidth = node => {
     this.container = node;
@@ -220,60 +192,17 @@ class Tabs extends React.Component {
     return nextSelected;
   };
   swipedOverHalfOfContainer = difference => difference / this.containerWidth >= 0.5;
-  calculateApplicableDragDifference = ({
-    currentSelected,
-    nextSelected,
-    start,
-    end
-  }) => {
-    const difference = utils.getSwipeDifference(start, end);
-    const elasticDrag = utils.getElasticDragDifference(difference);
-    if (utils.swipedLeftToRight(start, end)) {
-      if (currentSelected > MIN_INDEX && currentSelected !== nextSelected) {
-        return Math.min(difference, this.containerWidth);
-      }
-      return elasticDrag;
-    }
-    if (utils.swipedRightToLeft(start, end)) {
-      if (currentSelected < this.MAX_INDEX && currentSelected !== nextSelected) {
-        return -Math.min(difference, this.containerWidth);
-      }
-      return -elasticDrag;
-    }
-    return false;
-  };
   switchTab = index => {
     const {
       onTabSelect
     } = this.props;
     onTabSelect(index);
   };
-  getTabIndexWithoutDisabledTabs(index) {
-    return index - this.props.tabs.slice(0, index).filter(tab => tab.disabled).length;
-  }
-  animateToTab = (index, instant) => {
-    this.animateLine(index);
-    this.animatePanel(this.getTabIndexWithoutDisabledTabs(index), instant);
-  };
   animateLine = index => {
     this.setState(previousState => ({
       translateLineX: previousState.fullWidthTabs ? `${index * 100}%` : `${this.getDistanceToSelectedTab(index)}px`
     }));
   };
-  // Pass `instant` to set the `translateX` to the new panel with no transition
-  animatePanel = (index, instant = false) => {
-    const {
-      translateTo: currentTranslateTo
-    } = this.state;
-    const translateFrom = currentTranslateTo;
-    const translateTo = -(this.containerWidth * index);
-    this.setState({
-      selectedTabIndex: index,
-      isAnimating: !instant && translateFrom !== translateTo,
-      translateFrom,
-      translateTo
-    });
-  };
   disableScroll = event => {
     const {
       isSwiping
@@ -297,10 +226,8 @@ class Tabs extends React.Component {
       time: Date.now()
     };
     this.setState({
-      start,
-      currentSwipe: [start]
+      start
     });
-    event.persist();
   };
   handleTouchMove = event => {
     const {
@@ -312,7 +239,6 @@ class Tabs extends React.Component {
     const {
       selected: currentSelectedFromProps
     } = this.props;
-    const selected = this.getTabIndexWithoutDisabledTabs(currentSelectedFromProps);
     const end = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
@@ -324,7 +250,6 @@ class Tabs extends React.Component {
       isScrolling,
       isSwiping
     } = this.state;
-    event.persist();
     if (!isScrolling && !isSwiping) {
       if (difference > yAxisDifference) {
         isSwiping = true;
@@ -339,18 +264,6 @@ class Tabs extends React.Component {
     if (isSwiping) {
       const nextSelected = this.getTabToSelect(currentSelectedFromProps, start, end);
       this.animateLine(this.swipedOverHalfOfContainer(difference) ? nextSelected : currentSelectedFromProps);
-      const dragDifference = this.calculateApplicableDragDifference({
-        currentSelected: currentSelectedFromProps,
-        nextSelected,
-        start,
-        end
-      });
-      const translateX = dragDifference ? -(this.containerWidth * selected) + dragDifference : false;
-      this.setState(state => ({
-        currentSwipe: [...state.currentSwipe, end],
-        translateFrom: translateX || state.translateFrom,
-        translateTo: translateX || state.translateTo
-      }));
     }
   };
   handleTouchEnd = event => {
@@ -370,23 +283,15 @@ class Tabs extends React.Component {
       time: Date.now()
     };
     const difference = utils.getSwipeDifference(start, end);
-    const velocity = utils.getVelocity([...this.state.currentSwipe, end]);
-    this.setState({
-      currentSwipe: []
-    });
     let nextSelected = selected;
-    event.persist();
     if (isSwiping) {
       if (utils.swipeShouldChangeTab(start, end) || this.swipedOverHalfOfContainer(difference)) {
         nextSelected = this.getTabToSelect(nextSelected, start, end);
       }
       if (nextSelected !== selected) {
         this.switchTab(nextSelected);
-        this.setState({
-          lastSwipeVelocity: velocity
-        });
       } else {
-        this.animateToTab(nextSelected);
+        this.animateLine(nextSelected);
       }
     }
     this.setState({
@@ -401,34 +306,13 @@ class Tabs extends React.Component {
       name,
       selected,
       className,
-      transitionSpacing,
       headerWidth
     } = this.props;
     const {
-      isSwiping,
       translateLineX,
-      isAnimating,
-      translateFrom,
-      translateTo,
-      lastSwipeVelocity,
       fullWidthTabs
     } = this.state;
-    const spacer = SpacerWidth[transitionSpacing];
-    const tabsLength = this.filteredTabsLength;
-    const distanceSwiped = Math.abs(-translateFrom - this.containerWidth * selected);
-    const remainingContainerToTravel = isSwiping ? 1 - distanceSwiped / this.containerWidth : 1 - Math.abs(distanceSwiped / this.containerWidth - 1);
-    const restrictedVelocity = (Number.isNaN(remainingContainerToTravel) ? 0 : remainingContainerToTravel) * Math.min(10 * Math.E, lastSwipeVelocity * 10 * Math.E);
-    const hidePanelOverflow = isAnimating || isSwiping;
-    const sliderWidth = tabsLength * this.containerWidth + spacer * 2;
-    // Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
-    const Spacer = ({
-      id
-    }) => spacer > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        width: spacer,
-        display: hidePanelOverflow ? 'block' : 'none'
-      }
-    }, id);
+    const selectedTab = tabs[selected];
     return /*#__PURE__*/jsxRuntime.jsx(DirectionProvider.DirectionContext.Consumer, {
       children: direction$1 => {
         const isRTL = direction$1 === direction.Direction.RTL;
@@ -478,55 +362,14 @@ class Tabs extends React.Component {
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
             ref: this.setContainerRefAndWidth,
             className: "tabs__panel-container",
-            style: {
-              overflow: hidePanelOverflow ? 'hidden' : 'visible'
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx(web.Spring, {
-              from: {
-                transform: `translateX(${translateFrom - spacer}px)`
-              },
-              to: {
-                transform: `translateX(${translateTo - spacer}px)`
-              },
-              config: {
-                precision: isSwiping ? 1 : 0.01,
-                velocity: !isSwiping ? restrictedVelocity : 0,
-                clamp: true
-              },
-              onRest: () => {
-                if (isAnimating) {
-                  this.setState({
-                    isAnimating: false,
-                    lastSwipeVelocity: 0
-                  });
-                }
+            children: selectedTab && !selectedTab.disabled ? /*#__PURE__*/jsxRuntime.jsx(TabPanel.default, {
+              tabId: `${name}-tab-${selected}`,
+              id: `${name}-panel-${selected}`,
+              style: {
+                width: '100%'
               },
-              children: props => /*#__PURE__*/jsxRuntime.jsx(web.animated.div, {
-                className: "tabs__slider",
-                style: {
-                  width: hidePanelOverflow ? `${sliderWidth}px` : '100%',
-                  transform: hidePanelOverflow ? props.transform : 'translateX(0px)'
-                },
-                children: tabs.map(({
-                  content,
-                  disabled
-                }, index) => !disabled ? /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
-                  children: [index === selected && /*#__PURE__*/jsxRuntime.jsx(Spacer, {
-                    id: "left-spacer"
-                  }), /*#__PURE__*/jsxRuntime.jsx(TabPanel.default, {
-                    tabId: `${name}-tab-${index}`,
-                    id: `${name}-panel-${index}`,
-                    style: {
-                      width: hidePanelOverflow ? `${this.containerWidth}px` : '100%',
-                      display: hidePanelOverflow || index === selected ? 'block' : 'none'
-                    },
-                    children: content
-                  }, tabs[index].title), index === selected && /*#__PURE__*/jsxRuntime.jsx(Spacer, {
-                    id: "right-spacer"
-                  })]
-                }, `${tabs[index].title}-fragment`) : null)
-              })
-            })
+              children: selectedTab.content
+            }, selectedTab.title) : null
           })]
         });
       }