@transferwise/components 46.129.0 → 46.130.1

package/build/withDisplayFormat/WithDisplayFormat.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"WithDisplayFormat.mjs","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps> extends Pick<\n  TextElementProps,\n  | 'className'\n  | 'disabled'\n  | 'id'\n  | 'maxLength'\n  | 'minLength'\n  | 'name'\n  | 'placeholder'\n  | 'readOnly'\n  | 'required'\n  | 'inputMode'\n> {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && triggerEvent.key === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && triggerEvent.key === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    if ((event.ctrlKey || event.metaKey) && event.key === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      if (triggerEvent) {\n        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);\n      }\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","ctrlKey","metaKey","key","shiftKey","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":"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"}
+{"version":3,"file":"WithDisplayFormat.mjs","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps> extends Pick<\n  TextElementProps,\n  | 'className'\n  | 'disabled'\n  | 'id'\n  | 'maxLength'\n  | 'minLength'\n  | 'name'\n  | 'placeholder'\n  | 'readOnly'\n  | 'required'\n  | 'inputMode'\n> {\n  /** @default '' */\n  value?: string;\n  /** @default '' */\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   * @default 'off'\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && triggerEvent.key === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && triggerEvent.key === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    if ((event.ctrlKey || event.metaKey) && event.key === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      if (triggerEvent) {\n        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);\n      }\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","ctrlKey","metaKey","key","shiftKey","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,MAAMA,iBAA8C,SAAQC,KAAK,CAACC,SAGjE,CAAA;AAGC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,YAAY,EAAE,KAAK;AACnBC,IAAAA,cAAc,EAAE,EAAE;AAClBC,IAAAA,KAAK,EAAE;GACR;EAEDC,WAAAA,CAAYC,KAA6B,EAAA;IACvC,KAAK,CAACA,KAAK,CAAC;AACZ,IAAA,MAAMC,gBAAgB,GAAGC,mBAAmB,CAACF,KAAK,CAACF,KAAK,IAAI,EAAE,EAAEE,KAAK,CAACH,cAAc,CAAC;IACrF,IAAI,CAACM,KAAK,GAAG;MACXL,KAAK,EAAEM,iBAAiB,CAACH,gBAAgB,EAAED,KAAK,CAACH,cAAc,CAAC;AAChEQ,MAAAA,gBAAgB,EAAE,IAAIC,gBAAgB,EAAE;MACxCC,kBAAkB,EAAEP,KAAK,CAACH,cAAc;AACxCW,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBC,MAAAA,cAAc,EAAE,CAAC;AACjBC,MAAAA,YAAY,EAAE,CAAC;AACfC,MAAAA,YAAY,EAAE;KACf;AACH,EAAA;AAEA,EAAA,OAAOC,wBAAwBA,CAC7B;AAAEhB,IAAAA;AAAc,GAA0B,EAC1C;AAAEU,IAAAA,kBAAkB,GAAGV,cAAc;IAAEC,KAAK;AAAEO,IAAAA;AAAgB,GAA0B,EAAA;IAExF,IAAIE,kBAAkB,KAAKV,cAAc,EAAE;AACzC,MAAA,MAAMiB,gBAAgB,GAAGZ,mBAAmB,CAACJ,KAAK,EAAES,kBAAkB,CAAC;MACvEF,gBAAgB,CAACU,KAAK,EAAE;MAExB,OAAO;AACLR,QAAAA,kBAAkB,EAAEV,cAAc;AAClCC,QAAAA,KAAK,EAAEM,iBAAiB,CAACU,gBAAgB,EAAEjB,cAAc,CAAC;AAC1DW,QAAAA,WAAW,EAAE,IAAI;AACjBC,QAAAA,YAAY,EAAE,IAAI;AAClBG,QAAAA,YAAY,EAAE;OACf;AACH,IAAA;AACA,IAAA,OAAO,IAAI;AACb,EAAA;EAEAI,aAAa,GAAIf,gBAAwB,IAAwB;IAC/D,MAAM;MAAEQ,YAAY;MAAED,WAAW;AAAEV,MAAAA;KAAO,GAAG,IAAI,CAACK,KAAK;IACvD,MAAM;AAAEN,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AAErC,IAAA,IAAIS,YAAY,EAAE;AAChB,MAAA,IAAID,WAAW,KAAK,OAAO,IAAIA,WAAW,KAAK,KAAK,EAAE;AACpD,QAAA,OAAOA,WAAW;AACpB,MAAA;AAEA,MAAA,IAAI,CAACC,YAAY,CAACQ,OAAO,IAAIR,YAAY,CAACS,OAAO,KAAKT,YAAY,CAACU,GAAG,KAAK,GAAG,EAAE;AAC9E,QAAA,OAAOV,YAAY,CAACW,QAAQ,GAAG,MAAM,GAAG,MAAM;AAChD,MAAA;AAEA;MACA,IAAIX,YAAY,CAACQ,OAAO,IAAIR,YAAY,CAACU,GAAG,KAAK,GAAG,EAAE;AACpD,QAAA,OAAO,QAAQ;AACjB,MAAA;AAEA;AACA,MAAA,IACE,OAAOV,YAAY,CAACU,GAAG,KAAK,WAAW,IACvClB,gBAAgB,CAACoB,MAAM,IAAInB,mBAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC,CAACwB,MAAM,EAC5E;AACA,QAAA,OAAO,WAAW;AACpB,MAAA;MACA,OAAOZ,YAAY,CAACU,GAAG;AACzB,IAAA;AACA;AACA,IAAA,OAAO,OAAO;EAChB,CAAC;EAEDG,UAAU,GAAGA,MAAK;IAChB,IAAI,CAACC,QAAQ,CAAC;AACZf,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBG,MAAAA,YAAY,EAAE;AACf,KAAA,CAAC;EACJ,CAAC;EAEDY,cAAc,GAAIC,KAA2C,IAAI;AAC/D,IAAA,IAAI,CAACA,KAAK,CAACR,OAAO,IAAIQ,KAAK,CAACP,OAAO,KAAKO,KAAK,CAACN,GAAG,KAAK,GAAG,EAAE;AACzD,MAAA,OAAOM,KAAK,CAACL,QAAQ,GAAG,MAAM,GAAG,MAAM;AACzC,IAAA;AACA,IAAA,OAAO,IAAI;EACb,CAAC;EAEDM,eAAe,GAAiDD,KAAK,IAAI;IACvEA,KAAK,CAACE,OAAO,EAAE;IACf,MAAM;MAAEjB,cAAc;AAAEC,MAAAA;KAAc,GAAGc,KAAK,CAACG,aAAa;IAC5D,MAAM;AAAEvB,MAAAA;KAAkB,GAAG,IAAI,CAACF,KAAK;IACvC,MAAM;AAAEN,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AAErC;IACA,IAAI6B,iBAAiB,GAAG,EAAE;IAE1B,IAAI,IAAI,CAACL,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AACzCI,MAAAA,iBAAiB,GAAGzB,iBAAiB,CAACC,gBAAgB,CAACyB,IAAI,EAAE,CAACC,QAAQ,EAAE,EAAElC,cAAc,CAAC;MACzF,IAAI,CAAC0B,QAAQ,CAAC;AAAEzB,QAAAA,KAAK,EAAE+B,iBAAiB;AAAErB,QAAAA,WAAW,EAAE;AAAM,OAAE,CAAC;IAClE,CAAC,MAAM,IAAI,IAAI,CAACgB,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AAChDI,MAAAA,iBAAiB,GAAGzB,iBAAiB,CAACC,gBAAgB,CAAC2B,IAAI,EAAE,CAACD,QAAQ,EAAE,EAAElC,cAAc,CAAC;MACzF,IAAI,CAAC0B,QAAQ,CAAC;AAAEzB,QAAAA,KAAK,EAAE+B,iBAAiB;AAAErB,QAAAA,WAAW,EAAE;AAAM,OAAE,CAAC;AAClE,IAAA,CAAC,MAAM;MACL,IAAI,CAACe,QAAQ,CAAC;AACZd,QAAAA,YAAY,EAAEgB,KAAK;AACnBjB,QAAAA,WAAW,EAAE,SAAS;QACtBE,cAAc,EAAEA,cAAc,IAAI,CAAC;QACnCC,YAAY,EAAEA,YAAY,IAAI;AAC/B,OAAA,CAAC;AACJ,IAAA;EACF,CAAC;EAEDsB,aAAa,GAAkDR,KAAK,IAAI;IACtE,MAAM;AAAE5B,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AACrC,IAAA,MAAMY,YAAY,GAAGV,mBAAmB,CACtCuB,KAAK,CAACS,aAAa,CAACC,OAAO,CAAC,MAAM,CAAC,EACnCtC,cAAc,CACf,CAACwB,MAAM;IAER,IAAI,CAACE,QAAQ,CAAC;AAAEf,MAAAA,WAAW,EAAE,OAAO;AAAEI,MAAAA;AAAY,KAAE,CAAC;EACvD,CAAC;EAEDwB,WAAW,GAAiDA,MAAK;IAC/D,IAAI,CAACb,QAAQ,CAAC;AAAEf,MAAAA,WAAW,EAAE;AAAK,KAAE,CAAC;EACvC,CAAC;EAED6B,YAAY,GAAIC,MAA0B,IAAI;IAC5C,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;AACrC,IAAA,MAAMuC,gBAAgB,GAAG1C,cAAc,CAAC2C,KAAK,CAAC,EAAE,CAAC,CAACC,MAAM,CAAEC,SAAS,IAAKA,SAAS,KAAK,GAAG,CAAC;AAE1F,IAAA,OAAO,CAACH,gBAAgB,CAACI,QAAQ,CAACL,MAAM,CAAC;EAC3C,CAAC;EAEDM,cAAc,GAA+CnB,KAAK,IAAI;IACpE,MAAM;MAAEpB,gBAAgB;AAAEG,MAAAA;KAAa,GAAG,IAAI,CAACL,KAAK;IACpD,MAAM;MAAEN,cAAc;AAAEgD,MAAAA;KAAU,GAAG,IAAI,CAAC7C,KAAK;IAC/C,MAAM;AAAEF,MAAAA;KAAO,GAAG2B,KAAK,CAACqB,MAAM;AAC9B,IAAA,IAAI7C,gBAAgB,GAAGC,mBAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC;AACjE,IAAA,MAAMyC,MAAM,GAAG,IAAI,CAACtB,aAAa,CAACf,gBAAgB,CAAC;AACnD,IAAA,IAAI,CAAC,IAAI,CAACoC,YAAY,CAACC,MAAM,CAAC,IAAI9B,WAAW,KAAK,MAAM,IAAIA,WAAW,KAAK,MAAM,EAAE;AAClF,MAAA;AACF,IAAA;AAEA,IAAA,IAAI8B,MAAM,KAAK,WAAW,IAAIA,MAAM,KAAK,QAAQ,EAAE;MACjDrC,gBAAgB,GAAG,IAAI,CAAC8C,YAAY,CAAC9C,gBAAgB,EAAEqC,MAAM,CAAC;AAChE,IAAA;AAEA,IAAA,MAAMT,iBAAiB,GAAGzB,iBAAiB,CAACH,gBAAgB,EAAEJ,cAAc,CAAC;AAC7EQ,IAAAA,gBAAgB,CAAC2C,GAAG,CAAC/C,gBAAgB,CAAC;AAEtC,IAAA,IAAI,CAACgD,uBAAuB,CAACX,MAAM,CAAC;IAEpC,IAAI,CAACf,QAAQ,CAAC;AAAEzB,MAAAA,KAAK,EAAE+B;AAAiB,KAAE,EAAE,MAAK;MAC/C,IAAI,CAACP,UAAU,EAAE;AACjB,MAAA,IAAIuB,QAAQ,EAAE;AACZ,QAAA,MAAMK,cAAc,GAAGhD,mBAAmB,CAAC2B,iBAAiB,EAAEhC,cAAc,CAAC;QAC7EgD,QAAQ,CAACK,cAAc,CAAC;AAC1B,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;EAEDC,YAAY,GAA8C1B,KAAK,IAAI;AACjE,IAAA,IAAI,CAACzB,KAAK,CAACoD,MAAM,GAAGlD,mBAAmB,CAACuB,KAAK,CAACqB,MAAM,CAAChD,KAAK,EAAE,IAAI,CAACE,KAAK,CAACH,cAAc,CAAC,CAAC;EACzF,CAAC;EAEDwD,aAAa,GAA8C5B,KAAK,IAAI;IAClE,MAAM;MAAE5B,cAAc;AAAEyD,MAAAA;KAAS,GAAG,IAAI,CAACtD,KAAK;AAC9C,IAAA,IAAIsD,OAAO,EAAE;MACXA,OAAO,CAACpD,mBAAmB,CAACuB,KAAK,CAACqB,MAAM,CAAChD,KAAK,EAAED,cAAc,CAAC,CAAC;AAClE,IAAA;EACF,CAAC;AAEDkD,EAAAA,YAAY,GAAGA,CAAC9C,gBAAwB,EAAEqC,MAAiB,KAAI;IAC7D,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;IACrC,MAAM;MAAEU,cAAc;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACR,KAAK;AACnD,IAAA,MAAMoD,QAAQ,GAAG,CAAC,GAAGtD,gBAAgB,CAAC;IACtC,IAAIS,cAAc,KAAKC,YAAY,EAAE;MACnC,IAAI6C,aAAa,GACf9C,cAAc,GAAG+C,4BAA4B,CAAC,CAAC,EAAE/C,cAAc,EAAEb,cAAc,CAAC;MAClF,IAAI6D,QAAQ,GAAG,CAAC;AAEhB,MAAA,IAAIC,KAAK,GAAGC,uBAAuB,CAAClD,cAAc,EAAEb,cAAc,CAAC;MACnE,IAAIyC,MAAM,KAAK,WAAW,EAAE;AAC1BkB,QAAAA,aAAa,IAAI,CAAC;AAClBG,QAAAA,KAAK,GAAGE,2BAA2B,CAACnD,cAAc,EAAEb,cAAc,CAAC;AACrE,MAAA;AAEA,MAAA,IAAI2D,aAAa,IAAI,CAAC,IAAIG,KAAK,EAAE;AAC/BD,QAAAA,QAAQ,GAAG,CAAC;AACd,MAAA;AAEAH,MAAAA,QAAQ,CAACO,MAAM,CAACN,aAAa,EAAEE,QAAQ,CAAC;AAC1C,IAAA;AAEA,IAAA,OAAOH,QAAQ,CAACQ,IAAI,CAAC,EAAE,CAAC;EAC1B,CAAC;EAEDd,uBAAuB,GAAIX,MAAc,IAAI;IAC3C,MAAM;AAAEzC,MAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK;IACrC,MAAM;MAAES,YAAY;MAAEC,cAAc;MAAEC,YAAY;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACT,KAAK;AAE/E,IAAA,MAAM6D,cAAc,GAAGC,kCAA+B,CACpD3B,MAAM,EACN5B,cAAc,EACdC,YAAY,EACZd,cAAc,EACde,YAAY,CACb;AAEDsD,IAAAA,UAAU,CAAC,MAAK;AACd,MAAA,IAAIzD,YAAY,EAAE;QACfA,YAAY,CAACqC,MAA0B,CAACqB,iBAAiB,CAACH,cAAc,EAAEA,cAAc,CAAC;AAC5F,MAAA;MACA,IAAI,CAACzC,QAAQ,CAAC;AAAEb,QAAAA,cAAc,EAAEsD,cAAc;AAAErD,QAAAA,YAAY,EAAEqD;AAAc,OAAE,CAAC;IACjF,CAAC,EAAE,CAAC,CAAC;EACP,CAAC;AAEDI,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;AACRlF,MAAAA;KACD,GAAG,IAAI,CAACI,KAAK;IACd,MAAM;AAAEF,MAAAA;KAAO,GAAG,IAAI,CAACK,KAAK;AAC5B,IAAA,MAAM4E,WAAW,GAAqB;MACpCV,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRlF,YAAY;MACZE,KAAK;MACLwD,OAAO,EAAE,IAAI,CAACD,aAAa;MAC3BD,MAAM,EAAE,IAAI,CAACD,YAAY;MACzB6B,OAAO,EAAE,IAAI,CAAC/C,aAAa;MAC3BgD,SAAS,EAAE,IAAI,CAACvD,eAAe;MAC/BmB,QAAQ,EAAE,IAAI,CAACD,cAAc;MAC7BsC,KAAK,EAAE,IAAI,CAAC9C;KACb;AACD,IAAA,OAAO,IAAI,CAACpC,KAAK,CAACoE,MAAM,CAACW,WAAgB,CAAC;AAC5C,EAAA;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.129.0",
+  "version": "46.130.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -103,7 +103,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@floating-ui/react": "^0.27.17",
+    "@floating-ui/react": "^0.27.18",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.4",

package/src/accordion/Accordion.tsx

@@ -5,13 +5,19 @@ import AccordionItem, { AccordionItemProps } from './AccordionItem';
 export type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;
 
 export interface AccordionProps {
-  /** The index of the item that should be open by default. */
+  /**
+   * The index of the item that should be open by default.
+   * @default -1
+   */
   indexOpen?: number;
   /** An array of items to display in the accordion. */
   items: readonly AccordionItem[];
   /** A callback function that is called when an item is clicked. */
   onClick?: (index: number) => void;
-  /** @deprecated */
+  /**
+   * @deprecated
+   * @default 'light'
+   */
   theme?: 'light' | 'dark';
 }
 

package/src/actionButton/ActionButton.tsx

@@ -4,18 +4,19 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 
 /**
- * @deprecated use `<Button />` component instead with `ButtonProps`
+ * @deprecated Use `<Button />` component instead with `ButtonProps`.
  */
 export type ActionButtonProps = {
+  /** @default Priority.PRIMARY */
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   /**
-   * @deprecated use `children` instead
+   * @deprecated Use `children` instead.
    */
   text?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
 /**
- * @deprecated use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead
+ * @deprecated Use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.
  */
 const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
   (

package/src/actionOption/ActionOption.tsx

@@ -36,7 +36,7 @@ export type ActionOptionProps = {
   AriaLabelProperty;
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/alert/Alert.tsx

@@ -78,7 +78,10 @@ export interface AlertProps {
   message?: string;
   /** The presence of the onDismiss handler will trigger the visibility of the close button */
   onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
-  /** The type dictates which icon and colour will be used */
+  /**
+   * The type dictates which icon and colour will be used
+   * @default 'neutral'
+   */
   type?: AlertType;
   /** @deprecated Use `InlinePrompt` instead. */
   arrow?: `${AlertArrowPosition}`;
@@ -104,7 +107,7 @@ function resolveType(type: AlertType): AlertTypeResolved {
 }
 
 /**
- * @deprecated use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead
+ * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.
  */
 export default function Alert({
   action,

package/src/avatar/Avatar.tsx

@@ -23,9 +23,13 @@ export interface AvatarProps {
   backgroundColorSeed?: string;
   children?: React.ReactNode;
   className?: string;
+  /** @default false */
   outlined?: boolean;
+  /** @default 48 */
   size?: AvatarSize;
+  /** @default 'light' */
   theme?: AvatarTheme;
+  /** @default 'thumbnail' */
   type?: AvatarType;
   'aria-label'?: string;
 }

package/src/avatarLayout/AvatarLayout.tsx

@@ -8,11 +8,15 @@ type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
 >;
 
 export type Props = {
+  /** @default [] */
   avatars: SingleAvatarType[];
+  /** @default 'horizontal' */
   orientation?: 'horizontal' | 'diagonal';
+  /** @default 48 */
+  size?: AvatarViewProps['size'];
 } & Pick<
   AvatarViewProps,
-  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
+  'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
 >;
 
 export default function AvatarLayout({

package/src/badge/Badge.tsx

@@ -26,8 +26,10 @@ export type BadgeProps = {
   children: ReactNode;
   /**
    * `md` is deprecated, it will fallback to `sm` instead.
+   * @default 'sm'
    */
   size?: DeprecatedSizes | BadgeAssetsProps['size'];
+  /** @default 'light' */
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
   style?: React.CSSProperties;

package/src/body/Body.tsx

@@ -13,13 +13,9 @@ const bodyTypes = new Set<BodyTypes>([
 ]);
 
 type Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
-  /**
-   * Default value: {@link DEFAULT_TYPE}
-   */
+  /** @default 'body-default' */
   type?: BodyTypes;
-  /**
-   * Default value: `div`
-   */
+  /** @default 'div' */
   as?: 'span' | 'p' | 'div';
   /**
    * When true, preserves newline characters in the text

package/src/button/Button.types.ts

@@ -41,7 +41,10 @@ export interface CommonProps {
   /** @default false */
   loading?: boolean;
 
-  /** Makes the button take up the full width of its container */
+  /**
+   * Makes the button take up the full width of its container
+   * @default false
+   */
   block?: boolean;
 
   /**

package/src/button/LegacyButton.tsx

@@ -31,7 +31,7 @@ type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 type DeprecatedSizes = SizeExtraSmall;
 
 /**
- * @deprecated use new button instead APIs
+ * @deprecated Use new button instead of these APIs.
  * @example
  * ```
  * import { Button, ButtonProps } from '@transferwise/components';
@@ -68,7 +68,7 @@ export type CommonProps = {
 };
 
 /**
- * @deprecated use new button instead APIs
+ * @deprecated Use new button instead of APIs.
  * @example
  * ```
  * import { Button, ButtonProps } from '@transferwise/components';
@@ -87,7 +87,7 @@ type AnchorProps = CommonProps &
   };
 
 /**
- * @deprecated use new button instead APIs
+ * @deprecated Use new button instead of APIs.
  * @example
  * ```
  * import { Button, ButtonProps } from '@transferwise/components';
@@ -98,7 +98,7 @@ type AnchorProps = CommonProps &
 export type LegacyButtonProps = ButtonProps | AnchorProps;
 
 /**
- * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
+ * @deprecated Use new Button component via `<Button v2 .. />` and new props.
  */
 const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
   (

package/src/card/Card.story.tsx

@@ -8,13 +8,14 @@ import Card from '.';
 type Story = StoryObj<typeof Card>;
 
 /**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
  *
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
 const meta: Meta<typeof Card> = {
   component: Card,
-  title: 'Layouts/Card (Deprecated)',
+  title: 'Layouts/Card',
+  tags: ['deprecated'],
   args: {
     title: 'A card',
     details: 'Some details about this card',

package/src/card/Card.tsx

@@ -8,6 +8,7 @@ import Option from '../common/Option';
 
 export interface CardProps {
   'aria-label'?: string;
+  /** @default 'div' */
   as?: React.ElementType;
   isExpanded?: boolean;
   title: React.ReactNode;
@@ -21,7 +22,7 @@ export interface CardProps {
 }
 
 /**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
 const Card = forwardRef(function Card(

package/src/checkboxButton/CheckboxButton.tsx

@@ -4,6 +4,7 @@ import { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef
 import { useInputAttributes } from '../inputs/contexts';
 
 export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+  /** @default false */
   indeterminate?: boolean;
 };
 

package/src/checkboxOption/CheckboxOption.tsx

@@ -16,7 +16,7 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/circularButton/CircularButton.tsx

@@ -1,13 +1,12 @@
 import { clsx } from 'clsx';
 
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
 import IconButton, { IconButtonProps } from '../iconButton';
 import { useMedia } from '../common/hooks/useMedia';
 
 /**
- * @deprecated use `'default'` instead
+ * @deprecated Use `'default'` instead.
  */
 type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;
 

package/src/common/{card/Card.less → baseCard/BaseCard.less}

@@ -50,4 +50,4 @@
     --Card-closeButton-position: var(--size-8);
     --Card-padding: var(--size-16);
   }
-}
+}

package/src/common/{card/Card.story.tsx → baseCard/BaseCard.story.tsx}

@@ -4,15 +4,15 @@ import { lorem10 } from '../../test-utils';
 import Title from '../../title';
 import { Typography } from '../propsValues/typography';
 
-import Card from '.';
+import BaseCard from '.';
 
-const meta: Meta<typeof Card> = {
-  component: Card,
-  title: 'Internal/Card',
+const meta: Meta<typeof BaseCard> = {
+  component: BaseCard,
+  title: 'Internal/BaseCard',
 };
 
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof BaseCard>;
 
 export const Default: Story = {
   args: {

package/src/common/{card/Card.test.tsx → baseCard/BaseCard.test.tsx}

@@ -1,10 +1,9 @@
 import { render, fireEvent, screen } from '@testing-library/react';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 
-import Card from './Card';
+import BaseCard from './BaseCard';
 
-describe('Card', () => {
+describe('BaseCard', () => {
   const defaultProps = {
     children: 'Test Content',
     testId: 'test-card',
@@ -15,13 +14,13 @@ describe('Card', () => {
       ...defaultProps,
       children: 'Test text',
     };
-    const { rerender } = render(<Card {...defaultProps}>Test Content</Card>);
+    const { rerender } = render(<BaseCard {...defaultProps}>Test Content</BaseCard>);
 
     expect(screen.getByTestId('test-card')).toBeInTheDocument();
     expect(screen.getByTestId('test-card')).toHaveClass('np-Card');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByText('Test text')).toBeInTheDocument();
   });
@@ -31,12 +30,12 @@ describe('Card', () => {
       ...defaultProps,
       className: 'test-custom',
     };
-    const { rerender } = render(<Card {...defaultProps} />);
+    const { rerender } = render(<BaseCard {...defaultProps} />);
 
     expect(screen.getByTestId('test-card')).not.toHaveClass('test-custom');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByTestId('test-card')).toHaveClass('test-custom');
   });
@@ -46,12 +45,12 @@ describe('Card', () => {
       ...defaultProps,
       isDisabled: true,
     };
-    const { rerender } = render(<Card {...defaultProps} />);
+    const { rerender } = render(<BaseCard {...defaultProps} />);
 
     expect(screen.getByTestId('test-card')).not.toHaveClass('is-disabled');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByTestId('test-card')).toHaveClass('is-disabled');
   });
@@ -61,12 +60,12 @@ describe('Card', () => {
       ...defaultProps,
       isSmall: true,
     };
-    const { rerender } = render(<Card {...defaultProps} />);
+    const { rerender } = render(<BaseCard {...defaultProps} />);
 
     expect(screen.getByTestId('test-card')).not.toHaveClass('np-Card--small');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByTestId('test-card')).toHaveClass('np-Card--small');
   });
@@ -79,7 +78,7 @@ describe('Card', () => {
     };
     render(
       <IntlProvider locale="en">
-        <Card {...props} />
+        <BaseCard {...props} />
       </IntlProvider>,
     );
 

package/src/common/{card/Card.tsx → baseCard/BaseCard.tsx}

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
-import { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';
+import { type ReactNode, forwardRef, useRef } from 'react';
 
 import { CloseButton } from '../closeButton';
 import { stopPropagation } from '../domHelpers';
 
-export interface CardProps {
+export interface BaseCardProps {
   /** Content to display inside Card. */
   children: ReactNode;
 
@@ -28,9 +28,9 @@ export interface CardProps {
 }
 
 /**
- * Card component.
+ * BaseCard component.
  *
- * A card is a container for content that is used to group related information.
+ * A BaseCard is a container for content that is used to group related information.
  * It can be used to display information in a structured way, and can be
  * customized with various props to suit different use cases.
  *
@@ -44,11 +44,11 @@ export interface CardProps {
  * @param {string} testId - Optional ID to add to the card container for testing purposes.
  * @returns {React.JSX.Element} - The card component.
  * @example
- * <Card>
+ * <BaseCard>
  *   <p>Hello World!</p>
- * </Card>
+ * </BaseCard>
  */
-const Card = forwardRef<HTMLDivElement, CardProps>(
+const BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(
   (
     {
       className,
@@ -98,6 +98,6 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
   },
 );
 
-Card.displayName = 'Card';
+BaseCard.displayName = 'Card';
 
-export default Card;
+export default BaseCard;

package/src/common/baseCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseCard';
+export * from './BaseCard';

package/src/common/propsValues/type.ts

@@ -1,5 +1,5 @@
 /**
- * @deprecated use `ControlType` and `Priority` enums instead
+ * @deprecated Use `ControlType` and `Priority` enums instead.
  */
 export enum Type {
   PRIMARY = 'primary',

package/src/common/propsValues/typography.ts

@@ -1,6 +1,6 @@
 export enum Typography {
   /**
-   * @deprecated use Marketing titles or {@link Typography.DISPLAY_LARGE} instead
+   * @deprecated Use Marketing titles or {@link Typography.DISPLAY_LARGE} instead.
    */
   DISPLAY_EXTRA_LARGE = 'display-extra-large',
   DISPLAY_LARGE = 'display-large',
@@ -24,7 +24,7 @@ export enum Typography {
 }
 
 /**
- * @deprecated use {@link Typography.DISPLAY_LARGE} instead
+ * @deprecated Use {@link Typography.DISPLAY_LARGE} instead.
  */
 export type DisplayExtraLarge = 'display-extra-large';
 export type DisplayLarge = 'display-large';

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,34 +1,52 @@
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
+}
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);