sag_components 1.0.333 → 1.0.335

package/dist/stories/components/CodeEditor.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactAce = _interopRequireDefault(require("react-ace"));
+require("ace-builds/src-noconflict/mode-mysql");
+require("ace-builds/src-noconflict/theme-monokai");
+require("ace-builds/src-noconflict/ext-language_tools");
+require("ace-builds/src-noconflict/snippets/mysql");
+// CodeEditor.js
+
+var CodeEditor = function CodeEditor(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
+    style: {
+      height: "200px"
+    },
+    mode: "mysql",
+    theme: "monokai",
+    value: value,
+    onChange: onChange,
+    name: "code-editor",
+    editorProps: {
+      $blockScrolling: true
+    },
+    setOptions: {
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      enableSnippets: true,
+      showLineNumbers: true,
+      tabSize: 1
+    }
+  });
+};
+var _default = exports.default = CodeEditor;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AceEditorContent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactAce = _interopRequireDefault(require("react-ace"));
+var _templateObject;
+var AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));

package/dist/stories/components/Dropdown.js

@@ -19,9 +19,6 @@ var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
 var _Dropdown = require("./Dropdown.style");
-// import PropTypes from "prop-types";
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
 var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
   fontSize: "small"
 });

package/dist/stories/components/FilterContainer.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.FilterContainer = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _FilterContainer = require("./FilterContainer.style");
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _FilterContainer = require("./FilterContainer.style");
 var _excluded = ["itemClass", "nodeRef"];
 var _templateObject;
 var Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
@@ -20,13 +20,14 @@ var FilterContainer = exports.FilterContainer = /*#__PURE__*/_react.default.forw
   return /*#__PURE__*/_react.default.createElement(_FilterContainer.FilterDivContainer, {
     className: itemClass,
     style: {
-      width: "100%",
-      height: "100%"
+      width: '100%',
+      height: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     ref: nodeRef
   }, props.children));
 });
+FilterContainer.propTypes = {};
 FilterContainer.defaultProps = {};
 var _default = exports.default = FilterContainer;

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

@@ -8,6 +8,6 @@ exports.FilterFooterContent = exports.FilterDivContent = exports.FilterDivContai
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background: \"#FFFFFF\";\n"])));
-var FilterDivContent = exports.FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div{\n        margin: 25px;\n    }\n"])));
+var FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background-color: white;\n"])));
+var FilterDivContent = exports.FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div {\n        margin: 25px;\n    }\n"])));
 var FilterFooterContent = exports.FilterFooterContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 10%;\n"])));

package/dist/stories/components/Modal.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Modal = require("./Modal.style");
+var Modal = function Modal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    children = _ref.children;
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalOverlay, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalContent, null, children, /*#__PURE__*/_react.default.createElement(_Modal.CloseButton, {
+    onClick: onClose
+  }, "Close")));
+};
+var _default = exports.default = Modal;

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

@@ -0,0 +1,17 @@
+"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.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index:999999;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: ", " 0.3s ease-in-out;\n"])), fadeIn);
+var ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #fff;\n  overflow: scroll;\n  padding: 20px;\n  border-radius: 8px;\n  width: 50%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
+var CloseButton = exports.CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
+var SubmitButton = exports.SubmitButton = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  margin-right: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));

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

@@ -8,6 +8,6 @@ exports.NoDataFoundTitle = exports.NoDataFoundText = exports.NoDataFoundContaine
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var NoDataFoundContainer = exports.NoDataFoundContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 0.8rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
-var NoDataFoundTitle = exports.NoDataFoundTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0;\n  margin-top: 1.5rem;\n  padding-right: 0.77778rem;\n"])));
-var NoDataFoundText = exports.NoDataFoundText = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.8rem;\n  margin: 0;\n  margin-top: 0.4rem;\n  text-align: center;\n  line-height: 1.1rem;\n"])));
+var NoDataFoundContainer = exports.NoDataFoundContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
+var NoDataFoundTitle = exports.NoDataFoundTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 18px;\n  margin: 0;\n  margin-top: 20px;\n  padding-right: 14px;\n  @media (max-width: 1366px) {\n    font-size: 14px;\n  }\n"])));
+var NoDataFoundText = exports.NoDataFoundText = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  margin: 0;\n  margin-top: 0.4rem;\n  text-align: center;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));

