@transferwise/components 0.0.0-experimental-14ff413 → 0.0.0-experimental-8bafa84

package/build/prompt/CriticalBanner/CriticalBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nimport IconButton from '../../iconButton';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\n  media?: PromptMedia;\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  /**\n   * The sentiment determines the colour scheme\n   * @default 'negative'\n   */\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Whether the banner is expanded (showing description and actions)\n   */\n  expanded: boolean;\n  /**\n   * Callback when the chevron toggle is clicked\n   */\n  onToggle: () => void;\n  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * CriticalBanner is a full-width banner component for critical messages that require attention.\n * It features a collapsible design with a chevron toggle to show/hide description and action buttons.\n * Unlike ActionPrompt, it has no dismiss button and no border radius.\n *\n * The component is fully controlled - parent owns the `expanded` state and provides `onToggle` callback.\n *\n * **Accessibility:** Uses `aria-live=\"assertive\"` to immediately announce critical messages to screen readers.\n * See the Accessibility documentation for detailed information on announcement behavior and testing.\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: CriticalBannerProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel || !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const hasActions = action || actionSecondary;\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <PrimitivePrompt\n        id={id}\n        sentiment={sentiment}\n        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n        data-testid={testId}\n        className={clsx(\n          'wds-critical-banner',\n          {\n            'wds-critical-banner--collapsed': !expanded,\n            'wds-critical-banner--with-two-actions': !!actionSecondary,\n          },\n          className,\n        )}\n        media={renderPromptMedia({\n          media,\n          sentiment,\n          mediaId,\n          imgClassName: 'wds-critical-banner--media-image',\n        })}\n        actions={\n          shouldShowWhenExpanded({ expanded, hasContent: !!hasActions }) ? (\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              {action && (\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          ) : undefined\n        }\n        role=\"region\"\n        {...(ariaLabel\n          ? { 'aria-label': ariaLabel }\n          : {\n              'aria-labelledby': ariaLabelledByIds,\n              'aria-describedby': descId,\n            })}\n      >\n        <div\n          className={clsx(\n            'd-flex',\n            'flex-column',\n            'justify-content-center',\n            'wds-critical-banner__text-wrapper',\n          )}\n        >\n          {title && (\n            <Body\n              id={titleId}\n              type={Typography.BODY_LARGE_BOLD}\n              className=\"wds-critical-banner__content\"\n            >\n              {title}\n            </Body>\n          )}\n          {shouldShowWhenExpanded({ expanded, hasContent: !!description, alwaysShow: !title }) && (\n            <Body\n              id={descId}\n              className={clsx('wds-critical-banner__content', {\n                'wds-critical-banner__description--collapsed': !expanded && !title,\n              })}\n            >\n              {description}\n            </Body>\n          )}\n        </div>\n        <ExpanderToggle\n          expanded={expanded}\n          size={24}\n          className=\"wds-critical-banner__toggle\"\n          onToggle={onToggle}\n        />\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","onToggle","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","hasActions","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","shouldShowWhenExpanded","hasContent","_Fragment","Button","v2","size","priority","href","block","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","alwaysShow","ExpanderToggle"],"mappings":"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"}

package/build/prompt/CriticalBanner/CriticalBanner.mjs

@@ -0,0 +1,143 @@
+import { useId } from 'react';
+import { clsx } from 'clsx';
+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 '@transferwise/icons';
+import 'react-intl';
+import '../../common/closeButton/CloseButton.messages.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { LiveRegion } from '../../common/liveRegion/LiveRegion.mjs';
+import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
+import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
+import { renderPromptMedia } from '../helpers/promptMedia.mjs';
+import { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander.mjs';
+import { buildAnnouncementString } from './helpers.mjs';
+
+const CriticalBanner = ({
+  sentiment = 'negative',
+  title,
+  description,
+  media = {},
+  action,
+  actionSecondary,
+  expanded,
+  onToggle,
+  id,
+  className,
+  'data-testid': testId,
+  'aria-label': ariaLabel
+}) => {
+  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+  const mediaId = useId();
+  const titleId = useId();
+  const descId = useId();
+  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel || !title ? undefined : titleId].filter(Boolean).join(' ');
+  const hasActions = action || actionSecondary;
+  return /*#__PURE__*/jsx(LiveRegion, {
+    "aria-live": "assertive",
+    announceOnChange: buildAnnouncementString({
+      title,
+      description,
+      expanded,
+      actionLabel: action?.label,
+      actionSecondaryLabel: actionSecondary?.label
+    }),
+    children: /*#__PURE__*/jsxs(PrimitivePrompt, {
+      id: id,
+      sentiment: sentiment,
+      emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
+      "data-testid": testId,
+      className: clsx('wds-critical-banner', {
+        'wds-critical-banner--collapsed': !expanded,
+        'wds-critical-banner--with-two-actions': !!actionSecondary
+      }, className),
+      media: renderPromptMedia({
+        media,
+        sentiment,
+        mediaId,
+        imgClassName: 'wds-critical-banner--media-image'
+      }),
+      actions: shouldShowWhenExpanded({
+        expanded,
+        hasContent: !!hasActions
+      }) ? /*#__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
+        }), action &&
+        /*#__PURE__*/
+        // @ts-expect-error onClick type mismatch
+        jsx(Button, {
+          v2: true,
+          size: "md",
+          priority: "primary",
+          href: action.href,
+          block: isMobile,
+          onClick: action.onClick,
+          children: action.label
+        })]
+      }) : undefined,
+      role: "region",
+      ...(ariaLabel ? {
+        'aria-label': ariaLabel
+      } : {
+        'aria-labelledby': ariaLabelledByIds,
+        'aria-describedby': descId
+      }),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: clsx('d-flex', 'flex-column', 'justify-content-center', 'wds-critical-banner__text-wrapper'),
+        children: [title && /*#__PURE__*/jsx(Body, {
+          id: titleId,
+          type: Typography.BODY_LARGE_BOLD,
+          className: "wds-critical-banner__content",
+          children: title
+        }), shouldShowWhenExpanded({
+          expanded,
+          hasContent: !!description,
+          alwaysShow: !title
+        }) && /*#__PURE__*/jsx(Body, {
+          id: descId,
+          className: clsx('wds-critical-banner__content', {
+            'wds-critical-banner__description--collapsed': !expanded && !title
+          }),
+          children: description
+        })]
+      }), /*#__PURE__*/jsx(ExpanderToggle, {
+        expanded: expanded,
+        size: 24,
+        className: "wds-critical-banner__toggle",
+        onToggle: onToggle
+      })]
+    })
+  });
+};
+
+export { CriticalBanner };
+//# sourceMappingURL=CriticalBanner.mjs.map

