sag_components 1.0.766 → 1.0.767

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/MarketShareDescription.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MarketShareDescription = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LampIcon = require("./icons/LampIcon");
+var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
+var _MarketShareDescription = require("./MarketShareDescription.style");
+var _CommonFunctions = require("./CommonFunctions");
+/* MarketShareDescription */
+const MarketShareDescription = props => {
+  const {
+    width,
+    height
+  } = props;
+  const {
+    marketShareData,
+    iconColor,
+    showBanner,
+    onBannerClick
+  } = props;
+  const displayField = dataItem => {
+    var _dataItem$value;
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FieldTitleAndValueSubContainer, {
+      className: "FieldTitleAndValueSubContainer"
+    }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FieldTitle, {
+      className: "FieldTitle"
+    }, dataItem.label), /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FormattedValue, {
+      className: "FormattedValue"
+    }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, {
+      className: "TextBeforeAndAfterValue"
+    }, dataItem.textBefore), (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value), (0, _CommonFunctions.getFormattedUnits)(dataItem.value), /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, null, dataItem.textAfter)));
+    return content;
+  };
+  const dispalyRowFields = data => {
+    if (!data && !data.length > 0) return '';
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FieldsContainer, {
+      className: "FieldsContainer",
+      height: "160px"
+    }, data === null || data === void 0 ? void 0 : data.map((item, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.OneFieldsContainer, {
+      className: "OneFieldsContainer",
+      padding: index === 0 ? '0px' : '0 0 0 40px'
+    }, displayField(item)), (data === null || data === void 0 ? void 0 : data.length) !== index + 1 ? /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporatorContainer, {
+      className: "ColumnLineSeporatorContainer_vertical"
+    }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporator, {
+      className: "ColumnLineSeporator"
+    })) : '')));
+    return content;
+  };
+  const displayRows = () => {
+    if (!marketShareData || (marketShareData === null || marketShareData === void 0 ? void 0 : marketShareData.length) === 0) return '';
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.AllRowsContainer, {
+      className: "AllRowsContainer"
+    }, marketShareData.map((item, index) => {
+      var _item$rowFooter;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.OneRowContainer, {
+        className: "OneRowContainer"
+      }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.RowTitle, {
+        className: "RowTitle"
+      }, item.rowTitle, item.showBanner && /*#__PURE__*/_react.default.createElement(_MarketShareDescription.OutBanner, {
+        className: "OutBanner",
+        onClick: () => onBannerClick({
+          eventName: 'onBannerClick',
+          rowName: item.name
+        })
+      }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
+        color: "#212121"
+      }), "View By Banner")), dispalyRowFields(item.fieldsArray), /*#__PURE__*/_react.default.createElement(_MarketShareDescription.InfoTextContainer, {
+        className: "InfoTextContainer"
+      }, item.rowFooter && ((_item$rowFooter = item.rowFooter) === null || _item$rowFooter === void 0 ? void 0 : _item$rowFooter.length) > 0 ? /*#__PURE__*/_react.default.createElement(_MarketShareDescription.IconContainer, {
+        className: "IconContainer"
+      }, /*#__PURE__*/_react.default.createElement(_LampIcon.LampIcon, {
+        width: "23px",
+        height: "19px",
+        fill: iconColor
+      })) : '', /*#__PURE__*/_react.default.createElement(_MarketShareDescription.InfoTextLabel, {
+        className: "InfoTextLabel",
+        dangerouslySetInnerHTML: {
+          __html: item.rowFooter
+        }
+      }))), (marketShareData === null || marketShareData === void 0 ? void 0 : marketShareData.length) !== index + 1 ? /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporatorContainer, {
+        className: "ColumnLineSeporatorContainer_horizontal"
+      }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporator, {
+        className: "ColumnLineSeporator"
+      })) : '');
+    }));
+    return content;
+  };
+  return /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MainContainer, {
+    className: "MainContainer",
+    height: height,
+    width: width
+  }, displayRows());
+};
+exports.MarketShareDescription = MarketShareDescription;
+var _default = exports.default = MarketShareDescription;
+MarketShareDescription.defaultProps = {
+  marketShareData: [],
+  width: '100%',
+  height: '100%',
+  iconColor: '#1B30AA',
+  showBanner: false,
+  onBannerClick: () => {}
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextBeforeAndAfterValue = exports.RowTitle = exports.OutBanner = exports.OneRowContainer = exports.OneFieldsContainer = exports.MainContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.FormattedValue = exports.FieldsContainer = exports.FieldTitleAndValueSubContainer = exports.FieldTitle = exports.ColumnLineSeporatorContainer = exports.ColumnLineSeporator = exports.AllRowsContainer = 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, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  padding: 10px;\n  width: ", ";\n  height: ", ";\n  overflow: auto;\n"])), props => props.width, props => props.height);
+const RowTitle = exports.RowTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  font-weight: 500;\n  font-size: 18px;\n  margin: 5px 5px 5px 0;\n  @media (max-width: 1536px) {\n    font-size: 15px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const AllRowsContainer = exports.AllRowsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n  height: 100%;\n"])));
+const OneRowContainer = exports.OneRowContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n"])));
+const ColumnLineSeporatorContainer = exports.ColumnLineSeporatorContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background-color: #b1b1b1;\n  align-items: center;\n  height: 1px;\n  width: 100%;\n  &.ColumnLineSeporatorContainer_vertical {  \n    margin: 0 30px;  \n    height: 100%;\n    width: 1px;\n  }\n  &.ColumnLineSeporatorContainer_horizontal {\n    margin: 30px 0;\n    min-height: 1px;\n    height: 1px;\n    width: 100%;\n  }\n"])));
+const ColumnLineSeporator = exports.ColumnLineSeporator = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 0.5px;\n  width: 0.5px;\n"])));
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  white-space: nowrap;\n  height: 100%;\n  padding: 30px 0px;\n"])));
+const OneFieldsContainer = exports.OneFieldsContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px;\n  gap: 10px;\n  width: 100%;\n  justify-content: flex-start;\n  // padding: ", "; //0 0 0 40px;\n"])), props => props.padding);
+const FieldTitle = exports.FieldTitle = _styledComponents.default.h4(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 18px;\n  font-weight: 400;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 40px;\n  display: flex;\n  align-items: baseline;\n  min-height: 40px;\n  gap: 2px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+const TextBeforeAndAfterValue = exports.TextBeforeAndAfterValue = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+const FieldTitleAndValueSubContainer = exports.FieldTitleAndValueSubContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-around;\n  flex-direction: column;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
+const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%; \n  overflow:auto;\n"])));
+const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["  \n  display: flex;  \n  padding: 5px 10px 0 0;\n  cursor:  pointer;  \n"])));
+const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 18px;\n  line-height: 26px;\n  font-weight: 400;\n  width: 100%;\n  overflow: auto;\n  strong {\n    font-weight: 500;\n    color: #212121;\n    @media (max-width: 1536px) {\n    font-size: 14px;\n    }\n    @media (max-width: 1366px) {\n    font-size: 12px;\n    }\n  };\n  p1 {\n    font-weight: 400;\n    color: #726F6F;\n    @media (max-width: 1536px) {\n    font-size: 14px;\n    }\n    @media (max-width: 1366px) {\n    font-size: 12px;\n    }\n  };\n"])));
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 13px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\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/icons/LampIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LampIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const LampIcon = _ref => {
+  let {
+    // eslint-disable-next-line react/prop-types
+    width = '23',
+    // eslint-disable-next-line react/prop-types
+    height = '19',
+    // eslint-disable-next-line react/prop-types
+    fill = '#229E38'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 23 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.42578 0.390625L4.11328 1.51562C4.5 1.79688 4.60547 2.32422 4.35938 2.71094C4.07812 3.09766 3.55078 3.20312 3.16406 2.92188L1.47656 1.79688C1.08984 1.55078 0.984375 1.02344 1.26562 0.636719C1.51172 0.25 2.03906 0.144531 2.42578 0.390625ZM20.9883 1.79688L19.3008 2.92188C18.9141 3.20312 18.3867 3.09766 18.1406 2.71094C17.8594 2.32422 17.9648 1.79688 18.3516 1.51562L20.0391 0.390625C20.4258 0.144531 20.9531 0.25 21.2344 0.636719C21.4805 1.02344 21.375 1.55078 20.9883 1.79688ZM0.84375 5.875H3.09375C3.55078 5.875 3.9375 6.26172 3.9375 6.71875C3.9375 7.21094 3.55078 7.5625 3.09375 7.5625H0.84375C0.351562 7.5625 0 7.21094 0 6.71875C0 6.26172 0.351562 5.875 0.84375 5.875ZM19.4062 5.875H21.6562C22.1133 5.875 22.5 6.26172 22.5 6.71875C22.5 7.21094 22.1133 7.5625 21.6562 7.5625H19.4062C18.9141 7.5625 18.5625 7.21094 18.5625 6.71875C18.5625 6.26172 18.9141 5.875 19.4062 5.875ZM4.11328 11.9219L2.42578 13.0469C2.03906 13.3281 1.51172 13.2227 1.26562 12.8359C0.984375 12.4492 1.08984 11.9219 1.47656 11.6406L3.16406 10.5156C3.55078 10.2695 4.07812 10.375 4.35938 10.7617C4.60547 11.1484 4.5 11.6758 4.11328 11.9219ZM19.3008 10.5508L20.9883 11.6758C21.375 11.9219 21.4805 12.4492 21.2344 12.8359C20.9531 13.2227 20.4258 13.3281 20.0391 13.082L18.3516 11.957C17.9648 11.6758 17.8594 11.1484 18.1406 10.7617C18.3867 10.375 18.9141 10.2695 19.3008 10.5508ZM15.75 6.4375C15.75 3.97656 13.7109 1.9375 11.25 1.9375C8.75391 1.9375 6.75 3.97656 6.75 6.4375C6.75 7.42188 7.03125 8.30078 7.52344 9.00391C7.66406 9.21484 7.80469 9.42578 7.98047 9.63672C8.4375 10.2695 8.96484 11.0078 9.38672 11.7461C9.73828 12.4141 9.94922 13.1172 10.0195 13.75H8.33203C8.22656 13.3281 8.12109 12.9414 7.91016 12.5547C7.55859 11.9219 7.13672 11.3242 6.67969 10.7266C6.50391 10.4805 6.32812 10.2344 6.15234 9.98828C5.44922 8.96875 5.0625 7.77344 5.0625 6.4375C5.0625 3.02734 7.80469 0.25 11.25 0.25C14.6602 0.25 17.4375 3.02734 17.4375 6.4375C17.4375 7.77344 17.0156 8.96875 16.3125 9.98828C16.1367 10.2344 15.9609 10.4805 15.7852 10.7266C15.3633 11.3242 14.9062 11.9219 14.5547 12.5547C14.3438 12.9414 14.2383 13.3281 14.168 13.75H12.4453C12.5508 13.1172 12.7266 12.4141 13.0781 11.7461C13.5 11.0078 14.0273 10.2695 14.4844 9.63672C14.6602 9.42578 14.8008 9.21484 14.9414 9.00391C15.4336 8.30078 15.75 7.42188 15.75 6.4375ZM9.5625 6.4375C9.5625 6.75391 9.28125 7 9 7C8.68359 7 8.4375 6.75391 8.4375 6.4375C8.4375 4.89062 9.66797 3.625 11.25 3.625C11.5312 3.625 11.8125 3.90625 11.8125 4.1875C11.8125 4.50391 11.5312 4.75 11.25 4.75C10.3008 4.75 9.5625 5.52344 9.5625 6.4375ZM14.0625 15.4375C14.0625 17.0195 12.7969 18.25 11.25 18.25C9.66797 18.25 8.4375 17.0195 8.4375 15.4375V14.875H14.0625V15.4375Z",
+    fill: fill
+  }));
+};
+exports.LampIcon = LampIcon;
+var _default = exports.default = LampIcon;

package/package.json

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