@xyo-network/react-property 7.5.8 → 7.5.11

package/dist/browser/components/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACsC,kBAAkB,EACnE,MAAM,YAAY,CAAA;AAiDnB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACsC,kBAAkB,EACnE,MAAM,YAAY,CAAA;AAiDnB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAGtD,CAAA"}

package/dist/browser/components/IdenticonCorner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IdenticonCorner.d.ts","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiB1D,CAAA"}
+{"version":3,"file":"IdenticonCorner.d.ts","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAEN,MAAM,OAAO,CAAA;AAEd,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoB1D,CAAA"}

package/dist/browser/components/Title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/Title.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAIzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2DtD,CAAA"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/Title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAIzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0DtD,CAAA"}

package/dist/browser/index.mjs

@@ -1,19 +1,26 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/Group.tsx
 import { Paper, useTheme as useTheme2 } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import {
+  FlexCol,
+  FlexGrowRow,
+  FlexRow as FlexRow2
+} from "@xylabs/react-flexbox";
 import { typeOf } from "@xyo-network/typeof";
-import React2 from "react";
 
 // src/components/Title.tsx
-import { Typography, useColorScheme, useTheme } from "@mui/material";
+import { Typography, useTheme } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { QuickTipButton } from "@xylabs/react-quick-tip-button";
 import { darkenCss, useIsDark } from "@xylabs/react-theme";
-import React from "react";
-var PropertyTitle = /* @__PURE__ */ __name(({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var PropertyTitle = ({
+  elevation = 1,
+  size = "medium",
+  tip,
+  more,
+  title,
+  ...props
+}) => {
   const sizeVariants = {
     full: "caption",
     large: "caption",
@@ -34,169 +41,172 @@ var PropertyTitle = /* @__PURE__ */ __name(({ elevation = 1, size = "medium", ti
   };
   const quickTipSize = Math.min(sizeFontSize[size], 16);
   const theme = useTheme();
-  const {} = useColorScheme();
   const isDark = useIsDark();
-  return /* @__PURE__ */ React.createElement(FlexRow, {
-    bgcolor: isDark ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation) : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation),
-    alignItems: "center",
-    height: sizeTitleHeight[size],
-    justifyContent: "space-between",
-    ...props
-  }, /* @__PURE__ */ React.createElement(FlexRow, {
-    paddingX: 1,
-    paddingY: 0.5
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    fontWeight: 500,
-    noWrap: true,
-    variant: sizeVariants[size],
-    fontSize: sizeFontSize[size]
-  }, /* @__PURE__ */ React.createElement("small", null, /* @__PURE__ */ React.createElement("strong", null, title))), tip ? /* @__PURE__ */ React.createElement(QuickTipButton, {
-    style: {
-      fontSize: quickTipSize
-    },
-    color: "inherit",
-    title: title ?? ""
-  }, tip) : null), more);
-}, "PropertyTitle");
+  return /* @__PURE__ */ jsxs(
+    FlexRow,
+    {
+      bgcolor: isDark ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation) : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation),
+      alignItems: "center",
+      height: sizeTitleHeight[size],
+      justifyContent: "space-between",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(FlexRow, { paddingX: 1, paddingY: 0.5, children: [
+          /* @__PURE__ */ jsx(Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("strong", { children: title }) }) }),
+          tip ? /* @__PURE__ */ jsx(QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
+        ] }),
+        more
+      ]
+    }
+  );
+};
 
 // src/components/Group.tsx
-var PropertyGroupBox = /* @__PURE__ */ __name(({ titleProps, children, title, tip, ...props }) => {
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PropertyGroupBox = ({
+  titleProps,
+  children,
+  title,
+  tip,
+  ...props
+}) => {
   const theme = useTheme2();
   const childrenArray = typeOf(children) === "array" ? children : void 0;
-  return /* @__PURE__ */ React2.createElement(FlexCol, {
-    alignItems: "stretch",
-    overflow: "hidden",
-    ...props
-  }, /* @__PURE__ */ React2.createElement(FlexRow2, {
-    overflow: "hidden",
-    justifyContent: "stretch",
-    alignItems: "stretch"
-  }, /* @__PURE__ */ React2.createElement(PropertyTitle, {
-    alignItems: "flex-start",
-    size: "full",
-    title,
-    tip,
-    ...titleProps
-  }), childrenArray ? /* @__PURE__ */ React2.createElement(FlexGrowRow, null, childrenArray?.map((child, index) => {
-    return child ? /* @__PURE__ */ React2.createElement(FlexGrowRow, {
-      key: index,
-      borderLeft: 1,
-      borderColor: theme.vars.palette.divider
-    }, child) : null;
-  })) : /* @__PURE__ */ React2.createElement(FlexGrowRow, {
-    overflow: "hidden"
-  }, children)));
-}, "PropertyGroupBox");
-var PropertyGroupPaper = /* @__PURE__ */ __name(({ style, variant, elevation, square, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(Paper, {
-    style: {
-      minWidth: 0,
-      overflow: "hidden",
-      ...style
-    },
-    variant,
-    elevation,
-    square
-  }, /* @__PURE__ */ React2.createElement(PropertyGroupBox, {
-    ...props,
-    paper: false
-  }));
-}, "PropertyGroupPaper");
-var PropertyGroup = /* @__PURE__ */ __name((props) => {
-  return props.paper ? /* @__PURE__ */ React2.createElement(PropertyGroupPaper, props) : /* @__PURE__ */ React2.createElement(PropertyGroupBox, props);
-}, "PropertyGroup");
+  return /* @__PURE__ */ jsx2(FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ jsxs2(FlexRow2, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx2(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
+    childrenArray ? /* @__PURE__ */ jsx2(FlexGrowRow, { children: childrenArray?.map((child, index) => {
+      return child ? /* @__PURE__ */ jsx2(FlexGrowRow, { borderLeft: 1, borderColor: theme.vars.palette.divider, children: child }, child.key ?? `group-child-${index}`) : null;
+    }) }) : /* @__PURE__ */ jsx2(FlexGrowRow, { overflow: "hidden", children })
+  ] }) });
+};
+var PropertyGroupPaper = ({
+  style,
+  variant,
+  elevation,
+  square,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    Paper,
+    {
+      style: {
+        minWidth: 0,
+        overflow: "hidden",
+        ...style
+      },
+      variant,
+      elevation,
+      square,
+      children: /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props, paper: false })
+    }
+  );
+};
+var PropertyGroup = (props) => {
+  return props.paper ? /* @__PURE__ */ jsx2(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props });
+};
 
 // src/components/Property.tsx
 import { CircularProgress, Paper as Paper2 } from "@mui/material";
 import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
-import React6 from "react";
 
 // src/components/ActionsMenu.tsx
 import { MoreHoriz as MoreHorizIcon } from "@mui/icons-material";
-import { IconButton, Menu, MenuItem } from "@mui/material";
+import {
+  IconButton,
+  Menu,
+  MenuItem
+} from "@mui/material";
 import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import React3, { useState } from "react";
