@transferwise/components 46.130.2 → 46.130.3

package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptionsContainer.d.ts","sourceRoot":"","sources":["../../../../../../src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gCAAiC,SAAQ,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC;IAC1F,4BAA4B,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;CAC9F;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,iJA+CtC,CAAC"}

package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { SelectInputOptionsContainer } from './SelectInputOptionsContainer';
+export type { SelectInputOptionsContainerProps } from './SelectInputOptionsContainer';
+//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/inputs/SelectInput/Options/OptionsContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC"}

package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts

@@ -0,0 +1,21 @@
+import { SelectInputProps } from '../SelectInput.types';
+/**
+ * Props for the SelectInputOptions component.
+ */
+export interface SelectInputOptionsProps<T = string> extends Pick<SelectInputProps<T>, 'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder' | 'id' | 'parentId' | 'compareValues' | 'sortFilteredOptions'> {
+    searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
+    listboxRef: React.MutableRefObject<HTMLDivElement | null>;
+    filterQuery: string;
+    onFilterChange: (query: string) => void;
+    listBoxLabel?: string;
+    listBoxLabelledBy?: string;
+    autocomplete?: string;
+    name?: string;
+    onAutocompleteSelect?: (value: T) => void;
+}
+/**
+ * The main options container component for SelectInput.
+ * Manages filtering, virtualisation, and rendering of options.
+ */
+export declare function SelectInputOptions<T = string>({ id, parentId, items, compareValues: compareValuesProp, renderValue, renderFooter, filterable, filterPlaceholder, sortFilteredOptions, searchInputRef, listboxRef, filterQuery, onFilterChange, listBoxLabel, listBoxLabelledBy, autocomplete, name, onAutocompleteSelect, }: SelectInputOptionsProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=SelectInputOptions.d.ts.map

package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptions.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/Options/SelectInputOptions.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAyB,gBAAgB,EAAmB,MAAM,sBAAsB,CAAC;AAMhG;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,IAAI,CAC/D,gBAAgB,CAAC,CAAC,CAAC,EACjB,OAAO,GACP,aAAa,GACb,cAAc,GACd,YAAY,GACZ,mBAAmB,GACnB,IAAI,GACJ,UAAU,GACV,eAAe,GACf,qBAAqB,CACxB;IACC,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,EAC7C,EAAE,EACF,QAAQ,EACR,KAAK,EACL,aAAa,EAAE,iBAAiB,EAChC,WAAoB,EACpB,YAAY,EACZ,UAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,IAAI,EACJ,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,CAAC,CAAC,+BA+U5B"}

package/build/types/inputs/SelectInput/Options/index.d.ts

@@ -0,0 +1,4 @@
+export { SelectInputOptions } from './SelectInputOptions';
+export type { SelectInputOptionsProps } from './SelectInputOptions';
+export * from './OptionsContainer';
+//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/Options/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/Options/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,cAAc,oBAAoB,CAAC"}

package/build/types/inputs/{_Popover.d.ts → SelectInput/Popover/SelectInputPopover.d.ts}

@@ -1,5 +1,5 @@
 import { type Placement } from '@floating-ui/react';
-export interface PopoverProps {
+export interface SelectInputPopoverProps {
     placement?: Placement;
     open: boolean;
     renderTrigger: (args: {
@@ -15,5 +15,5 @@ export interface PopoverProps {
     onClose?: () => void;
     onCloseEnd?: () => void;
 }
-export declare function Popover({ placement, open, renderTrigger, title, size, padding, children, onClose, onCloseEnd, }: PopoverProps): import("react").JSX.Element;
-//# sourceMappingURL=_Popover.d.ts.map
+export declare function SelectInputPopover({ placement, open, renderTrigger, title, size, padding, children, onClose, onCloseEnd, }: SelectInputPopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectInputPopover.d.ts.map

package/build/types/inputs/SelectInput/Popover/SelectInputPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputPopover.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/Popover/SelectInputPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,uBAAuB,+BAmFzB"}

package/build/types/inputs/SelectInput/Popover/index.d.ts

@@ -0,0 +1,3 @@
+export { SelectInputPopover } from './SelectInputPopover';
+export type { SelectInputPopoverProps } from './SelectInputPopover';
+//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+/**
+ * Context for passing props to the SelectInputTriggerButton component.
+ */
+export interface SelectInputTriggerButtonPropsContextValue {
+    ref?: React.ForwardedRef<HTMLButtonElement | null>;
+    id?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    size?: 'sm' | 'md' | 'lg';
+    [key: string]: unknown;
+}
+/**
+ * Context for passing props to the SelectInputTriggerButton component.
+ */
+export declare const SelectInputTriggerButtonPropsContext: React.Context<SelectInputTriggerButtonPropsContextValue>;
+/**
+ * Context for providing the total count of items in a SelectInput.
+ * Used for ARIA accessibility to inform screen readers about the total number of options.
+ */
+export declare const SelectInputItemsCountContext: React.Context<number | undefined>;
+/**
+ * Context for providing the current item position in a SelectInput.
+ * Used for ARIA accessibility to inform screen readers about the position of the option.
+ */
+export declare const SelectInputItemPositionContext: React.Context<number | undefined>;
+/**
+ * Context indicating whether an option's content is rendered within the trigger button.
+ * When true, certain styling adjustments are applied to make the content fit better in the trigger.
+ */
+export declare const SelectInputOptionContentWithinTriggerContext: React.Context<boolean>;
+export type { WithInputAttributesProps } from '../contexts';
+//# sourceMappingURL=SelectInput.contexts.d.ts.map

package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.contexts.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/SelectInput.contexts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,yCAAyC;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,oCAAoC,0DACa,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,4BAA4B,mCAA+C,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,mCAA+C,CAAC;AAE3F;;;GAGG;AACH,eAAO,MAAM,4CAA4C,wBAAuB,CAAC;AAGjF,YAAY,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC"}

package/build/types/inputs/SelectInput/SelectInput.d.ts

@@ -0,0 +1,10 @@
+import { SelectInputProps } from './SelectInput.types';
+/**
+ * SelectInput component allows users to select an option from a dropdown list.
+ * Supports filtering, multiple selection, and customization.
+ */
+export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, autocomplete, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, sortFilteredOptions, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
+export declare namespace SelectInput {
+    var sortByRelevance: typeof import("./SelectInput.utils").sortByRelevance;
+}
+//# sourceMappingURL=SelectInput.d.ts.map

package/build/types/inputs/SelectInput/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,EACjE,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAoB,EACpB,YAAY,EACZ,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,yBAAyB,EACzB,UAAU,EAAE,kBAAkB,EAC9B,cAAqB,EACrB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,+BAwMxB;yBAnOe,WAAW"}

package/build/types/inputs/SelectInput/SelectInput.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.messages.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/SelectInput.messages.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}

package/build/types/inputs/{SelectInput.d.ts → SelectInput/SelectInput.types.d.ts}

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-import { Merge } from '../utils';
-import { WithInputAttributesProps } from './contexts';
-import { ButtonProps } from '../button/Button.types';
+import React, { ReactNode } from 'react';
+import { ButtonProps } from '../../button/Button.types';
+import { WithInputAttributesProps } from './SelectInput.contexts';
 export interface SelectInputOptionItem<T = string> {
     type: 'option';
     value: T;
@@ -21,22 +20,6 @@ export interface SelectInputSeparatorItem {
     type: 'separator';
 }
 export type SelectInputItem<T = string> = SelectInputOptionItem<T> | SelectInputGroupItem<T> | SelectInputSeparatorItem;
-/**
- * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
- * Prioritizes: exact matches > starts with > contains > alphabetical.
- *
- * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
- *
- * @example
- * ```tsx
- * <SelectInput
- *   filterable
- *   sortFilteredOptions={sortByRelevance((value) => value.name)}
- *   // ...
- * />
- * ```
- */
-export declare function sortByRelevance<T>(getLabel?: (value: T) => string): (a: SelectInputOptionItem<T>, b: SelectInputOptionItem<T>, searchQuery: string) => number;
 export interface SelectInputProps<T = string, M extends boolean = false> {
     id?: string;
     /**
@@ -103,21 +86,12 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onClose?: () => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, autocomplete, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, sortFilteredOptions, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
-export declare namespace SelectInput {
-    var sortByRelevance: typeof import("./SelectInput").sortByRelevance;
-}
-type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
-export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
-    as?: T;
-}>;
-export declare function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({ as, ...restProps }: SelectInputTriggerButtonProps<T>): import("react").JSX.Element;
-export interface SelectInputOptionContentProps {
-    title: React.ReactNode;
-    note?: string;
-    description?: string;
-    icon?: React.ReactNode;
-}
-export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=SelectInput.d.ts.map
+export type { SelectInputTriggerButtonElementType, SelectInputTriggerButtonProps, } from './TriggerButton';
+export type { SelectInputClearButtonProps } from './ClearButton';
+export type { SelectInputOptionContentProps } from './OptionContent';
+export type { SelectInputOptionProps } from './Option';
+export type { SelectInputItemViewProps } from './ItemView';
+export type { SelectInputGroupItemViewProps } from './ItemView/GroupItemView';
+export type { SelectInputOptionsProps } from './Options';
+export type { SelectInputOptionsContainerProps } from './Options/OptionsContainer';
+//# sourceMappingURL=SelectInput.types.d.ts.map

package/build/types/inputs/SelectInput/SelectInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.types.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/SelectInput.types.ts"],"names":[],"mappings":"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"}

package/build/types/inputs/SelectInput/SelectInput.utils.d.ts

@@ -0,0 +1,60 @@
+import { SelectInputItem, SelectInputOptionItem } from './SelectInput.types';
+export declare const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+/**
+ * Converts a string to a normalized, searchable format by:
+ * - Trimming whitespace
+ * - Normalizing whitespace (convert multiple spaces to single space)
+ * - Converting to NFD normalization form to handle diacritics
+ * - Removing combining diacritical marks
+ * - Converting to lowercase
+ */
+export declare function searchableString(value: string): string;
+/**
+ * Extracts searchable strings from a value.
+ * - If the value is a string, returns a normalized version.
+ * - If the value is an object, extracts all string values and normalizes them.
+ * - Otherwise returns an empty array.
+ */
+export declare function inferSearchableStrings(value: unknown): string[];
+/**
+ * Sets the value of a duplicate option item to undefined, effectively hiding it when rendered.
+ */
+export declare function dedupeSelectInputOptionItem<T>(item: SelectInputOptionItem<T>, existingValues: Set<T>, compareValues?: (a: T, b: T) => boolean): SelectInputOptionItem<T | undefined>;
+/**
+ * Sets the `value` of duplicate option items to `undefined`, hiding them when
+ * rendered. Indexes are kept intact within groups to preserve the active item
+ * between filter changes when possible.
+ */
+export declare function dedupeSelectInputItems<T>(items: readonly SelectInputItem<T>[], compareValues?: (a: T, b: T) => boolean): SelectInputItem<T | undefined>[];
+/**
+ * Checks if a SelectInputOptionItem matches the search needle.
+ */
+export declare function selectInputOptionItemIncludesNeedle<T>(item: SelectInputOptionItem<T>, needle: string): boolean;
+/**
+ * Filters SelectInputItems based on the provided predicate function.
+ * For group items, it checks if any of their options match the predicate.
+ */
+export declare function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], predicate: (item: SelectInputOptionItem<T>) => boolean): SelectInputItem<T>[];
+/**
+ * Flattens and sorts filtered options using the provided comparator.
+ * Extracts all options from groups, filters out undefined values (deduplicated items),
+ * sorts them, and returns as a flat list of option items.
+ */
+export declare function sortSelectInputItems<T>(items: readonly SelectInputItem<T | undefined>[], compareFn: (a: SelectInputOptionItem<NonNullable<T>>, b: SelectInputOptionItem<NonNullable<T>>, searchQuery: string) => number, searchQuery: string): SelectInputItem<NonNullable<T>>[];
+/**
+ * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
+ * Prioritizes: exact matches > starts with > contains > alphabetical.
+ *
+ * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
+ *
+ * @example
+ * ```tsx
+ * <SelectInput
+ *   filterable
+ *   sortFilteredOptions={sortByRelevance((value) => value.name)}
+ *   // ...
+ * />
+ * ```
+ */
+export declare function sortByRelevance<T>(getLabel?: (value: T) => string): (a: SelectInputOptionItem<T>, b: SelectInputOptionItem<T>, searchQuery: string) => number;
+//# sourceMappingURL=SelectInput.utils.d.ts.map

package/build/types/inputs/SelectInput/SelectInput.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.utils.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/SelectInput.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE7E,eAAO,MAAM,gCAAgC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAW7C;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,YAYpD;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,EAC3C,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAC9B,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,EACtB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GACtC,qBAAqB,CAAC,CAAC,GAAG,SAAS,CAAC,CAUtC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACpC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GACtC,eAAe,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,CAoBlC;AAED;;GAEG;AACH,wBAAgB,mCAAmC,CAAC,CAAC,EACnD,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAC9B,MAAM,EAAE,MAAM,WAKf;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACpC,SAAS,EAAE,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,OAAO,wBAcvD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,EAChD,SAAS,EAAE,CACT,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACxC,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACxC,WAAW,EAAE,MAAM,KAChB,MAAM,EACX,WAAW,EAAE,MAAM,GAClB,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAiBnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,QAAQ,GAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAsD,GAC7E,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CA2B3F"}

package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts

@@ -0,0 +1,12 @@
+import { Merge } from '../../../utils';
+export type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
+export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
+    as?: T;
+}>;
+/**
+ * The trigger button component for SelectInput.
+ * Uses Headless UI's ListboxButton with polymorphic support to allow
+ * rendering as different element types.
+ */
+export declare function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({ as, ...restProps }: SelectInputTriggerButtonProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=SelectInputTriggerButton.d.ts.map

package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputTriggerButton.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,MAAM,mCAAmC,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;AAEjF,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,IACtD,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC"}

package/build/types/inputs/SelectInput/TriggerButton/index.d.ts

@@ -0,0 +1,3 @@
+export { SelectInputTriggerButton } from './SelectInputTriggerButton';
+export type { SelectInputTriggerButtonElementType, SelectInputTriggerButtonProps, } from './SelectInputTriggerButton';
+//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/TriggerButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/TriggerButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EACV,mCAAmC,EACnC,6BAA6B,GAC9B,MAAM,4BAA4B,CAAC"}

package/build/types/inputs/SelectInput/components.d.ts

@@ -0,0 +1,10 @@
+export * from './ClearButton';
+export * from './Option';
+export * from './OptionContent';
+export * from './TriggerButton';
+export * from './ItemView';
+export * from './Options';
+export * from './BottomSheet';
+export * from './Popover';
+export * from './ButtonInput';
+//# sourceMappingURL=components.d.ts.map

package/build/types/inputs/SelectInput/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/components.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/build/types/inputs/SelectInput/index.d.ts

@@ -0,0 +1,10 @@
+export * from './SelectInput';
+export * from './SelectInput.types';
+export * from './ClearButton';
+export * from './Option';
+export * from './OptionContent';
+export * from './TriggerButton';
+export * from './DefaultRenderTrigger';
+export * from './ItemView';
+export * from './Options';
+//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/package.json

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

package/src/index.ts

@@ -182,7 +182,6 @@ export {
   SelectInput,
   SelectInputOptionContent,
   SelectInputTriggerButton,
-  sortByRelevance,
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';

package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css

@@ -0,0 +1,96 @@
+.np-bottom-sheet-v2-container {
+  position: relative;
+  z-index: 1060;
+}
+.np-bottom-sheet-v2-backdrop {
+  position: fixed;
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
+}
+.np-bottom-sheet-v2 {
+  position: fixed;
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.np-bottom-sheet-v2-content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-bottom-sheet-v2-content:focus {
+  outline: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
+.np-bottom-sheet-v2-header {
+  align-self: flex-end;
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-bottom-sheet-v2-content-inner {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow: auto;
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.np-bottom-sheet-v2-content-inner--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+  padding-top: 0px;
+}
+.np-bottom-sheet-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-bottom-sheet-v2-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}

package/src/inputs/{_BottomSheet.tsx → SelectInput/BottomSheet/SelectInputBottomSheet.tsx}

@@ -12,12 +12,12 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
-import { CloseButton } from '../common/closeButton';
-import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
-import { PreventScroll } from '../common/preventScroll/PreventScroll';
-import { Size } from '../common/propsValues/size';
+import { CloseButton } from '../../../common/closeButton';
+import { useVirtualKeyboard } from '../../../common/hooks/useVirtualKeyboard';
+import { PreventScroll } from '../../../common/preventScroll/PreventScroll';
+import { Size } from '../../../common/propsValues/size';
 
-export interface BottomSheetProps {
+export interface SelectInputBottomSheetProps {
   open: boolean;
   renderTrigger?: (args: {
     ref: React.RefCallback<Element>;
@@ -33,7 +33,7 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
-export function BottomSheet({
+export function SelectInputBottomSheet({
   open,
   renderTrigger,
   title,
@@ -42,7 +42,7 @@ export function BottomSheet({
   children,
   onClose,
   onCloseEnd,
-}: BottomSheetProps) {
+}: SelectInputBottomSheetProps) {
   useVirtualKeyboard(open);
 
   const { refs, context } = useFloating<Element>({

package/src/inputs/SelectInput/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputBottomSheet } from './SelectInputBottomSheet';
+export type { SelectInputBottomSheetProps } from './SelectInputBottomSheet';

package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -0,0 +1,16 @@
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: 10px;
+  border-radius: var(--size-10);
+  text-align: start;
+}
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}

package/src/inputs/{_ButtonInput.tsx → SelectInput/ButtonInput/SelectInputButtonInput.tsx}

@@ -1,15 +1,15 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
-import { useInputPaddings } from './InputGroup';
-import { inputClassNameBase } from './_common';
+import { useInputPaddings } from '../../InputGroup';
+import { inputClassNameBase } from '../../_common';
 
-export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
+export interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {
   size?: 'sm' | 'md' | 'lg';
 }
 
-export const ButtonInput = forwardRef(function ButtonInput(
-  { size = 'md', className, style, ...restProps }: ButtonInputProps,
+export const SelectInputButtonInput = forwardRef(function ButtonInput(
+  { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,
   ref: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const inputPaddings = useInputPaddings();

package/src/inputs/SelectInput/ButtonInput/index.ts

@@ -0,0 +1,2 @@
+export { SelectInputButtonInput } from './SelectInputButtonInput';
+export type { SelectInputButtonInputProps } from './SelectInputButtonInput';

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css

@@ -0,0 +1,46 @@
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+}
+.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+}
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */;
+  /* TODO: Tokenize */
+}
+.np-select-input-addon--interactive {
+  pointer-events: auto;
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}
+.np-select-input-addon--interactive:hover {
+  color: #b5b7ba;
+  color: var(--color-interactive-secondary-hover);
+}
+.np-select-input-addon--interactive:focus {
+  outline: none;
+}
+.np-select-input-addon--interactive:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less

@@ -0,0 +1,39 @@
+@import (reference) "../../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-inline-start: var(--size-4);
+  }
+}
+
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: var(--size-24);
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */
+
+  &--interactive {
+    pointer-events: auto;
+    color: var(--color-interactive-secondary);
+
+    &:hover {
+      color: var(--color-interactive-secondary-hover);
+    }
+
+    .focus-ring();
+  }
+}
+
+.np-select-input-addon-separator {
+  height: var(--size-24);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}