npm - scu-web-components - Versions diffs - 0.0.35 → 0.0.36 - Mend

scu-web-components 0.0.35 → 0.0.36

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

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

@@ -6,8 +6,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-card (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -115,8 +115,8 @@
       "outputSegmentRef": "default-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-default-image--sizing {\n  width: 636px;\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-default-image--sizing {\n  width: 636px;\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 341px;\n}",
       "outputSegmentRef": "default-image-mixins.sizing"
     },
     "width": {
@@ -125,8 +125,8 @@
       "outputSegmentRef": "default-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-default-image--height {\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-default-image--height {\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 341px;\n}",
       "outputSegmentRef": "default-image-mixins.height"
     },
     "padding": {
@@ -145,13 +145,13 @@
       "outputSegmentRef": "default-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-default-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-default-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "default-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-default-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-default-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "default-image-mixins.html-autolayout-padding"
     }
   },
@@ -192,13 +192,13 @@
       "outputSegmentRef": "default-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-default-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-default-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "default-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-default-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-default-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "default-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -244,13 +244,13 @@
       "outputSegmentRef": "default-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-default-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-default-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "default-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-default-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-default-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "default-heading-mixins.html-autolayout-padding"
     }
   },
@@ -266,8 +266,8 @@
       "outputSegmentRef": "default-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-default-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-default-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "default-description-mixins.sizing"
     },
     "width": {
@@ -276,8 +276,8 @@
       "outputSegmentRef": "default-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-default-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-default-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "default-description-mixins.height"
     },
     "padding": {
@@ -291,13 +291,13 @@
       "outputSegmentRef": "default-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-default-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-default-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "default-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-default-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-default-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "default-description-mixins.html-autolayout-padding"
     }
   },
@@ -308,8 +308,8 @@
       "namespace": "default-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-default-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-default-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "default-action-mixins.box"
     },
     "sizing": {
@@ -417,8 +417,8 @@
       "outputSegmentRef": "color-mortgage-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-image--sizing {\n  width: 636px;\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-image--sizing {\n  width: 636px;\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 341px;\n}",
       "outputSegmentRef": "color-mortgage-image-mixins.sizing"
     },
     "width": {
@@ -427,8 +427,8 @@
       "outputSegmentRef": "color-mortgage-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-image--height {\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-image--height {\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 341px;\n}",
       "outputSegmentRef": "color-mortgage-image-mixins.height"
     },
     "padding": {
@@ -447,13 +447,13 @@
       "outputSegmentRef": "color-mortgage-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-mortgage-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-mortgage-image-mixins.html-autolayout-padding"
     }
   },
@@ -494,13 +494,13 @@
       "outputSegmentRef": "color-mortgage-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-mortgage-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-mortgage-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -546,13 +546,13 @@
       "outputSegmentRef": "color-mortgage-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-mortgage-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-mortgage-heading-mixins.html-autolayout-padding"
     }
   },
@@ -568,8 +568,8 @@
       "outputSegmentRef": "color-mortgage-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "color-mortgage-description-mixins.sizing"
     },
     "width": {
@@ -578,8 +578,8 @@
       "outputSegmentRef": "color-mortgage-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "color-mortgage-description-mixins.height"
     },
     "padding": {
@@ -593,13 +593,13 @@
       "outputSegmentRef": "color-mortgage-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-mortgage-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-mortgage-description-mixins.html-autolayout-padding"
     }
   },
@@ -610,8 +610,8 @@
       "namespace": "color-mortgage-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-mortgage-action-mixins.box"
     },
     "sizing": {
@@ -719,8 +719,8 @@
       "outputSegmentRef": "color-savings-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-savings-image--sizing {\n  width: 636px;\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-image--sizing {\n  width: 636px;\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 341px;\n}",
       "outputSegmentRef": "color-savings-image-mixins.sizing"
     },
     "width": {
@@ -729,8 +729,8 @@
       "outputSegmentRef": "color-savings-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-savings-image--height {\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-image--height {\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 341px;\n}",
       "outputSegmentRef": "color-savings-image-mixins.height"
     },
     "padding": {
@@ -749,13 +749,13 @@
       "outputSegmentRef": "color-savings-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-savings-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-savings-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-savings-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-savings-image-mixins.html-autolayout-padding"
     }
   },
