npm - scu-web-components - Versions diffs - 1.3.20 → 1.3.21 - Mend

scu-web-components 1.3.20 → 1.3.21

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 (3635) hide show

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-left-icon-icon-vars.scss CHANGED Viewed

@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: 0px;
+$top: calc( var( --scw-spacing-1 ) * 0.000048828125 );
 $top-percent: 50%;
-$bottom: 0px;
+$bottom: calc( var( --scw-spacing-1 ) * -0.000048828125 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-left-icon-icon-vector-mixins.scss CHANGED Viewed

@@ -39,23 +39,23 @@
 @mixin absolute-layout {
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 0.10712890625 );
-  right: calc( var( --scw-spacing-1 ) * 0.10715656280517578 );
+  right: calc( var( --scw-spacing-1 ) * 0.10715675354003906 );
   top: calc( var( --scw-spacing-1 ) * 0.2091796875 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.20915460586547852 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.20915470123291016 );
 }
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 0.10712890625 );
-  margin-right: calc( var( --scw-spacing-1 ) * 0.10715656280517578 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.10715675354003906 );
   margin-top: calc( var( --scw-spacing-1 ) * 0.2091796875 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.20915460586547852 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.20915470123291016 );
 }
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 0.10712890625 );
-  padding-right: calc( var( --scw-spacing-1 ) * 0.10715656280517578 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.10715675354003906 );
   padding-top: calc( var( --scw-spacing-1 ) * 0.2091796875 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.20915460586547852 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.20915470123291016 );
 }

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-left-icon-icon-vector-vars.scss CHANGED Viewed

@@ -16,10 +16,10 @@ $layout-align: MIN;
 $layout-grow: 0;
 $top: calc( var( --scw-spacing-1 ) * 0.2091796875 );
 $top-percent: 50%;
-$bottom: calc( var( --scw-spacing-1 ) * 0.20915460586547852 );
+$bottom: calc( var( --scw-spacing-1 ) * 0.20915470123291016 );
 $left: calc( var( --scw-spacing-1 ) * 0.10712890625 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 0.10715656280517578 );
+$right: calc( var( --scw-spacing-1 ) * 0.10715675354003906 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-left-mixins.scss CHANGED Viewed

@@ -54,7 +54,7 @@
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
-  margin-right: calc( var( --scw-spacing-1 ) * 25.2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 26.2 );
   margin-top: 0px;
   margin-bottom: 0px;
 }
@@ -62,7 +62,7 @@
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
-  padding-right: calc( var( --scw-spacing-1 ) * 25.2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 26.2 );
   padding-top: 0px;
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-left-vars.scss CHANGED Viewed

@@ -17,8 +17,8 @@ $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
 $left: 0px;
-$left-percent: 5.32%;
-$right: calc( var( --scw-spacing-1 ) * 25.2 );
+$left-percent: 5.14%;
+$right: calc( var( --scw-spacing-1 ) * 26.2 );
 $padding-left: var( --scw-spacing-1 );
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-right-icon-icon-ellipse-245-color-092-mixins.scss CHANGED Viewed

@@ -40,22 +40,22 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 0.29169921875 );
   right: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
-  top: calc( var( --scw-spacing-1 ) * 0.29169921875 );
-  bottom: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
+  top: calc( var( --scw-spacing-1 ) * 0.291650390625 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.2916830062866211 );
 }
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 0.29169921875 );
   margin-right: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
-  margin-top: calc( var( --scw-spacing-1 ) * 0.29169921875 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.291650390625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.2916830062866211 );
 }
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 0.29169921875 );
   padding-right: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
-  padding-top: calc( var( --scw-spacing-1 ) * 0.29169921875 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.291650390625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.2916830062866211 );
 }

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-right-icon-icon-ellipse-245-color-092-vars.scss CHANGED Viewed

@@ -14,9 +14,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 0.29169921875 );
+$top: calc( var( --scw-spacing-1 ) * 0.291650390625 );
 $top-percent: 50%;
-$bottom: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );
+$bottom: calc( var( --scw-spacing-1 ) * 0.2916830062866211 );
 $left: calc( var( --scw-spacing-1 ) * 0.29169921875 );
 $left-percent: 50%;
 $right: calc( var( --scw-spacing-1 ) * 0.29163417816162107 );

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-right-icon-icon-mixins.scss CHANGED Viewed

@@ -40,22 +40,22 @@
   position: absolute;
   left: 0px;
   right: 0px;
