@blerp/design 1.3.16 → 1.4.1

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

@@ -0,0 +1,840 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+
+const _excluded = ["orientation", "variant", "flexItem", "light", "textAlign", "children", "component", "style"],
+      _excluded2 = ["label", "variant", "color", "size", "disabled", "clickable", "deletable", "onDelete", "onClick", "avatar", "icon", "deleteIcon", "selected", "selectedColor", "selectedTextColor", "style"],
+      _excluded3 = ["alt", "src", "srcSet", "sizes", "variant", "children", "imgProps", "style"],
+      _excluded4 = ["badgeContent", "color", "variant", "overlap", "anchorOrigin", "invisible", "max", "showZero", "children", "style"],
+      _excluded5 = ["title", "placement", "arrow", "enterDelay", "leaveDelay", "children", "open", "onOpen", "onClose", "disablePortal", "PopperProps", "componentsProps"],
+      _excluded6 = ["variant", "value", "valueBuffer", "color", "style"],
+      _excluded7 = ["variant", "animation", "width", "height", "children", "style"],
+      _excluded8 = ["color", "underline", "component", "href", "children", "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; }
+/**
+ * Divider - Visual separator (replaces MUI Divider)
+ */
+
+const BaseDivider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    orientation = "horizontal",
+    variant = "fullWidth",
+    flexItem = false,
+    light = false,
+    textAlign = "center",
+    children,
+    component,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const hasChildren = Boolean(children);
+  const Component = component || (hasChildren ? "div" : "hr");
+
+  const dividerStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    margin: 0,
+    flexShrink: 0,
+    borderWidth: 0,
+    borderStyle: "solid",
+    borderColor: light ? "rgba(255, 255, 255, 0.12)" : "var(--border-color, rgba(0, 0, 0, 0.12))"
+  }, orientation === "horizontal" && !hasChildren && _objectSpread(_objectSpread({
+    borderBottomWidth: "thin"
+  }, variant === "inset" && {
+    marginLeft: "72px"
+  }), variant === "middle" && {
+    marginLeft: "16px",
+    marginRight: "16px"
+  })), orientation === "vertical" && _objectSpread({
+    height: "auto",
+    alignSelf: "stretch",
+    borderRightWidth: "thin"
+  }, variant === "middle" && {
+    marginTop: "8px",
+    marginBottom: "8px"
+  })), flexItem && {
+    alignSelf: "stretch",
+    height: "auto"
+  }), hasChildren && {
+    display: "flex",
+    alignItems: "center",
+    border: 0
+  }), style);
+
+  if (hasChildren) {
+    return /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref,
+      role: "separator",
+      style: dividerStyle
+    }, props), /*#__PURE__*/React.createElement("span", {
+      style: _objectSpread({
+        flex: 1,
+        borderTop: "thin solid var(--border-color, rgba(0, 0, 0, 0.12))"
+      }, textAlign === "left" && {
+        flex: 0,
+        width: "10%"
+      })
+    }), /*#__PURE__*/React.createElement("span", {
+      style: _objectSpread(_objectSpread({
+        padding: "0 16px"
+      }, textAlign === "left" && {
+        paddingLeft: "8px"
+      }), textAlign === "right" && {
+        paddingRight: "8px"
+      })
+    }, children), /*#__PURE__*/React.createElement("span", {
+      style: _objectSpread({
+        flex: 1,
+        borderTop: "thin solid var(--border-color, rgba(0, 0, 0, 0.12))"
+      }, textAlign === "right" && {
+        flex: 0,
+        width: "10%"
+      })
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    role: "separator",
+    style: dividerStyle
+  }, props));
+});
+BaseDivider.displayName = "BaseDivider";
+const Divider = withSx(BaseDivider);
+/**
+ * Chip - Compact element for inputs, attributes, or actions (replaces MUI Chip)
+ * 
+ * New props for selection support:
+ * - selected: boolean - whether the chip is in selected state
+ * - selectedColor: string - theme color to use when selected (default: "primary")
+ * - selectedTextColor: string - text color when selected (optional override)
+ */
+
+const BaseChip = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  var _colors$selectedTextC, _avatar$props, _icon$props;
+
+  let {
+    label,
+    variant = "filled",
+    color = "default",
+    size = "medium",
+    disabled = false,
+    clickable,
+    deletable,
+    onDelete,
+    onClick,
+    avatar,
+    icon,
+    deleteIcon,
+    selected,
+    selectedColor = "primary",
+    selectedTextColor,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const {
+    colors
+  } = useTheme();
+
+  const getColor = colorName => {
+    if (colorName === "default") return {
+      bg: "rgba(0, 0, 0, 0.08)",
+      text: "var(--body-text)"
+    };
+    const colorValue = colors[colorName];
+
+    if (typeof colorValue === "object") {
+      return {
+        bg: colorValue.main,
+        text: colorValue.contrastText || "#fff"
+      };
+    }
+
+    return {
+      bg: colorValue || "rgba(0, 0, 0, 0.08)",
+      text: "#fff"
+    };
+  }; // Use selectedColor when selected, otherwise use color
+
+
+  const activeColor = selected ? selectedColor : color;
+  const {
+    bg,
+    text
+  } = getColor(activeColor); // Allow override of text color when selected
+
+  const finalTextColor = selected && selectedTextColor ? ((_colors$selectedTextC = colors[selectedTextColor]) === null || _colors$selectedTextC === void 0 ? void 0 : _colors$selectedTextC.main) || colors[selectedTextColor] || selectedTextColor : text;
+
+  const chipStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: size === "small" ? "24px" : "32px",
+    fontSize: size === "small" ? "0.8125rem" : "0.875rem",
+    borderRadius: "16px",
+    whiteSpace: "nowrap",
+    cursor: clickable || onClick ? "pointer" : "default",
+    outline: 0,
+    textDecoration: "none",
+    border: 0,
+    padding: 0,
+    verticalAlign: "middle",
+    boxSizing: "border-box",
+    transition: "background-color 300ms, border-color 300ms, color 300ms"
+  }, variant === "filled" && {
+    backgroundColor: bg,
+    color: activeColor === "default" ? "var(--body-text)" : finalTextColor
+  }), variant === "outlined" && {
+    backgroundColor: selected ? bg : "transparent",
+    border: "1px solid ".concat(activeColor === "default" ? "var(--border-color)" : bg),
+    color: activeColor === "default" ? "var(--body-text)" : selected ? finalTextColor : bg
+  }), disabled && {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }), style);
+
+  const labelStyle = _objectSpread(_objectSpread({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    whiteSpace: "nowrap"
+  }, (avatar || icon) && {
+    paddingLeft: "8px"
+  }), (deletable || onDelete) && {
+    paddingRight: "8px"
+  });
+
+  const iconStyle = {
+    marginLeft: "5px",
+    marginRight: "-6px",
+    width: size === "small" ? "18px" : "24px",
+    height: size === "small" ? "18px" : "24px"
+  };
+  const deleteIconStyle = {
+    cursor: "pointer",
+    marginLeft: "-6px",
+    marginRight: "5px",
+    width: size === "small" ? "18px" : "22px",
+    height: size === "small" ? "18px" : "22px",
+    opacity: 0.7
+  };
+  const Component = onClick ? "button" : "div";
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: chipStyle,
+    onClick: onClick,
+    disabled: disabled
+  }, props), avatar && /*#__PURE__*/React.cloneElement(avatar, {
+    style: _objectSpread(_objectSpread({}, iconStyle), (_avatar$props = avatar.props) === null || _avatar$props === void 0 ? void 0 : _avatar$props.style)
+  }), !avatar && icon && /*#__PURE__*/React.cloneElement(icon, {
+    style: _objectSpread(_objectSpread({}, iconStyle), (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.style)
+  }), /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, label), (deletable || onDelete) && /*#__PURE__*/React.createElement("span", {
+    style: deleteIconStyle,
+    onClick: e => {
+      e.stopPropagation();
+      onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
+    },
+    role: "button",
+    tabIndex: 0
+  }, deleteIcon || "✕"));
+});
+BaseChip.displayName = "BaseChip";
+const Chip = withSx(BaseChip);
+/**
+ * Avatar - Circular image/icon/letter display (replaces MUI Avatar)
+ */
+
+const BaseAvatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    alt,
+    src,
+    srcSet,
+    sizes,
+    variant = "circular",
+    children,
+    imgProps,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const [hasError, setHasError] = React.useState(false);
+
+  const avatarStyle = _objectSpread({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: "40px",
+    height: "40px",
+    fontSize: "1.25rem",
+    lineHeight: 1,
+    borderRadius: variant === "circular" ? "50%" : variant === "rounded" ? "4px" : 0,
+    overflow: "hidden",
+    userSelect: "none",
+    color: "#fff",
+    backgroundColor: "#bdbdbd"
+  }, style);
+
+  const imgStyle = {
+    width: "100%",
+    height: "100%",
+    textAlign: "center",
+    objectFit: "cover",
+    color: "transparent",
+    textIndent: "10000px"
+  };
+
+  const getInitials = () => {
+    var _alt$;
+
+    if (!alt) return null;
+    const names = alt.split(" ");
+
+    if (names.length >= 2) {
+      return "".concat(names[0][0]).concat(names[1][0]).toUpperCase();
+    }
+
+    return (_alt$ = alt[0]) === null || _alt$ === void 0 ? void 0 : _alt$.toUpperCase();
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: avatarStyle
+  }, props), src && !hasError ? /*#__PURE__*/React.createElement("img", _extends({
+    alt: alt,
+    src: src,
+    srcSet: srcSet,
+    sizes: sizes,
+    style: imgStyle,
+    onError: () => setHasError(true)
+  }, imgProps)) : children || getInitials());
+});
+BaseAvatar.displayName = "BaseAvatar";
+const Avatar = withSx(BaseAvatar);
+/**
+ * Badge - Small count/indicator overlay (replaces MUI Badge)
+ */
+
+const BaseBadge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    badgeContent,
+    color = "default",
+    variant = "standard",
+    overlap = "rectangular",
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "right"
+    },
+    invisible = false,
+    max = 99,
+    showZero = false,
+    children,
+    style
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  const {
+    colors
+  } = useTheme();
+
+  const getColor = () => {
+    if (color === "default") return {
+      bg: "#bdbdbd",
+      text: "#fff"
+    };
+    const colorValue = colors[color];
+
+    if (typeof colorValue === "object") {
+      return {
+        bg: colorValue.main,
+        text: colorValue.contrastText || "#fff"
+      };
+    }
+
+    return {
+      bg: colorValue || "#bdbdbd",
+      text: "#fff"
+    };
+  };
+
+  const {
+    bg,
+    text
+  } = getColor();
+  const shouldHide = invisible || badgeContent === 0 && !showZero;
+  const displayValue = typeof badgeContent === "number" && badgeContent > max ? "".concat(max, "+") : badgeContent;
+
+  const containerStyle = _objectSpread({
+    position: "relative",
+    display: "inline-flex",
+    verticalAlign: "middle",
+    flexShrink: 0
+  }, style);
+
+  const badgeStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: shouldHide ? "none" : "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    alignContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    fontWeight: 500,
+    fontSize: "0.75rem",
+    lineHeight: 1,
+    zIndex: 1,
+    transition: "transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+    backgroundColor: bg,
+    color: text
+  }, variant === "standard" && {
+    minWidth: "20px",
+    height: "20px",
+    padding: "0 6px",
+    borderRadius: "10px"
+  }), variant === "dot" && {
+    width: "8px",
+    height: "8px",
+    borderRadius: "4px",
+    padding: 0
+  }), anchorOrigin.vertical === "top" && {
+    top: 0
+  }), anchorOrigin.vertical === "bottom" && {
+    bottom: 0
+  }), anchorOrigin.horizontal === "right" && {
+    right: 0
+  }), anchorOrigin.horizontal === "left" && {
+    left: 0
+  }), {}, {
+    transform: "scale(1) translate(".concat(anchorOrigin.horizontal === "right" ? "50%" : "-50%", ", ").concat(anchorOrigin.vertical === "top" ? "-50%" : "50%", ")"),
+    transformOrigin: "".concat(anchorOrigin.horizontal === "right" ? "100%" : "0%", " ").concat(anchorOrigin.vertical === "top" ? "0%" : "100%")
+  });
+
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    style: containerStyle
+  }, props), children, /*#__PURE__*/React.createElement("span", {
+    style: badgeStyle
+  }, variant !== "dot" && displayValue));
+});
+BaseBadge.displayName = "BaseBadge";
+const Badge = withSx(BaseBadge);
+/**
+ * Tooltip - Informative text on hover (replaces MUI Tooltip)
+ * Uses portal for proper positioning regardless of parent overflow/transform
+ */
+
+const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  var _componentsProps$tool, _componentsProps$tool2, _PopperProps$sx, _componentsProps$tool3;
+
+  let {
+    title,
+    placement = "bottom",
+    arrow = false,
+    enterDelay = 100,
+    leaveDelay = 0,
+    children,
+    open: controlledOpen,
+    onOpen,
+    onClose,
+    disablePortal = false,
+    PopperProps = {},
+    componentsProps = {}
+  } = _ref5;
+      _objectWithoutProperties(_ref5, _excluded5);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  const timeoutRef = useRef(null);
+  const childRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // Calculate position based on child element and placement
+
+  const updatePosition = useCallback(() => {
+    if (!childRef.current) return;
+    const childRect = childRef.current.getBoundingClientRect();
+    const tooltipEl = tooltipRef.current;
+    const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : {
+      width: 0,
+      height: 0
+    };
+    const gap = 8; // Space between element and tooltip
+
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = childRect.top - tooltipRect.height - gap;
+        left = childRect.left + (childRect.width - tooltipRect.width) / 2;
+        break;
+
+      case 'top-start':
+        top = childRect.top - tooltipRect.height - gap;
+        left = childRect.left;
+        break;
+
+      case 'top-end':
+        top = childRect.top - tooltipRect.height - gap;
+        left = childRect.right - tooltipRect.width;
+        break;
+
+      case 'bottom':
+        top = childRect.bottom + gap;
+        left = childRect.left + (childRect.width - tooltipRect.width) / 2;
+        break;
+
+      case 'bottom-start':
+        top = childRect.bottom + gap;
+        left = childRect.left;
+        break;
+
+      case 'bottom-end':
+        top = childRect.bottom + gap;
+        left = childRect.right - tooltipRect.width;
+        break;
+
+      case 'left':
+        top = childRect.top + (childRect.height - tooltipRect.height) / 2;
+        left = childRect.left - tooltipRect.width - gap;
+        break;
+
+      case 'left-start':
+        top = childRect.top;
+        left = childRect.left - tooltipRect.width - gap;
+        break;
+
+      case 'left-end':
+        top = childRect.bottom - tooltipRect.height;
+        left = childRect.left - tooltipRect.width - gap;
+        break;
+
+      case 'right':
+        top = childRect.top + (childRect.height - tooltipRect.height) / 2;
+        left = childRect.right + gap;
+        break;
+
+      case 'right-start':
+        top = childRect.top;
+        left = childRect.right + gap;
+        break;
+
+      case 'right-end':
+        top = childRect.bottom - tooltipRect.height;
+        left = childRect.right + gap;
+        break;
+
+      default:
+        top = childRect.bottom + gap;
+        left = childRect.left + (childRect.width - tooltipRect.width) / 2;
+    } // Keep within viewport
+
+
+    const padding = 8;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (left < padding) left = padding;
+
+    if (left + tooltipRect.width > viewportWidth - padding) {
+      left = viewportWidth - tooltipRect.width - padding;
+    }
+
+    if (top < padding) top = padding;
+
+    if (top + tooltipRect.height > viewportHeight - padding) {
+      top = viewportHeight - tooltipRect.height - padding;
+    }
+
+    setPosition({
+      top,
+      left
+    });
+  }, [placement]); // Update position when open changes or on scroll/resize
+
+  useLayoutEffect(() => {
+    if (open) {
+      updatePosition(); // Update position on scroll and resize
+
+      window.addEventListener('scroll', updatePosition, true);
+      window.addEventListener('resize', updatePosition);
+      return () => {
+        window.removeEventListener('scroll', updatePosition, true);
+        window.removeEventListener('resize', updatePosition);
+      };
+    }
+  }, [open, updatePosition]); // Re-calculate after tooltip renders (to get accurate dimensions)
+
+  useEffect(() => {
+    if (open && tooltipRef.current) {
+      updatePosition();
+    }
+  }, [open, updatePosition]);
+
+  const handleOpen = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, enterDelay);
+  };
+
+  const handleClose = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, leaveDelay);
+  };
+
+  useEffect(() => {
+    return () => clearTimeout(timeoutRef.current);
+  }, []); // Get the child element and clone it to add event handlers and ref
+
+  const child = React.Children.only(children);
+  const childWithHandlers = /*#__PURE__*/React.cloneElement(child, {
+    ref: node => {
+      childRef.current = node; // Handle child's ref if it exists
+
+      const {
+        ref: childRefProp
+      } = child;
+
+      if (typeof childRefProp === 'function') {
+        childRefProp(node);
+      } else if (childRefProp) {
+        childRefProp.current = node;
+      } // Handle forwarded ref
+
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    onMouseEnter: e => {
+      var _child$props$onMouseE, _child$props;
+
+      handleOpen();
+      (_child$props$onMouseE = (_child$props = child.props).onMouseEnter) === null || _child$props$onMouseE === void 0 ? void 0 : _child$props$onMouseE.call(_child$props, e);
+    },
+    onMouseLeave: e => {
+      var _child$props$onMouseL, _child$props2;
+
+      handleClose();
+      (_child$props$onMouseL = (_child$props2 = child.props).onMouseLeave) === null || _child$props$onMouseL === void 0 ? void 0 : _child$props$onMouseL.call(_child$props2, e);
+    },
+    onFocus: e => {
+      var _child$props$onFocus, _child$props3;
+
+      handleOpen();
+      (_child$props$onFocus = (_child$props3 = child.props).onFocus) === null || _child$props$onFocus === void 0 ? void 0 : _child$props$onFocus.call(_child$props3, e);
+    },
+    onBlur: e => {
+      var _child$props$onBlur, _child$props4;
+
+      handleClose();
+      (_child$props$onBlur = (_child$props4 = child.props).onBlur) === null || _child$props$onBlur === void 0 ? void 0 : _child$props$onBlur.call(_child$props4, e);
+    }
+  }); // Hardcoded fallback background color
+
+  const defaultBgColor = "rgba(97, 97, 97, 0.92)"; // Get background from props, with fallback chain
+
+  const customBg = ((_componentsProps$tool = componentsProps.tooltip) === null || _componentsProps$tool === void 0 ? void 0 : (_componentsProps$tool2 = _componentsProps$tool.sx) === null || _componentsProps$tool2 === void 0 ? void 0 : _componentsProps$tool2.backgroundColor) || ((_PopperProps$sx = PopperProps.sx) === null || _PopperProps$sx === void 0 ? void 0 : _PopperProps$sx.backgroundColor); // Ensure we always have a valid background
+
+  const backgroundColor = customBg && customBg !== "transparent" && customBg !== "inherit" ? customBg : defaultBgColor;
+
+  const tooltipStyle = _objectSpread(_objectSpread(_objectSpread({
+    position: 'fixed',
+    top: position.top,
+    left: position.left,
+    zIndex: 1500,
+    borderRadius: "4px",
+    color: "#fff",
+    padding: "4px 8px",
+    fontSize: "0.6875rem",
+    maxWidth: "300px",
+    wordWrap: "break-word",
+    fontWeight: 500,
+    pointerEvents: 'none',
+    opacity: open ? 1 : 0,
+    transition: 'opacity 200ms'
+  }, (_componentsProps$tool3 = componentsProps.tooltip) === null || _componentsProps$tool3 === void 0 ? void 0 : _componentsProps$tool3.sx), PopperProps.sx), {}, {
+    // Force background at the end to ensure it's never transparent
+    backgroundColor
+  });
+
+  const tooltipContent = open && title ? /*#__PURE__*/React.createElement("span", {
+    ref: tooltipRef,
+    role: "tooltip",
+    style: tooltipStyle
+  }, title) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, childWithHandlers, tooltipContent && (disablePortal ? tooltipContent : /*#__PURE__*/createPortal(tooltipContent, document.body)));
+});
+BaseTooltip.displayName = "BaseTooltip";
+const Tooltip = withSx(BaseTooltip);
+/**
+ * LinearProgress - Progress bar (replaces MUI LinearProgress)
+ */
+
+const BaseLinearProgress = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    variant = "indeterminate",
+    value = 0,
+    valueBuffer,
+    color = "primary",
+    style
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const {
+    colors
+  } = useTheme();
+  const colorValue = colors[color] || colors.primary;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+
+  const containerStyle = _objectSpread({
+    position: "relative",
+    overflow: "hidden",
+    display: "block",
+    height: "4px",
+    zIndex: 0,
+    backgroundColor: "".concat(mainColor, "33"),
+    borderRadius: "2px"
+  }, style);
+
+  const barStyle = _objectSpread(_objectSpread({
+    width: "100%",
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+    top: 0,
+    transition: "transform 0.4s linear",
+    transformOrigin: "left",
+    backgroundColor: mainColor
+  }, variant === "determinate" && {
+    transform: "translateX(".concat(value - 100, "%)")
+  }), variant === "indeterminate" && {
+    animation: "indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite"
+  });
+
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    role: "progressbar",
+    "aria-valuenow": variant === "determinate" ? value : undefined,
+    style: containerStyle
+  }, props), /*#__PURE__*/React.createElement("span", {
+    style: barStyle
+  }), /*#__PURE__*/React.createElement("style", null, "\n        @keyframes indeterminate1 {\n          0% { left: -35%; right: 100%; }\n          60% { left: 100%; right: -90%; }\n          100% { left: 100%; right: -90%; }\n        }\n      "));
+});
+BaseLinearProgress.displayName = "BaseLinearProgress";
+const LinearProgress = withSx(BaseLinearProgress);
+/**
+ * Skeleton - Placeholder loading component (replaces MUI Skeleton)
+ */
+
+const BaseSkeleton = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let {
+    variant = "text",
+    animation = "pulse",
+    width,
+    height,
+    children,
+    style
+  } = _ref7,
+      props = _objectWithoutProperties(_ref7, _excluded7);
+
+  const {
+    mode
+  } = useTheme(); // Theme-aware background color like MUI
+
+  const bgColor = mode === "dark" ? "#3b3d43ff" : "#3b3d43ff";
+
+  const skeletonStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "block"
+  }, variant === "text" && {
+    marginTop: "4px",
+    marginBottom: "4px",
+    height: height || "1.2em",
+    borderRadius: "4px"
+  }), variant === "circular" && {
+    borderRadius: "50%"
+  }), variant === "rectangular" && {
+    borderRadius: 0
+  }), variant === "rounded" && {
+    borderRadius: "4px"
+  }), width && {
+    width
+  }), height && {
+    height
+  }), animation === "pulse" && {
+    animation: "skeleton-pulse 1.5s ease-in-out 0.5s infinite"
+  }), animation === "wave" && {
+    position: "relative",
+    overflow: "hidden"
+  }), animation === false && {
+    animation: "none"
+  }), style), {}, {
+    backgroundColor: bgColor
+  });
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    style: skeletonStyle
+  }, props), children), /*#__PURE__*/React.createElement("style", null, "\n        @keyframes skeleton-pulse {\n          0% { opacity: 1; }\n          50% { opacity: 0.4; }\n          100% { opacity: 1; }\n        }\n      "));
+});
+BaseSkeleton.displayName = "BaseSkeleton";
+const Skeleton = withSx(BaseSkeleton);
+/**
+ * Link - Styled anchor element (replaces MUI Link)
+ */
+
+const BaseLink = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+  let {
+    color = "primary",
+    underline = "always",
+    component,
+    href,
+    children,
+    style
+  } = _ref8,
+      props = _objectWithoutProperties(_ref8, _excluded8);
+
+  const {
+    colors
+  } = useTheme();
+  const colorValue = colors[color] || colors.primary;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+
+  const linkStyle = _objectSpread({
+    color: color === "inherit" ? "inherit" : mainColor,
+    textDecoration: underline === "none" ? "none" : underline === "hover" ? "none" : "underline",
+    cursor: "pointer"
+  }, style);
+
+  const Component = component || "a";
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    href: href,
+    style: linkStyle
+  }, props), children);
+});
+BaseLink.displayName = "BaseLink";
+const Link = withSx(BaseLink);
+
+export { Avatar, Badge, Chip, Divider, LinearProgress, Link, Skeleton, Tooltip };