scu-web-components 1.3.19 → 1.3.20

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-mixins.scss

@@ -14,12 +14,12 @@
 }
 
 @mixin sizing {
-  width: 343px;
+  width: 858px;
   height: 70px;
 }
 
 @mixin width {
-  width: 343px;
+  width: 858px;
 }
 
 @mixin height {
@@ -55,15 +55,15 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: var( --scw-spacing-2 );
-  margin-right: var( --scw-spacing-2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 16.5 );
-  margin-bottom: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * -79.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 44.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -44.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: var( --scw-spacing-2 );
-  padding-right: var( --scw-spacing-2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 16.5 );
-  padding-bottom: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * -79.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 44.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -44.5 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-right-link-3-mixins.scss

@@ -61,7 +61,7 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 0.15 );
+  margin-left: calc( var( --scw-spacing-1 ) * 25.9 );
   margin-right: var( --scw-spacing-9 );
   margin-top: 0px;
   margin-bottom: 0px;
@@ -69,7 +69,7 @@
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 0.15 );
+  padding-left: calc( var( --scw-spacing-1 ) * 25.9 );
   padding-right: var( --scw-spacing-9 );
   padding-top: 0px;
   padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-right-link-3-vars.scss

@@ -24,8 +24,8 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
-$left: calc( var( --scw-spacing-1 ) * 0.15 );
-$left-percent: 24.2%;
+$left: calc( var( --scw-spacing-1 ) * 25.9 );
+$left-percent: 69.7%;
 $right: var( --scw-spacing-9 );
 $padding-left: 0px;
 $padding-right: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-right-link-4-mixins.scss

@@ -61,7 +61,7 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 9.15 );
+  margin-left: calc( var( --scw-spacing-1 ) * 34.9 );
   margin-right: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -69,7 +69,7 @@
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 9.15 );
+  padding-left: calc( var( --scw-spacing-1 ) * 34.9 );
   padding-right: 0px;
   padding-top: 0px;
   padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-right-link-4-vars.scss

@@ -24,8 +24,8 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
-$left: calc( var( --scw-spacing-1 ) * 9.15 );
-$left-percent: 76.68%;
+$left: calc( var( --scw-spacing-1 ) * 34.9 );
+$left-percent: 90.68%;
 $right: 0px;
 $padding-left: 0px;
 $padding-right: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-right-mixins.scss

@@ -14,12 +14,12 @@
 }
 
 @mixin sizing {
-  width: 171.5px;
+  width: 429px;
   height: 47px;
 }
 
 @mixin width {
-  width: 171.5px;
+  width: 429px;
 }
 
 @mixin height {
@@ -54,7 +54,7 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 17.15 );
+  margin-left: calc( var( --scw-spacing-1 ) * 42.9 );
   margin-right: 0px;
   margin-top: calc( var( --scw-spacing-1 ) * 1.15 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 1.15 );
@@ -62,7 +62,7 @@
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 17.15 );
+  padding-left: calc( var( --scw-spacing-1 ) * 42.9 );
   padding-right: 0px;
   padding-top: calc( var( --scw-spacing-1 ) * 1.15 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 1.15 );

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-right-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 171.5px;
+$width: 429px;
 $height: 47px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -16,7 +16,7 @@ $layout-grow: 1;
 $top: calc( var( --scw-spacing-1 ) * 1.15 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 1.15 );
-$left: calc( var( --scw-spacing-1 ) * 17.15 );
+$left: calc( var( --scw-spacing-1 ) * 42.9 );
 $left-percent: 75%;
 $right: 0px;
 $padding-left: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-modal-footer-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 343px;
+$width: 858px;
 $height: 70px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -13,12 +13,12 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 16.5 );
-$top-percent: 78.43%;
-$bottom: var( --scw-spacing-2 );
+$top: calc( var( --scw-spacing-1 ) * 44.5 );
+$top-percent: 685.71%;
+$bottom: calc( var( --scw-spacing-1 ) * -44.5 );
 $left: var( --scw-spacing-2 );
