@transferwise/components 0.0.0-experimental-1d00fb5 → 0.0.0-experimental-d44dcb8

package/build/nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type 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 Link from '../link';\nimport type { AlertAction } from '../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\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 Props = 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}: Props) => {\n  const intl = useIntl();\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      } 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          {/* 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","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","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, type 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 type { AlertAction } from '../alert';\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.BACKPACK}`;\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 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      } 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          {/* 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          <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","target","text","CloseButton"],"mappings":"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"}

package/build/nudge/Nudge.mjs

@@ -3,13 +3,11 @@ import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
-import { Cross } from '@transferwise/icons';
-import { useIntl } from 'react-intl';
-import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import Link from '../link/Link.mjs';
-import IconButton from '../iconButton/IconButton.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
+// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
 const STORAGE_NAME = 'dismissedNudges';
 const getLocalStorage = () => {
   try {
@@ -24,6 +22,7 @@ const getLocalStorage = () => {
   return [];
 };
 const Nudge = ({
+  media,
   mediaName,
   title,
   link,
@@ -36,7 +35,6 @@ const Nudge = ({
   className,
   action
 }) => {
-  const intl = useIntl();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
   const handleOnDismiss = () => {
@@ -104,12 +102,10 @@ const Nudge = ({
           onClick: action.onClick,
           children: action.text
         })]
-      }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(IconButton, {
-        size: 24,
-        priority: "tertiary",
-        "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
-        onClick: handleOnDismiss,
-        children: /*#__PURE__*/jsx(Cross, {})
+      }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(CloseButton, {
+        className: "wds-nudge-control",
+        size: "sm",
+        onClick: handleOnDismiss
       }) : null]
     })]
   });

package/build/nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type 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 Link from '../link';\nimport type { AlertAction } from '../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\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 Props = 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}: Props) => {\n  const intl = useIntl();\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      } 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          {/* 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","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","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type 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 type { AlertAction } from '../alert';\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.BACKPACK}`;\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 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      } 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          {/* 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          <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","target","text","CloseButton"],"mappings":"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"}

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -26,6 +26,7 @@ const InlinePrompt = ({
   children,
   media = null,
   mediaLabel,
+  width = 'auto',
   'data-testid': dataTestId,
   ...rest
 }) => {
@@ -63,6 +64,7 @@ const InlinePrompt = ({
     sentiment: surfaceSentiment,
     "data-testid": dataTestId,
     className: clsx.clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment$1}`, {
+      'wds-inline-prompt--full-width': width === 'full',
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading
     }, className),

package/build/prompt/InlinePrompt/InlinePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   * To be used primarily for `proposition` sentiment.\n   */\n  mediaLabel?: string;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;AAyCA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACV,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,gBAAgB,GAAGX,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAM;AACxB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAW,OAAE,CAAC;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAChD,CAAC;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAW,OAAE,CAAC;AAChD,IAAA;IAEA,oBAAOK,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,WAAU;AAACoB,MAAAA,SAAS,EAAEZ;AAAW,KAAE,CAAC;EAC9E,CAAC;EAED,oBACEa,eAAA,CAACC,wBAAgB,EAAA;AACftB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEkB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBvB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SACF,CAAE;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CAAC,eACvEC,cAAA,CAACW,YAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CAAC;AAAA,GACP,CAAC;AAEvB;;;;"}
+{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   * To be used primarily for `proposition` sentiment.\n   */\n  mediaLabel?: string;\n  /**\n   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n   * @default auto\n   */\n  width?: 'auto' | 'full';\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  width = 'auto',\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--full-width': width === 'full',\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;AA8CA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,gBAAgB,GAAGZ,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAM;AACxB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,OAAE,CAAC;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAChD,CAAC;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAE,CAAC;AAChD,IAAA;IAEA,oBAAOM,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAE,CAAC;EAC9E,CAAC;EAED,oBACEc,eAAA,CAACC,wBAAgB,EAAA;AACfvB,IAAAA,SAAS,EAAEY,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBL,SAAS,EAAEmB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBxB,WAAS,EAAE,EACjC;MACE,+BAA+B,EAAES,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SACF,CAAE;AAAA,IAAA,GACEM,IAAI;AAAAL,IAAAA,QAAA,gBAERQ,cAAA,CAAA,KAAA,EAAA;AAAKT,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEO,WAAW;AAAE,KAAM,CAAC,eACvEC,cAAA,CAACW,YAAI,EAAA;AAAAnB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CAAC;AAAA,GACP,CAAC;AAEvB;;;;"}

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -24,6 +24,7 @@ const InlinePrompt = ({
   children,
   media = null,
   mediaLabel,
+  width = 'auto',
   'data-testid': dataTestId,
   ...rest
 }) => {
@@ -61,6 +62,7 @@ const InlinePrompt = ({
     sentiment: surfaceSentiment,
     "data-testid": dataTestId,
     className: clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment}`, {
+      'wds-inline-prompt--full-width': width === 'full',
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading
     }, className),

package/build/prompt/InlinePrompt/InlinePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   * To be used primarily for `proposition` sentiment.\n   */\n  mediaLabel?: string;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;AAyCA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACV,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,gBAAgB,GAAGX,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAM;AACxB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAW,OAAE,CAAC;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAChD,CAAC;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAW,OAAE,CAAC;AAChD,IAAA;IAEA,oBAAOK,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,SAAU;AAACoB,MAAAA,SAAS,EAAEZ;AAAW,KAAE,CAAC;EAC9E,CAAC;EAED,oBACEa,IAAA,CAACC,gBAAgB,EAAA;AACftB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEkB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBvB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SACF,CAAE;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CAAC,eACvEC,GAAA,CAACW,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CAAC;AAAA,GACP,CAAC;AAEvB;;;;"}
+{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  /**\n   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n   * To be used primarily for `proposition` sentiment.\n   */\n  mediaLabel?: string;\n  /**\n   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n   * @default auto\n   */\n  width?: 'auto' | 'full';\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  mediaLabel,\n  width = 'auto',\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox title={mediaLabel} />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--full-width': width === 'full',\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;AA8CA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,gBAAgB,GAAGZ,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAM;AACxB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,OAAE,CAAC;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAChD,CAAC;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAE,CAAC;AAChD,IAAA;IAEA,oBAAOM,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAE,CAAC;EAC9E,CAAC;EAED,oBACEc,IAAA,CAACC,gBAAgB,EAAA;AACfvB,IAAAA,SAAS,EAAEY,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBL,SAAS,EAAEmB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBxB,SAAS,EAAE,EACjC;MACE,+BAA+B,EAAES,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SACF,CAAE;AAAA,IAAA,GACEM,IAAI;AAAAL,IAAAA,QAAA,gBAERQ,GAAA,CAAA,KAAA,EAAA;AAAKT,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEO,WAAW;AAAE,KAAM,CAAC,eACvEC,GAAA,CAACW,IAAI,EAAA;AAAAnB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CAAC;AAAA,GACP,CAAC;AAEvB;;;;"}

package/build/radioGroup/RadioGroup.js

@@ -22,6 +22,7 @@ function RadioGroup({
     role: "radiogroup",
     ...inputAttributes,
     ...UNSAFE_inputAttributes,
+    className: "wds-radio-group",
     children: radios.map(({
       value = '',
       ...restProps

package/build/radioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n  UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n  UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div role=\"radiogroup\" {...inputAttributes} {...UNSAFE_inputAttributes}>\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;;;;;AAmBe,SAASA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA;AACkB,CAAC,EAAE;EACrB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAK,GAAC,CAAC;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAACR,eAAe,CAAC;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GAAKR,eAAe;AAAA,IAAA,GAAMD,sBAAsB;AAAAU,IAAAA,QAAA,EACnEd,MAAM,CAACe,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC;AAAU,KAAC,EAAEC,KAAK,kBACnDN,cAAA,CAACO;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACblB,MAAAA,IAAI,EAAEA,IAAK;AACXiB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKR,iBAAkB;MACrCL,QAAQ,EAAGkB,SAAS,IAAK;QACvBZ,oBAAoB,CAACY,SAAS,CAAC;QAC/BlB,QAAQ,CAACkB,SAAS,CAAC;AACrB,MAAA;AAAE,KAAA,EARGH,KASN,CACF;GACE,CAAC,GACJ,IAAI;AACV;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n  UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n  UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div\n      role=\"radiogroup\"\n      {...inputAttributes}\n      {...UNSAFE_inputAttributes}\n      className=\"wds-radio-group\"\n    >\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","className","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;;;;;AAmBe,SAASA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA;AACkB,CAAC,EAAE;EACrB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAK,GAAC,CAAC;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAACR,eAAe,CAAC;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GACbR,eAAe;AAAA,IAAA,GACfD,sBAAsB;AAC1BU,IAAAA,SAAS,EAAC,iBAAiB;AAAAC,IAAAA,QAAA,EAE1Bf,MAAM,CAACgB,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC;AAAU,KAAC,EAAEC,KAAK,kBACnDP,cAAA,CAACQ;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACbnB,MAAAA,IAAI,EAAEA,IAAK;AACXkB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKT,iBAAkB;MACrCL,QAAQ,EAAGmB,SAAS,IAAK;QACvBb,oBAAoB,CAACa,SAAS,CAAC;QAC/BnB,QAAQ,CAACmB,SAAS,CAAC;AACrB,MAAA;AAAE,KAAA,EARGH,KASN,CACF;GACE,CAAC,GACJ,IAAI;AACV;;;;"}

package/build/radioGroup/RadioGroup.mjs

@@ -18,6 +18,7 @@ function RadioGroup({
     role: "radiogroup",
     ...inputAttributes,
     ...UNSAFE_inputAttributes,
+    className: "wds-radio-group",
     children: radios.map(({
       value = '',
       ...restProps

package/build/radioGroup/RadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n  UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n  UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div role=\"radiogroup\" {...inputAttributes} {...UNSAFE_inputAttributes}>\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;AAmBe,SAASA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA;AACkB,CAAC,EAAE;EACrB,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAK,GAAC,CAAC;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,QAAQ,CAACR,eAAe,CAAC;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GAAKR,eAAe;AAAA,IAAA,GAAMD,sBAAsB;AAAAU,IAAAA,QAAA,EACnEd,MAAM,CAACe,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC;AAAU,KAAC,EAAEC,KAAK,kBACnDN,GAAA,CAACO;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACblB,MAAAA,IAAI,EAAEA,IAAK;AACXiB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKR,iBAAkB;MACrCL,QAAQ,EAAGkB,SAAS,IAAK;QACvBZ,oBAAoB,CAACY,SAAS,CAAC;QAC/BlB,QAAQ,CAACkB,SAAS,CAAC;AACrB,MAAA;AAAE,KAAA,EARGH,KASN,CACF;GACE,CAAC,GACJ,IAAI;AACV;;;;"}
+{"version":3,"file":"RadioGroup.mjs","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n  UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n  UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div\n      role=\"radiogroup\"\n      {...inputAttributes}\n      {...UNSAFE_inputAttributes}\n      className=\"wds-radio-group\"\n    >\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","className","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;AAmBe,SAASA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA;AACkB,CAAC,EAAE;EACrB,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAK,GAAC,CAAC;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,QAAQ,CAACR,eAAe,CAAC;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GACbR,eAAe;AAAA,IAAA,GACfD,sBAAsB;AAC1BU,IAAAA,SAAS,EAAC,iBAAiB;AAAAC,IAAAA,QAAA,EAE1Bf,MAAM,CAACgB,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC;AAAU,KAAC,EAAEC,KAAK,kBACnDP,GAAA,CAACQ;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACbnB,MAAAA,IAAI,EAAEA,IAAK;AACXkB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKT,iBAAkB;MACrCL,QAAQ,EAAGmB,SAAS,IAAK;QACvBb,oBAAoB,CAACa,SAAS,CAAC;QAC/BnB,QAAQ,CAACmB,SAAS,CAAC;AACrB,MAAA;AAAE,KAAA,EARGH,KASN,CACF;GACE,CAAC,GACJ,IAAI;AACV;;;;"}

package/build/styles/field/Field.css

@@ -1,4 +1,13 @@
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field .form-group--typeahead[class],
+.np-field .np-checkbox-label[class] {
+  margin-bottom: 0;
+}
+.np-field:has(.wds-radio-group) .np-field__prompt {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}

package/build/styles/main.css

@@ -949,6 +949,9 @@
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);
@@ -3822,10 +3825,19 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field .form-group--typeahead[class],
+.np-field .np-checkbox-label[class] {
+  margin-bottom: 0;
+}
+.np-field:has(.wds-radio-group) .np-field__prompt {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -5052,17 +5064,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-left: 0;
   margin-right: -16px;
 }
-.wds-nudge-media-gift-box {
-  margin-left: -22px;
-  margin-top: 6px;
-  position: absolute;
-  width: 129px;
-}
-[dir="rtl"] .wds-nudge-media-gift-box {
-  transform: scaleX(-1);
-  margin-left: 0;
-  margin-right: -22px;
-}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;
@@ -5098,6 +5099,13 @@ html:not([dir="rtl"]) .np-navigation-option {
   -webkit-text-decoration: var(--nudge-link-text-decoration);
           text-decoration: var(--nudge-link-text-decoration);
 }
+.wds-nudge-container .wds-nudge-control {
+  max-width: var(--nudge-control-width);
+  flex-basis: var(--nudge-control-width);
+  flex: 0 0 var(--nudge-control-width);
+  height: var(--nudge-control-width);
+  background-color: var(--nudge-control-background-color);
+}
 .np-overlay-header .np-overlay-header__content {
   min-height: 97px;
   width: 100%;
@@ -5398,6 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}
 .np-section {
   margin-top: 32px;
   margin-top: var(--size-32);
@@ -6924,6 +6935,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/build/styles/nudge/Nudge.css

@@ -158,17 +158,6 @@
   margin-left: 0;
   margin-right: -16px;
 }
-.wds-nudge-media-gift-box {
-  margin-left: -22px;
-  margin-top: 6px;
-  position: absolute;
-  width: 129px;
-}
-[dir="rtl"] .wds-nudge-media-gift-box {
-  transform: scaleX(-1);
-  margin-left: 0;
-  margin-right: -22px;
-}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;
@@ -204,3 +193,10 @@
   -webkit-text-decoration: var(--nudge-link-text-decoration);
           text-decoration: var(--nudge-link-text-decoration);
 }
+.wds-nudge-container .wds-nudge-control {
+  max-width: var(--nudge-control-width);
+  flex-basis: var(--nudge-control-width);
+  flex: 0 0 var(--nudge-control-width);
+  height: var(--nudge-control-width);
+  background-color: var(--nudge-control-background-color);
+}

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -27,6 +27,9 @@
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);

package/build/styles/radioGroup/RadioGroup.css

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/build/styles/typeahead/Typeahead.css

@@ -103,6 +103,10 @@
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/build/typeahead/Typeahead.js

@@ -14,7 +14,7 @@ var size = require('../common/propsValues/size.js');
 var sentiment = require('../common/propsValues/sentiment.js');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var InlineAlert = require('../inlineAlert/InlineAlert.js');
+var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
 var contexts = require('../inputs/contexts.js');
 var TypeaheadInput = require('./typeaheadInput/TypeaheadInput.js');
 var TypeaheadOption = require('./typeaheadOption/TypeaheadOption.js');
@@ -410,9 +410,20 @@ class Typeahead extends React.Component {
       showNewEntry,
       dropdownOpen
     });
-    const alertType = alert?.type ?? sentiment.Sentiment.NEUTRAL;
-    const hasError = errorState || alert && alertType === sentiment.Sentiment.ERROR;
-    const displayAlert = !errorState && alert || alert && alertType === sentiment.Sentiment.ERROR;
+    const alertType = (() => {
+      if (!alert?.type || alert.type === sentiment.Sentiment.INFO) {
+        return sentiment.Sentiment.NEUTRAL;
+      }
+      if (alert.type === sentiment.Sentiment.ERROR) {
+        return sentiment.Sentiment.NEGATIVE;
+      }
+      if (alert.type === sentiment.Sentiment.SUCCESS) {
+        return sentiment.Sentiment.POSITIVE;
+      }
+      return alert.type;
+    })();
+    const hasError = errorState || alert && alertType === sentiment.Sentiment.NEGATIVE;
+    const displayAlert = !errorState && alert || alert && alertType === sentiment.Sentiment.NEGATIVE;
     const hasWarning = displayAlert && alertType === sentiment.Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === sentiment.Sentiment.NEUTRAL;
     return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */jsxRuntime.jsx("div", {
@@ -427,7 +438,7 @@ class Typeahead extends React.Component {
       }),
       onClick: documentIosClick.stopPropagation,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: clsx.clsx('form-group', {
+        className: clsx.clsx('form-group', 'form-group--typeahead', {
           'has-error': hasError,
           'has-warning': hasWarning,
           'has-info': hasInfo
@@ -467,8 +478,10 @@ class Typeahead extends React.Component {
               children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
             })
           })]
-        }), displayAlert ? /*#__PURE__*/jsxRuntime.jsx(InlineAlert.default, {
-          type: alert.type,
+        }), displayAlert ? /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
+          sentiment: alertType,
+          className: "typeahead--prompt",
+          width: "full",
           children: alert.message
         }) : menu]
       })