package/build/prompt/CriticalBanner/CriticalBanner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nimport IconButton from '../../iconButton';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\n  media?: PromptMedia;\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  /**\n   * The sentiment determines the colour scheme\n   * @default 'negative'\n   */\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Whether the banner is expanded (showing description and actions)\n   */\n  expanded: boolean;\n  /**\n   * Callback when the chevron toggle is clicked\n   */\n  onToggle: () => void;\n  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * CriticalBanner is a full-width banner component for critical messages that require attention.\n * It features a collapsible design with a chevron toggle to show/hide description and action buttons.\n * Unlike ActionPrompt, it has no dismiss button and no border radius.\n *\n * The component is fully controlled - parent owns the `expanded` state and provides `onToggle` callback.\n *\n * **Accessibility:** Uses `aria-live=\"assertive\"` to immediately announce critical messages to screen readers.\n * See the Accessibility documentation for detailed information on announcement behavior and testing.\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: CriticalBannerProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel || !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const hasActions = action || actionSecondary;\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <PrimitivePrompt\n        id={id}\n        sentiment={sentiment}\n        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n        data-testid={testId}\n        className={clsx(\n          'wds-critical-banner',\n          {\n            'wds-critical-banner--collapsed': !expanded,\n            'wds-critical-banner--with-two-actions': !!actionSecondary,\n          },\n          className,\n        )}\n        media={renderPromptMedia({\n          media,\n          sentiment,\n          mediaId,\n          imgClassName: 'wds-critical-banner--media-image',\n        })}\n        actions={\n          shouldShowWhenExpanded({ expanded, hasContent: !!hasActions }) ? (\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              {action && (\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          ) : undefined\n        }\n        role=\"region\"\n        {...(ariaLabel\n          ? { 'aria-label': ariaLabel }\n          : {\n              'aria-labelledby': ariaLabelledByIds,\n              'aria-describedby': descId,\n            })}\n      >\n        <div\n          className={clsx(\n            'd-flex',\n            'flex-column',\n            'justify-content-center',\n            'wds-critical-banner__text-wrapper',\n          )}\n        >\n          {title && (\n            <Body\n              id={titleId}\n              type={Typography.BODY_LARGE_BOLD}\n              className=\"wds-critical-banner__content\"\n            >\n              {title}\n            </Body>\n          )}\n          {shouldShowWhenExpanded({ expanded, hasContent: !!description, alwaysShow: !title }) && (\n            <Body\n              id={descId}\n              className={clsx('wds-critical-banner__content', {\n                'wds-critical-banner__description--collapsed': !expanded && !title,\n              })}\n            >\n              {description}\n            </Body>\n          )}\n        </div>\n        <ExpanderToggle\n          expanded={expanded}\n          size={24}\n          className=\"wds-critical-banner__toggle\"\n          onToggle={onToggle}\n        />\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","onToggle","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","hasActions","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","shouldShowWhenExpanded","hasContent","_Fragment","Button","v2","size","priority","href","block","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","alwaysShow","ExpanderToggle"],"mappings":"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"}

package/build/prompt/CriticalBanner/helpers.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * Helper to extract string from ReactNode for announcements.
+ * Complex ReactNodes (JSX elements) return empty string.
+ */
+const getStringValue = node => {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  return '';
+};
+/**
+ * Builds the announcement string from visible content only.
+ * Content visibility depends on expanded state and presence of title.
+ */
+const buildAnnouncementString = ({
+  title,
+  description,
+  expanded,
+  actionLabel,
+  actionSecondaryLabel
+}) => {
+  return [title ? getStringValue(title) : undefined, description && (expanded || !title) ? getStringValue(description) : undefined, expanded && actionLabel ? getStringValue(actionLabel) : undefined, expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined].filter(Boolean).join('|');
+};
+
+exports.buildAnnouncementString = buildAnnouncementString;
+exports.getStringValue = getStringValue;
+//# sourceMappingURL=helpers.js.map