-  top: calc( var( --scw-spacing-1 ) * 0.00009765625 );
-  bottom: calc( var( --scw-spacing-1 ) * -0.00009765625 );
+  top: calc( var( --scw-spacing-1 ) * 0.000048828125 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.000048828125 );
 }
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 0.00009765625 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * -0.00009765625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.000048828125 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.000048828125 );
 }
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 0.00009765625 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * -0.00009765625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.000048828125 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.000048828125 );
 }

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-right-icon-icon-vars.scss CHANGED Viewed

@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 0.00009765625 );
+$top: calc( var( --scw-spacing-1 ) * 0.000048828125 );
 $top-percent: 50%;
-$bottom: calc( var( --scw-spacing-1 ) * -0.00009765625 );
+$bottom: calc( var( --scw-spacing-1 ) * -0.000048828125 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-right-mixins.scss CHANGED Viewed

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

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-icon-right-vars.scss CHANGED Viewed

@@ -16,8 +16,8 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
-$left: calc( var( --scw-spacing-1 ) * 22.7 );
-$left-percent: 90.25%;
+$left: calc( var( --scw-spacing-1 ) * 23.7 );
+$left-percent: 90.58%;
 $right: 0px;
 $padding-left: var( --scw-spacing-1 );
 $padding-right: var( --scw-spacing-1 );

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-mixins.scss CHANGED Viewed

@@ -22,12 +22,12 @@
 }
 @mixin sizing {
-  width: 282px;
+  width: 292px;
   height: 50px;
 }
 @mixin width {
-  width: 282px;
+  width: 292px;
 }
 @mixin height {

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-placeholder-mixins.scss CHANGED Viewed

@@ -14,12 +14,12 @@
 }
 @mixin sizing {
-  width: 197px;
+  width: 145px;
   height: 24px;
 }
 @mixin width {
-  width: 197px;
+  width: 145px;
 }
 @mixin height {
@@ -54,16 +54,16 @@
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: var( --scw-spacing-3 );
-  margin-right: calc( var( --scw-spacing-1 ) * 5.5 );
+  margin-left: calc( var( --scw-spacing-1 ) * 5.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 9.1 );
   margin-top: calc( var( --scw-spacing-1 ) * 1.3 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
 }
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: var( --scw-spacing-3 );
-  padding-right: calc( var( --scw-spacing-1 ) * 5.5 );
+  padding-left: calc( var( --scw-spacing-1 ) * 5.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 9.1 );
   padding-top: calc( var( --scw-spacing-1 ) * 1.3 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
 }

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-placeholder-placeholder-mixins.scss CHANGED Viewed

@@ -15,12 +15,12 @@
 }
 @mixin sizing {
-  width: 177px;
+  width: 125px;
   height: 24px;
 }
 @mixin width {
-  width: 177px;
+  width: 125px;
 }
 @mixin height {

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-placeholder-placeholder-vars.scss CHANGED Viewed

@@ -10,7 +10,7 @@ $font-weight: 400;
 $line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-04-font );
-$width: 177px;
+$width: 125px;
 $height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-placeholder-vars.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 $background-color: rgba(0,0,0,0);
-$width: 197px;
+$width: 145px;
 $height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -16,9 +16,9 @@ $layout-grow: 1;
 $top: calc( var( --scw-spacing-1 ) * 1.3 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 1.3 );
-$left: var( --scw-spacing-3 );
-$left-percent: 45.57%;
-$right: calc( var( --scw-spacing-1 ) * 5.5 );
+$left: calc( var( --scw-spacing-1 ) * 5.6 );
+$left-percent: 44.01%;
+$right: calc( var( --scw-spacing-1 ) * 9.1 );
 $padding-left: var( --scw-spacing-1 );
 $padding-right: var( --scw-spacing-1 );
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-left-mixins.scss ADDED Viewed

