@transferwise/components 0.0.0-experimental-69786e7 → 0.0.0-experimental-b6153fb

package/src/main.css

@@ -2585,6 +2585,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -2596,36 +2598,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 72px !important;
   height: var(--size-72) !important;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
 .np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -2648,6 +2620,70 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.np-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  display: flex;
+  gap: 16px;
+  gap: var(--size-16);
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+}
+.np-item:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item:active {
+  background-color: var(--color-background-screen-active);
+}
+.np-item-media {
+  flex: 0 0 auto;
+  align-items: flex-start;
+}
+.np-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-item-value {
+  flex: 0 0 auto;
+}
+.np-item-control {
+  flex: 0 0 auto;
+}
+.np-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-item-spotlight-active:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-item-spotlight-active:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.np-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.np-item-spotlight-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.np-item-spotlight-inactive:active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
@@ -4051,6 +4087,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4060,36 +4098,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   letter-spacing: -0.02em;
   line-height: 122%;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
 .np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/main.less

@@ -39,6 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./item/Item.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/popover/Popover.css

@@ -24,6 +24,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -32,34 +34,6 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
-}@supports (hyphenate-limit-chars: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
 }.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/test-utils/fake-data.ts

@@ -1,6 +1,9 @@
 export const lorem10 =
   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
 
+export const lorem20 =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
+
 export const lorem40 =
   'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';