@itcase/ui 1.8.38 → 1.8.40

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 (162) hide show
  1. package/dist/{Avatar_cjs_nMPCDjk8.js → Avatar_cjs_BbeDJ-No.js} +2 -2
  2. package/dist/{Avatar_es_B73a6TzA.js → Avatar_es_B1Ao9Im_.js} +2 -2
  3. package/dist/{Button_cjs_plv5-qcj.js → Button_cjs_Ctkyt2ES.js} +1 -1
  4. package/dist/{Button_es_BigB2Wz6.js → Button_es_BiIuX0ER.js} +1 -1
  5. package/dist/{ChipsGroup_cjs_DrOhD-Fc.js → ChipsGroup_cjs_p99H-9a8.js} +48 -64
  6. package/dist/{ChipsGroup_es_B9m4l0wN.js → ChipsGroup_es_CWq3TR_1.js} +48 -64
  7. package/dist/{DatePicker_cjs_DKoF73mp.js → DatePicker_cjs_D_1v2mS0.js} +3 -3
  8. package/dist/{DatePicker_es_CdEYxtwj.js → DatePicker_es_CQwbdG0g.js} +3 -3
  9. package/dist/{DropdownItem_cjs_DQvByLbN.js → DropdownItem_cjs_B1gGciTB.js} +26 -9
  10. package/dist/{DropdownItem_es_KppIfto7.js → DropdownItem_es_JVT4f6Nb.js} +26 -9
  11. package/dist/{Image_cjs_CCWqbNn4.js → Image_cjs_2zEjohYE.js} +5 -4
  12. package/dist/{Image_es_DZUVp0FS.js → Image_es_ChF-63wh.js} +5 -4
  13. package/dist/{Label_cjs_BGJfyrOL.js → Label_cjs_Mb8j2bLu.js} +1 -5
  14. package/dist/{Label_es_C4Px7b-N.js → Label_es_CIDBUVgO.js} +1 -5
  15. package/dist/{Tooltip_cjs_DHduWa-v.js → Tooltip_cjs_BBwH8sjA.js} +16 -6
  16. package/dist/{Tooltip_es_ltCY-w4M.js → Tooltip_es_Y2aoFQW7.js} +16 -6
  17. package/dist/cjs/components/Accordion.js +3 -1
  18. package/dist/cjs/components/Avatar.js +5 -3
  19. package/dist/cjs/components/AvatarStack.js +5 -3
  20. package/dist/cjs/components/Badge.js +3 -1
  21. package/dist/cjs/components/Breadcrumbs.js +3 -1
  22. package/dist/cjs/components/Button.js +4 -2
  23. package/dist/cjs/components/Cell.js +4 -2
  24. package/dist/cjs/components/Chips.js +5 -2
  25. package/dist/cjs/components/Choice.js +3 -1
  26. package/dist/cjs/components/CookiesWarning.js +4 -2
  27. package/dist/cjs/components/DatePeriod.js +8 -5
  28. package/dist/cjs/components/DatePicker.js +6 -4
  29. package/dist/cjs/components/Drawer.js +3 -1
  30. package/dist/cjs/components/Dropdown/stories/__mock__.js +27 -4
  31. package/dist/cjs/components/Dropdown.js +5 -3
  32. package/dist/cjs/components/HeroTitle.js +3 -1
  33. package/dist/cjs/components/Icon.js +3 -1
  34. package/dist/cjs/components/Image.js +5 -3
  35. package/dist/cjs/components/InputPassword.js +3 -1
  36. package/dist/cjs/components/Label.js +4 -2
  37. package/dist/cjs/components/Logo.js +7 -5
  38. package/dist/cjs/components/MenuItem.js +3 -1
  39. package/dist/cjs/components/Modal.js +3 -1
  40. package/dist/cjs/components/Notification.js +3 -1
  41. package/dist/cjs/components/Pagination.js +68 -21
  42. package/dist/cjs/components/Radio.js +45 -65
  43. package/dist/cjs/components/Response.js +8 -5
  44. package/dist/cjs/components/SVGContent.js +5 -3
  45. package/dist/cjs/components/Search.js +3 -1
  46. package/dist/cjs/components/Segmented.js +3 -1
  47. package/dist/cjs/components/Select.js +5 -3
  48. package/dist/cjs/components/Swiper.js +3 -1
  49. package/dist/cjs/components/Tab.js +3 -1
  50. package/dist/cjs/components/Textarea.js +1 -1
  51. package/dist/cjs/components/Tile.js +3 -1
  52. package/dist/cjs/components/Title.js +3 -1
  53. package/dist/cjs/components/Tooltip.js +3 -1
  54. package/dist/cjs/context/UrlAssetPrefix.js +17 -0
  55. package/dist/cjs/hoc/urlWithAssetPrefix.js +64 -0
  56. package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +29 -0
  57. package/dist/cjs/hooks/useAppearanceConfig.js +9 -0
  58. package/dist/components/Accordion.js +3 -1
  59. package/dist/components/Avatar.js +5 -3
  60. package/dist/components/AvatarStack.js +5 -3
  61. package/dist/components/Badge.js +3 -1
  62. package/dist/components/Breadcrumbs.js +3 -1
  63. package/dist/components/Button.js +4 -2
  64. package/dist/components/Cell.js +4 -2
  65. package/dist/components/Chips.js +5 -2
  66. package/dist/components/Choice.js +3 -1
  67. package/dist/components/CookiesWarning.js +4 -2
  68. package/dist/components/DatePeriod.js +8 -5
  69. package/dist/components/DatePicker.js +6 -4
  70. package/dist/components/Drawer.js +3 -1
  71. package/dist/components/Dropdown/stories/__mock__.js +26 -5
  72. package/dist/components/Dropdown.js +5 -3
  73. package/dist/components/HeroTitle.js +3 -1
  74. package/dist/components/Icon.js +3 -1
  75. package/dist/components/Image.js +5 -3
  76. package/dist/components/InputPassword.js +3 -1
  77. package/dist/components/Label.js +4 -2
  78. package/dist/components/Logo.js +7 -5
  79. package/dist/components/MenuItem.js +3 -1
  80. package/dist/components/Modal.js +3 -1
  81. package/dist/components/Notification.js +3 -1
  82. package/dist/components/Pagination.js +69 -22
  83. package/dist/components/Radio.js +45 -65
  84. package/dist/components/Response.js +8 -5
  85. package/dist/components/SVGContent.js +5 -3
  86. package/dist/components/Search.js +3 -1
  87. package/dist/components/Segmented.js +3 -1
  88. package/dist/components/Select.js +5 -3
  89. package/dist/components/Swiper.js +3 -1
  90. package/dist/components/Tab.js +3 -1
  91. package/dist/components/Textarea.js +1 -1
  92. package/dist/components/Tile.js +3 -1
  93. package/dist/components/Title.js +3 -1
  94. package/dist/components/Tooltip.js +3 -1
  95. package/dist/context/UrlAssetPrefix.js +14 -0
  96. package/dist/css/components/Dropdown/Dropdown.css +24 -0
  97. package/dist/css/components/Pagination/Pagination.css +82 -30
  98. package/dist/css/components/Pagination/css/__item/pagination__item.css +8 -8
  99. package/dist/css/components/Pagination/css/__item/pagination__item_size.css +8 -0
  100. package/dist/css/components/Pagination/css/__item/pagination__item_state_active.css +16 -16
  101. package/dist/css/components/Radio/Radio.css +44 -5
  102. package/dist/css/components/Select/Select.css +1 -0
  103. package/dist/css/components/Select/css/__indicators/select__indicators.css +1 -0
  104. package/dist/css/components/Swiper/Swiper.css +2 -2
  105. package/dist/css/styles/fill/fill.css +2 -1
  106. package/dist/css/styles/fill/fill_active.css +3 -0
  107. package/dist/css/styles/fill/fill_active_hover.css +7 -0
  108. package/dist/css/styles/fill/fill_hover.css +5 -9
  109. package/dist/hoc/urlWithAssetPrefix.js +62 -0
  110. package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js +27 -0
  111. package/dist/hooks/useAppearanceConfig.js +3 -0
  112. package/dist/stories/ChipsOverview.mdx +10 -10
  113. package/dist/stories/ChipsPlayground.mdx +2 -2
  114. package/dist/stories/Components.mdx +378 -87
  115. package/dist/stories/useAppearanceConfig.mdx +83 -0
  116. package/dist/stories/useDevicePropsGenerator.mdx +6 -8
  117. package/dist/types/components/Chips/appearance/chipsDisabled.d.ts +2 -3
  118. package/dist/types/components/Dropdown/appearance/dropdownAccent.d.ts +5 -0
  119. package/dist/types/components/Dropdown/appearance/dropdownSize.d.ts +9 -0
  120. package/dist/types/components/Dropdown/appearance/dropdownSurface.d.ts +3 -0
  121. package/dist/types/components/Dropdown/stories/__mock__/index.d.ts +9 -12
  122. package/dist/types/components/Icon/Icon.d.ts +6 -2
  123. package/dist/types/components/Icon/appearance/iconDanger.d.ts +1 -0
  124. package/dist/types/components/Icon/appearance/iconDisabled.d.ts +1 -0
  125. package/dist/types/components/Icon/appearance/iconError.d.ts +1 -0
  126. package/dist/types/components/Icon/appearance/iconInfo.d.ts +0 -1
  127. package/dist/types/components/Icon/appearance/iconPrimary.d.ts +1 -0
  128. package/dist/types/components/Icon/appearance/iconSecondary.d.ts +1 -0
  129. package/dist/types/components/Icon/appearance/iconSuccess.d.ts +1 -0
  130. package/dist/types/components/Icon/appearance/iconSurface.d.ts +1 -0
  131. package/dist/types/components/Icon/appearance/iconWarning.d.ts +1 -0
  132. package/dist/types/components/Image/Image.d.ts +5 -2
  133. package/dist/types/components/Label/appearance/labelError.d.ts +0 -1
  134. package/dist/types/components/Label/appearance/labelGradient.d.ts +8 -0
  135. package/dist/types/components/Label/appearance/labelPrimary.d.ts +0 -1
  136. package/dist/types/components/Label/appearance/labelSuccess.d.ts +0 -1
  137. package/dist/types/components/Label/appearance/labelSurface.d.ts +0 -1
  138. package/dist/types/components/Logo/Logo.d.ts +6 -2
  139. package/dist/types/components/Pagination/appearance/paginationAccent.d.ts +22 -1
  140. package/dist/types/components/Pagination/appearance/paginationSize.d.ts +20 -1
  141. package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +4 -1
  142. package/dist/types/components/Radio/Radio.appearance.d.ts +28 -48
  143. package/dist/types/components/Radio/appearance/radioDefault.d.ts +2 -14
  144. package/dist/types/components/Radio/appearance/radioDisabled.d.ts +5 -5
  145. package/dist/types/components/Radio/appearance/radioError.d.ts +6 -5
  146. package/dist/types/components/Radio/appearance/radioRequire.d.ts +5 -13
  147. package/dist/types/components/Radio/appearance/radioStyle.d.ts +4 -6
  148. package/dist/types/components/Radio/appearance/radioSuccess.d.ts +6 -5
  149. package/dist/types/components/Response/Response.d.ts +6 -2
  150. package/dist/types/components/Response/Response.interface.d.ts +3 -1
  151. package/dist/types/components/SVGContent/SVGContent.d.ts +5 -2
  152. package/dist/types/components/Select/SelectLoadingIndicator.d.ts +2 -1
  153. package/dist/types/config/forms/datepicker.d.ts +18 -0
  154. package/dist/types/config/forms/index.d.ts +3 -0
  155. package/dist/types/config/forms/input.d.ts +14 -0
  156. package/dist/types/context/UrlAssetPrefix.d.ts +12 -0
  157. package/dist/types/hoc/urlWithAssetPrefix.d.ts +8 -0
  158. package/dist/types/hooks/useAppearanceConfig/index.d.ts +1 -0
  159. package/dist/types/hooks/useAppearanceConfig/useAppearanceConfig.d.ts +7 -0
  160. package/dist/types/hooks/useDevicePropsGenerator/index.d.ts +1 -0
  161. package/package.json +22 -17
  162. package/dist/types/hooks/useDeviceTargetClass.d.ts +0 -5
