@transferwise/components 46.124.1 → 46.125.0

package/build/field/Field.js

@@ -26,6 +26,16 @@ require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
+require('../statusIcon/StatusIcon.js');
+require('../body/Body.js');
+require('../button/Button.resolver.js');
+require('../badge/Badge.js');
+require('@wise/art');
+require('@transferwise/neptune-validation');
+require('../provider/direction/DirectionProvider.js');
+require('../sentimentSurface/SentimentSurface.js');
+require('../primitives/PrimitiveButton/PrimitiveButton.js');
+require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 var contexts = require('../inputs/contexts.js');
 var Label = require('../label/Label.js');
 

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/field/Field.mjs

@@ -24,6 +24,16 @@ import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
+import '../statusIcon/StatusIcon.mjs';
+import '../body/Body.mjs';
+import '../button/Button.resolver.mjs';
+import '../badge/Badge.mjs';
+import '@wise/art';
+import '@transferwise/neptune-validation';
+import '../provider/direction/DirectionProvider.mjs';
+import '../sentimentSurface/SentimentSurface.mjs';
+import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
+import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
 import { Label as LabelNamespace } from '../label/Label.mjs';
 

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,gBAAgB;EAChBC,cAAc;EACdC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAK,CACG,KAAI;AACf,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMR,SAAS,GAAGM,KAAK,CAACG,KAAK,GAAGP,SAAS,CAACQ,QAAQ,GAAGT,QAAQ;AAC7D,EAAA,MAAMP,OAAO,GAAGC,WAAW,IAAIW,KAAK,CAACG,KAAK;AAC1C,EAAA,MAAME,QAAQ,GAAGX,SAAS,KAAKE,SAAS,CAACQ,QAAQ;AAEjD,EAAA,MAAME,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE;EAC/B,MAAME,OAAO,GAAGxB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIuB,eAAe,GAAIE,SAAS;AAEjE,EAAA,MAAMC,SAAS,GAAGJ,KAAK,EAAE;AACzB,EAAA,MAAMK,aAAa,GAAGL,KAAK,EAAE;AAE7B;;;AAGG;EACH,SAASM,oBAAoBA,GAAA;IAC3B,MAAMC,UAAU,GAAG,EAAE;AACrB,IAAA,IAAIrB,WAAW,EAAE;AACfqB,MAAAA,UAAU,CAACC,IAAI,CAACH,aAAa,CAAC;AAChC,IAAA;AACA,IAAA,IAAIxB,OAAO,EAAE;AACX0B,MAAAA,UAAU,CAACC,IAAI,CAACJ,SAAS,CAAC;AAC5B,IAAA;AACA,IAAA,OAAOG,UAAU,CAACE,MAAM,GAAG,CAAC,GAAGF,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC,GAAGP,SAAS;AACjE,EAAA;EAEA,oBACEQ,GAAA,CAACC,yBAAyB,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEnC,MAAAA,EAAE,EAAEqB,OAAO;AAAEe,MAAAA,GAAG,EAAEpB;KAAW;IAAAF,QAAA,eAC/DmB,GAAA,CAACI,sBAAsB,EAAA;AAACF,MAAAA,KAAK,EAAEX,OAAQ;MAAAV,QAAA,eACrCmB,GAAA,CAACK,wBAAwB,EAAA;QAACH,KAAK,EAAEP,oBAAoB,EAAG;QAAAd,QAAA,eACtDmB,GAAA,CAACM,oBAAoB,EAAA;AAACJ,UAAAA,KAAK,EAAEf,QAAS;AAAAN,UAAAA,QAAA,eACpC0B,IAAA,CAAA,KAAA,EAAA;AACE3B,YAAAA,SAAS,EAAE4B,IAAI,CACb,6BAA6B,EAC7B;AACE,cAAA,aAAa,EAAEhC,SAAS,KAAKE,SAAS,CAAC+B,QAAQ;AAC/C,cAAA,aAAa,EAAEjC,SAAS,KAAKE,SAAS,CAACgC,OAAO;AAC9C,cAAA,WAAW,EAAEvB,QAAQ;AACrB,cAAA,UAAU,EAAEX,SAAS,KAAKE,SAAS,CAACC;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDb,KAAK,IAAI,IAAI,gBACZuC,IAAA,CAAAI,QAAA,EAAA;cAAA9B,QAAA,EAAA,cACEmB,GAAA,CAACY,cAAK,EAAA;AAACT,gBAAAA,GAAG,EAAEpB,QAAS;AAAChB,gBAAAA,EAAE,EAAEqB,OAAQ;AAACyB,gBAAAA,OAAO,EAAEtB,OAAQ;gBAAAV,QAAA,EACjDZ,QAAQ,GAAGD,KAAK,gBAAGgC,GAAA,CAACY,cAAK,CAACE,QAAQ,EAAA;AAAAjC,kBAAAA,QAAA,EAAEb;iBAAsB;AAAC,eACvD,CACP,eAAAgC,GAAA,CAACY,cAAK,CAACG,WAAW,EAAA;AAAChD,gBAAAA,EAAE,EAAE2B,aAAc;AAAAb,gBAAAA,QAAA,EAAEN;eAA+B,CACtE,eAAAyB,GAAA,CAAA,KAAA,EAAA;AAAKpB,gBAAAA,SAAS,EAAC,kBAAkB;AAAAC,gBAAAA,QAAA,EAAEA;AAAQ,eAAM,CACnD;aAAA,CAAG,GAEHA,QACD,EAEAX,OAAO,iBACN8B,GAAA,CAACgB,YAAY,EAAA;AACXxC,cAAAA,SAAS,EAAEA,SAAU;AACrBT,cAAAA,EAAE,EAAE0B,SAAU;AACdwB,cAAAA,UAAU,EAAE7C,gBAAiB;AAC7BQ,cAAAA,SAAS,EAAC,kBAAkB;AAC5BsC,cAAAA,OAAO,EAAE7C,cAAe;AACxB8C,cAAAA,KAAK,EAAC,MAAM;AAAAtC,cAAAA,QAAA,EAEXX;AAAO,aACI,CACf;WACE;SACe;OACE;KACJ;AAC1B,GAA2B,CAAC;AAEhC;;;;"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,gBAAgB;EAChBC,cAAc;EACdC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAK,CACG,KAAI;AACf,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMR,SAAS,GAAGM,KAAK,CAACG,KAAK,GAAGP,SAAS,CAACQ,QAAQ,GAAGT,QAAQ;AAC7D,EAAA,MAAMP,OAAO,GAAGC,WAAW,IAAIW,KAAK,CAACG,KAAK;AAC1C,EAAA,MAAME,QAAQ,GAAGX,SAAS,KAAKE,SAAS,CAACQ,QAAQ;AAEjD,EAAA,MAAME,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE;EAC/B,MAAME,OAAO,GAAGxB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIuB,eAAe,GAAIE,SAAS;AAEjE,EAAA,MAAMC,SAAS,GAAGJ,KAAK,EAAE;AACzB,EAAA,MAAMK,aAAa,GAAGL,KAAK,EAAE;AAE7B;;;AAGG;EACH,SAASM,oBAAoBA,GAAA;IAC3B,MAAMC,UAAU,GAAG,EAAE;AACrB,IAAA,IAAIrB,WAAW,EAAE;AACfqB,MAAAA,UAAU,CAACC,IAAI,CAACH,aAAa,CAAC;AAChC,IAAA;AACA,IAAA,IAAIxB,OAAO,EAAE;AACX0B,MAAAA,UAAU,CAACC,IAAI,CAACJ,SAAS,CAAC;AAC5B,IAAA;AACA,IAAA,OAAOG,UAAU,CAACE,MAAM,GAAG,CAAC,GAAGF,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC,GAAGP,SAAS;AACjE,EAAA;EAEA,oBACEQ,GAAA,CAACC,yBAAyB,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEnC,MAAAA,EAAE,EAAEqB,OAAO;AAAEe,MAAAA,GAAG,EAAEpB;KAAW;IAAAF,QAAA,eAC/DmB,GAAA,CAACI,sBAAsB,EAAA;AAACF,MAAAA,KAAK,EAAEX,OAAQ;MAAAV,QAAA,eACrCmB,GAAA,CAACK,wBAAwB,EAAA;QAACH,KAAK,EAAEP,oBAAoB,EAAG;QAAAd,QAAA,eACtDmB,GAAA,CAACM,oBAAoB,EAAA;AAACJ,UAAAA,KAAK,EAAEf,QAAS;AAAAN,UAAAA,QAAA,eACpC0B,IAAA,CAAA,KAAA,EAAA;AACE3B,YAAAA,SAAS,EAAE4B,IAAI,CACb,6BAA6B,EAC7B;AACE,cAAA,aAAa,EAAEhC,SAAS,KAAKE,SAAS,CAAC+B,QAAQ;AAC/C,cAAA,aAAa,EAAEjC,SAAS,KAAKE,SAAS,CAACgC,OAAO;AAC9C,cAAA,WAAW,EAAEvB,QAAQ;AACrB,cAAA,UAAU,EAAEX,SAAS,KAAKE,SAAS,CAACC;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDb,KAAK,IAAI,IAAI,gBACZuC,IAAA,CAAAI,QAAA,EAAA;cAAA9B,QAAA,EAAA,cACEmB,GAAA,CAACY,cAAK,EAAA;AAACT,gBAAAA,GAAG,EAAEpB,QAAS;AAAChB,gBAAAA,EAAE,EAAEqB,OAAQ;AAACyB,gBAAAA,OAAO,EAAEtB,OAAQ;gBAAAV,QAAA,EACjDZ,QAAQ,GAAGD,KAAK,gBAAGgC,GAAA,CAACY,cAAK,CAACE,QAAQ,EAAA;AAAAjC,kBAAAA,QAAA,EAAEb;iBAAsB;AAAC,eACvD,CACP,eAAAgC,GAAA,CAACY,cAAK,CAACG,WAAW,EAAA;AAAChD,gBAAAA,EAAE,EAAE2B,aAAc;AAAAb,gBAAAA,QAAA,EAAEN;eAA+B,CACtE,eAAAyB,GAAA,CAAA,KAAA,EAAA;AAAKpB,gBAAAA,SAAS,EAAC,kBAAkB;AAAAC,gBAAAA,QAAA,EAAEA;AAAQ,eAAM,CACnD;aAAA,CAAG,GAEHA,QACD,EAEAX,OAAO,iBACN8B,GAAA,CAACgB,YAAY,EAAA;AACXxC,cAAAA,SAAS,EAAEA,SAAU;AACrBT,cAAAA,EAAE,EAAE0B,SAAU;AACdwB,cAAAA,UAAU,EAAE7C,gBAAiB;AAC7BQ,cAAAA,SAAS,EAAC,kBAAkB;AAC5BsC,cAAAA,OAAO,EAAE7C,cAAe;AACxB8C,cAAAA,KAAK,EAAC,MAAM;AAAAtC,cAAAA,QAAA,EAEXX;AAAO,aACI,CACf;WACE;SACe;OACE;KACJ;AAC1B,GAA2B,CAAC;AAEhC;;;;"}