-var PropertyActionsMenu = /* @__PURE__ */ __name(({ actions, ...props }) => {
+import { useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var PropertyActionsMenu = ({ actions, ...props }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = !!anchorEl;
-  const handleClick = /* @__PURE__ */ __name((event) => {
+  const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
-  }, "handleClick");
-  const handleClose = /* @__PURE__ */ __name(() => {
+  };
+  const handleClose = () => {
     setAnchorEl(null);
-  }, "handleClose");
-  return actions && actions?.length > 0 ? /* @__PURE__ */ React3.createElement(FlexRow3, props, /* @__PURE__ */ React3.createElement(IconButton, {
-    size: "small",
-    color: "inherit",
-    onClick: handleClick
-  }, /* @__PURE__ */ React3.createElement(MoreHorizIcon, {
-    fontSize: "inherit"
-  })), /* @__PURE__ */ React3.createElement(Menu, {
-    anchorEl,
-    open,
-    onClose: handleClose
-  }, actions?.map((action) => {
-    return /* @__PURE__ */ React3.createElement(MenuItem, {
-      key: action.name,
-      onClick: /* @__PURE__ */ __name(() => {
-        action?.onClick?.();
-        handleClose();
-      }, "onClick")
-    }, action.name);
-  }))) : null;
-}, "PropertyActionsMenu");
+  };
+  return actions && actions?.length > 0 ? /* @__PURE__ */ jsxs3(FlexRow3, { ...props, children: [
+    /* @__PURE__ */ jsx3(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ jsx3(MoreHorizIcon, { fontSize: "inherit" }) }),
+    /* @__PURE__ */ jsx3(Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
+      return /* @__PURE__ */ jsx3(
+        MenuItem,
+        {
+          onClick: () => {
+            action?.onClick?.();
+            handleClose();
+          },
+          children: action.name
+        },
+        action.name
+      );
+    }) })
+  ] }) : null;
+};
 
 // src/components/IdenticonCorner.tsx
 import { useTheme as useTheme3 } from "@mui/material";
 import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
 import { Identicon } from "@xylabs/react-identicon";
