@xyo-network/react-property 2.77.0 → 2.77.1

package/dist/node/index.cjs

@@ -1,232 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Property: () => Property,
-  PropertyGroup: () => PropertyGroup,
-  PropertyTitle: () => PropertyTitle,
-  PropertyValue: () => PropertyValue
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/Group.tsx
-var import_material2 = require("@mui/material");
-var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_typeof = require("@xyo-network/typeof");
-
-// src/components/Title.tsx
-var import_material = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
-  const sizeVariants = {
-    full: "caption",
-    large: "caption",
-    medium: "caption",
-    small: "caption"
-  };
-  const sizeTitleHeight = {
-    full: void 0,
-    large: 32,
-    medium: 20,
-    small: 16
-  };
-  const sizeFontSize = {
-    full: 16,
-    large: 16,
-    medium: 14,
-    small: 10
-  };
-  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
-  const theme = (0, import_material.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react_flexbox.FlexRow,
-    {
-      bgcolor: theme.palette.mode === "dark" ? (0, import_material.lighten)(theme.palette.background.paper, 0.05 * elevation) : (0, import_material.darken)(theme.palette.background.paper, 0.025 * elevation),
-      alignItems: "center",
-      height: sizeTitleHeight[size],
-      justifyContent: "space-between",
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { paddingX: 1, paddingY: 0.5, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: title }) }) }),
-          tip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_quick_tip_button.QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
-        ] }),
-        more
-      ]
-    }
-  );
-};
-
-// src/components/Group.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
-  const theme = (0, import_material2.useTheme)();
-  const childrenArray = (0, import_typeof.typeOf)(children) === "array" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox2.FlexRow, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
-    childrenArray ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { children: childrenArray == null ? void 0 : childrenArray.map((child, index) => {
-      return child ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { overflow: "hidden", children })
-  ] }) });
-};
-var PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Paper, { style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupBox, { ...props, paper: false }) });
-};
-var PropertyGroup = (props) => {
-  return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupBox, { ...props });
-};
-
-// src/components/Property.tsx
-var import_material5 = require("@mui/material");
-var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_react4 = require("react");
-
-// src/components/ActionsMenu.tsx
-var import_icons_material = require("@mui/icons-material");
-var import_material3 = require("@mui/material");
-var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var PropertyActionsMenu = ({ actions, ...props }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
-  const open = !!anchorEl;
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return actions && (actions == null ? void 0 : actions.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox3.FlexRow, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material.MoreHoriz, { fontSize: "inherit" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Menu, { anchorEl, open, onClose: handleClose, children: actions == null ? void 0 : actions.map((action) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_material3.MenuItem,
-        {
-          onClick: () => {
-            var _a;
-            (_a = action == null ? void 0 : action.onClick) == null ? void 0 : _a.call(action);
-            handleClose();
-          },
-          children: action.name
-        },
-        action.name
-      );
-    }) })
-  ] }) : null;
-};
-
-// src/components/IdenticonCorner.tsx
-var import_material4 = require("@mui/material");
-var import_react_flexbox4 = require("@xylabs/react-flexbox");
-var import_react_identicon = require("@xylabs/react-identicon");
-var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var IdenticonCorner = ({ value, ...props }) => {
-  const theme = (0, import_material4.useTheme)();
-  const [parentHeight, setParentHeight] = (0, import_react2.useState)();
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    var _a, _b, _c;
-    setParentHeight((_c = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientHeight);
-  }, []);
-  const calculatedHeight = parentHeight ?? 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox4.FlexRow, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox4.FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_identicon.Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
-};
-
-// src/components/Value.tsx
-var import_react_shared = require("@xyo-network/react-shared");
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PropertyValue = (0, import_react3.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
-  return value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react_shared.EllipsizeBox,
-    {
-      typographyProps: { component: void 0, title: value == null ? void 0 : value.toString(), variant: typographyVariant },
-      width: "100%",
-      ref,
-      ...props,
-      children: value
-    }
-  );
-});
-PropertyValue.displayName = "PropertyValue";
-
-// src/components/Property.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var PropertyBox = (0, import_react4.forwardRef)(
-  ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
-    const sizeValueHeight = {
-      large: 48,
-      medium: 36,
-      small: 24
-    };
-    const sizeVariants = {
-      large: "h6",
-      medium: "body1",
-      small: "body2"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox5.FlexRow, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
-      title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        PropertyTitle,
-        {
-          tip,
-          title: required ? `${title}*` : title,
-          size,
-          more: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyActionsMenu, { actions }),
-          ...titleProps
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react_flexbox5.FlexRow,
-        {
-          pl: 1,
-          columnGap: 1,
-          justifyContent: value === void 0 ? "center" : "space-between",
-          overflow: "hidden",
-          height: sizeValueHeight[size],
-          children: [
-            children ?? value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.CircularProgress, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyValue, { value, typographyVariant: sizeVariants[size] }),
-            value === void 0 ? null : badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IdenticonCorner, { value }) : null
-          ]
-        }
-      )
-    ] });
-  }
-);
-PropertyBox.displayName = "PropertyBox";
-var PropertyPaper = (0, import_react4.forwardRef)(({ style, variant, elevation = 2, square, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Paper, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyBox, { ...props, paper: false }) });
-});
-PropertyPaper.displayName = "PropertyPaper";
-var Property = (0, import_react4.forwardRef)((props, ref) => {
-  return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyBox, { ref, ...props });
-});
-Property.displayName = "Property";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Property,
-  PropertyGroup,
-  PropertyTitle,
-  PropertyValue
-});
+"use strict";var C=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var U=(r,e)=>{for(var o in e)C(r,o,{get:e[o],enumerable:!0})},Z=(r,e,o,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of J(e))!K.call(r,t)&&t!==o&&C(r,t,{get:()=>e[t],enumerable:!(p=Y(e,t))||p.enumerable});return r};var _=r=>Z(C({},"__esModule",{value:!0}),r);var re={};U(re,{Property:()=>O,PropertyGroup:()=>ee,PropertyTitle:()=>g,PropertyValue:()=>T});module.exports=_(re);var w=require("@mui/material"),f=require("@xylabs/react-flexbox"),I=require("@xyo-network/typeof");var d=require("@mui/material"),b=require("@xylabs/react-flexbox"),S=require("@xylabs/react-quick-tip-button"),u=require("react/jsx-runtime"),g=({elevation:r=1,size:e="medium",tip:o,more:p,title:t,...a})=>{let i={full:"caption",large:"caption",medium:"caption",small:"caption"},n={full:void 0,large:32,medium:20,small:16},l={full:16,large:16,medium:14,small:10},y=l[e]<16?l[e]:16,x=(0,d.useTheme)();return(0,u.jsxs)(b.FlexRow,{bgcolor:x.palette.mode==="dark"?(0,d.lighten)(x.palette.background.paper,.05*r):(0,d.darken)(x.palette.background.paper,.025*r),alignItems:"center",height:n[e],justifyContent:"space-between",...a,children:[(0,u.jsxs)(b.FlexRow,{paddingX:1,paddingY:.5,children:[(0,u.jsx)(d.Typography,{fontWeight:500,noWrap:!0,variant:i[e],fontSize:l[e],children:(0,u.jsx)("small",{children:(0,u.jsx)("strong",{children:t})})}),o?(0,u.jsx)(S.QuickTipButton,{style:{fontSize:y},color:"inherit",title:t??"",children:o}):null]}),p]})};var s=require("react/jsx-runtime"),M=({titleProps:r,children:e,title:o,tip:p,...t})=>{let a=(0,w.useTheme)(),i=(0,I.typeOf)(e)==="array"?e:void 0;return(0,s.jsx)(f.FlexCol,{alignItems:"stretch",overflow:"hidden",...t,children:(0,s.jsxs)(f.FlexRow,{overflow:"hidden",justifyContent:"stretch",alignItems:"stretch",children:[(0,s.jsx)(g,{alignItems:"flex-start",size:"full",title:o,tip:p,...r}),i?(0,s.jsx)(f.FlexGrowRow,{children:i==null?void 0:i.map((n,l)=>n?(0,s.jsx)(f.FlexGrowRow,{borderLeft:1,borderColor:a.palette.divider,children:n},l):null)}):(0,s.jsx)(f.FlexGrowRow,{overflow:"hidden",children:e})]})})},j=({style:r,variant:e,elevation:o,square:p,...t})=>(0,s.jsx)(w.Paper,{style:{minWidth:0,overflow:"hidden",...r},variant:e,elevation:o,square:p,children:(0,s.jsx)(M,{...t,paper:!1})}),ee=r=>r.paper?(0,s.jsx)(j,{...r}):(0,s.jsx)(M,{...r});var F=require("@mui/material"),B=require("@xylabs/react-flexbox"),z=require("react");var V=require("@mui/icons-material"),c=require("@mui/material"),H=require("@xylabs/react-flexbox"),k=require("react"),P=require("react/jsx-runtime"),G=({actions:r,...e})=>{let[o,p]=(0,k.useState)(null),t=!!o,a=n=>{p(n.currentTarget)},i=()=>{p(null)};return r&&(r==null?void 0:r.length)>0?(0,P.jsxs)(H.FlexRow,{...e,children:[(0,P.jsx)(c.IconButton,{size:"small",color:"inherit",onClick:a,children:(0,P.jsx)(V.MoreHoriz,{fontSize:"inherit"})}),(0,P.jsx)(c.Menu,{anchorEl:o,open:t,onClose:i,children:r==null?void 0:r.map(n=>(0,P.jsx)(c.MenuItem,{onClick:()=>{var l;(l=n==null?void 0:n.onClick)==null||l.call(n),i()},children:n.name},n.name))})]}):null};var L=require("@mui/material"),E=require("@xylabs/react-flexbox"),N=require("@xylabs/react-identicon"),h=require("react"),R=require("react/jsx-runtime"),D=({value:r,...e})=>{let o=(0,L.useTheme)(),[p,t]=(0,h.useState)(),a=(0,h.useRef)(null);(0,h.useEffect)(()=>{var n,l,y;t((y=(l=(n=a.current)==null?void 0:n.parentElement)==null?void 0:l.parentElement)==null?void 0:y.clientHeight)},[]);let i=p??0;return(0,R.jsx)(E.FlexRow,{alignItems:"flex-start",height:"100%",children:(0,R.jsx)(E.FlexRow,{background:!0,height:i,width:i,borderLeft:`1px solid ${o.palette.divider}`,children:(0,R.jsx)("div",{ref:a,children:(0,R.jsx)(N.Identicon,{size:i*.6,value:`${r}`,sx:{padding:`${i*.2}px`},...e})})})})};var W=require("@xyo-network/react-shared"),A=require("react"),$=require("react/jsx-runtime"),T=(0,A.forwardRef)(({typographyVariant:r="body1",value:e,...o},p)=>e===void 0?null:(0,$.jsx)(W.EllipsizeBox,{typographyProps:{component:void 0,title:e==null?void 0:e.toString(),variant:r},width:"100%",ref:p,...o,children:e}));T.displayName="PropertyValue";var m=require("react/jsx-runtime"),v=(0,z.forwardRef)(({titleProps:r,title:e,value:o,children:p,size:t="medium",tip:a,actions:i,required:n,badge:l=!1,...y},x)=>{let Q={large:48,medium:36,small:24},X={large:"h6",medium:"body1",small:"body2"};return(0,m.jsxs)(B.FlexRow,{ref:x,flexDirection:"column",minWidth:0,alignItems:"stretch",overflow:"hidden",...y,children:[e===void 0?null:(0,m.jsx)(g,{tip:a,title:n?`${e}*`:e,size:t,more:(0,m.jsx)(G,{actions:i}),...r}),(0,m.jsxs)(B.FlexRow,{pl:1,columnGap:1,justifyContent:o===void 0?"center":"space-between",overflow:"hidden",height:Q[t],children:[p??o===void 0?(0,m.jsx)(F.CircularProgress,{size:16}):(0,m.jsx)(T,{value:o,typographyVariant:X[t]}),o===void 0?null:l?(0,m.jsx)(D,{value:o}):null]})]})});v.displayName="PropertyBox";var q=(0,z.forwardRef)(({style:r,variant:e,elevation:o=2,square:p,...t},a)=>(0,m.jsx)(F.Paper,{ref:a,style:{minWidth:0,overflow:"hidden",...r},variant:e,elevation:o,square:p,children:(0,m.jsx)(v,{...t,paper:!1})}));q.displayName="PropertyPaper";var O=(0,z.forwardRef)((r,e)=>r.paper?(0,m.jsx)(q,{ref:e,...r}):(0,m.jsx)(v,{ref:e,...r}));O.displayName="Property";0&&(module.exports={Property,PropertyGroup,PropertyTitle,PropertyValue});
 //# sourceMappingURL=index.cjs.map

package/dist/node/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../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":["export * from './components'\n","import { Paper, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props'\nimport { PropertyTitle } from './Title'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {\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          <FlexGrowRow>\n            {childrenArray?.map((child, index) => {\n              return child ?\n                  <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                    {child}\n                  </FlexGrowRow>\n                : null\n            })}\n          </FlexGrowRow>\n        : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {\n  return (\n    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\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 { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {\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 = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark' ?\n          lighten(theme.palette.background.paper, 0.05 * elevation)\n        : darken(theme.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          <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n            {tip}\n          </QuickTipButton>\n        : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import { CircularProgress, Paper, TypographyVariant } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu'\nimport { IdenticonCorner } from './IdenticonCorner'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'\nimport { PropertyTitle } from './Title'\nimport { PropertyValue } from './Value'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {\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 ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined ? null : (\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  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {\n  return (\n    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport { IconButton, Menu, MenuItem } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps'\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      <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    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEffect, useRef, useState } 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 [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\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.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","// eslint-disable-next-line import/no-internal-modules\nimport type { Variant } from '@mui/material/styles/createTypography'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {\n  return value === undefined ? null : (\n      <EllipsizeBox\n        typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}\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":["import_material","import_react_flexbox","import_jsx_runtime","import_material","import_react_flexbox","import_react","import_material","import_react_flexbox","import_jsx_runtime","MoreHorizIcon","import_material","import_react_flexbox","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.ts","../../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":["export * from './components'\n","import { Paper, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props'\nimport { PropertyTitle } from './Title'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {\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          <FlexGrowRow>\n            {childrenArray?.map((child, index) => {\n              return child ?\n                  <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                    {child}\n                  </FlexGrowRow>\n                : null\n            })}\n          </FlexGrowRow>\n        : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {\n  return (\n    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\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 { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {\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 = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark' ?\n          lighten(theme.palette.background.paper, 0.05 * elevation)\n        : darken(theme.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          <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n            {tip}\n          </QuickTipButton>\n        : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import { CircularProgress, Paper, TypographyVariant } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu'\nimport { IdenticonCorner } from './IdenticonCorner'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'\nimport { PropertyTitle } from './Title'\nimport { PropertyValue } from './Value'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {\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 ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined ? null : (\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  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {\n  return (\n    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport { IconButton, Menu, MenuItem } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps'\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      <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    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEffect, useRef, useState } 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 [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\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.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","// eslint-disable-next-line import/no-internal-modules\nimport type { Variant } from '@mui/material/styles/createTypography'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {\n  return value === undefined ? null : (\n      <EllipsizeBox\n        typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}\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":["src_exports","__export","Property","PropertyGroup","PropertyTitle","PropertyValue","__toCommonJS","import_material","import_react_flexbox","import_typeof","import_material","import_react_flexbox","import_react_quick_tip_button","import_jsx_runtime","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","sizeTitleHeight","sizeFontSize","quickTipSize","theme","import_jsx_runtime","PropertyGroupBox","titleProps","children","title","tip","props","theme","childrenArray","PropertyTitle","child","index","PropertyGroupPaper","style","variant","elevation","square","PropertyGroup","import_material","import_react_flexbox","import_react","import_icons_material","import_material","import_react_flexbox","import_react","import_jsx_runtime","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","open","handleClick","event","handleClose","MoreHorizIcon","action","_a","import_material","import_react_flexbox","import_react_identicon","import_react","import_jsx_runtime","IdenticonCorner","value","props","theme","parentHeight","setParentHeight","ref","_a","_b","_c","calculatedHeight","import_react_shared","import_react","import_jsx_runtime","PropertyValue","typographyVariant","value","props","ref","import_jsx_runtime","PropertyBox","titleProps","title","value","children","size","tip","actions","required","badge","props","ref","sizeValueHeight","sizeVariants","PropertyTitle","PropertyActionsMenu","PropertyValue","IdenticonCorner","PropertyPaper","style","variant","elevation","square","Property"]}

package/dist/node/index.js

@@ -1,202 +1,2 @@
-// src/components/Group.tsx
-import { Paper, useTheme as useTheme2 } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import { typeOf } from "@xyo-network/typeof";
-
-// src/components/Title.tsx
-import { darken, lighten, Typography, useTheme } from "@mui/material";
-import { FlexRow } from "@xylabs/react-flexbox";
-import { QuickTipButton } from "@xylabs/react-quick-tip-button";
-import { jsx, jsxs } from "react/jsx-runtime";
-var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
-  const sizeVariants = {
-    full: "caption",
-    large: "caption",
-    medium: "caption",
-    small: "caption"
-  };
-  const sizeTitleHeight = {
-    full: void 0,
-    large: 32,
-    medium: 20,
-    small: 16
-  };
-  const sizeFontSize = {
-    full: 16,
-    large: 16,
-    medium: 14,
-    small: 10
-  };
-  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    FlexRow,
-    {
-      bgcolor: theme.palette.mode === "dark" ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.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
-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__ */ 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 == null ? void 0 : childrenArray.map((child, index) => {
-      return child ? /* @__PURE__ */ jsx2(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: 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 { forwardRef as forwardRef2 } from "react";
-
-// src/components/ActionsMenu.tsx
-import { MoreHoriz as MoreHorizIcon } from "@mui/icons-material";
-import { IconButton, Menu, MenuItem } from "@mui/material";
-import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-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 = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return actions && (actions == null ? void 0 : 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 == null ? void 0 : actions.map((action) => {
-      return /* @__PURE__ */ jsx3(
-        MenuItem,
-        {
-          onClick: () => {
-            var _a;
-            (_a = action == null ? void 0 : action.onClick) == null ? void 0 : _a.call(action);
-            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 { useEffect, useRef, useState as useState2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var IdenticonCorner = ({ value, ...props }) => {
-  const theme = useTheme3();
-  const [parentHeight, setParentHeight] = useState2();
-  const ref = useRef(null);
-  useEffect(() => {
-    var _a, _b, _c;
-    setParentHeight((_c = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientHeight);
-  }, []);
-  const calculatedHeight = parentHeight ?? 0;
-  return /* @__PURE__ */ jsx4(FlexRow4, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ jsx4(FlexRow4, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.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 { forwardRef } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PropertyValue = forwardRef(({ typographyVariant = "body1", value, ...props }, ref) => {
-  return value === void 0 ? null : /* @__PURE__ */ jsx5(
-    EllipsizeBox,
-    {
-      typographyProps: { component: void 0, title: value == null ? void 0 : value.toString(), variant: typographyVariant },
-      width: "100%",
-      ref,
-      ...props,
-      children: value
-    }
-  );
-});
-PropertyValue.displayName = "PropertyValue";
-
-// src/components/Property.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var PropertyBox = forwardRef2(
-  ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
-    const sizeValueHeight = {
-      large: 48,
-      medium: 36,
-      small: 24
-    };
-    const sizeVariants = {
-      large: "h6",
-      medium: "body1",
-      small: "body2"
-    };
-    return /* @__PURE__ */ jsxs4(FlexRow5, { ref, 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 = forwardRef2(({ style, variant, elevation = 2, square, ...props }, ref) => {
-  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 = forwardRef2((props, ref) => {
-  return props.paper ? /* @__PURE__ */ jsx6(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ jsx6(PropertyBox, { ref, ...props });
-});
-Property.displayName = "Property";
-export {
-  Property,
-  PropertyGroup,
-  PropertyTitle,
-  PropertyValue
-};
+import{Paper as L,useTheme as N}from"@mui/material";import{FlexCol as D,FlexGrowRow as h,FlexRow as W}from"@xylabs/react-flexbox";import{typeOf as A}from"@xyo-network/typeof";import{darken as M,lighten as V,Typography as H,useTheme as k}from"@mui/material";import{FlexRow as w}from"@xylabs/react-flexbox";import{QuickTipButton as G}from"@xylabs/react-quick-tip-button";import{jsx as f,jsxs as T}from"react/jsx-runtime";var P=({elevation:e=1,size:r="medium",tip:o,more:p,title:n,...m})=>{let i={full:"caption",large:"caption",medium:"caption",small:"caption"},t={full:void 0,large:32,medium:20,small:16},l={full:16,large:16,medium:14,small:10},u=l[r]<16?l[r]:16,d=k();return T(w,{bgcolor:d.palette.mode==="dark"?V(d.palette.background.paper,.05*e):M(d.palette.background.paper,.025*e),alignItems:"center",height:t[r],justifyContent:"space-between",...m,children:[T(w,{paddingX:1,paddingY:.5,children:[f(H,{fontWeight:500,noWrap:!0,variant:i[r],fontSize:l[r],children:f("small",{children:f("strong",{children:n})})}),o?f(G,{style:{fontSize:u},color:"inherit",title:n??"",children:o}):null]}),p]})};import{jsx as a,jsxs as q}from"react/jsx-runtime";var F=({titleProps:e,children:r,title:o,tip:p,...n})=>{let m=N(),i=A(r)==="array"?r:void 0;return a(D,{alignItems:"stretch",overflow:"hidden",...n,children:q(W,{overflow:"hidden",justifyContent:"stretch",alignItems:"stretch",children:[a(P,{alignItems:"flex-start",size:"full",title:o,tip:p,...e}),i?a(h,{children:i==null?void 0:i.map((t,l)=>t?a(h,{borderLeft:1,borderColor:m.palette.divider,children:t},l):null)}):a(h,{overflow:"hidden",children:r})]})})},$=({style:e,variant:r,elevation:o,square:p,...n})=>a(L,{style:{minWidth:0,overflow:"hidden",...e},variant:r,elevation:o,square:p,children:a(F,{...n,paper:!1})}),ge=e=>e.paper?a($,{...e}):a(F,{...e});import{CircularProgress as ne,Paper as ie}from"@mui/material";import{FlexRow as E}from"@xylabs/react-flexbox";import{forwardRef as g}from"react";import{MoreHoriz as O}from"@mui/icons-material";import{IconButton as Q,Menu as X,MenuItem as Y}from"@mui/material";import{FlexRow as J}from"@xylabs/react-flexbox";import{useState as K}from"react";import{jsx as y,jsxs as U}from"react/jsx-runtime";var z=({actions:e,...r})=>{let[o,p]=K(null),n=!!o,m=t=>{p(t.currentTarget)},i=()=>{p(null)};return e&&(e==null?void 0:e.length)>0?U(J,{...r,children:[y(Q,{size:"small",color:"inherit",onClick:m,children:y(O,{fontSize:"inherit"})}),y(X,{anchorEl:o,open:n,onClose:i,children:e==null?void 0:e.map(t=>y(Y,{onClick:()=>{var l;(l=t==null?void 0:t.onClick)==null||l.call(t),i()},children:t.name},t.name))})]}):null};import{useTheme as Z}from"@mui/material";import{FlexRow as C}from"@xylabs/react-flexbox";import{Identicon as _}from"@xylabs/react-identicon";import{useEffect as j,useRef as ee,useState as re}from"react";import{jsx as c}from"react/jsx-runtime";var b=({value:e,...r})=>{let o=Z(),[p,n]=re(),m=ee(null);j(()=>{var t,l,u;n((u=(l=(t=m.current)==null?void 0:t.parentElement)==null?void 0:l.parentElement)==null?void 0:u.clientHeight)},[]);let i=p??0;return c(C,{alignItems:"flex-start",height:"100%",children:c(C,{background:!0,height:i,width:i,borderLeft:`1px solid ${o.palette.divider}`,children:c("div",{ref:m,children:c(_,{size:i*.6,value:`${e}`,sx:{padding:`${i*.2}px`},...r})})})})};import{EllipsizeBox as oe}from"@xyo-network/react-shared";import{forwardRef as te}from"react";import{jsx as pe}from"react/jsx-runtime";var x=te(({typographyVariant:e="body1",value:r,...o},p)=>r===void 0?null:pe(oe,{typographyProps:{component:void 0,title:r==null?void 0:r.toString(),variant:e},width:"100%",ref:p,...o,children:r}));x.displayName="PropertyValue";import{jsx as s,jsxs as B}from"react/jsx-runtime";var R=g(({titleProps:e,title:r,value:o,children:p,size:n="medium",tip:m,actions:i,required:t,badge:l=!1,...u},d)=>{let S={large:48,medium:36,small:24},I={large:"h6",medium:"body1",small:"body2"};return B(E,{ref:d,flexDirection:"column",minWidth:0,alignItems:"stretch",overflow:"hidden",...u,children:[r===void 0?null:s(P,{tip:m,title:t?`${r}*`:r,size:n,more:s(z,{actions:i}),...e}),B(E,{pl:1,columnGap:1,justifyContent:o===void 0?"center":"space-between",overflow:"hidden",height:S[n],children:[p??o===void 0?s(ne,{size:16}):s(x,{value:o,typographyVariant:I[n]}),o===void 0?null:l?s(b,{value:o}):null]})]})});R.displayName="PropertyBox";var v=g(({style:e,variant:r,elevation:o=2,square:p,...n},m)=>s(ie,{ref:m,style:{minWidth:0,overflow:"hidden",...e},variant:r,elevation:o,square:p,children:s(R,{...n,paper:!1})}));v.displayName="PropertyPaper";var le=g((e,r)=>e.paper?s(v,{ref:r,...e}):s(R,{ref:r,...e}));le.displayName="Property";export{le as Property,ge as PropertyGroup,P as PropertyTitle,x as PropertyValue};
 //# sourceMappingURL=index.js.map

package/dist/node/index.js.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 { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props'\nimport { PropertyTitle } from './Title'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {\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          <FlexGrowRow>\n            {childrenArray?.map((child, index) => {\n              return child ?\n                  <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                    {child}\n                  </FlexGrowRow>\n                : null\n            })}\n          </FlexGrowRow>\n        : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {\n  return (\n    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\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 { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {\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 = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark' ?\n          lighten(theme.palette.background.paper, 0.05 * elevation)\n        : darken(theme.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          <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n            {tip}\n          </QuickTipButton>\n        : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import { CircularProgress, Paper, TypographyVariant } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu'\nimport { IdenticonCorner } from './IdenticonCorner'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'\nimport { PropertyTitle } from './Title'\nimport { PropertyValue } from './Value'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {\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 ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined ? null : (\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  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {\n  return (\n    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport { IconButton, Menu, MenuItem } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps'\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      <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    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEffect, useRef, useState } 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 [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\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.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","// eslint-disable-next-line import/no-internal-modules\nimport type { Variant } from '@mui/material/styles/createTypography'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {\n  return value === undefined ? null : (\n      <EllipsizeBox\n        typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}\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","forwardRef","FlexRow","jsx","jsxs","useTheme","FlexRow","useState","jsx","jsx","jsx","jsxs","forwardRef","FlexRow","Paper"]}
+{"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 { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props'\nimport { PropertyTitle } from './Title'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {\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          <FlexGrowRow>\n            {childrenArray?.map((child, index) => {\n              return child ?\n                  <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                    {child}\n                  </FlexGrowRow>\n                : null\n            })}\n          </FlexGrowRow>\n        : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {\n  return (\n    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\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 { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { ReactNode } 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> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {\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 = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark' ?\n          lighten(theme.palette.background.paper, 0.05 * elevation)\n        : darken(theme.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          <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n            {tip}\n          </QuickTipButton>\n        : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import { CircularProgress, Paper, TypographyVariant } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu'\nimport { IdenticonCorner } from './IdenticonCorner'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'\nimport { PropertyTitle } from './Title'\nimport { PropertyValue } from './Value'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {\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 ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined ? null : (\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  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {\n  return (\n    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport { IconButton, Menu, MenuItem } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps'\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      <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    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEffect, useRef, useState } 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 [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\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.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","// eslint-disable-next-line import/no-internal-modules\nimport type { Variant } from '@mui/material/styles/createTypography'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {\n  return value === undefined ? null : (\n      <EllipsizeBox\n        typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}\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","darken","lighten","Typography","useTheme","FlexRow","QuickTipButton","jsx","jsxs","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","sizeTitleHeight","sizeFontSize","quickTipSize","theme","jsx","jsxs","PropertyGroupBox","titleProps","children","title","tip","props","theme","useTheme","childrenArray","typeOf","FlexCol","FlexRow","PropertyTitle","FlexGrowRow","child","index","PropertyGroupPaper","style","variant","elevation","square","Paper","PropertyGroup","CircularProgress","Paper","FlexRow","forwardRef","MoreHorizIcon","IconButton","Menu","MenuItem","FlexRow","useState","jsx","jsxs","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","open","handleClick","event","handleClose","action","_a","useTheme","FlexRow","Identicon","useEffect","useRef","useState","jsx","IdenticonCorner","value","props","theme","parentHeight","setParentHeight","ref","_a","_b","_c","calculatedHeight","EllipsizeBox","forwardRef","jsx","PropertyValue","typographyVariant","value","props","ref","jsx","jsxs","PropertyBox","forwardRef","titleProps","title","value","children","size","tip","actions","required","badge","props","ref","sizeValueHeight","sizeVariants","FlexRow","PropertyTitle","PropertyActionsMenu","CircularProgress","PropertyValue","IdenticonCorner","PropertyPaper","style","variant","elevation","square","Paper","Property"]}