@xyo-network/react-property 2.64.0-rc.7 → 2.64.1

package/dist/browser/components/Action.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/components/Action.ts
+var Action_exports = {};
+module.exports = __toCommonJS(Action_exports);
+//# sourceMappingURL=Action.cjs.map

package/dist/browser/components/Action.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Action.ts"],"sourcesContent":["import { ReactNode } from 'react'\n\nexport interface PropertyAction {\n  disabled?: boolean\n  icon?: ReactNode\n  name: string\n  onClick?: () => void\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/browser/components/Action.d.cts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface PropertyAction {
+    disabled?: boolean;
+    icon?: ReactNode;
+    name: string;
+    onClick?: () => void;
+}
+//# sourceMappingURL=Action.d.ts.map

package/dist/browser/components/Action.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}

package/dist/browser/components/Actions.cjs

@@ -0,0 +1,38 @@
+"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/components/Actions.tsx
+var Actions_exports = {};
+__export(Actions_exports, {
+  PropertyActions: () => PropertyActions
+});
+module.exports = __toCommonJS(Actions_exports);
+var import_material = require("@mui/material");
+var import_react_button = require("@xylabs/react-button");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PropertyActions = ({ buttons = false, actions, ...props }) => {
+  if (actions) {
+    return (actions?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { gap: 1, ...props, children: actions.map((action, index) => {
+      return action.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", color: "inherit", onClick: action.onClick, children: action.icon }, index) : buttons ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_button.ButtonEx, { paddingY: 0, color: "primary", size: "small", disabled: action.disabled, onClick: action.onClick, variant: "contained", children: action.name }, index) : null;
+    }) }) : null;
+  }
+  return null;
+};
+//# sourceMappingURL=Actions.cjs.map

package/dist/{node/components/Actions.mjs.map → browser/components/Actions.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Actions.tsx"],"sourcesContent":["import { IconButton } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { PropertyActionsProps } from './ActionsProps'\n\nexport const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {\n  if (actions) {\n    return (actions?.length ?? 0) > 0 ? (\n      <FlexRow gap={1} {...props}>\n        {actions.map((action, index) => {\n          return action.icon ? (\n            <IconButton size=\"small\" key={index} color=\"inherit\" onClick={action.onClick}>\n              {action.icon}\n            </IconButton>\n          ) : buttons ? (\n            <ButtonEx paddingY={0} color=\"primary\" key={index} size=\"small\" disabled={action.disabled} onClick={action.onClick} variant=\"contained\">\n              {action.name}\n            </ButtonEx>\n          ) : null\n        })}\n      </FlexRow>\n    ) : null\n  }\n  return null\n}\n"],"mappings":"AAYY;AAZZ,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAIjB,MAAM,kBAAkD,CAAC,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,MAAM;AACzG,MAAI,SAAS;AACX,YAAQ,SAAS,UAAU,KAAK,IAC9B,oBAAC,WAAQ,KAAK,GAAI,GAAG,OAClB,kBAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,aAAO,OAAO,OACZ,oBAAC,cAAW,MAAK,SAAoB,OAAM,WAAU,SAAS,OAAO,SAClE,iBAAO,QADoB,KAE9B,IACE,UACF,oBAAC,YAAS,UAAU,GAAG,OAAM,WAAsB,MAAK,SAAQ,UAAU,OAAO,UAAU,SAAS,OAAO,SAAS,SAAQ,aACzH,iBAAO,QADkC,KAE5C,IACE;AAAA,IACN,CAAC,GACH,IACE;AAAA,EACN;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/components/Actions.tsx"],"sourcesContent":["import { IconButton } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { PropertyActionsProps } from './ActionsProps'\n\nexport const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {\n  if (actions) {\n    return (actions?.length ?? 0) > 0 ? (\n      <FlexRow gap={1} {...props}>\n        {actions.map((action, index) => {\n          return action.icon ? (\n            <IconButton size=\"small\" key={index} color=\"inherit\" onClick={action.onClick}>\n              {action.icon}\n            </IconButton>\n          ) : buttons ? (\n            <ButtonEx paddingY={0} color=\"primary\" key={index} size=\"small\" disabled={action.disabled} onClick={action.onClick} variant=\"contained\">\n              {action.name}\n            </ButtonEx>\n          ) : null\n        })}\n      </FlexRow>\n    ) : null\n  }\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA2B;AAC3B,0BAAyB;AACzB,2BAAwB;AAUZ;AANL,IAAM,kBAAkD,CAAC,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,MAAM;AACzG,MAAI,SAAS;AACX,YAAQ,SAAS,UAAU,KAAK,IAC9B,4CAAC,gCAAQ,KAAK,GAAI,GAAG,OAClB,kBAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,aAAO,OAAO,OACZ,4CAAC,8BAAW,MAAK,SAAoB,OAAM,WAAU,SAAS,OAAO,SAClE,iBAAO,QADoB,KAE9B,IACE,UACF,4CAAC,gCAAS,UAAU,GAAG,OAAM,WAAsB,MAAK,SAAQ,UAAU,OAAO,UAAU,SAAS,OAAO,SAAS,SAAQ,aACzH,iBAAO,QADkC,KAE5C,IACE;AAAA,IACN,CAAC,GACH,IACE;AAAA,EACN;AACA,SAAO;AACT;","names":[]}

package/dist/browser/components/Actions.d.cts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PropertyActionsProps } from './ActionsProps';
+export declare const PropertyActions: React.FC<PropertyActionsProps>;
+//# sourceMappingURL=Actions.d.ts.map

package/dist/browser/components/Actions.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmB1D,CAAA"}

package/dist/browser/components/Actions.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/Actions.tsx
 import { IconButton } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexRow } from "@xylabs/react-flexbox";
-const PropertyActions = ({ buttons = false, actions, ...props }) => {
+import { jsx } from "react/jsx-runtime";
+var PropertyActions = ({ buttons = false, actions, ...props }) => {
   if (actions) {
     return (actions?.length ?? 0) > 0 ? /* @__PURE__ */ jsx(FlexRow, { gap: 1, ...props, children: actions.map((action, index) => {
       return action.icon ? /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: action.onClick, children: action.icon }, index) : buttons ? /* @__PURE__ */ jsx(ButtonEx, { paddingY: 0, color: "primary", size: "small", disabled: action.disabled, onClick: action.onClick, variant: "contained", children: action.name }, index) : null;

package/dist/browser/components/Actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Actions.tsx"],"sourcesContent":["import { IconButton } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { PropertyActionsProps } from './ActionsProps'\n\nexport const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {\n  if (actions) {\n    return (actions?.length ?? 0) > 0 ? (\n      <FlexRow gap={1} {...props}>\n        {actions.map((action, index) => {\n          return action.icon ? (\n            <IconButton size=\"small\" key={index} color=\"inherit\" onClick={action.onClick}>\n              {action.icon}\n            </IconButton>\n          ) : buttons ? (\n            <ButtonEx paddingY={0} color=\"primary\" key={index} size=\"small\" disabled={action.disabled} onClick={action.onClick} variant=\"contained\">\n              {action.name}\n            </ButtonEx>\n          ) : null\n        })}\n      </FlexRow>\n    ) : null\n  }\n  return null\n}\n"],"mappings":"AAYY;AAZZ,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAIjB,MAAM,kBAAkD,CAAC,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,MAAM;AACzG,MAAI,SAAS;AACX,YAAQ,SAAS,UAAU,KAAK,IAC9B,oBAAC,WAAQ,KAAK,GAAI,GAAG,OAClB,kBAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,aAAO,OAAO,OACZ,oBAAC,cAAW,MAAK,SAAoB,OAAM,WAAU,SAAS,OAAO,SAClE,iBAAO,QADoB,KAE9B,IACE,UACF,oBAAC,YAAS,UAAU,GAAG,OAAM,WAAsB,MAAK,SAAQ,UAAU,OAAO,UAAU,SAAS,OAAO,SAAS,SAAQ,aACzH,iBAAO,QADkC,KAE5C,IACE;AAAA,IACN,CAAC,GACH,IACE;AAAA,EACN;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/components/Actions.tsx"],"sourcesContent":["import { IconButton } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { PropertyActionsProps } from './ActionsProps'\n\nexport const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {\n  if (actions) {\n    return (actions?.length ?? 0) > 0 ? (\n      <FlexRow gap={1} {...props}>\n        {actions.map((action, index) => {\n          return action.icon ? (\n            <IconButton size=\"small\" key={index} color=\"inherit\" onClick={action.onClick}>\n              {action.icon}\n            </IconButton>\n          ) : buttons ? (\n            <ButtonEx paddingY={0} color=\"primary\" key={index} size=\"small\" disabled={action.disabled} onClick={action.onClick} variant=\"contained\">\n              {action.name}\n            </ButtonEx>\n          ) : null\n        })}\n      </FlexRow>\n    ) : null\n  }\n  return null\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAUZ;AANL,IAAM,kBAAkD,CAAC,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,MAAM;AACzG,MAAI,SAAS;AACX,YAAQ,SAAS,UAAU,KAAK,IAC9B,oBAAC,WAAQ,KAAK,GAAI,GAAG,OAClB,kBAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,aAAO,OAAO,OACZ,oBAAC,cAAW,MAAK,SAAoB,OAAM,WAAU,SAAS,OAAO,SAClE,iBAAO,QADoB,KAE9B,IACE,UACF,oBAAC,YAAS,UAAU,GAAG,OAAM,WAAsB,MAAK,SAAQ,UAAU,OAAO,UAAU,SAAS,OAAO,SAAS,SAAQ,aACzH,iBAAO,QADkC,KAE5C,IACE;AAAA,IACN,CAAC,GACH,IACE;AAAA,EACN;AACA,SAAO;AACT;","names":[]}

package/dist/browser/components/ActionsMenu.cjs

@@ -0,0 +1,57 @@
+"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/components/ActionsMenu.tsx
+var ActionsMenu_exports = {};
+__export(ActionsMenu_exports, {
+  PropertyActionsMenu: () => PropertyActionsMenu
+});
+module.exports = __toCommonJS(ActionsMenu_exports);
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = 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?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MoreHoriz, { fontSize: "inherit" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_material.MenuItem,
+        {
+          onClick: () => {
+            action?.onClick?.();
+            handleClose();
+          },
+          children: action.name
+        },
+        action.name
+      );
+    }) })
+  ] }) : null;
+};
+//# sourceMappingURL=ActionsMenu.cjs.map

package/dist/{node/components/ActionsMenu.mjs.map → browser/components/ActionsMenu.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionsMenu.tsx"],"sourcesContent":["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"],"mappings":"AAmBI,SAEI,KAFJ;AAnBJ,SAAS,aAAa,qBAAqB;AAC3C,SAAS,YAAY,MAAM,gBAAgB;AAC3C,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAIlB,MAAM,sBAAsD,CAAC,EAAE,SAAS,GAAG,MAAM,MAAM;AAC5F,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,CAAC,CAAC;AAEf,QAAM,cAAc,CAAC,UAAyC;AAC5D,gBAAY,MAAM,aAAa;AAAA,EACjC;AACA,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAAA,EAClB;AAEA,SAAO,WAAW,SAAS,SAAS,IAClC,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,cAAW,MAAK,SAAQ,OAAM,WAAU,SAAS,aAChD,8BAAC,iBAAc,UAAS,WAAU,GACpC;AAAA,IACA,oBAAC,QAAK,UAAoB,MAAY,SAAS,aAC5C,mBAAS,IAAI,CAAC,WAAW;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,oBAAQ,UAAU;AAClB,wBAAY;AAAA,UACd;AAAA,UAEC,iBAAO;AAAA;AAAA,QANH,OAAO;AAAA,MAOd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,IACE;AACN;","names":[]}
+{"version":3,"sources":["../../../src/components/ActionsMenu.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2C;AAC3C,sBAA2C;AAC3C,2BAAwB;AACxB,mBAAyB;AAgBrB;AAZG,IAAM,sBAAsD,CAAC,EAAE,SAAS,GAAG,MAAM,MAAM;AAC5F,QAAM,CAAC,UAAU,WAAW,QAAI,uBAA6B,IAAI;AACjE,QAAM,OAAO,CAAC,CAAC;AAEf,QAAM,cAAc,CAAC,UAAyC;AAC5D,gBAAY,MAAM,aAAa;AAAA,EACjC;AACA,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAAA,EAClB;AAEA,SAAO,WAAW,SAAS,SAAS,IAClC,6CAAC,gCAAS,GAAG,OACX;AAAA,gDAAC,8BAAW,MAAK,SAAQ,OAAM,WAAU,SAAS,aAChD,sDAAC,sBAAAA,WAAA,EAAc,UAAS,WAAU,GACpC;AAAA,IACA,4CAAC,wBAAK,UAAoB,MAAY,SAAS,aAC5C,mBAAS,IAAI,CAAC,WAAW;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,oBAAQ,UAAU;AAClB,wBAAY;AAAA,UACd;AAAA,UAEC,iBAAO;AAAA;AAAA,QANH,OAAO;AAAA,MAOd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,IACE;AACN;","names":["MoreHorizIcon"]}

package/dist/browser/components/ActionsMenu.d.cts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PropertyActionsProps } from './ActionsProps';
+export declare const PropertyActionsMenu: React.FC<PropertyActionsProps>;
+//# sourceMappingURL=ActionsMenu.d.ts.map

package/dist/browser/components/ActionsMenu.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsMenu.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiC9D,CAAA"}

package/dist/browser/components/ActionsMenu.js

@@ -1,9 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ActionsMenu.tsx
 import { MoreHoriz as MoreHorizIcon } from "@mui/icons-material";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { useState } from "react";
-const PropertyActionsMenu = ({ actions, ...props }) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var PropertyActionsMenu = ({ actions, ...props }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = !!anchorEl;
   const handleClick = (event) => {

package/dist/browser/components/ActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionsMenu.tsx"],"sourcesContent":["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"],"mappings":"AAmBI,SAEI,KAFJ;AAnBJ,SAAS,aAAa,qBAAqB;AAC3C,SAAS,YAAY,MAAM,gBAAgB;AAC3C,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAIlB,MAAM,sBAAsD,CAAC,EAAE,SAAS,GAAG,MAAM,MAAM;AAC5F,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,CAAC,CAAC;AAEf,QAAM,cAAc,CAAC,UAAyC;AAC5D,gBAAY,MAAM,aAAa;AAAA,EACjC;AACA,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAAA,EAClB;AAEA,SAAO,WAAW,SAAS,SAAS,IAClC,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,cAAW,MAAK,SAAQ,OAAM,WAAU,SAAS,aAChD,8BAAC,iBAAc,UAAS,WAAU,GACpC;AAAA,IACA,oBAAC,QAAK,UAAoB,MAAY,SAAS,aAC5C,mBAAS,IAAI,CAAC,WAAW;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,oBAAQ,UAAU;AAClB,wBAAY;AAAA,UACd;AAAA,UAEC,iBAAO;AAAA;AAAA,QANH,OAAO;AAAA,MAOd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,IACE;AACN;","names":[]}
+{"version":3,"sources":["../../../src/components/ActionsMenu.tsx"],"sourcesContent":["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"],"mappings":";AAAA,SAAS,aAAa,qBAAqB;AAC3C,SAAS,YAAY,MAAM,gBAAgB;AAC3C,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAgBrB,SAEI,KAFJ;AAZG,IAAM,sBAAsD,CAAC,EAAE,SAAS,GAAG,MAAM,MAAM;AAC5F,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,CAAC,CAAC;AAEf,QAAM,cAAc,CAAC,UAAyC;AAC5D,gBAAY,MAAM,aAAa;AAAA,EACjC;AACA,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAAA,EAClB;AAEA,SAAO,WAAW,SAAS,SAAS,IAClC,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,cAAW,MAAK,SAAQ,OAAM,WAAU,SAAS,aAChD,8BAAC,iBAAc,UAAS,WAAU,GACpC;AAAA,IACA,oBAAC,QAAK,UAAoB,MAAY,SAAS,aAC5C,mBAAS,IAAI,CAAC,WAAW;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,oBAAQ,UAAU;AAClB,wBAAY;AAAA,UACd;AAAA,UAEC,iBAAO;AAAA;AAAA,QANH,OAAO;AAAA,MAOd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,IACE;AACN;","names":[]}

package/dist/browser/components/ActionsProps.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/components/ActionsProps.ts
+var ActionsProps_exports = {};
+module.exports = __toCommonJS(ActionsProps_exports);
+//# sourceMappingURL=ActionsProps.cjs.map

package/dist/browser/components/ActionsProps.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ActionsProps.ts"],"sourcesContent":["import { FlexBoxProps } from '@xylabs/react-flexbox'\n\nimport { PropertyAction } from './Action'\n\nexport interface PropertyActionsProps extends FlexBoxProps {\n  actions?: PropertyAction[]\n  buttons?: boolean\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/browser/components/ActionsProps.d.cts

@@ -0,0 +1,7 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { PropertyAction } from './Action';
+export interface PropertyActionsProps extends FlexBoxProps {
+    actions?: PropertyAction[];
+    buttons?: boolean;
+}
+//# sourceMappingURL=ActionsProps.d.ts.map

package/dist/browser/components/ActionsProps.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsProps.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}

package/dist/browser/components/Group.cjs

@@ -0,0 +1,93 @@
+"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/components/Group.tsx
+var Group_exports = {};
+__export(Group_exports, {
+  PropertyGroup: () => PropertyGroup
+});
+module.exports = __toCommonJS(Group_exports);
+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?.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 });
+};
+//# sourceMappingURL=Group.cjs.map

package/dist/browser/components/Group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Group.tsx","../../../src/components/Title.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        ) : (\n          <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>\n        )}\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,mBAAgC;AAChC,IAAAC,wBAA8C;AAC9C,oBAAuB;;;ACFvB,sBAAyE;AACzE,2BAAsC;AACtC,oCAA+B;AAoDzB;AAtCC,IAAM,gBAA8C,CAAC,EAAE,YAAY,GAAG,OAAO,UAAU,KAAK,MAAM,OAAO,GAAG,MAAM,MAAM;AAC7H,QAAM,eAAyD;AAAA,IAC7D,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,kBAA6D;AAAA,IACjE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAA8C;AAAA,IAClD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,aAAa,IAAI,IAAI,KAAK,aAAa,IAAI,IAAI;AAEpE,QAAM,YAAQ,0BAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SACE,MAAM,QAAQ,SAAS,aACnB,yBAAQ,MAAM,QAAQ,WAAW,OAAO,OAAO,SAAS,QACxD,wBAAO,MAAM,QAAQ,WAAW,OAAO,QAAQ,SAAS;AAAA,MAE9D,YAAW;AAAA,MACX,QAAQ,gBAAgB,IAAI;AAAA,MAC5B,gBAAe;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,qDAAC,gCAAQ,UAAU,GAAG,UAAU,KAC9B;AAAA,sDAAC,8BAAW,YAAY,KAAK,QAAM,MAAC,SAAS,aAAa,IAAI,GAAG,UAAU,aAAa,IAAI,GAC1F,sDAAC,WACC,sDAAC,YAAQ,iBAAM,GACjB,GACF;AAAA,UACC,MACC,4CAAC,gDAAe,OAAO,EAAE,UAAU,aAAa,GAAG,OAAM,WAAU,OAAO,SAAS,IAChF,eACH,IACE;AAAA,WACN;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;;;ADxDM,IAAAC,sBAAA;AALN,IAAM,mBAAoD,CAAC,EAAE,YAAY,UAAU,OAAO,KAAK,GAAG,MAAM,MAAM;AAC5G,QAAM,YAAQ,2BAAS;AACvB,QAAM,oBAAgB,sBAAO,QAAQ,MAAM,UAAW,WAA8B;AACpF,SACE,6CAAC,iCAAQ,YAAW,WAAU,UAAS,UAAU,GAAG,OAClD,wDAAC,iCAAQ,UAAS,UAAS,gBAAe,WAAU,YAAW,WAC7D;AAAA,iDAAC,iBAAc,YAAW,cAAa,MAAK,QAAO,OAAc,KAAW,GAAG,YAAY;AAAA,IAC1F,gBACC,6CAAC,qCACE,yBAAe,IAAI,CAAC,OAAO,UAAU;AACpC,aAAO,QACL,6CAAC,qCAAwB,YAAY,GAAG,aAAa,MAAM,QAAQ,SAChE,mBADe,KAElB,IACE;AAAA,IACN,CAAC,GACH,IAEA,6CAAC,qCAAY,UAAS,UAAU,UAAS;AAAA,KAE7C,GACF;AAEJ;AAEA,IAAM,qBAAwD,CAAC,EAAE,OAAO,SAAS,WAAW,QAAQ,GAAG,MAAM,MAAM;AACjH,SACE,6CAAC,0BAAM,OAAO,EAAE,UAAU,GAAG,UAAU,UAAU,GAAG,MAAM,GAAG,SAAkB,WAAsB,QACnG,uDAAC,oBAAkB,GAAG,OAAO,OAAO,OAAO,GAC7C;AAEJ;AAEO,IAAM,gBAA8C,CAAC,UAAU;AACpE,SAAO,MAAM,QAAQ,6CAAC,sBAAoB,GAAG,OAAO,IAAK,6CAAC,oBAAkB,GAAG,OAAO;AACxF;","names":["import_material","import_react_flexbox","import_jsx_runtime"]}

package/dist/browser/components/Group.d.cts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PropertyGroupProps } from './Props';
+export declare const PropertyGroup: React.FC<PropertyGroupProps>;
+//# sourceMappingURL=Group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAkD,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAoC5F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}

package/dist/browser/components/Group.js

@@ -1,23 +1,70 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Paper, useTheme } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+// 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";
-import { PropertyTitle } from "./Title";
-const PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
+
+// 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__ */ jsx(FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ jsxs(FlexRow, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
-    /* @__PURE__ */ jsx(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
-    childrenArray ? /* @__PURE__ */ jsx(FlexGrowRow, { children: childrenArray?.map((child, index) => {
-      return child ? /* @__PURE__ */ jsx(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
-    }) }) : /* @__PURE__ */ jsx(FlexGrowRow, { overflow: "hidden", children })
+  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.palette.divider, children: child }, index) : null;
+    }) }) : /* @__PURE__ */ jsx2(FlexGrowRow, { overflow: "hidden", children })
   ] }) });
 };
