@transferwise/components 0.0.0-experimental-dbd40fc → 0.0.0-experimental-b5a5d96

package/build/Nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport type { AlertAction } from '../_deprecated/Alert';\nimport IconButton from '../IconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/CloseButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`\n  | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type NudgeProps = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: NudgeProps) => {\n  const intl = useIntl();\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.js","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport type { AlertAction } from '../_deprecated/Alert';\nimport IconButton from '../IconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/CloseButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`\n  | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n  /**\n   * @deprecated Use `mediaName` instead.\n   * Legacy custom media content is no longer used by `Nudge`.\n   */\n  media?: ReactNode;\n  /**\n   * Illustration asset name shown at the start of the nudge.\n   */\n  mediaName?: MediaNameType;\n  /** Main nudge message content. */\n  title: ReactNode;\n  /**\n   * Legacy CTA label content.\n   * Rendered only when `action` is not provided.\n   */\n  link?: ReactNode;\n  /**\n   * Legacy CTA destination for `link`.\n   * Ignored when `action` is provided.\n   */\n  href?: string;\n  /**\n   * Legacy click handler for `link`.\n   * Ignored when `action` is provided.\n   */\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /**\n   * Preferred CTA configuration rendered under the nudge body.\n   * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.\n   * If your label is short, use `aria-label` to provide more context.\n   */\n  action?: AlertAction;\n  /** Optional class name applied to the root nudge container. */\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type NudgeProps = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: NudgeProps) => {\n  const intl = useIntl();\n  const hasLegacyLink = Boolean(link);\n  const hasAction = action != null;\n  const shouldRenderLegacyLink = hasLegacyLink && !hasAction;\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {\n      // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.\n      console.warn(\n        'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',\n      );\n    }\n  }, [hasAction, hasLegacyLink, href]);\n\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {shouldRenderLegacyLink && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","hasLegacyLink","Boolean","hasAction","shouldRenderLegacyLink","useEffect","process","env","NODE_ENV","console","warn","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}

package/build/Nudge/Nudge.mjs

@@ -1,6 +1,6 @@
 import { Illustration } from '@wise/art';
 import { clsx } from 'clsx';
-import { useCallback, useState, useEffect } from 'react';
+import { useEffect, useCallback, useState } from 'react';
 import Body from '../Body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
@@ -39,7 +39,7 @@ const getLocalStorage = () => {
         return storage.map(item => String(item));
       }
     }
-  } catch (error) {}
+  } catch {}
   return [];
 };
 const Nudge = ({
@@ -56,6 +56,15 @@ const Nudge = ({
   action
 }) => {
   const intl = useIntl();
+  const hasLegacyLink = Boolean(link);
+  const hasAction = action != null;
+  const shouldRenderLegacyLink = hasLegacyLink && !hasAction;
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {
+      // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.
+      console.warn('Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.');
+    }
+  }, [hasAction, hasLegacyLink, href]);
   const getIsDismissed = useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
   const [nudgeState, setNudgeState] = useState(() => ({
     isDismissed: getIsDismissed(),
@@ -124,7 +133,7 @@ const Nudge = ({
           type: Typography.BODY_LARGE,
           className: clsx('wds-nudge-body'),
           children: title
-        }), link && /*#__PURE__*/jsx(Link, {
+        }), shouldRenderLegacyLink && /*#__PURE__*/jsx(Link, {
           href: href,
           type: Typography.LINK_LARGE,
           className: "wds-nudge-link",

package/build/Nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport type { AlertAction } from '../_deprecated/Alert';\nimport IconButton from '../IconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/CloseButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`\n  | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type NudgeProps = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: NudgeProps) => {\n  const intl = useIntl();\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/Nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport type { AlertAction } from '../_deprecated/Alert';\nimport IconButton from '../IconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/CloseButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`\n  | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n  /**\n   * @deprecated Use `mediaName` instead.\n   * Legacy custom media content is no longer used by `Nudge`.\n   */\n  media?: ReactNode;\n  /**\n   * Illustration asset name shown at the start of the nudge.\n   */\n  mediaName?: MediaNameType;\n  /** Main nudge message content. */\n  title: ReactNode;\n  /**\n   * Legacy CTA label content.\n   * Rendered only when `action` is not provided.\n   */\n  link?: ReactNode;\n  /**\n   * Legacy CTA destination for `link`.\n   * Ignored when `action` is provided.\n   */\n  href?: string;\n  /**\n   * Legacy click handler for `link`.\n   * Ignored when `action` is provided.\n   */\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /**\n   * Preferred CTA configuration rendered under the nudge body.\n   * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.\n   * If your label is short, use `aria-label` to provide more context.\n   */\n  action?: AlertAction;\n  /** Optional class name applied to the root nudge container. */\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type NudgeProps = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: NudgeProps) => {\n  const intl = useIntl();\n  const hasLegacyLink = Boolean(link);\n  const hasAction = action != null;\n  const shouldRenderLegacyLink = hasLegacyLink && !hasAction;\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {\n      // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.\n      console.warn(\n        'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',\n      );\n    }\n  }, [hasAction, hasLegacyLink, href]);\n\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {shouldRenderLegacyLink && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","hasLegacyLink","Boolean","hasAction","shouldRenderLegacyLink","useEffect","process","env","NODE_ENV","console","warn","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAY,GAAG;AAE5B,MAAMC,eAAe,GAAGA,MAAe;EACrC,IAAI;AACF,IAAA,MAAMC,WAAW,GAAGC,YAAY,CAACC,OAAO,CAACJ,YAAY,CAAC;AAEtD,IAAA,IAAIE,WAAW,EAAE;AACf,MAAA,MAAMG,OAAO,GAAYC,IAAI,CAACC,KAAK,CAACL,WAAW,CAAC;AAEhD,MAAA,IAAIM,KAAK,CAACC,OAAO,CAACJ,OAAO,CAAC,EAAE;QAC1B,OAAOA,OAAO,CAACK,GAAG,CAAEC,IAAI,IAAKC,MAAM,CAACD,IAAI,CAAC,CAAC;AAC5C,MAAA;AACF,IAAA;EACF,CAAC,CAAC,MAAM,CAAC;AAET,EAAA,OAAO,EAAE;AACX,CAAC;AA8ED,MAAME,KAAK,GAAGA,CAAC;EACbC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,gBAAgB;EAChBC,qBAAqB;EACrBC,EAAE;EACFC,SAAS;AACTC,EAAAA;AAAM,CACK,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AACtB,EAAA,MAAMC,aAAa,GAAGC,OAAO,CAACZ,IAAI,CAAC;AACnC,EAAA,MAAMa,SAAS,GAAGL,MAAM,IAAI,IAAI;AAChC,EAAA,MAAMM,sBAAsB,GAAGH,aAAa,IAAI,CAACE,SAAS;AAE1DE,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIL,SAAS,KAAKF,aAAa,IAAIV,IAAI,IAAI,IAAI,CAAC,EAAE;AACzF;AACAkB,MAAAA,OAAO,CAACC,IAAI,CACV,kHAAkH,CACnH;AACH,IAAA;EACF,CAAC,EAAE,CAACP,SAAS,EAAEF,aAAa,EAAEV,IAAI,CAAC,CAAC;AAEpC,EAAA,MAAMoB,cAAc,GAAGC,WAAW,CAChC,MAAOlB,gBAAgB,IAAIE,EAAE,GAAG,CAAC,CAACrB,eAAe,EAAE,EAAEsC,IAAI,CAAE5B,IAAI,IAAKA,IAAI,KAAKW,EAAE,CAAC,GAAG,KAAM,EACzF,CAACF,gBAAgB,EAAEE,EAAE,CAAC,CACvB;EAED,MAAM,CAACkB,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAC,OAAO;IAClDC,WAAW,EAAEN,cAAc,EAAE;AAC7BO,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC,CAAC;AAEHb,EAAAA,SAAS,CAAC,MAAK;AACb;IACAU,aAAa,CAAEI,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;AAAED,MAAAA,SAAS,EAAE;AAAI,KAAE,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;AAENb,EAAAA,SAAS,CAAC,MAAK;AACb;IACAU,aAAa,CAAEI,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;MAAEF,WAAW,EAAEN,cAAc;AAAE,KAAE,CAAC,CAAC;EACvE,CAAC,EAAE,CAACA,cAAc,EAAEf,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1C,MAAM;AAAEuB,IAAAA;AAAW,GAAE,GAAGH,UAAU;EAElC,MAAMM,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAG9C,eAAe,EAAE;IAEhD,IAAImB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFnB,QAAAA,YAAY,CAAC6C,OAAO,CAAChD,YAAY,EAAEM,IAAI,CAAC2C,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAEzB,EAAE,CAAC,CAAC,CAAC;MACrF,CAAC,CAAC,MAAM,CAAC;MAETmB,aAAa,CAAEI,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAEF,QAAAA,WAAW,EAAE;AAAI,OAAE,CAAC,CAAC;AAC3D,IAAA;AAEA,IAAA,IAAIxB,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE;AACb,IAAA;EACF,CAAC;AAEDY,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIX,gBAAgB,IAAIE,EAAE,IAAID,qBAAqB,EAAE;AACnD,MAAA,MAAM0B,sBAAsB,GAAG9C,eAAe,EAAE;AAChD,MAAA,MAAMiD,YAAY,GAAG,CAAC,CAACH,sBAAsB,EAAER,IAAI,CAAE5B,IAAI,IAAKA,IAAI,KAAKW,EAAE,CAAC;MAC1ED,qBAAqB,CAAC6B,YAAY,CAAC;AACrC,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAAC5B,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1B,IAAIA,gBAAgB,KAAKuB,WAAW,IAAI,CAACH,UAAU,CAACI,SAAS,CAAC,EAAE;AAC9D,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,oBACEO,IAAA,CAAA,KAAA,EAAA;AAAK5B,IAAAA,SAAS,EAAE6B,IAAI,CAAC,WAAW,EAAE7B,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAA+B,IAAAA,QAAA,EAAA,CAClD,CAAC,CAACvC,SAAS,iBACVwC,GAAA,CAAA,KAAA,EAAA;AAAK/B,MAAAA,SAAS,EAAC,iBAAiB;MAAA8B,QAAA,eAC9BC,GAAA,CAACC,YAAY,EAAA;AACXC,QAAAA,IAAI,EAAE1C,SAAU;AAChBS,QAAAA,SAAS,EAAE6B,IAAI,CAAC,CAAA,gBAAA,EAAmBtC,SAAS,EAAE,CAAE;AAChD2C,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC;OAAE;KAEL,CACN,eACDR,IAAA,CAAA,KAAA,EAAA;AAAK5B,MAAAA,SAAS,EAAC,qBAAqB;AAAA8B,MAAAA,QAAA,gBAClCF,IAAA,CAAA,KAAA,EAAA;AAAK5B,QAAAA,SAAS,EAAC,mBAAmB;QAAA8B,QAAA,EAAA,cAChCC,GAAA,CAACM,IAAI,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACxC,UAAAA,SAAS,EAAE6B,IAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClEtC;AAAK,SACF,CACN,EAACe,sBAAsB,iBACrBwB,GAAA,CAACU,IAAI,EAAA;AACH/C,UAAAA,IAAI,EAAEA,IAAK;UACX4C,IAAI,EAAEC,UAAU,CAACG,UAAW;AAC5B1C,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAAmC,UAAAA,QAAA,EAEhBrC;AAAI,SACD,CACP,EACAQ,MAAM,iBACL8B,GAAA,CAACU,IAAI,EAAA;UACH/C,IAAI,EAAEO,MAAM,CAACP,IAAK;UAClBiD,MAAM,EAAE1C,MAAM,CAAC0C,MAAO;AACtB3C,UAAAA,SAAS,EAAC,OAAO;UACjB,YAAA,EAAYC,MAAM,CAAC,YAAY,CAAE;UACjCqC,IAAI,EAAEC,UAAU,CAACG,UAAW;UAC5B/C,OAAO,EAAEM,MAAM,CAACN,OAAQ;UAAAmC,QAAA,EAEvB7B,MAAM,CAAC2C;AAAI,SACR,CACP;OACE,CACL,EAAChD,SAAS,IAAIC,gBAAgB,gBAC5BkC,GAAA,CAACc,UAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnB,QAAA,YAAA,EAAY5C,IAAI,CAAC6C,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DtD,QAAAA,OAAO,EAAE4B,eAAgB;AAAAO,QAAAA,QAAA,eAEzBC,GAAA,CAACmB,KAAK,EAAA,EAAA;OACI,CAAC,GACX,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/index.js

@@ -76,6 +76,7 @@ var LegacyListItem = require('./_deprecated/LegacyListItem/LegacyListItem.js');
 var Loader = require('./Loader/Loader.js');
 var Logo = require('./Logo/Logo.js');
 var Markdown = require('./Markdown/Markdown.js');
+var Markup = require('./Markup/Markup.js');
 var Modal = require('./Modal/Modal.js');
 var Money = require('./Money/Money.js');
 var MoneyInput = require('./MoneyInput/MoneyInput.js');
@@ -244,6 +245,7 @@ Object.defineProperty(exports, "LogoType", {
 	get: function () { return Logo.LogoType; }
 });
 exports.Markdown = Markdown.default;
+exports.Markup = Markup.Markup;
 exports.Modal = Modal.default;
 exports.Money = Money.default;
 exports.MoneyInput = MoneyInput.default;

package/build/index.js.map

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

package/build/index.mjs

@@ -74,6 +74,7 @@ export { default as LegacyListItem } from './_deprecated/LegacyListItem/LegacyLi
 export { default as Loader } from './Loader/Loader.mjs';
 export { default as Logo, LogoType } from './Logo/Logo.mjs';
 export { default as Markdown } from './Markdown/Markdown.mjs';
+export { Markup } from './Markup/Markup.mjs';
 export { default as Modal } from './Modal/Modal.mjs';
 export { default as Money } from './Money/Money.mjs';
 export { default as MoneyInput } from './MoneyInput/MoneyInput.mjs';

package/build/index.mjs.map

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

package/build/main.css

@@ -27121,7 +27121,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
-  --Button-iconSpacerSize: 18px;
 }
 
 .wds-Button--medium:has(.wds-Button-avatars) {
@@ -27140,7 +27139,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--small {
   padding: var(--Button-small-padding);
-  --Button-iconSpacerSize: 16px;
 }
 
 .wds-Button--small:has(.wds-Button-icon--start) {
@@ -27159,7 +27157,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-avatars {
   display: inline-flex;
-  flex-shrink: 0;
 }
 
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
@@ -27168,7 +27165,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-icon {
   display: inline-block;
-  flex-shrink: 0;
 }
 
 .wds-Button-icon--md {
@@ -27203,13 +27199,6 @@ a[data-toggle="tooltip"] {
   position: relative;
 }
 
-.wds-Button:has(.wds-Button-icon--start):not(:has(.wds-Button-icon--end)) .wds-Button-label::after,
-.wds-Button:has(.wds-Button-icon--end):not(:has(.wds-Button-icon--start)) .wds-Button-label::before {
-  content: '';
-  width: var(--Button-iconSpacerSize);
-  flex-shrink: 0;
-}
-
 .wds-Button-loader {
   position: absolute;
   width: 100%;
@@ -30928,6 +30917,41 @@ button.np-link {
   height: var(--wds-logo-height);
 }
 
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+
+.wds-markup-paragraph {
+  margin: 0;
+}
+
 .tw-modal--scrollable {
   max-height: 100%;
   /* mobile viewport bug fix */

package/build/styles/Button/Button.css

@@ -151,7 +151,6 @@
 }
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
-  --Button-iconSpacerSize: 18px;
 }
 .wds-Button--medium:has(.wds-Button-avatars) {
   padding-inline-start: 8px;
@@ -166,7 +165,6 @@
 }
 .wds-Button--small {
   padding: var(--Button-small-padding);
-  --Button-iconSpacerSize: 16px;
 }
 .wds-Button--small:has(.wds-Button-icon--start) {
   padding-inline-start: 8px;
@@ -181,14 +179,12 @@
 }
 .wds-Button-avatars {
   display: inline-flex;
-  flex-shrink: 0;
 }
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
   color: var(--Button-color);
 }
 .wds-Button-icon {
   display: inline-block;
-  flex-shrink: 0;
 }
 .wds-Button-icon--md {
   --Button-iconSize: 18px;
@@ -216,12 +212,6 @@
   gap: var(--Button-label-gap);
   position: relative;
 }
-.wds-Button:has(.wds-Button-icon--start):not(:has(.wds-Button-icon--end)) .wds-Button-label::after,
-.wds-Button:has(.wds-Button-icon--end):not(:has(.wds-Button-icon--start)) .wds-Button-label::before {
-  content: '';
-  width: var(--Button-iconSpacerSize);
-  flex-shrink: 0;
-}
 .wds-Button-loader {
   position: absolute;
   width: 100%;

package/build/styles/Markup/Markup.css

@@ -0,0 +1,28 @@
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+.wds-markup-paragraph {
+  margin: 0;
+}

package/build/styles/Markup/_stories/Vulnerability/Vulnerability.css

@@ -0,0 +1,69 @@
+.vulnerability {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 4px 16px;
+  margin-bottom: 32px;
+}
+
+.vulnerability__label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+}
+
+.vulnerability__input,
+.vulnerability__output {
+  min-height: 1lh;
+  max-height: 28lh;
+  border: 1px solid #e2e8f0;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  line-height: 1.5;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-wrap: break-word;
+  font-size: 12px;
+}
+
+.vulnerability__input {
+  width: 100%;
+  background: #000000d9;
+  color: #ededed;
+  field-sizing: content;
+  resize: none;
+}
+
+.vulnerability__output {
+  background: #ffffff;
+  overflow-y: auto;
+}
+
+.vulnerability__badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 3em;
+  font-size: 11px;
+  line-height: 0.75rem;
+  font-weight: 700;
+  margin-left: 8px;
+  vertical-align: middle;
+  text-align: center;
+  background-color: var(--badge-bg);
+  color: var(--badge-color);
+  box-shadow: color-mix(in srgb, var(--badge-color) 10%, transparent) 0 0 0 1px inset;
+}
+
+.vulnerability__badge--high {
+  --badge-bg: #ffe8ea;
+  --badge-color: #f30010;
+}
+
+.vulnerability__badge--medium {
+  --badge-bg: #fff7cf;
+  --badge-color: #51390d;
+}
+
+.vulnerability__badge--low {
+  --badge-bg: #d7f8ce;
+  --badge-color: #00511e;
+}

package/build/styles/main.css

@@ -27121,7 +27121,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
-  --Button-iconSpacerSize: 18px;
 }
 
 .wds-Button--medium:has(.wds-Button-avatars) {
@@ -27140,7 +27139,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--small {
   padding: var(--Button-small-padding);
-  --Button-iconSpacerSize: 16px;
 }
 
 .wds-Button--small:has(.wds-Button-icon--start) {
@@ -27159,7 +27157,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-avatars {
   display: inline-flex;
-  flex-shrink: 0;
 }
 
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
@@ -27168,7 +27165,6 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-icon {
   display: inline-block;
-  flex-shrink: 0;
 }
 
 .wds-Button-icon--md {
@@ -27203,13 +27199,6 @@ a[data-toggle="tooltip"] {
   position: relative;
 }
 
-.wds-Button:has(.wds-Button-icon--start):not(:has(.wds-Button-icon--end)) .wds-Button-label::after,
-.wds-Button:has(.wds-Button-icon--end):not(:has(.wds-Button-icon--start)) .wds-Button-label::before {
-  content: '';
-  width: var(--Button-iconSpacerSize);
-  flex-shrink: 0;
-}
-
 .wds-Button-loader {
   position: absolute;
   width: 100%;
@@ -30928,6 +30917,41 @@ button.np-link {
   height: var(--wds-logo-height);
 }
 
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+
+.wds-markup-paragraph {
+  margin: 0;
+}
+
 .tw-modal--scrollable {
   max-height: 100%;
   /* mobile viewport bug fix */

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/build/types/Markup/Markup.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { MarkupProps } from './Markup.types';
+/**
+ * Parses a markup string and renders it as React elements. Supports `<important>`,
+ * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),
+ * and `<link>` (alias `<a>`) with secure href validation.
+ *
+ * It only processes `string` input, while `ReactNode` is passed-through without processing.
+ *
+ * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be
+ * eventually deprecated.
+ *
+ * @see http://storybook.wise.design/?path=/docs/typography-markup--docs
+ * @link ../emphasis/Emphasis | Emphasis
+ */
+export declare const Markup: React.FC<MarkupProps>;
+export default Markup;
+//# sourceMappingURL=Markup.d.ts.map

package/build/types/Markup/Markup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markup.d.ts","sourceRoot":"","sources":["../../../src/Markup/Markup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAA6B,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqH7E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoCxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/Markup/Markup.types.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import type { LinkProps } from '../Link';
+export type MarkupNode = {
+    type: 'text';
+    content: string;
+} | {
+    type: 'newline';
+} | {
+    type: 'important';
+    accessibilityLabel?: string;
+    children: MarkupNode[];
+} | {
+    type: 'positive';
+    accessibilityLabel?: string;
+    children: MarkupNode[];
+} | {
+    type: 'negative';
+    accessibilityLabel?: string;
+    children: MarkupNode[];
+} | {
+    type: 'strong';
+    accessibilityLabel?: string;
+    children: MarkupNode[];
+} | {
+    type: 'strikethrough';
+    accessibilityLabel?: string;
+    children: MarkupNode[];
+} | {
+    type: 'paragraph';
+    children: MarkupNode[];
+} | {
+    type: 'link';
+    href?: string;
+    action?: string;
+    target?: string;
+    accessibilityLabel?: string;
+    children: MarkupNode[];
+};
+export type MarkupActionHandler = NonNullable<LinkProps['onClick']>;
+export type MarkupActions = Record<string, MarkupActionHandler>;
+export interface MarkupProps {
+    /**
+     * Markup string to parse and render, or arbitrary JSX to pass through unchanged.
+     * Parsing only occurs when children is a string.
+     * */
+    children?: React.ReactNode;
+    /**
+     * Map of placeholder keys to plain-text values. Values are substituted into
+     * `{{key}}` placeholders in text nodes and are never parsed as markup.
+     * */
+    data?: Record<string, string | number>;
+    /**
+     * Controls which link destinations are allowed to render as clickable links.
+     * Non-matching hrefs degrade to plain text. This is an additional restriction
+     * on top of built-in protocol/host sanitisation — it never bypasses it.
+     * - `'internal'` (default) — root-relative paths (`/*`) and `https://wise.com` URLs
+     * - `'all'` — any href that passes base sanitisation (including external HTTPS domains)
+     * - `'none'` — all href-based links render as plain text
+     * */
+    allowLinks?: 'internal' | 'all' | 'none';
+    /**
+     * Map of action names to click handlers for `<link action="name">` button-mode links.
+     * */
+    actions?: MarkupActions;
+    /**
+     * Wrapper element. Defaults to `div` when the parsed tree contains `<paragraph>` nodes,
+     * `span` otherwise. Set explicitly to override auto-detection.
+     * When passing a custom React component, it must accept a `className` prop.
+     * */
+    as?: React.ElementType;
+    className?: string;
+    /**
+     * When using a custom React component via `as`, it must also accept a `data-testid` prop.
+     * */
+    'data-testid'?: string;
+}
+//# sourceMappingURL=Markup.types.d.ts.map

package/build/types/Markup/Markup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markup.types.d.ts","sourceRoot":"","sources":["../../../src/Markup/Markup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,UAAU,GAClB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GACnB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;CAAE,GAC1E;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;CAAE,GACzE;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;CAAE,GACzE;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;CAAE,GACvE;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;CAAE,GAC9E;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;CAAE,GAC7C;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB,CAAC;AAEN,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACvC;;;;;;;SAOK;IACL,UAAU,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC;;SAEK;IACL,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;SAIK;IACL,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;SAEK;IACL,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}