@@ -796,13 +796,13 @@
       "outputSegmentRef": "color-savings-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-savings-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-savings-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-savings-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-savings-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -848,13 +848,13 @@
       "outputSegmentRef": "color-savings-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-savings-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-savings-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-savings-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-savings-heading-mixins.html-autolayout-padding"
     }
   },
@@ -870,8 +870,8 @@
       "outputSegmentRef": "color-savings-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-savings-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "color-savings-description-mixins.sizing"
     },
     "width": {
@@ -880,8 +880,8 @@
       "outputSegmentRef": "color-savings-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-savings-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "color-savings-description-mixins.height"
     },
     "padding": {
@@ -895,13 +895,13 @@
       "outputSegmentRef": "color-savings-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-savings-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-savings-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-savings-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-savings-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-savings-description-mixins.html-autolayout-padding"
     }
   },
@@ -912,8 +912,8 @@
       "namespace": "color-savings-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-savings-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-color-savings-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-savings-action-mixins.box"
     },
     "sizing": {
@@ -1021,8 +1021,8 @@
       "outputSegmentRef": "color-student-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-student-image--sizing {\n  width: 636px;\n  height: 325px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 325px;\n}",
+      "output": "\n@mixin comp-scw-card-color-student-image--sizing {\n  width: 636px;\n  height: 321px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 321px;\n}",
       "outputSegmentRef": "color-student-image-mixins.sizing"
     },
     "width": {
@@ -1031,8 +1031,8 @@
       "outputSegmentRef": "color-student-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-student-image--height {\n  height: 325px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 325px;\n}",
+      "output": "\n@mixin comp-scw-card-color-student-image--height {\n  height: 321px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 321px;\n}",
       "outputSegmentRef": "color-student-image-mixins.height"
     },
     "padding": {
@@ -1051,13 +1051,13 @@
       "outputSegmentRef": "color-student-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-student-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 15.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 15.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 15.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 15.8 );\n}",
       "outputSegmentRef": "color-student-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-student-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 15.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 15.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 15.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 15.8 );\n}",
       "outputSegmentRef": "color-student-image-mixins.html-autolayout-padding"
     }
   },
@@ -1098,13 +1098,13 @@
       "outputSegmentRef": "color-student-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-student-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 33.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 12.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 33.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 12.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 32.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 32.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.1 );\n}",
       "outputSegmentRef": "color-student-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-student-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 33.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 12.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 33.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 12.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 32.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 32.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.1 );\n}",
       "outputSegmentRef": "color-student-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -1150,13 +1150,13 @@
       "outputSegmentRef": "color-student-scw-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-student-scw-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 36 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 36 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-scw-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-student-scw-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-student-scw-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 36 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 36 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-scw-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-student-scw-heading-mixins.html-autolayout-padding"
     }
   },
@@ -1219,8 +1219,8 @@
       "outputSegmentRef": "color-student-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-student-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-student-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "color-student-description-mixins.sizing"
     },
     "width": {
@@ -1229,8 +1229,8 @@
       "outputSegmentRef": "color-student-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-student-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-student-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "color-student-description-mixins.height"
     },
     "padding": {
@@ -1244,13 +1244,13 @@
       "outputSegmentRef": "color-student-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-student-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-student-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-student-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-student-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-student-description-mixins.html-autolayout-padding"
     }
   },
@@ -1261,8 +1261,8 @@
       "namespace": "color-student-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-student-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-color-student-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-student-action-mixins.box"
     },
     "sizing": {
@@ -1370,8 +1370,8 @@
       "outputSegmentRef": "color-investments-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-investments-image--sizing {\n  width: 636px;\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-image--sizing {\n  width: 636px;\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 341px;\n}",
       "outputSegmentRef": "color-investments-image-mixins.sizing"
     },
     "width": {
@@ -1380,8 +1380,8 @@
       "outputSegmentRef": "color-investments-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-investments-image--height {\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-image--height {\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 341px;\n}",
       "outputSegmentRef": "color-investments-image-mixins.height"
     },
     "padding": {
@@ -1400,13 +1400,13 @@
       "outputSegmentRef": "color-investments-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-investments-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-investments-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-investments-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-investments-image-mixins.html-autolayout-padding"
     }
   },
