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

package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -1,5 +1,4 @@
 .critical-comms {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   overflow: hidden;
 }
@@ -8,19 +7,17 @@
   color: var(--color-sentiment-content-primary);
   margin-block-end: 0;
 }
-.critical-comms .alert .np-text-title-body {
+.critical-comms .alert .np-text-title-body,
+.critical-comms .alert .wds-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 {
@@ -57,7 +54,6 @@
   .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/build/styles/_deprecated/NavigationOption/NavigationOption.css

@@ -14,11 +14,9 @@
   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 {
@@ -43,14 +41,11 @@
 }
 .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/build/styles/_deprecated/Select/Select.css

@@ -1,16 +1,36 @@
-.np-select .np-dropdown-toggle {
-  background-color: #ffffff;
+.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 {
   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: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   overflow: hidden;
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
   text-align: start;
   text-overflow: ellipsis;
@@ -20,11 +40,9 @@
   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 {
@@ -36,48 +54,37 @@
   --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 {
@@ -87,30 +94,25 @@
   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 {
@@ -123,9 +125,7 @@
   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,25 +137,14 @@
   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) {
@@ -191,9 +180,7 @@
   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 {
@@ -201,16 +188,12 @@
   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 {
@@ -230,8 +213,12 @@
 .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 > .selected > a .np-text-body-default,
+.np-dropdown-menu > .active > a .wds-text-body-default,
+.np-dropdown-menu > .selected > a .wds-text-body-default {
   color: #c9cbce;
 }
 .np-dropdown-menu .np-select-filter,
@@ -242,37 +229,30 @@
   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);
-  color: #5d7079;
+  white-space: nowrap;
   color: var(--color-content-secondary);
   display: block;
-  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;
+  font-size: var(--wds-font-size-body);
+  font-weight: var(--wds-font-weight-body-regular);
+  line-height: var(--wds-line-height-body);
 }
 .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 {
-  color: #5d7079;
+.np-dropdown-menu .np-text-body-default,
+.np-select .wds-text-body-default,
+.np-dropdown-menu .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .np-select .tw-icon-search,
@@ -288,11 +268,9 @@
   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,
@@ -332,7 +310,13 @@
 .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 .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 {
   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 {
@@ -340,7 +324,8 @@
   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 .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 {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {

package/build/styles/_deprecated/Summary/Summary.css

@@ -7,8 +7,7 @@
 .np-summary__title {
   margin-block-start: 2px;
   line-height: calc(22 / 16);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   justify-content: space-between;
   margin-block-start: 0;
 }
@@ -28,7 +27,6 @@
 }
 .np-summary__icon {
   position: relative;
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-summary__icon .np-summary-icon__done {
@@ -41,30 +39,22 @@
   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: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   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/build/styles/common/BaseCard/BaseCard.css

@@ -9,13 +9,9 @@
   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;

package/build/styles/common/BottomSheet/BottomSheet.css

@@ -6,7 +6,6 @@
 }
 .np-bottom-sheet--top-bar {
   cursor: grab;
-  padding-block: 8px calc(16px + 4px);
   padding-block: var(--size-8) calc(var(--size-16) + var(--size-4));
   padding-inline: 0;
   display: flex;
@@ -24,20 +23,16 @@
 .np-bottom-sheet--handler {
   inline-size: 40px;
   block-size: 4px;
-  background: #c9cbce;
   background: var(--color-interactive-secondary);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-bottom-sheet--close-btn {
   position: absolute;
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
 }
 .np-bottom-sheet--content {
   overflow-y: auto;
   padding-block: 0;
-  padding-inline: 16px;
   padding-inline: var(--space-content-horizontal);
   padding-block-end: env(safe-area-inset-bottom);
 }
@@ -45,21 +40,15 @@
   box-shadow: 0 4px 40px rgba(69, 71, 69, 0.2);
 }
 .np-theme-personal .np-bottom-sheet {
-  border-start-start-radius: 32px;
   border-start-start-radius: var(--radius-xlarge, 32px);
-  border-start-end-radius: 32px;
   border-start-end-radius: var(--radius-xlarge, 32px);
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   margin-block: 0px;
-  margin-inline: 8px;
   margin-inline: var(--size-8);
-  inline-size: calc(100% - 16px) !important;
   inline-size: calc(100% - var(--size-16)) !important;
 }
 .np-theme-personal .np-bottom-sheet--content {
-  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }

package/build/styles/common/Circle/Circle.css

@@ -1,5 +1,4 @@
 .np-circle {
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inline-size: var(--circle-size);
   block-size: var(--circle-size);
@@ -7,8 +6,7 @@
   --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   line-height: 1;
 }
 .np-circle .np-display {
@@ -20,7 +18,6 @@
 }
 .np-circle img,
 .np-circle .wds-flag {
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inline-size: 100%;
   block-size: 100%;
@@ -37,7 +34,6 @@
   inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
 }

package/build/styles/common/CloseButton/CloseButton.css

@@ -1,86 +1,65 @@
 .np-close-button {
   transition: color 0.15s ease-in-out;
-  color: #00a2dd;
   color: var(--color-interactive-accent);
   border: none;
   background: none;
   padding: 0;
-  block-size: 16px;
   block-size: var(--size-16);
   --ring-outline-offset: 0;
 }
 .np-close-button--large,
 .np-close-button--x-large {
-  block-size: 24px;
   block-size: var(--size-24);
 }
 .np-close-button:hover {
-  color: #008fc9;
   color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .np-close-button {
   color: var(--color-interactive-primary);
-  block-size: 32px;
   block-size: var(--size-32);
-  inline-size: 32px;
   inline-size: var(--size-32);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   transition: background-color 0.1s ease;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button {
-    block-size: 64px;
     block-size: var(--size-64);
-    inline-size: 64px;
     inline-size: var(--size-64);
   }
 }
 .np-theme-personal .np-close-button--x-small {
-  block-size: 24px;
   block-size: var(--size-24);
-  inline-size: 24px;
   inline-size: var(--size-24);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-small {
-    block-size: 48px;
     block-size: var(--size-48);
-    inline-size: 48px;
     inline-size: var(--size-48);
   }
 }
 .np-theme-personal .np-close-button--large {
-  block-size: 40px;
   block-size: var(--size-40);
-  inline-size: 40px;
   inline-size: var(--size-40);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--large {
-    block-size: 80px;
     block-size: var(--size-80);
-    inline-size: 80px;
     inline-size: var(--size-80);
   }
 }
 .np-theme-personal .np-close-button--x-large {
-  block-size: 48px;
   block-size: var(--size-48);
-  inline-size: 48px;
   inline-size: var(--size-48);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-large {
-    block-size: 96px;
     block-size: var(--size-96);
-    inline-size: 96px;
     inline-size: var(--size-96);
   }
 }

package/build/styles/common/Option/Option.css

@@ -1,6 +1,5 @@
 .np-option:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 0;
   outline-offset: var(--ring-outline-offset);
   --ring-outline-offset: 0;
 }
@@ -8,40 +7,29 @@
   outline: none;
 }
 .np-option .circle-sm {
-  inline-size: 40px;
   inline-size: var(--size-40);
-  block-size: 40px;
   block-size: var(--size-40);
 }
 .np-option__title {
-  color: #37517e;
   color: var(--color-content-primary);
   font-size: 1rem;
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   letter-spacing: 0;
-  line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body);
   margin: 0;
 }
 .np-option__body {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  color: #5d7079;
   color: var(--color-content-secondary);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-size: var(--wds-font-size-body);
+  font-weight: var(--wds-font-weight-body-regular);
   line-height: 1.42857;
 }
 .np-option__sm-media.decision .media-left {
   display: block;
 }
 .np-option__no-media-circle {
-  min-inline-size: 48px;
   min-inline-size: var(--size-48);
-  max-inline-size: 64px;
   max-inline-size: var(--size-64);
   display: flex;
   justify-content: center;
@@ -58,58 +46,44 @@ button.np-option {
   overflow: visible;
 }
 .np-theme-personal .np-option .circle-sm {
-  inline-size: 48px;
   inline-size: var(--size-48);
-  block-size: 48px;
   block-size: var(--size-48);
-  line-height: 48px;
   line-height: var(--size-48);
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-option .circle-sm {
-    inline-size: 96px;
     inline-size: var(--size-96);
-    block-size: 96px;
     block-size: var(--size-96);
-    line-height: 96px;
     line-height: var(--size-96);
   }
 }
 .np-theme-personal .np-option__body {
-  margin-block: 4px 0;
   margin-block: var(--size-4) 0;
   margin-inline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .np-theme-personal .np-option__container-aligned {
-  margin-inline-end: calc(-1 * 16px);
   margin-inline-end: calc(-1 * var(--space-content-horizontal));
-  margin-inline-start: calc(-1 * 16px);
   margin-inline-start: calc(-1 * var(--space-content-horizontal));
   max-inline-size: none;
   inline-size: auto;
 }
 @media (min-width: 600px) {
   .np-theme-personal .np-option {
-    border-radius: 10px;
     border-radius: var(--radius-small);
   }
 }
 .np-theme-personal .np-option-additional-content {
-  margin-inline-start: 80px;
   margin-inline-start: var(--size-80);
-  margin-inline-end: 16px;
   margin-inline-end: var(--size-16);
   margin-block-start: -10px;
-  padding-block-end: 16px;
   padding-block-end: var(--size-16);
   max-inline-size: -moz-fit-content;
   max-inline-size: fit-content;
 }
 @media (max-width: 320px) {
   .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
-    margin-inline-start: 16px;
     margin-inline-start: var(--size-16);
   }
   .np-theme-personal .np-option-additional-content {