@itcase/ui 1.8.32 → 1.8.34

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 (101) hide show
  1. package/dist/{DatePicker_cjs_BYh1Dsto.js → DatePicker_cjs_C-VbK2J4.js} +9 -9
  2. package/dist/{DatePicker_es_DEAcYDTL.js → DatePicker_es_CIEHQyHC.js} +9 -9
  3. package/dist/{Input_cjs_BAVggtkk.js → Input_cjs_arr_wxD2.js} +21 -20
  4. package/dist/{Input_es_CNduH28G.js → Input_es_BW6cZThr.js} +21 -20
  5. package/dist/{Label_cjs_CZMMdwt5.js → Label_cjs_BWbVsB-u.js} +3 -3
  6. package/dist/{Label_es_DmDqs4Rc.js → Label_es_ouC2i_iI.js} +3 -3
  7. package/dist/cjs/components/Breadcrumbs/stories/__mock__.js +7 -15
  8. package/dist/cjs/components/Cell.js +1 -1
  9. package/dist/cjs/components/Choice/stories/__mock__.js +15 -15
  10. package/dist/cjs/components/Choice.js +33 -28
  11. package/dist/cjs/components/Code.js +31 -42
  12. package/dist/cjs/components/Dadata.js +1 -1
  13. package/dist/cjs/components/DatePeriod.js +3 -3
  14. package/dist/cjs/components/DatePicker.js +3 -3
  15. package/dist/cjs/components/Dropdown/stories/__mock__.js +2 -2
  16. package/dist/cjs/components/Input.js +1 -1
  17. package/dist/cjs/components/Label.js +1 -1
  18. package/dist/cjs/components/MenuItem.js +14 -7
  19. package/dist/cjs/components/Notification/stories/__mock__.js +4 -0
  20. package/dist/cjs/components/Notification.js +27 -9
  21. package/dist/cjs/components/Pagination.js +101 -20
  22. package/dist/cjs/components/Search.js +15 -14
  23. package/dist/cjs/components/Segmented/stories/__mock__.js +38 -0
  24. package/dist/cjs/components/Segmented.js +13 -10
  25. package/dist/cjs/components/Tab/stories/__mock__.js +6 -1
  26. package/dist/cjs/context/Notifications.js +6 -6
  27. package/dist/components/Breadcrumbs/stories/__mock__.js +7 -15
  28. package/dist/components/Cell.js +1 -1
  29. package/dist/components/Choice/stories/__mock__.js +16 -16
  30. package/dist/components/Choice.js +33 -28
  31. package/dist/components/Code.js +31 -42
  32. package/dist/components/Dadata.js +1 -1
  33. package/dist/components/DatePeriod.js +3 -3
  34. package/dist/components/DatePicker.js +3 -3
  35. package/dist/components/Dropdown/stories/__mock__.js +2 -2
  36. package/dist/components/Input.js +1 -1
  37. package/dist/components/Label.js +1 -1
  38. package/dist/components/MenuItem.js +14 -7
  39. package/dist/components/Notification/stories/__mock__.js +4 -0
  40. package/dist/components/Notification.js +27 -9
  41. package/dist/components/Pagination.js +103 -22
  42. package/dist/components/Search.js +15 -14
  43. package/dist/components/Segmented/stories/__mock__.js +36 -0
  44. package/dist/components/Segmented.js +13 -10
  45. package/dist/components/Tab/stories/__mock__.js +6 -1
  46. package/dist/context/Notifications.js +6 -6
  47. package/dist/css/components/Input/Input.css +6 -0
  48. package/dist/css/components/Notification/Notification.css +23 -0
  49. package/dist/css/components/Pagination/Pagination.css +19 -6
  50. package/dist/css/components/Search/Search.css +0 -1
  51. package/dist/css/components/Search/css/search-input/search-input.css +0 -1
  52. package/dist/css/components/Segmented/Segmented.css +24 -0
  53. package/dist/css/components/Tab/Tab.css +4 -0
  54. package/dist/css/styles/border-color/border-color_hover.css +3 -0
  55. package/dist/stories/CellOverview.mdx +3 -2
  56. package/dist/stories/DatePeriodPlayground.mdx +2 -2
  57. package/dist/stories/RangeSliderOverview.mdx +0 -3
  58. package/dist/stories/VideoOverview.mdx +2 -10
  59. package/dist/stories/VideoPlayground.mdx +2 -2
  60. package/dist/types/components/Breadcrumbs/stories/__mock__/index.d.ts +1 -0
  61. package/dist/types/components/Choice/appearance/choiceDefault.d.ts +7 -0
  62. package/dist/types/components/Choice/appearance/choiceDisabled.d.ts +7 -0
  63. package/dist/types/components/Choice/appearance/choiceRequire.d.ts +6 -0
  64. package/dist/types/components/Choice/appearance/choiceStyle.d.ts +4 -0
  65. package/dist/types/components/Choice/appearance/choiceSuccess.d.ts +6 -0
  66. package/dist/types/components/Choice/stories/__mock__/index.d.ts +9 -3
  67. package/dist/types/components/Code/appearance/codeDisabled.d.ts +7 -11
  68. package/dist/types/components/Code/appearance/codeRequire.d.ts +7 -15
  69. package/dist/types/components/Code/appearance/codeStyle.d.ts +9 -9
  70. package/dist/types/components/Code/appearance/codeSuccess.d.ts +8 -7
  71. package/dist/types/components/DatePicker/DatePicker.appearance.d.ts +1 -1
  72. package/dist/types/components/DatePicker/appearance/datePickerStyle.d.ts +1 -1
  73. package/dist/types/components/Input/appearance/inputDefault.d.ts +2 -2
  74. package/dist/types/components/Input/appearance/inputDisabled.d.ts +2 -2
  75. package/dist/types/components/Input/appearance/inputError.d.ts +2 -2
  76. package/dist/types/components/Input/appearance/inputRequire.d.ts +2 -2
  77. package/dist/types/components/Input/appearance/inputStyle.d.ts +7 -6
  78. package/dist/types/components/Input/appearance/inputSuccess.d.ts +2 -2
  79. package/dist/types/components/Label/appearance/labelInfo.d.ts +1 -1
  80. package/dist/types/components/MenuItem/appearance/menuItemAccent.d.ts +1 -0
  81. package/dist/types/components/MenuItem/appearance/menuItemError.d.ts +1 -0
  82. package/dist/types/components/MenuItem/appearance/menuItemStyle.d.ts +6 -4
  83. package/dist/types/components/MenuItem/appearance/menuItemSurface.d.ts +3 -0
  84. package/dist/types/components/Notification/appearance/notificationInfo.d.ts +17 -0
  85. package/dist/types/components/Notification/appearance/notificationStyle.d.ts +4 -4
  86. package/dist/types/components/Notification/stories/__mock__/index.d.ts +1 -0
  87. package/dist/types/components/Pagination/appearance/paginationAccent.d.ts +21 -0
  88. package/dist/types/components/Pagination/appearance/paginationSize.d.ts +57 -0
  89. package/dist/types/components/Pagination/appearance/paginationStyle.d.ts +14 -0
  90. package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +2 -15
  91. package/dist/types/components/Search/appearance/searchDefault.d.ts +1 -1
  92. package/dist/types/components/Search/appearance/searchDisabled.d.ts +1 -1
  93. package/dist/types/components/Search/appearance/searchError.d.ts +1 -1
  94. package/dist/types/components/Search/appearance/searchRequire.d.ts +1 -1
  95. package/dist/types/components/Search/appearance/searchStyle.d.ts +8 -7
  96. package/dist/types/components/Search/appearance/searchSuccess.d.ts +1 -1
  97. package/dist/types/components/Segmented/Segmented.interface.d.ts +1 -0
  98. package/dist/types/components/Segmented/appearance/segmentedSuccess.d.ts +1 -1
  99. package/dist/types/components/Segmented/stories/__mock__/index.d.ts +17 -0
  100. package/package.json +5 -5
  101. package/dist/types/components/Choice/appearance/choiceSurface.d.ts +0 -25
