sag_components 1.0.710 → 1.0.711

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 (13) hide show
  1. package/dist/stories/components/BannerEventBoxList.js +5 -3
  2. package/dist/stories/components/BarChartsByWeeks.js +21 -89
  3. package/dist/stories/components/BarChartsByWeeks.style.js +12 -11
  4. package/dist/stories/components/FilterButton.js +10 -4
  5. package/dist/stories/components/FilterButton.style.js +1 -1
  6. package/dist/stories/components/FilterPanel.js +2 -3
  7. package/dist/stories/components/OneColumnContainer.style.js +1 -1
  8. package/dist/stories/components/TotalHorizontalCharts.style.js +3 -3
  9. package/package.json +3 -4
  10. package/dist/stories/components/EventInfo.js +0 -92
  11. package/dist/stories/components/EventInfo.style.js +0 -20
  12. package/dist/stories/components/FormattedValue.js +0 -68
  13. package/dist/stories/components/FormattedValue.style.js +0 -18
package/dist/stories/components/BannerEventBoxList.js CHANGED
@@ -20,7 +20,8 @@ const BannerEventBoxList = props => {
20
20
  data,
21
21
  retailerFile,
22
22
  toggleColor,
23
- disableToggle
23
+ disableToggle,
24
+ bannerWidth
24
25
  } = props;
25
26
  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
26
27
  const handleToggle = () => {
@@ -52,7 +53,7 @@ const BannerEventBoxList = props => {
52
53
  }, data.map(item => /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
53
54
  key: item.banner,
54
55
  height: "100%",
55
- width: "100%",
56
+ width: bannerWidth,
56
57
  banner: item.banner,
57
58
  description: item.description,
58
59
  dates: item.dates,
@@ -99,6 +100,7 @@ BannerEventBoxList.defaultProps = {
99
100
  }]
100
101
  }],
101
102
  retailerFile: () => {},
102
- disableToggle: false
103
+ disableToggle: false,
104
+ bannerWidth: 'auto'
103
105
  };
104
106
  var _default = exports.default = BannerEventBoxList;
package/dist/stories/components/BarChartsByWeeks.js CHANGED
@@ -8,7 +8,6 @@ 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");
12
11
  var _CommonFunctions = require("./CommonFunctions");
13
12
  var _BarChartsByWeeks = require("./BarChartsByWeeks.style");
14
13
  var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
@@ -21,17 +20,11 @@ const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
21
20
  const BarChartsByWeeks = props => {
22
21
  const {
23
22
  title,
24
- headerValueTopTitle,
25
- headerValueBottomTitle,
26
- headerValue,
27
- HeaderValueCurrencyType,
28
- HeaderValueIsPercent,
29
23
  barChartData,
30
24
  isTitleOriganal,
31
25
  width,
32
26
  height,
33
27
  barChartColor,
34
- barChartSecondColor,
35
28
  xselectedColor,
36
29
  tooltipTitle,
37
30
  startWeekRange = 0,
@@ -40,8 +33,7 @@ const BarChartsByWeeks = props => {
40
33
  isPercentValue,
41
34
  interval,
42
35
  showLegend,
43
- legendData,
44
- showTwoBars
36
+ legendData
45
37
  } = props;
46
38
  const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
47
39
  const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
@@ -94,70 +86,32 @@ const BarChartsByWeeks = props => {
94
86
  var _getWeek;
95
87
  if (!barChartData || barChartData.length === 0) return '';
96
88
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElementsContainer, {
97
- className: "EventWeeksLegendDataElementsContainer"
98
- }, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => {
99
- var _item$title2, _item$title3;
100
- return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElement, {
101
- className: "EventWeeksLegendDataElement",
102
- color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
103
- textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
104
- fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
105
- 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',
106
- 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'
107
- }, item.titleWeek);
108
- }));
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)));
109
98
  };
110
99
  const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendMainContainer, {
111
- className: "EventWeeksLegendMainContainer"
100
+ id: "EventWeeksLegendMainContainer"
112
101
  }, displayEventWeeksElements());
