@itcase/ui 1.3.34 → 1.3.37

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 (50) hide show
  1. package/dist/{Button-DZ3z7f-A.js → Button-BtAUGGPc.js} +5 -5
  2. package/dist/{Button-D1m2MxZA.js → Button-HKkjJ38v.js} +5 -5
  3. package/dist/cjs/components/Button.js +1 -1
  4. package/dist/cjs/components/Cell.js +8 -4
  5. package/dist/cjs/components/CookiesWarning.js +1 -1
  6. package/dist/cjs/components/DatePicker.js +1 -1
  7. package/dist/cjs/components/Response.js +1 -1
  8. package/dist/cjs/components/Tab.js +58 -60
  9. package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +1 -0
  10. package/dist/components/Button.js +1 -1
  11. package/dist/components/Cell.js +8 -4
  12. package/dist/components/CookiesWarning.js +1 -1
  13. package/dist/components/DatePicker.js +1 -1
  14. package/dist/components/Response.js +1 -1
  15. package/dist/components/Tab.js +58 -60
  16. package/dist/css/components/Avatar/Avatar.css +4 -0
  17. package/dist/css/components/Avatar/Avatar.tokens.css +2 -0
  18. package/dist/css/components/Checkbox/Checkbox.css +4 -0
  19. package/dist/css/components/Checkbox/Checkbox.tokens.css +1 -1
  20. package/dist/css/components/Choice/Choice.css +13 -2
  21. package/dist/css/components/Choice/Choice.tokens.css +4 -3
  22. package/dist/css/components/DatePicker/DatePicker.css +51 -0
  23. package/dist/css/components/DatePicker/DatePicker.tokens.css +15 -7
  24. package/dist/css/components/Divider/Divider.css +19 -6
  25. package/dist/css/components/Divider/Divider.tokens.css +12 -11
  26. package/dist/css/components/Dot/Dot.css +10 -0
  27. package/dist/css/components/Drawer/Drawer.css +4 -0
  28. package/dist/css/components/Drawer/Drawer.tokens.css +4 -0
  29. package/dist/css/components/Dropdown/Dropdown.css +37 -0
  30. package/dist/css/components/Dropdown/Dropdown.tokens.css +6 -0
  31. package/dist/css/components/Icon/Icon.css +5 -0
  32. package/dist/css/components/Icon/Icon.tokens.css +1 -0
  33. package/dist/css/components/Input/Input.css +29 -0
  34. package/dist/css/components/InputPassword/InputPassword.css +23 -0
  35. package/dist/css/components/Label/Label.css +19 -0
  36. package/dist/css/components/Label/Label.tokens.css +3 -3
  37. package/dist/css/components/Logo/Logo.tokens.css +17 -2
  38. package/dist/css/components/MenuItem/MenuItem.tokens.css +4 -4
  39. package/dist/css/components/Modal/Modal.css +3 -0
  40. package/dist/css/components/Modal/Modal.tokens.css +3 -0
  41. package/dist/css/components/Pagination/Pagination.css +25 -0
  42. package/dist/css/components/Search/Search.css +16 -0
  43. package/dist/css/components/Search/Search.tokens.css +6 -3
  44. package/dist/css/components/Segmented/Segmented.css +6 -0
  45. package/dist/css/components/Segmented/Segmented.tokens.css +2 -0
  46. package/dist/css/components/Tab/Tab.css +28 -0
  47. package/dist/css/components/Textarea/Textarea.css +7 -0
  48. package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +1 -0
  49. package/dist/stories/Size.mdx +26 -6
  50. package/package.json +1 -1
@@ -245,16 +245,16 @@ var buttonAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__a
245
245
  var buttonConfig = {
246
246
  appearance: buttonAppearance,
247
247
  setAppearance: function (appearanceConfig) {
248
- buttonConfig.appearance = appearanceConfig;
248
+ this.appearance = appearanceConfig;
249
249
  },
250
250
  };
