@ozen-ui/kit 0.39.0 → 0.41.0

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 (35) hide show
  1. package/__inner__/cjs/components/ButtonNext/Button.css +32 -25
  2. package/__inner__/cjs/components/FieldControl/FieldControl.css +25 -19
  3. package/__inner__/cjs/components/FieldLabel/FieldLabel.css +6 -6
  4. package/__inner__/cjs/components/Fieldset/Fieldset.css +1 -1
  5. package/__inner__/cjs/components/FilePicker/FilePicker.css +38 -98
  6. package/__inner__/cjs/components/FilePicker/FilePicker.d.ts +69 -1
  7. package/__inner__/cjs/components/FilePicker/FilePicker.js +26 -25
  8. package/__inner__/cjs/components/FilePicker/types.d.ts +16 -7
  9. package/__inner__/cjs/components/IconButtonNext/IconButton.css +14 -1
  10. package/__inner__/cjs/components/Input/Input.css +2 -2
  11. package/__inner__/cjs/components/InputNumber/InputNumber.css +2 -2
  12. package/__inner__/cjs/components/Select/Select.css +2 -2
  13. package/__inner__/cjs/components/Textarea/Textarea.css +2 -2
  14. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +25 -25
  15. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +30 -30
  16. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css +25 -25
  17. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css +25 -25
  18. package/__inner__/esm/components/ButtonNext/Button.css +32 -25
  19. package/__inner__/esm/components/FieldControl/FieldControl.css +25 -19
  20. package/__inner__/esm/components/FieldLabel/FieldLabel.css +6 -6
  21. package/__inner__/esm/components/Fieldset/Fieldset.css +1 -1
  22. package/__inner__/esm/components/FilePicker/FilePicker.css +38 -98
  23. package/__inner__/esm/components/FilePicker/FilePicker.d.ts +69 -1
  24. package/__inner__/esm/components/FilePicker/FilePicker.js +26 -25
  25. package/__inner__/esm/components/FilePicker/types.d.ts +16 -7
  26. package/__inner__/esm/components/IconButtonNext/IconButton.css +14 -1
  27. package/__inner__/esm/components/Input/Input.css +2 -2
  28. package/__inner__/esm/components/InputNumber/InputNumber.css +2 -2
  29. package/__inner__/esm/components/Select/Select.css +2 -2
  30. package/__inner__/esm/components/Textarea/Textarea.css +2 -2
  31. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +25 -25
  32. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +30 -30
  33. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css +25 -25
  34. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css +25 -25
  35. package/package.json +4 -4
package/__inner__/cjs/components/FilePicker/FilePicker.js CHANGED
@@ -5,26 +5,33 @@ var tslib_1 = require("tslib");
5
5
  require("./FilePicker.css");
6
6
  var react_1 = tslib_1.__importStar(require("react"));
7
7
  var icons_1 = require("@ozen-ui/icons");
8
+ var logger_1 = require("@ozen-ui/logger");
8
9
  var useMultiRef_1 = require("../../hooks/useMultiRef");
9
10
  var useThemeProps_1 = require("../../hooks/useThemeProps");
10
11
  var classname_1 = require("../../utils/classname");
11
12
  var isKey_1 = require("../../utils/isKey");
13
+ var FieldControl_1 = require("../FieldControl");
12
14
  var FieldHint_1 = require("../FieldHint");
13
15
  var FieldIcon_1 = require("../FieldIcon");
14
16
  var FieldLabel_1 = require("../FieldLabel");
15
17
  var Fieldset_1 = require("../Fieldset");
16
- var IconButton_1 = require("../IconButton");
18
+ var IconButtonNext_1 = require("../IconButtonNext");
17
19
  var constants_1 = require("./constants");
18
20
  exports.cnFilePicker = (0, classname_1.cn)('FilePicker');
19
21
  exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