-$left-percent: 50%;
-$right: var( --scw-spacing-2 );
+$left-percent: 540.96%;
+$right: calc( var( --scw-spacing-1 ) * -79.5 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-label-left-mixins.scss

@@ -41,7 +41,7 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
-  margin-right: calc( var( --scw-spacing-1 ) * 23.2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 74.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 1.4 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 1.4 );
 }
@@ -49,7 +49,7 @@
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
-  padding-right: calc( var( --scw-spacing-1 ) * 23.2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 74.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 1.4 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 1.4 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-label-left-vars.scss

@@ -27,5 +27,5 @@ $top: calc( var( --scw-spacing-1 ) * 1.4 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 1.4 );
 $left: 0px;
-$left-percent: 16.18%;
-$right: calc( var( --scw-spacing-1 ) * 23.2 );
+$left-percent: 6.47%;
+$right: calc( var( --scw-spacing-1 ) * 74.7 );

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-label-right-mixins.scss

@@ -41,7 +41,7 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 23.2 );
-  margin-right: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 51.5 );
   margin-top: calc( var( --scw-spacing-1 ) * 1.4 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 1.4 );
 }
@@ -49,7 +49,7 @@
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 23.2 );
-  padding-right: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 51.5 );
   padding-top: calc( var( --scw-spacing-1 ) * 1.4 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 1.4 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-label-right-vars.scss

@@ -27,5 +27,5 @@ $top: calc( var( --scw-spacing-1 ) * 1.4 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 1.4 );
 $left: calc( var( --scw-spacing-1 ) * 23.2 );
-$left-percent: 83.82%;
-$right: 0px;
+$left-percent: 33.51%;
+$right: calc( var( --scw-spacing-1 ) * 51.5 );

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-mixins.scss

@@ -14,12 +14,12 @@
 }
 
 @mixin sizing {
-  width: 343px;
+  width: 858px;
   height: 55px;
 }
 
 @mixin width {
-  width: 343px;
+  width: 858px;
 }
 
 @mixin height {
@@ -55,15 +55,15 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: var( --scw-spacing-2 );
-  margin-right: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * -79.5 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: var( --scw-spacing-2 );
-  padding-right: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * -79.5 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.5 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-text-mixins.scss

@@ -39,16 +39,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 11.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 11.1 );
+  margin-left: calc( var( --scw-spacing-1 ) * 36.85 );
+  margin-right: calc( var( --scw-spacing-1 ) * 36.85 );
   margin-top: calc( var( --scw-spacing-1 ) * 1.2 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 1.2 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 11.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 11.1 );
+  padding-left: calc( var( --scw-spacing-1 ) * 36.85 );
+  padding-right: calc( var( --scw-spacing-1 ) * 36.85 );
   padding-top: calc( var( --scw-spacing-1 ) * 1.2 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 1.2 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-text-vars.scss

@@ -26,6 +26,6 @@ $layout-grow: 0;
 $top: calc( var( --scw-spacing-1 ) * 1.2 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 1.2 );
-$left: calc( var( --scw-spacing-1 ) * 11.1 );
+$left: calc( var( --scw-spacing-1 ) * 36.85 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 11.1 );
+$right: calc( var( --scw-spacing-1 ) * 36.85 );

package/dist/tokens/segments/comp-scw-modal/_scw-modal-header-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 343px;
+$width: 858px;
 $height: 55px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -14,11 +14,11 @@ $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
 $top: var( --scw-spacing-2 );
-$top-percent: 18.63%;
-$bottom: calc( var( --scw-spacing-1 ) * 18 );
+$top-percent: 67.86%;
+$bottom: calc( var( --scw-spacing-1 ) * -0.5 );
 $left: var( --scw-spacing-2 );
-$left-percent: 50%;
-$right: var( --scw-spacing-2 );
+$left-percent: 540.96%;
+$right: calc( var( --scw-spacing-1 ) * -79.5 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-modal/_scw-rich-text-mixins.scss

@@ -15,16 +15,16 @@
 }
 
 @mixin sizing {
-  width: 343px;
-  height: 90px;
+  width: 858px;
+  height: 370px;
 }
 
 @mixin width {
-  width: 343px;
+  width: 858px;
 }
 
 @mixin height {
-  height: 90px;
+  height: 370px;
 }
 
 @mixin padding {
@@ -56,15 +56,15 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: var( --scw-spacing-2 );
-  margin-right: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * -79.5 );
   margin-top: calc( var( --scw-spacing-1 ) * 7.5 );
-  margin-bottom: var( --scw-spacing-9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -37.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: var( --scw-spacing-2 );
-  padding-right: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * -79.5 );
   padding-top: calc( var( --scw-spacing-1 ) * 7.5 );
-  padding-bottom: var( --scw-spacing-9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -37.5 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-rich-text-text-mixins.scss

@@ -41,15 +41,15 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
-  margin-right: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 51.5 );
   margin-top: 0px;
-  margin-bottom: calc( var( --scw-spacing-1 ) * 6.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 34.6 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
-  padding-right: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 51.5 );
   padding-top: 0px;
-  padding-bottom: calc( var( --scw-spacing-1 ) * 6.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 34.6 );
 }

