sag_components 2.0.0-beta29 → 2.0.0-beta291

package/dist/stories/components/PopupCharts.js

@@ -1,244 +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 _TotalDoughnutChart = require("./TotalDoughnutChart");
-var _BarChartsByWeeks = require("./BarChartsByWeeks");
-var _TotalHorizontalCharts = require("./TotalHorizontalCharts");
-var _MarketShareDescription = require("./MarketShareDescription");
-var _SalesAndROI = require("./SalesAndROI");
-var _CloseXIcon = require("./icons/CloseXIcon");
-var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
-var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
-var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
-var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
-var _HannafordIcon_new = require("./icons/HannafordIcon_new");
-var _PopupCharts = require("./PopupCharts.style");
-const PopupCharts = props => {
-  const {
-    title,
-    chartType,
-    popupChartsItemsData,
-    isPopupChartsOpen,
-    width,
-    height,
-    subtitleTextColor,
-    onCloseClick
-  } = props;
-  const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
-  const divRef = (0, _react.useRef)(null);
-  const [divHeight, setDivHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (divRef.current) {
-      const {
-        top,
-        bottom
-      } = divRef.current.getBoundingClientRect();
-      const newHeight = bottom - top;
-      setDivHeight(newHeight);
-    }
-  }, [height]);
-  (0, _react.useEffect)(() => {
-    setIsPopupChartsOpen(isPopupChartsOpen);
-  }, [isPopupChartsOpen]);
-  const closePopupCharts = e => {
-    setIsPopupChartsOpen(false);
-    onCloseClick(e);
-  };
-  const displayRetailerIcon = retailer => {
-    switch (retailer) {
-      case 'Food Lion':
-        return /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null);
-      case 'Hannaford':
-        return /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null);
-      case 'Stop&Shop':
-        return /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null);
-      case 'The Giant Company':
-        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null);
-      case 'Giant Food':
-        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null);
-      default:
-        return '';
-    }
-  };
-  const displayDoughnutChart = rowsData => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
-    currencySign: true,
-    dotCut: true,
-    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
-    noDataText: rowsData.noDataText,
-    title: rowsData.title,
-    value: rowsData.value,
-    height: "270px",
-    width: "100%",
-    itemsValuesSeparateLine: false,
-    isPercent: true
-  });
-  const displayBarChartsByWeeks = (rowsData, showTwoBars) => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
-    showTwoBars: showTwoBars,
-    headerValueTopTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueTopTitle,
-    headerValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValue,
-    headerValueBottomTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueBottomTitle,
-    HeaderValueIsPercent: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue,
-    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
-    showLegend: rowsData === null || rowsData === void 0 ? void 0 : rowsData.showLegend,
-    barChartColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartColor,
-    barChartSecondColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartSecondColor,
-    barChartData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartData,
-    endWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.endWeekRange,
-    startWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.startWeekRange,
-    title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
-    tooltipTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipTitle,
-    tooltipSecondTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipSecondTitle,
-    height: "240px",
-    width: "100%",
-    xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor,
-    isPercentValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue
-  });
-  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
-    currencySign: true,
-    dotCut: true,
-    chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
-    noDataText: rowsData.noDataText,
-    title: rowsData.title,
-    value: rowsData.value,
-    showOutgoingBanner: false,
-    height: "240px",
-    width: "100%"
-  });
-  const displayMarketShareDescription = rowsData => {
-    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MarketShareDescription, {
-      marketShareData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.marketShareData,
-      height: "240px",
-      width: "100%",
-      iconColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.iconColor // "#229E38"
-    });
-    return content;
-  };
-  const displaySalesAndROI = rowsData => {
-    const content = /*#__PURE__*/_react.default.createElement(_SalesAndROI.SalesAndROI, {
-      title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
-      dotCut: rowsData === null || rowsData === void 0 ? void 0 : rowsData.dotCut,
-      currencySign: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencySign,
-      currencyType: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencyType,
-      salesData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.salesData,
-      noDataText: rowsData === null || rowsData === void 0 ? void 0 : rowsData.noDataText,
-      showBanner: false,
-      showBorderShadow: false,
-      height: "280px",
-      width: "100%"
-    });
-    return content;
-  };
-  const displayChart = item => {
-    var _item$rowsData, _item$rowsData2, _item$rowsData3, _item$rowsData4, _item$rowsData5, _item$rowsData6;
-    let content;
-    switch (chartType) {
-      case 'TotalDoughnutChart':
-        content = displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails);
-        break;
-      case 'TotalHorizontalCharts':
-        content = displayTotalHorizontalCharts((_item$rowsData2 = item.rowsData) === null || _item$rowsData2 === void 0 ? void 0 : _item$rowsData2.TotalHorizontalChartsDetails);
-        break;
-      case 'BarChartsByWeeks':
-        content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails, false);
-        break;
-      case 'BarChartsByWeeksTwoBars':
-        content = displayBarChartsByWeeks((_item$rowsData4 = item.rowsData) === null || _item$rowsData4 === void 0 ? void 0 : _item$rowsData4.BarChartsByWeeksDetails, true);
-        break;
-      case 'MarketShareDescription':
-        content = displayMarketShareDescription((_item$rowsData5 = item.rowsData) === null || _item$rowsData5 === void 0 ? void 0 : _item$rowsData5.MarketShareDescriptionDetails);
-        break;
-      case 'SalesAndROI':
-        content = displaySalesAndROI((_item$rowsData6 = item.rowsData) === null || _item$rowsData6 === void 0 ? void 0 : _item$rowsData6.SalesAndROIDetails);
-        break;
-      default:
-        content = '';
-        break;
-    }
-    return /*#__PURE__*/_react.default.createElement("div", null, content);
-  };
-  const displayChartItem = item => /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
-    id: "ChartItemMainContainer"
-  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
-    id: "ChartItemContainer",
-    style: {
-      cursor: 'pointer'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
-    id: "ChartItemIconContainer"
-  }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
-    id: "ChartItemTitle",
-    subtitleTextColor: subtitleTextColor
-  }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
-    id: "ChartContentContainer"
-  }, displayChart(item)));
-  return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
-    id: "MainContainer"
-  }, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
-    id: "ModalOverlay",
-    className: "modal-overlay"
-  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalContent, {
-    id: "ModalContent",
-    ref: divRef,
-    className: "modal-content",
-    height: height,
-    width: width,
-    onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
-    onClick: e => closePopupCharts(e)
-  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartsContainer, {
-    id: "ChartsContainer",
-    maxHeight: divHeight ? (divHeight - 110).toString().concat('', 'px') : null,
-    height: (popupChartsItemsData === null || popupChartsItemsData === void 0 ? void 0 : popupChartsItemsData.length) < 4 ? '45%' : '100%'
-  }, popupChartsItemsData.map(item => displayChartItem(item))))));
-};
-var _default = exports.default = PopupCharts;
-PopupCharts.defaultProps = {
-  title: 'Switching Pattern',
-  chartType: 'TotalDoughnutChart',
-  isPopupChartsOpen: true,
-  popupChartsItemsData: [{
-    title: 'Item 1',
-    chartType: 'TotalDoughnutChart',
-    value: 100,
-    legendData: [{
-      color: '#FF0000',
-      name: 'Red',
-      value: 50
-    }, {
-      color: '#00FF00',
-      name: 'Green',
-      value: 30
-    }, {
-      color: '#0000FF',
-      name: 'Blue',
-      value: 20
-    }],
-    noDataText: 'No data available'
-  }, {
-    title: 'Item 2',
-    chartType: 'TotalHorizontalCharts',
-    value: 200,
-    chartsData: [{
-      label: 'Label 1',
-      value: 50
-    }, {
-      label: 'Label 2',
-      value: 100
-    }, {
-      label: 'Label 3',
-      value: 150
-    }],
-    noDataText: 'No data available'
-  }
-  // Add more items as needed
-  ],
-  width: '1700px',
-  height: '800px',
-  onCloseClick: () => {},
-  subtitleTextColor: '#7E7E7E'
-};

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

@@ -1,108 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartsContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const MainContainer = exports.MainContainer = _styledComponents.default.div``;
-const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div`
-  position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const ModalContent = exports.ModalContent = _styledComponents.default.div`  
-  font-family: "Poppins", sans-serif;
-  font-weight: 500;
-  font-size: 18px;
-  background-color: #fefefe;
-  padding: 20px 30px 20px 40px;
-  border: 1px solid #888;
-  border-radius: 10px;
-  height: ${props => props.height};
-  width: ${props => props.width};
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-`;
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 0 10px 0;
-  margin: 0;
-  border-bottom: 1px solid #b1b1b1;
-`;
-const Title = exports.Title = _styledComponents.default.p`
-  font-weight: 400;
-  font-size: 24px;
-  margin: 0;
-`;
-const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr); /* 3 columns */
-  flex-wrap: wrap;  
-  overflow-y: auto;
-  ${scrollableStyles}
-  max-height:  ${props => props.maxHeight};
-  height: ${props => props.height};
-  padding: 10px 0 0 0;
-`;
-const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div`
- // display: flex;
-  margin: 10px 10px 10px 10px;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  padding-right: 10px;
-  
-`;
-const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 20px 10px;
-`;
-const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3`
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0 10px;
-  color: ${props => props.subtitleTextColor};
-`;
-const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3`
-  margin: 0 0 0 10px;
-`;
-const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 14px;
-  margin: 0;
-  border-radius: 12px;
-`;
-const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div`
-  display: block;
-  margin: 0;
-  cursor: pointer;
-`;

package/dist/stories/components/ProductsVariety.js

@@ -1,94 +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 _ProductsVariety = require("./ProductsVariety.style");
-const ProductsVariety = props => {
-  const {
-    title,
-    subTitle,
-    productsData,
-    showBannersDropdown,
-    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(_ProductsVariety.ProductsVarietyMainContainer, {
-    id: "ProductsVarietyMainContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContainer, {
-    id: "ProductsVarietyContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitleContainer, {
-    id: "ProductsVarietyTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitle, {
-    id: "ProductsVarietyTitle"
-  }, title), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
-    id: "ProductsVarietySubTitle"
-  }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
-    id: "ProductsVarietySubTitle"
-  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), showBannersDropdown && displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.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(_ProductsVariety.ProductsVarietyContentContainer, {
-    id: "ProductsVarietyContentContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsTitle, {
-    id: "ProductsTitle"
-  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductContainer, {
-    id: "ProductContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.Product, {
-    id: "Product"
-  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
-    id: "ProductButtonContainer",
-    background: "#F8CD00",
-    onClick: () => {
-      onSpotlightProductClick({
-        value: item.value,
-        label: item.label
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
-};
-var _default = exports.default = ProductsVariety;
-ProductsVariety.defaultProps = {
-  title: 'Products Variety',
-  subTitle: 'Product Name',
-  showBannersDropdown: true,
-  onSpotlightProductClick: () => {},
-  onClickBannersDropdown: () => {}
-};

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

@@ -1,86 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProductsVarietyTitleContainer = exports.ProductsVarietyTitle = exports.ProductsVarietySubTitle = exports.ProductsVarietyMainContainer = exports.ProductsVarietyContentContainer = exports.ProductsVarietyContainer = exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ProductsVarietyMainContainer = exports.ProductsVarietyMainContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  position: relative;
-  margin: 0;
-  padding: 10px;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-`;
-const ProductsVarietyContainer = exports.ProductsVarietyContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 10px;
-`;
-const ProductsVarietyTitleContainer = exports.ProductsVarietyTitleContainer = _styledComponents.default.div`
-  font-size: 20px;
-  line-height: 25px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 10px;
-  gap: 15px;
-`;
-const ProductsVarietyTitle = exports.ProductsVarietyTitle = _styledComponents.default.h3`
-  font-weight: 500;
-  font-size: 20px;
-  margin: 0;
-`;
-const ProductsVarietySubTitle = exports.ProductsVarietySubTitle = _styledComponents.default.h3`
-  color: #757171;
-  font-weight: 500;
-  font-size: 20px;
-  margin: 0;
-`;
-const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: column;
-  align-items: flex-start;
-  margin: 10px;
-  padding: 10px 20px 20px 50px;
-  font-size: 20px;
-  line-height: 25px;
-`;
-const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3`
-  font-weight: 600;
-  font-size: 14px;
-  margin: 10px 0;
-`;
-const ProductContainer = exports.ProductContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border-bottom: 1px solid #00000010;
-  width: 100%;
-  gap: 20px;
-`;
-const Product = exports.Product = _styledComponents.default.h3`
-  font-weight: 400;
-  font-size: 14px;
-  border-radius: 12px;
-`;
-const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-  height: 25px;
-  padding: 0 15px;
-  user-select: none;
-  border-radius: 12px;
-  background: ${props => props.background || '#ffffff'};
-  &:hover {
-    background-color: #f0f0f0;
-    cursor: pointer;
-  }
-`;

package/dist/stories/components/ProgressBar.js

@@ -1,52 +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 _ProgressBar = require("./ProgressBar.style");
-const ProgressBar = props => {
-  const {
-    progressPercent,
-    refreshInterval,
-    height,
-    width,
-    color
-  } = props;
-  const [progress, setProgress] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    const timer = setInterval(() => {
-      setProgress(currentProgress => {
-        const newProgress = currentProgress + 1;
-        if (newProgress > 100) {
-          clearInterval(timer);
-          return 100;
-        }
-        return newProgress;
-      });
-    }, refreshInterval);
-    return () => clearInterval(timer);
-  }, [progressPercent, refreshInterval]);
-  (0, _react.useEffect)(() => {
-    setProgress(progressPercent);
-  }, [progressPercent]);
-  return /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarContainer, {
-    className: "ProgressBarContainer",
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarFiller, {
-    className: "ProgressBarFiller",
-    color: color,
-    progress: progress
-  }));
-};
-var _default = exports.default = ProgressBar;
-ProgressBar.defaultProps = {
-  progressPercent: 0,
-  refreshInterval: 100,
-  width: '100%',
-  height: '9px',
-  color: '#066768'
-};

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

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBarFiller = exports.ProgressBarContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-// Styled-components for the progress container and the filler
-const ProgressBarContainer = exports.ProgressBarContainer = _styledComponents.default.div`  
-  width: ${props => props.width};
-  background-color: #F2F2F2;
-  border-radius: 12px;
-  height:  ${props => props.height};
-  margin: 5px 0;  
-`;
-const ProgressBarFiller = exports.ProgressBarFiller = _styledComponents.default.div`
-  background-color: ${props => props.color};
-  height: 100%;
-  text-align: center;
-  border-radius: 12px;
-  transition: width 0.5s ease-in-out;
-  width: ${props => props.progress}%;
-`;