@alfalab/core-components 23.2.0 → 23.3.0

package/textarea/index.css

@@ -50,7 +50,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__textarea_19bxr {
+.textarea__textarea_1wjs4 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -67,81 +67,81 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_19bxr.textarea__s_19bxr {
+.textarea__textarea_1wjs4.textarea__s_1wjs4 {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr.textarea__m_19bxr {
+.textarea__textarea_1wjs4.textarea__m_1wjs4 {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr.textarea__l_19bxr {
+.textarea__textarea_1wjs4.textarea__l_1wjs4 {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr.textarea__xl_19bxr {
+.textarea__textarea_1wjs4.textarea__xl_1wjs4 {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr::placeholder {
+.textarea__textarea_1wjs4::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasLabel_19bxr::placeholder {
+.textarea__hasLabel_1wjs4::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_19bxr {
+.textarea__resizeVertical_1wjs4 {
     resize: vertical;
 }
 /* SIZES */
-.textarea__textarea_19bxr.textarea__s_19bxr {
+.textarea__textarea_1wjs4.textarea__s_1wjs4 {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_19bxr.textarea__m_19bxr {
+.textarea__textarea_1wjs4.textarea__m_1wjs4 {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_19bxr.textarea__l_19bxr {
+.textarea__textarea_1wjs4.textarea__l_1wjs4 {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_19bxr.textarea__xl_19bxr {
+.textarea__textarea_1wjs4.textarea__xl_1wjs4 {
         min-height: var(--textarea-xl-min-height);
     }
 /* DISABLED STATE */
-.textarea__textarea_19bxr:disabled {
+.textarea__textarea_1wjs4:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_19bxr:read-only {
+.textarea__textarea_1wjs4:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_19bxr:focus.textarea__hasLabel_19bxr::placeholder {
+.textarea__textarea_1wjs4:focus.textarea__hasLabel_1wjs4::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_19bxr {
+.textarea__focusVisible_1wjs4 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4 {
     padding-top: 0
 }
-.textarea__textarea_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__s_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__s_1wjs4 {
         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_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__m_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__m_1wjs4 {
         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_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__l_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__l_1wjs4 {
         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_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__xl_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__xl_1wjs4 {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);

package/textarea/inverted.css

@@ -31,70 +31,70 @@
     /* error */
     --input-inverted-error-color: var(--color-light-text-primary-inverted);
 }
-.textarea__input_1koto {
+.textarea__input_chbjl {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1koto:-webkit-autofill {
+.textarea__input_chbjl:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
 }
-.textarea__input_1koto::placeholder {
+.textarea__input_chbjl::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_1koto::placeholder {
+.textarea__hasLabel_chbjl::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
-.textarea__clearIcon_1koto {
+.textarea__clearIcon_chbjl {
     background-image: var(--input-inverted-clear-icon);
 }
-.textarea__errorIcon_1koto {
+.textarea__errorIcon_chbjl {
     background-image: var(--input-inverted-error-icon);
 }
-.textarea__successIcon_1koto {
+.textarea__successIcon_chbjl {
     background-image: var(--input-inverted-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_1koto:read-only {
+.textarea__input_chbjl:read-only {
     color: var(--input-inverted-read-only-color)
 }
-.textarea__input_1koto:read-only:focus::placeholder {
+.textarea__input_chbjl:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1koto:disabled {
+.textarea__input_chbjl:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1koto:focus::placeholder {
+.textarea__input_chbjl:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1koto {
+.textarea__error_chbjl {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
-.textarea__textarea_1koto {
+.textarea__textarea_chbjl {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1koto::placeholder {
+.textarea__textarea_chbjl::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_1koto::placeholder {
+.textarea__hasLabel_chbjl::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1koto:disabled {
+.textarea__textarea_chbjl:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1koto:read-only {
+.textarea__textarea_chbjl:read-only {
     color: var(--input-inverted-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1koto:focus::placeholder {
+.textarea__textarea_chbjl:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }

package/textarea/modern/Component.js

@@ -5,13 +5,13 @@ import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { FormControl } from '../../form-control/modern';
 
-var styles = {"textarea":"textarea__textarea_19bxr","s":"textarea__s_19bxr","m":"textarea__m_19bxr","l":"textarea__l_19bxr","xl":"textarea__xl_19bxr","hasLabel":"textarea__hasLabel_19bxr","resizeVertical":"textarea__resizeVertical_19bxr","focusVisible":"textarea__focusVisible_19bxr","filled":"textarea__filled_19bxr"};
+var styles = {"textarea":"textarea__textarea_1wjs4","s":"textarea__s_1wjs4","m":"textarea__m_1wjs4","l":"textarea__l_1wjs4","xl":"textarea__xl_1wjs4","hasLabel":"textarea__hasLabel_1wjs4","resizeVertical":"textarea__resizeVertical_1wjs4","focusVisible":"textarea__focusVisible_1wjs4","filled":"textarea__filled_1wjs4"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_pywcc","hasLabel":"textarea__hasLabel_pywcc","clearIcon":"textarea__clearIcon_pywcc","errorIcon":"textarea__errorIcon_pywcc","successIcon":"textarea__successIcon_pywcc","error":"textarea__error_pywcc","textarea":"textarea__textarea_pywcc"};
+var defaultColors = {"input":"textarea__input_1gsi9","hasLabel":"textarea__hasLabel_1gsi9","clearIcon":"textarea__clearIcon_1gsi9","errorIcon":"textarea__errorIcon_1gsi9","successIcon":"textarea__successIcon_1gsi9","error":"textarea__error_1gsi9","textarea":"textarea__textarea_1gsi9"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_1koto","hasLabel":"textarea__hasLabel_1koto","clearIcon":"textarea__clearIcon_1koto","errorIcon":"textarea__errorIcon_1koto","successIcon":"textarea__successIcon_1koto","error":"textarea__error_1koto","textarea":"textarea__textarea_1koto"};
+var invertedColors = {"input":"textarea__input_chbjl","hasLabel":"textarea__hasLabel_chbjl","clearIcon":"textarea__clearIcon_chbjl","errorIcon":"textarea__errorIcon_chbjl","successIcon":"textarea__successIcon_chbjl","error":"textarea__error_chbjl","textarea":"textarea__textarea_chbjl"};
 require('./inverted.css');
 
 const colorStyles = {

package/textarea/modern/default.css

@@ -31,70 +31,70 @@
     /* error */
     --input-error-color: var(--color-light-text-primary);
 }
-.textarea__input_pywcc {
+.textarea__input_1gsi9 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_pywcc:-webkit-autofill {
+.textarea__input_1gsi9:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_pywcc::placeholder {
+.textarea__input_1gsi9::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_pywcc::placeholder {
+.textarea__hasLabel_1gsi9::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_pywcc {
+.textarea__clearIcon_1gsi9 {
     background-image: var(--input-clear-icon);
 }
-.textarea__errorIcon_pywcc {
+.textarea__errorIcon_1gsi9 {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_pywcc {
+.textarea__successIcon_1gsi9 {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_pywcc:read-only {
+.textarea__input_1gsi9:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_pywcc:read-only:focus::placeholder {
+.textarea__input_1gsi9:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_pywcc:disabled {
+.textarea__input_1gsi9:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_pywcc:focus::placeholder {
+.textarea__input_1gsi9:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_pywcc {
+.textarea__error_1gsi9 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_pywcc {
+.textarea__textarea_1gsi9 {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_pywcc::placeholder {
+.textarea__textarea_1gsi9::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_pywcc::placeholder {
+.textarea__hasLabel_1gsi9::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_pywcc:disabled {
+.textarea__textarea_1gsi9:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_pywcc:read-only {
+.textarea__textarea_1gsi9:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_pywcc:focus::placeholder {
+.textarea__textarea_1gsi9:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/modern/index.css

@@ -50,7 +50,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__textarea_19bxr {
+.textarea__textarea_1wjs4 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -67,81 +67,81 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_19bxr.textarea__s_19bxr {
+.textarea__textarea_1wjs4.textarea__s_1wjs4 {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr.textarea__m_19bxr {
+.textarea__textarea_1wjs4.textarea__m_1wjs4 {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr.textarea__l_19bxr {
+.textarea__textarea_1wjs4.textarea__l_1wjs4 {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr.textarea__xl_19bxr {
+.textarea__textarea_1wjs4.textarea__xl_1wjs4 {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_19bxr::placeholder {
+.textarea__textarea_1wjs4::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasLabel_19bxr::placeholder {
+.textarea__hasLabel_1wjs4::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_19bxr {
+.textarea__resizeVertical_1wjs4 {
     resize: vertical;
 }
 /* SIZES */
-.textarea__textarea_19bxr.textarea__s_19bxr {
+.textarea__textarea_1wjs4.textarea__s_1wjs4 {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_19bxr.textarea__m_19bxr {
+.textarea__textarea_1wjs4.textarea__m_1wjs4 {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_19bxr.textarea__l_19bxr {
+.textarea__textarea_1wjs4.textarea__l_1wjs4 {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_19bxr.textarea__xl_19bxr {
+.textarea__textarea_1wjs4.textarea__xl_1wjs4 {
         min-height: var(--textarea-xl-min-height);
     }
 /* DISABLED STATE */
-.textarea__textarea_19bxr:disabled {
+.textarea__textarea_1wjs4:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_19bxr:read-only {
+.textarea__textarea_1wjs4:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_19bxr:focus.textarea__hasLabel_19bxr::placeholder {
+.textarea__textarea_1wjs4:focus.textarea__hasLabel_1wjs4::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_19bxr {
+.textarea__focusVisible_1wjs4 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4 {
     padding-top: 0
 }
-.textarea__textarea_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__s_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__s_1wjs4 {
         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_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__m_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__m_1wjs4 {
         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_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__l_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__l_1wjs4 {
         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_19bxr.textarea__filled_19bxr.textarea__hasLabel_19bxr.textarea__xl_19bxr {
+.textarea__textarea_1wjs4.textarea__filled_1wjs4.textarea__hasLabel_1wjs4.textarea__xl_1wjs4 {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);

package/textarea/modern/inverted.css

@@ -31,70 +31,70 @@
     /* error */
     --input-inverted-error-color: var(--color-light-text-primary-inverted);
 }
-.textarea__input_1koto {
+.textarea__input_chbjl {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1koto:-webkit-autofill {
+.textarea__input_chbjl:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
 }
-.textarea__input_1koto::placeholder {
+.textarea__input_chbjl::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_1koto::placeholder {
+.textarea__hasLabel_chbjl::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
-.textarea__clearIcon_1koto {
+.textarea__clearIcon_chbjl {
     background-image: var(--input-inverted-clear-icon);
 }
-.textarea__errorIcon_1koto {
+.textarea__errorIcon_chbjl {
     background-image: var(--input-inverted-error-icon);
 }
-.textarea__successIcon_1koto {
+.textarea__successIcon_chbjl {
     background-image: var(--input-inverted-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_1koto:read-only {
+.textarea__input_chbjl:read-only {
     color: var(--input-inverted-read-only-color)
 }
-.textarea__input_1koto:read-only:focus::placeholder {
+.textarea__input_chbjl:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1koto:disabled {
+.textarea__input_chbjl:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1koto:focus::placeholder {
+.textarea__input_chbjl:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1koto {
+.textarea__error_chbjl {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
-.textarea__textarea_1koto {
+.textarea__textarea_chbjl {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1koto::placeholder {
+.textarea__textarea_chbjl::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_1koto::placeholder {
+.textarea__hasLabel_chbjl::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1koto:disabled {
+.textarea__textarea_chbjl:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1koto:read-only {
+.textarea__textarea_chbjl:read-only {
     color: var(--input-inverted-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1koto:focus::placeholder {
+.textarea__textarea_chbjl:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }

package/themes/checkbox-group/click.css

@@ -0,0 +1,5 @@
+:root {
+    /* theme */
+    --checkbox-group-error-padding-left: 0;
+    --checkbox-group-error-border-left: none;
+}

package/themes/click.css

@@ -563,6 +563,9 @@
     --checkbox-checked-active-bg-color: var(--color-light-graphic-positive-shade-30);
     --checkbox-checked-active-border-color: transparent;
     /* theme */
+    --checkbox-group-error-padding-left: 0;
+    --checkbox-group-error-border-left: none;
+    /* theme */
     --radio-checked-bg-color: var(--color-light-graphic-positive);
     --radio-checked-border-color: transparent;
     --radio-checked-hover-bg-color: var(--color-light-graphic-positive-shade-10);