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

package/build/Nudge/Nudge.js

@@ -43,7 +43,7 @@ const getLocalStorage = () => {
         return storage.map(item => String(item));
       }
     }
-  } catch {}
+  } catch (error) {}
   return [];
 };
 const Nudge = ({
@@ -60,15 +60,6 @@ const Nudge = ({
   action
 }) => {
   const intl = reactIntl.useIntl();
-  const hasLegacyLink = Boolean(link);
-  const hasAction = action != null;
-  const shouldRenderLegacyLink = hasLegacyLink && !hasAction;
-  React.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 = React.useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
   const [nudgeState, setNudgeState] = React.useState(() => ({
     isDismissed: getIsDismissed(),
@@ -137,7 +128,7 @@ const Nudge = ({
           type: typography.Typography.BODY_LARGE,
           className: clsx.clsx('wds-nudge-body'),
           children: title
-        }), shouldRenderLegacyLink && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
+        }), link && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
           href: href,
           type: typography.Typography.LINK_LARGE,
           className: "wds-nudge-link",

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 {}\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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"}
+{"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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"}

package/build/Nudge/Nudge.mjs

@@ -1,6 +1,6 @@
 import { Illustration } from '@wise/art';
 import { clsx } from 'clsx';
-import { useEffect, useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } 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 {}
+  } catch (error) {}
   return [];
 };
 const Nudge = ({
@@ -56,15 +56,6 @@ 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(),
@@ -133,7 +124,7 @@ const Nudge = ({
           type: Typography.BODY_LARGE,
           className: clsx('wds-nudge-body'),
           children: title
-        }), shouldRenderLegacyLink && /*#__PURE__*/jsx(Link, {
+        }), link && /*#__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 {}\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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"}
+{"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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"}

package/build/main.css

@@ -27121,6 +27121,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
+  --Button-iconSpacerSize: 18px;
 }
 
 .wds-Button--medium:has(.wds-Button-avatars) {
@@ -27139,6 +27140,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--small {
   padding: var(--Button-small-padding);
+  --Button-iconSpacerSize: 16px;
 }
 
 .wds-Button--small:has(.wds-Button-icon--start) {
@@ -27157,6 +27159,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-avatars {
   display: inline-flex;
+  flex-shrink: 0;
 }
 
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
@@ -27165,6 +27168,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-icon {
   display: inline-block;
+  flex-shrink: 0;
 }
 
 .wds-Button-icon--md {
@@ -27199,6 +27203,13 @@ 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%;

package/build/styles/Button/Button.css

@@ -151,6 +151,7 @@
 }
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
+  --Button-iconSpacerSize: 18px;
 }
 .wds-Button--medium:has(.wds-Button-avatars) {
   padding-inline-start: 8px;
@@ -165,6 +166,7 @@
 }
 .wds-Button--small {
   padding: var(--Button-small-padding);
+  --Button-iconSpacerSize: 16px;
 }
 .wds-Button--small:has(.wds-Button-icon--start) {
   padding-inline-start: 8px;
@@ -179,12 +181,14 @@
 }
 .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;
@@ -212,6 +216,12 @@
   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/main.css

@@ -27121,6 +27121,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
+  --Button-iconSpacerSize: 18px;
 }
 
 .wds-Button--medium:has(.wds-Button-avatars) {
@@ -27139,6 +27140,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--small {
   padding: var(--Button-small-padding);
+  --Button-iconSpacerSize: 16px;
 }
 
 .wds-Button--small:has(.wds-Button-icon--start) {
@@ -27157,6 +27159,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-avatars {
   display: inline-flex;
+  flex-shrink: 0;
 }
 
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
@@ -27165,6 +27168,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-icon {
   display: inline-block;
+  flex-shrink: 0;
 }
 
 .wds-Button-icon--md {
@@ -27199,6 +27203,13 @@ 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%;

package/build/types/Nudge/Nudge.d.ts

@@ -4,41 +4,18 @@ import type { AlertAction } from '../_deprecated/Alert';
 export declare const STORAGE_NAME = "dismissedNudges";
 type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}` | `${Assets.FLOWER}` | `${Assets.GIFT_BOX}` | `${Assets.BACKPACK}` | `${Assets.DOCUMENTS}`;
 type BaseProps = {
-    /**
-     * @deprecated Use `mediaName` instead.
-     * Legacy custom media content is no longer used by `Nudge`.
-     */
+    /** @deprecated Use `mediaName` property instead. */
     media?: ReactNode;
-    /**
-     * Illustration asset name shown at the start of the nudge.
-     */
+    /** Media name  */
     mediaName?: MediaNameType;
-    /** Main nudge message content. */
     title: ReactNode;
-    /**
-     * Legacy CTA label content.
-     * Rendered only when `action` is not provided.
-     */
     link?: ReactNode;
-    /**
-     * Legacy CTA destination for `link`.
-     * Ignored when `action` is provided.
-     */
     href?: string;
-    /**
-     * Legacy click handler for `link`.
-     * Ignored when `action` is provided.
-     */
     onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;
     /** Fired when the user clicks on close button */
     onDismiss?: () => void;
-    /**
-     * Preferred CTA configuration rendered under the nudge body.
-     * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.
-     * If your label is short, use `aria-label` to provide more context.
-     */
+    /** 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 */
     action?: AlertAction;
-    /** Optional class name applied to the root nudge container. */
     className?: string;
 };
 export interface OptionalId extends BaseProps {

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

@@ -1 +1 @@
-{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/Nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAE,MAAM,WAAW,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAe,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOxD,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,QAAQ,EAAE,GACpB,GAAG,MAAM,CAAC,QAAQ,EAAE,GACpB,GAAG,MAAM,CAAC,SAAS,EAAE,CAAC;AAE1B,KAAK,SAAS,GAAG;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAE3D,QAAA,MAAM,KAAK,GAAI,uHAYZ,UAAU,uCAwHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/Nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAE,MAAM,WAAW,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAe,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOxD,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,QAAQ,EAAE,GACpB,GAAG,MAAM,CAAC,QAAQ,EAAE,GACpB,GAAG,MAAM,CAAC,SAAS,EAAE,CAAC;AAE1B,KAAK,SAAS,GAAG;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAE3D,QAAA,MAAM,KAAK,GAAI,uHAYZ,UAAU,uCA4GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ef7ebdb",
+  "version": "0.0.0-experimental-dbd40fc",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Button/Button.css

@@ -151,6 +151,7 @@
 }
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
+  --Button-iconSpacerSize: 18px;
 }
 .wds-Button--medium:has(.wds-Button-avatars) {
   padding-inline-start: 8px;
@@ -165,6 +166,7 @@
 }
 .wds-Button--small {
   padding: var(--Button-small-padding);
+  --Button-iconSpacerSize: 16px;
 }
 .wds-Button--small:has(.wds-Button-icon--start) {
   padding-inline-start: 8px;
@@ -179,12 +181,14 @@
 }
 .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;
@@ -212,6 +216,12 @@
   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/src/Button/Button.less

@@ -124,6 +124,7 @@
 
   &--medium {
     padding: var(--Button-medium-padding);
+    --Button-iconSpacerSize: 18px;
 
     &:has(.wds-Button-avatars){
       padding-inline-start: var(--size-8);
@@ -140,6 +141,7 @@
 
   &--small {
     padding: var(--Button-small-padding);
+    --Button-iconSpacerSize: 16px;
 
     &:has(.wds-Button-icon--start){
       padding-inline-start: var(--size-8);
@@ -159,6 +161,7 @@
 
   &-avatars {
     display: inline-flex;
+    flex-shrink: 0;
 
     .np-avatar-view .np-avatar-view-content {
       color: var(--Button-color);
@@ -168,6 +171,7 @@
   // Icon styles
   &-icon {
     display: inline-block;
+    flex-shrink: 0;
 
     &--md{
       --Button-iconSize: 18px;
@@ -202,6 +206,14 @@
     align-items: center;
     gap: var(--Button-label-gap);
     position: relative;
+
+    // Keep label text visually centered when only one icon addon is present.
+    .wds-Button:has(.wds-Button-icon--start):not(:has(.wds-Button-icon--end)) &::after,
+    .wds-Button:has(.wds-Button-icon--end):not(:has(.wds-Button-icon--start)) &::before {
+      content: '';
+      width: var(--Button-iconSpacerSize);
+      flex-shrink: 0;
+    }
   }
 
   &-loader {

package/src/Nudge/Nudge.test.tsx

@@ -42,49 +42,6 @@ describe('Nudge', () => {
     expect(defaultProps.onDismiss).toHaveBeenCalledTimes(1);
   });
 
-  it('renders action only when both action and link/href are supplied', () => {
-    const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-
-    render(
-      <Nudge
-        {...defaultProps}
-        action={{
-          text: 'Learn more',
-          href: '#action-link',
-          'aria-label': 'Learn more about rewards',
-        }}
-      />,
-    );
-
-    expect(screen.queryByText('CTA')).not.toBeInTheDocument();
-
-    const actionLink = screen.getByText('Learn more');
-    expect(actionLink).toBeInTheDocument();
-    expect(actionLink).toHaveAttribute('href', '#action-link');
-
-    consoleWarn.mockRestore();
-  });
-  it('shows a warning in development when both action and link/href are supplied', () => {
-    const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-
-    render(
-      <Nudge
-        {...defaultProps}
-        action={{
-          text: 'Learn more',
-          href: '#action-link',
-          'aria-label': 'Learn more about rewards',
-        }}
-      />,
-    );
-
-    expect(consoleWarn).toHaveBeenCalledWith(
-      'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',
-    );
-
-    consoleWarn.mockRestore();
-  });
-
   describe('Nudge persistance', () => {
     beforeEach(() => {
       jest.resetAllMocks();

package/src/Nudge/Nudge.tsx

@@ -25,7 +25,7 @@ const getLocalStorage = (): string[] => {
         return storage.map((item) => String(item));
       }
     }
-  } catch {}
+  } catch (error) {}
 
   return [];
 };
@@ -47,41 +47,18 @@ type MediaNameType =
   | `${Assets.DOCUMENTS}`;
 
 type BaseProps = {
-  /**
-   * @deprecated Use `mediaName` instead.
-   * Legacy custom media content is no longer used by `Nudge`.
-   */
+  /** @deprecated Use `mediaName` property instead. */
   media?: ReactNode;
-  /**
-   * Illustration asset name shown at the start of the nudge.
-   */
+  /** Media name  */
   mediaName?: MediaNameType;
-  /** Main nudge message content. */
   title: ReactNode;
-  /**
-   * Legacy CTA label content.
-   * Rendered only when `action` is not provided.
-   */
   link?: ReactNode;
-  /**
-   * Legacy CTA destination for `link`.
-   * Ignored when `action` is provided.
-   */
   href?: string;
-  /**
-   * Legacy click handler for `link`.
-   * Ignored when `action` is provided.
-   */
   onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;
   /** Fired when the user clicks on close button */
   onDismiss?: () => void;
-  /**
-   * Preferred CTA configuration rendered under the nudge body.
-   * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.
-   * If your label is short, use `aria-label` to provide more context.
-   */
+  /** 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 */
   action?: AlertAction;
-  /** Optional class name applied to the root nudge container. */
   className?: string;
 };
 
@@ -120,19 +97,6 @@ const Nudge = ({
   action,
 }: NudgeProps) => {
   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],
@@ -202,7 +166,8 @@ const Nudge = ({
           <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
             {title}
           </Body>
-          {shouldRenderLegacyLink && (
+          {/* Merge these two Link instances into one */}
+          {link && (
             <Link
               href={href}
               type={Typography.LINK_LARGE}

package/src/main.css

@@ -27121,6 +27121,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--medium {
   padding: var(--Button-medium-padding);
+  --Button-iconSpacerSize: 18px;
 }
 
 .wds-Button--medium:has(.wds-Button-avatars) {
@@ -27139,6 +27140,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button--small {
   padding: var(--Button-small-padding);
+  --Button-iconSpacerSize: 16px;
 }
 
 .wds-Button--small:has(.wds-Button-icon--start) {
@@ -27157,6 +27159,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-avatars {
   display: inline-flex;
+  flex-shrink: 0;
 }
 
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
@@ -27165,6 +27168,7 @@ a[data-toggle="tooltip"] {
 
 .wds-Button-icon {
   display: inline-block;
+  flex-shrink: 0;
 }
 
 .wds-Button-icon--md {
@@ -27199,6 +27203,13 @@ 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%;