@alfalab/core-components 25.7.0 → 25.8.0

package/tag/modern/Component.js

@@ -3,25 +3,25 @@ import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"tag__component_1bho5","focused":"tag__focused_1bho5","addons":"tag__addons_1bho5","s":"tag__s_1bho5","m":"tag__m_1bho5","l":"tag__l_1bho5","xl":"tag__xl_1bho5","xxs":"tag__xxs_1bho5","xs":"tag__xs_1bho5","withRightAddons":"tag__withRightAddons_1bho5","withLeftAddons":"tag__withLeftAddons_1bho5"};
+var styles = {"component":"tag__component_1rkcx","focused":"tag__focused_1rkcx","addons":"tag__addons_1rkcx","s":"tag__s_1rkcx","m":"tag__m_1rkcx","l":"tag__l_1rkcx","xl":"tag__xl_1rkcx","xxs":"tag__xxs_1rkcx","xs":"tag__xs_1rkcx","withRightAddons":"tag__withRightAddons_1rkcx","withLeftAddons":"tag__withLeftAddons_1rkcx","default":"tag__default_1rkcx","alt":"tag__alt_1rkcx"};
 require('./index.css');
 
-var defaultColors = {"component":"tag__component_1cc7y","checked":"tag__checked_1cc7y"};
+var defaultColors = {"component":"tag__component_1ho8c","checked":"tag__checked_1ho8c"};
 require('./default.css');
 
-var invertedColors = {"component":"tag__component_zew51","checked":"tag__checked_zew51"};
+var invertedColors = {"component":"tag__component_14qwj","checked":"tag__checked_14qwj"};
 require('./inverted.css');
 
 const colorStylesMap = {
     default: defaultColors,
     inverted: invertedColors,
 };
