@alfalab/core-components 30.8.0-beta.0 → 31.2.0

package/textarea/modern/Component.js

@@ -6,13 +6,13 @@ import { useMedia, useFocus } from '@alfalab/hooks';
 import { Scrollbar } from '../../scrollbar/modern';
 import { FormControl } from '../../form-control/modern';
 
-var styles = {"scrollable":"textarea__scrollable_81j69","scrollableWrapper":"textarea__scrollableWrapper_81j69","textarea":"textarea__textarea_81j69","s":"textarea__s_81j69","m":"textarea__m_81j69","l":"textarea__l_81j69","xl":"textarea__xl_81j69","textareaHidden":"textarea__textareaHidden_81j69","hasLabel":"textarea__hasLabel_81j69","resizeVertical":"textarea__resizeVertical_81j69","scrollableWithLabel":"textarea__scrollableWithLabel_81j69","focusVisible":"textarea__focusVisible_81j69","filled":"textarea__filled_81j69"};
+var styles = {"scrollable":"textarea__scrollable_uix7h","scrollableWrapper":"textarea__scrollableWrapper_uix7h","textarea":"textarea__textarea_uix7h","s":"textarea__s_uix7h","m":"textarea__m_uix7h","l":"textarea__l_uix7h","xl":"textarea__xl_uix7h","textareaHidden":"textarea__textareaHidden_uix7h","hasInnerLabel":"textarea__hasInnerLabel_uix7h","resizeVertical":"textarea__resizeVertical_uix7h","scrollableWithLabel":"textarea__scrollableWithLabel_uix7h","focusVisible":"textarea__focusVisible_uix7h","filled":"textarea__filled_uix7h"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_ge4zq","hasLabel":"textarea__hasLabel_ge4zq","clearIcon":"textarea__clearIcon_ge4zq","errorIcon":"textarea__errorIcon_ge4zq","successIcon":"textarea__successIcon_ge4zq","error":"textarea__error_ge4zq","textarea":"textarea__textarea_ge4zq"};
+var defaultColors = {"input":"textarea__input_ypgzz","hasInnerLabel":"textarea__hasInnerLabel_ypgzz","clearIcon":"textarea__clearIcon_ypgzz","errorIcon":"textarea__errorIcon_ypgzz","successIcon":"textarea__successIcon_ypgzz","error":"textarea__error_ypgzz","textarea":"textarea__textarea_ypgzz"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_1b42b","hasLabel":"textarea__hasLabel_1b42b","clearIcon":"textarea__clearIcon_1b42b","errorIcon":"textarea__errorIcon_1b42b","successIcon":"textarea__successIcon_1b42b","error":"textarea__error_1b42b","textarea":"textarea__textarea_1b42b"};
+var invertedColors = {"input":"textarea__input_1tfec","hasInnerLabel":"textarea__hasInnerLabel_1tfec","clearIcon":"textarea__clearIcon_1tfec","errorIcon":"textarea__errorIcon_1tfec","successIcon":"textarea__successIcon_1tfec","error":"textarea__error_1tfec","textarea":"textarea__textarea_1tfec"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -20,7 +20,7 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
-const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's', colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, nativeScrollbar: nativeScrollbarProp, ...restProps }, ref) => {
+const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's', colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, nativeScrollbar: nativeScrollbarProp, ...restProps }, ref) => {
     const uncontrolled = value === undefined;
     let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
     nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp ?? nativeScrollbar);
@@ -30,6 +30,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     const [scrollableHeight, setScrollableHeight] = useState();
     const [focusVisible] = useFocus(textareaRef, 'keyboard');
     const filled = Boolean(uncontrolled ? stateValue : value);