package/dist/stories/components/PerformanceAnalytics.js

@@ -12,6 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireWildcard(require("prop-types"));
 var _recharts = require("recharts");
+var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _SegmentedButton = require("./SegmentedButton");
 var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
@@ -84,6 +85,14 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     segmentedButtonsFilter = _useState2[0],
     setSegmentedButtonsFilter = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showLegendTooltip = _useState4[0],
+    setShowLegendTooltip = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    tooltipCouponText = _useState6[0],
+    setTooltipCouponText = _useState6[1];
   var displayTotalsData = function displayTotalsData() {
     return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.PerformanceAnalyticsTotals, {
       totalsData: totalsData,
@@ -295,14 +304,27 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
       y = props.y,
       stroke = props.stroke,
       payload = props.payload;
+    var handleMouseEnter = function handleMouseEnter(content, event) {
+      setTooltipCouponText(content);
+      setShowLegendTooltip(true);
+      console.log('evnt x y', event.clientY, event.clientX);
+    };
+    var handleMouseLeave = function handleMouseLeave() {
+      setShowLegendTooltip(false);
+    };
     if (data && data.length > 0 && payload) {
       var retailerData = data.filter(function (item) {
         return item.retailer === payload.value;
       });
       if (retailerData && retailerData.length > 0) {
         var _retailerData$0$offer;
+        var offerType = (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10);
         return /*#__PURE__*/_react.default.createElement("g", {
-          transform: "translate(".concat(x, ",").concat(y, ")")
+          transform: "translate(".concat(x, ",").concat(y, ")"),
+          onMouseEnter: function onMouseEnter(event) {
+            return handleMouseEnter(offerType, event);
+          },
+          onMouseLeave: handleMouseLeave
         }, /*#__PURE__*/_react.default.createElement("text", {
           x: 0,
           y: 0,
@@ -314,13 +336,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
           dy: "50",
           fontSize: 16,
           fontWeight: 600
-        }, retailerData[0].retailer), /*#__PURE__*/_react.default.createElement("tspan", {
-          x: "0",
-          dy: "30",
-          textAnchor: "middle",
-          fontSize: 14,
-          fontWeight: 400
-        }, (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10)), /*#__PURE__*/_react.default.createElement("tspan", {
+        }, payload.value), /*#__PURE__*/_react.default.createElement("tspan", {
           textAnchor: "middle",
           x: "0",
           dy: "30",
@@ -365,6 +381,10 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
         tickLine: false,
         height: 120,
         stroke: isNegativeValueFound() === true ? '#D0D0D0' : '#000'
+      }), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
+        id: "Tooltip",
+        content: tooltipCouponText,
+        direction: "top"
       }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
         cursor: {
           fill: 'transparent'

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

@@ -18,7 +18,7 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
   return props.height;
 });
 var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
-var LegendDataContainer = exports.LegendDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  gap: 80px;\n  margin-top: 24px;\n  @media (max-width: 1536px) {\n    gap: 58px;\n    margin-top: 14px;\n  }\n  @media (max-width: 1366px) {\n    gap: 50px;\n  }\n"])));
+var LegendDataContainer = exports.LegendDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  gap: 80px;\n  margin-top: 14px;\n  @media (max-width: 1536px) {\n    gap: 58px;\n  }\n  @media (max-width: 1366px) {\n    gap: 50px;\n  }\n"])));
 var TitleAndIconContainer = exports.TitleAndIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
 var Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 27px;\n  margin: 0 0 0 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
 var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {

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

@@ -15,17 +15,17 @@ 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  line-height: 19px;\n  white-space: pre-wrap;\n  //overflow: hidden;\n  width: 100%;\n  @media (max-width: 1536px) {\n    padding: 13px 16px;\n  }\n  @media (max-width: 1366px) {\n    padding: 12px 16px;\n  }\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"])));
+var EventName = exports.EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  margin: 0; \n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n"])));
 var ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  border: 1px solid #ccc;\n  margin-left: 10px;\n  padding: 2px 10px;\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
   return props.disabled ? '#B1B1B1' : '#212121';
 }, function (props) {
   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  overflow: visible;\n \n"])));
+var ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: visible;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\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) {
   return props.left;
 }, function (props) {

package/dist/stories/components/Tooltip.js

@@ -30,7 +30,7 @@ var Tooltip = function Tooltip(props) {
     onMouseEnter: showTip,
     onMouseLeave: hideTip
   }, props.children, active && /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
-    className: "controls ".concat(props.direction || "top")
+    className: "controls ".concat(props.direction || 'top')
   }, props.content)));
 };
 var _default = exports.default = Tooltip;