-const PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
-  return /* @__PURE__ */ jsx(Paper, { style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx(PropertyGroupBox, { ...props, paper: false }) });
+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 }) });
 };
-const PropertyGroup = (props) => {
-  return props.paper ? /* @__PURE__ */ jsx(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ jsx(PropertyGroupBox, { ...props });
+var PropertyGroup = (props) => {
+  return props.paper ? /* @__PURE__ */ jsx2(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props });
 };
 export {
   PropertyGroup

package/dist/browser/components/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Group.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        ) : (\n          <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>\n        )}\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"],"mappings":"AAaM,SACE,KADF;AAbN,SAAS,OAAO,gBAAgB;AAChC,SAAS,SAAS,aAAa,eAAe;AAC9C,SAAS,cAAc;AAIvB,SAAS,qBAAqB;AAE9B,MAAM,mBAAoD,CAAC,EAAE,YAAY,UAAU,OAAO,KAAK,GAAG,MAAM,MAAM;AAC5G,QAAM,QAAQ,SAAS;AACvB,QAAM,gBAAgB,OAAO,QAAQ,MAAM,UAAW,WAA8B;AACpF,SACE,oBAAC,WAAQ,YAAW,WAAU,UAAS,UAAU,GAAG,OAClD,+BAAC,WAAQ,UAAS,UAAS,gBAAe,WAAU,YAAW,WAC7D;AAAA,wBAAC,iBAAc,YAAW,cAAa,MAAK,QAAO,OAAc,KAAW,GAAG,YAAY;AAAA,IAC1F,gBACC,oBAAC,eACE,yBAAe,IAAI,CAAC,OAAO,UAAU;AACpC,aAAO,QACL,oBAAC,eAAwB,YAAY,GAAG,aAAa,MAAM,QAAQ,SAChE,mBADe,KAElB,IACE;AAAA,IACN,CAAC,GACH,IAEA,oBAAC,eAAY,UAAS,UAAU,UAAS;AAAA,KAE7C,GACF;AAEJ;AAEA,MAAM,qBAAwD,CAAC,EAAE,OAAO,SAAS,WAAW,QAAQ,GAAG,MAAM,MAAM;AACjH,SACE,oBAAC,SAAM,OAAO,EAAE,UAAU,GAAG,UAAU,UAAU,GAAG,MAAM,GAAG,SAAkB,WAAsB,QACnG,8BAAC,oBAAkB,GAAG,OAAO,OAAO,OAAO,GAC7C;AAEJ;AAEO,MAAM,gBAA8C,CAAC,UAAU;AACpE,SAAO,MAAM,QAAQ,oBAAC,sBAAoB,GAAG,OAAO,IAAK,oBAAC,oBAAkB,GAAG,OAAO;AACxF;","names":[]}
+{"version":3,"sources":["../../../src/components/Group.tsx","../../../src/components/Title.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        ) : (\n          <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>\n        )}\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"],"mappings":";AAAA,SAAS,OAAO,YAAAA,iBAAgB;AAChC,SAAS,SAAS,aAAa,WAAAC,gBAAe;AAC9C,SAAS,cAAc;;;ACFvB,SAAS,QAAQ,SAAS,YAA+B,gBAAgB;AACzE,SAAuB,eAAe;AACtC,SAAS,sBAAsB;AAoDzB,SAGM,KAHN;AAtCC,IAAM,gBAA8C,CAAC,EAAE,YAAY,GAAG,OAAO,UAAU,KAAK,MAAM,OAAO,GAAG,MAAM,MAAM;AAC7H,QAAM,eAAyD;AAAA,IAC7D,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,kBAA6D;AAAA,IACjE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAA8C;AAAA,IAClD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,aAAa,IAAI,IAAI,KAAK,aAAa,IAAI,IAAI;AAEpE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SACE,MAAM,QAAQ,SAAS,SACnB,QAAQ,MAAM,QAAQ,WAAW,OAAO,OAAO,SAAS,IACxD,OAAO,MAAM,QAAQ,WAAW,OAAO,QAAQ,SAAS;AAAA,MAE9D,YAAW;AAAA,MACX,QAAQ,gBAAgB,IAAI;AAAA,MAC5B,gBAAe;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,6BAAC,WAAQ,UAAU,GAAG,UAAU,KAC9B;AAAA,8BAAC,cAAW,YAAY,KAAK,QAAM,MAAC,SAAS,aAAa,IAAI,GAAG,UAAU,aAAa,IAAI,GAC1F,8BAAC,WACC,8BAAC,YAAQ,iBAAM,GACjB,GACF;AAAA,UACC,MACC,oBAAC,kBAAe,OAAO,EAAE,UAAU,aAAa,GAAG,OAAM,WAAU,OAAO,SAAS,IAChF,eACH,IACE;AAAA,WACN;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;;;ADxDM,SACE,OAAAC,MADF,QAAAC,aAAA;AALN,IAAM,mBAAoD,CAAC,EAAE,YAAY,UAAU,OAAO,KAAK,GAAG,MAAM,MAAM;AAC5G,QAAM,QAAQC,UAAS;AACvB,QAAM,gBAAgB,OAAO,QAAQ,MAAM,UAAW,WAA8B;AACpF,SACE,gBAAAF,KAAC,WAAQ,YAAW,WAAU,UAAS,UAAU,GAAG,OAClD,0BAAAC,MAACE,UAAA,EAAQ,UAAS,UAAS,gBAAe,WAAU,YAAW,WAC7D;AAAA,oBAAAH,KAAC,iBAAc,YAAW,cAAa,MAAK,QAAO,OAAc,KAAW,GAAG,YAAY;AAAA,IAC1F,gBACC,gBAAAA,KAAC,eACE,yBAAe,IAAI,CAAC,OAAO,UAAU;AACpC,aAAO,QACL,gBAAAA,KAAC,eAAwB,YAAY,GAAG,aAAa,MAAM,QAAQ,SAChE,mBADe,KAElB,IACE;AAAA,IACN,CAAC,GACH,IAEA,gBAAAA,KAAC,eAAY,UAAS,UAAU,UAAS;AAAA,KAE7C,GACF;AAEJ;AAEA,IAAM,qBAAwD,CAAC,EAAE,OAAO,SAAS,WAAW,QAAQ,GAAG,MAAM,MAAM;AACjH,SACE,gBAAAA,KAAC,SAAM,OAAO,EAAE,UAAU,GAAG,UAAU,UAAU,GAAG,MAAM,GAAG,SAAkB,WAAsB,QACnG,0BAAAA,KAAC,oBAAkB,GAAG,OAAO,OAAO,OAAO,GAC7C;AAEJ;AAEO,IAAM,gBAA8C,CAAC,UAAU;AACpE,SAAO,MAAM,QAAQ,gBAAAA,KAAC,sBAAoB,GAAG,OAAO,IAAK,gBAAAA,KAAC,oBAAkB,GAAG,OAAO;AACxF;","names":["useTheme","FlexRow","jsx","jsxs","useTheme","FlexRow"]}

