@transferwise/components 46.165.4 → 46.165.5

package/build/Typeahead/TypeaheadInput/TypeaheadInput.js

@@ -62,10 +62,8 @@ class TypeaheadInput extends React.Component {
     }
   }
   recalculateWidth = () => {
-    requestAnimationFrame(() => {
-      this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
-      });
+    this.setState({
+      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10)
     });
   };
   renderInput = isRTL => {
@@ -129,7 +127,9 @@ class TypeaheadInput extends React.Component {
       children: direction$1 => {
         const isRTL = direction$1 === direction.Direction.RTL;
         return multiple ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "form-control typeahead__input-container",
+          className: clsx.clsx('form-control typeahead__input-container', {
+            'typeahead__input-container--scrollable': maxHeight != null
+          }),
           style: {
             maxHeight
           },

package/build/Typeahead/TypeaheadInput/TypeaheadInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.js","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    requestAnimationFrame(() => {\n      this.setState({\n        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),\n      });\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className=\"form-control typeahead__input-container\"\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","requestAnimationFrame","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}
+{"version":3,"file":"TypeaheadInput.js","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    this.setState({\n      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10),\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className={clsx('form-control typeahead__input-container', {\n                'typeahead__input-container--scrollable': maxHeight != null,\n              })}\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}

package/build/Typeahead/TypeaheadInput/TypeaheadInput.mjs

@@ -58,10 +58,8 @@ class TypeaheadInput extends Component {
     }
   }
   recalculateWidth = () => {
-    requestAnimationFrame(() => {
-      this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
-      });
+    this.setState({
+      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10)
     });
   };
   renderInput = isRTL => {
@@ -125,7 +123,9 @@ class TypeaheadInput extends Component {
       children: direction => {
         const isRTL = direction === Direction.RTL;
         return multiple ? /*#__PURE__*/jsxs("div", {
-          className: "form-control typeahead__input-container",
+          className: clsx('form-control typeahead__input-container', {
+            'typeahead__input-container--scrollable': maxHeight != null
+          }),
           style: {
             maxHeight
           },

package/build/Typeahead/TypeaheadInput/TypeaheadInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.mjs","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    requestAnimationFrame(() => {\n      this.setState({\n        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),\n      });\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className=\"form-control typeahead__input-container\"\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","requestAnimationFrame","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}
+{"version":3,"file":"TypeaheadInput.mjs","sources":["../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { clsx } from 'clsx';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../Inputs/Input/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\nimport { Direction } from '../../common';\nimport { DirectionContext } from '../../Provider/Direction';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n  ariaActivedescendant?: string;\n} & Pick<\n  TypeaheadProps<T>,\n  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'\n>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n  keyboardFocusedOptionIndex: number | null;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n      keyboardFocusedOptionIndex: null,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      // Autofocus after context code executions (e.g open Modal) is completed\n      setTimeout(() => {\n        this.inputRef.current?.focus();\n      });\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    this.setState({\n      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10),\n    });\n  };\n\n  renderInput = (isRTL: boolean) => {\n    const {\n      typeaheadId,\n      autoFocus,\n      disabled,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n      ariaActivedescendant,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        dir={isRTL ? 'rtl' : 'auto'}\n        className={clsx(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        aria-activedescendant={ariaActivedescendant}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return (\n      <DirectionContext.Consumer>\n        {(direction) => {\n          const isRTL = direction === Direction.RTL;\n\n          return multiple ? (\n            <div\n              className={clsx('form-control typeahead__input-container', {\n                'typeahead__input-container--scrollable': maxHeight != null,\n              })}\n              style={{ maxHeight }}\n              onClick={() => {\n                this.inputRef.current?.focus();\n              }}\n            >\n              <div className=\"typeahead__input-wrapper\">\n                {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n                {this.renderInput(isRTL)}\n                <div className=\"typeahead__input-aligner\" />\n              </div>\n              <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n                {value}\n              </div>\n            </div>\n          ) : (\n            this.renderInput(isRTL)\n          );\n        }}\n      </DirectionContext.Consumer>\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","keyboardFocusedOptionIndex","componentDidMount","autoFocus","setTimeout","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","setState","Math","max","scrollWidth","renderInput","isRTL","typeaheadId","disabled","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","ariaActivedescendant","hasPlaceholder","length","_jsx","Input","ref","dir","className","clsx","id","undefined","role","style","width","onClick","render","maxHeight","renderChip","DirectionContext","Consumer","children","direction","Direction","RTL","_jsxs","map","chip","idx"],"mappings":"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"}

package/build/main.css

@@ -25409,12 +25409,6 @@ button.np-link {
 }
 .typeahead--multiple .np-chip {
   margin-block-end: auto;
-  animation-name: slide;
-  animation-duration: 0.03s;
-  animation-timing-function: ease-in-out;
-}
-.typeahead--multiple .np-chip:first-child {
-  animation-name: slideFirst;
 }
 .typeahead--multiple .np-chip-remove {
   animation-name: fadeIn;
@@ -25426,7 +25420,10 @@ button.np-link {
   min-block-size: auto;
   padding-block-start: 0;
   padding-block-end: 0;
-  overflow: auto;
+  overflow: visible;
+}
+.typeahead--multiple .typeahead__input-container--scrollable {
+  overflow-y: auto;
 }
 .typeahead--multiple .typeahead__input {
   border: none;
@@ -25460,12 +25457,12 @@ button.np-link {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-block-end: calc(-1 * var(--size-8));
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(var(--size-8) - 1);
+  block-size: var(--size-8);
   inline-size: 100%;
 }
 .typeahead__input-wrapper {
@@ -25499,7 +25496,7 @@ button.np-link {
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(var(--size-8) - 1);
+  padding-block-start: var(--size-8);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
   padding-block-end: var(--size-8);
@@ -25511,22 +25508,6 @@ button.np-link {
 .typeahead-lg.typeahead--multiple .np-chip {
   margin-block-end: 0;
 }
-@keyframes slide {
-  from {
-    transform: translateX(-12px);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slideFirst {
-  from {
-    transform: translateX(-4px);
-  }
-  to {
-    transform: none;
-  }
-}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -25549,7 +25530,7 @@ button.np-link {
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
-  margin-block-start: 9px !important;
+  margin-block-start: var(--size-8);
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: var(--size-16);

package/build/styles/Typeahead/Typeahead.css

@@ -26,12 +26,6 @@
 }
 .typeahead--multiple .np-chip {
   margin-block-end: auto;
-  animation-name: slide;
-  animation-duration: 0.03s;
-  animation-timing-function: ease-in-out;
-}
-.typeahead--multiple .np-chip:first-child {
-  animation-name: slideFirst;
 }
 .typeahead--multiple .np-chip-remove {
   animation-name: fadeIn;
@@ -43,7 +37,10 @@
   min-block-size: auto;
   padding-block-start: 0;
   padding-block-end: 0;
-  overflow: auto;
+  overflow: visible;
+}
+.typeahead--multiple .typeahead__input-container--scrollable {
+  overflow-y: auto;
 }
 .typeahead--multiple .typeahead__input {
   border: none;
@@ -77,12 +74,12 @@
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-block-end: calc(-1 * var(--size-8));
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(var(--size-8) - 1);
+  block-size: var(--size-8);
   inline-size: 100%;
 }
 .typeahead__input-wrapper {
@@ -116,7 +113,7 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(var(--size-8) - 1);
+  padding-block-start: var(--size-8);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
   padding-block-end: var(--size-8);
@@ -128,22 +125,6 @@
 .typeahead-lg.typeahead--multiple .np-chip {
   margin-block-end: 0;
 }
-@keyframes slide {
-  from {
-    transform: translateX(-12px);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slideFirst {
-  from {
-    transform: translateX(-4px);
-  }
-  to {
-    transform: none;
-  }
-}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -166,7 +147,7 @@
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
-  margin-block-start: 9px !important;
+  margin-block-start: var(--size-8);
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: var(--size-16);

package/build/styles/main.css

@@ -25409,12 +25409,6 @@ button.np-link {
 }
 .typeahead--multiple .np-chip {
   margin-block-end: auto;
-  animation-name: slide;
-  animation-duration: 0.03s;
-  animation-timing-function: ease-in-out;
-}
-.typeahead--multiple .np-chip:first-child {
-  animation-name: slideFirst;
 }
 .typeahead--multiple .np-chip-remove {
   animation-name: fadeIn;
@@ -25426,7 +25420,10 @@ button.np-link {
   min-block-size: auto;
   padding-block-start: 0;
   padding-block-end: 0;
-  overflow: auto;
+  overflow: visible;
+}
+.typeahead--multiple .typeahead__input-container--scrollable {
+  overflow-y: auto;
 }
 .typeahead--multiple .typeahead__input {
   border: none;
@@ -25460,12 +25457,12 @@ button.np-link {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-block-end: calc(-1 * var(--size-8));
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(var(--size-8) - 1);
+  block-size: var(--size-8);
   inline-size: 100%;
 }
 .typeahead__input-wrapper {
@@ -25499,7 +25496,7 @@ button.np-link {
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(var(--size-8) - 1);
+  padding-block-start: var(--size-8);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
   padding-block-end: var(--size-8);
@@ -25511,22 +25508,6 @@ button.np-link {
 .typeahead-lg.typeahead--multiple .np-chip {
   margin-block-end: 0;
 }
-@keyframes slide {
-  from {
-    transform: translateX(-12px);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slideFirst {
-  from {
-    transform: translateX(-4px);
-  }
-  to {
-    transform: none;
-  }
-}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -25549,7 +25530,7 @@ button.np-link {
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
-  margin-block-start: 9px !important;
+  margin-block-start: var(--size-8);
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: var(--size-16);

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/build/types/MoneyInput/MoneyInput.d.ts

@@ -55,6 +55,7 @@ declare const _default: import("react").FC<{
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>> | undefined;
     amount: number | null;
     searchPlaceholder?: string | undefined;
+    decimals?: number | undefined;
     currencies: readonly CurrencyItem[];
     selectedCurrency: CurrencyOptionItem;
     onCurrencyChange?: ((value: CurrencyOptionItem) => void) | undefined;
@@ -66,7 +67,6 @@ declare const _default: import("react").FC<{
     }) => void) | undefined;
     customActionLabel?: import("react").ReactNode;
     onCustomAction?: (() => void) | undefined;
-    decimals?: number | undefined;
 }>;
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

package/build/types/MoneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;gBARd,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;eAQhB,MAAM;;AA0anB,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
+} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CACN,cAAc,CAAC,CAAC,CAAC,EACjB,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CACpF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,GAAI,OAAO,OAAO,iCA+C3B;IAEF,MAAM;CAiCP"}
+{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CACN,cAAc,CAAC,CAAC,CAAC,EACjB,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CACpF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAId;IAEF,WAAW,GAAI,OAAO,OAAO,iCA+C3B;IAEF,MAAM;CAmCP"}

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.165.4",
+  "version": "46.165.5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -121,7 +121,7 @@
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.52.1"
+    "virtua": "^0.53.3"
   },
   "publishConfig": {
     "access": "public",

package/src/Button/_stories/Button.test.story.tsx

@@ -250,6 +250,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       startIcon: { en: 'Start icon', ar: 'أيقونة البداية' },
       endIcon: { en: 'End icon', ar: 'أيقونة النهاية' },

package/src/Calendar/_stories/Calendar.test.story.tsx

@@ -166,6 +166,7 @@ export const RTLDiff: Story = {
     });
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       disabledReason: {
         en: 'Weekends and specific dates are unavailable.',

package/src/DateInput/_stories/DateInput.rtl.test.story.tsx

@@ -49,6 +49,7 @@ export const Sizes: Story = {
   },
   ...withRTLDiff({
     renderAs: 'iframe',
+    fixedRows: { heights: [6, 7, 9] },
     i18n: {
       dayLabel: { en: 'Day', ar: 'اليوم' },
       monthLabel: { en: 'Month', ar: 'الشهر' },

package/src/DateInput/_stories/DateInput.story.tsx

@@ -37,5 +37,6 @@ export const Basic: Story = {
     onChange: fn(),
     onBlur: fn(),
     onFocus: fn(),
+    size: 'lg',
   },
 } satisfies Story;

package/src/Decision/_stories/Decision.test.story.tsx

@@ -84,6 +84,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       sendTitle: { en: 'Send money', ar: 'إرسال الأموال' },
       sendDescription: { en: 'Fast international transfers.', ar: 'تحويلات دولية سريعة.' },

package/src/DefinitionList/_stories/DefinitionList.test.story.tsx

@@ -222,7 +222,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [8, 11, 8, 8, 8, 10, 12, 8, 8, 8] },
+    fixedRows: { heights: 'auto' },
     i18n: {
       fullName: { en: 'Full name', ar: 'الاسم الكامل' },
       customerName: { en: 'Alice Smith', ar: 'أليس سميث' },

package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.rtl.test.story.tsx

@@ -94,6 +94,7 @@ export const TriggerVariants: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 8, 10, 8] },
     renderAs: 'iframe',
     width: 'stretch',
     i18n: {

package/src/Field/_stories/Field.test.story.tsx

@@ -111,6 +111,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     width: 'stretch',
     i18n: {
       placeholder_en: { en: 'LTR placeholder...', ar: 'LTR placeholder...' },

package/src/Header/_stories/Header.test.story.tsx

@@ -151,7 +151,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [4, 4, 5, 5], hideSeparators: true },
+    fixedRows: { heights: 'auto', hideSeparators: true },
     i18n: {
       groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
       groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },

package/src/InputWithDisplayFormat/_stories/InputWithDisplayFormat.test.story.tsx

@@ -70,6 +70,7 @@ export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     width: 'stretch',
     i18n: {
       value: {

package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx

@@ -78,6 +78,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       placeholder_both: { en: 'addonStart and addonEnd', ar: 'البادئة والنهاية' },
       placeholder_start: { en: 'addonStart only', ar: 'البادئة فقط' },

package/src/Inputs/SelectInput/_stories/SelectInput.rtl.test.story.tsx

@@ -88,6 +88,7 @@ export const TriggerVariants: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       ...currencyNames,
       selectCurrency: { en: 'Select currency', ar: 'اختر العملة' },

package/src/Inputs/TextArea/_stories/TextArea.test.story.tsx

@@ -168,6 +168,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     width: 'stretch',
     i18n: {
       placeholder: { en: 'Translated placeholder...', ar: 'نص بديل مترجم...' },

package/src/InstructionsList/_stories/InstructionsList.test.story.tsx

@@ -15,7 +15,7 @@ export const RTLDiff: Story = {
   render: () => {
     const i18n = useRtlDiffI18n();
     return (
-      <div style={{ display: 'grid', width: '100%', gridTemplateRows: '8lh auto' }}>
+      <div>
         <InstructionsList
           dos={[i18n.initialTransfer, i18n.inviteFriends]}
           donts={[i18n.hiddenFees, i18n.badExchangeRate]}
@@ -30,6 +30,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       initialTransfer: {
         en: 'Do an initial money transfer',

package/src/Label/_stories/Label.test.story.tsx

@@ -34,6 +34,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       plain: { en: 'Plain label text', ar: 'نص التسمية العادي' },
       optional: { en: 'Label with optional marker', ar: 'تسمية مع علامة اختيارية' },

package/src/ListItem/_stories/ListItem.rtl.test.story.tsx

@@ -128,12 +128,7 @@ export default {
   ...withRTLDiff({
     width: 'stretch',
     i18n: i18nMap,
-    fixedRows: {
-      heights: [
-        4, 6, 4, 6, 7, 5, 7, 5, 5, 7, 5, 5, 5, 5, 13, 5, 5, 8, 4, 7, 7, 6, 7, 5, 9, 5, 5, 5, 5, 5,
-        5, 5, 6, 6, 6, 14, 8, 8, 8, 8, 8, 8,
-      ],
-    },
+    fixedRows: { heights: 'auto' },
   }),
 } satisfies Meta<ListItemProps>;
 

package/src/MoneyInput/_stories/MoneyInput.rtl.test.story.tsx

@@ -75,7 +75,9 @@ export const TriggerVariants: Story = {
       </Field>
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
+  }),
 };
 
 export const OpenDropdown: Story = {

package/src/PhoneNumberInput/_stories/PhoneNumberInput.rtl.test.story.tsx

@@ -33,7 +33,7 @@ export const Sizes: Story = {
       </Field>
     </>
   ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  ...withRTLDiff({ renderAs: 'iframe', fixedRows: { heights: [7, 6, 8] } }),
 };
 
 export const DropdownOpen: Story = {

package/src/ProgressBar/_stories/ProgressBar.test.story.tsx

@@ -33,6 +33,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       title1: { en: 'Send 5,550 GBP', ar: 'أرسل ٥٬٥٥٠ جنيه إسترليني' },
       description: {

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.test.story.tsx

@@ -315,6 +315,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       defaultIconTitle: { en: 'Default status icon', ar: 'أيقونة الحالة الافتراضية' },
       defaultIconDescription: {

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -515,6 +515,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [10, 12, 12, 13, 13] },
     renderAs: 'iframe',
     i18n: {
       titleOnly: { en: 'Title only', ar: 'العنوان فقط' },

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.test.story.tsx

@@ -583,6 +583,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       basicDescription: { en: 'Basic description only.', ar: 'الوصف الأساسي فقط.' },
       withTitleHeading: { en: 'With Title', ar: 'مع عنوان' },

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.test.story.tsx

@@ -47,6 +47,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       defaultIcon: {
         en: 'Short content with default icon.',

package/src/Table/_stories/Table.test.story.tsx

@@ -88,23 +88,34 @@ export const RTLDiff: Story = {
 
     return (
       <>
-        <Table data={{ headers, rows }} />
-        <Table
-          data={{
-            headers,
-            rows,
-            onRowClick: (rowData: TableRowType | TableRowClickableType) => {
-              void rowData;
-            },
-          }}
-        />
-        <Table data={{ headers, rows }} fullWidth={false} />
-        <Table data={{ headers, rows: [] }} />
-        <Table data={{ headers, rows }} loading />
+        <div>
+          <Table data={{ headers, rows }} />
+        </div>
+        <div>
+          <Table
+            data={{
+              headers,
+              rows,
+              onRowClick: (rowData: TableRowType | TableRowClickableType) => {
+                void rowData;
+              },
+            }}
+          />
+        </div>
+        <div>
+          <Table data={{ headers, rows }} fullWidth={false} />
+        </div>
+        <div>
+          <Table data={{ headers, rows: [] }} />
+        </div>
+        <div>
+          <Table data={{ headers, rows }} loading />
+        </div>
       </>
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       employeeHeader: { en: 'Employee', ar: 'الموظف' },
       locationHeader: { en: 'Location', ar: 'الموقع' },

package/src/Tabs/_stories/Tabs.test.story.tsx

@@ -84,7 +84,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [8, 8, 8, 8] },
+    fixedRows: { heights: 'auto' },
     i18n: {
       firstTab: { en: 'First tab', ar: 'التبويب الأول' },
       secondTab: { en: 'Second tab', ar: 'التبويب الثاني' },

package/src/TextareaWithDisplayFormat/_stories/TextareaWithDisplayFormat.test.story.tsx

@@ -49,6 +49,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       value: {
         en: 'XKQMRTBWJNFL',

package/src/Typeahead/Typeahead.css

@@ -26,12 +26,6 @@
 }
 .typeahead--multiple .np-chip {
   margin-block-end: auto;
-  animation-name: slide;
-  animation-duration: 0.03s;
-  animation-timing-function: ease-in-out;
-}
-.typeahead--multiple .np-chip:first-child {
-  animation-name: slideFirst;
 }
 .typeahead--multiple .np-chip-remove {
   animation-name: fadeIn;
@@ -43,7 +37,10 @@
   min-block-size: auto;
   padding-block-start: 0;
   padding-block-end: 0;
-  overflow: auto;
+  overflow: visible;
+}
+.typeahead--multiple .typeahead__input-container--scrollable {
+  overflow-y: auto;
 }
 .typeahead--multiple .typeahead__input {
   border: none;
@@ -77,12 +74,12 @@
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-block-end: calc(-1 * var(--size-8));
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(var(--size-8) - 1);
+  block-size: var(--size-8);
   inline-size: 100%;
 }
 .typeahead__input-wrapper {
@@ -116,7 +113,7 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(var(--size-8) - 1);
+  padding-block-start: var(--size-8);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
   padding-block-end: var(--size-8);
@@ -128,22 +125,6 @@
 .typeahead-lg.typeahead--multiple .np-chip {
   margin-block-end: 0;
 }
-@keyframes slide {
-  from {
-    transform: translateX(-12px);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slideFirst {
-  from {
-    transform: translateX(-4px);
-  }
-  to {
-    transform: none;
-  }
-}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -166,7 +147,7 @@
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
-  margin-block-start: 9px !important;
+  margin-block-start: var(--size-8);
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: var(--size-16);

package/src/Typeahead/Typeahead.less

@@ -35,13 +35,6 @@
   &--multiple {
     .np-chip {
       margin-bottom: auto;
-      animation-name: slide;
-      animation-duration: @animation-duration;
-      animation-timing-function: @animation-timing-function;
-
-      &:first-child {
-        animation-name: slideFirst;
-      }
 
       &-remove {
         animation-name: fadeIn;
@@ -55,7 +48,11 @@
       min-height: auto;
       padding-top: 0;
       padding-bottom: 0;
-      overflow: auto;
+      overflow: visible;
+    }
+
+    .typeahead__input-container--scrollable {
+      overflow-y: auto;
     }
 
     .typeahead__input {
@@ -98,14 +95,14 @@
       }
 
       .typeahead__input {
-        margin-bottom: calc(-1 * var(--size-8) + 1px);
+        margin-bottom: calc(-1 * var(--size-8));
         margin-left: var(--size-4);
       }
 
       .typeahead__input-wrapper {
         &::after {
           content: "";
-          height: calc(var(--size-8) - 1);
+          height: var(--size-8);
           width: 100%;
         }
       }
@@ -165,7 +162,7 @@
       }
 
       .typeahead__input {
-        padding-top: calc(var(--size-8) - 1);
+        padding-top: var(--size-8);
       }
 
       .typeahead__input-wrapper {
@@ -183,26 +180,6 @@
     }
   }
 
-  @keyframes slide {
-    from {
-      transform: translateX(-12px);
-    }
-
-    to {
-      transform: none;
-    }
-  }
-
-  @keyframes slideFirst {
-    from {
-      transform: translateX(-4px);
-    }
-
-    to {
-      transform: none;
-    }
-  }
-
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -229,7 +206,7 @@
       color: var(--color-interactive-secondary);
     }
     .np-chip {
-      margin-top: 9px !important;
+      margin-top: var(--size-8);
     }
     .np-chip--removable {
       .np-text-body-default-bold {

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -65,10 +65,8 @@ export default class TypeaheadInput<T> extends Component<
   }
 
   recalculateWidth = () => {
-    requestAnimationFrame(() => {
-      this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),
-      });
+    this.setState({
+      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10),
     });
   };
 
@@ -131,7 +129,9 @@ export default class TypeaheadInput<T> extends Component<
 
           return multiple ? (
             <div
-              className="form-control typeahead__input-container"
+              className={clsx('form-control typeahead__input-container', {
+                'typeahead__input-container--scrollable': maxHeight != null,
+              })}
               style={{ maxHeight }}
               onClick={() => {
                 this.inputRef.current?.focus();

package/src/Typeahead/_stories/Typeahead.rtl.test.story.tsx

@@ -87,7 +87,7 @@ export const TriggerVariants: Story = {
       </>
     );
   },
-  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
+  ...withRTLDiff({ fixedRows: { heights: 'auto' }, width: '80%', i18n: localisedStrings }),
 };
 
 export const OpenDropdown: Story = {

package/src/Typeahead/_stories/Typeahead.test.story.tsx

@@ -112,3 +112,68 @@ export const AutoFocusInModal: Story = {
     );
   },
 };
+
+const testEmails = [
+  { label: 'alex@example.com' },
+  { label: 'bruno.silva@example.com' },
+  { label: 'chen@example.com' },
+  { label: 'dana.khan@example.com' },
+  { label: 'emeka@example.com' },
+];
+
+export const Chips: Story = {
+  render: () => (
+    <div className="d-flex flex-column">
+      <Field id="typeahead-chips-one-row" label="One row">
+        <Typeahead
+          id="typeahead-chips-one-row"
+          name="typeahead-chips-one-row"
+          multiple
+          allowNew
+          showSuggestions={false}
+          initialValue={testEmails.slice(0, 2)}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-chips-wrapped" label="Wrapped over several rows">
+        <Typeahead
+          id="typeahead-chips-wrapped"
+          name="typeahead-chips-wrapped"
+          multiple
+          allowNew
+          showSuggestions={false}
+          initialValue={testEmails}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-chips-capped" label="Capped with maxHeight">
+        <Typeahead
+          id="typeahead-chips-capped"
+          name="typeahead-chips-capped"
+          multiple
+          allowNew
+          showSuggestions={false}
+          maxHeight={100}
+          initialValue={testEmails}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-chips-large" label="Large">
+        <Typeahead
+          id="typeahead-chips-large"
+          name="typeahead-chips-large"
+          size="lg"
+          multiple
+          allowNew
+          showSuggestions={false}
+          initialValue={testEmails.slice(0, 2)}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+    </div>
+  ),
+};

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -34,6 +34,7 @@ export const Sizes: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       smallUpload: { en: 'Small upload', ar: 'منطقة رفع صغيرة' },
       mediumUpload: { en: 'Medium upload', ar: 'منطقة رفع متوسطة' },

package/src/UploadInput/_stories/UploadInput.test.story.tsx

@@ -344,6 +344,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 8, 46] },
     renderAs: 'iframe',
     i18n: {
       singleUpload: { en: 'single-upload.pdf', ar: 'تحميل-واحد.pdf' },

package/src/main.css

@@ -25409,12 +25409,6 @@ button.np-link {
 }
 .typeahead--multiple .np-chip {
   margin-block-end: auto;
-  animation-name: slide;
-  animation-duration: 0.03s;
-  animation-timing-function: ease-in-out;
-}
-.typeahead--multiple .np-chip:first-child {
-  animation-name: slideFirst;
 }
 .typeahead--multiple .np-chip-remove {
   animation-name: fadeIn;
@@ -25426,7 +25420,10 @@ button.np-link {
   min-block-size: auto;
   padding-block-start: 0;
   padding-block-end: 0;
-  overflow: auto;
+  overflow: visible;
+}
+.typeahead--multiple .typeahead__input-container--scrollable {
+  overflow-y: auto;
 }
 .typeahead--multiple .typeahead__input {
   border: none;
@@ -25460,12 +25457,12 @@ button.np-link {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-block-end: calc(-1 * var(--size-8));
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(var(--size-8) - 1);
+  block-size: var(--size-8);
   inline-size: 100%;
 }
 .typeahead__input-wrapper {
@@ -25499,7 +25496,7 @@ button.np-link {
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(var(--size-8) - 1);
+  padding-block-start: var(--size-8);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
   padding-block-end: var(--size-8);
@@ -25511,22 +25508,6 @@ button.np-link {
 .typeahead-lg.typeahead--multiple .np-chip {
   margin-block-end: 0;
 }
-@keyframes slide {
-  from {
-    transform: translateX(-12px);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slideFirst {
-  from {
-    transform: translateX(-4px);
-  }
-  to {
-    transform: none;
-  }
-}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -25549,7 +25530,7 @@ button.np-link {
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
-  margin-block-start: 9px !important;
+  margin-block-start: var(--size-8);
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: var(--size-16);