@moderneinc/design-system-components 6.0.0 → 6.0.1-next.18d0a9

package/dist/index.js

@@ -9,8 +9,9 @@ var MuiAvatar = require('@mui/material/Avatar');
 var SvgIcon = require('@mui/material/SvgIcon');
 var Alert = require('@mui/material/Alert');
 var ButtonBase = require('@mui/material/ButtonBase');
-var React = require('react');
+var lucideReact = require('lucide-react');
 var IconButton = require('@mui/material/IconButton');
+var React = require('react');
 var Breadcrumbs = require('@mui/material/Breadcrumbs');
 var Link = require('@mui/material/Link');
 var CircularProgress = require('@mui/material/CircularProgress');
@@ -38,6 +39,7 @@ var PickersCalendarHeader = require('@mui/x-date-pickers/PickersCalendarHeader')
 var PickersShortcuts = require('@mui/x-date-pickers/PickersShortcuts');
 var DateRangePicker = require('@mui/x-date-pickers-pro/DateRangePicker');
 var DateRangePickerDay = require('@mui/x-date-pickers-pro/DateRangePickerDay');
+var dateFns = require('date-fns');
 var LinearProgress = require('@mui/material/LinearProgress');
 var Paper = require('@mui/material/Paper');
 var Stack = require('@mui/material/Stack');
@@ -359,7 +361,7 @@ const ActivityDot = styles.styled('div')(({ color }) => ({
  *   field: 'activity',
  *   headerName: '',
  *   width: 34,
- *   renderHeader: () => <ModActivityHeader size="condensed" color="commitJob" />,
+ *   renderHeader: () => <ModActivityHeader size="compact" color="commitJob" />,
  *   renderCell: (params) => (
  *     <ModActivityIndicatorCell
  *       event={params.row.eventType}
@@ -457,499 +459,6 @@ const ModActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 };
 ModActivityIndicatorCell.displayName = 'ModActivityIndicatorCell';
 
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-  return false;
-};
-
-const LucideContext = React.createContext({});
-const useLucideContext = () => React.useContext(LucideContext);
-
-const Icon = React.forwardRef(
-  ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
-    const {
-      size: contextSize = 24,
-      strokeWidth: contextStrokeWidth = 2,
-      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
-      color: contextColor = "currentColor",
-      className: contextClass = ""
-    } = useLucideContext() ?? {};
-    const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
-    return React.createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size ?? contextSize ?? defaultAttributes.width,
-        height: size ?? contextSize ?? defaultAttributes.height,
-        stroke: color ?? contextColor,
-        strokeWidth: calculatedStrokeWidth,
-        className: mergeClasses("lucide", contextClass, className),
-        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => React.createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
-);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const createLucideIcon = (iconName, iconNode) => {
-  const Component = React.forwardRef(
-    ({ className, ...props }, ref) => React.createElement(Icon, {
-      ref,
-      iconNode,
-      className: mergeClasses(
-        `lucide-${toKebabCase(toPascalCase(iconName))}`,
-        `lucide-${iconName}`,
-        className
-      ),
-      ...props
-    })
-  );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
-};
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$n = [
-  ["path", { d: "M12 5v14", key: "s699le" }],
-  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
-];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$n);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$m = [
-  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
-  ["path", { d: "M12 19V5", key: "x0mq9r" }]
-];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$m);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$l = [
-  [
-    "path",
-    {
-      d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",
-      key: "3c2336"
-    }
-  ],
-  ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
-  ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
-];
-const BadgeInfo = createLucideIcon("badge-info", __iconNode$l);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$k = [
-  ["path", { d: "M8 2v3", key: "1ioesn" }],
-  ["path", { d: "M16 2v3", key: "otl347" }],
-  ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", key: "h1oib" }],
-  ["path", { d: "M3 9h18", key: "1pudct" }],
-  ["path", { d: "M8 13h.01", key: "1sbv64" }],
-  ["path", { d: "M12 13h.01", key: "y0uutt" }],
-  ["path", { d: "M16 13h.01", key: "wip0gl" }],
-  ["path", { d: "M8 17h.01", key: "p3bg7i" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }],
-  ["path", { d: "M16 17h.01", key: "ql8jdd" }]
-];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$k);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$g = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$g);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$f = [
-  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
-  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
-];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$f);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$e = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
-  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
-];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$e);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$d = [
-  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
-  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
-];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$d);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$c = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }]
-];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$c);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$b = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "M15 3v18", key: "14nvp0" }]
-];
-const Columns3 = createLucideIcon("columns-3", __iconNode$b);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$a = [
-  ["path", { d: "M2 5h20", key: "1fs1ex" }],
-  ["path", { d: "M6 12h12", key: "8npq4p" }],
-  ["path", { d: "M9 19h6", key: "456am0" }]
-];
-const ListFilter = createLucideIcon("list-filter", __iconNode$a);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$9 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$9);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$8 = [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
-];
-const Plus = createLucideIcon("plus", __iconNode$8);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$7 = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-];
-const Search = createLucideIcon("search", __iconNode$7);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$6 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
-];
-const SquareCheck = createLucideIcon("square-check", __iconNode$6);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$5 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M8 12h8", key: "1wcyev" }]
-];
-const SquareMinus = createLucideIcon("square-minus", __iconNode$5);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$4 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
-];
-const Square = createLucideIcon("square", __iconNode$4);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$3 = [
-  ["path", { d: "M10 11v6", key: "nco0om" }],
-  ["path", { d: "M14 11v6", key: "outv1u" }],
-  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
-  ["path", { d: "M3 6h18", key: "d0wm0j" }],
-  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
-];
-const Trash2 = createLucideIcon("trash-2", __iconNode$3);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$2 = [
-  [
-    "path",
-    {
-      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
-      key: "wmoenq"
-    }
-  ],
-  ["path", { d: "M12 9v4", key: "juzpu7" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }]
-];
-const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$1 = [
-  ["path", { d: "M12 20h.01", key: "zekei9" }],
-  ["path", { d: "M8.5 16.429a5 5 0 0 1 7 0", key: "1bycff" }],
-  ["path", { d: "M5 12.859a10 10 0 0 1 5.17-2.69", key: "1dl1wf" }],
-  ["path", { d: "M19 12.859a10 10 0 0 0-2.007-1.523", key: "4k23kn" }],
-  ["path", { d: "M2 8.82a15 15 0 0 1 4.177-2.643", key: "1grhjp" }],
-  ["path", { d: "M22 8.82a15 15 0 0 0-11.288-3.764", key: "z3jwby" }],
-  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-];
-const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-const X = createLucideIcon("x", __iconNode);
-
 const neutralSmallShadow = `${designSystemTokens.shadows.neutral.small.x}px ${designSystemTokens.shadows.neutral.small.y}px ${designSystemTokens.shadows.neutral.small.blur}px ${designSystemTokens.shadows.neutral.small.spread}px ${designSystemTokens.shadows.neutral.small.shadow}`;
 const intentColors$1 = {
     success: designSystemTokens.semanticColors.status.success,
@@ -1022,11 +531,11 @@ const StyledAlert$2 = styles.styled(Alert, {
     };
 });
 const iconMap = {
-    success: jsxRuntime.jsx(CircleCheckBig, { size: 24 }),
-    error: jsxRuntime.jsx(CircleAlert, { size: 24 }),
-    warning: jsxRuntime.jsx(TriangleAlert, { size: 24 }),
-    offline: jsxRuntime.jsx(WifiOff, { size: 24 }),
-    info: jsxRuntime.jsx(BadgeInfo, { size: 24 }),
+    success: jsxRuntime.jsx(lucideReact.CircleCheckBig, { size: 24 }),
+    error: jsxRuntime.jsx(lucideReact.CircleAlert, { size: 24 }),
+    warning: jsxRuntime.jsx(lucideReact.TriangleAlert, { size: 24 }),
+    offline: jsxRuntime.jsx(lucideReact.WifiOff, { size: 24 }),
+    info: jsxRuntime.jsx(lucideReact.BadgeInfo, { size: 24 }),
 };
 /**
  * ModAlert - Alert component for displaying contextual status messages
@@ -1134,7 +643,7 @@ const ModBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         return null;
     }
     const closeIconColor = type === 'filled' ? designSystemTokens.semanticColors.surfaces.white : intentColors[intent].default;
-    return (jsxRuntime.jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsxRuntime.jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 ModBanner.displayName = 'ModBanner';
 
@@ -1200,7 +709,7 @@ function ModBreadcrumbLink({ current = false, children, component, ...props }) {
  * ```
  */
 function ModBreadcrumbs({ children, className }) {
-    return (jsxRuntime.jsx(StyledBreadcrumbs, { separator: jsxRuntime.jsx(ChevronRight, { size: 10.67, color: designSystemTokens.semanticColors.icons.utility }), className: className, "aria-label": "breadcrumb", children: children }));
+    return (jsxRuntime.jsx(StyledBreadcrumbs, { separator: jsxRuntime.jsx(lucideReact.ChevronRight, { size: 10.67, color: designSystemTokens.semanticColors.icons.utility }), className: className, "aria-label": "breadcrumb", children: children }));
 }
 
 // Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
