@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-862fadc

package/build/select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../src/select/Select.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState, useEffect, useRef, useMemo, useId } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button, { ButtonProps } from '../button';\nimport Chevron from '../chevron';\nimport { Position, Size } from '../common';\nimport BottomSheet from '../common/bottomSheet';\nimport { stopPropagation } from '../common/domHelpers';\nimport { useLayout } from '../common/hooks';\nimport Panel from '../common/panel';\nimport Drawer from '../drawer';\nimport { useInputAttributes } from '../inputs/contexts';\n\nimport messages from './Select.messages';\nimport Option from './option';\nimport SearchBox from './searchBox';\n\nconst DEFAULT_SEARCH_VALUE = '';\nconst DEFAULT_OPTIONS_PAGE_SIZE = 1000;\n\nconst includesString = (string1: string, string2: string) =>\n  string1.toLowerCase().includes(string2.toLowerCase());\n\nexport interface SelectOptionItem {\n  value: any;\n  label?: React.ReactNode;\n  icon?: React.ReactNode;\n  currency?: string;\n  note?: React.ReactNode;\n  secondary?: React.ReactNode;\n}\n\nexport interface SelectItem extends Partial<SelectOptionItem> {\n  header?: React.ReactNode;\n  separator?: boolean;\n  disabled?: boolean;\n  searchStrings?: string[];\n}\n\nexport interface SelectItemWithPlaceholder extends SelectItem {\n  placeholder?: string;\n}\n\nfunction defaultFilterFunction(option: SelectItemWithPlaceholder, searchValue: string) {\n  if (isPlaceholderOption(option)) {\n    return true;\n  }\n  const { label, note, secondary, currency, searchStrings } = option;\n  return (\n    (typeof label === 'string' && includesString(label, searchValue)) ||\n    (typeof note === 'string' && includesString(note, searchValue)) ||\n    (typeof secondary === 'string' && includesString(secondary, searchValue)) ||\n    (!!currency && includesString(currency, searchValue)) ||\n    (!!searchStrings && searchStrings.some((string) => includesString(string, searchValue)))\n  );\n}\n\nfunction isActionableOption(option: SelectItem) {\n  return !option.header && !option.separator && !option.disabled;\n}\n\nfunction isHeaderOption(option: SelectItem | null) {\n  return option != null && 'header' in option;\n}\n\nfunction isSeparatorOption(option: SelectItem | null) {\n  return option != null && 'separator' in option;\n}\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\n/**\n * No option or placeholder option is selected\n */\nconst DEFAULT_SELECTED_OPTION = null;\n\nfunction isPlaceholderOption(option: SelectItemWithPlaceholder | null) {\n  return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;\n}\n\nfunction isSearchableOption(option: SelectItemWithPlaceholder | null) {\n  return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);\n}\n\nconst getUniqueIdForOption = (parentId: string | undefined, option: SelectItem | null) => {\n  if (option == null) {\n    return undefined;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const uniqueOptionId =\n    option.value || (typeof option.label === 'string' ? option.label.replace(/\\s/g, '') : '');\n\n  return `option-${parentId ?? ''}-${uniqueOptionId}`;\n};\n\nexport interface SelectProps {\n  placeholder?: string;\n  id?: string;\n  required?: boolean;\n  disabled?: boolean;\n  inverse?: boolean;\n  dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;\n  dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n  /** @default 'md' */\n  size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n  /** @default true */\n  block?: boolean;\n  selected?: SelectOptionItem;\n  /**\n   * Search toggle\n   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)\n   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array.\n   */\n  search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);\n  options: SelectItem[];\n  /** @default '' */\n  searchValue?: string;\n  searchPlaceholder?: string;\n  /** @default {} */\n  classNames?: Record<string, string>;\n  dropdownUp?: boolean;\n  buttonProps?: Extract<ButtonProps, { as?: 'button' }>;\n  dropdownProps?: React.ComponentPropsWithoutRef<'ul'>;\n  onChange: (value: SelectItem | typeof DEFAULT_SELECTED_OPTION) => void;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n  /**\n   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.\n   * DO NOT USE TOGETHER WITH `search` PROPERTY\n   */\n  onSearchChange?: (value: string) => void;\n}\n\nconst defaultClassNames = {};\n\n/**\n * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)\n */\nexport default function Select({\n  placeholder,\n  id,\n  required,\n  disabled,\n  inverse,\n  dropdownWidth,\n  size = 'md',\n  block = true,\n  selected,\n  search,\n  onChange,\n  onFocus,\n  onBlur,\n  options: defaultOptions,\n  onSearchChange,\n  searchValue: initSearchValue = '',\n  searchPlaceholder,\n  classNames: classNamesProp = defaultClassNames,\n  dropdownUp,\n  dropdownProps,\n  buttonProps,\n}: SelectProps) {\n  const inputAttributes = useInputAttributes();\n\n  const { formatMessage } = useIntl();\n  const s = (className: string) => classNamesProp[className] || className;\n  const [open, setOpen] = useState(false);\n  const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);\n  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(-1);\n  const keyboardFocusedReference = useRef<HTMLLIElement>(null);\n  const previousKeyboardFocusedOptionIndex = useRef(-1);\n  const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);\n  const searchBoxReference = useRef<HTMLInputElement>(null);\n  const selectReference = useRef<HTMLDivElement>(null);\n  const dropdownButtonReference = useRef<HTMLButtonElement>(null);\n  const optionsListReference = useRef<HTMLUListElement>(null);\n  const isSearchEnabled = !!onSearchChange || !!search;\n  const isDropdownAutoWidth = dropdownWidth == null;\n\n  const options = useMemo(() => {\n    if (!search || !searchValue) {\n      return defaultOptions;\n    }\n\n    return defaultOptions.filter(isSearchableOption).filter((option) => {\n      if (typeof search === 'function') {\n        return search(option, searchValue);\n      }\n      return defaultFilterFunction(option, searchValue);\n    });\n  }, [defaultOptions, search, searchValue]);\n\n  const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);\n  const focusedOption = selectableOptions[keyboardFocusedOptionIndex];\n\n  const fallbackButtonId = useId();\n  const computedId = id || inputAttributes.id || fallbackButtonId;\n  const listboxId = `${computedId}-listbox`;\n  const searchBoxId = `${computedId}-searchbox`;\n\n  const { isMobile } = useLayout();\n\n  useEffect(() => {\n    let cancelled = false;\n\n    if (keyboardFocusedOptionIndex >= 0) {\n      requestAnimationFrame(() => {\n        if (!cancelled) {\n          if (isSearchEnabled) {\n            keyboardFocusedReference.current?.scrollIntoView?.({ block: 'center' });\n          } else {\n            keyboardFocusedReference.current?.focus();\n          }\n        }\n      });\n\n      return () => {\n        cancelled = true;\n      };\n    }\n  }, [keyboardFocusedOptionIndex, isSearchEnabled]);\n\n  const handleOnClick = () => {\n    setOpen(true);\n  };\n\n  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {\n    if (event.currentTarget === event.target && open) {\n      handleCloseOptions();\n    }\n  };\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (event) => {\n    onFocus?.(event);\n  };\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {\n    const { nativeEvent } = event;\n    if (nativeEvent) {\n      const elementReceivingFocus = nativeEvent.relatedTarget;\n      const select = event.currentTarget;\n      if (\n        select &&\n        elementReceivingFocus instanceof Node &&\n        select.contains(elementReceivingFocus)\n      ) {\n        return;\n      }\n    }\n\n    onBlur?.(event);\n  };\n\n  const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);\n    setSearchValue(event.target.value);\n    onSearchChange?.(event.target.value);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        if (open) {\n          moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);\n        } else {\n          setOpen(true);\n        }\n        stopPropagation(event);\n        break;\n      case ' ':\n        if (event.target !== searchBoxReference.current) {\n          if (open) {\n            selectKeyboardFocusedOption();\n          } else {\n            setOpen(true);\n          }\n          stopPropagation(event);\n        }\n        break;\n      case 'Enter':\n        if (open) {\n          selectKeyboardFocusedOption();\n        } else {\n          setOpen(true);\n        }\n        stopPropagation(event);\n        break;\n      case 'Escape':\n        handleCloseOptions();\n        stopPropagation(event);\n        break;\n      case 'Tab':\n        if (open) {\n          selectKeyboardFocusedOption();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  function selectKeyboardFocusedOption() {\n    if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {\n      selectOption(selectableOptions[keyboardFocusedOptionIndex]);\n    }\n  }\n\n  function moveFocusWithDifference(difference: number) {\n    const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {\n      if (optionIndex >= 0) {\n        return optionIndex;\n      }\n      if (isOptionSelected(selected, current)) {\n        return index;\n      }\n      return -1;\n    }, -1);\n    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;\n    let indexToStartMovingFrom = previousFocusedIndex;\n    if (previousFocusedIndex < 0) {\n      if (selectedOptionIndex < 0) {\n        setKeyboardFocusedOptionIndex(0);\n      } else {\n        indexToStartMovingFrom = selectedOptionIndex;\n      }\n    }\n\n    const unClampedNewIndex = indexToStartMovingFrom + difference;\n    const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);\n\n    setKeyboardFocusedOptionIndex(newIndex);\n  }\n\n  useEffect(() => {\n    if (open) {\n      if (!isMobile || searchValue) {\n        if (isSearchEnabled && searchBoxReference.current) {\n          searchBoxReference.current.focus();\n        }\n        if (\n          !isSearchEnabled &&\n          optionsListReference.current &&\n          previousKeyboardFocusedOptionIndex.current < 0\n        ) {\n          optionsListReference.current.focus();\n        }\n      }\n\n      previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;\n    } else {\n      previousKeyboardFocusedOptionIndex.current = -1;\n    }\n  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);\n\n  const handleCloseOptions = () => {\n    setOpen(false);\n    setKeyboardFocusedOptionIndex(-1);\n    if (dropdownButtonReference.current) {\n      dropdownButtonReference.current.focus();\n    }\n  };\n\n  function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {\n    return (event: React.SyntheticEvent) => {\n      stopPropagation(event);\n      selectOption(option);\n    };\n  }\n\n  function selectOption(option: SelectItemWithPlaceholder) {\n    onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);\n    handleCloseOptions();\n  }\n\n  function renderOptionsList({ className = '' } = {}) {\n    const dropdownClass = clsx(\n      s('np-dropdown-menu'),\n      {\n        [s('np-dropdown-menu-desktop')]: !isMobile,\n        [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth,\n      },\n      s(className),\n    );\n\n    const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);\n    return (\n      <ul\n        ref={optionsListReference}\n        id={listboxId}\n        role=\"listbox\"\n        aria-orientation=\"vertical\"\n        aria-activedescendant={getUniqueIdForOption(id, selected ?? null)}\n        tabIndex={-1}\n        className={dropdownClass}\n        {...dropdownProps}\n      >\n        {showPlaceholder && <PlaceHolderOption />}\n        {isSearchEnabled && (\n          <SearchBox\n            ref={searchBoxReference}\n            id={searchBoxId}\n            classNames={classNamesProp}\n            value={initSearchValue || searchValue}\n            placeholder={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n            focusedOptionId={getUniqueIdForOption(id, focusedOption)}\n            onChange={handleSearchChange}\n            onClick={stopPropagation}\n          />\n        )}\n        {options.slice(0, numberOfOptionsShown).map(renderOption)}\n        {numberOfOptionsShown < options.length && <ShowMoreOption />}\n      </ul>\n    );\n  }\n\n  function ShowMoreOption() {\n    function handleOnClick(event: React.SyntheticEvent<HTMLLIElement>) {\n      stopPropagation(event);\n      setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);\n    }\n    return (\n      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n      <li\n        className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}\n        onClick={handleOnClick}\n        onKeyPress={handleOnClick}\n      >\n        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n        <a>...</a>\n      </li>\n    );\n  }\n\n  function PlaceHolderOption() {\n    const placeholderOption = { placeholder };\n    return (\n      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n      <li\n        className={clsx(s('clickable'), s('border-bottom'))}\n        onClick={createSelectHandlerForOption(placeholderOption)}\n        onKeyPress={createSelectHandlerForOption(placeholderOption)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n        <a>{placeholder}</a>\n      </li>\n    );\n  }\n\n  function SeparatorOption() {\n    return <li className={s('np-separator')} aria-hidden />;\n  }\n\n  function HeaderOption({ children }: { children?: React.ReactNode }) {\n    return (\n      <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions\n        className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}\n        onClick={stopPropagation}\n        onKeyPress={stopPropagation}\n      >\n        {children}\n      </li>\n    );\n  }\n\n  function isOptionSelected(selected: SelectOptionItem | undefined, option: SelectItem) {\n    return selected?.value === option?.value;\n  }\n\n  const renderOption = (option: SelectItem, index: number) => {\n    const separatorOption = option;\n    if (isSeparatorOption(separatorOption) && separatorOption?.separator) {\n      return <SeparatorOption key={index} />;\n    }\n    const headerOption = option;\n    if (isHeaderOption(headerOption) && headerOption.header) {\n      return <HeaderOption key={index}>{headerOption.header}</HeaderOption>;\n    }\n\n    const isActive = isOptionSelected(selected, option);\n    const selectOption = option;\n    const isFocusedWithKeyboard =\n      !selectOption.disabled &&\n      keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);\n\n    const className = clsx(\n      s('np-dropdown-item'),\n      selectOption.disabled ? [s('disabled')] : s('clickable'),\n      {\n        [s('active')]: isActive,\n        [s('np-dropdown-item--focused')]: isFocusedWithKeyboard,\n      },\n    );\n\n    const handleOnClick = selectOption.disabled\n      ? stopPropagation\n      : createSelectHandlerForOption(selectOption);\n\n    return (\n      <li\n        ref={isFocusedWithKeyboard ? keyboardFocusedReference : undefined}\n        key={index}\n        id={getUniqueIdForOption(id, option)}\n        aria-selected={isActive}\n        aria-disabled={option.disabled}\n        role=\"option\"\n        tabIndex={-1}\n        className={className}\n        onClick={handleOnClick}\n        onKeyPress={handleOnClick}\n      >\n        {/* @ts-expect-error options needs DOM refactoring */}\n        <a disabled={selectOption.disabled}>\n          <Option\n            label={undefined}\n            value={undefined}\n            {...selectOption}\n            classNames={classNamesProp}\n          />\n        </a>\n      </li>\n    );\n  };\n\n  function getIndexWithoutHeadersForIndexWithHeaders(index: number) {\n    return options.reduce((sum, option, currentIndex) => {\n      if (currentIndex < index && isActionableOption(option)) {\n        return sum + 1;\n      }\n      return sum;\n    }, 0);\n  }\n\n  const hasActiveOptions = !!defaultOptions.length;\n  if (open && (initSearchValue || searchValue)) {\n    if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {\n      setKeyboardFocusedOptionIndex(0);\n    }\n    if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {\n      setKeyboardFocusedOptionIndex(-1);\n    }\n  }\n\n  return (\n    <div // eslint-disable-line jsx-a11y/no-static-element-interactions\n      ref={selectReference}\n      className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}\n      onKeyDown={handleKeyDown}\n      onTouchMove={handleTouchStart}\n      onFocus={handleOnFocus}\n      onBlur={handleOnBlur}\n    >\n      <Button\n        ref={dropdownButtonReference}\n        {...inputAttributes}\n        id={computedId}\n        block={block}\n        size={size}\n        htmlType=\"button\"\n        className={clsx(\n          s('np-dropdown-toggle'),\n          s('np-text-body-large'),\n          inverse ? s('np-dropdown-toggle-navy') : null,\n        )}\n        // reset Button's styles\n        type={null}\n        priority={null}\n        disabled={disabled}\n        aria-controls={listboxId}\n        aria-expanded={open}\n        onClick={handleOnClick}\n        {...buttonProps}\n      >\n        {selected ? (\n          <Option label={undefined} {...selected} classNames={classNamesProp} selected />\n        ) : (\n          <span className={s('form-control-placeholder')}>{placeholder}</span>\n        )}\n        <Chevron\n          // disabled={disabled}\n          className={clsx(\n            s('tw-icon'),\n            s('tw-chevron-up-icon'),\n            s('tw-chevron'),\n            s('bottom'),\n            s('np-select-chevron'),\n          )}\n        />\n      </Button>\n      {isMobile ? (\n        isSearchEnabled ? (\n          <Drawer\n            open={open}\n            headerTitle={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n            onClose={handleCloseOptions}\n          >\n            {renderOptionsList()}\n          </Drawer>\n        ) : (\n          <BottomSheet open={open} onClose={handleCloseOptions}>\n            {renderOptionsList()}\n          </BottomSheet>\n        )\n      ) : (\n        <Panel\n          open={open}\n          flip={false}\n          altAxis\n          anchorRef={selectReference}\n          anchorWidth={isDropdownAutoWidth}\n          position={dropdownUp ? Position.TOP : Position.BOTTOM}\n          onClose={handleCloseOptions}\n        >\n          {renderOptionsList({ className: 'p-a-1' })}\n        </Panel>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_SEARCH_VALUE","DEFAULT_OPTIONS_PAGE_SIZE","includesString","string1","string2","toLowerCase","includes","defaultFilterFunction","option","searchValue","isPlaceholderOption","label","note","secondary","currency","searchStrings","some","string","isActionableOption","header","separator","disabled","isHeaderOption","isSeparatorOption","clamp","from","to","value","Math","max","min","DEFAULT_SELECTED_OPTION","isSearchableOption","getUniqueIdForOption","parentId","undefined","uniqueOptionId","replace","defaultClassNames","Select","placeholder","id","required","inverse","dropdownWidth","size","block","selected","search","onChange","onFocus","onBlur","options","defaultOptions","onSearchChange","initSearchValue","searchPlaceholder","classNames","classNamesProp","dropdownUp","dropdownProps","buttonProps","inputAttributes","useInputAttributes","formatMessage","useIntl","s","className","open","setOpen","useState","setSearchValue","keyboardFocusedOptionIndex","setKeyboardFocusedOptionIndex","keyboardFocusedReference","useRef","previousKeyboardFocusedOptionIndex","numberOfOptionsShown","setNumberOfOptionsShown","searchBoxReference","selectReference","dropdownButtonReference","optionsListReference","isSearchEnabled","isDropdownAutoWidth","useMemo","filter","selectableOptions","focusedOption","fallbackButtonId","useId","computedId","listboxId","searchBoxId","isMobile","useLayout","useEffect","cancelled","requestAnimationFrame","current","scrollIntoView","focus","handleOnClick","handleTouchStart","event","currentTarget","target","handleCloseOptions","handleOnFocus","handleOnBlur","nativeEvent","elementReceivingFocus","relatedTarget","select","Node","contains","handleSearchChange","handleKeyDown","key","moveFocusWithDifference","stopPropagation","selectKeyboardFocusedOption","length","selectOption","difference","selectedOptionIndex","reduce","optionIndex","index","isOptionSelected","previousFocusedIndex","indexToStartMovingFrom","unClampedNewIndex","newIndex","createSelectHandlerForOption","renderOptionsList","dropdownClass","clsx","showPlaceholder","Boolean","_jsxs","ref","role","tabIndex","children","_jsx","PlaceHolderOption","SearchBox","messages","focusedOptionId","onClick","slice","map","renderOption","ShowMoreOption","onKeyPress","placeholderOption","SeparatorOption","HeaderOption","separatorOption","headerOption","isActive","isFocusedWithKeyboard","getIndexWithoutHeadersForIndexWithHeaders","Option","sum","currentIndex","hasActiveOptions","onKeyDown","onTouchMove","Button","htmlType","type","priority","Chevron","Drawer","headerTitle","onClose","BottomSheet","Panel","flip","altAxis","anchorRef","anchorWidth","position","Position","TOP","BOTTOM"],"mappings":"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"}
+{"version":3,"file":"Select.mjs","sources":["../../src/select/Select.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState, useEffect, useRef, useMemo, useId } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button, { ButtonProps } from '../button';\nimport Chevron from '../chevron';\nimport { Position, Size } from '../common';\nimport BottomSheet from '../common/bottomSheet';\nimport { stopPropagation } from '../common/domHelpers';\nimport { useLayout } from '../common/hooks';\nimport Panel from '../common/panel';\nimport Drawer from '../drawer';\nimport { useInputAttributes } from '../inputs/contexts';\n\nimport messages from './Select.messages';\nimport Option from './option';\nimport SearchBox from './searchBox';\n\nconst DEFAULT_SEARCH_VALUE = '';\nconst DEFAULT_OPTIONS_PAGE_SIZE = 1000;\n\nconst includesString = (string1: string, string2: string) =>\n  string1.toLowerCase().includes(string2.toLowerCase());\n\nexport interface SelectOptionItem {\n  value: any;\n  label?: React.ReactNode;\n  icon?: React.ReactNode;\n  currency?: string;\n  note?: React.ReactNode;\n  secondary?: React.ReactNode;\n}\n\nexport interface SelectItem extends Partial<SelectOptionItem> {\n  header?: React.ReactNode;\n  separator?: boolean;\n  disabled?: boolean;\n  searchStrings?: string[];\n}\n\nexport interface SelectItemWithPlaceholder extends SelectItem {\n  placeholder?: string;\n}\n\nfunction defaultFilterFunction(option: SelectItemWithPlaceholder, searchValue: string) {\n  if (isPlaceholderOption(option)) {\n    return true;\n  }\n  const { label, note, secondary, currency, searchStrings } = option;\n  return (\n    (typeof label === 'string' && includesString(label, searchValue)) ||\n    (typeof note === 'string' && includesString(note, searchValue)) ||\n    (typeof secondary === 'string' && includesString(secondary, searchValue)) ||\n    (!!currency && includesString(currency, searchValue)) ||\n    (!!searchStrings && searchStrings.some((string) => includesString(string, searchValue)))\n  );\n}\n\nfunction isActionableOption(option: SelectItem) {\n  return !option.header && !option.separator && !option.disabled;\n}\n\nfunction isHeaderOption(option: SelectItem | null) {\n  return option != null && 'header' in option;\n}\n\nfunction isSeparatorOption(option: SelectItem | null) {\n  return option != null && 'separator' in option;\n}\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\n/**\n * No option or placeholder option is selected\n */\nconst DEFAULT_SELECTED_OPTION = null;\n\nfunction isPlaceholderOption(option: SelectItemWithPlaceholder | null) {\n  return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;\n}\n\nfunction isSearchableOption(option: SelectItemWithPlaceholder | null) {\n  return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);\n}\n\nconst getUniqueIdForOption = (parentId: string | undefined, option: SelectItem | null) => {\n  if (option == null) {\n    return undefined;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const uniqueOptionId =\n    option.value || (typeof option.label === 'string' ? option.label.replace(/\\s/g, '') : '');\n\n  return `option-${parentId ?? ''}-${uniqueOptionId}`;\n};\n\nexport interface SelectProps {\n  placeholder?: string;\n  id?: string;\n  required?: boolean;\n  disabled?: boolean;\n  inverse?: boolean;\n  dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;\n  dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n  /** @default 'md' */\n  size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n  /** @default true */\n  block?: boolean;\n  selected?: SelectOptionItem;\n  /**\n   * Search toggle\n   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)\n   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array.\n   */\n  search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);\n  options: SelectItem[];\n  /** @default '' */\n  searchValue?: string;\n  searchPlaceholder?: string;\n  /** @default {} */\n  classNames?: Record<string, string>;\n  dropdownUp?: boolean;\n  buttonProps?: Extract<ButtonProps, { as?: 'button' }>;\n  dropdownProps?: React.ComponentPropsWithoutRef<'ul'>;\n  onChange: (value: SelectItem | typeof DEFAULT_SELECTED_OPTION) => void;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n  /**\n   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.\n   * DO NOT USE TOGETHER WITH `search` PROPERTY\n   */\n  onSearchChange?: (value: string) => void;\n}\n\nconst defaultClassNames = {};\n\n/**\n * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)\n */\nexport default function Select({\n  placeholder,\n  id,\n  required,\n  disabled,\n  inverse,\n  dropdownWidth,\n  size = 'md',\n  block = true,\n  selected,\n  search,\n  onChange,\n  onFocus,\n  onBlur,\n  options: defaultOptions,\n  onSearchChange,\n  searchValue: initSearchValue = '',\n  searchPlaceholder,\n  classNames: classNamesProp = defaultClassNames,\n  dropdownUp,\n  dropdownProps,\n  buttonProps,\n}: SelectProps) {\n  const inputAttributes = useInputAttributes();\n\n  const { formatMessage } = useIntl();\n  const s = (className: string) => classNamesProp[className] || className;\n  const [open, setOpen] = useState(false);\n  const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);\n  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(-1);\n  const keyboardFocusedReference = useRef<HTMLLIElement>(null);\n  const previousKeyboardFocusedOptionIndex = useRef(-1);\n  const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);\n  const searchBoxReference = useRef<HTMLInputElement>(null);\n  const selectReference = useRef<HTMLDivElement>(null);\n  const dropdownButtonReference = useRef<HTMLButtonElement>(null);\n  const optionsListReference = useRef<HTMLUListElement>(null);\n  const isSearchEnabled = !!onSearchChange || !!search;\n  const isDropdownAutoWidth = dropdownWidth == null;\n\n  const options = useMemo(() => {\n    if (!search || !searchValue) {\n      return defaultOptions;\n    }\n\n    return defaultOptions.filter(isSearchableOption).filter((option) => {\n      if (typeof search === 'function') {\n        return search(option, searchValue);\n      }\n      return defaultFilterFunction(option, searchValue);\n    });\n  }, [defaultOptions, search, searchValue]);\n\n  const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);\n  const focusedOption = selectableOptions[keyboardFocusedOptionIndex];\n\n  const fallbackButtonId = useId();\n  const computedId = id || inputAttributes.id || fallbackButtonId;\n  const listboxId = `${computedId}-listbox`;\n  const searchBoxId = `${computedId}-searchbox`;\n\n  const { isMobile } = useLayout();\n\n  useEffect(() => {\n    let cancelled = false;\n\n    if (keyboardFocusedOptionIndex >= 0) {\n      requestAnimationFrame(() => {\n        if (!cancelled) {\n          if (isSearchEnabled) {\n            keyboardFocusedReference.current?.scrollIntoView?.({ block: 'center' });\n          } else {\n            keyboardFocusedReference.current?.focus();\n          }\n        }\n      });\n\n      return () => {\n        cancelled = true;\n      };\n    }\n  }, [keyboardFocusedOptionIndex, isSearchEnabled]);\n\n  const handleOnClick = () => {\n    setOpen(true);\n  };\n\n  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {\n    if (event.currentTarget === event.target && open) {\n      handleCloseOptions();\n    }\n  };\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (event) => {\n    onFocus?.(event);\n  };\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {\n    const { nativeEvent } = event;\n    if (nativeEvent) {\n      const elementReceivingFocus = nativeEvent.relatedTarget;\n      const select = event.currentTarget;\n      if (\n        select &&\n        elementReceivingFocus instanceof Node &&\n        select.contains(elementReceivingFocus)\n      ) {\n        return;\n      }\n    }\n\n    onBlur?.(event);\n  };\n\n  const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);\n    setSearchValue(event.target.value);\n    onSearchChange?.(event.target.value);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        if (open) {\n          moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);\n        } else {\n          setOpen(true);\n        }\n        stopPropagation(event);\n        break;\n      case ' ':\n        if (event.target !== searchBoxReference.current) {\n          if (open) {\n            selectKeyboardFocusedOption();\n          } else {\n            setOpen(true);\n          }\n          stopPropagation(event);\n        }\n        break;\n      case 'Enter':\n        if (open) {\n          selectKeyboardFocusedOption();\n        } else {\n          setOpen(true);\n        }\n        stopPropagation(event);\n        break;\n      case 'Escape':\n        handleCloseOptions();\n        stopPropagation(event);\n        break;\n      case 'Tab':\n        if (open) {\n          selectKeyboardFocusedOption();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  function selectKeyboardFocusedOption() {\n    if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {\n      selectOption(selectableOptions[keyboardFocusedOptionIndex]);\n    }\n  }\n\n  function moveFocusWithDifference(difference: number) {\n    const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {\n      if (optionIndex >= 0) {\n        return optionIndex;\n      }\n      if (isOptionSelected(selected, current)) {\n        return index;\n      }\n      return -1;\n    }, -1);\n    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;\n    let indexToStartMovingFrom = previousFocusedIndex;\n    if (previousFocusedIndex < 0) {\n      if (selectedOptionIndex < 0) {\n        setKeyboardFocusedOptionIndex(0);\n      } else {\n        indexToStartMovingFrom = selectedOptionIndex;\n      }\n    }\n\n    const unClampedNewIndex = indexToStartMovingFrom + difference;\n    const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);\n\n    setKeyboardFocusedOptionIndex(newIndex);\n  }\n\n  useEffect(() => {\n    if (open) {\n      if (!isMobile || searchValue) {\n        if (isSearchEnabled && searchBoxReference.current) {\n          searchBoxReference.current.focus();\n        }\n        if (\n          !isSearchEnabled &&\n          optionsListReference.current &&\n          previousKeyboardFocusedOptionIndex.current < 0\n        ) {\n          optionsListReference.current.focus();\n        }\n      }\n\n      previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;\n    } else {\n      previousKeyboardFocusedOptionIndex.current = -1;\n    }\n  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);\n\n  const handleCloseOptions = () => {\n    setOpen(false);\n    setKeyboardFocusedOptionIndex(-1);\n    if (dropdownButtonReference.current) {\n      dropdownButtonReference.current.focus();\n    }\n  };\n\n  function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {\n    return (event: React.SyntheticEvent) => {\n      stopPropagation(event);\n      selectOption(option);\n    };\n  }\n\n  function selectOption(option: SelectItemWithPlaceholder) {\n    onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);\n    handleCloseOptions();\n  }\n\n  function renderOptionsList({ className = '' } = {}) {\n    const dropdownClass = clsx(\n      s('np-dropdown-menu'),\n      {\n        [s('np-dropdown-menu-desktop')]: !isMobile,\n        [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth,\n      },\n      s(className),\n    );\n\n    const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);\n    return (\n      <ul\n        ref={optionsListReference}\n        id={listboxId}\n        role=\"listbox\"\n        aria-orientation=\"vertical\"\n        aria-activedescendant={getUniqueIdForOption(id, selected ?? null)}\n        tabIndex={-1}\n        className={dropdownClass}\n        {...dropdownProps}\n      >\n        {showPlaceholder && <PlaceHolderOption />}\n        {isSearchEnabled && (\n          <SearchBox\n            ref={searchBoxReference}\n            id={searchBoxId}\n            classNames={classNamesProp}\n            value={initSearchValue || searchValue}\n            placeholder={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n            focusedOptionId={getUniqueIdForOption(id, focusedOption)}\n            onChange={handleSearchChange}\n            onClick={stopPropagation}\n          />\n        )}\n        {options.slice(0, numberOfOptionsShown).map(renderOption)}\n        {numberOfOptionsShown < options.length && <ShowMoreOption />}\n      </ul>\n    );\n  }\n\n  function ShowMoreOption() {\n    function handleOnClick(event: React.SyntheticEvent<HTMLLIElement>) {\n      stopPropagation(event);\n      setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);\n    }\n    return (\n      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n      <li\n        className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}\n        onClick={handleOnClick}\n        onKeyPress={handleOnClick}\n      >\n        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n        <a>...</a>\n      </li>\n    );\n  }\n\n  function PlaceHolderOption() {\n    const placeholderOption = { placeholder };\n    return (\n      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n      <li\n        className={clsx(s('clickable'), s('border-bottom'))}\n        onClick={createSelectHandlerForOption(placeholderOption)}\n        onKeyPress={createSelectHandlerForOption(placeholderOption)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n        <a>{placeholder}</a>\n      </li>\n    );\n  }\n\n  function SeparatorOption() {\n    return <li className={s('np-separator')} aria-hidden />;\n  }\n\n  function HeaderOption({ children }: { children?: React.ReactNode }) {\n    return (\n      <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions\n        className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}\n        onClick={stopPropagation}\n        onKeyPress={stopPropagation}\n      >\n        {children}\n      </li>\n    );\n  }\n\n  function isOptionSelected(selected: SelectOptionItem | undefined, option: SelectItem) {\n    return selected?.value === option?.value;\n  }\n\n  const renderOption = (option: SelectItem, index: number) => {\n    const separatorOption = option;\n    if (isSeparatorOption(separatorOption) && separatorOption?.separator) {\n      return <SeparatorOption key={index} />;\n    }\n    const headerOption = option;\n    if (isHeaderOption(headerOption) && headerOption.header) {\n      return <HeaderOption key={index}>{headerOption.header}</HeaderOption>;\n    }\n\n    const isActive = isOptionSelected(selected, option);\n    const selectOption = option;\n    const isFocusedWithKeyboard =\n      !selectOption.disabled &&\n      keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);\n\n    const className = clsx(\n      s('np-dropdown-item'),\n      selectOption.disabled ? [s('disabled')] : s('clickable'),\n      {\n        [s('active')]: isActive,\n        [s('np-dropdown-item--focused')]: isFocusedWithKeyboard,\n      },\n    );\n\n    const handleOnClick = selectOption.disabled\n      ? stopPropagation\n      : createSelectHandlerForOption(selectOption);\n\n    return (\n      <li\n        ref={isFocusedWithKeyboard ? keyboardFocusedReference : undefined}\n        key={index}\n        id={getUniqueIdForOption(id, option)}\n        aria-selected={isActive}\n        aria-disabled={option.disabled}\n        role=\"option\"\n        tabIndex={-1}\n        className={className}\n        onClick={handleOnClick}\n        onKeyPress={handleOnClick}\n      >\n        {/* @ts-expect-error options needs DOM refactoring */}\n        <a disabled={selectOption.disabled}>\n          <Option\n            label={undefined}\n            value={undefined}\n            {...selectOption}\n            classNames={classNamesProp}\n          />\n        </a>\n      </li>\n    );\n  };\n\n  function getIndexWithoutHeadersForIndexWithHeaders(index: number) {\n    return options.reduce((sum, option, currentIndex) => {\n      if (currentIndex < index && isActionableOption(option)) {\n        return sum + 1;\n      }\n      return sum;\n    }, 0);\n  }\n\n  const hasActiveOptions = !!defaultOptions.length;\n  if (open && (initSearchValue || searchValue)) {\n    if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {\n      setKeyboardFocusedOptionIndex(0);\n    }\n    if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {\n      setKeyboardFocusedOptionIndex(-1);\n    }\n  }\n\n  return (\n    <div // eslint-disable-line jsx-a11y/no-static-element-interactions\n      ref={selectReference}\n      className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}\n      onKeyDown={handleKeyDown}\n      onTouchMove={handleTouchStart}\n      onFocus={handleOnFocus}\n      onBlur={handleOnBlur}\n    >\n      <Button\n        ref={dropdownButtonReference}\n        {...inputAttributes}\n        id={computedId}\n        block={block}\n        size={size}\n        htmlType=\"button\"\n        className={clsx(\n          s('np-dropdown-toggle'),\n          s('np-text-body-large'),\n          inverse ? s('np-dropdown-toggle-navy') : null,\n        )}\n        // reset Button's styles\n        type={null}\n        priority={null}\n        disabled={disabled}\n        aria-controls={listboxId}\n        aria-expanded={open}\n        onClick={handleOnClick}\n        {...buttonProps}\n      >\n        {selected ? (\n          <Option label={undefined} {...selected} classNames={classNamesProp} selected />\n        ) : (\n          <span className={s('form-control-placeholder')}>{placeholder}</span>\n        )}\n        <Chevron\n          // disabled={disabled}\n          className={clsx(\n            s('tw-icon'),\n            s('tw-chevron-up-icon'),\n            s('tw-chevron'),\n            s('bottom'),\n            s('np-select-chevron'),\n          )}\n        />\n      </Button>\n      {isMobile ? (\n        isSearchEnabled ? (\n          <Drawer\n            open={open}\n            headerTitle={searchPlaceholder || formatMessage(messages.searchPlaceholder)}\n            onClose={handleCloseOptions}\n          >\n            {renderOptionsList()}\n          </Drawer>\n        ) : (\n          <BottomSheet open={open} onClose={handleCloseOptions}>\n            {renderOptionsList()}\n          </BottomSheet>\n        )\n      ) : (\n        <Panel\n          open={open}\n          altAxis\n          considerHeight\n          anchorRef={selectReference}\n          anchorWidth={isDropdownAutoWidth}\n          position={dropdownUp ? Position.TOP : Position.BOTTOM}\n          onClose={handleCloseOptions}\n        >\n          {renderOptionsList({ className: 'p-a-1' })}\n        </Panel>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_SEARCH_VALUE","DEFAULT_OPTIONS_PAGE_SIZE","includesString","string1","string2","toLowerCase","includes","defaultFilterFunction","option","searchValue","isPlaceholderOption","label","note","secondary","currency","searchStrings","some","string","isActionableOption","header","separator","disabled","isHeaderOption","isSeparatorOption","clamp","from","to","value","Math","max","min","DEFAULT_SELECTED_OPTION","isSearchableOption","getUniqueIdForOption","parentId","undefined","uniqueOptionId","replace","defaultClassNames","Select","placeholder","id","required","inverse","dropdownWidth","size","block","selected","search","onChange","onFocus","onBlur","options","defaultOptions","onSearchChange","initSearchValue","searchPlaceholder","classNames","classNamesProp","dropdownUp","dropdownProps","buttonProps","inputAttributes","useInputAttributes","formatMessage","useIntl","s","className","open","setOpen","useState","setSearchValue","keyboardFocusedOptionIndex","setKeyboardFocusedOptionIndex","keyboardFocusedReference","useRef","previousKeyboardFocusedOptionIndex","numberOfOptionsShown","setNumberOfOptionsShown","searchBoxReference","selectReference","dropdownButtonReference","optionsListReference","isSearchEnabled","isDropdownAutoWidth","useMemo","filter","selectableOptions","focusedOption","fallbackButtonId","useId","computedId","listboxId","searchBoxId","isMobile","useLayout","useEffect","cancelled","requestAnimationFrame","current","scrollIntoView","focus","handleOnClick","handleTouchStart","event","currentTarget","target","handleCloseOptions","handleOnFocus","handleOnBlur","nativeEvent","elementReceivingFocus","relatedTarget","select","Node","contains","handleSearchChange","handleKeyDown","key","moveFocusWithDifference","stopPropagation","selectKeyboardFocusedOption","length","selectOption","difference","selectedOptionIndex","reduce","optionIndex","index","isOptionSelected","previousFocusedIndex","indexToStartMovingFrom","unClampedNewIndex","newIndex","createSelectHandlerForOption","renderOptionsList","dropdownClass","clsx","showPlaceholder","Boolean","_jsxs","ref","role","tabIndex","children","_jsx","PlaceHolderOption","SearchBox","messages","focusedOptionId","onClick","slice","map","renderOption","ShowMoreOption","onKeyPress","placeholderOption","SeparatorOption","HeaderOption","separatorOption","headerOption","isActive","isFocusedWithKeyboard","getIndexWithoutHeadersForIndexWithHeaders","Option","sum","currentIndex","hasActiveOptions","onKeyDown","onTouchMove","Button","htmlType","type","priority","Chevron","Drawer","headerTitle","onClose","BottomSheet","Panel","altAxis","considerHeight","anchorRef","anchorWidth","position","Position","TOP","BOTTOM"],"mappings":"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"}

package/build/select/option/Option.js

@@ -25,6 +25,7 @@ require('../../common/propsValues/variant.js');
 require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../../common/closeButton/CloseButton.messages.js');

package/build/select/option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n  label: ReactNode;\n  value: T;\n  currency?: string;\n  note?: ReactNode;\n  secondary?: ReactNode;\n  icon?: ReactNode;\n  /** @deprecated */\n  classNames?: Record<string, string>;\n  selected?: boolean;\n  testId?: string;\n};\n\nfunction Option<T>({\n  label,\n  currency = '',\n  note = '',\n  secondary = '',\n  icon,\n  selected = false,\n  testId,\n}: Props<T>) {\n  const iconElement = icon\n    ? cloneElement(icon as ReactElement<IdIconProps>, {\n        size: 24,\n        className: 'tw-icon',\n      })\n    : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n  const titleAndNoteElement = (\n    <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n      {label}\n      {note && (\n        <Body as=\"span\" className=\"m-l-1\">\n          {note}\n        </Body>\n      )}\n    </Body>\n  );\n\n  const secondaryElement = secondary && (\n    <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n  );\n\n  return iconElement ? (\n    <div className=\"d-flex np-option-content\" data-testid={testId}>\n      <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n        {iconElement}\n      </div>\n      <div className=\"d-flex flex-column justify-content-center\">\n        {titleAndNoteElement}\n        {secondaryElement}\n      </div>\n    </div>\n  ) : (\n    <>\n      {iconElement}\n      {titleAndNoteElement}\n      {secondaryElement}\n    </>\n  );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA;AAAM,CACG,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,kBAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;GACZ,CAAC,GACFT,QAAQ,iBAAIU,cAAA,CAACC,QAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE;AAAG,GAAA,CAAG;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,eAAA,CAACC,YAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,cAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB;AAAI,KACD,CACP;AAAA,GACG,CACP;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,cAAA,CAACO,YAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,SAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB;AAAS,GAAO,CACtE;EAED,OAAOI,WAAW,gBAChBU,eAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAA,kBAAA,EAAqBL,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAG;AAAAmB,MAAAA,QAAA,EAC9EjB;KACE,CACL,eAAAU,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB;AAAA,KACd,CACP;AAAA,GAAK,CAAC,gBAENR,eAAA,CAAAU,mBAAA,EAAA;AAAAH,IAAAA,QAAA,EAAA,CACGjB,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB;AAAA,GACnB,CACD;AACH;;;;"}
+{"version":3,"file":"Option.js","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n  label: ReactNode;\n  value: T;\n  currency?: string;\n  note?: ReactNode;\n  secondary?: ReactNode;\n  icon?: ReactNode;\n  /** @deprecated */\n  classNames?: Record<string, string>;\n  selected?: boolean;\n  testId?: string;\n};\n\nfunction Option<T>({\n  label,\n  currency = '',\n  note = '',\n  secondary = '',\n  icon,\n  selected = false,\n  testId,\n}: Props<T>) {\n  const iconElement = icon\n    ? cloneElement(icon as ReactElement<IdIconProps>, {\n        size: 24,\n        className: 'tw-icon',\n      })\n    : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n  const titleAndNoteElement = (\n    <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n      {label}\n      {note && (\n        <Body as=\"span\" className=\"m-l-1\">\n          {note}\n        </Body>\n      )}\n    </Body>\n  );\n\n  const secondaryElement = secondary && (\n    <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n  );\n\n  return iconElement ? (\n    <div className=\"d-flex np-option-content\" data-testid={testId}>\n      <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n        {iconElement}\n      </div>\n      <div className=\"d-flex flex-column justify-content-center\">\n        {titleAndNoteElement}\n        {secondaryElement}\n      </div>\n    </div>\n  ) : (\n    <>\n      {iconElement}\n      {titleAndNoteElement}\n      {secondaryElement}\n    </>\n  );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA;AAAM,CACG,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,kBAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;GACZ,CAAC,GACFT,QAAQ,iBAAIU,cAAA,CAACC,QAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE;AAAG,GAAA,CAAG;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,eAAA,CAACC,YAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,cAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB;AAAI,KACD,CACP;AAAA,GACG,CACP;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,cAAA,CAACO,YAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,SAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB;AAAS,GAAO,CACtE;EAED,OAAOI,WAAW,gBAChBU,eAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAA,kBAAA,EAAqBL,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAG;AAAAmB,MAAAA,QAAA,EAC9EjB;KACE,CACL,eAAAU,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB;AAAA,KACd,CACP;AAAA,GAAK,CAAC,gBAENR,eAAA,CAAAU,mBAAA,EAAA;AAAAH,IAAAA,QAAA,EAAA,CACGjB,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB;AAAA,GACnB,CACD;AACH;;;;"}

package/build/select/option/Option.mjs

@@ -21,6 +21,7 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';

package/build/select/option/Option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.mjs","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n  label: ReactNode;\n  value: T;\n  currency?: string;\n  note?: ReactNode;\n  secondary?: ReactNode;\n  icon?: ReactNode;\n  /** @deprecated */\n  classNames?: Record<string, string>;\n  selected?: boolean;\n  testId?: string;\n};\n\nfunction Option<T>({\n  label,\n  currency = '',\n  note = '',\n  secondary = '',\n  icon,\n  selected = false,\n  testId,\n}: Props<T>) {\n  const iconElement = icon\n    ? cloneElement(icon as ReactElement<IdIconProps>, {\n        size: 24,\n        className: 'tw-icon',\n      })\n    : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n  const titleAndNoteElement = (\n    <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n      {label}\n      {note && (\n        <Body as=\"span\" className=\"m-l-1\">\n          {note}\n        </Body>\n      )}\n    </Body>\n  );\n\n  const secondaryElement = secondary && (\n    <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n  );\n\n  return iconElement ? (\n    <div className=\"d-flex np-option-content\" data-testid={testId}>\n      <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n        {iconElement}\n      </div>\n      <div className=\"d-flex flex-column justify-content-center\">\n        {titleAndNoteElement}\n        {secondaryElement}\n      </div>\n    </div>\n  ) : (\n    <>\n      {iconElement}\n      {titleAndNoteElement}\n      {secondaryElement}\n    </>\n  );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA;AAAM,CACG,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,YAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;GACZ,CAAC,GACFT,QAAQ,iBAAIU,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE;AAAG,GAAA,CAAG;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,GAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB;AAAI,KACD,CACP;AAAA,GACG,CACP;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,GAAA,CAACO,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,IAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB;AAAS,GAAO,CACtE;EAED,OAAOI,WAAW,gBAChBU,IAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAA,kBAAA,EAAqBL,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAG;AAAAmB,MAAAA,QAAA,EAC9EjB;KACE,CACL,eAAAU,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB;AAAA,KACd,CACP;AAAA,GAAK,CAAC,gBAENR,IAAA,CAAAU,QAAA,EAAA;AAAAH,IAAAA,QAAA,EAAA,CACGjB,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB;AAAA,GACnB,CACD;AACH;;;;"}
+{"version":3,"file":"Option.mjs","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n  label: ReactNode;\n  value: T;\n  currency?: string;\n  note?: ReactNode;\n  secondary?: ReactNode;\n  icon?: ReactNode;\n  /** @deprecated */\n  classNames?: Record<string, string>;\n  selected?: boolean;\n  testId?: string;\n};\n\nfunction Option<T>({\n  label,\n  currency = '',\n  note = '',\n  secondary = '',\n  icon,\n  selected = false,\n  testId,\n}: Props<T>) {\n  const iconElement = icon\n    ? cloneElement(icon as ReactElement<IdIconProps>, {\n        size: 24,\n        className: 'tw-icon',\n      })\n    : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n  const titleAndNoteElement = (\n    <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n      {label}\n      {note && (\n        <Body as=\"span\" className=\"m-l-1\">\n          {note}\n        </Body>\n      )}\n    </Body>\n  );\n\n  const secondaryElement = secondary && (\n    <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n  );\n\n  return iconElement ? (\n    <div className=\"d-flex np-option-content\" data-testid={testId}>\n      <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n        {iconElement}\n      </div>\n      <div className=\"d-flex flex-column justify-content-center\">\n        {titleAndNoteElement}\n        {secondaryElement}\n      </div>\n    </div>\n  ) : (\n    <>\n      {iconElement}\n      {titleAndNoteElement}\n      {secondaryElement}\n    </>\n  );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA;AAAM,CACG,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,YAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;GACZ,CAAC,GACFT,QAAQ,iBAAIU,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE;AAAG,GAAA,CAAG;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,GAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB;AAAI,KACD,CACP;AAAA,GACG,CACP;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,GAAA,CAACO,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,IAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB;AAAS,GAAO,CACtE;EAED,OAAOI,WAAW,gBAChBU,IAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAA,kBAAA,EAAqBL,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAG;AAAAmB,MAAAA,QAAA,EAC9EjB;KACE,CACL,eAAAU,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB;AAAA,KACd,CACP;AAAA,GAAK,CAAC,gBAENR,IAAA,CAAAU,QAAA,EAAA;AAAAH,IAAAA,QAAA,EAAA,CACGjB,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB;AAAA,GACnB,CACD;AACH;;;;"}

package/build/statusIcon/StatusIcon.js

@@ -24,6 +24,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('react');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -20,6 +20,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import 'react';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG;CACuB;AAE/C,MAAMC,UAAU,GAAGA,CAAC;EAClBC,EAAE;AACFC,EAAAA,SAAS,GAAG,SAAS;EACrBC,IAAI,EAAEC,QAAQ,GAAG,EAAE;AACnBC,EAAAA;AAAS,CACO,KAAI;AACpB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,MAAMC,mBAAmB,GAMrB;IACF,CAACC,SAAS,CAACC,QAAQ,GAAG;AACpBC,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU;KACzD;IACD,CAACP,SAAS,CAACQ,QAAQ,GAAG;AACpBN,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY;KAC3D;IACD,CAACV,SAAS,CAACW,OAAO,GAAG;AACnBT,MAAAA,IAAI,EAAEU,KAAK;AACXR,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACO,YAAY;KAC3D;IACD,CAACC,MAAM,CAACC,OAAO,GAAG;AAChBb,MAAAA,IAAI,EAAEc,eAAe;AACrBZ,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACW,YAAY;KAC3D;IACD,CAACjB,SAAS,CAACkB,OAAO,GAAG;AACnBhB,MAAAA,IAAI,EAAEiB,IAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACc,gBAAgB;KAC/D;AACD;IACA,CAACpB,SAAS,CAACqB,KAAK,GAAG;AACjBnB,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU;KACzD;IACD,CAACP,SAAS,CAACsB,IAAI,GAAG;AAChBpB,MAAAA,IAAI,EAAEiB,IAAI;AACVf,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACc,gBAAgB;KAC/D;IACD,CAACpB,SAAS,CAACuB,OAAO,GAAG;AACnBrB,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY;AAC3D;GACF;EACD,MAAM;IAAER,IAAI;AAAEE,IAAAA;AAAgB,GAAE,GAAGL,mBAAmB,CAACN,SAAS,CAAC;EAEjE,MAAM+B,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;AACxE,EAAA,MAAMjC,IAAI,GAAGT,aAAa,CAACU,QAAQ,CAAC,IAAIA,QAAQ;EAEhD,oBACEiC,GAAA,CAACC,MAAM,EAAA;IACLnC,IAAI,EAAE8B,cAAc,IAAI9B,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBoC,IAAAA,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAEtC,SAAS,CAAE;AAC5CD,IAAAA,EAAE,EAAEA,EAAG;IAAAwC,QAAA,eAEPJ,GAAA,CAAC1B,IAAI,EAAA;AACH4B,MAAAA,SAAS,EAAC,aAAa;MACvBG,KAAK,EAAErC,SAAS,KAAK,IAAI,GAAGsC,SAAS,GAAGtC,SAAS,IAAIQ;KAAiB;AAE1E,GAAQ,CAAC;AAEb;;;;"}

package/build/stepper/Stepper.js

@@ -23,6 +23,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');

package/build/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/stepper/Stepper.mjs

@@ -19,6 +19,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';

package/build/stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/sticky/Sticky.js

@@ -21,6 +21,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('clsx');
 require('react');

package/build/sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sticky.js","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
+{"version":3,"file":"Sticky.js","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}

package/build/sticky/Sticky.mjs

@@ -17,6 +17,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'clsx';
 import 'react';

package/build/sticky/Sticky.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sticky.mjs","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
+{"version":3,"file":"Sticky.mjs","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}