@transferwise/components 0.0.0-experimental-05a786f → 0.0.0-experimental-278276c

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -2,10 +2,12 @@ import '@testing-library/jest-dom';
 import user from '@testing-library/user-event';
 
 import { Breakpoint } from '../common';
-import { render, screen, fireEvent } from '../test-utils';
+import { render, screen, fireEvent, mockMatchMedia } from '../test-utils';
 
 import DateLookup from '.';
 
+mockMatchMedia();
+
 jest.mock(
   '../dimmer',
   () =>

package/src/dateLookup/DateLookup.view.spec.js

@@ -1,5 +1,7 @@
 import { shallow } from 'enzyme';
 
+import { mockMatchMedia } from '../test-utils';
+
 import DateTrigger from './dateTrigger';
 import DayCalendar from './dayCalendar';
 import MonthCalendar from './monthCalendar';
@@ -7,6 +9,8 @@ import YearCalendar from './yearCalendar';
 
 import DateLookup from '.';
 
+mockMatchMedia();
+
 const defaultLocale = 'en-GB';
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>

package/src/dateLookup/dateHeader/DateHeader.js

@@ -1,8 +1,10 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
 import { Position, Size, Typography } from '../../common';
+import { useLayout } from '../../common/hooks';
 import Title from '../../title';
 import messages from '../DateLookup.messages';
 
@@ -10,9 +12,9 @@ const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold
 
 const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick, dateMode }) => {
   const intl = useIntl();
-
+  const { isMobile } = useLayout();
   return (
-    <div className="text-xs-center p-t-1 p-b-2 clearfix">
+    <div className={classNames('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
       <div className="pull-left-single-direction">
         <button
           type="button"

package/src/drawer/Drawer.css

@@ -1 +1 @@
-.np-drawer{display:flex;flex-direction:column;height:100vh;height:100dvh;justify-content:space-between;max-height:100vh;max-height:100dvh;max-width:600px;width:100vw}.np-drawer .np-drawer-header{display:flex;flex-wrap:nowrap;min-height:56px;min-height:var(--size-56);padding:24px 16px;padding:var(--size-24) var(--size-16)}.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}.np-theme-personal .np-drawer .np-drawer-header .np-text-title-body{margin-bottom:0;padding-top:0}.np-theme-personal .np-drawer .np-drawer-header .np-close-button{margin-bottom:-8px;margin-bottom:calc(var(--size-8)*-1);margin-right:-8px;margin-right:calc(var(--size-8)*-1);margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-drawer .np-drawer-header .np-text-title-body{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-bottom:-2px;margin-right:16px;margin-right:var(--size-16);padding-top:2px}.np-drawer .np-drawer-header .np-close-button{margin-left:auto}.np-drawer .np-drawer-header .tw-icon{fill:#00b9ff;cursor:pointer;display:block}.np-drawer .np-drawer-content{flex:1;overflow-y:auto}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer{padding:16px;padding:var(--size-16)}.np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}@media (min-width:768px){.np-drawer .np-drawer-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer,.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}}
+.np-drawer{display:flex;flex-direction:column;height:100vh;height:100dvh;justify-content:space-between;max-height:100vh;max-height:100dvh;max-width:600px;width:100vw}@media (max-width:770px){.np-drawer{max-width:unset}}.np-drawer .np-drawer-header{align-items:center;display:flex;flex-wrap:nowrap;min-height:56px;min-height:var(--size-56);padding:24px 16px;padding:var(--size-24) var(--size-16)}.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}@media (max-width:320px){.np-theme-personal .np-drawer .np-drawer-header{padding:16px;padding:var(--size-16)}}.np-theme-personal .np-drawer .np-drawer-header .np-close-button{margin-bottom:-8px;margin-bottom:calc(var(--size-8)*-1);margin-right:-8px;margin-right:calc(var(--size-8)*-1);margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-drawer .np-drawer-header .np-text-title-body{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-right:16px;margin-right:var(--size-16)}.np-drawer .np-drawer-header .np-close-button{margin-left:auto}.np-drawer .np-drawer-header .tw-icon{fill:#00b9ff;cursor:pointer;display:block}.np-drawer .np-drawer-content{flex:1;overflow-y:auto}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer{padding:16px;padding:var(--size-16)}.np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #e2e6e8}.np-theme-personal .np-drawer .np-drawer-footer{box-shadow:inset 0 1px 0 0 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}@media (min-width:768px){.np-drawer .np-drawer-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer,.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}}

package/src/drawer/Drawer.less

@@ -7,6 +7,9 @@
   justify-content: space-between;
   width: 100vw;
   max-width: 600px;
+  @media (max-width: 770px) {
+    max-width: unset;
+  }
   height: 100vh;
   height: 100dvh;
   max-height: 100vh;
@@ -14,16 +17,15 @@
 
   .np-drawer-header {
     display: flex;
+    align-items: center;
     flex-wrap: nowrap;
     min-height: var(--size-56);
     padding: var(--size-24) var(--size-16);
 
     .np-theme-personal & {
       padding: var(--size-24);
-
-      .np-text-title-body {
-        padding-top: 0;
-        margin-bottom: 0;
+      @media (--screen-400-zoom) {
+        padding: var(--size-16);
       }
 
       .np-close-button {
@@ -44,14 +46,10 @@
     }
 
     .np-text-title-body {
-      @vertical-alignment-shift: 2px;
-
       margin-right: var(--size-16);
       font-size: var(--font-size-18);
       letter-spacing: var(--letter-spacing-negative-xs);
       line-height: var(--line-height-24);
-      padding-top: @vertical-alignment-shift;
-      margin-bottom: -@vertical-alignment-shift;
     }
 
     .np-close-button {

package/src/drawer/Drawer.story.js

@@ -2,7 +2,8 @@ import { select } from '@storybook/addon-knobs';
 import { useState } from 'react';
 
 import { Section, Button, Input, Modal } from '..';
-import { Position } from '../common';
+import { Position, Priority } from '../common';
+import { storyConfig } from '../test-utils';
 
 import Drawer from './Drawer';
 
@@ -40,7 +41,10 @@ export const Basic = () => {
         footerContent={
           <>
             <Button block onClick={() => {}}>
-              Action
+              Action 1
+            </Button>
+            <Button block priority={Priority.SECONDARY} onClick={() => {}}>
+              Action 2
             </Button>
           </>
         }
@@ -77,6 +81,42 @@ export const Basic = () => {
             onClose={handleModalClose}
           />
         </Section>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
       </Drawer>
     </>
   );

package/src/flowNavigation/FlowNavigation.css

@@ -1 +1 @@
-.np-flow-navigation{min-height:97px;width:100%}.np-flow-navigation--border-bottom{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);min-height:96px}.np-flow-navigation__content{max-width:1164px;min-width:320px;width:100%}.np-flow-navigation__stepper{padding-bottom:0!important}[dir=rtl] .np-flow-navigation__stepper{padding-right:0!important}[dir=rtl] .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation__stepper{padding-left:0!important}html:not([dir=rtl]) .np-flow-navigation__stepper{padding-right:0!important}.np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps{display:none}.np-flow-navigation--xs-max .np-flow-navigation__stepper .progress{margin-bottom:0}.np-flow-navigation--xs-max .np-animated-label{height:auto}.np-flow-navigation--sm .np-flow-navigation__stepper{min-height:56px}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-left:24px!important}html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important}.np-flow-navigation--lg .np-flow-navigation__stepper{max-width:562px}.np-flow-navigation--lg .np-flow-header__left,.np-flow-navigation--lg .np-flow-header__right{width:180px}.np-flow-navigation .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);min-width:1px;width:1px}[dir=rtl] .np-flow-navigation .separator{margin-right:16px!important}[dir=rtl] .np-flow-navigation .separator,html:not([dir=rtl]) .np-flow-navigation .separator{margin-left:16px!important}html:not([dir=rtl]) .np-flow-navigation .separator{margin-right:16px!important}.np-flow-navigation--hidden{visibility:hidden}.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path,.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path{fill:var(--color-interactive-primary)}
+.np-flow-navigation{min-height:97px;width:100%}.np-flow-navigation--border-bottom{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);min-height:96px}.np-flow-navigation__content{max-width:1164px;min-width:320px;width:100%}.np-flow-navigation__stepper{padding-bottom:0!important}[dir=rtl] .np-flow-navigation__stepper{padding-right:0!important}[dir=rtl] .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation__stepper{padding-left:0!important}html:not([dir=rtl]) .np-flow-navigation__stepper{padding-right:0!important}.np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps{display:none}.np-flow-navigation--xs-max .np-flow-navigation__stepper .progress{margin-bottom:0}.np-flow-navigation--xs-max .np-animated-label{height:auto}.np-flow-navigation--sm .np-flow-navigation__stepper{min-height:56px}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-left:24px!important;padding-left:var(--size-24)!important}html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}.np-flow-navigation--lg .np-flow-navigation__stepper{max-width:562px}.np-flow-navigation--lg .np-flow-header__left,.np-flow-navigation--lg .np-flow-header__right{width:180px}.np-flow-navigation .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);min-width:1px;width:1px}[dir=rtl] .np-flow-navigation .separator{margin-right:16px!important;margin-right:var(--size-16)!important}[dir=rtl] .np-flow-navigation .separator,html:not([dir=rtl]) .np-flow-navigation .separator{margin-left:16px!important;margin-left:var(--size-16)!important}html:not([dir=rtl]) .np-flow-navigation .separator{margin-right:16px!important;margin-right:var(--size-16)!important}.np-flow-navigation--hidden{visibility:hidden}.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path,.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path{fill:var(--color-interactive-primary)}

package/src/i18n/en.json

@@ -18,7 +18,6 @@
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
-  "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/src/inputs/SelectInput.css

@@ -1 +1 @@
-.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.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:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.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-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.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:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{background-color:var(--color-interactive-primary)}.np-select-input-option-container--active.np-select-input-option-container--active *{color:#00a2dd;color:var(--color-interactive-accent)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{padding:0 4px;padding:0 var(--size-4)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option-check-placeholder{display:inline-block;margin-inline-start:16px;margin-inline-start:var(--size-16);width:16px;width:var(--size-16)}.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-within-trigger{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-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{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-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.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:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.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:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.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:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{background-color:var(--color-interactive-primary)}.np-select-input-option-container--active.np-select-input-option-container--active *{color:#00a2dd;color:var(--color-interactive-accent)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{padding:0 4px;padding:0 var(--size-4)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option-check-placeholder{display:inline-block;margin-inline-start:16px;margin-inline-start:var(--size-16);width:16px;width:var(--size-16)}.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-within-trigger{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-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{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-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.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:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -26,18 +26,6 @@
   }
 }
 
