@transferwise/components 46.72.1 → 46.72.2

package/build/alert/Alert.js

@@ -125,6 +125,7 @@ function Alert({
             })]
           }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
             action: action,
+            variant: "action-button",
             className: "m-t-1"
           })]
         })]

package/build/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\n            'alert d-flex',\n            `alert-${resolvedType}`,\n            arrow != null && alertArrowClassNames(arrow),\n            className,\n          )}\n          data-testid=\"alert\"\n          onTouchStart={() => setShouldFire(true)}\n          onTouchEnd={(event) => {\n            if (\n              shouldFire &&\n              action?.href &&\n              // Check if current event is triggered from closeButton\n              event.target instanceof Node &&\n              closeButtonReference.current &&\n              !closeButtonReference.current.contains(event.target)\n            ) {\n              if (action.target === '_blank') {\n                window.top?.open(action.href);\n              } else {\n                window.top?.location.assign(action.href);\n              }\n            }\n            setShouldFire(false);\n          }}\n          onTouchMove={() => setShouldFire(false)}\n        >\n          <div\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\n            <div className=\"alert__message\">\n              <div>\n                {title && (\n                  <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                    {title}\n                  </Title>\n                )}\n                <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                  {children || <InlineMarkdown>{message}</InlineMarkdown>}\n                </Body>\n              </div>\n              {action && <Action action={action} className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\n            'alert d-flex',\n            `alert-${resolvedType}`,\n            arrow != null && alertArrowClassNames(arrow),\n            className,\n          )}\n          data-testid=\"alert\"\n          onTouchStart={() => setShouldFire(true)}\n          onTouchEnd={(event) => {\n            if (\n              shouldFire &&\n              action?.href &&\n              // Check if current event is triggered from closeButton\n              event.target instanceof Node &&\n              closeButtonReference.current &&\n              !closeButtonReference.current.contains(event.target)\n            ) {\n              if (action.target === '_blank') {\n                window.top?.open(action.href);\n              } else {\n                window.top?.location.assign(action.href);\n              }\n            }\n            setShouldFire(false);\n          }}\n          onTouchMove={() => setShouldFire(false)}\n        >\n          <div\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\n            <div className=\"alert__message\">\n              <div>\n                {title && (\n                  <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                    {title}\n                  </Title>\n                )}\n                <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                  {children || <InlineMarkdown>{message}</InlineMarkdown>}\n                </Body>\n              </div>\n              {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/alert/Alert.mjs

@@ -121,6 +121,7 @@ function Alert({
             })]
           }), action && /*#__PURE__*/jsx(Action, {
             action: action,
+            variant: "action-button",
             className: "m-t-1"
           })]
         })]

