@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/{chunk-KF2Y7HO3.js → chunk-DZXNYLVG.js}

@@ -1,17 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-var _chunkAIY6222Qjs = require('./chunk-AIY6222Q.js');
-
-
-var _chunkFN5YL4BKjs = require('./chunk-FN5YL4BK.js');
-
-// src/components/charts/ChartWidget/ChartWidget.tsx
-var _material = require('@mui/material');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/charts/ChartWidget/ChartWidget.tsx
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _Stack = require('@mui/material/Stack'); var _Stack2 = _interopRequireDefault(_Stack);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+var _styles = require('@mui/material/styles');
 var _xcharts = require('@mui/x-charts');
 var _bytesize = require('byte-size'); var _bytesize2 = _interopRequireDefault(_bytesize);
 var _datefns = require('date-fns');
 var _jsxruntime = require('react/jsx-runtime');
-var Chart = _material.styled.call(void 0, (0, _material.Box))(() => ({
+var Chart = _styles.styled.call(void 0, (0, _Box2.default))(() => ({
   height: 200
 }));
 var ChartWidget = ({
@@ -20,10 +16,10 @@ var ChartWidget = ({
   history,
   formatValue = (value2) => _bytesize2.default.call(void 0, value2 || 0).toString()
 }) => {
-  const theme = _material.useTheme.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { spacing: 1, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "caption", color: "text.secondary", children: title }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { fontWeight: "bold", children: value }),
+  const theme = _styles.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Stack2.default, { spacing: 1, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "caption", color: "text.secondary", children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { fontWeight: "bold", children: value }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Chart, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _xcharts.LineChart,
       {
@@ -78,213 +74,14 @@ var ChartWidget = ({
   ] });
 };
 
-// src/components/charts/MetricsChart/MetricsChart.tsx
-
-
-var _hooks = require('@mui/x-charts/hooks');
-
-
-// src/components/charts/MetricsChart/PeriodSelect.tsx
-
-
-var options = [
-  /**
-   * TODO: Enable the options below when the backend supports them
-   */
-  // { value: 'hour', label: 'Last hour' },
-  // { value: 'day', label: '24 hours' },
-  { value: "week", label: "1 week" },
-  { value: "month", label: "1 month" }
-];
-var PeriodSelect = ({ value, onChange }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _material.TextField,
-  {
-    select: true,
-    size: "small",
-    value,
-    defaultValue: options[0].value,
-    onChange: (e) => _optionalChain([onChange, 'optionalCall', _4 => _4(e.target.value)]),
-    children: options.map(({ value: value2, label }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.MenuItem, { value: value2, children: label }, value2))
-  }
-);
-
-// src/components/charts/MetricsChart/MetricsChart.tsx
-var _react = require('react');
-
-var mapPeriodToFromDate = (period = "month") => {
-  const date = /* @__PURE__ */ new Date();
-  if (period === "hour") {
-    return _datefns.subHours.call(void 0, date, 1);
-  }
-  if (period === "day") {
-    return _datefns.subHours.call(void 0, date, 24);
-  }
-  if (period === "week") {
-    return _datefns.startOfDay.call(void 0, _datefns.subWeeks.call(void 0, date, 1));
-  }
-  return _datefns.startOfDay.call(void 0, _datefns.subMonths.call(void 0, date, 1));
-};
-var Chart2 = _material.styled.call(void 0, (0, _xcharts.LineChart))({
-  height: 320,
-  marginBottom: 16
-});
-var NoDataRect = _material.styled.call(void 0, "rect")({
-  fill: _chunkFN5YL4BKjs.deploymentSurfaceTokens.highlightBg
-});
-var LoadingText = _material.styled.call(void 0, "text")(({ theme }) => ({
-  stroke: "none",
-  fill: theme.palette.text.primary,
-  shapeRendering: "crispEdges",
-  textAnchor: "middle",
-  dominantBaseline: "middle"
-}));
-var MetricsChart = ({ history = [] }) => {
-  const theme = _material.useTheme.call(void 0, );
-  const [period, setPeriod] = _react.useState.call(void 0, "week");
-  const periodFrom = _react.useMemo.call(void 0, () => mapPeriodToFromDate(period), [period]);
-  const periodHistory = _react.useMemo.call(void 0, 
-    () => history.filter((record) => record.recordTime > periodFrom),
-    [history, periodFrom]
-  );
-  const total = _react.useMemo.call(void 0, 
-    () => periodHistory.reduce(
-      (acc, record) => ({
-        gets: acc.gets + record.gets,
-        puts: acc.puts + record.puts,
-        storedBytes: acc.storedBytes + record.storedBytes,
-        transferredBytes: acc.transferredBytes + record.transferredBytes
-      }),
-      { gets: 0, puts: 0, storedBytes: 0, transferredBytes: 0 }
-    ),
-    [periodHistory]
-  );
-  const NoDataOverlay = () => {
-    const yScale = _hooks.useYScale.call(void 0, );
-    const { left, width, height } = _hooks.useDrawingArea.call(void 0, );
-    const [, top] = yScale.range();
-    const padding = { top: 8, bottom: 8, left: 20, right: 20 };
-    const text = "No data for selected period";
-    const textWidth = 211;
-    const textHeight = 24;
-    const backgroundWidth = textWidth + padding.left + padding.right;
-    const backgroundHeight = textHeight + padding.top + padding.bottom;
-    const rectX = left + (width - backgroundWidth) / 2;
-    const rectY = top + (height - backgroundHeight) / 2;
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NoDataRect, { x: rectX, y: rectY, width: backgroundWidth, height: backgroundHeight }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingText, { style: { ...theme.typography.subtitle1 }, x: left + width / 2, y: top + height / 2, children: text })
-    ] });
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Card, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CardHeader, { title: "GET / PUT Requests", action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PeriodSelect, { value: period, onChange: setPeriod }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.CardMedia, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Chart2,
-        {
-          skipAnimation: true,
-          dataset: periodHistory || [],
-          axisHighlight: { x: "none", y: "none" },
-          grid: { horizontal: true, vertical: false },
-          margin: { top: 10, right: 20, bottom: 40, left: 40 },
-          colors: [theme.palette.primary.main, theme.palette.success.main],
-          slots: {
-            noDataOverlay: NoDataOverlay
-          },
-          slotProps: {
-            noDataOverlay: {
-              style: {
-                ...theme.typography.h4
-              }
-            }
-          },
-          yAxis: periodHistory.length ? [
-            {
-              min: periodHistory.length ? void 0 : 0,
-              max: periodHistory.length ? void 0 : 100,
-              tickNumber: periodHistory.length ? void 0 : 5,
-              disableLine: true,
-              disableTicks: true,
-              tickLabelStyle: {
-                fontSize: 10
-              }
-            }
-          ] : [],
-          xAxis: [
-            {
-              dataKey: "recordTime",
-              min: periodFrom,
-              max: /* @__PURE__ */ new Date(),
-              disableLine: false,
-              disableTicks: false,
-              valueFormatter: (date) => _datefns.format.call(void 0, date, "do MMM"),
-              tickMinStep: 3600 * 1e3 * 24,
-              // min step: 24h
-              tickLabelStyle: {
-                fontSize: 10,
-                transform: "translate(-16px, 16px) rotate(-30deg)"
-              }
-            }
-          ],
-          series: [
-            {
-              curve: "linear",
-              dataKey: "gets",
-              showMark: false
-            },
-            {
-              curve: "linear",
-              dataKey: "puts",
-              showMark: false
-            }
-          ]
-        }
-      ),
-      periodHistory.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 2, marginY: 3, justifyContent: "center", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme.palette.primary.main } }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: "Get" })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme.palette.success.main } }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: "Put" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.CardMedia, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { flexItem: true }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 2, padding: 2, children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "GET Requests per account" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: total.gets })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "PUT Requests per account" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: total.puts })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "Total Consumed per account" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAIY6222Qjs.BytesSize, { bytes: total.transferredBytes }) })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "Total Stored per account" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAIY6222Qjs.BytesSize, { bytes: total.storedBytes }) })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+var _react = require('react');
 
