scu-web-components 0.0.35 → 0.0.36

package/dist/tokens/source/assets/icon-slider.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 45.625C5 44.3262 6.0498 43.2812 7.34375 43.2812H13.1699C14.166 40.1074 17.1289 37.8125 20.625 37.8125C24.1211 37.8125 27.0801 40.1074 28.0762 43.2812H52.6562C53.9551 43.2812 55 44.3262 55 45.625C55 46.9238 53.9551 47.9688 52.6562 47.9688H28.0762C27.0801 51.1426 24.1211 53.4375 20.625 53.4375C17.1289 53.4375 14.166 51.1426 13.1699 47.9688H7.34375C6.0498 47.9688 5 46.9238 5 45.625ZM23.75 45.625C23.75 43.8965 22.3535 42.5 20.625 42.5C18.8965 42.5 17.5 43.8965 17.5 45.625C17.5 47.3535 18.8965 48.75 20.625 48.75C22.3535 48.75 23.75 47.3535 23.75 45.625ZM39.375 22.1875C42.8711 22.1875 45.8301 24.4824 46.8262 27.6562H52.6562C53.9551 27.6562 55 28.7012 55 30C55 31.2988 53.9551 32.3438 52.6562 32.3438H46.8262C45.8301 35.5176 42.8711 37.8125 39.375 37.8125C35.8789 37.8125 32.9199 35.5176 31.9238 32.3438H7.34375C6.0498 32.3438 5 31.2988 5 30C5 28.7012 6.0498 27.6562 7.34375 27.6562H31.9238C32.9199 24.4824 35.8789 22.1875 39.375 22.1875ZM42.5 30C42.5 28.2715 41.1035 26.875 39.375 26.875C37.6465 26.875 36.25 28.2715 36.25 30C36.25 31.7285 37.6465 33.125 39.375 33.125C41.1035 33.125 42.5 31.7285 42.5 30ZM52.6562 12.0312C53.9551 12.0312 55 13.0811 55 14.375C55 15.6738 53.9551 16.7188 52.6562 16.7188H31.2012C30.2051 19.8926 27.2461 22.1875 23.75 22.1875C20.2539 22.1875 17.2949 19.8926 16.2988 16.7188H7.34375C6.0498 16.7188 5 15.6738 5 14.375C5 13.0811 6.0498 12.0312 7.34375 12.0312H16.2988C17.2949 8.86133 20.2539 6.5625 23.75 6.5625C27.2461 6.5625 30.2051 8.86133 31.2012 12.0312H52.6562ZM20.625 14.375C20.625 16.1035 22.0215 17.5 23.75 17.5C25.4785 17.5 26.875 16.1035 26.875 14.375C26.875 12.6494 25.4785 11.25 23.75 11.25C22.0215 11.25 20.625 12.6494 20.625 14.375Z" fill="#3E4143"/></svg>

package/dist/tokens/source/assets/icon-tiktok.js

@@ -0,0 +1 @@
+export default '<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 25.5042C47.6748 25.5145 43.4557 24.1734 39.9387 21.6702V39.1278C39.9375 42.3611 38.9436 45.517 37.0898 48.1735C35.2359 50.83 32.6106 52.8605 29.5649 53.9934C26.5191 55.1263 23.1981 55.3077 20.0458 54.5133C16.8936 53.7189 14.0604 51.9866 11.9251 49.5479C9.78976 47.1093 8.45412 44.0807 8.09674 40.8669C7.73936 37.6532 8.37728 34.4075 9.9252 31.564C11.4731 28.7205 13.8572 26.4146 16.7588 24.9546C19.6604 23.4947 22.941 22.9503 26.1622 23.3943V32.1749C24.6882 31.7139 23.1054 31.7277 21.6398 32.2145C20.1742 32.7013 18.9008 33.6361 18.0014 34.8854C17.102 36.1346 16.6226 37.6346 16.6318 39.1709C16.6409 40.7072 17.138 42.2014 18.0521 43.4401C18.9662 44.6787 20.2506 45.5985 21.7218 46.0681C23.1931 46.5377 24.7759 46.533 26.2444 46.0548C27.7128 45.5766 28.9917 44.6492 29.8985 43.4052C30.8052 42.1612 31.2934 40.6641 31.2934 39.1278V5H39.9387C39.9327 5.72591 39.9939 6.45082 40.1215 7.16559C40.4219 8.76119 41.0465 10.2791 41.9572 11.6264C42.8678 12.9738 44.0454 14.1222 45.4177 15.0016C47.3702 16.2852 49.6593 16.9693 52 16.9689V25.5042Z" fill="#3E4143"/></svg>';