-import React4, { useMemo, useRef } from "react";
-var IdenticonCorner = /* @__PURE__ */ __name(({ value, ...props }) => {
+import {
+  useLayoutEffect,
+  useRef,
+  useState as useState2
+} from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IdenticonCorner = ({ value, ...props }) => {
   const theme = useTheme3();
   const ref = useRef(null);
-  const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [
-    ref.current
-  ]);
-  const calculatedHeight = parentHeight ?? 0;
-  return /* @__PURE__ */ React4.createElement(FlexRow4, {
-    alignItems: "flex-start",
-    height: "100%"
-  }, /* @__PURE__ */ React4.createElement(FlexRow4, {
-    background: true,
-    height: calculatedHeight,
-    width: calculatedHeight,
-    borderLeft: `1px solid ${theme.vars.palette.divider}`
-  }, /* @__PURE__ */ React4.createElement("div", {
-    ref
-  }, /* @__PURE__ */ React4.createElement(Identicon, {
-    size: calculatedHeight * 0.6,
-    value: `${value}`,
-    sx: {
-      padding: `${calculatedHeight * 0.2}px`
-    },
-    ...props
-  }))));
-}, "IdenticonCorner");
+  const [calculatedHeight, setCalculatedHeight] = useState2(0);
+  useLayoutEffect(() => {
+    const height = ref.current?.parentElement?.parentElement?.clientHeight ?? 0;
+    setCalculatedHeight(height);
+  }, []);
+  return /* @__PURE__ */ jsx4(FlexRow4, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ jsx4(FlexRow4, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.vars.palette.divider}`, children: /* @__PURE__ */ jsx4("div", { ref, children: /* @__PURE__ */ jsx4(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
+};
 
 // src/components/Value.tsx
 import { EllipsizeBox } from "@xyo-network/react-shared";
-import React5 from "react";
-var PropertyValue = /* @__PURE__ */ __name(({ ref, typographyVariant = "body1", value, ...props }) => {
-  return value === void 0 ? null : /* @__PURE__ */ React5.createElement(EllipsizeBox, {
-    typographyProps: {
-      component: void 0,
-      title: value?.toString(),
-      variant: typographyVariant
-    },
-    width: "100%",
-    ref,
-    ...props
-  }, value);
-}, "PropertyValue");
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PropertyValue = ({
+  ref,
+  typographyVariant = "body1",
+  value,
+  ...props
+}) => {
+  return value === void 0 ? null : /* @__PURE__ */ jsx5(
+    EllipsizeBox,
+    {
+      typographyProps: {
+        component: void 0,
+        title: value?.toString(),
+        variant: typographyVariant
+      },
+      width: "100%",
+      ref,
+      ...props,
+      children: value
+    }
+  );
+};
 PropertyValue.displayName = "PropertyValue";
 
 // src/components/Property.tsx
-var PropertyBox = /* @__PURE__ */ __name(({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }) => {
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var PropertyBox = ({
+  titleProps,
+  title,
+  value,
+  children,
+  size = "medium",
+  tip,
+  actions,
+  required,
+  badge = false,
+  ...props
+}) => {
   const sizeValueHeight = {
     large: 48,
     medium: 36,
@@ -207,56 +217,62 @@ var PropertyBox = /* @__PURE__ */ __name(({ titleProps, title, value, children,
     medium: "body1",
     small: "body2"
   };
-  return /* @__PURE__ */ React6.createElement(FlexRow5, {
-    flexDirection: "column",
-    minWidth: 0,
-    alignItems: "stretch",
-    overflow: "hidden",
-    ...props
-  }, title === void 0 ? null : /* @__PURE__ */ React6.createElement(PropertyTitle, {
-    tip,
-    title: required ? `${title}*` : title,
-    size,
-    more: /* @__PURE__ */ React6.createElement(PropertyActionsMenu, {
-      actions
-    }),
-    ...titleProps
-  }), /* @__PURE__ */ React6.createElement(FlexRow5, {
-    pl: 1,
-    columnGap: 1,
-    justifyContent: value === void 0 ? "center" : "space-between",
-    overflow: "hidden",
-    height: sizeValueHeight[size]
-  }, children ?? (value === void 0 ? /* @__PURE__ */ React6.createElement(CircularProgress, {
-    size: 16
-  }) : /* @__PURE__ */ React6.createElement(PropertyValue, {
-    value,
-    typographyVariant: sizeVariants[size]
-  })), value === void 0 ? null : badge ? /* @__PURE__ */ React6.createElement(IdenticonCorner, {
-    value
-  }) : null));
-}, "PropertyBox");
+  return /* @__PURE__ */ jsxs4(FlexRow5, { flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
+    title === void 0 ? null : /* @__PURE__ */ jsx6(
+      PropertyTitle,
+      {
+        tip,
+        title: required ? `${title}*` : title,
+        size,
+        more: /* @__PURE__ */ jsx6(PropertyActionsMenu, { actions }),
+        ...titleProps
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      FlexRow5,
+      {
+        pl: 1,
+        columnGap: 1,
+        justifyContent: value === void 0 ? "center" : "space-between",
+        overflow: "hidden",
+        height: sizeValueHeight[size],
+        children: [
+          children ?? (value === void 0 ? /* @__PURE__ */ jsx6(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx6(PropertyValue, { value, typographyVariant: sizeVariants[size] })),
+          value === void 0 ? null : badge ? /* @__PURE__ */ jsx6(IdenticonCorner, { value }) : null
+        ]
+      }
+    )
+  ] });
+};
 PropertyBox.displayName = "PropertyBox";
-var PropertyPaper = /* @__PURE__ */ __name(({ ref, style, variant, elevation = 2, square, ...props }) => {
-  return /* @__PURE__ */ React6.createElement(Paper2, {
-    ref,
-    style: {
-      minWidth: 0,
-      overflow: "hidden",
-      ...style
-    },
-    variant,
-    elevation,
-    square
-  }, /* @__PURE__ */ React6.createElement(PropertyBox, {
-    ...props,
-    paper: false
-  }));
-}, "PropertyPaper");
+var PropertyPaper = ({
+  ref,
+  style,
+  variant,
+  elevation = 2,
+  square,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx6(
+    Paper2,
+    {
+      ref,
+      style: {
+        minWidth: 0,
+        overflow: "hidden",
+        ...style
+      },
+      variant,
+      elevation,
+      square,
+      children: /* @__PURE__ */ jsx6(PropertyBox, { ...props, paper: false })
+    }
+  );
+};
 PropertyPaper.displayName = "PropertyPaper";
-var Property = /* @__PURE__ */ __name(({ ...props }) => {
-  return props.paper ? /* @__PURE__ */ React6.createElement(PropertyPaper, props) : /* @__PURE__ */ React6.createElement(PropertyBox, props);
-}, "Property");
+var Property = ({ ...props }) => {
+  return props.paper ? /* @__PURE__ */ jsx6(PropertyPaper, { ...props }) : /* @__PURE__ */ jsx6(PropertyBox, { ...props });
+};
 Property.displayName = "Property";
 export {
   Property,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport type {\n  PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({\n  titleProps, children, title, tip, ...props\n}) => {\n  const theme = useTheme()\n  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n  return (\n    <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n        <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n        {childrenArray\n          ? (\n              <FlexGrowRow>\n                {childrenArray?.map((child, index) => {\n                  return child\n                    ? (\n                        <FlexGrowRow key={index} borderLeft={1} borderColor={theme.vars.palette.divider}>\n                          {child}\n                        </FlexGrowRow>\n                      )\n                    : null\n                })}\n              </FlexGrowRow>\n            )\n          : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({\n  style, variant, elevation, square, ...props\n}) => {\n  return (\n    <Paper\n      style={{\n        minWidth: 0, overflow: 'hidden', ...style,\n      }}\n      variant={variant}\n      elevation={elevation}\n      square={square}\n    >\n      <PropertyGroupBox {...props} paper={false} />\n    </Paper>\n  )\n}\n\nexport const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {\n  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />\n}\n","import type { TypographyVariant } from '@mui/material'\nimport {\n  Typography, useColorScheme, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { darkenCss, useIsDark } from '@xylabs/react-theme'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport type TitleSizeProp = SizeProp | 'full'\n\nexport interface PropertyTitleProps extends FlexBoxProps {\n  elevation?: number\n  more?: ReactNode\n  size?: TitleSizeProp\n  tip?: ReactNode\n  title?: string\n}\n\nexport const PropertyTitle: React.FC<PropertyTitleProps> = ({\n  elevation = 1, size = 'medium', tip, more, title, ...props\n}) => {\n  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {\n    full: 'caption',\n    large: 'caption',\n    medium: 'caption',\n    small: 'caption',\n  }\n\n  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {\n    full: undefined,\n    large: 32,\n    medium: 20,\n    small: 16,\n  }\n\n  const sizeFontSize: Record<TitleSizeProp, number> = {\n    full: 16,\n    large: 16,\n    medium: 14,\n    small: 10,\n  }\n\n  const quickTipSize = Math.min(sizeFontSize[size], 16)\n\n  const theme = useTheme()\n  const {} = useColorScheme()\n  const isDark = useIsDark()\n\n  return (\n    <FlexRow\n      bgcolor={\n        isDark\n          ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation)\n          : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation)\n      }\n      alignItems=\"center\"\n      height={sizeTitleHeight[size]}\n      justifyContent=\"space-between\"\n      {...props}\n    >\n      <FlexRow paddingX={1} paddingY={0.5}>\n        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n          <small>\n            <strong>{title}</strong>\n          </small>\n        </Typography>\n        {tip\n          ? (\n              <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n                {tip}\n              </QuickTipButton>\n            )\n          : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport { CircularProgress, Paper } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport type {\n  PropertyBoxProps, PropertyPaperProps, PropertyProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\n\nconst PropertyBox: React.FC<PropertyBoxProps> = ({\n  titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props\n}) => {\n  const sizeValueHeight: Record<SizeProp, number> = {\n    large: 48,\n    medium: 36,\n    small: 24,\n  }\n\n  const sizeVariants: Record<SizeProp, TypographyVariant> = {\n    large: 'h6',\n    medium: 'body1',\n    small: 'body2',\n  }\n\n  return (\n    <FlexRow flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      {title === undefined\n        ? null\n        : (\n            <PropertyTitle\n              tip={tip}\n              title={required ? `${title}*` : title}\n              size={size}\n              more={<PropertyActionsMenu actions={actions} />}\n              {...titleProps}\n            />\n          )}\n      <FlexRow\n        pl={1}\n        columnGap={1}\n        justifyContent={value === undefined ? 'center' : 'space-between'}\n        overflow=\"hidden\"\n        height={sizeValueHeight[size]}\n      >\n        {children ?? ((value === undefined)\n          ? <CircularProgress size={16} />\n          : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />)}\n        {value === undefined\n          ? null\n          : badge\n            ? <IdenticonCorner value={value} />\n            : null}\n      </FlexRow>\n    </FlexRow>\n  )\n}\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper: React.FC<PropertyPaperProps> = ({\n  ref, style, variant, elevation = 2, square, ...props\n}) => {\n  return (\n    <Paper\n      ref={ref}\n      style={{\n        minWidth: 0, overflow: 'hidden', ...style,\n      }}\n      variant={variant}\n      elevation={elevation}\n      square={square}\n    >\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n}\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property: React.FC<PropertyProps> = ({ ...props }) => {\n  return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />\n}\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport {\n  IconButton, Menu, MenuItem,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport type { PropertyActionsProps } from './ActionsProps.ts'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = !!anchorEl\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return actions && actions?.length > 0\n    ? (\n        <FlexRow {...props}>\n          <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n            <MoreHorizIcon fontSize=\"inherit\" />\n          </IconButton>\n          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n            {actions?.map((action) => {\n              return (\n                <MenuItem\n                  key={action.name}\n                  onClick={() => {\n                    action?.onClick?.()\n                    handleClose()\n                  }}\n                >\n                  {action.name}\n                </MenuItem>\n              )\n            })}\n          </Menu>\n        </FlexRow>\n      )\n    : null\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, { useMemo, useRef } from 'react'\n\nexport interface IdenticonCornerProps extends FlexBoxProps {\n  value?: string | number | boolean | null\n}\n\nexport const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {\n  const theme = useTheme()\n  const ref = useRef<HTMLDivElement>(null)\n\n  const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [ref.current])\n\n  const calculatedHeight = parentHeight ?? 0\n\n  return (\n    <FlexRow alignItems=\"flex-start\" height=\"100%\">\n      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.vars.palette.divider}`}>\n        <div ref={ref}>\n          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />\n        </div>\n      </FlexRow>\n    </FlexRow>\n  )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport type { EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { EllipsizeBox } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface PropertyValueProps extends EllipsizeBoxProps {\n  typographyVariant?: TypographyVariant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = ({\n  ref, typographyVariant = 'body1', value, ...props\n}: PropertyValueProps) => {\n  return value === undefined\n    ? null\n    : (\n        <EllipsizeBox\n          typographyProps={{\n            component: undefined, title: value?.toString(), variant: typographyVariant,\n          }}\n          width=\"100%\"\n          ref={ref}\n          {...props}\n        >\n          {value}\n        </EllipsizeBox>\n      )\n}\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["Paper","useTheme","FlexCol","FlexGrowRow","FlexRow","typeOf","React","Typography","useColorScheme","useTheme","FlexRow","QuickTipButton","darkenCss","useIsDark","React","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","full","large","medium","small","sizeTitleHeight","undefined","sizeFontSize","quickTipSize","Math","min","theme","useTheme","useColorScheme","isDark","useIsDark","FlexRow","bgcolor","darkenCss","vars","palette","background","paper","alignItems","height","justifyContent","paddingX","paddingY","Typography","fontWeight","noWrap","variant","fontSize","strong","QuickTipButton","style","color","PropertyGroupBox","titleProps","children","title","tip","props","theme","useTheme","childrenArray","typeOf","undefined","React","FlexCol","alignItems","overflow","FlexRow","justifyContent","PropertyTitle","size","FlexGrowRow","map","child","index","key","borderLeft","borderColor","vars","palette","divider","PropertyGroupPaper","style","variant","elevation","square","Paper","minWidth","paper","PropertyGroup","CircularProgress","Paper","FlexRow","React","MoreHoriz","MoreHorizIcon","IconButton","Menu","MenuItem","FlexRow","React","useState","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","useState","open","handleClick","event","currentTarget","handleClose","length","React","FlexRow","IconButton","size","color","onClick","MoreHorizIcon","fontSize","Menu","onClose","map","action","MenuItem","key","name","useTheme","FlexRow","Identicon","React","useMemo","useRef","IdenticonCorner","value","props","theme","useTheme","ref","useRef","parentHeight","useMemo","current","parentElement","clientHeight","calculatedHeight","React","FlexRow","alignItems","height","background","width","borderLeft","vars","palette","divider","div","Identicon","size","sx","padding","EllipsizeBox","React","PropertyValue","ref","typographyVariant","value","props","undefined","React","EllipsizeBox","typographyProps","component","title","toString","variant","width","displayName","PropertyBox","titleProps","title","value","children","size","tip","actions","required","badge","props","sizeValueHeight","large","medium","small","sizeVariants","React","FlexRow","flexDirection","minWidth","alignItems","overflow","undefined","PropertyTitle","more","PropertyActionsMenu","pl","columnGap","justifyContent","height","CircularProgress","PropertyValue","typographyVariant","IdenticonCorner","displayName","PropertyPaper","ref","style","variant","elevation","square","Paper","paper","Property"]}
+{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport type {\n  PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({\n  titleProps, children, title, tip, ...props\n}) => {\n  const theme = useTheme()\n  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n  return (\n    <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n        <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n        {childrenArray\n          ? (\n              <FlexGrowRow>\n                {childrenArray?.map((child, index) => {\n                  return child\n                    ? (\n                        <FlexGrowRow key={child.key ?? `group-child-${index}`} borderLeft={1} borderColor={theme.vars.palette.divider}>\n                          {child}\n                        </FlexGrowRow>\n                      )\n                    : null\n                })}\n              </FlexGrowRow>\n            )\n          : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({\n  style, variant, elevation, square, ...props\n}) => {\n  return (\n    <Paper\n      style={{\n        minWidth: 0, overflow: 'hidden', ...style,\n      }}\n      variant={variant}\n      elevation={elevation}\n      square={square}\n    >\n      <PropertyGroupBox {...props} paper={false} />\n    </Paper>\n  )\n}\n\nexport const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {\n  // eslint-disable-next-line react-x/prefer-destructuring-assignment\n  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />\n}\n","import type { TypographyVariant } from '@mui/material'\nimport { Typography, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { darkenCss, useIsDark } from '@xylabs/react-theme'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport type TitleSizeProp = SizeProp | 'full'\n\nexport interface PropertyTitleProps extends FlexBoxProps {\n  elevation?: number\n  more?: ReactNode\n  size?: TitleSizeProp\n  tip?: ReactNode\n  title?: string\n}\n\nexport const PropertyTitle: React.FC<PropertyTitleProps> = ({\n  elevation = 1, size = 'medium', tip, more, title, ...props\n}) => {\n  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {\n    full: 'caption',\n    large: 'caption',\n    medium: 'caption',\n    small: 'caption',\n  }\n\n  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {\n    full: undefined,\n    large: 32,\n    medium: 20,\n    small: 16,\n  }\n\n  const sizeFontSize: Record<TitleSizeProp, number> = {\n    full: 16,\n    large: 16,\n    medium: 14,\n    small: 10,\n  }\n\n  const quickTipSize = Math.min(sizeFontSize[size], 16)\n\n  const theme = useTheme()\n  const isDark = useIsDark()\n\n  return (\n    <FlexRow\n      bgcolor={\n        isDark\n          ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation)\n          : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation)\n      }\n      alignItems=\"center\"\n      height={sizeTitleHeight[size]}\n      justifyContent=\"space-between\"\n      {...props}\n    >\n      <FlexRow paddingX={1} paddingY={0.5}>\n        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n          <small>\n            <strong>{title}</strong>\n          </small>\n        </Typography>\n        {tip\n          ? (\n              <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n                {tip}\n              </QuickTipButton>\n            )\n          : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport { CircularProgress, Paper } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport type {\n  PropertyBoxProps, PropertyPaperProps, PropertyProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\n\nconst PropertyBox: React.FC<PropertyBoxProps> = ({\n  titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props\n}) => {\n  const sizeValueHeight: Record<SizeProp, number> = {\n    large: 48,\n    medium: 36,\n    small: 24,\n  }\n\n  const sizeVariants: Record<SizeProp, TypographyVariant> = {\n    large: 'h6',\n    medium: 'body1',\n    small: 'body2',\n  }\n\n  return (\n    <FlexRow flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      {title === undefined\n        ? null\n        : (\n            <PropertyTitle\n              tip={tip}\n              title={required ? `${title}*` : title}\n              size={size}\n              more={<PropertyActionsMenu actions={actions} />}\n              {...titleProps}\n            />\n          )}\n      <FlexRow\n        pl={1}\n        columnGap={1}\n        justifyContent={value === undefined ? 'center' : 'space-between'}\n        overflow=\"hidden\"\n        height={sizeValueHeight[size]}\n      >\n        {children ?? ((value === undefined)\n          ? <CircularProgress size={16} />\n          : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />)}\n        {value === undefined\n          ? null\n          : badge\n            ? <IdenticonCorner value={value} />\n            : null}\n      </FlexRow>\n    </FlexRow>\n  )\n}\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper: React.FC<PropertyPaperProps> = ({\n  ref, style, variant, elevation = 2, square, ...props\n}) => {\n  return (\n    <Paper\n      ref={ref}\n      style={{\n        minWidth: 0, overflow: 'hidden', ...style,\n      }}\n      variant={variant}\n      elevation={elevation}\n      square={square}\n    >\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n}\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property: React.FC<PropertyProps> = ({ ...props }) => {\n  return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />\n}\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport {\n  IconButton, Menu, MenuItem,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport type { PropertyActionsProps } from './ActionsProps.ts'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = !!anchorEl\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return actions && actions?.length > 0\n    ? (\n        <FlexRow {...props}>\n          <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n            <MoreHorizIcon fontSize=\"inherit\" />\n          </IconButton>\n          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n            {actions?.map((action) => {\n              return (\n                <MenuItem\n                  key={action.name}\n                  onClick={() => {\n                    action?.onClick?.()\n                    handleClose()\n                  }}\n                >\n                  {action.name}\n                </MenuItem>\n              )\n            })}\n          </Menu>\n        </FlexRow>\n      )\n    : null\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, {\n  useLayoutEffect, useRef, useState,\n} from 'react'\n\nexport interface IdenticonCornerProps extends FlexBoxProps {\n  value?: string | number | boolean | null\n}\n\nexport const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {\n  const theme = useTheme()\n  const ref = useRef<HTMLDivElement>(null)\n  const [calculatedHeight, setCalculatedHeight] = useState(0)\n\n  useLayoutEffect(() => {\n    const height = ref.current?.parentElement?.parentElement?.clientHeight ?? 0\n    // eslint-disable-next-line react-x/set-state-in-effect\n    setCalculatedHeight(height)\n  }, [])\n\n  return (\n    <FlexRow alignItems=\"flex-start\" height=\"100%\">\n      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.vars.palette.divider}`}>\n        <div ref={ref}>\n          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />\n        </div>\n      </FlexRow>\n    </FlexRow>\n  )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport type { EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { EllipsizeBox } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface PropertyValueProps extends EllipsizeBoxProps {\n  typographyVariant?: TypographyVariant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = ({\n  ref, typographyVariant = 'body1', value, ...props\n}: PropertyValueProps) => {\n  return value === undefined\n    ? null\n    : (\n        <EllipsizeBox\n          typographyProps={{\n            component: undefined, title: value?.toString(), variant: typographyVariant,\n          }}\n          width=\"100%\"\n          ref={ref}\n          {...props}\n        >\n          {value}\n        </EllipsizeBox>\n      )\n}\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["useTheme","FlexRow","jsx","jsxs","useTheme","FlexRow","Paper","FlexRow","FlexRow","jsx","jsxs","useTheme","FlexRow","useState","jsx","jsx","jsx","jsxs","FlexRow","Paper"]}