-
-
-
-
-
-
-
-
-
+var _Card = require('@mui/material/Card'); var _Card2 = _interopRequireDefault(_Card);
+var _CardHeader = require('@mui/material/CardHeader'); var _CardHeader2 = _interopRequireDefault(_CardHeader);
+var _CardMedia = require('@mui/material/CardMedia'); var _CardMedia2 = _interopRequireDefault(_CardMedia);
+var _CircularProgress = require('@mui/material/CircularProgress'); var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
+var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
 
 
@@ -292,24 +89,26 @@ var MetricsChart = ({ history = [] }) => {
 
 
 // src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
+var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequireDefault(_MenuItem);
+var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
 
-
-var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _material.TextField,
+var TimeRangeSelect = ({ options, value, onChange }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _TextField2.default,
   {
     select: true,
     size: "small",
-    value: _nullishCoalesce(value, () => ( (options2.length > 0 ? options2[0].value : ""))),
-    onChange: (e) => _optionalChain([onChange, 'optionalCall', _5 => _5(e.target.value)]),
+    value: _nullishCoalesce(value, () => ( (options.length > 0 ? options[0].value : ""))),
+    onChange: (e) => _optionalChain([onChange, 'optionalCall', _4 => _4(e.target.value)]),
     "aria-label": "Time range selector",
     sx: { minWidth: 120 },
-    children: options2.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.MenuItem, { value: option.value, children: option.label }, option.value))
+    children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { value: option.value, children: option.label }, option.value))
   }
 );
 
 // src/components/charts/TimeSeriesGraph/SummaryStats.tsx
 
 
