sag_components 1.0.711 → 1.0.712

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 (11) hide show
  1. package/dist/stories/components/BarChartsByWeeks.js +94 -23
  2. package/dist/stories/components/BarChartsByWeeks.style.js +11 -12
  3. package/dist/stories/components/EventInfo.js +92 -0
  4. package/dist/stories/components/EventInfo.style.js +20 -0
  5. package/dist/stories/components/FilterButton.js +4 -10
  6. package/dist/stories/components/FilterButton.style.js +1 -1
  7. package/dist/stories/components/FilterPanel.js +3 -2
  8. package/dist/stories/components/FormattedValue.js +68 -0
  9. package/dist/stories/components/FormattedValue.style.js +18 -0
  10. package/dist/stories/components/OneColumnContainer.style.js +1 -1
  11. package/package.json +4 -3
package/dist/stories/components/BarChartsByWeeks.js CHANGED
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.BarChartsByWeeks = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _recharts = require("recharts");
11
+ var _FormattedValue = require("./FormattedValue");
11
12
  var _CommonFunctions = require("./CommonFunctions");
12
13
  var _BarChartsByWeeks = require("./BarChartsByWeeks.style");
13
14
  var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
@@ -20,20 +21,28 @@ const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
20
21
  const BarChartsByWeeks = props => {
21
22
  const {
22
23
  title,
24
+ headerValueTopTitle,
25
+ headerValueBottomTitle,
26
+ headerValue,
27
+ HeaderValueCurrencyType,
28
+ HeaderValueIsPercent,
23
29
  barChartData,
24
30
  isTitleOriganal,
25
31
  width,
26
32
  height,
27
33
  barChartColor,
34
+ barChartSecondColor,
28
35
  xselectedColor,
29
36
  tooltipTitle,
37
+ tooltipSecondTitle,
30
38
  startWeekRange = 0,
31
39
  endWeekRange = 0,
32
40
  yAxisCounter,
33
41
  isPercentValue,
34
42
  interval,
35
43
  showLegend,
36
- legendData
44
+ legendData,
45
+ showTwoBars
37
46
  } = props;
38
47
  const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
39
48
  const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
@@ -59,7 +68,7 @@ const BarChartsByWeeks = props => {
59
68
 
60
69
  // eslint-disable-next-line react/no-unstable-nested-components
61
70
  const CustomTooltip = tooltipData => {
62
- var _payload$0$payload, _payload$0$payload2;
71
+ var _payload$0$payload, _payload$0$payload2, _payload$0$payload3, _payload$0$payload4;
63
72
  const {
64
73
  active,
65
74
  payload,
@@ -68,8 +77,10 @@ const BarChartsByWeeks = props => {
68
77
  if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
69
78
  const week = isTitleOriganal ? label : label && (label === null || label === void 0 ? void 0 : label.toString().length) === 6 ? label.toString().substring(4, 6) : 0;
70
79
  let currentTooltipValue = 0;
80
+ let currentTooltipSecondValue = 0;
71
81
  if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.value) currentTooltipValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.value;
72
- return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipTitle, null, "".concat(isTitleOriganal ? '' : 'Week: ').concat(week)), /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipLabel, null, "".concat(tooltipTitle, " \n ").concat(displayFormattedValue(currentTooltipValue), " \n ")));
82
+ if ((_payload$0$payload3 = payload[0].payload) !== null && _payload$0$payload3 !== void 0 && _payload$0$payload3.secondValue) currentTooltipSecondValue = (_payload$0$payload4 = payload[0].payload) === null || _payload$0$payload4 === void 0 ? void 0 : _payload$0$payload4.secondValue;
83
+ return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipTitle, null, "".concat(isTitleOriganal ? '' : 'Week: ').concat(week)), /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipLabel, null, "".concat(tooltipTitle, " \n ").concat(displayFormattedValue(currentTooltipValue), " \n ")), currentTooltipSecondValue ? /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipLabel, null, "".concat(tooltipSecondTitle, " \n ").concat(displayFormattedValue(currentTooltipSecondValue), " \n ")) : '');
73
84
  };