20
22
  var _a = (0, useThemeProps_1.useThemeProps)({
21
23
  props: inProps,
22
24
  name: 'FilePicker',
23
- }), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRefProp = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, labelRef = _a.labelRef, className = _a.className, other = tslib_1.__rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "labelRef", "className"]);
24
- var fieldRef = (0, react_1.useRef)(null);
25
- var inputRef = (0, react_1.useRef)(null);
26
- var clearRef = (0, react_1.useRef)(null);
25
+ }), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRef = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, labelRef = _a.labelRef, className = _a.className, other = tslib_1.__rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "labelRef", "className"]);
26
+ if (process.env.NODE_ENV !== 'production' && labelRef) {
27
+ (0, logger_1.deprecate)('Свойство «labelRef» устарело. Для замены используйте «labelProps.ref».');
28
+ }
29
+ if (process.env.NODE_ENV !== 'production' && inputRef) {
30
+ (0, logger_1.deprecate)('Свойство «inputRef» устарело. Для замены используйте «inputProps.ref».');
31
+ }
32
+ var inputInnerRef = (0, react_1.useRef)(null);
27
33
  var _j = tslib_1.__read((0, react_1.useState)(false), 2), focused = _j[0], setFocused = _j[1];
34
+ var hasFiles = !!(fileList === null || fileList === void 0 ? void 0 : fileList.length);
28
35
  var handleFocus = function (e) {
29
36
  var _a;
30
37
  (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
@@ -37,8 +44,8 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
37
44
  };
38
45
  var onChange = function (e) {
39
46
  onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
40
- if (inputRef.current) {
41
- inputRef.current.value = '';
47
+ if (inputInnerRef.current) {
48
+ inputInnerRef.current.value = '';
42
49
  }
43
50
  };
44
51
  var onClear = function (e) {
@@ -55,25 +62,19 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
55
62
  ? renderValueProp(file)
56
63
  : (0, constants_1.FILE_PICKER_DEFAULT_VALUE_RENDERER)(file, disableTruncate);
57
64
  };
58
- return (react_1.default.createElement("div", tslib_1.__assign({}, other, { className: (0, exports.cnFilePicker)('', {
59
- hasLabel: !!label,
60
- hasValue: !!(fileList === null || fileList === void 0 ? void 0 : fileList.length),
61
- size: size,
62
- error: error,
63
- focused: focused,
64
- disabled: disabled,
65
- required: required,
66
- fullWidth: fullWidth,
67
- }, [className]), ref: (0, useMultiRef_1.useMultiRef)([fieldRef, ref]) }),
65
+ return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth, filled: hasFiles }, other, { className: (0, exports.cnFilePicker)('', [className]), ref: ref }),
68
66
  react_1.default.createElement("label", { className: (0, exports.cnFilePicker)('Body') },
69
- react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnFilePicker)('RenderLeft'), icon: renderLeft, size: size }),
67
+ react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
70
68
  react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('FieldContainer') },
71
- label && (react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: !!(fileList === null || fileList === void 0 ? void 0 : fileList.length), focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnFilePicker)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
72
- react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, onFocus: handleFocus, onBlur: handleBlur, className: (0, exports.cnFilePicker)('Input'), required: required, disabled: disabled, accept: accept, multiple: multiple }, inputProps, { onChange: onChange, onKeyDown: onKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputRef, inputRefProp]), type: "file" })),
73
- (fileList === null || fileList === void 0 ? void 0 : fileList.length) ? (react_1.default.createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1.default.createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
74
- !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && onClearProp && (react_1.default.createElement(IconButton_1.IconButton, { tabIndex: -1, variant: "function", "aria-label": clearText, ref: clearRef, onClick: onClear, size: size, icon: icons_1.CrossIcon })),
75
- react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnFilePicker)('RenderRight'), icon: renderRight, size: size }),
76
- react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnFilePicker)('Fieldset') })),
77
- react_1.default.createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
69
+ react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: (0, exports.cnFilePicker)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
70
+ react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: (0, exports.cnFilePicker)('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
71
+ hasFiles ? (react_1.default.createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1.default.createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
72
+ react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('RenderRight') },
73
+ onClearProp && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, icon: icons_1.CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: (0, exports.cnFilePicker)('ClearButton', {
74
+ visibility: hasFiles,
75
+ }) })),
76
+ react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight })),
77
+ react_1.default.createElement(Fieldset_1.Fieldset, null)),
78
+ react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
78
79
  });
