npm - @alfalab/core-components - Versions diffs - 37.2.1 → 37.3.0-beta.2 - Mend

@alfalab/core-components 37.2.1 → 37.3.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2157) hide show

package/form-control/esm/index.css CHANGED Viewed

@@ -61,11 +61,11 @@
     --form-control-l-border-radius: var(--border-radius-m);
     --form-control-xl-border-radius: var(--border-radius-l);
 }
-.form-control__component_1l70w {
+.form-control__component_4trh7 {
     font-family: var(--form-control-font-family);
     width: max-content;
 }
-.form-control__inner_1l70w {
+.form-control__inner_4trh7 {
     display: flex;
     position: relative;
     min-height: 100%;
@@ -77,7 +77,7 @@
     transform: translateZ(0);
 }
 /* Нижняя граница */
-.form-control__inner_1l70w:before {
+.form-control__inner_4trh7:before {
     content: '';
     display: block;
     position: absolute;
@@ -87,22 +87,22 @@
     transition: transform 0.2s ease, border 0.2s ease;
     transform-origin: bottom;
 }
-.form-control__inputWrapper_1l70w {
+.form-control__inputWrapper_4trh7 {
     flex-grow: 1;
     position: relative;
     overflow: hidden;
 }
-.form-control__input_1l70w {
+.form-control__input_4trh7 {
     height: 100%;
     display: flex;
     align-items: center;
     position: relative;
 }
-.form-control__input_1l70w > * {
+.form-control__input_4trh7 > * {
     padding: var(--form-control-paddings);
     font-family: var(--form-control-font-family);
 }
-.form-control__label_1l70w {
+.form-control__label_4trh7 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -118,24 +118,24 @@
     transition-property: color, transform;
     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
 }
-.form-control__labelInner_1l70w {
+.form-control__labelInner_4trh7 {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.form-control__addons_1l70w {
+.form-control__addons_4trh7 {
     display: flex;
     flex-shrink: 0;
     align-items: center;
 }
-.form-control__leftAddons_1l70w {
+.form-control__leftAddons_4trh7 {
     padding-left: var(--gap-s);
 }
-.form-control__rightAddons_1l70w {
+.form-control__rightAddons_4trh7 {
     padding-right: var(--gap-s);
 }
-.form-control__sub_1l70w {
+.form-control__sub_4trh7 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -144,7 +144,7 @@
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
 }
-.form-control__above_1l70w {
+.form-control__above_4trh7 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -157,107 +157,107 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.form-control__block_1l70w {
+.form-control__block_4trh7 {
     width: 100%;
 }
 /* SIZES */
-.form-control__s_1l70w .form-control__inner_1l70w {
+.form-control__s_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-s-min-height);
     border-radius: var(--form-control-s-border-radius);
 }
-.form-control__s_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__s_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-s-paddings);
 }
-.form-control__s_1l70w .form-control__label_1l70w {
+.form-control__s_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-s-min-height) / 2);
 }
-.form-control__m_1l70w .form-control__inner_1l70w {
+.form-control__m_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-m-min-height);
     border-radius: var(--form-control-m-border-radius);
 }
-.form-control__m_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__m_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-m-paddings);
 }
-.form-control__m_1l70w .form-control__label_1l70w {
+.form-control__m_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-m-min-height) / 2);
 }
-.form-control__l_1l70w .form-control__inner_1l70w {
+.form-control__l_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-l-min-height);
     border-radius: var(--form-control-l-border-radius);
 }
-.form-control__l_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__l_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-l-paddings);
 }
-.form-control__l_1l70w .form-control__label_1l70w {
+.form-control__l_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-l-min-height) / 2);
 }
-.form-control__xl_1l70w .form-control__inner_1l70w {
+.form-control__xl_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-xl-min-height);
     border-radius: var(--form-control-xl-border-radius);
 }
-.form-control__xl_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7 .form-control__label_4trh7 {
     left: var(--gap-m);
 }
-.form-control__xl_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-xl-paddings);
 }
-.form-control__xl_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-xl-paddings);
 }