package/build/index.js

@@ -52,6 +52,7 @@ var infoPresentations = require('./info/infoPresentations.js');
 var Info = require('./info/Info.js');
 var InlineAlert = require('./inlineAlert/InlineAlert.js');
 var InlinePrompt = require('./prompt/InlinePrompt/InlinePrompt.js');
+var ActionPrompt = require('./prompt/ActionPrompt/ActionPrompt.js');
 var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayFormat.js');
 var Input = require('./inputs/Input.js');
 var InputGroup = require('./inputs/InputGroup.js');
@@ -211,6 +212,7 @@ Object.defineProperty(exports, "InfoPresentation", {
 exports.Info = Info.default;
 exports.InlineAlert = InlineAlert.default;
 exports.InlinePrompt = InlinePrompt.InlinePrompt;
+exports.ActionPrompt = ActionPrompt.ActionPrompt;
 exports.InputWithDisplayFormat = InputWithDisplayFormat.default;
 exports.Input = Input.Input;
 exports.InputGroup = InputGroup.InputGroup;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -50,6 +50,7 @@ export { InfoPresentation } from './info/infoPresentations.mjs';
 export { default as Info } from './info/Info.mjs';
 export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
 export { InlinePrompt } from './prompt/InlinePrompt/InlinePrompt.mjs';
+export { ActionPrompt } from './prompt/ActionPrompt/ActionPrompt.mjs';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/InputWithDisplayFormat.mjs';
 export { Input } from './inputs/Input.mjs';
 export { InputGroup } from './inputs/InputGroup.mjs';

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.js

@@ -29,6 +29,16 @@ require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ListItemContext = require('../ListItemContext.js');
 var InlinePrompt = require('../../prompt/InlinePrompt/InlinePrompt.js');
+require('../../statusIcon/StatusIcon.js');
+require('../../body/Body.js');
+require('../../button/Button.resolver.js');
+require('../../badge/Badge.js');
+require('@wise/art');
+require('@transferwise/neptune-validation');
+require('../../provider/direction/DirectionProvider.js');
+require('../../sentimentSurface/SentimentSurface.js');
+require('../../primitives/PrimitiveButton/PrimitiveButton.js');
+require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 
 const Prompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,

package/build/listItem/Prompt/ListItemPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}
+{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -25,6 +25,16 @@ import '../../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { ListItemContext } from '../ListItemContext.mjs';
 import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
+import '../../statusIcon/StatusIcon.mjs';
+import '../../body/Body.mjs';
+import '../../button/Button.resolver.mjs';
+import '../../badge/Badge.mjs';
+import '@wise/art';
+import '@transferwise/neptune-validation';
+import '../../provider/direction/DirectionProvider.mjs';
+import '../../sentimentSurface/SentimentSurface.mjs';
+import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
+import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 
 const Prompt = ({
   sentiment = Sentiment.NEUTRAL,

package/build/listItem/Prompt/ListItemPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;"}

package/build/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/prompt/ActionPrompt/ActionPrompt.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var StatusIcon = require('../../statusIcon/StatusIcon.js');
+var Body = require('../../body/Body.js');
+var Button_resolver = require('../../button/Button.resolver.js');
+require('../../common/theme.js');
+require('../../common/direction.js');
+require('../../common/propsValues/control.js');
+var breakpoint = require('../../common/propsValues/breakpoint.js');
+require('../../common/propsValues/size.js');
+var typography = require('../../common/propsValues/typography.js');
+require('../../common/propsValues/width.js');
+require('../../common/propsValues/type.js');
+require('../../common/propsValues/dateMode.js');
+require('../../common/propsValues/monthFormat.js');
+require('../../common/propsValues/position.js');
+require('../../common/propsValues/layouts.js');
+require('../../common/propsValues/status.js');
+require('../../common/propsValues/sentiment.js');
+require('../../common/propsValues/profileType.js');
+require('../../common/propsValues/variant.js');
+require('../../common/propsValues/scroll.js');
+require('../../common/propsValues/markdownNodeType.js');
+require('../../common/fileType.js');
+var icons = require('@transferwise/icons');
+require('react');
+require('react-intl');
+require('../../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var AvatarView = require('../../avatarView/AvatarView.js');
+var Image = require('../../image/Image.js');
+var PrimitivePrompt = require('../PrimitivePrompt/PrimitivePrompt.js');
+var useScreenSize = require('../../common/hooks/useScreenSize.js');
+
+const ActionPrompt = ({
+  sentiment = 'neutral',
+  title,
+  description,
+  onDismiss,
+  media,
+  action,
+  actionSecondary,
+  id,
+  className,
+  'data-testid': testId
+}) => {
+  const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+        src: media.imgSrc,
+        className: "wds-action-prompt--media-image",
+        alt: media['aria-label'] ?? ''
+      });
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
+        status: sentiment
+      };
+      return /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+        ...media.avatar,
+        badge: badge,
+        size: 48,
+        children: media.avatar.asset
+      });
+    }
+    return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+      size: 48,
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
+    }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+      size: 48,
+      sentiment: sentiment
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
+    id: id,
+    sentiment: sentiment,
+    "data-testid": testId,
+    className: clsx.clsx('wds-action-prompt', {
+      'wds-action-prompt--with-two-actions': !!actionSecondary
+    }, className),
+    media: renderMedia(),
+    actions: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [actionSecondary &&
+      /*#__PURE__*/
+      // @ts-expect-error onClick type mismatch
+      jsxRuntime.jsx(Button_resolver.default, {
+        v2: true,
+        size: "md",
+        priority: "secondary",
+        href: actionSecondary.href,
+        block: isMobile,
+        onClick: actionSecondary?.onClick,
+        children: actionSecondary.label
+      }), /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
+        v2: true,
+        size: "md",
+        priority: "primary",
+        href: action.href,
+        block: isMobile,
+        onClick: action.onClick,
+        children: action.label
+      })]
+    }),
+    onDismiss: onDismiss,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: clsx.clsx('d-flex', 'flex-column', 'justify-content-center'),
+      children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        type: typography.Typography.BODY_LARGE_BOLD,
+        children: title
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        children: description
+      })]
+    })
+  });
+};
+
+exports.ActionPrompt = ActionPrompt;
+exports.default = ActionPrompt;
+//# sourceMappingURL=ActionPrompt.js.map