@@ -25,20 +25,34 @@ import '../Link_es_DxtZLeKY.js';
25
25
  var choiceAppearanceDefault = {
26
26
  defaultPrimary: {
27
27
  fill: 'surfaceSecondary',
28
+ fillItem: 'surfaceItemSecondary',
29
+ fillItemActive: 'surfaceItemQuaternary',
30
+ fillItemHover: 'surfaceItemHover',
28
31
  labelTextColor: 'surfaceTextPrimary',
29
32
  borderColor: 'surfaceBorderQuaternary',
30
33
  iconAfterFill: 'surfaceItemQuaternary',
34
+ iconAfterFillActive: 'surfaceItemSecondary',
31
35
  iconBeforeFill: 'surfaceItemQuaternary',
36
+ iconBeforeFillActive: 'surfaceItemSecondary',
37
+ iconFill: 'surfaceItemQuaternary',
38
+ iconFillActive: 'surfaceItemSecondary',
32
39
  },
33
40
  };
34
41
 
35
42
  var choiceAppearanceDisabled = {
36
43
  disabledPrimary: {
37
44
  fill: 'surfaceDisabled',
45
+ fillItem: 'surfaceItemDisabled',
46
+ fillItemActive: 'surfaceItemPrimary',
47
+ fillItemHover: 'surfaceItemHover',
38
48
  labelTextColor: 'surfaceTextQuaternary',
39
49
  borderColor: 'surfaceBorderPrimary',
40
50
  iconAfterFill: 'surfaceItemPrimary',
51
+ iconAfterFillActive: 'surfaceItemDisabled',
41
52
  iconBeforeFill: 'surfaceItemPrimary',
53
+ iconBeforeFillActive: 'surfaceItemDisabled',
54
+ iconFill: 'surfaceItemPrimary',
55
+ iconFillActive: 'surfaceItemDisabled',
42
56
  },
43
57
  };
44
58
 
@@ -62,11 +76,17 @@ var choiceAppearanceError = {
62
76
  var choiceAppearanceRequire = {
63
77
  requirePrimary: {
64
78
  fill: 'warningTertiary',
65
- fillItemActive: 'warningTertiary',
79
+ fillItem: 'warningTertiary',
80
+ fillItemActive: 'warningItemSecondary',
81
+ fillItemHover: 'warningItemHover',
66
82
  labelTextColor: 'surfaceTextPrimary',
67
83
  borderColor: 'warningBorderSecondary',
68
84
  iconAfterFill: 'warningItemSecondary',
85
+ iconAfterFillActive: 'warningTertiary',
69
86
  iconBeforeFill: 'warningItemSecondary',
87
+ iconBeforeFillActive: 'warningTertiary',
88
+ iconFill: 'warningItemSecondary',
89
+ iconFillActive: 'warningTertiary',
70
90
  },
71
91
  };
72
92
 
@@ -94,10 +114,14 @@ var choiceAppearanceStyle = {
94
114
  },
95
115
  ghost: {
96
116
  fill: 'none',
117
+ fillItem: 'none',
118
+ fillItemActive: 'none',
97
119
  borderColor: '0',
98
120
  },
99
121
  outlined: {
100
122
  fill: 'none',
123
+ fillItem: 'none',
124
+ fillItemActive: 'none',
101
125
  },
102
126
  solid: {
103
127
  borderColor: '0',
@@ -107,40 +131,21 @@ var choiceAppearanceStyle = {
107
131
  var choiceAppearanceSuccess = {
108
132
  successPrimary: {
109
133
  fill: 'successTertiary',
110
- fillItemActive: 'successTertiary',
134
+ fillItem: 'successTertiary',
135
+ fillItemActive: 'successItemSecondary',
136
+ fillItemHover: 'accentItemHover',
111
137
  labelTextColor: 'surfaceTextPrimary',
112
138
  borderColor: 'successBorderSecondary',
113
139
  iconAfterFill: 'successItemSecondary',
140
+ iconAfterFillActive: 'successTertiary',
114
141
  iconBeforeFill: 'successItemSecondary',
142
+ iconBeforeFillActive: 'successTertiary',
143
+ iconFill: 'successItemSecondary',
144
+ iconFillActive: 'successTertiary',
115
145
  },
116
146
  };
117
147
 
118
- var choiceAppearanceSurface = {
119
- surfacePrimary: {
120
- fill: 'surfacePrimary',
121
- fillItem: 'surfaceItemInverse',
122
- fillItemActive: 'surfaceItemSecondary',
123
- fillItemActiveHover: 'surfaceItemTertiary',
124
- fillItemHover: 'surfaceItemSecondary',
125
- labelTextActiveColor: 'surfaceTextPrimary',
126
- labelTextColor: 'surfaceTextPrimary',
127
- labelTextWrap: 'nowrap',
128
- borderColor: 'surfaceBorderSecondary',
129
- iconBeforeFill: 'surfaceItemPrimary',
130
- iconBeforeFillActive: 'surfaceItemPrimary',
131
- },
132
- surfaceSecondary: {
133
- fill: 'surfaceSecondary',
134
- fillItem: 'surfacePrimary',
135
- fillItemActive: 'surfacePrimary',
136
- fillItemHover: 'surfacePrimary',
137
- labelTextActiveColor: 'surfaceTextPrimary',
138
- labelTextColor: 'surfaceTextPrimary',
139
- labelTextWrap: 'nowrap',
140
- },
141
- };
142
-
143
- var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceSize), choiceAppearanceSurface);
148
+ var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceSize);
144
149
 
