@alfalab/core-components 47.11.0 → 47.12.1-beta.0

package/indicator/moderncssm/Component.d.ts

@@ -0,0 +1,99 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactElement } from "react";
+type Border = {
+    width?: number;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+};
+type IndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | ReactElement;
+    /**
+     * Цвет значения
+     */
+    color?: string;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string;
+    /**
+     * Высота компонента, min = 16; max = 48
+     */
+    height?: number;
+    /**
+     * Размер компонента
+     * @description xs, s, m, l deprecated, используйте вместо них 8, 20, 24, 40 соответственно
+     */
+    size?: 'xs' | 's' | 'm' | 'l' | 8 | 20 | 24 | 40;
+    /**
+     * Настройки обводки
+     */
+    border?: boolean | Border;
+    /**
+     * Пресет компонента
+     */
+    view?: 'red' | 'grey' | 'white';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    8: string;
+    16: string;
+    20: string;
+    24: string;
+    40: string;
+    48: string;
+};
+declare const Indicator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Значение индикатора
+     */
+    value?: number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /**
+     * Цвет значения
+     */
+    color?: string | undefined;
+    /**
+     * Цвет заливки
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Высота компонента, min = 16; max = 48
+     */
+    height?: number | undefined;
+    /**
+     * Размер компонента
+     * @description xs, s, m, l deprecated, используйте вместо них 8, 20, 24, 40 соответственно
+     */
+    size?: "xs" | "s" | "m" | "l" | 8 | 20 | 24 | 40 | undefined;
+    /**
+     * Настройки обводки
+     */
+    border?: boolean | Border | undefined;
+    /**
+     * Пресет компонента
+     */
+    view?: "red" | "grey" | "white" | undefined;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { IndicatorProps, SIZE_TO_CLASSNAME_MAP, Indicator };

package/indicator/moderncssm/Component.js

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+function getSize(height, value) {
+    if (!height) {
+        return typeof value === 'undefined' ? 8 : 20;
+    }
+    if (height <= 8)
+        return 8;
+    if (height <= 16)
+        return 16;
+    if (height <= 20)
+        return 20;
+    if (height <= 24)
+        return 24;
+    if (height <= 40)
+        return 40;
+    return 48;
+}
+function formatValue(rawValue) {
+    if (typeof rawValue === 'number' && rawValue >= 100)
+        return '99+';
+    return rawValue;
+}
+function borderStyles(border, view) {
+    if (!border)
+        return {};
+    if (typeof border === 'object') {
+        return {
+            outlineColor: border.color,
+            outlineWidth: border.width,
+            outlineStyle: border.style || 'solid',
+        };
+    }
+    if (view)
+        return {};
+    return {
+        outlineWidth: 2,
+        outlineColor: 'var(--color-light-neutral-translucent-1300)',
+        outlineStyle: 'solid',
+    };
+}
+const SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-8',
+    s: 'size-20',
+    m: 'size-24',
+    l: 'size-40',
+    8: 'size-8',
+    16: 'size-16',
+    20: 'size-20',
+    24: 'size-24',
+    40: 'size-40',
+    48: 'size-48',
+};
+const Indicator = forwardRef(({ value, view, color, backgroundColor, height, border, className, dataTestId, style, size = getSize(height, value), ...restProps }, ref) => {
+    const showContent = typeof value !== 'undefined' && SIZE_TO_CLASSNAME_MAP[size] !== 'size-8';
+    return (React.createElement("div", { ref: ref, className: cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], view && styles[view], border === true && styles.border, className), style: {
+            ...style,
+            ...(!view && {
+                backgroundColor,
+                color,
+            }),
+            height,
+            minWidth: height,
+            ...borderStyles(border, view),
+        }, "data-test-id": dataTestId, ...restProps }, showContent && React.createElement("span", { className: styles.content }, formatValue(value))));
+});
+Indicator.displayName = 'Indicator';
+
+export { Indicator, SIZE_TO_CLASSNAME_MAP };

package/indicator/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/indicator/moderncssm/index.js

@@ -0,0 +1,4 @@
+export { Indicator, SIZE_TO_CLASSNAME_MAP } from './Component.js';
+import 'react';
+import 'classnames';
+import './index.module.css';

package/indicator/moderncssm/index.module.css

