sag_components 1.0.284 → 1.0.286

package/.history/package_20231101151518.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.285",
+  "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.52.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "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.17.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.6.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_20231101154501.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.286",
+  "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.52.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "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.17.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.6.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/dist/stories/components/Benchmark.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Benchmark = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _BenchmarkStyle = require("./Benchmark.style.js");
+var _Benchmark = require("./Benchmark.style");
 var _CommonFunctions = require("./CommonFunctions");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _excluded = ["totalValue", "currentValue", "benchmarkValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor", "tooltipLabel", "tooltipDirection"];
-/*Benchmark*/
+/* Benchmark */
 var Benchmark = exports.Benchmark = function Benchmark(_ref) {
   var _ref$totalValue = _ref.totalValue,
     totalValue = _ref$totalValue === void 0 ? 100 : _ref$totalValue,
@@ -23,19 +23,19 @@ var Benchmark = exports.Benchmark = function Benchmark(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 12 : _ref$height,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "#79DB95" : _ref$color,
+    color = _ref$color === void 0 ? '#79DB95' : _ref$color,
     _ref$linearGradientCo = _ref.linearGradientColor,
-    linearGradientColor = _ref$linearGradientCo === void 0 ? "#C3EFD0" : _ref$linearGradientCo,
+    linearGradientColor = _ref$linearGradientCo === void 0 ? '#C3EFD0' : _ref$linearGradientCo,
     _ref$underAvarageColo = _ref.underAvarageColor,
-    underAvarageColor = _ref$underAvarageColo === void 0 ? "#FD5959" : _ref$underAvarageColo,
+    underAvarageColor = _ref$underAvarageColo === void 0 ? '#FD5959' : _ref$underAvarageColo,
     _ref$linearGradientUn = _ref.linearGradientUnderAvarageColor,
-    linearGradientUnderAvarageColor = _ref$linearGradientUn === void 0 ? "#FDB1B1" : _ref$linearGradientUn,
+    linearGradientUnderAvarageColor = _ref$linearGradientUn === void 0 ? '#FDB1B1' : _ref$linearGradientUn,
     _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? "#F2F2F2" : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? '#F2F2F2' : _ref$backgroundColor,
     _ref$tooltipLabel = _ref.tooltipLabel,
-    tooltipLabel = _ref$tooltipLabel === void 0 ? "Benchmark" : _ref$tooltipLabel,
+    tooltipLabel = _ref$tooltipLabel === void 0 ? 'Benchmark' : _ref$tooltipLabel,
     _ref$tooltipDirection = _ref.tooltipDirection,
-    tooltipDirection = _ref$tooltipDirection === void 0 ? "top" : _ref$tooltipDirection,
+    tooltipDirection = _ref$tooltipDirection === void 0 ? 'top' : _ref$tooltipDirection,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var getCurrentValueRectangleWidth = function getCurrentValueRectangleWidth() {
     if (!totalValue) return 0;
@@ -55,9 +55,8 @@ var Benchmark = exports.Benchmark = function Benchmark(_ref) {
     }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return underAvarageColor;
-    } else {
-      return color;
     }
+    return color;
   };
   var getUnderAvaragelinearGradientColor = function getUnderAvaragelinearGradientColor() {
     if (!totalValue) return backgroundColor;
@@ -72,9 +71,8 @@ var Benchmark = exports.Benchmark = function Benchmark(_ref) {
     }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return linearGradientUnderAvarageColor;
-    } else {
-      return linearGradientColor;
     }
+    return linearGradientColor;
   };
   var getBenchmarkLeft = function getBenchmarkLeft() {
     if (!benchmarkValue) {
@@ -87,9 +85,9 @@ var Benchmark = exports.Benchmark = function Benchmark(_ref) {
   };
   var getTooltipText = function getTooltipText() {
     var _getFormattedValue, _getFormattedUnits;
-    return /*#__PURE__*/_react.default.createElement("h", null, tooltipLabel, tooltipLabel ? ": " : "", (_getFormattedValue = (0, _CommonFunctions.getFormattedValue)(benchmarkValue)) === null || _getFormattedValue === void 0 ? void 0 : _getFormattedValue.toString(), (_getFormattedUnits = (0, _CommonFunctions.getFormattedUnits)(benchmarkValue)) === null || _getFormattedUnits === void 0 ? void 0 : _getFormattedUnits.toString());
+    return /*#__PURE__*/_react.default.createElement("h4", null, tooltipLabel, tooltipLabel ? ': ' : '', (_getFormattedValue = (0, _CommonFunctions.getFormattedValue)(benchmarkValue)) === null || _getFormattedValue === void 0 ? void 0 : _getFormattedValue.toString(), (_getFormattedUnits = (0, _CommonFunctions.getFormattedUnits)(benchmarkValue)) === null || _getFormattedUnits === void 0 ? void 0 : _getFormattedUnits.toString());
   };
-  return /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.ControlsContainer, {
+  return /*#__PURE__*/_react.default.createElement(_Benchmark.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
     width: width
@@ -97,22 +95,22 @@ var Benchmark = exports.Benchmark = function Benchmark(_ref) {
     id: "Tooltip",
     content: getTooltipText(),
     direction: tooltipDirection
-  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.Controls, {
+  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Controls, {
     id: "ControlsBenchmark",
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.BackgroundValueRectangle, {
+  }, /*#__PURE__*/_react.default.createElement(_Benchmark.BackgroundValueRectangle, {
     id: "BackgroundValueRectangle",
     height: height,
     width: width,
     color: backgroundColor
-  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.CurrentValueRectangle, {
+  }), /*#__PURE__*/_react.default.createElement(_Benchmark.CurrentValueRectangle, {
     id: "CurrentValueRectangle",
     height: height,
     width: getCurrentValueRectangleWidth(),
     color: getUnderAvarageColor(),
-    linearGradientColor: getUnderAvaragelinearGradientColor()
-  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.AvarageDelimiter, {
+    lineargradientcolor: getUnderAvaragelinearGradientColor()
+  }), /*#__PURE__*/_react.default.createElement(_Benchmark.AvarageDelimiter, {
     id: "AvarageDelimiter",
     height: height + 4,
     width: 0,

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

@@ -9,37 +9,37 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n  align-items: center;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
+  return props.width.toString().concat('', 'px');
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return props.height.toString().concat('', 'px');
 });
 var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
+  return props.width.toString().concat('', 'px');
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return props.height.toString().concat('', 'px');
 });
 var BackgroundValueRectangle = exports.BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
+  return props.width.toString().concat('', 'px');
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return props.height.toString().concat('', 'px');
 }, function (props) {
   return props.color;
 });
 var CurrentValueRectangle = exports.CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
+  return props.width.toString().concat('', 'px');
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return props.height.toString().concat('', 'px');
 }, function (props) {
-  return props.linearGradientColor;
+  return props.lineargradientcolor;
 }, function (props) {
   return props.color;
 });
 var AvarageDelimiter = exports.AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), function (props) {
-  return props.height.toString().concat("", "px");
+  return props.height.toString().concat('', 'px');
 }, function (props) {
-  return props.width.toString().concat("", "px");
+  return props.width.toString().concat('', 'px');
 }, function (props) {
-  return props.top.toString().concat("", "px");
+  return props.top.toString().concat('', 'px');
 }, function (props) {
-  return props.left.toString().concat("", "px");
+  return props.left.toString().concat('', 'px');
 });

package/dist/stories/components/CollapseData.js

@@ -38,7 +38,7 @@ var CollapseData = exports.CollapseData = function CollapseData(props) {
       className: "accordion-section",
       id: section.key
     }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
-      isOpen: activeIndex === section.key,
+      isopen: activeIndex === section.key,
       onClick: function onClick() {
         return handleClick(section.key);
       }
@@ -48,13 +48,19 @@ var CollapseData = exports.CollapseData = function CollapseData(props) {
     }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
       width: "11px",
       height: "12px"
-    })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (headline) {
-      return /*#__PURE__*/_react.default.createElement(_CollapseData.Th, null, headline.title);
-    }))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (data) {
+    })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (headline, i) {
+      return /*#__PURE__*/_react.default.createElement(_CollapseData.Th, {
+        key: "".concat(i + headline)
+      }, headline.title);
+    }))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (data, i) {
       if (data.value !== null) {
-        return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, null, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
+        return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
+          key: "".concat(i + data)
+        }, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
       }
