@transferwise/components 0.0.0-experimental-63cdd4d → 0.0.0-experimental-0f1fe62

package/src/common/bottomSheet/BottomSheet.less

@@ -5,7 +5,7 @@
 
   &--top-bar {
     cursor: grab;
-    padding: var(--size-8) 0 calc(var(--size-16) + var(--size-4));
+    padding: 8px 0 20px;
     display: flex;
     flex-direction: column;
     align-items: center;

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -1,10 +1,7 @@
-import { render, mockMatchMedia } from '../../test-utils';
+import { render } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-mockMatchMedia();
-
 describe('BottomSheet', () => {
   it('renders content when open', () => {
     const { baseElement } = render(

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -105,7 +105,3 @@ export const WithOverflowContentDark: Story = storyConfig(WithOverflowContent, {
 export const WithOverflowContentDarkMobile: Story = storyConfig(WithOverflowContent, {
   variants: ['dark', 'mobile'],
 });
-
-export const WithOverflowContentZoom400: Story = storyConfig(WithOverflowContent, {
-  variants: ['400%'],
-});

package/src/common/bottomSheet/BottomSheet.tsx

@@ -9,14 +9,11 @@ import {
 } from 'react';
 
 import Dimmer from '../../dimmer';
-import Drawer from '../../drawer';
 import SlidingPanel from '../../slidingPanel';
 import { CloseButton } from '../closeButton';
 import { CommonProps } from '../commonProps';
 import { isServerSide } from '../domHelpers';
 import { useConditionalListener } from '../hooks';
-import { useMedia } from '../hooks/useMedia';
-import { Breakpoint } from '../propsValues/breakpoint';
 import { Position } from '../propsValues/position';
 
 const INITIAL_Y_POSITION = 0;
@@ -170,13 +167,7 @@ const BottomSheet = (props: Props): ReactElement => {
     };
   }
 
-  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-
-  return is400Zoom ? (
-    <Drawer open={props.open} className={props.className} onClose={close}>
-      {props.children}
-    </Drawer>
-  ) : (
+  return (
     <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>
       {/* @ts-expect-error remove when SlidingPanel will be written on TS */}
       <SlidingPanel

package/src/common/closeButton/CloseButton.css

@@ -1 +1 @@
-.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:9999px;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}@media (max-width:385px){.np-theme-personal .np-close-button{height:64px;height:var(--size-64);width:64px;width:var(--size-64)}}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}@media (max-width:385px){.np-theme-personal .np-close-button--large{height:80px;height:var(--size-80);width:80px;width:var(--size-80)}}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}@media (max-width:385px){.np-theme-personal .np-close-button--x-large{height:96px;height:var(--size-96);width:96px;width:var(--size-96)}}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}
+.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:9999px;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}

package/src/common/closeButton/CloseButton.less

@@ -23,10 +23,6 @@
     color: var(--color-interactive-primary);
     height: var(--size-32);
     width: var(--size-32);
-    @media (--screen-400-zoom) {
-      height: var(--size-64);
-      width: var(--size-64);
-    }
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -36,20 +32,12 @@
     &--large {
       height: var(--size-40);
       width: var(--size-40);
-      @media (--screen-400-zoom) {
-        height: var(--size-80);
-        width: var(--size-80);
-      }
       flex-shrink: 0;
     }
 
     &--x-large {
       height: var(--size-48);
       width: var(--size-48);
-      @media (--screen-400-zoom) {
-        height: var(--size-96);
-        width: var(--size-96);
-      }
       flex-shrink: 0;
     }
 

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

@@ -1,10 +1,24 @@
 import { renderHook } from '@testing-library/react-hooks';
 
-import { mockMatchMedia } from '../../test-utils/window-mock';
-
 import { useMedia } from './useMedia';
 
-mockMatchMedia();
+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', () => {

package/src/common/propsValues/breakpoint.ts

@@ -1,5 +1,4 @@
 export enum Breakpoint {
-  ZOOM_400 = 385,
   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)}@media (max-width:385px){.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:385px){.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)}
+.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)}

package/src/dateLookup/DateLookup.js

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

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

@@ -3,12 +3,9 @@ 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,16 +11,10 @@
 
   > 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, storyConfig } from '../test-utils';
+import { within, userEvent } from '../test-utils';
 
 import DateLookup from './DateLookup';
 
@@ -47,11 +47,6 @@ Basic.play = ({ canvasElement }) => {
   userEvent.click(canvas.getByRole('button'));
 };
 
-export const Basic400Zoom = storyConfig(
-  { render: Basic, play: Basic.play, parameters: { chromatic: { deplay: 4000 } } },
-  { variants: ['400%'] },
-);
-
 export const RightAligned = () => {
   const [value, setValue] = useState(null);
   const disabled = boolean('disabled', false);

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

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

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

@@ -1,7 +1,5 @@
 import { shallow } from 'enzyme';
 
-import { mockMatchMedia } from '../test-utils';
-
 import DateTrigger from './dateTrigger';
 import DayCalendar from './dayCalendar';
 import MonthCalendar from './monthCalendar';
@@ -9,8 +7,6 @@ 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,10 +1,8 @@
-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';
 
@@ -12,9 +10,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={classNames('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
+    <div className="text-xs-center p-t-1 p-b-2 clearfix">
       <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}@media (max-width:770px){.np-drawer{max-width:unset}}.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)}@media (max-width:385px){.np-theme-personal .np-drawer .np-drawer-header{padding:16px;padding:var(--size-16)}}.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}.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)}}

package/src/drawer/Drawer.less

@@ -7,9 +7,6 @@
   justify-content: space-between;
   width: 100vw;
   max-width: 600px;
-  @media (max-width: 770px) {
-    max-width: unset;
-  }
   height: 100vh;
   height: 100dvh;
   max-height: 100vh;
@@ -23,9 +20,6 @@
 
     .np-theme-personal & {
       padding: var(--size-24);
-      @media (--screen-400-zoom) {
-        padding: var(--size-16);
-      }
 
       .np-text-title-body {
         padding-top: 0;

package/src/drawer/Drawer.story.js

@@ -2,8 +2,7 @@ import { select } from '@storybook/addon-knobs';
 import { useState } from 'react';
 
 import { Section, Button, Input, Modal } from '..';
-import { Position, Priority } from '../common';
-import { storyConfig } from '../test-utils';
+import { Position } from '../common';
 
 import Drawer from './Drawer';
 
@@ -41,10 +40,7 @@ export const Basic = () => {
         footerContent={
           <>
             <Button block onClick={() => {}}>
-              Action 1
-            </Button>
-            <Button block priority={Priority.SECONDARY} onClick={() => {}}>
-              Action 2
+              Action
             </Button>
           </>
         }
@@ -81,42 +77,6 @@ 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;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)}
+.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)}