@@ -3,16 +3,18 @@
3
3
  var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var clsx = require('clsx');
6
+ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
6
7
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
7
8
  var useStyles = require('../hooks/useStyles/useStyles.js');
8
9
  var Link = require('../../Link_cjs_DbRGq2Yk.js');
9
10
  require('react');
11
+ require('@itcase/common');
12
+ require('../context/UrlAssetPrefix.js');
10
13
  require('lodash/camelCase');
11
14
  require('lodash/castArray');
12
15
  require('lodash/upperFirst');
13
16
  require('../context/Notifications.js');
14
17
  require('uuid');
15
- require('@itcase/common');
16
18
  require('../context/UIContext.js');
17
19
  require('../hooks/useMediaQueries/useMediaQueries.js');
18
20
  require('react-responsive');
@@ -26,18 +28,18 @@ var logoConfig = {
26
28
  logoConfig.appearance = appearanceConfig;
27
29
  },
28
30
  };
29
- function Logo(props) {
31
+ var Logo = urlWithAssetPrefix.urlWithAssetPrefix(function Logo(props) {
30
32
  var className = props.className, appearance = props.appearance, size = props.size, href = props.href, link = props.link, mode = props.mode;
31
33
  var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
32
34
  var _a;
33
35
  return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = logoConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
34
36
  }, {});
35
37
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
36
- var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, source = propsGenerator.source, widthClass = propsGenerator.widthClass;
38
+ var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignItemsClass = propsGenerator.alignItemsClass, src = propsGenerator.src, title = propsGenerator.title, alt = propsGenerator.alt, widthClass = propsGenerator.widthClass;
37
39
  // @ts-expect-error
38
40
  var logo = useStyles.useStyles(props).styles;
39
- return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), alt, title, mode && "logo_mode_".concat(mode), size && "logo_size_".concat(size), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src || source, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src || source, title: title || alt, alt: alt || title })) }));
40
- }
41
+ return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), alt, title, mode && "logo_mode_".concat(mode), size && "logo_size_".concat(size), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
42
+ });
41
43
 
