sag_components 2.0.0-beta → 2.0.0-beta2

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

@@ -1,108 +0,0 @@
-"use strict";
-
-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"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/components/ProductsVariety/ProductsVariety.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
-var _MenuItemUpIcon = require("../../icons/MenuItemUpIcon");
-var _SpotlightProductIcon = require("../../icons/SpotlightProductIcon");
-var _BannersDropdown = require("../BannersDropdown/BannersDropdown");
-var _ProductsVariety = require("./ProductsVariety.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const ProductsVariety = props => {
-  const {
-    title,
-    subTitle,
-    productsData,
-    showBannersDropdown,
-    onSpotlightProductClick,
-    onClickBannersDropdown
-  } = props;
-  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
-  const displayBannersDropdown = () => <_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 <_ProductsVariety.ProductsVarietyMainContainer id="ProductsVarietyMainContainer">
-      <_ProductsVariety.ProductsVarietyContainer id="ProductsVarietyContainer">
-        <_ProductsVariety.ProductsVarietyTitleContainer id="ProductsVarietyTitleContainer">
-          <_ProductsVariety.ProductsVarietyTitle id="ProductsVarietyTitle">
-            {title}
-          </_ProductsVariety.ProductsVarietyTitle>
-          <_ProductsVariety.ProductsVarietySubTitle id="ProductsVarietySubTitle">
-            |
-          </_ProductsVariety.ProductsVarietySubTitle>
-          <_ProductsVariety.ProductsVarietySubTitle id="ProductsVarietySubTitle">
-            {productsData ? productsData?.length : ''}
-          </_ProductsVariety.ProductsVarietySubTitle>
-
-          {showBannersDropdown && displayBannersDropdown()}
-        </_ProductsVariety.ProductsVarietyTitleContainer>
-
-        <_ProductsVariety.ProductButtonContainer id="ProductButtonContainer" onClick={() => {
-        setIsProductsListOpen(!IsProductsListOpen);
-      }}>
-          {IsProductsListOpen ? <_MenuItemUpIcon.MenuItemUpIcon color="#212121" /> : <_MenuItemOpenIcon.MenuItemOpenIcon color="#212121" />}
-        </_ProductsVariety.ProductButtonContainer>
-      </_ProductsVariety.ProductsVarietyContainer>
-
-      {IsProductsListOpen && <_ProductsVariety.ProductsVarietyContentContainer id="ProductsVarietyContentContainer">
-          <_ProductsVariety.ProductsTitle id="ProductsTitle">{subTitle}</_ProductsVariety.ProductsTitle>
-          {productsData?.map(item => <_ProductsVariety.ProductContainer id="ProductContainer">
-              <_ProductsVariety.Product id="Product">{item.label}</_ProductsVariety.Product>
-              {item.ShowSpotlightProductButton ? <_ProductsVariety.ProductButtonContainer id="ProductButtonContainer" background="#F8CD00" onClick={() => {
-          onSpotlightProductClick({
-            value: item.value,
-            label: item.label
-          });
-        }}>
-                  <_SpotlightProductIcon.SpotlightProductIcon />
-                </_ProductsVariety.ProductButtonContainer> : ''}
-            </_ProductsVariety.ProductContainer>)}
-        </_ProductsVariety.ProductsVarietyContentContainer>}
-    </_ProductsVariety.ProductsVarietyMainContainer>;
-};
-var _default = exports.default = ProductsVariety;
-ProductsVariety.propTypes = {
-  title: _propTypes.default.string,
-  // eslint-disable-next-line react/require-default-props
-  productsData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string,
-    label: _propTypes.default.string,
-    ShowSpotlightProductButton: _propTypes.default.bool
-  })),
-  showBannersDropdown: _propTypes.default.bool,
-  subTitle: _propTypes.default.string,
-  onClickBannersDropdown: _propTypes.default.func,
-  onSpotlightProductClick: _propTypes.default.func
-};
-ProductsVariety.defaultProps = {
-  title: 'Products Variety',
-  subTitle: 'Product Name',
-  showBannersDropdown: true,
-  onSpotlightProductClick: () => {},
-  onClickBannersDropdown: () => {}
-};

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

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ThreeProducts = exports.FiveProducts = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ProductsVariety = _interopRequireDefault(require("./ProductsVariety"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const productsData1 = [{
-  value: '1',
-  label: 'Sweet Potat Smoky BBQ Crisps',
-  ShowSpotlightProductButton: true
-}, {
-  value: '2',
-  label: 'Sweet Potato Sea Salt Crisps',
-  ShowSpotlightProductButton: false
-}, {
-  value: '3',
-  label: 'Homestyle Ranch',
-  ShowSpotlightProductButton: true
-}];
-const productsData2 = [{
-  value: '1',
-  label: 'Sweet Potat Smoky BBQ Crisps',
-  ShowSpotlightProductButton: true
-}, {
-  value: '2',
-  label: 'Sweet Potato Sea Salt Crisps',
-  ShowSpotlightProductButton: false
-}, {
-  value: '3',
-  label: 'Homestyle Ranch',
-  ShowSpotlightProductButton: true
-}, {
-  value: '4',
-  label: 'Sweet BBQ Potato Sea Potat Smoky BBQ Crisps',
-  ShowSpotlightProductButton: true
-}, {
-  value: '5',
-  label: ' BBQ Crisps Potato Sea Salt Crisps',
-  ShowSpotlightProductButton: false
-}];
-var _default = exports.default = {
-  title: 'SAG BI/ProductsVariety',
-  component: _ProductsVariety.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title text ',
-      defaultValue: ''
-    },
-    subTitle: {
-      name: 'subTitle',
-      control: {
-        type: 'text'
-      },
-      description: 'subTitle text ',
-      defaultValue: ''
-    },
-    productsData: {
-      description: 'array [] of objects: {value: string, label: string } to fill the product items. '
-    },
-    onSpotlightProductClick: {
-      action: 'onSpotlightProductClick',
-      description: 'returns an event onSpotlightProductClick object when user clicks on a button'
-    },
-    onClickBannersDropdown: {
-      action: 'onClickBannersDropdown',
-      description: 'returns an event onClickBannersDropdown object when user clicks on a button'
-    }
-  }
-};
-const Template = args => <_ProductsVariety.default {...args} />;
-const ThreeProducts = exports.ThreeProducts = Template.bind({});
-ThreeProducts.args = {
-  title: 'Products Variety',
-  subTitle: 'Product Name',
-  productsData: productsData1
-};
-const FiveProducts = exports.FiveProducts = Template.bind({});
-FiveProducts.args = {
-  title: 'Products Variety',
-  subTitle: 'Product Name',
-  productsData: productsData2
-};

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

@@ -1,86 +0,0 @@
-"use strict";
-
-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"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/components/ProgressBar/ProgressBar.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ProgressBar = require("./ProgressBar.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 <_ProgressBar.ProgressBarContainer className="ProgressBarContainer" width={width} height={height}>
-      <_ProgressBar.ProgressBarFiller className="ProgressBarFiller" color={color} progress={progress} />
-    </_ProgressBar.ProgressBarContainer>;
-};
-var _default = exports.default = ProgressBar;
-ProgressBar.propTypes = {
-  progressPercent: _propTypes.default.number,
-  refreshInterval: _propTypes.default.number,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  color: _propTypes.default.string
-};
-ProgressBar.defaultProps = {
-  progressPercent: 0,
-  refreshInterval: 100,
-  width: '100%',
-  height: '9px',
-  color: '#066768'
-};

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

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WideBlue = exports.SmallGreen = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG/ProgressBar',
-  component: _ProgressBar.default,
-  tags: ['autodocs'],
-  argTypes: {
-    progressPercent: {
-      name: 'progressPercent',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      },
-      description: 'progressPercent - set this value to increase or decrease progress current value - in percent 0% - 100%. Allows control of the progressBar'
-    },
-    refreshInterval: {
-      name: 'refreshInterval',
-      control: {
-        type: 'number'
-      },
-      description: 'refreshInterval - in miliseconds - speed of progress bar'
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the progress bar'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the progress bar'
-    },
-    color: {
-      name: 'color',
-      description: 'Sets the color of bar',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    }
-  }
-};
-const Template = args => <_ProgressBar.default {...args} />;
-const SmallGreen = exports.SmallGreen = Template.bind({});
-SmallGreen.args = {
-  progressPercent: 0,
-  refreshInterval: 100,
-  width: '200px',
-  height: '9px',
-  color: '#92CF17'
-};
-const WideBlue = exports.WideBlue = Template.bind({});
-WideBlue.args = {
-  progressPercent: 0,
-  refreshInterval: 100,
-  width: '800px',
-  height: '9px',
-  color: '#1B30AA'
-};

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBarFiller = exports.ProgressBarContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 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}%;
-`;

package/dist/components/QuarterPicker/QuarterPicker.js

@@ -1,145 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _moment = _interopRequireDefault(require("moment"));
-var _Calendar = _interopRequireDefault(require("../../icons/Calendar"));
-var _CalendarInOpen = _interopRequireDefault(require("../../icons/CalendarInOpen"));
-var _QuarterPicker = require("./QuarterPicker.style");
-var _QuarterPopupPicker = _interopRequireDefault(require("./QuarterPopupPicker"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/require-default-props */
-/* eslint-disable no-nested-ternary */
-// CustomInput.js
-
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [value, setValue] = (0, _react.useState)('');
-  const [startDateValue, setStartDateValue] = (0, _react.useState)(null);
-  const [hoverInputContainer, setHoverInputContainer] = (0, _react.useState)(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = (0, _react.useState)(false);
-  const inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    const handleClickOutside = event => {
-      if (inputRef.current && !inputRef.current.contains(event.target)) {
-        setIsFocused(false);
-      }
-    };
-
-    // Add event listener for clicks on the document
-    document.addEventListener('mousedown', handleClickOutside);
-
-    // Cleanup event listener on component unmount
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (selectedValue && selectedValue.includes('-')) {
-      const dateArray = selectedValue.split('-');
-      const startDate = new Date(dateArray[0]);
-      setStartDateValue((0, _moment.default)(startDate).format('MM'));
-      setValue(selectedValue);
-    }
-  }, [selectedValue]);
-  (0, _react.useEffect)(() => {
-    if (!hoverInputContainer && !hoverOptionsContainer) {
-      setIsFocused(false);
-      setIsOpen(false);
-    }
-  }, [hoverInputContainer, hoverOptionsContainer]);
-  const onChangeDate = startDate => {
-    if (startDate) {
-      setIsOpen(!isOpen);
-      setIsFocused(false);
-      setStartDateValue(startDate);
-      setValue(`${startDate}`);
-      onChange(`${startDate}`);
-    }
-  };
-  const onChangeEvent = e => {
-    const dateArray = e.target.value;
-    const arr = dateArray.split(' - ');
-    const startDate = new Date(arr[0]);
-    setStartDateValue((0, _moment.default)(startDate).format('MM'));
-    onChange(e);
-    setValue(e.target.value);
-  };
-  const toggleDatePicker = () => {
-    setIsOpen(!isOpen);
-  };
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-  return <_QuarterPicker.QuarterPickerContainer className="QuarterPickerContainer" onClick={handleFocus} width={width} height={height}>
-      <_QuarterPicker.InputContainer className="InputContainer" isFocused={isFocused} hasValue={value} disabled={disabled} textColor={textColor} borderColor={borderColor} borderColorFocus={borderColorFocus} onMouseEnter={() => setHoverInputContainer(true)} onMouseLeave={() => setHoverInputContainer(false)}>
-        <_QuarterPicker.StyledLabel className="StyledLabel" onClick={handleFocus} isFocused={isFocused} hasValue={value} disabled={disabled} textColor={textColor} borderColor={borderColor} borderColorFocus={borderColorFocus}>
-          {label}
-          {required && <_QuarterPicker.RequiredIndicator>*</_QuarterPicker.RequiredIndicator>}
-        </_QuarterPicker.StyledLabel>
-        <_QuarterPicker.StyledInput className="StyledInput" ref={inputRef} value={value} onChange={onChangeEvent} onFocus={handleFocus} onBlur={handleBlur} isFocused={isFocused} borderColorFocus={borderColorFocus} borderRadius={borderRadius} width={width} height={height} placeholder={isFocused ? placeholder : ''} disabled={disabled} borderColor={borderColor} textColor={textColor} />
-        <_QuarterPicker.CalendarDiv className="CalendarDiv" width={width} onClick={toggleDatePicker}>
-          {isOpen === true ? <_CalendarInOpen.default /> : <_Calendar.default />}
-        </_QuarterPicker.CalendarDiv>
-      </_QuarterPicker.InputContainer>
-
-      <_QuarterPicker.OptionsContainer className="OptionsContainer" onMouseEnter={() => setHoverOptionsContainer(true)} onMouseLeave={() => setHoverOptionsContainer(false)}>
-        <_QuarterPopupPicker.default className="QuarterPopupPicker" isOpen={isOpen} onChangeDate={onChangeDate} value={value} setValue={setValue} startDateValue={startDateValue} availableQuarters={availableQuarters} />
-
-      </_QuarterPicker.OptionsContainer>
-
-    </_QuarterPicker.QuarterPickerContainer>;
-};
-QuarterPicker.propTypes = {
-  availableQuarters: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  label: _propTypes.default.string.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  borderRadius: _propTypes.default.string.isRequired,
-  required: _propTypes.default.bool,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  borderColor: _propTypes.default.string,
-  borderColorFocus: _propTypes.default.string,
-  textColor: _propTypes.default.string,
-  selectedValue: _propTypes.default.string
-};
-QuarterPicker.defaultProps = {
-  required: true,
-  width: '200%',
-  height: '60px',
-  disabled: false,
-  placeholder: 'Enter here..',
-  borderColor: '#000000',
-  borderColorFocus: '#000000',
-  textColor: '#000000',
-  selectedValue: ''
-};
-var _default = exports.default = QuarterPicker;