74
85
  const getWeek = () => {
75
86
  if (!barChartData || (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 0) return null;
@@ -86,32 +97,69 @@ const BarChartsByWeeks = props => {
86
97
  var _getWeek;
87
98
  if (!barChartData || barChartData.length === 0) return '';
88
99
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElementsContainer, {
89
- id: "EventWeeksLegendDataElementsContainer"
90
- }, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElement, {
91
- id: "EventWeeksLegendDataElement",
92
- color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
93
- textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
94
- fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
95
- borderLeftRadius: startWeekRange && item.title === (startWeekRange === null || startWeekRange === void 0 ? void 0 : startWeekRange.toString()) ? '12px' : '0px',
96
- borderRightRadius: endWeekRange && item.title === (endWeekRange === null || endWeekRange === void 0 ? void 0 : endWeekRange.toString()) ? '12px' : '0px'
97
- }, item.titleWeek)));
100
+ className: "EventWeeksLegendDataElementsContainer"
101
+ }, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => {
102
+ var _item$title2, _item$title3;
103
+ return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElement, {
104
+ className: "EventWeeksLegendDataElement",
105
+ color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
106
+ textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
107
+ fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
108
+ borderLeftRadius: startWeekRange && (item === null || item === void 0 ? void 0 : (_item$title2 = item.title) === null || _item$title2 === void 0 ? void 0 : _item$title2.toString()) === (startWeekRange === null || startWeekRange === void 0 ? void 0 : startWeekRange.toString()) ? '12px' : '0px',
109
+ borderRightRadius: endWeekRange && (item === null || item === void 0 ? void 0 : (_item$title3 = item.title) === null || _item$title3 === void 0 ? void 0 : _item$title3.toString()) === (endWeekRange === null || endWeekRange === void 0 ? void 0 : endWeekRange.toString()) ? '12px' : '0px'
110
+ }, item.titleWeek);
111
+ }));
98
112
  };
99
113
  const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendMainContainer, {
100
- id: "EventWeeksLegendMainContainer"
114
+ className: "EventWeeksLegendMainContainer"
101
115
  }, displayEventWeeksElements());
116
+ const getControlsHeight = () => {
117
+ // headerValueTopTitle,
118
+ // headerValueBottomTitle,
119
+ // headerValue,
120
+ if (!(controlsContainerRef !== null && controlsContainerRef !== void 0 && controlsContainerRef.current)) return '100%';
121
+ const {
122
+ offsetHeight
123
+ } = controlsContainerRef.current;
124
+ let newHeight = offsetHeight;
125
+ if (title) {
126
+ newHeight -= 20;
127
+ }
128
+ if (headerValueTopTitle) {
129
+ newHeight -= 30;
130
+ }
131
+ if (headerValueBottomTitle) {
132
+ newHeight -= 30;
133
+ }
134
+ if (headerValue) {
135
+ newHeight -= 60;
136
+ }
137
+ if (showLegend) {
138
+ newHeight -= 50;
139
+ }
140
+ return "".concat(newHeight, "px");
141
+ };
102
142
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.ControlsContainer, {
103
- id: "ControlsContainer",
143
+ className: "ControlsContainer",
104
144
  height: height,
105
145
  width: width,
106
146
  ref: controlsContainerRef
107
147
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
108
- id: "Controls"
148
+ className: "Controls",
149
+ height: getControlsHeight()
109
150
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, {
110
- id: "TitleAndValueContainer"
151
+ className: "TitleAndValueContainer"
111
152
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
112
- id: "Title"
113
- }, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
114
- id: "ResponsiveContainer",
153
+ className: "Title"
154
+ }, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
155
+ title: headerValueTopTitle,
156
+ subtitle: headerValueBottomTitle,
157
+ value: headerValue,
158
+ currencyType: HeaderValueCurrencyType,
159
+ isPercent: HeaderValueIsPercent,
160
+ dotCut: true
161
+ })), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
162
+ className: "ResponsiveContainer",
115
163
  width: "100%",
116
164
  height: showLegend ? '80%' : '86%'
117
165
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
@@ -145,20 +193,40 @@ const BarChartsByWeeks = props => {
145
193
  tickFormatter: value => "".concat(displayFormattedValue(value))
146
194
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
147
195
  content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
148
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
196
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), !showTwoBars ? /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
149
197
  dataKey: "value",
150
198
  name: "title",
151
199
  maxBarSize: 30,
152
200
  radius: [4, 4, 0, 0],
153
201
  fill: barChartColor
154
- }))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
202
+ }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
203
+ dataKey: "value",
204
+ name: "title",
205
+ maxBarSize: 30
206
+ // radius={[4, 4, 0, 0]}
207
+ ,
208
+ stackId: "a",
209
+ fill: barChartColor
210
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
211
+ dataKey: "secondValue",
212
+ name: "title",
213
+ maxBarSize: 30,
214
+ radius: [4, 4, 0, 0],
215
+ stackId: "a",
216
+ fill: barChartSecondColor
217
+ })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
155
218
  legendData: legendData
156
219
  })));
157
220
  };
158
221
  exports.BarChartsByWeeks = BarChartsByWeeks;
159
222
  var _default = exports.default = BarChartsByWeeks;
160
223
  BarChartsByWeeks.defaultProps = {
161
- title: 'String',
224
+ title: '',
225
+ headerValueTopTitle: '',
226
+ headerValueBottomTitle: '',
227
+ headerValue: '',
228
+ HeaderValueCurrencyType: '',
229
+ HeaderValueIsPercent: '',
162
230
  barChartData: [{
163
231
  title: '202320',
164
232
  value: 542366
@@ -202,8 +270,10 @@ BarChartsByWeeks.defaultProps = {
202
270
  width: '100%',
203
271
  height: '100%',
204
272
  barChartColor: '#BD9EFF',
273
+ barChartSecondColor: '#42977A',
205
274
  xselectedColor: '#42977A',
206
275
  tooltipTitle: 'Sales',
276
+ tooltipSecondTitle: 'Sales 2',
207
277
  startWeekRange: 0,
208
278
  endWeekRange: 0,
209
279
  yAxisCounter: 10,
@@ -219,5 +289,6 @@ BarChartsByWeeks.defaultProps = {
219
289
  title: 'Category Average',
220
290
  iconType: ICON_TYPE_LEGEND_LINE_ICON,
221
291
  iconColor: '#C906FD'
222
- }]
292
+ }],
293
+ showTwoBars: false
223
294
  };
package/dist/stories/components/BarChartsByWeeks.style.js CHANGED
@@ -4,18 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.ControlsContainer = exports.Controls = exports.AreaChartContainer = void 0;
7
+ exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.ControlsContainer = exports.Controls = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), props => props.width, props => props.height);
12
- const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n background: #ffffff;\n"])));
13
- const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%; \n height: 85%;\n"])));
14
- const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
15
- const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
16
- const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
17
- const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
18
- const Title = exports.Title = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
19
- const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n\n"])));
20
- const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
21
- const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
12
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: 100%;\n background: #ffffff;\n"])), props => props.height || '100%');
13
+ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
14
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
15
+ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
16
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
17
+ const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 20px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
18
+ const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n\n"])));
19
+ const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
20
+ const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
package/dist/stories/components/EventInfo.js ADDED
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
10
+ var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
11
+ var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
12
+ var _BannersDropdown = require("./BannersDropdown");
13
+ var _EventInfo = require("./EventInfo.style");
14
+ const EventInfo = props => {
15
+ const {
16
+ title,
17
+ subTitle,
18
+ productsData,
19
+ onSpotlightProductClick,
20
+ onClickBannersDropdown
21
+ } = props;
22
+ const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
23
+ const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
24
+ banners: [{
25
+ checked: true,
26
+ name: 'StopAndShop'
27
+ }, {
28
+ checked: true,
29
+ name: 'FoodLion'
30
+ }, {
31
+ checked: true,
32
+ name: 'GiantFood'
33
+ }, {
34
+ checked: true,
35
+ name: 'TheGiantCompany'
36
+ }, {
37
+ checked: true,
38
+ name: 'Hannaford'
39
+ }],
40
+ onClick: banners => {
41
+ onClickBannersDropdown({
42
+ banners
43
+ });
44
+ }
45
+ });
46
+ return /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoMainContainer, {
47
+ id: "EventInfoMainContainer"
48
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
49
+ id: "EventInfoContainer"
50
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
51
+ id: "EventInfoTitleContainer"
52
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
53
+ id: "EventInfoTitle"
54
+ }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
55
+ id: "EventInfoSubTitle"
56
+ }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
57
+ id: "EventInfoSubTitle"
58
+ }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
59
+ id: "ProductButtonContainer",
60
+ onClick: () => {
61
+ setIsProductsListOpen(!IsProductsListOpen);
62
+ }
63
+ }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
64
+ color: "#212121"
65
+ }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
66
+ color: "#212121"
67
+ }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
68
+ id: "EventInfoContentContainer"
69
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
70
+ id: "ProductsTitle"
71
+ }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
72
+ id: "ProductContainer"
73
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
74
+ id: "Product"
75
+ }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
76
+ id: "ProductButtonContainer",
77
+ background: "#F8CD00",
78
+ onClick: () => {
79
+ onSpotlightProductClick({
80
+ value: item.value,
81
+ label: item.label
82
+ });
83
+ }
84
+ }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
85
+ };
86
+ var _default = exports.default = EventInfo;
87
+ EventInfo.defaultProps = {
88
+ title: 'Products Variety',
89
+ subTitle: 'Product Name',
90
+ onSpotlightProductClick: () => {},
91
+ onClickBannersDropdown: () => {}
92
+ };
package/dist/stories/components/EventInfo.style.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
+ const EventInfoMainContainer = exports.EventInfoMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin: 0;\n padding: 10px;\n border-radius: 12px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
12
+ const EventInfoContainer = exports.EventInfoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 10px;\n"])));
13
+ const EventInfoTitleContainer = exports.EventInfoTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 20px;\n line-height: 25px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 10px;\n gap: 15px;\n"])));
14
+ const EventInfoTitle = exports.EventInfoTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 20px;\n\n margin: 0;\n"])));
15
+ const EventInfoSubTitle = exports.EventInfoSubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #757171;\n font-weight: 500;\n font-size: 20px;\n margin: 0;\n"])));
16
+ const EventInfoContentContainer = exports.EventInfoContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 20px;\n line-height: 25px;\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n margin: 10px;\n padding: 10px 20px 20px 50px;\n"])));
17
+ const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 14px;\n margin: 10px 0;\n"])));
18
+ const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #00000010;\n width: 100%;\n gap: 20px;\n"])));
19
+ const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n"])));
20
+ const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: ", ";\n border-radius: 12px;\n height: 25px;\n padding: 0 15px;\n user-select: none;\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n gap: 10px;\n"])), props => props.background || '#ffffff');
package/dist/stories/components/FilterButton.js CHANGED
@@ -1,33 +1,29 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.FilterButton = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = _interopRequireDefault(require("react"));
9
9
  var _FilterButton = require("./FilterButton.style");