145
150
  var choiceConfig = {
146
151
  appearance: choiceAppearance,
@@ -28,17 +28,13 @@ var codeAppearanceDefault = {
28
28
 
29
29
  var codeAppearanceDisabled = {
30
30
  disabledPrimary: {
31
- fill: 'surfaceFillDisabled',
32
- borderColor: 'errorBorderQuaternary',
33
- borderHover: 'errorBorderQuaternary',
34
- textColor: 'surfaceTextQuaternary',
35
- placeholderTextColor: 'surfaceTextQuaternary',
36
- },
37
- disabledSecondary: {
38
- fill: 'surfaceSecondary',
39
- borderColor: 'surfaceBorderTertiary',
40
- borderHover: 'surfaceBorderQuaternary',
41
- placeholderTextColor: 'surfaceTextSecondary',
31
+ inputBorderColor: 'surfaceBorderDisabled',
32
+ inputBorderColorHover: 'surfaceBorderDisabled',
33
+ inputCaretColor: 'surfaceItemPrimary',
34
+ inputFill: 'surfaceDisabled',
35
+ inputFillHover: 'surfaceDisabled',
36
+ inputPlaceholderTextColor: 'surfaceTextQuaternary',
37
+ inputTextColor: 'surfaceTextPrimary',
42
38
  },
43
39
  };
44
40
 
@@ -56,21 +52,13 @@ var codeAppearanceError = {
56
52
 
57
53
  var codeAppearanceRequire = {
58
54
  requirePrimary: {
59
- fill: 'warningTertiary',
60
- borderColor: 'warningBorderQuaternary',
61
- borderHover: 'warningBorderQuaternary',
62
- textColor: 'surfaceTextPrimary',
63
- iconBeforeFill: 'warningItemQuaternary',
64
- iconClearFill: 'warningItemPrimary',
65
- placeholderTextColor: 'surfaceTextQuaternary',
66
- },
67
- requireSecondary: {
68
- fill: 'surfaceSecondary',
69
- borderColor: 'surfaceBorderTertiary',
70
- borderHover: 'surfaceBorderQuaternary',
71
- iconBeforeFill: 'surfaceItemQuaternary',
72
- iconClearFill: 'surfaceItemPrimary',
73
- placeholderTextColor: 'surfaceTextSecondary',
55
+ inputBorderColor: 'warningBorderSecondary',
56
+ inputBorderColorHover: 'warningBorderSecondary',
57
+ inputCaretColor: 'surfaceItemPrimary',
58
+ inputFill: 'warningTertiary',
59
+ inputFillHover: 'warningTertiary',
60
+ inputPlaceholderTextColor: 'surfaceTextQuaternary',
61
+ inputTextColor: 'surfaceTextPrimary',
74
62
  },
75
63
  };
76
64
 
@@ -88,29 +76,30 @@ var codeAppearanceSize = {
88
76
  };
89
77
 
90
78
  var codeAppearanceStyle = {
91
- solid: {
92
- borderColor: 'none',
93
- },
94
- outlined: {
95
- fill: 'none',
96
- },
97
79
  full: {
98
- borderColor: 'none',
80
+ inputBorderColor: 'none',
99
81
  },
100
82
  ghost: {
101
- fill: 'none',
102
- borderColor: 'none',
83
+ inputBorderColor: 'none',
84
+ inputFill: 'none',
85
+ },
86
+ outlined: {
87
+ inputFill: 'none',
88
+ },
89
+ solid: {
90
+ inputBorderColor: 'none',
103
91
  },
104
92
  };
105
93
 
106
94
  var codeAppearanceSuccess = {
107
- success: {
108
- fill: 'successPrimary',
109
- fillHover: 'successPrimaryHover',
110
- labelTextColor: 'successTextSecondary',
111
- labelTextColorHover: 'successTextSecondary',
112
- loaderFill: 'successPrimary',
113
- loaderItemFill: 'successItemPrimary',
95
+ successPrimary: {
96
+ inputBorderColor: 'successBorderSecondary',
97
+ inputBorderColorHover: 'successBorderSecondary',
98
+ inputCaretColor: 'surfaceItemPrimary',
99
+ inputFill: 'successTertiary',
100
+ inputFillHover: 'successTertiary',
101
+ inputPlaceholderTextColor: 'surfaceTextQuaternary',
102
+ inputTextColor: 'surfaceTextPrimary',
114
103
  },
115
104
  };
116
105
 
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { useMemo } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { PartySuggestions } from 'react-dadata';
6
- import { I as Input } from '../Input_es_CNduH28G.js';
6
+ import { I as Input } from '../Input_es_BW6cZThr.js';
7
7
  import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
8
  import 'lodash/camelCase';
9
9
  import 'lodash/castArray';
@@ -4,7 +4,7 @@ import { useCallback } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { DateTime } from 'luxon';
6
6
  import { DATE_PERIOD_INTERVALS } from '@itcase/common';
7
- import { D as DatePickerInput } from '../DatePicker_es_DEAcYDTL.js';
7
+ import { D as DatePickerInput } from '../DatePicker_es_CIEHQyHC.js';
8
8
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
9
9
  import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CXS0aeon.js';
10
10
  import 'date-fns/locale';
@@ -26,8 +26,8 @@ import '../Text_es_BfLRfj-5.js';
26
26
  import 'react-inlinesvg';
27
27
  import '../Link_es_DxtZLeKY.js';
28
28
  import '../Loader_es_B2auu_rc.js';
29
- import '../Input_es_CNduH28G.js';
30
- import '../Label_es_DmDqs4Rc.js';
29
+ import '../Input_es_BW6cZThr.js';
30
+ import '../Label_es_ouC2i_iI.js';
31
31
  import '@itcase/icons/default';
32
32
  import 'lodash/castArray';
33
33
 
@@ -1,4 +1,4 @@
1
- export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_DEAcYDTL.js';
1
+ export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_CIEHQyHC.js';
2
2
  import '../tslib.es6_es_Bwu1Cn-t.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
@@ -25,6 +25,6 @@ import '../Text_es_BfLRfj-5.js';
25
25
  import 'react-inlinesvg';
26
26
  import '../Link_es_DxtZLeKY.js';
27
27
  import '../Loader_es_B2auu_rc.js';
28
- import '../Input_es_CNduH28G.js';
29
- import '../Label_es_DmDqs4Rc.js';
28
+ import '../Input_es_BW6cZThr.js';
29
+ import '../Label_es_ouC2i_iI.js';
30
30
  import '@itcase/icons/default';
@@ -8,13 +8,13 @@ var dropdownListMock = {
8
8
  {
9
9
  key: 4,
10
10
  label: 'Item 4',
11
- iconBefore: icons24.Placeholder,
11
+ iconBefore: icons24.Placeholder.Default,
12
12
  isActive: false,
13
13
  },
14
14
  {
15
15
  key: 5,
16
16
  label: 'Item 5',
17
- iconAfter: icons24.Placeholder,
17
+ iconAfter: icons24.Placeholder.Default,
18
18
  isActive: false,
19
19
  },
20
20
  {
@@ -1,4 +1,4 @@
1
- export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_CNduH28G.js';
1
+ export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_BW6cZThr.js';
2
2
  import '../tslib.es6_es_Bwu1Cn-t.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
@@ -1,4 +1,4 @@
1
- export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_DmDqs4Rc.js';
1
+ export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_ouC2i_iI.js';
2
2
  import '../tslib.es6_es_Bwu1Cn-t.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
@@ -26,6 +26,7 @@ var menuItemAppearanceAccent = {
26
26
  fill: 'accentPrimary',
27
27
  fillHover: 'accentPrimaryHover',
28
28
  labelTextColor: 'accentTextPrimary',
29
+ borderColor: 'accentBorderSecondary',
29
30
  iconAfterFillIcon: 'accentItemPrimary',
30
31
  iconBeforeFillIcon: 'accentItemPrimary',
31
32
  },
@@ -45,6 +46,7 @@ var menuItemAppearanceError = {
45
46
  fillHover: 'errorPrimaryHover',
46
47
  labelTextColor: 'errorTextPrimary',
47
48
  labelTextColorHover: 'errorTextPrimary',
49
+ borderColor: 'errorBorderSecondary',
48
50
  iconAfterFillIcon: 'errorItemPrimary',
49
51
  iconBeforeFillIcon: 'errorItemPrimary',
50
52
  },
@@ -96,15 +98,17 @@ var menuItemAppearanceSize = {
96
98
  };
97
99
 
98
100
  var menuItemAppearanceStyle = {
99
- solid: {
101
+ full: {
100
102
  borderColor: 'none',
101
103
  },
102
- outlined: {
104
+ ghost: {
103
105
  fill: 'none',
106
+ borderColor: 'none',
104
107
  },
105
- full: {},
106
- ghost: {
108
+ outlined: {
107
109
  fill: 'none',
110
+ },
111
+ solid: {
108
112
  borderColor: 'none',
109
113
  },
110
114
  };
@@ -112,8 +116,11 @@ var menuItemAppearanceStyle = {
112
116
  var menuItemAppearanceSurface = {
113
117
  surfacePrimary: {
114
118
  fill: 'surfacePrimary',
115
- fillHover: 'surfacePrimaryHover',
119
+ fillActive: 'surfaceHover',
120
+ fillActiveHover: 'surfaceHover',
121
+ fillHover: 'surfaceHover',
116
122
  labelTextColor: 'surfaceTextPrimary',
123
+ borderColor: 'surfaceBorderQuaternary',
117
124
  iconAfterFillIcon: 'surfaceItemPrimary',
118
125
  iconBeforeFillIcon: 'surfaceItemPrimary',
119
126
  },
@@ -149,10 +156,10 @@ function MenuItem(props) {
149
156
  return (__assign(__assign({}, resultConfig), (_a = menuItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
150
157
  }, {});
151
158
  var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
152
- var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveColorDisabled = propsGenerator.labelTextActiveColorDisabled, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextActiveHoverColorDisabled = propsGenerator.labelTextActiveHoverColorDisabled, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextHoverColorDisabled = propsGenerator.labelTextHoverColorDisabled, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
159
+ var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveColorDisabled = propsGenerator.labelTextActiveColorDisabled, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextActiveHoverColorDisabled = propsGenerator.labelTextActiveHoverColorDisabled, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextHoverColorDisabled = propsGenerator.labelTextHoverColorDisabled, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, borderColorClass = propsGenerator.borderColorClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
153
160
  // @ts-expect-error
154
161
  var menuItem = useStyles(props).styles;
155
- return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), !isActive
162
+ return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), !isActive
156
163
  ? fillClass && "fill_".concat(fillClass)
157
164
  : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
158
165
  ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
@@ -4,24 +4,28 @@ var notificationsMock = [
4
4
  title: 'Text 123',
5
5
  desc: 'Text 123',
6
6
  status: 'error',
7
+ closeByTime: false,
7
8
  },
8
9
  {
9
10
  key: 2,
10
11
  title: 'Text 123',
11
12
  desc: 'Text 123',
12
13
  status: 'warning',
14
+ closeByTime: false,
13
15
  },
14
16
  {
15
17
  key: 3,
16
18
  title: 'Text 123',
17
19
  desc: 'Text 123',
18
20
  status: 'info',
21
+ closeByTime: false,
19
22
  },
20
23
  {
21
24
  key: 4,
22
25
  title: 'Text 123',
23
26
  desc: 'Text 123',
24
27
  status: 'success',
28
+ closeByTime: false,
25
29
  },
26
30
  ];
27
31
 
@@ -27,7 +27,7 @@ var notificationAppearanceDefault = {
27
27
  fill: 'surfacePrimary',
28
28
  fillHover: 'surfacePrimaryHover',
29
29
  titleTextColor: 'surfaceTextPrimary',
30
- titleTextSize: 'xxl',
30
+ titleTextSize: 'l',
31
31
  descTextColor: 'surfaceTextPrimary',
32
32
  descTextSize: 'm',
33
33
  borderColor: 'surfaceBorderPrimary',
@@ -44,7 +44,7 @@ var notificationAppearanceError = {
44
44
  fill: 'errorPrimary',
45
45
  fillHover: 'errorPrimaryHover',
46
46
  titleTextColor: 'errorTextPrimary',
47
- titleTextSize: 'xxl',
47
+ titleTextSize: 'l',
48
48
  descTextColor: 'errorTextPrimary',
49
49
  descTextSize: 'm',
50
50
  borderColor: 'errorBorderPrimary',
@@ -56,18 +56,35 @@ var notificationAppearanceError = {
56
56
  },
57
57
  };
58
58
 
59
+ var notificationAppearanceInfo = {
60
+ infoPrimary: {
61
+ fill: 'infoPrimary',
62
+ fillHover: 'infoPrimaryHover',
63
+ titleTextColor: 'infoTextPrimary',
64
+ titleTextSize: 'l',
65
+ descTextColor: 'infoTextPrimary',
66
+ descTextSize: 'm',
67
+ borderColor: 'infoBorderPrimary',
68
+ elevation: 8,
69
+ textColor: 'infoTextPrimary',
70
+ iconSize: 20,
71
+ closeIcon: icons20.Action.Close,
72
+ closeIconFillIcon: 'infoItemPrimary',
73
+ },
74
+ };
75
+
59
76
  var notificationAppearanceSize = {};
60
77
 
61
78
  var notificationAppearanceStyle = {
62
- full: {},
63
- ghost: {
64
- fill: 'none',
79
+ solid: {
65
80
  borderColor: 'none',
66
81
  },
67
82
  outlined: {
68
83
  fill: 'none',
69
84
  },
70
- solid: {
85
+ full: {},
86
+ ghost: {
87
+ fill: 'none',
71
88
  borderColor: 'none',
72
89
  },
73
90
  };
@@ -77,7 +94,7 @@ var notificationAppearanceSuccess = {
77
94
  fill: 'successPrimary',
78
95
  fillHover: 'successPrimaryHover',
79
96
  titleTextColor: 'successTextPrimary',
80
- titleTextSize: 'xxl',
97
+ titleTextSize: 'l',
81
98
  descTextColor: 'successTextPrimary',
82
99
  descTextSize: 'm',
83
100
  borderColor: 'successBorderPrimary',
@@ -94,7 +111,7 @@ var notificationAppearanceWarning = {
94
111
  fill: 'warningPrimary',
95
112
  fillHover: 'warningPrimaryHover',
96
113
  titleTextColor: 'warningTextPrimary',
97
- titleTextSize: 'xxl',
114
+ titleTextSize: 'l',
98
115
  descTextColor: 'warningTextPrimary',
99
116
  descTextSize: 'm',
100
117
  borderColor: 'surfaceBorderPrimary',
@@ -106,7 +123,7 @@ var notificationAppearanceWarning = {
106
123
  },
107
124
  };
108
125
 
109
- var notificationAppearance = __assign(__assign(__assign(__assign(__assign(__assign({}, notificationAppearanceDefault), notificationAppearanceSize), notificationAppearanceStyle), notificationAppearanceError), notificationAppearanceSuccess), notificationAppearanceWarning);
126
+ var notificationAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, notificationAppearanceDefault), notificationAppearanceSize), notificationAppearanceStyle), notificationAppearanceError), notificationAppearanceInfo), notificationAppearanceSuccess), notificationAppearanceWarning);
110
127
 
111
128
  var notificationConfig = {
112
129
  appearance: notificationAppearance,
@@ -131,6 +148,7 @@ function NotificationWrapper(props) {
131
148
  var notifications = useNotifications();
132
149
  var hideNotifications = useNotificationsAPI().hideNotifications;
133
150
  var className = props.className, close = props.close;
151
+ console.log(notifications);
134
152
  return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i)); }) }) }));
135
153
  }
136
154