package/build/prompt/ActionPrompt/ActionPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media,\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView {...media.avatar} badge={badge} size={48}>\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView size={48}>\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon size={48} sentiment={sentiment} />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      onDismiss={onDismiss}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n        {description && <Body>{description}</Body>}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}

package/build/prompt/ActionPrompt/ActionPrompt.mjs

@@ -0,0 +1,118 @@
+import { clsx } from 'clsx';
+import StatusIcon from '../../statusIcon/StatusIcon.mjs';
+import Body from '../../body/Body.mjs';
+import Button from '../../button/Button.resolver.mjs';
+import '../../common/theme.mjs';
+import '../../common/direction.mjs';
+import '../../common/propsValues/control.mjs';
+import { Breakpoint } from '../../common/propsValues/breakpoint.mjs';
+import '../../common/propsValues/size.mjs';
+import { Typography } from '../../common/propsValues/typography.mjs';
+import '../../common/propsValues/width.mjs';
+import '../../common/propsValues/type.mjs';
+import '../../common/propsValues/dateMode.mjs';
+import '../../common/propsValues/monthFormat.mjs';
+import '../../common/propsValues/position.mjs';
+import '../../common/propsValues/layouts.mjs';
+import '../../common/propsValues/status.mjs';
+import '../../common/propsValues/sentiment.mjs';
+import '../../common/propsValues/profileType.mjs';
+import '../../common/propsValues/variant.mjs';
+import '../../common/propsValues/scroll.mjs';
+import '../../common/propsValues/markdownNodeType.mjs';
+import '../../common/fileType.mjs';
+import { GiftBox } from '@transferwise/icons';
+import 'react';
+import 'react-intl';
+import '../../common/closeButton/CloseButton.messages.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import AvatarView from '../../avatarView/AvatarView.mjs';
+import Image from '../../image/Image.mjs';
+import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
+import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
+
+const ActionPrompt = ({
+  sentiment = 'neutral',
+  title,
+  description,
+  onDismiss,
+  media,
+  action,
+  actionSecondary,
+  id,
+  className,
+  'data-testid': testId
+}) => {
+  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return /*#__PURE__*/jsx(Image, {
+        src: media.imgSrc,
+        className: "wds-action-prompt--media-image",
+        alt: media['aria-label'] ?? ''
+      });
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
+        status: sentiment
+      };
+      return /*#__PURE__*/jsx(AvatarView, {
+        ...media.avatar,
+        badge: badge,
+        size: 48,
+        children: media.avatar.asset
+      });
+    }
+    return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
+      size: 48,
+      children: /*#__PURE__*/jsx(GiftBox, {})
+    }) : /*#__PURE__*/jsx(StatusIcon, {
+      size: 48,
+      sentiment: sentiment
+    });
+  };
+  return /*#__PURE__*/jsx(PrimitivePrompt, {
+    id: id,
+    sentiment: sentiment,
+    "data-testid": testId,
+    className: clsx('wds-action-prompt', {
+      'wds-action-prompt--with-two-actions': !!actionSecondary
+    }, className),
+    media: renderMedia(),
+    actions: /*#__PURE__*/jsxs(Fragment, {
+      children: [actionSecondary &&
+      /*#__PURE__*/
+      // @ts-expect-error onClick type mismatch
+      jsx(Button, {
+        v2: true,
+        size: "md",
+        priority: "secondary",
+        href: actionSecondary.href,
+        block: isMobile,
+        onClick: actionSecondary?.onClick,
+        children: actionSecondary.label
+      }), /*#__PURE__*/jsx(Button, {
+        v2: true,
+        size: "md",
+        priority: "primary",
+        href: action.href,
+        block: isMobile,
+        onClick: action.onClick,
+        children: action.label
+      })]
+    }),
+    onDismiss: onDismiss,
+    children: /*#__PURE__*/jsxs("div", {
+      className: clsx('d-flex', 'flex-column', 'justify-content-center'),
+      children: [/*#__PURE__*/jsx(Body, {
+        type: Typography.BODY_LARGE_BOLD,
+        children: title
+      }), description && /*#__PURE__*/jsx(Body, {
+        children: description
+      })]
+    })
+  });
+};
+
+export { ActionPrompt, ActionPrompt as default };
+//# sourceMappingURL=ActionPrompt.mjs.map