10
10
  var _FilterIcon = require("./icons/FilterIcon");
11
11
  const FilterButton = props => {
12
12
  const {
13
13
  color,
14
- activeColor,
15
14
  height,
16
15
  buttonText,
17
16
  iconWidth,
18
17
  iconHeight,
19
18
  disabled,
20
- openState,
21
19
  onButtonClick
22
20
  } = props;
23
- const [activeState, setActiveState] = (0, _react.useState)(openState);
24
21
  const onClickHandler = event => {
25
22
  onButtonClick(event);
26
- setActiveState(!activeState);
27
23
  };
28
24
  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
29
25
  height: height,
30
- color: activeState ? activeColor : color,
26
+ color: color,
31
27
  disabled: disabled,
32
28
  onClick: event => {
33
29
  onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
35
31
  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
36
32
  width: iconWidth,
37
33
  height: iconHeight,
38
- color: activeState ? activeColor : color
34
+ color: color
39
35
  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
40
36
  };
41
37
  exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ FilterButton.defaultProps = {
44
40
  buttonText: 'Filter',
45
41
  height: '40px',
46
42
  color: '#212121',
47
- activeColor: '#229E38',
48
43
  iconHeight: 12,
49
44
  iconWidth: 12,
50
- openState: false,
51
45
  disabled: false,
52
46
  onButtonClick: () => {}
53
47
  };
package/dist/stories/components/FilterButton.style.js CHANGED
@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2;
11
- const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n background: transparent;\n transition: box-shadow 0.3s ease;\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.height, props => props.color, props => props.color);
11
+ const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid #B1B1B1;\n background: transparent;\n transition: box-shadow 0.3s ease;\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.height, props => props.color);
12
12
  const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/dist/stories/components/FilterPanel.js CHANGED
@@ -89,7 +89,7 @@ const FilterPanel = props => {
89
89
  changedItem: {
90
90
  name: item.name,
91
91
  inputType: item.inputType,
92
- selectedValue: newSelectedValue
92
+ selectedValue: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? newSelectedValue[0].value : undefined
93
93
  }
94
94
  });
95
95
  };
@@ -486,5 +486,6 @@ FilterPanel.defaultProps = {
486
486
  onOkClick: () => {},
487
487
  onResetClick: () => {},
488
488
  onItemValueChanged: () => {},
489
- disableOKButton: false
489
+ disableOKButton: false,
490
+ className: ''
490
491
  };
