@transferwise/components 0.0.0-experimental-9b6c3f8 → 0.0.0-experimental-0c7c46a

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: #0097c7;
   color: var(--color-content-accent);
@@ -98,6 +66,12 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
+  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;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -284,8 +258,20 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  margin: 0;
   padding: 0;
+  margin: 0;
+  color: #37517e;
+  color: var(--color-content-primary);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  word-wrap: break-word;
+  font-size: 1.125rem;
+  font-size: var(--font-size-18);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-block-end: 0;
@@ -293,11 +279,50 @@ button.close {
   border-start-end-radius: 2px;
   border-end-end-radius: 0;
   border-end-start-radius: 0;
-  color: #37517e !important;
   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: 8px;
+  margin-block-start: var(--size-8);
+}
 .popover-content {
   padding: 0;
+  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;
   color: #5d7079;
   color: var(--color-content-secondary);

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

@@ -131,10 +131,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;
 }
@@ -225,8 +221,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: #5d7079;
   color: var(--color-content-secondary);
 }

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

@@ -1,30 +1,4 @@
-.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;
@@ -71,6 +45,12 @@
   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;

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-9b6c3f8",
+  "version": "0.0.0-experimental-0c7c46a",
   "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 {

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;
     }
   }

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;
 }

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(`wds-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`np-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(`wds-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`np-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('wds-text--pre-line');
+    expect(copy).toHaveClass('np-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(`wds-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`np-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(
-        `wds-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
-        preserveNewlines && 'wds-text--pre-line',
+        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
+        preserveNewlines && 'np-text--pre-line',
         className,
       )}
     />

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

@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
                 key={day}
                 className={
                   index > 4
-                    ? 'text-xs-center wds-text-body-default'
-                    : 'text-xs-center wds-text-body-default-bold'
+                    ? 'text-xs-center np-text-body-default'
+                    : 'text-xs-center np-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 wds-text-body-default-bold m-b-0">
+    <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
           <th colSpan={COLS}>{placeholder}</th>

package/src/Calendar/TableLink/TableLink.tsx

@@ -96,7 +96,7 @@ const TableLink = ({
       aria-pressed={active}
       className={clsx(
         `wds-Calendar__option--${type}`,
-        `tw-date-lookup-${type}-option wds-text-body-default-bold`,
+        `tw-date-lookup-${type}-option np-text-body-default-bold`,
         { active: !!active },
         { today: !!today },
         { disabled: !!isUnavailable },

package/src/Chips/Chip/Chip.css

@@ -134,14 +134,12 @@
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
-.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
-.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
   padding-inline-end: 24px;
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
-  .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
     padding-inline-end: 48px;
     padding-inline-end: var(--size-48);
   }

package/src/Chips/Chip/Chip.less

@@ -137,8 +137,7 @@
     &.np-chip--removable {
       position: relative;
 
-      .np-text-body-default-bold,
-      .wds-text-body-default-bold {
+      .np-text-body-default-bold {
         padding-right: var(--size-24);
 
         @media (--screen-400-zoom) {

package/src/Decision/Decision.css

@@ -1,8 +1,7 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small .np-text-title-subsection,
-.np-decision__tile--small .wds-text-title-subsection {
+.np-decision__tile--small .np-text-title-subsection {
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;

package/src/Decision/Decision.less

@@ -4,8 +4,7 @@
   }
 
   &__tile--small {
-    .np-text-title-subsection,
-    .wds-text-title-subsection {
+    .np-text-title-subsection {
       font-size: var(--font-size-16);
       line-height: var(--line-height-title);
     }

package/src/DefinitionList/_stories/DefinitionList.story.tsx

@@ -32,7 +32,7 @@ const definitions = [
   },
   {
     title: 'Use wrapper elements to style',
-    value: <span className="wds-text-title-subsection">89.45GBP</span>,
+    value: <span className="np-text-title-subsection">89.45GBP</span>,
     key: 'second',
   },
   {

package/src/Display/_stories/Display.story.tsx

@@ -118,40 +118,26 @@ export const Basic = () => {
 export const Numbers = () => {
   return (
     <>
-      <Title type={Typography.TITLE_SCREEN}>Display Number Small</Title>
+      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={1050.6} currency="UAH" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={10.17} currency="JPY" />
       </Display>
-
-      <Title type={Typography.TITLE_SCREEN}>Display Number Medium</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={0.01} currency="EUR" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
+      <Display type={Typography.DISPLAY_NUMBER}>
         <Money amount={1000000} currency="EUR" />
       </Display>
-
-      <Title type={Typography.TITLE_SCREEN}>Display Number Large</Title>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
-        <Money amount={1000000} currency="GBP" />
-      </Display>
-      <hr />
-      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
-        <Money amount={1050.6} currency="UAH" />
-      </Display>
-
-      <Title type={Typography.TITLE_SCREEN}>Display Number (Deprecated)</Title>
       <hr />
       <Display type={Typography.DISPLAY_NUMBER}>
-        <Money amount={1050.6} currency="UAH" />
+        <Money amount={1000000} currency="GBP" />
       </Display>
     </>
   );

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx

@@ -40,7 +40,7 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
                 className={clsx(
                   'np-animated-label',
                   'btn-unstyled',
-                  'wds-text-body-large-bold',
+                  'np-text-body-large-bold',
                   className,
                 )}
                 onClick={() => setShowSteps(true)}

package/src/Inputs/Input/Input.css

@@ -1,65 +1,4 @@
-.np-form-control--size-lg {
-  margin-block-end: initial;
-}
-.np-form-control--size-sm {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .np-form-control--size-sm {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .np-form-control--size-sm {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .np-form-control--size-sm {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-form-control--size-sm {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .np-form-control--size-sm {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.np-form-control--size-auto,
-.np-form-control--size-md {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .np-form-control--size-auto,
-  .np-form-control--size-md {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .np-form-control--size-auto,
-    .np-form-control--size-md {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .np-form-control--size-auto,
-    .np-form-control--size-md {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-form-control--size-auto,
-  .np-form-control--size-md {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .np-form-control--size-auto,
-    .np-form-control--size-md {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -100,6 +39,12 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
@@ -141,6 +86,12 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
+  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;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
@@ -180,6 +131,12 @@
   }
 }
 .np-form-control--size-md {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
@@ -219,10 +176,57 @@
   }
 }
 .np-form-control--size-lg {
+  margin: 0;
+  color: #37517e;
+  color: var(--color-content-primary);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  word-wrap: break-word;
   margin-block-end: initial;
+  font-size: 1.375rem;
+  font-size: var(--font-size-22);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
   block-size: 72px !important;
   block-size: var(--size-72) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .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 {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .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) {
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
+}
 .np-input::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);

package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx

@@ -122,9 +122,9 @@ export function SelectInputBottomSheet({
                         )}
                       >
                         {title ? (
-                          <h2 className="np-bottom-sheet-v2-title wds-text-title-body">{title}</h2>
+                          <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
                         ) : null}
-                        <div className="np-bottom-sheet-v2-body wds-text-body-default">
+                        <div className="np-bottom-sheet-v2-body np-text-body-default">
                           {children}
                         </div>
                       </div>

package/src/Inputs/SelectInput/Option/SelectInputOption.tsx

@@ -34,7 +34,7 @@ export function SelectInputOption<T = string>({
       disabled={disabled}
       className={({ active, disabled: uiDisabled }) =>
         clsx(
-          'np-select-input-option-container wds-text-body-large',
+          'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
           uiDisabled && 'np-select-input-option-container--disabled',
         )