@transferwise/components 0.0.0-experimental-c990279 → 0.0.0-experimental-826e553

package/src/inputs/Input.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/inputs/SelectInput/Options/SelectInputOptions.css

@@ -6,7 +6,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -42,7 +42,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.css

@@ -250,7 +250,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -286,7 +286,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,8 +1,8 @@
 import mergeProps from 'merge-props';
 import { useEffect, useRef, useState, useDeferredValue } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
+import { Breakpoint } from '../../common/propsValues/breakpoint';
 import { useEffectEvent } from '../../common/hooks/useEffectEvent';
 import { useInputAttributes } from '../contexts';
 

package/src/inputs/TextArea.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/logo/Logo.css

@@ -11,7 +11,7 @@
 .np-logo-svg--size-sm {
   display: block;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-logo-svg--size-sm {
     display: none;
   }
@@ -19,7 +19,7 @@
 .np-logo-svg--size-md {
   display: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-logo-svg--size-md {
     display: block;
   }

package/src/logo/Logo.story.tsx

@@ -99,7 +99,7 @@ export const Types: Story = {
 };
 
 /**
- * Below `600px` the flag-only mark is shown; at `600px` and above the full wordmark is displayed.
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
  */
 export const Responsive: Story = {
   argTypes: {
@@ -110,7 +110,7 @@ export const Responsive: Story = {
     <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
       <div>
         <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'< 600px (flag only)'}
+          {'< 576px (flag only)'}
         </span>
         <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
@@ -125,7 +125,7 @@ export const Responsive: Story = {
       </div>
       <div>
         <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'\u2265 600px (full wordmark)'}
+          {'\u2265 576px (full wordmark)'}
         </span>
         <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (

package/src/logo/Logo.tsx

@@ -53,7 +53,7 @@ const labelByType = {
 
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
- * and the full wordmark on ≥600px (small breakpoint and above).
+ * and the full wordmark on ≥576px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */