npm - scu-web-components - Versions diffs - 0.0.76 → 0.0.77 - Mend

scu-web-components 0.0.76 → 0.0.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1341) hide show

package/dist/tokens/source/componentScssMixins.scss CHANGED Viewed

@@ -5619,16 +5619,16 @@
 }
 @mixin comp-scw-icon-v2-default-icon-vector--sizing {
-  width: 41.6666px;
-  height: 41.6667px;
+  width: 41.667px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-default-icon-vector--width {
-  width: 41.6666px;
+  width: 41.667px;
 }
 @mixin comp-scw-icon-v2-default-icon-vector--height {
-  height: 41.6667px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-default-icon-vector--padding {
@@ -5644,26 +5644,26 @@
 @mixin comp-scw-icon-v2-default-icon-vector--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  top: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.416650390625 );
+  left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-default-icon-vector--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  margin-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.416650390625 );
+  margin-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-default-icon-vector--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  padding-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.416650390625 );
+  padding-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
@@ -5800,16 +5800,16 @@
 }
 @mixin comp-scw-icon-v2-state-hover-icon-vector--sizing {
-  width: 41.6666px;
-  height: 41.6667px;
+  width: 41.667px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-state-hover-icon-vector--width {
-  width: 41.6666px;
+  width: 41.667px;
 }
 @mixin comp-scw-icon-v2-state-hover-icon-vector--height {
-  height: 41.6667px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-state-hover-icon-vector--padding {
@@ -5825,26 +5825,26 @@
 @mixin comp-scw-icon-v2-state-hover-icon-vector--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  top: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.416650390625 );
+  left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-state-hover-icon-vector--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  margin-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.416650390625 );
+  margin-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-state-hover-icon-vector--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  padding-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.416650390625 );
+  padding-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
@@ -5982,16 +5982,16 @@
 }
 @mixin comp-scw-icon-v2-state-focused-icon-vector--sizing {
-  width: 41.6666px;
-  height: 41.6665px;
+  width: 41.667px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-state-focused-icon-vector--width {
-  width: 41.6666px;
+  width: 41.667px;
 }
 @mixin comp-scw-icon-v2-state-focused-icon-vector--height {
-  height: 41.6665px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-state-focused-icon-vector--padding {
@@ -6007,26 +6007,26 @@
 @mixin comp-scw-icon-v2-state-focused-icon-vector--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  top: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-state-focused-icon-vector--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  margin-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-state-focused-icon-vector--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  padding-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
@@ -6163,16 +6163,16 @@
 }
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--sizing {
-  width: 41.6666px;
-  height: 41.6665px;
+  width: 41.667px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--width {
-  width: 41.6666px;
+  width: 41.667px;
 }
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--height {
-  height: 41.6665px;
+  height: 41.666px;
 }
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--padding {
@@ -6188,26 +6188,26 @@
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  top: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  margin-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
 @mixin comp-scw-icon-v2-state-disabled-icon-vector--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  padding-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-left: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4166015625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.416796875 );
 }
@@ -6407,16 +6407,16 @@
 }
 @mixin comp-scw-icon-default-icon-vector--sizing {
-  width: 41.6665px;
-  height: 41.6666px;
+  width: 41.6666px;
+  height: 41.667px;
 }
 @mixin comp-scw-icon-default-icon-vector--width {
-  width: 41.6665px;
+  width: 41.6666px;
 }
 @mixin comp-scw-icon-default-icon-vector--height {
-  height: 41.6666px;
+  height: 41.667px;
 }
 @mixin comp-scw-icon-default-icon-vector--padding {
@@ -6432,26 +6432,26 @@
 @mixin comp-scw-icon-default-icon-vector--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  right: calc( var( --scw-spacing-1 ) * 0.41669921875 );
-  top: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
+  left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
+  right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
+  top: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.4166015625 );
 }
 @mixin comp-scw-icon-default-icon-vector--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  margin-right: calc( var( --scw-spacing-1 ) * 0.41669921875 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
+  margin-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.4166015625 );
 }
 @mixin comp-scw-icon-default-icon-vector--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 0.416650390625 );
