@ammarkhalidfarooq/dashboard-package 0.6.44 → 0.6.45

package/dist/index.cjs.js

@@ -16108,6 +16108,11 @@ var html2canvas_esm = /*#__PURE__*/Object.freeze({
 var CARD_BORDER = "1.5px solid #F1F1F5";
 var PANEL_BORDER = "1px solid #f0f0f0";
 var PANEL_SHADOW = "0 4px 24px rgba(0,0,0,0.06)";
+var textSkeletonSx = {
+  lineHeight: 1,
+  transform: "none",
+  flexShrink: 0
+};
 var MetricCardSkeleton = function MetricCardSkeleton() {
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
     sx: {
@@ -16118,35 +16123,50 @@ var MetricCardSkeleton = function MetricCardSkeleton() {
         xs: 1.75,
         md: 2
       },
+      paddingTop: "10px !important",
+      paddingBottom: "10px !important",
       height: 92,
-      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
+      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      overflow: "hidden"
     },
     children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
         display: "flex",
         justifyContent: "space-between",
-        mb: 1
+        alignItems: "center"
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-        variant: "text",
+        variant: "rounded",
         width: "55%",
-        height: 18
+        height: 14,
+        sx: {
+          flexShrink: 0
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
         variant: "circular",
         width: 30,
-        height: 30
+        height: 30,
+        sx: {
+          flexShrink: 0
+        }
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "70%",
-      height: 28,
+      height: 22,
       sx: {
-        mb: 0.5
+        flexShrink: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "45%",
-      height: 14
+      height: 12,
+      sx: {
+        flexShrink: 0
+      }
     })]
   });
 };
@@ -16167,7 +16187,11 @@ var MetricCardsSkeleton = function MetricCardsSkeleton(_ref) {
       display: "grid",
       gridTemplateColumns: gridTemplateColumns,
       gap: gap,
-      mb: 0
+      mb: 0,
+      minWidth: 0,
+      "& > *": {
+        minWidth: 0
+      }
     },
     children: Array.from({
       length: count
@@ -16176,43 +16200,52 @@ var MetricCardsSkeleton = function MetricCardsSkeleton(_ref) {
     })
   });
 };
+var panelCardSx = {
+  bgcolor: "#fff",
+  borderRadius: 4,
+  border: PANEL_BORDER,
+  boxShadow: PANEL_SHADOW,
+  p: 3,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  minWidth: 0
+};
 var ChartCardSkeleton = function ChartCardSkeleton(_ref2) {
   var _ref2$height = _ref2.height,
     height = _ref2$height === void 0 ? 380 : _ref2$height;
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: PANEL_BORDER,
-      boxShadow: PANEL_SHADOW,
-      p: 3,
+    sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
       height: height
-    },
+    }),
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: 180,
-      height: 26,
-      sx: {
+      height: 22,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 0.5
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: 120,
-      height: 16,
-      sx: {
+      height: 14,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 1
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: 140,
-      height: 36,
-      sx: {
+      height: 30,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 2
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
       variant: "rounded",
-      width: "100%",
-      height: height - 150
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        width: "100%"
+      }
     })]
   });
 };
@@ -16222,32 +16255,30 @@ var PanelCardSkeleton = function PanelCardSkeleton(_ref3) {
     _ref3$sx = _ref3.sx,
     sx = _ref3$sx === void 0 ? {} : _ref3$sx;
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: _objectSpread2({
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: PANEL_BORDER,
-      boxShadow: PANEL_SHADOW,
-      p: 3,
+    sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
       height: height
     }, sx),
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "50%",
-      height: 24,
-      sx: {
+      height: 20,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 0.5
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "35%",
-      height: 16,
-      sx: {
-        mb: 2.5
-      }
+      height: 14,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
+        mb: 2
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
       variant: "rounded",
-      width: "100%",
-      height: height - 90
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        width: "100%"
+      }
     })]
   });
 };