79
80
  exports.FilePicker.displayName = 'FilePicker';
package/__inner__/cjs/components/FilePicker/types.d.ts CHANGED
@@ -1,11 +1,23 @@
1
- import type { Ref, HTMLAttributes, InputHTMLAttributes, MouseEvent, KeyboardEvent, ChangeEventHandler, ReactNode } from 'react';
1
+ import type { Ref, HTMLAttributes, MouseEvent, KeyboardEvent, ChangeEventHandler, ReactNode, ComponentPropsWithRef } from 'react';
2
2
  import type { ExtendableProps } from '../../types/ExtendableProps';
3
3
  import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
4
4
  import type { FieldIconProps } from '../FieldIcon';
5
5
  import type { FieldLabelProps } from '../FieldLabel';
6
6
  export type FilePickerSizeVariant = FormElementSizeVariant;
7
7
  export type FilePickerRenderValue = (value: File[]) => ReactNode | null;
8
- type InputElement = InputHTMLAttributes<HTMLInputElement>;
8
+ type InputElement = ComponentPropsWithRef<'input'>;
9
+ type FilePickerPropsDeprecated = {
10
+ /**
11
+ * Ссылка на FieldLabel
12
+ * @deprecated Используйте labelProps.ref
13
+ * */
14
+ labelRef?: FieldLabelProps['ref'];
15
+ /**
16
+ * Ссылка на элемент input
17
+ * @deprecated Используйте inputProps.ref
18
+ * */
19
+ inputRef?: Ref<HTMLInputElement>;
20
+ };
9
21
  export type FilePickerBaseProps = {
10
22
  /** Атрибут id для элемента input */
11
23
  id?: string;
@@ -33,8 +45,6 @@ export type FilePickerBaseProps = {
33
45
  inputProps?: InputElement & {
34
46
  'data-testid'?: string;
35
47
  };
36
- /** Ссылка на элемент input */
37
- inputRef?: Ref<HTMLInputElement>;
38
48
  /** Если {true} отключает сокращение длинного названия файла */
39
49
  disableTruncate?: boolean;
40
50
  /** Если {true} делает элемент обязательным к заполнению */
@@ -51,8 +61,6 @@ export type FilePickerBaseProps = {
51
61
  disabled?: boolean;
52
62
  /** Свойства FieldLabel */
53
63
  labelProps?: FieldLabelProps;
54
- /** Ссылка на FieldLabel */
55
- labelRef?: FieldLabelProps['ref'];
56
64
  /** Функция */
57
65
  renderValue?: FilePickerRenderValue;
58
66
  /** Текст для кнопки очистки поля */
@@ -63,7 +71,8 @@ export type FilePickerBaseProps = {
63
71
  }) => void;
64
72
  /** Дополнительные css-классы */
65
73
  className?: string;
74
+ /** data-атрибут для тестирования */
66
75
  'data-testid'?: string;
67
- };
76
+ } & FilePickerPropsDeprecated;
68
77
  export type FilePickerProps = ExtendableProps<HTMLAttributes<HTMLDivElement>, FilePickerBaseProps>;
69
78
  export {};
package/__inner__/cjs/components/IconButtonNext/IconButton.css CHANGED
@@ -71,6 +71,7 @@
71
71
  --icon-button-bg-color: var(--color-background-action);
72
72
  --icon-button-bg-color-hover: var(--color-background-action-hover);
73
73
  --icon-button-bg-color-active: var(--color-background-action-pressed);
74
+ --icon-button-bg-color-focus: var(--color-background-action-hover);
74
75
  --icon-button-font-color: var(--color-content-action-on);
75
76
  --icon-button-font-color-hover: var(--color-content-action-on);
76
77
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -83,6 +84,7 @@
83
84
  --icon-button-bg-color-active: var(
84
85
  --color-content-action-secondary-pressed
85
86
  );
87
+ --icon-button-bg-color-focus: var(--color-content-action-secondary-hover);
86
88
  --icon-button-font-color: var(--color-content-action-on);
87
89
  --icon-button-font-color-hover: var(--color-content-action-on);
88
90
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -93,6 +95,7 @@
93
95
  --icon-button-bg-color: var(--color-background-tertiary);
94
96
  --icon-button-bg-color-hover: var(--color-background-tertiary-hover);
95
97
  --icon-button-bg-color-active: var(--color-background-tertiary-pressed);
98
+ --icon-button-bg-color-focus: var(--color-background-tertiary-hover);
96
99
  --icon-button-font-color: var(--color-content-primary);
97
100
  --icon-button-font-color-hover: var(--color-content-primary);
98
101
  --icon-button-font-color-active: var(--color-content-primary);
@@ -103,6 +106,7 @@
103
106
  --icon-button-bg-color: var(--color-background-error);
104
107
  --icon-button-bg-color-hover: var(--color-background-error-hover);
105
108
  --icon-button-bg-color-active: var(--color-background-error-pressed);
109
+ --icon-button-bg-color-focus: var(--color-background-error-hover);
106
110
  --icon-button-font-color: var(--color-content-action-on);
107
111
  --icon-button-font-color-hover: var(--color-content-action-on);
108
112
  --icon-button-font-color-active: var(--color-content-action-on);
@@ -115,6 +119,7 @@
115
119
  --icon-button-bg-color: var(--color-background-action-light);
116
120
  --icon-button-bg-color-hover: var(--color-background-action-light-hover);
117
121
  --icon-button-bg-color-active: var(--color-background-action-light-pressed);
122
+ --icon-button-bg-color-focus: var(--color-background-action-light-hover);
118
123
  --icon-button-font-color: var(--color-content-action);
119
124
  --icon-button-font-color-hover: var(--color-content-action);
120
125
  --icon-button-font-color-active: var(--color-content-action);
@@ -125,6 +130,7 @@
125
130
  --icon-button-bg-color: var(--color-background-secondary);
126
131
  --icon-button-bg-color-hover: var(--color-background-secondary-hover);
127
132
  --icon-button-bg-color-active: var(--color-background-secondary-pressed);
133
+ --icon-button-bg-color-focus: var(--color-background-secondary-hover);
128
134
  --icon-button-font-color: var(--color-content-primary);
129
135
  --icon-button-font-color-hover: var(--color-content-primary);
130
136
  --icon-button-font-color-active: var(--color-content-primary);
@@ -135,6 +141,7 @@
135
141
  --icon-button-bg-color: var(--color-background-primary);
136
142
  --icon-button-bg-color-hover: var(--color-background-primary-hover);
137
143
  --icon-button-bg-color-active: var(--color-background-primary-pressed);
144
+ --icon-button-bg-color-focus: var(--color-background-primary-hover);
138
145
  --icon-button-font-color: var(--color-content-secondary);
139
146
  --icon-button-font-color-hover: var(--color-content-secondary);
140
147
  --icon-button-font-color-active: var(--color-content-secondary);
@@ -145,6 +152,7 @@
145
152
  --icon-button-bg-color: var(--color-background-error-light);
146
153
  --icon-button-bg-color-hover: var(--color-background-error-light-hover);
147
154
  --icon-button-bg-color-active: var(--color-background-error-light-pressed);
155
+ --icon-button-bg-color-focus: var(--color-background-error-light-hover);
148
156
  --icon-button-font-color: var(--color-content-error);
149
157
  --icon-button-font-color-hover: var(--color-content-error);
150
158
  --icon-button-font-color-active: var(--color-content-error);
@@ -157,6 +165,7 @@
157
165
  --icon-button-bg-color: transparent;
158
166
  --icon-button-bg-color-hover: var(--color-background-action-light-hover);
159
167
  --icon-button-bg-color-active: var(--color-background-action-light-pressed);
168
+ --icon-button-bg-color-focus: var(--color-background-action-light-hover);
160
169
  --icon-button-font-color: var(--color-content-action);
161
170
  --icon-button-font-color-hover: var(--color-content-action);
162
171
  --icon-button-font-color-active: var(--color-content-action);
@@ -167,6 +176,7 @@
167
176
  --icon-button-bg-color: transparent;
168
177
  --icon-button-bg-color-hover: var(--color-background-secondary-hover);
169
178
  --icon-button-bg-color-active: var(--color-background-secondary-pressed);
179
+ --icon-button-bg-color-focus: var(--color-background-secondary-hover);
170
180
  --icon-button-font-color: var(--color-content-primary);
171
181
  --icon-button-font-color-hover: var(--color-content-primary);
172
182
  --icon-button-font-color-active: var(--color-content-primary);
@@ -177,6 +187,7 @@
177
187
  --icon-button-bg-color: transparent;
178
188
  --icon-button-bg-color-hover: var(--color-background-primary-hover);
179
189
  --icon-button-bg-color-active: var(--color-background-primary-pressed);
190
+ --icon-button-bg-color-focus: var(--color-background-primary-hover);
180
191
  --icon-button-font-color: var(--color-content-secondary);
181
192
  --icon-button-font-color-hover: var(--color-content-secondary);
182
193
  --icon-button-font-color-active: var(--color-content-secondary);
@@ -187,6 +198,7 @@
187
198
  --icon-button-bg-color: transparent;
188
199
  --icon-button-bg-color-hover: var(--color-background-error-light-hover);
189
200
  --icon-button-bg-color-active: var(--color-background-error-light-pressed);
201
+ --icon-button-bg-color-focus: var(--color-background-error-light-hover);
190
202
  --icon-button-font-color: var(--color-content-error);
191
203
  --icon-button-font-color-hover: var(--color-content-error);
192
204
  --icon-button-font-color-active: var(--color-content-error);
@@ -269,7 +281,7 @@
269
281
  border-radius: 50%;
270
282
  }
271
283
 
272
- /** disabled */
284
+ /** disabled & loading */
273
285
 
274
286
  .IconButtonNext_variant_contained.IconButtonNext_disabled,
275
287
  .IconButtonNext_variant_contained.IconButtonNext_loading,
@@ -321,6 +333,7 @@
321
333
  /* the bug in outline property before chrome version 94 – doesn't repeat radius of an element */
322
334
  box-shadow: var(--shadow-outline-focused);
323
335
  color: var(--icon-button-font-color-focus);
336
+ background-color: var(--icon-button-bg-color-focus);
324
337
  }
325
338
 
326
339
  .IconButtonNext:focus:not(:focus-visible) {
package/__inner__/cjs/components/Input/Input.css CHANGED
@@ -9,7 +9,7 @@
9
9
  background-color: var(--textfield-background-color);
10
10
  transition: background-color var(--transition-slow);
11
11
  color: var(--textfield-color);
12
- border-radius: var(--border-radius-xs);
12
+ border-radius: var(--textfield-border-radius);
13
13
  }
14
14
  .Input-FieldContainer {
15
15
  inline-size: 100%;
@@ -29,7 +29,7 @@
29
29
  }
30
30
  .Input-Field::placeholder {
31
31
  opacity: 1;
32
- color: var(--color-content-tertiary);
32
+ color: var(--textfield-placeholder-color);
33
33
  }
34
34
  .Input-Field:-webkit-autofill,
35
35
  .Input-Field:-webkit-autofill:hover,
package/__inner__/cjs/components/InputNumber/InputNumber.css CHANGED
@@ -41,7 +41,7 @@
41
41
  color: var(--textfield-color);
42
42
  -moz-column-gap: var(--textfield-input-gap);
43
43
  column-gap: var(--textfield-input-gap);
