sag_components 1.0.314 → 1.0.316

package/.history/package_20231109105426.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.303",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/x-date-pickers": "^6.18.0",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^6.1.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/.history/package_20231109132014.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.305",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/x-date-pickers": "^6.18.0",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^6.1.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/.history/package_20231109132115.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.305",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/x-date-pickers": "^6.18.0",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/.history/package_20231114100517.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.316",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/x-date-pickers": "^6.18.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.9.3",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/dist/stories/components/CheckBox.js

@@ -9,8 +9,8 @@ exports.default = exports.CheckBox = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
-var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
+var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon.jsx");
+var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon.jsx");
 var _CheckBoxStyle = require("./CheckBox.style.js");
 var _excluded = ["label", "checked", "disabled", "width", "height", "iconSize", "fontSize", "colorChecked", "colorUnchecked", "onClick"];
 /*CheckBox*/

package/dist/stories/components/CheckBoxButton.js

@@ -9,7 +9,7 @@ exports.default = exports.CheckBoxButton = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxButtonCheckedIcon = require("./icons/CheckBoxButtonCheckedIcon");
+var _CheckBoxButtonCheckedIcon = require("./icons/CheckBoxButtonCheckedIcon.jsx");
 var _CheckBoxButtonStyle = require("./CheckBoxButton.style.js");
 var _excluded = ["label", "checked", "disabled", "showIconInCheckBoxButtons", "width", "height", "iconSize", "fontSize", "iconColor", "borderColor", "borderRadius", "textColorChecked", "textColorUnchecked", "backgroundColorChecked", "backgroundColorUnchecked", "onClick"];
 /*CheckBoxButton*/

package/dist/stories/components/KpiFilter.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBox = require("./CheckBox");
-var _CheckBoxButton = require("./CheckBoxButton");
+var _CheckBoxButton = require("./CheckBoxButton.jsx");
 var _KpiFilterStyle = require("./KpiFilter.style.js");
 var _excluded = ["eventAttributesData", "kpiData", "width", "height", "buttonsIconColor", "buttonsBorderColor", "buttonsTextColorChecked", "buttonsTextColorUnchecked", "buttonsBackgroundColorChecked", "buttonsBackgroundColorUnchecked", "onClick", "onClickIncludeBenchmark"];
 var DATATYPE_EVENT_ATTRUBUTES = "EventAttributes";

package/dist/stories/components/ListBox.js

@@ -10,7 +10,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxButton = require("./CheckBoxButton");
+var _CheckBoxButton = require("./CheckBoxButton.jsx");
 var _ListBoxStyle = require("./ListBox.style.js");
 var _excluded = ["data", "width", "height", "borderColor", "buttonsIconColor", "buttonsBorderColor", "buttonsTextColorChecked", "buttonsTextColorUnchecked", "buttonsBackgroundColorChecked", "buttonsBackgroundColorUnchecked", "onClick"];
 /*ListBox*/

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

@@ -19,4 +19,4 @@ var PanelContainer = exports.PanelContainer = _styledComponents.default.div(_tem
 var ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  //flex-wrap: wrap;\n  width: 100%;\n  padding-bottom: ", "; \n"])), function (props) {
   return props.paddingBottom;
 });
-var ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  /* display: flex; */\n  white-space: nowrap;\n  margin: 0;\n  padding: 6px;\n"])));
+var ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0;\n  padding: 6px;\n"])));

package/dist/stories/components/PerformanceAnalyticsOneColumn.js