package/dist/tokens/source/assets/icon-tiktok.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 25.5042C47.6748 25.5145 43.4557 24.1734 39.9387 21.6702V39.1278C39.9375 42.3611 38.9436 45.517 37.0898 48.1735C35.2359 50.83 32.6106 52.8605 29.5649 53.9934C26.5191 55.1263 23.1981 55.3077 20.0458 54.5133C16.8936 53.7189 14.0604 51.9866 11.9251 49.5479C9.78976 47.1093 8.45412 44.0807 8.09674 40.8669C7.73936 37.6532 8.37728 34.4075 9.9252 31.564C11.4731 28.7205 13.8572 26.4146 16.7588 24.9546C19.6604 23.4947 22.941 22.9503 26.1622 23.3943V32.1749C24.6882 31.7139 23.1054 31.7277 21.6398 32.2145C20.1742 32.7013 18.9008 33.6361 18.0014 34.8854C17.102 36.1346 16.6226 37.6346 16.6318 39.1709C16.6409 40.7072 17.138 42.2014 18.0521 43.4401C18.9662 44.6787 20.2506 45.5985 21.7218 46.0681C23.1931 46.5377 24.7759 46.533 26.2444 46.0548C27.7128 45.5766 28.9917 44.6492 29.8985 43.4052C30.8052 42.1612 31.2934 40.6641 31.2934 39.1278V5H39.9387C39.9327 5.72591 39.9939 6.45082 40.1215 7.16559C40.4219 8.76119 41.0465 10.2791 41.9572 11.6264C42.8678 12.9738 44.0454 14.1222 45.4177 15.0016C47.3702 16.2852 49.6593 16.9693 52 16.9689V25.5042Z" fill="#3E4143"/></svg>

package/dist/tokens/source/assets/icon-user.js

@@ -0,0 +1 @@
+export default '<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M29.875 30C36.7793 30 42.375 24.4043 42.375 17.5C42.375 10.5957 36.7793 5 29.875 5C22.9707 5 17.375 10.5957 17.375 17.5C17.375 24.4043 22.9707 30 29.875 30ZM25.4121 34.6875C15.793 34.6875 8 42.4805 8 52.0996C8 53.7012 9.29883 55 10.9004 55H48.8496C50.4512 55 51.75 53.7012 51.75 52.0996C51.75 42.4805 43.957 34.6875 34.3379 34.6875H25.4121Z" fill="#3E4143"/></svg>';

package/dist/tokens/source/assets/icon-user.svg

@@ -0,0 +1 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M29.875 30C36.7793 30 42.375 24.4043 42.375 17.5C42.375 10.5957 36.7793 5 29.875 5C22.9707 5 17.375 10.5957 17.375 17.5C17.375 24.4043 22.9707 30 29.875 30ZM25.4121 34.6875C15.793 34.6875 8 42.4805 8 52.0996C8 53.7012 9.29883 55 10.9004 55H48.8496C50.4512 55 51.75 53.7012 51.75 52.0996C51.75 42.4805 43.957 34.6875 34.3379 34.6875H25.4121Z" fill="#3E4143"/></svg>

package/dist/tokens/source/assets/icon-visible.js

