@transferwise/components 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3

package/build/styles/styles/less/tooltip.css

@@ -1,14 +1,38 @@
-.tooltip {
+.tooltip-inner {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
-  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -45,23 +69,13 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
@@ -112,7 +126,6 @@
   margin-inline-start: -5px;
   border-block-width: 5px 0;
   border-inline-width: 5px;
-  border-block-start-color: #ffffff;
   border-block-start-color: var(--color-background-screen);
 }
 .tooltip.right .tooltip-arrow {
@@ -121,7 +134,6 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 0 5px;
-  border-inline-end-color: #ffffff;
   border-inline-end-color: var(--color-background-screen);
 }
 .tooltip.left .tooltip-arrow {
@@ -130,7 +142,6 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 5px 0;
-  border-inline-start-color: #ffffff;
   border-inline-start-color: var(--color-background-screen);
 }
 .tooltip.bottom .tooltip-arrow {
@@ -139,7 +150,6 @@
   margin-inline-start: -5px;
   border-block-width: 0 5px;
   border-inline-width: 5px;
-  border-block-end-color: #ffffff;
   border-block-end-color: var(--color-background-screen);
 }
 [data-toggle="tooltip"]:not(.btn) {
@@ -147,7 +157,6 @@
 }
 [data-toggle="tooltip"]:not(.btn):hover,
 [data-toggle="tooltip"]:not(.btn):focus {
-  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }

package/build/styles/styles/less/wells.css

@@ -1,43 +1,28 @@
 .well,
 .well-xs {
-  min-block-size: 24px;
   min-block-size: var(--size-24);
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  border: solid 1px rgba(0,0,0,0.10196);
   border: solid 1px var(--color-border-neutral);
-  padding: 24px;
   padding: var(--size-24);
   box-shadow: none;
 }
 @media only screen and (min-width: 600px) {
   .well-sm {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
 }
 @media only screen and (min-width: 840px) {
   .well-md {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
@@ -45,15 +30,10 @@
 @media only screen and (min-width: 1160px) {
   .well-lg,
   .well-xl {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }

package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAezE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,gBAAgB,gCAmTlB,CAAC"}
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAezE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,gBAAgB,gCAgTlB,CAAC"}

package/build/types/ListItem/_stories/variants/helpers.d.ts

@@ -36,12 +36,15 @@ export declare const getVariantInstances: (controlType: ControlType, { text, med
 export type VariantStoryProps = {
     controlType: ControlType;
     variant?: Variant;
+    style?: React.CSSProperties;
+    className?: string;
 };
 type VariantListProps = VariantStoryProps & {
     content?: VariantContent;
     controls?: Record<ControlType, ReactNode>;
+    className?: string;
 };
-export declare const VariantList: ({ controlType, variant, content, controls, }: VariantListProps) => import("react").JSX.Element;
+export declare const VariantList: ({ controlType, variant, content, controls, className, }: VariantListProps) => import("react").JSX.Element;
 type VariantStory = StoryObj<VariantStoryProps>;
 export declare const VariantStory: VariantStory;
 export {};

package/build/types/ListItem/_stories/variants/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/ListItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAE1B,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AACjE,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAShG,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,EAAE;QAAE,WAAW,EAAE,SAAS,CAAC;QAAC,cAAc,EAAE,SAAS,CAAA;KAAE,CAAC;IACtE,MAAM,EAAE;QAAE,WAAW,EAAE,SAAS,CAAC;QAAC,cAAc,EAAE,SAAS,CAAA;KAAE,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,aAAa,WAAW,EACxB,wDAAwD,cAAc,KACrE,cAAc,EA8GhB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,gBAAgB,GAAG,iBAAiB,GAAG;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8CAKzB,gBAAgB,gCAUlB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,YAK1B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/ListItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAE1B,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AACjE,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAShG,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,EAAE;QAAE,WAAW,EAAE,SAAS,CAAC;QAAC,cAAc,EAAE,SAAS,CAAA;KAAE,CAAC;IACtE,MAAM,EAAE;QAAE,WAAW,EAAE,SAAS,CAAC;QAAC,cAAc,EAAE,SAAS,CAAA;KAAE,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,aAAa,WAAW,EACxB,wDAAwD,cAAc,KACrE,cAAc,EA8GhB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,gBAAgB,GAAG,iBAAiB,GAAG;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yDAMzB,gBAAgB,gCAUlB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,YAK1B,CAAC"}

package/build/types/common/PropsValues/typography.d.ts

@@ -6,7 +6,13 @@ export declare enum Typography {
     DISPLAY_LARGE = "display-large",
     DISPLAY_MEDIUM = "display-medium",
     DISPLAY_SMALL = "display-small",
+    /**
+     * @deprecated Use {@link Typography.DISPLAY_NUMBER_SMALL} instead.
+     */
     DISPLAY_NUMBER = "display-number",
+    DISPLAY_NUMBER_SMALL = "display-number-small",
+    DISPLAY_NUMBER_MEDIUM = "display-number-medium",
+    DISPLAY_NUMBER_LARGE = "display-number-large",
     TITLE_SCREEN = "title-screen",
     TITLE_SECTION = "title-section",
     TITLE_SUBSECTION = "title-subsection",
@@ -26,8 +32,14 @@ export type DisplayExtraLarge = 'display-extra-large';
 export type DisplayLarge = 'display-large';
 export type DisplayMedium = 'display-medium';
 export type DisplaySmall = 'display-small';
+/**
+ * @deprecated Use {@link DisplayNumberSmall} instead.
+ */
 export type DisplayNumber = 'display-number';
-export type DisplayTypes = DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber;
+export type DisplayNumberSmall = 'display-number-small';
+export type DisplayNumberMedium = 'display-number-medium';
+export type DisplayNumberLarge = 'display-number-large';
+export type DisplayTypes = DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber | DisplayNumberSmall | DisplayNumberMedium | DisplayNumberLarge;
 export type TitleScreen = 'title-screen';
 export type TitleSection = 'title-section';
 export type TitleSubsection = 'title-subsection';

package/build/types/common/PropsValues/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/typography.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB;;OAEG;IACH,mBAAmB,wBAAwB;IAC3C,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IAEjC,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;IACrC,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAE3B,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IAEnC,UAAU,eAAe;IACzB,YAAY,iBAAiB;CAC9B;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,YAAY,GACtB,iBAAiB,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,YAAY,GACZ,eAAe,GACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,aAAa,GACb,eAAe,GACf,SAAS,GACT,WAAW,GACX,SAAS,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/typography.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB;;OAEG;IACH,mBAAmB,wBAAwB;IAC3C,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B;;OAEG;IACH,cAAc,mBAAmB;IACjC,oBAAoB,yBAAyB;IAC7C,qBAAqB,0BAA0B;IAC/C,oBAAoB,yBAAyB;IAE7C,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;IACrC,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAE3B,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IAEnC,UAAU,eAAe;IACzB,YAAY,iBAAiB;CAC9B;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAC7C,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,MAAM,MAAM,YAAY,GACpB,iBAAiB,GACjB,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,aAAa,GACb,kBAAkB,GAClB,mBAAmB,GACnB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,YAAY,GACZ,eAAe,GACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,aAAa,GACb,eAAe,GACf,SAAS,GACT,WAAW,GACX,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-68931a1",
+  "version": "0.0.0-experimental-02ec4e3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -143,7 +143,7 @@
     "build:clean": "rm -rf lib build",
     "build:css-main": "gulp compileLess --dest=src",
     "build:css-utils": "npm-run-all build:css-utils:*",
-    "build:css-utils:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
+    "build:css-utils:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/**' build/styles/fonts",
     "build:css-utils:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
     "build:css-utils:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",

package/src/Accordion/Accordion.css

@@ -9,16 +9,13 @@
   background-color: transparent;
 }
 .np-accordion-item.np-accordion-item--dark .media-body,
-.np-accordion-item.np-accordion-item--dark .np-text-title-body {
+.np-accordion-item.np-accordion-item--dark .np-text-title-body,
+.np-accordion-item.np-accordion-item--dark .wds-text-title-body {
   color: #ffffff;
 }
 .np-accordion-item__content {
-  padding-block: 0 24px;
   padding-block: 0 var(--size-24);
-  padding-inline: 12px 12px;
   padding-inline: var(--size-12) var(--size-12);
-  border-block-end: 1px solid rgba(0,0,0,0.10196);
-  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
 @media (min-width: 320.02px) {
@@ -27,17 +24,14 @@
   }
 }
 .np-accordion-item .np-option .np-option__title {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
 }
 .np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
   align-items: center;
 }
 .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
-  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
-  padding-inline: 56px;
   padding-inline: var(--size-56);
 }
 .np-theme-personal .np-accordion-item--with-icon .media {
@@ -45,32 +39,23 @@
   align-items: flex-start;
 }
 .np-theme-personal .np-accordion-item .decision__title {
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
+  font-size: var(--wds-line-height-title-body);
 }
 .np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-block-end: 0;
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-  letter-spacing: -0.01em;
-  letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: 1.5rem;
-  line-height: var(--line-height-24);
+  font-size: var(--wds-line-height-title-body);
+  letter-spacing: var(--wds-letter-spacing-title-body);
+  line-height: var(--wds-line-height-title-body);
 }
 .np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
-  inline-size: 24px;
   inline-size: var(--size-24);
-  block-size: 24px;
   block-size: var(--size-24);
   border-radius: 0;
 }
 .np-theme-personal .np-accordion-item__content {
-  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
-  padding-inline: 16px 56px;
   padding-inline: var(--size-16) var(--size-56);
   border-block-end: none;
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Accordion/Accordion.less

@@ -17,7 +17,8 @@
 
   &.np-accordion-item--dark {
     .media-body,
-    .np-text-title-body {
+    .np-text-title-body,
+    .wds-text-title-body {
       color: @color-navy-content-primary;
     }
   }
@@ -35,7 +36,7 @@
 
   .np-option {
     .np-option__title {
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: var(--wds-font-weight-body-bold);
     }
   }
 
@@ -57,15 +58,15 @@
     }
 
     .decision__title {
-      font-size: var(--font-size-18);
+      font-size: var(--wds-line-height-title-body);
     }
 
     .np-option {
       .np-option__title {
         margin-bottom: 0;
-        font-size: var(--font-size-18);
-        letter-spacing: var(--letter-spacing-negative-xs);
-        line-height: var(--line-height-24);
+        font-size: var(--wds-line-height-title-body);
+        letter-spacing: var(--wds-letter-spacing-title-body);
+        line-height: var(--wds-line-height-title-body);
       }
 
       .circle-sm {

package/src/AvatarLayout/AvatarLayout.css

@@ -9,8 +9,6 @@
 }
 .np-avatar-layout-diagonal-mask {
   --np-avatar-layout-mask-direction: right;
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }

package/src/AvatarView/AvatarView.css

@@ -5,12 +5,8 @@
 }
 .np-dot-mask {
   --np-dot-h-side: left;
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
@@ -21,7 +17,6 @@
   position: absolute;
   inline-size: var(--np-dot-size);
   block-size: var(--np-dot-size);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inset-inline-end: 0;
 }
@@ -29,19 +24,16 @@
   background-color: var(--color-sentiment-negative);
 }
 .np-dot-badge-online {
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
   --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
-  color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;
 }
 .np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }

package/src/AvatarView/Dot/Dot.css

@@ -5,12 +5,8 @@
 }
 .np-dot-mask {
   --np-dot-h-side: left;
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
@@ -21,7 +17,6 @@
   position: absolute;
   inline-size: var(--np-dot-size);
   block-size: var(--np-dot-size);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inset-inline-end: 0;
 }
@@ -29,6 +24,5 @@
   background-color: var(--color-sentiment-negative);
 }
 .np-dot-badge-online {
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }

package/src/Body/Body.css

@@ -1,3 +1,3 @@
-.np-text--pre-line {
+.wds-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.less

@@ -1,3 +1,3 @@
-.np-text--pre-line {
+.wds-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.test.tsx

@@ -9,7 +9,7 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('DIV');
-    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`wds-text-${Typography.BODY_DEFAULT}`);
   });
 
   it('enforces tag via `as` prop', () => {
@@ -17,7 +17,7 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('P');
-    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`wds-text-${Typography.BODY_DEFAULT}`);
   });
 
   it('supports native HTML attrs', () => {
@@ -35,7 +35,7 @@ describe('Body', () => {
   it('renders newlines as line breaks when preserveNewlines is true', () => {
     render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
     const copy = screen.getByText(/Line 1\.\s*Line 2/);
-    expect(copy).toHaveClass('np-text--pre-line');
+    expect(copy).toHaveClass('wds-text--pre-line');
     expect(copy).toHaveTextContent('Line 1.');
     expect(copy).toHaveTextContent('Line 2');
   });
@@ -47,6 +47,6 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('DIV');
-    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`wds-text-${Typography.BODY_DEFAULT}`);
   });
 });

