@transferwise/components 46.86.2 → 46.87.0

package/build/main.css

@@ -3689,6 +3689,17 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/build/nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\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    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\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\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?: ActionOptions;\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 Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\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        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !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 as IllustrationNames}\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          {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 && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\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","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}
+{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\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    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\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\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?: ActionOptions;\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 Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\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        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !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 as IllustrationNames}\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          {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 && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\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","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}

package/build/nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\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    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\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\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?: ActionOptions;\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 Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\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        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !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 as IllustrationNames}\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          {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 && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\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","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport Link from '../link';\nimport { Action, ActionOptions } from '../common/action/Action';\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    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\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\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?: ActionOptions;\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 Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  media,\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\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        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty\n      } catch (error) {}\n\n      setIsDismissed(true);\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id) {\n      const dismissedNudgesStorage = getLocalStorage();\n      let isDismissed = false;\n\n      if (dismissedNudgesStorage?.find((item) => item === id)) {\n        setIsDismissed(true);\n        isDismissed = true;\n      }\n\n      if (isPreviouslyDismissed) {\n        isPreviouslyDismissed(isDismissed);\n      }\n    }\n\n    setIsMounted(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !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 as IllustrationNames}\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          {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 && <Action action={action} className=\"m-t-1\" />}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <CloseButton className=\"wds-nudge-control\" size=\"sm\" onClick={handleOnDismiss} />\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","media","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","Action","CloseButton"],"mappings":"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"}

package/build/styles/main.css

@@ -3689,6 +3689,17 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/build/styles/nudge/Nudge.css

@@ -136,6 +136,17 @@
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

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

@@ -2,7 +2,7 @@ import { Assets } from '@wise/art';
 import { ReactNode, MouseEvent } from 'react';
 import { ActionOptions } from '../common/action/Action';
 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}`;
+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}`;
 type BaseProps = {
     /** @deprecated use `mediaName` property instead */
     media?: ReactNode;

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,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGhE,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAmB9C,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,CAAC;AAE7B,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,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,aAAa,CAAC;IACvB,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,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,iIAaR,KAAK,uCAgFP,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGhE,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAmB9C,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,CAAC;AAEvB,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,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,aAAa,CAAC;IACvB,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,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,iIAaR,KAAK,uCAgFP,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAA,MAAM,mBAAmB,cAAe,SAAS,QAAQ,EAAE,GAAG,SAAS,MAAM,EAAE,KAAG,MAAM,EAOrF,CAAC;AAEJ,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"getAllowedFileTypes.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAqBxC,QAAA,MAAM,mBAAmB,cAAe,SAAS,QAAQ,EAAE,GAAG,SAAS,MAAM,EAAE,KAAG,MAAM,EAcpF,CAAC;AAEL,eAAe,mBAAmB,CAAC"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.js

@@ -1,8 +1,28 @@
 'use strict';
 
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
-.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
-.join(', '));
+const parseFileType = fileType => {
+  if (fileType?.includes('.')) {
+    return fileType.replace('.', '').toUpperCase();
+  }
+  const mimeType = fileType?.split('/');
+  if (mimeType?.length > 1) {
+    let parsedType = mimeType[1];
+    if (parsedType.toLocaleLowerCase() === 'jpeg') {
+      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
+    }
+    return parsedType.toUpperCase();
+  }
+  return fileType;
+};
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
+  const splittedFileTypes = fileType?.split(',');
+  if (splittedFileTypes?.length > 1) {
+    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
+    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
+  }
+  // If `fileType` contains only `format` or `mime` type, parse the type
+  return parseFileType(fileType);
+});
 
 module.exports = getAllowedFileTypes;
 //# sourceMappingURL=getAllowedFileTypes.js.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":";;AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":";;AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs

@@ -1,6 +1,26 @@
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
-.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
-.join(', '));
+const parseFileType = fileType => {
+  if (fileType?.includes('.')) {
+    return fileType.replace('.', '').toUpperCase();
+  }
+  const mimeType = fileType?.split('/');
+  if (mimeType?.length > 1) {
+    let parsedType = mimeType[1];
+    if (parsedType.toLocaleLowerCase() === 'jpeg') {
+      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
+    }
+    return parsedType.toUpperCase();
+  }
+  return fileType;
+};
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
+  const splittedFileTypes = fileType?.split(',');
+  if (splittedFileTypes?.length > 1) {
+    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
+    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
+  }
+  // If `fileType` contains only `format` or `mime` type, parse the type
+  return parseFileType(fileType);
+});
 
 export { getAllowedFileTypes as default };
 //# sourceMappingURL=getAllowedFileTypes.mjs.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":"AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.86.2",
+  "version": "46.87.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "14.20.1"
+    "@transferwise/neptune-css": "14.20.1",
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/drawer/Drawer.spec.tsx

@@ -0,0 +1,93 @@
+import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
+import { Position } from '../common';
+
+import Drawer from './Drawer';
+
+jest.mock('../common/DOMOperations');
+mockMatchMedia();
+
+describe('Drawer', () => {
+  const renderedComponent = (props: React.ComponentProps<typeof Drawer>) =>
+    render(<Drawer {...props} />);
+
+  const props = {
+    open: true,
+    onClose: jest.fn(),
+    headerTitle: 'Drawer Title',
+    footerContent: <div>Footer Content</div>,
+    children: <p>Drawer Content</p>,
+    className: 'drawer-class',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the Drawer component', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('renders the header title', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+  });
+
+  it('renders the footer content', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Footer Content')).toBeInTheDocument();
+  });
+
+  it('renders the children content', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Drawer Content')).toBeInTheDocument();
+  });
+
+  it('passes through the className prop', () => {
+    renderedComponent({ ...props, className: 'drawer-class' });
+    expect(screen.getByRole('dialog')).toHaveClass('drawer-class');
+  });
+
+  it('calls onClose when the close button is clicked', async () => {
+    renderedComponent(props);
+    await userEvent.click(screen.getByLabelText('Close'));
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose if the dimmer is clicked', async () => {
+    render(<Drawer {...props} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClose if the drawer content is clicked', async () => {
+    render(<Drawer {...props}>Drawer Content</Drawer>);
+    await userEvent.click(screen.getByText('Drawer Content'));
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
+
+  it('does not render the Drawer when open is false', () => {
+    renderedComponent({ ...props, open: false });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders the Drawer with the correct aria-labelledby attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');
+  });
+
+  it('renders the Drawer with the correct position', () => {
+    renderedComponent({ ...props, position: Position.LEFT });
+    expect(screen.getByRole('dialog').parentElement).toHaveClass('sliding-panel--open-left');
+  });
+
+  it('renders the Drawer with the correct role attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('role', 'dialog');
+  });
+
+  it('renders the Drawer with the correct aria-modal attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+  });
+});

package/src/main.css

@@ -3689,6 +3689,17 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/src/nudge/Nudge.css

@@ -136,6 +136,17 @@
   margin-left: 0;
   margin-right: 1px;
 }
+.wds-nudge-media-flower {
+  margin-left: -24px;
+  margin-top: 11px;
+  position: absolute;
+  width: 156px;
+}
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -24px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/src/nudge/Nudge.less

@@ -65,6 +65,9 @@
     &-shopping-bag {
       .media-position(116px, 1px, 14px);
     }
+    &-flower {
+      .media-position(156px, -24px, 11px);
+    }
   }
 
   &-container {

package/src/nudge/Nudge.story.tsx

@@ -104,6 +104,16 @@ export const Default = () => {
         onClick={action('action clicked')}
         onDismiss={action('dismissed')}
       />
+
+      <Nudge
+        mediaName={Assets.FLOWER}
+        className="m-b-2"
+        title="Text that is no longer than two lines."
+        link="Link"
+        href="#"
+        onClick={action('action clicked')}
+        onDismiss={action('dismissed')}
+      />
     </div>
   );
 };

package/src/nudge/Nudge.tsx

@@ -38,7 +38,8 @@ type MediaNameType =
   | `${Assets.BUSINESS_CARD}`
   | `${Assets.HEART}`
   | `${Assets.MULTI_CURRENCY}`