-.np-select-input-options-status {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  padding: var(--size-8) var(--size-24) 0px;
-}
-
-.np-select-input-options-status-icon {
-  padding: 0 var(--size-4);
-  color: var(--color-content-tertiary);
-}
-
 .np-select-input-query-container {
   display: flex;
   flex-direction: column;

package/src/inputs/SelectInput.tsx

@@ -1,6 +1,6 @@
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
-import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
+import { Check, ChevronDown, Cross } from '@transferwise/icons';
 import classNames from 'classnames';
 import mergeProps from 'merge-props';
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -11,13 +11,12 @@ import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides';
 import { Breakpoint } from '../common/propsValues/breakpoint';
-import dateTriggerMessages from '../dateLookup/dateTrigger/DateTrigger.messages';
+import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { wrapInFragment } from '../utilities/wrapInFragment';
 import { Merge } from '../utils';
 
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
-import messages from './SelectInput.messages';
 import { BottomSheet } from './_BottomSheet';
 import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
@@ -84,11 +83,14 @@ function dedupeSelectInputOptionItem<T>(
   item: SelectInputOptionItem<T>,
   existingValues: Set<T>,
 ): SelectInputOptionItem<T | undefined> {
-  if (!existingValues.has(item.value)) {
-    existingValues.add(item.value);
-    return item;
+  if (existingValues.has(item.value)) {
+    return {
+      ...item,
+      value: undefined,
+    };
   }
-  return { ...item, value: undefined };
+  existingValues.add(item.value);
+  return item;
 }
 
 function dedupeSelectInputItems<T>(
@@ -114,27 +116,6 @@ function dedupeSelectInputItems<T>(
   });
 }
 
-function filterSelectInputOptionItem<T>(item: SelectInputOptionItem<T>, needle: string) {
-  return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
-    haystack.includes(needle),
-  );
-}
-
-function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle: string) {
-  return items.filter((item) => {
-    switch (item.type) {
-      case 'option': {
-        return filterSelectInputOptionItem(item, needle);
-      }
-      case 'group': {
-        return item.options.some((option) => filterSelectInputOptionItem(option, needle));
-      }
-      default:
-    }
-    return false;
-  });
-}
-
 export interface SelectInputProps<T = string> {
   name?: string;
   placeholder?: string;
@@ -205,7 +186,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
   return (
     <button
       type="button"
-      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
+      aria-label={intl.formatMessage(messages.ariaLabel)}
       className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
       onClick={onClick}
     >
@@ -369,16 +350,9 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
       ref={ref}
       onKeyDown={(event) => {
         // Prevent absorbing dismissal requests too early
-        if (event.key === 'Escape') {
-          return;
-        }
-
-        // Prevent confirmation close without an active item
-        if (event.key === 'Enter' && ariaActiveDescendant == null) {
-          return;
+        if (event.key !== 'Escape') {
+          onKeyDown?.(event);
         }
-
-        onKeyDown?.(event);
       }}
       {...restProps}
     />
@@ -399,10 +373,6 @@ function SelectInputOptions<T = string>({
   searchInputRef,
   listboxRef,
 }: SelectInputOptionsProps<T>) {
-  const intl = useIntl();
-
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-
   const [query, setQuery] = useState('');
   const needle = useMemo(() => {
     if (filterable) {
@@ -410,7 +380,6 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterable, query]);
-  const empty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -422,10 +391,10 @@ function SelectInputOptions<T = string>({
     }
   }, []);
 
-  const showStatus = empty;
-  const statusId = useId();
   const listboxId = useId();
 
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -449,7 +418,6 @@ function SelectInputOptions<T = string>({
             placeholder={filterPlaceholder}
             value={query}
             aria-controls={listboxId}
-            aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
               // Prevent interfering with the matcher of Headless UI
               // https://mathiasbynens.be/notes/javascript-unicode#regex
@@ -472,13 +440,6 @@ function SelectInputOptions<T = string>({
             'np-select-input-listbox-container--has-group',
         )}
       >
-        {empty ? (
-          <div id={statusId} className="np-select-input-options-status">
-            <CrossCircle size={16} className="np-select-input-options-status-icon" />
-            {intl.formatMessage(messages.noResultsFound)}
-          </div>
-        ) : null}
-
         <div
           ref={listboxRef}
           id={listboxId}
@@ -487,7 +448,7 @@ function SelectInputOptions<T = string>({
           tabIndex={0}
           className="np-select-input-listbox"
         >
-          {(needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => (
+          {(needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => (
             <SelectInputItemView
               // eslint-disable-next-line react/no-array-index-key
               key={index}
@@ -517,7 +478,13 @@ function SelectInputItemView<T = string>({
 }: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
-      if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
+      if (
+        item.value != null &&
+        (!needle ||
+          inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
+            haystack.includes(needle),
+          ))
+      ) {
         return (
           <SelectInputOption value={item.value} disabled={item.disabled}>
             {renderValue(item.value, false)}

package/src/inputs/_BottomSheet.tsx

@@ -74,24 +74,24 @@ export function BottomSheet({
               setFloatingKey((prev) => prev + 1);
             }}
           >
-            <FocusBoundary>
+            <Transition.Child
+              enter="np-bottom-sheet-v2-backdrop-container--enter"
+              enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
+              leave="np-bottom-sheet-v2-backdrop-container--leave"
+              leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+            >
+              <div className="np-bottom-sheet-v2-backdrop" />
+            </Transition.Child>
+
+            <div className="np-bottom-sheet-v2">
               <Transition.Child
-                enter="np-bottom-sheet-v2-backdrop-container--enter"
-                enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
-                leave="np-bottom-sheet-v2-backdrop-container--leave"
-                leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+                className="np-bottom-sheet-v2-content"
+                enter="np-bottom-sheet-v2-content--enter"
+                enterFrom="np-bottom-sheet-v2-content--enter-from"
+                leave="np-bottom-sheet-v2-content--leave"
+                leaveTo="np-bottom-sheet-v2-content--leave-to"
               >
-                <div className="np-bottom-sheet-v2-backdrop" />
-              </Transition.Child>
-
-              <div className="np-bottom-sheet-v2">
-                <Transition.Child
-                  className="np-bottom-sheet-v2-content"
-                  enter="np-bottom-sheet-v2-content--enter"
-                  enterFrom="np-bottom-sheet-v2-content--enter-from"
-                  leave="np-bottom-sheet-v2-content--leave"
-                  leaveTo="np-bottom-sheet-v2-content--leave-to"
-                >
+                <FocusBoundary>
                   <FloatingFocusManager
                     context={context}
                     initialFocus={initialFocusRef}
@@ -130,9 +130,9 @@ export function BottomSheet({
                       </div>
                     </div>
                   </FloatingFocusManager>
-                </Transition.Child>
-              </div>
-            </FocusBoundary>
+                </FocusBoundary>
+              </Transition.Child>
+            </div>
           </Transition>
         </ThemeProvider>
       </FloatingPortal>