@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/_deprecated/Card/Card.css

@@ -8,7 +8,9 @@
   border: 0;
 }
 .np-card--expanded {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
+  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
 }
 .np-theme-personal .np-card--expanded {
@@ -24,13 +26,16 @@
 }
 @media (min-width: 320.02px) {
   .np-card--has-icon .np-card__content {
+    padding-block: 24px;
     padding-block: var(--size-24);
+    padding-inline: 72px;
     padding-inline: var(--size-72);
   }
 }
 @media (min-width: 320.02px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin-block: 0;
+    margin-inline: 72px;
     margin-inline: var(--size-72);
   }
 }
@@ -47,25 +52,32 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-card__content {
+  padding-block: 24px;
   padding-block: var(--size-24);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-theme-personal .np-card__content {
+  padding-block: 16px 24px;
   padding-block: var(--size-16) var(--size-24);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-card__divider {
   transition: margin 0.35s ease;
 }
 .np-card__divider--expanded {
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   block-size: 1px;
   margin-block: 0;
+  margin-inline: 16px;
   margin-inline: var(--size-16);
 }
 .np-theme-personal .np-card {
   overflow: visible;
   overflow: initial;
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -75,6 +87,7 @@
   margin: 0;
 }
 .np-theme-personal .np-card__button {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   --ring-outline-width: 3px;
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
@@ -87,7 +100,9 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-theme-personal .np-card--expanded .np-card__button {
+  border-start-start-radius: 16px;
   border-start-start-radius: var(--radius-medium);
+  border-start-end-radius: 16px;
   border-start-end-radius: var(--radius-medium);
   border-end-end-radius: 0;
   border-end-start-radius: 0;

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -1,4 +1,5 @@
 .critical-comms {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   overflow: hidden;
 }
@@ -7,17 +8,19 @@
   color: var(--color-sentiment-content-primary);
   margin-block-end: 0;
 }
-.critical-comms .alert .np-text-title-body,
-.critical-comms .alert .wds-text-title-body {
+.critical-comms .alert .np-text-title-body {
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .critical-comms .alert__message .alert__action {
+  margin-block-start: 16px;
   margin-block-start: var(--size-16);
 }
 .critical-comms .wds-Button {
@@ -54,6 +57,7 @@
   .critical-comms .alert-negative .alert__message .alert__action,
   .critical-comms .alert-neutral .alert__message .alert__action {
     margin-block-start: 0;
+    margin-inline-start: 16px;
     margin-inline-start: var(--padding-small);
   }
 }

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less

@@ -7,8 +7,7 @@
     color: var(--color-sentiment-content-primary);
     margin-bottom: 0;
 
-    .np-text-title-body,
-    .wds-text-title-body {
+    .np-text-title-body {
       color: var(--color-sentiment-content-primary);
     }
   }

package/src/_deprecated/NavigationOption/NavigationOption.css

@@ -14,9 +14,11 @@
   text-decoration: none;
 }
 .np-navigation-option:not(.disabled):not(:disabled):hover .tw-avatar__content {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .np-navigation-option:not(.disabled):not(:disabled):hover .tw-avatar__content {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-navigation-option .circle {
@@ -41,11 +43,14 @@
 }
 .np-navigation-option__chevron:not(.disabled):not(:disabled):hover,
 .np-navigation-option__chevron:not(.disabled):not(:disabled):focus {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-navigation-option__chevron:not(.disabled):not(:disabled):active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .np-theme-personal .np-option__container-aligned {
+  inline-size: calc(100% + 2 * 16px);
   inline-size: calc(100% + 2 * var(--space-content-horizontal));
 }

package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx

@@ -74,7 +74,7 @@ export const Variants: StoryObj<StoryArgs> = {
   render: ({ hasTitleOnly, ...args }: StoryArgs) => (
     <div>
       <div className="m-b-2">
-        <div className="wds-text-title-body m-b-1">Has Title Only</div>
+        <div className="title-4 m-b-1">Has Title Only</div>
         <NavigationOption
           {...args}
           content={null}
@@ -83,7 +83,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="wds-text-title-body m-b-1">Full Content</div>
+        <div className="title-4 m-b-1">Full Content</div>
         <NavigationOption
           {...args}
           content={hasTitleOnly ? null : args.content}
@@ -92,7 +92,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="wds-text-title-body m-b-1">With Icon</div>
+        <div className="title-4 m-b-1">With Icon</div>
         <NavigationOption
           {...args}
           media={<BankIcon size={24} />}
@@ -101,7 +101,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="wds-text-title-body m-b-1">With Icon Avatar</div>
+        <div className="title-4 m-b-1">With Icon Avatar</div>
         <NavigationOption
           {...args}
           showMediaCircle={false}
@@ -115,7 +115,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="wds-text-title-body m-b-1">With Contact Avatar</div>
+        <div className="title-4 m-b-1">With Contact Avatar</div>
         <NavigationOption
           {...args}
           showMediaCircle={false}
@@ -125,7 +125,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-t-4 m-b-2">
-        <div className="wds-text-title-body m-b-1">Not recommended usage</div>
+        <div className="title-4 m-b-1">Not recommended usage</div>
         <p>
           Rendering an Avatar on top of showMediaCircle causes the Avatar background-colour and the
           circle background-colour to overlap which also causes clipping issues with the Badge

package/src/_deprecated/Select/Select.css

@@ -1,36 +1,16 @@
-.np-dropdown-menu > li > a {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .np-dropdown-menu > li > a {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .np-dropdown-menu > li > a {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .np-dropdown-menu > li > a {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-dropdown-menu > li > a {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .np-dropdown-menu > li > a {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.np-select .np-dropdown-toggle {
+.np-select .np-dropdown-toggle {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   overflow: hidden;
+  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
   text-align: start;
   text-overflow: ellipsis;
@@ -40,9 +20,11 @@
   outline: none;
 }
 .np-theme-personal .np-select .np-dropdown-toggle {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .has-error .np-select .np-dropdown-toggle {
+  border: 1px solid #e74848;
   border: 1px solid var(--color-interactive-negative);
 }
 .np-select .np-dropdown-toggle-navy {
@@ -54,37 +36,48 @@
   --color-interactive-secondary-hover: #2e4369;
 }
 .np-select .np-dropdown-toggle.np-btn-sm {
+  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
 }
 .np-select .np-dropdown-toggle.np-btn-md {
+  padding-inline-end: 40px;
   padding-inline-end: var(--size-40);
 }
 .np-select .np-dropdown-toggle.np-btn-lg {
+  padding-inline-end: 48px;
   padding-inline-end: var(--size-48);
 }
 .np-select .np-dropdown-toggle .np-select-chevron {
   margin: 0;
   position: absolute;
+  inset-inline-end: 16px;
   inset-inline-end: var(--size-16);
+  inset-block-start: 16px;
   inset-block-start: var(--size-16);
 }
 .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
+  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
+  inset-block-start: 8px;
   inset-block-start: var(--size-8);
 }
 .np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron {
   inset-block-start: 27px;
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .np-option-content {
@@ -94,25 +87,30 @@
   max-inline-size: calc(100% - 32px);
 }
 .np-dropdown-menu-desktop {
+  max-block-size: 70svh;
   max-block-size: var(--np-panel-available-height, 70svh);
   min-inline-size: 160px;
   max-inline-size: calc(100vw - 32px);
 }
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
+    max-block-size: 592px;
     max-block-size: var(--np-panel-available-height, 592px);
   }
 }
 .np-dropdown-menu {
+  border-radius: 10px;
   border-radius: var(--radius-small);
   overflow: auto;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: start;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .np-dropdown-menu {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-dropdown-menu-sm {
@@ -125,7 +123,9 @@
   inline-size: 420px;
 }
 .np-dropdown-menu .np-dropdown-item--focused {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-dropdown-menu .np-dropdown-item > a {
@@ -137,14 +137,25 @@
   text-decoration: none;
   white-space: nowrap;
   display: block;
+  padding-block: 12px;
   padding-block: var(--size-12);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
   clear: both;
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  color: #37517e;
   color: var(--color-content-primary);
+  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;
 }
 .np-theme-personal .np-dropdown-menu > li > a {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -180,7 +191,9 @@
   border-start-start-radius: 3px;
 }
 .np-theme-personal .np-dropdown-menu > li:first-child > a {
+  border-start-end-radius: 10px;
   border-start-end-radius: var(--radius-small);
+  border-start-start-radius: 10px;
   border-start-start-radius: var(--radius-small);
 }
 .np-dropdown-menu > li:last-child > a {
@@ -188,12 +201,16 @@
   border-end-start-radius: 3px;
 }
 .np-theme-personal .np-dropdown-menu > li:last-child > a {
+  border-end-end-radius: 10px;
   border-end-end-radius: var(--radius-small);
+  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
 }
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):focus {
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
@@ -213,12 +230,8 @@
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
-.np-dropdown-menu > .active > a .body-2,
-.np-dropdown-menu > .selected > a .body-2,
 .np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default,
-.np-dropdown-menu > .active > a .wds-text-body-default,
-.np-dropdown-menu > .selected > a .wds-text-body-default {
+.np-dropdown-menu > .selected > a .np-text-body-default {
   color: #c9cbce;
 }
 .np-dropdown-menu .np-select-filter,
@@ -229,30 +242,37 @@
   block-size: 1px;
   margin: 0;
   overflow: hidden;
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-dropdown-menu .np-dropdown-header {
+  padding-block: 8px;
   padding-block: var(--size-8);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
-  white-space: nowrap;
+  color: #5d7079;
   color: var(--color-content-secondary);
   display: block;
-  font-size: var(--wds-font-size-body);
-  font-weight: var(--wds-font-weight-body-regular);
-  line-height: var(--wds-line-height-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
+  white-space: nowrap;
 }
 .np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
 .np-select img,
 .np-dropdown-menu img {
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   display: inline-block;
   vertical-align: middle;
 }
 .np-select .np-text-body-default,
-.np-dropdown-menu .np-text-body-default,
-.np-select .wds-text-body-default,
-.np-dropdown-menu .wds-text-body-default {
+.np-dropdown-menu .np-text-body-default {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select .tw-icon-search,
@@ -268,9 +288,11 @@
   background-color: initial;
   transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   border: none;
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
+  box-shadow: inset 0 0 0 2px #b5b7ba;
   box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
@@ -310,13 +332,7 @@
 .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
+.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -324,8 +340,7 @@
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {

package/src/_deprecated/Select/Select.less

@@ -18,7 +18,7 @@
     border: 1px solid var(--color-interactive-secondary);
     border-radius: var(--radius-small);
     color: var(--color-content-primary);
-    font-weight: var(--wds-font-weight-body-regular);
+    font-weight: var(--font-weight-regular);
     overflow: hidden;
     padding-left: var(--size-16);
     text-align: left;
@@ -170,7 +170,7 @@
       border-radius: var(--radius-small);
     }
 
-    .wds-text-body-default;
+    .np-text-body-default;
   }
 
   > li:first-child > a {
@@ -215,9 +215,7 @@
       color: inherit;
     }
 
-    .body-2,
-    .np-text-body-default,
-    .wds-text-body-default {
+    .np-text-body-default {
       color: @color-navy-content-secondary;
     }
   }
@@ -240,9 +238,10 @@
     white-space: nowrap;
     color: var(--color-content-secondary);
     display: block;
-    font-size: var(--wds-font-size-body);
-    font-weight: var(--wds-font-weight-body-regular);
-    line-height: var(--wds-line-height-body);
+    font-size: var(--font-size-14);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-body);
+    white-space: nowrap;
   }
 }
 
@@ -256,8 +255,7 @@
     vertical-align: middle;
   }
 
-  .np-text-body-default,
-  .wds-text-body-default {
+  .np-text-body-default {
     color: var(--color-content-secondary);
   }
 
@@ -315,8 +313,7 @@
         background-color: var(--color-background-neutral-active);
 
         .body-2,
-        .np-text-body-default,
-        .wds-text-body-default {
+        .np-text-body-default {
           color: var(--color-interactive-primary);
         }
       }
@@ -327,8 +324,7 @@
       background-color: var(--color-background-neutral-active) !important;
 
       .body-2,
-      .np-text-body-default,
-      .wds-text-body-default {
+      .np-text-body-default {
         color: var(--color-interactive-primary);
       }
     }

package/src/_deprecated/Select/Select.test.tsx

@@ -47,22 +47,6 @@ describe('Select', () => {
     await userEvent.click(button);
   };
 
-  describe('classNames', () => {
-    it('applies overrides keyed by the legacy and the WDS text class', () => {
-      render(
-        <Select
-          {...props}
-          classNames={{
-            'np-text-body-large': 'legacy-override',
-            'wds-text-body-large': 'wds-override',
-          }}
-        />,
-      );
-
-      expect(screen.getByRole('button')).toHaveClass('legacy-override', 'wds-override');
-    });
-  });
-
   describe('search property', () => {
     it('should focus input when dropdown is open', async () => {
       const { container } = render(<Select {...props} search />);

package/src/_deprecated/Select/Select.tsx

@@ -457,11 +457,7 @@ export default function Select({
   function HeaderOption({ children }: { children?: React.ReactNode }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-        className={clsx(
-          s('np-dropdown-header'),
-          s('np-text-title-group'),
-          s('wds-text-title-group'),
-        )}
+        className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
         onClick={stopPropagation}
         onKeyPress={stopPropagation}
       >
@@ -567,7 +563,6 @@ export default function Select({
         className={clsx(
           s('np-dropdown-toggle'),
           s('np-text-body-large'),
-          s('wds-text-body-large'),
           inverse ? s('np-dropdown-toggle-navy') : null,
         )}
         // reset Button's styles

package/src/_deprecated/Summary/Summary.css

@@ -7,7 +7,8 @@
 .np-summary__title {
   margin-block-start: 2px;
   line-height: calc(22 / 16);
-  font-weight: var(--wds-font-weight-body-bold);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
   justify-content: space-between;
   margin-block-start: 0;
 }
@@ -27,6 +28,7 @@
 }
 .np-summary__icon {
   position: relative;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-summary__icon .np-summary-icon__done {
@@ -39,22 +41,30 @@
   background-color: transparent;
   border-radius: 50%;
   position: absolute;
+  inset-inline-end: calc(8px * -1);
   inset-inline-end: calc(var(--size-8) * -1);
   inset-block-end: -6px;
 }
 .np-summary__description {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
   line-height: calc(20 / 14);
+  color: #5d7079;
   color: var(--color-content-secondary);
+  padding-inline-end: calc(24px + 8px);
   padding-inline-end: calc(var(--size-24) + var(--size-8));
 }
 .np-summary__description-icon {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-summary__action {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-summary + .np-summary {
+  margin-block-start: 24px;
   margin-block-start: var(--size-24);
 }

package/src/_deprecated/Summary/Summary.less

@@ -8,7 +8,7 @@
   &__title {
     margin-top: 2px;
     line-height: calc(22 / 16);
-    font-weight: var(--wds-font-weight-body-bold);
+    font-weight: var(--font-weight-semi-bold);
     justify-content: space-between;
     margin-top: 0;
 
@@ -59,7 +59,7 @@
 
   &__description {
     margin-top: var(--size-4);
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     line-height: calc(20 / 14);
 
     color: var(--color-content-secondary);

package/src/common/BaseCard/BaseCard.css

@@ -9,9 +9,13 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--Card-background-color);
+  border-radius: 32px;
   border-radius: var(--Card-border-radius);
+  gap: 16px;
   gap: var(--Card-flex-gap);
+  padding: 24px;
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;