@blerp/design 1.3.17 → 1.4.1

package/dist/esm/neo-components/Navigation.js

@@ -0,0 +1,1556 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useContext, useRef, useState, useCallback, useEffect, useMemo, useLayoutEffect, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+
+const _excluded = ["open", "onClose", "anchorEl", "anchorOrigin", "transformOrigin", "children", "MenuListProps", "PaperProps", "disablePortal", "keepMounted", "autoFocus", "style"],
+      _excluded2 = ["selected", "disabled", "dense", "divider", "onClick", "children", "style"],
+      _excluded3 = ["value", "onChange", "children", "variant", "orientation", "centered", "textColor", "indicatorColor", "scrollButtons", "TabIndicatorProps", "style"],
+      _excluded4 = ["label", "value", "icon", "iconPosition", "disabled", "selected", "onClick", "textColor", "fullWidth", "wrapped", "disableRipple", "style"],
+      _excluded5 = ["severity", "variant", "color", "icon", "action", "onClose", "children", "style"],
+      _excluded6 = ["children", "style"],
+      _excluded7 = ["open", "onClose", "autoHideDuration", "message", "action", "anchorOrigin", "resumeHideDuration", "disableWindowBlurListener", "TransitionComponent", "transitionDuration", "children", "style"],
+      _excluded8 = ["open", "onClose", "anchorEl", "anchorOrigin", "transformOrigin", "anchorPosition", "anchorReference", "marginThreshold", "children", "PaperProps", "TransitionComponent", "transitionDuration", "disablePortal", "keepMounted", "onClick", "style"],
+      _excluded9 = ["open", "onClose", "anchor", "variant", "elevation", "hideBackdrop", "ModalProps", "PaperProps", "SlideProps", "transitionDuration", "children", "style"],
+      _excluded10 = ["children", "title", "placement", "arrow", "enterDelay", "leaveDelay", "disableHoverListener", "disableFocusListener", "disableTouchListener", "open", "onOpen", "onClose", "componentsProps", "slotProps", "PopperProps"],
+      _excluded11 = ["orientation", "variant", "flexItem", "light", "textAlign", "children", "component", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Context to detect if we're inside a Popover
+ */
+
+const PopoverContext = /*#__PURE__*/createContext(false);
+/**
+ * Context to track nested overlay elements (modals opened from popovers, etc.)
+ * This allows click-outside detection to ignore clicks on nested overlays
+ */
+
+const OverlayStackContext = /*#__PURE__*/createContext({
+  registerOverlay: () => () => {},
+  isClickInsideOverlay: () => false
+});
+/**
+ * Hook to register an overlay element with the stack
+ */
+
+const useOverlayStack = () => useContext(OverlayStackContext);
+/**
+ * Resolve a theme color path like "grey7.real" to actual hex value
+ */
+
+function resolveThemeColor(value, colors) {
+  if (typeof value !== "string") return value;
+  if (!value.includes(".")) return value;
+  if (value.startsWith("#") || value.startsWith("rgb") || value.startsWith("hsl")) return value;
+  if (value.startsWith("url(") || value.startsWith("http")) return value;
+  if (value.includes("px") || value.includes("%") || value.includes("rem") || value.includes("em")) return value;
+  const parts = value.split(".");
+  let result = colors;
+
+  for (const part of parts) {
+    if (result && typeof result === "object" && part in result) {
+      result = result[part];
+    } else {
+      return value; // Path not found, return original
+    }
+  }
+
+  return typeof result === "string" ? result : value;
+}
+/**
+ * Recursively resolve all theme color references in a style/sx object
+ */
+
+
+function resolveStyleColors(style, colors) {
+  if (!style || typeof style !== "object") return style;
+  if (Array.isArray(style)) return style.map(s => resolveStyleColors(s, colors));
+  const result = {};
+
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === "function") {
+      result[key] = value;
+    } else if (typeof value === "object" && value !== null) {
+      result[key] = resolveStyleColors(value, colors);
+    } else if (typeof value === "string") {
+      result[key] = resolveThemeColor(value, colors);
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+/**
+ * Helper function to check if a click target is inside a NESTED overlay/portal
+ * (i.e., a modal opened from within a popover)
+ * This should NOT detect the popover itself, only higher-level overlays like modals
+ */
+
+
+function isClickInsideAnyOverlay(target, excludeElement) {
+  let element = target;
+
+  while (element && element !== document.body) {
+    // Skip if this is the element we're checking from (the popover itself)
+    if (excludeElement && excludeElement.contains(element)) {
+      element = element.parentElement;
+      continue;
+    } // Check for role="dialog" or role="alertdialog" (modals - these are HIGHER than popovers)
+
+
+    const role = element.getAttribute("role");
+
+    if (role === "dialog" || role === "alertdialog") {
+      return true;
+    } // Check for data attributes commonly used for modals/overlays
+
+
+    if (element.hasAttribute("data-modal") || element.hasAttribute("data-overlay") || element.hasAttribute("data-radix-portal") || element.classList.contains("modal") || element.classList.contains("MuiModal-root") || element.classList.contains("MuiDialog-root")) {
+      return true;
+    } // Check for high z-index elements - but only ABOVE popover level (1400+)
+
+
+    const style = window.getComputedStyle(element);
+    const zIndex = parseInt(style.zIndex, 10);
+
+    if (zIndex >= 1400) {
+      return true;
+    }
+
+    element = element.parentElement;
+  }
+
+  return false;
+}
+/**
+ * Menu - Dropdown menu (replaces MUI Menu)
+ *
+ * When used standalone: creates its own portal and handles positioning
+ * When used inside Popover: just renders the menu list (no portal, no positioning)
+ */
+
+
+const BaseMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    open,
+    onClose,
+    anchorEl,
+    anchorOrigin = {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin = {
+      vertical: "top",
+      horizontal: "left"
+    },
+    children,
+    MenuListProps = {},
+    PaperProps = {},
+    disablePortal = false,
+    keepMounted = false,
+    autoFocus = true,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  const isInsidePopover = useContext(PopoverContext);
+  const {
+    colors
+  } = useTheme();
+  const menuRef = useRef(null);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const {
+    registerOverlay,
+    isClickInsideOverlay
+  } = useOverlayStack(); // Combine refs
+
+  const combinedRef = useCallback(node => {
+    menuRef.current = node;
+
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]); // Register this menu with the overlay stack
+
+  useEffect(() => {
+    if (open && menuRef.current) {
+      return registerOverlay(menuRef.current);
+    }
+  }, [open, registerOverlay]); // Resolve PaperProps.sx colors
+
+  const resolvedPaperStyle = useMemo(() => {
+    const sxStyles = PaperProps.sx ? resolveStyleColors(PaperProps.sx, colors) : {};
+    return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
+  }, [PaperProps.sx, PaperProps.style, colors]); // Calculate position (only when standalone)
+
+  useLayoutEffect(() => {
+    if (isInsidePopover || !open || !anchorEl) return; // Safety check - make sure anchorEl is a valid DOM element
+
+    if (!(anchorEl instanceof Element)) return;
+    const rect = anchorEl.getBoundingClientRect();
+    const menuEl = menuRef.current;
+    let top = rect.bottom;
+    let left = rect.left; // Anchor origin
+
+    if (anchorOrigin.vertical === "top") top = rect.top;
+    if (anchorOrigin.vertical === "center") top = rect.top + rect.height / 2;
+    if (anchorOrigin.horizontal === "right") left = rect.right;
+    if (anchorOrigin.horizontal === "center") left = rect.left + rect.width / 2; // Transform origin adjustments
+
+    if (menuEl) {
+      const menuRect = menuEl.getBoundingClientRect();
+      if (transformOrigin.vertical === "bottom") top -= menuRect.height;
+      if (transformOrigin.vertical === "center") top -= menuRect.height / 2;
+      if (transformOrigin.horizontal === "right") left -= menuRect.width;
+      if (transformOrigin.horizontal === "center") left -= menuRect.width / 2; // Keep within viewport
+
+      const padding = 16;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      if (left + menuRect.width > viewportWidth - padding) {
+        left = viewportWidth - menuRect.width - padding;
+      }
+
+      if (left < padding) left = padding;
+
+      if (top + menuRect.height > viewportHeight - padding) {
+        top = viewportHeight - menuRect.height - padding;
+      }
+
+      if (top < padding) top = padding;
+    } // Only update if position actually changed to prevent infinite loops
+
+
+    setPosition(prev => {
+      if (prev.top === top && prev.left === left) return prev;
+      return {
+        top,
+        left
+      };
+    });
+  }, [open, anchorEl, anchorOrigin, transformOrigin, isInsidePopover]); // Click outside and escape handling (only when standalone)
+
+  useEffect(() => {
+    if (isInsidePopover || !open) return;
+
+    const handleClickOutside = e => {
+      // Don't close if clicking inside the menu itself
+      if (menuRef.current && menuRef.current.contains(e.target)) {
+        return;
+      } // Don't close if clicking on the anchor element
+
+
+      if (anchorEl && anchorEl.contains(e.target)) {
+        return;
+      } // Don't close if clicking inside any registered overlay (like modals)
+
+
+      if (isClickInsideOverlay(e.target)) {
+        return;
+      } // Don't close if clicking inside any overlay/portal (fallback check)
+      // Pass the menu element to exclude it from the check
+
+
+      if (isClickInsideAnyOverlay(e.target, menuRef.current)) {
+        return;
+      }
+
+      onClose === null || onClose === void 0 ? void 0 : onClose(e, "backdropClick");
+    };
+
+    const handleEscape = e => {
+      if (e.key === "Escape") {
+        onClose === null || onClose === void 0 ? void 0 : onClose(e, "escapeKeyDown");
+      }
+    }; // Delay to prevent immediate close from the click that opened it
+
+
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, onClose, anchorEl, isInsidePopover, isClickInsideOverlay]); // Focus first item on open
+
+  useEffect(() => {
+    if (open && autoFocus && menuRef.current) {
+      const firstItem = menuRef.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+      if (firstItem) firstItem.focus();
+    }
+  }, [open, autoFocus]);
+  if (!open && !keepMounted) return null;
+
+  const listStyle = _objectSpread({
+    listStyle: "none",
+    margin: 0
+  }, MenuListProps.style); // When inside a Popover, just render the menu list directly
+
+
+  if (isInsidePopover) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: combinedRef,
+      role: "menu",
+      style: resolvedPaperStyle
+    }, props), /*#__PURE__*/React.createElement("ul", _extends({
+      style: listStyle
+    }, MenuListProps), children));
+  } // Standalone mode - create portal with positioning
+
+
+  const menuStyle = _objectSpread(_objectSpread(_objectSpread({
+    position: "fixed",
+    top: position.top,
+    left: position.left,
+    zIndex: 1300,
+    borderRadius: "4px",
+    boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
+    minWidth: "120px",
+    maxHeight: "300px",
+    overflowY: "auto",
+    outline: 0,
+    opacity: open ? 1 : 0,
+    visibility: open ? "visible" : "hidden",
+    transform: open ? "scale(1)" : "scale(0.75)",
+    transformOrigin: "".concat(transformOrigin.horizontal, " ").concat(transformOrigin.vertical),
+    transition: "opacity 200ms, transform 200ms"
+  }, resolvedPaperStyle), style), {}, {
+    backgroundColor: "#2C3233" // Use dark theme color
+
+  });
+
+  const content = /*#__PURE__*/React.createElement("div", _extends({
+    ref: combinedRef,
+    style: menuStyle,
+    role: "menu"
+  }, props), /*#__PURE__*/React.createElement("ul", _extends({
+    style: listStyle
+  }, MenuListProps), children));
+  if (disablePortal) return content;
+  return /*#__PURE__*/createPortal(content, document.body);
+});
+BaseMenu.displayName = "BaseMenu";
+const Menu = withSx(BaseMenu);
+/**
+ * MenuItem - Menu item (replaces MUI MenuItem)
+ */
+
+const BaseMenuItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  var _colors$text, _colors$white;
+
+  let {
+    selected = false,
+    disabled = false,
+    dense = false,
+    divider = false,
+    onClick,
+    children,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    colors
+  } = useTheme();
+
+  const itemStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    padding: dense ? "4px 16px" : "6px 16px",
+    minHeight: dense ? "32px" : "48px",
+    cursor: disabled ? "default" : "pointer",
+    backgroundColor: selected ? (colors === null || colors === void 0 ? void 0 : colors.selectedBackground) || "rgba(255, 255, 255, 0.12)" // Light overlay for dark bg
+    : isHovered ? "rgba(255, 255, 255, 0.08)" // Light overlay for dark bg
+    : "transparent",
+    transition: "background-color 150ms",
+    outline: "none",
+    border: "none",
+    width: "100%",
+    textAlign: "left",
+    font: "inherit",
+    color: (colors === null || colors === void 0 ? void 0 : (_colors$text = colors.text) === null || _colors$text === void 0 ? void 0 : _colors$text.primary) || (colors === null || colors === void 0 ? void 0 : (_colors$white = colors.white) === null || _colors$white === void 0 ? void 0 : _colors$white.main) || "#fff",
+    // White text for dark bg
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }, disabled && {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }), divider && {
+    borderBottom: "1px solid ".concat((colors === null || colors === void 0 ? void 0 : colors.borderColor) || "rgba(255, 255, 255, 0.12)")
+  }), style);
+
+  return /*#__PURE__*/React.createElement("li", _extends({
+    ref: ref,
+    role: "menuitem",
+    tabIndex: disabled ? -1 : 0,
+    style: itemStyle,
+    onClick: disabled ? undefined : onClick,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    "aria-disabled": disabled
+  }, props), children);
+});
+BaseMenuItem.displayName = "BaseMenuItem";
+const MenuItem = withSx(BaseMenuItem);
+/**
+ * Tabs - Tab container (replaces MUI Tabs)
+ */
+
+const BaseTabs = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    value,
+    onChange,
+    children,
+    variant = "standard",
+    orientation = "horizontal",
+    centered = false,
+    textColor = "primary",
+    indicatorColor = "transparent",
+    scrollButtons = "auto",
+    TabIndicatorProps = {},
+    style
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded3);
+
+  const {
+    colors
+  } = useTheme();
+  const tabsRef = useRef(null);
+  const [indicatorStyle, setIndicatorStyle] = useState({});
+  const colorValue = (colors === null || colors === void 0 ? void 0 : colors[indicatorColor]) || (colors === null || colors === void 0 ? void 0 : colors.ibisRed);
+  typeof colorValue === "object" ? colorValue.main : colorValue || "ibisRed.main"; // Update indicator position
+
+  useLayoutEffect(() => {
+    if (!tabsRef.current) return;
+    const tabs = tabsRef.current.querySelectorAll('[role="tab"]');
+    const selectedTab = Array.from(tabs).find((tab, index) => {
+      const tabValue = tab.dataset.value !== undefined ? tab.dataset.value : index;
+      return String(value) === String(tabValue);
+    });
+
+    if (selectedTab) {
+      const tabRect = selectedTab.getBoundingClientRect();
+      const containerRect = tabsRef.current.getBoundingClientRect();
+
+      if (orientation === "horizontal") {
+        setIndicatorStyle({
+          left: tabRect.left - containerRect.left,
+          width: tabRect.width,
+          height: 2,
+          bottom: 0
+        });
+      } else {
+        setIndicatorStyle({
+          top: tabRect.top - containerRect.top,
+          height: tabRect.height,
+          width: 2,
+          right: 0
+        });
+      }
+    }
+  }, [value, orientation, children]);
+
+  const containerStyle = _objectSpread({
+    display: "flex",
+    flexDirection: orientation === "horizontal" ? "column" : "row"
+  }, style);
+
+  const tabsListStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: orientation === "horizontal" ? "row" : "column",
+    position: "relative"
+  }, centered && {
+    justifyContent: "center"
+  }), variant === "fullWidth" && {
+    width: "100%"
+  }), {}, {
+    borderRight: orientation === "vertical" ? "1px solid ".concat((colors === null || colors === void 0 ? void 0 : colors.borderColor) || "rgba(0, 0, 0, 0.12)") : "none",
+    overflow: variant === "scrollable" ? "auto" : "visible"
+  });
+
+  const indicatorBaseStyle = _objectSpread(_objectSpread({
+    position: "absolute",
+    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)"
+  }, indicatorStyle), TabIndicatorProps.style); // Clone children to pass selected state
+
+
+  const childArray = React.Children.toArray(children);
+  const tabs = childArray.map((child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const tabValue = child.props.value !== undefined ? child.props.value : index;
+    return /*#__PURE__*/React.cloneElement(child, {
+      key: tabValue,
+      selected: value === tabValue,
+      "data-value": tabValue,
+      onClick: e => {
+        var _child$props$onClick, _child$props;
+
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, tabValue);
+        (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, e);
+      },
+      textColor,
+      fullWidth: variant === "fullWidth"
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: containerStyle
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: tabsRef,
+    style: tabsListStyle,
+    role: "tablist"
+  }, tabs, /*#__PURE__*/React.createElement("span", _extends({
+    style: indicatorBaseStyle
+  }, TabIndicatorProps))));
+});
+BaseTabs.displayName = "BaseTabs";
+const Tabs = withSx(BaseTabs);
+/**
+ * Tab - Individual tab (replaces MUI Tab)
+ */
+
+const BaseTab = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    label,
+    value,
+    icon,
+    iconPosition = "top",
+    disabled = false,
+    selected = false,
+    onClick,
+    textColor = "primary",
+    fullWidth = false,
+    wrapped = false,
+    disableRipple = false,
+    style
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded4);
+
+  const {
+    colors
+  } = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
+  const colorValue = (colors === null || colors === void 0 ? void 0 : colors[textColor]) || (colors === null || colors === void 0 ? void 0 : colors.primary);
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue || "#7C4DFF";
+
+  const tabStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: iconPosition === "top" || iconPosition === "bottom" ? "column" : "row",
+    gap: "8px",
+    padding: "12px 16px",
+    minWidth: "90px",
+    minHeight: "48px",
+    textTransform: "uppercase",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    fontFamily: "inherit",
+    letterSpacing: "0.02857em",
+    color: selected ? mainColor : (colors === null || colors === void 0 ? void 0 : colors.secondaryText) || "rgba(0, 0, 0, 0.6)",
+    backgroundColor: isHovered && !disabled ? "rgba(0, 0, 0, 0.04)" : "transparent",
+    border: "none",
+    cursor: disabled ? "default" : "pointer",
+    transition: "color 250ms, background-color 250ms",
+    whiteSpace: wrapped ? "normal" : "nowrap",
+    outline: "none"
+  }, fullWidth && {
+    flex: 1
+  }), disabled && {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref,
+    role: "tab",
+    "aria-selected": selected,
+    "aria-disabled": disabled,
+    tabIndex: selected ? 0 : -1,
+    style: tabStyle,
+    onClick: disabled ? undefined : onClick,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, props), (iconPosition === "top" || iconPosition === "start") && icon, label, (iconPosition === "bottom" || iconPosition === "end") && icon);
+});
+BaseTab.displayName = "BaseTab";
+const Tab = withSx(BaseTab);
+/**
+ * Alert - Alert message (replaces MUI Alert)
+ */
+
+const BaseAlert = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  var _colors$error, _colors$warning, _colors$info, _colors$success;
+
+  let {
+    severity = "info",
+    variant = "standard",
+    color,
+    icon,
+    action,
+    onClose,
+    children,
+    style
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded5);
+
+  const {
+    colors
+  } = useTheme();
+  const severityColors = {
+    error: {
+      main: (colors === null || colors === void 0 ? void 0 : (_colors$error = colors.error) === null || _colors$error === void 0 ? void 0 : _colors$error.main) || colors.ibisRed,
+      light: "#FFD7E0",
+      dark: colors.ibisRedDark
+    },
+    warning: {
+      main: (colors === null || colors === void 0 ? void 0 : (_colors$warning = colors.warning) === null || _colors$warning === void 0 ? void 0 : _colors$warning.main) || colors.popnYellow,
+      light: "#FFF8B0",
+      dark: "#B38F00"
+    },
+    info: {
+      main: (colors === null || colors === void 0 ? void 0 : (_colors$info = colors.info) === null || _colors$info === void 0 ? void 0 : _colors$info.main) || colors.buntingBlue,
+      light: "#B3E0FF",
+      dark: "#1A7CCC"
+    },
+    success: {
+      main: (colors === null || colors === void 0 ? void 0 : (_colors$success = colors.success) === null || _colors$success === void 0 ? void 0 : _colors$success.main) || colors.seafoam,
+      light: "#B3FFF5",
+      dark: colors.seafoamDark
+    }
+  };
+  const colorSet = severityColors[color] || severityColors[severity] || severityColors.info;
+  const severityIcons = {
+    error: "✕",
+    warning: "⚠",
+    info: "ℹ",
+    success: "✓"
+  };
+
+  const alertStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "flex-start",
+    padding: "6px 16px",
+    borderRadius: "4px",
+    fontSize: "0.875rem"
+  }, variant === "standard" && {
+    backgroundColor: colorSet.light,
+    color: colorSet.dark
+  }), variant === "filled" && {
+    backgroundColor: colorSet.main,
+    color: "#fff"
+  }), variant === "outlined" && {
+    backgroundColor: "transparent",
+    border: "1px solid ".concat(colorSet.main),
+    color: colorSet.dark
+  }), style);
+
+  const iconStyle = {
+    marginRight: "12px",
+    paddingTop: "8px",
+    fontSize: "1.25rem",
+    display: "flex",
+    alignItems: "center",
+    color: variant === "standard" ? colorSet.main : "inherit"
+  };
+  const contentStyle = {
+    flex: 1,
+    padding: "8px 0",
+    minWidth: 0
+  };
+  const actionStyle = {
+    marginLeft: "auto",
+    paddingLeft: "16px",
+    marginRight: "-8px",
+    display: "flex",
+    alignItems: "flex-start",
+    paddingTop: "4px"
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "alert",
+    style: alertStyle
+  }, props), icon !== false && /*#__PURE__*/React.createElement("span", {
+    style: iconStyle
+  }, icon || severityIcons[severity]), /*#__PURE__*/React.createElement("div", {
+    style: contentStyle
+  }, children), (action || onClose) && /*#__PURE__*/React.createElement("div", {
+    style: actionStyle
+  }, action, onClose && /*#__PURE__*/React.createElement("button", {
+    onClick: onClose,
+    "aria-label": "Close",
+    style: {
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      padding: "4px",
+      color: "inherit",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "50%"
+    }
+  }, "\u2715")));
+});
+BaseAlert.displayName = "BaseAlert";
+const Alert = withSx(BaseAlert);
+/**
+ * AlertTitle - Title for Alert (replaces MUI AlertTitle)
+ */
+
+const AlertTitle = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let {
+    children,
+    style
+  } = _ref7,
+      props = _objectWithoutProperties(_ref7, _excluded6);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: _objectSpread({
+      fontWeight: 500,
+      marginTop: "-2px",
+      marginBottom: "4px"
+    }, style)
+  }, props), children);
+});
+AlertTitle.displayName = "AlertTitle";
+/**
+ * Snackbar - Toast notification (replaces MUI Snackbar)
+ */
+
+const BaseSnackbar = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+  var _colors$grey;
+
+  let {
+    open,
+    onClose,
+    autoHideDuration,
+    message,
+    action,
+    anchorOrigin = {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    resumeHideDuration,
+    disableWindowBlurListener = false,
+    TransitionComponent,
+    transitionDuration = 225,
+    children,
+    style
+  } = _ref8,
+      props = _objectWithoutProperties(_ref8, _excluded7);
+
+  const timerRef = useRef(null);
+  const {
+    colors
+  } = useTheme();
+  const startTimer = useCallback(() => {
+    if (autoHideDuration != null) {
+      timerRef.current = setTimeout(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose({}, "timeout");
+      }, autoHideDuration);
+    }
+  }, [autoHideDuration, onClose]);
+  const stopTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (open) {
+      startTimer();
+    }
+
+    return stopTimer;
+  }, [open, startTimer, stopTimer]); // Pause timer on window blur
+
+  useEffect(() => {
+    if (disableWindowBlurListener || !open) return;
+
+    const handleBlur = () => stopTimer();
+
+    const handleFocus = () => {
+      stopTimer();
+      startTimer();
+    };
+
+    window.addEventListener("blur", handleBlur);
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [open, disableWindowBlurListener, startTimer, stopTimer]);
+  if (!open) return null;
+
+  const positionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    position: "fixed",
+    zIndex: 1400,
+    display: "flex"
+  }, anchorOrigin.vertical === "top" && {
+    top: "24px"
+  }), anchorOrigin.vertical === "bottom" && {
+    bottom: "24px"
+  }), anchorOrigin.horizontal === "left" && {
+    left: "24px",
+    justifyContent: "flex-start"
+  }), anchorOrigin.horizontal === "right" && {
+    right: "24px",
+    justifyContent: "flex-end"
+  }), anchorOrigin.horizontal === "center" && {
+    left: "50%",
+    transform: "translateX(-50%)"
+  });
+
+  const snackbarStyle = _objectSpread(_objectSpread({}, positionStyles), style);
+
+  const contentStyle = {
+    display: "flex",
+    alignItems: "center",
+    padding: "6px 16px",
+    backgroundColor: (colors === null || colors === void 0 ? void 0 : (_colors$grey = colors.grey8) === null || _colors$grey === void 0 ? void 0 : _colors$grey.main) || "#323232",
+    color: "#fff",
+    borderRadius: "4px",
+    boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)",
+    minWidth: "288px",
+    maxWidth: "568px",
+    flexWrap: "wrap"
+  };
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: snackbarStyle,
+    onMouseEnter: stopTimer,
+    onMouseLeave: startTimer
+  }, props), children || /*#__PURE__*/React.createElement("div", {
+    style: contentStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      padding: "8px 0"
+    }
+  }, message), action && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: "auto",
+      paddingLeft: "16px"
+    }
+  }, action))), document.body);
+});
+BaseSnackbar.displayName = "BaseSnackbar";
+const Snackbar = withSx(BaseSnackbar);
+/**
+ * Popover - Positioned popup (replaces MUI Popover)
+ * Provides PopoverContext so nested Menu components know not to create their own portal
+ */
+
+const BasePopover = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+  let {
+    open,
+    onClose,
+    anchorEl,
+    anchorOrigin = {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin = {
+      vertical: "top",
+      horizontal: "left"
+    },
+    anchorPosition,
+    anchorReference = "anchorEl",
+    marginThreshold = 16,
+    children,
+    PaperProps = {},
+    TransitionComponent,
+    transitionDuration = 225,
+    disablePortal = false,
+    keepMounted = false,
+    onClick,
+    style
+  } = _ref9,
+      props = _objectWithoutProperties(_ref9, _excluded8);
+
+  const {
+    colors
+  } = useTheme();
+  const popoverRef = useRef(null);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const {
+    registerOverlay,
+    isClickInsideOverlay
+  } = useOverlayStack();
+  const combinedRef = useCallback(node => {
+    popoverRef.current = node;
+
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]); // Register this popover with the overlay stack
+
+  useEffect(() => {
+    if (open && popoverRef.current) {
+      return registerOverlay(popoverRef.current);
+    }
+  }, [open, registerOverlay]); // Resolve PaperProps.sx colors
+
+  const resolvedPaperStyle = useMemo(() => {
+    const sxStyles = PaperProps.sx ? resolveStyleColors(PaperProps.sx, colors) : {};
+    return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
+  }, [PaperProps.sx, PaperProps.style, colors]); // Calculate position
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    let top = 0;
+    let left = 0;
+
+    if (anchorReference === "anchorPosition" && anchorPosition) {
+      top = anchorPosition.top;
+      left = anchorPosition.left;
+    } else if (anchorEl) {
+      // Safety check - make sure anchorEl is a valid DOM element
+      if (!(anchorEl instanceof Element)) return;
+      const rect = anchorEl.getBoundingClientRect(); // Anchor origin
+
+      if (anchorOrigin.vertical === "top") top = rect.top;else if (anchorOrigin.vertical === "center") top = rect.top + rect.height / 2;else top = rect.bottom;
+      if (anchorOrigin.horizontal === "left") left = rect.left;else if (anchorOrigin.horizontal === "center") left = rect.left + rect.width / 2;else left = rect.right;
+    } // Transform origin adjustments
+
+
+    if (popoverRef.current) {
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      if (transformOrigin.vertical === "bottom") top -= popoverRect.height;else if (transformOrigin.vertical === "center") top -= popoverRect.height / 2;
+      if (transformOrigin.horizontal === "right") left -= popoverRect.width;else if (transformOrigin.horizontal === "center") left -= popoverRect.width / 2; // Keep within viewport
+
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      if (left + popoverRect.width > viewportWidth - marginThreshold) {
+        left = viewportWidth - popoverRect.width - marginThreshold;
+      }
+
+      if (left < marginThreshold) left = marginThreshold;
+
+      if (top + popoverRect.height > viewportHeight - marginThreshold) {
+        top = viewportHeight - popoverRect.height - marginThreshold;
+      }
+
+      if (top < marginThreshold) top = marginThreshold;
+    } // Only update if position actually changed to prevent infinite loops
+
+
+    setPosition(prev => {
+      if (prev.top === top && prev.left === left) return prev;
+      return {
+        top,
+        left
+      };
+    });
+  }, [open, anchorEl, anchorOrigin, transformOrigin, anchorPosition, anchorReference, marginThreshold]); // Click outside handling
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleClickOutside = e => {
+      // Use a small delay to ensure ref is populated after portal render
+      const popoverElement = popoverRef.current; // Don't close if clicking inside the popover itself
+
+      if (popoverElement && popoverElement.contains(e.target)) {
+        return;
+      } // Don't close if clicking on the anchor element
+
+
+      if (anchorEl && anchorEl.contains(e.target)) {
+        return;
+      } // Don't close if clicking inside any registered overlay (like modals)
+
+
+      if (isClickInsideOverlay(e.target)) {
+        return;
+      } // Don't close if clicking inside any overlay/portal (fallback check)
+
+
+      if (isClickInsideAnyOverlay(e.target, popoverElement)) {
+        return;
+      }
+
+      onClose === null || onClose === void 0 ? void 0 : onClose(e, "backdropClick");
+    };
+
+    const handleEscape = e => {
+      if (e.key === "Escape") {
+        onClose === null || onClose === void 0 ? void 0 : onClose(e, "escapeKeyDown");
+      }
+    }; // Use 'click' instead of 'mousedown' and add listener on next tick
+    // This prevents the click that opened the popover from immediately closing it
+
+
+    const timer = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside, true); // Use capture phase
+
+      document.addEventListener("keydown", handleEscape);
+    }, 10); // Small delay to ensure portal is rendered and ref is set
+
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, onClose, anchorEl, isClickInsideOverlay]);
+  if (!open && !keepMounted) return null;
+
+  const popoverStyle = _objectSpread(_objectSpread({
+    position: "fixed",
+    top: position.top,
+    left: position.left,
+    zIndex: 1300,
+    backgroundColor: (colors === null || colors === void 0 ? void 0 : colors.flyoutBackground) || "#fff",
+    borderRadius: "4px",
+    boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
+    outline: 0,
+    opacity: open ? 1 : 0,
+    visibility: open ? "visible" : "hidden",
+    transform: open ? "scale(1)" : "scale(0.75)",
+    transformOrigin: "".concat(transformOrigin.horizontal, " ").concat(transformOrigin.vertical),
+    transition: "opacity ".concat(transitionDuration, "ms, transform ").concat(transitionDuration, "ms")
+  }, resolvedPaperStyle), style);
+
+  const content = /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: combinedRef,
+    style: popoverStyle,
+    onClick: onClick
+  }, props), children));
+  if (disablePortal) return content;
+  return /*#__PURE__*/createPortal(content, document.body);
+});
+BasePopover.displayName = "BasePopover";
+const Popover = withSx(BasePopover);
+/**
+ * Drawer - Slide-out panel (replaces MUI Drawer)
+ */
+
+const BaseDrawer = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+  var _PaperProps$style, _PaperProps$style2, _ModalProps$BackdropP;
+
+  let {
+    open,
+    onClose,
+    anchor = "left",
+    variant = "temporary",
+    elevation = 16,
+    hideBackdrop = false,
+    ModalProps = {},
+    PaperProps = {},
+    SlideProps = {},
+    transitionDuration = 225,
+    children,
+    style
+  } = _ref10,
+      props = _objectWithoutProperties(_ref10, _excluded9);
+
+  const {
+    colors
+  } = useTheme();
+  const [isVisible, setIsVisible] = useState(open);
+  const {
+    registerOverlay
+  } = useOverlayStack();
+  const drawerRef = useRef(null); // Resolve PaperProps.sx colors
+
+  const resolvedPaperStyle = useMemo(() => {
+    const sxStyles = PaperProps.sx ? resolveStyleColors(PaperProps.sx, colors) : {};
+    return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
+  }, [PaperProps.sx, PaperProps.style, colors]); // Register this drawer with the overlay stack
+
+  useEffect(() => {
+    if (open && drawerRef.current) {
+      return registerOverlay(drawerRef.current);
+    }
+  }, [open, registerOverlay]); // Handle visibility for transitions
+
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+    } else {
+      const timer = setTimeout(() => setIsVisible(false), transitionDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, transitionDuration]); // Lock body scroll for temporary drawers
+
+  useEffect(() => {
+    if (open && variant === "temporary") {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open, variant]);
+  const drawerWidth = (resolvedPaperStyle === null || resolvedPaperStyle === void 0 ? void 0 : resolvedPaperStyle.width) || ((_PaperProps$style = PaperProps.style) === null || _PaperProps$style === void 0 ? void 0 : _PaperProps$style.width) || "240px";
+  const drawerHeight = (resolvedPaperStyle === null || resolvedPaperStyle === void 0 ? void 0 : resolvedPaperStyle.height) || ((_PaperProps$style2 = PaperProps.style) === null || _PaperProps$style2 === void 0 ? void 0 : _PaperProps$style2.height) || "auto";
+
+  const getTransform = isOpen => {
+    if (isOpen) return "translate(0, 0)";
+
+    switch (anchor) {
+      case "left":
+        return "translateX(-100%)";
+
+      case "right":
+        return "translateX(100%)";
+
+      case "top":
+        return "translateY(-100%)";
+
+      case "bottom":
+        return "translateY(100%)";
+
+      default:
+        return "translateX(-100%)";
+    }
+  };
+
+  const paperStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    position: "fixed",
+    zIndex: variant === "temporary" ? 1200 : 1100,
+    backgroundColor: (colors === null || colors === void 0 ? void 0 : colors.flyoutBackground) || "#fff",
+    boxShadow: variant === "temporary" ? "0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)" : "none",
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    transform: getTransform(open),
+    transition: "transform ".concat(transitionDuration, "ms cubic-bezier(0, 0, 0.2, 1)")
+  }, anchor === "left" && {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: drawerWidth
+  }), anchor === "right" && {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: drawerWidth
+  }), anchor === "top" && {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: drawerHeight
+  }), anchor === "bottom" && {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: drawerHeight
+  }), resolvedPaperStyle); // Permanent drawer - always visible, no backdrop
+
+
+  if (variant === "permanent") {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: node => {
+        drawerRef.current = node;
+        if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+      },
+      style: _objectSpread(_objectSpread({}, paperStyle), {}, {
+        position: "relative",
+        transform: "none"
+      })
+    }, props), children);
+  } // Persistent drawer - can be toggled, no backdrop
+
+
+  if (variant === "persistent") {
+    if (!isVisible && !open) return null;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: node => {
+        drawerRef.current = node;
+        if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+      },
+      style: paperStyle
+    }, props), children);
+  } // Temporary drawer - with backdrop
+
+
+  if (!isVisible && !open) return null;
+
+  const backdropStyle = _objectSpread({
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 1199,
+    opacity: open ? 1 : 0,
+    visibility: open ? "visible" : "hidden",
+    transition: "opacity ".concat(transitionDuration, "ms")
+  }, (_ModalProps$BackdropP = ModalProps.BackdropProps) === null || _ModalProps$BackdropP === void 0 ? void 0 : _ModalProps$BackdropP.style);
+
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 1200
+    }
+  }, props), !hideBackdrop && /*#__PURE__*/React.createElement("div", {
+    style: backdropStyle,
+    onClick: onClose,
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: node => {
+      drawerRef.current = node;
+      if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+    },
+    style: paperStyle
+  }, children)), document.body);
+});
+BaseDrawer.displayName = "BaseDrawer";
+const Drawer = withSx(BaseDrawer);
+/**
+ * Tooltip - Informative text on hover (replaces MUI Tooltip)
+ */
+
+const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+  let {
+    children,
+    title,
+    placement = "bottom",
+    arrow = false,
+    enterDelay = 100,
+    leaveDelay = 0,
+    disableHoverListener = false,
+    disableFocusListener = false,
+    disableTouchListener = false,
+    open: controlledOpen,
+    onOpen,
+    onClose,
+    componentsProps = {},
+    slotProps = {},
+    PopperProps = {}
+  } = _ref11;
+      _objectWithoutProperties(_ref11, _excluded10);
+
+  const {
+    colors
+  } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const anchorRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const enterTimeoutRef = useRef(null);
+  const leaveTimeoutRef = useRef(null);
+  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // Merge slotProps and componentsProps
+
+  const mergedSlotProps = _objectSpread(_objectSpread({}, componentsProps), slotProps); // Resolve tooltip styles
+
+
+  const tooltipStyle = useMemo(() => {
+    const baseStyle = {
+      position: "fixed",
+      zIndex: 1500,
+      pointerEvents: "none",
+      backgroundColor: "rgba(97, 97, 97, 0.92)",
+      borderRadius: "4px",
+      color: "#fff",
+      fontFamily: "inherit",
+      padding: "4px 8px",
+      fontSize: "11px",
+      maxWidth: "300px",
+      wordWrap: "break-word",
+      fontWeight: 500
+    };
+    const tooltipSlotProps = mergedSlotProps.tooltip || {};
+    const resolvedSx = tooltipSlotProps.sx ? resolveStyleColors(tooltipSlotProps.sx, colors) : {};
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseStyle), resolvedSx), tooltipSlotProps.style), {}, {
+      top: position.top,
+      left: position.left,
+      backgroundColor: "rgba(97, 97, 97, 0.92)"
+    });
+  }, [position, mergedSlotProps, colors]); // Resolve popper styles
+
+  const popperStyle = useMemo(() => {
+    const popperSlotProps = mergedSlotProps.popper || {};
+    const resolvedSx = popperSlotProps.sx ? resolveStyleColors(popperSlotProps.sx, colors) : {};
+    const popperPropsSx = PopperProps.sx ? resolveStyleColors(PopperProps.sx, colors) : {};
+    return _objectSpread(_objectSpread(_objectSpread({}, resolvedSx), popperSlotProps.style), popperPropsSx);
+  }, [mergedSlotProps, PopperProps, colors]);
+  const updatePosition = useCallback(() => {
+    if (!anchorRef.current || !tooltipRef.current) return;
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case "top":
+        top = anchorRect.top - tooltipRect.height - offset;
+        left = anchorRect.left + (anchorRect.width - tooltipRect.width) / 2;
+        break;
+
+      case "top-start":
+        top = anchorRect.top - tooltipRect.height - offset;
+        left = anchorRect.left;
+        break;
+
+      case "top-end":
+        top = anchorRect.top - tooltipRect.height - offset;
+        left = anchorRect.right - tooltipRect.width;
+        break;
+
+      case "bottom":
+        top = anchorRect.bottom + offset;
+        left = anchorRect.left + (anchorRect.width - tooltipRect.width) / 2;
+        break;
+
+      case "bottom-start":
+        top = anchorRect.bottom + offset;
+        left = anchorRect.left;
+        break;
+
+      case "bottom-end":
+        top = anchorRect.bottom + offset;
+        left = anchorRect.right - tooltipRect.width;
+        break;
+
+      case "left":
+        top = anchorRect.top + (anchorRect.height - tooltipRect.height) / 2;
+        left = anchorRect.left - tooltipRect.width - offset;
+        break;
+
+      case "left-start":
+        top = anchorRect.top;
+        left = anchorRect.left - tooltipRect.width - offset;
+        break;
+
+      case "left-end":
+        top = anchorRect.bottom - tooltipRect.height;
+        left = anchorRect.left - tooltipRect.width - offset;
+        break;
+
+      case "right":
+        top = anchorRect.top + (anchorRect.height - tooltipRect.height) / 2;
+        left = anchorRect.right + offset;
+        break;
+
+      case "right-start":
+        top = anchorRect.top;
+        left = anchorRect.right + offset;
+        break;
+
+      case "right-end":
+        top = anchorRect.bottom - tooltipRect.height;
+        left = anchorRect.right + offset;
+        break;
+
+      default:
+        top = anchorRect.bottom + offset;
+        left = anchorRect.left + (anchorRect.width - tooltipRect.width) / 2;
+    }
+
+    setPosition({
+      top,
+      left
+    });
+  }, [placement]);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(updatePosition);
+    }
+  }, [open, updatePosition]);
+  const handleOpen = useCallback(event => {
+    clearTimeout(leaveTimeoutRef.current);
+    enterTimeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+    }, enterDelay);
+  }, [enterDelay, onOpen]);
+  const handleClose = useCallback(event => {
+    clearTimeout(enterTimeoutRef.current);
+    leaveTimeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose(event);
+    }, leaveDelay);
+  }, [leaveDelay, onClose]);
+  useEffect(() => {
+    return () => {
+      clearTimeout(enterTimeoutRef.current);
+      clearTimeout(leaveTimeoutRef.current);
+    };
+  }, []); // Clone child and attach event handlers
+
+  const childElement = React.Children.only(children);
+  const childProps = {
+    ref: node => {
+      anchorRef.current = node;
+      const childRef = childElement.ref;
+      if (typeof childRef === "function") childRef(node);else if (childRef) childRef.current = node;
+    }
+  };
+
+  if (!disableHoverListener) {
+    childProps.onMouseEnter = e => {
+      var _childElement$props$o, _childElement$props;
+
+      handleOpen(e);
+      (_childElement$props$o = (_childElement$props = childElement.props).onMouseEnter) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+    };
+
+    childProps.onMouseLeave = e => {
+      var _childElement$props$o2, _childElement$props2;
+
+      handleClose(e);
+      (_childElement$props$o2 = (_childElement$props2 = childElement.props).onMouseLeave) === null || _childElement$props$o2 === void 0 ? void 0 : _childElement$props$o2.call(_childElement$props2, e);
+    };
+  }
+
+  if (!disableFocusListener) {
+    childProps.onFocus = e => {
+      var _childElement$props$o3, _childElement$props3;
+
+      handleOpen(e);
+      (_childElement$props$o3 = (_childElement$props3 = childElement.props).onFocus) === null || _childElement$props$o3 === void 0 ? void 0 : _childElement$props$o3.call(_childElement$props3, e);
+    };
+
+    childProps.onBlur = e => {
+      var _childElement$props$o4, _childElement$props4;
+
+      handleClose(e);
+      (_childElement$props$o4 = (_childElement$props4 = childElement.props).onBlur) === null || _childElement$props$o4 === void 0 ? void 0 : _childElement$props$o4.call(_childElement$props4, e);
+    };
+  }
+
+  const clonedChild = /*#__PURE__*/React.cloneElement(childElement, childProps);
+  if (!title) return clonedChild;
+  const tooltipContent = open ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    ref: tooltipRef,
+    role: "tooltip",
+    style: _objectSpread(_objectSpread({}, tooltipStyle), popperStyle)
+  }, title), document.body) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, clonedChild, tooltipContent);
+});
+BaseTooltip.displayName = "BaseTooltip";
+withSx(BaseTooltip);
+/**
+ * Divider - Visual separator (replaces MUI Divider)
+ */
+
+const BaseDivider = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+  let {
+    orientation = "horizontal",
+    variant = "fullWidth",
+    flexItem = false,
+    light = false,
+    textAlign = "center",
+    children,
+    component,
+    style
+  } = _ref12,
+      props = _objectWithoutProperties(_ref12, _excluded11);
+
+  const {
+    colors
+  } = useTheme();
+  const hasChildren = !!children;
+  const Component = component || (hasChildren ? "div" : "hr");
+  const borderColor = light ? "rgba(0, 0, 0, 0.08)" : (colors === null || colors === void 0 ? void 0 : colors.borderColor) || "rgba(0, 0, 0, 0.12)";
+  const dividerStyle = useMemo(() => {
+    const isHorizontal = orientation === "horizontal";
+    const baseStyle = {
+      margin: 0,
+      flexShrink: 0,
+      borderWidth: 0,
+      borderStyle: "solid",
+      borderColor: borderColor
+    };
+
+    if (isHorizontal) {
+      baseStyle.borderBottomWidth = "thin";
+      baseStyle.width = "100%";
+
+      if (variant === "inset") {
+        baseStyle.marginLeft = "72px";
+      } else if (variant === "middle") {
+        baseStyle.marginLeft = "16px";
+        baseStyle.marginRight = "16px";
+      }
+    } else {
+      baseStyle.height = "100%";
+      baseStyle.borderRightWidth = "thin";
+
+      if (variant === "middle") {
+        baseStyle.marginTop = "8px";
+        baseStyle.marginBottom = "8px";
+      }
+    }
+
+    if (flexItem) {
+      baseStyle.alignSelf = "stretch";
+      baseStyle.height = "auto";
+    }
+
+    if (hasChildren) {
+      baseStyle.display = "flex";
+      baseStyle.alignItems = "center";
+      baseStyle.textAlign = textAlign;
+      baseStyle.borderWidth = 0;
+    }
+
+    return _objectSpread(_objectSpread({}, baseStyle), style);
+  }, [orientation, variant, flexItem, light, hasChildren, textAlign, style, borderColor]);
+
+  if (hasChildren) {
+    const lineStyle = {
+      flex: 1,
+      borderTop: "thin solid ".concat(borderColor)
+    };
+    return /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref,
+      style: dividerStyle,
+      role: "separator"
+    }, props), textAlign !== "right" && /*#__PURE__*/React.createElement("span", {
+      style: lineStyle
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: "0 8px",
+        display: "inline-block"
+      }
+    }, children), textAlign !== "left" && /*#__PURE__*/React.createElement("span", {
+      style: lineStyle
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: dividerStyle,
+    role: "separator",
+    "aria-orientation": orientation
+  }, props));
+});
+BaseDivider.displayName = "BaseDivider";
+withSx(BaseDivider); // Export the context for advanced use cases
+
+export { Alert, AlertTitle, Drawer, Menu, MenuItem, OverlayStackContext, Popover, PopoverContext, Snackbar, Tab, Tabs, useOverlayStack };