@transferwise/components 0.0.0-experimental-5f1d3e8 → 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 = link != null;
-  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  /** @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 hasLegacyLink = link != null;\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","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AACF,EAAA,CAAC,CAAC,OAAOE,KAAK,EAAE,CAAC;AAEjB,EAAA,OAAO,EAAE;AACX,CAAC;AAuDD,MAAMC,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,iBAAO,EAAE;AACtB,EAAA,MAAMC,cAAc,GAAGC,iBAAW,CAChC,MAAOR,gBAAgB,IAAIE,EAAE,GAAG,CAAC,CAACtB,eAAe,EAAE,EAAE6B,IAAI,CAAEnB,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC,GAAG,KAAM,EACzF,CAACF,gBAAgB,EAAEE,EAAE,CAAC,CACvB;EAED,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,CAAC,OAAO;IAClDC,WAAW,EAAEN,cAAc,EAAE;AAC7BO,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC,CAAC;AAEHC,EAAAA,eAAS,CAAC,MAAK;AACb;IACAJ,aAAa,CAAEK,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;AAAEF,MAAAA,SAAS,EAAE;AAAI,KAAE,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;AAENC,EAAAA,eAAS,CAAC,MAAK;AACb;IACAJ,aAAa,CAAEK,IAAI,KAAM;AAAE,MAAA,GAAGA,IAAI;MAAEH,WAAW,EAAEN,cAAc;AAAE,KAAE,CAAC,CAAC;EACvE,CAAC,EAAE,CAACA,cAAc,EAAEL,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1C,MAAM;AAAEa,IAAAA;AAAW,GAAE,GAAGH,UAAU;EAElC,MAAMO,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAGtC,eAAe,EAAE;IAEhD,IAAIoB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFpB,QAAAA,YAAY,CAACqC,OAAO,CAACxC,YAAY,EAAEM,IAAI,CAACmC,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAEhB,EAAE,CAAC,CAAC,CAAC;MACrF,CAAC,CAAC,MAAM,CAAC;MAETS,aAAa,CAAEK,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAEH,QAAAA,WAAW,EAAE;AAAI,OAAE,CAAC,CAAC;AAC3D,IAAA;AAEA,IAAA,IAAId,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE;AACb,IAAA;EACF,CAAC;AAEDgB,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIf,gBAAgB,IAAIE,EAAE,IAAID,qBAAqB,EAAE;AACnD,MAAA,MAAMiB,sBAAsB,GAAGtC,eAAe,EAAE;AAChD,MAAA,MAAMyC,YAAY,GAAG,CAAC,CAACH,sBAAsB,EAAET,IAAI,CAAEnB,IAAI,IAAKA,IAAI,KAAKY,EAAE,CAAC;MAC1ED,qBAAqB,CAACoB,YAAY,CAAC;AACrC,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAACnB,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1B,IAAIA,gBAAgB,KAAKa,WAAW,IAAI,CAACH,UAAU,CAACI,SAAS,CAAC,EAAE;AAC9D,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;AAAKnB,IAAAA,SAAS,EAAEoB,SAAI,CAAC,WAAW,EAAEpB,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAAsB,IAAAA,QAAA,EAAA,CAClD,CAAC,CAAC9B,SAAS,iBACV+B,cAAA,CAAA,KAAA,EAAA;AAAKtB,MAAAA,SAAS,EAAC,iBAAiB;MAAAqB,QAAA,eAC9BC,cAAA,CAACC,gBAAY,EAAA;AACXC,QAAAA,IAAI,EAAEjC,SAAU;AAChBS,QAAAA,SAAS,EAAEoB,SAAI,CAAC,CAAA,gBAAA,EAAmB7B,SAAS,EAAE,CAAE;AAChDkC,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC;OAAE;KAEL,CACN,eACDR,eAAA,CAAA,KAAA,EAAA;AAAKnB,MAAAA,SAAS,EAAC,qBAAqB;AAAAqB,MAAAA,QAAA,gBAClCF,eAAA,CAAA,KAAA,EAAA;AAAKnB,QAAAA,SAAS,EAAC,mBAAmB;QAAAqB,QAAA,EAAA,cAChCC,cAAA,CAACM,YAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC/B,UAAAA,SAAS,EAAEoB,SAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClE7B;AAAK,SACF,CACN,EACCC,IAAI,iBACH6B,cAAA,CAACU,YAAI,EAAA;AACHtC,UAAAA,IAAI,EAAEA,IAAK;UACXmC,IAAI,EAAEC,qBAAU,CAACG,UAAW;AAC5BjC,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAA0B,UAAAA,QAAA,EAEhB5B;AAAI,SACD,CACP,EACAQ,MAAM,iBACLqB,cAAA,CAACU,YAAI,EAAA;UACHtC,IAAI,EAAEO,MAAM,CAACP,IAAK;UAClBwC,MAAM,EAAEjC,MAAM,CAACiC,MAAO;AACtBlC,UAAAA,SAAS,EAAC,OAAO;UACjB,YAAA,EAAYC,MAAM,CAAC,YAAY,CAAE;UACjC4B,IAAI,EAAEC,qBAAU,CAACG,UAAW;UAC5BtC,OAAO,EAAEM,MAAM,CAACN,OAAQ;UAAA0B,QAAA,EAEvBpB,MAAM,CAACkC;AAAI,SACR,CACP;OACE,CACL,EAACvC,SAAS,IAAIC,gBAAgB,gBAC5ByB,cAAA,CAACc,kBAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnB,QAAA,YAAA,EAAYnC,IAAI,CAACoC,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3D7C,QAAAA,OAAO,EAAEmB,eAAgB;AAAAO,QAAAA,QAAA,eAEzBC,cAAA,CAACmB,WAAK,EAAA,EAAA;OACI,CAAC,GACX,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;;"}

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 = link != null;
-  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  /** @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 hasLegacyLink = link != null;\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","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;AAuDD,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,GAAGX,IAAI,IAAI,IAAI;AAClC,EAAA,MAAMY,SAAS,GAAGJ,MAAM,IAAI,IAAI;AAChC,EAAA,MAAMK,sBAAsB,GAAGF,aAAa,IAAI,CAACC,SAAS;AAE1DE,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIL,SAAS,KAAKD,aAAa,IAAIV,IAAI,IAAI,IAAI,CAAC,EAAE;AACzF;AACAiB,MAAAA,OAAO,CAACC,IAAI,CACV,kHAAkH,CACnH;AACH,IAAA;EACF,CAAC,EAAE,CAACP,SAAS,EAAED,aAAa,EAAEV,IAAI,CAAC,CAAC;AAEpC,EAAA,MAAMmB,cAAc,GAAGC,WAAW,CAChC,MAAOjB,gBAAgB,IAAIE,EAAE,GAAG,CAAC,CAACrB,eAAe,EAAE,EAAEqC,IAAI,CAAE3B,IAAI,IAAKA,IAAI,KAAKW,EAAE,CAAC,GAAG,KAAM,EACzF,CAACF,gBAAgB,EAAEE,EAAE,CAAC,CACvB;EAED,MAAM,CAACiB,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,EAAEd,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1C,MAAM;AAAEsB,IAAAA;AAAW,GAAE,GAAGH,UAAU;EAElC,MAAMM,eAAe,GAAGA,MAAK;AAC3B,IAAA,MAAMC,sBAAsB,GAAG7C,eAAe,EAAE;IAEhD,IAAImB,gBAAgB,IAAIE,EAAE,EAAE;MAC1B,IAAI;AACFnB,QAAAA,YAAY,CAAC4C,OAAO,CAAC/C,YAAY,EAAEM,IAAI,CAAC0C,SAAS,CAAC,CAAC,GAAGF,sBAAsB,EAAExB,EAAE,CAAC,CAAC,CAAC;MACrF,CAAC,CAAC,MAAM,CAAC;MAETkB,aAAa,CAAEI,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAEF,QAAAA,WAAW,EAAE;AAAI,OAAE,CAAC,CAAC;AAC3D,IAAA;AAEA,IAAA,IAAIvB,SAAS,EAAE;AACbA,MAAAA,SAAS,EAAE;AACb,IAAA;EACF,CAAC;AAEDW,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIV,gBAAgB,IAAIE,EAAE,IAAID,qBAAqB,EAAE;AACnD,MAAA,MAAMyB,sBAAsB,GAAG7C,eAAe,EAAE;AAChD,MAAA,MAAMgD,YAAY,GAAG,CAAC,CAACH,sBAAsB,EAAER,IAAI,CAAE3B,IAAI,IAAKA,IAAI,KAAKW,EAAE,CAAC;MAC1ED,qBAAqB,CAAC4B,YAAY,CAAC;AACrC,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAAC3B,EAAE,EAAEF,gBAAgB,CAAC,CAAC;EAE1B,IAAIA,gBAAgB,KAAKsB,WAAW,IAAI,CAACH,UAAU,CAACI,SAAS,CAAC,EAAE;AAC9D,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,oBACEO,IAAA,CAAA,KAAA,EAAA;AAAK3B,IAAAA,SAAS,EAAE4B,IAAI,CAAC,WAAW,EAAE5B,SAAS,CAAE;AAACD,IAAAA,EAAE,EAAEA,EAAG;AAAA8B,IAAAA,QAAA,EAAA,CAClD,CAAC,CAACtC,SAAS,iBACVuC,GAAA,CAAA,KAAA,EAAA;AAAK9B,MAAAA,SAAS,EAAC,iBAAiB;MAAA6B,QAAA,eAC9BC,GAAA,CAACC,YAAY,EAAA;AACXC,QAAAA,IAAI,EAAEzC,SAAU;AAChBS,QAAAA,SAAS,EAAE4B,IAAI,CAAC,CAAA,gBAAA,EAAmBrC,SAAS,EAAE,CAAE;AAChD0C,QAAAA,IAAI,EAAC,OAAO;QACZC,cAAc,EAAA,IAAA;AACdC,QAAAA,GAAG,EAAC;OAAE;KAEL,CACN,eACDR,IAAA,CAAA,KAAA,EAAA;AAAK3B,MAAAA,SAAS,EAAC,qBAAqB;AAAA6B,MAAAA,QAAA,gBAClCF,IAAA,CAAA,KAAA,EAAA;AAAK3B,QAAAA,SAAS,EAAC,mBAAmB;QAAA6B,QAAA,EAAA,cAChCC,GAAA,CAACM,IAAI,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACvC,UAAAA,SAAS,EAAE4B,IAAI,CAAC,gBAAgB,CAAE;AAAAC,UAAAA,QAAA,EAClErC;AAAK,SACF,CACN,EAACc,sBAAsB,iBACrBwB,GAAA,CAACU,IAAI,EAAA;AACH9C,UAAAA,IAAI,EAAEA,IAAK;UACX2C,IAAI,EAAEC,UAAU,CAACG,UAAW;AAC5BzC,UAAAA,SAAS,EAAC,gBAAgB;AAC1BL,UAAAA,OAAO,EAAEA,OAAQ;AAAAkC,UAAAA,QAAA,EAEhBpC;AAAI,SACD,CACP,EACAQ,MAAM,iBACL6B,GAAA,CAACU,IAAI,EAAA;UACH9C,IAAI,EAAEO,MAAM,CAACP,IAAK;UAClBgD,MAAM,EAAEzC,MAAM,CAACyC,MAAO;AACtB1C,UAAAA,SAAS,EAAC,OAAO;UACjB,YAAA,EAAYC,MAAM,CAAC,YAAY,CAAE;UACjCoC,IAAI,EAAEC,UAAU,CAACG,UAAW;UAC5B9C,OAAO,EAAEM,MAAM,CAACN,OAAQ;UAAAkC,QAAA,EAEvB5B,MAAM,CAAC0C;AAAI,SACR,CACP;OACE,CACL,EAAC/C,SAAS,IAAIC,gBAAgB,gBAC5BiC,GAAA,CAACc,UAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnB,QAAA,YAAA,EAAY3C,IAAI,CAAC4C,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DrD,QAAAA,OAAO,EAAE2B,eAAgB;AAAAO,QAAAA,QAAA,eAEzBC,GAAA,CAACmB,KAAK,EAAA,EAAA;OACI,CAAC,GACX,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"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.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,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,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-5f1d3e8",
+  "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 [];
 };
@@ -97,19 +97,6 @@ const Nudge = ({
   action,
 }: NudgeProps) => {
   const intl = useIntl();
-  const hasLegacyLink = link != null;
-  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],
@@ -179,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%;