-  | `${Assets.SHOPPING_BAG}`;
+  | `${Assets.SHOPPING_BAG}`
+  | `${Assets.FLOWER}`;
 
 type BaseProps = {
   /** @deprecated use `mediaName` property instead */

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Status } from '../common';
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
-import { userEvent, within } from '@storybook/test';
+import { userEvent } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => createDelayedPromise(),
-  onDeleteFile: async (id: string | number) => createDelayedPromise(),
+  onUploadFile: async () => createDelayedPromise(),
+  onDeleteFile: async () => createDelayedPromise(),
 };
 
 export const UploadInputWithDescriptionFromProps: Story = {
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
     await userEvent.tab();
     await triggerModalAndConfirm();
     await triggerModalAndConfirm({ isLink: false });
@@ -282,7 +282,7 @@ export const DeletingBottom: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
     await userEvent.tab();
     await userEvent.tab();
     await userEvent.tab();

package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts

@@ -38,4 +38,16 @@ describe('getAllowedFileTypes', () => {
       expect(allowedFileTypes).toStrictEqual(['*']);
     });
   });
+
+  describe('using only mime types', () => {
+    const mimeTypes = ['application/json', 'image/jpeg'];
+
+    beforeAll(() => {
+      allowedFileTypes = getAllowedFileTypes(mimeTypes);
+    });
+
+    it('returns the original mime types', () => {
+      expect(allowedFileTypes).toStrictEqual(['JSON', 'JPG, JPEG']);
+    });
+  });
 });

package/src/uploadInput/uploadButton/getAllowedFileTypes.ts

@@ -1,12 +1,38 @@
 import { FileType } from '../../common';
 
+const parseFileType = (fileType: string): string => {
+  if (fileType?.includes('.')) {
+    return fileType.replace('.', '').toUpperCase();
+  }
+
+  const mimeType = fileType?.split('/');
+  if (mimeType?.length > 1) {
+    let parsedType = mimeType[1];
+
+    if (parsedType.toLocaleLowerCase() === 'jpeg') {
+      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
+    }
+
+    return parsedType.toUpperCase();
+  }
+
+  return fileType;
+};
+
 const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
-  fileTypes.map((fileTypeDefinition: string) =>
-    fileTypeDefinition
-      .split(',')
-      .filter((extension) => !extension.includes('/')) // Filter out mime types
-      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
-      .join(', '),
-  );
+  fileTypes.map((fileType: string) => {
+    const splittedFileTypes = fileType?.split(',');
+
+    if (splittedFileTypes?.length > 1) {
+      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
+      return splittedFileTypes
+        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))
+        .map((splittedFileType: string) => parseFileType(splittedFileType))
+        .join(', ');
+    }
+
+    // If `fileType` contains only `format` or `mime` type, parse the type
+    return parseFileType(fileType);
+  });
 
 export default getAllowedFileTypes;

package/src/drawer/Drawer.rtl.spec.tsx

