sag_components 1.0.1050 → 1.0.1051

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopupContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
+const FieldsDataRow1 = [{
+  name: "FundationSource",
+  label: "Fundation Source",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Source",
+  dropdownOptions: [{
+    value: 1,
+    label: "Source 1"
+  }, {
+    value: 2,
+    label: "Source 2"
+  }, {
+    value: 3,
+    label: "Source 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Category",
+  label: "Category",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category 1"
+  }, {
+    value: 2,
+    label: "Category 2"
+  }, {
+    value: 3,
+    label: "Category 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Supplier",
+  label: "Supplier",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Supplier",
+  dropdownOptions: [{
+    value: 1,
+    label: "Supplier 1"
+  }, {
+    value: 2,
+    label: "Supplier 2"
+  }, {
+    value: 3,
+    label: "Supplier 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "ContactName",
+  label: "Contact Name",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Name",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2 = [{
+  name: "BrandName",
+  label: "Brand Name",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Brand",
+  dropdownOptions: [{
+    value: 1,
+    label: "Brand 1"
+  }, {
+    value: 2,
+    label: "Brand 2"
+  }, {
+    value: 3,
+    label: "Brand 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Budget",
+  label: "Budget",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Budget",
+  dropdownOptions: [{
+    value: 1,
+    label: "Budget 1"
+  }, {
+    value: 2,
+    label: "Budget 2"
+  }, {
+    value: 3,
+    label: "Budget 3"
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: "Budget 1"
+  }
+}, {
+  name: "CategoryManager",
+  label: "Category Manager",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category Manager",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category Manager 1"
+  }, {
+    value: 2,
+    label: "Category Manager 2"
+  }, {
+    value: 3,
+    label: "Category Manager 3"
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: "Category Manager 3"
+  }
+}, {
+  name: "ContactEmail",
+  label: "Contact Email",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Email",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3 = [{
+  name: "Broker",
+  label: "Broker",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Broker",
+  dropdownOptions: [{
+    value: 1,
+    label: "Broker 1"
+  }, {
+    value: 2,
+    label: "Broker 2"
+  }, {
+    value: 3,
+    label: "Broker 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "SupplierOfferID",
+  label: "Supplier Offer ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Supplier Offer ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "VendorID",
+  label: "Vendor ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Vendor ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "ContactPhone",
+  label: "Contact Phone",
+  disabled: false,
+  required: true,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Phone",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsData1 = [{
+  fieldsArray: FieldsDataRow1
+}, {
+  fieldsArray: FieldsDataRow2
+}, {
+  fieldsArray: FieldsDataRow3
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/PopupContent",
+  component: _PopupContent.default,
+  tags: ["autodocs"],
+  argTypes: {
+    FieldsData: {
+      name: "FieldsData",
+      control: {
+        type: "object"
+      },
+      description: " object: to fill kpi columns and buttons "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the control (in px / %)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the control (in px / % )"
+    },
+    onClick: {
+      action: "onClick",
+      description: "onClick event - returns an object of check box {true/false} "
+    },
+    onChange: {
+      action: "onChange",
+      description: "onChange event  "
+    },
+    borderColor: {
+      name: "borderColor",
+      description: "Sets the border color",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
+const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
+ExamplePopupContent.args = {
+  rowsData: RowsData1,
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%"
+};

package/dist/stories/components/BannerEventBoxTest.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _BannerEventBoxTest = require("./BannerEventBoxTest.style");
+var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
+const BannerEventBoxTest = props => {
+  const {
+    width,
+    height
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_BannerEventBoxTest.MainContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Stop&Shop"
+  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Hannaford",
+    data: [{
+      name: 'asdf',
+      items: ['coca', 'haim']
+    }, {
+      name: 'Brazxcvnds',
+      items: ['coca', 'bola', 'spring', 'cola']
+    }, {
+      name: 'xcvb Lines',
+      items: ['spring']
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Giant Food"
+  }));
+};
+BannerEventBoxTest.defaultProps = {
+  width: 'auto',
+  height: 'auto'
+};
+var _default = exports.default = BannerEventBoxTest;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    gap: 20px;\n"])), props => props.width, props => props.height);

package/dist/stories/components/{ProductsVariety/ProductsVariety.js → EventInfo.js}

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 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/BannersDropdown");
-var _ProductsVariety = require("./ProductsVariety.style");
-const ProductsVariety = props => {
+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,
-    showBannersDropdown,
     onSpotlightProductClick,
     onClickBannersDropdown
   } = props;
@@ -44,19 +43,19 @@ const ProductsVariety = props => {
       });
     }
   });
-  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, {
+  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);
@@ -65,15 +64,15 @@ const ProductsVariety = props => {
     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, {
+  }))), 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(_ProductsVariety.ProductContainer, {
+  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
     id: "ProductContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.Product, {
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
     id: "Product"
-  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
     id: "ProductButtonContainer",
     background: "#F8CD00",
     onClick: () => {
@@ -84,11 +83,10 @@ const ProductsVariety = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
 };
-var _default = exports.default = ProductsVariety;
-ProductsVariety.defaultProps = {
+var _default = exports.default = EventInfo;
+EventInfo.defaultProps = {
   title: 'Products Variety',
   subTitle: 'Product Name',
-  showBannersDropdown: true,
   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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FilterButton = require("./FilterButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+const FilterButton = props => {
+  const {
+    color,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    onButtonClick
+  } = props;
+  const onClickHandler = event => {
+    onButtonClick(event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
+    height: height,
+    color: color,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+    width: iconWidth,
+    height: iconHeight,
+    color: color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
+};
+exports.FilterButton = FilterButton;
+var _default = exports.default = FilterButton;
+FilterButton.defaultProps = {
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  iconHeight: 12,
+  iconWidth: 12,
+  disabled: false,
+  onButtonClick: () => {}
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.FilterButtonWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid #B1B1B1;\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color);
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/Heatmap.js

@@ -40,8 +40,8 @@ const Heatmap = props => {
   // Function to render Tooltip
   const renderTooltip = item => {
     if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
-      const top = `${tooltipPosition.y - 180}px`;
-      const left = `${tooltipPosition.x - 10}px`;
+      const top = `${tooltipPosition.y}px`;
+      const left = `${tooltipPosition.x}px`;
       return /*#__PURE__*/_react.default.createElement(_Heatmap.TooltipContainer, {
         className: "TooltipContainer",
         top: top,
@@ -89,13 +89,23 @@ const Heatmap = props => {
         var _barRefs$current$inde;
         const barRect = (_barRefs$current$inde = barRefs.current[index]) === null || _barRefs$current$inde === void 0 ? void 0 : _barRefs$current$inde.getBoundingClientRect();
         if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
+          var _e$nativeEvent, _e$nativeEvent2;
           setTooltip({
             label: `${item.label} - ${Math.round(item.value / totalValue * 100)}%`
           });
-          setTooltipPosition({
-            x: e.clientX,
-            y: e.clientY
-          });
+          // Prevent setting tooltip position if mouse is over the tooltip element
+          if (e.target.classList.contains('TooltipContainer')) {
+            return; // Exit early if mouse is over the tooltip
+          }
+          if ((_e$nativeEvent = e.nativeEvent) !== null && _e$nativeEvent !== void 0 && _e$nativeEvent.layerX && (_e$nativeEvent2 = e.nativeEvent) !== null && _e$nativeEvent2 !== void 0 && _e$nativeEvent2.layerY) {
+            var _e$nativeEvent3, _e$nativeEvent4;
+            setTooltipPosition({
+              // eslint-disable-next-line no-unsafe-optional-chaining
+              x: ((_e$nativeEvent3 = e.nativeEvent) === null || _e$nativeEvent3 === void 0 ? void 0 : _e$nativeEvent3.layerX) + 10,
+              // eslint-disable-next-line no-unsafe-optional-chaining
+              y: ((_e$nativeEvent4 = e.nativeEvent) === null || _e$nativeEvent4 === void 0 ? void 0 : _e$nativeEvent4.layerY) + 20
+            });
+          }
         }
       },
       onMouseLeave: e => {
@@ -109,16 +119,28 @@ const Heatmap = props => {
         var _barRefs$current$inde3;
         const barRect = (_barRefs$current$inde3 = barRefs.current[index]) === null || _barRefs$current$inde3 === void 0 ? void 0 : _barRefs$current$inde3.getBoundingClientRect();
         if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
-          setTooltipPosition({
-            x: e.clientX,
-            y: e.clientY
-          });
+          var _e$nativeEvent5, _e$nativeEvent6;
+          // Prevent setting tooltip position if mouse is over the tooltip element
+          if (e.target.classList.contains('TooltipContainer')) {
+            return; // Exit early if mouse is over the tooltip
+          }
+          if ((_e$nativeEvent5 = e.nativeEvent) !== null && _e$nativeEvent5 !== void 0 && _e$nativeEvent5.layerX && (_e$nativeEvent6 = e.nativeEvent) !== null && _e$nativeEvent6 !== void 0 && _e$nativeEvent6.layerY) {
+            var _e$nativeEvent7, _e$nativeEvent8;
+            setTooltipPosition({
+              // eslint-disable-next-line no-unsafe-optional-chaining
+              x: ((_e$nativeEvent7 = e.nativeEvent) === null || _e$nativeEvent7 === void 0 ? void 0 : _e$nativeEvent7.layerX) + 10,
+              // eslint-disable-next-line no-unsafe-optional-chaining
+              y: ((_e$nativeEvent8 = e.nativeEvent) === null || _e$nativeEvent8 === void 0 ? void 0 : _e$nativeEvent8.layerY) + 20
+            });
+          }
         }
       }
     }, /*#__PURE__*/_react.default.createElement(_Heatmap.BarLabel, {
       className: "BarLabel"
-    }, Math.round(item.value / totalValue * 100), "%")), renderTooltip(item)));
+    }, Math.round(item.value / totalValue * 100), "%"), renderTooltip(item))));
   }));
+
+  // Function to render the Legend Area
   const renderLegend = () => /*#__PURE__*/_react.default.createElement(_Heatmap.LegendContainer, {
     className: "LegendContainer"
   }, filteredData.map((item, index) =>

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

@@ -8,18 +8,23 @@ exports.TooltipContainer = exports.TitleContainer = exports.Title = exports.Lege
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _framerMotion = require("framer-motion");
 const HeatmapContainer = exports.HeatmapContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
+
+  display: flex;  
+  flex-direction: column;  
+  justify-content: flex-start;  
+  position: relative;
   height: ${props => props.height};
+  width: 100%;  
+  font-family: "Poppins", sans-serif;
+  
 `;
+
+// Wrapper with padding
 const HeatmapWrapper = exports.HeatmapWrapper = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
-  padding: 20px;
-  height: ${props => props.height};
+  padding: 20px;  
+  height: ${props => props.height};  
 `;
 const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
   display: flex;
@@ -42,6 +47,7 @@ const Title = exports.Title = _styledComponents.default.h3`
   }
 `;
 const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -51,14 +57,13 @@ const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
 const BarWrapper = exports.BarWrapper = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
+  /* align-items: center; */
   justify-content: flex-start;
   align-items: stretch; /* Ensures full vertical stretch */
   width: ${props => props.width};
   height: ${props => props.height};
 `;
 const BarContainer = exports.BarContainer = (0, _styledComponents.default)(_framerMotion.motion.div)`
-  position: relative;
-
   background-color: ${props => props.color};
   display: flex;
   align-items: center;