42
44
  exports.Logo = Logo;
43
45
  exports.logoConfig = logoConfig;
@@ -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 Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
9
+ var Tooltip = require('../../Tooltip_cjs_BBwH8sjA.js');
10
10
  var Link = require('../../Link_cjs_DbRGq2Yk.js');
11
11
  var Text = require('../../Text_cjs_C9fOm0nd.js');
12
12
  require('lodash/camelCase');
@@ -22,6 +22,8 @@ require('../utils/setViewportProperty.js');
22
22
  require('lodash/maxBy');
23
23
  require('../hooks/useStyles/styleAttributes.js');
24
24
  require('react-inlinesvg');
25
+ require('../hoc/urlWithAssetPrefix.js');
26
+ require('../context/UrlAssetPrefix.js');
25
27
 
26
28
  var menuItemAppearanceAccent = {
27
29
  accentPrimary: {
@@ -8,7 +8,7 @@ var ReactDOM = require('react-dom');
8
8
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
9
9
  var useStyles = require('../hooks/useStyles/useStyles.js');
10
10
  var Overlay = require('../../Overlay_cjs_CFOtnzDU.js');
11
- var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
11
+ var Tooltip = require('../../Tooltip_cjs_BBwH8sjA.js');
12
12
  var Loader = require('../../Loader_cjs_Ca4i0sER.js');
13
13
  require('lodash/camelCase');
14
14
  require('lodash/castArray');
@@ -24,6 +24,8 @@ require('lodash/maxBy');
24
24
  require('../hooks/useStyles/styleAttributes.js');
25
25
  require('../../Text_cjs_C9fOm0nd.js');
26
26
  require('react-inlinesvg');
27
+ require('../hoc/urlWithAssetPrefix.js');
28
+ require('../context/UrlAssetPrefix.js');
27
29
  require('../../Link_cjs_DbRGq2Yk.js');
28
30
 
29
31
  var modalAppearanceSurface = {
@@ -5,7 +5,7 @@ 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 Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
8
+ var Tooltip = require('../../Tooltip_cjs_BBwH8sjA.js');
9
9
  var Text = require('../../Text_cjs_C9fOm0nd.js');
10
10
  var _default = require('@itcase/icons/default');
11
11
  var Notifications = require('../context/Notifications.js');
@@ -22,6 +22,8 @@ require('../utils/setViewportProperty.js');
22
22
  require('lodash/maxBy');
23
23
  require('../hooks/useStyles/styleAttributes.js');
24
24
  require('react-inlinesvg');
25
+ require('../hoc/urlWithAssetPrefix.js');
26
+ require('../context/UrlAssetPrefix.js');
25
27
  require('../../Link_cjs_DbRGq2Yk.js');
26
28
 
27
29
  var notificationAppearanceDefault = {
@@ -8,8 +8,8 @@ var ceil = require('lodash/ceil');
8
8
  var ReactPaginate = require('react-paginate');
9
9
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
10
  var useStyles = require('../hooks/useStyles/useStyles.js');
11
- var DropdownItem = require('../../DropdownItem_cjs_DQvByLbN.js');
12
- var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
11
+ var DropdownItem = require('../../DropdownItem_cjs_B1gGciTB.js');
12
+ var Tooltip = require('../../Tooltip_cjs_BBwH8sjA.js');
13
13
  var Text = require('../../Text_cjs_C9fOm0nd.js');
14
14
  var _default = require('@itcase/icons/default');
15
15
  require('lodash/camelCase');
@@ -26,6 +26,8 @@ require('lodash/maxBy');
26
26
  require('../hooks/useStyles/styleAttributes.js');
27
27
  require('../../Divider_cjs_BmCJj3TN.js');
28
28
  require('react-inlinesvg');
29
+ require('../hoc/urlWithAssetPrefix.js');
30
+ require('../context/UrlAssetPrefix.js');
29
31
  require('../../Link_cjs_DbRGq2Yk.js');
30
32
 
31
33
  var paginationAppearanceAccent = {
@@ -35,8 +37,29 @@ var paginationAppearanceAccent = {
35
37
  },
36
38
  accentPrimary: {
37
39
  fill: 'accentPrimary',
38
- fillHover: 'accentPrimaryHover',
40
+ fillActive: 'accentQuaternary',
41
+ fillInput: 'surfacePrimary',
39
42
  borderColor: 'accentBorderPrimary',
43
+ textColor: 'accentTextPrimary',
44
+ builderIconFillIcon: 'accentItemPrimary',
45
+ nextIconFillIcon: 'accentItemPrimary',
46
+ pageCountDescTextColor: 'surfaceTextPrimary',
47
+ pageCountDropdownAlignment: 'topCenter',
48
+ pageCountDropdownElevation: 8,
49
+ pageCountDropdownFill: 'surfacePrimary',
50
+ pageCountDropdownItemDividerFill: 'surfaceSecondary',
51
+ pageCountDropdownItemFill: 'surfacePrimary',
52
+ pageCountDropdownItemFillActive: 'accentPrimary',
53
+ pageCountDropdownItemFillActiveHover: 'accentActiveHover',
54
+ pageCountDropdownItemFillHover: 'surfaceSecondary',
55
+ pageCountDropdownItemLabelAlign: 'center',
56
+ pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
57
+ pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
58
+ pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
59
+ pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
60
+ pageCountInputIconColor: 'surfaceItemPrimary',
61
+ pageCountInputTextColor: 'surfaceTextPrimary',
62
+ previousIconFillIcon: 'accentItemPrimary',
40
63
  },
41
64
  accentSecondary: {
42
65
  fill: 'accentPrimary',
@@ -53,56 +76,76 @@ var paginationAppearanceSize = {
53
76
  sizeL: {
54
77
  size: 'l',
55
78
  labelTextSize: 'l',
79
+ textSize: 'l',
80
+ builderIcon: _default.icons24.General.Dot,
56
81
  iconAfterFillSize: '24',
57
82
  iconAfterSize: '24',
58
83
  iconBeforeFillSize: '24',
59
84
  iconBeforeSize: '24',
60
- nextIcon: _default.icons32.Arrow.ChevronRightSmall,
85
+ nextIcon: _default.icons24.Arrow.ChevronRightSmall,
61
86
  pageCountDescTextSize: 'l',
62
87
  pageCountDropdownItemDividerSize: 'xxs',
63
88
  pageCountDropdownItemLabelSize: 'm',
64
89
  pageCountDropdownItemSize: 'l',
65
- pageCountInputIcon: _default.icons32.Arrow.ChevronDownSmall,
90
+ pageCountDropdownItemWidth: '64',
91
+ pageCountInputIcon: _default.icons14.Arrow.ChevronDownSmall,
66
92
  pageCountInputIconFillSize: '24',
67
- pageCountInputTextSize: 'm',
68
- previousIcon: _default.icons32.Arrow.ChevronLeftSmall,
93
+ pageCountInputTextSize: 'l',
94
+ previousIcon: _default.icons24.Arrow.ChevronLeftSmall,
69
95
  },
70
96
  sizeM: {
71
97
  size: 'm',
72
98
  labelTextSize: 'm',
99
+ textSize: 'm',
100
+ builderIcon: _default.icons24.General.Dot,
73
101
  iconAfterFillSize: '24',
74
102
  iconAfterSize: '24',
75
103
  iconBeforeFillSize: '24',
76
104
  iconBeforeSize: '24',
77
- nextIcon: _default.icons32.Arrow.ChevronRightSmall,
105
+ nextIcon: _default.icons24.Arrow.ChevronRightSmall,
78
106
  pageCountDescTextSize: 'm',
79
107
  pageCountDropdownItemDividerSize: 'xxs',
80
108
  pageCountDropdownItemLabelSize: 'm',
81
109
  pageCountDropdownItemSize: 'l',
82
- pageCountDropdownItemWidth: '64',
83
110
  pageCountInputIcon: _default.icons14.Arrow.ChevronDownSmall,
84
111
  pageCountInputIconFillSize: '14',
85
112
  pageCountInputTextSize: 'm',
86
- previousIcon: _default.icons32.Arrow.ChevronLeftSmall,
113
+ previousIcon: _default.icons24.Arrow.ChevronLeftSmall,
87
114
  },
88
115
  sizeS: {
89
116
  size: 's',
90
117
  labelTextSize: 's',
118
+ textSize: 's',
119
+ builderIcon: _default.icons24.General.Dot,
91
120
  iconAfterFillSize: '20',
92
121
  iconAfterSize: '20',
93
122
  iconBeforeFillSize: '20',
94
123
  iconBeforeSize: '20',
95
- nextIcon: _default.icons32.Arrow.ChevronRightSmall,
96
- previousIcon: _default.icons32.Arrow.ChevronLeftSmall,
124
+ nextIcon: _default.icons16.Arrow.ChevronRightSmall,
125
+ pageCountDescTextSize: 's',
126
+ pageCountDropdownItemDividerSize: 'xxs',
127
+ pageCountDropdownItemLabelSize: 's',
128
+ pageCountDropdownItemSize: 's',
129
+ pageCountInputIcon: _default.icons14.Arrow.ChevronDownSmall,
130
+ pageCountInputTextSize: 's',
131
+ previousIcon: _default.icons16.Arrow.ChevronLeftSmall,
97
132
  },
98
133
  sizeXS: {
99
134
  size: 'xs',
100
135
  labelTextSize: 'xs',
136
+ textSize: 'xs',
101
137
  beforeSize: '16',
138
+ // TODO: replace builderIcon: icons24.General.Dot with an builderIcon: icons14.General.Dot,
139
+ builderIcon: _default.icons24.General.Dot,
102
140
  iconAfterFillSize: '16',
103
- nextIcon: _default.icons32.Arrow.ChevronRightSmall,
104
- pageCountInputIcon: _default.icons32.Arrow.ChevronDownSmall,
105
- previousIcon: _default.icons32.Arrow.ChevronLeftSmall,
141
+ nextIcon: _default.icons14.Arrow.ChevronRightSmall,
142
+ pageCountDescTextSize: 'xs',
143
+ pageCountDropdownItemDividerSize: 'xxs',
144
+ pageCountDropdownItemLabelSize: 'xs',
145
+ pageCountDropdownItemSize: 'xs',
146
+ pageCountInputIcon: _default.icons14.Arrow.ChevronDownSmall,
147
+ pageCountInputTextSize: 'xs',
148
+ previousIcon: _default.icons14.Arrow.ChevronLeftSmall,
106
149
  },
107
150
  };
108
151
 
@@ -123,7 +166,10 @@ var paginationAppearanceStyle = {
123
166
  var paginationAppearanceSurface = {
124
167
  surfacePrimary: {
125
168
  fill: 'surfacePrimary',
126
- fillHover: 'surfaceSecondary',
169
+ fillActive: 'surfaceTertiary',
170
+ fillInput: 'surfacePrimary',
171
+ textColor: 'surfaceTextPrimary',
172
+ builderIconFillIcon: 'surfaceItemPrimary',
127
173
  nextIconFillIcon: 'surfaceItemPrimary',
128
174
  pageCountDescTextColor: 'surfaceTextPrimary',
129
175
  pageCountDropdownAlignment: 'topCenter',
@@ -155,7 +201,7 @@ var paginationConfig = {
155
201
  },
156
202
  };
157
203
  function Pagination(props) {
158
- var className = props.className, appearance = props.appearance, _a = props.allItemsCount, allItemsCount = _a === void 0 ? 0 : _a, dataTestId = props.dataTestId, dataTour = props.dataTour, _b = props.pageCountArray, pageCountArray = _b === void 0 ? [10, 20, 50, 100] : _b, _c = props.pageCountDesc, pageCountDesc = _c === void 0 ? 'кол-во строк' : _c, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, _d = props.pageNumber, pageNumber = _d === void 0 ? 0 : _d, _e = props.perPageCount, perPageCount = _e === void 0 ? 0 : _e, isPageCount = props.isPageCount, _f = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _f === void 0 ? false : _f, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount,
204
+ var className = props.className, appearance = props.appearance, _a = props.allItemsCount, allItemsCount = _a === void 0 ? 0 : _a, dataTestId = props.dataTestId, dataTour = props.dataTour, _b = props.pageCountArray, pageCountArray = _b === void 0 ? [10, 20, 50, 100] : _b, _c = props.pageCountDesc, pageCountDesc = _c === void 0 ? 'кол-во строк' : _c, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, _d = props.pageNumber, pageNumber = _d === void 0 ? 0 : _d, _e = props.perPageCount, perPageCount = _e === void 0 ? 0 : _e, isPageCount = props.isPageCount, _f = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _f === void 0 ? false : _f, isPageLabelBuilder = props.isPageLabelBuilder, isSkeleton = props.isSkeleton, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount,
159
205
  /**
160
206
  * @deprecated The method should not be used
161
207
  */
@@ -217,14 +263,15 @@ function Pagination(props) {
217
263
  return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = paginationConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
218
264
  }, {});
219
265
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
220
- var justifyContentClass = propsGenerator.justifyContentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, marginPagesDisplayed = propsGenerator.marginPagesDisplayed, nextIcon = propsGenerator.nextIcon, nextIconFill = propsGenerator.nextIconFill, nextIconFillIcon = propsGenerator.nextIconFillIcon, nextIconFillSize = propsGenerator.nextIconFillSize, nextIconSize = propsGenerator.nextIconSize, pageCountDescTextColor = propsGenerator.pageCountDescTextColor, pageCountDescTextSize = propsGenerator.pageCountDescTextSize, pageCountDropdownAlignment = propsGenerator.pageCountDropdownAlignment, pageCountDropdownElevation = propsGenerator.pageCountDropdownElevation, pageCountDropdownFill = propsGenerator.pageCountDropdownFill, pageCountDropdownItemDividerFill = propsGenerator.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = propsGenerator.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = propsGenerator.pageCountDropdownItemFill, pageCountDropdownItemFillActive = propsGenerator.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = propsGenerator.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = propsGenerator.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = propsGenerator.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = propsGenerator.pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive = propsGenerator.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover = propsGenerator.pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover = propsGenerator.pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize = propsGenerator.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = propsGenerator.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = propsGenerator.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = propsGenerator.pageCountDropdownItemSize, pageCountDropdownItemWidth = propsGenerator.pageCountDropdownItemWidth, pageCountDropdownShape = propsGenerator.pageCountDropdownShape, pageCountInputIcon = propsGenerator.pageCountInputIcon, pageCountInputIconColor = propsGenerator.pageCountInputIconColor, pageCountInputIconFillSize = propsGenerator.pageCountInputIconFillSize, pageCountInputIconSrc = propsGenerator.pageCountInputIconSrc, pageCountInputTextColor = propsGenerator.pageCountInputTextColor, pageCountInputTextSize = propsGenerator.pageCountInputTextSize, pageRangeDisplayed = propsGenerator.pageRangeDisplayed, previousIcon = propsGenerator.previousIcon, previousIconFill = propsGenerator.previousIconFill, previousIconFillIcon = propsGenerator.previousIconFillIcon, previousIconFillSize = propsGenerator.previousIconFillSize, previousIconSize = propsGenerator.previousIconSize, sizeClass = propsGenerator.sizeClass;
266
+ var justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillInputClass = propsGenerator.fillInputClass, fillInputHoverClass = propsGenerator.fillInputHoverClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, builderIcon = propsGenerator.builderIcon, builderIconFill = propsGenerator.builderIconFill, builderIconFillIcon = propsGenerator.builderIconFillIcon, builderIconFillSize = propsGenerator.builderIconFillSize, builderIconSize = propsGenerator.builderIconSize, marginPagesDisplayed = propsGenerator.marginPagesDisplayed, nextIcon = propsGenerator.nextIcon, nextIconFill = propsGenerator.nextIconFill, nextIconFillIcon = propsGenerator.nextIconFillIcon, nextIconFillSize = propsGenerator.nextIconFillSize, nextIconSize = propsGenerator.nextIconSize, pageCountDescTextColor = propsGenerator.pageCountDescTextColor, pageCountDescTextSize = propsGenerator.pageCountDescTextSize, pageCountDropdownAlignment = propsGenerator.pageCountDropdownAlignment, pageCountDropdownElevation = propsGenerator.pageCountDropdownElevation, pageCountDropdownFill = propsGenerator.pageCountDropdownFill, pageCountDropdownItemDividerFill = propsGenerator.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = propsGenerator.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = propsGenerator.pageCountDropdownItemFill, pageCountDropdownItemFillActive = propsGenerator.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = propsGenerator.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = propsGenerator.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = propsGenerator.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = propsGenerator.pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive = propsGenerator.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover = propsGenerator.pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover = propsGenerator.pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize = propsGenerator.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = propsGenerator.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = propsGenerator.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = propsGenerator.pageCountDropdownItemSize, pageCountDropdownItemWidth = propsGenerator.pageCountDropdownItemWidth, pageCountDropdownShape = propsGenerator.pageCountDropdownShape, pageCountInputIcon = propsGenerator.pageCountInputIcon, pageCountInputIconColor = propsGenerator.pageCountInputIconColor, pageCountInputIconFillSize = propsGenerator.pageCountInputIconFillSize, pageCountInputIconSrc = propsGenerator.pageCountInputIconSrc, pageCountInputTextColor = propsGenerator.pageCountInputTextColor, pageCountInputTextSize = propsGenerator.pageCountInputTextSize, pageRangeDisplayed = propsGenerator.pageRangeDisplayed, previousIcon = propsGenerator.previousIcon, previousIconFill = propsGenerator.previousIconFill, previousIconFillIcon = propsGenerator.previousIconFillIcon, previousIconFillSize = propsGenerator.previousIconFillSize, previousIconSize = propsGenerator.previousIconSize, sizeClass = propsGenerator.sizeClass;
221
267
  var paginationStyles = useStyles.useStyles(props).styles;
222
- return (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && "pagination_size_".concat(sizeClass)), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", activeClassName: "pagination__item_state_active cursor_type_default", activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
268
+ return (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && "pagination_size_".concat(sizeClass), isSkeleton && "pagination_skeleton"), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && "fill_active_".concat(fillActiveClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
223
269
  "pagination_justify-content_".concat(justifyContentClass)),
224
270
  // pages settings
225
- forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next",
271
+ forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && "pagination__item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass)),
226
272
  // next button
227
- nextLabel: jsxRuntime.jsx(Tooltip.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", previousLabel: jsxRuntime.jsx(Tooltip.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Tooltip.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
273
+ nextLabel: jsxRuntime.jsx(Tooltip.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && "pagination__item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass)), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
274
+ (function () { return (jsxRuntime.jsx(Tooltip.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon })); }), pageLinkClassName: clsx('pagination__item-link', textSizeClass && "pagination__item-link_size_".concat(textSizeClass), textColorClass && 'text', textColorClass && "text-color_".concat(textColorClass)), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && "pagination__item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass)), previousLabel: jsxRuntime.jsx(Tooltip.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillInputClass), fillHoverClass && "fill_hover_".concat(fillInputHoverClass)), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Tooltip.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
228
275
  return activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
229
276
  pageCountDropdownItemShowDivider, isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
230
277
  pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
@@ -22,75 +22,56 @@ require('../hooks/useStyles/styleAttributes.js');
22
22
 
23
23
  var radioAppearanceDefault = {
24
24
  defaultPrimary: {
25
- fillCheckmark: 'surfacePrimary',
26
- fillRadio: 'surfaceTertiary',
27
- fillRadioActive: 'surfaceTertiary',
28
- fillRadioActiveHover: 'surfaceTertiary',
29
- fillRadioHover: 'surfaceTertiary',
25
+ fill: 'surfaceSecondary',
26
+ fillCheckmark: 'surfaceQuaternary',
30
27
  labelTextColor: 'surfaceTextPrimary',
31
28
  descTextColor: 'surfaceTextPrimary',
32
- borderColorRadio: 'surfaceBorderPrimary',
33
- borderColorRadioActive: 'surfaceBorderPrimary',
34
- borderColorRadioActiveHover: 'surfaceBorderPrimary',
35
- borderColorRadioHover: 'surfaceBorderPrimary',
36
- },
37
- defaultSecondary: {
38
- fill: 'surfacePrimary',
39
- borderColor: 'surfaceBorderTertiary',
40
- borderHover: 'surfaceBorderQuaternary',
41
- iconBeforeFill: 'surfaceItemQuaternary',
42
- iconClearFill: 'surfaceItemPrimary',
43
- placeholderTextColor: 'surfaceTextSecondary',
29
+ borderColor: 'surfaceBorderQuaternary',
30
+ borderColorRadio: 'surfaceBorderQuaternary',
31
+ borderColorRadioActive: 'surfaceBorderQuaternary',
44
32
  },
45
33
  };
46
34
 
47
35
  var radioAppearanceDisabled = {
48
36
  disabledPrimary: {
49
- fill: 'warningTertiary',
50
- borderColor: 'warningBorderQuaternary',
51
- borderHover: 'warningBorderQuaternary',
52
- textColor: 'surfaceTextPrimary',
53
- iconBeforeFill: 'warningItemQuaternary',
54
- iconClearFill: 'warningItemPrimary',
55
- placeholderTextColor: 'surfaceTextQuaternary',
37
+ fill: 'surfaceDisabled',
38
+ fillCheckmark: 'surfaceQuaternary',
39
+ labelTextColor: 'surfaceTextDisabled',
40
+ descTextColor: 'surfaceTextDisabled',
41
+ borderColor: 'surfaceBorderDisabled',
42
+ borderColorRadio: 'surfaceBorderDisabled',
43
+ borderColorRadioActive: 'surfaceBorderDisabled',
56
44
  },
57
45
  };
58
46
 
59
47
  var radioAppearanceError = {
60
- error: {
61
- fill: 'errorPrimary',
62
- fillHover: 'errorPrimaryHover',
63
- labelTextColor: 'errorTextPrimary',
64
- labelTextColorHover: 'errorTextPrimary',
65
- loaderFill: 'errorPrimary',
66
- loaderItemFill: 'errorItemPrimary',
48
+ errorPrimary: {
49
+ fill: 'errorTertiary',
50
+ fillCheckmark: 'errorPrimary',
51
+ labelTextColor: 'surfaceTextPrimary',
52
+ descTextColor: 'surfaceTextPrimary',
53
+ borderColor: 'errorBorderQuaternary',
54
+ borderColorRadio: 'errorBorderQuaternary',
55
+ borderColorRadioActive: 'errorBorderQuaternary',
67
56
  },
68
57
  };
69
58
 
70
59
  var radioAppearanceRequire = {
71
60
  requirePrimary: {
72
61
  fill: 'warningTertiary',
73
- borderColor: 'warningBorderQuaternary',
74
- borderHover: 'warningBorderQuaternary',
75
- textColor: 'surfaceTextPrimary',
76
- iconBeforeFill: 'warningItemQuaternary',
77
- iconClearFill: 'warningItemPrimary',
78
- placeholderTextColor: 'surfaceTextQuaternary',
79
- },
80
- requireSecondary: {
81
- fill: 'surfaceSecondary',
82
- borderColor: 'surfaceBorderTertiary',
83
- borderHover: 'surfaceBorderQuaternary',
84
- iconBeforeFill: 'surfaceItemQuaternary',
85
- iconClearFill: 'surfaceItemPrimary',
86
- placeholderTextColor: 'surfaceTextSecondary',
62
+ fillCheckmark: 'warningPrimary',
63
+ labelTextColor: 'surfaceTextPrimary',
64
+ descTextColor: 'surfaceTextPrimary',
65
+ borderColor: 'warningBorderSecondary',
66
+ borderColorRadio: 'warningBorderSecondary',
67
+ borderColorRadioActive: 'warningBorderSecondary',
87
68
  },
88
69
  };
89
70
 
90
71
  var radioAppearanceSize = {
91
72
  sizeM: {
92
73
  size: 'm',
93
- labelTextSize: 'm',
74
+ labelTextSize: 's',
94
75
  descTextSize: 'xs',
95
76
  },
96
77
  sizeXS: {
@@ -106,29 +87,28 @@ var radioAppearanceSize = {
106
87
  };
107
88
 
108
89
  var radioAppearanceStyle = {
109
- full: {
110
- borderColor: '0',
111
- },
112
- ghost: {
113
- fill: 'none',
114
- borderColor: '0',
90
+ solid: {
91
+ borderColor: 'none',
115
92
  },
116
93
  outlined: {
117
94
  fill: 'none',
118
95
  },
119
- solid: {
120
- borderColor: '0',
96
+ full: {},
97
+ ghost: {
98
+ fill: 'none',
99
+ borderColor: 'none',
121
100
  },
122
101
  };
123
102
 
124
103
  var radioAppearanceSuccess = {
125
- success: {
126
- fill: 'successPrimary',
127
- fillHover: 'successPrimaryHover',
128
- labelTextColor: 'successTextSecondary',
129
- labelTextColorHover: 'successTextSecondary',
130
- loaderFill: 'successPrimary',
131
- loaderItemFill: 'successItemPrimary',
104
+ successPrimary: {
105
+ fill: 'successTertiary',
106
+ fillCheckmark: 'accentItemSecondary',
107
+ labelTextColor: 'surfaceTextPrimary',
108
+ descTextColor: 'surfaceTextPrimary',
109
+ borderColor: 'accentBorderSecondary',
110
+ borderColorRadio: 'accentBorderSecondary',
111
+ borderColorRadioActive: 'accentBorderSecondary',
132
112
  },
133
113
  };
134
114
 
@@ -141,14 +121,14 @@ var radioConfig = {
141
121
  },
142
122
  };
143
123
  function Radio(props) {
144
- var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
124
+ var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isSkeleton = props.isSkeleton, onChange = props.onChange;
145
125
  var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
146
126
  var _a;
147
127
  return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = radioConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
148
128
  }, {});
149
129
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
150
- var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b;
151
- return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && "shape_".concat(shapeClass), !checked
130
+ var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b, sizeClass = propsGenerator.sizeClass;
131
+ return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked
152
132
  ? fillRadioClass && "fill_".concat(fillRadioClass)
153
133
  : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked
154
134
  ? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)
@@ -160,7 +140,7 @@ function Radio(props) {
160
140
  ? borderColorRadioHoverClass &&
161
141
  "border-color_hover_".concat(borderColorRadioHoverClass)
162
142
  : borderColorRadioActiveHoverClass &&
163
- "border-color_active_hover_".concat(borderColorRadioActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
143
+ "border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
164
144
  }
165
145
 
166
146
  exports.Radio = Radio;
@@ -5,24 +5,26 @@ var jsxRuntime = require('react/jsx-runtime');
5
5
  var React = require('react');
6
6
  var clsx = require('clsx');
7
7
  var SVG = require('react-inlinesvg');
8
+ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
8
9
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
9
10
  var useStyles = require('../hooks/useStyles/useStyles.js');
10
- var Button = require('../../Button_cjs_plv5-qcj.js');
11
+ var Button = require('../../Button_cjs_Ctkyt2ES.js');
11
12
  var Group = require('../../Group_cjs_Cwt0gWk4.js');
12
13
  var Text = require('../../Text_cjs_C9fOm0nd.js');
14
+ require('@itcase/common');
15
+ require('../context/UrlAssetPrefix.js');
13
16
  require('lodash/camelCase');
14
17
  require('lodash/castArray');
15
18
  require('lodash/upperFirst');
16
19
  require('../context/Notifications.js');
17
20
  require('uuid');
18
- require('@itcase/common');
19
21
  require('../context/UIContext.js');
20
22
  require('../hooks/useMediaQueries/useMediaQueries.js');
21
23
  require('react-responsive');
22
24
  require('../utils/setViewportProperty.js');
23
25
  require('lodash/maxBy');
24
26
  require('../hooks/useStyles/styleAttributes.js');
25
- require('../../Tooltip_cjs_DHduWa-v.js');
27
+ require('../../Tooltip_cjs_BBwH8sjA.js');
26
28
  require('../../Link_cjs_DbRGq2Yk.js');
27
29
  require('../../Loader_cjs_Ca4i0sER.js');
28
30
 
@@ -144,7 +146,7 @@ var responseConfig = {
144
146
  responseConfig.appearance = appearanceConfig;
145
147
  },
146
148
  };
147
- function Response(props) {
149
+ var Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
148
150
  var className = props.className, appearance = props.appearance, width = props.width, height = props.height, title = props.title, desc = props.desc, primaryButton = props.primaryButton, onClickSecondaryButton = props.onClickSecondaryButton, secondaryButton = props.secondaryButton, before = props.before, after = props.after, isSkeleton = props.isSkeleton;
149
151
  var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
150
152
  var _a;
@@ -152,6 +154,7 @@ function Response(props) {
152
154
  }, {});
153
155
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
154
156
  var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, onClickPrimaryButton = propsGenerator.onClickPrimaryButton, primaryButtonAfter = propsGenerator.primaryButtonAfter, primaryButtonAppearance = propsGenerator.primaryButtonAppearance, primaryButtonBefore = propsGenerator.primaryButtonBefore, primaryButtonFill = propsGenerator.primaryButtonFill, primaryButtonFillHover = propsGenerator.primaryButtonFillHover, primaryButtonLabel = propsGenerator.primaryButtonLabel, primaryButtonLabelTextColor = propsGenerator.primaryButtonLabelTextColor, primaryButtonLabelTextSize = propsGenerator.primaryButtonLabelTextSize, primaryButtonShape = propsGenerator.primaryButtonShape, primaryButtonSize = propsGenerator.primaryButtonSize, primaryButtonWidth = propsGenerator.primaryButtonWidth, secondaryButtonAfter = propsGenerator.secondaryButtonAfter, secondaryButtonAppearance = propsGenerator.secondaryButtonAppearance, secondaryButtonBefore = propsGenerator.secondaryButtonBefore, secondaryButtonFill = propsGenerator.secondaryButtonFill, secondaryButtonFillHover = propsGenerator.secondaryButtonFillHover, secondaryButtonLabel = propsGenerator.secondaryButtonLabel, secondaryButtonLabelTextColor = propsGenerator.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = propsGenerator.secondaryButtonLabelTextSize, secondaryButtonShape = propsGenerator.secondaryButtonShape, secondaryButtonSize = propsGenerator.secondaryButtonSize, secondaryButtonWidth = propsGenerator.secondaryButtonWidth, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, imageSrc = propsGenerator.imageSrc, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, SvgImage = propsGenerator.SvgImage, svgPathFillClass = propsGenerator.svgPathFillClass, svgSrc = propsGenerator.svgSrc;
157
+ // TODO: use Icon instead?
155
158
  var ImageComponent = React.useMemo(function () {
156
159
  var src = imageSrc || svgSrc;
157
160
  var Image = SvgImage;
@@ -185,7 +188,7 @@ function Response(props) {
185
188
  secondaryButtonLabel ||
186
189
  secondaryButton ||
187
190
  appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
188
- }
191
+ });
189
192
  var removeFillStroke = function (code) {
190
193
  return code
191
194
  .replace(/fill=".*?"/g, 'fill=""')
@@ -3,16 +3,18 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var clsx = require('clsx');
5
5
  var SVG = require('react-inlinesvg');
6
+ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
6
7
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
7
8
  var useStyles = require('../hooks/useStyles/useStyles.js');
8
9
  require('../../tslib.es6_cjs_CCZ3TN_7.js');
9
10
  require('react');
11
+ require('@itcase/common');
12
+ require('../context/UrlAssetPrefix.js');
10
13
  require('lodash/camelCase');
11
14
  require('lodash/castArray');
12
15
  require('lodash/upperFirst');
13
16
  require('../context/Notifications.js');
14
17
  require('uuid');
15
- require('@itcase/common');
16
18
  require('../context/UIContext.js');
17
19
  require('../hooks/useMediaQueries/useMediaQueries.js');
18
20
  require('react-responsive');
@@ -20,13 +22,13 @@ require('../utils/setViewportProperty.js');
20
22
  require('lodash/maxBy');
21
23
  require('../hooks/useStyles/styleAttributes.js');
22
24
 
23
- function SVGContent(props) {
25
+ var SVGContent = urlWithAssetPrefix.urlWithAssetPrefix(function SVGContent(props) {
24
26
  var className = props.className, src = props.src, SvgImage = props.SvgImage;
25
27
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
26
28
  var svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass;
27
29
  // @ts-expect-error
28
30
  var svgContentStyles = useStyles.useStyles(props).styles;
29
31
  return (jsxRuntime.jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass)), style: svgContentStyles, children: [src && jsxRuntime.jsx(SVG, { src: src }), SvgImage && jsxRuntime.jsx(SvgImage, {})] }));
30
- }
32
+ });
31
33
 
32
34
  exports.SVGContent = SVGContent;
@@ -7,7 +7,7 @@ var React = require('react');
7
7
  var clsx = require('clsx');
8
8
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
9
9
  var useStyles = require('../hooks/useStyles/useStyles.js');
10
- var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
10
+ var Tooltip = require('../../Tooltip_cjs_BBwH8sjA.js');
11
11
  var Text = require('../../Text_cjs_C9fOm0nd.js');
12
12
  var Scrollbar = require('../../Scrollbar_cjs_DcKOfcNp.js');
13
13
  require('lodash/camelCase');
@@ -23,6 +23,8 @@ require('../utils/setViewportProperty.js');
23
23
  require('lodash/maxBy');
24
24
  require('../hooks/useStyles/styleAttributes.js');
25
25
  require('react-inlinesvg');
26
+ require('../hoc/urlWithAssetPrefix.js');
27
+ require('../context/UrlAssetPrefix.js');
26
28
  require('../../Link_cjs_DbRGq2Yk.js');
27
29
  require('react-scrollbars-custom');
28
30
 
@@ -4,7 +4,7 @@ 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
6
  var clsx = require('clsx');
7
- var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
7
+ var Tooltip = require('../../Tooltip_cjs_BBwH8sjA.js');
8
8
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
9
9
  var Text = require('../../Text_cjs_C9fOm0nd.js');
10
10
  require('../hooks/useStyles/useStyles.js');
@@ -20,6 +20,8 @@ require('react-responsive');
20
20
  require('../utils/setViewportProperty.js');
21
21
  require('../hooks/useStyles/styleAttributes.js');
22
22
  require('react-inlinesvg');
23
+ require('../hoc/urlWithAssetPrefix.js');
24
+ require('../context/UrlAssetPrefix.js');
23
25
  require('../../Link_cjs_DbRGq2Yk.js');
24
26
  require('lodash/castArray');
25
27