@itcase/ui 1.8.111 → 1.8.113

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 (12) hide show
  1. package/dist/cjs/components/Checkbox.js +27 -20
  2. package/dist/cjs/components/ModalSheetBottom.js +3 -3
  3. package/dist/cjs/components/Radio.js +1 -1
  4. package/dist/components/Checkbox.js +27 -20
  5. package/dist/components/ModalSheetBottom.js +3 -3
  6. package/dist/components/Radio.js +1 -1
  7. package/dist/css/components/Checkbox/Checkbox.css +440 -25
  8. package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css +5 -0
  9. package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts +8 -2
  10. package/dist/types/components/Radio/Radio.appearance.d.ts +1 -1
  11. package/dist/types/components/Radio/appearance/radioDefault.d.ts +1 -1
  12. package/package.json +3 -3
package/dist/cjs/components/Checkbox.js CHANGED
@@ -88,7 +88,7 @@ var checkboxAppearanceRequire = {
88
88
  fillCheckbox: 'warningTertiary',
89
89
  fillCheckboxActive: 'warningPrimary',
90
90
  fillCheckboxActiveHover: 'warningTertiary',
91
- fillCheckboxHover: 'warningTertiary',
91
+ fillCheckboxHover: 'warningSecondary',
92
92
  fillCheckmark: 'warningBorderPrimary',
93
93
  labelTextColor: 'surfaceTextPrimary',
94
94
  descTextColor: 'surfaceTextPrimary',
@@ -133,16 +133,22 @@ var checkboxAppearanceSize = {
133
133
  var checkboxAppearanceStyle = {
134
134
  solid: {
135
135
  borderColorCheckbox: 'none',
136
- borderWidth: 'none',
136
+ borderColorCheckboxActive: 'none',
137
+ borderColorCheckboxActiveHover: 'none',
138
+ borderColorCheckboxHover: 'none',
137
139
  },
138
140
  outlined: {
139
141
  fill: 'none',
142
+ fillHover: 'none',
140
143
  },
141
144
  full: {},
142
145
  ghost: {
143
146
  fill: 'none',
147
+ fillHover: 'none',
144
148
  borderColorCheckbox: 'none',
145
- borderWidth: 'none',
149
+ borderColorCheckboxActive: 'none',
150
+ borderColorCheckboxActiveHover: 'none',
151
+ borderColorCheckboxHover: 'none',
146
152
  },
147
153
  };
148
154
 
@@ -182,26 +188,27 @@ function Checkbox(props) {
182
188
  var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, indeterminate = props.indeterminate, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isChecked = props.isChecked, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
183
189
  var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
184
190
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
185
- var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, checkboxShapeClass = propsGenerator.checkboxShapeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
186
- return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), sizeClass && "checkbox_size_".concat(sizeClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', !checked
187
- ? fillCheckboxClass && "fill_".concat(fillCheckboxClass)
188
- : fillCheckboxActiveClass &&
189
- "fill_active_".concat(fillCheckboxActiveClass), !checked
190
- ? fillCheckboxHoverClass && "fill_hover_".concat(fillCheckboxHoverClass)
191
- : fillCheckboxActiveHoverClass &&
192
- "fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
193
- ? borderColorCheckboxClass &&
194
- "border-color_".concat(borderColorCheckboxClass)
195
- : borderColorCheckboxActiveClass &&
196
- "border-color_active_".concat(borderColorCheckboxActiveClass), !checked
197
- ? borderColorCheckboxHoverClass &&
198
- "border-color_hover_".concat(borderColorCheckboxHoverClass)
199
- : borderColorCheckboxActiveHoverClass &&
200
- "border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), checkboxShapeClass && "checkbox__state_shape_".concat(checkboxShapeClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
191
+ var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
192
+ return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), sizeClass && "checkbox_size_".concat(sizeClass), !checked
193
+ ? fillCheckboxClass && "checkbox_fill_".concat(fillCheckboxClass)
194
+ : fillCheckboxActiveClass &&
195
+ "checkbox_fill_active_".concat(fillCheckboxActiveClass), !checked
196
+ ? fillCheckboxHoverClass &&
197
+ "checkbox_fill_hover_".concat(fillCheckboxHoverClass)
198
+ : fillCheckboxActiveHoverClass &&
199
+ "checkbox_fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
200
+ ? borderColorCheckboxClass &&
201
+ "checkbox_border-color_".concat(borderColorCheckboxClass)
202
+ : borderColorCheckboxActiveClass &&
203
+ "checkbox_border-color_active_".concat(borderColorCheckboxActiveClass), !checked
204
+ ? borderColorCheckboxHoverClass &&
205
+ "checkbox_border-color_hover_".concat(borderColorCheckboxHoverClass)
206
+ : borderColorCheckboxActiveHoverClass &&
207
+ "checkbox_border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
201
208
  ? 'checkbox__state-checkmark'
202
209
  : 'checkbox__state-indeterminate', (checked || indeterminate) &&
203
210
  fillCheckmarkClass &&
204
- "border-color_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
211
+ "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
205
212
  }
206
213
 
207
214
  exports.Checkbox = Checkbox;
package/dist/cjs/components/ModalSheetBottom.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var React = require('react');
6
+ var clsx = require('clsx');
6
7
  var reactModalSheet = require('react-modal-sheet');
7
8
  var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
8
9
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
@@ -21,7 +22,6 @@ require('../utils/setViewportProperty.js');
21
22
  require('../hooks.js');
22
23
  require('../hooks/useStyles/styleAttributes.js');
23
24
  require('lodash/maxBy');
24
- require('clsx');
25
25
  require('react-inlinesvg');
26
26
  require('../hoc/urlWithAssetPrefix.js');
27
27
  require('../context/UrlAssetPrefix.js');
@@ -63,10 +63,10 @@ var ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
63
63
  }); }, [isOpen, openModalSheetBottom, closeModalSheetBottom]);
64
64
  var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
65
65
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
66
- var titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap;
66
+ var titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap, zeroPadding = propsGenerator.zeroPadding;
67
67
  // @ts-expect-error
68
68
  var styles = useStyles.useStyles(props).styles;
69
- return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header" }), (closeButton || title) && (jsxRuntime.jsxs("div", { className: "modal-sheet-bottom__header", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })] })), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsx("div", { className: "modal-sheet-bottom__content-wrapper", children: children }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] })));
69
+ return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header" }), (closeButton || title) && (jsxRuntime.jsxs("div", { className: "modal-sheet-bottom__header", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })] })), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: clsx('modal-sheet-bottom__content', zeroPadding && 'modal-sheet-bottom-padding'), children: jsxRuntime.jsx("div", { className: "modal-sheet-bottom__content-wrapper", children: children }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] })));
70
70
  });
71
71
 
72
72
  exports.ModalSheetBottom = ModalSheetBottom;
package/dist/cjs/components/Radio.js CHANGED
@@ -33,9 +33,9 @@ var radioAppearanceDefault = {
33
33
  descTextColor: 'surfaceTextPrimary',
34
34
  borderColor: 'surfaceBorderQuaternary',
35
35
  borderRadioColor: 'surfaceBorderQuaternary',
36
- borderRadioColorHover: 'surfaceBorderQuaternary',
37
36
  borderRadioColorActive: 'surfaceBorderQuaternary',
38
37
  borderRadioColorActiveHover: 'surfaceBorderQuaternary',
38
+ borderRadioColorHover: 'surfaceBorderQuaternary',
39
39
  shape: 'circular',
40
40
  },
41
41
  };
package/dist/components/Checkbox.js CHANGED
@@ -86,7 +86,7 @@ var checkboxAppearanceRequire = {
86
86
  fillCheckbox: 'warningTertiary',
87
87
  fillCheckboxActive: 'warningPrimary',
88
88
  fillCheckboxActiveHover: 'warningTertiary',
89
- fillCheckboxHover: 'warningTertiary',
89
+ fillCheckboxHover: 'warningSecondary',
90
90
  fillCheckmark: 'warningBorderPrimary',
91
91
  labelTextColor: 'surfaceTextPrimary',
92
92
  descTextColor: 'surfaceTextPrimary',
@@ -131,16 +131,22 @@ var checkboxAppearanceSize = {
131
131
  var checkboxAppearanceStyle = {
132
132
  solid: {
133
133
  borderColorCheckbox: 'none',
134
- borderWidth: 'none',
134
+ borderColorCheckboxActive: 'none',
135
+ borderColorCheckboxActiveHover: 'none',
136
+ borderColorCheckboxHover: 'none',
135
137
  },
136
138
  outlined: {
137
139
  fill: 'none',
140
+ fillHover: 'none',
138
141
  },
139
142
  full: {},
140
143
  ghost: {
141
144
  fill: 'none',
145
+ fillHover: 'none',
142
146
  borderColorCheckbox: 'none',
143
- borderWidth: 'none',
147
+ borderColorCheckboxActive: 'none',
148
+ borderColorCheckboxActiveHover: 'none',
149
+ borderColorCheckboxHover: 'none',
144
150
  },
145
151
  };
146
152
 
@@ -180,26 +186,27 @@ function Checkbox(props) {
180
186
  var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, indeterminate = props.indeterminate, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isChecked = props.isChecked, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
181
187
  var appearanceConfig = useAppearanceConfig(appearance, checkboxConfig, isDisabled);
182
188
  var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
183
- var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, checkboxShapeClass = propsGenerator.checkboxShapeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
184
- return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), sizeClass && "checkbox_size_".concat(sizeClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: "checkbox__item", children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', !checked
185
- ? fillCheckboxClass && "fill_".concat(fillCheckboxClass)
186
- : fillCheckboxActiveClass &&
187
- "fill_active_".concat(fillCheckboxActiveClass), !checked
188
- ? fillCheckboxHoverClass && "fill_hover_".concat(fillCheckboxHoverClass)
189
- : fillCheckboxActiveHoverClass &&
190
- "fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
191
- ? borderColorCheckboxClass &&
192
- "border-color_".concat(borderColorCheckboxClass)
193
- : borderColorCheckboxActiveClass &&
194
- "border-color_active_".concat(borderColorCheckboxActiveClass), !checked
195
- ? borderColorCheckboxHoverClass &&
196
- "border-color_hover_".concat(borderColorCheckboxHoverClass)
197
- : borderColorCheckboxActiveHoverClass &&
198
- "border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), checkboxShapeClass && "checkbox__state_shape_".concat(checkboxShapeClass)), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
189
+ var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
190
+ return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), sizeClass && "checkbox_size_".concat(sizeClass), !checked
191
+ ? fillCheckboxClass && "checkbox_fill_".concat(fillCheckboxClass)
192
+ : fillCheckboxActiveClass &&
193
+ "checkbox_fill_active_".concat(fillCheckboxActiveClass), !checked
194
+ ? fillCheckboxHoverClass &&
195
+ "checkbox_fill_hover_".concat(fillCheckboxHoverClass)
196
+ : fillCheckboxActiveHoverClass &&
197
+ "checkbox_fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
198
+ ? borderColorCheckboxClass &&
199
+ "checkbox_border-color_".concat(borderColorCheckboxClass)
200
+ : borderColorCheckboxActiveClass &&
201
+ "checkbox_border-color_active_".concat(borderColorCheckboxActiveClass), !checked
202
+ ? borderColorCheckboxHoverClass &&
203
+ "checkbox_border-color_hover_".concat(borderColorCheckboxHoverClass)
204
+ : borderColorCheckboxActiveHoverClass &&
205
+ "checkbox_border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: "checkbox__item", children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
199
206
  ? 'checkbox__state-checkmark'
200
207
  : 'checkbox__state-indeterminate', (checked || indeterminate) &&
201
208
  fillCheckmarkClass &&
202
- "border-color_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
209
+ "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
203
210
  }
204
211
 
205
212
  export { Checkbox, checkboxAppearance, checkboxConfig };
package/dist/components/ModalSheetBottom.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import React, { useState, useCallback, useImperativeHandle } from 'react';
4
+ import clsx from 'clsx';
4
5
  import { Sheet } from 'react-modal-sheet';
5
6
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
6
7
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -19,7 +20,6 @@ import '../utils/setViewportProperty.js';
19
20
  import '../hooks.js';
20
21
  import '../hooks/useStyles/styleAttributes.js';
21
22
  import 'lodash/maxBy';
22
- import 'clsx';
23
23
  import 'react-inlinesvg';
24
24
  import '../hoc/urlWithAssetPrefix.js';
25
25
  import '../context/UrlAssetPrefix.js';
@@ -61,10 +61,10 @@ var ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
61
61
  }); }, [isOpen, openModalSheetBottom, closeModalSheetBottom]);
62
62
  var appearanceConfig = useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
63
63
  var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
64
- var titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap;
64
+ var titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap, zeroPadding = propsGenerator.zeroPadding;
65
65
  // @ts-expect-error
66
66
  var styles = useStyles(props).styles;
67
- return (jsxs(Sheet, __assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsx(Sheet.Header, { className: "modal-sheet-bottom__header" }), (closeButton || title) && (jsxs("div", { className: "modal-sheet-bottom__header", children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })] })), jsx(Sheet.Content, { className: "modal-sheet-bottom__content", children: jsx("div", { className: "modal-sheet-bottom__content-wrapper", children: children }) })] }), jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] })));
67
+ return (jsxs(Sheet, __assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsx(Sheet.Header, { className: "modal-sheet-bottom__header" }), (closeButton || title) && (jsxs("div", { className: "modal-sheet-bottom__header", children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })] })), jsx(Sheet.Content, { className: clsx('modal-sheet-bottom__content', zeroPadding && 'modal-sheet-bottom-padding'), children: jsx("div", { className: "modal-sheet-bottom__content-wrapper", children: children }) })] }), jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] })));
68
68
  });
69
69
 
70
70
  export { ModalSheetBottom, modalSheetBottomAppearance };
package/dist/components/Radio.js CHANGED
@@ -31,9 +31,9 @@ var radioAppearanceDefault = {
31
31
  descTextColor: 'surfaceTextPrimary',
32
32
  borderColor: 'surfaceBorderQuaternary',
33
33
  borderRadioColor: 'surfaceBorderQuaternary',
34
- borderRadioColorHover: 'surfaceBorderQuaternary',
35
34
  borderRadioColorActive: 'surfaceBorderQuaternary',
36
35
  borderRadioColorActiveHover: 'surfaceBorderQuaternary',
36
+ borderRadioColorHover: 'surfaceBorderQuaternary',
37
37
  shape: 'circular',
38
38
  },
39
39
  };
package/dist/css/components/Checkbox/Checkbox.css CHANGED
@@ -41,14 +41,7 @@
41
41
  display: flex;
42
42
  flex: 1;
43
43
  z-index: 1;
44
- &_shape {
45
- &_rounded {
46
- border-radius: 4px;
47
- }
48
- &_circular {
49
- border-radius: 50%;
50
- }
51
- }
44
+ transition: var(--checkbox-item-transition);
52
45
  }
53
46
  ^&__state-checkmark {
54
47
  width: 5px;
@@ -116,43 +109,465 @@
116
109
  }
117
110
  }
118
111
  }
119
- .checkbox {
120
- &_shape {
121
- &_rounded {
122
- border-radius: 4px;
123
- position: relative;
124
- overflow: hidden;
112
+ .checkbox_fill {
113
+ &_active {
114
+ &_hover {
115
+ &_none {
116
+ background-color: transparent;
117
+ }
118
+ @each $type in accent, primary, secondary, surface, error, warning,
119
+ success, danger, info, disabled {
120
+ @each $color in primary, secondary, tertiary, quaternary {
121
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
122
+ &_$(type) {
123
+ &-$(color) {
124
+ &:hover {
125
+ & .checkbox__state {
126
+ background: var(--color-$(type)-fill-$(color));
127
+ }
128
+ }
129
+ &-hover {
130
+ &:hover {
131
+ & .checkbox__state {
132
+ background: var(--color-$(type)-fill-$(color)-hover);
133
+ }
134
+ }
135
+ &-active {
136
+ &:hover {
137
+ & .checkbox__state {
138
+ background: var(
139
+ --color-$(type)-fill-$(color)-active-hover
140
+ );
141
+ }
142
+ }
143
+ }
144
+ }
145
+ &-active {
146
+ &:hover {
147
+ & .checkbox__state {
148
+ background: var(--color-$(type)-fill-$(color)-active);
149
+ }
150
+ }
151
+ }
152
+ }
153
+ &-hover {
154
+ &-$(color) {
155
+ &:hover {
156
+ & .checkbox__state {
157
+ background: var(--color-$(type)-fill-hover-$(color));
158
+ }
159
+ }
160
+ }
161
+ }
162
+ }
163
+
164
+ /* } */
165
+ }
166
+ }
167
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
168
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
169
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
170
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
171
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
172
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
173
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
174
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
175
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
176
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
177
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
178
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
179
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
180
+ &_$(palette) {
181
+ &:hover {
182
+ & .checkbox__state {
183
+ background: var(--color-palette-$(palette));
184
+ }
185
+ }
186
+ }
187
+ }
188
+ }
189
+ }
190
+ }
191
+ .checkbox_fill {
192
+ &_active {
193
+ &_none {
194
+ background-color: transparent;
195
+ }
196
+ @each $type in accent, primary, secondary, surface, error, warning, success,
197
+ danger, info, disabled {
198
+ @each $color in primary, secondary, tertiary, quaternary {
199
+ &_$(type) {
200
+ &-$(color) {
201
+ & .checkbox__state {
202
+ background: var(--color-$(type)-fill-$(color));
203
+ }
204
+ }
205
+ &-$(color)-active {
206
+ & .checkbox__state {
207
+ background: var(--color-$(type)-fill-active-$(color));
208
+ }
209
+ }
210
+ }
211
+ }
212
+ }
213
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
214
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
215
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
216
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
217
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
218
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
219
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
220
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
221
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
222
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
223
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
224
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
225
+ alto, athens-gray, sonic-silver {
226
+ &_$(palette) {
227
+ & .checkbox__state {
228
+ background: var(--color-palette-$(palette));
229
+ }
230
+ }
231
+ }
232
+ }
233
+ }
234
+ .checkbox_fill {
235
+ &_hover {
236
+ &_none {
237
+ background-color: transparent;
238
+ }
239
+ @each $type in accent, primary, secondary, surface, error, warning, success,
240
+ danger, info, disabled {
241
+ @each $color in primary, secondary, tertiary, quaternary {
242
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
243
+ &_$(type) {
244
+ &-$(color) {
245
+ &:hover {
246
+ & .checkbox__state {
247
+ background: var(--color-$(type)-fill-$(color));
248
+ }
249
+ }
250
+ &-hover {
251
+ &:hover {
252
+ & .checkbox__state {
253
+ background: var(--color-$(type)-fill-$(color)-hover);
254
+ }
255
+ }
256
+ }
257
+ }
258
+ &-hover {
259
+ &-$(color) {
260
+ &:hover {
261
+ & .checkbox__state {
262
+ background: var(--color-$(type)-fill-hover-$(color));
263
+ }
264
+ }
265
+ }
266
+ }
267
+ }
268
+
269
+ /* } */
270
+ }
271
+ }
272
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
273
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
274
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
275
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
276
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
277
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
278
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
279
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
280
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
281
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
282
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
283
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
284
+ alto, athens-gray, sonic-silver {
285
+ &_$(palette) {
286
+ &:hover {
287
+ & .checkbox__state {
288
+ background: var(--color-palette-$(palette));
289
+ }
290
+ }
291
+ }
292
+ }
293
+ }
294
+ }
295
+ .checkbox_fill {
296
+ &_none {
297
+ background-color: transparent;
298
+ }
299
+ @each $type in accent, primary, secondary, surface, error, warning, success,
300
+ danger, info, disabled {
301
+ @each $color in primary, secondary, tertiary, quaternary {
302
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
303
+ &_$(type) {
304
+ &-$(color) {
305
+ & .checkbox__state {
306
+ background: var(--color-$(type)-fill-$(color));
307
+ }
308
+ /* &$(alpha) {
309
+ background: var(--color-$(type)-$(color)-$(alpha));
310
+ } */
311
+ }
312
+ }
313
+ /* } */
314
+ }
315
+ }
316
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
317
+ pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
318
+ apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
319
+ pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
320
+ pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
321
+ beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
322
+ pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
323
+ deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
324
+ delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
325
+ pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
326
+ dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
327
+ stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
328
+ sonic-silver {
329
+ &_$(palette) {
330
+ & .checkbox__state {
331
+ background: var(--color-palette-$(palette));
332
+ }
333
+ }
334
+ }
335
+ }
336
+ .checkbox_border-color {
337
+ &_active {
338
+ &_none {
339
+ border-width: 1px;
340
+ border-color: transparent;
341
+ border-style: solid;
342
+ }
343
+ @each $type in accent, primary, secondary, surface, error, warning, success,
344
+ danger, info, disabled {
345
+ @each $color in primary, secondary, tertiary, quaternary {
346
+ &_$(type) {
347
+ &-border {
348
+ &-$(color) {
349
+ &:hover {
350
+ & .checkbox__state {
351
+ border-width: 1px;
352
+ border-color: var(--color-$(type)-border-$(color));
353
+ border-style: solid;
354
+ }
355
+ }
356
+ }
357
+ }
358
+ }
359
+ }
360
+ }
361
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
362
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
363
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
364
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
365
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
366
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
367
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
368
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
369
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
370
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
371
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
372
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
373
+ alto, athens-gray, sonic-silver {
374
+ &_$(palette) {
375
+ &:hover {
376
+ & .checkbox__state {
377
+ border-width: 1px;
378
+ border-color: var(--color-palette-$(palette));
379
+ border-style: solid;
380
+ }
381
+ }
382
+ }
383
+ }
384
+ }
385
+ }
386
+ .checkbox_border-color {
387
+ &_active {
388
+ &_none {
389
+ border-width: 1px;
390
+ border-color: transparent;
391
+ border-style: solid;
392
+ }
393
+ @each $type in accent, primary, secondary, surface, error, warning, success,
394
+ danger, info, disabled {
395
+ @each $color in primary, secondary, tertiary, quaternary {
396
+ &_$(type) {
397
+ &-border {
398
+ &-$(color) {
399
+ & .checkbox__state {
400
+ border-width: 1px;
401
+ border-color: var(--color-$(type)-border-$(color));
402
+ border-style: solid;
403
+ }
404
+ }
405
+ }
406
+ }
407
+ }
408
+ }
409
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
410
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
411
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
412
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
413
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
414
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
415
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
416
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
417
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
418
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
419
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
420
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
421
+ alto, athens-gray, sonic-silver {
422
+ &_$(palette) {
423
+ & .checkbox__state {
424
+ border-width: 1px;
425
+ border-color: var(--color-palette-$(palette));
426
+ border-style: solid;
427
+ }
428
+ }
429
+ }
430
+ }
431
+ }
432
+ .checkboxborder-color {
433
+ &_hover {
434
+ &_none {
435
+ border-width: 1px;
436
+ border-color: transparent;
437
+ border-style: solid;
438
+ }
439
+ @each $type in accent, primary, secondary, surface, error, warning, success,
440
+ danger, info, disabled {
441
+ @each $color in primary, secondary, tertiary, quaternary {
442
+ &_$(type) {
443
+ &-border {
444
+ &-$(color) {
445
+ &:hover {
446
+ & .checkbox_state {
447
+ border-width: 1px;
448
+ border-color: var(--color-$(type)-border-$(color));
449
+ border-style: solid;
450
+ }
451
+ }
452
+ &-hover {
453
+ &:hover {
454
+ & .checkbox_state {
455
+ border-width: 1px;
456
+ border-color: var(--color-$(type)-border-$(color));
457
+ border-style: solid;
458
+ }
459
+ }
460
+ }
461
+ }
462
+ }
463
+ }
464
+ }
465
+ }
466
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
467
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
468
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
469
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
470
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
471
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
472
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
473
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
474
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
475
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
476
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
477
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
478
+ alto, athens-gray, sonic-silver {
479
+ &_$(palette) {
480
+ &:hover {
481
+ & .checkbox_state {
482
+ border-width: 1px;
483
+ border-color: var(--color-palette-$(palette));
484
+ border-style: solid;
485
+ }
486
+ }
487
+ &-hover {
488
+ &:hover {
489
+ & .checkbox_state {
490
+ border-width: 1px;
491
+ border-color: var(--color-palette-$(palette));
492
+ border-style: solid;
493
+ }
494
+ }
495
+ }
496
+ }
497
+ }
498
+ }
499
+ }
500
+ .checkbox_border-color {
501
+ &_none {
502
+ border-width: 1px;
503
+ border-color: transparent;
504
+ border-style: solid;
505
+ }
506
+ @each $type in accent, primary, secondary, surface, error, warning, success,
507
+ danger, info, disabled {
508
+ @each $color in primary, secondary, tertiary, quaternary {
509
+ &_$(type) {
510
+ &-border {
511
+ &-$(color) {
512
+ & .checkbox__state {
513
+ border-width: 1px;
514
+ border-color: var(--color-$(type)-border-$(color));
515
+ border-style: solid;
516
+ }
517
+ }
518
+ }
519
+ }
520
+ }
521
+ }
522
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
523
+ pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
524
+ apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
525
+ pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
526
+ pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
527
+ beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
528
+ pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
529
+ deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
530
+ delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
531
+ pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
532
+ dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
533
+ stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
534
+ sonic-silver {
535
+ &_$(palette) {
536
+ & .checkbox__state {
537
+ border-width: 1px;
538
+ border-color: var(--color-palette-$(palette));
539
+ border-style: solid;
540
+ }
125
541
  }
126
542
  }
127
543
  }
128
544
  :root {
129
545
  --checkbox-column-gap: 12px;
130
546
  --checkbox-row-gap: 4px;
131
- --checkbox-success-border: var(--color-success-border-secondary);
132
- --checkbox-error-border: var(--color-error-border-secondary);
133
- --checkbox-focus-border: var(--color-surface-border-quaternary);
547
+
548
+ --checkbox-item-transition: all 0.3s ease 0s;
134
549
 
135
550
  --checkbox-area-xl-width: 24px;
136
551
  --checkbox-area-xl-height: 24px;
137
- --checkbox-xl-width: 16px;
138
- --checkbox-xl-height: 16px;
552
+ --checkbox-xl-width: 22px;
553
+ --checkbox-xl-height: 22px;
139
554
  --checkbox-xl-gap: 0 2px;
140
555
 
141
556
  --checkbox-area-l-width: 20px;
142
557
  --checkbox-area-l-height: 20px;
143
- --checkbox-l-width: 16px;
144
- --checkbox-l-height: 16px;
558
+ --checkbox-l-width: 18px;
559
+ --checkbox-l-height: 18px;
145
560
  --checkbox-l-gap: 0 2px;
146
561
 
147
562
  --checkbox-area-m-width: 16px;
148
563
  --checkbox-area-m-height: 16px;
149
- --checkbox-m-width: 12px;
150
- --checkbox-m-height: 12px;
564
+ --checkbox-m-width: 14px;
565
+ --checkbox-m-height: 14px;
151
566
  --checkbox-m-gap: 0 2px;
152
567
 
153
568
  --checkbox-area-s-width: 14px;
154
569
  --checkbox-area-s-height: 14px;
155
- --checkbox-s-width: 10px;
156
- --checkbox-s-height: 10px;
570
+ --checkbox-s-width: 12px;
571
+ --checkbox-s-height: 12px;
157
572
  --checkbox-s-gap: 0 2px;
158
573
  }
package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css CHANGED
@@ -35,6 +35,11 @@
35
35
  right: 8px;
36
36
  }
37
37
  }
38
+
39
+ .modal-sheet-bottom-padding {
40
+ padding: 0;
41
+ }
42
+
38
43
  :root {
39
44
  --modal-sheet-bottom-container-border-radius: 0;
40
45
  --modal-sheet-bottom-header-grabber: none;
package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts CHANGED
@@ -1,16 +1,22 @@
1
1
  declare const checkboxAppearanceStyle: {
2
2
  solid: {
3
3
  borderColorCheckbox: string;
4
- borderWidth: string;
4
+ borderColorCheckboxActive: string;
5
+ borderColorCheckboxActiveHover: string;
6
+ borderColorCheckboxHover: string;
5
7
  };
6
8
  outlined: {
7
9
  fill: string;
10
+ fillHover: string;
8
11
  };
9
12
  full: {};
10
13
  ghost: {
11
14
  fill: string;
15
+ fillHover: string;
12
16
  borderColorCheckbox: string;
13
- borderWidth: string;
17
+ borderColorCheckboxActive: string;
18
+ borderColorCheckboxActiveHover: string;
19
+ borderColorCheckboxHover: string;
14
20
  };
15
21
  };
16
22
  export { checkboxAppearanceStyle };
package/dist/types/components/Radio/Radio.appearance.d.ts CHANGED
@@ -111,9 +111,9 @@ export declare const radioAppearance: {
111
111
  descTextColor: string;
112
112
  borderColor: string;
113
113
  borderRadioColor: string;
114
- borderRadioColorHover: string;
115
114
  borderRadioColorActive: string;
116
115
  borderRadioColorActiveHover: string;
116
+ borderRadioColorHover: string;
117
117
  shape: string;
118
118
  };
119
119
  };