+    const hasInnerLabel = label && labelView === 'inner';
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(() => {
         if (autosize) {
@@ -80,8 +81,8 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     const textareaProps = {
         ...restProps,
         className: cn(styles.textarea, colorStyles[colors].textarea, styles[size], {
-            [styles.hasLabel]: nativeScrollbar && label,
-            [colorStyles[colors].hasLabel]: label,
+            [styles.hasInnerLabel]: nativeScrollbar && hasInnerLabel,
+            [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
             [styles.filled]: nativeScrollbar && filled,
             [styles.resizeVertical]: resize === 'vertical',
         }, textareaClassName),
@@ -117,7 +118,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     };
     return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, {
             [styles.focusVisible]: focusVisible,
-        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
+        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
 });
 /**
  * Для отображения в сторибуке

package/textarea/modern/default.css

@@ -35,70 +35,70 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_ge4zq {
+.textarea__input_ypgzz {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_ge4zq:-webkit-autofill {
+.textarea__input_ypgzz:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_ge4zq::placeholder {
+.textarea__input_ypgzz::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_ge4zq::placeholder {
+.textarea__hasInnerLabel_ypgzz::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_ge4zq {
+.textarea__clearIcon_ypgzz {
     color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_ge4zq {
+.textarea__errorIcon_ypgzz {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_ge4zq {
+.textarea__successIcon_ypgzz {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_ge4zq:read-only {
+.textarea__input_ypgzz:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_ge4zq:read-only:focus::placeholder {
+.textarea__input_ypgzz:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_ge4zq:disabled {
+.textarea__input_ypgzz:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_ge4zq:focus::placeholder {
+.textarea__input_ypgzz:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_ge4zq {
+.textarea__error_ypgzz {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_ge4zq {
+.textarea__textarea_ypgzz {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_ge4zq::placeholder {
+.textarea__textarea_ypgzz::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_ge4zq::placeholder {
+.textarea__hasInnerLabel_ypgzz::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_ge4zq:disabled {
+.textarea__textarea_ypgzz:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_ge4zq:read-only {
+.textarea__textarea_ypgzz:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_ge4zq:focus::placeholder {
+.textarea__textarea_ypgzz:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/modern/index.css

@@ -84,19 +84,19 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__scrollable_81j69 {
+.textarea__scrollable_uix7h {
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
 }
-.textarea__scrollableWrapper_81j69 {
+.textarea__scrollableWrapper_uix7h {
     box-sizing: border-box
 }
-.textarea__scrollableWrapper_81j69 > * {
+.textarea__scrollableWrapper_uix7h > * {
         font-family: var(--font-family);
     }
-.textarea__textarea_81j69 {
+.textarea__textarea_uix7h {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -113,139 +113,139 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_81j69.textarea__s_81j69 {
+.textarea__textarea_uix7h.textarea__s_uix7h {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_81j69.textarea__m_81j69 {
+.textarea__textarea_uix7h.textarea__m_uix7h {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_81j69.textarea__l_81j69 {
+.textarea__textarea_uix7h.textarea__l_uix7h {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_81j69.textarea__xl_81j69 {
+.textarea__textarea_uix7h.textarea__xl_uix7h {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_81j69.textarea__textareaHidden_81j69 {
+.textarea__textarea_uix7h.textarea__textareaHidden_uix7h {
         position: absolute;
         transform: translateX(-10000px);
     }
-.textarea__textarea_81j69::placeholder {
+.textarea__textarea_uix7h::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasLabel_81j69::placeholder {
+.textarea__hasInnerLabel_uix7h::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_81j69 {
+.textarea__resizeVertical_uix7h {
     resize: vertical;
 }
 /* SIZES */
-.textarea__textarea_81j69.textarea__s_81j69, .textarea__scrollable_81j69.textarea__s_81j69 {
+.textarea__textarea_uix7h.textarea__s_uix7h, .textarea__scrollable_uix7h.textarea__s_uix7h {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_81j69.textarea__m_81j69, .textarea__scrollable_81j69.textarea__m_81j69 {
+.textarea__textarea_uix7h.textarea__m_uix7h, .textarea__scrollable_uix7h.textarea__m_uix7h {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_81j69.textarea__l_81j69, .textarea__scrollable_81j69.textarea__l_81j69 {
+.textarea__textarea_uix7h.textarea__l_uix7h, .textarea__scrollable_uix7h.textarea__l_uix7h {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_81j69.textarea__xl_81j69, .textarea__scrollable_81j69.textarea__xl_81j69 {
+.textarea__textarea_uix7h.textarea__xl_uix7h, .textarea__scrollable_uix7h.textarea__xl_uix7h {
         min-height: var(--textarea-xl-min-height);
     }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollable_81j69.textarea__s_81j69 .textarea__textarea_81j69, .textarea__scrollable_81j69.textarea__m_81j69 .textarea__textarea_81j69, .textarea__scrollable_81j69.textarea__l_81j69 .textarea__textarea_81j69 {
+.textarea__scrollable_uix7h.textarea__s_uix7h .textarea__textarea_uix7h, .textarea__scrollable_uix7h.textarea__m_uix7h .textarea__textarea_uix7h, .textarea__scrollable_uix7h.textarea__l_uix7h .textarea__textarea_uix7h {
             padding-left: var(--gap-s);
             padding-right: var(--gap-s);
         }
-.textarea__scrollable_81j69.textarea__xl_81j69 .textarea__textarea_81j69 {
+.textarea__scrollable_uix7h.textarea__xl_uix7h .textarea__textarea_uix7h {
             padding-left: var(--gap-m);
             padding-right: var(--gap-m);
         }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollableWithLabel_81j69.textarea__s_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__s_uix7h .textarea__textarea_uix7h {
         padding: var(--form-control-labeled-s-paddings);
     }
-.textarea__scrollableWithLabel_81j69.textarea__m_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__m_uix7h .textarea__textarea_uix7h {
         padding: var(--form-control-labeled-m-paddings);
     }
-.textarea__scrollableWithLabel_81j69.textarea__l_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__l_uix7h .textarea__textarea_uix7h {
         padding: var(--form-control-labeled-l-paddings);
     }
-.textarea__scrollableWithLabel_81j69.textarea__xl_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__xl_uix7h .textarea__textarea_uix7h {
         padding: var(--form-control-labeled-xl-paddings);
     }
 /* DISABLED STATE */
-.textarea__textarea_81j69:disabled {
+.textarea__textarea_uix7h:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_81j69:read-only {
+.textarea__textarea_uix7h:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_81j69:focus.textarea__hasLabel_81j69::placeholder {
+.textarea__textarea_uix7h:focus.textarea__hasInnerLabel_uix7h::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_81j69 {
+.textarea__focusVisible_uix7h {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_81j69.textarea__filled_81j69.textarea__hasLabel_81j69 {
+.textarea__textarea_uix7h.textarea__filled_uix7h.textarea__hasInnerLabel_uix7h {
     padding-top: 0
 }
-.textarea__textarea_81j69.textarea__filled_81j69.textarea__hasLabel_81j69.textarea__s_81j69 {
+.textarea__textarea_uix7h.textarea__filled_uix7h.textarea__hasInnerLabel_uix7h.textarea__s_uix7h {
         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_81j69.textarea__filled_81j69.textarea__hasLabel_81j69.textarea__m_81j69 {
+.textarea__textarea_uix7h.textarea__filled_uix7h.textarea__hasInnerLabel_uix7h.textarea__m_uix7h {
         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_81j69.textarea__filled_81j69.textarea__hasLabel_81j69.textarea__l_81j69 {
+.textarea__textarea_uix7h.textarea__filled_uix7h.textarea__hasInnerLabel_uix7h.textarea__l_uix7h {
         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_81j69.textarea__filled_81j69.textarea__hasLabel_81j69.textarea__xl_81j69 {
+.textarea__textarea_uix7h.textarea__filled_uix7h.textarea__hasInnerLabel_uix7h.textarea__xl_uix7h {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);
     }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h .textarea__textarea_uix7h {
         padding-top: 0;
     }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__s_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__s_uix7h {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height)
     }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__s_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__s_uix7h .textarea__textarea_uix7h {
             min-height: var(--textarea-s-filled-min-height);
         }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__m_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__m_uix7h {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height)
     }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__m_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__m_uix7h .textarea__textarea_uix7h {
             min-height: var(--textarea-m-filled-min-height);
         }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__l_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__l_uix7h {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height)
     }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__l_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__l_uix7h .textarea__textarea_uix7h {
             min-height: var(--textarea-l-filled-min-height);
         }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__xl_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__xl_uix7h {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height)
     }
-.textarea__scrollableWithLabel_81j69.textarea__filled_81j69.textarea__xl_81j69 .textarea__textarea_81j69 {
+.textarea__scrollableWithLabel_uix7h.textarea__filled_uix7h.textarea__xl_uix7h .textarea__textarea_uix7h {
             min-height: var(--textarea-xl-filled-min-height);
         }

package/textarea/modern/inverted.css

@@ -35,70 +35,70 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_1b42b {
+.textarea__input_1tfec {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1b42b:-webkit-autofill {
+.textarea__input_1tfec:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
 }
-.textarea__input_1b42b::placeholder {
+.textarea__input_1tfec::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_1b42b::placeholder {
+.textarea__hasInnerLabel_1tfec::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
-.textarea__clearIcon_1b42b {
+.textarea__clearIcon_1tfec {
     color: var(--color-light-graphic-primary-inverted);
 }
-.textarea__errorIcon_1b42b {
+.textarea__errorIcon_1tfec {
     background-image: var(--input-inverted-error-icon);
 }
-.textarea__successIcon_1b42b {
+.textarea__successIcon_1tfec {
     background-image: var(--input-inverted-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_1b42b:read-only {
+.textarea__input_1tfec:read-only {
     color: var(--input-inverted-read-only-color)
 }
-.textarea__input_1b42b:read-only:focus::placeholder {
+.textarea__input_1tfec:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1b42b:disabled {
+.textarea__input_1tfec:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1b42b:focus::placeholder {
+.textarea__input_1tfec:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1b42b {
+.textarea__error_1tfec {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
-.textarea__textarea_1b42b {
+.textarea__textarea_1tfec {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1b42b::placeholder {
+.textarea__textarea_1tfec::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_1b42b::placeholder {
+.textarea__hasInnerLabel_1tfec::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1b42b:disabled {
+.textarea__textarea_1tfec:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1b42b:read-only {
+.textarea__textarea_1tfec:read-only {
     color: var(--input-inverted-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1b42b:focus::placeholder {
+.textarea__textarea_1tfec:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }

package/themes/button/click.css

@@ -1,6 +1,7 @@
 :root {
     --button-border-radius: var(--border-radius-s);
     --button-xxs-size-border-radius: var(--border-radius-s);
+    --button-active-before-transform: none;
     --button-active-transform: none;
 
     /* secondary */

package/themes/button/corp.css

@@ -1,6 +1,7 @@
 :root {
     --button-border-radius: var(--border-radius-s);
     --button-xxs-size-border-radius: var(--border-radius-s);
+    --button-active-before-transform: none;
     --button-active-transform: none;
 
     /* secondary */

package/themes/button/intranet.css

@@ -2,6 +2,7 @@
     /* theme */
     --button-border-radius: var(--border-radius-l);
     --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-active-before-transform: none;
     --button-active-transform: none;
 
     /* primary */

package/themes/button/mobile.css

@@ -2,6 +2,7 @@
     /* theme */
     --button-border-radius: var(--border-radius-l);
     --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-active-before-transform: none;
     --button-active-transform: none;
 
     /* primary */

package/themes/button/site.css

@@ -1,7 +1,4 @@
 :root {
-    /* theme */
-    --button-active-transform: scale(0.97);
-
     /* secondary */
     --button-secondary-base-bg-color: var(--color-light-specialbg-component);
 }

package/themes/click.css

@@ -280,6 +280,8 @@
     --color-dark-bg-primary-alpha-32: rgba(11, 31, 53, 0.32);
     --color-dark-bg-primary-alpha-37: rgba(11, 31, 53, 0.37);
     --color-dark-bg-primary-alpha-40: rgba(11, 31, 53, 0.4);
+    --color-dark-bg-primary-tint-7: rgb(28, 47, 67);
+    --color-dark-bg-primary-tint-15: rgb(48, 65, 83);
     --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
     --color-dark-bg-primary-inverted-alpha-4: rgba(255, 255, 255, 0.04);
     --color-dark-bg-primary-inverted-alpha-5: rgba(255, 255, 255, 0.05);
@@ -417,6 +419,8 @@
     --color-light-bg-primary-alpha-32: rgba(255, 255, 255, 0.32);
     --color-light-bg-primary-alpha-37: rgba(255, 255, 255, 0.37);
     --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
+    --color-light-bg-primary-shade-7: rgb(237, 237, 237);
+    --color-light-bg-primary-shade-15: rgb(217, 217, 217);
     --color-light-bg-primary-inverted-alpha-3: rgba(11, 31, 53, 0.03);
     --color-light-bg-primary-inverted-alpha-4: rgba(11, 31, 53, 0.04);
     --color-light-bg-primary-inverted-alpha-5: rgba(11, 31, 53, 0.05);
@@ -758,6 +762,7 @@
     --input-inverted-disabled-color: var(--color-light-text-primary-inverted);
     --button-border-radius: var(--border-radius-s);
     --button-xxs-size-border-radius: var(--border-radius-s);
+    --button-active-before-transform: none;
     --button-active-transform: none;
     /* secondary */
     --button-secondary-base-bg-color: var(--color-light-bg-primary-inverted-alpha-16);