package/dist/stories/components/FormattedValue.js ADDED
@@ -0,0 +1,68 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.FormattedValue = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _CommonFunctions = require("./CommonFunctions");
10
+ var _FormattedValue = require("./FormattedValue.style");
11
+ /* FormattedValue */
12
+ const FormattedValue = props => {
13
+ const {
14
+ className,
15
+ title,
16
+ subtitle,
17
+ value,
18
+ dotCut,
19
+ currencySign,
20
+ currencyType,
21
+ width,
22
+ height,
23
+ textcolor,
24
+ isPercent
25
+ } = props;
26
+ return /*#__PURE__*/_react.default.createElement(_FormattedValue.ControlsContainer, {
27
+ className: className || 'FormattedValue_ControlsContainer',
28
+ height: height,
29
+ width: width,
30
+ textcolor: textcolor
31
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.Controls, {
32
+ className: "Controls",
33
+ height: height,
34
+ width: width
35
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.TitleAndValueContainer, {
36
+ className: "TitleAndValueContainer"
37
+ }, title ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
38
+ className: "Title",
39
+ width: width
40
+ }, title) : '', /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignAndFormattedValueContainer, {
41
+ className: "CurrencySignAndFormattedValueContainer"
42
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValueText, {
43
+ className: "FormattedValueText",
44
+ width: width
45
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignOrPercent, {
46
+ className: "CurrencySignOrPercent"
47
+ }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '', /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignOrPercent, {
48
+ className: "CurrencySignOrPercent"
49
+ }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
50
+ className: "Title",
51
+ width: width
52
+ }, subtitle) : '')));
53
+ };
54
+ exports.FormattedValue = FormattedValue;
55
+ var _default = exports.default = FormattedValue;
56
+ FormattedValue.defaultProps = {
57
+ className: 'FormattedValue_ControlsContainer',
58
+ title: '',
59
+ subtitle: '',
60
+ value: 0,
61
+ dotCut: false,
62
+ currencySign: false,
63
+ currencyType: 'USD',
64
+ width: '100%',
65
+ height: '100%',
66
+ textcolor: '#212121',
67
+ isPercent: false
68
+ };
package/dist/stories/components/FormattedValue.style.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TitleAndValueContainer = exports.Title = exports.FormattedValueText = exports.CurrencySignOrPercent = exports.CurrencySignAndFormattedValueContainer = exports.ControlsContainer = exports.Controls = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
+ const scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
12
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n color: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n @media (max-width: 1536px) {\n ", "\n }\n\n > * {\n box-sizing: border-box;\n }\n"])), props => props.textcolor, props => props.width, props => props.height, scrollableStyles);
13
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white; \n"])));
14
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column; \n"])));
15
+ const Title = exports.Title = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 20px;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
16
+ const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
17
+ const CurrencySignOrPercent = exports.CurrencySignOrPercent = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n"])));
18
+ const FormattedValueText = exports.FormattedValueText = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 34px;\n }\n @media (max-width: 1366px) {\n font-size: 28px;\n }\n"])));
package/dist/stories/components/OneColumnContainer.style.js CHANGED
@@ -12,7 +12,7 @@ const StyledContainer = exports.StyledContainer = _styledComponents.default.div(
12
12
  const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: white;\n margin: 15px 20px 0px 20px;\n"])), props => props.width, props => props.height);
13
13
  const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n color: black;\n margin: 0px 0px 10px 0px;\n font-size: 18px;\n line-height: 32px;\n overflow: hidden;\n"])));
14
14
  const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n overflow: hidden;\n"])));
15
- const ColumnTitle = exports.ColumnTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 20px;\n left: 20px;\n width: 85%;\n height: 22px;\n color: black;\n font-family: \"Poppins\", sans-serif;\n font-size: 20px;\n font-weight: 400;\n overflow: hidden;\n display: flex;\n flex-wrap: nowrap; \n align-items: center; \n justify-content: flex-start;\n"])));
15
+ const ColumnTitle = exports.ColumnTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 20px;\n left: 20px;\n width: 85%;\n height: 26px;\n color: black;\n font-family: \"Poppins\", sans-serif;\n font-size: 20px;\n font-weight: 500;\n overflow: hidden;\n display: flex;\n flex-wrap: nowrap; \n align-items: center; \n justify-content: flex-start;\n"])));
16
16
  const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n top: 10px;\n right: 10px;\n position: absolute;\n"])));
17
17
  const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n width: 76%;\n height: 65%;\n"])));
18
18
  const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: flex-start;\n justify-content: center; \n background-color: white;\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n \n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.711",
3
+ "version": "1.0.712",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -84,5 +84,6 @@
84
84
  "last 1 firefox version",
85
85
  "last 1 safari version"
86
86
  ]
87
- }
88
- }
87
+ },
88
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
89
+ }