package/dist/stories/components/TotalCostModal.js

@@ -0,0 +1,143 @@
+"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 = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = _interopRequireDefault(require("./Modal"));
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
+var _TextField = _interopRequireDefault(require("./TextField"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _reactHookForm = require("react-hook-form");
+var _Modal2 = require("./Modal.style");
+var TotalCostModal = function TotalCostModal(_ref) {
+  var title = _ref.title,
+    isModalOpen = _ref.isModalOpen,
+    setModalOpen = _ref.setModalOpen,
+    setResult = _ref.setResult;
+  var _useState = (0, _react.useState)([{
+      id: "title",
+      label: "Title",
+      type: "text"
+    }, {
+      id: "dotCut",
+      label: "Do Cut",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currency",
+      label: "Currency",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currencyType",
+      label: "Currency Type",
+      type: "select",
+      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
+    }, {
+      id: "width",
+      label: "Width",
+      type: "text"
+    }, {
+      id: "height",
+      label: "Height",
+      type: "text"
+    }, {
+      id: "textColor",
+      label: "Text Color",
+      type: "text"
+    }, {
+      id: "noDataText",
+      label: "No Data Text",
+      type: "text"
+    }]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    code = _useState4[0],
+    setCode = _useState4[1];
+  var _useForm = (0, _reactHookForm.useForm)(),
+    register = _useForm.register,
+    handleSubmit = _useForm.handleSubmit,
+    watch = _useForm.watch,
+    control = _useForm.control,
+    errors = _useForm.formState.errors;
+  var onSubmit = function onSubmit(data) {
+    return setResult(data);
+  };
+  return /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    isOpen: isModalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
+    value: code,
+    onChange: setCode
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid",
+      gridTemplateColumns: "auto auto auto"
+    }
+  }, params.map(function (item) {
+    if (item.type === "text") {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref2) {
+          var field = _ref2.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            allowedInput: "all",
+            height: "100%",
+            label: item.label,
+            multiline: true,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            width: "300px"
+          }));
+        }
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref3) {
+          var field = _ref3.field;
+          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            limitTagsOnMultiSelect: 0,
+            onInputChange: function onInputChange(e) {
+              var _e$inputValue;
+              console.log("e", e);
+              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
+            },
+            options: item.options,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            text: item.label,
+            width: "300px"
+          }));
+        }
+      });
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
+    type: "submit"
+  })));
+};
+var _default = exports.default = TotalCostModal;

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

@@ -9,7 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 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;
 var scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n  @media (max-width: 1536px) {\n    ", "\n  }\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
+var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  @media (max-width: 1536px) {\n    ", "\n  }\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;

package/dist/stories/components/TspanTooltip.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Tooltip = require("./Tooltip.style");
+var Tooltip = function Tooltip(props) {
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
+    className: "controls ".concat(props.direction || 'top')
+  }, props.content)));
+};
+var _default = exports.default = Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.333",
+  "version": "1.0.335",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -14,20 +14,25 @@
   "author": "SAG",
   "license": "ISC",
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@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",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
     "@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/addons": "^7.5.3",
     "@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",
+    "@storybook/theming": "^7.5.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "eslint": "^8.53.0",
@@ -42,29 +47,18 @@
     "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",
-    "@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.18",
-    "@mui/material": "^5.14.18",
-    "@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",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
     "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",
+    "recharts": "^2.9.2",
     "storybook": "^7.4.6",
     "styled-components": "^5.3.1"
   },

package/.history/.env_20231001120613

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_YdAmQQKQ2B6ZngEijA0JiqNNUdJvP23G46NK7-fc

package/.history/.env_20231003143620

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_MOcc8-aS91XJ3mFdtNlH4oPVY73ChHlmw6-hKhsb

package/.history/.eslintrc_20230928112617.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-  },
-};

package/.history/.eslintrc_20230928130534.js

@@ -1,27 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-  },
-};

package/.history/.eslintrc_20230928133400.js

@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-    'max-len': 'off',
-    /*eslint linebreak-style: ["error", "windows"]*/
-  },
-};