package/build/prompt/ActionPrompt/ActionPrompt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media,\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView {...media.avatar} badge={badge} size={48}>\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView size={48}>\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon size={48} sentiment={sentiment} />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      onDismiss={onDismiss}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n        {description && <Body>{description}</Body>}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}

package/build/prompt/PrimitivePrompt/PrimitivePrompt.js

@@ -18,26 +18,28 @@ const PrimitivePrompt = ({
   ...restProps
 }) => {
   const intl = reactIntl.useIntl();
-  return /*#__PURE__*/jsxRuntime.jsxs(SentimentSurface.default, {
+  return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
     sentiment: sentiment,
     className: clsx.clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
     ...restProps,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wds-prompt__content-wrapper",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: clsx.clsx('wds-prompt__content-wrapper', {
+        'wds-prompt__content-wrapper--with-dismiss': !!onDismiss
+      }),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: clsx.clsx('wds-prompt__media-wrapper'),
         children: media
-      }), children, actions && /*#__PURE__*/jsxRuntime.jsx("div", {
+      }), children, onDismiss && /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
+        size: 24,
+        priority: "secondary",
+        "aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
+        onClick: onDismiss,
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
+      }), actions && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "wds-prompt__actions-wrapper",
         children: actions
       })]
-    }), onDismiss && /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
-      size: 24,
-      priority: "secondary",
-      "aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
-      onClick: onDismiss,
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
-    })]
+    })
   });
 };