@localstack/appinspector-ui 1.0.28 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -2541,10 +2541,10 @@ var import_material3 = require("@mui/material");
2541
2541
  var import_jsx_runtime124 = require("react/jsx-runtime");
2542
2542
  var PillCell = ({
2543
2543
  backgroundColor,
2544
- borderColor,
2545
- borderWidth = "1px",
2546
2544
  children,
2547
2545
  height = "24px",
2546
+ outlineColor,
2547
+ outlineWidth = "1px",
2548
2548
  paddingBottom,
2549
2549
  paddingTop
2550
2550
  }) => {
@@ -2554,13 +2554,13 @@ var PillCell = ({
2554
2554
  sx: {
2555
2555
  alignItems: "center",
2556
2556
  backgroundColor: backgroundColor ?? ((theme) => theme.palette.background.paper),
2557
- borderColor: borderColor ?? ((theme) => theme.palette.divider),
2558
2557
  borderRadius: "16px",
2559
- borderStyle: "solid",
2560
- borderWidth,
2561
2558
  display: "inline-flex",
2562
2559
  height: paddingTop || paddingBottom ? "auto" : height,
2563
2560
  maxWidth: "100%",
2561
+ outlineColor: outlineColor ?? ((theme) => theme.palette.divider),
2562
+ outlineStyle: "solid",
2563
+ outlineWidth,
2564
2564
  ...paddingTop && { paddingTop },
2565
2565
  ...paddingBottom && { paddingBottom },
2566
2566
  overflow: "hidden"
@@ -2580,9 +2580,10 @@ var ServiceCell = ({
2580
2580
  showIcon = true,
2581
2581
  width = "32px"
2582
2582
  }) => {
2583
- const borderColor = selected ? "text.primary" : "background.dark";
2584
- const borderWidth = selected ? "2px" : void 0;
2585
- return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(PillCell, { borderColor, borderWidth, height, children: [
2583
+ const theme = (0, import_material4.useTheme)();
2584
+ const outlineColor = selected ? theme.palette.primary.light : theme.palette.text.secondary;
2585
+ const outlineWidth = selected ? "2px" : void 0;
2586
+ return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(PillCell, { height, outlineColor, outlineWidth, children: [
2586
2587
  showIcon ? /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
2587
2588
  /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
2588
2589
  import_material4.Box,
@@ -4901,6 +4902,7 @@ var TraceGraph = ({
4901
4902
  onEventSelect(node.data.event);
4902
4903
  updateSelectedNode(node.id);
4903
4904
  }, [onEventSelect, updateSelectedNode]);
4905
+ const theme = (0, import_material20.useTheme)();
4904
4906
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
4905
4907
  spans.error && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
4906
4908
  import_material20.Alert,
@@ -4931,7 +4933,13 @@ var TraceGraph = ({
4931
4933
  selectNodesOnDrag: false,
4932
4934
  children: [
4933
4935
  /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Controls, {}),
4934
- /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react20.Background, {})
4936
+ /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
4937
+ import_react20.Background,
4938
+ {
4939
+ bgColor: theme.palette.background.paper,
4940
+ color: theme.palette.text.disabled
4941
+ }
4942
+ )
4935
4943
  ]
4936
4944
  }
4937
4945
  )