package/build/alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\n            'alert d-flex',\n            `alert-${resolvedType}`,\n            arrow != null && alertArrowClassNames(arrow),\n            className,\n          )}\n          data-testid=\"alert\"\n          onTouchStart={() => setShouldFire(true)}\n          onTouchEnd={(event) => {\n            if (\n              shouldFire &&\n              action?.href &&\n              // Check if current event is triggered from closeButton\n              event.target instanceof Node &&\n              closeButtonReference.current &&\n              !closeButtonReference.current.contains(event.target)\n            ) {\n              if (action.target === '_blank') {\n                window.top?.open(action.href);\n              } else {\n                window.top?.location.assign(action.href);\n              }\n            }\n            setShouldFire(false);\n          }}\n          onTouchMove={() => setShouldFire(false)}\n        >\n          <div\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\n            <div className=\"alert__message\">\n              <div>\n                {title && (\n                  <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                    {title}\n                  </Title>\n                )}\n                <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                  {children || <InlineMarkdown>{message}</InlineMarkdown>}\n                </Body>\n              </div>\n              {action && <Action action={action} className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":";;;;;;;;;;;;;;IA8BYA,mBAOX;AAPD,CAAA,UAAYA,kBAAkB,EAAA;AAC5BA,EAAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,SAAoB,CAAA;AACpBA,EAAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,WAAiB,CAAA;AACjBA,EAAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,UAAsB,CAAA;AACtBA,EAAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,WAAyB,CAAA;AACzBA,EAAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,aAAsB,CAAA;AACtBA,EAAAA,kBAAA,CAAA,cAAA,CAAA,GAAA,YAA2B,CAAA;AAC7B,CAAC,EAPWA,kBAAkB,KAAlBA,kBAAkB,GAO7B,EAAA,CAAA,CAAA,CAAA;AA6BD,SAASC,WAAWA,CAACC,IAAe,EAAA;AAClC,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,UAAU,CAAA;AACnB,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,SAAS,CAAA;AAClB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,UAAU,CAAA;AACnB,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAA;AAEc,SAAUC,KAAKA,CAAC;EAC5BC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,IAAI;EACJC,SAAS;EACTC,OAAO;EACPC,IAAI;EACJC,KAAK;AACLX,EAAAA,IAAI,GAAG,SAAS;AAChBY,EAAAA,OAAO,GAAG,SAAS;AACnBC,EAAAA,MAAM,GAAG,IAAA;AACE,CAAA,EAAA;AACXC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIZ,KAAK,KAAKa,SAAS,EAAE;MACvBC,iBAAiB,CACf,6EAA6E,CAC9E,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACd,KAAK,CAAC,CAAC,CAAA;AAEXY,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIV,QAAQ,KAAKW,SAAS,EAAE;MAC1BC,iBAAiB,CACf,4EAA4E,CAC7E,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACZ,QAAQ,CAAC,CAAC,CAAA;AAEdU,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIR,WAAW,KAAKS,SAAS,EAAE;MAC7BC,iBAAiB,CACf,iFAAiF,CAClF,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACV,WAAW,CAAC,CAAC,CAAA;AAEjBQ,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIJ,IAAI,KAAKK,SAAS,EAAE;MACtBC,iBAAiB,CAAC,0EAA0E,CAAC,CAAA;AAC/F,KAAA;AACF,GAAC,EAAE,CAACN,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAMO,YAAY,GAAGlB,WAAW,CAACC,IAAI,CAAC,CAAA;AACtCc,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIG,YAAY,KAAKjB,IAAI,EAAE;AACzBgB,MAAAA,iBAAiB,CACf,CAAmChB,gCAAAA,EAAAA,IAAI,CAA4CiB,yCAAAA,EAAAA,YAAY,YAAY,CAC5G,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACA,YAAY,EAAEjB,IAAI,CAAC,CAAC,CAAA;EAExB,MAAM,CAACkB,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEnD,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAE5D,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IAAKC,IAAI,EAAEP,YAAY,KAAKQ,SAAS,CAACC,QAAQ,GAAG,OAAO,GAAG,QAAS;IAAAtB,QAAA,EACjES,MAAM,iBACLc,IAAA,CAAA,KAAA,EAAA;AACEtB,MAAAA,SAAS,EAAEuB,IAAI,CACb,cAAc,EACd,CAAA,MAAA,EAASX,YAAY,CAAE,CAAA,EACvBf,KAAK,IAAI,IAAI,IAAI2B,oBAAoB,CAAC3B,KAAK,CAAC,EAC5CG,SAAS,CACT;AACF,MAAA,aAAA,EAAY,OAAO;AACnByB,MAAAA,YAAY,EAAEA,MAAMX,aAAa,CAAC,IAAI,CAAE;MACxCY,UAAU,EAAGC,KAAK,IAAI;AACpB,QAAA,IACEd,UAAU,IACVf,MAAM,EAAE8B,IAAI;AACZ;QACAD,KAAK,CAACE,MAAM,YAAYC,IAAI,IAC5Bd,oBAAoB,CAACe,OAAO,IAC5B,CAACf,oBAAoB,CAACe,OAAO,CAACC,QAAQ,CAACL,KAAK,CAACE,MAAM,CAAC,EACpD;AACA,UAAA,IAAI/B,MAAM,CAAC+B,MAAM,KAAK,QAAQ,EAAE;YAC9BI,MAAM,CAACC,GAAG,EAAEC,IAAI,CAACrC,MAAM,CAAC8B,IAAI,CAAC,CAAA;AAC/B,WAAC,MAAM;YACLK,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAACvC,MAAM,CAAC8B,IAAI,CAAC,CAAA;AAC1C,WAAA;AACF,SAAA;QACAd,aAAa,CAAC,KAAK,CAAC,CAAA;OACpB;AACFwB,MAAAA,WAAW,EAAEA,MAAMxB,aAAa,CAAC,KAAK,CAAE;AAAAf,MAAAA,QAAA,gBAExCuB,IAAA,CAAA,KAAA,EAAA;QACEtB,SAAS,EAAEuB,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAAEhB,OAAO,CAAE;AACpE,QAAA,aAAA,EAAaA,OAAQ;QAAAR,QAAA,EAAA,CAEpBG,IAAI,gBACHgB,GAAA,CAAA,KAAA,EAAA;AAAKlB,UAAAA,SAAS,EAAC,aAAa;AAAAD,UAAAA,QAAA,EAAEG,IAAAA;AAAI,SAAM,CAAC,gBAEzCgB,GAAA,CAACqB,UAAU,EAAA;UAAClC,IAAI,EAAEmC,IAAI,CAACC,KAAM;AAACC,UAAAA,SAAS,EAAE9B,YAAAA;SAAa,CACvD,eACDU,IAAA,CAAA,KAAA,EAAA;AAAKtB,UAAAA,SAAS,EAAC,gBAAgB;AAAAD,UAAAA,QAAA,gBAC7BuB,IAAA,CAAA,KAAA,EAAA;AAAAvB,YAAAA,QAAA,EACGO,CAAAA,KAAK,iBACJY,GAAA,CAACyB,KAAK,EAAA;AAAC3C,cAAAA,SAAS,EAAC,OAAO;cAACL,IAAI,EAAEiD,UAAU,CAACC,UAAW;AAAA9C,cAAAA,QAAA,EAClDO,KAAAA;AAAK,aACD,CACR,eACDY,GAAA,CAAC4B,IAAI,EAAA;AAACC,cAAAA,EAAE,EAAC,MAAM;AAAC/C,cAAAA,SAAS,EAAC,SAAS;cAACL,IAAI,EAAEiD,UAAU,CAACI,UAAW;AAAAjD,cAAAA,QAAA,EAC7DA,QAAQ,iBAAImB,GAAA,CAAC+B,cAAc,EAAA;AAAAlD,gBAAAA,QAAA,EAAEK,OAAAA;eAAwB,CAAA;AAAC,aACnD,CACR,CAAA;AAAA,WAAK,CACL,EAACN,MAAM,iBAAIoB,GAAA,CAACgC,MAAM,EAAA;AAACpD,YAAAA,MAAM,EAAEA,MAAO;AAACE,YAAAA,SAAS,EAAC,OAAA;AAAO,YAAG,CAAA;AAAA,SACpD,CACP,CAAA;AAAA,OAAK,CACL,EAACG,SAAS,iBACRe,GAAA,CAACiC,WAAW,EAAA;AAACC,QAAAA,GAAG,EAAEpC,oBAAqB;AAAChB,QAAAA,SAAS,EAAC,OAAO;AAACqD,QAAAA,OAAO,EAAElD,SAAAA;AAAU,OAAG,CACjF,CAAA;KACE,CAAA;AACN,GACE,CAAC,CAAA;AAEV,CAAA;AAEA,SAASqB,oBAAoBA,CAAC3B,KAA8B,EAAA;AAC1D,EAAA,QAAQA,KAAK;AACX,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,iCAAiC,CAAA;AAC1C,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,+BAA+B,CAAA;AACxC,IAAA,KAAK,YAAY;AACf,MAAA,OAAO,gCAAgC,CAAA;AACzC,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,oBAAoB,CAAA;AAC7B,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,mBAAmB,CAAA;AAC5B,IAAA,KAAK,SAAS,CAAA;AACd,IAAA;AACE,MAAA,OAAO,OAAO,CAAA;AAClB,GAAA;AACF;;;;"}
+{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\n            'alert d-flex',\n            `alert-${resolvedType}`,\n            arrow != null && alertArrowClassNames(arrow),\n            className,\n          )}\n          data-testid=\"alert\"\n          onTouchStart={() => setShouldFire(true)}\n          onTouchEnd={(event) => {\n            if (\n              shouldFire &&\n              action?.href &&\n              // Check if current event is triggered from closeButton\n              event.target instanceof Node &&\n              closeButtonReference.current &&\n              !closeButtonReference.current.contains(event.target)\n            ) {\n              if (action.target === '_blank') {\n                window.top?.open(action.href);\n              } else {\n                window.top?.location.assign(action.href);\n              }\n            }\n            setShouldFire(false);\n          }}\n          onTouchMove={() => setShouldFire(false)}\n        >\n          <div\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\n            <div className=\"alert__message\">\n              <div>\n                {title && (\n                  <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                    {title}\n                  </Title>\n                )}\n                <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                  {children || <InlineMarkdown>{message}</InlineMarkdown>}\n                </Body>\n              </div>\n              {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/common/action/Action.js

@@ -3,11 +3,14 @@
 var clsx = require('clsx');
 var Link = require('../../link/Link.js');
 var typography = require('../propsValues/typography.js');
+var ActionButton = require('../../actionButton/ActionButton.js');
+var control = require('../propsValues/control.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Action({
   action,
-  className
+  className,
+  variant = 'button'
 }) {
   if ('href' in action) {
     return /*#__PURE__*/jsxRuntime.jsx(Link, {
@@ -20,12 +23,18 @@ function Action({
       children: action.text
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
+  return variant === 'button' ? /*#__PURE__*/jsxRuntime.jsx("button", {
     type: "button",
     "aria-label": action['aria-label'],
     className: clsx.clsx('btn-unstyled np-text-link-large', className),
     onClick: action.onClick,
     children: action.text
+  }) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+    "aria-label": action['aria-label'],
+    priority: control.Priority.SECONDARY,
+    className: clsx.clsx(className),
+    onClick: action.onClick,
+    children: action.text
   });
 }
 

package/build/common/action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\n\nexport type ActionOptions = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\ntype Props = {\n  action: ActionOptions;\n  className?: string;\n};\n\nexport function Action({ action, className }: Props) {\n  if ('href' in action) {\n    return (\n      <Link\n        href={action.href}\n        className={className}\n        aria-label={action['aria-label']}\n        target={action.target}\n        type={Typography.LINK_LARGE}\n        onClick={action.onClick}\n      >\n        {action.text}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={action['aria-label']}\n      className={clsx('btn-unstyled np-text-link-large', className)}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </button>\n  );\n}\n"],"names":["Action","action","className","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx"],"mappings":";;;;;;;SAiBgBA,MAAMA,CAAC;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAkB,CAAA,EAAA;EACjD,IAAI,MAAM,IAAID,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEJ,MAAM,CAACI,IAAK;AAClBH,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCK,MAAM,EAAEL,MAAM,CAACK,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAET,MAAM,CAACS,OAAQ;MAAAC,QAAA,EAEvBV,MAAM,CAACW,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,oBACET,cAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYN,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEW,SAAI,CAAC,iCAAiC,EAAEX,SAAS,CAAE;IAC9DQ,OAAO,EAAET,MAAM,CAACS,OAAQ;IAAAC,QAAA,EAEvBV,MAAM,CAACW,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport ActionButton from '../../actionButton';\nimport { Priority } from '../propsValues/control';\n\nexport type ActionOptions = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\ntype Props = {\n  variant?: 'button' | 'action-button';\n  action: ActionOptions;\n  className?: string;\n};\n\nexport function Action({ action, className, variant = 'button' }: Props) {\n  if ('href' in action) {\n    return (\n      <Link\n        href={action.href}\n        className={className}\n        aria-label={action['aria-label']}\n        target={action.target}\n        type={Typography.LINK_LARGE}\n        onClick={action.onClick}\n      >\n        {action.text}\n      </Link>\n    );\n  }\n\n  return variant === 'button' ? (\n    <button\n      type=\"button\"\n      aria-label={action['aria-label']}\n      className={clsx('btn-unstyled np-text-link-large', className)}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </button>\n  ) : (\n    <ActionButton\n      aria-label={action['aria-label']}\n      priority={Priority.SECONDARY}\n      className={clsx(className)}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </ActionButton>\n  );\n}\n"],"names":["Action","action","className","variant","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx","ActionButton","priority","Priority","SECONDARY"],"mappings":";;;;;;;;;AAoBM,SAAUA,MAAMA,CAAC;EAAEC,MAAM;EAAEC,SAAS;AAAEC,EAAAA,OAAO,GAAG,QAAA;AAAiB,CAAA,EAAA;EACrE,IAAI,MAAM,IAAIF,MAAM,EAAE;IACpB,oBACEG,cAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEL,MAAM,CAACK,IAAK;AAClBJ,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCM,MAAM,EAAEN,MAAM,CAACM,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEV,MAAM,CAACU,OAAQ;MAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOV,OAAO,KAAK,QAAQ,gBACzBC,cAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYP,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEY,SAAI,CAAC,iCAAiC,EAAEZ,SAAS,CAAE;IAC9DS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACN,CAAC,gBAETT,cAAA,CAACW,YAAY,EAAA;IACX,YAAYd,EAAAA,MAAM,CAAC,YAAY,CAAE;IACjCe,QAAQ,EAAEC,gBAAQ,CAACC,SAAU;AAC7BhB,IAAAA,SAAS,EAAEY,SAAI,CAACZ,SAAS,CAAE;IAC3BS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACA,CACf,CAAA;AACH;;;;"}

package/build/common/action/Action.mjs

@@ -1,11 +1,14 @@
 import { clsx } from 'clsx';
 import Link from '../../link/Link.mjs';
 import { Typography } from '../propsValues/typography.mjs';
+import ActionButton from '../../actionButton/ActionButton.mjs';
+import { Priority } from '../propsValues/control.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function Action({
   action,
-  className
+  className,
+  variant = 'button'
 }) {
   if ('href' in action) {
     return /*#__PURE__*/jsx(Link, {
@@ -18,12 +21,18 @@ function Action({
       children: action.text
     });
   }
-  return /*#__PURE__*/jsx("button", {
+  return variant === 'button' ? /*#__PURE__*/jsx("button", {
     type: "button",
     "aria-label": action['aria-label'],
     className: clsx('btn-unstyled np-text-link-large', className),
     onClick: action.onClick,
     children: action.text
+  }) : /*#__PURE__*/jsx(ActionButton, {
+    "aria-label": action['aria-label'],
+    priority: Priority.SECONDARY,
+    className: clsx(className),
+    onClick: action.onClick,
+    children: action.text
   });
 }
 

package/build/common/action/Action.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\n\nexport type ActionOptions = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\ntype Props = {\n  action: ActionOptions;\n  className?: string;\n};\n\nexport function Action({ action, className }: Props) {\n  if ('href' in action) {\n    return (\n      <Link\n        href={action.href}\n        className={className}\n        aria-label={action['aria-label']}\n        target={action.target}\n        type={Typography.LINK_LARGE}\n        onClick={action.onClick}\n      >\n        {action.text}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={action['aria-label']}\n      className={clsx('btn-unstyled np-text-link-large', className)}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </button>\n  );\n}\n"],"names":["Action","action","className","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx"],"mappings":";;;;;SAiBgBA,MAAMA,CAAC;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAkB,CAAA,EAAA;EACjD,IAAI,MAAM,IAAID,MAAM,EAAE;IACpB,oBACEE,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEJ,MAAM,CAACI,IAAK;AAClBH,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCK,MAAM,EAAEL,MAAM,CAACK,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAET,MAAM,CAACS,OAAQ;MAAAC,QAAA,EAEvBV,MAAM,CAACW,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,oBACET,GAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYN,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEW,IAAI,CAAC,iCAAiC,EAAEX,SAAS,CAAE;IAC9DQ,OAAO,EAAET,MAAM,CAACS,OAAQ;IAAAC,QAAA,EAEvBV,MAAM,CAACW,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport ActionButton from '../../actionButton';\nimport { Priority } from '../propsValues/control';\n\nexport type ActionOptions = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\ntype Props = {\n  variant?: 'button' | 'action-button';\n  action: ActionOptions;\n  className?: string;\n};\n\nexport function Action({ action, className, variant = 'button' }: Props) {\n  if ('href' in action) {\n    return (\n      <Link\n        href={action.href}\n        className={className}\n        aria-label={action['aria-label']}\n        target={action.target}\n        type={Typography.LINK_LARGE}\n        onClick={action.onClick}\n      >\n        {action.text}\n      </Link>\n    );\n  }\n\n  return variant === 'button' ? (\n    <button\n      type=\"button\"\n      aria-label={action['aria-label']}\n      className={clsx('btn-unstyled np-text-link-large', className)}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </button>\n  ) : (\n    <ActionButton\n      aria-label={action['aria-label']}\n      priority={Priority.SECONDARY}\n      className={clsx(className)}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </ActionButton>\n  );\n}\n"],"names":["Action","action","className","variant","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx","ActionButton","priority","Priority","SECONDARY"],"mappings":";;;;;;;AAoBM,SAAUA,MAAMA,CAAC;EAAEC,MAAM;EAAEC,SAAS;AAAEC,EAAAA,OAAO,GAAG,QAAA;AAAiB,CAAA,EAAA;EACrE,IAAI,MAAM,IAAIF,MAAM,EAAE;IACpB,oBACEG,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEL,MAAM,CAACK,IAAK;AAClBJ,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCM,MAAM,EAAEN,MAAM,CAACM,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEV,MAAM,CAACU,OAAQ;MAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOV,OAAO,KAAK,QAAQ,gBACzBC,GAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYP,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEY,IAAI,CAAC,iCAAiC,EAAEZ,SAAS,CAAE;IAC9DS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACN,CAAC,gBAETT,GAAA,CAACW,YAAY,EAAA;IACX,YAAYd,EAAAA,MAAM,CAAC,YAAY,CAAE;IACjCe,QAAQ,EAAEC,QAAQ,CAACC,SAAU;AAC7BhB,IAAAA,SAAS,EAAEY,IAAI,CAACZ,SAAS,CAAE;IAC3BS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACA,CACf,CAAA;AACH;;;;"}

package/build/types/common/action/Action.d.ts

@@ -6,9 +6,10 @@ export type ActionOptions = {
     onClick?: () => void;
 };
 type Props = {
+    variant?: 'button' | 'action-button';
     action: ActionOptions;
     className?: string;
 };
-export declare function Action({ action, className }: Props): import("react").JSX.Element;
+export declare function Action({ action, className, variant }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Action.d.ts.map

package/build/types/common/action/Action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,+BA0BlD"}
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,OAAkB,EAAE,EAAE,KAAK,+BAmCtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.72.1",
+  "version": "46.72.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/alert/Alert.tsx

@@ -186,7 +186,7 @@ export default function Alert({
                   {children || <InlineMarkdown>{message}</InlineMarkdown>}
                 </Body>
               </div>
-              {action && <Action action={action} className="m-t-1" />}
+              {action && <Action action={action} variant="action-button" className="m-t-1" />}
             </div>
           </div>
           {onDismiss && (

package/src/common/action/Action.tsx

@@ -1,6 +1,8 @@
 import { clsx } from 'clsx';
 import Link from '../../link';
 import { Typography } from '../propsValues/typography';
+import ActionButton from '../../actionButton';
+import { Priority } from '../propsValues/control';
 
 export type ActionOptions = {
   'aria-label'?: string;
@@ -11,11 +13,12 @@ export type ActionOptions = {
 };
 
 type Props = {
+  variant?: 'button' | 'action-button';
   action: ActionOptions;
   className?: string;
 };
 
-export function Action({ action, className }: Props) {
+export function Action({ action, className, variant = 'button' }: Props) {
   if ('href' in action) {
     return (
       <Link
@@ -31,7 +34,7 @@ export function Action({ action, className }: Props) {
     );
   }
 
-  return (
+  return variant === 'button' ? (
     <button
       type="button"
       aria-label={action['aria-label']}
@@ -40,5 +43,14 @@ export function Action({ action, className }: Props) {
     >
       {action.text}
     </button>
+  ) : (
+    <ActionButton
+      aria-label={action['aria-label']}
+      priority={Priority.SECONDARY}
+      className={clsx(className)}
+      onClick={action.onClick}
+    >
+      {action.text}
+    </ActionButton>
   );
 }