package/build/prompt/CriticalBanner/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/prompt/CriticalBanner/helpers.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\n/**\n * Helper to extract string from ReactNode for announcements.\n * Complex ReactNodes (JSX elements) return empty string.\n */\nexport const getStringValue = (node: ReactNode): string => {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n  return '';\n};\n\n/**\n * Builds the announcement string from visible content only.\n * Content visibility depends on expanded state and presence of title.\n */\nexport const buildAnnouncementString = ({\n  title,\n  description,\n  expanded,\n  actionLabel,\n  actionSecondaryLabel,\n}: {\n  title?: ReactNode;\n  description?: ReactNode;\n  expanded: boolean;\n  actionLabel?: ReactNode;\n  actionSecondaryLabel?: ReactNode;\n}): string => {\n  return [\n    title ? getStringValue(title) : undefined,\n    description && (expanded || !title) ? getStringValue(description) : undefined,\n    expanded && actionLabel ? getStringValue(actionLabel) : undefined,\n    expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined,\n  ]\n    .filter(Boolean)\n    .join('|');\n};\n"],"names":["getStringValue","node","String","buildAnnouncementString","title","description","expanded","actionLabel","actionSecondaryLabel","undefined","filter","Boolean","join"],"mappings":";;AAEA;;;AAGG;AACI,MAAMA,cAAc,GAAIC,IAAe,IAAY;EACxD,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IACxD,OAAOC,MAAM,CAACD,IAAI,CAAC;AACrB,EAAA;AACA,EAAA,OAAO,EAAE;AACX;AAEA;;;AAGG;AACI,MAAME,uBAAuB,GAAGA,CAAC;EACtCC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,WAAW;AACXC,EAAAA;AAAoB,CAOrB,KAAY;EACX,OAAO,CACLJ,KAAK,GAAGJ,cAAc,CAACI,KAAK,CAAC,GAAGK,SAAS,EACzCJ,WAAW,KAAKC,QAAQ,IAAI,CAACF,KAAK,CAAC,GAAGJ,cAAc,CAACK,WAAW,CAAC,GAAGI,SAAS,EAC7EH,QAAQ,IAAIC,WAAW,GAAGP,cAAc,CAACO,WAAW,CAAC,GAAGE,SAAS,EACjEH,QAAQ,IAAIE,oBAAoB,GAAGR,cAAc,CAACQ,oBAAoB,CAAC,GAAGC,SAAS,CACpF,CACEC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;AACd;;;;;"}

package/build/prompt/CriticalBanner/helpers.mjs

@@ -0,0 +1,26 @@
+/**
+ * Helper to extract string from ReactNode for announcements.
+ * Complex ReactNodes (JSX elements) return empty string.
+ */
+const getStringValue = node => {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  return '';
+};
+/**
+ * Builds the announcement string from visible content only.
+ * Content visibility depends on expanded state and presence of title.
+ */
+const buildAnnouncementString = ({
+  title,
+  description,
+  expanded,
+  actionLabel,
+  actionSecondaryLabel
+}) => {
+  return [title ? getStringValue(title) : undefined, description && (expanded || !title) ? getStringValue(description) : undefined, expanded && actionLabel ? getStringValue(actionLabel) : undefined, expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined].filter(Boolean).join('|');
+};
+
+export { buildAnnouncementString, getStringValue };
+//# sourceMappingURL=helpers.mjs.map

package/build/prompt/CriticalBanner/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","sources":["../../../src/prompt/CriticalBanner/helpers.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\n/**\n * Helper to extract string from ReactNode for announcements.\n * Complex ReactNodes (JSX elements) return empty string.\n */\nexport const getStringValue = (node: ReactNode): string => {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n  return '';\n};\n\n/**\n * Builds the announcement string from visible content only.\n * Content visibility depends on expanded state and presence of title.\n */\nexport const buildAnnouncementString = ({\n  title,\n  description,\n  expanded,\n  actionLabel,\n  actionSecondaryLabel,\n}: {\n  title?: ReactNode;\n  description?: ReactNode;\n  expanded: boolean;\n  actionLabel?: ReactNode;\n  actionSecondaryLabel?: ReactNode;\n}): string => {\n  return [\n    title ? getStringValue(title) : undefined,\n    description && (expanded || !title) ? getStringValue(description) : undefined,\n    expanded && actionLabel ? getStringValue(actionLabel) : undefined,\n    expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined,\n  ]\n    .filter(Boolean)\n    .join('|');\n};\n"],"names":["getStringValue","node","String","buildAnnouncementString","title","description","expanded","actionLabel","actionSecondaryLabel","undefined","filter","Boolean","join"],"mappings":"AAEA;;;AAGG;AACI,MAAMA,cAAc,GAAIC,IAAe,IAAY;EACxD,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IACxD,OAAOC,MAAM,CAACD,IAAI,CAAC;AACrB,EAAA;AACA,EAAA,OAAO,EAAE;AACX;AAEA;;;AAGG;AACI,MAAME,uBAAuB,GAAGA,CAAC;EACtCC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,WAAW;AACXC,EAAAA;AAAoB,CAOrB,KAAY;EACX,OAAO,CACLJ,KAAK,GAAGJ,cAAc,CAACI,KAAK,CAAC,GAAGK,SAAS,EACzCJ,WAAW,KAAKC,QAAQ,IAAI,CAACF,KAAK,CAAC,GAAGJ,cAAc,CAACK,WAAW,CAAC,GAAGI,SAAS,EAC7EH,QAAQ,IAAIC,WAAW,GAAGP,cAAc,CAACO,WAAW,CAAC,GAAGE,SAAS,EACjEH,QAAQ,IAAIE,oBAAoB,GAAGR,cAAc,CAACQ,oBAAoB,CAAC,GAAGC,SAAS,CACpF,CACEC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;AACd;;;;"}

package/build/prompt/PrimitivePrompt/PrimitivePrompt.js

@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const PrimitivePrompt = ({
   sentiment = 'success',
+  emphasis = 'base',
   media,
   actions,
   onDismiss,
@@ -20,6 +21,7 @@ const PrimitivePrompt = ({
   const intl = reactIntl.useIntl();
   return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
     sentiment: sentiment,
+    emphasis: emphasis,
     className: clsx.clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
     ...restProps,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {

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

package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs

@@ -8,6 +8,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 const PrimitivePrompt = ({
   sentiment = 'success',
+  emphasis = 'base',
   media,
   actions,
   onDismiss,
@@ -18,6 +19,7 @@ const PrimitivePrompt = ({
   const intl = useIntl();
   return /*#__PURE__*/jsx(SentimentSurface, {
     sentiment: sentiment,
+    emphasis: emphasis,
     className: clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
     ...restProps,
     children: /*#__PURE__*/jsxs("div", {

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

package/build/prompt/common/Expander/Expander.js

@@ -0,0 +1,46 @@
+'use strict';
+
+require('react');
+var clsx = require('clsx');
+var icons = require('@transferwise/icons');
+var IconButton = require('../../../iconButton/IconButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+// Helper for conditional rendering based on expanded state
+function shouldShowWhenExpanded({
+  expanded,
+  hasContent,
+  alwaysShow = false
+}) {
+  if (alwaysShow) {
+    return hasContent;
+  }
+  return expanded && hasContent;
+}
+// Reusable toggle button component
+const ExpanderToggle = ({
+  expanded,
+  onToggle,
+  size = 24,
+  collapseLabel = 'Collapse',
+  expandLabel = 'Expand',
+  className,
+  'data-testid': testId
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
+    size: size,
+    priority: "secondary",
+    "aria-label": expanded ? collapseLabel : expandLabel,
+    "aria-expanded": expanded,
+    className: clsx.clsx('wds-expander-toggle', {
+      'wds-expander-toggle--collapsed': !expanded
+    }, className),
+    "data-testid": testId,
+    onClick: onToggle,
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronUp, {})
+  });
+};
+
+exports.ExpanderToggle = ExpanderToggle;
+exports.shouldShowWhenExpanded = shouldShowWhenExpanded;
+//# sourceMappingURL=Expander.js.map

package/build/prompt/common/Expander/Expander.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.js","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\n\nexport type ExpanderState = {\n  expanded: boolean;\n  toggle: () => void;\n  setExpanded: (expanded: boolean) => void;\n};\n\nexport type ExpanderToggleProps = {\n  expanded: boolean;\n  onToggle: () => void;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  collapseLabel?: string;\n  expandLabel?: string;\n  className?: string;\n  'data-testid'?: string;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const toggle = useCallback(() => {\n    setExpanded((prev) => !prev);\n  }, []);\n\n  return {\n    expanded,\n    toggle,\n    setExpanded,\n  };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n  expanded,\n  hasContent,\n  alwaysShow = false,\n}: {\n  expanded: boolean;\n  hasContent: boolean;\n  alwaysShow?: boolean;\n}): boolean {\n  if (alwaysShow) {\n    return hasContent;\n  }\n\n  return expanded && hasContent;\n}\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n  expanded,\n  onToggle,\n  size = 24,\n  collapseLabel = 'Collapse',\n  expandLabel = 'Expand',\n  className,\n  'data-testid': testId,\n}: ExpanderToggleProps) => {\n  return (\n    <IconButton\n      size={size}\n      priority=\"secondary\"\n      aria-label={expanded ? collapseLabel : expandLabel}\n      aria-expanded={expanded}\n      className={clsx(\n        'wds-expander-toggle',\n        { 'wds-expander-toggle--collapsed': !expanded },\n        className,\n      )}\n      data-testid={testId}\n      onClick={onToggle}\n    >\n      <ChevronUp />\n    </IconButton>\n  );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","collapseLabel","expandLabel","className","testId","_jsx","IconButton","priority","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;;;AAoCA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAEA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,aAAa,GAAG,UAAU;AAC1BC,EAAAA,WAAW,GAAG,QAAQ;EACtBC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;EACxB,oBACEC,cAAA,CAACC,kBAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYZ,QAAQ,GAAGM,aAAa,GAAGC,WAAY;AACnD,IAAA,eAAA,EAAeP,QAAS;AACxBQ,IAAAA,SAAS,EAAEK,SAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACb;KAAU,EAC/CQ,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBK,IAAAA,OAAO,EAAEV,QAAS;AAAAW,IAAAA,QAAA,eAElBL,cAAA,CAACM,eAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;;"}

package/build/prompt/common/Expander/Expander.mjs

@@ -0,0 +1,43 @@
+import 'react';
+import { clsx } from 'clsx';
+import { ChevronUp } from '@transferwise/icons';
+import IconButton from '../../../iconButton/IconButton.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+// Helper for conditional rendering based on expanded state
+function shouldShowWhenExpanded({
+  expanded,
+  hasContent,
+  alwaysShow = false
+}) {
+  if (alwaysShow) {
+    return hasContent;
+  }
+  return expanded && hasContent;
+}
+// Reusable toggle button component
+const ExpanderToggle = ({
+  expanded,
+  onToggle,
+  size = 24,
+  collapseLabel = 'Collapse',
+  expandLabel = 'Expand',
+  className,
+  'data-testid': testId
+}) => {
+  return /*#__PURE__*/jsx(IconButton, {
+    size: size,
+    priority: "secondary",
+    "aria-label": expanded ? collapseLabel : expandLabel,
+    "aria-expanded": expanded,
+    className: clsx('wds-expander-toggle', {
+      'wds-expander-toggle--collapsed': !expanded
+    }, className),
+    "data-testid": testId,
+    onClick: onToggle,
+    children: /*#__PURE__*/jsx(ChevronUp, {})
+  });
+};
+
+export { ExpanderToggle, shouldShowWhenExpanded };
+//# sourceMappingURL=Expander.mjs.map

package/build/prompt/common/Expander/Expander.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.mjs","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\n\nexport type ExpanderState = {\n  expanded: boolean;\n  toggle: () => void;\n  setExpanded: (expanded: boolean) => void;\n};\n\nexport type ExpanderToggleProps = {\n  expanded: boolean;\n  onToggle: () => void;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  collapseLabel?: string;\n  expandLabel?: string;\n  className?: string;\n  'data-testid'?: string;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const toggle = useCallback(() => {\n    setExpanded((prev) => !prev);\n  }, []);\n\n  return {\n    expanded,\n    toggle,\n    setExpanded,\n  };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n  expanded,\n  hasContent,\n  alwaysShow = false,\n}: {\n  expanded: boolean;\n  hasContent: boolean;\n  alwaysShow?: boolean;\n}): boolean {\n  if (alwaysShow) {\n    return hasContent;\n  }\n\n  return expanded && hasContent;\n}\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n  expanded,\n  onToggle,\n  size = 24,\n  collapseLabel = 'Collapse',\n  expandLabel = 'Expand',\n  className,\n  'data-testid': testId,\n}: ExpanderToggleProps) => {\n  return (\n    <IconButton\n      size={size}\n      priority=\"secondary\"\n      aria-label={expanded ? collapseLabel : expandLabel}\n      aria-expanded={expanded}\n      className={clsx(\n        'wds-expander-toggle',\n        { 'wds-expander-toggle--collapsed': !expanded },\n        className,\n      )}\n      data-testid={testId}\n      onClick={onToggle}\n    >\n      <ChevronUp />\n    </IconButton>\n  );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","collapseLabel","expandLabel","className","testId","_jsx","IconButton","priority","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;AAoCA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAEA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,aAAa,GAAG,UAAU;AAC1BC,EAAAA,WAAW,GAAG,QAAQ;EACtBC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;EACxB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYZ,QAAQ,GAAGM,aAAa,GAAGC,WAAY;AACnD,IAAA,eAAA,EAAeP,QAAS;AACxBQ,IAAAA,SAAS,EAAEK,IAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACb;KAAU,EAC/CQ,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBK,IAAAA,OAAO,EAAEV,QAAS;AAAAW,IAAAA,QAAA,eAElBL,GAAA,CAACM,SAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;"}

package/build/prompt/helpers/promptMedia.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var AvatarView = require('../../avatarView/AvatarView.js');
+var Image = require('../../image/Image.js');
+var StatusIcon = require('../../statusIcon/StatusIcon.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function renderPromptMedia({
+  media,
+  sentiment,
+  mediaId,
+  imgClassName
+}) {
+  if (media?.imgSrc) {
+    return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+      id: mediaId,
+      src: media.imgSrc,
+      className: imgClassName,
+      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,
+      "aria-label": media['aria-label'],
+      "aria-hidden": media['aria-hidden'],
+      id: mediaId,
+      size: 48,
+      children: media.avatar.asset
+    });
+  }
+  return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+    id: mediaId,
+    size: 48,
+    "aria-label": media['aria-label'],
+    "aria-hidden": media['aria-hidden'],
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
+  }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+    id: mediaId,
+    size: 48,
+    sentiment: sentiment,
+    iconLabel: media['aria-hidden'] ? null : media['aria-label']
+  });
+}
+
+exports.renderPromptMedia = renderPromptMedia;
+//# sourceMappingURL=promptMedia.js.map

package/build/prompt/helpers/promptMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptMedia.js","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n  imgSrc?: string;\n  avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n    asset?: AvatarViewProps['children'];\n    badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n  };\n  'aria-label'?: string;\n  'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n  media: PromptMedia;\n  sentiment: PrimitivePromptProps['sentiment'];\n  mediaId: string;\n  imgClassName: string;\n};\n\nexport function renderPromptMedia({\n  media,\n  sentiment,\n  mediaId,\n  imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n  if (media?.imgSrc) {\n    return (\n      <Image\n        id={mediaId}\n        src={media.imgSrc}\n        className={imgClassName}\n        alt={media['aria-label'] ?? ''}\n      />\n    );\n  }\n  if (media?.avatar) {\n    const badge = media.avatar.badge\n      ? media.avatar.badge\n      : sentiment === 'proposition'\n        ? {}\n        : { status: sentiment };\n    return (\n      <AvatarView\n        {...media.avatar}\n        badge={badge}\n        aria-label={media['aria-label']}\n        aria-hidden={media['aria-hidden']}\n        id={mediaId}\n        size={48}\n      >\n        {media.avatar.asset}\n      </AvatarView>\n    );\n  }\n  return sentiment === 'proposition' ? (\n    <AvatarView\n      id={mediaId}\n      size={48}\n      aria-label={media['aria-label']}\n      aria-hidden={media['aria-hidden']}\n    >\n      <GiftBox />\n    </AvatarView>\n  ) : (\n    <StatusIcon\n      id={mediaId}\n      size={48}\n      sentiment={sentiment}\n      iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n    />\n  );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,cAAA,CAACC,aAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,cAAA,CAACS,kBAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,cAAA,CAACS,kBAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,cAAA,CAACa,aAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,cAAA,CAACc,kBAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}

package/build/prompt/helpers/promptMedia.mjs

@@ -0,0 +1,50 @@
+import { GiftBox } from '@transferwise/icons';
+import AvatarView from '../../avatarView/AvatarView.mjs';
+import Image from '../../image/Image.mjs';
+import StatusIcon from '../../statusIcon/StatusIcon.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function renderPromptMedia({
+  media,
+  sentiment,
+  mediaId,
+  imgClassName
+}) {
+  if (media?.imgSrc) {
+    return /*#__PURE__*/jsx(Image, {
+      id: mediaId,
+      src: media.imgSrc,
+      className: imgClassName,
+      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,
+      "aria-label": media['aria-label'],
+      "aria-hidden": media['aria-hidden'],
+      id: mediaId,
+      size: 48,
+      children: media.avatar.asset
+    });
+  }
+  return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
+    id: mediaId,
+    size: 48,
+    "aria-label": media['aria-label'],
+    "aria-hidden": media['aria-hidden'],
+    children: /*#__PURE__*/jsx(GiftBox, {})
+  }) : /*#__PURE__*/jsx(StatusIcon, {
+    id: mediaId,
+    size: 48,
+    sentiment: sentiment,
+    iconLabel: media['aria-hidden'] ? null : media['aria-label']
+  });
+}
+
+export { renderPromptMedia };
+//# sourceMappingURL=promptMedia.mjs.map