-  padding-right: calc( var( --scw-spacing-1 ) * 0.41669921875 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
+  padding-left: calc( var( --scw-spacing-1 ) * 0.41666259765625 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.4166748046875 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.41669921875 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.4166015625 );
 }
@@ -31190,11 +31190,11 @@
   $themeVar: false
 ) {
   text-align: LEFT;
-  font: var( --scw-type-text-bold-condensed-10-font );
+  font: var( --scw-type-text-bold-10-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
   flex: 1;
 }
@@ -31314,9 +31314,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-09-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
   flex: 1;
 }
@@ -31436,9 +31436,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-08-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
   flex: 1;
 }
@@ -32168,9 +32168,9 @@
   text-align: LEFT;
   font: 400 1.125rem/1.688rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
   flex: 1;
 }
@@ -32289,9 +32289,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-grey-03 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-03 );
   }
   border-radius: 6px 6px 0px 0px;
   align-self: stretch;
@@ -36455,7 +36455,7 @@
   $themeVar: false
 ) {
   text-align: LEFT;
-  font: var( --scw-type-text-bold-condensed-10-font );
+  font: var( --scw-type-text-bold-10-font );
   @if $themeVar {
     color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
@@ -48506,7 +48506,7 @@
 @mixin comp-scw-link-base--sizing {
   width: 392px;
-  height: 364px;
+  height: 454px;
 }
 @mixin comp-scw-link-base--width {
@@ -48514,7 +48514,7 @@
 }
 @mixin comp-scw-link-base--height {
-  height: 364px;
+  height: 454px;
 }
 @mixin comp-scw-link-base--padding {
@@ -48554,17 +48554,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-primary-07 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+    border-color: var( #{$borderThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    border-color: var( --scw-color-primary );
+    border-color: var( --scw-color-primary-07 );
   }
 }
@@ -48616,7 +48616,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: calc( var( --scw-spacing-1 ) * 30 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
 @mixin comp-scw-link-base-default--html-autolayout-padding {
@@ -48624,7 +48624,7 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: calc( var( --scw-spacing-1 ) * 30 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
@@ -48671,16 +48671,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-default-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -48749,9 +48749,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -48877,9 +48877,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    color: var( --scw-color-grey-10 );
+    color: var( --scw-color-primary-01 );
   }
 }
@@ -48965,18 +48965,18 @@
 @mixin comp-scw-link-base-default-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-default-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -49045,9 +49045,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -49105,17 +49105,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-primary-02 ) );
+    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-primary-06 ) );
   } @else {
-    background-color: var( --scw-color-primary-02 );
+    background-color: var( --scw-color-primary-06 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
+    border-color: var( #{$borderThemeVar}-06 , var( --scw-color-primary-06 ) );
   } @else {
-    border-color: var( --scw-color-primary-02 );
+    border-color: var( --scw-color-primary-06 );
   }
 }
@@ -49167,7 +49167,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 11.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 20.8 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
 @mixin comp-scw-link-base-state-hover--html-autolayout-padding {
@@ -49175,7 +49175,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 11.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 20.8 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
@@ -49222,16 +49222,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-state-hover-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -49300,9 +49300,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -49428,9 +49428,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    color: var( --scw-color-grey-10 );
+    color: var( --scw-color-primary-01 );
   }
 }
@@ -49516,18 +49516,18 @@
 @mixin comp-scw-link-base-state-hover-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-state-hover-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -49596,9 +49596,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -49656,17 +49656,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-primary-07 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+    border-color: var( #{$borderThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    border-color: var( --scw-color-primary );
+    border-color: var( --scw-color-primary-07 );
   }
   box-shadow: var( --scw-effect-focus-shadow );
 }
