sag_components 1.0.628 → 1.0.630

package/dist/stories/components/Datepicker.js

@@ -55,7 +55,6 @@ const Datepicker = _ref => {
           width
           // color: labelColor,
         },
-
         '& .MuiOutlinedInput-root': {
           borderRadius: '12px',
           fontFamily: 'Poppins',
@@ -75,18 +74,15 @@ const Datepicker = _ref => {
             borderColor: '#E7E7E7'
             // color: labelColor,
           },
-
           '&:hover .MuiOutlinedInput-notchedOutline': {
             borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
             // color: labelColor,
           },
-
           '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
             borderColor: disabled ? '#E7E7E7' : labelColor
             // color: labelColor,
           }
         },
-
         '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
           // Default transform is "translate(14px, 20px) scale(1)""
           // This lines up the label with the initial cursor position in the input

package/dist/stories/components/DropdownMulti.js

@@ -86,7 +86,6 @@ const DropdownMulti = props => {
           //   marginRight: '10px',
           // },
         },
-
         '& .MuiAutocomplete-inputRoot': {
           paddingLeft: '10px !important',
           borderRadius: '12px',
@@ -234,7 +233,6 @@ const DropdownMulti = props => {
         //     </>
         //   ),
       },
-
       onKeyDown: event => {
         if (!isInputAllowed(event.key)) {
           event.preventDefault();

package/dist/stories/components/EventInfo.js

@@ -0,0 +1,92 @@
+"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

@@ -0,0 +1,20 @@
+"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');

package/dist/stories/components/FilterButton.js

@@ -1,33 +1,29 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FilterButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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: activeState ? activeColor : color,
+    color: color,
     disabled: disabled,
     onClick: event => {
       onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
   }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
     width: iconWidth,
     height: iconHeight,
-    color: activeState ? activeColor : color
+    color: color
   }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
 };
 exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ 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 ", ";\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 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 SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/FilterPanel.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _DropdownMulti = require("./DropdownMulti");
 var _Dropdown = require("./Dropdown");
-var _SagButton = _interopRequireDefault(require("./SagButton"));
+var _Button = _interopRequireDefault(require("./Button"));
 var _RangePicker = _interopRequireDefault(require("./RangePicker"));
 var _QuarterPicker = _interopRequireDefault(require("./QuarterPicker"));
 var _MonthPicker = _interopRequireDefault(require("./MonthPicker"));
@@ -425,17 +425,21 @@ const FilterPanel = props => {
     ref: AllFieldsContainerRef
   }, displayFields(FieldsDataState)), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
     className: "ButtonsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_SagButton.default, {
-    textColor: "#ffffff",
-    backgroundColor: okButtonBackgroundColor || '#ffffff',
-    borderColor: borderColor,
-    onClickColor: "#B1B1B1",
-    radius: "12px",
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primry"
+    // textColor="#ffffff"
+    // backgroundColor={okButtonBackgroundColor || '#ffffff'}
+    // borderColor={borderColor}
+    // onClickColor="#B1B1B1"
+    // radius="12px"
+    ,
     text: "Go",
+    size: "medium",
     height: "45px",
-    width: "74px",
-    fontSize: "14px",
-    fontWeight: "500",
+    width: "74px"
+    // fontSize="14px"
+    // fontWeight="500"
+    ,
     disabled: disableOKButton,
     onClick: () => onOkClick({
       eventName: 'onOkClick',
@@ -448,17 +452,21 @@ const FilterPanel = props => {
         } : '')
       }))
     })
-  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
-    textColor: "#212121",
-    backgroundColor: "#ffffff",
-    borderColor: borderColor,
-    onClickColor: "#B1B1B1",
-    radius: "12px",
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "secondary"
+    // textColor="#212121"
+    // backgroundColor="#ffffff"
+    // borderColor={borderColor}
+    // onClickColor="#B1B1B1"
+    // radius="12px"
+    ,
     text: "Reset",
+    size: "medium",
     height: "45px",
-    width: "74px",
-    fontSize: "14px",
-    fontWeight: "500",
+    width: "74px"
+    // fontSize="14px"
+    // fontWeight="500"
+    ,
     disabled: false,
     onClick: e => onClickResetHandler(e)
   })));

package/dist/stories/components/LinkButton.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LinkButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _LinkButton = require("./LinkButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+var _OptionsIcon = require("./icons/OptionsIcon");
+var _DownloadIcon = require("./icons/DownloadIcon");
+var _DocumentIcon = require("./icons/DocumentIcon");
+var _FlyIcon = require("./icons/FlyIcon");
+var _BellIcon = require("./icons/BellIcon");
+var _MaintenanceIcon = require("./icons/MaintenanceIcon");
+var _ExitIcon = require("./icons/ExitIcon");
+var _EyeIcon = require("./icons/EyeIcon");
+const LinkButton = props => {
+  const {
+    text,
+    type,
+    size,
+    height,
+    width,
+    disabled,
+    textColor,
+    leftIcon,
+    rightIcon,
+    onClick
+  } = props;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const handleLinkButtonClick = () => {
+    setClicked(true);
+    onClick(text);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const getIcon = icon => {
+    const iconHeight = size === 'small' ? '12px' : '13px';
+    const iconWidth = size === 'small' ? '12px' : '13px';
+    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#229E38');
+    const color = disabled ? '#B1B1B1' : newTextColor;
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
+    }
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonContainer, {
+    className: "LinkButtonContainer",
+    width: width || null,
+    height: height || '20px'
+  }, /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonItem, {
+    className: clicked ? 'LinkButtonItem-clicked' : 'LinkButtonItem',
+    onClick: !disabled ? handleLinkButtonClick : null,
+    width: width || null,
+    height: height || '20px',
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
+    font_size: size === 'small' ? '14px' : '16px'
+  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_LinkButton.Label, {
+    className: "Label",
+    disabled: disabled,
+    font_size: size === 'small' ? '14px' : '16px'
+  }, text), getRightIcon()));
+};
+exports.LinkButton = LinkButton;
+var _default = exports.default = LinkButton;
+LinkButton.defaultProps = {
+  text: '',
+  type: 'primary',
+  size: 'small',
+  height: '',
+  width: '',
+  disabled: false,
+  textColor: '',
+  onClick: () => {},
+  leftIcon: 'none',
+  rightIcon: 'none'
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkButtonItem = exports.LinkButtonContainer = exports.Label = exports.IconWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const LinkButtonContainer = exports.LinkButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
+const LinkButtonItem = exports.LinkButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";  \n  color: ", ";    \n  box-sizing: border-box;\n  gap: 8px;  \n  padding: 0 4px; \n  font-size: ", ";\n  font-family: 'Poppins';\n  font-style: normal;\n  font-weight: 400;      \n  &:hover {   \n    color: ", ";       \n    text-decoration: ", "; \n    cursor: ", ";\n  }\n  &.LinkButtonItem-clicked {   \n    cursor: pointer;  \n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => props.width, props => props.height, props => props.disabled ? '#B1B1B1' : props.text_color, props => props.font_size, props => props.disabled ? '#B1B1B1' : props.text_color, props => props.disabled ? '' : 'underline', props => !props.disabled ? 'pointer' : 'default');
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n  user-select: none;   \n  pointer-events: none;\n"])));
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n"])));

package/dist/stories/components/MonthPopupPicker.js

@@ -123,7 +123,6 @@ const MonthPopupPicker = _ref => {
       // return null;
     })));
   };
-
   return /*#__PURE__*/_react.default.createElement(DatePickerContainer, null, isOpen && renderDatePicker());
 };
 var _default = exports.default = MonthPopupPicker;

package/dist/stories/components/PopupCharts.js

@@ -96,7 +96,6 @@ const PopupCharts = props => {
     width: "100%",
     xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor // "#C7E7CD"
   });
-
   const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
     currencySign: true,
     dotCut: true,

package/dist/stories/components/ReportTable.js

@@ -8,8 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ReportTable = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
+var _Duplicate = _interopRequireDefault(require("./icons/Duplicate"));
 var _ReportTable = require("./ReportTable.style");
 var _InfoIcon = require("./icons/InfoIcon");
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/extensions */
+
 const ReportTable = props => {
   const {
     tableData,
@@ -18,7 +22,9 @@ const ReportTable = props => {
     useSelectButtons,
     disableInfo,
     selectTextColor,
-    onSelectRowClick
+    onSelectRowClick,
+    buttonText,
+    buttonIconName
   } = props;
   const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
   (0, _react.useEffect)(() => {
@@ -86,7 +92,9 @@ const ReportTable = props => {
     id: "SelectButtonSubContainer",
     selectTextColor: selectTextColor,
     onClick: () => handleRowClick(rowData)
-  }, "Select", ' ', /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
+  }, buttonText || 'Select', ' ', buttonIconName === 'duplicate' ? /*#__PURE__*/_react.default.createElement(_Duplicate.default, {
+    color: selectTextColor
+  }) : /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
     id: "ArrowSelectIcon"
   })));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
@@ -112,6 +120,8 @@ const ReportTable = props => {
 exports.ReportTable = ReportTable;
 var _default = exports.default = ReportTable;
 ReportTable.defaultProps = {
+  buttonText: 'Select',
+  buttonIconName: 'duplicate',
   tableData: {
     columnsHeadings: [{
       label: 'Event Name',

package/dist/stories/components/SagButton.js

@@ -31,7 +31,6 @@ const SagButton = props => {
       // Add any logic you want to execute after the transition is complete
     }, 300); // Adjust the transition duration (in milliseconds) as needed
   };
-
   return /*#__PURE__*/_react.default.createElement(_SagButton.ButtonContainer, {
     id: "ButtonContainer"
   }, /*#__PURE__*/_react.default.createElement(_SagButton.Button, {

package/dist/stories/components/Select.js

@@ -45,7 +45,6 @@ const Select = _ref => {
     setIsFocused(false);
     setTimeout(() => setShowOptions(false), 200); // Delay hiding options to allow clicking on them
   };
-
   const handleOptionClick = option => {
     onChange({
       target: {

package/dist/stories/components/icons/BellIcon.js

@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 const BellIcon = _ref => {
   let {
     width = '8',
-    height = '9'
+    height = '9',
+    color = '#212121'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
@@ -19,7 +20,7 @@ const BellIcon = _ref => {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M8.08569 1.125C8.08569 0.8125 8.39819 0.5 8.71069 0.5C9.06226 0.5 9.37476 0.8125 9.37476 1.125V1.78906C12.4998 2.10156 14.9998 4.75781 14.9998 8V9.17188C14.9998 10.8516 15.6638 12.4922 16.8748 13.7031L16.9919 13.8203C17.3044 14.1328 17.4998 14.5625 17.4998 15.0312C17.4998 16.0078 16.7185 16.75 15.7419 16.75H1.71851C0.741943 16.75 -0.000244141 16.0078 -0.000244141 15.0312C-0.000244141 14.5625 0.156006 14.1328 0.468506 13.8203L0.585693 13.7031C1.79663 12.4922 2.49976 10.8516 2.49976 9.17188V8C2.49976 4.75781 4.96069 2.10156 8.12476 1.78906L8.08569 1.125ZM8.71069 3C5.97632 3 3.71069 5.26562 3.71069 8V9.17188C3.71069 11.2031 2.92944 13.1562 1.48413 14.6016L1.36694 14.6797C1.28882 14.7969 1.21069 14.9141 1.21069 15.0312C1.21069 15.3047 1.44507 15.5 1.71851 15.5H15.7419C16.0154 15.5 16.2498 15.3047 16.2498 15.0312C16.2498 14.9141 16.1716 14.7969 16.0935 14.6797L15.9763 14.6016C14.531 13.1562 13.7498 11.2031 13.7498 9.17188V8C13.7498 5.26562 11.4841 3 8.71069 3ZM8.71069 19.25C9.25757 19.25 9.72632 18.9375 9.92163 18.4297C10.0388 18.1172 10.3904 17.9219 10.7029 18.0391C11.0154 18.1562 11.2107 18.5078 11.0935 18.8594C10.7419 19.8359 9.80444 20.5 8.71069 20.5C7.65601 20.5 6.71851 19.8359 6.36694 18.8594C6.24976 18.5078 6.44507 18.1562 6.75757 18.0391C7.07007 17.9219 7.42163 18.1172 7.53882 18.4297C7.73413 18.9375 8.20288 19.25 8.71069 19.25Z",
-    fill: "#1B30AA"
+    fill: color
   }));
 };
 exports.BellIcon = BellIcon;

package/dist/stories/components/icons/Duplicate.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Duplicate = void 0;
+var _react = _interopRequireDefault(require("react"));
+const Duplicate = _ref => {
+  let {
+    color,
+    clicked,
+    width = '17',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 17 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M14 12H8C6.875 12 6 11.125 6 10V2C6 0.90625 6.875 0 8 0H12.375C12.75 0 13.1562 0.1875 13.4375 0.46875L15.5312 2.5625C15.8125 2.84375 16 3.25 16 3.625V10C16 11.125 15.0938 12 14 12ZM2 4H5V5.5H2C1.71875 5.5 1.5 5.75 1.5 6V14C1.5 14.2812 1.71875 14.5 2 14.5H8C8.25 14.5 8.5 14.2812 8.5 14V13H10V14C10 15.125 9.09375 16 8 16H2C0.875 16 0 15.125 0 14V6C0 4.90625 0.875 4 2 4Z",
+    fill: color
+  }));
+};
+exports.Duplicate = Duplicate;
+var _default = exports.default = Duplicate;

package/dist/stories/components/icons/ExitIcon.js

@@ -10,7 +10,8 @@ const ExitIcon = _ref => {
   let {
     clicked,
     width = '8',
-    height = '9'
+    height = '9',
+    color = '#212121'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
@@ -20,7 +21,7 @@ const ExitIcon = _ref => {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M14.2263 2.91667C17.3097 4.54167 19.268 7.70833 19.268 11.1667C19.268 16.3333 15.0597 20.5 9.93465 20.5C4.76798 20.5 0.601318 16.3333 0.601318 11.1667C0.601318 7.70833 2.51798 4.54167 5.60132 2.91667C5.93465 2.75 6.35132 2.875 6.51798 3.20833C6.68465 3.5 6.55965 3.91667 6.22632 4.08333C3.55965 5.45833 1.93465 8.20833 1.93465 11.1667C1.93465 15.5833 5.51798 19.1667 9.93465 19.1667C14.3097 19.1667 17.9347 15.5833 17.9347 11.1667C17.9347 8.20833 16.268 5.45833 13.6013 4.08333C13.268 3.91667 13.143 3.5 13.3097 3.20833C13.4763 2.875 13.893 2.75 14.2263 2.91667ZM9.89298 12.5C9.55965 12.5 9.26798 12.2083 9.26798 11.8333V1.16667C9.26798 0.833333 9.60132 0.5 9.93465 0.5C10.268 0.5 10.6013 0.833333 10.6013 1.16667V11.8333C10.6013 12.2083 10.268 12.5 9.89298 12.5Z",
-    fill: "#1B30AA"
+    fill: color
   }));
 };
 exports.ExitIcon = ExitIcon;

package/dist/stories/components/icons/EyeIcon.js

@@ -9,8 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 const EyeIcon = _ref => {
   let {
     clicked,
-    width = "8",
-    height = "9"
+    width = '8',
+    height = '9',
+    color = '#212121'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
@@ -20,7 +21,7 @@ const EyeIcon = _ref => {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M13.9062 5.60156C13.9531 5.71875 14 5.88281 14 6C14 6.11719 13.9531 6.30469 13.9062 6.42188C12.6406 9.30469 10.1094 11.25 7.25 11.25C4.36719 11.25 1.83594 9.30469 0.570312 6.42188C0.523438 6.30469 0.5 6.11719 0.5 6C0.5 5.88281 0.523438 5.71875 0.570312 5.60156C1.83594 2.71875 4.36719 0.75 7.25 0.75C10.1094 0.75 12.6406 2.71875 13.9062 5.60156ZM7.25 10.125C9.57031 10.125 11.7031 8.55469 12.8516 6C11.7266 3.46875 9.57031 1.875 7.25 1.875C4.90625 1.875 2.77344 3.46875 1.625 6.02344C2.75 8.55469 4.90625 10.125 7.25 10.125ZM7.25 3C8.89062 3 10.25 4.35938 10.25 6.02344C10.25 7.66406 8.89062 9 7.25 9C5.58594 9 4.25 7.66406 4.25 6C4.25 4.35938 5.58594 3 7.25 3ZM7.25 7.875C8.28125 7.875 9.125 7.05469 9.125 6.02344C9.125 4.96875 8.28125 4.125 7.25 4.125C7.22656 4.125 7.20312 4.14844 7.17969 4.14844C7.22656 4.26562 7.25 4.38281 7.25 4.5C7.25 5.34375 6.57031 6 5.75 6C5.60938 6 5.49219 6 5.375 5.95312C5.375 5.97656 5.375 6 5.375 6C5.375 7.05469 6.19531 7.875 7.25 7.875Z",
-    fill: "#212121"
+    fill: color
   }));
 };
 exports.EyeIcon = EyeIcon;