@@ -16257,74 +16288,81 @@ var TableCardSkeleton = function TableCardSkeleton(_ref4) {
     _ref4$rowCount = _ref4.rowCount,
     rowCount = _ref4$rowCount === void 0 ? 5 : _ref4$rowCount;
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: PANEL_BORDER,
-      boxShadow: PANEL_SHADOW,
-      p: 3,
+    sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
       height: height
-    },
+    }),
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "40%",
-      height: 24,
-      sx: {
+      height: 20,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 0.5
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "30%",
-      height: 16,
-      sx: {
-        mb: 2.5
-      }
+      height: 14,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
+        mb: 2
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "100%",
-      height: 20,
+      height: 18,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
+        mb: 1.5,
+        flexShrink: 0
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
-        mb: 1.5
-      }
-    }), Array.from({
-      length: rowCount
-    }).map(function (_, index) {
-      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-        sx: {
-          display: "flex",
-          gap: 2,
-          mb: 1.5,
-          alignItems: "center"
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-          variant: "circular",
-          width: 36,
-          height: 36
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-          variant: "text",
-          width: "25%",
-          height: 20
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-          variant: "text",
-          width: "15%",
-          height: 20
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-          variant: "rounded",
-          width: "20%",
-          height: 8,
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      },
+      children: Array.from({
+        length: rowCount
+      }).map(function (_, index) {
+        return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
           sx: {
-            flex: 1
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-          variant: "text",
-          width: "10%",
-          height: 20
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-          variant: "text",
-          width: "12%",
-          height: 20
-        })]
-      }, index);
+            display: "flex",
+            gap: 1.5,
+            mb: 1.5,
+            alignItems: "center",
+            minWidth: 0,
+            "& > *": {
+              flexShrink: 0
+            }
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+            variant: "circular",
+            width: 36,
+            height: 36
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+            variant: "rounded",
+            width: "22%",
+            height: 16
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+            variant: "rounded",
+            width: "14%",
+            height: 16
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+            variant: "rounded",
+            height: 8,
+            sx: {
+              flex: 1,
+              minWidth: 0
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+            variant: "rounded",
+            width: "10%",
+            height: 16
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+            variant: "rounded",
+            width: "12%",
+            height: 16
+          })]
+        }, index);
+      })
     })]
   });
 };
@@ -16332,45 +16370,46 @@ var DonutCardSkeleton = function DonutCardSkeleton(_ref5) {
   var _ref5$height = _ref5.height,
     height = _ref5$height === void 0 ? 430 : _ref5$height;
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: PANEL_BORDER,
-      boxShadow: PANEL_SHADOW,
-      p: 3,
-      height: height,
-      display: "flex",
-      flexDirection: "column"
-    },
+    sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
+      height: height
+    }),
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "45%",
-      height: 24,
-      sx: {
+      height: 20,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 0.5
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-      variant: "text",
+      variant: "rounded",
       width: "35%",
-      height: 16,
-      sx: {
+      height: 14,
+      sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
         mb: 2
-      }
+      })
     }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
         display: "flex",
         flex: 1,
+        minHeight: 0,
         alignItems: "center",
         justifyContent: "center",
-        gap: 4
+        gap: 2,
+        overflow: "hidden"
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
         variant: "circular",
-        width: 160,
-        height: 160
+        sx: {
+          width: 140,
+          height: 140,
+          flexShrink: 0,
+          maxWidth: "45%"
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
-          flex: 1
+          flex: 1,
+          minWidth: 0,
+          overflow: "hidden"
         },
         children: Array.from({
           length: 4
@@ -16380,16 +16419,23 @@ var DonutCardSkeleton = function DonutCardSkeleton(_ref5) {
               display: "flex",
               alignItems: "center",
               gap: 1,
-              mb: 1.5
+              mb: 1.5,
+              minWidth: 0
             },
             children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
               variant: "circular",
               width: 10,
-              height: 10
+              height: 10,
+              sx: {
+                flexShrink: 0
+              }
             }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-              variant: "text",
-              width: "60%",
-              height: 18
+              variant: "rounded",
+              width: "75%",
+              height: 14,
+              sx: {
+                minWidth: 0
+              }
             })]
           }, index);
         })