@@ -49719,7 +49719,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 20.4 );
   margin-right: calc( var( --scw-spacing-1 ) * 11.6 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
 @mixin comp-scw-link-base-state-focused--html-autolayout-padding {
@@ -49727,7 +49727,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 20.4 );
   padding-right: calc( var( --scw-spacing-1 ) * 11.6 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
@@ -49774,16 +49774,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-state-focused-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -49852,9 +49852,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -49980,9 +49980,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    color: var( --scw-color-grey-10 );
+    color: var( --scw-color-primary-01 );
   }
 }
@@ -50068,18 +50068,18 @@
 @mixin comp-scw-link-base-state-focused-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-state-focused-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -50148,9 +50148,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -50208,17 +50208,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
   } @else {
-    background-color: var( --scw-color-grey-095 );
+    background-color: var( --scw-color-grey-092 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
+    border-color: var( #{$borderThemeVar}-092 , var( --scw-color-grey-092 ) );
   } @else {
-    border-color: var( --scw-color-grey-095 );
+    border-color: var( --scw-color-grey-092 );
   }
 }
@@ -50270,7 +50270,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 29.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 2.4 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
 @mixin comp-scw-link-base-state-disabled--html-autolayout-padding {
@@ -50278,7 +50278,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 29.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 2.4 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 30.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 39.4 );
 }
@@ -50325,16 +50325,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-state-disabled-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -50531,9 +50531,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar}-08 , var( --scw-color-grey-08 ) );
+    color: var( #{$themeVar}-07 , var( --scw-color-grey-07 ) );
   } @else {
-    color: var( --scw-color-grey-08 );
+    color: var( --scw-color-grey-07 );
   }
 }
@@ -50619,18 +50619,18 @@
 @mixin comp-scw-link-base-state-disabled-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-state-disabled-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -50759,17 +50759,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
   } @else {
-    background-color: var( --scw-color-grey-095 );
+    background-color: var( --scw-color-grey-092 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
+    border-color: var( #{$borderThemeVar}-092 , var( --scw-color-grey-092 ) );
   } @else {
-    border-color: var( --scw-color-grey-095 );
+    border-color: var( --scw-color-grey-092 );
   }
 }
@@ -50821,7 +50821,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 29.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 2.4 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
 @mixin comp-scw-link-base-design-outline-state-disabled--html-autolayout-padding {
@@ -50829,7 +50829,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 29.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 2.4 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
@@ -50876,16 +50876,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-state-disabled-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -51082,9 +51082,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar}-08 , var( --scw-color-grey-08 ) );
+    color: var( #{$themeVar}-07 , var( --scw-color-grey-07 ) );
   } @else {
-    color: var( --scw-color-grey-08 );
+    color: var( --scw-color-grey-07 );
   }
 }
@@ -51170,18 +51170,18 @@
 @mixin comp-scw-link-base-design-outline-state-disabled-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-state-disabled-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -51318,9 +51318,9 @@
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+    border-color: var( #{$borderThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    border-color: var( --scw-color-primary );
+    border-color: var( --scw-color-grey-08 );
   }
 }
@@ -51372,7 +51372,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: calc( var( --scw-spacing-1 ) * 30 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
 @mixin comp-scw-link-base-design-outline--html-autolayout-padding {
@@ -51380,7 +51380,7 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: calc( var( --scw-spacing-1 ) * 30 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
@@ -51427,16 +51427,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -51505,9 +51505,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -51633,9 +51633,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
 }
@@ -51721,18 +51721,18 @@
 @mixin comp-scw-link-base-design-outline-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -51801,9 +51801,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -51869,9 +51869,9 @@
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+    border-color: var( #{$borderThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    border-color: var( --scw-color-primary );
+    border-color: var( --scw-color-grey-08 );
   }
   box-shadow: var( --scw-effect-focus-shadow );
 }
@@ -51924,7 +51924,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 20.4 );
   margin-right: calc( var( --scw-spacing-1 ) * 11.6 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
 @mixin comp-scw-link-base-design-outline-state-focused--html-autolayout-padding {
@@ -51932,7 +51932,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 20.4 );
   padding-right: calc( var( --scw-spacing-1 ) * 11.6 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
@@ -51979,16 +51979,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-state-focused-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -52057,9 +52057,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -52185,9 +52185,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
 }
@@ -52273,18 +52273,18 @@
 @mixin comp-scw-link-base-design-outline-state-focused-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-state-focused-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -52353,9 +52353,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -52413,17 +52413,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-092 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );
+    border-color: var( #{$borderThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    border-color: var( --scw-color-grey-10 );
+    border-color: var( --scw-color-grey-08 );
   }
 }
@@ -52475,7 +52475,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 11.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 20.8 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
 @mixin comp-scw-link-base-design-outline-state-hover--html-autolayout-padding {
@@ -52483,7 +52483,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 11.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 20.8 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 33.4 );
 }
@@ -52530,16 +52530,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-state-hover-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -52608,9 +52608,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -52736,9 +52736,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-font );
   @if $themeVar {
-    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-grey-10 );
+    color: var( --scw-color-grey-02 );
   }
 }
@@ -52824,18 +52824,18 @@
 @mixin comp-scw-link-base-design-outline-state-hover-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  margin-left: var( --scw-spacing-6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 @mixin comp-scw-link-base-design-outline-state-hover-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * -3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+  padding-left: var( --scw-spacing-6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
@@ -52904,9 +52904,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -53025,7 +53025,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 3.65 );
   margin-right: calc( var( --scw-spacing-1 ) * 31.65 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
 @mixin comp-scw-link-base-design-block-link--html-autolayout-padding {
@@ -53033,7 +53033,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 3.65 );
   padding-right: calc( var( --scw-spacing-1 ) * 31.65 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
@@ -53080,16 +53080,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -53158,9 +53158,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -53286,9 +53286,9 @@
   text-align: LEFT;
   font: 400 1rem/1.25rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
 }
@@ -53374,18 +53374,18 @@
 @mixin comp-scw-link-base-design-block-link-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  margin-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  padding-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -53454,9 +53454,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -53575,7 +53575,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 12.8 );
   margin-right: calc( var( --scw-spacing-1 ) * 22.5 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
 @mixin comp-scw-link-base-design-block-link-state-hover--html-autolayout-padding {
@@ -53583,7 +53583,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 12.8 );
   padding-right: calc( var( --scw-spacing-1 ) * 22.5 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
@@ -53630,16 +53630,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-state-hover-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -53708,9 +53708,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -53836,9 +53836,9 @@
   text-align: LEFT;
   font: 400 1rem/1.25rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar}-02 , var( --scw-color-primary-02 ) );
+    color: var( #{$themeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    color: var( --scw-color-primary-02 );
+    color: var( --scw-color-grey-04 );
   }
 }
@@ -53924,18 +53924,18 @@
 @mixin comp-scw-link-base-design-block-link-state-hover-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  margin-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-state-hover-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  padding-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -54004,9 +54004,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -54125,7 +54125,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 31.3 );
   margin-right: var( --scw-spacing-4 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
 @mixin comp-scw-link-base-design-block-link-state-disabled--html-autolayout-padding {
@@ -54133,7 +54133,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 31.3 );
   padding-right: var( --scw-spacing-4 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
@@ -54180,16 +54180,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-state-disabled-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -54258,9 +54258,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-08 );
   }
 }
@@ -54474,18 +54474,18 @@
 @mixin comp-scw-link-base-design-block-link-state-disabled-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  margin-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-state-disabled-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  padding-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -54554,9 +54554,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-08 );
   }
 }
@@ -54677,7 +54677,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 21.9 );
   margin-right: calc( var( --scw-spacing-1 ) * 13.4 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
 @mixin comp-scw-link-base-design-block-link-state-focused--html-autolayout-padding {
@@ -54685,7 +54685,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 21.9 );
   padding-right: calc( var( --scw-spacing-1 ) * 13.4 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 27.6 );
 }