+
 var formatSummaryValue = (value, unit) => {
   const displayValue = typeof value === "number" ? value.toLocaleString() : value;
   return unit ? `${displayValue} ${unit}` : displayValue;
@@ -319,7 +118,7 @@ var SummaryStats = ({ items }) => {
     return null;
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.Stack,
+    _Stack2.default,
     {
       direction: "row",
       spacing: 3,
@@ -329,15 +128,15 @@ var SummaryStats = ({ items }) => {
       role: "list",
       "aria-label": "Summary statistics",
       children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _material.Stack,
+        _Stack2.default,
         {
           direction: "row",
           alignItems: "center",
           spacing: 1,
           role: "listitem",
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: item.label }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
           ]
         },
         item.label
@@ -348,11 +147,11 @@ var SummaryStats = ({ items }) => {
 
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
 
-var ChartContainer = _material.styled.call(void 0, (0, _material.Box))({
+var ChartContainer = _styles.styled.call(void 0, (0, _Box2.default))({
   position: "relative",
   height: 320
 });
-var LoadingOverlay = _material.styled.call(void 0, (0, _material.Box))(({ theme }) => ({
+var LoadingOverlay = _styles.styled.call(void 0, (0, _Box2.default))(({ theme }) => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -362,7 +161,7 @@ var LoadingOverlay = _material.styled.call(void 0, (0, _material.Box))(({ theme
   zIndex: 1,
   borderRadius: theme.shape.borderRadius
 }));
-var LegendDot = _material.styled.call(void 0, _material.Box, {
+var LegendDot = _styles.styled.call(void 0, _Box2.default, {
   shouldForwardProp: (prop) => prop !== "dotColor"
 })(({ dotColor }) => ({
   width: 14,
@@ -418,7 +217,7 @@ var TimeSeriesGraph = ({
   loading = false,
   xAxisFormat
 }) => {
-  const theme = _material.useTheme.call(void 0, );
+  const theme = _styles.useTheme.call(void 0, );
   const [hiddenSeries, setHiddenSeries] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
   const dataset = _react.useMemo.call(void 0, () => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
   const visibleSeries = _react.useMemo.call(void 0, 
@@ -451,7 +250,7 @@ var TimeSeriesGraph = ({
   );
   const hasData = dataset.length > 0;
   const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
-  const headerActionElement = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+  const headerActionElement = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Stack2.default, { direction: "row", spacing: 1, alignItems: "center", children: [
     headerAction,
     timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       TimeRangeSelect,
@@ -464,13 +263,13 @@ var TimeSeriesGraph = ({
   ] });
   const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _material.Card,
+    _Card2.default,
     {
       "aria-label": title ? `Line chart showing ${title}` : "Line chart",
       role: "figure",
       children: [
         showHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.CardHeader,
+          _CardHeader2.default,
           {
             title,
             titleTypographyProps: {
@@ -480,9 +279,9 @@ var TimeSeriesGraph = ({
             action: headerActionElement
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.CardMedia, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardMedia2.default, { children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ChartContainer, { children: [
-            loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 40 }) }),
+            loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CircularProgress2.default, { size: 40 }) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _xcharts.LineChart,
               {
@@ -536,7 +335,7 @@ var TimeSeriesGraph = ({
             )
           ] }),
           series.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Stack,
+            _Stack2.default,
             {
               direction: "row",
               spacing: 2,
@@ -549,7 +348,7 @@ var TimeSeriesGraph = ({
               children: series.map((s) => {
                 const isHidden = hiddenSeries.has(s.name);
                 return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  _material.Stack,
+                  _Stack2.default,
                   {
                     direction: "row",
                     spacing: 1,
@@ -566,7 +365,7 @@ var TimeSeriesGraph = ({
                     "aria-label": `Toggle ${s.name} visibility`,
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendDot, { dotColor: s.color }),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: s.name })
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", children: s.name })
                     ]
                   },
                   s.name
@@ -576,7 +375,7 @@ var TimeSeriesGraph = ({
           )
         ] }),
         shouldShowSummary && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {}),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SummaryStats, { items: summaryItems })
         ] })
       ]
@@ -589,7 +388,5 @@ var TimeSeriesGraph = ({
 
 
 
-
-
-exports.ChartWidget = ChartWidget; exports.PeriodSelect = PeriodSelect; exports.MetricsChart = MetricsChart; exports.TimeRangeSelect = TimeRangeSelect; exports.SummaryStats = SummaryStats; exports.TimeSeriesGraph = TimeSeriesGraph;
-//# sourceMappingURL=chunk-KF2Y7HO3.js.map
+exports.ChartWidget = ChartWidget; exports.TimeRangeSelect = TimeRangeSelect; exports.SummaryStats = SummaryStats; exports.TimeSeriesGraph = TimeSeriesGraph;
+//# sourceMappingURL=chunk-DZXNYLVG.js.map

package/dist/chunk-DZXNYLVG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-DZXNYLVG.js","../src/components/charts/ChartWidget/ChartWidget.tsx","../src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx","../src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx","../src/components/charts/TimeSeriesGraph/SummaryStats.tsx"],"names":["value","jsx","Stack","styled","useTheme","LineChart"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-DZXNYLVG.js","sourcesContent":[null,"import { ReactNode } from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { LineChart } from '@mui/x-charts';\nimport size from 'byte-size';\nimport { format } from 'date-fns';\n\ntype ChartWidgetHistoryRecord = {\n  date: Date;\n  value: number;\n};\n\nexport type ChartWidgetProps = {\n  title: string;\n  value?: ReactNode;\n  history?: ChartWidgetHistoryRecord[];\n  formatValue?: (value: number) => string;\n};\n\nconst Chart = styled(Box)(() => ({\n  height: 200,\n}));\n\nexport const ChartWidget = ({\n  title,\n  value,\n  history,\n  formatValue = (value) => size(value || 0).toString(),\n}: ChartWidgetProps) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {title}\n      </Typography>\n      <Typography fontWeight=\"bold\">{value}</Typography>\n\n      <Chart>\n        <LineChart\n          dataset={history || []}\n          axisHighlight={{ x: 'none', y: 'none' }}\n          grid={{ horizontal: true, vertical: false }}\n          margin={{ top: 10, right: 20, bottom: 40, left: 40 }}\n          colors={[theme.palette.primary.main]}\n          slots={{\n            noDataOverlay: () => null,\n          }}\n          yAxis={[\n            {\n              dataKey: 'value',\n              disableLine: true,\n              disableTicks: true,\n              min: history?.length ? undefined : 0,\n              max: history?.length ? undefined : 100,\n              tickNumber: history?.length ? undefined : 5,\n              valueFormatter: (value) => formatValue(value || 0),\n              tickLabelStyle: {\n                fontSize: 10,\n              },\n            },\n          ]}\n          xAxis={[\n            {\n              dataKey: 'date',\n              min: history && Math.min(...history.map((record) => +record.date)),\n              max: history && Math.max(...history.map((record) => +record.date)),\n              disableLine: true,\n              disableTicks: true,\n              valueFormatter: (date) => format(date, 'do MMM'),\n              tickPlacement: 'end',\n              tickNumber: 1,\n\n              tickLabelStyle: {\n                fontSize: 10,\n                transform: 'translate(-16px, 16px) rotate(-30deg)',\n              },\n            },\n          ]}\n          series={[\n            {\n              curve: 'linear',\n              dataKey: 'value',\n              showMark: false,\n              valueFormatter: (value) => formatValue(value || 0),\n            },\n          ]}\n        />\n      </Chart>\n    </Stack>\n  );\n};\n","import { ReactNode, useCallback, useMemo, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardHeader from '@mui/material/CardHeader';\nimport CardMedia from '@mui/material/CardMedia';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Divider from '@mui/material/Divider';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { LineChart } from '@mui/x-charts';\nimport { format } from 'date-fns';\n\nimport { TimeRangeSelect, type TimeRangeOption } from './TimeRangeSelect';\nimport { SummaryStats, type SummaryItem } from './SummaryStats';\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\n/**\n * A single data point in a time series.\n * Use `null` for the value to represent missing/gap data — the line will break.\n */\nexport interface DataPoint {\n  /** Timestamp of the observation */\n  timestamp: Date;\n  /** Numeric value, or `null` to indicate a gap in the data */\n  value: number | null;\n}\n\n/**\n * Represents one line on the graph (a named data series).\n */\nexport interface DataSeries {\n  /** Unique display name for this series (shown in legend) */\n  name: string;\n  /** CSS color string for the line and legend indicator */\n  color: string;\n  /** Ordered array of data points */\n  data: DataPoint[];\n}\n\nexport interface TimeSeriesGraphProps {\n  /** Optional title displayed at the top-left of the graph card */\n  title?: string;\n  /**\n   * Array of data series to render. Each series becomes one line on the graph.\n   * There is no hardcoded limit on the number of series.\n   */\n  series: DataSeries[];\n  /**\n   * Configurable time range options for the dropdown selector.\n   * When omitted, the time range dropdown is not rendered.\n   */\n  timeRangeOptions?: TimeRangeOption[];\n  /** Currently selected time range value (controlled) */\n  selectedTimeRange?: string;\n  /** Callback invoked when the user picks a different time range */\n  onTimeRangeChange?: (value: string) => void;\n  /**\n   * Optional array of summary statistics displayed below the graph.\n   * When omitted or empty, the summary section is hidden.\n   */\n  summaryItems?: SummaryItem[];\n  /**\n   * Whether to show the summary statistics section.\n   * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.\n   */\n  showSummary?: boolean;\n  /**\n   * Optional header action element rendered to the right of the title\n   * (e.g., a secondary dropdown or filter control).\n   */\n  headerAction?: ReactNode;\n  /**\n   * When `true`, shows a loading overlay (spinner) over the graph area\n   * while the header remains visible and interactive.\n   */\n  loading?: boolean;\n  /**\n   * Override the x-axis date format string (date-fns format tokens).\n   * When omitted, the format is auto-detected from the data's time span:\n   * - <= 24 hours → `'HH:mm'`\n   * - > 24 hours  → `'do MMM'`\n   */\n  xAxisFormat?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Styled helpers\n// ---------------------------------------------------------------------------\n\nconst ChartContainer = styled(Box)({\n  position: 'relative',\n  height: 320,\n});\n\nconst LoadingOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'rgba(255, 255, 255, 0.7)',\n  zIndex: 1,\n  borderRadius: theme.shape.borderRadius,\n}));\n\nconst LegendDot = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'dotColor',\n})<{ dotColor: string }>(({ dotColor }) => ({\n  width: 14,\n  height: 14,\n  borderRadius: 4,\n  backgroundColor: dotColor,\n  flexShrink: 0,\n}));\n\n// ---------------------------------------------------------------------------\n// Utility functions\n// ---------------------------------------------------------------------------\n\n/**\n * Formats large Y-axis values into shorthand notation.\n * 1,000 → 1K, 1,000,000 → 1M, 1,000,000,000 → 1B\n */\nconst formatYAxisValue = (value: number): string => {\n  const absValue = Math.abs(value);\n  if (absValue >= 1_000_000_000) {\n    return `${(value / 1_000_000_000).toFixed(absValue % 1_000_000_000 === 0 ? 0 : 1)}B`;\n  }\n  if (absValue >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(absValue % 1_000_000 === 0 ? 0 : 1)}M`;\n  }\n  if (absValue >= 1_000) {\n    return `${(value / 1_000).toFixed(absValue % 1_000 === 0 ? 0 : 1)}K`;\n  }\n  return String(value);\n};\n\nconst TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1000;\n\n/**\n * Infers the appropriate x-axis date format string based on the time span of the data.\n * - Span <= 24 hours → `'HH:mm'` (e.g., \"14:30\")\n * - Span > 24 hours → `'do MMM'` (e.g., \"2nd Jan\")\n */\nexport const inferXAxisFormat = (\n  min: Date | undefined,\n  max: Date | undefined,\n): string => {\n  if (!min || !max) return 'do MMM';\n  const spanMs = max.getTime() - min.getTime();\n  return spanMs <= TWENTY_FOUR_HOURS_MS ? 'HH:mm' : 'do MMM';\n};\n\n/** A single row in the chart dataset — timestamp plus one field per series. */\ntype DatasetRow = Record<string, string | number | Date | null | undefined>;\n\n/**\n * Builds the unified dataset array that MUI X-Charts expects.\n * Each row is keyed by timestamp with one field per series.\n */\nconst buildDataset = (\n  series: DataSeries[],\n  hiddenSeries: Set<string>,\n): DatasetRow[] => {\n  // Collect all unique timestamps across all visible series\n  const timestampMap = new Map<number, DatasetRow>();\n\n  series.forEach((s) => {\n    if (hiddenSeries.has(s.name)) return;\n    s.data.forEach((dp) => {\n      const ts = dp.timestamp.getTime();\n      if (!timestampMap.has(ts)) {\n        timestampMap.set(ts, { timestamp: dp.timestamp } as DatasetRow);\n      }\n      timestampMap.get(ts)![s.name] = dp.value;\n    });\n  });\n\n  // Sort by timestamp ascending\n  return Array.from(timestampMap.values()).sort(\n    (a, b) => (a.timestamp as Date).getTime() - (b.timestamp as Date).getTime(),\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * A reusable time series graph component that displays one or more data lines\n * over a shared time axis. Supports configurable time range selection,\n * optional summary statistics, interactive legend toggling, crosshair tooltips,\n * and a loading state.\n *\n * Built on `@mui/x-charts` LineChart and the Cere Design System theme.\n *\n * @example\n * ```tsx\n * <TimeSeriesGraph\n *   title=\"Engagement over time\"\n *   series={[\n *     { name: 'Engagements', color: '#6750A4', data: engagementData },\n *     { name: 'Unique Streams', color: '#4caf50', data: streamData },\n *   ]}\n *   timeRangeOptions={[\n *     { label: 'Last hour', value: 'hour' },\n *     { label: '24 hours', value: 'day' },\n *     { label: '1 week', value: 'week' },\n *     { label: '1 month', value: 'month' },\n *   ]}\n *   selectedTimeRange=\"week\"\n *   onTimeRangeChange={(range) => fetchData(range)}\n *   summaryItems={[\n *     { label: 'Total Engagements', value: 11372 },\n *     { label: 'Daily Engagements', value: 156 },\n *   ]}\n * />\n * ```\n *\n * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)\n */\nexport const TimeSeriesGraph = ({\n  title,\n  series,\n  timeRangeOptions,\n  selectedTimeRange,\n  onTimeRangeChange,\n  summaryItems,\n  showSummary = true,\n  headerAction,\n  loading = false,\n  xAxisFormat,\n}: TimeSeriesGraphProps) => {\n  const theme = useTheme();\n  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());\n\n  // Build the MUI X-Charts dataset from visible series\n  const dataset = useMemo(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);\n\n  // Visible series (exclude hidden)\n  const visibleSeries = useMemo(\n    () => series.filter((s) => !hiddenSeries.has(s.name)),\n    [series, hiddenSeries],\n  );\n\n  // Colors array matching the order of visible series\n  const chartColors = useMemo(() => visibleSeries.map((s) => s.color), [visibleSeries]);\n\n  // Toggle a series' visibility\n  const handleLegendToggle = useCallback((seriesName: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev);\n      if (next.has(seriesName)) {\n        next.delete(seriesName);\n      } else {\n        next.add(seriesName);\n      }\n      return next;\n    });\n  }, []);\n\n  // Compute time bounds for the X-axis from visible data\n  const timeBounds = useMemo(() => {\n    if (dataset.length === 0) return { min: undefined, max: undefined };\n    const timestamps = dataset.map((row) => (row.timestamp as Date).getTime());\n    return {\n      min: new Date(Math.min(...timestamps)),\n      max: new Date(Math.max(...timestamps)),\n    };\n  }, [dataset]);\n\n  // Resolve the x-axis date format: explicit prop wins, otherwise auto-detect\n  const resolvedXAxisFormat = useMemo(\n    () => xAxisFormat ?? inferXAxisFormat(timeBounds.min, timeBounds.max),\n    [xAxisFormat, timeBounds.min, timeBounds.max],\n  );\n\n  // Determine whether we have data to display\n  const hasData = dataset.length > 0;\n\n  // Whether to render the summary section\n  const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;\n\n  // Build the header action area (time range + optional custom action)\n  const headerActionElement = (\n    <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n      {headerAction}\n      {timeRangeOptions && timeRangeOptions.length > 0 && (\n        <TimeRangeSelect\n          options={timeRangeOptions}\n          value={selectedTimeRange}\n          onChange={onTimeRangeChange}\n        />\n      )}\n    </Stack>\n  );\n\n  // Determine whether to show the header at all\n  const showHeader = !!title || !!headerAction || (timeRangeOptions && timeRangeOptions.length > 0);\n\n  return (\n    <Card\n      aria-label={title ? `Line chart showing ${title}` : 'Line chart'}\n      role=\"figure\"\n    >\n      {showHeader && (\n        <CardHeader\n          title={title}\n          titleTypographyProps={{\n            variant: 'subtitle1',\n            fontWeight: 500,\n          }}\n          action={headerActionElement}\n        />\n      )}\n\n      <CardMedia>\n        <ChartContainer>\n          {loading && (\n            <LoadingOverlay role=\"status\" aria-label=\"Loading chart data\">\n              <CircularProgress size={40} />\n            </LoadingOverlay>\n          )}\n\n          <LineChart\n            dataset={dataset}\n            axisHighlight={{ x: 'line', y: 'none' }}\n            grid={{ horizontal: true, vertical: false }}\n            margin={{ top: 10, right: 20, bottom: 40, left: 50 }}\n            colors={chartColors.length > 0 ? chartColors : [theme.palette.primary.main]}\n            slots={{\n              noDataOverlay: () => null,\n            }}\n            tooltip={{ trigger: hasData ? 'axis' : 'none' }}\n            yAxis={[\n              {\n                disableLine: true,\n                disableTicks: true,\n                min: hasData ? undefined : 0,\n                max: hasData ? undefined : 100,\n                tickNumber: hasData ? undefined : 5,\n                valueFormatter: (value: number) => formatYAxisValue(value || 0),\n                tickLabelStyle: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n            xAxis={[\n              {\n                dataKey: 'timestamp',\n                scaleType: 'time',\n                min: timeBounds.min,\n                max: timeBounds.max,\n                disableLine: true,\n                disableTicks: true,\n                valueFormatter: (date: Date) => format(date, resolvedXAxisFormat),\n                tickLabelStyle: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n            series={visibleSeries.map((s) => ({\n              curve: 'linear' as const,\n              dataKey: s.name,\n              label: s.name,\n              showMark: false,\n              connectNulls: false,\n            }))}\n            // Hide the built-in legend — we render a custom one below\n            slotProps={{\n              legend: { hidden: true },\n            }}\n          />\n        </ChartContainer>\n\n        {/* Custom interactive legend */}\n        {series.length > 0 && (\n          <Stack\n            direction=\"row\"\n            spacing={2}\n            justifyContent=\"center\"\n            paddingY={1}\n            flexWrap=\"wrap\"\n            useFlexGap\n            role=\"list\"\n            aria-label=\"Chart legend\"\n          >\n            {series.map((s) => {\n              const isHidden = hiddenSeries.has(s.name);\n              return (\n                <Stack\n                  key={s.name}\n                  direction=\"row\"\n                  spacing={1}\n                  alignItems=\"center\"\n                  role=\"listitem\"\n                  onClick={() => handleLegendToggle(s.name)}\n                  sx={{\n                    cursor: 'pointer',\n                    opacity: isHidden ? 0.4 : 1,\n                    transition: 'opacity 0.2s ease',\n                    userSelect: 'none',\n                  }}\n                  aria-pressed={!isHidden}\n                  aria-label={`Toggle ${s.name} visibility`}\n                >\n                  <LegendDot dotColor={s.color} />\n                  <Typography variant=\"body2\">{s.name}</Typography>\n                </Stack>\n              );\n            })}\n          </Stack>\n        )}\n      </CardMedia>\n\n      {/* Summary statistics */}\n      {shouldShowSummary && (\n        <>\n          <Divider />\n          <SummaryStats items={summaryItems!} />\n        </>\n      )}\n    </Card>\n  );\n};\n","import MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\n\n/**\n * Represents a single time range option in the dropdown.\n */\nexport interface TimeRangeOption {\n  /** Display label shown in the dropdown (e.g., \"1 week\") */\n  label: string;\n  /** Value identifier passed to the callback on selection */\n  value: string;\n}\n\nexport interface TimeRangeSelectProps {\n  /** Available time range options */\n  options: TimeRangeOption[];\n  /** Currently selected time range value */\n  value?: string;\n  /** Callback invoked when user selects a different time range */\n  onChange?: (value: string) => void;\n}\n\n/**\n * Configurable time range dropdown selector.\n * Renders a compact select field with the provided time range options.\n *\n * @example\n * ```tsx\n * <TimeRangeSelect\n *   options={[\n *     { label: 'Last hour', value: 'hour' },\n *     { label: '24 hours', value: 'day' },\n *     { label: '1 week', value: 'week' },\n *   ]}\n *   value=\"week\"\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport const TimeRangeSelect = ({ options, value, onChange }: TimeRangeSelectProps) => (\n  <TextField\n    select\n    size=\"small\"\n    value={value ?? (options.length > 0 ? options[0].value : '')}\n    onChange={(e) => onChange?.(e.target.value)}\n    aria-label=\"Time range selector\"\n    sx={{ minWidth: 120 }}\n  >\n    {options.map((option) => (\n      <MenuItem key={option.value} value={option.value}>\n        {option.label}\n      </MenuItem>\n    ))}\n  </TextField>\n);\n","import Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\n/**\n * Represents a single summary statistic item displayed below the graph.\n */\nexport interface SummaryItem {\n  /** Descriptive label (e.g., \"Total Engagements\") */\n  label: string;\n  /** Numeric or string value (e.g., \"13.72\" or 11372) */\n  value: string | number;\n  /** Optional unit suffix (e.g., \"K\", \"GB\", \"%\") */\n  unit?: string;\n}\n\nexport interface SummaryStatsProps {\n  /** Array of summary items to display */\n  items: SummaryItem[];\n}\n\n/**\n * Formats a summary value with its optional unit.\n */\nconst formatSummaryValue = (value: string | number, unit?: string): string => {\n  const displayValue = typeof value === 'number' ? value.toLocaleString() : value;\n  return unit ? `${displayValue} ${unit}` : displayValue;\n};\n\n/**\n * Renders a horizontal row of summary statistics below the graph.\n * Each item shows a label with its corresponding value and optional unit.\n *\n * Matches the Figma design layout with label in secondary text color\n * and value in bold heading typography.\n *\n * @example\n * ```tsx\n * <SummaryStats\n *   items={[\n *     { label: 'Total Engagements', value: 11372 },\n *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },\n *   ]}\n * />\n * ```\n */\nexport const SummaryStats = ({ items }: SummaryStatsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={3}\n      padding={2}\n      flexWrap=\"wrap\"\n      useFlexGap\n      role=\"list\"\n      aria-label=\"Summary statistics\"\n    >\n      {items.map((item) => (\n        <Stack\n          key={item.label}\n          direction=\"row\"\n          alignItems=\"center\"\n          spacing={1}\n          role=\"listitem\"\n        >\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {item.label}\n          </Typography>\n          <Typography variant=\"h5\" fontWeight={600}>\n            {formatSummaryValue(item.value, item.unit)}\n          </Typography>\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}

package/dist/{chunk-IE6GCHDI.mjs → chunk-GR52ENYI.mjs}

@@ -1,6 +1,6 @@
 import {
   fontFamilyMono
-} from "./chunk-PWF2NJDB.mjs";
+} from "./chunk-WC2TCWXK.mjs";
 
 // src/components/feedback/Chip.tsx
 import React from "react";
@@ -78,8 +78,9 @@ var StyledChip = styled(MuiChip, {
     "&:hover": { backgroundColor: hoverBackgroundColor }
   };
 });
-var Chip = React.forwardRef(function Chip2({ variant = "default", tone = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx(StyledChip, { ref, dsVariant: variant, dsTone: tone, ...props });
+var Chip = React.forwardRef(function Chip2({ variant, tone = "default", ...props }, ref) {
+  const resolvedVariant = tone === "onGradient" ? "default" : variant ?? "default";
+  return /* @__PURE__ */ jsx(StyledChip, { ref, dsVariant: resolvedVariant, dsTone: tone, ...props });
 });
 
 // src/components/feedback/StatusDot.tsx
@@ -258,11 +259,9 @@ var Tooltip2 = React5.forwardRef(function Tooltip3(props, ref) {
 });
 
 // src/components/feedback/Progress.tsx
-import {
-  LinearProgress,
-  CircularProgress,
-  styled as styled4
-} from "@mui/material";
+import LinearProgress from "@mui/material/LinearProgress";
+import CircularProgress from "@mui/material/CircularProgress";
+import { styled as styled4 } from "@mui/material/styles";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var StyledLinearProgress = styled4(LinearProgress)(({ theme }) => ({
   height: 4,
@@ -297,7 +296,7 @@ var Progress = ({
 // src/components/feedback/Alert.tsx
 import React6 from "react";
 import MuiAlert from "@mui/material/Alert";
-import { AlertTitle as MuiAlertTitle } from "@mui/material";
+import MuiAlertTitle from "@mui/material/AlertTitle";
 import MuiSnackbar from "@mui/material/Snackbar";
 import { styled as styled5 } from "@mui/material/styles";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -314,18 +313,13 @@ var Alert = React6.forwardRef(function Alert2({ severity = "info", title, childr
   ] });
 });
 var StyledSnackbar = styled5(MuiSnackbar)({});
-var StableFadeTransition = React6.forwardRef(
-  (props, ref) => {
-    return React6.cloneElement(props.children, {
-      ref,
-      style: {
-        ...props.children.props.style,
-        transition: "opacity 0.3s ease-in-out"
-      }
-    });
-  }
-);
-StableFadeTransition.displayName = "StableFadeTransition";
+var StableNoTransition = React6.forwardRef(({ in: inProp, onExited, children }, ref) => {
+  React6.useEffect(() => {
+    if (inProp === false) onExited?.(null);
+  }, [inProp, onExited]);
+  return React6.cloneElement(children, { ref });
+});
+StableNoTransition.displayName = "StableNoTransition";
 var Snackbar = React6.forwardRef(function Snackbar2({
   message,
   severity = "info",
@@ -370,7 +364,7 @@ var Snackbar = React6.forwardRef(function Snackbar2({
         }
         // Prevent scroll issues
       },
-      TransitionComponent: StableFadeTransition,
+      TransitionComponent: StableNoTransition,
       ...props,
       children: content
     }
@@ -379,7 +373,8 @@ var Snackbar = React6.forwardRef(function Snackbar2({
 
 // src/components/feedback/EmptyState.tsx
 import React7 from "react";
-import { Box as Box3, Typography as Typography2 } from "@mui/material";
+import Box3 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var EmptyState = React7.forwardRef(function EmptyState2({ title = "No items found", description, icon, action }, ref) {
   return /* @__PURE__ */ jsxs4(
@@ -417,7 +412,9 @@ var EmptyState = React7.forwardRef(function EmptyState2({ title = "No items foun
 
 // src/components/feedback/Loading.tsx
 import React8 from "react";
-import { Box as Box4, CircularProgress as CircularProgress2, Typography as Typography3 } from "@mui/material";
+import Box4 from "@mui/material/Box";
+import CircularProgress2 from "@mui/material/CircularProgress";
+import Typography3 from "@mui/material/Typography";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var Loading = React8.forwardRef(function Loading2({ message = "Loading...", size = 40, fullScreen = false }, ref) {
   const content = /* @__PURE__ */ jsxs5(
@@ -453,7 +450,9 @@ var Loading = React8.forwardRef(function Loading2({ message = "Loading...", size
 });
 
 // src/components/feedback/AppLoading.tsx
-import { Box as Box5, CircularProgress as CircularProgress3, Typography as Typography4 } from "@mui/material";
+import Box5 from "@mui/material/Box";
+import CircularProgress3 from "@mui/material/CircularProgress";
+import Typography4 from "@mui/material/Typography";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var AppLoading = ({
   message = "Loading...",
@@ -502,9 +501,7 @@ var AppLoading = ({
 
 // src/components/feedback/CircularProgress.tsx
 import React9 from "react";
-import {
-  CircularProgress as MuiCircularProgress
-} from "@mui/material";
+import MuiCircularProgress from "@mui/material/CircularProgress";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var CircularProgress4 = React9.forwardRef(
   function CircularProgress5({ size = 40, thickness = 4, ...props }, ref) {
@@ -527,4 +524,4 @@ export {
   AppLoading,
   CircularProgress4 as CircularProgress
 };
-//# sourceMappingURL=chunk-IE6GCHDI.mjs.map
+//# sourceMappingURL=chunk-GR52ENYI.mjs.map