@transferwise/components 45.20.0 → 45.21.0

package/src/common/propsValues/breakpoint.ts

@@ -1,4 +1,5 @@
 export enum Breakpoint {
+  ZOOM_400 = 320,
   EXTRA_SMALL = 480,
   SMALL = 576,
   MEDIUM = 768,

package/src/dateLookup/DateLookup.css

@@ -1 +1 @@
-.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container{display:inline-block}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
+.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container{display:inline-block}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}

package/src/dateLookup/DateLookup.js

@@ -1,7 +1,8 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { createRef, PureComponent } from 'react';
 
-import { Size, MonthFormat, Position } from '../common';
+import { Size, MonthFormat, Position, Breakpoint } from '../common';
 import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
 import KeyCodes from '../common/keyCodes';
 import ResponsivePanel from '../common/responsivePanel';
@@ -33,6 +34,7 @@ class DateLookup extends PureComponent {
       viewYear: (props.value || new Date()).getFullYear(),
       open: false,
       mode: MODE.DAY,
+      isMobile: false,
     };
   }
 
@@ -63,6 +65,8 @@ class DateLookup extends PureComponent {
     if (+this.props.value !== +previousProps.value && this.state.open) {
       this.focusOn('.active');
     }
+    this.mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
+    this.setState({ isMobile: this.mediaQuery.matches });
   }
 
   componentWillUnmount() {
@@ -183,10 +187,10 @@ class DateLookup extends PureComponent {
   };
 
   getCalendar = () => {
-    const { selectedDate, min, max, viewMonth, viewYear, mode } = this.state;
+    const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;
     const { placeholder, monthFormat } = this.props;
     return (
-      <div className="p-a-1">
+      <div className={classNames({ 'p-a-1': !isMobile })}>
         {mode === MODE.DAY && (
           <DayCalendar
             {...{ selectedDate, min, max, viewMonth, viewYear, monthFormat }}

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

@@ -3,9 +3,12 @@ import { mount } from 'enzyme';
 
 import { fakeKeyDownEventForKey } from '../common/fakeEvents';
 import KEY_CODES from '../common/keyCodes';
+import { mockMatchMedia } from '../test-utils';
 
 import DateLookup from '.';
 
+mockMatchMedia();
+
 const defaultLocale = 'en-GB';
 const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({

package/src/dateLookup/DateLookup.less

@@ -11,10 +11,16 @@
 
   > tbody > tr > td {
     padding: var(--size-4);
+    @media (--screen-400-zoom) {
+      padding: 0;
+    }
 
     button {
       width: 100%;
       padding: var(--size-4) 0;
+      @media (--screen-400-zoom) {
+        padding: 0;
+      }
       color: var(--color-content-accent);
       border: transparent;
       border-radius: var(--radius-small);

package/src/dateLookup/DateLookup.story.js

@@ -2,7 +2,7 @@ import { boolean, select, date, text } from '@storybook/addon-knobs';
 import { useState } from 'react';
 
 import { Size } from '../common';
-import { within, userEvent } from '../test-utils';
+import { within, userEvent, storyConfig } from '../test-utils';
 
 import DateLookup from './DateLookup';
 
@@ -47,6 +47,11 @@ Basic.play = ({ canvasElement }) => {
   userEvent.click(canvas.getByRole('button'));
 };
 
+export const Basic400Zoom = storyConfig(
+  { render: Basic, play: Basic.play, parameters: { chromatic: { delay: 2000 } } },
+  { variants: ['400%'] },
+);
+
 export const RightAligned = () => {
   const [value, setValue] = useState(null);
   const disabled = boolean('disabled', false);

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/cs.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "načítání",
   "neptune.Chips.ariaLabel": "Vyčistit {choice}",
   "neptune.ClearButton.ariaLabel": "Vyčistit",
   "neptune.CloseButton.ariaLabel": "Zavřít",
   "neptune.DateInput.day.label": "Den",
   "neptune.DateInput.month.label": "Měsíc",
   "neptune.DateInput.year.label": "Rok",
+  "neptune.DateLookup.day": "den",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "měsíc",
+  "neptune.DateLookup.next": "další",
+  "neptune.DateLookup.previous": "předchozí",
+  "neptune.DateLookup.selected": "vybráno",
+  "neptune.DateLookup.twentyYears": "20 let",
+  "neptune.DateLookup.year": "rok",
+  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
-  "neptune.Pagination.ariaLabel": "Navigace v Pagination",
-  "neptune.PaginationLink.ariaLabel.active": "Přejít na stránku {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Současná stránka, stránka {pageNumber}",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.Summary.statusDone": "Položka dokončena",
   "neptune.Summary.statusNotDone": "Položka k dokončení",

package/src/i18n/de.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "wird geladen",
   "neptune.Chips.ariaLabel": "{choice} zurücksetzen",
   "neptune.ClearButton.ariaLabel": "Zurücksetzen",
   "neptune.CloseButton.ariaLabel": "Schließen",
   "neptune.DateInput.day.label": "Tag",
   "neptune.DateInput.month.label": "Monat",
   "neptune.DateInput.year.label": "Jahr",
+  "neptune.DateLookup.day": "Tag",
+  "neptune.DateLookup.goTo20YearView": "Zur 20-Jahres-Ansicht",
+  "neptune.DateLookup.month": "Monat",
+  "neptune.DateLookup.next": "weiter",
+  "neptune.DateLookup.previous": "zurück",
+  "neptune.DateLookup.selected": "ausgewählt",
+  "neptune.DateLookup.twentyYears": "20 Jahre",
+  "neptune.DateLookup.year": "Jahr",
+  "neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",
+  "neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
   "neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
-  "neptune.Pagination.ariaLabel": "Seitennummer-Navigation",
-  "neptune.PaginationLink.ariaLabel.active": "Weiter zur Seite {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Aktuelle Seite – Seite {pageNumber}",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",

package/src/i18n/en.json

@@ -18,6 +18,7 @@
   "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/i18n/es.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "cargando",
   "neptune.Chips.ariaLabel": "Descartar {choice}",
   "neptune.ClearButton.ariaLabel": "Borrar",
   "neptune.CloseButton.ariaLabel": "Cerrar",
   "neptune.DateInput.day.label": "Día",
   "neptune.DateInput.month.label": "Mes",
   "neptune.DateInput.year.label": "Año",
+  "neptune.DateLookup.day": "día",
+  "neptune.DateLookup.goTo20YearView": "Ir a vista de 20 años",
+  "neptune.DateLookup.month": "mes",
+  "neptune.DateLookup.next": "siguiente",
+  "neptune.DateLookup.previous": "anterior",
+  "neptune.DateLookup.selected": "seleccionado",
+  "neptune.DateLookup.twentyYears": "20 años",
+  "neptune.DateLookup.year": "año",
+  "neptune.FlowNavigation.back": "volver al paso anterior",
+  "neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
   "neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
-  "neptune.Pagination.ariaLabel": "Navegación por las páginas",
-  "neptune.PaginationLink.ariaLabel.active": "Ve a la página {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Página actual, página {pageNumber}",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",

package/src/i18n/fr.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "chargement",
   "neptune.Chips.ariaLabel": "Effacer {choice}",
   "neptune.ClearButton.ariaLabel": "Effacer",
   "neptune.CloseButton.ariaLabel": "Fermer",
   "neptune.DateInput.day.label": "Jour",
   "neptune.DateInput.month.label": "Mois",
   "neptune.DateInput.year.label": "Année",
+  "neptune.DateLookup.day": "jour",
+  "neptune.DateLookup.goTo20YearView": "Accéder à la vue sur 20 ans",
+  "neptune.DateLookup.month": "mois",
+  "neptune.DateLookup.next": "suivant",
+  "neptune.DateLookup.previous": "précédent",
+  "neptune.DateLookup.selected": "sélectionnée",
+  "neptune.DateLookup.twentyYears": "20 ans",
+  "neptune.DateLookup.year": "année",
+  "neptune.FlowNavigation.back": "revenir à l'étape précédente",
+  "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
-  "neptune.Pagination.ariaLabel": "Navigation par pagination",
-  "neptune.PaginationLink.ariaLabel.active": "Aller à la page {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Page actuelle, page {pageNumber}",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",

package/src/i18n/hu.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "betöltés",
   "neptune.Chips.ariaLabel": "{choice} törlése",
   "neptune.ClearButton.ariaLabel": "Törlés",
   "neptune.CloseButton.ariaLabel": "Bezárás",
   "neptune.DateInput.day.label": "Nap",
   "neptune.DateInput.month.label": "Hónap",
   "neptune.DateInput.year.label": "Év",
+  "neptune.DateLookup.day": "nap",
+  "neptune.DateLookup.goTo20YearView": "Ugrás a 20 éves nézetre",
+  "neptune.DateLookup.month": "hónap",
+  "neptune.DateLookup.next": "következő",
+  "neptune.DateLookup.previous": "előző",
+  "neptune.DateLookup.selected": "kiválasztva",
+  "neptune.DateLookup.twentyYears": "20 év",
+  "neptune.DateLookup.year": "év",
+  "neptune.FlowNavigation.back": "vissza az előző lépéshez",
+  "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
-  "neptune.Pagination.ariaLabel": "Lapszámos navigáció",
-  "neptune.PaginationLink.ariaLabel.active": "Ugrás a(z) {pageNumber}. oldalra",
-  "neptune.PaginationLink.ariaLabel.inactive": "Jelenlegi oldal, {pageNumber}. oldal",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",

package/src/i18n/id.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "memuat",
   "neptune.Chips.ariaLabel": "Hapus {choice}",
   "neptune.ClearButton.ariaLabel": "Hapus",
   "neptune.CloseButton.ariaLabel": "Tutup",
   "neptune.DateInput.day.label": "Hari",
   "neptune.DateInput.month.label": "Bulan",
   "neptune.DateInput.year.label": "Tahun",
+  "neptune.DateLookup.day": "hari",
+  "neptune.DateLookup.goTo20YearView": "Lihat tampilan 20 tahun",
+  "neptune.DateLookup.month": "bulan",
+  "neptune.DateLookup.next": "berikutnya",
+  "neptune.DateLookup.previous": "sebelumnya",
+  "neptune.DateLookup.selected": "terpilih",
+  "neptune.DateLookup.twentyYears": "20 tahun",
+  "neptune.DateLookup.year": "tahun",
+  "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
+  "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
-  "neptune.Pagination.ariaLabel": "Halaman navigasi",
-  "neptune.PaginationLink.ariaLabel.active": "Lanjut ke halaman {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Halaman saat ini, halaman {pageNumber}",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",

package/src/i18n/index.ts

@@ -1,3 +1,4 @@
+import cs from './cs.json';
 import de from './de.json';
 import en from './en.json';
 import es from './es.json';
@@ -13,9 +14,11 @@ import ru from './ru.json';
 import th from './th.json';
 import tr from './tr.json';
 import uk from './uk.json';
-import zh from './zh.json';
+import zhCN from './zh-CN.json';
+import zhHK from './zh-HK.json';
 
 const translations: Record<string, Record<string, string>> = {
+  cs,
   de,
   en,
   es,
@@ -31,7 +34,8 @@ const translations: Record<string, Record<string, string>> = {
   th,
   tr,
   uk,
-  zh,
+  'zh-CN': zhCN,
+  'zh-HK': zhHK,
 };
 
 export default translations;

package/src/i18n/it.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "caricamento",
   "neptune.Chips.ariaLabel": "Rimuovi {choice}",
   "neptune.ClearButton.ariaLabel": "Elimina",
   "neptune.CloseButton.ariaLabel": "Chiudi",
   "neptune.DateInput.day.label": "Giorno",
   "neptune.DateInput.month.label": "Mese",
   "neptune.DateInput.year.label": "Anno",
+  "neptune.DateLookup.day": "giorno",
+  "neptune.DateLookup.goTo20YearView": "Vai alla vista su 20 anni",
+  "neptune.DateLookup.month": "mese",
+  "neptune.DateLookup.next": "continua",
+  "neptune.DateLookup.previous": "indietro",
+  "neptune.DateLookup.selected": "selezionata",
+  "neptune.DateLookup.twentyYears": "20 anni",
+  "neptune.DateLookup.year": "anno",
+  "neptune.FlowNavigation.back": "torna al passaggio precedente",
+  "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
-  "neptune.Pagination.ariaLabel": "Navigazione",
-  "neptune.PaginationLink.ariaLabel.active": "Via a pagina {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Pagina corrente, pagina {pageNumber}",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",

package/src/i18n/ja.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "読み込み中…",
   "neptune.Chips.ariaLabel": "{choice} をクリア",
   "neptune.ClearButton.ariaLabel": "消去",
   "neptune.CloseButton.ariaLabel": "閉じる",
   "neptune.DateInput.day.label": "日",
   "neptune.DateInput.month.label": "月",
   "neptune.DateInput.year.label": "年",
+  "neptune.DateLookup.day": "日",
+  "neptune.DateLookup.goTo20YearView": "20年表示に移動する",
+  "neptune.DateLookup.month": "月",
+  "neptune.DateLookup.next": "次",
+  "neptune.DateLookup.previous": "前",
+  "neptune.DateLookup.selected": "選択済み",
+  "neptune.DateLookup.twentyYears": "20年",
+  "neptune.DateLookup.year": "年",
+  "neptune.FlowNavigation.back": "前のステップに戻る",
+  "neptune.Link.opensInNewTab": "（新しいタブで開きます）",
   "neptune.MoneyInput.Select.placeholder": "選択してください...",
-  "neptune.Pagination.ariaLabel": "ページネーションナビゲーション",
-  "neptune.PaginationLink.ariaLabel.active": "{pageNumber}のページへ移動します",
-  "neptune.PaginationLink.ariaLabel.inactive": "現在のページ、{pageNumber}ページ",
   "neptune.Select.searchPlaceholder": "検索... ",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未対応",

package/src/i18n/pl.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "ładowanie",
   "neptune.Chips.ariaLabel": "Wyczyść {choice}",
   "neptune.ClearButton.ariaLabel": "Wyczyść",
   "neptune.CloseButton.ariaLabel": "Zamknij",
   "neptune.DateInput.day.label": "Dzień",
   "neptune.DateInput.month.label": "Miesiąc",
   "neptune.DateInput.year.label": "Rok",
+  "neptune.DateLookup.day": "dzień",
+  "neptune.DateLookup.goTo20YearView": "Przejdź do widoku 20-letniego",
+  "neptune.DateLookup.month": "miesiąc",
+  "neptune.DateLookup.next": "następny",
+  "neptune.DateLookup.previous": "poprzedni",
+  "neptune.DateLookup.selected": "wybrano",
+  "neptune.DateLookup.twentyYears": "20 lat",
+  "neptune.DateLookup.year": "rok",
+  "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",
+  "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
-  "neptune.Pagination.ariaLabel": "Nawigacja w paginacji",
-  "neptune.PaginationLink.ariaLabel.active": "Przejdź do strony {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Obecna strona, strona {pageNumber}",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",

package/src/i18n/pt.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "carregando",
   "neptune.Chips.ariaLabel": "Remover {choice}",
   "neptune.ClearButton.ariaLabel": "Remover",
   "neptune.CloseButton.ariaLabel": "Fechar",
   "neptune.DateInput.day.label": "Dia",
   "neptune.DateInput.month.label": "Mês",
   "neptune.DateInput.year.label": "Ano",
+  "neptune.DateLookup.day": "dia",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "mês",
+  "neptune.DateLookup.next": "próximo",
+  "neptune.DateLookup.previous": "anterior",
+  "neptune.DateLookup.selected": "selecionada",
+  "neptune.DateLookup.twentyYears": "20 anos",
+  "neptune.DateLookup.year": "ano",
+  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Link.opensInNewTab": "(abrir a página em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
-  "neptune.Pagination.ariaLabel": "Navegação pelas páginas",
-  "neptune.PaginationLink.ariaLabel.active": "Ir para a página {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Página atual, página {pageNumber}",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",

package/src/i18n/ro.json

@@ -1,14 +1,22 @@
 {
+  "neptune.Button.loadingAriaLabel": "se încarcă",
   "neptune.Chips.ariaLabel": "Șterge {choice}",
   "neptune.ClearButton.ariaLabel": "Elimină",
   "neptune.CloseButton.ariaLabel": "Închide",
   "neptune.DateInput.day.label": "Zi",
   "neptune.DateInput.month.label": "Lună",
   "neptune.DateInput.year.label": "An",
+  "neptune.DateLookup.day": "zi",
+  "neptune.DateLookup.goTo20YearView": "Accesează vizualizarea pe 20 de ani",
+  "neptune.DateLookup.month": "luna",
+  "neptune.DateLookup.next": "înainte",
+  "neptune.DateLookup.previous": "precedenta",
+  "neptune.DateLookup.selected": "selectată",
+  "neptune.DateLookup.twentyYears": "20 de ani",
+  "neptune.DateLookup.year": "anul",
+  "neptune.FlowNavigation.back": "înapoi la pasul anterior",
+  "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
-  "neptune.Pagination.ariaLabel": "Navigare prin pagină",
-  "neptune.PaginationLink.ariaLabel.active": "Du-te la pagina {pageNumber}",
-  "neptune.PaginationLink.ariaLabel.inactive": "Pagina curentă, pagina {pageNumber}",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",