@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec

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

@@ -1,41 +0,0 @@
-/// <reference types="react" />
-interface SelectInputOptionItem<T = string> {
-    type: 'option';
-    value: T;
-    filterMatchers?: readonly string[];
-    disabled?: boolean;
-}
-interface SelectInputGroupItem<T = string> {
-    type: 'group';
-    label: string;
-    options: readonly SelectInputOptionItem<T>[];
-}
-interface SelectInputSeparatorItem {
-    type: 'separator';
-}
-export type SelectInputItem<T = string> = SelectInputOptionItem<T> | SelectInputGroupItem<T> | SelectInputSeparatorItem;
-export interface SelectInputProps<T = string> {
-    name?: string;
-    placeholder?: string;
-    items: readonly SelectInputItem<NonNullable<T>>[];
-    defaultValue?: T;
-    value?: T;
-    renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
-    compareValues?: (keyof NonNullable<T> & string) | ((a: T | undefined, b: T | undefined) => boolean);
-    filterable?: boolean;
-    filterPlaceholder?: string;
-    disabled?: boolean;
-    className?: string;
-    onChange?: (value: T) => void;
-    onClear?: () => void;
-}
-export declare function SelectInput<T>({ name, placeholder, items, defaultValue, value: controlledValue, renderValue, compareValues, filterable, filterPlaceholder, disabled, className, onChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
-export interface SelectInputOptionContentProps {
-    title: string;
-    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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":";AA0CA,UAAU,qBAAqB,CAAC,CAAC,GAAG,MAAM;IACxC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,CAAC,CAAC;IACT,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,oBAAoB,CAAC,CAAC,GAAG,MAAM;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CAC9C;AAED,UAAU,wBAAwB;IAChC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAClC,qBAAqB,CAAC,CAAC,CAAC,GACxB,oBAAoB,CAAC,CAAC,CAAC,GACvB,wBAAwB,CAAC;AAuC7B,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,EAAE,SAAS,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,aAAa,CAAC,EACV,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAC/B,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,WAA4B,EAC5B,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA2GrB;AA2QD,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GACL,EAAE,6BAA6B,+BA4C/B"}

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

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-export interface BottomSheetProps {
-    open: boolean;
-    renderTrigger?: (args: {
-        ref: React.RefCallback<Element>;
-        getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
-            [key: string]: unknown;
-        };
-    }) => React.ReactNode;
-    title?: string;
-    initialFocusRef?: React.RefObject<HTMLElement>;
-    padding?: 'none' | 'md';
-    children?: React.ReactNode;
-    onClose?: () => void;
-}
-export declare function BottomSheet({ open, renderTrigger, title, initialFocusRef, padding, children, onClose, }: BottomSheetProps): import("react").JSX.Element;
-//# sourceMappingURL=_BottomSheet.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,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,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAwFlB"}

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare const ButtonInput: import("react").ForwardRefExoticComponent<Omit<ButtonInputProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=_ButtonInput.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"_ButtonInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/_ButtonInput.tsx"],"names":[],"mappings":";AAMA,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC;IAC7E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,6HAgBtB,CAAC"}

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { type Side } from '@floating-ui/react';
-export interface PopoverProps {
-    placement?: Side;
-    open: boolean;
-    renderTrigger: (args: {
-        ref: React.RefCallback<Element>;
-        getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
-            [key: string]: unknown;
-        };
-    }) => React.ReactNode;
-    title?: string;
-    padding?: 'none' | 'md';
-    children?: React.ReactNode;
-    onClose?: () => void;
-}
-export declare function Popover({ placement, open, renderTrigger, title, padding, children, onClose, }: PopoverProps): import("react").JSX.Element;
-//# sourceMappingURL=_Popover.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;AAO5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,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,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BAwEd"}

package/build/types/utilities/wrapInFragment.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function wrapInFragment(value: unknown): import("react").JSX.Element;
-//# sourceMappingURL=wrapInFragment.d.ts.map

package/build/types/utilities/wrapInFragment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrapInFragment.d.ts","sourceRoot":"","sources":["../../../src/utilities/wrapInFragment.tsx"],"names":[],"mappings":";AAAA,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,+BAE5C"}

package/src/common/hooks/useMedia.spec.ts