@@ -0,0 +1,100 @@
+/* */
+
+.component {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-pill);
+    color: var(--color-static-text-primary-inverted);
+    background-color: var(--color-light-accent-primary);
+}
+
+.red {
+    background-color: var(--color-light-accent-primary);
+    color: var(--color-static-text-primary-inverted)
+}
+
+.red.border {
+        outline: 2px solid var(--color-light-neutral-translucent-1300-inverted);
+    }
+
+.white {
+    background-color: var(--color-light-neutral-0);
+    color: var(--color-light-text-primary)
+}
+
+.white.border {
+        outline: 2px solid var(--color-light-neutral-translucent-1300-inverted);
+    }
+
+.grey {
+    background-color: var(--color-light-neutral-translucent-200);
+    color: var(--color-light-text-primary)
+}
+
+.grey.border {
+        outline: 2px solid var(--color-light-neutral-translucent-1300-inverted);
+    }
+
+.size-8 {
+    height: 8px;
+    min-width: 8px;
+}
+
+.size-16 {
+    height: 16px;
+    min-width: 16px
+}
+
+.size-16 .content {
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        padding: 0 var(--gap-2xs);
+    }
+
+.size-20 {
+    height: 20px;
+    min-width: 20px
+}
+
+.size-20 .content {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 700;
+        padding: 0 var(--gap-2xs);
+    }
+
+.size-24 {
+    height: 24px;
+    min-width: 24px
+}
+
+.size-24 .content {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        padding: 0 var(--gap-2xs);
+    }
+
+.size-40 {
+    height: 40px;
+    min-width: 40px
+}
+
+.size-40 .content {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+        padding: 0 var(--gap-s);
+    }
+
+.size-48 .content {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+        padding: 0 var(--gap-m);
+    }

package/input/components/base-input/Component.js

@@ -15,13 +15,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"input":"input__input_100nw","hasInnerLabel":"input__hasInnerLabel_100nw","disableUserInput":"input__disableUserInput_100nw","error":"input__error_100nw"};
+var defaultColors = {"input":"input__input_xqc49","hasInnerLabel":"input__hasInnerLabel_xqc49","disableUserInput":"input__disableUserInput_xqc49","error":"input__error_xqc49"};
 require('./default.css');
 
-var styles = {"input":"input__input_1k0le","hasInnerLabel":"input__hasInnerLabel_1k0le","size-48":"input__size-48_1k0le","size-56":"input__size-56_1k0le","size-64":"input__size-64_1k0le","size-72":"input__size-72_1k0le","block":"input__block_1k0le","errorIcon":"input__errorIcon_1k0le","successIcon":"input__successIcon_1k0le","focusVisible":"input__focusVisible_1k0le","onautofillstart":"input__onautofillstart_1k0le","onautofillcancel":"input__onautofillcancel_1k0le"};
+var styles = {"input":"input__input_yrkwo","hasInnerLabel":"input__hasInnerLabel_yrkwo","size-48":"input__size-48_yrkwo","size-56":"input__size-56_yrkwo","size-64":"input__size-64_yrkwo","size-72":"input__size-72_yrkwo","block":"input__block_yrkwo","errorIcon":"input__errorIcon_yrkwo","successIcon":"input__successIcon_yrkwo","focusVisible":"input__focusVisible_yrkwo","onautofillstart":"input__onautofillstart_yrkwo","onautofillcancel":"input__onautofillcancel_yrkwo"};
 require('./index.css');
 
-var invertedColors = {"input":"input__input_ta9aj","hasInnerLabel":"input__hasInnerLabel_ta9aj","disableUserInput":"input__disableUserInput_ta9aj","error":"input__error_ta9aj"};
+var invertedColors = {"input":"input__input_qzxi6","hasInnerLabel":"input__hasInnerLabel_qzxi6","disableUserInput":"input__disableUserInput_qzxi6","error":"input__error_qzxi6"};
 require('./inverted.css');
 
 var colorCommonStyles = {

package/input/components/base-input/default.css

@@ -41,26 +41,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_100nw {
+} .input__input_xqc49 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_100nw:-webkit-autofill {
+} .input__input_xqc49:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .input__input_100nw::placeholder {
+} .input__input_xqc49::placeholder {
     color: var(--input-placeholder-color);
-} .input__hasInnerLabel_100nw::placeholder {
+} .input__hasInnerLabel_xqc49::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .input__input_100nw:read-only:not(.input__disableUserInput_100nw) {
+} /* READ-ONLY STATE */ .input__input_xqc49:read-only:not(.input__disableUserInput_xqc49) {
     color: var(--input-read-only-color)
-} .input__input_100nw:read-only:not(.input__disableUserInput_100nw):focus::placeholder {
+} .input__input_xqc49:read-only:not(.input__disableUserInput_xqc49):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .input__input_100nw:disabled {
+    } /* DISABLED STATE */ .input__input_xqc49:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .input__input_100nw:focus::placeholder {
+} /* FOCUS STATE */ .input__input_xqc49:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_100nw {
+} /* ERROR STATE */ .input__error_xqc49 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }

package/input/components/base-input/index.css

@@ -75,7 +75,7 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
     --input-error-icon-not-alone-display: none;
-} .input__input_1k0le {
+} .input__input_yrkwo {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -90,78 +90,78 @@
     text-overflow: ellipsis;
     box-sizing: border-box;
     -webkit-appearance: none;
-} .input__input_1k0le::placeholder {
+} .input__input_yrkwo::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .input__hasInnerLabel_1k0le::placeholder {
+} .input__hasInnerLabel_yrkwo::placeholder {
         opacity: 0;
-    } .input__hasInnerLabel_1k0le.input__size-48_1k0le {
+    } .input__hasInnerLabel_yrkwo.input__size-48_yrkwo {
         height: var(--form-control-s-min-height);
-    } .input__hasInnerLabel_1k0le.input__size-56_1k0le {
+    } .input__hasInnerLabel_yrkwo.input__size-56_yrkwo {
         height: var(--form-control-m-min-height);
-    } .input__hasInnerLabel_1k0le.input__size-64_1k0le {
+    } .input__hasInnerLabel_yrkwo.input__size-64_yrkwo {
         height: var(--form-control-l-min-height);
-    } .input__hasInnerLabel_1k0le.input__size-72_1k0le {
+    } .input__hasInnerLabel_yrkwo.input__size-72_yrkwo {
         height: var(--form-control-xl-min-height);
-    } .input__block_1k0le {
+    } .input__block_yrkwo {
     width: 100%;
-} .input__errorIcon_1k0le {
+} .input__errorIcon_yrkwo {
     display: var(--input-error-icon-display)
-} .input__errorIcon_1k0le:not(:only-child) {
+} .input__errorIcon_yrkwo:not(:only-child) {
         margin-left: var(--gap-2xs);
-    } * + .input__errorIcon_1k0le {
+    } * + .input__errorIcon_yrkwo {
     display: var(--input-error-icon-not-alone-display);
-} button[class*='eye'] + .input__errorIcon_1k0le {
+} button[class*='eye'] + .input__errorIcon_yrkwo {
     margin-right: var(--gap-s);
-} .input__successIcon_1k0le {
+} .input__successIcon_yrkwo {
     display: var(--input-success-icon-display)
-} .input__successIcon_1k0le:not(:only-child) {
+} .input__successIcon_yrkwo:not(:only-child) {
         margin-left: var(--gap-2xs);
-    } button[class*='eye'] + .input__successIcon_1k0le {
+    } button[class*='eye'] + .input__successIcon_yrkwo {
     margin-right: var(--gap-s);
-} /* DISABLED STATE */ .input__input_1k0le:disabled {
+} /* DISABLED STATE */ .input__input_yrkwo:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* FOCUS STATE */ .input__input_1k0le:focus.input__hasInnerLabel_1k0le::placeholder {
+} /* FOCUS STATE */ .input__input_yrkwo:focus.input__hasInnerLabel_yrkwo::placeholder {
     opacity: 1;
-} .input__focusVisible_1k0le {
+} .input__focusVisible_yrkwo {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* READ-ONLY STATE */ .input__hasInnerLabel_1k0le:read-only:focus::placeholder {
+} /* READ-ONLY STATE */ .input__hasInnerLabel_yrkwo:read-only:focus::placeholder {
     opacity: 0;
-} /* Убирает синюю заливку при автокомплите */ .input__input_1k0le:-webkit-autofill:first-line, .input__input_1k0le:-webkit-autofill:hover:first-line, .input__input_1k0le:-webkit-autofill:focus:first-line, .input__input_1k0le:-webkit-autofill:active:first-line {
+} /* Убирает синюю заливку при автокомплите */ .input__input_yrkwo:-webkit-autofill:first-line, .input__input_yrkwo:-webkit-autofill:hover:first-line, .input__input_yrkwo:-webkit-autofill:focus:first-line, .input__input_yrkwo:-webkit-autofill:active:first-line {
             font-size: 16px;
             line-height: 20px;
             font-weight: 400;
             font-family: var(--form-control-font-family);
-        } .input__input_1k0le:-webkit-autofill,
-    .input__input_1k0le:-webkit-autofill:hover,
-    .input__input_1k0le:-webkit-autofill:focus,
-    .input__input_1k0le:-webkit-autofill:active {
+        } .input__input_yrkwo:-webkit-autofill,
+    .input__input_yrkwo:-webkit-autofill:hover,
+    .input__input_yrkwo:-webkit-autofill:focus,
+    .input__input_yrkwo:-webkit-autofill:active {
 
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
-    } .input__input_1k0le:-webkit-autofill {
-        animation: input__onautofillstart_1k0le 999999s forwards;
-    } .input__input_1k0le:not(:-webkit-autofill) {
+    } .input__input_yrkwo:-webkit-autofill {
+        animation: input__onautofillstart_yrkwo 999999s forwards;
+    } .input__input_yrkwo:not(:-webkit-autofill) {
         /* Позволяет отслеживать autofill через js */
-        animation: input__onautofillcancel_1k0le 999999s;
-    } /* Убирает нативные стрелочки при type=number */ .input__input_1k0le::-webkit-outer-spin-button,
-    .input__input_1k0le::-webkit-inner-spin-button {
+        animation: input__onautofillcancel_yrkwo 999999s;
+    } /* Убирает нативные стрелочки при type=number */ .input__input_yrkwo::-webkit-outer-spin-button,
+    .input__input_yrkwo::-webkit-inner-spin-button {
         -webkit-appearance: none;
-    } .input__input_1k0le {
+    } .input__input_yrkwo {
 
     /* Firefox */
-} .input__input_1k0le[type='number'] {
+} .input__input_yrkwo[type='number'] {
         -moz-appearance: textfield;
-    } @keyframes input__onautofillstart_1k0le {
+    } @keyframes input__onautofillstart_yrkwo {
     from {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
     to {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
     }
-} @keyframes input__onautofillcancel_1k0le {
+} @keyframes input__onautofillcancel_yrkwo {
     from {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }

package/input/components/base-input/inverted.css

@@ -41,26 +41,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_ta9aj {
+} .input__input_qzxi6 {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_ta9aj:-webkit-autofill {
+} .input__input_qzxi6:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .input__input_ta9aj::placeholder {
+} .input__input_qzxi6::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .input__hasInnerLabel_ta9aj::placeholder {
+} .input__hasInnerLabel_qzxi6::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .input__input_ta9aj:read-only:not(.input__disableUserInput_ta9aj) {
+} /* READ-ONLY STATE */ .input__input_qzxi6:read-only:not(.input__disableUserInput_qzxi6) {
     color: var(--input-inverted-read-only-color)
-} .input__input_ta9aj:read-only:not(.input__disableUserInput_ta9aj):focus::placeholder {
+} .input__input_qzxi6:read-only:not(.input__disableUserInput_qzxi6):focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .input__input_ta9aj:disabled {
+    } /* DISABLED STATE */ .input__input_qzxi6:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .input__input_ta9aj:focus::placeholder {
+} /* FOCUS STATE */ .input__input_qzxi6:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_ta9aj {
+} /* ERROR STATE */ .input__error_qzxi6 {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }

package/input/components/clear-button/Component.js

@@ -10,13 +10,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"clearIcon":"input__clearIcon_hrvh1"};
+var defaultColors = {"clearIcon":"input__clearIcon_fhjoo"};
 require('./default.css');
 
-var styles = {"clearIcon":"input__clearIcon_1e95c","clearButton":"input__clearButton_1e95c"};
+var styles = {"clearIcon":"input__clearIcon_t04u7","clearButton":"input__clearButton_t04u7"};
 require('./index.css');
 
-var invertedColors = {"clearIcon":"input__clearIcon_1rah8"};
+var invertedColors = {"clearIcon":"input__clearIcon_1p05g"};
 require('./inverted.css');
 
 var colorStyles = {

package/input/components/clear-button/default.css

@@ -32,10 +32,10 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__clearIcon_hrvh1 {
+} .input__clearIcon_fhjoo {
     color: var(--color-light-neutral-translucent-500)
-} .input__clearIcon_hrvh1:hover {
+} .input__clearIcon_fhjoo:hover {
         color: var(--color-light-neutral-translucent-500-hover);
-    } .input__clearIcon_hrvh1:active {
+    } .input__clearIcon_fhjoo:active {
         color: var(--color-light-neutral-translucent-500-press);
     }

package/input/components/clear-button/index.css

@@ -58,11 +58,11 @@
     --input-error-icon-display: none;
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__clearIcon_1e95c {
+} .input__clearIcon_t04u7 {
     display: block;
     transition: opacity 0.2s ease;
-} .input__clearButton_1e95c + * {
+} .input__clearButton_t04u7 + * {
     margin-left: var(--gap-2xs);
-} .input__clearButton_1e95c + [data-addon='error-icon'] {
+} .input__clearButton_t04u7 + [data-addon='error-icon'] {
     display: var(--input-error-icon-display);
 }

package/input/components/clear-button/inverted.css

@@ -32,10 +32,10 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__clearIcon_1rah8 {
+} .input__clearIcon_1p05g {
     color: var(--color-light-neutral-translucent-500-inverted)
-} .input__clearIcon_1rah8:hover {
+} .input__clearIcon_1p05g:hover {
         color: var(--color-light-neutral-translucent-500-inverted-hover);
-    } .input__clearIcon_1rah8:active {
+    } .input__clearIcon_1p05g:active {
         color: var(--color-light-neutral-translucent-500-inverted-press);
     }

package/input/esm/components/base-input/Component.js

@@ -9,13 +9,13 @@ import { ClearButton } from '../clear-button/Component.js';
 import '../../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 
-var defaultColors = {"input":"input__input_100nw","hasInnerLabel":"input__hasInnerLabel_100nw","disableUserInput":"input__disableUserInput_100nw","error":"input__error_100nw"};
+var defaultColors = {"input":"input__input_xqc49","hasInnerLabel":"input__hasInnerLabel_xqc49","disableUserInput":"input__disableUserInput_xqc49","error":"input__error_xqc49"};
 require('./default.css');
 
-var styles = {"input":"input__input_1k0le","hasInnerLabel":"input__hasInnerLabel_1k0le","size-48":"input__size-48_1k0le","size-56":"input__size-56_1k0le","size-64":"input__size-64_1k0le","size-72":"input__size-72_1k0le","block":"input__block_1k0le","errorIcon":"input__errorIcon_1k0le","successIcon":"input__successIcon_1k0le","focusVisible":"input__focusVisible_1k0le","onautofillstart":"input__onautofillstart_1k0le","onautofillcancel":"input__onautofillcancel_1k0le"};
+var styles = {"input":"input__input_yrkwo","hasInnerLabel":"input__hasInnerLabel_yrkwo","size-48":"input__size-48_yrkwo","size-56":"input__size-56_yrkwo","size-64":"input__size-64_yrkwo","size-72":"input__size-72_yrkwo","block":"input__block_yrkwo","errorIcon":"input__errorIcon_yrkwo","successIcon":"input__successIcon_yrkwo","focusVisible":"input__focusVisible_yrkwo","onautofillstart":"input__onautofillstart_yrkwo","onautofillcancel":"input__onautofillcancel_yrkwo"};
 require('./index.css');
 
-var invertedColors = {"input":"input__input_ta9aj","hasInnerLabel":"input__hasInnerLabel_ta9aj","disableUserInput":"input__disableUserInput_ta9aj","error":"input__error_ta9aj"};
+var invertedColors = {"input":"input__input_qzxi6","hasInnerLabel":"input__hasInnerLabel_qzxi6","disableUserInput":"input__disableUserInput_qzxi6","error":"input__error_qzxi6"};
 require('./inverted.css');
 
 var colorCommonStyles = {

package/input/esm/components/base-input/default.css

@@ -41,26 +41,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_100nw {
+} .input__input_xqc49 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_100nw:-webkit-autofill {
+} .input__input_xqc49:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .input__input_100nw::placeholder {
+} .input__input_xqc49::placeholder {
     color: var(--input-placeholder-color);
-} .input__hasInnerLabel_100nw::placeholder {
+} .input__hasInnerLabel_xqc49::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .input__input_100nw:read-only:not(.input__disableUserInput_100nw) {
+} /* READ-ONLY STATE */ .input__input_xqc49:read-only:not(.input__disableUserInput_xqc49) {
     color: var(--input-read-only-color)
-} .input__input_100nw:read-only:not(.input__disableUserInput_100nw):focus::placeholder {
+} .input__input_xqc49:read-only:not(.input__disableUserInput_xqc49):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .input__input_100nw:disabled {
+    } /* DISABLED STATE */ .input__input_xqc49:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .input__input_100nw:focus::placeholder {
+} /* FOCUS STATE */ .input__input_xqc49:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_100nw {
+} /* ERROR STATE */ .input__error_xqc49 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }