sag_components 1.0.817 → 1.0.818

package/dist/stories/components/FilterButton.js

@@ -1,29 +1,33 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FilterButton = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _FilterButton = require("./FilterButton.style");
 var _FilterIcon = require("./icons/FilterIcon");
 const FilterButton = props => {
   const {
     color,
+    activeColor,
     height,
     buttonText,
     iconWidth,
     iconHeight,
     disabled,
+    openState,
     onButtonClick
   } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
   const onClickHandler = event => {
     onButtonClick(event);
+    setActiveState(!activeState);
   };
   return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
     height: height,
-    color: color,
+    color: activeState ? activeColor : color,
     disabled: disabled,
     onClick: event => {
       onClickHandler(event);
@@ -31,7 +35,7 @@ const FilterButton = props => {
   }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
     width: iconWidth,
     height: iconHeight,
-    color: color
+    color: activeState ? activeColor : color
   }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
 };
 exports.FilterButton = FilterButton;
@@ -40,8 +44,10 @@ FilterButton.defaultProps = {
   buttonText: 'Filter',
   height: '40px',
   color: '#212121',
+  activeColor: '#229E38',
   iconHeight: 12,
   iconWidth: 12,
+  openState: false,
   disabled: false,
   onButtonClick: () => {}
 };

package/dist/stories/components/FilterButton.style.js

@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
-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);
+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);
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/OneColumnContainer.js

@@ -64,7 +64,7 @@ const OneColumnContainer = props => {
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
     })
-  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "View By Banner")), !isLoading && !hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.Content, null, children), !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "View By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
     className: "IconContainer",
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false)

package/dist/stories/components/OneColumnContainer.style.js

@@ -4,18 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.Content = exports.ColumnTitle = exports.BannerContainer = void 0;
+exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.ColumnTitle = exports.BannerContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  height: ", ";\n  overflow: ", ";\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background-color: white; \n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
-const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (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"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
-const Content = exports.Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n"])));
-const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  overflow: auto;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
-const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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"])));
-const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
-const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  display: inline-block;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 20px 20px 0;\n"])));
-const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n  height: 20px;\n  top: 10px;\n  right: 10px;\n  position: absolute;\n"])));
-const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n"])));
-const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  z-index: 99;\n  top: 18px;\n  right: ", ";  \n  user-select: none;\n"])), props => props.right);
-const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["  \n  display: flex;\n  justify-content: flex-end;\n  align-items: center; \n  gap: 8px; \n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 13px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 13px;\n      height: 13px;\n    }\n    @media (max-width: 1366px) {\n      width: 12px;\n      height: 12px;\n    }\n  }\n"])), props => props.textColor);
+const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (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    box-sizing: border-box;\n  }\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
+const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  overflow: auto;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
+const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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"])));
+const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
+const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  display: inline-block;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 20px 20px 0;\n"])));
+const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n  height: 20px;\n  top: 10px;\n  right: 10px;\n  position: absolute;\n"])));
+const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n"])));
+const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  z-index: 99;\n  top: 18px;\n  right: ", ";  \n  user-select: none;\n"])), props => props.right);
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["  \n  display: flex;\n  justify-content: flex-end;\n  align-items: center; \n  gap: 8px; \n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 13px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 13px;\n      height: 13px;\n    }\n    @media (max-width: 1366px) {\n      width: 12px;\n      height: 12px;\n    }\n  }\n"])), props => props.textColor);

package/dist/stories/components/PopupCharts.js

@@ -101,7 +101,6 @@ const PopupCharts = props => {
   const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
     currencySign: true,
     dotCut: true,
-    AvgROI: rowsData === null || rowsData === void 0 ? void 0 : rowsData.AvgROI,
     chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
     noDataText: rowsData.noDataText,
     title: rowsData.title,

package/dist/stories/components/ProductsVariety.js

@@ -16,6 +16,7 @@ const ProductsVariety = props => {
     title,
     subTitle,
     productsData,
+    showBannersDropdown,
     onSpotlightProductClick,
     onClickBannersDropdown
   } = props;
@@ -55,7 +56,7 @@ const ProductsVariety = props => {
     id: "ProductsVarietySubTitle"
   }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
     id: "ProductsVarietySubTitle"
-  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), showBannersDropdown && displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
     id: "ProductButtonContainer",
     onClick: () => {
       setIsProductsListOpen(!IsProductsListOpen);
@@ -87,6 +88,7 @@ var _default = exports.default = ProductsVariety;
 ProductsVariety.defaultProps = {
   title: 'Products Variety',
   subTitle: 'Product Name',
+  showBannersDropdown: true,
   onSpotlightProductClick: () => {},
   onClickBannersDropdown: () => {}
 };

package/dist/stories/components/TotalHorizontalCharts.js

@@ -21,7 +21,6 @@ const TotalHorizontalCharts = props => {
     title,
     value,
     dotCut,
-    AvgROI,
     currencySign,
     currencyType,
     width,
@@ -136,7 +135,7 @@ const TotalHorizontalCharts = props => {
     id: "FormattedValue"
   }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
     id: "CurrencySign"
-  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), 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(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
+  }, 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(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
     ref: chartContainerRef
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     height: heightChartContainer - 10,
@@ -188,7 +187,6 @@ const TotalHorizontalCharts = props => {
       pointerEvents: 'none'
     }
   })))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
-    className: "TotalHorizontalCharts_NoDataFoundMessage",
     noDataText: noDataText
   }));
 };
@@ -198,7 +196,6 @@ TotalHorizontalCharts.defaultProps = {
   title: 'SALES',
   value: 0,
   dotCut: false,
-  AvgROI: false,
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],

package/dist/stories/components/TotalHorizontalCharts.style.js

@@ -9,7 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 5px;\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";
-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  // justify-content: center;\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);
+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);
 const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  width: 100%;\n  ", "\n"])), scrollableStyles);
 const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 120%;\n  width: 90%;\n"])));
 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"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.817",
+  "version": "1.0.818",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/stories/components/EventInfo.js

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
-var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
-var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
-var _BannersDropdown = require("./BannersDropdown");
-var _EventInfo = require("./EventInfo.style");
-const EventInfo = props => {
-  const {
-    title,
-    subTitle,
-    productsData,
-    onSpotlightProductClick,
-    onClickBannersDropdown
-  } = props;
-  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
-  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
-    banners: [{
-      checked: true,
-      name: 'StopAndShop'
-    }, {
-      checked: true,
-      name: 'FoodLion'
-    }, {
-      checked: true,
-      name: 'GiantFood'
-    }, {
-      checked: true,
-      name: 'TheGiantCompany'
-    }, {
-      checked: true,
-      name: 'Hannaford'
-    }],
-    onClick: banners => {
-      onClickBannersDropdown({
-        banners
-      });
-    }
-  });
-  return /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoMainContainer, {
-    id: "EventInfoMainContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
-    id: "EventInfoContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
-    id: "EventInfoTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
-    id: "EventInfoTitle"
-  }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
-    id: "EventInfoSubTitle"
-  }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
-    id: "EventInfoSubTitle"
-  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
-    id: "ProductButtonContainer",
-    onClick: () => {
-      setIsProductsListOpen(!IsProductsListOpen);
-    }
-  }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
-    color: "#212121"
-  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
-    color: "#212121"
-  }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
-    id: "EventInfoContentContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
-    id: "ProductsTitle"
-  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
-    id: "ProductContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
-    id: "Product"
-  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
-    id: "ProductButtonContainer",
-    background: "#F8CD00",
-    onClick: () => {
-      onSpotlightProductClick({
-        value: item.value,
-        label: item.label
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
-};
-var _default = exports.default = EventInfo;
-EventInfo.defaultProps = {
-  title: 'Products Variety',
-  subTitle: 'Product Name',
-  onSpotlightProductClick: () => {},
-  onClickBannersDropdown: () => {}
-};

package/dist/stories/components/EventInfo.style.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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');