251
251
  var Button = React.forwardRef(function Button(props, ref) {
252
- var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, _c = props.loading, loading = _c === void 0 ? false : _c, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, isLoading = props.isLoading, onClick = props.onClick, onMouseDown = props.onMouseDown;
253
- var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
252
+ var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown;
253
+ var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
254
254
  var _a;
255
- return (__assign(__assign({}, resultApperance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
255
+ return (__assign(__assign({}, resultAppearance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
256
256
  }, {});
257
- if (loading) {
257
+ if (loading !== undefined) {
258
258
  console.warn('DEPRECATED: prop Loading is deprecated, use isLoading');
259
259
  }
260
260
  var _isLoading = isLoading !== null && isLoading !== void 0 ? isLoading : loading;
@@ -247,16 +247,16 @@ var buttonAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(
247
247
  var buttonConfig = {
248
248
  appearance: buttonAppearance,
249
249
  setAppearance: function (appearanceConfig) {
250
- buttonConfig.appearance = appearanceConfig;
250
+ this.appearance = appearanceConfig;
251
251
  },
252
252
  };
253
253
  var Button = React.forwardRef(function Button(props, ref) {
254
- var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, _c = props.loading, loading = _c === void 0 ? false : _c, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, isLoading = props.isLoading, onClick = props.onClick, onMouseDown = props.onMouseDown;
255
- var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
254
+ var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown;
255
+ var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
256
256
  var _a;
257
- return (tslib_es6.__assign(tslib_es6.__assign({}, resultApperance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
257
+ return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
258
258
  }, {});
259
- if (loading) {
259
+ if (loading !== undefined) {
260
260
  console.warn('DEPRECATED: prop Loading is deprecated, use isLoading');
261
261
  }
262
262
  var _isLoading = isLoading !== null && isLoading !== void 0 ? isLoading : loading;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('../../Button-D1m2MxZA.js');
3
+ var Button = require('../../Button-HKkjJ38v.js');
4
4
  require('../../tslib.es6-CCZ3TN_7.js');
5
5
  require('react/jsx-runtime');
6
6
  require('react');
@@ -34,15 +34,15 @@ var cellConfig = {
34
34
  },
35
35
  };
36
36
  function Cell(props) {
37
- var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, appearance = props.appearance, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize,
37
+ var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize,
38
38
  // titleLabelTextSize,
39
39
  titleTag = props.titleTag, titleTextColor = props.titleTextColor,
40
40
  // titleTextSize,
41
- titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize,
41
+ titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, mode = props.mode, reverse = props.reverse, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize,
42
42
  // valueLabelTextSize,
43
43
  valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor,
44
44
  // valueTextSize,
45
- valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
45
+ valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, before = props.before, after = props.after, isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
46
46
  // @ts-expect-error
47
47
  var appearanceConfig = cellConfig.appearance && cellConfig.appearance[appearance];
48
48
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
@@ -56,7 +56,11 @@ function Cell(props) {
56
56
  /* eslint-enable perfectionist/sort-objects */
57
57
  // @ts-expect-error
58
58
  var _b = useStyles.useStyles(props), dataStyles = _b.data, cellStyles = _b.styles;
59
- return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !cellStyles.width && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
59
+ return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled &&
60
+ bgFillDisabledClass &&
61
+ "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !(cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles.width) && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled &&
62
+ fillDisabledClass &&
63
+ "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, size: titleTextSize, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, size: valueTextSize, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
60
64
  }
61
65
 
62
66
  exports.Cell = Cell;
@@ -5,7 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var Cookies = require('js-cookie');
7
7
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
8
- var Button = require('../../Button-D1m2MxZA.js');
8
+ var Button = require('../../Button-HKkjJ38v.js');
9
9
  var Group = require('../../Group-Chtnas-J.js');
10
10
  var Text = require('../../Text-C49zj3jO.js');
11
11
  require('../../tslib.es6-CCZ3TN_7.js');
@@ -8,7 +8,7 @@ var locale = require('date-fns/locale');
8
8
  var DatePicker = require('react-datepicker');
9
9
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
10
  var useStyles = require('../hooks/useStyles/useStyles.js');
11
- var Button = require('../../Button-D1m2MxZA.js');
11
+ var Button = require('../../Button-HKkjJ38v.js');
12
12
  var Icon = require('../../Icon-GVGrUu_Z.js');
13
13
  var Input = require('../../Input-Dwvk-poq.js');
14
14
  var Label = require('../../Label-XTFwl1aq.js');
@@ -7,7 +7,7 @@ var clsx = require('clsx');
7
7
  var SVG = require('react-inlinesvg');
8
8
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
9
9
  var useStyles = require('../hooks/useStyles/useStyles.js');
10
- var Button = require('../../Button-D1m2MxZA.js');
10
+ var Button = require('../../Button-HKkjJ38v.js');
11
11
  var Group = require('../../Group-Chtnas-J.js');
12
12
  var Text = require('../../Text-C49zj3jO.js');
13
13
  require('lodash/camelCase');
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
3
4
  var jsxRuntime = require('react/jsx-runtime');
4
5
  var React = require('react');
5
6
  var clsx = require('clsx');
@@ -9,7 +10,6 @@ var Badge = require('../../Badge-BX4N91_C.js');
9
10
  var Divider = require('../../Divider-ImOOytuN.js');
10
11
  var Link = require('../../Link-B38Hn4G2.js');
11
12
  var Text = require('../../Text-C49zj3jO.js');
12
- require('../../tslib.es6-CCZ3TN_7.js');
13
13
  require('lodash/camelCase');
14
14
  require('lodash/castArray');
15
15
  require('lodash/upperFirst');
@@ -25,125 +25,123 @@ require('../../Tooltip-DpBQQoNo.js');
25
25
  require('../../Title-BWWyRwLY.js');
26
26
 
27
27
  var tabAppearance = {
28
- any: {
29
- dividerFill: 'surfaceTertiary',
30
- dividerFillActive: 'accentPrimary',
28
+ accent: {
29
+ fill: 'accentPrimary',
30
+ fillHover: 'accentPrimaryHover',
31
+ labelColor: 'accentTextPrimary',
32
+ labelColorActive: 'accentTextPrimary',
31
33
  dividerFillDisabled: 'accentDisabled',
32
- dividerFillHover: 'surfaceTertiary',
33
- fill: 'surfacePrimary',
34
34
  fillDisabled: 'surfaceDisabled',
35
- fillHover: 'surfaceTertiary',
36
- labelColor: 'surfaceTextPrimary',
37
- labelColorActive: 'surfaceTextAccent',
38
35
  labelColorDisabled: 'surfaceTextDisabled',
36
+ dividerFill: 'surfaceTertiary',
37
+ dividerFillActive: 'surfacePrimary',
38
+ dividerFillHover: 'surfaceTertiary',
39
39
  },
40
- surfacePrimary: {
40
+ primary: {
41
+ fill: 'primaryPrimary',
42
+ fillHover: 'primaryPrimaryHover',
43
+ labelColor: 'primaryTextPrimary',
44
+ labelColorActive: 'primaryTextPrimary',
45
+ dividerFillDisabled: 'accentDisabled',
46
+ fillDisabled: 'surfaceDisabled',
47
+ labelColorDisabled: 'surfaceTextDisabled',
41
48
  dividerFill: 'surfaceTertiary',
42
49
  dividerFillActive: 'accentPrimary',
50
+ dividerFillHover: 'surfaceTertiary',
51
+ },
52
+ secondary: {
53
+ fill: 'secondaryPrimary',
54
+ fillHover: 'secondaryPrimaryHover',
55
+ labelColor: 'secondaryTextPrimary',
56
+ labelColorActive: 'secondaryTextPrimary',
43
57
  dividerFillDisabled: 'accentDisabled',
58
+ fillDisabled: 'surfaceDisabled',
59
+ labelColorDisabled: 'surfaceTextDisabled',
60
+ dividerFill: 'surfaceTertiary',
61
+ dividerFillActive: 'accentPrimary',
44
62
  dividerFillHover: 'surfaceTertiary',
63
+ },
64
+ surfacePrimary: {
45
65
  fill: 'surfacePrimary',
46
- fillDisabled: 'surfaceDisabled',
47
66
  fillHover: 'surfacePrimaryHover',
48
67
  labelColor: 'surfaceTextPrimary',
49
68
  labelColorActive: 'surfaceTextAccent',
69
+ dividerFillDisabled: 'accentDisabled',
70
+ fillDisabled: 'surfaceDisabled',
50
71
  labelColorDisabled: 'surfaceTextDisabled',
51
- },
52
- surfaceSecondary: {
53
72
  dividerFill: 'surfaceTertiary',
54
73
  dividerFillActive: 'accentPrimary',
55
- dividerFillDisabled: 'accentDisabled',
56
74
  dividerFillHover: 'surfaceTertiary',
75
+ },
76
+ surfaceSecondary: {
57
77
  fill: 'surfaceSecondary',
58
- fillDisabled: 'surfaceDisabled',
59
78
  fillHover: 'surfaceSecondaryHover',
60
79
  labelColor: 'surfaceTextPrimary',
61
80
  labelColorActive: 'surfaceTextAccent',
81
+ dividerFillDisabled: 'accentDisabled',
82
+ fillDisabled: 'surfaceDisabled',
62
83
  labelColorDisabled: 'surfaceTextDisabled',
63
- },
64
- surfaceTertiary: {
65
84
  dividerFill: 'surfaceTertiary',
66
85
  dividerFillActive: 'accentPrimary',
67
- dividerFillDisabled: 'accentDisabled',
68
86
  dividerFillHover: 'surfaceTertiary',
87
+ },
88
+ surfaceTertiary: {
69
89
  fill: 'surfaceTertiary',
70
- fillDisabled: 'surfaceDisabled',
71
90
  fillHover: 'surfaceTertiaryHover',
72
91
  labelColor: 'surfaceTextPrimary',
73
92
  labelColorActive: 'surfaceTextAccent',
93
+ dividerFillDisabled: 'accentDisabled',
94
+ fillDisabled: 'surfaceDisabled',
74
95
  labelColorDisabled: 'surfaceTextDisabled',
75
- },
76
- surfaceQuaternary: {
77
96
  dividerFill: 'surfaceTertiary',
78
97
  dividerFillActive: 'accentPrimary',
79
- dividerFillDisabled: 'accentDisabled',
80
98
  dividerFillHover: 'surfaceTertiary',
99
+ },
100
+ surfaceQuaternary: {
81
101
  fill: 'surfaceQuaternary',
82
- fillDisabled: 'surfaceDisabled',
83
102
  fillHover: 'surfaceTertiaryHover',
84
103
  labelColor: 'surfaceTextInverse',
85
104
  labelColorActive: 'surfaceTextInverse',
86
- labelColorDisabled: 'surfaceTextDisabled',
87
- },
88
- accent: {
89
- dividerFill: 'surfaceTertiary',
90
- dividerFillActive: 'surfacePrimary',
91
105
  dividerFillDisabled: 'accentDisabled',
92
- dividerFillHover: 'surfaceTertiary',
93
- fill: 'accentPrimary',
94
106
  fillDisabled: 'surfaceDisabled',
95
- fillHover: 'accentPrimaryHover',
96
- labelColor: 'accentTextPrimary',
97
- labelColorActive: 'accentTextPrimary',
98
107
  labelColorDisabled: 'surfaceTextDisabled',
99
- },
100
- primary: {
101
108
  dividerFill: 'surfaceTertiary',
102
109
  dividerFillActive: 'accentPrimary',
103
- dividerFillDisabled: 'accentDisabled',
104
110
  dividerFillHover: 'surfaceTertiary',
105
- fill: 'primaryPrimary',
111
+ },
112
+ any: {
113
+ fill: 'surfacePrimary',
114
+ fillHover: 'surfaceTertiary',
115
+ labelColor: 'surfaceTextPrimary',
116
+ labelColorActive: 'surfaceTextAccent',
117
+ dividerFillDisabled: 'accentDisabled',
106
118
  fillDisabled: 'surfaceDisabled',
107
- fillHover: 'primaryPrimaryHover',
108
- labelColor: 'primaryTextPrimary',
109
- labelColorActive: 'primaryTextPrimary',
110
119
  labelColorDisabled: 'surfaceTextDisabled',
111
- },
112
- secondary: {
113
120
  dividerFill: 'surfaceTertiary',
114
121
  dividerFillActive: 'accentPrimary',
115
- dividerFillDisabled: 'accentDisabled',
116
122
  dividerFillHover: 'surfaceTertiary',
117
- fill: 'secondaryPrimary',
118
- fillDisabled: 'surfaceDisabled',
119
- fillHover: 'secondaryPrimaryHover',
120
- labelColor: 'secondaryTextPrimary',
121
- labelColorActive: 'secondaryTextPrimary',
122
- labelColorDisabled: 'surfaceTextDisabled',
123
123
  },
124
124
  };
125
125
 
126
126
  var tabConfig = {
127
127
  appearance: tabAppearance,
128
- setAppearance: function (newComponent) {
129
- tabConfig.appearance = newComponent;
128
+ setAppearance: function (appearanceConfig) {
129
+ tabConfig.appearance = appearanceConfig;
130
130
  },
131
131
  };
132
132
  function Tab(props) {
133
- var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeShape = props.badgeShape, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextAlign = props.labelTextAlign, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
134
- // @ts-expect-error
135
- var appearanceConfig = tabConfig.appearance && tabConfig.appearance[appearance];
133
+ var className = props.className, appearance = props.appearance, children = props.children, label = props.label, badgeValue = props.badgeValue, dataTour = props.dataTour, href = props.href, link = props.link, rel = props.rel, reset = props.reset, target = props.target, before = props.before, after = props.after, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
134
+ var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
135
+ var _a;
136
+ return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = tabConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
137
+ }, {});
136
138
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
137
- var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
139
+ var justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelColor = propsGenerator.labelColor, labelColorActive = propsGenerator.labelColorActive, labelTextAlign = propsGenerator.labelTextAlign, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextGradient = propsGenerator.labelTextGradient, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, dividerFillDisabled = propsGenerator.dividerFillDisabled, fillDisabledClass = propsGenerator.fillDisabledClass, labelColorDisabled = propsGenerator.labelColorDisabled, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerFillActive = propsGenerator.dividerFillActive, dividerFillActiveHover = propsGenerator.dividerFillActiveHover, dividerFillHover = propsGenerator.dividerFillHover, dividerSize = propsGenerator.dividerSize, linkFill = propsGenerator.linkFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
138
140
  // @ts-expect-error
139
141
  var tab = useStyles.useStyles(props).styles;
140
142
  return (jsxRuntime.jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
141
143
  ? fillClass && "fill_".concat(fillClass)
142
- : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, textColor: isDisabled
143
- ? labelColorDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorDisabled)
144
- : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), shape: badgeShape, size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: isDisabled
145
- ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
146
- : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
144
+ : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize, children: label })), badgeValue && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, size: badgeSize, value: badgeValue }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover, size: dividerSize })] })), after] }) }) }));
147
145
  }
