@localstack/appinspector-ui 1.0.12 → 1.0.13

package/dist/index.js

@@ -2515,7 +2515,7 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
     {
       wrap: !hideTooltip,
       wrapperFn: (child) => /* @__PURE__ */ jsx121(Tooltip, { placement: "top", title: title ?? service, children: child }),
-      children: /* @__PURE__ */ jsx121(Icon, { height, style: { borderRadius: 6, display: "block" }, width })
+      children: /* @__PURE__ */ jsx121(Icon, { height, style: { display: "block" }, width })
     }
   );
 };
@@ -2523,37 +2523,44 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
 // src/components/cells/pill-cell.tsx
 import { Box } from "@mui/material";
 import { jsx as jsx122 } from "react/jsx-runtime";
+var defaultBackgroundColor = "background.paper";
+var defaultBorderColor = "text.secondary";
 var PillCell = ({
-  backgroundColor = "transparent",
-  borderColor = "lightgray",
+  backgroundColor = defaultBackgroundColor,
+  borderColor = defaultBorderColor,
   borderWidth = "1px",
   children,
   height = "24px",
   paddingBottom,
   paddingTop
-}) => /* @__PURE__ */ jsx122(
-  Box,
-  {
-    sx: {
-      alignItems: "center",
-      backgroundColor,
-      border: `${borderWidth} solid ${borderColor}`,
-      borderRadius: "16px",
-      display: "inline-flex",
-      height: paddingTop || paddingBottom ? "auto" : height,
-      maxWidth: "100%",
-      ...paddingTop && { paddingTop },
-      ...paddingBottom && { paddingBottom }
-    },
-    children
-  }
-);
+}) => {
+  return /* @__PURE__ */ jsx122(
+    Box,
+    {
+      sx: {
+        alignItems: "center",
+        backgroundColor,
+        borderColor,
+        borderRadius: "16px",
+        borderStyle: "solid",
+        borderWidth,
+        display: "inline-flex",
+        height: paddingTop || paddingBottom ? "auto" : height,
+        maxWidth: "100%",
+        ...paddingTop && { paddingTop },
+        ...paddingBottom && { paddingBottom },
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
 
 // src/components/cells/service-cell.tsx
 import { jsx as jsx123, jsxs as jsxs119 } from "react/jsx-runtime";
 var truncateName = (inputString, truncateLength = 15) => inputString.length > truncateLength ? `${inputString.slice(0, truncateLength - 3)}...` : inputString;
 var ServiceCell = ({
-  borderColor,
+  borderColor = defaultBorderColor,
   borderWidth,
   height = "24px",
   resource,
@@ -2568,9 +2575,9 @@ var ServiceCell = ({
       {
         sx: {
           alignItems: "center",
-          borderBottomLeftRadius: "15px",
-          borderRight: "1px solid #e0e0e0",
-          borderTopLeftRadius: "15px",
+          borderRightColor: borderColor,
+          borderRightStyle: "solid",
+          borderRightWidth: `1px`,
           display: "flex",
           height,
           justifyContent: "center",
@@ -2585,7 +2592,7 @@ var ServiceCell = ({
       Typography,
       {
         sx: {
-          borderRight: resource ? "1px solid #e0e0e0" : "none",
+          borderRight: resource ? `1px solid ${borderColor}` : "none",
           fontWeight: "bold",
           overflow: "hidden",
           padding: "1px 8px",
@@ -2604,7 +2611,7 @@ var ServiceCell = ({
         children: service
       }
     ),
-    resource && /* @__PURE__ */ jsx123(
+    resource !== void 0 && /* @__PURE__ */ jsx123(
       Typography,
       {
         sx: {
@@ -3727,7 +3734,7 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
           /* @__PURE__ */ jsx133(
             ServiceCell,
             {
-              borderColor: selected ? "black" : "lightgray",
+              borderColor: selected ? "text.primary" : "text.secondary",
               borderWidth: selected ? "1.5px" : "1px",
               height: "32px",
               resource: data.event.resource_name,