@@ -1862,18 +1371,11 @@ const StyledCheckbox = styles.styled(Checkbox, {
  */
 const ModCheckbox = ({ size = 'medium', label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }) => {
     // Identifies ModCheckbox instances to consumer stylesheets.
-    //
-    // `neo-checkbox` ships alongside for one major. Consumers select on these
-    // names from their own CSS, where nothing type-checks the string — moderne-ui
-    // has `'&:not(.neo-checkbox)'`, which on a bare rename would stop excluding
-    // anything and silently start overriding every checkbox. Remove the legacy
-    // name once consumers have migrated.
-    const ownClassNames = 'mod-checkbox neo-checkbox';
-    const combinedClassName = className ? `${ownClassNames} ${className}` : ownClassNames;
+    const combinedClassName = className ? `mod-checkbox ${className}` : 'mod-checkbox';
     // Default icons (sized via CSS on the SVG); overridable per instance
-    const defaultIcon = icon || jsxRuntime.jsx(Square, {});
-    const defaultCheckedIcon = checkedIcon || jsxRuntime.jsx(SquareCheck, {});
-    const defaultIndeterminateIcon = indeterminateIcon || jsxRuntime.jsx(SquareMinus, {});
+    const defaultIcon = icon || jsxRuntime.jsx(lucideReact.Square, {});
+    const defaultCheckedIcon = checkedIcon || jsxRuntime.jsx(lucideReact.SquareCheck, {});
+    const defaultIndeterminateIcon = indeterminateIcon || jsxRuntime.jsx(lucideReact.SquareMinus, {});
     // If no label, return just the checkbox
     if (!label && !helperText) {
         return (jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
@@ -2251,7 +1753,7 @@ sx: _sx, theme: _theme, ...props }) => {
     const hasChanges = Object.keys(columnVisibilityModel).length > 0;
     return (jsxRuntime.jsx(PanelWrapper, { ...props, children: jsxRuntime.jsxs(PanelContent, { sx: { width: 320 }, children: [showSearch && (jsxRuntime.jsx(StyledSearchField, { placeholder: "Search", variant: "standard", value: searchText, onChange: e => setSearchText(e.target.value), slotProps: {
                         input: {
-                            startAdornment: (jsxRuntime.jsx(InputAdornment, { position: "start", children: jsxRuntime.jsx(Search, {}) })),
+                            startAdornment: (jsxRuntime.jsx(InputAdornment, { position: "start", children: jsxRuntime.jsx(lucideReact.Search, {}) })),
                             disableUnderline: true,
                         },
                     } })), filteredColumns.map(column => {
@@ -2354,11 +1856,11 @@ const Shortcut = styles.styled('span')(({ theme }) => ({
  * // Disabled state
  * <ModMenuItem disabled>Disabled item</ModMenuItem>
  *
- * // As an anchor — middle-click/right-click open in a new tab
- * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
+ * // As an anchor — `component="a"` is required, see #722
+ * <ModMenuItem component="a" href="/api-explorer">API explorer</ModMenuItem>
  *
  * // External link
- * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ * <ModMenuItem component="a" href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
  *   Documentation
  * </ModMenuItem>
  *
@@ -2375,7 +1877,7 @@ ModMenuItem.displayName = 'ModMenuItem';
  * Custom chevron icon for select
  * Must accept props from MUI Select to work correctly
  */
-const ChevronDownIcon = (props) => (jsxRuntime.jsx(ChevronDown, { ...props, size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.typography.input.default, style: { ...props.style } }));
+const ChevronDownIcon = (props) => (jsxRuntime.jsx(lucideReact.ChevronDown, { ...props, size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.typography.input.default, style: { ...props.style } }));
 /**
  * Styled Select component with design system styling
  */
@@ -2453,11 +1955,11 @@ ModSelect.displayName = 'ModSelect';
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
  */
-const ModDataGridFilterPanelAddIcon = () => (jsxRuntime.jsx(Plus, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.buttons.tertiary.default }));
+const ModDataGridFilterPanelAddIcon = () => (jsxRuntime.jsx(lucideReact.Plus, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.buttons.tertiary.default }));
 ModDataGridFilterPanelAddIcon.displayName = 'ModDataGridFilterPanelAddIcon';
-const ModDataGridFilterPanelDeleteIcon = () => (jsxRuntime.jsx(X, { size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.icons.default }));
+const ModDataGridFilterPanelDeleteIcon = () => (jsxRuntime.jsx(lucideReact.X, { size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.icons.default }));
 ModDataGridFilterPanelDeleteIcon.displayName = 'ModDataGridFilterPanelDeleteIcon';
-const ModDataGridFilterPanelRemoveAllIcon = () => (jsxRuntime.jsx(Trash2, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.buttons.tertiary.default }));
+const ModDataGridFilterPanelRemoveAllIcon = () => (jsxRuntime.jsx(lucideReact.Trash2, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.buttons.tertiary.default }));
 ModDataGridFilterPanelRemoveAllIcon.displayName = 'ModDataGridFilterPanelRemoveAllIcon';
 /**
  * Base styled GridFilterPanel with design system styling
@@ -2631,6 +2133,48 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
     },
 });
 StyledGridFilterPanel.displayName = 'StyledGridFilterPanel';
+/**
+ * ModSelect, typed for the DataGrid `baseSelect` slot.
+ *
+ * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
+ * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
+ * signatures — structurally incompatible, behaviourally identical. Asserted
+ * once here rather than at every call site; #721 tracks replacing the assertion
+ * with a real adapter. Intersected rather than replaced so direct consumers keep
+ * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
+ * and the `SelectChangeEvent` signature.
+ */
+const ModDataGridSelect = ModSelect;
+/**
+ * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
+ *
+ * A styled version of MUI's GridFilterPanel that applies design system tokens.
+ * The per-row delete icon uses Lucide Trash2 internally.
+ *
+ * For footer button icons ("Add filter" and "Remove all"), you must also pass the icon components
+ * to the DataGrid's slots prop.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   ModDataGridFilterPanel,
+ *   FilterPanelAddIcon,
+ *   FilterPanelDeleteIcon,
+ *   FilterPanelRemoveAllIcon
+ * } from '@moderneinc/design-system-components'
+ *
+ * <DataGridPro
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     filterPanel: ModDataGridFilterPanel,
+ *     filterPanelAddIcon: FilterPanelAddIcon,
+ *     filterPanelDeleteIcon: FilterPanelDeleteIcon,
+ *     filterPanelRemoveAllIcon: FilterPanelRemoveAllIcon,
+ *   }}
+ * />
+ * ```
+ */
 const ModDataGridFilterPanel = (props) => {
     return jsxRuntime.jsx(StyledGridFilterPanel, { ...props });
 };
@@ -2642,13 +2186,13 @@ ModDataGridFilterPanel.displayName = 'ModDataGridFilterPanel';
  * Use these with DataGrid's slots API to replace default sort indicators.
  */
 function SortedDescendingIcon() {
-    return jsxRuntime.jsx(ArrowDown, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
+    return jsxRuntime.jsx(lucideReact.ArrowDown, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
 }
 function SortedAscendingIcon() {
-    return jsxRuntime.jsx(ArrowUp, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
+    return jsxRuntime.jsx(lucideReact.ArrowUp, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
 }
 function UnsortedIcon() {
-    return jsxRuntime.jsx(ChevronsUpDown, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
+    return jsxRuntime.jsx(lucideReact.ChevronsUpDown, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
 }
 
 /**
@@ -2810,7 +2354,7 @@ ModDataGrid.displayName = 'ModDataGrid';
  * ```
  */
 function ModDataGridColumnsButton() {
-    return (jsxRuntime.jsx(xDataGrid.ColumnsPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(Columns3, { size: 16, color: designSystemTokens.semanticColors.buttons.primary.default }), "Columns"] }) }) }));
+    return (jsxRuntime.jsx(xDataGrid.ColumnsPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(lucideReact.Columns3, { size: 16, color: designSystemTokens.semanticColors.buttons.primary.default }), "Columns"] }) }) }));
 }
 ModDataGridColumnsButton.displayName = 'ModDataGridColumnsButton';
 
@@ -2952,7 +2496,7 @@ function ModDataGridFiltersButton() {
     const filterModel = xDataGrid.useGridSelector(apiRef, xDataGrid.gridFilterModelSelector);
     const activeFilters = filterModel.items.filter(item => item.value != null && item.value !== '');
     const filterCount = activeFilters.length;
-    return (jsxRuntime.jsx(xDataGrid.FilterPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(ListFilter, { size: 16, color: designSystemTokens.semanticColors.buttons.primary.default }), "Filters", filterCount > 0 && (jsxRuntime.jsx(ModTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
+    return (jsxRuntime.jsx(xDataGrid.FilterPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(lucideReact.ListFilter, { size: 16, color: designSystemTokens.semanticColors.buttons.primary.default }), "Filters", filterCount > 0 && (jsxRuntime.jsx(ModTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
 }
 ModDataGridFiltersButton.displayName = 'ModDataGridFiltersButton';
 
@@ -3011,472 +2555,7 @@ const IconWrapper = styles.styled('div')({
     },
 });
 function ModDataGridHeaderLabel({ children, helpTooltip, className, }) {
-    return (jsxRuntime.jsxs(LabelContainer$2, { className: className, "data-mod-header-label": true, children: [children && jsxRuntime.jsx(LabelText$1, { children: children }), helpTooltip && (jsxRuntime.jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(CircleQuestionMark, {}) }) }))] }));
-}
-
-/**
- * @module constants
- * @summary Useful constants
- * @description
- * Collection of useful date constants.
- *
- * The constants could be imported from `date-fns/constants`:
- *
- * ```ts
- * import { maxTime, minTime } from "./constants/date-fns/constants";
- *
- * function isAllowedTime(time) {
- *   return time <= maxTime && time >= minTime;
- * }
- * ```
- */
-
-
-/**
- * @constant
- * @name constructFromSymbol
- * @summary Symbol enabling Date extensions to inherit properties from the reference date.
- *
- * The symbol is used to enable the `constructFrom` function to construct a date
- * using a reference date and a value. It allows to transfer extra properties
- * from the reference date to the new date. It's useful for extensions like
- * [`TZDate`](https://github.com/date-fns/tz) that accept a time zone as
- * a constructor argument.
- */
-const constructFromSymbol = Symbol.for("constructDateFrom");
-
-/**
- * @name constructFrom
- * @category Generic Helpers
- * @summary Constructs a date using the reference date and the value
- *
- * @description
- * The function constructs a new date using the constructor from the reference
- * date and the given value. It helps to build generic functions that accept
- * date extensions.
- *
- * It defaults to `Date` if the passed reference date is a number or a string.
- *
- * Starting from v3.7.0, it allows to construct a date using `[Symbol.for("constructDateFrom")]`
- * enabling to transfer extra properties from the reference date to the new date.
- * It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
- * that accept a time zone as a constructor argument.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The reference date to take constructor from
- * @param value - The value to create the date
- *
- * @returns Date initialized using the given date and value
- *
- * @example
- * import { constructFrom } from "./constructFrom/date-fns";
- *
- * // A function that clones a date preserving the original type
- * function cloneDate<DateType extends Date>(date: DateType): DateType {
- *   return constructFrom(
- *     date, // Use constructor from the given date
- *     date.getTime() // Use the date value to create a new date
- *   );
- * }
- */
-function constructFrom(date, value) {
-  if (typeof date === "function") return date(value);
-
-  if (date && typeof date === "object" && constructFromSymbol in date)
-    return date[constructFromSymbol](value);
-
-  if (date instanceof Date) return new date.constructor(value);
-
-  return new Date(value);
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * Starting from v3.7.0, it clones a date using `[Symbol.for("constructDateFrom")]`
- * enabling to transfer extra properties from the reference date to the new date.
- * It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
- * that accept a time zone as a constructor argument.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param argument - The value to convert
- *
- * @returns The parsed date in the local time zone
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument, context) {
-  // [TODO] Get rid of `toDate` or `constructFrom`?
-  return constructFrom(argument, argument);
-}
-
-/**
- * The {@link addDays} function options.
- */
-
-/**
- * @name addDays
- * @category Day Helpers
- * @summary Add the specified number of days to the given date.
- *
- * @description
- * Add the specified number of days to the given date.
- *
- * **You don't need date-fns\***:
- *
- * Temporal has a built-in `add` method on all its classes:
- *
- * - [`Temporal.Instant.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/Instant/add)
- * - [`Temporal.PlainDate.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainDate/add)
- * - [`Temporal.PlainDateTime.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainDateTime/add)
- * - [`Temporal.PlainTime.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainTime/add)
- * - [`Temporal.PlainYearMonth.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainYearMonth/add)
- * - [`Temporal.ZonedDateTime.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime/add)
- *
- * \* **Not really**, see: https://date-fns.org/you-dont-need-date-fns
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of days to be added.
- * @param options - An object with options
- *
- * @returns The new date with the days added
- *
- * @example
- * // Add 10 days to 1 September 2014:
- * const result = addDays(new Date(2014, 8, 1), 10)
- * //=> Thu Sep 11 2014 00:00:00
- *
- * @example
- * // Using Temporal:
- * // Add 10 days to 1 September 2014:
- * Temporal.PlainDate.from("2014-09-01").add({ days: 10 }).toString();
- * //=> "2014-09-11"
- */
-function addDays(date, amount, options) {
-  const _date = toDate(date);
-  if (isNaN(amount)) return constructFrom(date, NaN);
-
-  // If 0 days, no-op to avoid changing times in the hour before end of DST
-  if (!amount) return _date;
-
-  _date.setDate(_date.getDate() + amount);
-  return _date;
-}
-
-/**
- * The {@link addMonths} function options.
- */
-
-/**
- * @name addMonths
- * @category Month Helpers
- * @summary Add the specified number of months to the given date.
- *
- * @description
- * Add the specified number of months to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of months to be added.
- * @param options - The options object
- *
- * @returns The new date with the months added
- *
- * @example
- * // Add 5 months to 1 September 2014:
- * const result = addMonths(new Date(2014, 8, 1), 5)
- * //=> Sun Feb 01 2015 00:00:00
- *
- * // Add one month to 30 January 2023:
- * const result = addMonths(new Date(2023, 0, 30), 1)
- * //=> Tue Feb 28 2023 00:00:00
- */
-function addMonths(date, amount, options) {
-  const _date = toDate(date);
-  if (isNaN(amount)) return constructFrom(date, NaN);
-  const dayOfMonth = _date.getDate();
-
-  // The JS Date object supports date math by accepting out-of-bounds values for
-  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
-  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
-  // want except that dates will wrap around the end of a month, meaning that
-  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
-  // we'll default to the end of the desired month by adding 1 to the desired
-  // month and using a date of 0 to back up one day to the end of the desired
-  // month.
-  const endOfDesiredMonth = constructFrom(date, _date.getTime());
-  endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
-  const daysInMonth = endOfDesiredMonth.getDate();
-  if (dayOfMonth >= daysInMonth) {
-    // If we're already at the end of the month, then this is the correct date
-    // and we're done.
-    return endOfDesiredMonth;
-  } else {
-    // Otherwise, we now know that setting the original day-of-month value won't
-    // cause an overflow, so set the desired day-of-month. Note that we can't
-    // just set the date of `endOfDesiredMonth` because that object may have had
-    // its time changed in the unusual case where where a DST transition was on
-    // the last day of the month and its local time was in the hour skipped or
-    // repeated next to a DST transition.  So we use `date` instead which is
-    // guaranteed to still have the original time.
-    _date.setFullYear(
-      endOfDesiredMonth.getFullYear(),
-      endOfDesiredMonth.getMonth(),
-      dayOfMonth,
-    );
-    return _date;
-  }
-}
-
-/**
- * The {@link startOfDay} function options.
- */
-
-/**
- * @name startOfDay
- * @category Day Helpers
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - The options
- *
- * @returns The start of a day
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay(date, options) {
-  const _date = toDate(date);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
-/**
- * The {@link endOfDay} function options.
- */
-
-/**
- * @name endOfDay
- * @category Day Helpers
- * @summary Return the end of a day for the given date.
- *
- * @description
- * Return the end of a day for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The end of a day
- *
- * @example
- * // The end of a day for 2 September 2014 11:55:00:
- * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 23:59:59.999
- */
-function endOfDay(date, options) {
-  const _date = toDate(date);
-  _date.setHours(23, 59, 59, 999);
-  return _date;
-}
-
-/**
- * The {@link endOfMonth} function options.
- */
-
-/**
- * @name endOfMonth
- * @category Month Helpers
- * @summary Return the end of a month for the given date.
- *
- * @description
- * Return the end of a month for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The end of a month
- *
- * @example
- * // The end of a month for 2 September 2014 11:55:00:
- * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 30 2014 23:59:59.999
- */
-function endOfMonth(date, options) {
-  const _date = toDate(date);
-  const month = _date.getMonth();
-  _date.setFullYear(_date.getFullYear(), month + 1, 0);
-  _date.setHours(23, 59, 59, 999);
-  return _date;
-}
-
-/**
- * The {@link startOfMonth} function options.
- */
-
-/**
- * @name startOfMonth
- * @category Month Helpers
- * @summary Return the start of a month for the given date.
- *
- * @description
- * Return the start of a month for the given date. The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments.
- * Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed,
- * or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The start of a month
- *
- * @example
- * // The start of a month for 2 September 2014 11:55:00:
- * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfMonth(date, options) {
-  const _date = toDate(date);
-  _date.setDate(1);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
-/**
- * The {@link startOfYear} function options.
- */
-
-/**
- * @name startOfYear
- * @category Year Helpers
- * @summary Return the start of a year for the given date.
- *
- * @description
- * Return the start of a year for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - The options
- *
- * @returns The start of a year
- *
- * @example
- * // The start of a year for 2 September 2014 11:55:00:
- * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
- * //=> Wed Jan 01 2014 00:00:00
- */
-function startOfYear(date, options) {
-  const date_ = toDate(date);
-  date_.setFullYear(date_.getFullYear(), 0, 1);
-  date_.setHours(0, 0, 0, 0);
-  return date_;
-}
-
-/**
- * The {@link subDays} function options.
- */
-
-/**
- * @name subDays
- * @category Day Helpers
- * @summary Subtract the specified number of days from the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of days to be subtracted.
- * @param options - An object with options
- *
- * @returns The new date with the days subtracted
- *
- * @example
- * // Subtract 10 days from 1 September 2014:
- * const result = subDays(new Date(2014, 8, 1), 10)
- * //=> Fri Aug 22 2014 00:00:00
- */
-function subDays(date, amount, options) {
-  return addDays(date, -amount);
-}
-
-/**
- * The subMonths function options.
- */
-
-/**
- * @name subMonths
- * @category Month Helpers
- * @summary Subtract the specified number of months from the given date.
- *
- * @description
- * Subtract the specified number of months from the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of months to be subtracted.
- * @param options - An object with options
- *
- * @returns The new date with the months subtracted
- *
- * @example
- * // Subtract 5 months from 1 February 2015:
- * const result = subMonths(new Date(2015, 1, 1), 5)
- * //=> Mon Sep 01 2014 00:00:00
- */
-function subMonths(date, amount, options) {
-  return addMonths(date, -1);
+    return (jsxRuntime.jsxs(LabelContainer$2, { className: className, "data-mod-header-label": true, children: [children && jsxRuntime.jsx(LabelText$1, { children: children }), helpTooltip && (jsxRuntime.jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(lucideReact.HelpCircle, {}) }) }))] }));
 }
 
 // Cast ModButton to a simpler type for styled() compatibility (avoids generic inference issues)
@@ -3569,50 +2648,50 @@ const defaultRangeShortcuts = [
         label: 'Today',
         getValue: () => {
             const today = new Date();
-            return [startOfDay(today), endOfDay(today)];
+            return [dateFns.startOfDay(today), dateFns.endOfDay(today)];
         },
     },
     {
         label: 'Last 7 days',
         getValue: () => {
             const today = new Date();
-            return [startOfDay(subDays(today, 6)), endOfDay(today)];
+            return [dateFns.startOfDay(dateFns.subDays(today, 6)), dateFns.endOfDay(today)];
         },
     },
     {
         label: 'Last 30 days',
         getValue: () => {
             const today = new Date();
-            return [startOfDay(subDays(today, 29)), endOfDay(today)];
+            return [dateFns.startOfDay(dateFns.subDays(today, 29)), dateFns.endOfDay(today)];
         },
     },
     {
         label: 'Last 60 days',
         getValue: () => {
             const today = new Date();
-            return [startOfDay(subDays(today, 59)), endOfDay(today)];
+            return [dateFns.startOfDay(dateFns.subDays(today, 59)), dateFns.endOfDay(today)];
         },
     },
     {
         label: 'Month to date',
         getValue: () => {
             const today = new Date();
-            return [startOfMonth(today), endOfDay(today)];
+            return [dateFns.startOfMonth(today), dateFns.endOfDay(today)];
         },
     },
     {
         label: 'Last month',
         getValue: () => {
             const today = new Date();
-            const lastMonth = subMonths(today);
-            return [startOfMonth(lastMonth), endOfMonth(lastMonth)];
+            const lastMonth = dateFns.subMonths(today, 1);
+            return [dateFns.startOfMonth(lastMonth), dateFns.endOfMonth(lastMonth)];
         },
     },
     {
         label: 'Year to date',
         getValue: () => {
             const today = new Date();
-            return [startOfYear(today), endOfDay(today)];
+            return [dateFns.startOfYear(today), dateFns.endOfDay(today)];
         },
     },
 ];
@@ -3690,9 +2769,9 @@ const StyledDateRangePicker = styles.styled(DateRangePicker.DateRangePicker)(({
         color: designSystemTokens.semanticColors.typography.body,
     },
 }));
-const ClearIcon = () => jsxRuntime.jsx(X, { size: 20, color: designSystemTokens.semanticColors.icons.placeholder });
+const ClearIcon = () => jsxRuntime.jsx(lucideReact.X, { size: 20, color: designSystemTokens.semanticColors.icons.placeholder });
 // Custom calendar icon component
-const CalendarIcon = () => jsxRuntime.jsx(CalendarDays, { size: 20, color: designSystemTokens.semanticColors.icons.placeholder });
+const CalendarIcon = () => jsxRuntime.jsx(lucideReact.CalendarDays, { size: 20, color: designSystemTokens.semanticColors.icons.placeholder });
 // Shortcut styles to match Figma list item design (no borders, plain text)
 const shortcutChipStyles = {
     // Container (MuiList) styles
@@ -3955,7 +3034,7 @@ const ModDownloadToast = ({ title, fileName, progress, showClose = true, showPau
         const hasActions = showPause || showClose;
         if (!hasActions)
             return null;
-        return (jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'center', gap: `${designSystemTokens.spacing.spacing_2}px` }, children: [showPause && (jsxRuntime.jsx(ActionButton, { size: "small", onClick: onPause, "aria-label": "Pause download", children: jsxRuntime.jsx(Minus, { size: designSystemTokens.spacing.spacing_2 }) })), showClose && (jsxRuntime.jsx(ActionButton, { size: "small", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(X, { size: designSystemTokens.spacing.spacing_2 }) }))] }));
+        return (jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'center', gap: `${designSystemTokens.spacing.spacing_2}px` }, children: [showPause && (jsxRuntime.jsx(ActionButton, { size: "small", onClick: onPause, "aria-label": "Pause download", children: jsxRuntime.jsx(lucideReact.Minus, { size: designSystemTokens.spacing.spacing_2 }) })), showClose && (jsxRuntime.jsx(ActionButton, { size: "small", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { size: designSystemTokens.spacing.spacing_2 }) }))] }));
     };
     return (jsxRuntime.jsxs(StyledRoot$1, { elevation: 0, role: "status", ...props, children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
                     alignItems: 'flex-start',
@@ -4109,7 +3188,7 @@ const CountBadge = styles.styled('span')(({ theme }) => ({
  */
 const ModFilterChip = ({ label, selected = false, expanded, selectedLabel, count = 0, onClear, onClick, ...props }) => {
     const chipLabel = selected ? (jsxRuntime.jsxs(LabelContent, { children: [jsxRuntime.jsxs(TextStack, { children: [jsxRuntime.jsx(HeaderLabel, { children: label }), jsxRuntime.jsx(SelectedLabel, { children: selectedLabel ?? label })] }), count > 0 && jsxRuntime.jsx(CountBadge, { children: count })] })) : (label);
-    return (jsxRuntime.jsx(StyledChip$1, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsxRuntime.jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
+    return (jsxRuntime.jsx(StyledChip$1, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsxRuntime.jsx(lucideReact.X, { size: 24 }), "aria-expanded": expanded, ...props }));
 };
 ModFilterChip.displayName = 'ModFilterChip';
 
@@ -4356,7 +3435,7 @@ const ModFooter = ({ variant = 'pagination', showShadow = false, loading = false
                             }, children: jsxRuntime.jsx(ModLoadingSpinner, {}) }), jsxRuntime.jsxs(ResultText, { children: [rowCount, " results "] })] }), jsxRuntime.jsx(LoadMoreButton, { onClick: onLoadMore, disabled: !hasMore, children: "Load more" })] }));
     }
     // Pagination variant
