@transferwise/components 46.162.2 → 46.164.0

package/build/Chips/Chip/Chip.js

@@ -34,6 +34,7 @@ const Chip = ({
   onRemove,
   onClick,
   onKeyPress,
+  disabled = false,
   className = undefined,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
@@ -41,8 +42,10 @@ const Chip = ({
   closeButton
 }) => {
   const isActionable = onClick || onKeyPress;
+  const isInteractive = isActionable && !disabled;
   const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
+  const chipRole = role ?? defaultRole;
+  const tabIndex = isInteractive ? 0 : -1;
   const closeButtonReference = React.useRef(null);
   const previousCloseButtonShown = React.useRef(undefined);
   React.useEffect(() => {
@@ -52,12 +55,15 @@ const Chip = ({
     previousCloseButtonShown.current = closeButtonReference.current != null;
   }, [onRemove]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    role: role ?? defaultRole,
+    role: chipRole,
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: clsx.clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
-    ...(isActionable && {
+    "aria-disabled": chipRole && disabled ? true : undefined,
+    className: clsx.clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', {
+      disabled
+    }, className),
+    ...(isInteractive && {
       onClick,
       onKeyPress
     }),
@@ -71,6 +77,7 @@ const Chip = ({
       "aria-label": closeButton?.['aria-label'],
       size: "sm",
       filled: true,
+      isDisabled: disabled,
       onClick: onRemove
     }) : null]
   }, value);

package/build/Chips/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  /** @default false */\n  disabled?: boolean;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  disabled = false,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const isInteractive = isActionable && !disabled;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const chipRole = role ?? defaultRole;\n  const tabIndex = isInteractive ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={chipRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      aria-disabled={chipRole && disabled ? true : undefined}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        { disabled },\n        className,\n      )}\n      {...(isInteractive && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          isDisabled={disabled}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","disabled","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","isInteractive","defaultRole","chipRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled","isDisabled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGT,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMS,aAAa,GAAGD,YAAY,IAAI,CAACP,QAAQ;AAC/C,EAAA,MAAMS,WAAW,GAAGF,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMQ,QAAQ,GAAGL,IAAI,IAAII,WAAW;AACpC,EAAA,MAAME,QAAQ,GAAGH,aAAa,GAAG,CAAC,GAAG,EAAE;AAEvC,EAAA,MAAMI,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAACnB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEqB,eAAA,CAAA,KAAA,EAAA;AAEEb,IAAAA,IAAI,EAAEK,QAAS;AACfC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYR,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1B,IAAA,eAAA,EAAeM,QAAQ,IAAIV,QAAQ,GAAG,IAAI,GAAGE,SAAU;AACvDD,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBtB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpC;AAAEG,MAAAA;KAAU,EACZC,SAAS,CACT;AAAA,IAAA,IACGO,aAAa,IAAI;MAAEV,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAqB,QAAA,EAAA,cAE7CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACzB,QAAS;MAAC0B,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DzB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPwB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACNC,MAAAA,UAAU,EAAE9B,QAAS;AACrBF,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA9BHD,KA+BF,CAAC;AAEV;;"}

package/build/Chips/Chip/Chip.mjs

@@ -30,6 +30,7 @@ const Chip = ({
   onRemove,
   onClick,
   onKeyPress,
+  disabled = false,
   className = undefined,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
@@ -37,8 +38,10 @@ const Chip = ({
   closeButton
 }) => {
   const isActionable = onClick || onKeyPress;
+  const isInteractive = isActionable && !disabled;
   const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
+  const chipRole = role ?? defaultRole;
+  const tabIndex = isInteractive ? 0 : -1;
   const closeButtonReference = useRef(null);
   const previousCloseButtonShown = useRef(undefined);
   useEffect(() => {
@@ -48,12 +51,15 @@ const Chip = ({
     previousCloseButtonShown.current = closeButtonReference.current != null;
   }, [onRemove]);
   return /*#__PURE__*/jsxs("div", {
-    role: role ?? defaultRole,
+    role: chipRole,
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
-    ...(isActionable && {
+    "aria-disabled": chipRole && disabled ? true : undefined,
+    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', {
+      disabled
+    }, className),
+    ...(isInteractive && {
       onClick,
       onKeyPress
     }),
@@ -67,6 +73,7 @@ const Chip = ({
       "aria-label": closeButton?.['aria-label'],
       size: "sm",
       filled: true,
+      isDisabled: disabled,
       onClick: onRemove
     }) : null]
   }, value);

package/build/Chips/Chip/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;"}
+{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  /** @default false */\n  disabled?: boolean;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  disabled = false,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const isInteractive = isActionable && !disabled;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const chipRole = role ?? defaultRole;\n  const tabIndex = isInteractive ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={chipRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      aria-disabled={chipRole && disabled ? true : undefined}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        { disabled },\n        className,\n      )}\n      {...(isInteractive && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          isDisabled={disabled}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","disabled","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","isInteractive","defaultRole","chipRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled","isDisabled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGT,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMS,aAAa,GAAGD,YAAY,IAAI,CAACP,QAAQ;AAC/C,EAAA,MAAMS,WAAW,GAAGF,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMQ,QAAQ,GAAGL,IAAI,IAAII,WAAW;AACpC,EAAA,MAAME,QAAQ,GAAGH,aAAa,GAAG,CAAC,GAAG,EAAE;AAEvC,EAAA,MAAMI,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAACnB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEqB,IAAA,CAAA,KAAA,EAAA;AAEEb,IAAAA,IAAI,EAAEK,QAAS;AACfC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYR,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1B,IAAA,eAAA,EAAeM,QAAQ,IAAIV,QAAQ,GAAG,IAAI,GAAGE,SAAU;AACvDD,IAAAA,SAAS,EAAEkB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBtB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpC;AAAEG,MAAAA;KAAU,EACZC,SAAS,CACT;AAAA,IAAA,IACGO,aAAa,IAAI;MAAEV,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAqB,QAAA,EAAA,cAE7CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACzB,QAAS;MAAC0B,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DzB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPwB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACNC,MAAAA,UAAU,EAAE9B,QAAS;AACrBF,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA9BHD,KA+BF,CAAC;AAEV;;"}

package/build/FlowNavigation/FlowNavigation.js

@@ -48,6 +48,7 @@ require('../Primitives/PrimitiveButton/PrimitiveButton.js');
 require('../Primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../Link/Link.messages.js');
 var CriticalBanner = require('../Prompt/CriticalBanner/CriticalBanner.js');
+var helpers = require('./helpers.js');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 const FlowNavigation = ({
@@ -66,6 +67,7 @@ const FlowNavigation = ({
   const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
   const hasSteps = steps && steps.length > 0;
   const displayGoBack = onGoBack != null && activeStep > 0;
+  const resolvedBannerData = banner ? helpers.isCriticalBannerData(banner) ? helpers.mapCriticalBannerDataToBannerProps(banner) : banner : null;
   const closeButton = onClose != null && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
     size: "lg",
     onClick: onClose
@@ -109,8 +111,8 @@ const FlowNavigation = ({
     layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [banner && /*#__PURE__*/jsxRuntime.jsx(CriticalBanner.CriticalBanner, {
-      ...banner
+    children: [resolvedBannerData && /*#__PURE__*/jsxRuntime.jsx(CriticalBanner.CriticalBanner, {
+      ...resolvedBannerData
     }), /*#__PURE__*/jsxRuntime.jsx(Container.default, {
       size: "fluid",
       className: clsx.clsx('np-flow-navigation', {

package/build/FlowNavigation/FlowNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /** Optional critical banner data, to be displayed above the flow navigation. */\n  banner?: CriticalBannerProps | null;\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  banner = null,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\n        screenSm == null\n          ? 'np-flow-navigation--hidden'\n          : {\n              'np-flow-navigation--xs-max': !screenSm,\n              // Size switches on parent container which may or may not have the same size as the window.\n              'np-flow-navigation--sm': screenSm,\n              'np-flow-navigation--lg': screenLg,\n            },\n      )}\n      leftContent={\n        <>\n          {!screenSm && displayGoBack ? (\n            <IconButton\n              size={40}\n              priority=\"tertiary\"\n              type=\"default\"\n              aria-label={intl.formatMessage(messages.back)}\n              onClick={onGoBack}\n            >\n              <ArrowLeft />\n            </IconButton>\n          ) : (\n            <div className=\"np-flow-header__left\">{logo}</div>\n          )}\n          {!screenSm && !done && hasSteps && (\n            <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n          )}\n        </>\n      }\n      rightContent={\n        <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n          {newAvatar}\n          {newAvatar && closeButton && <span className=\"m-x-1\" />}\n          {closeButton}\n        </div>\n      }\n      bottomContent={\n        !done && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <>\n      {banner && <CriticalBanner {...banner} />}\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n          'np-flow-navigation--no-steps': !hasSteps || done,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    </>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","CriticalBanner","Container"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\nimport { isCriticalBannerData, mapCriticalBannerDataToBannerProps } from './helpers';\nimport { CriticalBannerLegacyData } from './types';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * Optional critical banner data, to be displayed above the flow navigation.\n   * Accepts either the internal `CriticalBannerProps` shape, or the legacy backend `CriticalBannerData` shape — the latter is mapped to `CriticalBannerProps` internally.\n   */\n  banner?: CriticalBannerLegacyData | CriticalBannerProps | null;\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  banner = null,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const resolvedBannerData: CriticalBannerProps | null = banner\n    ? isCriticalBannerData(banner)\n      ? mapCriticalBannerDataToBannerProps(banner)\n      : banner\n    : null;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\n        screenSm == null\n          ? 'np-flow-navigation--hidden'\n          : {\n              'np-flow-navigation--xs-max': !screenSm,\n              // Size switches on parent container which may or may not have the same size as the window.\n              'np-flow-navigation--sm': screenSm,\n              'np-flow-navigation--lg': screenLg,\n            },\n      )}\n      leftContent={\n        <>\n          {!screenSm && displayGoBack ? (\n            <IconButton\n              size={40}\n              priority=\"tertiary\"\n              type=\"default\"\n              aria-label={intl.formatMessage(messages.back)}\n              onClick={onGoBack}\n            >\n              <ArrowLeft />\n            </IconButton>\n          ) : (\n            <div className=\"np-flow-header__left\">{logo}</div>\n          )}\n          {!screenSm && !done && hasSteps && (\n            <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n          )}\n        </>\n      }\n      rightContent={\n        <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n          {newAvatar}\n          {newAvatar && closeButton && <span className=\"m-x-1\" />}\n          {closeButton}\n        </div>\n      }\n      bottomContent={\n        !done && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <>\n      {resolvedBannerData && <CriticalBanner {...resolvedBannerData} />}\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n          'np-flow-navigation--no-steps': !hasSteps || done,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    </>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","resolvedBannerData","isCriticalBannerData","mapCriticalBannerDataToBannerProps","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","CriticalBanner","Container"],"mappings":"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"}

package/build/FlowNavigation/FlowNavigation.mjs

@@ -44,6 +44,7 @@ import '../Primitives/PrimitiveButton/PrimitiveButton.mjs';
 import '../Primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../Link/Link.messages.mjs';
 import { CriticalBanner } from '../Prompt/CriticalBanner/CriticalBanner.mjs';
+import { isCriticalBannerData, mapCriticalBannerDataToBannerProps } from './helpers.mjs';
 
 const defaultLogo = /*#__PURE__*/jsx(Logo, {});
 const FlowNavigation = ({
@@ -62,6 +63,7 @@ const FlowNavigation = ({
   const screenLg = useScreenSize(Breakpoint.LARGE);
   const hasSteps = steps && steps.length > 0;
   const displayGoBack = onGoBack != null && activeStep > 0;
+  const resolvedBannerData = banner ? isCriticalBannerData(banner) ? mapCriticalBannerDataToBannerProps(banner) : banner : null;
   const closeButton = onClose != null && /*#__PURE__*/jsx(CloseButton, {
     size: "lg",
     onClick: onClose
@@ -105,8 +107,8 @@ const FlowNavigation = ({
     layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [banner && /*#__PURE__*/jsx(CriticalBanner, {
-      ...banner
+    children: [resolvedBannerData && /*#__PURE__*/jsx(CriticalBanner, {
+      ...resolvedBannerData
     }), /*#__PURE__*/jsx(Container, {
       size: "fluid",
       className: clsx('np-flow-navigation', {

package/build/FlowNavigation/FlowNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /** Optional critical banner data, to be displayed above the flow navigation. */\n  banner?: CriticalBannerProps | null;\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  banner = null,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\n        screenSm == null\n          ? 'np-flow-navigation--hidden'\n          : {\n              'np-flow-navigation--xs-max': !screenSm,\n              // Size switches on parent container which may or may not have the same size as the window.\n              'np-flow-navigation--sm': screenSm,\n              'np-flow-navigation--lg': screenLg,\n            },\n      )}\n      leftContent={\n        <>\n          {!screenSm && displayGoBack ? (\n            <IconButton\n              size={40}\n              priority=\"tertiary\"\n              type=\"default\"\n              aria-label={intl.formatMessage(messages.back)}\n              onClick={onGoBack}\n            >\n              <ArrowLeft />\n            </IconButton>\n          ) : (\n            <div className=\"np-flow-header__left\">{logo}</div>\n          )}\n          {!screenSm && !done && hasSteps && (\n            <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n          )}\n        </>\n      }\n      rightContent={\n        <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n          {newAvatar}\n          {newAvatar && closeButton && <span className=\"m-x-1\" />}\n          {closeButton}\n        </div>\n      }\n      bottomContent={\n        !done && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <>\n      {banner && <CriticalBanner {...banner} />}\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n          'np-flow-navigation--no-steps': !hasSteps || done,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    </>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","CriticalBanner","Container"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\nimport { isCriticalBannerData, mapCriticalBannerDataToBannerProps } from './helpers';\nimport { CriticalBannerLegacyData } from './types';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * Optional critical banner data, to be displayed above the flow navigation.\n   * Accepts either the internal `CriticalBannerProps` shape, or the legacy backend `CriticalBannerData` shape — the latter is mapped to `CriticalBannerProps` internally.\n   */\n  banner?: CriticalBannerLegacyData | CriticalBannerProps | null;\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  banner = null,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const resolvedBannerData: CriticalBannerProps | null = banner\n    ? isCriticalBannerData(banner)\n      ? mapCriticalBannerDataToBannerProps(banner)\n      : banner\n    : null;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\n        screenSm == null\n          ? 'np-flow-navigation--hidden'\n          : {\n              'np-flow-navigation--xs-max': !screenSm,\n              // Size switches on parent container which may or may not have the same size as the window.\n              'np-flow-navigation--sm': screenSm,\n              'np-flow-navigation--lg': screenLg,\n            },\n      )}\n      leftContent={\n        <>\n          {!screenSm && displayGoBack ? (\n            <IconButton\n              size={40}\n              priority=\"tertiary\"\n              type=\"default\"\n              aria-label={intl.formatMessage(messages.back)}\n              onClick={onGoBack}\n            >\n              <ArrowLeft />\n            </IconButton>\n          ) : (\n            <div className=\"np-flow-header__left\">{logo}</div>\n          )}\n          {!screenSm && !done && hasSteps && (\n            <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n          )}\n        </>\n      }\n      rightContent={\n        <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n          {newAvatar}\n          {newAvatar && closeButton && <span className=\"m-x-1\" />}\n          {closeButton}\n        </div>\n      }\n      bottomContent={\n        !done && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <>\n      {resolvedBannerData && <CriticalBanner {...resolvedBannerData} />}\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n          'np-flow-navigation--no-steps': !hasSteps || done,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    </>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","resolvedBannerData","isCriticalBannerData","mapCriticalBannerDataToBannerProps","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","CriticalBanner","Container"],"mappings":"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"}

package/build/FlowNavigation/helpers.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const sentimentMap = {
+  NEGATIVE: 'negative',
+  WARNING: 'warning',
+  NEUTRAL: 'neutral'
+};
+const isCriticalBannerData = banner => 'style' in banner;
+const mapCriticalBannerDataToBannerProps = data => ({
+  id: data.id,
+  title: data.title,
+  description: data.subtitle,
+  // subtitle → description
+  sentiment: sentimentMap[data.style],
+  action: data.action ? {
+    label: data.action.label,
+    href: data.action.href
+  } : undefined,
+  expanded: !data.collapsed // collapsed → expanded (inverted)
+});
+
+exports.isCriticalBannerData = isCriticalBannerData;
+exports.mapCriticalBannerDataToBannerProps = mapCriticalBannerDataToBannerProps;
+//# sourceMappingURL=helpers.js.map

package/build/FlowNavigation/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../src/FlowNavigation/helpers.ts"],"sourcesContent":["import { CriticalBannerProps } from '../Prompt';\nimport { CriticalBannerLegacyData } from './types';\n\nconst sentimentMap: Record<CriticalBannerLegacyData['style'], CriticalBannerProps['sentiment']> = {\n  NEGATIVE: 'negative',\n  WARNING: 'warning',\n  NEUTRAL: 'neutral',\n};\n\nexport const isCriticalBannerData = (\n  banner: CriticalBannerLegacyData | CriticalBannerProps,\n): banner is CriticalBannerLegacyData => 'style' in banner;\n\nexport const mapCriticalBannerDataToBannerProps = (\n  data: CriticalBannerLegacyData,\n): CriticalBannerProps => ({\n  id: data.id,\n  title: data.title,\n  description: data.subtitle, // subtitle → description\n  sentiment: sentimentMap[data.style],\n  action: data.action\n    ? {\n        label: data.action.label,\n        href: data.action.href,\n      }\n    : undefined,\n  expanded: !data.collapsed, // collapsed → expanded (inverted)\n});\n"],"names":["sentimentMap","NEGATIVE","WARNING","NEUTRAL","isCriticalBannerData","banner","mapCriticalBannerDataToBannerProps","data","id","title","description","subtitle","sentiment","style","action","label","href","undefined","expanded","collapsed"],"mappings":";;AAGA,MAAMA,YAAY,GAAgF;AAChGC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE;CACV;MAEYC,oBAAoB,GAC/BC,MAAsD,IACf,OAAO,IAAIA;AAE7C,MAAMC,kCAAkC,GAC7CC,IAA8B,KACL;EACzBC,EAAE,EAAED,IAAI,CAACC,EAAE;EACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;EACjBC,WAAW,EAAEH,IAAI,CAACI,QAAQ;AAAE;AAC5BC,EAAAA,SAAS,EAAEZ,YAAY,CAACO,IAAI,CAACM,KAAK,CAAC;AACnCC,EAAAA,MAAM,EAAEP,IAAI,CAACO,MAAM,GACf;AACEC,IAAAA,KAAK,EAAER,IAAI,CAACO,MAAM,CAACC,KAAK;AACxBC,IAAAA,IAAI,EAAET,IAAI,CAACO,MAAM,CAACE;AACnB,GAAA,GACDC,SAAS;AACbC,EAAAA,QAAQ,EAAE,CAACX,IAAI,CAACY,SAAS;AAC1B,CAAA;;;"}

package/build/FlowNavigation/helpers.mjs

@@ -0,0 +1,21 @@
+const sentimentMap = {
+  NEGATIVE: 'negative',
+  WARNING: 'warning',
+  NEUTRAL: 'neutral'
+};
+const isCriticalBannerData = banner => 'style' in banner;
+const mapCriticalBannerDataToBannerProps = data => ({
+  id: data.id,
+  title: data.title,
+  description: data.subtitle,
+  // subtitle → description
+  sentiment: sentimentMap[data.style],
+  action: data.action ? {
+    label: data.action.label,
+    href: data.action.href
+  } : undefined,
+  expanded: !data.collapsed // collapsed → expanded (inverted)
+});
+
+export { isCriticalBannerData, mapCriticalBannerDataToBannerProps };
+//# sourceMappingURL=helpers.mjs.map

package/build/FlowNavigation/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","sources":["../../src/FlowNavigation/helpers.ts"],"sourcesContent":["import { CriticalBannerProps } from '../Prompt';\nimport { CriticalBannerLegacyData } from './types';\n\nconst sentimentMap: Record<CriticalBannerLegacyData['style'], CriticalBannerProps['sentiment']> = {\n  NEGATIVE: 'negative',\n  WARNING: 'warning',\n  NEUTRAL: 'neutral',\n};\n\nexport const isCriticalBannerData = (\n  banner: CriticalBannerLegacyData | CriticalBannerProps,\n): banner is CriticalBannerLegacyData => 'style' in banner;\n\nexport const mapCriticalBannerDataToBannerProps = (\n  data: CriticalBannerLegacyData,\n): CriticalBannerProps => ({\n  id: data.id,\n  title: data.title,\n  description: data.subtitle, // subtitle → description\n  sentiment: sentimentMap[data.style],\n  action: data.action\n    ? {\n        label: data.action.label,\n        href: data.action.href,\n      }\n    : undefined,\n  expanded: !data.collapsed, // collapsed → expanded (inverted)\n});\n"],"names":["sentimentMap","NEGATIVE","WARNING","NEUTRAL","isCriticalBannerData","banner","mapCriticalBannerDataToBannerProps","data","id","title","description","subtitle","sentiment","style","action","label","href","undefined","expanded","collapsed"],"mappings":"AAGA,MAAMA,YAAY,GAAgF;AAChGC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE;CACV;MAEYC,oBAAoB,GAC/BC,MAAsD,IACf,OAAO,IAAIA;AAE7C,MAAMC,kCAAkC,GAC7CC,IAA8B,KACL;EACzBC,EAAE,EAAED,IAAI,CAACC,EAAE;EACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;EACjBC,WAAW,EAAEH,IAAI,CAACI,QAAQ;AAAE;AAC5BC,EAAAA,SAAS,EAAEZ,YAAY,CAACO,IAAI,CAACM,KAAK,CAAC;AACnCC,EAAAA,MAAM,EAAEP,IAAI,CAACO,MAAM,GACf;AACEC,IAAAA,KAAK,EAAER,IAAI,CAACO,MAAM,CAACC,KAAK;AACxBC,IAAAA,IAAI,EAAET,IAAI,CAACO,MAAM,CAACE;AACnB,GAAA,GACDC,SAAS;AACbC,EAAAA,QAAQ,EAAE,CAACX,IAAI,CAACY,SAAS;AAC1B,CAAA;;"}

package/build/Typeahead/Typeahead.js

@@ -67,6 +67,7 @@ class Typeahead extends React.Component {
     autoFocus: false,
     chipSeparators: [],
     clearable: true,
+    disabled: false,
     initialValue: [],
     inputAutoComplete: 'new-password',
     minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
@@ -117,6 +118,11 @@ class Typeahead extends React.Component {
       });
     }
   }
+  componentDidUpdate(previousProps) {
+    if (this.props.disabled && !previousProps.disabled) {
+      this.hideMenu();
+    }
+  }
   componentWillUnmount() {
     this.handleSearchDebounced.cancel();
   }
@@ -372,6 +378,9 @@ class Typeahead extends React.Component {
     }
   };
   renderChip = (option, idx) => {
+    const {
+      disabled
+    } = this.props;
     const valid = this.props.validateChip?.(option);
     return /*#__PURE__*/jsxRuntime.jsx(Chip.default, {
       label: option.label,
@@ -379,7 +388,8 @@ class Typeahead extends React.Component {
         'has-error': !valid,
         'np-chip--valid': valid
       }),
-      onRemove: () => this.removeChip(option)
+      disabled: disabled,
+      onRemove: disabled ? undefined : () => this.removeChip(option)
     }, idx);
   };
   renderMenu = ({
@@ -437,6 +447,7 @@ class Typeahead extends React.Component {
       addon,
       name,
       clearable,
+      disabled,
       allowNew,
       footer,
       showSuggestions,
@@ -456,8 +467,8 @@ class Typeahead extends React.Component {
       optionsShown,
       keyboardFocusedOptionIndex
     } = this.state;
-    const clearButton = clearable && (query || selected.length > 0);
-    const dropdownOpen = optionsShown && showSuggestions && query.length >= minQueryLength;
+    const clearButton = !disabled && clearable && (query || selected.length > 0);
+    const dropdownOpen = !disabled && optionsShown && showSuggestions && query.length >= minQueryLength;
     const menu = this.renderMenu({
       footer,
       options,
@@ -503,13 +514,15 @@ class Typeahead extends React.Component {
         }),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: clsx.clsx(`input-group input-group-${size}`, {
-            'input-group--has-error': hasError
+            'input-group--has-error': hasError,
+            disabled
           }),
           children: [addon && /*#__PURE__*/jsxRuntime.jsx("span", {
             className: "input-group-addon input-group-addon--search",
             children: addon
           }), /*#__PURE__*/jsxRuntime.jsx(TypeaheadInput.default, {
             autoFocus,
+            disabled,
             multiple,
             dropdownOpen,
             placeholder,