@transferwise/components 46.125.0 → 46.127.1

package/build/prompt/InfoPrompt/InfoPrompt.mjs

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import '../../common/theme.mjs';
+import '../../common/direction.mjs';
+import '../../common/propsValues/control.mjs';
+import '../../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 { Sentiment } from '../../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 { clsx } from 'clsx';
+import 'react-intl';
+import '../../common/closeButton/CloseButton.messages.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import StatusIcon from '../../statusIcon/StatusIcon.mjs';
+import Body from '../../body/Body.mjs';
+import Link from '../../link/Link.mjs';
+import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
+
+const InfoPrompt = ({
+  sentiment = 'neutral',
+  onDismiss,
+  media,
+  action,
+  title,
+  description,
+  className,
+  'data-testid': dataTestId,
+  ...restProps
+}) => {
+  const [shouldFire, setShouldFire] = useState();
+  const statusIconSentiment = sentiment === 'success' ? Sentiment.POSITIVE : sentiment;
+  const handleTouchStart = () => {
+    setShouldFire(true);
+  };
+  const handleTouchEnd = () => {
+    if (shouldFire && action?.href) {
+      if (action.target === '_blank') {
+        window.top?.open(action.href, '_blank', 'noopener, noreferrer');
+      } else {
+        window.top?.location.assign(action.href);
+      }
+    }
+    setShouldFire(false);
+  };
+  const handleTouchMove = () => {
+    setShouldFire(false);
+  };
+  const renderMedia = () => {
+    if (media) {
+      return /*#__PURE__*/jsx("span", {
+        className: "wds-info-prompt__media",
+        children: media.asset
+      });
+    }
+    if (sentiment === 'proposition') {
+      return /*#__PURE__*/jsx(GiftBox, {
+        size: 24
+      });
+    }
+    return /*#__PURE__*/jsx(StatusIcon, {
+      size: 24,
+      sentiment: statusIconSentiment
+    });
+  };
+  return /*#__PURE__*/jsx(PrimitivePrompt, {
+    sentiment: sentiment,
+    media: renderMedia(),
+    "data-testid": dataTestId,
+    className: clsx('wds-info-prompt', className),
+    ...restProps,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onTouchMove: handleTouchMove,
+    onDismiss: onDismiss,
+    children: /*#__PURE__*/jsxs("div", {
+      className: "wds-info-prompt__content",
+      children: [title && /*#__PURE__*/jsx(Body, {
+        className: "wds-info-prompt__title",
+        type: Typography.BODY_LARGE_BOLD,
+        as: "span",
+        children: title
+      }), /*#__PURE__*/jsx(Body, {
+        as: "span",
+        className: "wds-info-prompt__description",
+        children: description
+      }), action && /*#__PURE__*/jsx(Link, {
+        href: action.href,
+        target: action.target,
+        type: Typography.LINK_DEFAULT,
+        className: "wds-info-prompt__action",
+        onClick: action.onClick,
+        children: action.label
+      })]
+    })
+  });
+};
+
+export { InfoPrompt };
+//# sourceMappingURL=InfoPrompt.mjs.map

package/build/prompt/InfoPrompt/InfoPrompt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n  /**\n   * The label text for the action link\n   */\n  label: string;\n};\n\nexport type InfoPromptMedia = {\n  /**\n   * The icon/image asset to display.\n   * The asset should include its own accessibility attributes (e.g. title, aria-label)\n   * if it conveys meaning, or aria-hidden=\"true\" if decorative.\n   */\n  asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n  Pick<PrimitivePromptProps, 'data-testid'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: SurfaceSentiment;\n    /**\n     * Handler called when the close button is clicked.\n     * If not provided, the close button is hidden.\n     */\n    onDismiss?: () => void;\n    /**\n     * Custom media to override the default status icon.\n     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n     */\n    media?: InfoPromptMedia;\n    /**\n     * Action link to be displayed below the description\n     */\n    action?: InfoPromptAction;\n    /**\n     * Title content for the prompt\n     */\n    title?: string;\n    /**\n     * Description text for the prompt (required)\n     */\n    description: string;\n  };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n */\nexport const InfoPrompt = ({\n  sentiment = 'neutral',\n  onDismiss,\n  media,\n  action,\n  title,\n  description,\n  className,\n  'data-testid': dataTestId,\n  ...restProps\n}: InfoPromptProps) => {\n  const [shouldFire, setShouldFire] = useState<boolean>();\n  const statusIconSentiment =\n    sentiment === 'success'\n      ? Sentiment.POSITIVE\n      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n  const handleTouchStart = () => {\n    setShouldFire(true);\n  };\n\n  const handleTouchEnd = () => {\n    if (shouldFire && action?.href) {\n      if (action.target === '_blank') {\n        window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n      } else {\n        window.top?.location.assign(action.href);\n      }\n    }\n    setShouldFire(false);\n  };\n\n  const handleTouchMove = () => {\n    setShouldFire(false);\n  };\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return <GiftBox size={24} />;\n    }\n\n    return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n  };\n\n  return (\n    <PrimitivePrompt\n      sentiment={sentiment}\n      media={renderMedia()}\n      data-testid={dataTestId}\n      className={clsx('wds-info-prompt', className)}\n      {...restProps}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      onTouchMove={handleTouchMove}\n      onDismiss={onDismiss}\n    >\n      <div className=\"wds-info-prompt__content\">\n        {title && (\n          <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n            {title}\n          </Body>\n        )}\n        <Body as=\"span\" className=\"wds-info-prompt__description\">\n          {description}\n        </Body>\n        {action && (\n          <Link\n            href={action.href}\n            target={action.target}\n            type={Typography.LINK_DEFAULT}\n            className=\"wds-info-prompt__action\"\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Link>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { ReactNode } from 'react';\n\nexport type PrimitivePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: ReactNode;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n  sentiment = 'success',\n  media,\n  actions,\n  onDismiss,\n  className,\n  children,\n  ...restProps\n}: PrimitivePromptProps) => {\n  const intl = useIntl();\n\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n      {...restProps}\n    >\n      <div\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, { 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;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { ReactNode } from 'react';\n\nexport type PrimitivePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: ReactNode;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n  sentiment = 'success',\n  media,\n  actions,\n  onDismiss,\n  className,\n  children,\n  ...restProps\n}: PrimitivePromptProps) => {\n  const intl = useIntl();\n\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n      {...restProps}\n    >\n      <div\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, { 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;;;;"}