package/dist/browser/components/IdenticonCorner.cjs

@@ -0,0 +1,41 @@
+"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/components/IdenticonCorner.tsx
+var IdenticonCorner_exports = {};
+__export(IdenticonCorner_exports, {
+  IdenticonCorner: () => IdenticonCorner
+});
+module.exports = __toCommonJS(IdenticonCorner_exports);
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var IdenticonCorner = ({ value, ...props }) => {
+  const theme = (0, import_material.useTheme)();
+  const [parentHeight, setParentHeight] = (0, import_react.useState)();
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
+  }, []);
+  const calculatedHeight = parentHeight ?? 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_identicon.Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
+};
+//# sourceMappingURL=IdenticonCorner.cjs.map

package/dist/{node/components/IdenticonCorner.mjs.map → browser/components/IdenticonCorner.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/IdenticonCorner.tsx"],"sourcesContent":["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"],"mappings":"AAwBU;AAxBV,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,iBAAiB;AAC1B,SAAS,WAAW,QAAQ,gBAAgB;AAMrC,MAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACtF,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiB;AACzD,QAAM,MAAM,OAAuB,IAAI;AAEvC,YAAU,MAAM;AACd,oBAAgB,IAAI,SAAS,eAAe,eAAe,YAAY;AAAA,EACzE,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,gBAAgB;AAEzC,SACE,oBAAC,WAAQ,YAAW,cAAa,QAAO,QACtC,8BAAC,WAAQ,YAAU,MAAC,QAAQ,kBAAkB,OAAO,kBAAkB,YAAY,aAAa,MAAM,QAAQ,OAAO,IACnH,8BAAC,SAAI,KACH,8BAAC,aAAU,MAAM,mBAAmB,KAAK,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE,SAAS,GAAG,mBAAmB,GAAG,KAAK,GAAI,GAAG,OAAO,GACzH,GACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/IdenticonCorner.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,2BAAsC;AACtC,6BAA0B;AAC1B,mBAA4C;AAqBlC;AAfH,IAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACtF,QAAM,YAAQ,0BAAS;AACvB,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB;AACzD,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,oBAAgB,IAAI,SAAS,eAAe,eAAe,YAAY;AAAA,EACzE,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,gBAAgB;AAEzC,SACE,4CAAC,gCAAQ,YAAW,cAAa,QAAO,QACtC,sDAAC,gCAAQ,YAAU,MAAC,QAAQ,kBAAkB,OAAO,kBAAkB,YAAY,aAAa,MAAM,QAAQ,OAAO,IACnH,sDAAC,SAAI,KACH,sDAAC,oCAAU,MAAM,mBAAmB,KAAK,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE,SAAS,GAAG,mBAAmB,GAAG,KAAK,GAAI,GAAG,OAAO,GACzH,GACF,GACF;AAEJ;","names":[]}

package/dist/browser/components/IdenticonCorner.d.cts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+export interface IdenticonCornerProps extends FlexBoxProps {
+    value?: string | number | boolean | null;
+}
+export declare const IdenticonCorner: React.FC<IdenticonCornerProps>;
+//# sourceMappingURL=IdenticonCorner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IdenticonCorner.d.ts","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,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/IdenticonCorner.js

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/IdenticonCorner.tsx
 import { useTheme } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { Identicon } from "@xylabs/react-identicon";
 import { useEffect, useRef, useState } from "react";
-const IdenticonCorner = ({ value, ...props }) => {
+import { jsx } from "react/jsx-runtime";
+var IdenticonCorner = ({ value, ...props }) => {
   const theme = useTheme();
   const [parentHeight, setParentHeight] = useState();
   const ref = useRef(null);

package/dist/browser/components/IdenticonCorner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/IdenticonCorner.tsx"],"sourcesContent":["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"],"mappings":"AAwBU;AAxBV,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,iBAAiB;AAC1B,SAAS,WAAW,QAAQ,gBAAgB;AAMrC,MAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACtF,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiB;AACzD,QAAM,MAAM,OAAuB,IAAI;AAEvC,YAAU,MAAM;AACd,oBAAgB,IAAI,SAAS,eAAe,eAAe,YAAY;AAAA,EACzE,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,gBAAgB;AAEzC,SACE,oBAAC,WAAQ,YAAW,cAAa,QAAO,QACtC,8BAAC,WAAQ,YAAU,MAAC,QAAQ,kBAAkB,OAAO,kBAAkB,YAAY,aAAa,MAAM,QAAQ,OAAO,IACnH,8BAAC,SAAI,KACH,8BAAC,aAAU,MAAM,mBAAmB,KAAK,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE,SAAS,GAAG,mBAAmB,GAAG,KAAK,GAAI,GAAG,OAAO,GACzH,GACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/IdenticonCorner.tsx"],"sourcesContent":["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"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,iBAAiB;AAC1B,SAAS,WAAW,QAAQ,gBAAgB;AAqBlC;AAfH,IAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACtF,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiB;AACzD,QAAM,MAAM,OAAuB,IAAI;AAEvC,YAAU,MAAM;AACd,oBAAgB,IAAI,SAAS,eAAe,eAAe,YAAY;AAAA,EACzE,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,gBAAgB;AAEzC,SACE,oBAAC,WAAQ,YAAW,cAAa,QAAO,QACtC,8BAAC,WAAQ,YAAU,MAAC,QAAQ,kBAAkB,OAAO,kBAAkB,YAAY,aAAa,MAAM,QAAQ,OAAO,IACnH,8BAAC,SAAI,KACH,8BAAC,aAAU,MAAM,mBAAmB,KAAK,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE,SAAS,GAAG,mBAAmB,GAAG,KAAK,GAAI,GAAG,OAAO,GACzH,GACF,GACF;AAEJ;","names":[]}