@@ -1447,13 +1447,13 @@
       "outputSegmentRef": "color-investments-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-investments-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-investments-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-investments-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-investments-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -1499,13 +1499,13 @@
       "outputSegmentRef": "color-investments-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-investments-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-investments-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-investments-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-investments-heading-mixins.html-autolayout-padding"
     }
   },
@@ -1521,8 +1521,8 @@
       "outputSegmentRef": "color-investments-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-investments-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "color-investments-description-mixins.sizing"
     },
     "width": {
@@ -1531,8 +1531,8 @@
       "outputSegmentRef": "color-investments-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-investments-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "color-investments-description-mixins.height"
     },
     "padding": {
@@ -1546,13 +1546,13 @@
       "outputSegmentRef": "color-investments-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-investments-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-investments-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-investments-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-investments-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-investments-description-mixins.html-autolayout-padding"
     }
   },
@@ -1563,8 +1563,8 @@
       "namespace": "color-investments-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-investments-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-color-investments-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-investments-action-mixins.box"
     },
     "sizing": {
@@ -1672,8 +1672,8 @@
       "outputSegmentRef": "color-checking-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-checking-image--sizing {\n  width: 636px;\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-image--sizing {\n  width: 636px;\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 341px;\n}",
       "outputSegmentRef": "color-checking-image-mixins.sizing"
     },
     "width": {
@@ -1682,8 +1682,8 @@
       "outputSegmentRef": "color-checking-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-checking-image--height {\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-image--height {\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 341px;\n}",
       "outputSegmentRef": "color-checking-image-mixins.height"
     },
     "padding": {
@@ -1702,13 +1702,13 @@
       "outputSegmentRef": "color-checking-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-checking-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-checking-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-checking-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-checking-image-mixins.html-autolayout-padding"
     }
   },
@@ -1749,13 +1749,13 @@
       "outputSegmentRef": "color-checking-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-checking-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-checking-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-checking-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-checking-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -1801,13 +1801,13 @@
       "outputSegmentRef": "color-checking-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-checking-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-checking-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-checking-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-checking-heading-mixins.html-autolayout-padding"
     }
   },
@@ -1823,8 +1823,8 @@
       "outputSegmentRef": "color-checking-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-checking-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "color-checking-description-mixins.sizing"
     },
     "width": {
@@ -1833,8 +1833,8 @@
       "outputSegmentRef": "color-checking-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-checking-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "color-checking-description-mixins.height"
     },
     "padding": {
@@ -1848,13 +1848,13 @@
       "outputSegmentRef": "color-checking-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-checking-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-checking-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-checking-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-checking-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-checking-description-mixins.html-autolayout-padding"
     }
   },
@@ -1865,8 +1865,8 @@
       "namespace": "color-checking-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-checking-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-color-checking-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-checking-action-mixins.box"
     },
     "sizing": {
@@ -1974,8 +1974,8 @@
       "outputSegmentRef": "color-credit-cards-image-mixins.box"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-image--sizing {\n  width: 636px;\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-image--sizing {\n  width: 636px;\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 341px;\n}",
       "outputSegmentRef": "color-credit-cards-image-mixins.sizing"
     },
     "width": {
@@ -1984,8 +1984,8 @@
       "outputSegmentRef": "color-credit-cards-image-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-image--height {\n  height: 345px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 345px;\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-image--height {\n  height: 341px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 341px;\n}",
       "outputSegmentRef": "color-credit-cards-image-mixins.height"
     },
     "padding": {
@@ -2004,13 +2004,13 @@
       "outputSegmentRef": "color-credit-cards-image-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-image--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-credit-cards-image-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-image--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );\n}",
       "outputSegmentRef": "color-credit-cards-image-mixins.html-autolayout-padding"
     }
   },
@@ -2051,13 +2051,13 @@
       "outputSegmentRef": "color-credit-cards-super-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-super-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-credit-cards-super-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 35.3 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 10.7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-super-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
       "outputSegmentRef": "color-credit-cards-super-heading-mixins.html-autolayout-padding"
     }
   },
@@ -2103,13 +2103,13 @@
       "outputSegmentRef": "color-credit-cards-heading-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 38 );\n  margin-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-heading--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-credit-cards-heading-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 38 );\n  padding-bottom: var( --scw-spacing-7 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-heading--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );\n}",
       "outputSegmentRef": "color-credit-cards-heading-mixins.html-autolayout-padding"
     }
   },
@@ -2125,8 +2125,8 @@
       "outputSegmentRef": "color-credit-cards-description-mixins.text"
     },
     "sizing": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-description--sizing {\n  width: 636px;\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-description--sizing {\n  width: 636px;\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin sizing {\n  width: 636px;\n  height: 26px;\n}",
       "outputSegmentRef": "color-credit-cards-description-mixins.sizing"
     },
     "width": {
@@ -2135,8 +2135,8 @@
       "outputSegmentRef": "color-credit-cards-description-mixins.width"
     },
     "height": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-description--height {\n  height: 22px;\n}",
-      "outputSegment": "\n@mixin height {\n  height: 22px;\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-description--height {\n  height: 26px;\n}",
+      "outputSegment": "\n@mixin height {\n  height: 26px;\n}",
       "outputSegmentRef": "color-credit-cards-description-mixins.height"
     },
     "padding": {
@@ -2150,13 +2150,13 @@
       "outputSegmentRef": "color-credit-cards-description-mixins.absolute-layout"
     },
     "html-autolayout-margins": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-description--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  margin-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-credit-cards-description-mixins.html-autolayout-margins"
     },
     "html-autolayout-padding": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
-      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.7 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-description--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
+      "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );\n  padding-bottom: var( --scw-spacing-4 );\n}",
       "outputSegmentRef": "color-credit-cards-description-mixins.html-autolayout-padding"
     }
   },
@@ -2167,8 +2167,8 @@
       "namespace": "color-credit-cards-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-credit-cards-action-mixins.box"
     },
     "sizing": {
@@ -2474,8 +2474,8 @@
       "namespace": "size-medium-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-action-mixins.box"
     },
     "sizing": {
@@ -2776,8 +2776,8 @@
       "namespace": "size-medium-color-mortgage-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-mortgage-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-mortgage-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-mortgage-action-mixins.box"
     },
     "sizing": {
@@ -3078,8 +3078,8 @@
       "namespace": "size-medium-color-savings-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-savings-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-savings-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-savings-action-mixins.box"
     },
     "sizing": {
@@ -3380,8 +3380,8 @@
       "namespace": "size-medium-color-student-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-student-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-student-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-student-action-mixins.box"
     },
     "sizing": {
@@ -3682,8 +3682,8 @@
       "namespace": "size-medium-color-investments-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-investments-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-investments-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-investments-action-mixins.box"
     },
     "sizing": {
@@ -3984,8 +3984,8 @@
       "namespace": "size-medium-color-checking-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-checking-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-checking-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-checking-action-mixins.box"
     },
     "sizing": {
@@ -4286,8 +4286,8 @@
       "namespace": "size-medium-color-credit-cards-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-credit-cards-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 10px 10px 10px 10px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-credit-cards-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-credit-cards-action-mixins.box"
     },
     "sizing": {
@@ -5430,8 +5430,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-link (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -10958,8 +10958,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-menu-item (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-menu-item (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -12718,8 +12718,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-v2 (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-v2 (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -13394,8 +13394,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -25302,8 +25302,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-heading (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-heading (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -27594,8 +27594,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-page-alert (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -29646,8 +29646,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -30946,8 +30946,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -31674,8 +31674,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -31934,8 +31934,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2 (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2 (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -36042,8 +36042,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-field (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-field (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -36874,8 +36874,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-field-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-field-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -37134,8 +37134,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-label-base (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-label-base (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -37285,8 +37285,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-text-base (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-text-base (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -37634,8 +37634,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-text-container (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-text-container (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -37837,8 +37837,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-feedback-base (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-feedback-base (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -38087,8 +38087,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 0px 0px 0px 0px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "output": "\n@mixin comp-scw-input-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  }\n  border-radius: 5px 5px 5px 5px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , rgba(123,97,255,1) );\n  } @else {\n    border-color: rgba(123,97,255,1);\n  } \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {