@transferwise/components 0.0.0-experimental-492a9d3 → 0.0.0-experimental-44a3fcb

package/build/main.css

@@ -74,7 +74,9 @@ div.critical-comms .critical-comms-body {
     flex-wrap: wrap;
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {line-height: 1.5;line-height: var(--line-height-body);
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   font-size: 1rem;
@@ -86,6 +88,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (min-width: 768px) {
 }
+@media (min-width: 768px) {
+}
 .np-accordion-item {
   display: block;
   width: 100%;
@@ -254,6 +258,7 @@ div.critical-comms .critical-comms-body {
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
+  font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
@@ -592,6 +597,13 @@ div.critical-comms .critical-comms-body {
 [dir="rtl"] .np-card__button {
   text-align: right;
 }
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-card__content {
   padding: 24px 16px;
   padding: var(--size-24) var(--size-16);
@@ -2030,9 +2042,19 @@ button.np-option {
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[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;
@@ -2044,11 +2066,23 @@ button.np-option {
   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;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[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;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;
@@ -3964,6 +3998,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   z-index: 1060;
 }
 [dir="rtl"] .snackbar {
+  right: 0;
   left: auto;
   left: initial;
 }
@@ -4605,6 +4640,104 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  padding: 4px;
+  padding: var(--size-4);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  width: 100%;
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  background: #ffffff;
+  background: var(--color-background-screen);
+  width: var(--segment-highlight-width);
+  position: absolute;
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  min-height: 40px;
+  min-height: var(--size-40);
+  line-height: 40px;
+  line-height: var(--size-40);
+  margin: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: font-weight 300ms, background 300ms;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  font: inherit;
+  padding: none;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__selected-segment {
+  font-weight: 800;
+  font-weight: var(--font-weight-bold);
+}
+.segmented-control__label-text {
+  white-space: nowrap;
+  color: var(--color-interactive-primary);
+}
 .np-summary {
   min-width: 280px;
 }
@@ -4913,6 +5046,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 100%;
 }
 .np-tile__description {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  margin-top: 12px;
+  margin-top: var(--size-12);
   display: inline-block;
 }
 .np-tile--small.np-decision__tile--fixed-width {

package/build/styles/accordion/Accordion.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-accordion-item {
   display: block;
   width: 100%;

package/build/styles/avatar/Avatar.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.tw-avatar {
   position: relative;
   border-radius: 50%;
@@ -38,6 +39,7 @@
   max-width: 100%;
 }.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
+  font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }.tw-avatar.tw-avatar--initials,

package/build/styles/card/Card.css

@@ -44,6 +44,13 @@
 [dir="rtl"] .np-card__button {
   text-align: right;
 }
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-card__content {
   padding: 24px 16px;
   padding: var(--size-24) var(--size-16);

package/build/styles/flowNavigation/FlowNavigation.css

@@ -13,9 +13,19 @@
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[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;
@@ -27,11 +37,23 @@
   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;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[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;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;

package/build/styles/inputs/Input.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);

package/build/styles/inputs/TextArea.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);

package/build/styles/main.css

@@ -74,7 +74,9 @@ div.critical-comms .critical-comms-body {
     flex-wrap: wrap;
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {line-height: 1.5;line-height: var(--line-height-body);
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   font-size: 1rem;
@@ -86,6 +88,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (min-width: 768px) {
 }
+@media (min-width: 768px) {
+}
 .np-accordion-item {
   display: block;
   width: 100%;
@@ -254,6 +258,7 @@ div.critical-comms .critical-comms-body {
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
+  font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
@@ -592,6 +597,13 @@ div.critical-comms .critical-comms-body {
 [dir="rtl"] .np-card__button {
   text-align: right;
 }
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-card__content {
   padding: 24px 16px;
   padding: var(--size-24) var(--size-16);
@@ -2030,9 +2042,19 @@ button.np-option {
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[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;
@@ -2044,11 +2066,23 @@ button.np-option {
   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;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[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;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;
@@ -3964,6 +3998,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   z-index: 1060;
 }
 [dir="rtl"] .snackbar {
+  right: 0;
   left: auto;
   left: initial;
 }
@@ -4605,6 +4640,104 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  padding: 4px;
+  padding: var(--size-4);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  width: 100%;
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  background: #ffffff;
+  background: var(--color-background-screen);
+  width: var(--segment-highlight-width);
+  position: absolute;
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  min-height: 40px;
+  min-height: var(--size-40);
+  line-height: 40px;
+  line-height: var(--size-40);
+  margin: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: font-weight 300ms, background 300ms;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  font: inherit;
+  padding: none;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__selected-segment {
+  font-weight: 800;
+  font-weight: var(--font-weight-bold);
+}
+.segmented-control__label-text {
+  white-space: nowrap;
+  color: var(--color-interactive-primary);
+}
 .np-summary {
   min-width: 280px;
 }
@@ -4913,6 +5046,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 100%;
 }
 .np-tile__description {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  margin-top: 12px;
+  margin-top: var(--size-12);
   display: inline-block;
 }
 .np-tile--small.np-decision__tile--fixed-width {

package/build/styles/popover/Popover.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/build/styles/segmentedControl/SegmentedControl.css

@@ -0,0 +1,98 @@
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  padding: 4px;
+  padding: var(--size-4);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  width: 100%;
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  background: #ffffff;
+  background: var(--color-background-screen);
+  width: var(--segment-highlight-width);
+  position: absolute;
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  min-height: 40px;
+  min-height: var(--size-40);
+  line-height: 40px;
+  line-height: var(--size-40);
+  margin: 0;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: font-weight 300ms, background 300ms;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  font: inherit;
+  padding: none;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__selected-segment {
+  font-weight: 800;
+  font-weight: var(--font-weight-bold);
+}
+.segmented-control__label-text {
+  white-space: nowrap;
+  color: var(--color-interactive-primary);
+}

package/build/styles/select/Select.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/build/styles/snackbar/Snackbar.css

@@ -7,6 +7,7 @@
   z-index: 1060;
 }
 [dir="rtl"] .snackbar {
+  right: 0;
   left: auto;
   left: initial;
 }

package/build/styles/tile/Tile.css

@@ -1,4 +1,5 @@
 @media (min-width: 768px) {
+}@media (min-width: 768px) {
 }.np-tile {
   min-width: 120px;
   border-radius: 10px;
@@ -27,6 +28,10 @@
 }.np-tile__media {
   width: 100%;
 }.np-tile__description {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  margin-top: 12px;
+  margin-top: var(--size-12);
   display: inline-block;
 }.np-tile--small.np-decision__tile--fixed-width {
   width: 260px;

package/build/types/segmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+type SegmentedControlPropsBase = {
+    name: string;
+    defaultValue: string;
+    type: 'input' | 'navigation';
+    segments: {
+        label: string;
+        value: string;
+    }[];
+    onChange: (value: string) => void;
+};
+type SegmentedControlNavigationProps = {
+    type: 'navigation';
+    controls: string;
+};
+type SegmentedControlInputProps = {
+    type: 'input';
+    controls?: never;
+};
+export type SegmentedControlProps = SegmentedControlPropsBase & (SegmentedControlNavigationProps | SegmentedControlInputProps);
+export declare const SegmentedControl: ({ name, defaultValue, type, segments, controls, onChange, }: SegmentedControlProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAGA,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,YAAY,CAAC;IAC7B,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,+BAA+B,GAAG,0BAA0B,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,gEAO1B,qBAAqB,gCA0GvB,CAAC"}