@@ -1,39 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-
-import { useMedia } from './useMedia';
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query: string) => {
-    const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-    const minWidth = matches != null ? Number(matches[1]) : undefined;
-    return {
-      matches: minWidth != null ? window.innerWidth >= minWidth : false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    };
-  }),
-});
-
-describe('useMedia', () => {
-  it('tracks changes of window size', () => {
-    const { result, rerender } = renderHook(() => useMedia('(min-width: 1024px)'));
-
-    window.innerWidth = 1920;
-    rerender();
-    expect(result.current).toBeTruthy();
-
-    window.innerWidth = 1024;
-    rerender();
-    expect(result.current).toBeTruthy();
-
-    window.innerWidth = 800;
-    rerender();
-    expect(result.current).toBeFalsy();
-  });
-});

package/src/common/hooks/useMedia.ts

@@ -1,15 +0,0 @@
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-
-export function useMedia(query: string) {
-  return useSyncExternalStore(
-    (onStoreChange) => {
-      const mediaQueryList = window.matchMedia(query);
-      mediaQueryList.addEventListener('change', onStoreChange);
-      return () => {
-        mediaQueryList.removeEventListener('change', onStoreChange);
-      };
-    },
-    () => (typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined),
-    () => undefined,
-  );
-}

package/src/common/hooks/useScreenSize.ts

@@ -1,7 +0,0 @@
-import { Breakpoint } from '../propsValues/breakpoint';
-
-import { useMedia } from './useMedia';
-
-export function useScreenSize(size: Breakpoint) {
-  return useMedia(`(min-width: ${size}px)`);
-}

package/src/common/preventScroll/PreventScroll.tsx

@@ -1,6 +0,0 @@
-import { usePreventScroll } from '@react-aria/overlays';
-
-export function PreventScroll() {
-  usePreventScroll();
-  return null;
-}

package/src/inputs/SearchInput.story.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { SearchInput } from './SearchInput';
-
-export default {
-  component: SearchInput,
-  title: 'Forms/SearchInput',
-} satisfies Meta<typeof SearchInput>;
-
-type Story = StoryObj<typeof SearchInput>;
-
-export const Basic: Story = {
-  render: (args) => <SearchInputBasic {...args} />,
-  args: {
-    size: 'md',
-    shape: 'pill',
-    disabled: false,
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-  },
-};
-
-function SearchInputBasic({ onChange, ...restProps }: NonNullable<Story['args']>) {
-  const [value, setValue] = useState('Text value');
-
-  return (
-    <SearchInput
-      {...restProps}
-      value={value}
-      onChange={(event) => {
-        setValue(event.currentTarget.value);
-        onChange?.(event);
-      }}
-    />
-  );
-}

package/src/inputs/SearchInput.tsx

@@ -1,35 +0,0 @@
-import { Search } from '@transferwise/icons';
-import { forwardRef } from 'react';
-
-import { Merge } from '../utils';
-
-import { Input } from './Input';
-import { InputGroup } from './InputGroup';
-
-export interface SearchInputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: 'sm' | 'md';
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
-
-export const SearchInput = forwardRef(function SearchInput(
-  { shape = 'pill', disabled, className, ...restProps }: SearchInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
-  return (
-    <InputGroup
-      addonStart={{
-        content: <Search size={24} />,
-        initialContentWidth: 24,
-      }}
-      disabled={disabled}
-      className={className}
-    >
-      <Input ref={ref} role="searchbox" inputMode="search" shape={shape} {...restProps} />
-    </InputGroup>
-  );
-});

package/src/inputs/SelectInput.css

@@ -1 +0,0 @@
-.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.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{border-inline-start-width:1px;height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -1,183 +0,0 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.np-select-input-placeholder {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-content-tertiary);
-}
-
-.np-select-input-options-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-
-  &:focus {
-    outline: none;
-  }
-
-  @media (--screen-sm) {
-    & {
-      max-height: 28rem /* 448px */;
-    }
-  }
-}
-
-.np-select-input-query-container {
-  display: flex;
-  flex-direction: column;
-  padding: var(--size-8);
-  padding-top: 0px;
-
-  @media (--screen-sm) {
-    & {
-      padding-top: var(--size-8);
-    }
-  }
-}
-
-.np-select-input-listbox-container {
-  position: relative;
-  height: var(--initial-height);
-  scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: var(--size-8);
-  overflow-y: auto;
-
-  @media (--screen-sm) {
-    & {
-      height: auto;
-    }
-  }
-
-  &--has-group {
-    scroll-padding-top: var(--size-32);
-  }
-}
-
-.np-select-input-listbox {
-  padding: var(--size-8);
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.np-select-input-separator-item {
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-
-.np-select-input-group-item {
-  &--without-needle:first-child {
-    margin-top: calc(-1 * var(--size-8));
-  }
-}
-
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: var(--color-background-elevated);
-  padding: var(--size-8) var(--size-16) var(--size-4);
-  color: var(--color-content-secondary);
-}
-
-.np-select-input-option-container {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  border-radius: var(--radius-small);
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-content-primary);
-
-  &--active {
-    background-color: var(--color-background-screen-hover);
-  }
-
-  &--disabled {
-    opacity: 0.45;
-  }
-}
-
-.np-select-input-option-check {
-  &--not-selected {
-    visibility: hidden;
-  }
-}
-
-.np-select-input-option {
-  flex: 1;
-}
-
-.np-select-input-option-content-container {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  color: var(--color-content-primary);
-}
-
-.np-select-input-option-content-icon {
-  display: flex;
-
-  &--not-compact {
-    align-self: flex-start;
-  }
-}
-
-.np-select-input-option-content-text {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.np-select-input-option-content-text-secondary {
-  color: var(--color-content-secondary);
-}
-
-.np-select-input-option-content-text-compact {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.np-select-input-option-content-text-line-1 {
-  > :not([hidden]) ~ :not([hidden]) {
-    margin-right: var(--size-8);
-    margin-left: var(--size-8);
-  }
-}
-
-.np-select-input-addon-container {
-  pointer-events: none;
-  display: inline-flex;
-  align-items: center;
-}
-
-.np-select-input-addon {
-  border-width: 0;
-  background: none;
-
-  display: inline-flex;
-  height: var(--size-32);
-  width: var(--size-32);
-  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-width: 1px;
-}

package/src/inputs/SelectInput.spec.tsx

@@ -1,120 +0,0 @@
-import { act, screen, within } from '@testing-library/react';
-import userEvent, { specialChars } from '@testing-library/user-event';
-
-import { render } from '../test-utils';
-
-import { SelectInput } from './SelectInput';
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn((query: string) => {
-    const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-    const minWidth = matches != null ? Number(matches[1]) : undefined;
-    return {
-      matches: minWidth != null ? window.innerWidth >= minWidth : false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    };
-  }),
-});
-
-Object.defineProperty(window, 'ResizeObserver', {
-  writable: true,
-  value: jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-  })),
-});
-
-describe('SelectInput', () => {
-  it('renders placeholder', () => {
-    render(
-      <SelectInput
-        placeholder="Currency"
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-      />,
-    );
-
-    expect(screen.getByText('Currency')).toBeInTheDocument();
-  });
-
-  it('shows item selected via mouse', async () => {
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'USD' },
-          { type: 'option', value: 'EUR' },
-        ]}
-      />,
-    );
-
-    expect(screen.queryByText('EUR')).not.toBeInTheDocument();
-
-    const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
-
-    const listbox = screen.getByRole('listbox');
-    const option = within(listbox).getByRole('option', { name: 'EUR' });
-    userEvent.click(option);
-
-    expect(trigger).toHaveTextContent('EUR');
-  });
-
-  it('filters items via keyboard', async () => {
-    render(
-      <SelectInput
-        items={[
-          {
-            type: 'group',
-            label: 'Popular currencies',
-            options: [
-              { type: 'option', value: 'USD' },
-              { type: 'option', value: 'EUR' },
-              { type: 'option', value: 'GBP' },
-            ],
-          },
-        ]}
-        filterable
-      />,
-    );
-
-    const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(specialChars.enter);
-    });
-
-    const listbox = screen.getByRole('listbox');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(3);
-
-    userEvent.keyboard('u');
-    expect(within(listbox).getAllByRole('option')).toHaveLength(2);
-
-    userEvent.keyboard('r');
-    expect(within(listbox).getByRole('option')).toBeInTheDocument();
-
-    userEvent.keyboard('x');
-    expect(within(listbox).queryByRole('option')).not.toBeInTheDocument();
-
-    userEvent.keyboard(specialChars.backspace);
-    expect(within(listbox).getByRole('option')).toBeInTheDocument();
-
-    const option = within(listbox).getAllByRole('option')[0];
-    userEvent.click(option);
-
-    expect(trigger).toHaveTextContent('EUR');
-  });
-});