package/src/Body/Body.tsx

@@ -41,8 +41,8 @@ const Body = forwardRef(function Body(
       // See: https://fettblog.eu/typescript-react-generic-forward-refs/
       ref={reference}
       className={clsx(
-        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
-        preserveNewlines && 'np-text--pre-line',
+        `wds-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
+        preserveNewlines && 'wds-text--pre-line',
         className,
       )}
     />

package/src/Button/Button.css

@@ -153,11 +153,9 @@
   padding: var(--Button-medium-padding);
 }
 .wds-Button--medium:has(.wds-Button-avatars) {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .wds-Button--medium:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .wds-Button--medium .wds-Button-icon--start {
@@ -167,11 +165,9 @@
   padding: var(--Button-small-padding);
 }
 .wds-Button--small:has(.wds-Button-icon--start) {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .wds-Button--small:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .wds-Button--block {

package/src/Button/LegacyButton/LegacyButton.css

@@ -3,7 +3,6 @@
 }
 .np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  inset-inline-start: 24px;
   inset-inline-start: var(--size-24);
 }
 .np-btn.np-btn-xs > span.btn-loader {

package/src/Calendar/Calendar.css

@@ -2,16 +2,12 @@
 .wds-Calendar__option--month,
 .wds-Calendar__option--year {
   inline-size: 100%;
-  padding-block: 4px;
   padding-block: var(--size-4);
   padding-inline: 0;
   border: transparent;
-  border-radius: 10px;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -33,7 +29,6 @@
 .wds-Calendar__option--month[aria-disabled="true"],
 .wds-Calendar__option--year[aria-disabled="true"] {
   --ring-outline-color: var(--color-sentiment-content-primary);
-  color: #768e9c;
   color: var(--color-content-tertiary);
   cursor: not-allowed;
 }
@@ -91,18 +86,14 @@
 .wds-Calendar__option--day[aria-disabled="true"].today,
 .wds-Calendar__option--month[aria-disabled="true"].today,
 .wds-Calendar__option--year[aria-disabled="true"].today {
-  text-decoration-color: #768e9c;
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: 40px;
-  block-size: var(--size-40);
-  border-radius: 9999px;
+  --circleSize: var(--size-40);
+  block-size: var(--circleSize);
+  line-height: var(--circleSize);
+  inline-size: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: 40px;
-  line-height: var(--size-40);
-  inline-size: 40px;
-  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -114,6 +105,12 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
+.wds-Calendar__option--year {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: calc(1rlh * 1.6);
+}
 .tw-date-lookup-calendar {
   min-inline-size: 300px;
   text-align: center;
@@ -126,12 +123,10 @@
   background-color: initial;
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .tw-date-lookup-calendar > tbody > tr > td {
   border: none;
-  padding: 4px;
   padding: var(--size-4);
 }
 @media (max-width: 320px) {

package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx

@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
                 key={day}
                 className={
                   index > 4
-                    ? 'text-xs-center np-text-body-default'
-                    : 'text-xs-center np-text-body-default-bold'
+                    ? 'text-xs-center wds-text-body-default'
+                    : 'text-xs-center wds-text-body-default-bold'
                 }
               >
                 <span className="hidden-xs">

package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx

@@ -76,7 +76,7 @@ const MonthCalendarTable = ({
   })();
 
   return (
-    <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
+    <table className="table table-condensed table-bordered tw-date-lookup-calendar wds-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
           <th colSpan={COLS}>{placeholder}</th>