-    return (jsxRuntime.jsxs(StyledFooter, { showShadow: showShadow, sx: { justifyContent: 'space-between' }, children: [showSelected ? jsxRuntime.jsxs(SelectedText, { children: [selectedCount, " selected"] }) : jsxRuntime.jsx(Box, {}), jsxRuntime.jsxs(PaginationContainer, { children: [jsxRuntime.jsx(PaginationText, { children: derivePaginationInfo() }), jsxRuntime.jsxs(Box, { sx: { display: 'flex', gap: `${designSystemTokens.spacing.spacing_1_4}px` }, children: [jsxRuntime.jsx(PaginationButton, { onClick: handlePreviousPage, disabled: !deriveHasPreviousPage(), "aria-label": "Previous page", children: jsxRuntime.jsx(ChevronLeft, {}) }), jsxRuntime.jsx(PaginationButton, { onClick: handleNextPage, disabled: !deriveHasNextPage(), "aria-label": "Next page", children: jsxRuntime.jsx(ChevronRight, {}) })] })] })] }));
+    return (jsxRuntime.jsxs(StyledFooter, { showShadow: showShadow, sx: { justifyContent: 'space-between' }, children: [showSelected ? jsxRuntime.jsxs(SelectedText, { children: [selectedCount, " selected"] }) : jsxRuntime.jsx(Box, {}), jsxRuntime.jsxs(PaginationContainer, { children: [jsxRuntime.jsx(PaginationText, { children: derivePaginationInfo() }), jsxRuntime.jsxs(Box, { sx: { display: 'flex', gap: `${designSystemTokens.spacing.spacing_1_4}px` }, children: [jsxRuntime.jsx(PaginationButton, { onClick: handlePreviousPage, disabled: !deriveHasPreviousPage(), "aria-label": "Previous page", children: jsxRuntime.jsx(lucideReact.ChevronLeft, {}) }), jsxRuntime.jsx(PaginationButton, { onClick: handleNextPage, disabled: !deriveHasNextPage(), "aria-label": "Next page", children: jsxRuntime.jsx(lucideReact.ChevronRight, {}) })] })] })] }));
 };
 ModFooter.displayName = 'ModFooter';
 
@@ -4611,7 +3690,7 @@ const StyledFormHelperText = styles.styled(FormHelperText, {
 const ModInputField = ({ size = 'medium', destructive = false, label, required = false, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }) => {
     const inputId = id || `mod-input-${Math.random().toString(36).substring(7)}`;
     const helperTextId = helperText || errorMessage ? `${inputId}-helper-text` : undefined;
-    return (jsxRuntime.jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxRuntime.jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsxRuntime.jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsxRuntime.jsx(InfoIconWrapper, { children: infoIcon })] })), jsxRuntime.jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsxRuntime.jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? designSystemTokens.spacing.spacing_1_1_2 : designSystemTokens.spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsxRuntime.jsx(InputAdornment, { position: "end", style: { paddingRight: designSystemTokens.spacing.spacing_1_1_2 }, children: jsxRuntime.jsx(CircleAlert, { size: 20 }) })) : endIcon ? (jsxRuntime.jsx(InputAdornment, { position: "end", style: { paddingRight: designSystemTokens.spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsxRuntime.jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
+    return (jsxRuntime.jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxRuntime.jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsxRuntime.jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsxRuntime.jsx(InfoIconWrapper, { children: infoIcon })] })), jsxRuntime.jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsxRuntime.jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? designSystemTokens.spacing.spacing_1_1_2 : designSystemTokens.spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsxRuntime.jsx(InputAdornment, { position: "end", style: { paddingRight: designSystemTokens.spacing.spacing_1_1_2 }, children: jsxRuntime.jsx(lucideReact.AlertCircle, { size: 20 }) })) : endIcon ? (jsxRuntime.jsx(InputAdornment, { position: "end", style: { paddingRight: designSystemTokens.spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsxRuntime.jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
 };
 ModInputField.displayName = 'ModInputField';
 
@@ -5232,7 +4311,7 @@ const ModModalHeader = ({ title, subtitle, href, LinkComponent, onClose, hideClo
         }
         return jsxRuntime.jsx(ModalHeaderTitle, { children: title });
     };
-    return (jsxRuntime.jsxs(ModalHeaderRoot, { children: [jsxRuntime.jsxs(ModalHeaderTitleRow, { children: [jsxRuntime.jsxs(ModalHeaderTextContainer, { children: [renderTitle(), subtitle && jsxRuntime.jsx(ModalHeaderSubtitle, { children: subtitle })] }), !hideCloseButton && onClose && (jsxRuntime.jsx(StyledCloseButton, { onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(X, { size: 24 }) }))] }), children] }));
+    return (jsxRuntime.jsxs(ModalHeaderRoot, { children: [jsxRuntime.jsxs(ModalHeaderTitleRow, { children: [jsxRuntime.jsxs(ModalHeaderTextContainer, { children: [renderTitle(), subtitle && jsxRuntime.jsx(ModalHeaderSubtitle, { children: subtitle })] }), !hideCloseButton && onClose && (jsxRuntime.jsx(StyledCloseButton, { onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { size: 24 }) }))] }), children] }));
 };
 ModModalHeader.displayName = 'ModModalHeader';
 // ============================================================================
@@ -5713,7 +4792,7 @@ function ModNavigationItem({ icon, label, selected = false, tag, tooltip, slotPr
     // When collapsed the label is hidden, so fall back to it for the tooltip and
     // accessible name — otherwise an icon-only button has no name (WCAG 4.1.2).
     const collapsedTooltip = tooltip ?? label;
-    const item = (jsxRuntime.jsxs(StyledRoot, { selected: selected, "aria-label": collapsed && typeof label === 'string' ? label : undefined, disableRipple: true, ...props, children: [jsxRuntime.jsx(IconPadding, { className: "mod-nav-icon-padding neo-nav-icon-padding", children: icon }), !collapsed && label && jsxRuntime.jsx(Label$2, { className: "mod-nav-label neo-nav-label", children: label }), !collapsed && tag && (jsxRuntime.jsx(ModTag, { size: "medium", variant: "filled", intent: "beta", shape: "rounded", label: tag, ...slotProps?.badge })), children] }));
+    const item = (jsxRuntime.jsxs(StyledRoot, { selected: selected, "aria-label": collapsed && typeof label === 'string' ? label : undefined, disableRipple: true, ...props, children: [jsxRuntime.jsx(IconPadding, { className: "mod-nav-icon-padding", children: icon }), !collapsed && label && jsxRuntime.jsx(Label$2, { className: "mod-nav-label", children: label }), !collapsed && tag && (jsxRuntime.jsx(ModTag, { size: "medium", variant: "filled", intent: "beta", shape: "rounded", label: tag, ...slotProps?.badge })), children] }));
     if (collapsed && collapsedTooltip) {
         return (jsxRuntime.jsx(ModTooltip, { title: collapsedTooltip, placement: "right", arrow: true, children: item }));
     }
@@ -5888,7 +4967,7 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                             '&:hover': {
                                 backgroundColor: `color-mix(in srgb, ${designSystemTokens.semanticColors.buttons.primary.default} 18.8%, transparent)`,
                             },
-                        }, title: "Back to top", size: "small", onClick: handleScrollToTop, children: jsxRuntime.jsx(ChevronUp, { size: 20 }) }) }) }))] }));
+                        }, title: "Back to top", size: "small", onClick: handleScrollToTop, children: jsxRuntime.jsx(lucideReact.ChevronUp, { size: 20 }) }) }) }))] }));
 }
 ModPageContent.displayName = 'ModPageContent';
 
@@ -6022,8 +5101,8 @@ const ModQuickFilter = ({ placeholder = 'Search...', onKeyDown, autoFocus = fals
                     ...controlSlotProps,
                     input: {
                         ...controlSlotProps?.input,
-                        startAdornment: (jsxRuntime.jsx(InputAdornment, { position: "start", children: jsxRuntime.jsx(Search, {}) })),
-                        endAdornment: (jsxRuntime.jsx(InputAdornment, { position: "end", sx: { visibility: props.value ? 'visible' : 'hidden' }, children: jsxRuntime.jsx(xDataGrid.QuickFilterClear, { size: "small", edge: "end", "aria-label": "Clear search", children: jsxRuntime.jsx(X, { size: 16 }) }) })),
+                        startAdornment: (jsxRuntime.jsx(InputAdornment, { position: "start", children: jsxRuntime.jsx(lucideReact.Search, {}) })),
+                        endAdornment: (jsxRuntime.jsx(InputAdornment, { position: "end", sx: { visibility: props.value ? 'visible' : 'hidden' }, children: jsxRuntime.jsx(xDataGrid.QuickFilterClear, { size: "small", edge: "end", "aria-label": "Clear search", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) }) })),
                         disableUnderline: true,
                     },
                 } })) }) }));
@@ -6281,7 +5360,7 @@ const ClearButton = styles.styled(ButtonBase)({
  */
 const ModSearchChip = ({ onClear, value, ...props }) => {
     const hasValue = Boolean(value && String(value).length > 0);
-    return (jsxRuntime.jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsxRuntime.jsx(Search, { size: 16, color: designSystemTokens.semanticColors.icons.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsxRuntime.jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, ...props }));
+    return (jsxRuntime.jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsxRuntime.jsx(lucideReact.Search, { size: 16, color: designSystemTokens.semanticColors.icons.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsxRuntime.jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, ...props }));
 };
 ModSearchChip.displayName = 'ModSearchChip';
 
@@ -6500,7 +5579,7 @@ function useScrollEdges() {
 function ModSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }) {
     const contextValue = React.useMemo(() => ({ collapsed }), [collapsed]);
     const { ref: scrollRef, contentRef, onScroll, canScrollUp, canScrollDown } = useScrollEdges();
-    const HandleIcon = collapsed ? ChevronRight : ChevronLeft;
+    const HandleIcon = collapsed ? lucideReact.ChevronRight : lucideReact.ChevronLeft;
     return (jsxRuntime.jsx(ModSideNavContext.Provider, { value: contextValue, children: jsxRuntime.jsxs(Frame, { collapsed: collapsed, children: [jsxRuntime.jsxs(Root, { collapsed: collapsed, "aria-label": ariaLabel, className: className, id: id, children: [jsxRuntime.jsxs(HeaderRegion, { children: [header, jsxRuntime.jsx(Fade, { edge: "header", visible: canScrollUp })] }), jsxRuntime.jsx(Scroll, { ref: scrollRef, onScroll: onScroll, "data-testid": "mod-side-nav-scroll", children: jsxRuntime.jsx(Stack, { ref: contentRef, sx: {
                                     alignItems: 'center',
                                     gap: `${designSystemTokens.spacing.spacing_1_2}px`,
@@ -6839,7 +5918,7 @@ const ToastButton = styles.styled(Button, {
  * ModToast - Notification/Toast component based on MUI Alert
  */
 const ModToast = ({ intent = 'neutral', type: _type, title, message, showClose = false, actions, onClose, ...props }) => {
-    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: designSystemTokens.semanticColors.icons.utility }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${designSystemTokens.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { intent: intent, children: title }), message && jsxRuntime.jsx(ToastMessage, { intent: intent, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
+    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: designSystemTokens.semanticColors.icons.utility }, children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${designSystemTokens.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { intent: intent, children: title }), message && jsxRuntime.jsx(ToastMessage, { intent: intent, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
@@ -7271,8 +6350,8 @@ const ModTreeView = ({ slots, ...props }) => {
         }, itemChildrenIndentation: designSystemTokens.spacing.spacing_2_1_2, ...props }));
 };
 ModTreeView.displayName = 'ModTreeView';
-const CollapseIcon = () => jsxRuntime.jsx(ChevronDown, { size: 16 });
-const ExpandIcon = () => jsxRuntime.jsx(ChevronRight, { size: 16 });
+const CollapseIcon = () => jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 });
+const ExpandIcon = () => jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 });
 const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
     [`& .${TreeItem.treeItemClasses.content}`]: {
         height: 28,
@@ -7440,7 +6519,7 @@ exports.ModDataGridFilterPanelDeleteIcon = ModDataGridFilterPanelDeleteIcon;
 exports.ModDataGridFilterPanelRemoveAllIcon = ModDataGridFilterPanelRemoveAllIcon;
 exports.ModDataGridFiltersButton = ModDataGridFiltersButton;
 exports.ModDataGridHeaderLabel = ModDataGridHeaderLabel;
-exports.ModDataGridSelect = ModSelect;
+exports.ModDataGridSelect = ModDataGridSelect;
 exports.ModDatePicker = ModDatePicker;
 exports.ModDatePickerListItem = ModDatePickerListItem;
 exports.ModDatePickerMenu = ModDatePickerMenu;