@@ -0,0 +1,68 @@
+@mixin box (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+}
+@mixin sizing {
+  width: 26px;
+  height: 50px;
+}
+@mixin width {
+  width: 26px;
+}
+@mixin height {
+  height: 50px;
+}
+@mixin padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) {
+        margin-right: 0px;
+        --margin-right: 0px;
+      }
+}
+@mixin absolute-layout {
+}
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-3 );
+  margin-right: calc( var( --scw-spacing-1 ) * 23.6 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-3 );
+  padding-right: calc( var( --scw-spacing-1 ) * 23.6 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-left-vars.scss ADDED Viewed

@@ -0,0 +1,25 @@
+$background-color: rgba(0,0,0,0);
+$width: 26px;
+$height: 50px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: HORIZONTAL;
+$primary-axis-align-items: CENTER;
+$counter-axis-align-items: CENTER;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: 0px;
+$top-percent: 50%;
+$bottom: 0px;
+$left: var( --scw-spacing-3 );
+$left-percent: 14.73%;
+$right: calc( var( --scw-spacing-1 ) * 23.6 );
+$padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-left-x-mixins.scss ADDED Viewed

@@ -0,0 +1,54 @@
+@mixin text (
+  $themeVar: false
+) {
+  text-align: LEFT;
+  font: var( --scw-type-text-04-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-04 , var( --scw-color-grey-04 ) );
+  } @else {
+    color: var( --scw-color-grey-04 );
+  }
+}
+@mixin sizing {
+  width: 11px;
+  height: 24px;
+}
+@mixin width {
+  width: 11px;
+}
+@mixin height {
+  height: 24px;
+}
+@mixin padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+@mixin absolute-layout {
+}
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-left-x-vars.scss ADDED Viewed

@@ -0,0 +1,31 @@
+$characters: 'X';
+$font-size: 1rem;
+$text-align-horizontal: LEFT;
+$text-align-vertical: TOP;
+$text-transform: none;
+$color: var( --scw-color-grey-04 );
+$font-family: 'Proxima Nova';
+$font-weight: 400;
+$line-height: 1.5rem;
+$letter-spacing: 0rem;
+$font: var( --scw-type-text-04-font );
+$width: 11px;
+$height: 24px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: calc( var( --scw-spacing-1 ) * 1.3 );
+$top-percent: 50%;
+$bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+$left: calc( var( --scw-spacing-1 ) * 1.5 );
+$left-percent: 78.85%;
+$right: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-right-mixins.scss ADDED Viewed

@@ -0,0 +1,68 @@
+@mixin box (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+}
+@mixin sizing {
+  width: 36px;
+  height: 50px;
+}
+@mixin width {
+  width: 36px;
+}
+@mixin height {
+  height: 50px;
+}
+@mixin padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) {
+        margin-right: 0px;
+        --margin-right: 0px;
+      }
+}
+@mixin absolute-layout {
+}
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 20.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 5.5 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 20.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 5.5 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-right-vars.scss ADDED Viewed

@@ -0,0 +1,25 @@
+$background-color: rgba(0,0,0,0);
+$width: 36px;
+$height: 50px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: HORIZONTAL;
+$primary-axis-align-items: CENTER;
+$counter-axis-align-items: CENTER;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: 0px;
+$top-percent: 50%;
+$bottom: 0px;
+$left: calc( var( --scw-spacing-1 ) * 20.1 );
+$left-percent: 75%;
+$right: calc( var( --scw-spacing-1 ) * 5.5 );
+$padding-left: var( --scw-spacing-1 );
+$padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+$padding-top: 0px;
+$padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-right-x-mixins.scss ADDED Viewed

@@ -0,0 +1,54 @@
+@mixin text (
+  $themeVar: false
+) {
+  text-align: LEFT;
+  font: var( --scw-type-text-04-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-04 , var( --scw-color-grey-04 ) );
+  } @else {
+    color: var( --scw-color-grey-04 );
+  }
+}
+@mixin sizing {
+  width: 11px;
+  height: 24px;
+}
+@mixin width {
+  width: 11px;
+}
+@mixin height {
+  height: 24px;
+}
+@mixin padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+@mixin absolute-layout {
+}
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-text-right-x-vars.scss ADDED Viewed

@@ -0,0 +1,31 @@
+$characters: 'X';
+$font-size: 1rem;
+$text-align-horizontal: LEFT;
+$text-align-vertical: TOP;
+$text-transform: none;
+$color: var( --scw-color-grey-04 );
+$font-family: 'Proxima Nova';
+$font-weight: 400;
+$line-height: 1.5rem;
+$letter-spacing: 0rem;
+$font: var( --scw-type-text-04-font );
+$width: 11px;
+$height: 24px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: calc( var( --scw-spacing-1 ) * 1.3 );
+$top-percent: 50%;
+$bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+$left: var( --scw-spacing-1 );
+$left-percent: 43.06%;
+$right: calc( var( --scw-spacing-1 ) * 1.5 );

package/dist/tokens/segments/comp-scw-input/_state-error-type-rounded-input-vars.scss CHANGED Viewed

@@ -9,7 +9,7 @@ $corner-radius-top-left: 25px;
 $corner-radius-top-right: 25px;
 $corner-radius-bottom-right: 25px;
 $corner-radius-bottom-left: 25px;
-$width: 282px;
+$width: 292px;
 $height: 50px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;