-const Tag = forwardRef(({ rightAddons, leftAddons, children, size = 's', checked, className, dataTestId, name, colors = 'default', onClick, ...restProps }, ref) => {
+const Tag = forwardRef(({ rightAddons, leftAddons, children, size = 's', checked, className, dataTestId, name, colors = 'default', onClick, variant = 'default', ...restProps }, ref) => {
     const colorStyles = colorStylesMap[colors];
     const tagRef = useRef(null);
     const [focused] = useFocus(tagRef, 'keyboard');
     const tagProps = {
-        className: cn(styles.component, colorStyles.component, styles[size], {
+        className: cn(styles.component, colorStyles.component, styles[size], styles[variant], {
             [styles.checked]: checked,
             [colorStyles.checked]: checked,
             [styles.focused]: focused,

package/tag/modern/default.css

@@ -3,12 +3,14 @@
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-border-key: #0b1f35;
     --color-light-border-primary: #dbdee1;
-    --color-light-border-secondary-inverted: #b6bcc3;
+    --color-light-border-underline: #b6bcc3;
     --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
     --color-light-text-tertiary: #b6bcc3;
     --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
-    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
+    --color-light-bg-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
 }
 :root {
 
@@ -20,7 +22,7 @@
 }
 :root {
     /* border */
-    --tag-border-color: var(--color-light-border-secondary-inverted);
+    --tag-border-color: var(--color-light-border-underline);
     --tag-border-color-hover: var(--color-light-border-key);
     --tag-border-color-active: var(--color-light-border-key);
     --tag-border-color-checked: var(--color-light-border-key);
@@ -31,8 +33,11 @@
     --tag-background-color: transparent;
     --tag-background-color-hover: transparent;
     --tag-background-color-active: var(--color-light-bg-primary-inverted-alpha-7);
+    --tag-background-color-disabled: transparent;
     --tag-background-color-checked: var(--color-light-bg-primary-inverted);
-    --tag-background-color-checked-disabled: var(--color-light-bg-primary-inverted-alpha-15);
+    --tag-background-color-checked-hover: var(--color-light-bg-primary-inverted-tint-15);
+    --tag-background-color-checked-active: var(--color-light-bg-primary-inverted-tint-20);
+    --tag-background-color-checked-disabled: var(--color-light-bg-primary-inverted-alpha-30);
 
     /* text color */
     --tag-text-color: var(--color-light-text-primary);
@@ -40,34 +45,39 @@
     --tag-text-color-disabled: var(--color-light-text-tertiary);
     --tag-text-color-checked-disabled: var(--color-light-text-primary-inverted);
 }
-.tag__component_1cc7y {
+.tag__component_1ho8c {
     color: var(--tag-text-color);
     border-color: var(--tag-border-color);
     background-color: var(--tag-background-color)
 }
-.tag__component_1cc7y:disabled {
+.tag__component_1ho8c:disabled {
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
+        background-color: var(--tag-background-color-disabled);
     }
-.tag__component_1cc7y:hover:not(:disabled) {
+.tag__component_1ho8c:hover:not(:disabled) {
         border-color: var(--tag-border-color-hover);
         background-color: var(--tag-background-color-hover);
     }
-.tag__component_1cc7y:active:not(:disabled) {
+.tag__component_1ho8c:active:not(:disabled) {
         border-color: var(--tag-border-color-active);
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-.tag__checked_1cc7y {
+.tag__checked_1ho8c {
     border-color: var(--tag-border-color-checked);
     background-color: var(--tag-background-color-checked);
     color: var(--tag-text-color-checked)
 }
-.tag__checked_1cc7y:disabled {
+.tag__checked_1ho8c:disabled {
         background-color: var(--tag-background-color-checked-disabled);
         border-color: var(--tag-border-color-checked-disabled);
         color: var(--tag-text-color-checked-disabled);
     }
-.tag__checked_1cc7y:hover:not(:disabled):not(:active) {
-        background-color: var(--tag-background-color-checked);
+.tag__checked_1ho8c:hover:not(:disabled):not(:active) {
+        background-color: var(--tag-background-color-checked-hover);
+    }
+.tag__checked_1ho8c:active:not(:disabled) {
+        background-color: var(--tag-background-color-checked-active);
+        color: var(--tag-text-color-checked);
     }

package/tag/modern/index.css

@@ -20,6 +20,7 @@
     --gap-2xl: 32px;
 }
 :root {
+    --border-radius-s: 4px;
     --border-radius-pill: 99px;
 }
 :root {
@@ -37,8 +38,9 @@
     /* border */
     --tag-border-width: 1px;
     --tag-border-radius: var(--border-radius-pill);
+    --tag-alt-border-radius: var(--border-radius-s);
 }
-.tag__component_1bho5 {
+.tag__component_1rkcx {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -48,7 +50,6 @@
     text-decoration: none;
     border-width: var(--tag-border-width);
     border-style: solid;
-    border-radius: var(--tag-border-radius);
     transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease;
     box-sizing: border-box;
     box-shadow: none;
@@ -57,40 +58,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_1bho5:disabled {
+.tag__component_1rkcx:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_1bho5 {
+.tag__focused_1rkcx {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_1bho5 {
+.tag__addons_1rkcx {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_1bho5:first-child {
+.tag__addons_1rkcx:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_1bho5:last-child {
+.tag__addons_1rkcx:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_1bho5:only-child {
+.tag__addons_1rkcx:only-child {
         margin: 0;
     }
-.tag__s_1bho5 .tag__addons_1bho5:first-child, .tag__m_1bho5 .tag__addons_1bho5:first-child {
+.tag__s_1rkcx .tag__addons_1rkcx:first-child, .tag__m_1rkcx .tag__addons_1rkcx:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_1bho5 .tag__addons_1bho5:last-child, .tag__m_1bho5 .tag__addons_1bho5:last-child {
+.tag__s_1rkcx .tag__addons_1rkcx:last-child, .tag__m_1rkcx .tag__addons_1rkcx:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_1bho5 .tag__addons_1bho5:first-child, .tag__xl_1bho5 .tag__addons_1bho5:first-child {
+.tag__l_1rkcx .tag__addons_1rkcx:first-child, .tag__xl_1rkcx .tag__addons_1rkcx:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_1bho5 .tag__addons_1bho5:last-child, .tag__xl_1bho5 .tag__addons_1bho5:last-child {
+.tag__l_1rkcx .tag__addons_1rkcx:last-child, .tag__xl_1rkcx .tag__addons_1rkcx:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_1bho5 {
+.tag__xxs_1rkcx {
     min-width: 60px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
@@ -99,13 +100,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xxs_1bho5 {
+.tag__xxs_1rkcx {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_1bho5 {
+.tag__xs_1rkcx {
     min-width: 72px;
     min-height: 40px;
     padding: 0 var(--gap-l);
@@ -114,13 +115,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xs_1bho5 {
+.tag__xs_1rkcx {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_1bho5 {
+.tag__s_1rkcx {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
@@ -129,13 +130,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__s_1bho5 {
+.tag__s_1rkcx {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_1bho5 {
+.tag__m_1rkcx {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
@@ -144,13 +145,13 @@
     padding: 0 28px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__m_1bho5 {
+.tag__m_1rkcx {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_1bho5 {
+.tag__l_1rkcx {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -159,13 +160,13 @@
     padding: 0 var(--gap-2xl)
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__l_1bho5 {
+.tag__l_1rkcx {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_1bho5 {
+.tag__xl_1rkcx {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -174,45 +175,51 @@
     padding: 0 36px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xl_1bho5 {
+.tag__xl_1rkcx {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_1bho5.tag__xxs_1bho5 {
+.tag__withRightAddons_1rkcx.tag__xxs_1rkcx {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_1bho5.tag__xs_1bho5 {
+.tag__withRightAddons_1rkcx.tag__xs_1rkcx {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_1bho5.tag__s_1bho5 {
+.tag__withRightAddons_1rkcx.tag__s_1rkcx {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_1bho5.tag__m_1bho5 {
+.tag__withRightAddons_1rkcx.tag__m_1rkcx {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_1bho5.tag__l_1bho5 {
+.tag__withRightAddons_1rkcx.tag__l_1rkcx {
         padding-right: 28px;
     }
-.tag__withRightAddons_1bho5.tag__xl_1bho5 {
+.tag__withRightAddons_1rkcx.tag__xl_1rkcx {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_1bho5.tag__xxs_1bho5 {
+.tag__withLeftAddons_1rkcx.tag__xxs_1rkcx {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_1bho5.tag__xs_1bho5 {
+.tag__withLeftAddons_1rkcx.tag__xs_1rkcx {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_1bho5.tag__s_1bho5 {
+.tag__withLeftAddons_1rkcx.tag__s_1rkcx {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_1bho5.tag__m_1bho5 {
+.tag__withLeftAddons_1rkcx.tag__m_1rkcx {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_1bho5.tag__l_1bho5 {
+.tag__withLeftAddons_1rkcx.tag__l_1rkcx {
         padding-left: 28px;
     }
-.tag__withLeftAddons_1bho5.tag__xl_1bho5 {
+.tag__withLeftAddons_1rkcx.tag__xl_1rkcx {
         padding-left: var(--gap-2xl);
     }
+.tag__default_1rkcx {
+    border-radius: var(--tag-border-radius);
+}
+.tag__alt_1rkcx {
+    border-radius: var(--tag-alt-border-radius);
+}

package/tag/modern/inverted.css

@@ -3,11 +3,13 @@
     --color-dark-bg-primary-inverted: #fff;
     --color-dark-border-key: #fff;
     --color-dark-border-primary: #485767;
-    --color-dark-border-secondary-inverted: #6d7986;
+    --color-dark-border-underline: #6d7986;
     --color-dark-text-primary: #fff;
     --color-dark-text-primary-inverted: #0b1f35;
     --color-dark-text-tertiary: #6d7986;
     --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
+    --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
 }
 :root {
 
@@ -19,7 +21,7 @@
 }
 :root {
     /* border */
-    --tag-inverted-border-color: var(--color-dark-border-secondary-inverted);
+    --tag-inverted-border-color: var(--color-dark-border-underline);
     --tag-inverted-border-color-hover: var(--color-dark-border-key);
     --tag-inverted-border-color-active: var(--color-dark-border-key);
     --tag-inverted-border-color-checked: var(--color-dark-border-key);
@@ -29,10 +31,13 @@
     /* background-color */
     --tag-inverted-background-color: transparent;
     --tag-inverted-background-color-hover: transparent;
+    --tag-inverted-background-color-disabled: transparent;
     --tag-inverted-background-color-active: var(--color-dark-bg-primary-inverted-alpha-7);
     --tag-inverted-background-color-checked: var(--color-dark-bg-primary-inverted);
+    --tag-inverted-background-color-checked-hover: var(--color-dark-bg-primary-inverted-shade-7);
+    --tag-inverted-background-color-checked-active: var(--color-dark-bg-primary-inverted-shade-15);
     --tag-inverted-background-color-checked-disabled: var(
-        --color-dark-bg-primary-inverted-alpha-15
+        --color-dark-bg-primary-inverted-alpha-30
     );
 
     /* text color */
@@ -41,34 +46,39 @@
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
 }
-.tag__component_zew51 {
+.tag__component_14qwj {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_zew51:disabled {
+.tag__component_14qwj:disabled {
         border-color: var(--tag-inverted-border-color-disabled);
         color: var(--tag-inverted-text-color-disabled);
+        background-color: var(--tag-inverted-background-color-disabled);
     }
-.tag__component_zew51:hover:not(:disabled) {
+.tag__component_14qwj:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_zew51:active:not(:disabled) {
+.tag__component_14qwj: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_zew51 {
+.tag__checked_14qwj {
     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_zew51:disabled {
+.tag__checked_14qwj: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_zew51:hover:not(:disabled):not(:active) {
-        background-color: var(--tag-inverted-background-color-checked);
+.tag__checked_14qwj:hover:not(:disabled):not(:active) {
+        background-color: var(--tag-inverted-background-color-checked-hover);
+    }
+.tag__checked_14qwj:active:not(:disabled) {
+        background-color: var(--tag-inverted-background-color-checked-active);
+        color: var(--tag-inverted-text-color-checked);
     }

package/textarea/Component.js

@@ -53,13 +53,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"textarea":"textarea__textarea_iewmi","s":"textarea__s_iewmi","m":"textarea__m_iewmi","l":"textarea__l_iewmi","xl":"textarea__xl_iewmi","hasLabel":"textarea__hasLabel_iewmi","resizeVertical":"textarea__resizeVertical_iewmi","focusVisible":"textarea__focusVisible_iewmi","filled":"textarea__filled_iewmi"};
+var styles = {"textarea":"textarea__textarea_lw8ua","s":"textarea__s_lw8ua","m":"textarea__m_lw8ua","l":"textarea__l_lw8ua","xl":"textarea__xl_lw8ua","hasLabel":"textarea__hasLabel_lw8ua","resizeVertical":"textarea__resizeVertical_lw8ua","focusVisible":"textarea__focusVisible_lw8ua","filled":"textarea__filled_lw8ua"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_dcnt5","hasLabel":"textarea__hasLabel_dcnt5","clearIcon":"textarea__clearIcon_dcnt5","errorIcon":"textarea__errorIcon_dcnt5","successIcon":"textarea__successIcon_dcnt5","error":"textarea__error_dcnt5","textarea":"textarea__textarea_dcnt5"};
+var defaultColors = {"input":"textarea__input_1lghz","hasLabel":"textarea__hasLabel_1lghz","clearIcon":"textarea__clearIcon_1lghz","errorIcon":"textarea__errorIcon_1lghz","successIcon":"textarea__successIcon_1lghz","error":"textarea__error_1lghz","textarea":"textarea__textarea_1lghz"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_182l5","hasLabel":"textarea__hasLabel_182l5","clearIcon":"textarea__clearIcon_182l5","errorIcon":"textarea__errorIcon_182l5","successIcon":"textarea__successIcon_182l5","error":"textarea__error_182l5","textarea":"textarea__textarea_182l5"};
+var invertedColors = {"input":"textarea__input_h5ba3","hasLabel":"textarea__hasLabel_h5ba3","clearIcon":"textarea__clearIcon_h5ba3","errorIcon":"textarea__errorIcon_h5ba3","successIcon":"textarea__successIcon_h5ba3","error":"textarea__error_h5ba3","textarea":"textarea__textarea_h5ba3"};
 require('./inverted.css');
 
 var colorStyles = {

package/textarea/default.css

@@ -31,70 +31,70 @@
     /* error */
     --input-error-color: var(--color-light-text-primary);
 }
-.textarea__input_dcnt5 {
+.textarea__input_1lghz {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_dcnt5:-webkit-autofill {
+.textarea__input_1lghz:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_dcnt5::placeholder {
+.textarea__input_1lghz::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_dcnt5::placeholder {
+.textarea__hasLabel_1lghz::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_dcnt5 {
+.textarea__clearIcon_1lghz {
     color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_dcnt5 {
+.textarea__errorIcon_1lghz {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_dcnt5 {
+.textarea__successIcon_1lghz {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_dcnt5:read-only {
+.textarea__input_1lghz:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_dcnt5:read-only:focus::placeholder {
+.textarea__input_1lghz:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_dcnt5:disabled {
+.textarea__input_1lghz:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_dcnt5:focus::placeholder {
+.textarea__input_1lghz:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_dcnt5 {
+.textarea__error_1lghz {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_dcnt5 {
+.textarea__textarea_1lghz {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_dcnt5::placeholder {
+.textarea__textarea_1lghz::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_dcnt5::placeholder {
+.textarea__hasLabel_1lghz::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_dcnt5:disabled {
+.textarea__textarea_1lghz:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_dcnt5:read-only {
+.textarea__textarea_1lghz:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_dcnt5:focus::placeholder {
+.textarea__textarea_1lghz: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_iewmi","s":"textarea__s_iewmi","m":"textarea__m_iewmi","l":"textarea__l_iewmi","xl":"textarea__xl_iewmi","hasLabel":"textarea__hasLabel_iewmi","resizeVertical":"textarea__resizeVertical_iewmi","focusVisible":"textarea__focusVisible_iewmi","filled":"textarea__filled_iewmi"};
+var styles = {"textarea":"textarea__textarea_lw8ua","s":"textarea__s_lw8ua","m":"textarea__m_lw8ua","l":"textarea__l_lw8ua","xl":"textarea__xl_lw8ua","hasLabel":"textarea__hasLabel_lw8ua","resizeVertical":"textarea__resizeVertical_lw8ua","focusVisible":"textarea__focusVisible_lw8ua","filled":"textarea__filled_lw8ua"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_dcnt5","hasLabel":"textarea__hasLabel_dcnt5","clearIcon":"textarea__clearIcon_dcnt5","errorIcon":"textarea__errorIcon_dcnt5","successIcon":"textarea__successIcon_dcnt5","error":"textarea__error_dcnt5","textarea":"textarea__textarea_dcnt5"};
+var defaultColors = {"input":"textarea__input_1lghz","hasLabel":"textarea__hasLabel_1lghz","clearIcon":"textarea__clearIcon_1lghz","errorIcon":"textarea__errorIcon_1lghz","successIcon":"textarea__successIcon_1lghz","error":"textarea__error_1lghz","textarea":"textarea__textarea_1lghz"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_182l5","hasLabel":"textarea__hasLabel_182l5","clearIcon":"textarea__clearIcon_182l5","errorIcon":"textarea__errorIcon_182l5","successIcon":"textarea__successIcon_182l5","error":"textarea__error_182l5","textarea":"textarea__textarea_182l5"};
+var invertedColors = {"input":"textarea__input_h5ba3","hasLabel":"textarea__hasLabel_h5ba3","clearIcon":"textarea__clearIcon_h5ba3","errorIcon":"textarea__errorIcon_h5ba3","successIcon":"textarea__successIcon_h5ba3","error":"textarea__error_h5ba3","textarea":"textarea__textarea_h5ba3"};
 require('./inverted.css');
 
 var colorStyles = {

package/textarea/esm/default.css

@@ -31,70 +31,70 @@
     /* error */
     --input-error-color: var(--color-light-text-primary);
 }
-.textarea__input_dcnt5 {
+.textarea__input_1lghz {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_dcnt5:-webkit-autofill {
+.textarea__input_1lghz:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_dcnt5::placeholder {
+.textarea__input_1lghz::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_dcnt5::placeholder {
+.textarea__hasLabel_1lghz::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_dcnt5 {
+.textarea__clearIcon_1lghz {
     color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_dcnt5 {
+.textarea__errorIcon_1lghz {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_dcnt5 {
+.textarea__successIcon_1lghz {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_dcnt5:read-only {
+.textarea__input_1lghz:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_dcnt5:read-only:focus::placeholder {
+.textarea__input_1lghz:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_dcnt5:disabled {
+.textarea__input_1lghz:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_dcnt5:focus::placeholder {
+.textarea__input_1lghz:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_dcnt5 {
+.textarea__error_1lghz {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_dcnt5 {
+.textarea__textarea_1lghz {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_dcnt5::placeholder {
+.textarea__textarea_1lghz::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_dcnt5::placeholder {
+.textarea__hasLabel_1lghz::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_dcnt5:disabled {
+.textarea__textarea_1lghz:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_dcnt5:read-only {
+.textarea__textarea_1lghz:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_dcnt5:focus::placeholder {
+.textarea__textarea_1lghz:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }