@itcase/ui 1.8.9 → 1.8.10
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.
- package/dist/{Badge_cjs_DrG2tUjI.js → Badge_cjs_CeqDdbMs.js} +1 -1
- package/dist/{Badge_es_Bx0NsdST.js → Badge_es_uDX0eyDM.js} +1 -1
- package/dist/{Button_cjs_B7OmqizJ.js → Button_cjs_BKQLT7oE.js} +1 -1
- package/dist/{Button_es_CBbHMy1v.js → Button_es_H15aBFcg.js} +1 -1
- package/dist/{Icon_cjs_DSzfNqif.js → Icon_cjs_BaWMPaAR.js} +1 -1
- package/dist/{Icon_es_BBmoZ7_3.js → Icon_es_B0sySEUu.js} +1 -1
- package/dist/{Input_cjs_C8RWS1SD.js → Input_cjs_BAVggtkk.js} +5 -5
- package/dist/{Input_es_FXxp51gq.js → Input_es_CNduH28G.js} +5 -5
- package/dist/{Label_cjs_BCjB-mxC.js → Label_cjs_CbcENlSZ.js} +1 -1
- package/dist/{Label_es_CZpanSdR.js → Label_es_BCpDqP3q.js} +1 -1
- package/dist/{Title_cjs_iuyln-ab.js → Title_cjs_ByPcFb15.js} +4 -25
- package/dist/{Title_es_ke3YylFm.js → Title_es_eejUqSJf.js} +4 -25
- package/dist/{Tooltip_cjs_CTwksdFk.js → Tooltip_cjs_CY4HOzhz.js} +1 -1
- package/dist/{Tooltip_es_H976MIb7.js → Tooltip_es_B9hN4Zlm.js} +1 -1
- package/dist/cjs/components/Accordion.js +3 -3
- package/dist/cjs/components/Avatar.js +3 -3
- package/dist/cjs/components/Badge.js +4 -4
- package/dist/cjs/components/Breadcrumbs.js +3 -3
- package/dist/cjs/components/Button.js +4 -4
- package/dist/cjs/components/Cell.js +4 -4
- package/dist/cjs/components/Checkbox.js +150 -22
- package/dist/cjs/components/Chips.js +11 -5
- package/dist/cjs/components/Choice.js +3 -3
- package/dist/cjs/components/CookiesWarning.js +4 -4
- package/dist/cjs/components/DadataHintField.js +1 -1
- package/dist/cjs/components/DatePicker.js +65 -100
- package/dist/cjs/components/HeroTitle.js +9 -19
- package/dist/cjs/components/Icon.js +3 -3
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/InputPassword.js +3 -3
- package/dist/cjs/components/Label.js +3 -3
- package/dist/cjs/components/Modal.js +1 -1
- package/dist/cjs/components/Pagination.js +3 -3
- package/dist/cjs/components/Response.js +4 -4
- package/dist/cjs/components/Search.js +3 -3
- package/dist/cjs/components/Select.js +7 -7
- package/dist/cjs/components/Swiper.js +1 -1
- package/dist/cjs/components/Tab.js +4 -4
- package/dist/cjs/components/Tile.js +4 -4
- package/dist/cjs/components/Title.js +5 -5
- package/dist/cjs/components/Tooltip.js +2 -2
- package/dist/cjs/hooks/useStyles/useStyles.js +3 -0
- package/dist/components/Accordion.js +3 -3
- package/dist/components/Avatar.js +3 -3
- package/dist/components/Badge.js +4 -4
- package/dist/components/Breadcrumbs.js +3 -3
- package/dist/components/Button.js +4 -4
- package/dist/components/Cell.js +4 -4
- package/dist/components/Checkbox.js +151 -22
- package/dist/components/Chips.js +11 -5
- package/dist/components/Choice.js +3 -3
- package/dist/components/CookiesWarning.js +4 -4
- package/dist/components/DadataHintField.js +1 -1
- package/dist/components/DatePicker.js +65 -100
- package/dist/components/HeroTitle.js +9 -19
- package/dist/components/Icon.js +3 -3
- package/dist/components/Input.js +1 -1
- package/dist/components/InputPassword.js +3 -3
- package/dist/components/Label.js +3 -3
- package/dist/components/Modal.js +1 -1
- package/dist/components/Pagination.js +3 -3
- package/dist/components/Response.js +4 -4
- package/dist/components/Search.js +3 -3
- package/dist/components/Select.js +7 -7
- package/dist/components/Swiper.js +1 -1
- package/dist/components/Tab.js +4 -4
- package/dist/components/Tile.js +4 -4
- package/dist/components/Title.js +5 -5
- package/dist/components/Tooltip.js +2 -2
- package/dist/css/components/Checkbox/Checkbox.css +3 -0
- package/dist/css/components/HeroTitle/HeroTitle.css +20 -16
- package/dist/css/components/Select/Select.css +9 -0
- package/dist/css/components/Textarea/Textarea.css +2 -0
- package/dist/css/components/Title/Title.css +20 -16
- package/dist/css/styles/placeholder-text-color/placeholder-text-color.css +1 -1
- package/dist/hooks/useStyles/useStyles.js +3 -0
- package/dist/types/components/Checkbox/Checkbox.appearance.d.ts +1 -2
- package/dist/types/components/Checkbox/Checkbox.interface.d.ts +1 -2
- package/dist/types/components/Checkbox/appearance/checkboxDefault.d.ts +26 -0
- package/dist/types/components/Checkbox/appearance/checkboxDisabled.d.ts +20 -0
- package/dist/types/components/Checkbox/appearance/checkboxError.d.ts +20 -0
- package/dist/types/components/Checkbox/appearance/checkboxRequire.d.ts +20 -0
- package/dist/types/components/Checkbox/appearance/checkboxSize.d.ts +31 -0
- package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts +14 -0
- package/dist/types/components/Checkbox/appearance/checkboxSuccess.d.ts +20 -0
- package/dist/types/components/Checkbox/index.d.ts +1 -1
- package/dist/types/components/Chips/appearance/chipsSize.d.ts +6 -1
- package/dist/types/components/Chips/appearance/chipsSurface.d.ts +1 -0
- package/dist/types/components/DatePicker/DatePicker.appearance.d.ts +30 -55
- package/dist/types/components/DatePicker/appearance/datePickerSize.d.ts +18 -33
- package/dist/types/components/DatePicker/appearance/datePickerSurface.d.ts +12 -22
- package/dist/types/components/Input/appearance/inputDefault.d.ts +5 -5
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var react = require('swiper/react');
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
var Title = require('../../
|
|
9
|
+
var Title = require('../../Title_cjs_ByPcFb15.js');
|
|
10
10
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
12
12
|
require('lodash/castArray');
|
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
var Badge = require('../../
|
|
9
|
+
var Badge = require('../../Badge_cjs_CeqDdbMs.js');
|
|
10
10
|
var Divider = require('../../Divider_cjs_DakITdTv.js');
|
|
11
11
|
var Link = require('../../Link_cjs_yht44xJv.js');
|
|
12
12
|
var Text = require('../../Text_cjs_D4xG0cKD.js');
|
|
@@ -22,10 +22,10 @@ require('react-responsive');
|
|
|
22
22
|
require('../utils/setViewportProperty.js');
|
|
23
23
|
require('lodash/maxBy');
|
|
24
24
|
require('../hooks/useStyles/styleAttributes.js');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Icon_cjs_BaWMPaAR.js');
|
|
26
26
|
require('react-inlinesvg');
|
|
27
|
-
require('../../
|
|
28
|
-
require('../../
|
|
27
|
+
require('../../Tooltip_cjs_CY4HOzhz.js');
|
|
28
|
+
require('../../Title_cjs_ByPcFb15.js');
|
|
29
29
|
|
|
30
30
|
var tabAppearanceSize = {
|
|
31
31
|
sizeL: {
|
|
@@ -5,9 +5,9 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
var Badge = require('../../
|
|
8
|
+
var Badge = require('../../Badge_cjs_CeqDdbMs.js');
|
|
9
9
|
var Text = require('../../Text_cjs_D4xG0cKD.js');
|
|
10
|
-
var Title = require('../../
|
|
10
|
+
var Title = require('../../Title_cjs_ByPcFb15.js');
|
|
11
11
|
require('react');
|
|
12
12
|
require('lodash/camelCase');
|
|
13
13
|
require('lodash/castArray');
|
|
@@ -21,10 +21,10 @@ require('react-responsive');
|
|
|
21
21
|
require('../utils/setViewportProperty.js');
|
|
22
22
|
require('lodash/maxBy');
|
|
23
23
|
require('../hooks/useStyles/styleAttributes.js');
|
|
24
|
-
require('../../
|
|
24
|
+
require('../../Icon_cjs_BaWMPaAR.js');
|
|
25
25
|
require('react-inlinesvg');
|
|
26
26
|
require('../../Link_cjs_yht44xJv.js');
|
|
27
|
-
require('../../
|
|
27
|
+
require('../../Tooltip_cjs_CY4HOzhz.js');
|
|
28
28
|
|
|
29
29
|
var tileAppearance = {
|
|
30
30
|
dev: {},
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Title = require('../../
|
|
3
|
+
var Title = require('../../Title_cjs_ByPcFb15.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
7
7
|
require('clsx');
|
|
8
|
+
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
9
|
+
require('lodash/camelCase');
|
|
10
|
+
require('lodash/castArray');
|
|
11
|
+
require('lodash/upperFirst');
|
|
8
12
|
require('../context/Notifications.js');
|
|
9
13
|
require('uuid');
|
|
10
14
|
require('@itcase/common');
|
|
11
15
|
require('../context/UIContext.js');
|
|
12
|
-
require('lodash/camelCase');
|
|
13
16
|
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
14
17
|
require('react-responsive');
|
|
15
18
|
require('../utils/setViewportProperty.js');
|
|
16
|
-
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
17
|
-
require('lodash/castArray');
|
|
18
|
-
require('lodash/upperFirst');
|
|
19
19
|
require('../hooks/useStyles/useStyles.js');
|
|
20
20
|
require('lodash/maxBy');
|
|
21
21
|
require('../hooks/useStyles/styleAttributes.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Tooltip = require('../../
|
|
3
|
+
var Tooltip = require('../../Tooltip_cjs_CY4HOzhz.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -20,7 +20,7 @@ require('../hooks/useStyles/useStyles.js');
|
|
|
20
20
|
require('lodash/maxBy');
|
|
21
21
|
require('../hooks/useStyles/styleAttributes.js');
|
|
22
22
|
require('../../Text_cjs_D4xG0cKD.js');
|
|
23
|
-
require('../../
|
|
23
|
+
require('../../Title_cjs_ByPcFb15.js');
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
@@ -44,6 +44,9 @@ function useStyles(props) {
|
|
|
44
44
|
const resultStylesGroups = {};
|
|
45
45
|
for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
|
|
46
46
|
let value = null;
|
|
47
|
+
console.log('propKey');
|
|
48
|
+
console.log(propKey);
|
|
49
|
+
console.log('propKey=======');
|
|
47
50
|
const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
|
|
48
51
|
const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
|
|
49
52
|
|
|
@@ -7,7 +7,7 @@ import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDev
|
|
|
7
7
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
8
8
|
import { icon16 } from '@itcase/icons/default';
|
|
9
9
|
import { D as Divider } from '../Divider_es_CWsDM2Rm.js';
|
|
10
|
-
import { I as Icon } from '../
|
|
10
|
+
import { I as Icon } from '../Icon_es_B0sySEUu.js';
|
|
11
11
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
12
12
|
import 'lodash/camelCase';
|
|
13
13
|
import 'lodash/upperFirst';
|
|
@@ -22,8 +22,8 @@ import 'lodash/maxBy';
|
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
23
|
import 'react-inlinesvg';
|
|
24
24
|
import '../Link_es_DkW06IM-.js';
|
|
25
|
-
import '../
|
|
26
|
-
import '../
|
|
25
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
26
|
+
import '../Title_es_eejUqSJf.js';
|
|
27
27
|
|
|
28
28
|
var accordionAppearance = {
|
|
29
29
|
dev: {},
|
|
@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { I as Icon } from '../
|
|
6
|
+
import { I as Icon } from '../Icon_es_B0sySEUu.js';
|
|
7
7
|
import { I as Image } from '../Image_es_CSzHhlA1.js';
|
|
8
8
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
@@ -21,8 +21,8 @@ import '../hooks/useStyles/useStyles.js';
|
|
|
21
21
|
import 'lodash/maxBy';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
23
|
import '../Link_es_DkW06IM-.js';
|
|
24
|
-
import '../
|
|
25
|
-
import '../
|
|
24
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
25
|
+
import '../Title_es_eejUqSJf.js';
|
|
26
26
|
|
|
27
27
|
var avatarAppearance = {
|
|
28
28
|
dev: {},
|
package/dist/components/Badge.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../
|
|
1
|
+
export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../Badge_es_uDX0eyDM.js';
|
|
2
2
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'clsx';
|
|
@@ -17,9 +17,9 @@ import '../utils/setViewportProperty.js';
|
|
|
17
17
|
import '../hooks/useStyles/useStyles.js';
|
|
18
18
|
import 'lodash/maxBy';
|
|
19
19
|
import '../hooks/useStyles/styleAttributes.js';
|
|
20
|
-
import '../
|
|
20
|
+
import '../Icon_es_B0sySEUu.js';
|
|
21
21
|
import 'react-inlinesvg';
|
|
22
22
|
import '../Link_es_DkW06IM-.js';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
24
24
|
import '../Text_es_FJGduy7Z.js';
|
|
25
|
-
import '../
|
|
25
|
+
import '../Title_es_eejUqSJf.js';
|
|
@@ -5,7 +5,7 @@ import clsx from 'clsx';
|
|
|
5
5
|
import camelCase from 'lodash/camelCase';
|
|
6
6
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
7
7
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
8
|
-
import { I as Icon } from '../
|
|
8
|
+
import { I as Icon } from '../Icon_es_B0sySEUu.js';
|
|
9
9
|
import { a as LinkWrapper } from '../Link_es_DkW06IM-.js';
|
|
10
10
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
11
11
|
import 'lodash/castArray';
|
|
@@ -20,8 +20,8 @@ import '../utils/setViewportProperty.js';
|
|
|
20
20
|
import 'lodash/maxBy';
|
|
21
21
|
import '../hooks/useStyles/styleAttributes.js';
|
|
22
22
|
import 'react-inlinesvg';
|
|
23
|
-
import '../
|
|
24
|
-
import '../
|
|
23
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
24
|
+
import '../Title_es_eejUqSJf.js';
|
|
25
25
|
|
|
26
26
|
function BreadcrumbsItem(props) {
|
|
27
27
|
var className = props.className, text = props.text, textColor = props.textColor, textColorHover = props.textColorHover, textSize = props.textSize, cursor = props.cursor, href = props.href, iconAfter = props.iconAfter, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, _a = props.set, set = _a === void 0 ? 'default' : _a, onClick = props.onClick, children = props.children;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { B as Button, a as buttonAppearance, b as buttonConfig } from '../
|
|
1
|
+
export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_H15aBFcg.js';
|
|
2
2
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'clsx';
|
|
6
|
-
import '../
|
|
6
|
+
import '../Icon_es_B0sySEUu.js';
|
|
7
7
|
import 'react-inlinesvg';
|
|
8
8
|
import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
@@ -20,7 +20,7 @@ import '../hooks/useStyles/useStyles.js';
|
|
|
20
20
|
import 'lodash/maxBy';
|
|
21
21
|
import '../hooks/useStyles/styleAttributes.js';
|
|
22
22
|
import '../Link_es_DkW06IM-.js';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
24
24
|
import '../Text_es_FJGduy7Z.js';
|
|
25
|
-
import '../
|
|
25
|
+
import '../Title_es_eejUqSJf.js';
|
|
26
26
|
import '../Loader_es_BE4nyzXi.js';
|
package/dist/components/Cell.js
CHANGED
|
@@ -3,8 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon } from '../
|
|
7
|
-
import { L as Label } from '../
|
|
6
|
+
import { I as Icon } from '../Icon_es_B0sySEUu.js';
|
|
7
|
+
import { L as Label } from '../Label_es_BCpDqP3q.js';
|
|
8
8
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
9
9
|
import 'react';
|
|
10
10
|
import 'lodash/camelCase';
|
|
@@ -21,8 +21,8 @@ import 'lodash/maxBy';
|
|
|
21
21
|
import '../hooks/useStyles/styleAttributes.js';
|
|
22
22
|
import 'react-inlinesvg';
|
|
23
23
|
import '../Link_es_DkW06IM-.js';
|
|
24
|
-
import '../
|
|
25
|
-
import '../
|
|
24
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
25
|
+
import '../Title_es_eejUqSJf.js';
|
|
26
26
|
|
|
27
27
|
var cellAppearance = {
|
|
28
28
|
dev: {},
|
|
@@ -18,44 +18,175 @@ import '../hooks/useStyles/useStyles.js';
|
|
|
18
18
|
import 'lodash/maxBy';
|
|
19
19
|
import '../hooks/useStyles/styleAttributes.js';
|
|
20
20
|
|
|
21
|
-
var
|
|
22
|
-
|
|
21
|
+
var checkboxAppearanceDefault = {
|
|
22
|
+
defaultPrimary: {
|
|
23
23
|
labelTextColor: 'surfaceTextPrimary',
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
descTextColor: 'surfaceTextTertiary',
|
|
25
|
+
errorStateBorderColor: 'errorBorderSecondary',
|
|
26
|
+
stateBorderColorDisabled: 'surfaceBorderTertiary',
|
|
27
|
+
stateBorderColorDisabledChecked: 'surfaceBorderTertiary',
|
|
28
|
+
stateCheckmarkFillDisabled: 'accentItemPrimary',
|
|
29
|
+
stateFillDisabled: 'surfaceTertiary',
|
|
30
|
+
stateFillDisabledChecked: 'surfaceTertiary',
|
|
31
|
+
requiredStateBorderColor: 'warningBorderPrimary',
|
|
32
|
+
stateBorderColor: 'surfaceBorderTertiary',
|
|
33
|
+
stateBorderColorChecked: 'surfaceBorderAccent',
|
|
29
34
|
stateCheckmarkFill: 'accentItemPrimary',
|
|
30
35
|
stateFillChecked: 'accentPrimary',
|
|
31
|
-
|
|
36
|
+
},
|
|
37
|
+
defaultSecondary: {
|
|
38
|
+
fill: 'surfacePrimary',
|
|
39
|
+
borderColor: 'surfaceBorderTertiary',
|
|
40
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
41
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
42
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
43
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
var checkboxAppearanceDisabled = {
|
|
48
|
+
disabledPrimary: {
|
|
49
|
+
fill: 'surfaceFillDisabled',
|
|
50
|
+
borderColor: 'errorBorderQuaternary',
|
|
51
|
+
borderHover: 'errorBorderQuaternary',
|
|
52
|
+
textColor: 'surfaceTextQuaternary',
|
|
53
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
54
|
+
iconClearFill: 'errorItemPrimary',
|
|
55
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
56
|
+
},
|
|
57
|
+
disabledSecondary: {
|
|
58
|
+
fill: 'surfaceSecondary',
|
|
59
|
+
borderColor: 'surfaceBorderTertiary',
|
|
60
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
61
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
62
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
63
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
var checkboxAppearanceError = {
|
|
68
|
+
errorPrimary: {
|
|
69
|
+
fill: 'errorTertiary',
|
|
70
|
+
borderColor: 'errorBorderQuaternary',
|
|
71
|
+
borderHover: 'errorBorderQuaternary',
|
|
72
|
+
textColor: 'surfaceTextPrimary',
|
|
73
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
74
|
+
iconClearFill: 'errorItemPrimary',
|
|
75
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
76
|
+
},
|
|
77
|
+
errorSecondary: {
|
|
78
|
+
fill: 'errorSecondary',
|
|
79
|
+
borderColor: 'errorBorderTertiary',
|
|
80
|
+
borderHover: 'errorBorderQuaternary',
|
|
81
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
82
|
+
iconClearFill: 'errorItemPrimary',
|
|
83
|
+
placeholderTextColor: 'errorTextSecondary',
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
var checkboxAppearanceRequire = {
|
|
88
|
+
requirePrimary: {
|
|
89
|
+
fill: 'warningTertiary',
|
|
90
|
+
borderColor: 'warningBorderQuaternary',
|
|
91
|
+
borderHover: 'warningBorderQuaternary',
|
|
92
|
+
textColor: 'surfaceTextPrimary',
|
|
93
|
+
iconBeforeFill: 'warningItemQuaternary',
|
|
94
|
+
iconClearFill: 'warningItemPrimary',
|
|
95
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
96
|
+
},
|
|
97
|
+
requireSecondary: {
|
|
98
|
+
fill: 'surfaceSecondary',
|
|
99
|
+
borderColor: 'surfaceBorderTertiary',
|
|
100
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
101
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
102
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
103
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
var checkboxAppearanceSize = {
|
|
108
|
+
sizeXXL: {
|
|
109
|
+
size: 'xxl',
|
|
110
|
+
textSize: 'l',
|
|
111
|
+
},
|
|
112
|
+
sizeXL: {
|
|
113
|
+
size: 'xl',
|
|
114
|
+
textSize: 's',
|
|
115
|
+
},
|
|
116
|
+
sizeL: {
|
|
117
|
+
size: 'l',
|
|
118
|
+
textSize: 's',
|
|
119
|
+
},
|
|
120
|
+
sizeM: {
|
|
121
|
+
labelTextSize: 'm',
|
|
122
|
+
descTextSize: 'xxs',
|
|
123
|
+
},
|
|
124
|
+
sizeS: {
|
|
125
|
+
size: 's',
|
|
126
|
+
textSize: 's',
|
|
127
|
+
},
|
|
128
|
+
sizeXS: {
|
|
129
|
+
size: 'xs',
|
|
130
|
+
textSize: 's',
|
|
131
|
+
},
|
|
132
|
+
sizeXXS: {
|
|
133
|
+
size: 'xxs',
|
|
134
|
+
textSize: 's',
|
|
32
135
|
},
|
|
33
136
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
137
|
+
|
|
138
|
+
var checkboxAppearanceStyle = {
|
|
139
|
+
full: {
|
|
140
|
+
/* border / fill */
|
|
141
|
+
},
|
|
142
|
+
ghost: {
|
|
143
|
+
fill: 'none',
|
|
144
|
+
borderWidth: '0',
|
|
145
|
+
},
|
|
146
|
+
outlined: {
|
|
147
|
+
fill: 'none',
|
|
148
|
+
},
|
|
149
|
+
solid: {
|
|
150
|
+
borderWidth: '0',
|
|
151
|
+
},
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
var checkboxAppearanceSuccess = {
|
|
155
|
+
successPrimary: {
|
|
156
|
+
fill: 'successTertiary',
|
|
157
|
+
borderColor: 'successBorderQuaternary',
|
|
158
|
+
borderHover: 'successBorderQuaternary',
|
|
159
|
+
textColor: 'surfaceTextPrimary',
|
|
160
|
+
iconBeforeFill: 'successItemQuaternary',
|
|
161
|
+
iconClearFill: 'successItemPrimary',
|
|
162
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
163
|
+
},
|
|
164
|
+
successSecondary: {
|
|
165
|
+
fill: 'surfaceSecondary',
|
|
166
|
+
borderColor: 'surfaceBorderTertiary',
|
|
167
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
168
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
169
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
170
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
38
171
|
},
|
|
39
172
|
};
|
|
40
173
|
|
|
174
|
+
var checkboxAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, checkboxAppearanceDefault), checkboxAppearanceError), checkboxAppearanceSuccess), checkboxAppearanceRequire), checkboxAppearanceDisabled), checkboxAppearanceSize), checkboxAppearanceStyle);
|
|
175
|
+
|
|
41
176
|
var checkboxConfig = {
|
|
42
177
|
appearance: checkboxAppearance,
|
|
43
|
-
state: checkboxState,
|
|
44
178
|
setAppearance: function (appearanceConfig) {
|
|
45
179
|
checkboxConfig.appearance = appearanceConfig;
|
|
46
180
|
},
|
|
47
|
-
setState: function (appearanceConfig) {
|
|
48
|
-
checkboxConfig.state = appearanceConfig;
|
|
49
|
-
},
|
|
50
181
|
};
|
|
51
182
|
function Checkbox(props) {
|
|
52
|
-
var id = props.id, className = props.className, appearance = props.appearance, label = props.label,
|
|
183
|
+
var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, checked = props.checked, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
|
|
53
184
|
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
54
185
|
var _a;
|
|
55
186
|
return (__assign(__assign({}, resultConfig), (_a = checkboxConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
56
187
|
}, {});
|
|
57
188
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
58
|
-
var fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateShapeClass = propsGenerator.stateShapeClass, widthClass = propsGenerator.widthClass;
|
|
189
|
+
var fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, shapeClass = propsGenerator.shapeClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateShapeClass = propsGenerator.stateShapeClass, widthClass = propsGenerator.widthClass;
|
|
59
190
|
var stateFillClass = propsGenerator.getClassName(checked ? 'stateFillChecked' : 'stateFill', {
|
|
60
191
|
prefix: 'fill_',
|
|
61
192
|
});
|
|
@@ -63,9 +194,7 @@ function Checkbox(props) {
|
|
|
63
194
|
var stateCheckmarkFillClass = propsGenerator.getClassName(disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill', { prefix: 'checkbox_checkmark_fill_' });
|
|
64
195
|
var stateBorderColorClass = propsGenerator.getClassName(checked ? 'stateBorderColorChecked' : 'stateBorderColor', { prefix: 'border-color_' });
|
|
65
196
|
var stateBorderColorDisabledClass = propsGenerator.getClassName(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
|
|
66
|
-
return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsx("input", {
|
|
67
|
-
// @ts-expect-error
|
|
68
|
-
id: id, className: "checkbox__input", type: "checkbox", disabled: disabled, checked: checked, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "checkbox__state-checkmark", 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 })] }));
|
|
197
|
+
return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: disabled, checked: checked, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "checkbox__state-checkmark", 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 })] }));
|
|
69
198
|
}
|
|
70
199
|
|
|
71
|
-
export { Checkbox, checkboxAppearance, checkboxConfig
|
|
200
|
+
export { Checkbox, checkboxAppearance, checkboxConfig };
|
package/dist/components/Chips.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { I as Icon } from '../
|
|
7
|
+
import { I as Icon } from '../Icon_es_B0sySEUu.js';
|
|
8
8
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
10
10
|
import 'lodash/castArray';
|
|
@@ -20,8 +20,8 @@ import 'lodash/maxBy';
|
|
|
20
20
|
import '../hooks/useStyles/styleAttributes.js';
|
|
21
21
|
import 'react-inlinesvg';
|
|
22
22
|
import '../Link_es_DkW06IM-.js';
|
|
23
|
-
import '../
|
|
24
|
-
import '../
|
|
23
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
24
|
+
import '../Title_es_eejUqSJf.js';
|
|
25
25
|
|
|
26
26
|
var chipsAppearanceAccent = {
|
|
27
27
|
accent: {
|
|
@@ -66,7 +66,12 @@ var chipsAppearanceSecondary = {
|
|
|
66
66
|
},
|
|
67
67
|
};
|
|
68
68
|
|
|
69
|
-
var chipsAppearanceSize = {
|
|
69
|
+
var chipsAppearanceSize = {
|
|
70
|
+
sizeM: {
|
|
71
|
+
size: 'm',
|
|
72
|
+
labelTextSize: 's',
|
|
73
|
+
},
|
|
74
|
+
};
|
|
70
75
|
|
|
71
76
|
var chipsAppearanceStyle = {};
|
|
72
77
|
|
|
@@ -82,6 +87,7 @@ var chipsAppearanceSurface = {
|
|
|
82
87
|
labelTextColor: 'surfaceTextPrimary',
|
|
83
88
|
labelTextHoverColor: 'surfaceTextPrimary',
|
|
84
89
|
borderColor: 'surfaceBorderTertiary',
|
|
90
|
+
activeIconItemFill: 'surfaceItemSecondary',
|
|
85
91
|
},
|
|
86
92
|
surfaceSecondary: {
|
|
87
93
|
fill: 'surfaceSecondary',
|
|
@@ -133,7 +139,7 @@ function Chips(props) {
|
|
|
133
139
|
? fillClass && "fill_".concat(fillClass)
|
|
134
140
|
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
135
141
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
136
|
-
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor,
|
|
142
|
+
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
|
|
137
143
|
? labelTextHoverColor
|
|
138
144
|
: labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
|
|
139
145
|
}
|
|
@@ -4,7 +4,7 @@ import React, { useRef, useMemo, createRef, useCallback } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { I as Icon } from '../
|
|
7
|
+
import { I as Icon } from '../Icon_es_B0sySEUu.js';
|
|
8
8
|
import { L as Loader } from '../Loader_es_BE4nyzXi.js';
|
|
9
9
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
10
10
|
import 'lodash/camelCase';
|
|
@@ -21,8 +21,8 @@ import 'lodash/maxBy';
|
|
|
21
21
|
import '../hooks/useStyles/styleAttributes.js';
|
|
22
22
|
import 'react-inlinesvg';
|
|
23
23
|
import '../Link_es_DkW06IM-.js';
|
|
24
|
-
import '../
|
|
25
|
-
import '../
|
|
24
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
25
|
+
import '../Title_es_eejUqSJf.js';
|
|
26
26
|
|
|
27
27
|
var choiceAppearanceAccent = {
|
|
28
28
|
accentPrimary: {
|
|
@@ -3,7 +3,7 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import Cookies from 'js-cookie';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { B as Button } from '../
|
|
6
|
+
import { B as Button } from '../Button_es_H15aBFcg.js';
|
|
7
7
|
import { G as Group } from '../Group_es_CRGwi5XI.js';
|
|
8
8
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
9
9
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
@@ -17,14 +17,14 @@ import '../context/UIContext.js';
|
|
|
17
17
|
import '../hooks/useMediaQueries/useMediaQueries.js';
|
|
18
18
|
import 'react-responsive';
|
|
19
19
|
import '../utils/setViewportProperty.js';
|
|
20
|
-
import '../
|
|
20
|
+
import '../Icon_es_B0sySEUu.js';
|
|
21
21
|
import 'react-inlinesvg';
|
|
22
22
|
import '../hooks/useStyles/useStyles.js';
|
|
23
23
|
import 'lodash/maxBy';
|
|
24
24
|
import '../hooks/useStyles/styleAttributes.js';
|
|
25
25
|
import '../Link_es_DkW06IM-.js';
|
|
26
|
-
import '../
|
|
27
|
-
import '../
|
|
26
|
+
import '../Tooltip_es_B9hN4Zlm.js';
|
|
27
|
+
import '../Title_es_eejUqSJf.js';
|
|
28
28
|
import '../Loader_es_BE4nyzXi.js';
|
|
29
29
|
|
|
30
30
|
function CookiesWarning(props) {
|
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { PartySuggestions } from 'react-dadata';
|
|
6
|
-
import { I as Input } from '../
|
|
6
|
+
import { I as Input } from '../Input_es_CNduH28G.js';
|
|
7
7
|
import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import 'lodash/camelCase';
|
|
9
9
|
import 'lodash/castArray';
|