package/build/prompt/helpers/promptMedia.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptMedia.mjs","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n  imgSrc?: string;\n  avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n    asset?: AvatarViewProps['children'];\n    badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n  };\n  'aria-label'?: string;\n  'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n  media: PromptMedia;\n  sentiment: PrimitivePromptProps['sentiment'];\n  mediaId: string;\n  imgClassName: string;\n};\n\nexport function renderPromptMedia({\n  media,\n  sentiment,\n  mediaId,\n  imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n  if (media?.imgSrc) {\n    return (\n      <Image\n        id={mediaId}\n        src={media.imgSrc}\n        className={imgClassName}\n        alt={media['aria-label'] ?? ''}\n      />\n    );\n  }\n  if (media?.avatar) {\n    const badge = media.avatar.badge\n      ? media.avatar.badge\n      : sentiment === 'proposition'\n        ? {}\n        : { status: sentiment };\n    return (\n      <AvatarView\n        {...media.avatar}\n        badge={badge}\n        aria-label={media['aria-label']}\n        aria-hidden={media['aria-hidden']}\n        id={mediaId}\n        size={48}\n      >\n        {media.avatar.asset}\n      </AvatarView>\n    );\n  }\n  return sentiment === 'proposition' ? (\n    <AvatarView\n      id={mediaId}\n      size={48}\n      aria-label={media['aria-label']}\n      aria-hidden={media['aria-hidden']}\n    >\n      <GiftBox />\n    </AvatarView>\n  ) : (\n    <StatusIcon\n      id={mediaId}\n      size={48}\n      sentiment={sentiment}\n      iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n    />\n  );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,GAAA,CAACC,KAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,GAAA,CAACS,UAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,GAAA,CAACS,UAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,GAAA,CAACa,OAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,GAAA,CAACc,UAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}