@@ -72,10 +72,6 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
     var active = _ref2.active,
       payload = _ref2.payload;
     if (active && payload && payload.length > 0) {
-      var _payload$0$payload, _payload$0$payload2, _payload$0$payload3, _payload$0$payload4;
-      var totalCostValue = ((_payload$0$payload = payload[0].payload) === null || _payload$0$payload === void 0 ? void 0 : _payload$0$payload.packageCostValue) + ((_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.redemptionCostValue);
-      var packageCostPercent = totalCostValue ? ((_payload$0$payload3 = payload[0].payload) === null || _payload$0$payload3 === void 0 ? void 0 : _payload$0$payload3.packageCostValue) / totalCostValue * 100 : 0;
-      var redemptionCostPercent = totalCostValue ? ((_payload$0$payload4 = payload[0].payload) === null || _payload$0$payload4 === void 0 ? void 0 : _payload$0$payload4.redemptionCostValue) / totalCostValue * 100 : 0;
       return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
         id: "LegendColorRectangle",
         color: "#1F7677"
@@ -104,7 +100,6 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
     var i = data[index];
     var totalValue = i.newShoppersValue + i.existingShoppersValue;
     var radius = 10;
-    var plusSign = value > 0 ? '+' : '';
     return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
       x: x + width / 2,
       y: y - radius,
@@ -247,8 +242,8 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
     var active = _ref3.active,
       payload = _ref3.payload;
     if (active && payload && payload.length > 0) {
-      var _payload$0$payload5;
-      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipTitle, null, "".concat((_payload$0$payload5 = payload[0].payload) === null || _payload$0$payload5 === void 0 ? void 0 : _payload$0$payload5.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Incremental Sales ROI:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value)))));
+      var _payload$0$payload;
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipTitle, null, "".concat((_payload$0$payload = payload[0].payload) === null || _payload$0$payload === void 0 ? void 0 : _payload$0$payload.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Incremental Sales ROI:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value)))));
     }
     return null;
   };

package/dist/stories/components/TitleDescription.js

@@ -131,11 +131,11 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
   };
   var getViewCreativeContainerLeft = function getViewCreativeContainerLeft() {
     var offsetLeft = viewCreativeContainerRef.current.offsetLeft;
-    return offsetLeft.toString().concat("", "px");
+    return (offsetLeft + 65).toString().concat("", "px");
   };
   var getViewCreativeContainerTop = function getViewCreativeContainerTop() {
     var offsetTop = viewCreativeContainerRef.current.offsetTop;
-    return (offsetTop + 33).toString().concat("", "px");
+    return (offsetTop + 55).toString().concat("", "px");
   };
   return /*#__PURE__*/_react.default.createElement(_TitleDescription.MainContainer, {
     id: "MainContainer",
@@ -150,10 +150,8 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
     id: "EventNameViewCreativeSubContainer"
   }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventName, {
     id: "EventName"
-  }, data.eventName), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeButtonAndListBoxContainer, {
-    id: "ViewCreativeButtonAndListBoxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeContainer, {
-    id: "ViewCreativeContainer",
+  }, data.eventName), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeContainer, {
+    id: _TitleDescription.ViewCreativeContainer,
     ref: viewCreativeContainerRef,
     onClick: viewCreativeOnClickHandler,
     disabled: disabled
@@ -163,7 +161,6 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
   }), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeTextField, {
     id: "ViewCreativeTextField"
   }, "View creative"), retailersDataState && (retailersDataState === null || retailersDataState === void 0 ? void 0 : retailersDataState.length) > 0 && (viewCreativeListBoxOpenedState ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), viewCreativeListBoxOpenedState && /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeListBoxContainer, {
-    id: "ViewCreativeListBoxContainer",
     left: getViewCreativeContainerLeft(),
     top: getViewCreativeContainerTop(),
     width: "190px",
@@ -172,7 +169,6 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
       setViewCreativeListBoxOpenedState(false);
     }
   }, /*#__PURE__*/_react.default.createElement(_ListBox.ListBox, {
-    id: "ListBox",
     data: retailersDataState,
     buttonsBackgroundColorChecked: "#B1B1B1",
     buttonsBackgroundColorUnchecked: "#FFF",
@@ -185,7 +181,7 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
       listBoxViewCreativeOnClickHandler(props);
     },
     width: "200px"
-  }))))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
+  })))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
     id: "FilterValuesContainer"
   }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.Retailer, {
     id: "Retailer"

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

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.ViewCreativeButtonAndListBoxContainer = exports.SubLineContainer = exports.Space = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.EventName = exports.DownloadButtonContainer = exports.BottonsContainer = void 0;
+exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.SubLineContainer = exports.Space = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.EventName = exports.DownloadButtonContainer = exports.BottonsContainer = 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, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 var MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), function (props) {
   return props.textcolor ? props.textcolor : '#000';
 }, function (props) {
@@ -15,7 +15,7 @@ var MainContainer = exports.MainContainer = _styledComponents.default.div(_templ
 }, function (props) {
   return props.height;
 });
