@alfalab/core-components 23.0.0 → 23.4.0

package/typography/title/index.css

@@ -17,87 +17,87 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 }
-.typography__styrene-xlarge_xkuwn {
+.typography__styrene-xlarge_1cr5l {
     font-size: 48px;
     line-height: 64px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-large_xkuwn {
+.typography__styrene-large_1cr5l {
     font-size: 40px;
     line-height: 48px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-medium_xkuwn {
+.typography__styrene-medium_1cr5l {
     font-size: 32px;
     line-height: 40px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-small_xkuwn {
+.typography__styrene-small_1cr5l {
     font-size: 24px;
     line-height: 32px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-xsmall_xkuwn {
+.typography__styrene-xsmall_1cr5l {
     font-size: 20px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__system-xlarge_xkuwn {
+.typography__system-xlarge_1cr5l {
     font-size: 48px;
     line-height: 52px;
     font-weight: 700;
 }
-.typography__system-large_xkuwn {
+.typography__system-large_1cr5l {
     font-size: 40px;
     line-height: 48px;
     font-weight: 700;
 }
-.typography__system-medium_xkuwn {
+.typography__system-medium_1cr5l {
     font-size: 30px;
     line-height: 36px;
     font-weight: 700;
 }
-.typography__system-small_xkuwn {
+.typography__system-small_1cr5l {
     font-size: 22px;
     line-height: 26px;
     font-weight: 700;
 }
-.typography__system-xsmall_xkuwn {
+.typography__system-xsmall_1cr5l {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__margins-xlarge_xkuwn {
+.typography__margins-xlarge_1cr5l {
     margin: 0 0 var(--gap-xl);
 }
-.typography__margins-large_xkuwn {
+.typography__margins-large_1cr5l {
     margin: var(--gap-4xl) 0 var(--gap-xl);
 }
-.typography__margins-medium_xkuwn {
+.typography__margins-medium_1cr5l {
     margin: var(--gap-4xl) 0 var(--gap-xl);
 }
-.typography__margins-small_xkuwn {
+.typography__margins-small_1cr5l {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-xsmall_xkuwn {
+.typography__margins-xsmall_1cr5l {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__bold_xkuwn {
+.typography__bold_1cr5l {
     font-weight: bold;
 }
-.typography__medium_xkuwn {
+.typography__medium_1cr5l {
     font-weight: 500;
 }
-.typography__regular_xkuwn {
+.typography__regular_1cr5l {
     font-weight: normal;
 }

package/typography/title/index.js

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var colors_module = require('../colors.module-61cec048.js');
+var colors_module = require('../colors.module-1cfc5092.js');
 var React = require('react');
 require('classnames');
 var title_component = require('./component.js');
-var common_module = require('../common.module-03e442de.js');
+var common_module = require('../common.module-4a429a30.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"styrene-xlarge":"typography__styrene-xlarge_xkuwn","styrene-large":"typography__styrene-large_xkuwn","styrene-medium":"typography__styrene-medium_xkuwn","styrene-small":"typography__styrene-small_xkuwn","styrene-xsmall":"typography__styrene-xsmall_xkuwn","system-xlarge":"typography__system-xlarge_xkuwn","system-large":"typography__system-large_xkuwn","system-medium":"typography__system-medium_xkuwn","system-small":"typography__system-small_xkuwn","system-xsmall":"typography__system-xsmall_xkuwn","margins-xlarge":"typography__margins-xlarge_xkuwn","margins-large":"typography__margins-large_xkuwn","margins-medium":"typography__margins-medium_xkuwn","margins-small":"typography__margins-small_xkuwn","margins-xsmall":"typography__margins-xsmall_xkuwn","bold":"typography__bold_xkuwn","medium":"typography__medium_xkuwn","regular":"typography__regular_xkuwn"};
+var styles = {"styrene-xlarge":"typography__styrene-xlarge_1cr5l","styrene-large":"typography__styrene-large_1cr5l","styrene-medium":"typography__styrene-medium_1cr5l","styrene-small":"typography__styrene-small_1cr5l","styrene-xsmall":"typography__styrene-xsmall_1cr5l","system-xlarge":"typography__system-xlarge_1cr5l","system-large":"typography__system-large_1cr5l","system-medium":"typography__system-medium_1cr5l","system-small":"typography__system-small_1cr5l","system-xsmall":"typography__system-xsmall_1cr5l","margins-xlarge":"typography__margins-xlarge_1cr5l","margins-large":"typography__margins-large_1cr5l","margins-medium":"typography__margins-medium_1cr5l","margins-small":"typography__margins-small_1cr5l","margins-xsmall":"typography__margins-xsmall_1cr5l","bold":"typography__bold_1cr5l","medium":"typography__medium_1cr5l","regular":"typography__regular_1cr5l"};
 require('./index.css');
 
 var Title = function (props) {

package/typography/title-responsive/component.js

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var colors_module = require('../colors.module-61cec048.js');
+var colors_module = require('../colors.module-1cfc5092.js');
 var React = require('react');
 require('classnames');
 var title_component = require('../title/component.js');
-var common_module = require('../common.module-03e442de.js');
+var common_module = require('../common.module-4a429a30.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"styrene-xlarge":"typography__styrene-xlarge_1j2em","styrene-large":"typography__styrene-large_1j2em","styrene-medium":"typography__styrene-medium_1j2em","styrene-small":"typography__styrene-small_1j2em","styrene-xsmall":"typography__styrene-xsmall_1j2em","system-xlarge":"typography__system-xlarge_1j2em","system-large":"typography__system-large_1j2em","system-medium":"typography__system-medium_1j2em","system-small":"typography__system-small_1j2em","system-xsmall":"typography__system-xsmall_1j2em","margins-xlarge":"typography__margins-xlarge_1j2em","margins-large":"typography__margins-large_1j2em","margins-medium":"typography__margins-medium_1j2em","margins-small":"typography__margins-small_1j2em","margins-xsmall":"typography__margins-xsmall_1j2em"};
+var styles = {"styrene-xlarge":"typography__styrene-xlarge_13w3x","styrene-large":"typography__styrene-large_13w3x","styrene-medium":"typography__styrene-medium_13w3x","styrene-small":"typography__styrene-small_13w3x","styrene-xsmall":"typography__styrene-xsmall_13w3x","system-xlarge":"typography__system-xlarge_13w3x","system-large":"typography__system-large_13w3x","system-medium":"typography__system-medium_13w3x","system-small":"typography__system-small_13w3x","system-xsmall":"typography__system-xsmall_13w3x","margins-xlarge":"typography__margins-xlarge_13w3x","margins-large":"typography__margins-large_13w3x","margins-medium":"typography__margins-medium_13w3x","margins-small":"typography__margins-small_13w3x","margins-xsmall":"typography__margins-xsmall_13w3x"};
 require('./index.css');
 
 var TitleResponsive = function (props) {

package/typography/title-responsive/index.css

@@ -18,83 +18,83 @@
         'Helvetica Neue', Helvetica, sans-serif;
 }
 /* TODO: поменять медиа-запросы на миксины */
-.typography__styrene-xlarge_1j2em {
+.typography__styrene-xlarge_13w3x {
     font-size: 32px;
     line-height: 40px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-large_1j2em {
+.typography__styrene-large_13w3x {
     font-size: 24px;
     line-height: 32px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-medium_1j2em {
+.typography__styrene-medium_13w3x {
     font-size: 20px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-small_1j2em {
+.typography__styrene-small_13w3x {
     font-size: 20px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__styrene-xsmall_1j2em {
+.typography__styrene-xsmall_13w3x {
     font-size: 20px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
 }
-.typography__system-xlarge_1j2em {
+.typography__system-xlarge_13w3x {
     font-size: 30px;
     line-height: 36px;
     font-weight: 700;
 }
-.typography__system-large_1j2em {
+.typography__system-large_13w3x {
     font-size: 22px;
     line-height: 26px;
     font-weight: 700;
 }
-.typography__system-medium_1j2em {
+.typography__system-medium_13w3x {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__system-small_1j2em {
+.typography__system-small_13w3x {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__system-xsmall_1j2em {
+.typography__system-xsmall_13w3x {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
 }
-.typography__margins-xlarge_1j2em {
+.typography__margins-xlarge_13w3x {
     margin: 0 0 var(--gap-xl);
 }
-.typography__margins-large_1j2em {
+.typography__margins-large_13w3x {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-medium_1j2em {
+.typography__margins-medium_13w3x {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-small_1j2em {
+.typography__margins-small_13w3x {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
-.typography__margins-xsmall_1j2em {
+.typography__margins-xsmall_13w3x {
     margin: var(--gap-3xl) 0 var(--gap-m);
 }
 @media screen and (min-width: 600px) {
-    .typography__styrene-xlarge_1j2em {
+    .typography__styrene-xlarge_13w3x {
         font-size: 40px;
         line-height: 48px;
         font-weight: 500;
@@ -102,7 +102,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-large_1j2em {
+    .typography__styrene-large_13w3x {
         font-size: 32px;
         line-height: 40px;
         font-weight: 500;
@@ -110,7 +110,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-medium_1j2em {
+    .typography__styrene-medium_13w3x {
         font-size: 24px;
         line-height: 32px;
         font-weight: 500;
@@ -118,7 +118,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-small_1j2em {
+    .typography__styrene-small_13w3x {
         font-size: 24px;
         line-height: 32px;
         font-weight: 500;
@@ -126,7 +126,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-xsmall_1j2em {
+    .typography__styrene-xsmall_13w3x {
         font-size: 20px;
         line-height: 24px;
         font-weight: 500;
@@ -134,58 +134,58 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__system-xlarge_1j2em {
+    .typography__system-xlarge_13w3x {
         font-size: 40px;
         line-height: 48px;
         font-weight: 700;
     }
 
-    .typography__system-large_1j2em {
+    .typography__system-large_13w3x {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
     }
 
-    .typography__system-medium_1j2em {
+    .typography__system-medium_13w3x {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
     }
 
-    .typography__system-small_1j2em {
+    .typography__system-small_13w3x {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
     }
 
-    .typography__system-xsmall_1j2em {
+    .typography__system-xsmall_13w3x {
         font-size: 18px;
         line-height: 22px;
         font-weight: 700;
     }
 
-    .typography__margins-xlarge_1j2em {
+    .typography__margins-xlarge_13w3x {
         margin: 0 0 var(--gap-xl);
     }
 
-    .typography__margins-large_1j2em {
+    .typography__margins-large_13w3x {
         margin: var(--gap-4xl) 0 var(--gap-xl);
     }
 
-    .typography__margins-medium_1j2em {
+    .typography__margins-medium_13w3x {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 
-    .typography__margins-small_1j2em {
+    .typography__margins-small_13w3x {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 
-    .typography__margins-xsmall_1j2em {
+    .typography__margins-xsmall_13w3x {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 }
 @media screen and (min-width: 1024px) {
-    .typography__styrene-xlarge_1j2em {
+    .typography__styrene-xlarge_13w3x {
         font-size: 48px;
         line-height: 64px;
         font-weight: 500;
@@ -193,7 +193,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-large_1j2em {
+    .typography__styrene-large_13w3x {
         font-size: 40px;
         line-height: 48px;
         font-weight: 500;
@@ -201,7 +201,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-medium_1j2em {
+    .typography__styrene-medium_13w3x {
         font-size: 32px;
         line-height: 40px;
         font-weight: 500;
@@ -209,7 +209,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-small_1j2em {
+    .typography__styrene-small_13w3x {
         font-size: 24px;
         line-height: 32px;
         font-weight: 500;
@@ -217,7 +217,7 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__styrene-xsmall_1j2em {
+    .typography__styrene-xsmall_13w3x {
         font-size: 20px;
         line-height: 24px;
         font-weight: 500;
@@ -225,53 +225,53 @@
         font-family: var(--font-family-styrene);
     }
 
-    .typography__system-xlarge_1j2em {
+    .typography__system-xlarge_13w3x {
         font-size: 48px;
         line-height: 52px;
         font-weight: 700;
     }
 
-    .typography__system-large_1j2em {
+    .typography__system-large_13w3x {
         font-size: 40px;
         line-height: 48px;
         font-weight: 700;
     }
 
-    .typography__system-medium_1j2em {
+    .typography__system-medium_13w3x {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
     }
 
-    .typography__system-small_1j2em {
+    .typography__system-small_13w3x {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
     }
 
-    .typography__system-xsmall_1j2em {
+    .typography__system-xsmall_13w3x {
         font-size: 18px;
         line-height: 22px;
         font-weight: 700;
     }
 
-    .typography__margins-xlarge_1j2em {
+    .typography__margins-xlarge_13w3x {
         margin: 0 0 var(--gap-xl);
     }
 
-    .typography__margins-large_1j2em {
+    .typography__margins-large_13w3x {
         margin: var(--gap-4xl) 0 var(--gap-xl);
     }
 
-    .typography__margins-medium_1j2em {
+    .typography__margins-medium_13w3x {
         margin: var(--gap-4xl) 0 var(--gap-xl);
     }
 
-    .typography__margins-small_1j2em {
+    .typography__margins-small_13w3x {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 
-    .typography__margins-xsmall_1j2em {
+    .typography__margins-xsmall_13w3x {
         margin: var(--gap-3xl) 0 var(--gap-m);
     }
 }

package/typography/title-responsive/index.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../colors.module-61cec048.js');
+require('../colors.module-1cfc5092.js');
 require('react');
 require('classnames');
 require('../title/component.js');
-require('../common.module-03e442de.js');
+require('../common.module-4a429a30.js');
 var titleResponsive_component = require('./component.js');
 
 

package/vars/colors-addons.css

@@ -46,10 +46,17 @@
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
     --color-static-status-blue-tint-90: color-mod(#007aff tint(90%));
+    --color-static-status-blue-alpha-10: color-mod(#007aff alpha(10%));
     --color-static-status-green-tint-90: color-mod(#13a463 tint(90%));
+    --color-static-status-green-alpha-10: color-mod(#13a463 alpha(10%));
     --color-static-status-grey-tint-90: color-mod(#6d7986 tint(90%));
+    --color-static-status-grey-alpha-10: color-mod(#6d7986 alpha(10%));
     --color-static-status-orange-tint-90: color-mod(#de6a00 tint(90%));
+    --color-static-status-orange-alpha-10: color-mod(#de6a00 alpha(10%));
     --color-static-status-purple-tint-90: color-mod(#673ab7 tint(90%));
+    --color-static-status-purple-alpha-10: color-mod(#673ab7 alpha(10%));
     --color-static-status-red-tint-90: color-mod(#d91d0b tint(90%));
+    --color-static-status-red-alpha-10: color-mod(#d91d0b alpha(10%));
     --color-static-status-teal-tint-90: color-mod(#219187 tint(90%));
+    --color-static-status-teal-alpha-10: color-mod(#219187 alpha(10%));
 }

package/vars/cssm/colors-addons.css

@@ -46,10 +46,17 @@
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
     --color-static-status-blue-tint-90: rgb(230, 242, 255);
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
     --color-static-status-green-tint-90: rgb(231, 246, 239);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
     --color-static-status-grey-tint-90: rgb(240, 242, 243);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
     --color-static-status-orange-tint-90: rgb(252, 240, 230);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
     --color-static-status-purple-tint-90: rgb(240, 235, 248);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
     --color-static-status-red-tint-90: rgb(251, 232, 231);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
     --color-static-status-teal-tint-90: rgb(233, 244, 243);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
 }

package/vars/cssm/index.css

@@ -117,12 +117,19 @@
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
     --color-static-status-blue-tint-90: rgb(230, 242, 255);
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
     --color-static-status-green-tint-90: rgb(231, 246, 239);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
     --color-static-status-grey-tint-90: rgb(240, 242, 243);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
     --color-static-status-orange-tint-90: rgb(252, 240, 230);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
     --color-static-status-purple-tint-90: rgb(240, 235, 248);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
     --color-static-status-red-tint-90: rgb(251, 232, 231);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
     --color-static-status-teal-tint-90: rgb(233, 244, 243);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
 }
 :root {
     --color-dark-bg-accent: #ef3124;

package/vars/dist/colors-addons.css

@@ -46,10 +46,17 @@
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
     --color-static-status-blue-tint-90: color-mod(#007aff tint(90%));
+    --color-static-status-blue-alpha-10: color-mod(#007aff alpha(10%));
     --color-static-status-green-tint-90: color-mod(#13a463 tint(90%));
+    --color-static-status-green-alpha-10: color-mod(#13a463 alpha(10%));
     --color-static-status-grey-tint-90: color-mod(#6d7986 tint(90%));
+    --color-static-status-grey-alpha-10: color-mod(#6d7986 alpha(10%));
     --color-static-status-orange-tint-90: color-mod(#de6a00 tint(90%));
+    --color-static-status-orange-alpha-10: color-mod(#de6a00 alpha(10%));
     --color-static-status-purple-tint-90: color-mod(#673ab7 tint(90%));
+    --color-static-status-purple-alpha-10: color-mod(#673ab7 alpha(10%));
     --color-static-status-red-tint-90: color-mod(#d91d0b tint(90%));
+    --color-static-status-red-alpha-10: color-mod(#d91d0b alpha(10%));
     --color-static-status-teal-tint-90: color-mod(#219187 tint(90%));
+    --color-static-status-teal-alpha-10: color-mod(#219187 alpha(10%));
 }

package/vars/dist/cssm/colors-addons.css

@@ -46,10 +46,17 @@
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
     --color-static-status-blue-tint-90: rgb(230, 242, 255);
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
     --color-static-status-green-tint-90: rgb(231, 246, 239);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
     --color-static-status-grey-tint-90: rgb(240, 242, 243);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
     --color-static-status-orange-tint-90: rgb(252, 240, 230);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
     --color-static-status-purple-tint-90: rgb(240, 235, 248);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
     --color-static-status-red-tint-90: rgb(251, 232, 231);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
     --color-static-status-teal-tint-90: rgb(233, 244, 243);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
 }

package/vars/dist/cssm/index.css

@@ -117,12 +117,19 @@
     --color-static-status-red: #d91d0b;
     --color-static-status-teal: #219187;
     --color-static-status-blue-tint-90: rgb(230, 242, 255);
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
     --color-static-status-green-tint-90: rgb(231, 246, 239);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
     --color-static-status-grey-tint-90: rgb(240, 242, 243);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
     --color-static-status-orange-tint-90: rgb(252, 240, 230);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
     --color-static-status-purple-tint-90: rgb(240, 235, 248);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
     --color-static-status-red-tint-90: rgb(251, 232, 231);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
     --color-static-status-teal-tint-90: rgb(233, 244, 243);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
 }
 :root {
     --color-dark-bg-accent: #ef3124;

package/vars/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-vars",
-    "version": "5.0.0",
+    "version": "5.1.0",
     "description": "",
     "keywords": [],
     "license": "MIT",

package/with-suffix/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"suffixContainer":"with-suffix__suffixContainer_1h1cl","suffixVisible":"with-suffix__suffixVisible_1h1cl","hasSuffix":"with-suffix__hasSuffix_1h1cl","spacer":"with-suffix__spacer_1h1cl","suffix":"with-suffix__suffix_1h1cl","disabled":"with-suffix__disabled_1h1cl","readOnly":"with-suffix__readOnly_1h1cl"};
+var styles = {"suffixContainer":"with-suffix__suffixContainer_1dhbw","suffixVisible":"with-suffix__suffixVisible_1dhbw","hasSuffix":"with-suffix__hasSuffix_1dhbw","spacer":"with-suffix__spacer_1dhbw","suffix":"with-suffix__suffix_1dhbw","disabled":"with-suffix__disabled_1dhbw","readOnly":"with-suffix__readOnly_1dhbw"};
 require('./index.css');
 
 var withSuffix = function (Input) {

package/with-suffix/esm/Component.js

@@ -42,7 +42,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"suffixContainer":"with-suffix__suffixContainer_1h1cl","suffixVisible":"with-suffix__suffixVisible_1h1cl","hasSuffix":"with-suffix__hasSuffix_1h1cl","spacer":"with-suffix__spacer_1h1cl","suffix":"with-suffix__suffix_1h1cl","disabled":"with-suffix__disabled_1h1cl","readOnly":"with-suffix__readOnly_1h1cl"};
+var styles = {"suffixContainer":"with-suffix__suffixContainer_1dhbw","suffixVisible":"with-suffix__suffixVisible_1dhbw","hasSuffix":"with-suffix__hasSuffix_1dhbw","spacer":"with-suffix__spacer_1dhbw","suffix":"with-suffix__suffix_1dhbw","disabled":"with-suffix__disabled_1dhbw","readOnly":"with-suffix__readOnly_1dhbw"};
 require('./index.css');
 
 var withSuffix = function (Input) {

package/with-suffix/esm/index.css

@@ -1,5 +1,5 @@
-/* hash: c2z8i */
-.with-suffix__suffixContainer_1h1cl {
+/* hash: 19n7x */
+.with-suffix__suffixContainer_1dhbw {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -13,30 +13,30 @@
     pointer-events: none;
 }
 
-input:focus:not(:read-only) + .with-suffix__suffixContainer_1h1cl,
-.with-suffix__suffixVisible_1h1cl .with-suffix__suffixContainer_1h1cl {
+input:focus:not(:read-only) + .with-suffix__suffixContainer_1dhbw,
+.with-suffix__suffixVisible_1dhbw .with-suffix__suffixContainer_1dhbw {
     display: inline-flex;
 }
 
-.with-suffix__hasSuffix_1h1cl input:focus::placeholder {
+.with-suffix__hasSuffix_1dhbw input:focus::placeholder {
     color: transparent;
     transition: none;
 }
 
-.with-suffix__spacer_1h1cl {
+.with-suffix__spacer_1dhbw {
     visibility: hidden;
     flex-shrink: 0;
     white-space: pre;
 }
 
-.with-suffix__suffix_1h1cl {
+.with-suffix__suffix_1dhbw {
     white-space: pre;
 }
 
-.with-suffix__disabled_1h1cl {
+.with-suffix__disabled_1dhbw {
     color: var(--input-disabled-color);
 }
 
-.with-suffix__readOnly_1h1cl {
+.with-suffix__readOnly_1dhbw {
     color: var(--input-read-only-color);
 }