@blerp/design 1.3.17 → 1.4.2

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

@@ -0,0 +1,1180 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState } from 'react';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+
+const _excluded = ["position", "color", "elevation", "children", "style"],
+      _excluded2 = ["variant", "disableGutters", "children", "style"],
+      _excluded3 = ["dense", "disablePadding", "subheader", "children", "component", "style"],
+      _excluded4 = ["dense", "disableGutters", "disablePadding", "divider", "alignItems", "selected", "button", "onClick", "secondaryAction", "children", "component", "style"],
+      _excluded5 = ["dense", "disableGutters", "divider", "selected", "disabled", "alignItems", "onClick", "children", "style"],
+      _excluded6 = ["primary", "secondary", "primaryTypographyProps", "secondaryTypographyProps", "inset", "style"],
+      _excluded7 = ["children", "style"],
+      _excluded8 = ["children", "style"],
+      _excluded9 = ["size", "stickyHeader", "children", "style"],
+      _excluded10 = ["children", "style"],
+      _excluded11 = ["children", "style"],
+      _excluded12 = ["hover", "selected", "children", "style"],
+      _excluded13 = ["align", "padding", "size", "variant", "sortDirection", "children", "component", "style"],
+      _excluded14 = ["children", "style"],
+      _excluded15 = ["cols", "gap", "rowHeight", "variant", "children", "style"],
+      _excluded16 = ["cols", "rows", "children", "style"],
+      _excluded17 = ["expanded", "defaultExpanded", "onChange", "disabled", "children", "style", "sx"],
+      _excluded18 = ["expandIcon", "children", "onClick", "_expanded", "_onToggle", "_disabled", "style", "sx"],
+      _excluded19 = ["children", "_expanded", "style", "sx"],
+      _excluded20 = ["disableSpacing", "children", "style", "sx"],
+      _excluded21 = ["variant", "color", "size", "orientation", "disabled", "fullWidth", "children", "style"],
+      _excluded22 = ["separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "children", "style"],
+      _excluded23 = ["count", "page", "onChange", "color", "size", "disabled", "showFirstButton", "showLastButton", "siblingCount", "boundaryCount", "style"],
+      _excluded24 = ["children", "color", "fontSize", "viewBox", "titleAccess", "style"],
+      _excluded25 = ["fullWidth", "disabled", "error", "required", "variant", "size", "margin", "children", "style"],
+      _excluded26 = ["shrink", "disabled", "error", "required", "focused", "variant", "size", "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; }
+/**
+ * AppBar - Top application bar (replaces MUI AppBar)
+ */
+
+const BaseAppBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    position = "fixed",
+    color = "primary",
+    elevation = 4,
+    children,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const elevationShadows = {
+    0: "none",
+    1: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+    2: "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)",
+    4: "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)",
+    8: "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)"
+  };
+  const colorMap = {
+    default: {
+      bg: "var(--default-background, #f5f5f5)",
+      text: "var(--body-text, rgba(0, 0, 0, 0.87))"
+    },
+    inherit: {
+      bg: "inherit",
+      text: "inherit"
+    },
+    primary: {
+      bg: "#141518",
+      text: "#ffffff"
+    },
+    secondary: {
+      bg: "var(--secondary-main, #9c27b0)",
+      text: "#fff"
+    },
+    transparent: {
+      bg: "transparent",
+      text: "inherit"
+    }
+  };
+  const colors = colorMap[color] || colorMap.primary;
+
+  const appBarStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    boxSizing: "border-box",
+    flexShrink: 0,
+    backgroundColor: colors.bg,
+    color: colors.text,
+    boxShadow: elevationShadows[elevation] || elevationShadows[4],
+    zIndex: 1100
+  }, position === "fixed" && {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0
+  }), position === "absolute" && {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0
+  }), position === "sticky" && {
+    position: "sticky",
+    top: 0
+  }), position === "static" && {
+    position: "static"
+  }), position === "relative" && {
+    position: "relative"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("header", _extends({
+    ref: ref,
+    style: appBarStyle
+  }, props), children);
+});
+BaseAppBar.displayName = "BaseAppBar";
+const AppBar = withSx(BaseAppBar);
+/**
+ * Toolbar - Container for AppBar content (replaces MUI Toolbar)
+ */
+
+const BaseToolbar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    variant = "regular",
+    disableGutters = false,
+    children,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const toolbarStyle = _objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    minHeight: variant === "dense" ? "48px" : "64px"
+  }, !disableGutters && {
+    paddingLeft: "16px",
+    paddingRight: "16px"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: toolbarStyle
+  }, props), children);
+});
+BaseToolbar.displayName = "BaseToolbar";
+const Toolbar = withSx(BaseToolbar);
+/**
+ * List - List container (replaces MUI List)
+ */
+
+const BaseList = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    dense = false,
+    disablePadding = false,
+    subheader,
+    children,
+    component: Component = "ul",
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const listStyle = _objectSpread({
+    listStyle: "none",
+    margin: 0,
+    padding: disablePadding ? 0 : "8px 0",
+    position: "relative"
+  }, style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: listStyle
+  }, props), subheader, children);
+});
+BaseList.displayName = "BaseList";
+const List = withSx(BaseList);
+/**
+ * ListItem - List item (replaces MUI ListItem)
+ */
+
+const BaseListItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    dense = false,
+    disableGutters = false,
+    disablePadding = false,
+    divider = false,
+    alignItems = "center",
+    selected = false,
+    button = false,
+    onClick,
+    secondaryAction,
+    children,
+    component,
+    style
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  const Component = component || (button ? "div" : "li");
+
+  const itemStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: alignItems === "flex-start" ? "flex-start" : "center",
+    justifyContent: "flex-start",
+    position: "relative",
+    textDecoration: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    textAlign: "left"
+  }, !disablePadding && {
+    paddingTop: dense ? "4px" : "8px",
+    paddingBottom: dense ? "4px" : "8px"
+  }), !disableGutters && !disablePadding && {
+    paddingLeft: "16px",
+    paddingRight: "16px"
+  }), divider && {
+    borderBottom: "1px solid var(--border-color, rgba(0, 0, 0, 0.12))"
+  }), selected && {
+    backgroundColor: "rgba(0, 0, 0, 0.08)"
+  }), button && {
+    cursor: "pointer"
+  }), style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: itemStyle,
+    onClick: onClick
+  }, props), children, secondaryAction && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      right: "16px"
+    }
+  }, secondaryAction));
+});
+BaseListItem.displayName = "BaseListItem";
+withSx(BaseListItem);
+/**
+ * ListItemButton - Clickable list item (replaces MUI ListItemButton)
+ */
+
+const BaseListItemButton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    dense = false,
+    disableGutters = false,
+    divider = false,
+    selected = false,
+    disabled = false,
+    alignItems = "center",
+    onClick,
+    children,
+    style
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
+
+  const buttonStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: alignItems === "flex-start" ? "flex-start" : "center",
+    justifyContent: "flex-start",
+    position: "relative",
+    textDecoration: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    textAlign: "left",
+    paddingTop: dense ? "4px" : "8px",
+    paddingBottom: dense ? "4px" : "8px"
+  }, !disableGutters && {
+    paddingLeft: "16px",
+    paddingRight: "16px"
+  }), divider && {
+    borderBottom: "1px solid var(--border-color, rgba(0, 0, 0, 0.12))"
+  }), {}, {
+    backgroundColor: selected ? "rgba(0, 0, 0, 0.08)" : "transparent",
+    cursor: disabled ? "default" : "pointer",
+    transition: "background-color 150ms",
+    border: "none",
+    outline: "none",
+    font: "inherit",
+    color: "inherit"
+  }, disabled && {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    style: buttonStyle,
+    onClick: disabled ? undefined : onClick
+  }, props), children);
+});
+BaseListItemButton.displayName = "BaseListItemButton";
+withSx(BaseListItemButton);
+/**
+ * ListItemText - Text content for list items
+ */
+
+const ListItemText = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    primary,
+    secondary,
+    primaryTypographyProps = {},
+    secondaryTypographyProps = {},
+    inset = false,
+    style
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const containerStyle = _objectSpread(_objectSpread({
+    flex: "1 1 auto",
+    minWidth: 0
+  }, inset && {
+    paddingLeft: "56px"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: containerStyle
+  }, props), primary && /*#__PURE__*/React.createElement("span", {
+    style: _objectSpread({
+      display: "block",
+      fontSize: "1rem",
+      lineHeight: 1.5
+    }, primaryTypographyProps.style)
+  }, primary), secondary && /*#__PURE__*/React.createElement("span", {
+    style: _objectSpread({
+      display: "block",
+      fontSize: "0.875rem",
+      color: "var(--secondary-text, rgba(0, 0, 0, 0.6))",
+      lineHeight: 1.43
+    }, secondaryTypographyProps.style)
+  }, secondary));
+});
+ListItemText.displayName = "ListItemText";
+/**
+ * ListItemIcon - Icon container for list items
+ */
+
+const ListItemIcon = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let {
+    children,
+    style
+  } = _ref7,
+      props = _objectWithoutProperties(_ref7, _excluded7);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: _objectSpread({
+      minWidth: "56px",
+      display: "flex",
+      color: "var(--icons-in-active, rgba(0, 0, 0, 0.54))"
+    }, style)
+  }, props), children);
+});
+ListItemIcon.displayName = "ListItemIcon";
+/**
+ * ListItemAvatar - Avatar container for list items
+ */
+
+const ListItemAvatar = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+  let {
+    children,
+    style
+  } = _ref8,
+      props = _objectWithoutProperties(_ref8, _excluded8);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: _objectSpread({
+      minWidth: "56px"
+    }, style)
+  }, props), children);
+});
+ListItemAvatar.displayName = "ListItemAvatar";
+/**
+ * Table - Basic table (replaces MUI Table)
+ */
+
+const BaseTable = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+  let {
+    size = "medium",
+    stickyHeader = false,
+    children,
+    style
+  } = _ref9,
+      props = _objectWithoutProperties(_ref9, _excluded9);
+
+  const tableStyle = _objectSpread({
+    display: "table",
+    width: "100%",
+    borderCollapse: "collapse",
+    borderSpacing: 0
+  }, style);
+
+  return /*#__PURE__*/React.createElement("table", _extends({
+    ref: ref,
+    style: tableStyle
+  }, props), children);
+});
+BaseTable.displayName = "BaseTable";
+const Table = withSx(BaseTable);
+/**
+ * TableHead - Table header group
+ */
+
+const TableHead = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+  let {
+    children,
+    style
+  } = _ref10,
+      props = _objectWithoutProperties(_ref10, _excluded10);
+
+  return /*#__PURE__*/React.createElement("thead", _extends({
+    ref: ref,
+    style: _objectSpread({
+      display: "table-header-group"
+    }, style)
+  }, props), children);
+});
+TableHead.displayName = "TableHead";
+/**
+ * TableBody - Table body group
+ */
+
+const TableBody = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+  let {
+    children,
+    style
+  } = _ref11,
+      props = _objectWithoutProperties(_ref11, _excluded11);
+
+  return /*#__PURE__*/React.createElement("tbody", _extends({
+    ref: ref,
+    style: _objectSpread({
+      display: "table-row-group"
+    }, style)
+  }, props), children);
+});
+TableBody.displayName = "TableBody";
+/**
+ * TableRow - Table row
+ */
+
+const TableRow = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+  let {
+    hover = false,
+    selected = false,
+    children,
+    style
+  } = _ref12,
+      props = _objectWithoutProperties(_ref12, _excluded12);
+
+  return /*#__PURE__*/React.createElement("tr", _extends({
+    ref: ref,
+    style: _objectSpread(_objectSpread({
+      display: "table-row",
+      verticalAlign: "middle"
+    }, selected && {
+      backgroundColor: "rgba(0, 0, 0, 0.08)"
+    }), style)
+  }, props), children);
+});
+TableRow.displayName = "TableRow";
+/**
+ * TableCell - Table cell
+ */
+
+const TableCell = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+  let {
+    align = "left",
+    padding = "normal",
+    size = "medium",
+    variant,
+    sortDirection,
+    children,
+    component,
+    style
+  } = _ref13,
+      props = _objectWithoutProperties(_ref13, _excluded13);
+
+  const Component = component || (variant === "head" ? "th" : "td");
+
+  const cellStyle = _objectSpread(_objectSpread({
+    display: "table-cell",
+    verticalAlign: "inherit",
+    borderBottom: "1px solid var(--border-color, rgba(224, 224, 224, 1))",
+    textAlign: align,
+    padding: padding === "none" ? 0 : padding === "checkbox" ? "0 0 0 4px" : size === "small" ? "6px 16px" : "16px",
+    fontSize: "0.875rem",
+    lineHeight: 1.43
+  }, variant === "head" && {
+    fontWeight: 500,
+    color: "var(--body-text)"
+  }), style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: cellStyle
+  }, props), children);
+});
+TableCell.displayName = "TableCell";
+/**
+ * TableContainer - Wrapper for tables with overflow handling
+ */
+
+const TableContainer = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+  let {
+    children,
+    style
+  } = _ref14,
+      props = _objectWithoutProperties(_ref14, _excluded14);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: _objectSpread({
+      width: "100%",
+      overflowX: "auto"
+    }, style)
+  }, props), children);
+});
+TableContainer.displayName = "TableContainer";
+/**
+ * ImageList - Grid of images (replaces MUI ImageList)
+ */
+
+const BaseImageList = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+  let {
+    cols = 2,
+    gap = 4,
+    rowHeight = "auto",
+    variant = "standard",
+    children,
+    style
+  } = _ref15,
+      props = _objectWithoutProperties(_ref15, _excluded15);
+
+  const imageListStyle = _objectSpread({
+    display: "grid",
+    gridTemplateColumns: "repeat(".concat(cols, ", 1fr)"),
+    gap: "".concat(gap, "px"),
+    overflowY: "auto",
+    listStyle: "none",
+    padding: 0,
+    margin: 0
+  }, style);
+
+  return /*#__PURE__*/React.createElement("ul", _extends({
+    ref: ref,
+    style: imageListStyle
+  }, props), children);
+});
+BaseImageList.displayName = "BaseImageList";
+const ImageList = withSx(BaseImageList);
+/**
+ * ImageListItem - Item in ImageList
+ */
+
+const ImageListItem = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+  let {
+    cols = 1,
+    rows = 1,
+    children,
+    style
+  } = _ref16,
+      props = _objectWithoutProperties(_ref16, _excluded16);
+
+  return /*#__PURE__*/React.createElement("li", _extends({
+    ref: ref,
+    style: _objectSpread({
+      gridColumnEnd: "span ".concat(cols),
+      gridRowEnd: "span ".concat(rows),
+      overflow: "hidden"
+    }, style)
+  }, props), children);
+});
+ImageListItem.displayName = "ImageListItem";
+/**
+ * Accordion - Simple wrapper
+ */
+
+const Accordion = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+  let {
+    expanded,
+    defaultExpanded,
+    onChange,
+    disabled,
+    children,
+    style,
+    sx
+  } = _ref17,
+      props = _objectWithoutProperties(_ref17, _excluded17);
+
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : false);
+  const isExpanded = expanded !== undefined ? expanded : internalExpanded;
+
+  const handleToggle = e => {
+    if (disabled) return;
+    const newExpanded = !isExpanded;
+
+    if (expanded === undefined) {
+      setInternalExpanded(newExpanded);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newExpanded);
+  };
+
+  const accordionStyle = _objectSpread(_objectSpread({
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    width: "100%"
+  }, style), typeof sx === "object" ? sx : {}); // Clone ALL children and pass the props - let them decide what to do with it
+
+
+  const childrenWithProps = React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child; // Pass props to ALL children - harmless for those that don't need them
+
+    return /*#__PURE__*/React.cloneElement(child, {
+      _expanded: isExpanded,
+      _onToggle: handleToggle,
+      _disabled: disabled
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: accordionStyle
+  }, props), childrenWithProps);
+});
+Accordion.displayName = "Accordion";
+/**
+ * AccordionSummary - Clickable header
+ */
+
+const AccordionSummary = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+  let {
+    expandIcon,
+    children,
+    onClick,
+    _expanded,
+    _onToggle,
+    _disabled,
+    style,
+    sx
+  } = _ref18,
+      props = _objectWithoutProperties(_ref18, _excluded18);
+
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const handleClick = e => {
+    e.stopPropagation();
+
+    if (_onToggle) {
+      _onToggle(e);
+    }
+
+    if (onClick) {
+      onClick(e);
+    }
+  }; // Parse sx object to extract relevant styles
+
+
+  const sxStyles = typeof sx === "object" ? sx : {};
+  const sxContentStyles = sxStyles["& .MuiAccordionSummary-content"] || {};
+
+  const summaryStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    // Left align the whole thing
+    padding: "16px",
+    minHeight: "48px",
+    cursor: _disabled ? "default" : "pointer",
+    userSelect: "none",
+    backgroundColor: "transparent",
+    transition: "background-color 150ms"
+  }, _disabled && {
+    opacity: 0.5
+  }), isHovered && !_disabled && {
+    backgroundColor: "rgba(0, 0, 0, 0.04)"
+  }), style), Object.keys(sxStyles).reduce((acc, key) => {
+    if (!key.startsWith("&")) {
+      acc[key] = sxStyles[key];
+    }
+
+    return acc;
+  }, {}));
+
+  const contentWrapperStyle = _objectSpread({
+    display: "flex",
+    flexDirection: "column",
+    // Stack children vertically
+    alignItems: "flex-start",
+    // Left align content
+    flexGrow: 1,
+    margin: "12px 0",
+    minWidth: 0
+  }, sxContentStyles);
+
+  const iconStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: "16px",
+    // Space between content and icon
+    flexShrink: 0,
+    transform: _expanded ? "rotate(180deg)" : "rotate(0deg)",
+    transition: "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)"
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "button",
+    tabIndex: _disabled ? -1 : 0,
+    "aria-expanded": _expanded,
+    "aria-disabled": _disabled,
+    style: summaryStyle,
+    onClick: handleClick,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onKeyDown: e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick(e);
+      }
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    style: contentWrapperStyle
+  }, children), expandIcon && /*#__PURE__*/React.createElement("span", {
+    style: iconStyle
+  }, expandIcon));
+});
+AccordionSummary.displayName = "AccordionSummary";
+/**
+ * AccordionDetails - Content area
+ */
+
+const AccordionDetails = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
+  let {
+    children,
+    _expanded,
+    style,
+    sx
+  } = _ref19,
+      props = _objectWithoutProperties(_ref19, _excluded19);
+
+  // If _expanded is not passed (undefined), default to showing content
+  // This handles cases where it's used outside an Accordion
+  const shouldShow = _expanded !== false;
+  if (!shouldShow) return null;
+
+  const detailsStyle = _objectSpread(_objectSpread({
+    padding: 0,
+    backgroundColor: "transparent"
+  }, style), typeof sx === "object" ? sx : {});
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: detailsStyle
+  }, props), children);
+});
+AccordionDetails.displayName = "AccordionDetails";
+/**
+ * AccordionActions - Actions area
+ */
+
+const AccordionActions = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
+  let {
+    disableSpacing,
+    children,
+    style,
+    sx
+  } = _ref20,
+      props = _objectWithoutProperties(_ref20, _excluded20);
+
+  const actionsStyle = _objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "8px",
+    gap: disableSpacing ? 0 : "8px"
+  }, style), typeof sx === "object" ? sx : {});
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: actionsStyle
+  }, props), children);
+});
+AccordionActions.displayName = "AccordionActions";
+/**
+ * ButtonGroup - Group of buttons (replaces MUI ButtonGroup)
+ */
+
+const BaseButtonGroup = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
+  let {
+    variant = "outlined",
+    color = "primary",
+    size = "medium",
+    orientation = "horizontal",
+    disabled = false,
+    fullWidth = false,
+    children,
+    style
+  } = _ref21,
+      props = _objectWithoutProperties(_ref21, _excluded21);
+
+  const groupStyle = _objectSpread(_objectSpread({
+    display: "inline-flex",
+    flexDirection: orientation === "horizontal" ? "row" : "column",
+    borderRadius: "4px"
+  }, fullWidth && {
+    width: "100%"
+  }), style);
+
+  const childArray = React.Children.toArray(children);
+  const styledChildren = childArray.map((child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const isFirst = index === 0;
+    const isLast = index === childArray.length - 1;
+    return /*#__PURE__*/React.cloneElement(child, {
+      variant,
+      color,
+      size,
+      disabled: disabled || child.props.disabled,
+      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, child.props.style), {}, {
+        borderRadius: 0
+      }, isFirst && orientation === "horizontal" && {
+        borderTopLeftRadius: "4px",
+        borderBottomLeftRadius: "4px"
+      }), isLast && orientation === "horizontal" && {
+        borderTopRightRadius: "4px",
+        borderBottomRightRadius: "4px"
+      }), isFirst && orientation === "vertical" && {
+        borderTopLeftRadius: "4px",
+        borderTopRightRadius: "4px"
+      }), isLast && orientation === "vertical" && {
+        borderBottomLeftRadius: "4px",
+        borderBottomRightRadius: "4px"
+      }), !isLast && orientation === "horizontal" && {
+        borderRight: "none"
+      }), !isLast && orientation === "vertical" && {
+        borderBottom: "none"
+      })
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "group",
+    style: groupStyle
+  }, props), styledChildren);
+});
+BaseButtonGroup.displayName = "BaseButtonGroup";
+const ButtonGroup = withSx(BaseButtonGroup);
+/**
+ * Breadcrumbs - Navigation breadcrumbs (replaces MUI Breadcrumbs)
+ */
+
+const BaseBreadcrumbs = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
+  let {
+    separator = "/",
+    maxItems = 8,
+    itemsBeforeCollapse = 1,
+    itemsAfterCollapse = 1,
+    children,
+    style
+  } = _ref22,
+      props = _objectWithoutProperties(_ref22, _excluded22);
+
+  const childArray = React.Children.toArray(children);
+
+  const breadcrumbsStyle = _objectSpread({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    padding: 0,
+    margin: 0,
+    listStyle: "none"
+  }, style);
+
+  const separatorStyle = {
+    display: "flex",
+    userSelect: "none",
+    margin: "0 8px",
+    color: "var(--secondary-text, rgba(0, 0, 0, 0.54))"
+  };
+  const items = childArray.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: index
+  }, /*#__PURE__*/React.createElement("li", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, child), index < childArray.length - 1 && /*#__PURE__*/React.createElement("li", {
+    style: separatorStyle
+  }, separator)));
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    ref: ref,
+    "aria-label": "breadcrumb"
+  }, props), /*#__PURE__*/React.createElement("ol", {
+    style: breadcrumbsStyle
+  }, items));
+});
+BaseBreadcrumbs.displayName = "BaseBreadcrumbs";
+const Breadcrumbs = withSx(BaseBreadcrumbs);
+/**
+ * Pagination - Page navigation (replaces MUI Pagination)
+ */
+
+const BasePagination = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
+  let {
+    count = 1,
+    page = 1,
+    onChange,
+    color = "primary",
+    size = "medium",
+    disabled = false,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    boundaryCount = 1,
+    style
+  } = _ref23,
+      props = _objectWithoutProperties(_ref23, _excluded23);
+
+  const {
+    colors
+  } = useTheme();
+  const colorValue = colors[color] || colors.primary;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+  const sizeMap = {
+    small: "26px",
+    medium: "32px",
+    large: "40px"
+  };
+  const buttonSize = sizeMap[size] || sizeMap.medium;
+
+  const containerStyle = _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  }, style);
+
+  const buttonStyle = isSelected => _objectSpread({
+    minWidth: buttonSize,
+    height: buttonSize,
+    padding: "0 6px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    border: "none",
+    cursor: disabled ? "default" : "pointer",
+    backgroundColor: isSelected ? mainColor : "transparent",
+    color: isSelected ? "#fff" : "var(--body-text)",
+    fontSize: "0.875rem",
+    transition: "background-color 250ms"
+  }, disabled && {
+    opacity: 0.5
+  }); // Generate page numbers to show
+
+
+  const range = (start, end) => Array.from({
+    length: end - start + 1
+  }, (_, i) => start + i);
+
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : count - 1);
+  const items = [...(showFirstButton ? ["first"] : []), "prev", ...startPages, ...(siblingsStart > boundaryCount + 2 ? ["ellipsis"] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), ...range(siblingsStart, siblingsEnd), ...(siblingsEnd < count - boundaryCount - 1 ? ["ellipsis"] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), ...endPages, "next", ...(showLastButton ? ["last"] : [])];
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    ref: ref,
+    "aria-label": "pagination",
+    style: containerStyle
+  }, props), items.map((item, index) => {
+    if (item === "ellipsis") {
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: {
+          padding: "0 4px"
+        }
+      }, "...");
+    }
+
+    if (item === "first") {
+      return /*#__PURE__*/React.createElement("button", {
+        key: "first",
+        style: buttonStyle(false),
+        onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({}, 1),
+        disabled: disabled || page === 1
+      }, "\u27EA");
+    }
+
+    if (item === "prev") {
+      return /*#__PURE__*/React.createElement("button", {
+        key: "prev",
+        style: buttonStyle(false),
+        onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({}, page - 1),
+        disabled: disabled || page === 1
+      }, "\u2039");
+    }
+
+    if (item === "next") {
+      return /*#__PURE__*/React.createElement("button", {
+        key: "next",
+        style: buttonStyle(false),
+        onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({}, page + 1),
+        disabled: disabled || page === count
+      }, "\u203A");
+    }
+
+    if (item === "last") {
+      return /*#__PURE__*/React.createElement("button", {
+        key: "last",
+        style: buttonStyle(false),
+        onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({}, count),
+        disabled: disabled || page === count
+      }, "\u27EB");
+    }
+
+    return /*#__PURE__*/React.createElement("button", {
+      key: item,
+      style: buttonStyle(item === page),
+      onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({}, item),
+      disabled: disabled
+    }, item);
+  }));
+});
+BasePagination.displayName = "BasePagination";
+const Pagination = withSx(BasePagination);
+/**
+ * SvgIcon - Wrapper for SVG icons (replaces MUI SvgIcon)
+ */
+
+const BaseSvgIcon = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
+  let {
+    children,
+    color = "inherit",
+    fontSize = "medium",
+    viewBox = "0 0 24 24",
+    titleAccess,
+    style
+  } = _ref24,
+      props = _objectWithoutProperties(_ref24, _excluded24);
+
+  const {
+    colors
+  } = useTheme();
+
+  const getColor = () => {
+    var _colors$error, _colors$primary, _colors$secondary;
+
+    if (color === "inherit") return "inherit";
+    if (color === "action") return "var(--icons-in-active, rgba(0, 0, 0, 0.54))";
+    if (color === "disabled") return "var(--disabled-text, rgba(0, 0, 0, 0.26))";
+    if (color === "error") return ((_colors$error = colors.error) === null || _colors$error === void 0 ? void 0 : _colors$error.main) || "#d32f2f";
+    if (color === "primary") return ((_colors$primary = colors.primary) === null || _colors$primary === void 0 ? void 0 : _colors$primary.main) || "#1976d2";
+    if (color === "secondary") return ((_colors$secondary = colors.secondary) === null || _colors$secondary === void 0 ? void 0 : _colors$secondary.main) || "#9c27b0";
+    return color;
+  };
+
+  const sizeMap = {
+    inherit: "inherit",
+    small: "1.25rem",
+    medium: "1.5rem",
+    large: "2.1875rem"
+  };
+
+  const iconStyle = _objectSpread({
+    userSelect: "none",
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    fill: "currentColor",
+    flexShrink: 0,
+    fontSize: sizeMap[fontSize] || fontSize,
+    color: getColor(),
+    transition: "fill 200ms"
+  }, style);
+
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    ref: ref,
+    style: iconStyle,
+    viewBox: viewBox,
+    focusable: "false",
+    "aria-hidden": !titleAccess
+  }, props), titleAccess && /*#__PURE__*/React.createElement("title", null, titleAccess), children);
+});
+BaseSvgIcon.displayName = "BaseSvgIcon";
+const SvgIcon = withSx(BaseSvgIcon);
+/**
+ * FormControl - Form field wrapper (replaces MUI FormControl)
+ */
+
+const BaseFormControl = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
+  let {
+    fullWidth = false,
+    disabled = false,
+    error = false,
+    required = false,
+    variant = "outlined",
+    size = "medium",
+    margin = "none",
+    children,
+    style
+  } = _ref25,
+      props = _objectWithoutProperties(_ref25, _excluded25);
+
+  const formControlStyle = _objectSpread(_objectSpread({
+    display: "inline-flex",
+    flexDirection: "column",
+    position: "relative",
+    minWidth: 0,
+    padding: 0,
+    margin: margin === "dense" ? "8px 0 4px" : margin === "normal" ? "16px 0 8px" : 0,
+    border: 0,
+    verticalAlign: "top"
+  }, fullWidth && {
+    width: "100%"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: formControlStyle
+  }, props), children);
+});
+BaseFormControl.displayName = "BaseFormControl";
+const FormControl = withSx(BaseFormControl);
+/**
+ * InputLabel - Label for form inputs (replaces MUI InputLabel)
+ */
+
+const BaseInputLabel = /*#__PURE__*/React.forwardRef((_ref26, ref) => {
+  var _colors$error2, _colors$primary2;
+
+  let {
+    shrink = false,
+    disabled = false,
+    error = false,
+    required = false,
+    focused = false,
+    variant = "outlined",
+    size = "medium",
+    children,
+    style
+  } = _ref26,
+      props = _objectWithoutProperties(_ref26, _excluded26);
+
+  const {
+    colors
+  } = useTheme();
+
+  const labelStyle = _objectSpread(_objectSpread({
+    color: error ? (_colors$error2 = colors.error) === null || _colors$error2 === void 0 ? void 0 : _colors$error2.main : focused ? (_colors$primary2 = colors.primary) === null || _colors$primary2 === void 0 ? void 0 : _colors$primary2.main : "var(--secondary-text, rgba(0, 0, 0, 0.6))",
+    fontSize: shrink ? "0.75rem" : "1rem",
+    lineHeight: "1.4375em",
+    letterSpacing: "0.00938em",
+    padding: 0,
+    display: "block",
+    transformOrigin: "top left",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: shrink ? "133%" : "100%",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    transform: shrink ? "translate(14px, -9px) scale(0.75)" : "translate(14px, 16px) scale(1)",
+    transition: "color 200ms, transform 200ms, max-width 200ms",
+    pointerEvents: "none"
+  }, disabled && {
+    opacity: 0.5
+  }), style);
+
+  return /*#__PURE__*/React.createElement("label", _extends({
+    ref: ref,
+    style: labelStyle
+  }, props), children, required && " *");
+});
+BaseInputLabel.displayName = "BaseInputLabel";
+const InputLabel = withSx(BaseInputLabel);
+
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, AppBar, Breadcrumbs, ButtonGroup, FormControl, ImageList, ImageListItem, InputLabel, List, ListItemAvatar, ListItemIcon, ListItemText, Pagination, SvgIcon, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Toolbar };