package/dist/tokens/segments/comp-scw-modal/_scw-rich-text-text-vars.scss

@@ -24,8 +24,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 1;
 $top: 0px;
-$top-percent: 13.33%;
-$bottom: calc( var( --scw-spacing-1 ) * 6.6 );
+$top-percent: 3.24%;
+$bottom: calc( var( --scw-spacing-1 ) * 34.6 );
 $left: 0px;
-$left-percent: 50%;
-$right: 0px;
+$left-percent: 19.99%;
+$right: calc( var( --scw-spacing-1 ) * 51.5 );

package/dist/tokens/segments/comp-scw-modal/_scw-rich-text-vars.scss

@@ -2,8 +2,8 @@
 
 $background-color: rgba(255,255,255,1);
 $blend-mode: NORMAL;
-$width: 343px;
-$height: 90px;
+$width: 858px;
+$height: 370px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -15,11 +15,11 @@ $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 1;
 $top: calc( var( --scw-spacing-1 ) * 7.5 );
-$top-percent: 47.06%;
-$bottom: var( --scw-spacing-9 );
+$top-percent: 371.43%;
+$bottom: calc( var( --scw-spacing-1 ) * -37.5 );
 $left: var( --scw-spacing-2 );
-$left-percent: 50%;
-$right: var( --scw-spacing-2 );
+$left-percent: 540.96%;
+$right: calc( var( --scw-spacing-1 ) * -79.5 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-option/_index-mixins.scss

@@ -15,16 +15,16 @@
 }
 
 @mixin sizing {
-  width: 257px;
-  height: 135px;
+  width: 83px;
+  height: 70px;
 }
 
 @mixin width {
-  width: 257px;
+  width: 83px;
 }
 
 @mixin height {
-  height: 135px;
+  height: 70px;
 }
 
 @mixin padding {

package/dist/tokens/segments/comp-scw-option/_index-vars.scss

@@ -1,8 +1,8 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 257px;
-$height: 135px;
+$width: 83px;
+$height: 70px;
 $constraint-horizontal: CENTER;
 $constraint-vertical: CENTER;
 $constrain-proportions: false;

package/dist/tokens/segments/comp-scw-option/_select-heading-mixins.scss

@@ -55,15 +55,15 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
-  margin-right: calc( var( --scw-spacing-1 ) * -4.3 );
+  margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: var( --scw-spacing-10 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 22.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
-  padding-right: calc( var( --scw-spacing-1 ) * -4.3 );
+  padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: var( --scw-spacing-10 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 22.5 );
 }

package/dist/tokens/segments/comp-scw-option/_select-heading-vars.scss

@@ -14,11 +14,11 @@ $item-spacing: calc( var( --scw-spacing-1 ) * 0.5 );
 $layout-align: STRETCH;
 $layout-grow: 0;
 $top: 0px;
-$top-percent: 12.96%;
-$bottom: var( --scw-spacing-10 );
+$top-percent: 6.73%;
+$bottom: calc( var( --scw-spacing-1 ) * 22.5 );
 $left: 0px;
-$left-percent: 58.37%;
-$right: calc( var( --scw-spacing-1 ) * -4.3 );
+$left-percent: 50%;
+$right: 0px;
 $padding-left: var( --scw-spacing-1 );
 $padding-right: var( --scw-spacing-1 );
 $padding-top: calc( var( --scw-spacing-1 ) * 0.5 );

package/dist/tokens/segments/comp-scw-option/_select-mixins.scss

@@ -23,16 +23,16 @@
 }
 
 @mixin sizing {
-  width: 257px;
-  height: 135px;
+  width: 300px;
+  height: 260px;
 }
 
 @mixin width {
-  width: 257px;
+  width: 300px;
 }
 
 @mixin height {
-  height: 135px;
+  height: 260px;
 }
 
 @mixin padding {
@@ -64,15 +64,15 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
-  margin-right: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * -21.7 );
   margin-top: 0px;
-  margin-bottom: 0px;
+  margin-bottom: var( --scw-spacing--19 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
-  padding-right: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * -21.7 );
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: var( --scw-spacing--19 );
 }

package/dist/tokens/segments/comp-scw-option/_select-scw-option-single-label-mixins.scss

@@ -15,12 +15,12 @@
 }
 
 @mixin sizing {
-  width: 257px;
+  width: 300px;
   height: 45px;
 }
 
 @mixin width {
-  width: 257px;
+  width: 300px;
 }
 
 @mixin height {

package/dist/tokens/segments/comp-scw-option/_select-scw-option-single-label-text-mixins.scss

@@ -40,7 +40,7 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: var( --scw-spacing-1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 19.9 );
+  margin-right: calc( var( --scw-spacing-1 ) * 24.2 );
   margin-top: calc( var( --scw-spacing-1 ) * 1.05 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 1.05 );
 }
@@ -48,7 +48,7 @@
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: var( --scw-spacing-1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 19.9 );
+  padding-right: calc( var( --scw-spacing-1 ) * 24.2 );
   padding-top: calc( var( --scw-spacing-1 ) * 1.05 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 1.05 );
 }

package/dist/tokens/segments/comp-scw-option/_select-scw-option-single-label-text-vars.scss

@@ -27,5 +27,5 @@ $top: calc( var( --scw-spacing-1 ) * 1.05 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 1.05 );
 $left: var( --scw-spacing-1 );
-$left-percent: 13.23%;
-$right: calc( var( --scw-spacing-1 ) * 19.9 );
+$left-percent: 11.33%;
+$right: calc( var( --scw-spacing-1 ) * 24.2 );

package/dist/tokens/segments/comp-scw-option/_select-scw-option-single-label-vars.scss

@@ -2,7 +2,7 @@
 
 $background-color: var( --scw-color-grey-10 );
 $blend-mode: NORMAL;
-$width: 257px;
+$width: 300px;
 $height: 45px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;

package/dist/tokens/segments/comp-scw-option/_select-scw-option-single-mixins.scss

@@ -14,12 +14,12 @@
 }
 
 @mixin sizing {
-  width: 257px;
+  width: 300px;
   height: 45px;
 }
 
 @mixin width {
-  width: 257px;
+  width: 300px;
 }
 
 @mixin height {
@@ -56,14 +56,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: 0px;
-  margin-bottom: var( --scw-spacing-9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 3.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 18 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: 0px;
-  padding-bottom: var( --scw-spacing-9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 3.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 18 );
 }

package/dist/tokens/segments/comp-scw-option/_select-scw-option-single-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 257px;
+$width: 300px;
 $height: 45px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: var( --scw-spacing-1 );
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: 0px;
-$top-percent: 16.67%;
-$bottom: var( --scw-spacing-9 );
+$top: calc( var( --scw-spacing-1 ) * 3.5 );
+$top-percent: 22.12%;
+$bottom: calc( var( --scw-spacing-1 ) * 18 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;