@alfalab/core-components 34.0.1-beta.0 → 35.0.0

package/filter-tag/index.js

@@ -2,12 +2,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 require('react');
+require('classnames');
 require('@alfalab/hooks');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('@alfalab/icons-glyph/CrossCircleMIcon');
 require('@alfalab/icons-glyph/CrossCircleSIcon');
-require('classnames');
 
 
 

package/filter-tag/modern/Component.js

@@ -1,10 +1,10 @@
 import React, { forwardRef, useRef } from 'react';
+import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
-import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
-import cn from 'classnames';
 
 var styles = {"component":"filter-tag__component_1278b","disabled":"filter-tag__disabled_1278b","defaultVariant":"filter-tag__defaultVariant_1278b","alt":"filter-tag__alt_1278b","checked":"filter-tag__checked_1278b","xxs":"filter-tag__xxs_1278b","xs":"filter-tag__xs_1278b","s":"filter-tag__s_1278b","focused":"filter-tag__focused_1278b","chevron":"filter-tag__chevron_1278b","valueButton":"filter-tag__valueButton_1278b","open":"filter-tag__open_1278b","clear":"filter-tag__clear_1278b","iconWrapper":"filter-tag__iconWrapper_1278b"};
 require('./index.css');
@@ -26,12 +26,12 @@ const FilterTag = forwardRef(({ children, checked, disabled, open, onClick, size
     const variantClassName = variant === 'default' ? 'defaultVariant' : variant;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", Object.assign({ className: cn(className, [styles.component], styles[variantClassName], styles[size], {
+    React.createElement("div", { className: cn(className, [styles.component], styles[variantClassName], styles[size], {
             [styles.checked]: checked,
             [styles.disabled]: disabled,
             [styles.focused]: focused,
             [styles.open]: open,
-        }), ref: ref, "data-test-id": dataTestId, onClick: disabled ? undefined : onClick }, restProps),
+        }), ref: ref, "data-test-id": dataTestId, onClick: disabled ? undefined : onClick, ...restProps },
         React.createElement("button", { type: 'button', ref: valueRef, disabled: disabled, className: cn(styles.valueButton, styles[size], styles[variantClassName], {
                 [styles.checked]: checked,
                 [styles.open]: open,

package/filter-tag/modern/index.js

@@ -1,8 +1,8 @@
 import 'react';
+import 'classnames';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
-import 'classnames';
 export { FilterTag } from './Component.js';

package/form-control/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { ReactNode, HTMLAttributes } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 type FormControlProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Растягивает компонент на ширину контейнера
@@ -18,6 +18,10 @@ type FormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Заблокированное состояние
      */
     disabled?: boolean;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean;
     /**
      * Заполненное состояние
      */
@@ -96,6 +100,10 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
      * Заблокированное состояние
      */
     disabled?: boolean | undefined;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean | undefined;
     /**
      * Заполненное состояние
      */
@@ -107,15 +115,15 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
     /**
      * Отображение ошибки
      */
-    error?: React.ReactNode;
+    error?: ReactNode | boolean;
     /**
      * Текст подсказки
      */
-    hint?: React.ReactNode;
+    hint?: ReactNode;
     /**
      * Лейбл компонента
      */
-    label?: React.ReactNode;
+    label?: ReactNode;
     /**
      * Вид лейбла внутри / снаружи
      */
@@ -123,15 +131,15 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
     /**
      * Слот слева
      */
-    leftAddons?: React.ReactNode;
+    leftAddons?: ReactNode;
     /**
      * Слот справа
      */
-    rightAddons?: React.ReactNode;
+    rightAddons?: ReactNode;
     /**
      * Слот под полем
      */
-    bottomAddons?: React.ReactNode;
+    bottomAddons?: ReactNode;
     /**
      * Дополнительный класс
      */
@@ -155,6 +163,6 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
     /**
      * Компонент поля (инпут, textarea и пр.)
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export { FormControlProps, FormControl };

package/form-control/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -47,12 +47,12 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"form-control__component_5m2hu","inner":"form-control__inner_5m2hu","inputWrapper":"form-control__inputWrapper_5m2hu","input":"form-control__input_5m2hu","label":"form-control__label_5m2hu","labelInner":"form-control__labelInner_5m2hu","addons":"form-control__addons_5m2hu","leftAddons":"form-control__leftAddons_5m2hu","rightAddons":"form-control__rightAddons_5m2hu","sub":"form-control__sub_5m2hu","above":"form-control__above_5m2hu","block":"form-control__block_5m2hu","s":"form-control__s_5m2hu","hasInnerLabel":"form-control__hasInnerLabel_5m2hu","m":"form-control__m_5m2hu","l":"form-control__l_5m2hu","xl":"form-control__xl_5m2hu","hasLeftAddons":"form-control__hasLeftAddons_5m2hu","hasRightAddons":"form-control__hasRightAddons_5m2hu","disabled":"form-control__disabled_5m2hu","focused":"form-control__focused_5m2hu","hasError":"form-control__hasError_5m2hu","filled":"form-control__filled_5m2hu","hiddenLabel":"form-control__hiddenLabel_5m2hu"};
-require('./index.css');
-
 var defaultColors = {"component":"form-control__component_tcjks","inner":"form-control__inner_tcjks","label":"form-control__label_tcjks","hint":"form-control__hint_tcjks","disabled":"form-control__disabled_tcjks","hasError":"form-control__hasError_tcjks","filled":"form-control__filled_tcjks","focused":"form-control__focused_tcjks","error":"form-control__error_tcjks"};
 require('./default.css');
 
+var styles = {"component":"form-control__component_5m2hu","inner":"form-control__inner_5m2hu","inputWrapper":"form-control__inputWrapper_5m2hu","input":"form-control__input_5m2hu","label":"form-control__label_5m2hu","labelInner":"form-control__labelInner_5m2hu","addons":"form-control__addons_5m2hu","leftAddons":"form-control__leftAddons_5m2hu","rightAddons":"form-control__rightAddons_5m2hu","sub":"form-control__sub_5m2hu","above":"form-control__above_5m2hu","block":"form-control__block_5m2hu","s":"form-control__s_5m2hu","hasInnerLabel":"form-control__hasInnerLabel_5m2hu","m":"form-control__m_5m2hu","l":"form-control__l_5m2hu","xl":"form-control__xl_5m2hu","hasLeftAddons":"form-control__hasLeftAddons_5m2hu","hasRightAddons":"form-control__hasRightAddons_5m2hu","disabled":"form-control__disabled_5m2hu","focused":"form-control__focused_5m2hu","hasError":"form-control__hasError_5m2hu","filled":"form-control__filled_5m2hu","hiddenLabel":"form-control__hiddenLabel_5m2hu"};
+require('./index.css');
+
 var invertedColors = {"component":"form-control__component_1wzoa","inner":"form-control__inner_1wzoa","label":"form-control__label_1wzoa","hint":"form-control__hint_1wzoa","disabled":"form-control__disabled_1wzoa","hasError":"form-control__hasError_1wzoa","filled":"form-control__filled_1wzoa","focused":"form-control__focused_1wzoa","error":"form-control__error_1wzoa"};
 require('./inverted.css');
 
@@ -62,7 +62,7 @@ var colorStyles = {
 };
 var FormControl = React__default['default'].forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, _g = _a.labelView, labelView = _g === void 0 ? 'inner' : _g, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
+    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, readOnly = _a.readOnly, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, _g = _a.labelView, labelView = _g === void 0 ? 'inner' : _g, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "readOnly", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default['default'].createElement("div", { "data-test-id": dataTestId, className: cn__default['default'](styles.component, colorStyles[colors].component, className, styles[size], (_b = {},
             _b[styles.block] = block,
@@ -71,8 +71,8 @@ var FormControl = React__default['default'].forwardRef(function (_a, ref) {
             _b)) },
         label && labelView === 'outer' && (React__default['default'].createElement("span", { className: cn__default['default'](styles.above, colorStyles[colors].label) }, label)),
         React__default['default'].createElement("div", __assign({}, restProps, { className: cn__default['default'](fieldClassName, styles.inner, colorStyles[colors].inner, (_c = {},
-                _c[styles.disabled] = disabled,
-                _c[colorStyles[colors].disabled] = disabled,
+                _c[styles.disabled] = disabled || readOnly,
+                _c[colorStyles[colors].disabled] = disabled || readOnly,
                 _c[styles.filled] = filled,
                 _c[colorStyles[colors].filled] = filled,
                 _c[styles.hasInnerLabel] = label && labelView === 'inner',

package/form-control/cssm/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { ReactNode, HTMLAttributes } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 type FormControlProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Растягивает компонент на ширину контейнера
@@ -18,6 +18,10 @@ type FormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Заблокированное состояние
      */
     disabled?: boolean;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean;
     /**
      * Заполненное состояние
      */
@@ -96,6 +100,10 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
      * Заблокированное состояние
      */
     disabled?: boolean | undefined;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean | undefined;
     /**
      * Заполненное состояние
      */
@@ -107,15 +115,15 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
     /**
      * Отображение ошибки
      */
-    error?: React.ReactNode;
+    error?: ReactNode | boolean;
     /**
      * Текст подсказки
      */
-    hint?: React.ReactNode;
+    hint?: ReactNode;
     /**
      * Лейбл компонента
      */
-    label?: React.ReactNode;
+    label?: ReactNode;
     /**
      * Вид лейбла внутри / снаружи
      */
@@ -123,15 +131,15 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
     /**
      * Слот слева
      */
-    leftAddons?: React.ReactNode;
+    leftAddons?: ReactNode;
     /**
      * Слот справа
      */
-    rightAddons?: React.ReactNode;
+    rightAddons?: ReactNode;
     /**
      * Слот под полем
      */
-    bottomAddons?: React.ReactNode;
+    bottomAddons?: ReactNode;
     /**
      * Дополнительный класс
      */
@@ -155,6 +163,6 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
     /**
      * Компонент поля (инпут, textarea и пр.)
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export { FormControlProps, FormControl };

package/form-control/cssm/Component.js

@@ -2,19 +2,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var styles = require('./index.module.css');
 var defaultColors = require('./default.module.css');
+var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -59,7 +59,7 @@ var colorStyles = {
 };
 var FormControl = React__default['default'].forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, _g = _a.labelView, labelView = _g === void 0 ? 'inner' : _g, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
+    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, readOnly = _a.readOnly, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, _g = _a.labelView, labelView = _g === void 0 ? 'inner' : _g, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "readOnly", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default['default'].createElement("div", { "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, colorStyles[colors].component, className, styles__default['default'][size], (_b = {},
             _b[styles__default['default'].block] = block,
@@ -68,8 +68,8 @@ var FormControl = React__default['default'].forwardRef(function (_a, ref) {
             _b)) },
         label && labelView === 'outer' && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].above, colorStyles[colors].label) }, label)),
         React__default['default'].createElement("div", __assign({}, restProps, { className: cn__default['default'](fieldClassName, styles__default['default'].inner, colorStyles[colors].inner, (_c = {},
-                _c[styles__default['default'].disabled] = disabled,
-                _c[colorStyles[colors].disabled] = disabled,
+                _c[styles__default['default'].disabled] = disabled || readOnly,
+                _c[colorStyles[colors].disabled] = disabled || readOnly,
                 _c[styles__default['default'].filled] = filled,
                 _c[colorStyles[colors].filled] = filled,
                 _c[styles__default['default'].hasInnerLabel] = label && labelView === 'inner',

package/form-control/cssm/default.module.css

@@ -1,12 +1,12 @@
 :root {
-    --color-light-border-key: #0b1f35;
-    --color-light-border-underline: #b6bcc3;
+    --color-light-bg-primary: #fff;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
+    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-    --color-static-border-accent: #ef3124;
-    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
-    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
 }
 :root {
 
@@ -17,32 +17,35 @@
     /* Hard up */
 }
 :root {
-    --form-control-border-bottom: 1px solid var(--color-light-border-underline);
-    --form-control-bg-color: var(--color-light-bg-primary-inverted-alpha-7);
+    --form-control-border-bottom: 0;
+    --form-control-bg-color: var(--color-light-specialbg-tertiary-transparent);
     --form-control-color: var(--color-light-text-primary);
     --form-control-label-color: var(--color-light-text-secondary);
     --form-control-hint-color: var(--color-light-text-secondary);
 
     /* disabled */
-    --form-control-disabled-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
-    --form-control-disabled-border-bottom: 1px dashed var(--color-light-border-underline);
+    --form-control-disabled-bg-color: var(--color-light-specialbg-secondary-transparent);
+    --form-control-disabled-border-bottom: 0;
     --form-control-disabled-color: var(--color-light-text-secondary);
     --form-control-disabled-filled-label-color: var(--form-control-disabled-color);
     --form-control-disabled-shadow: none;
 
     /* focus */
-    --form-control-focus-border-bottom: 1px solid var(--color-light-border-key);
-    --form-control-focus-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
+    --form-control-focus-shadow: inset 0 0 0 2px var(--color-light-graphic-secondary);
+    --form-control-focus-error-shadow: inset 0 0 0 2px var(--color-light-graphic-negative);
+    --form-control-focus-border-bottom: 0;
+    --form-control-focus-bg-color: var(--color-light-bg-primary);
 
     /* hover */
-    --form-control-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
+    --form-control-hover-bg-color: var(--color-light-specialbg-secondary-transparent);
 
     /* error */
     --form-control-error-color: var(--color-light-text-negative);
     --form-control-error-label-color: var(--color-light-text-secondary);
-    --form-control-error-shadow: none;
+    --form-control-error-shadow: inset 0 0 0 2px var(--color-light-graphic-negative);
     --form-control-error-disabled-shadow: var(--form-control-error-shadow);
-    --form-control-error-border-bottom: 1px solid var(--color-static-border-accent);
+    --form-control-error-border-bottom: 0;
+    --form-control-error-bg-color: var(--color-light-specialbg-secondary-transparent);
 
     /* height */
 
@@ -51,6 +54,8 @@
     /* disabled */
 
     /* font */
+
+    /* border-radius */
 }
 .component {
     color: var(--form-control-color);
@@ -76,6 +81,7 @@
 }
 .disabled.hasError {
     box-shadow: var(--form-control-error-disabled-shadow);
+    background-color: var(--form-control-disabled-bg-color);
 }
 .disabled:before {
     border-bottom: var(--form-control-disabled-border-bottom);
@@ -83,17 +89,22 @@
 .disabled.filled .label {
     color: var(--form-control-disabled-filled-label-color);
 }
+/* HOVER STATE */
+.inner:not(.disabled):hover {
+    background-color: var(--form-control-hover-bg-color);
+}
 /* FOCUS STATE */
 .focused:not(.disabled):not(.hasError):before {
     border-bottom: var(--form-control-focus-border-bottom);
 }
-.focused.inner {
+.focused.inner,
+.focused.inner:hover {
     background-color: var(--form-control-focus-bg-color);
+    box-shadow: var(--form-control-focus-shadow)
 }
-/* HOVER STATE */
-.inner:not(.disabled):hover {
-    background-color: var(--form-control-hover-bg-color);
-}
+.focused.inner.hasError, .focused.inner:hover.hasError {
+        box-shadow: var(--form-control-focus-error-shadow);
+    }
 /* ERROR STATE */
 .error {
     color: var(--form-control-error-color);
@@ -101,9 +112,10 @@
 .hasError .label {
     color: var(--form-control-error-label-color);
 }
-.hasError {
-    box-shadow: var(--form-control-error-shadow);
-}
 .hasError:before {
     border-bottom: var(--form-control-error-border-bottom);
 }
+.hasError {
+    box-shadow: var(--form-control-error-shadow);
+    background-color: var(--form-control-error-bg-color);
+}

package/form-control/cssm/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 require('react');
 require('classnames');
-require('./index.module.css');
 require('./default.module.css');
+require('./index.module.css');
 require('./inverted.module.css');
 
 

package/form-control/cssm/index.module.css

@@ -10,6 +10,10 @@
     --gap-s: 12px;
     --gap-m: 16px;
 }
+:root {
+    --border-radius-m: 8px;
+    --border-radius-l: 12px;
+}
 :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
@@ -33,7 +37,6 @@
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
     --form-control-xl-min-height: var(--size-xl-height);
-    --form-control-border-radius: 4px 4px 0 0;
     --form-control-bg-backdrop-filter: unset;
 
     /* paddings */
@@ -50,6 +53,12 @@
 
     /* font */
     --form-control-font-family: var(--font-family);
+
+    /* border-radius */
+    --form-control-s-border-radius: var(--border-radius-m);
+    --form-control-m-border-radius: var(--border-radius-m);
+    --form-control-l-border-radius: var(--border-radius-m);
+    --form-control-xl-border-radius: var(--border-radius-l);
 }
 .component {
     font-family: var(--form-control-font-family);
@@ -61,7 +70,6 @@
     min-height: 100%;
     -webkit-backdrop-filter: var(--form-control-bg-backdrop-filter);
             backdrop-filter: var(--form-control-bg-backdrop-filter);
-    border-radius: var(--form-control-border-radius);
     transition: background 0.2s ease, box-shadow 0.2s ease;
     box-sizing: border-box;
     outline: none;
@@ -155,6 +163,7 @@
 /* SIZES */
 .s .inner {
     min-height: var(--form-control-s-min-height);
+    border-radius: var(--form-control-s-border-radius);
 }
 .s .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-s-paddings);
@@ -164,6 +173,7 @@
 }
 .m .inner {
     min-height: var(--form-control-m-min-height);
+    border-radius: var(--form-control-m-border-radius);
 }
 .m .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-m-paddings);
@@ -173,6 +183,7 @@
 }
 .l .inner {
     min-height: var(--form-control-l-min-height);
+    border-radius: var(--form-control-l-border-radius);
 }
 .l .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-l-paddings);
@@ -182,6 +193,7 @@
 }
 .xl .inner {
     min-height: var(--form-control-xl-min-height);
+    border-radius: var(--form-control-xl-border-radius);
 }
 .xl .label {
     left: var(--gap-m);

package/form-control/cssm/inverted.module.css

@@ -1,12 +1,11 @@
 :root {
-    --color-light-border-key-inverted: #fff;
-    --color-light-border-underline-inverted: #6d7986;
-    --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.15);
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-secondary-inverted: #b6bcc3;
+    --color-light-specialbg-tertiary-transparent-inverted: rgba(255, 255, 255, 0.2);
     --color-light-text-primary-inverted: #fff;
     --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
-    --color-static-border-accent: #ef3124;
     --color-static-text-accent: #ef3124;
-    --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
 }
 :root {
 
@@ -17,18 +16,17 @@
     /* Hard up */
 }
 :root {
-    --form-control-inverted-border-bottom: 1px solid var(--color-light-border-underline-inverted);
-    --form-control-inverted-bg-color: var(--color-light-specialbg-component-inverted);
+    --form-control-inverted-border-bottom: 0;
+    --form-control-inverted-bg-color: var(--color-light-specialbg-tertiary-transparent-inverted);
     --form-control-inverted-color: var(--color-light-text-primary-inverted);
     --form-control-inverted-label-color: var(--color-light-text-secondary-inverted);
     --form-control-inverted-hint-color: var(--color-light-text-secondary-inverted);
 
     /* disabled */
     --form-control-inverted-disabled-bg-color: var(
-        --color-light-specialbg-component-inverted-tint-15
+        --color-light-specialbg-secondary-transparent-inverted
     );
-    --form-control-inverted-disabled-border-bottom: 1px dashed
-        var(--color-light-border-underline-inverted);
+    --form-control-inverted-disabled-border-bottom: 0;
     --form-control-inverted-disabled-color: var(--color-light-text-secondary-inverted);
     --form-control-inverted-disabled-filled-label-color: var(
         --form-control-inverted-disabled-color
@@ -36,18 +34,26 @@
     --form-control-inverted-disabled-shadow: none;
 
     /* focus */
-    --form-control-inverted-focus-border-bottom: 1px solid var(--color-light-border-key-inverted);
-    --form-control-inverted-focus-bg-color: var(--color-light-specialbg-component-inverted-tint-15);
+    --form-control-inverted-focus-shadow: inset 0 0 0 2px
+        var(--color-light-graphic-secondary-inverted);
+    --form-control-inverted-focus-error-shadow: inset 0 0 0 2px var(--color-light-graphic-negative);
+    --form-control-inverted-focus-border-bottom: 0;
+    --form-control-inverted-focus-bg-color: var(--color-light-bg-primary-inverted);
 
     /* hover */
-    --form-control-inverted-hover-bg-color: var(--color-light-specialbg-component-inverted-tint-15);
+    --form-control-inverted-hover-bg-color: var(
+        --color-light-specialbg-secondary-transparent-inverted
+    );
 
     /* error */
     --form-control-inverted-error-color: var(--color-static-text-accent);
     --form-control-inverted-error-label-color: var(--color-light-text-secondary-inverted);
-    --form-control-inverted-error-shadow: none;
+    --form-control-inverted-error-shadow: inset 0 0 0 2px var(--color-light-graphic-negative);
     --form-control-inverted-error-disabled-shadow: var(--form-control-inverted-error-shadow);
-    --form-control-inverted-error-border-bottom: 1px solid var(--color-static-border-accent);
+    --form-control-inverted-error-border-bottom: 0;
+    --form-control-inverted-error-bg-color: var(
+        --color-light-specialbg-secondary-transparent-inverted
+    );
 
     /* height */
 
@@ -56,6 +62,8 @@
     /* disabled */
 
     /* font */
+
+    /* border-radius */
 }
 .component {
     color: var(--form-control-inverted-color);
@@ -81,6 +89,7 @@
 }
 .disabled.hasError {
     box-shadow: var(--form-control-inverted-error-disabled-shadow);
+    background-color: var(--form-control-inverted-disabled-bg-color);
 }
 .disabled:before {
     border-bottom: var(--form-control-inverted-disabled-border-bottom);
@@ -88,17 +97,22 @@
 .disabled.filled .label {
     color: var(--form-control-inverted-disabled-filled-label-color);
 }
+/* HOVER STATE */
+.inner:not(.disabled):hover {
+    background-color: var(--form-control-inverted-hover-bg-color);
+}
 /* FOCUS STATE */
 .focused:not(.disabled):not(.hasError):before {
     border-bottom: var(--form-control-inverted-focus-border-bottom);
 }
-.focused.inner {
+.focused.inner,
+.focused.inner:hover {
     background-color: var(--form-control-inverted-focus-bg-color);
+    box-shadow: var(--form-control-inverted-focus-shadow)
 }
-/* HOVER STATE */
-.inner:not(.disabled):hover {
-    background-color: var(--form-control-inverted-hover-bg-color);
-}
+.focused.inner.hasError, .focused.inner:hover.hasError {
+        box-shadow: var(--form-control-inverted-focus-error-shadow);
+    }
 /* ERROR STATE */
 .error {
     color: var(--form-control-inverted-error-color);
@@ -106,9 +120,10 @@
 .hasError .label {
     color: var(--form-control-inverted-error-label-color);
 }
-.hasError {
-    box-shadow: var(--form-control-inverted-error-shadow);
-}
 .hasError:before {
     border-bottom: var(--form-control-inverted-error-border-bottom);
 }
+.hasError {
+    box-shadow: var(--form-control-inverted-error-shadow);
+    background-color: var(--form-control-inverted-error-bg-color);
+}

package/form-control/cssm/vars.css

@@ -23,4 +23,6 @@
     /* disabled */
 
     /* font */
+
+    /* border-radius */
 }