@alfalab/core-components 23.4.1 → 23.6.1

package/tag/modern/index.css

@@ -38,7 +38,7 @@
     --tag-border-width: 1px;
     --tag-border-radius: var(--border-radius-pill);
 }
-.tag__component_9cgfy {
+.tag__component_10cj3 {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -57,40 +57,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_9cgfy:disabled {
+.tag__component_10cj3:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_9cgfy {
+.tag__focused_10cj3 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_9cgfy {
+.tag__addons_10cj3 {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_9cgfy:first-child {
+.tag__addons_10cj3:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_9cgfy:last-child {
+.tag__addons_10cj3:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_9cgfy:only-child {
+.tag__addons_10cj3:only-child {
         margin: 0;
     }
-.tag__s_9cgfy .tag__addons_9cgfy:first-child, .tag__m_9cgfy .tag__addons_9cgfy:first-child {
+.tag__s_10cj3 .tag__addons_10cj3:first-child, .tag__m_10cj3 .tag__addons_10cj3:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_9cgfy .tag__addons_9cgfy:last-child, .tag__m_9cgfy .tag__addons_9cgfy:last-child {
+.tag__s_10cj3 .tag__addons_10cj3:last-child, .tag__m_10cj3 .tag__addons_10cj3:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_9cgfy .tag__addons_9cgfy:first-child, .tag__xl_9cgfy .tag__addons_9cgfy:first-child {
+.tag__l_10cj3 .tag__addons_10cj3:first-child, .tag__xl_10cj3 .tag__addons_10cj3:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_9cgfy .tag__addons_9cgfy:last-child, .tag__xl_9cgfy .tag__addons_9cgfy:last-child {
+.tag__l_10cj3 .tag__addons_10cj3:last-child, .tag__xl_10cj3 .tag__addons_10cj3:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_9cgfy {
+.tag__xxs_10cj3 {
     min-width: 60px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
@@ -99,13 +99,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xxs_9cgfy {
+.tag__xxs_10cj3 {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_9cgfy {
+.tag__xs_10cj3 {
     min-width: 72px;
     min-height: 40px;
     padding: 0 var(--gap-l);
@@ -114,13 +114,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xs_9cgfy {
+.tag__xs_10cj3 {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_9cgfy {
+.tag__s_10cj3 {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
@@ -129,13 +129,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__s_9cgfy {
+.tag__s_10cj3 {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_9cgfy {
+.tag__m_10cj3 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
@@ -144,13 +144,13 @@
     padding: 0 28px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__m_9cgfy {
+.tag__m_10cj3 {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_9cgfy {
+.tag__l_10cj3 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -159,13 +159,13 @@
     padding: 0 var(--gap-2xl)
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__l_9cgfy {
+.tag__l_10cj3 {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_9cgfy {
+.tag__xl_10cj3 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -174,45 +174,45 @@
     padding: 0 36px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xl_9cgfy {
+.tag__xl_10cj3 {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_9cgfy.tag__xxs_9cgfy {
+.tag__withRightAddons_10cj3.tag__xxs_10cj3 {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_9cgfy.tag__xs_9cgfy {
+.tag__withRightAddons_10cj3.tag__xs_10cj3 {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_9cgfy.tag__s_9cgfy {
+.tag__withRightAddons_10cj3.tag__s_10cj3 {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_9cgfy.tag__m_9cgfy {
+.tag__withRightAddons_10cj3.tag__m_10cj3 {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_9cgfy.tag__l_9cgfy {
+.tag__withRightAddons_10cj3.tag__l_10cj3 {
         padding-right: 28px;
     }
-.tag__withRightAddons_9cgfy.tag__xl_9cgfy {
+.tag__withRightAddons_10cj3.tag__xl_10cj3 {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_9cgfy.tag__xxs_9cgfy {
+.tag__withLeftAddons_10cj3.tag__xxs_10cj3 {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_9cgfy.tag__xs_9cgfy {
+.tag__withLeftAddons_10cj3.tag__xs_10cj3 {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_9cgfy.tag__s_9cgfy {
+.tag__withLeftAddons_10cj3.tag__s_10cj3 {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_9cgfy.tag__m_9cgfy {
+.tag__withLeftAddons_10cj3.tag__m_10cj3 {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_9cgfy.tag__l_9cgfy {
+.tag__withLeftAddons_10cj3.tag__l_10cj3 {
         padding-left: 28px;
     }
-.tag__withLeftAddons_9cgfy.tag__xl_9cgfy {
+.tag__withLeftAddons_10cj3.tag__xl_10cj3 {
         padding-left: var(--gap-2xl);
     }

package/tag/modern/inverted.css

@@ -41,34 +41,34 @@
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
 }
-.tag__component_1g74n {
+.tag__component_su13s {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_1g74n:disabled {
+.tag__component_su13s:disabled {
         border-color: var(--tag-inverted-border-color-disabled);
         color: var(--tag-inverted-text-color-disabled);
     }
-.tag__component_1g74n:hover:not(:disabled) {
+.tag__component_su13s:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_1g74n:active:not(:disabled) {
+.tag__component_su13s:active:not(:disabled) {
         border-color: var(--tag-inverted-border-color-active);
         background-color: var(--tag-inverted-background-color-active);
         color: var(--tag-inverted-text-color);
     }
-.tag__checked_1g74n {
+.tag__checked_su13s {
     border-color: var(--tag-inverted-border-color-checked);
     background-color: var(--tag-inverted-background-color-checked);
     color: var(--tag-inverted-text-color-checked)
 }
-.tag__checked_1g74n:disabled {
+.tag__checked_su13s:disabled {
         background-color: var(--tag-inverted-background-color-checked-disabled);
         border-color: var(--tag-inverted-border-color-checked-disabled);
         color: var(--tag-inverted-text-color-checked-disabled);
     }
-.tag__checked_1g74n:hover:not(:disabled):not(:active) {
+.tag__checked_su13s:hover:not(:disabled):not(:active) {
         background-color: var(--tag-inverted-background-color-checked);
     }

package/textarea/Component.js

@@ -53,13 +53,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"textarea":"textarea__textarea_uze0s","s":"textarea__s_uze0s","m":"textarea__m_uze0s","l":"textarea__l_uze0s","xl":"textarea__xl_uze0s","hasLabel":"textarea__hasLabel_uze0s","resizeVertical":"textarea__resizeVertical_uze0s","focusVisible":"textarea__focusVisible_uze0s","filled":"textarea__filled_uze0s"};
+var styles = {"textarea":"textarea__textarea_1lokl","s":"textarea__s_1lokl","m":"textarea__m_1lokl","l":"textarea__l_1lokl","xl":"textarea__xl_1lokl","hasLabel":"textarea__hasLabel_1lokl","resizeVertical":"textarea__resizeVertical_1lokl","focusVisible":"textarea__focusVisible_1lokl","filled":"textarea__filled_1lokl"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_1rrdq","hasLabel":"textarea__hasLabel_1rrdq","clearIcon":"textarea__clearIcon_1rrdq","errorIcon":"textarea__errorIcon_1rrdq","successIcon":"textarea__successIcon_1rrdq","error":"textarea__error_1rrdq","textarea":"textarea__textarea_1rrdq"};
+var defaultColors = {"input":"textarea__input_1rnps","hasLabel":"textarea__hasLabel_1rnps","clearIcon":"textarea__clearIcon_1rnps","errorIcon":"textarea__errorIcon_1rnps","successIcon":"textarea__successIcon_1rnps","error":"textarea__error_1rnps","textarea":"textarea__textarea_1rnps"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_ng70a","hasLabel":"textarea__hasLabel_ng70a","clearIcon":"textarea__clearIcon_ng70a","errorIcon":"textarea__errorIcon_ng70a","successIcon":"textarea__successIcon_ng70a","error":"textarea__error_ng70a","textarea":"textarea__textarea_ng70a"};
+var invertedColors = {"input":"textarea__input_ncj2b","hasLabel":"textarea__hasLabel_ncj2b","clearIcon":"textarea__clearIcon_ncj2b","errorIcon":"textarea__errorIcon_ncj2b","successIcon":"textarea__successIcon_ncj2b","error":"textarea__error_ncj2b","textarea":"textarea__textarea_ncj2b"};
 require('./inverted.css');
 
 var colorStyles = {

package/textarea/cssm/default.module.css

@@ -1,4 +1,5 @@
 :root {
+    --color-light-graphic-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
     --color-light-text-tertiary: #b6bcc3;
@@ -12,7 +13,6 @@
     /* Hard up */
 }
 :root {
-    --input-clear-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-circle_m.svg');
     --input-color: var(--color-light-text-primary);
     --input-placeholder-color: var(--color-light-text-secondary);
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
@@ -45,7 +45,7 @@
     color: var(--input-with-label-placeholder-color);
 }
 .clearIcon {
-    background-image: var(--input-clear-icon);
+    color: var(--color-light-graphic-primary);
 }
 .errorIcon {
     background-image: var(--input-error-icon);

package/textarea/cssm/inverted.module.css

@@ -1,4 +1,5 @@
 :root {
+    --color-light-graphic-primary-inverted: #fff;
     --color-light-text-primary-inverted: #fff;
     --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
     --color-light-text-tertiary-inverted: #6d7986;
@@ -12,7 +13,6 @@
     /* Hard up */
 }
 :root {
-    --input-inverted-clear-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-circle_m.svg');
     --input-inverted-color: var(--color-light-text-primary-inverted);
     --input-inverted-placeholder-color: var(--color-light-text-secondary-inverted-transparent);
     --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted);
@@ -45,7 +45,7 @@
     color: var(--input-inverted-with-label-placeholder-color);
 }
 .clearIcon {
-    background-image: var(--input-inverted-clear-icon);
+    color: var(--color-light-graphic-primary-inverted);
 }
 .errorIcon {
     background-image: var(--input-inverted-error-icon);

package/textarea/default.css

@@ -1,5 +1,6 @@
 /* hash: 14s1n */
 :root {
+    --color-light-graphic-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
     --color-light-text-tertiary: #b6bcc3;
@@ -13,7 +14,6 @@
     /* Hard up */
 }
 :root {
-    --input-clear-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-circle_m.svg');
     --input-color: var(--color-light-text-primary);
     --input-placeholder-color: var(--color-light-text-secondary);
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
@@ -31,70 +31,70 @@
     /* error */
     --input-error-color: var(--color-light-text-primary);
 }
-.textarea__input_1rrdq {
+.textarea__input_1rnps {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1rrdq:-webkit-autofill {
+.textarea__input_1rnps:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_1rrdq::placeholder {
+.textarea__input_1rnps::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_1rrdq::placeholder {
+.textarea__hasLabel_1rnps::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_1rrdq {
-    background-image: var(--input-clear-icon);
+.textarea__clearIcon_1rnps {
+    color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_1rrdq {
+.textarea__errorIcon_1rnps {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_1rrdq {
+.textarea__successIcon_1rnps {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_1rrdq:read-only {
+.textarea__input_1rnps:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_1rrdq:read-only:focus::placeholder {
+.textarea__input_1rnps:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1rrdq:disabled {
+.textarea__input_1rnps:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1rrdq:focus::placeholder {
+.textarea__input_1rnps:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1rrdq {
+.textarea__error_1rnps {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_1rrdq {
+.textarea__textarea_1rnps {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1rrdq::placeholder {
+.textarea__textarea_1rnps::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_1rrdq::placeholder {
+.textarea__hasLabel_1rnps::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1rrdq:disabled {
+.textarea__textarea_1rnps:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1rrdq:read-only {
+.textarea__textarea_1rnps:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1rrdq:focus::placeholder {
+.textarea__textarea_1rnps:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/esm/Component.js

@@ -44,13 +44,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"textarea":"textarea__textarea_uze0s","s":"textarea__s_uze0s","m":"textarea__m_uze0s","l":"textarea__l_uze0s","xl":"textarea__xl_uze0s","hasLabel":"textarea__hasLabel_uze0s","resizeVertical":"textarea__resizeVertical_uze0s","focusVisible":"textarea__focusVisible_uze0s","filled":"textarea__filled_uze0s"};
+var styles = {"textarea":"textarea__textarea_1lokl","s":"textarea__s_1lokl","m":"textarea__m_1lokl","l":"textarea__l_1lokl","xl":"textarea__xl_1lokl","hasLabel":"textarea__hasLabel_1lokl","resizeVertical":"textarea__resizeVertical_1lokl","focusVisible":"textarea__focusVisible_1lokl","filled":"textarea__filled_1lokl"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_1rrdq","hasLabel":"textarea__hasLabel_1rrdq","clearIcon":"textarea__clearIcon_1rrdq","errorIcon":"textarea__errorIcon_1rrdq","successIcon":"textarea__successIcon_1rrdq","error":"textarea__error_1rrdq","textarea":"textarea__textarea_1rrdq"};
+var defaultColors = {"input":"textarea__input_1rnps","hasLabel":"textarea__hasLabel_1rnps","clearIcon":"textarea__clearIcon_1rnps","errorIcon":"textarea__errorIcon_1rnps","successIcon":"textarea__successIcon_1rnps","error":"textarea__error_1rnps","textarea":"textarea__textarea_1rnps"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_ng70a","hasLabel":"textarea__hasLabel_ng70a","clearIcon":"textarea__clearIcon_ng70a","errorIcon":"textarea__errorIcon_ng70a","successIcon":"textarea__successIcon_ng70a","error":"textarea__error_ng70a","textarea":"textarea__textarea_ng70a"};
+var invertedColors = {"input":"textarea__input_ncj2b","hasLabel":"textarea__hasLabel_ncj2b","clearIcon":"textarea__clearIcon_ncj2b","errorIcon":"textarea__errorIcon_ncj2b","successIcon":"textarea__successIcon_ncj2b","error":"textarea__error_ncj2b","textarea":"textarea__textarea_ncj2b"};
 require('./inverted.css');
 
 var colorStyles = {

package/textarea/esm/default.css

@@ -1,5 +1,6 @@
 /* hash: 14s1n */
 :root {
+    --color-light-graphic-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
     --color-light-text-tertiary: #b6bcc3;
@@ -13,7 +14,6 @@
     /* Hard up */
 }
 :root {
-    --input-clear-icon: url('https://alfabank.gcdn.co/icons/glyph_cross-circle_m.svg');
     --input-color: var(--color-light-text-primary);
     --input-placeholder-color: var(--color-light-text-secondary);
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
@@ -31,70 +31,70 @@
     /* error */
     --input-error-color: var(--color-light-text-primary);
 }
-.textarea__input_1rrdq {
+.textarea__input_1rnps {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1rrdq:-webkit-autofill {
+.textarea__input_1rnps:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_1rrdq::placeholder {
+.textarea__input_1rnps::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_1rrdq::placeholder {
+.textarea__hasLabel_1rnps::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_1rrdq {
-    background-image: var(--input-clear-icon);
+.textarea__clearIcon_1rnps {
+    color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_1rrdq {
+.textarea__errorIcon_1rnps {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_1rrdq {
+.textarea__successIcon_1rnps {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_1rrdq:read-only {
+.textarea__input_1rnps:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_1rrdq:read-only:focus::placeholder {
+.textarea__input_1rnps:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1rrdq:disabled {
+.textarea__input_1rnps:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1rrdq:focus::placeholder {
+.textarea__input_1rnps:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1rrdq {
+.textarea__error_1rnps {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_1rrdq {
+.textarea__textarea_1rnps {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1rrdq::placeholder {
+.textarea__textarea_1rnps::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_1rrdq::placeholder {
+.textarea__hasLabel_1rnps::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1rrdq:disabled {
+.textarea__textarea_1rnps:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1rrdq:read-only {
+.textarea__textarea_1rnps:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1rrdq:focus::placeholder {
+.textarea__textarea_1rnps:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/esm/index.css

@@ -50,7 +50,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__textarea_uze0s {
+.textarea__textarea_1lokl {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -67,81 +67,81 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_uze0s.textarea__s_uze0s {
+.textarea__textarea_1lokl.textarea__s_1lokl {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_uze0s.textarea__m_uze0s {
+.textarea__textarea_1lokl.textarea__m_1lokl {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_uze0s.textarea__l_uze0s {
+.textarea__textarea_1lokl.textarea__l_1lokl {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_uze0s.textarea__xl_uze0s {
+.textarea__textarea_1lokl.textarea__xl_1lokl {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_uze0s::placeholder {
+.textarea__textarea_1lokl::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasLabel_uze0s::placeholder {
+.textarea__hasLabel_1lokl::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_uze0s {
+.textarea__resizeVertical_1lokl {
     resize: vertical;
 }
 /* SIZES */
-.textarea__textarea_uze0s.textarea__s_uze0s {
+.textarea__textarea_1lokl.textarea__s_1lokl {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_uze0s.textarea__m_uze0s {
+.textarea__textarea_1lokl.textarea__m_1lokl {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_uze0s.textarea__l_uze0s {
+.textarea__textarea_1lokl.textarea__l_1lokl {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_uze0s.textarea__xl_uze0s {
+.textarea__textarea_1lokl.textarea__xl_1lokl {
         min-height: var(--textarea-xl-min-height);
     }
 /* DISABLED STATE */
-.textarea__textarea_uze0s:disabled {
+.textarea__textarea_1lokl:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_uze0s:read-only {
+.textarea__textarea_1lokl:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_uze0s:focus.textarea__hasLabel_uze0s::placeholder {
+.textarea__textarea_1lokl:focus.textarea__hasLabel_1lokl::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_uze0s {
+.textarea__focusVisible_1lokl {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_uze0s.textarea__filled_uze0s.textarea__hasLabel_uze0s {
+.textarea__textarea_1lokl.textarea__filled_1lokl.textarea__hasLabel_1lokl {
     padding-top: 0
 }
-.textarea__textarea_uze0s.textarea__filled_uze0s.textarea__hasLabel_uze0s.textarea__s_uze0s {
+.textarea__textarea_1lokl.textarea__filled_1lokl.textarea__hasLabel_1lokl.textarea__s_1lokl {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height);
         height: var(--textarea-s-filled-min-height);
     }
-.textarea__textarea_uze0s.textarea__filled_uze0s.textarea__hasLabel_uze0s.textarea__m_uze0s {
+.textarea__textarea_1lokl.textarea__filled_1lokl.textarea__hasLabel_1lokl.textarea__m_1lokl {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height);
         height: var(--textarea-m-filled-min-height);
     }
-.textarea__textarea_uze0s.textarea__filled_uze0s.textarea__hasLabel_uze0s.textarea__l_uze0s {
+.textarea__textarea_1lokl.textarea__filled_1lokl.textarea__hasLabel_1lokl.textarea__l_1lokl {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height);
         height: var(--textarea-l-filled-min-height);
     }
-.textarea__textarea_uze0s.textarea__filled_uze0s.textarea__hasLabel_uze0s.textarea__xl_uze0s {
+.textarea__textarea_1lokl.textarea__filled_1lokl.textarea__hasLabel_1lokl.textarea__xl_1lokl {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);