@banyan_cloud/roots 1.0.79 → 1.0.81

package/dist/index.js

@@ -46912,7 +46912,7 @@ var css$y = ".Stepper_module_root__781d3116 {\n  display: flex;\n  flex-directio
 var modules_bbfded44 = {"root":"Stepper_module_root__781d3116","step":"Stepper_module_step__781d3116","title":"Stepper_module_title__781d3116","left":"Stepper_module_left__781d3116","icon":"Stepper_module_icon__781d3116","error-icon":"Stepper_module_errorIcon__781d3116","completion-icon":"Stepper_module_completionIcon__781d3116","active":"Stepper_module_active__781d3116","progress":"Stepper_module_progress__781d3116","right":"Stepper_module_right__781d3116","description":"Stepper_module_description__781d3116","completed":"Stepper_module_completed__781d3116","error":"Stepper_module_error__781d3116"};
 n(css$y,{});
 
-var css$x = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --skeleton: #e0e1e9;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #ff626a;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}";
+var css$x = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --skeleton: #e0e1e9;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --menu-black: #191b1f;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #ff626a;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}";
 var modules_dd21d9e9 = {"white":"--white","black":"--black","dark-grey":"--dark-grey","dark-grey-o-85":"--dark-grey-o-85","grey":"--grey","grey1":"--grey1","grey2":"--grey2","grey3":"--grey3","grey4":"--grey4","grey5":"--grey5","grey6":"--grey6","grey7":"--grey7","grey8":"--grey8","grey9":"--grey9","grey10":"--grey10","highlight":"--highlight","dark-blue":"--dark-blue","background":"--background","banyan-blue":"--banyan-blue","banyan-orange":"--banyan-orange","banyan-pink":"--banyan-pink","banyan-gradient":"--banyan-gradient","error":"--error","error-bg":"--error-bg","error-outline":"--error-outline","success":"--success","success-bg":"--success-bg","success-outline":"--success-outline","warning":"--warning","warning-bg":"--warning-bg","warning-outline":"--warning-outline","info":"--info","info-bg":"--info-bg","info-outline":"--info-outline"};
 n(css$x,{});
 
@@ -47389,8 +47389,8 @@ var css$s = ".BaseTable_module_root__7a8d241c {\n  display: flex;\n  flex-direct
 var modules_f1817c60 = {"root":"BaseTable_module_root__7a8d241c"};
 n(css$s,{});
 
-var css$r = ".Skeleton_module_root__43458bd0 {\n  width: 100%;\n  height: 100%;\n  background: var(--grey6);\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: inline-block;\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_lightTheme__43458bd0 {\n  background-color: var(--skeleton);\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_darkTheme__43458bd0 {\n  background-color: var(--grey2);\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_animated__43458bd0 {\n  animation-duration: 1.25s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: Skeleton_module_shimmer__43458bd0;\n  animation-timing-function: linear;\n  -webkit-animation-fill-mode: forwards;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-name: Skeleton_module_shimmer__43458bd0;\n  -webkit-animation-timing-function: linear;\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_animated__43458bd0.Skeleton_module_lightTheme__43458bd0 {\n  background-image: linear-gradient(to right, var(--skeleton) 0%, var(--grey8) 20%, var(--skeleton) 40%, var(--skeleton) 100%);\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_animated__43458bd0.Skeleton_module_darkTheme__43458bd0 {\n  background-image: linear-gradient(to right, var(--grey2) 0%, var(--grey4) 20%, var(--grey2) 40%, var(--grey2) 100%);\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_text__43458bd0 {\n  height: 1.5rem;\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_circle__43458bd0 {\n  border-radius: 50%;\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_rounded__43458bd0 {\n  border-radius: 0.25rem;\n}\n.Skeleton_module_root__43458bd0.Skeleton_module_ellipse__43458bd0 {\n  border-radius: 1.5rem;\n}\n\n@keyframes Skeleton_module_shimmer__43458bd0 {\n  0% {\n    background-position: -50rem 0;\n  }\n  100% {\n    background-position: 50rem 0;\n  }\n}";
-var modules_37a5ff73$8 = {"root":"Skeleton_module_root__43458bd0","light-theme":"Skeleton_module_lightTheme__43458bd0","dark-theme":"Skeleton_module_darkTheme__43458bd0","animated":"Skeleton_module_animated__43458bd0","shimmer":"Skeleton_module_shimmer__43458bd0","text":"Skeleton_module_text__43458bd0","circle":"Skeleton_module_circle__43458bd0","rounded":"Skeleton_module_rounded__43458bd0","ellipse":"Skeleton_module_ellipse__43458bd0"};
+var css$r = ".Skeleton_module_root__ad62f983 {\n  width: 100%;\n  height: 100%;\n  background: var(--grey6);\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: inline-block;\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_lightTheme__ad62f983 {\n  background-color: var(--skeleton);\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_darkTheme__ad62f983 {\n  background-color: var(--grey2);\n  opacity: 0.2;\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_animated__ad62f983 {\n  animation-duration: 1.25s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: Skeleton_module_shimmer__ad62f983;\n  animation-timing-function: linear;\n  -webkit-animation-fill-mode: forwards;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-name: Skeleton_module_shimmer__ad62f983;\n  -webkit-animation-timing-function: linear;\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_animated__ad62f983.Skeleton_module_lightTheme__ad62f983 {\n  background-image: linear-gradient(to right, var(--skeleton) 0%, var(--grey8) 20%, var(--skeleton) 40%, var(--skeleton) 100%);\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_animated__ad62f983.Skeleton_module_darkTheme__ad62f983 {\n  background-image: linear-gradient(to right, var(--grey2) 0%, var(--grey4) 20%, var(--grey2) 40%, var(--grey2) 100%);\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_text__ad62f983 {\n  height: 1.5rem;\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_circle__ad62f983 {\n  border-radius: 50%;\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_rounded__ad62f983 {\n  border-radius: 0.25rem;\n}\n.Skeleton_module_root__ad62f983.Skeleton_module_ellipse__ad62f983 {\n  border-radius: 1.5rem;\n}\n\n@keyframes Skeleton_module_shimmer__ad62f983 {\n  0% {\n    background-position: -50rem 0;\n  }\n  100% {\n    background-position: 50rem 0;\n  }\n}";
+var modules_37a5ff73$8 = {"root":"Skeleton_module_root__ad62f983","light-theme":"Skeleton_module_lightTheme__ad62f983","dark-theme":"Skeleton_module_darkTheme__ad62f983","animated":"Skeleton_module_animated__ad62f983","shimmer":"Skeleton_module_shimmer__ad62f983","text":"Skeleton_module_text__ad62f983","circle":"Skeleton_module_circle__ad62f983","rounded":"Skeleton_module_rounded__ad62f983","ellipse":"Skeleton_module_ellipse__ad62f983"};
 n(css$r,{});
 
 var Skeleton = function Skeleton(props) {
@@ -108546,7 +108546,8 @@ var BARS$1 = _toConsumableArray$1(Array(10).keys()).map(function () {
   return Math.random() * 80 + 20;
 });
 var ChartSkeleton$4 = function ChartSkeleton(_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    fallback = _ref.fallback;
   return /*#__PURE__*/jsx("div", {
     className: modules_37a5ff73$4.root,
     children: BARS$1.map(function (bar) {
@@ -108557,7 +108558,8 @@ var ChartSkeleton$4 = function ChartSkeleton(_ref) {
         variant: "rounded",
         style: {
           animationDuration: '4s'
-        }
+        },
+        noAnimation: fallback
       }, bar);
     })
   });