-.form-control__xl_1l70w .form-control__leftAddons_1l70w {
+.form-control__xl_4trh7 .form-control__leftAddons_4trh7 {
     padding-left: var(--gap-m);
 }
-.form-control__xl_1l70w .form-control__rightAddons_1l70w {
+.form-control__xl_4trh7 .form-control__rightAddons_4trh7 {
     padding-right: var(--gap-m);
 }
-.form-control__xl_1l70w.form-control__hasLeftAddons_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7.form-control__hasLeftAddons_4trh7 .form-control__label_4trh7 {
     left: var(--gap-s);
 }
-.form-control__xl_1l70w.form-control__hasLeftAddons_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7.form-control__hasLeftAddons_4trh7 .form-control__input_4trh7 > * {
     padding-left: var(--gap-s);
 }
-.form-control__xl_1l70w.form-control__hasRightAddons_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7.form-control__hasRightAddons_4trh7 .form-control__input_4trh7 > * {
     padding-right: var(--gap-s);
 }
-.form-control__xl_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-xl-min-height) / 2);
 }
 /* DISABLED STATE */
-.form-control__disabled_1l70w {
+.form-control__disabled_4trh7 {
     opacity: var(--form-control-disabled-opacity);
 }
 /* FOCUS STATE */
-.form-control__focused_1l70w:not(.form-control__disabled_1l70w):before,
-.form-control__hasError_1l70w:before {
+.form-control__focused_4trh7:not(.form-control__disabled_4trh7):before,
+.form-control__hasError_4trh7:before {
     transform: scaleY(2);
 }
-.form-control__filled_1l70w .form-control__label_1l70w {
+.form-control__filled_4trh7 .form-control__label_4trh7 {
     transform: translateY(-100%) scale(0.875);
     /* adjusting position 👌 */
     margin-top: 1px;
 }
-.form-control__xl_1l70w .form-control__filled_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7 .form-control__filled_4trh7 .form-control__label_4trh7 {
     /* adjusting position 👌 */
     margin-top: -1px;
 }
-.form-control__hiddenLabel_1l70w {
+.form-control__hiddenLabel_4trh7 {
     opacity: 0;
     height: 0;
     padding: var(--form-control-paddings);
     display: block;
     box-sizing: border-box;
 }
-.form-control__xl_1l70w .form-control__hiddenLabel_1l70w {
+.form-control__xl_4trh7 .form-control__hiddenLabel_4trh7 {
     padding: var(--form-control-xl-paddings);
 }
 /* min-height and width: max-content; fix for IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .form-control__component_1l70w {
+    .form-control__component_4trh7 {
         display: inline-block;
     }
-    .form-control__inner_1l70w:after {
+    .form-control__inner_4trh7:after {
         min-height: inherit;
         font-size: 0;
         content: '';

package/form-control/esm/inverted.css CHANGED Viewed

@@ -66,65 +66,65 @@
     /* border-radius */
 }
-.form-control__component_6q1it {
+.form-control__component_1sors {
     color: var(--form-control-inverted-color);
 }
-.form-control__inner_6q1it {
+.form-control__inner_1sors {
     background-color: var(--form-control-inverted-bg-color);
 }
 /* Нижняя граница */
-.form-control__inner_6q1it:before {
+.form-control__inner_1sors:before {
     border-bottom: var(--form-control-inverted-border-bottom);
 }
-.form-control__label_6q1it {
+.form-control__label_1sors {
     color: var(--form-control-inverted-label-color);
 }
-.form-control__hint_6q1it {
+.form-control__hint_1sors {
     color: var(--form-control-inverted-hint-color);
 }
 /* DISABLED STATE */
-.form-control__disabled_6q1it {
+.form-control__disabled_1sors {
     background-color: var(--form-control-inverted-disabled-bg-color);
     color: var(--form-control-inverted-disabled-color);
     box-shadow: var(--form-control-inverted-disabled-shadow);
 }
-.form-control__disabled_6q1it.form-control__hasError_6q1it {
+.form-control__disabled_1sors.form-control__hasError_1sors {
     box-shadow: var(--form-control-inverted-error-disabled-shadow);
     background-color: var(--form-control-inverted-disabled-bg-color);
 }
-.form-control__disabled_6q1it:before {
+.form-control__disabled_1sors:before {
     border-bottom: var(--form-control-inverted-disabled-border-bottom);
 }
-.form-control__disabled_6q1it.form-control__filled_6q1it .form-control__label_6q1it {
+.form-control__disabled_1sors.form-control__filled_1sors .form-control__label_1sors {
     color: var(--form-control-inverted-disabled-filled-label-color);
 }
 /* HOVER STATE */
-.form-control__inner_6q1it:not(.form-control__disabled_6q1it):hover {
+.form-control__inner_1sors:not(.form-control__disabled_1sors):hover {
     background-color: var(--form-control-inverted-hover-bg-color);
 }
 /* FOCUS STATE */
-.form-control__focused_6q1it:not(.form-control__disabled_6q1it):not(.form-control__hasError_6q1it):before {
+.form-control__focused_1sors:not(.form-control__disabled_1sors):not(.form-control__hasError_1sors):before {
     border-bottom: var(--form-control-inverted-focus-border-bottom);
 }
-.form-control__focused_6q1it.form-control__inner_6q1it,
-.form-control__focused_6q1it.form-control__inner_6q1it:hover {
+.form-control__focused_1sors.form-control__inner_1sors,
+.form-control__focused_1sors.form-control__inner_1sors:hover {
     background-color: var(--form-control-inverted-focus-bg-color);
     box-shadow: var(--form-control-inverted-focus-shadow)
 }
-.form-control__focused_6q1it.form-control__inner_6q1it.form-control__hasError_6q1it, .form-control__focused_6q1it.form-control__inner_6q1it:hover.form-control__hasError_6q1it {
+.form-control__focused_1sors.form-control__inner_1sors.form-control__hasError_1sors, .form-control__focused_1sors.form-control__inner_1sors:hover.form-control__hasError_1sors {
         box-shadow: var(--form-control-inverted-focus-error-shadow);
     }
 /* ERROR STATE */
-.form-control__error_6q1it {
+.form-control__error_1sors {
     color: var(--form-control-inverted-error-color);
 }
-.form-control__hasError_6q1it .form-control__label_6q1it {
+.form-control__hasError_1sors .form-control__label_1sors {
     color: var(--form-control-inverted-error-label-color);
 }
-.form-control__hasError_6q1it:before {
+.form-control__hasError_1sors:before {
     border-bottom: var(--form-control-inverted-error-border-bottom);
 }
-.form-control__hasError_6q1it {
+.form-control__hasError_1sors {
     box-shadow: var(--form-control-inverted-error-shadow);
     background-color: var(--form-control-inverted-error-bg-color);
 }

package/form-control/index.css CHANGED Viewed

@@ -61,11 +61,11 @@
     --form-control-l-border-radius: var(--border-radius-m);
     --form-control-xl-border-radius: var(--border-radius-l);
 }
-.form-control__component_1l70w {
+.form-control__component_4trh7 {
     font-family: var(--form-control-font-family);
     width: max-content;
 }
-.form-control__inner_1l70w {
+.form-control__inner_4trh7 {
     display: flex;
     position: relative;
     min-height: 100%;
@@ -77,7 +77,7 @@
     transform: translateZ(0);
 }
 /* Нижняя граница */
-.form-control__inner_1l70w:before {
+.form-control__inner_4trh7:before {
     content: '';
     display: block;
     position: absolute;
@@ -87,22 +87,22 @@
     transition: transform 0.2s ease, border 0.2s ease;
     transform-origin: bottom;
 }
-.form-control__inputWrapper_1l70w {
+.form-control__inputWrapper_4trh7 {
     flex-grow: 1;
     position: relative;
     overflow: hidden;
 }
-.form-control__input_1l70w {
+.form-control__input_4trh7 {
     height: 100%;
     display: flex;
     align-items: center;
     position: relative;
 }
-.form-control__input_1l70w > * {
+.form-control__input_4trh7 > * {
     padding: var(--form-control-paddings);
     font-family: var(--form-control-font-family);
 }
-.form-control__label_1l70w {
+.form-control__label_4trh7 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -118,24 +118,24 @@
     transition-property: color, transform;
     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
 }
-.form-control__labelInner_1l70w {
+.form-control__labelInner_4trh7 {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.form-control__addons_1l70w {
+.form-control__addons_4trh7 {
     display: flex;
     flex-shrink: 0;
     align-items: center;
 }
-.form-control__leftAddons_1l70w {
+.form-control__leftAddons_4trh7 {
     padding-left: var(--gap-s);
 }
-.form-control__rightAddons_1l70w {
+.form-control__rightAddons_4trh7 {
     padding-right: var(--gap-s);
 }
-.form-control__sub_1l70w {
+.form-control__sub_4trh7 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -144,7 +144,7 @@
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
 }
-.form-control__above_1l70w {
+.form-control__above_4trh7 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -157,107 +157,107 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.form-control__block_1l70w {
+.form-control__block_4trh7 {
     width: 100%;
 }
 /* SIZES */
-.form-control__s_1l70w .form-control__inner_1l70w {
+.form-control__s_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-s-min-height);
     border-radius: var(--form-control-s-border-radius);
 }
-.form-control__s_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__s_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-s-paddings);
 }
-.form-control__s_1l70w .form-control__label_1l70w {
+.form-control__s_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-s-min-height) / 2);
 }
-.form-control__m_1l70w .form-control__inner_1l70w {
+.form-control__m_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-m-min-height);
     border-radius: var(--form-control-m-border-radius);
 }
-.form-control__m_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__m_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-m-paddings);
 }
-.form-control__m_1l70w .form-control__label_1l70w {
+.form-control__m_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-m-min-height) / 2);
 }
-.form-control__l_1l70w .form-control__inner_1l70w {
+.form-control__l_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-l-min-height);
     border-radius: var(--form-control-l-border-radius);
 }
-.form-control__l_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__l_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-l-paddings);
 }
-.form-control__l_1l70w .form-control__label_1l70w {
+.form-control__l_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-l-min-height) / 2);
 }
-.form-control__xl_1l70w .form-control__inner_1l70w {
+.form-control__xl_4trh7 .form-control__inner_4trh7 {
     min-height: var(--form-control-xl-min-height);
     border-radius: var(--form-control-xl-border-radius);
 }
-.form-control__xl_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7 .form-control__label_4trh7 {
     left: var(--gap-m);
 }
-.form-control__xl_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-xl-paddings);
 }
-.form-control__xl_1l70w .form-control__hasInnerLabel_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7 .form-control__hasInnerLabel_4trh7 .form-control__input_4trh7 > * {
     padding: var(--form-control-labeled-xl-paddings);
 }
-.form-control__xl_1l70w .form-control__leftAddons_1l70w {
+.form-control__xl_4trh7 .form-control__leftAddons_4trh7 {
     padding-left: var(--gap-m);
 }
-.form-control__xl_1l70w .form-control__rightAddons_1l70w {
+.form-control__xl_4trh7 .form-control__rightAddons_4trh7 {
     padding-right: var(--gap-m);
 }
-.form-control__xl_1l70w.form-control__hasLeftAddons_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7.form-control__hasLeftAddons_4trh7 .form-control__label_4trh7 {
     left: var(--gap-s);
 }
-.form-control__xl_1l70w.form-control__hasLeftAddons_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7.form-control__hasLeftAddons_4trh7 .form-control__input_4trh7 > * {
     padding-left: var(--gap-s);
 }
-.form-control__xl_1l70w.form-control__hasRightAddons_1l70w .form-control__input_1l70w > * {
+.form-control__xl_4trh7.form-control__hasRightAddons_4trh7 .form-control__input_4trh7 > * {
     padding-right: var(--gap-s);
 }
-.form-control__xl_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7 .form-control__label_4trh7 {
     top: calc(var(--form-control-xl-min-height) / 2);
 }
 /* DISABLED STATE */
-.form-control__disabled_1l70w {
+.form-control__disabled_4trh7 {
     opacity: var(--form-control-disabled-opacity);
 }
 /* FOCUS STATE */
-.form-control__focused_1l70w:not(.form-control__disabled_1l70w):before,
-.form-control__hasError_1l70w:before {
+.form-control__focused_4trh7:not(.form-control__disabled_4trh7):before,
+.form-control__hasError_4trh7:before {
     transform: scaleY(2);
 }
-.form-control__filled_1l70w .form-control__label_1l70w {
+.form-control__filled_4trh7 .form-control__label_4trh7 {
     transform: translateY(-100%) scale(0.875);
     /* adjusting position 👌 */
     margin-top: 1px;
 }
-.form-control__xl_1l70w .form-control__filled_1l70w .form-control__label_1l70w {
+.form-control__xl_4trh7 .form-control__filled_4trh7 .form-control__label_4trh7 {
     /* adjusting position 👌 */
     margin-top: -1px;
 }
-.form-control__hiddenLabel_1l70w {
+.form-control__hiddenLabel_4trh7 {
     opacity: 0;
     height: 0;
     padding: var(--form-control-paddings);
     display: block;
     box-sizing: border-box;
 }
-.form-control__xl_1l70w .form-control__hiddenLabel_1l70w {
+.form-control__xl_4trh7 .form-control__hiddenLabel_4trh7 {
     padding: var(--form-control-xl-paddings);
 }
 /* min-height and width: max-content; fix for IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .form-control__component_1l70w {
+    .form-control__component_4trh7 {
         display: inline-block;
     }
-    .form-control__inner_1l70w:after {
+    .form-control__inner_4trh7:after {
         min-height: inherit;
         font-size: 0;
         content: '';

package/form-control/inverted.css CHANGED Viewed

@@ -66,65 +66,65 @@
     /* border-radius */
 }
-.form-control__component_6q1it {
+.form-control__component_1sors {
     color: var(--form-control-inverted-color);
 }
-.form-control__inner_6q1it {
+.form-control__inner_1sors {
     background-color: var(--form-control-inverted-bg-color);
 }
 /* Нижняя граница */
-.form-control__inner_6q1it:before {
+.form-control__inner_1sors:before {
     border-bottom: var(--form-control-inverted-border-bottom);
 }
-.form-control__label_6q1it {
+.form-control__label_1sors {
     color: var(--form-control-inverted-label-color);
 }
-.form-control__hint_6q1it {
+.form-control__hint_1sors {
     color: var(--form-control-inverted-hint-color);
 }
 /* DISABLED STATE */
-.form-control__disabled_6q1it {
+.form-control__disabled_1sors {
     background-color: var(--form-control-inverted-disabled-bg-color);
     color: var(--form-control-inverted-disabled-color);
     box-shadow: var(--form-control-inverted-disabled-shadow);
 }
-.form-control__disabled_6q1it.form-control__hasError_6q1it {
+.form-control__disabled_1sors.form-control__hasError_1sors {
     box-shadow: var(--form-control-inverted-error-disabled-shadow);
     background-color: var(--form-control-inverted-disabled-bg-color);
 }
-.form-control__disabled_6q1it:before {
+.form-control__disabled_1sors:before {
     border-bottom: var(--form-control-inverted-disabled-border-bottom);
 }
-.form-control__disabled_6q1it.form-control__filled_6q1it .form-control__label_6q1it {
+.form-control__disabled_1sors.form-control__filled_1sors .form-control__label_1sors {
     color: var(--form-control-inverted-disabled-filled-label-color);
 }
 /* HOVER STATE */
-.form-control__inner_6q1it:not(.form-control__disabled_6q1it):hover {
+.form-control__inner_1sors:not(.form-control__disabled_1sors):hover {
     background-color: var(--form-control-inverted-hover-bg-color);
 }
 /* FOCUS STATE */
-.form-control__focused_6q1it:not(.form-control__disabled_6q1it):not(.form-control__hasError_6q1it):before {
+.form-control__focused_1sors:not(.form-control__disabled_1sors):not(.form-control__hasError_1sors):before {
     border-bottom: var(--form-control-inverted-focus-border-bottom);
 }
-.form-control__focused_6q1it.form-control__inner_6q1it,
-.form-control__focused_6q1it.form-control__inner_6q1it:hover {
+.form-control__focused_1sors.form-control__inner_1sors,
+.form-control__focused_1sors.form-control__inner_1sors:hover {
     background-color: var(--form-control-inverted-focus-bg-color);
     box-shadow: var(--form-control-inverted-focus-shadow)
 }
-.form-control__focused_6q1it.form-control__inner_6q1it.form-control__hasError_6q1it, .form-control__focused_6q1it.form-control__inner_6q1it:hover.form-control__hasError_6q1it {
+.form-control__focused_1sors.form-control__inner_1sors.form-control__hasError_1sors, .form-control__focused_1sors.form-control__inner_1sors:hover.form-control__hasError_1sors {
         box-shadow: var(--form-control-inverted-focus-error-shadow);
     }
 /* ERROR STATE */
-.form-control__error_6q1it {
+.form-control__error_1sors {
     color: var(--form-control-inverted-error-color);
 }
-.form-control__hasError_6q1it .form-control__label_6q1it {
+.form-control__hasError_1sors .form-control__label_1sors {
     color: var(--form-control-inverted-error-label-color);
 }
-.form-control__hasError_6q1it:before {
+.form-control__hasError_1sors:before {
     border-bottom: var(--form-control-inverted-error-border-bottom);
 }
-.form-control__hasError_6q1it {
+.form-control__hasError_1sors {
     box-shadow: var(--form-control-inverted-error-shadow);
     background-color: var(--form-control-inverted-error-bg-color);
 }

package/form-control/modern/Component.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
-const defaultColors = {"component":"form-control__component_vkpe3","inner":"form-control__inner_vkpe3","label":"form-control__label_vkpe3","hint":"form-control__hint_vkpe3","disabled":"form-control__disabled_vkpe3","hasError":"form-control__hasError_vkpe3","filled":"form-control__filled_vkpe3","focused":"form-control__focused_vkpe3","error":"form-control__error_vkpe3"};
+const defaultColors = {"component":"form-control__component_p1n34","inner":"form-control__inner_p1n34","label":"form-control__label_p1n34","hint":"form-control__hint_p1n34","disabled":"form-control__disabled_p1n34","hasError":"form-control__hasError_p1n34","filled":"form-control__filled_p1n34","focused":"form-control__focused_p1n34","error":"form-control__error_p1n34"};
 require('./default.css');
-const styles = {"component":"form-control__component_1l70w","inner":"form-control__inner_1l70w","inputWrapper":"form-control__inputWrapper_1l70w","input":"form-control__input_1l70w","label":"form-control__label_1l70w","labelInner":"form-control__labelInner_1l70w","addons":"form-control__addons_1l70w","leftAddons":"form-control__leftAddons_1l70w","rightAddons":"form-control__rightAddons_1l70w","sub":"form-control__sub_1l70w","above":"form-control__above_1l70w","block":"form-control__block_1l70w","s":"form-control__s_1l70w","hasInnerLabel":"form-control__hasInnerLabel_1l70w","m":"form-control__m_1l70w","l":"form-control__l_1l70w","xl":"form-control__xl_1l70w","hasLeftAddons":"form-control__hasLeftAddons_1l70w","hasRightAddons":"form-control__hasRightAddons_1l70w","disabled":"form-control__disabled_1l70w","focused":"form-control__focused_1l70w","hasError":"form-control__hasError_1l70w","filled":"form-control__filled_1l70w","hiddenLabel":"form-control__hiddenLabel_1l70w"};
+const styles = {"component":"form-control__component_4trh7","inner":"form-control__inner_4trh7","inputWrapper":"form-control__inputWrapper_4trh7","input":"form-control__input_4trh7","label":"form-control__label_4trh7","labelInner":"form-control__labelInner_4trh7","addons":"form-control__addons_4trh7","leftAddons":"form-control__leftAddons_4trh7","rightAddons":"form-control__rightAddons_4trh7","sub":"form-control__sub_4trh7","above":"form-control__above_4trh7","block":"form-control__block_4trh7","s":"form-control__s_4trh7","hasInnerLabel":"form-control__hasInnerLabel_4trh7","m":"form-control__m_4trh7","l":"form-control__l_4trh7","xl":"form-control__xl_4trh7","hasLeftAddons":"form-control__hasLeftAddons_4trh7","hasRightAddons":"form-control__hasRightAddons_4trh7","disabled":"form-control__disabled_4trh7","focused":"form-control__focused_4trh7","hasError":"form-control__hasError_4trh7","filled":"form-control__filled_4trh7","hiddenLabel":"form-control__hiddenLabel_4trh7"};
 require('./index.css');
-const invertedColors = {"component":"form-control__component_6q1it","inner":"form-control__inner_6q1it","label":"form-control__label_6q1it","hint":"form-control__hint_6q1it","disabled":"form-control__disabled_6q1it","hasError":"form-control__hasError_6q1it","filled":"form-control__filled_6q1it","focused":"form-control__focused_6q1it","error":"form-control__error_6q1it"};
+const invertedColors = {"component":"form-control__component_1sors","inner":"form-control__inner_1sors","label":"form-control__label_1sors","hint":"form-control__hint_1sors","disabled":"form-control__disabled_1sors","hasError":"form-control__hasError_1sors","filled":"form-control__filled_1sors","focused":"form-control__focused_1sors","error":"form-control__error_1sors"};
 require('./inverted.css');
 const colorStyles = {