@@ -1 +1 @@
-export default '<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.125 30.4687C15.3361 23.1453 22.1352 17.8125 30.1798 17.8125C38.2244 17.8125 45.0235 23.1454 47.2346 30.4688C45.0234 37.7922 38.2244 43.125 30.1798 43.125C22.1352 43.125 15.3361 37.7921 13.125 30.4687ZM17.8125 30.4687C19.4534 25.3152 24.4989 21.5625 30.4687 21.5625C36.4386 21.5625 41.4842 25.3153 43.125 30.4688C41.4841 35.6223 36.4386 39.375 30.4688 39.375C24.4989 39.375 19.4533 35.6222 17.8125 30.4687ZM30.4688 36.5625C33.8342 36.5625 36.5625 33.8342 36.5625 30.4688C36.5625 27.1033 33.8342 24.375 30.4688 24.375C27.1033 24.375 24.375 27.1033 24.375 30.4688C24.375 33.8342 27.1033 36.5625 30.4688 36.5625Z" fill="#3E4143"/></svg>';
+export default '<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.0007 29.5C18.0007 23.0297 23.3728 17.7857 30.0012 17.7857C36.6296 17.7857 42.0017 23.0297 42.0017 29.5C42.0017 35.9703 36.6296 41.2143 30.0012 41.2143C23.3728 41.2143 18.0007 35.9703 18.0007 29.5ZM30.0012 36.8214C34.1451 36.8214 37.5015 33.5451 37.5015 29.5C37.5015 25.4549 34.1451 22.1786 30.0012 22.1786C29.9356 22.1786 29.8793 22.1786 29.7293 22.1786C29.9356 22.6453 30.0012 23.1395 30.0012 23.6429C30.0012 26.8734 27.3104 29.5 24.0009 29.5C23.4853 29.5 22.979 29.4359 22.5009 29.2346C22.5009 29.381 22.5009 29.4359 22.5009 29.4176C22.5009 33.5451 25.8573 36.8214 30.0012 36.8214ZM11.946 16.3763C16.36 12.3715 22.4259 9 30.0012 9C37.5765 9 43.6424 12.3715 48.0582 16.3763C52.4459 20.3482 55.3804 25.0248 56.768 28.3743C57.0774 29.0973 57.0774 29.9027 56.768 30.6257C55.3804 33.8929 52.4459 38.5694 48.0582 42.6237C43.6424 46.6321 37.5765 50 30.0012 50C22.4259 50 16.36 46.6321 11.946 42.6237C7.55833 38.5694 4.62571 33.8929 3.23074 30.6257C2.92309 29.9027 2.92309 29.0973 3.23074 28.3743C4.62571 25.0248 7.55833 20.3482 11.946 16.3763ZM30.0012 13.3929C23.8884 13.3929 18.8632 16.1018 15.0099 19.5886C11.4004 22.865 8.90839 26.6721 7.63521 29.5C8.90839 32.2455 11.4004 36.135 15.0099 39.4114C18.8632 42.8982 23.8884 45.6071 30.0012 45.6071C36.1139 45.6071 41.1392 42.8982 44.9925 39.4114C48.602 36.135 51.0115 32.2455 52.3709 29.5C51.0115 26.6721 48.602 22.865 44.9925 19.5886C41.1392 16.1018 36.1139 13.3929 30.0012 13.3929Z" fill="#3E4143"/></svg>';

package/dist/tokens/source/assets/icon-visible.svg

@@ -1 +1 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.125 30.4687C15.3361 23.1453 22.1352 17.8125 30.1798 17.8125C38.2244 17.8125 45.0235 23.1454 47.2346 30.4688C45.0234 37.7922 38.2244 43.125 30.1798 43.125C22.1352 43.125 15.3361 37.7921 13.125 30.4687ZM17.8125 30.4687C19.4534 25.3152 24.4989 21.5625 30.4687 21.5625C36.4386 21.5625 41.4842 25.3153 43.125 30.4688C41.4841 35.6223 36.4386 39.375 30.4688 39.375C24.4989 39.375 19.4533 35.6222 17.8125 30.4687ZM30.4688 36.5625C33.8342 36.5625 36.5625 33.8342 36.5625 30.4688C36.5625 27.1033 33.8342 24.375 30.4688 24.375C27.1033 24.375 24.375 27.1033 24.375 30.4688C24.375 33.8342 27.1033 36.5625 30.4688 36.5625Z" fill="#3E4143"/></svg>
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.0007 29.5C18.0007 23.0297 23.3728 17.7857 30.0012 17.7857C36.6296 17.7857 42.0017 23.0297 42.0017 29.5C42.0017 35.9703 36.6296 41.2143 30.0012 41.2143C23.3728 41.2143 18.0007 35.9703 18.0007 29.5ZM30.0012 36.8214C34.1451 36.8214 37.5015 33.5451 37.5015 29.5C37.5015 25.4549 34.1451 22.1786 30.0012 22.1786C29.9356 22.1786 29.8793 22.1786 29.7293 22.1786C29.9356 22.6453 30.0012 23.1395 30.0012 23.6429C30.0012 26.8734 27.3104 29.5 24.0009 29.5C23.4853 29.5 22.979 29.4359 22.5009 29.2346C22.5009 29.381 22.5009 29.4359 22.5009 29.4176C22.5009 33.5451 25.8573 36.8214 30.0012 36.8214ZM11.946 16.3763C16.36 12.3715 22.4259 9 30.0012 9C37.5765 9 43.6424 12.3715 48.0582 16.3763C52.4459 20.3482 55.3804 25.0248 56.768 28.3743C57.0774 29.0973 57.0774 29.9027 56.768 30.6257C55.3804 33.8929 52.4459 38.5694 48.0582 42.6237C43.6424 46.6321 37.5765 50 30.0012 50C22.4259 50 16.36 46.6321 11.946 42.6237C7.55833 38.5694 4.62571 33.8929 3.23074 30.6257C2.92309 29.9027 2.92309 29.0973 3.23074 28.3743C4.62571 25.0248 7.55833 20.3482 11.946 16.3763ZM30.0012 13.3929C23.8884 13.3929 18.8632 16.1018 15.0099 19.5886C11.4004 22.865 8.90839 26.6721 7.63521 29.5C8.90839 32.2455 11.4004 36.135 15.0099 39.4114C18.8632 42.8982 23.8884 45.6071 30.0012 45.6071C36.1139 45.6071 41.1392 42.8982 44.9925 39.4114C48.602 36.135 51.0115 32.2455 52.3709 29.5C51.0115 26.6721 48.602 22.865 44.9925 19.5886C41.1392 16.1018 36.1139 13.3929 30.0012 13.3929Z" fill="#3E4143"/></svg>

package/dist/tokens/source/assets/svgs.js