package/dist/types/components/Radio/appearance/radioDefault.d.ts CHANGED
@@ -9,9 +9,9 @@ declare const radioAppearanceDefault: {
9
9
  descTextColor: string;
10
10
  borderColor: string;
11
11
  borderRadioColor: string;
12
- borderRadioColorHover: string;
13
12
  borderRadioColorActive: string;
14
13
  borderRadioColorActiveHover: string;
14
+ borderRadioColorHover: string;
15
15
  shape: string;
16
16
  };
17
17
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.8.111",
3
+ "version": "1.8.113",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -140,7 +140,7 @@
140
140
  "@commitlint/cli": "^19.8.1",
141
141
  "@commitlint/config-conventional": "^19.8.1",
142
142
  "@itcase/config": "^1.0.56",
143
- "@itcase/lint": "^1.1.37",
143
+ "@itcase/lint": "^1.1.39",
144
144
  "@itcase/types": "^1.0.42",
145
145
  "@rollup/plugin-alias": "^5.1.1",
146
146
  "@rollup/plugin-babel": "^6.0.4",
@@ -171,7 +171,7 @@
171
171
  "lint-staged": "^16.1.5",
172
172
  "prettier": "^3.6.2",
173
173
  "react-docgen-typescript": "^2.4.0",
174
- "rollup": "^4.48.1",
174
+ "rollup": "^4.49.0",
175
175
  "rollup-plugin-copy": "^3.5.0",
176
176
  "rollup-plugin-dts": "^6.2.3",
177
177
  "rollup-plugin-peer-deps-external": "^2.2.4",