package/build/radioOption/RadioOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.js","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;;;;;AAyBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,cAAA,CAACC,cAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,cAAA,CAACG,mBAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}
+{"version":3,"file":"RadioOption.js","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends\n    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;;;;;AA0BA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,cAAA,CAACC,cAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,cAAA,CAACG,mBAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}

package/build/radioOption/RadioOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.mjs","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;AAyBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,GAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,GAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}
+{"version":3,"file":"RadioOption.mjs","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends\n    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;AA0BA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,GAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,GAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}

package/build/slidingPanel/SlidingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAMO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,mBAAA,CAACC,kCAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,SAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;;"}
+{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps extends Pick<\n  React.ComponentPropsWithRef<'div'>,\n  'ref' | 'className' | 'children'\n> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAMO,MAAMA,cAAc,GAAG;AAa9B,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,mBAAA,CAACC,kCAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,SAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;;"}

package/build/slidingPanel/SlidingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;AAMO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,aAAA,CAACC,aAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,IAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;"}
+{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps extends Pick<\n  React.ComponentPropsWithRef<'div'>,\n  'ref' | 'className' | 'children'\n> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;AAMO,MAAMA,cAAc,GAAG;AAa9B,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,aAAA,CAACC,aAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,IAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;"}

package/build/statusIcon/StatusIcon.js

@@ -38,6 +38,7 @@ const mapLegacySize = {
   [String(size.Size.LARGE)]: 48
 };
 const StatusIcon = ({
+  id,
   sentiment: sentiment$1 = 'neutral',
   size: sizeProp = 40,
   iconLabel
@@ -98,6 +99,7 @@ const StatusIcon = ({
     size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
     className: clsx.clsx('status-circle', sentiment$1),
+    id: id,
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG;CACuB;AAE/C,MAAMC,UAAU,GAAGA,CAAC;AAAEC,aAAAA,WAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAE;AAAEC,EAAAA;AAAS,CAAmB,KAAI;AAChG,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,MAAMC,mBAAmB,GAMrB;IACF,CAACC,mBAAS,CAACC,QAAQ,GAAG;AACpBC,MAAAA,IAAI,EAAEC,WAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACC,UAAU;KACzD;IACD,CAACP,mBAAS,CAACQ,QAAQ,GAAG;AACpBN,MAAAA,IAAI,EAAEO,WAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACI,YAAY;KAC3D;IACD,CAACV,mBAAS,CAACW,OAAO,GAAG;AACnBT,MAAAA,IAAI,EAAEU,WAAK;AACXR,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACO,YAAY;KAC3D;IACD,CAACC,aAAM,CAACC,OAAO,GAAG;AAChBb,MAAAA,IAAI,EAAEc,qBAAe;AACrBZ,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACW,YAAY;KAC3D;IACD,CAACjB,mBAAS,CAACkB,OAAO,GAAG;AACnBhB,MAAAA,IAAI,EAAEiB,UAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACc,gBAAgB;KAC/D;AACD;IACA,CAACpB,mBAAS,CAACqB,KAAK,GAAG;AACjBnB,MAAAA,IAAI,EAAEC,WAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACC,UAAU;KACzD;IACD,CAACP,mBAAS,CAACsB,IAAI,GAAG;AAChBpB,MAAAA,IAAI,EAAEiB,UAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACc,gBAAgB;KAC/D;IACD,CAACpB,mBAAS,CAACuB,OAAO,GAAG;AACnBrB,MAAAA,IAAI,EAAEO,WAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,2BAAQ,CAACI,YAAY;AAC3D;GACF;EACD,MAAM;IAAER,IAAI;AAAEE,IAAAA;AAAgB,GAAE,GAAGL,mBAAmB,CAACN,WAAS,CAAC;AAEjE,EAAA,MAAM+B,SAAS,GAAG/B,WAAS,KAAK,SAAS,IAAIA,WAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;EACvF,MAAMgC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;AACxE,EAAA,MAAMlC,IAAI,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ;AAChD;AACA,EAAA,MAAMkC,uBAAuB,GAAIC,KAAwD,iBACvFC,cAAA,CAACC,wBAAgB,EAAA;AACfC,IAAAA,EAAE,EAAC;AACH;AAAA;AACAxC,IAAAA,SAAS,EACPA,WAAS,KAAK,UAAU,GAAG,SAAS,GAAGA,WAAS,KAAK,SAAS,GAAG,SAAS,GAAGA,WAC9E;IAAA,GACGqC;AAAK,GAAC,CAEb;EACD,oBACEC,cAAA,CAACG,cAAM,EAAA;AACLD,IAAAA,EAAE,EAAEJ,uBAAwB;IAC5BnC,IAAI,EAAE+B,cAAc,IAAI/B,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzByC,IAAAA,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE3C,WAAS,CAAE;IAAA4C,QAAA,eAE5CN,cAAA,CAAC7B,IAAI,EAAA;AACHiC,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAEZ,SAAS,CAAE;MAC1Cc,KAAK,EAAE1C,SAAS,KAAK,IAAI,GAAG2C,SAAS,GAAG3C,SAAS,IAAIQ;KAAiB;AAE1E,GAAQ,CAAC;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -34,6 +34,7 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48
 };
 const StatusIcon = ({
+  id,
   sentiment = 'neutral',
   size: sizeProp = 40,
   iconLabel
@@ -94,6 +95,7 @@ const StatusIcon = ({
     size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
     className: clsx('status-circle', sentiment),
+    id: id,
     children: /*#__PURE__*/jsx(Icon, {
       className: clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG;CACuB;AAE/C,MAAMC,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAE;AAAEC,EAAAA;AAAS,CAAmB,KAAI;AAChG,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,MAAMC,mBAAmB,GAMrB;IACF,CAACC,SAAS,CAACC,QAAQ,GAAG;AACpBC,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU;KACzD;IACD,CAACP,SAAS,CAACQ,QAAQ,GAAG;AACpBN,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY;KAC3D;IACD,CAACV,SAAS,CAACW,OAAO,GAAG;AACnBT,MAAAA,IAAI,EAAEU,KAAK;AACXR,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACO,YAAY;KAC3D;IACD,CAACC,MAAM,CAACC,OAAO,GAAG;AAChBb,MAAAA,IAAI,EAAEc,eAAe;AACrBZ,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACW,YAAY;KAC3D;IACD,CAACjB,SAAS,CAACkB,OAAO,GAAG;AACnBhB,MAAAA,IAAI,EAAEiB,IAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACc,gBAAgB;KAC/D;AACD;IACA,CAACpB,SAAS,CAACqB,KAAK,GAAG;AACjBnB,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU;KACzD;IACD,CAACP,SAAS,CAACsB,IAAI,GAAG;AAChBpB,MAAAA,IAAI,EAAEiB,IAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACc,gBAAgB;KAC/D;IACD,CAACpB,SAAS,CAACuB,OAAO,GAAG;AACnBrB,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY;AAC3D;GACF;EACD,MAAM;IAAER,IAAI;AAAEE,IAAAA;AAAgB,GAAE,GAAGL,mBAAmB,CAACN,SAAS,CAAC;AAEjE,EAAA,MAAM+B,SAAS,GAAG/B,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;EACvF,MAAMgC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;AACxE,EAAA,MAAMlC,IAAI,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ;AAChD;AACA,EAAA,MAAMkC,uBAAuB,GAAIC,KAAwD,iBACvFC,GAAA,CAACC,gBAAgB,EAAA;AACfC,IAAAA,EAAE,EAAC;AACH;AAAA;AACAxC,IAAAA,SAAS,EACPA,SAAS,KAAK,UAAU,GAAG,SAAS,GAAGA,SAAS,KAAK,SAAS,GAAG,SAAS,GAAGA,SAC9E;IAAA,GACGqC;AAAK,GAAC,CAEb;EACD,oBACEC,GAAA,CAACG,MAAM,EAAA;AACLD,IAAAA,EAAE,EAAEJ,uBAAwB;IAC5BnC,IAAI,EAAE+B,cAAc,IAAI/B,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzByC,IAAAA,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAE3C,SAAS,CAAE;IAAA4C,QAAA,eAE5CN,GAAA,CAAC7B,IAAI,EAAA;AACHiC,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAEZ,SAAS,CAAE;MAC1Cc,KAAK,EAAE1C,SAAS,KAAK,IAAI,GAAG2C,SAAS,GAAG3C,SAAS,IAAIQ;KAAiB;AAE1E,GAAQ,CAAC;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  sentiment?: `${StatusIconSentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface\n      as=\"span\"\n      // @ts-expect-error sentiment and SentimentSurface types mismatch\n      sentiment={\n        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n      }\n      {...props}\n    />\n  );\n  return (\n    <Circle\n      as={SentimentSurfaceSetting}\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/styles/main.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5441,6 +5441,37 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
   stroke: currentColor;
 }
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+}
+.wds-info-prompt__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.wds-info-prompt__content:has(.wds-info-prompt__title) {
+  justify-content: flex-start;
+  /* Top align when title exists */
+}
+.wds-info-prompt__title,
+.wds-info-prompt__description {
+  display: block;
+  color: var(--color-sentiment-primary);
+}
+.wds-info-prompt__action {
+  margin-top: var(--Prompt-gap);
+}
+.wds-info-prompt__media {
+  display: flex;
+}
+.wds-info-prompt__media svg {
+  width: 24px;
+  height: 24px;
+}
+.wds-info-prompt .wds-prompt__media-wrapper {
+  padding: 0;
+}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/build/styles/prompt/InfoPrompt/InfoPrompt.css

@@ -0,0 +1,31 @@
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+}
+.wds-info-prompt__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.wds-info-prompt__content:has(.wds-info-prompt__title) {
+  justify-content: flex-start;
+  /* Top align when title exists */
+}
+.wds-info-prompt__title,
+.wds-info-prompt__description {
+  display: block;
+  color: var(--color-sentiment-primary);
+}
+.wds-info-prompt__action {
+  margin-top: var(--Prompt-gap);
+}
+.wds-info-prompt__media {
+  display: flex;
+}
+.wds-info-prompt__media svg {
+  width: 24px;
+  height: 24px;
+}
+.wds-info-prompt .wds-prompt__media-wrapper {
+  padding: 0;
+}

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,