@@ -108589,10 +108591,12 @@ var BaseVerticalBarChart = function BaseVerticalBarChart(props) {
     seriesOption = props.seriesOption,
     style = props.style,
     className = props.className,
-    theme = props.theme;
-  if (loading) {
+    theme = props.theme,
+    fallback = props.fallback;
+  if (loading || fallback) {
     return /*#__PURE__*/jsx(ChartSkeleton$4, {
-      theme: theme
+      theme: theme,
+      fallback: !loading && fallback
     });
   }
   var minHeightCheck = !((_Object$keys = Object.keys((_seriesData$chartData = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData !== void 0 ? _seriesData$chartData : 0)) !== null && _Object$keys !== void 0 && _Object$keys.some(function (obj1) {
@@ -108638,7 +108642,7 @@ var BaseVerticalBarChart = function BaseVerticalBarChart(props) {
         var _seriesData$chartData9, _seriesData$chartData10;
         return seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$chartData9 = seriesData.chartData) === null || _seriesData$chartData9 === void 0 ? void 0 : (_seriesData$chartData10 = _seriesData$chartData9[obj1]) === null || _seriesData$chartData10 === void 0 ? void 0 : _seriesData$chartData10["x".concat(index + 1)];
       });
-    }) ? 0.2 : 0;
+    }) ? 0.03 : 0;
     return seriesOption.map(function (objectData, index) {
       var _seriesOptionObject$l, _objectData$label, _seriesData$chartData11;
       return _objectSpread2(_objectSpread2(_objectSpread2({}, seriesOptionObject), objectData), {}, {
@@ -108810,7 +108814,8 @@ var BARS = _toConsumableArray$1(Array(8).keys()).map(function () {
   return Math.random() * 80 + 20;
 });
 var ChartSkeleton$3 = function ChartSkeleton(_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    fallback = _ref.fallback;
   return /*#__PURE__*/jsx("div", {
     className: modules_37a5ff73$3.root,
     children: BARS.map(function (bar) {
@@ -108818,7 +108823,8 @@ var ChartSkeleton$3 = function ChartSkeleton(_ref) {
         theme: theme,
         variant: "rounded",
         width: "".concat(bar, "%"),
-        height: "3rem"
+        height: "3rem",
+        noAnimation: fallback
       }, bar);
     })
   });
@@ -108847,10 +108853,12 @@ var BaseHorizontalBarChart = function BaseHorizontalBarChart(props) {
     seriesOption = props.seriesOption,
     style = props.style,
     className = props.className,
-    theme = props.theme;
-  if (loading) {
+    theme = props.theme,
+    fallback = props.fallback;
+  if (loading || fallback) {
     return /*#__PURE__*/jsx(ChartSkeleton$3, {
-      theme: theme
+      theme: theme,
+      fallback: !loading && fallback
     });
   }
   var seriesOptionObject = {
@@ -108942,6 +108950,7 @@ var BaseHorizontalBarChart = function BaseHorizontalBarChart(props) {
 };
 BaseHorizontalBarChart.propTypes = {
   loading: propTypes$1.exports.bool,
+  fallback: propTypes$1.exports.bool,
   title: propTypes$1.exports.string,
   gridContainLabel: propTypes$1.exports.bool,
   gridOptions: propTypes$1.exports.object,
@@ -108968,6 +108977,7 @@ BaseHorizontalBarChart.propTypes = {
 };
 BaseHorizontalBarChart.defaultProps = {
   loading: false,
+  fallback: false,
   title: '',
   gridContainLabel: false,
   gridOptions: {
@@ -109008,12 +109018,13 @@ var css$b = ".BasePieChart_module_root__45f70e28 {\n  width: \"100%\";\n}";
 var modules_c20882aa = {"root":"BasePieChart_module_root__45f70e28"};
 n(css$b,{});
 
-var css$a = ".Skeleton_module_root__0710ee34 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n.Skeleton_module_root__0710ee34 > .Skeleton_module_outer__0710ee34,\n.Skeleton_module_root__0710ee34 > .Skeleton_module_inner__0710ee34 {\n  max-width: 100%;\n  max-height: 100%;\n}\n.Skeleton_module_root__0710ee34 > .Skeleton_module_inner__0710ee34 {\n  position: absolute;\n}\n.Skeleton_module_root__0710ee34 span.Skeleton_module_line__0710ee34 {\n  height: 0.5rem;\n  position: absolute;\n  transform-origin: left;\n}\n.Skeleton_module_root__0710ee34 span.Skeleton_module_line__0710ee34:nth-last-of-type(1) {\n  transform: translateX(3.25rem) rotate(45deg);\n}\n.Skeleton_module_root__0710ee34 span.Skeleton_module_line__0710ee34:nth-last-of-type(2) {\n  transform: translateX(3.25rem) rotate(-75deg);\n}\n.Skeleton_module_root__0710ee34 span.Skeleton_module_line__0710ee34:nth-last-of-type(3) {\n  transform: translateX(3.25rem) rotate(-10deg);\n}\n.Skeleton_module_root__0710ee34.Skeleton_module_lightTheme__0710ee34 > .Skeleton_module_inner__0710ee34 {\n  background: var(--white);\n}\n.Skeleton_module_root__0710ee34.Skeleton_module_lightTheme__0710ee34 span.Skeleton_module_line__0710ee34 {\n  background: var(--white);\n}\n.Skeleton_module_root__0710ee34.Skeleton_module_darkTheme__0710ee34 > .Skeleton_module_inner__0710ee34 {\n  background: var(--dark-grey);\n}\n.Skeleton_module_root__0710ee34.Skeleton_module_darkTheme__0710ee34 span.Skeleton_module_line__0710ee34 {\n  background: var(--dark-grey);\n}";
-var modules_37a5ff73$2 = {"root":"Skeleton_module_root__0710ee34","outer":"Skeleton_module_outer__0710ee34","inner":"Skeleton_module_inner__0710ee34","line":"Skeleton_module_line__0710ee34","light-theme":"Skeleton_module_lightTheme__0710ee34","dark-theme":"Skeleton_module_darkTheme__0710ee34"};
+var css$a = ".Skeleton_module_root__3ecc5d20 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n.Skeleton_module_root__3ecc5d20 > .Skeleton_module_outer__3ecc5d20,\n.Skeleton_module_root__3ecc5d20 > .Skeleton_module_inner__3ecc5d20 {\n  max-width: 100%;\n  max-height: 100%;\n}\n.Skeleton_module_root__3ecc5d20 > .Skeleton_module_inner__3ecc5d20 {\n  position: absolute;\n  opacity: 1;\n}\n.Skeleton_module_root__3ecc5d20 span.Skeleton_module_line__3ecc5d20 {\n  opacity: 1;\n  height: 0.5rem;\n  position: absolute;\n  transform-origin: left;\n}\n.Skeleton_module_root__3ecc5d20 span.Skeleton_module_line__3ecc5d20:nth-last-of-type(1) {\n  transform: translateX(3.25rem) rotate(45deg);\n}\n.Skeleton_module_root__3ecc5d20 span.Skeleton_module_line__3ecc5d20:nth-last-of-type(2) {\n  transform: translateX(3.25rem) rotate(-75deg);\n}\n.Skeleton_module_root__3ecc5d20 span.Skeleton_module_line__3ecc5d20:nth-last-of-type(3) {\n  transform: translateX(3.25rem) rotate(-10deg);\n}\n.Skeleton_module_root__3ecc5d20.Skeleton_module_lightTheme__3ecc5d20 > .Skeleton_module_inner__3ecc5d20 {\n  background: var(--white);\n}\n.Skeleton_module_root__3ecc5d20.Skeleton_module_lightTheme__3ecc5d20 span.Skeleton_module_line__3ecc5d20 {\n  background: var(--white);\n}\n.Skeleton_module_root__3ecc5d20.Skeleton_module_darkTheme__3ecc5d20 > .Skeleton_module_inner__3ecc5d20 {\n  background: var(--dark-grey);\n}\n.Skeleton_module_root__3ecc5d20.Skeleton_module_darkTheme__3ecc5d20 span.Skeleton_module_line__3ecc5d20 {\n  background: var(--dark-grey);\n}";
+var modules_37a5ff73$2 = {"root":"Skeleton_module_root__3ecc5d20","outer":"Skeleton_module_outer__3ecc5d20","inner":"Skeleton_module_inner__3ecc5d20","line":"Skeleton_module_line__3ecc5d20","light-theme":"Skeleton_module_lightTheme__3ecc5d20","dark-theme":"Skeleton_module_darkTheme__3ecc5d20"};
 n(css$a,{});
 
 var ChartSkeleton$2 = function ChartSkeleton(_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    fallback = _ref.fallback;
   return /*#__PURE__*/jsxs("div", {
     className: classes(modules_37a5ff73$2.root, modules_37a5ff73$2["".concat(theme, "-theme")]),
     children: [/*#__PURE__*/jsx(Skeleton, {
@@ -109021,7 +109032,8 @@ var ChartSkeleton$2 = function ChartSkeleton(_ref) {
       className: modules_37a5ff73$2.outer,
       width: "12.5rem",
       height: "12.5rem",
-      variant: "circle"
+      variant: "circle",
+      noAnimation: fallback
     }), /*#__PURE__*/jsx(Skeleton, {
       noAnimation: true,
       className: modules_37a5ff73$2.inner,
@@ -109063,10 +109075,12 @@ var BasePieChart = function BasePieChart(props) {
     seriesOption = props.seriesOption,
     style = props.style,
     className = props.className,
-    theme = props.theme;
-  if (loading) {
+    theme = props.theme,
+    fallback = props.fallback;
+  if (loading || fallback) {
     return /*#__PURE__*/jsx(ChartSkeleton$2, {
-      theme: theme
+      theme: theme,
+      fallback: !loading && fallback
     });
   }
   var seriesOptionObject = {
@@ -109149,6 +109163,7 @@ var BasePieChart = function BasePieChart(props) {
 };
 BasePieChart.propTypes = {
   loading: propTypes$1.exports.bool,
+  fallback: propTypes$1.exports.bool,
   title: propTypes$1.exports.string,
   gridOptions: propTypes$1.exports.object,
   tooltip: propTypes$1.exports.object,
@@ -109171,6 +109186,7 @@ BasePieChart.propTypes = {
 };
 BasePieChart.defaultProps = {
   loading: false,
+  fallback: false,
   title: '',
   gridOptions: {
     left: 0,
@@ -109312,14 +109328,16 @@ var BOXES = _toConsumableArray$1(Array(36).keys()).map(function () {
   return Math.random() * 80 + 20;
 });
 var ChartSkeleton$1 = function ChartSkeleton(_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    fallback = _ref.fallback;
   return /*#__PURE__*/jsx("div", {
     className: modules_37a5ff73$1.root,
     children: BOXES.map(function (box) {
       return /*#__PURE__*/jsx(Skeleton, {
         theme: theme,
         className: modules_37a5ff73$1.box,
-        height: "100%"
+        height: "100%",
+        noAnimation: fallback
       }, box);
     })
   });
@@ -109349,10 +109367,12 @@ var HeatMapChart = function HeatMapChart(props) {
     visualMap = props.visualMap,
     style = props.style,
     className = props.className,
-    theme = props.theme;
-  if (loading) {
+    theme = props.theme,
+    fallback = props.fallback;
+  if (loading || fallback) {
     return /*#__PURE__*/jsx(ChartSkeleton$1, {
-      theme: theme
+      theme: theme,
+      fallback: !loading && fallback
     });
   }
   var seriesOptionObject = {
@@ -109397,15 +109417,15 @@ var HeatMapChart = function HeatMapChart(props) {
         value: seriesData.chartData[ob].x1
       };
     });
-    var row = Math.floor(Math.sqrt(newSeriesData.length));
-    var col = Math.ceil(Math.sqrt(newSeriesData.length));
+    var row = 7;
+    var col = 7;
     var dataNew = [];
     for (var i = 0, k = 0; i < row; i++) {
       for (var j = 0; j < col; j++, k++) {
         var _newSeriesData$k$name, _newSeriesData$k, _newSeriesData$k$valu, _newSeriesData$k2;
         dataNew.push({
           name: (_newSeriesData$k$name = newSeriesData === null || newSeriesData === void 0 ? void 0 : (_newSeriesData$k = newSeriesData[k]) === null || _newSeriesData$k === void 0 ? void 0 : _newSeriesData$k.name) !== null && _newSeriesData$k$name !== void 0 ? _newSeriesData$k$name : '',
-          value: [j, i, (_newSeriesData$k$valu = newSeriesData === null || newSeriesData === void 0 ? void 0 : (_newSeriesData$k2 = newSeriesData[k]) === null || _newSeriesData$k2 === void 0 ? void 0 : _newSeriesData$k2.value) !== null && _newSeriesData$k$valu !== void 0 ? _newSeriesData$k$valu : '-']
+          value: [j, i, (_newSeriesData$k$valu = newSeriesData === null || newSeriesData === void 0 ? void 0 : (_newSeriesData$k2 = newSeriesData[k]) === null || _newSeriesData$k2 === void 0 ? void 0 : _newSeriesData$k2.value) !== null && _newSeriesData$k$valu !== void 0 ? _newSeriesData$k$valu : -1]
         });
       }
     }
@@ -109475,6 +109495,7 @@ var HeatMapChart = function HeatMapChart(props) {
 };
 HeatMapChart.propTypes = {
   loading: propTypes$1.exports.bool,
+  fallback: propTypes$1.exports.bool,
   title: propTypes$1.exports.string,
   gridContainLabel: propTypes$1.exports.bool,
   gridOptions: propTypes$1.exports.object,
@@ -109499,6 +109520,7 @@ HeatMapChart.propTypes = {
 };
 HeatMapChart.defaultProps = {
   loading: false,
+  fallback: false,
   title: '',
   gridContainLabel: false,
   gridOptions: {
@@ -109552,7 +109574,8 @@ var TRIANGLES = _toConsumableArray$1(Array(7).keys()).map(function () {
 });
 var ChartSkeleton = function ChartSkeleton(_ref) {
   var filled = _ref.filled,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    fallback = _ref.fallback;
   if (filled) {
     return /*#__PURE__*/jsxs("div", {
       className: classes(modules_37a5ff73.root, modules_37a5ff73.filled, modules_37a5ff73["".concat(theme, "-theme")]),
@@ -109579,7 +109602,8 @@ var ChartSkeleton = function ChartSkeleton(_ref) {
         return /*#__PURE__*/jsx(Skeleton, {
           theme: theme,
           className: modules_37a5ff73.bump,
-          height: "0.5rem"
+          height: "0.5rem",
+          noAnimation: fallback
         }, bump);
       })
     })
@@ -109615,15 +109639,17 @@ var BaseAreaChart = function BaseAreaChart(props) {
     opacity = props.opacity,
     style = props.style,
     className = props.className,
-    theme = props.theme;
-  if (loading) {
+    theme = props.theme,
+    fallback = props.fallback;
+  if (loading || fallback) {
     // const filled = seriesOption.some((series) => {
     // return series?.areaStyle.opacity > 0;
     // });
     return /*#__PURE__*/jsx(ChartSkeleton
     //  filled={filled}
     , {
-      theme: theme
+      theme: theme,
+      fallback: !loading && fallback
     });
   }
   var seriesOptionObject = {
@@ -109741,6 +109767,7 @@ var BaseAreaChart = function BaseAreaChart(props) {
 };
 BaseAreaChart.propTypes = {
   loading: propTypes$1.exports.bool,
+  fallback: propTypes$1.exports.bool,
   title: propTypes$1.exports.string,
   gridOptions: propTypes$1.exports.object,
   gridContainLabel: propTypes$1.exports.bool,
@@ -109770,6 +109797,7 @@ BaseAreaChart.propTypes = {
 };
 BaseAreaChart.defaultProps = {
   loading: false,
+  fallback: false,
   title: '',
   gridOptions: {
     left: 0,
@@ -109806,12 +109834,12 @@ BaseAreaChart.defaultProps = {
   theme: 'dark'
 };
 
-var css$4 = ".BaseWidget_module_root__ba924901 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  height: 100%;\n  width: 100%;\n  padding: 0.25rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.25rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerTitle__ba924901 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerTitle__ba924901 .BaseWidget_module_back__ba924901 {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerTitle__ba924901 .BaseWidget_module_back__ba924901 [data-elem=component1] .BaseWidget_module_icon__ba924901 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--white);\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerTitle__ba924901.BaseWidget_module_noOptions__ba924901 {\n  flex: 1;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerTitle__ba924901 .BaseWidget_module_title__ba924901 {\n  white-space: nowrap;\n  color: var(--white);\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerTitle__ba924901 .BaseWidget_module_value__ba924901 {\n  white-space: nowrap;\n  color: var(--white);\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.5rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_toggleBody__ba924901 {\n  padding: 0.125rem 0.25rem;\n  height: 1.75rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_dropdownHeader__ba924901 {\n  height: 1.75rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_dropdownHeader__ba924901 [data-elem=select] {\n  background-color: transparent;\n  width: 100%;\n  color: var(--white);\n  border-color: var(--grey);\n  padding: 0.07rem 0.5rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_dropdownHeader__ba924901 [data-elem=select] [data-elem=placeholder] {\n  font-size: 0.875rem;\n  color: var(--white);\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_dropdownHeader__ba924901 [data-elem=select] > svg {\n  fill: var(--white);\n  width: 0.875rem;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_expandButton__ba924901 {\n  height: 1.75rem;\n  color: var(--white);\n  border-color: var(--grey);\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_header__ba924901 .BaseWidget_module_headerOptions__ba924901 .BaseWidget_module_expandButton__ba924901 .BaseWidget_module_expandIcon__ba924901 {\n  height: 1.25rem;\n  width: 1.25rem;\n  fill: var(--white);\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_children__ba924901 {\n  flex: 1 1;\n}\n.BaseWidget_module_root__ba924901 .BaseWidget_module_children__ba924901 [data-elem=error-msg] {\n  color: var(--white);\n}\n\n.BaseWidget_module_dropdownPopper__ba924901 {\n  padding: 0rem;\n  background: var(--grey1);\n}\n.BaseWidget_module_dropdownPopper__ba924901 .BaseWidget_module_dropdownItem__ba924901 {\n  height: 2.25rem;\n  color: var(--white);\n  background: var(--grey);\n}\n.BaseWidget_module_dropdownPopper__ba924901 .BaseWidget_module_dropdownItem__ba924901:hover, .BaseWidget_module_dropdownPopper__ba924901 .BaseWidget_module_dropdownItem__ba924901:focus {\n  color: var(--dark-grey);\n  background: var(--grey2);\n}\n.BaseWidget_module_dropdownPopper__ba924901 .BaseWidget_module_dropdownItem__ba924901:hover label > svg, .BaseWidget_module_dropdownPopper__ba924901 .BaseWidget_module_dropdownItem__ba924901:focus label > svg {\n  border: 1px solid var(--dark-grey);\n  border-radius: 0.25rem;\n}";
-var modules_6a0e74b6 = {"root":"BaseWidget_module_root__ba924901","header":"BaseWidget_module_header__ba924901","header-title":"BaseWidget_module_headerTitle__ba924901","back":"BaseWidget_module_back__ba924901","icon":"BaseWidget_module_icon__ba924901","no-options":"BaseWidget_module_noOptions__ba924901","title":"BaseWidget_module_title__ba924901","value":"BaseWidget_module_value__ba924901","header-options":"BaseWidget_module_headerOptions__ba924901","toggle-body":"BaseWidget_module_toggleBody__ba924901","dropdown-header":"BaseWidget_module_dropdownHeader__ba924901","expand-button":"BaseWidget_module_expandButton__ba924901","expand-icon":"BaseWidget_module_expandIcon__ba924901","children":"BaseWidget_module_children__ba924901","dropdown-popper":"BaseWidget_module_dropdownPopper__ba924901","dropdown-item":"BaseWidget_module_dropdownItem__ba924901"};
+var css$4 = ".BaseWidget_module_root__d03f6b45 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  height: 100%;\n  width: 100%;\n  padding: 0.25rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.25rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerTitle__d03f6b45 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerTitle__d03f6b45 .BaseWidget_module_back__d03f6b45 {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerTitle__d03f6b45 .BaseWidget_module_back__d03f6b45 [data-elem=component1] .BaseWidget_module_icon__d03f6b45 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--white);\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerTitle__d03f6b45.BaseWidget_module_noOptions__d03f6b45 {\n  flex: 1;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerTitle__d03f6b45 .BaseWidget_module_title__d03f6b45 {\n  white-space: nowrap;\n  color: var(--white);\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerTitle__d03f6b45 .BaseWidget_module_value__d03f6b45 {\n  white-space: nowrap;\n  color: var(--white);\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.5rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_toggleBody__d03f6b45 {\n  padding: 0.125rem 0.25rem;\n  height: 1.75rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_dropdownHeader__d03f6b45 {\n  height: 1.75rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_dropdownHeader__d03f6b45 [data-elem=select] {\n  background-color: transparent;\n  width: 100%;\n  color: var(--white);\n  border-color: var(--grey);\n  padding: 0.07rem 0.5rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_dropdownHeader__d03f6b45 [data-elem=select] [data-elem=placeholder] {\n  font-size: 0.875rem;\n  color: var(--white);\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_dropdownHeader__d03f6b45 [data-elem=select] > svg {\n  fill: var(--white);\n  width: 0.875rem;\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_expandButton__d03f6b45 {\n  height: 1.75rem;\n  color: var(--white);\n  border-color: var(--grey);\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_header__d03f6b45 .BaseWidget_module_headerOptions__d03f6b45 .BaseWidget_module_expandButton__d03f6b45 .BaseWidget_module_expandIcon__d03f6b45 {\n  height: 1.25rem;\n  width: 1.25rem;\n  fill: var(--white);\n}\n.BaseWidget_module_root__d03f6b45 .BaseWidget_module_children__d03f6b45 {\n  flex: 1 1;\n  position: relative;\n}\n\n.BaseWidget_module_dropdownPopper__d03f6b45 {\n  padding: 0rem;\n  background: var(--grey1);\n}\n.BaseWidget_module_dropdownPopper__d03f6b45 .BaseWidget_module_dropdownItem__d03f6b45 {\n  height: 2.25rem;\n  color: var(--white);\n  background: var(--grey);\n}\n.BaseWidget_module_dropdownPopper__d03f6b45 .BaseWidget_module_dropdownItem__d03f6b45:hover, .BaseWidget_module_dropdownPopper__d03f6b45 .BaseWidget_module_dropdownItem__d03f6b45:focus {\n  color: var(--dark-grey);\n  background: var(--grey2);\n}\n.BaseWidget_module_dropdownPopper__d03f6b45 .BaseWidget_module_dropdownItem__d03f6b45:hover label > svg, .BaseWidget_module_dropdownPopper__d03f6b45 .BaseWidget_module_dropdownItem__d03f6b45:focus label > svg {\n  border: 1px solid var(--dark-grey);\n  border-radius: 0.25rem;\n}";
+var modules_6a0e74b6 = {"root":"BaseWidget_module_root__d03f6b45","header":"BaseWidget_module_header__d03f6b45","header-title":"BaseWidget_module_headerTitle__d03f6b45","back":"BaseWidget_module_back__d03f6b45","icon":"BaseWidget_module_icon__d03f6b45","no-options":"BaseWidget_module_noOptions__d03f6b45","title":"BaseWidget_module_title__d03f6b45","value":"BaseWidget_module_value__d03f6b45","header-options":"BaseWidget_module_headerOptions__d03f6b45","toggle-body":"BaseWidget_module_toggleBody__d03f6b45","dropdown-header":"BaseWidget_module_dropdownHeader__d03f6b45","expand-button":"BaseWidget_module_expandButton__d03f6b45","expand-icon":"BaseWidget_module_expandIcon__d03f6b45","children":"BaseWidget_module_children__d03f6b45","dropdown-popper":"BaseWidget_module_dropdownPopper__d03f6b45","dropdown-item":"BaseWidget_module_dropdownItem__d03f6b45"};
 n(css$4,{});
 
-var css$3 = "div.Toggle_module_root__dfee296f {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  overflow: auto;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  background: var(--grey8);\n  width: -moz-fit-content;\n  width: fit-content;\n  border-radius: 0.4rem 0.4rem;\n  border-width: 1px;\n  border-style: solid;\n}\ndiv.Toggle_module_root__dfee296f.Toggle_module_themeDark__dfee296f {\n  background: var(--white);\n  border-color: var(--grey);\n}\ndiv.Toggle_module_root__dfee296f.Toggle_module_themeDark__dfee296f [data-elem=base-cell].Toggle_module_toggleButton__dfee296f {\n  background: var(--white);\n  color: var(--grey4);\n}\ndiv.Toggle_module_root__dfee296f.Toggle_module_themeDark__dfee296f [data-elem=base-cell].Toggle_module_toggleButton__dfee296f.Toggle_module_active__dfee296f {\n  background: var(--dark-grey);\n  color: var(--white);\n}\ndiv.Toggle_module_root__dfee296f.Toggle_module_themeLight__dfee296f {\n  background: var(--white);\n  border-color: var(--grey1);\n}\ndiv.Toggle_module_root__dfee296f.Toggle_module_themeLight__dfee296f [data-elem=base-cell].Toggle_module_toggleButton__dfee296f {\n  background: transparent;\n  color: var(--grey);\n}\ndiv.Toggle_module_root__dfee296f.Toggle_module_themeLight__dfee296f [data-elem=base-cell].Toggle_module_toggleButton__dfee296f.Toggle_module_active__dfee296f {\n  background: var(--grey6);\n  color: var(--dark-grey);\n  border: 1px solid var(--grey4);\n}\ndiv.Toggle_module_root__dfee296f [data-elem=base-cell].Toggle_module_toggleButton__dfee296f {\n  padding: 0.344rem 0.75rem;\n  height: 2rem;\n}\ndiv.Toggle_module_root__dfee296f [data-elem=base-cell].Toggle_module_toggleButton__dfee296f.Toggle_module_active__dfee296f {\n  border-radius: 0.25rem;\n}\ndiv.Toggle_module_root__dfee296f .Toggle_module_input__dfee296f {\n  display: none;\n}";
-var modules_a2cdc77c = {"root":"Toggle_module_root__dfee296f","theme-dark":"Toggle_module_themeDark__dfee296f","toggle-button":"Toggle_module_toggleButton__dfee296f","active":"Toggle_module_active__dfee296f","theme-light":"Toggle_module_themeLight__dfee296f","input":"Toggle_module_input__dfee296f"};
+var css$3 = "div.Toggle_module_root__d6c38150 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  overflow: auto;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  background: var(--grey8);\n  width: -moz-fit-content;\n  width: fit-content;\n  border-radius: 0.4rem 0.4rem;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n}\ndiv.Toggle_module_root__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150 {\n  background: transparent;\n}\ndiv.Toggle_module_root__d6c38150.Toggle_module_themeDark__d6c38150 {\n  border-color: var(--grey);\n}\ndiv.Toggle_module_root__d6c38150.Toggle_module_themeDark__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150 {\n  color: var(--grey4);\n}\ndiv.Toggle_module_root__d6c38150.Toggle_module_themeDark__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150.Toggle_module_active__d6c38150 {\n  background: var(--menu-black);\n  color: var(--white);\n}\ndiv.Toggle_module_root__d6c38150.Toggle_module_themeLight__d6c38150 {\n  border-color: var(--grey1);\n}\ndiv.Toggle_module_root__d6c38150.Toggle_module_themeLight__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150 {\n  background: transparent;\n  color: var(--grey);\n}\ndiv.Toggle_module_root__d6c38150.Toggle_module_themeLight__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150.Toggle_module_active__d6c38150 {\n  background: var(--grey6);\n  color: var(--dark-grey);\n}\ndiv.Toggle_module_root__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150 {\n  padding: 0.344rem 0.75rem;\n  height: 2rem;\n}\ndiv.Toggle_module_root__d6c38150 [data-elem=base-cell].Toggle_module_toggleButton__d6c38150.Toggle_module_active__d6c38150 {\n  border-radius: 0.25rem;\n}\ndiv.Toggle_module_root__d6c38150 .Toggle_module_input__d6c38150 {\n  display: none;\n}";
+var modules_a2cdc77c = {"root":"Toggle_module_root__d6c38150","toggle-button":"Toggle_module_toggleButton__d6c38150","theme-dark":"Toggle_module_themeDark__d6c38150","active":"Toggle_module_active__d6c38150","theme-light":"Toggle_module_themeLight__d6c38150","input":"Toggle_module_input__d6c38150"};
 n(css$3,{});
 
 var Toggle = /*#__PURE__*/forwardRef(function Toggle(props, ref) {
@@ -109954,45 +109982,54 @@ Toggle.defaultProps = {
   multi: false
 };
 
-var css$2 = ".ErrorStateChart_module_root__2845f7e7 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  width: 30%;\n  height: 100%;\n  gap: 1rem;\n}\n.ErrorStateChart_module_root__2845f7e7 .ErrorStateChart_module_text__2845f7e7 {\n  text-align: center;\n}\n.ErrorStateChart_module_root__2845f7e7 .ErrorStateChart_module_button__2845f7e7 {\n  width: 60%;\n}";
-var modules_e5d5a95c = {"root":"ErrorStateChart_module_root__2845f7e7","text":"ErrorStateChart_module_text__2845f7e7","button":"ErrorStateChart_module_button__2845f7e7"};
+var css$2 = ".WidgetFallback_module_root__02f3e804 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n  padding: 2rem;\n  gap: 0.5rem;\n  margin: auto;\n  -webkit-backdrop-filter: blur(0.25rem);\n          backdrop-filter: blur(0.25rem);\n}\n.WidgetFallback_module_root__02f3e804 .WidgetFallback_module_wrapper__02f3e804 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  gap: 0.5rem;\n}\n.WidgetFallback_module_root__02f3e804 .WidgetFallback_module_text__02f3e804 {\n  text-align: center;\n  width: 80%;\n}\n.WidgetFallback_module_root__02f3e804.WidgetFallback_module_lightTheme__02f3e804 span.WidgetFallback_module_text__02f3e804:nth-of-type(1) {\n  color: var(--dark-grey);\n}\n.WidgetFallback_module_root__02f3e804.WidgetFallback_module_lightTheme__02f3e804 span.WidgetFallback_module_text__02f3e804:nth-of-type(2) {\n  color: var(--grey2);\n}\n.WidgetFallback_module_root__02f3e804.WidgetFallback_module_darkTheme__02f3e804 span.WidgetFallback_module_text__02f3e804:nth-of-type(1) {\n  color: var(--white);\n}\n.WidgetFallback_module_root__02f3e804.WidgetFallback_module_darkTheme__02f3e804 span.WidgetFallback_module_text__02f3e804:nth-of-type(2) {\n  color: var(--grey1);\n}\n.WidgetFallback_module_root__02f3e804 button {\n  margin-top: 1rem;\n}";
+var modules_543e23b5 = {"root":"WidgetFallback_module_root__02f3e804","wrapper":"WidgetFallback_module_wrapper__02f3e804","text":"WidgetFallback_module_text__02f3e804","light-theme":"WidgetFallback_module_lightTheme__02f3e804","dark-theme":"WidgetFallback_module_darkTheme__02f3e804"};
 n(css$2,{});
 
-var ErrorStateChart = function ErrorStateChart(props) {
-  var onClick = props.onClick,
+var WidgetFallback = function WidgetFallback(props) {
+  var onReload = props.onReload,
     title = props.title,
-    errorClassName = props.errorClassName;
-  return /*#__PURE__*/jsxs("div", {
-    className: classes(modules_e5d5a95c.root, errorClassName),
-    children: [/*#__PURE__*/jsx(Text, {
-      variant: "h2",
-      stroke: "semibold",
-      className: modules_e5d5a95c.text,
-      attrs: {
-        'data-elem': 'error-msg'
-      },
-      children: title
-    }), /*#__PURE__*/jsx(Button, {
-      variant: "contained",
-      size: "auto",
-      rightComponent: function rightComponent() {
-        return 'Reload';
-      },
-      className: modules_e5d5a95c.button,
-      "data-elem": "refresh-button",
-      onClick: onClick
-    })]
+    subtitle = props.subtitle,
+    className = props.className,
+    theme = props.theme;
+  return /*#__PURE__*/jsx("div", {
+    className: classes(modules_543e23b5.root, className, modules_543e23b5["".concat(theme, "-theme")]),
+    children: /*#__PURE__*/jsxs("div", {
+      className: modules_543e23b5.wrapper,
+      children: [/*#__PURE__*/jsx(Text, {
+        variant: "h2",
+        stroke: "medium",
+        className: modules_543e23b5.text,
+        children: title
+      }), /*#__PURE__*/jsx(Text, {
+        variant: "b1",
+        className: modules_543e23b5.text,
+        children: subtitle
+      }), /*#__PURE__*/jsx(Button, {
+        variant: "outlined",
+        size: "auto",
+        rightComponent: function rightComponent() {
+          return 'Reload';
+        },
+        className: modules_543e23b5.button,
+        onClick: onReload
+      })]
+    })
   });
 };
-ErrorStateChart.propTypes = {
-  onClick: propTypes$1.exports.func,
+WidgetFallback.propTypes = {
+  className: propTypes$1.exports.string,
   title: propTypes$1.exports.string,
-  errorClassName: propTypes$1.exports.string
+  subtitle: propTypes$1.exports.string,
+  onReload: propTypes$1.exports.func,
+  theme: propTypes$1.exports.oneOf(['light', 'dark'])
 };
-ErrorStateChart.defaultProps = {
-  onClick: function onClick() {},
+WidgetFallback.defaultProps = {
+  className: '',
   title: '',
-  errorClassName: ''
+  subtitle: '',
+  onReload: function onReload() {},
+  theme: 'dark'
 };
 
 var generateOptions = function generateOptions(optionData) {
@@ -110041,22 +110078,28 @@ var generateOptions = function generateOptions(optionData) {
 };
 var BaseWidget = function BaseWidget(props) {
   var _options$length, _options$length2;
+  // eslint-disable-next-line object-curly-newline
   var loading = props.loading,
     title = props.title,
     showBack = props.showBack,
     onBack = props.onBack,
+    onReload = props.onReload,
     options = props.options,
     className = props.className,
     children = props.children,
-    errorHandle = props.errorHandle,
-    errorClassName = props.errorClassName,
-    errorMessage = props.errorMessage,
-    showFallback = props.showFallback;
-  var emptyChartData = Children.toArray(children).every(function (child) {
-    var _child$props$seriesDa, _child$props, _child$props$seriesDa2;
-    var chartData = (_child$props$seriesDa = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$seriesDa2 = _child$props.seriesData) === null || _child$props$seriesDa2 === void 0 ? void 0 : _child$props$seriesDa2.chartData) !== null && _child$props$seriesDa !== void 0 ? _child$props$seriesDa : {};
-    return chartData && Object.keys(chartData).length === 0;
-  });
+    fallbackProps = props.fallbackProps,
+    theme = props.theme,
+    setFallback = props.setFallback;
+  var emptyChartData = useMemo(function () {
+    return Children.toArray(children).every(function (child) {
+      var _child$props$seriesDa, _child$props, _child$props$seriesDa2;
+      var chartData = (_child$props$seriesDa = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$seriesDa2 = _child$props.seriesData) === null || _child$props$seriesDa2 === void 0 ? void 0 : _child$props$seriesDa2.chartData) !== null && _child$props$seriesDa !== void 0 ? _child$props$seriesDa : {};
+      return chartData && Object.keys(chartData).length === 0;
+    });
+  }, [children]);
+  useEffect(function () {
+    setFallback(emptyChartData);
+  }, [emptyChartData]);
   return /*#__PURE__*/jsxs("div", {
     className: classes(modules_6a0e74b6.root, className),
     children: [/*#__PURE__*/jsxs("div", {
@@ -110088,40 +110131,54 @@ var BaseWidget = function BaseWidget(props) {
           return generateOptions(objectData);
         }))
       })]
-    }), /*#__PURE__*/jsx("div", {
+    }), /*#__PURE__*/jsxs("div", {
       className: modules_6a0e74b6.children,
       "data-elem": "children",
-      children: showFallback && !loading && emptyChartData ? /*#__PURE__*/jsx(ErrorStateChart, {
-        onClick: errorHandle,
-        title: errorMessage,
-        className: errorClassName
-      }) : children
+      children: [!loading && emptyChartData && /*#__PURE__*/jsx(WidgetFallback, _objectSpread2(_objectSpread2({}, fallbackProps), {}, {
+        onReload: onReload,
+        theme: theme
+      })), Children.map(children, function (child) {
+        if ( /*#__PURE__*/isValidElement(child)) {
+          return /*#__PURE__*/cloneElement(child, {
+            fallback: !loading && emptyChartData
+          });
+        }
+        return null;
+      })]
     })]
   });
 };
 BaseWidget.propTypes = {
   loading: propTypes$1.exports.bool,
-  showFallback: propTypes$1.exports.bool,
   title: propTypes$1.exports.string,
   showBack: propTypes$1.exports.bool,
   onBack: propTypes$1.exports.func,
+  onReload: propTypes$1.exports.func,
   options: propTypes$1.exports.arrayOf(propTypes$1.exports.shape),
   className: propTypes$1.exports.string,
-  errorHandle: propTypes$1.exports.func,
-  errorClassName: propTypes$1.exports.string,
-  errorMessage: propTypes$1.exports.string
+  fallbackProps: propTypes$1.exports.shape({
+    className: propTypes$1.exports.string,
+    title: propTypes$1.exports.string,
+    subtitle: propTypes$1.exports.string
+  }),
+  theme: propTypes$1.exports.oneOf(['light', 'dark']),
+  setFallback: propTypes$1.exports.func
 };
 BaseWidget.defaultProps = {
   loading: false,
-  showFallback: false,
   title: '',
   showBack: false,
   onBack: function onBack() {},
+  onReload: function onReload() {},
   options: [],
   className: '',
-  errorHandle: function errorHandle() {},
-  errorClassName: '',
-  errorMessage: 'No Data Found'
+  fallbackProps: {
+    className: '',
+    title: "We're having trouble loading this data",
+    subtitle: 'There could be something happening on our end. Reload this widget to try again.'
+  },
+  theme: 'dark',
+  setFallback: function setFallback() {}
 };
 
 var css$1 = ".DisplayPicture_module_root__a7ba07d1.DisplayPicture_module_sm__a7ba07d1 img {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 100%;\n}\n.DisplayPicture_module_root__a7ba07d1.DisplayPicture_module_sm__a7ba07d1 div {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 100%;\n  background-color: var(--highlight);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.DisplayPicture_module_root__a7ba07d1.DisplayPicture_module_sm__a7ba07d1 div span {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--white);\n}\n.DisplayPicture_module_root__a7ba07d1.DisplayPicture_module_md__a7ba07d1 img {\n  height: 5.3125rem;\n  width: 5.3125rem;\n  border-radius: 100%;\n}\n.DisplayPicture_module_root__a7ba07d1.DisplayPicture_module_md__a7ba07d1 div {\n  height: 5.3125rem;\n  width: 5.3125rem;\n  border-radius: 100%;\n  background-color: var(--highlight);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.DisplayPicture_module_root__a7ba07d1.DisplayPicture_module_md__a7ba07d1 div span {\n  font-size: 2rem;\n  font-weight: 600;\n  color: var(--white);\n}";
@@ -112050,11 +112107,11 @@ function useDeepCompareMemoize(value) {
   return ref.current;
 }
 
-var css = ".BaseMap_module_root__d41b0b3e {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.BaseMap_module_root__d41b0b3e.BaseMap_module_loading__d41b0b3e {\n  padding: 1rem;\n}";
-var modules_a07e405a = {"root":"BaseMap_module_root__d41b0b3e","loading":"BaseMap_module_loading__d41b0b3e"};
+var css = ".BaseMap_module_root__f8550170 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.BaseMap_module_root__f8550170.BaseMap_module_loading__f8550170 {\n  padding: 1rem;\n}";
+var modules_a07e405a = {"root":"BaseMap_module_root__f8550170","loading":"BaseMap_module_loading__f8550170"};
 n(css,{});
 
-var _excluded$1 = ["loading", "onClick", "onIdle", "children", "style", "mapId", "clustered", "fitBounds", "theme"];
+var _excluded$1 = ["loading", "onClick", "onIdle", "children", "style", "mapId", "clustered", "fitBounds", "theme", "fallback"];
 var BaseMap = function BaseMap(props) {
   // eslint-disable-next-line object-curly-newline
   var loading = props.loading,
@@ -112066,6 +112123,7 @@ var BaseMap = function BaseMap(props) {
     clustered = props.clustered,
     fitBounds = props.fitBounds,
     theme = props.theme,
+    fallback = props.fallback,
     options = _objectWithoutProperties$1(props, _excluded$1);
   var ref = useRef(null);
   var markersRef = useRef([]);
@@ -112153,7 +112211,8 @@ var BaseMap = function BaseMap(props) {
     }), loading && /*#__PURE__*/jsx(Skeleton, {
       theme: theme,
       height: "100%",
-      variant: "rounded"
+      variant: "rounded",
+      noAnimation: !loading && fallback
     }), Children.toArray(children).filter(function (child) {
       return /*#__PURE__*/isValidElement(child);
     }).map(function (child, index) {
@@ -112195,13 +112254,15 @@ var Map$1 = function Map(props) {
     apiKey = props.apiKey,
     libraries = props.libraries,
     children = props.children,
-    theme = props.theme;
+    theme = props.theme,
+    fallback = props.fallback;
   return /*#__PURE__*/jsx(Wrapper, {
     apiKey: apiKey,
     libraries: libraries,
     children: /*#__PURE__*/jsx(BaseMap, _objectSpread2(_objectSpread2({}, options), {}, {
       loading: loading,
       theme: theme,
+      fallback: fallback,
       children: children
     }))
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@banyan_cloud/roots",
-	"version": "1.0.79",
+	"version": "1.0.81",
 	"description": "Design System Library which drives the Banyan Cloud products",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",

package/styles/_colors.exports.scss

@@ -27,6 +27,7 @@
 	--highlight: #0f62fe;
 	--dark-blue: #001833;
 	--background: #d0e2ff;
+	--menu-black: #191b1f;
 
 	--banyan-blue: #00037c;
 	--banyan-orange: #ff892a;