@transferwise/components 0.0.0-experimental-6bc68bd → 0.0.0-experimental-012dcef

package/build/styles/styles/less/panels.css

@@ -19,7 +19,7 @@
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(var(--wds-line-height-title-section) + 8px);
+  line-height: calc(var(--line-height-title) + 8px);
 }
 .panel-title > a {
   -webkit-text-decoration: none;
@@ -69,7 +69,7 @@
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(var(--wds-line-height-title-section) * 2);
+    line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
     margin-block-start: 8px;

package/build/styles/styles/less/popovers.css

@@ -1,36 +1,4 @@
-.popover,
-.popover-content {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .popover,
-  .popover-content {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover,
-    .popover-content {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover,
-    .popover-content {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover,
-  .popover-content {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover,
-    .popover-content {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.close {
+.close {
   float: inline-end;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
@@ -78,7 +46,7 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -93,6 +61,10 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -278,8 +250,16 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  margin: 0;
   padding: 0;
+  margin: 0;
+  color: var(--color-content-primary);
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  word-wrap: break-word;
+  font-size: var(--font-size-18);
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -288,8 +268,45 @@ button.close {
   border-end-start-radius: 0;
   color: var(--color-content-primary) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+.popover-title + p,
+.popover-title + ul:not(.list-unstyled),
+.popover-title + ol:not(.list-unstyled) {
+  margin-block-start: var(--size-8);
+}
 .popover-content {
   padding: 0;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: var(--color-content-secondary);
 }
@@ -458,13 +475,13 @@ button.popover-close {
   }
 }
 .popover-promotion .popover-title {
-  font-size: var(--wds-font-size-body-large);
-  line-height: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
+  line-height: var(--line-height-title);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: var(--wds-font-size-title-body);
-    line-height: var(--wds-font-size-title-body);
+    font-size: var(--font-size-20);
+    line-height: var(--line-height-title);
   }
 }
 @media (max-width: 320px) {

package/build/styles/styles/less/progress-bars.css

@@ -15,8 +15,8 @@
   inset-block-start: calc(-1 * var(--progress-bar-border-width));
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: var(--wds-font-size-body-large);
-  font-weight: var(--wds-font-weight-body-bold);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-bold);
   color: #fff;
   text-align: end;
   background-color: var(--color-content-accent);

package/build/styles/styles/less/sequences.css

@@ -4,7 +4,7 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -81,7 +81,7 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
   }
 }
 .sequence > li {
@@ -94,7 +94,7 @@
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: var(--font-weight-regular);
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -123,10 +123,6 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
-.sequence > li .wds-text-title-screen,
-.sequence > li .wds-text-title-section,
-.sequence > li .wds-text-title-subsection,
-.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -163,7 +159,7 @@
   -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-content-primary);
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
@@ -188,7 +184,7 @@
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: var(--font-weight-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
@@ -207,8 +203,7 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default,
-.sequence-inverse > .active .wds-text-body-default {
+.sequence-inverse > .active .np-text-body-default {
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -356,7 +351,7 @@
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -447,14 +442,14 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 .sequence-icon-lg {
   inline-size: 40px;
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;

package/build/styles/styles/less/table.css

@@ -30,7 +30,7 @@ th {
 .table > tfoot > tr > td {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--wds-line-height-body-large);
+  line-height: var(--line-height-body);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -41,7 +41,7 @@ th {
 .table > .tfoot > ol > li {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--wds-line-height-body-large);
+  line-height: var(--line-height-body);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -81,12 +81,12 @@ th {
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
@@ -328,7 +328,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: var(--wds-font-weight-title-body);
+    font-weight: var(--font-weight-bold);
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -342,7 +342,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -358,7 +358,7 @@ table col[class*="col-"] {
     border-radius: 3px;
     margin-block-end: var(--size-24);
     padding-block: var(--size-24) 0;
-    padding-inline: var(--wds-line-height-body-large);
+    padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
     padding: 0;

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

@@ -1,34 +1,8 @@
-.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 {
+.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -69,6 +43,10 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

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,gCAgTlB,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,gCAmTlB,CAAC"}

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -36,15 +36,12 @@ 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, className, }: VariantListProps) => import("react").JSX.Element;
+export declare const VariantList: ({ controlType, variant, content, controls, }: 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;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"}
+{"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"}

package/build/types/MoneyInput/MoneyInput.d.ts

@@ -55,6 +55,7 @@ declare const _default: import("react").FC<{
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>> | undefined;
     amount: number | null;
     searchPlaceholder?: string | undefined;
+    decimals?: number | undefined;
     currencies: readonly CurrencyItem[];
     selectedCurrency: CurrencyOptionItem;
     onCurrencyChange?: ((value: CurrencyOptionItem) => void) | undefined;
@@ -66,7 +67,6 @@ declare const _default: import("react").FC<{
     }) => void) | undefined;
     customActionLabel?: import("react").ReactNode;
     onCustomAction?: (() => void) | undefined;
-    decimals?: number | undefined;
 }>;
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

package/build/types/MoneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;gBARd,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;eAQhB,MAAM;;AA0anB,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
+} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

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

@@ -6,13 +6,7 @@ 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",
@@ -32,14 +26,8 @@ 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 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 DisplayTypes = DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber;
 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;;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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-6bc68bd",
+  "version": "0.0.0-experimental-012dcef",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Accordion/Accordion.css

@@ -9,8 +9,7 @@
   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 .wds-text-title-body {
+.np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
 }
 .np-accordion-item__content {
@@ -24,7 +23,7 @@
   }
 }
 .np-accordion-item .np-option .np-option__title {
-  font-weight: var(--wds-font-weight-body-bold);
+  font-weight: var(--font-weight-semi-bold);
 }
 .np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
@@ -39,13 +38,13 @@
   align-items: flex-start;
 }
 .np-theme-personal .np-accordion-item .decision__title {
-  font-size: var(--wds-line-height-title-body);
+  font-size: var(--font-size-18);
 }
 .np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-block-end: 0;
-  font-size: var(--wds-line-height-title-body);
-  letter-spacing: var(--wds-letter-spacing-title-body);
-  line-height: var(--wds-line-height-title-body);
+  font-size: var(--font-size-18);
+  letter-spacing: var(--letter-spacing-negative-xs);
+  line-height: var(--line-height-24);
 }
 .np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;

package/src/Accordion/Accordion.less

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

package/src/Body/Body.css

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

package/src/Body/Body.less

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