@@ -54732,16 +54732,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-state-focused-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -54810,9 +54810,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -54938,9 +54938,9 @@
   text-align: LEFT;
   font: 400 1rem/1.25rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar}-02 , var( --scw-color-primary-02 ) );
+    color: var( #{$themeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    color: var( --scw-color-primary-02 );
+    color: var( --scw-color-grey-04 );
   }
 }
@@ -55026,18 +55026,18 @@
 @mixin comp-scw-link-base-design-block-link-state-focused-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  margin-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
 @mixin comp-scw-link-base-design-block-link-state-focused-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 6.7 );
-  padding-right: calc( var( --scw-spacing-1 ) * -4.8 );
-  padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-left: calc( var( --scw-spacing-1 ) * 4.3 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }
@@ -55106,9 +55106,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -55227,7 +55227,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 3.65 );
   margin-right: calc( var( --scw-spacing-1 ) * 31.65 );
   margin-top: calc( var( --scw-spacing-1 ) * 20.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
 }
 @mixin comp-scw-link-base-design-link--html-autolayout-padding {
@@ -55235,7 +55235,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 3.65 );
   padding-right: calc( var( --scw-spacing-1 ) * 31.65 );
   padding-top: calc( var( --scw-spacing-1 ) * 20.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
 }
@@ -55282,16 +55282,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -55360,9 +55360,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -55488,9 +55488,9 @@
   text-align: LEFT;
   font: 400 1rem/1.25rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
 }
@@ -55576,18 +55576,18 @@
 @mixin comp-scw-link-base-design-link-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  margin-right: var( --scw-spacing--4 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  padding-right: var( --scw-spacing--4 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -55656,9 +55656,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -55777,7 +55777,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 12.9 );
   margin-right: calc( var( --scw-spacing-1 ) * 22.4 );
   margin-top: calc( var( --scw-spacing-1 ) * 20.5 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 22.7 );
 }
 @mixin comp-scw-link-base-design-link-state-hover--html-autolayout-padding {
@@ -55785,7 +55785,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 12.9 );
   padding-right: calc( var( --scw-spacing-1 ) * 22.4 );
   padding-top: calc( var( --scw-spacing-1 ) * 20.5 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 22.7 );
 }
@@ -55832,16 +55832,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-state-hover-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -55910,9 +55910,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -56038,9 +56038,9 @@
   text-align: LEFT;
   font: 400 1rem/1.25rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar}-02 , var( --scw-color-primary-02 ) );
+    color: var( #{$themeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    color: var( --scw-color-primary-02 );
+    color: var( --scw-color-grey-04 );
   }
 }
@@ -56126,18 +56126,18 @@
 @mixin comp-scw-link-base-design-link-state-hover-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  margin-right: var( --scw-spacing--4 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-state-hover-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  padding-right: var( --scw-spacing--4 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -56206,9 +56206,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -56327,7 +56327,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 31.3 );
   margin-right: var( --scw-spacing-4 );
   margin-top: calc( var( --scw-spacing-1 ) * 20.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
 }
 @mixin comp-scw-link-base-design-link-state-disabled--html-autolayout-padding {
@@ -56335,7 +56335,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 31.3 );
   padding-right: var( --scw-spacing-4 );
   padding-top: calc( var( --scw-spacing-1 ) * 20.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
 }
@@ -56382,16 +56382,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-state-disabled-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -56460,9 +56460,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-08 );
   }
 }
@@ -56676,18 +56676,18 @@
 @mixin comp-scw-link-base-design-link-state-disabled-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  margin-right: var( --scw-spacing--4 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-state-disabled-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  padding-right: var( --scw-spacing--4 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -56756,9 +56756,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-08 , var( --scw-color-grey-08 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-08 );
   }
 }