-      return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, null, "No Data");
+      return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
+        key: "".concat(i + data)
+      }, "No Data");
     }))))));
   })));
 };

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

@@ -8,13 +8,13 @@ exports.TitleDiv = exports.TitleAccordion = exports.Th = exports.Td = exports.Ta
 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;
-var AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: 0 20px;\n"])), function (props) {
+var AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: 0 20px;\n  background-color: white;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 });
 var TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: inline-block;\n  align-items: center;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
-  return props.isOpen ? '#D0D0D0' : 'white';
+  return props.isopen ? '#D0D0D0' : '#FFFFFF';
 });
 var IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  font-family: \"poppins\";\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  float: left;\n  align-items: center;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  & > svg {\n    margin-right: 15px;\n  }\n"])));
 var ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  font-family: \"poppins\";\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 23%;\n  margin-right: 20px;\n"])));

package/dist/stories/components/Datepicker.js

@@ -8,22 +8,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Datepicker = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _DatepickerStyle = require("./Datepicker.style.js");
 var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var _DatePicker = require("@mui/x-date-pickers/DatePicker");
 var _demo = require("@mui/x-date-pickers/internals/demo");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _Datepicker = require("./Datepicker.style");
 var _CalendarIcon = require("./icons/CalendarIcon");
 /**
  *  SAG Datepicker
  */
 var Datepicker = exports.Datepicker = function Datepicker(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "100%" : _ref$width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
     text = _ref.text,
     _ref$format = _ref.format,
-    format = _ref$format === void 0 ? "MMM DD, YYYY" : _ref$format,
+    format = _ref$format === void 0 ? 'MMM DD, YYYY' : _ref$format,
     shape = _ref.shape,
     _onChange = _ref.onChange,
     value = _ref.value,
@@ -31,7 +31,7 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
+    labelColor = _ref$labelColor === void 0 ? '#1B30AA' : _ref$labelColor;
   /**
    *  SAG Datepicker
    */
@@ -42,95 +42,91 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     setvalueState = _React$useState2[1];
   (0, _react.useEffect)(function () {
     if (value) {
-      console.log("value", value);
       setvalueState((0, _dayjs.default)(value));
     } else {
       setvalueState(null);
     }
   }, [value]);
-  (0, _react.useEffect)(function () {
-    console.log("newValue valueState", valueState);
-  }, [valueState]);
+  (0, _react.useEffect)(function () {}, [valueState]);
   var getTextFieldStyle = function getTextFieldStyle() {
-    if (shape === "round") {
+    if (shape === 'round') {
       // round
       return {
-        "& .MuiInputLabel-inputRoot": {
-          fontFamily: "Poppins",
-          fontSize: "14px",
+        '& .MuiInputLabel-inputRoot': {
+          fontFamily: 'Poppins',
+          fontSize: '14px',
           fontWidth: 400,
-          paddingLeft: "10px !important",
-          borderRadius: "12px",
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
           width: width
-          //color: labelColor,
+          // color: labelColor,
         },
 
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "12px",
-          fontFamily: "Poppins",
-          fontSize: "14px",
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          fontFamily: 'Poppins',
+          fontSize: '14px',
           fontWidth: 400,
           width: width,
-          //color: labelColor,
+          // color: labelColor,
           legend: {
-            marginLeft: "10px"
+            marginLeft: '10px'
           },
           // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
           '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
             // Default left padding is 6px
-            paddingLeft: "10px"
+            paddingLeft: '10px'
           },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#E7E7E7"
-            //color: labelColor,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+            // color: labelColor,
           },
 
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor //  "#757575",        
-            //color: labelColor,
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
+            // color: labelColor,
           },
 
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
-            //color: labelColor,
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+            // color: labelColor,
           }
         },
 
-        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
           // Default transform is "translate(14px, 20px) scale(1)""
           // This lines up the label with the initial cursor position in the input
           // after changing its padding-left.
-          transform: "translate(14px, 18px) scale(1);",
-          fontSize: "14px",
-          color: disabled ? "#E7E7E7" : valueState ? labelColor : "#757575"
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575'
         },
-        "& .MuiInputLabel-outlined": {
-          fontFamily: "Poppins",
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : valueState ? labelColor : "#757575",
+        '& .MuiInputLabel-outlined': {
+          fontFamily: 'Poppins',
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
           fontWidth: 400,
-          fontSize: "18px"
+          fontSize: '18px'
         },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "1px",
-          paddingLeft: "4px",
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
           paddingRight: 0,
-          background: "white"
-          //color: labelColor,
+          background: 'white'
+          // color: labelColor,
         }
       };
-    } else {
-      //square
-      return null;
     }
+    // square
+    return null;
   };
-  return /*#__PURE__*/_react.default.createElement(_DatepickerStyle.DatepickerContainer, {
+  return /*#__PURE__*/_react.default.createElement(_Datepicker.DatepickerContainer, {
     width: width
   }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
     dateAdapter: _AdapterDayjs.AdapterDayjs,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
-    components: ["DatePicker"],
+    components: ['DatePicker'],
     width: width
   }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
     value: valueState,
@@ -138,9 +134,8 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     disabled: disabled,
     onChange: function onChange(newValue) {
       setvalueState(newValue);
-      console.log("newValue onChange", newValue === null || newValue === void 0 ? void 0 : newValue.format("YYYY-MM-DD").toString());
       _onChange({
-        newValue: newValue ? newValue.format("YYYY-MM-DD").toString() : null
+        newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
       });
     },
     sx: getTextFieldStyle(),
@@ -153,7 +148,7 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
         fullWidth: true
       },
       actionBar: {
-        actions: ["clear"]
+        actions: ['clear']
       }
     },
     format: format

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

@@ -8,8 +8,8 @@ exports.DatepickerContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-//import './font.css';
+// import './font.css';
 
-var DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), function (props) {
+var DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;\n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), function (props) {
   return props.width;
 });

package/dist/stories/components/OneColumnContainer.js

@@ -49,7 +49,6 @@ var OneColumnContainer = exports.OneColumnContainer = function OneColumnContaine
   var anotherRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     setOffsetWidth(anotherRef.current.offsetWidth);
-    console.log(anotherRef.current.offsetWidth);
   }, [anotherRef]);
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
     className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
@@ -89,7 +88,7 @@ var OneColumnContainer = exports.OneColumnContainer = function OneColumnContaine
     dangerouslySetInnerHTML: {
       __html: infoText
     }
-  }))), console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
+  }))), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
     id: "loadingDiv"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
     baseColor: "#EAEAEA"