44
- border-radius: var(--border-radius-xs);
44
+ border-radius: var(--textfield-border-radius);
45
45
  padding: var(--input-number-padding);
46
46
  background-color: var(--textfield-background-color);
47
47
  transition: background-color var(--transition-slow);
@@ -70,7 +70,7 @@
70
70
 
71
71
  .InputNumber-Field::placeholder {
72
72
  opacity: 1;
73
- color: var(--color-content-tertiary);
73
+ color: var(--textfield-placeholder-color);
74
74
  }
75
75
 
76
76
  .InputNumber-Field:-webkit-autofill,
package/__inner__/cjs/components/Select/Select.css CHANGED
@@ -23,7 +23,7 @@
23
23
  transition: background-color var(--transition-slow);
24
24
  padding: 0 var(--textfield-gutter-x);
25
25
  color: var(--textfield-color);
26
- border-radius: var(--border-radius-xs);
26
+ border-radius: var(--textfield-border-radius);
27
27
  cursor: pointer;
28
28
  outline: none;
29
29
  }
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  .Select-Field_asPlaceholder {
57
- color: var(--color-content-tertiary);
57
+ color: var(--textfield-placeholder-color);
58
58
  }
59
59
 
60
60
  .Select_multiline .Select-FieldContainer {
package/__inner__/cjs/components/Textarea/Textarea.css CHANGED
@@ -23,7 +23,7 @@
23
23
  background-color: var(--textfield-background-color);
24
24
  transition: background-color var(--transition-slow);
25
25
  color: var(--textfield-color);
26
- border-radius: var(--border-radius-xs);
26
+ border-radius: var(--textfield-border-radius);
27
27
  min-block-size: inherit;
28
28
  block-size: inherit;
29
29
  padding: var(--textfield-input-padding);
@@ -78,7 +78,7 @@
78
78
 
79
79
  .Textarea-Field::placeholder {
80
80
  opacity: 1;
81
- color: var(--color-content-tertiary);
81
+ color: var(--textfield-placeholder-color);
82
82
  }
83
83
 
84
84
  .Textarea-Counter {
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-content-secondary: #aeb1c4;
4
4
  --color-content-primary: #fff;
5
5
  --color-content-tertiary: #7e8194;
6
- --color-content-disabled: #7e8194;
6
+ --color-content-disabled: #636574;
7
7
  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
8
8
  --color-content-action: #023dff;
9
9
  --color-content-action-hover: #0534d0;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css CHANGED
@@ -47,7 +47,7 @@
47
47
  --color-background-tertiary: #d7d8e1;
48
48
  --color-background-tertiary-hover: #c2c5d3;
49
49
  --color-background-tertiary-pressed: #aeb1c4;
50
- --color-background-disabled: #d7d8e1;
50
+ --color-background-disabled: #ebecf0;
51
51
  --color-background-action: #023dff;
52
52
  --color-background-action-hover: #0534d0;
53
53
  --color-background-action-pressed: #082ba0;
@@ -55,9 +55,9 @@
55
55
  --color-background-action-light: #d9e2ff;
56
56
  --color-background-action-light-hover: #ccd8ff;
57
57
  --color-background-action-light-pressed: #9ab1ff;
58
- --color-background-accent-action-light: #0534d0;
59
- --color-background-accent-action-light-hover: #082ba0;
60
- --color-background-accent-action-light-pressed: #0a2171;
58
+ --color-background-accent-action-light: #082ba0;
59
+ --color-background-accent-action-light-hover: #0a2171;
60
+ --color-background-accent-action-light-pressed: #0d1841;
61
61
  --color-background-action-secondary: #2c2c33;
62
62
  --color-background-action-secondary-hover: #1e1d22;
63
63
  --color-background-action-secondary-pressed: #17161a;
@@ -116,7 +116,7 @@
116
116
  --color-border-secondary: #d7d8e1;
117
117
  --color-border-secondary-hover: #c2c5d3;
118
118
  --color-border-secondary-pressed: #aeb1c4;
119
- --color-border-disabled: #c2c5d3;
119
+ --color-border-disabled: #d7d8e1;
120
120
  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
121
  --color-border-focused: #9ab1ff;
122
122
  --color-border-action: #023dff;
@@ -144,29 +144,29 @@
144
144
  --color-accent-tertiary-hover: #393c4d;
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
- --color-accent-main-inverse: #d9dade;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
147
+ --color-accent-main-inverse: #c7c8ce;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-content-secondary: #aeb1c4;
4
4
  --color-content-primary: #fff;
5
5
  --color-content-tertiary: #7e8194;
6
- --color-content-disabled: #7e8194;
6
+ --color-content-disabled: #636574;
7
7
  --color-content-ghost-disabled: rgb(255 255 255 / 40%);
8
8
  --color-content-action: #0b0;
9
9
  --color-content-action-hover: #039904;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }
package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css CHANGED
@@ -116,7 +116,7 @@
116
116
  --color-border-secondary: #d7d8e1;
117
117
  --color-border-secondary-hover: #c2c5d3;
118
118
  --color-border-secondary-pressed: #aeb1c4;
119
- --color-border-disabled: #d7d8e1;
119
+ --color-border-disabled: #c2c5d3;
120
120
  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
121
  --color-border-focused: #99e499;
122
122
  --color-border-action: #0b0;
@@ -145,28 +145,28 @@
145
145
  --color-accent-tertiary-pressed: #43475b;
146
146
  --color-accent-disabled: #2f3240;
147
147
  --color-accent-main-inverse: #c7c8ce;
148
- --color-additional-a1: #0b6abe;
149
- --color-additional-a2: #1899e9;
150
- --color-additional-a3: #b3f1ff;
151
- --color-additional-b1: #b5215f;
152
- --color-additional-b2: #e62d73;
153
- --color-additional-b3: #ffb5cd;
154
- --color-additional-c1: #e64920;
155
- --color-additional-c2: #f46c1b;
156
- --color-additional-c3: #ffe2a8;
157
- --color-additional-d1: #ff8e00;
158
- --color-additional-d2: #ffc100;
159
- --color-additional-d3: #fff9a2;
160
- --color-additional-e1: #771db4;
161
- --color-additional-e2: #a02be5;
162
- --color-additional-e3: #e9b7fe;
163
- --color-additional-f1: #107c60;
164
- --color-additional-f2: #17ae87;
165
- --color-additional-f3: #abeada;
166
- --color-additional-g1: #b88f27;
167
- --color-additional-g2: #e0b548;
168
- --color-additional-g3: #f4d37d;
169
- --color-additional-h1: #747e89;
170
- --color-additional-h2: #bdc4cb;
171
- --color-additional-h3: #e1e4e7;
148
+ --color-additional-a1: #866c47;
149
+ --color-additional-a2: #d4aa6b;
150
+ --color-additional-a3: #eeddc4;
151
+ --color-additional-b1: #763986;
152
+ --color-additional-b2: #ba55d3;
153
+ --color-additional-b3: #e3bbed;
154
+ --color-additional-c1: #638125;
155
+ --color-additional-c2: #9acd32;
156
+ --color-additional-c3: #d7ebad;
157
+ --color-additional-d1: #23867f;
158
+ --color-additional-d2: #30d5c8;
159
+ --color-additional-d3: #aceee9;
160
+ --color-additional-e1: #9f5237;
161
+ --color-additional-e2: #ff7f50;
162
+ --color-additional-e3: #ffccb9;
163
+ --color-additional-f1: #1966a0;
164
+ --color-additional-f2: #1fa1ff;
165
+ --color-additional-f3: #a5d9ff;
166
+ --color-additional-g1: #9a4270;
167
+ --color-additional-g2: #f664af;
168
+ --color-additional-g3: #fbc1df;
169
+ --color-additional-h1: #9f891a;
170
+ --color-additional-h2: #ffda1f;
171
+ --color-additional-h3: #fff0a5;
172
172
  }