@@ -56879,7 +56879,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 22.1 );
   margin-right: calc( var( --scw-spacing-1 ) * 13.2 );
   margin-top: calc( var( --scw-spacing-1 ) * 20.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 22.6 );
 }
 @mixin comp-scw-link-base-design-link-state-focused--html-autolayout-padding {
@@ -56887,7 +56887,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 22.1 );
   padding-right: calc( var( --scw-spacing-1 ) * 13.2 );
   padding-top: calc( var( --scw-spacing-1 ) * 20.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 22.6 );
 }
@@ -56934,16 +56934,16 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-state-focused-left-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -57012,9 +57012,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -57140,9 +57140,9 @@
   text-align: LEFT;
   font: 400 1rem/1.25rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar}-02 , var( --scw-color-primary-02 ) );
+    color: var( #{$themeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    color: var( --scw-color-primary-02 );
+    color: var( --scw-color-grey-04 );
   }
 }
@@ -57228,18 +57228,18 @@
 @mixin comp-scw-link-base-design-link-state-focused-right-icon--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  margin-right: var( --scw-spacing--4 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  margin-bottom: 0px;
+  margin-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
 @mixin comp-scw-link-base-design-link-state-focused-right-icon--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 5.9 );
-  padding-right: var( --scw-spacing--4 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.2 );
-  padding-bottom: 0px;
+  padding-left: calc( var( --scw-spacing-1 ) * 4.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * -2.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
 }
@@ -57308,9 +57308,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -57368,17 +57368,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-primary-07 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+    border-color: var( #{$borderThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    border-color: var( --scw-color-primary );
+    border-color: var( --scw-color-primary-07 );
   }
 }
@@ -57430,7 +57430,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 3.7 );
   margin-right: calc( var( --scw-spacing-1 ) * 31.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
 @mixin comp-scw-link-base-design-solid-icon--html-autolayout-padding {
@@ -57438,7 +57438,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 3.7 );
   padding-right: calc( var( --scw-spacing-1 ) * 31.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
@@ -57563,9 +57563,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -57623,9 +57623,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
   } @else {
-    background-color: var( --scw-color-grey-095 );
+    background-color: var( --scw-color-grey-092 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
@@ -57685,7 +57685,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 31.4 );
   margin-right: var( --scw-spacing-4 );
   margin-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
 @mixin comp-scw-link-base-design-solid-icon-state-disabled--html-autolayout-padding {
@@ -57693,7 +57693,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 31.4 );
   padding-right: var( --scw-spacing-4 );
   padding-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
@@ -57818,9 +57818,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-08 , var( --scw-color-grey-08 ) );
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-grey-07 ) );
   } @else {
-    background-color: var( --scw-color-grey-08 );
+    background-color: var( --scw-color-grey-07 );
   }
 }
@@ -57878,17 +57878,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-primary-02 ) );
+    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-primary-06 ) );
   } @else {
-    background-color: var( --scw-color-primary-02 );
+    background-color: var( --scw-color-primary-06 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
+    border-color: var( #{$borderThemeVar}-06 , var( --scw-color-primary-06 ) );
   } @else {
-    border-color: var( --scw-color-primary-02 );
+    border-color: var( --scw-color-primary-06 );
   }
 }
@@ -57940,7 +57940,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 12.8 );
   margin-right: calc( var( --scw-spacing-1 ) * 22.6 );
   margin-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
 @mixin comp-scw-link-base-design-solid-icon-state-hover--html-autolayout-padding {
@@ -57948,7 +57948,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 12.8 );
   padding-right: calc( var( --scw-spacing-1 ) * 22.6 );
   padding-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
@@ -58073,9 +58073,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -58133,17 +58133,17 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-primary-07 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+    border-color: var( #{$borderThemeVar}-07 , var( --scw-color-primary-07 ) );
   } @else {
-    border-color: var( --scw-color-primary );
+    border-color: var( --scw-color-primary-07 );
   }
   box-shadow: var( --scw-effect-focus-shadow );
 }
@@ -58196,7 +58196,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 22.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 13.2 );
   margin-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
 @mixin comp-scw-link-base-design-solid-icon-state-focused--html-autolayout-padding {
@@ -58204,7 +58204,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 22.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 13.2 );
   padding-top: calc( var( --scw-spacing-1 ) * 24.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 16.8 );
 }
@@ -58329,9 +58329,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
-    background-color: var( --scw-color-grey-10 );
+    background-color: var( --scw-color-primary-01 );
   }
 }
@@ -58451,7 +58451,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 3.7 );
   margin-right: calc( var( --scw-spacing-1 ) * 31.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 30.6 );
-  margin-bottom: var( --scw-spacing-2 );
+  margin-bottom: var( --scw-spacing-11 );
 }
 @mixin comp-scw-link-base-design-icon--html-autolayout-padding {
@@ -58459,7 +58459,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 3.7 );
   padding-right: calc( var( --scw-spacing-1 ) * 31.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 30.6 );
-  padding-bottom: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-11 );
 }
@@ -58584,9 +58584,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -58706,7 +58706,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 31.5 );
   margin-right: calc( var( --scw-spacing-1 ) * 3.9 );
   margin-top: calc( var( --scw-spacing-1 ) * 30.6 );
-  margin-bottom: var( --scw-spacing-2 );
+  margin-bottom: var( --scw-spacing-11 );
 }
 @mixin comp-scw-link-base-design-icon-state-disabled--html-autolayout-padding {
@@ -58714,7 +58714,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 31.5 );
   padding-right: calc( var( --scw-spacing-1 ) * 3.9 );
   padding-top: calc( var( --scw-spacing-1 ) * 30.6 );
-  padding-bottom: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-11 );
 }
@@ -58961,7 +58961,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 12.9 );
   margin-right: calc( var( --scw-spacing-1 ) * 22.5 );
   margin-top: calc( var( --scw-spacing-1 ) * 30.7 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 1.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 10.9 );
 }
 @mixin comp-scw-link-base-design-icon-state-hover--html-autolayout-padding {
@@ -58969,7 +58969,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 12.9 );
   padding-right: calc( var( --scw-spacing-1 ) * 22.5 );
   padding-top: calc( var( --scw-spacing-1 ) * 30.7 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 1.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 10.9 );
 }
@@ -59094,9 +59094,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-primary-02 ) );
+    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-grey-04 ) );
   } @else {
-    background-color: var( --scw-color-primary-02 );
+    background-color: var( --scw-color-grey-04 );
   }
 }
@@ -59217,7 +59217,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 22.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 13.2 );
   margin-top: calc( var( --scw-spacing-1 ) * 30.7 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 1.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 10.9 );
 }
 @mixin comp-scw-link-base-design-icon-state-focused--html-autolayout-padding {
@@ -59225,7 +59225,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 22.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 13.2 );
   padding-top: calc( var( --scw-spacing-1 ) * 30.7 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 1.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 10.9 );
 }
@@ -59350,9 +59350,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    background-color: var( --scw-color-primary );
+    background-color: var( --scw-color-grey-02 );
   }
 }
@@ -60465,9 +60465,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-06-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
   flex: 1;
 }
@@ -60714,9 +60714,9 @@
   text-align: CENTER;
   font: var( --scw-type-text-bold-06-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-grey-02 );
   }
   align-self: stretch;
 }
@@ -67077,9 +67077,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-08-font );
   @if $themeVar {
-    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary-03 );
+    color: var( --scw-color-grey-02 );
   }
 }
@@ -67996,9 +67996,9 @@
   text-align: CENTER;
   font: var( --scw-type-text-bold-08-font );
   @if $themeVar {
-    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
-    color: var( --scw-color-primary-03 );
+    color: var( --scw-color-grey-02 );
   }
 }