113
- const getControlsHeight = () => {
114
- // headerValueTopTitle,
115
- // headerValueBottomTitle,
116
- // headerValue,
117
- if (!(controlsContainerRef !== null && controlsContainerRef !== void 0 && controlsContainerRef.current)) return '100%';
118
- const {
119
- offsetHeight
120
- } = controlsContainerRef.current;
121
- let newHeight = offsetHeight;
122
- if (title) {
123
- newHeight -= 20;
124
- }
125
- if (headerValueTopTitle) {
126
- newHeight -= 30;
127
- }
128
- if (headerValueBottomTitle) {
129
- newHeight -= 30;
130
- }
131
- if (headerValue) {
132
- newHeight -= 60;
133
- }
134
- if (showLegend) {
135
- newHeight -= 50;
136
- }
137
- console.log('newHeight', newHeight);
138
- return "".concat(newHeight, "px");
139
- };
140
102
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.ControlsContainer, {
141
- className: "ControlsContainer",
103
+ id: "ControlsContainer",
142
104
  height: height,
143
105
  width: width,
144
106
  ref: controlsContainerRef
145
107
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
146
- className: "Controls",
147
- height: getControlsHeight()
108
+ id: "Controls"
148
109
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, {
149
- className: "TitleAndValueContainer"
110
+ id: "TitleAndValueContainer"
150
111
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
151
- className: "Title"
152
- }, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
153
- title: headerValueTopTitle,
154
- subtitle: headerValueBottomTitle,
155
- value: headerValue,
156
- currencyType: HeaderValueCurrencyType,
157
- isPercent: HeaderValueIsPercent,
158
- dotCut: true
159
- })), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
160
- className: "ResponsiveContainer",
112
+ id: "Title"
113
+ }, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
114
+ id: "ResponsiveContainer",
161
115
  width: "100%",
162
116
  height: showLegend ? '80%' : '86%'
163
117
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
@@ -191,40 +145,20 @@ const BarChartsByWeeks = props => {
191
145
  tickFormatter: value => "".concat(displayFormattedValue(value))
192
146
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
193
147
  content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
194
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), !showTwoBars ? /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
148
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
195
149
  dataKey: "value",
196
150
  name: "title",
197
151
  maxBarSize: 30,
198
152
  radius: [4, 4, 0, 0],
199
153
  fill: barChartColor
200
- }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
201
- dataKey: "value",
202
- name: "title",
203
- maxBarSize: 30
204
- // radius={[4, 4, 0, 0]}
205
- ,
206
- stackId: "a",
207
- fill: barChartColor
208
- }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
209
- dataKey: "secondValue",
210
- name: "title",
211
- maxBarSize: 30,
212
- radius: [4, 4, 0, 0],
213
- stackId: "a",
214
- fill: barChartSecondColor
215
- })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
154
+ }))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
216
155
  legendData: legendData
217
156
  })));
218
157
  };
219
158
  exports.BarChartsByWeeks = BarChartsByWeeks;
220
159
  var _default = exports.default = BarChartsByWeeks;
221
160
  BarChartsByWeeks.defaultProps = {
222
- title: '',
223
- headerValueTopTitle: '',
224
- headerValueBottomTitle: '',
225
- headerValue: '',
226
- HeaderValueCurrencyType: '',
227
- HeaderValueIsPercent: '',
161
+ title: 'String',
228
162
  barChartData: [{
229
163
  title: '202320',
230
164
  value: 542366
@@ -268,7 +202,6 @@ BarChartsByWeeks.defaultProps = {
268
202
  width: '100%',
269
203
  height: '100%',
270
204
  barChartColor: '#BD9EFF',
271
- barChartSecondColor: '#42977A',
272
205
  xselectedColor: '#42977A',
273
206
  tooltipTitle: 'Sales',
274
207
  startWeekRange: 0,
@@ -286,6 +219,5 @@ BarChartsByWeeks.defaultProps = {
286
219
  title: 'Category Average',
287
220
  iconType: ICON_TYPE_LEGEND_LINE_ICON,
288
221
  iconColor: '#C906FD'
289
- }],
290
- showTwoBars: false
222
+ }]
291
223
  };