@@ -2,27 +2,58 @@
 const svgs = [
   'icon-placeholder',
 	'icon-clear',
+	'icon-instagram',
+	'icon-close',
+	'icon-check',
+	'icon-download',
+	'icon-linkedin',
+	'icon-facebook',
+	'icon-tiktok',
 	'icon-location',
+	'icon-location-dot',
+	'icon-search',
+	'icon-visible',
+	'icon-hidden',
+	'icon-lock',
+	'icon-edit',
+	'icon-envelope',
+	'icon-external-link',
+	'icon-crosshairs',
+	'icon-message',
+	'icon-minus',
+	'icon-mobile',
+	'icon-pdf',
+	'icon-plus',
+	'icon-chevron-up',
+	'icon-chevron-down',
+	'icon-chevron-left',
+	'icon-chevron-right',
+	'icon-clock',
+	'icon-info',
+	'icon-user',
+	'icon-circle',
+	'icon-code',
+	'icon-print',
+	'icon-slider',
+	'icon-document',
 	'icon-checkbox',
 	'icon-radio',
 	'icon-checkbox-selected',
 	'icon-radio-selected',
-	'icon-search',
 	'icon-checkbox-hover',
 	'icon-radio-hover',
 	'icon-checkbox-selected-hover',
 	'icon-radio-selected-hover',
-	'icon-visible',
-	'icon-hidden',
 	'icon-checkbox-disabled',
 	'icon-radio-disabled',
 	'icon-checkbox-selected-disabled',
 	'icon-radio-selected-disabled',
-	'icon-chevron-up',
-	'icon-chevron-down',
-	'icon-chevron-left',
-	'icon-chevron-right',
-	'icon-color-test'
+	'icon-color-test',
+	'graphic-apple-app-store',
+	'graphic-logo',
+	'graphic-ncua',
+	'graphic-ehl',
+	'graphic-google-play-store'
 ];
 
 export default async function getSvg( svgName, urlBase64 ) {
@@ -33,27 +64,58 @@ export default async function getSvg( svgName, urlBase64 ) {
   switch ( svgName ) {
 		case 'icon-placeholder': svg = (await import('./icon-placeholder.js')).default; break;
 		case 'icon-clear': svg = (await import('./icon-clear.js')).default; break;
+		case 'icon-instagram': svg = (await import('./icon-instagram.js')).default; break;
+		case 'icon-close': svg = (await import('./icon-close.js')).default; break;
+		case 'icon-check': svg = (await import('./icon-check.js')).default; break;
+		case 'icon-download': svg = (await import('./icon-download.js')).default; break;
+		case 'icon-linkedin': svg = (await import('./icon-linkedin.js')).default; break;
+		case 'icon-facebook': svg = (await import('./icon-facebook.js')).default; break;
+		case 'icon-tiktok': svg = (await import('./icon-tiktok.js')).default; break;
 		case 'icon-location': svg = (await import('./icon-location.js')).default; break;
+		case 'icon-location-dot': svg = (await import('./icon-location-dot.js')).default; break;
+		case 'icon-search': svg = (await import('./icon-search.js')).default; break;
+		case 'icon-visible': svg = (await import('./icon-visible.js')).default; break;
+		case 'icon-hidden': svg = (await import('./icon-hidden.js')).default; break;
+		case 'icon-lock': svg = (await import('./icon-lock.js')).default; break;
+		case 'icon-edit': svg = (await import('./icon-edit.js')).default; break;
+		case 'icon-envelope': svg = (await import('./icon-envelope.js')).default; break;
+		case 'icon-external-link': svg = (await import('./icon-external-link.js')).default; break;
+		case 'icon-crosshairs': svg = (await import('./icon-crosshairs.js')).default; break;
+		case 'icon-message': svg = (await import('./icon-message.js')).default; break;
+		case 'icon-minus': svg = (await import('./icon-minus.js')).default; break;
+		case 'icon-mobile': svg = (await import('./icon-mobile.js')).default; break;
+		case 'icon-pdf': svg = (await import('./icon-pdf.js')).default; break;
+		case 'icon-plus': svg = (await import('./icon-plus.js')).default; break;
+		case 'icon-chevron-up': svg = (await import('./icon-chevron-up.js')).default; break;
+		case 'icon-chevron-down': svg = (await import('./icon-chevron-down.js')).default; break;
+		case 'icon-chevron-left': svg = (await import('./icon-chevron-left.js')).default; break;
+		case 'icon-chevron-right': svg = (await import('./icon-chevron-right.js')).default; break;
+		case 'icon-clock': svg = (await import('./icon-clock.js')).default; break;
+		case 'icon-info': svg = (await import('./icon-info.js')).default; break;
+		case 'icon-user': svg = (await import('./icon-user.js')).default; break;
+		case 'icon-circle': svg = (await import('./icon-circle.js')).default; break;
+		case 'icon-code': svg = (await import('./icon-code.js')).default; break;
+		case 'icon-print': svg = (await import('./icon-print.js')).default; break;
+		case 'icon-slider': svg = (await import('./icon-slider.js')).default; break;
+		case 'icon-document': svg = (await import('./icon-document.js')).default; break;
 		case 'icon-checkbox': svg = (await import('./icon-checkbox.js')).default; break;
 		case 'icon-radio': svg = (await import('./icon-radio.js')).default; break;
 		case 'icon-checkbox-selected': svg = (await import('./icon-checkbox-selected.js')).default; break;
 		case 'icon-radio-selected': svg = (await import('./icon-radio-selected.js')).default; break;
-		case 'icon-search': svg = (await import('./icon-search.js')).default; break;
 		case 'icon-checkbox-hover': svg = (await import('./icon-checkbox-hover.js')).default; break;
 		case 'icon-radio-hover': svg = (await import('./icon-radio-hover.js')).default; break;
 		case 'icon-checkbox-selected-hover': svg = (await import('./icon-checkbox-selected-hover.js')).default; break;
 		case 'icon-radio-selected-hover': svg = (await import('./icon-radio-selected-hover.js')).default; break;
-		case 'icon-visible': svg = (await import('./icon-visible.js')).default; break;
-		case 'icon-hidden': svg = (await import('./icon-hidden.js')).default; break;
 		case 'icon-checkbox-disabled': svg = (await import('./icon-checkbox-disabled.js')).default; break;
 		case 'icon-radio-disabled': svg = (await import('./icon-radio-disabled.js')).default; break;
 		case 'icon-checkbox-selected-disabled': svg = (await import('./icon-checkbox-selected-disabled.js')).default; break;
 		case 'icon-radio-selected-disabled': svg = (await import('./icon-radio-selected-disabled.js')).default; break;
-		case 'icon-chevron-up': svg = (await import('./icon-chevron-up.js')).default; break;
-		case 'icon-chevron-down': svg = (await import('./icon-chevron-down.js')).default; break;
-		case 'icon-chevron-left': svg = (await import('./icon-chevron-left.js')).default; break;
-		case 'icon-chevron-right': svg = (await import('./icon-chevron-right.js')).default; break;
 		case 'icon-color-test': svg = (await import('./icon-color-test.js')).default; break;
+		case 'graphic-apple-app-store': svg = (await import('./graphic-apple-app-store.js')).default; break;
+		case 'graphic-logo': svg = (await import('./graphic-logo.js')).default; break;
+		case 'graphic-ncua': svg = (await import('./graphic-ncua.js')).default; break;
+		case 'graphic-ehl': svg = (await import('./graphic-ehl.js')).default; break;
+		case 'graphic-google-play-store': svg = (await import('./graphic-google-play-store.js')).default; break;
   }
   if (urlBase64 === true) {
     // need to clean svg of '#'s

package/dist/tokens/source/componentScssMixins/components-scw-card-.json

@@ -5,8 +5,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": {

package/dist/tokens/source/componentScssMixins/components-scw-card-color-checking-action-.json

@@ -5,8 +5,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": {

package/dist/tokens/source/componentScssMixins/components-scw-card-color-checking-description-.json

@@ -10,8 +10,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": {
@@ -20,8 +20,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": {
@@ -35,13 +35,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-checking-heading-.json

@@ -40,13 +40,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-checking-image-.json

@@ -10,8 +10,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": {
@@ -20,8 +20,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": {
@@ -40,13 +40,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-checking-super-heading-.json

@@ -35,13 +35,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-credit-cards-action-.json

@@ -5,8 +5,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": {

package/dist/tokens/source/componentScssMixins/components-scw-card-color-credit-cards-description-.json

@@ -10,8 +10,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": {
@@ -20,8 +20,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": {
@@ -35,13 +35,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-credit-cards-heading-.json

@@ -40,13 +40,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-credit-cards-image-.json

@@ -10,8 +10,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": {
@@ -20,8 +20,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": {
@@ -40,13 +40,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-credit-cards-super-heading-.json

@@ -35,13 +35,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"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-card-color-investments-action-.json

@@ -5,8 +5,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": {

package/dist/tokens/source/componentScssMixins/components-scw-card-color-investments-description-.json

@@ -10,8 +10,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": {
@@ -20,8 +20,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": {
@@ -35,13 +35,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"
   }
 }