148
146
 
149
147
  function TabGroup(props) {
@@ -113,6 +113,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
113
113
  },
114
114
  };
115
115
  return new Proxy(propsGenerator, generatorProxyHandler);
116
+ // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
116
117
  }, [componentProps, appearanceConfig, deviceCurrentMainType]);
117
118
  return devicePropsGenerator;
118
119
  }
@@ -1,4 +1,4 @@
1
- export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-DZ3z7f-A.js';
1
+ export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-BtAUGGPc.js';
2
2
  import '../tslib.es6-5FtW-kfi.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
@@ -32,15 +32,15 @@ var cellConfig = {
32
32
  },
33
33
  };
34
34
  function Cell(props) {
35
- var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, appearance = props.appearance, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize,
35
+ var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize,
36
36
  // titleLabelTextSize,
37
37
  titleTag = props.titleTag, titleTextColor = props.titleTextColor,
38
38
  // titleTextSize,
39
- titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize,
39
+ titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, mode = props.mode, reverse = props.reverse, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize,
40
40
  // valueLabelTextSize,
41
41
  valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor,
42
42
  // valueTextSize,
43
- valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
43
+ valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, before = props.before, after = props.after, isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
44
44
  // @ts-expect-error
45
45
  var appearanceConfig = cellConfig.appearance && cellConfig.appearance[appearance];
46
46
  var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
@@ -54,7 +54,11 @@ function Cell(props) {
54
54
  /* eslint-enable perfectionist/sort-objects */
55
55
  // @ts-expect-error
56
56
  var _b = useStyles(props), dataStyles = _b.data, cellStyles = _b.styles;
57
- return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !cellStyles.width && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
57
+ return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled &&
58
+ bgFillDisabledClass &&
59
+ "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !(cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles.width) && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled &&
60
+ fillDisabledClass &&
61
+ "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, size: titleTextSize, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, size: valueTextSize, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
58
62
  }
59
63
 
60
64
  export { Cell, cellAppearance, cellConfig };
@@ -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 '../Button-DZ3z7f-A.js';
6
+ import { B as Button } from '../Button-BtAUGGPc.js';
7
7
  import { G as Group } from '../Group-DiMnEfge.js';
8
8
  import { T as Text } from '../Text-C6NSmetx.js';
9
9
  import '../tslib.es6-5FtW-kfi.js';
@@ -6,7 +6,7 @@ import { ru } from 'date-fns/locale';
6
6
  import DatePicker from 'react-datepicker';
7
7
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
8
  import { useStyles } from '../hooks/useStyles/useStyles.js';
9
- import { B as Button } from '../Button-DZ3z7f-A.js';
9
+ import { B as Button } from '../Button-BtAUGGPc.js';
10
10
  import { I as Icon } from '../Icon-htF_V35Y.js';
11
11
  import { I as Input } from '../Input-COFdaiTe.js';
12
12
  import { L as Label } from '../Label-Dpeq55TV.js';
@@ -5,7 +5,7 @@ import clsx from 'clsx';
5
5
  import SVG from 'react-inlinesvg';
6
6
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
7
7
  import { useStyles } from '../hooks/useStyles/useStyles.js';
8
- import { B as Button } from '../Button-DZ3z7f-A.js';
8
+ import { B as Button } from '../Button-BtAUGGPc.js';
9
9
  import { G as Group } from '../Group-DiMnEfge.js';
10
10
  import { T as Text } from '../Text-C6NSmetx.js';
11
11
  import 'lodash/camelCase';