-var PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 1rem 2.5rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  //overflow: hidden;\n  width: 100%;\n"])));
+var PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 1rem 2.5rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
 var EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
 var EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  align-content: center;\n  align-items: center;\n  gap: 20px;\n"])));
 var EventName = exports.EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n"])));
@@ -25,8 +25,7 @@ var ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.de
   return !props.disabled ? 'pointer' : 'default';
 });
 var ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 3px 10px;\n  font-weight: 400;\n"])));
-var ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  \n  position: relative;\n \n"])));
-var ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n \n  left: ", ";\n  top:  ", ";\n  height: ", ";\n  width:  ", ";\n\n  z-index:1000;\n"])), function (props) {
+var ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.h4(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: fixed;\n \n  left: ", ";\n  top:  ", ";\n  height: ", ";\n  width:  ", ";\n\n  z-index:1000;\n"])), function (props) {
   return props.left;
 }, function (props) {
   return props.top;
@@ -35,26 +34,26 @@ var ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _style
 }, function (props) {
   return props.width;
 });
-var FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 0.5rem;\n"])));
-var FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  margin: 0;\n"])));
-var FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
-var Retailer = exports.Retailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
-var Space = exports.Space = _styledComponents.default.p(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
-var RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-var ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: ", ";\n"])), function (props) {
+var FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 0.5rem;\n"])));
+var FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  margin: 0;\n"])));
+var FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
+var Retailer = exports.Retailer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
+var Space = exports.Space = _styledComponents.default.p(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+var RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: ", ";\n"])), function (props) {
   return !props.showPeriodIcon ? '100%' : '75%';
 });
-var ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
-var ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
-var ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
-var ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
+var ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
+var ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+var ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+var ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
   return props.disabled ? '#B1B1B1' : '#1b30aa';
 }, function (props) {
   return !props.disabled ? 'pointer' : 'default';
 });
-var BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 1.5rem;\n"])));
-var DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)([""])));
-var PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  white-space: pre-wrap;\n  margin-left: 40px;\n  width: 25%;\n"])));
-var SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
-var PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
-var PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+var BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 1.5rem;\n"])));
+var DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)([""])));
+var PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  white-space: pre-wrap;\n  margin-left: 40px;\n  width: 25%;\n"])));
+var SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
+var PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+var PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.314",
+  "version": "1.0.316",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -15,9 +15,9 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@storybook/addon-a11y": "^7.4.6",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
@@ -42,7 +42,6 @@
     "style-loader": "^3.3.3"
   },
   "dependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@dnd-kit/core": "^6.0.8",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -51,9 +50,9 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "@mui/styled-engine-sc": "^5.14.12",
-    "@mui/x-date-pickers": "^6.18.0",
+    "@mui/x-date-pickers": "^6.18.1",
     "@storybook/addon-designs": "^7.0.5",
     "babel-plugin-react-css-modules": "^5.2.6",
     "classnames": "^2.3.2",
@@ -64,7 +63,7 @@
     "react-css-modules": "^4.7.11",
     "react-loading-skeleton": "^3.3.1",
     "react-scripts": "5.0.1",
-    "recharts": "^2.9.2",
+    "recharts": "^2.9.3",
     "storybook": "^7.4.6",
     "styled-components": "^5.3.1"
   },