package/dist/stories/components/BarChartsByWeeks.style.js CHANGED
@@ -4,17 +4,18 @@ 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 = void 0;
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;
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;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
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: ", ";\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);
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);
package/dist/stories/components/FilterButton.js CHANGED
@@ -1,29 +1,33 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.FilterButton = void 0;
8
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = _interopRequireWildcard(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,
14
15
  height,
15
16
  buttonText,
16
17
  iconWidth,
17
18
  iconHeight,
18
19
  disabled,
20
+ openState,
19
21
  onButtonClick
20
22
  } = props;
23
+ const [activeState, setActiveState] = (0, _react.useState)(openState);
21
24
  const onClickHandler = event => {
22
25
  onButtonClick(event);
26
+ setActiveState(!activeState);
23
27
  };
24
28
  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
25
29
  height: height,
26
- color: color,
30
+ color: activeState ? activeColor : color,
27
31
  disabled: disabled,
28
32
  onClick: event => {
29
33
  onClickHandler(event);
@@ -31,7 +35,7 @@ const FilterButton = props => {
31
35
  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
32
36
  width: iconWidth,
33
37
  height: iconHeight,
34
- color: color
38
+ color: activeState ? activeColor : color
35
39
  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
36
40
  };
37
41
  exports.FilterButton = FilterButton;
@@ -40,8 +44,10 @@ FilterButton.defaultProps = {
40
44
  buttonText: 'Filter',
41
45
  height: '40px',
42
46
  color: '#212121',
47
+ activeColor: '#229E38',
43
48
  iconHeight: 12,
44
49
  iconWidth: 12,
50
+ openState: false,
45
51
  disabled: false,
46
52
  onButtonClick: () => {}
47
53
  };
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 #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);
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);
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 === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? newSelectedValue[0].value : undefined
92
+ selectedValue: newSelectedValue
93
93
  }
94
94
  });
95
95
  };
@@ -486,6 +486,5 @@ FilterPanel.defaultProps = {
486
486
  onOkClick: () => {},
487
487
  onResetClick: () => {},
488
488
  onItemValueChanged: () => {},
489
- disableOKButton: false,
490
- className: ''
489
+ disableOKButton: false
491
490
  };
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: 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"])));
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"])));
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/dist/stories/components/TotalHorizontalCharts.style.js CHANGED
@@ -9,9 +9,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
11
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 color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n margin: 0;\n .top {\n text-align: center;\n white-space: normal;\n &:before {\n display: none;\n }\n }\n"])), props => props.textColor, props => props.width, props => props.height);
13
- const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 80%;\n width: 100%;\n margin: 0;\n ", "\n"])), scrollableStyles);
14
- const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n height: 120%;\n width: 75%;\n"])));
12
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif; \n color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n display: flex;\n flex-direction: column;\n .top {\n text-align: center;\n white-space: normal;\n &:before {\n display: none;\n }\n }\n"])), props => props.textColor, props => props.width, props => props.height);
13
+ const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n width: 100%;\n ", "\n"])), scrollableStyles);
14
+ const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n min-height: 120%;\n width: 75%;\n"])));
15
15
  const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 16px;\n"])));
16
16
  const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
17
17
  const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 20px;\n font-weight: 400;\n line-height: 1;\n margin: 0 0 8px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.710",
3
+ "version": "1.0.711",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -84,6 +84,5 @@
84
84
  "last 1 firefox version",
85
85
  "last 1 safari version"
86
86
  ]
87
- },
88
- "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
89
- }
87
+ }
88
+ }
package/dist/stories/components/EventInfo.js DELETED
@@ -1,92 +0,0 @@
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 DELETED
@@ -1,20 +0,0 @@
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/FormattedValue.js DELETED
@@ -1,68 +0,0 @@
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 DELETED
@@ -1,18 +0,0 @@
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"])));