@@ -1,59 +0,0 @@
-import { DimmerProps } from '../dimmer';
-import { SlidingPanelProps } from '../slidingPanel';
-import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
-
-import Drawer from './Drawer';
-
-mockMatchMedia();
-
-jest.mock(
-  '../dimmer',
-  () =>
-    function Dimmer({ open, children }: DimmerProps) {
-      return open ? <div className="dimmer">{children}</div> : null;
-    },
-);
-
-jest.mock(
-  '../slidingPanel',
-  () =>
-    function SlidingPanel({ open, children }: SlidingPanelProps) {
-      return open ? <div className="sliding-panel">{children}</div> : null;
-    },
-);
-
-describe('Drawer', () => {
-  const props = {
-    onClose: jest.fn(),
-    open: true,
-  };
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders content when open', () => {
-    const { container } = render(<Drawer {...props}>content</Drawer>);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it("doesn't render content when closed", () => {
-    const { container } = render(
-      <Drawer {...props} open={false}>
-        content
-      </Drawer>,
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('calls onClose when user clicks close button', async () => {
-    render(<Drawer {...props}>content</Drawer>);
-    expect(props.onClose).not.toHaveBeenCalled();
-    await userEvent.click(getCloseButton());
-    expect(props.onClose).toHaveBeenCalledTimes(1);
-  });
-
-  const getCloseButton = () => screen.getByLabelText('Close');
-});

package/src/drawer/Drawer.spec.js

@@ -1,101 +0,0 @@
-import { mount } from 'enzyme';
-
-import { mockMatchMedia } from '../test-utils';
-import Title from '../title/Title';
-
-import Drawer from '.';
-
-mockMatchMedia();
-jest.mock('../common');
-jest.useFakeTimers();
-
-jest.mock(
-  '../dimmer',
-  () =>
-    function Dimmer({ open, children }) {
-      return open ? <div className="dimmer">{children}</div> : null;
-    },
-);
-
-jest.mock(
-  '../slidingPanel',
-  () =>
-    function SlidingPanel({ open, children }) {
-      return open ? <div className="sliding-panel">{children}</div> : null;
-    },
-);
-
-const defaultLocale = 'en-GB';
-
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function InjectedComponent(props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
-    },
-  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
-  defineMessages: (translations) => translations,
-}));
-
-describe('Drawer', () => {
-  let component;
-  const props = {
-    open: true,
-    position: 'left',
-    onClose: jest.fn(),
-    children: null,
-    headerTitle: null,
-    footerContent: null,
-  };
-
-  beforeEach(() => {
-    component = mount(<Drawer {...props} />);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    component.unmount();
-  });
-
-  it('renders drawer header if title is provided', () => {
-    expect(component.find('.np-drawer-header--title')).toHaveLength(0);
-    component.setProps({ headerTitle: 'A title' });
-    expect(component.find(Title)).toHaveLength(1);
-    expect(component.find(Title).props().children).toBe('A title');
-  });
-
-  it('renders header with or without borders', () => {
-    expect(component.find('.np-drawer-header--withborder')).toHaveLength(0);
-    component.setProps({ headerTitle: 'A title' });
-    expect(component.find('.np-drawer-header--withborder')).toHaveLength(1);
-  });
-
-  it('renders content if children are provided', () => {
-    expect(component.find('.np-drawer-content')).toHaveLength(0);
-    component.setProps({ children: 'SomeChildren' });
-    expect(component.find('.np-drawer-content')).toHaveLength(1);
-  });
-
-  it('renders drawer footer if footerContent is provided', () => {
-    expect(component.find('.np-drawer-footer')).toHaveLength(0);
-    component.setProps({ footerContent: 'SomeContent' });
-    expect(component.find('.np-drawer-footer')).toHaveLength(1);
-  });
-
-  it('passes onUnmount to Dimmer onExited prop', () => {
-    const onUnmount = jest.fn();
-    component.setProps({ onUnmount });
-    component.setProps({ open: true });
-    expect(component.find('Dimmer').prop('onExited')).toBe(onUnmount);
-  });
-
-  it('calls onUnmount when the component unmounts', () => {
-    const onUnmount = jest.fn();
-    component.setProps({ onUnmount });
-    component.setProps({ open: true });
-    expect(onUnmount).not.toHaveBeenCalled();
-    jest.runAllTimers();
-    component.setProps({ open: false });
-    component.find('Dimmer').prop('onExited')();
-    expect(onUnmount).toHaveBeenCalledTimes(1);
-  });
-});

package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Drawer doesn't render content when closed 1`] = `<div />`;
-
-exports[`Drawer renders content when open 1`] = `
-<div>
-  <div
-    class="dimmer"
-  >
-    <div
-      class="sliding-panel"
-    >
-      <div
-        aria-modal="true"
-        class="np-drawer"
-        role="dialog"
-      >
-        <div
-          class="np-drawer-header"
-        >
-          <button
-            aria-label="Close"
-            class="np-close-button close btn-link text-no-decoration np-close-button--large"
-            type="button"
-          >
-            <span
-              class="tw-icon tw-icon-cross "
-              data-testid="cross-icon"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                role="none"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <div
-          class="np-drawer-content"
-        >
-          content
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;