@xyo-network/react-property 2.64.0-rc.2 → 2.64.0-rc.4

package/dist/browser/components/Action.d.mts.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/Action.d.ts.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/Action.js

@@ -0,0 +1 @@
+//# sourceMappingURL=Action.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/browser/components/Actions.d.mts.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.d.ts.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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { IconButton } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexRow } from "@xylabs/react-flexbox";
+const 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;
+    }) }) : null;
+  }
+  return null;
+};
+export {
+  PropertyActions
+};
+//# sourceMappingURL=Actions.js.map

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

@@ -0,0 +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":[]}

package/dist/browser/components/ActionsMenu.d.mts.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.d.ts.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

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = !!anchorEl;
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return actions && actions?.length > 0 ? /* @__PURE__ */ jsxs(FlexRow, { ...props, children: [
+    /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ jsx(MoreHorizIcon, { fontSize: "inherit" }) }),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          onClick: () => {
+            action?.onClick?.();
+            handleClose();
+          },
+          children: action.name
+        },
+        action.name
+      );
+    }) })
+  ] }) : null;
+};
+export {
+  PropertyActionsMenu
+};
+//# sourceMappingURL=ActionsMenu.js.map

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

@@ -0,0 +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":[]}

package/dist/browser/components/ActionsProps.d.mts.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/ActionsProps.d.ts.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/ActionsProps.js

@@ -0,0 +1 @@
+//# sourceMappingURL=ActionsProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/browser/components/Group.d.mts.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.d.ts.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

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paper, useTheme } from "@mui/material";
+import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import { typeOf } from "@xyo-network/typeof";
+import { PropertyTitle } from "./Title";
+const PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
+  const theme = useTheme();
+  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 })
+  ] }) });
+};
+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 }) });
+};
+const PropertyGroup = (props) => {
+  return props.paper ? /* @__PURE__ */ jsx(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ jsx(PropertyGroupBox, { ...props });
+};
+export {
+  PropertyGroup
+};
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +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":[]}

package/dist/browser/components/IdenticonCorner.d.mts.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.d.ts.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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+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 }) => {
+  const theme = useTheme();
+  const [parentHeight, setParentHeight] = useState();
+  const ref = useRef(null);
+  useEffect(() => {
+    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
+  }, []);
+  const calculatedHeight = parentHeight ?? 0;
+  return /* @__PURE__ */ jsx(FlexRow, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ jsx(FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
+};
+export {
+  IdenticonCorner
+};
+//# sourceMappingURL=IdenticonCorner.js.map

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

@@ -0,0 +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":[]}

package/dist/browser/components/Property.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAiB,MAAM,SAAS,CAAA;AA4D7E,eAAO,MAAM,QAAQ,iJAEnB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAiB,MAAM,SAAS,CAAA;AA4D7E,eAAO,MAAM,QAAQ,iJAEnB,CAAA"}

package/dist/browser/components/Property.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircularProgress, Paper } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { forwardRef } from "react";
+import { PropertyActionsMenu } from "./ActionsMenu";
+import { IdenticonCorner } from "./IdenticonCorner";
+import { PropertyTitle } from "./Title";
+import { PropertyValue } from "./Value";
+const PropertyBox = 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__ */ jsxs(FlexRow, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
+      title !== void 0 ? /* @__PURE__ */ jsx(
+        PropertyTitle,
+        {
+          tip,
+          title: required ? `${title}*` : title,
+          size,
+          more: /* @__PURE__ */ jsx(PropertyActionsMenu, { actions }),
+          ...titleProps
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs(
+        FlexRow,
+        {
+          pl: 1,
+          columnGap: 1,
+          justifyContent: value === void 0 ? "center" : "space-between",
+          overflow: "hidden",
+          height: sizeValueHeight[size],
+          children: [
+            children ? children : value !== void 0 ? /* @__PURE__ */ jsx(PropertyValue, { value, typographyVariant: sizeVariants[size] }) : /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+            value !== void 0 ? badge ? /* @__PURE__ */ jsx(IdenticonCorner, { value }) : null : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+PropertyBox.displayName = "PropertyBox";
+const PropertyPaper = forwardRef(({ style, variant, elevation = 2, square, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Paper, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx(PropertyBox, { ...props, paper: false }) });
+});
+PropertyPaper.displayName = "PropertyPaper";
+const Property = forwardRef((props, ref) => {
+  return props.paper ? /* @__PURE__ */ jsx(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ jsx(PropertyBox, { ref, ...props });
+});
+Property.displayName = "Property";
+export {
+  Property
+};
+//# sourceMappingURL=Property.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Property.tsx"],"sourcesContent":["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 ? (\n          <PropertyTitle\n            tip={tip}\n            title={required ? `${title}*` : title}\n            size={size}\n            more={<PropertyActionsMenu actions={actions} />}\n            {...titleProps}\n          />\n        ) : null}\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 ? (\n            children\n          ) : value !== undefined ? (\n            <PropertyValue value={value} typographyVariant={sizeVariants[size]} />\n          ) : (\n            <CircularProgress size={16} />\n          )}\n          {value !== undefined ? badge ? <IdenticonCorner value={value} /> : null : 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"],"mappings":"AAgCkB,cAIV,YAJU;AAhClB,SAAS,kBAAkB,aAAgC;AAC3D,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAE3B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEhC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAE9B,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,YAAY,OAAO,OAAO,UAAU,OAAO,UAAU,KAAK,SAAS,UAAU,QAAQ,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjH,UAAM,kBAA4C;AAAA,MAChD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAEA,UAAM,eAAoD;AAAA,MACxD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAEA,WACE,qBAAC,WAAQ,KAAU,eAAc,UAAS,UAAU,GAAG,YAAW,WAAU,UAAS,UAAU,GAAG,OAC/F;AAAA,gBAAU,SACT;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO,WAAW,GAAG,KAAK,MAAM;AAAA,UAChC;AAAA,UACA,MAAM,oBAAC,uBAAoB,SAAkB;AAAA,UAC5C,GAAG;AAAA;AAAA,MACN,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW;AAAA,UACX,gBAAgB,UAAU,SAAY,WAAW;AAAA,UACjD,UAAS;AAAA,UACT,QAAQ,gBAAgB,IAAI;AAAA,UAE3B;AAAA,uBACC,WACE,UAAU,SACZ,oBAAC,iBAAc,OAAc,mBAAmB,aAAa,IAAI,GAAG,IAEpE,oBAAC,oBAAiB,MAAM,IAAI;AAAA,YAE7B,UAAU,SAAY,QAAQ,oBAAC,mBAAgB,OAAc,IAAK,OAAO;AAAA;AAAA;AAAA,MAC5E;AAAA,OACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAE1B,MAAM,gBAAgB,WAA+C,CAAC,EAAE,OAAO,SAAS,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACjI,SACE,oBAAC,SAAM,KAAU,OAAO,EAAE,UAAU,GAAG,UAAU,UAAU,GAAG,MAAM,GAAG,SAAkB,WAAsB,QAC7G,8BAAC,eAAa,GAAG,OAAO,OAAO,OAAO,GACxC;AAEJ,CAAC;AACD,cAAc,cAAc;AAErB,MAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AAChF,SAAO,MAAM,QAAQ,oBAAC,iBAAc,KAAW,GAAG,OAAO,IAAK,oBAAC,eAAY,KAAW,GAAG,OAAO;AAClG,CAAC;AACD,SAAS,cAAc;","names":[]}

package/dist/browser/components/PropertyBox.stories.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Replay as ReplayIcon } from "@mui/icons-material";
+import { TextField } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { PayloadWrapper } from "@xyo-network/payload-wrapper";
+import { sampleBlockWithPayloads, useAppThemeDecorator } from "@xyo-network/react-storybook";
+import { Property } from "./Property";
+const StorybookEntry = {
+  argTypes: {},
+  component: Property,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "property/PropertyBox"
+};
+const Template = (args) => /* @__PURE__ */ jsx(Property, { ...args, paper: false });
+const TemplateWithCompare = (args) => /* @__PURE__ */ jsxs(FlexCol, { gap: 1, alignItems: "stretch", children: [
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { size: "small", value: "Sample text Field" }),
+    /* @__PURE__ */ jsx(Property, { ...args, size: "small" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Property, { ...args, size: "small" }),
+    /* @__PURE__ */ jsx(Property, { ...args, size: "small" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { size: "medium", value: "Sample text Field" }),
+    /* @__PURE__ */ jsx(Property, { ...args, size: "medium" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Property, { ...args, size: "medium" }),
+    /* @__PURE__ */ jsx(Property, { ...args, size: "medium" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { value: "Sample text Field" }),
+    /* @__PURE__ */ jsx(Property, { ...args, size: "large" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Property, { ...args, size: "large" }),
+    /* @__PURE__ */ jsx(Property, { ...args, size: "large" })
+  ] })
+] });
+const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [useAppThemeDecorator];
+const WithTitle = Template.bind({});
+WithTitle.args = { title: "No Data" };
+WithTitle.decorators = [useAppThemeDecorator];
+const WithUndefinedData = Template.bind({});
+WithUndefinedData.args = { title: "Block Hash" };
+WithUndefinedData.decorators = [useAppThemeDecorator];
+const WithData = Template.bind({});
+WithData.args = { title: "Block Hash", value: PayloadWrapper.hashSync(sampleBlockWithPayloads) };
+WithData.decorators = [useAppThemeDecorator];
+const WithDataSmall = Template.bind({});
+WithDataSmall.args = { size: "small", title: "Block Hash", value: PayloadWrapper.hashSync(sampleBlockWithPayloads) };
+WithDataSmall.decorators = [useAppThemeDecorator];
+const WithDataCompare = TemplateWithCompare.bind({});
+WithDataCompare.args = { tip: "This is the block hash", title: "Block Hash", value: PayloadWrapper.hashSync(sampleBlockWithPayloads) };
+WithDataCompare.decorators = [useAppThemeDecorator];
+const WithDataAndBadgeSmall = Template.bind({});
+WithDataAndBadgeSmall.args = {
+  badge: true,
+  size: "small",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithDataAndBadgeSmall.decorators = [useAppThemeDecorator];
+const WithDataAndBadgeMedium = Template.bind({});
+WithDataAndBadgeMedium.args = {
+  badge: true,
+  size: "medium",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithDataAndBadgeMedium.decorators = [useAppThemeDecorator];
+const WithDataAndBadgeLarge = Template.bind({});
+WithDataAndBadgeLarge.args = {
+  badge: true,
+  size: "large",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithDataAndBadgeLarge.decorators = [useAppThemeDecorator];
+const WithTip = Template.bind({});
+WithTip.args = {
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithTip.decorators = [useAppThemeDecorator];
+const WithTipAndBadge = Template.bind({});
+WithTipAndBadge.args = {
+  badge: true,
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithTipAndBadge.decorators = [useAppThemeDecorator];
+const WithActions = Template.bind({});
+WithActions.args = {
+  actions: [{ name: "ActionOne" }, { name: "ActionTwo" }],
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithActions.decorators = [useAppThemeDecorator];
+const LargeWithValue = Template.bind({});
+LargeWithValue.args = {
+  badge: true,
+  size: "large",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+LargeWithValue.decorators = [useAppThemeDecorator];
+const LargeWithValueAndActions = Template.bind({});
+LargeWithValueAndActions.args = {
+  actions: [{ icon: /* @__PURE__ */ jsx(ReplayIcon, {}), name: "ActionOne" }, { name: "ActionTwo" }],
+  badge: true,
+  size: "large",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+LargeWithValueAndActions.decorators = [useAppThemeDecorator];
+const SmallWithValueAndActions = Template.bind({});
+SmallWithValueAndActions.args = {
+  actions: [{ icon: /* @__PURE__ */ jsx(ReplayIcon, {}), name: "ActionOne" }, { name: "ActionTwo" }],
+  badge: true,
+  size: "small",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+SmallWithValueAndActions.decorators = [useAppThemeDecorator];
+var PropertyBox_stories_default = StorybookEntry;
+export {
+  Default,
+  LargeWithValue,
+  LargeWithValueAndActions,
+  SmallWithValueAndActions,
+  WithActions,
+  WithData,
+  WithDataAndBadgeLarge,
+  WithDataAndBadgeMedium,
+  WithDataAndBadgeSmall,
+  WithDataCompare,
+  WithDataSmall,
+  WithTip,
+  WithTipAndBadge,
+  WithUndefinedData,
+  PropertyBox_stories_default as default
+};
+//# sourceMappingURL=PropertyBox.stories.js.map

package/dist/browser/components/PropertyBox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PropertyBox.stories.tsx"],"sourcesContent":["import { Replay as ReplayIcon } from '@mui/icons-material'\nimport { TextField } from '@mui/material'\nimport { Meta, StoryFn } from '@storybook/react'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { PayloadWrapper } from '@xyo-network/payload-wrapper'\nimport { sampleBlockWithPayloads, useAppThemeDecorator } from '@xyo-network/react-storybook'\n\nimport { Property } from './Property'\nimport { PropertyProps } from './Props'\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: Property,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'property/PropertyBox',\n} as Meta<typeof Property>\n\nconst Template: StoryFn<typeof Property> = (args: PropertyProps) => <Property {...args} paper={false}></Property>\n\nconst TemplateWithCompare: StoryFn<typeof Property> = (args: PropertyProps) => (\n  <FlexCol gap={1} alignItems=\"stretch\">\n    <FlexRow gap={1}>\n      <TextField size=\"small\" value=\"Sample text Field\" />\n      <Property {...args} size=\"small\"></Property>\n    </FlexRow>\n    <FlexRow gap={1}>\n      <Property {...args} size=\"small\"></Property>\n      <Property {...args} size=\"small\"></Property>\n    </FlexRow>\n    <FlexRow gap={1}>\n      <TextField size=\"medium\" value=\"Sample text Field\" />\n      <Property {...args} size=\"medium\"></Property>\n    </FlexRow>\n    <FlexRow gap={1}>\n      <Property {...args} size=\"medium\"></Property>\n      <Property {...args} size=\"medium\"></Property>\n    </FlexRow>\n    <FlexRow gap={1}>\n      <TextField value=\"Sample text Field\" />\n      <Property {...args} size=\"large\"></Property>\n    </FlexRow>\n    <FlexRow gap={1}>\n      <Property {...args} size=\"large\"></Property>\n      <Property {...args} size=\"large\"></Property>\n    </FlexRow>\n  </FlexCol>\n)\n\nconst Default = Template.bind({})\nDefault.args = {}\nDefault.decorators = [useAppThemeDecorator]\n\nconst WithTitle = Template.bind({})\nWithTitle.args = { title: 'No Data' }\nWithTitle.decorators = [useAppThemeDecorator]\n\nconst WithUndefinedData = Template.bind({})\nWithUndefinedData.args = { title: 'Block Hash' }\nWithUndefinedData.decorators = [useAppThemeDecorator]\n\nconst WithData = Template.bind({})\nWithData.args = { title: 'Block Hash', value: PayloadWrapper.hashSync(sampleBlockWithPayloads) }\nWithData.decorators = [useAppThemeDecorator]\n\nconst WithDataSmall = Template.bind({})\nWithDataSmall.args = { size: 'small', title: 'Block Hash', value: PayloadWrapper.hashSync(sampleBlockWithPayloads) }\nWithDataSmall.decorators = [useAppThemeDecorator]\n\nconst WithDataCompare = TemplateWithCompare.bind({})\nWithDataCompare.args = { tip: 'This is the block hash', title: 'Block Hash', value: PayloadWrapper.hashSync(sampleBlockWithPayloads) }\nWithDataCompare.decorators = [useAppThemeDecorator]\n\nconst WithDataAndBadgeSmall = Template.bind({})\nWithDataAndBadgeSmall.args = {\n  badge: true,\n  size: 'small',\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nWithDataAndBadgeSmall.decorators = [useAppThemeDecorator]\n\nconst WithDataAndBadgeMedium = Template.bind({})\nWithDataAndBadgeMedium.args = {\n  badge: true,\n  size: 'medium',\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nWithDataAndBadgeMedium.decorators = [useAppThemeDecorator]\n\nconst WithDataAndBadgeLarge = Template.bind({})\nWithDataAndBadgeLarge.args = {\n  badge: true,\n  size: 'large',\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nWithDataAndBadgeLarge.decorators = [useAppThemeDecorator]\n\nconst WithTip = Template.bind({})\nWithTip.args = {\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nWithTip.decorators = [useAppThemeDecorator]\n\nconst WithTipAndBadge = Template.bind({})\nWithTipAndBadge.args = {\n  badge: true,\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nWithTipAndBadge.decorators = [useAppThemeDecorator]\n\nconst WithActions = Template.bind({})\nWithActions.args = {\n  actions: [{ name: 'ActionOne' }, { name: 'ActionTwo' }],\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nWithActions.decorators = [useAppThemeDecorator]\n\nconst LargeWithValue = Template.bind({})\nLargeWithValue.args = {\n  badge: true,\n  size: 'large',\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nLargeWithValue.decorators = [useAppThemeDecorator]\n\nconst LargeWithValueAndActions = Template.bind({})\nLargeWithValueAndActions.args = {\n  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],\n  badge: true,\n  size: 'large',\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nLargeWithValueAndActions.decorators = [useAppThemeDecorator]\n\nconst SmallWithValueAndActions = Template.bind({})\nSmallWithValueAndActions.args = {\n  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],\n  badge: true,\n  size: 'small',\n  tip: 'This is the block hash',\n  title: 'Block Hash',\n  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),\n}\nSmallWithValueAndActions.decorators = [useAppThemeDecorator]\n\nexport {\n  Default,\n  LargeWithValue,\n  LargeWithValueAndActions,\n  SmallWithValueAndActions,\n  WithActions,\n  WithData,\n  WithDataAndBadgeLarge,\n  WithDataAndBadgeMedium,\n  WithDataAndBadgeSmall,\n  WithDataCompare,\n  WithDataSmall,\n  WithTip,\n  WithTipAndBadge,\n  WithUndefinedData,\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"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","names":[]}

package/dist/browser/components/PropertyPaper.stories.js

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Replay as ReplayIcon } from "@mui/icons-material";
+import { TextField } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { PayloadWrapper } from "@xyo-network/payload-wrapper";
+import { sampleBlockWithPayloads, useAppThemeDecorator } from "@xyo-network/react-storybook";
+import { Property } from "./Property";
+const StorybookEntry = {
+  argTypes: {},
+  component: Property,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "property/PropertyPaper"
+};
+const Template = (args) => /* @__PURE__ */ jsx(Property, { ...args, paper: true });
+const TemplateWithCompare = (args) => /* @__PURE__ */ jsxs(FlexCol, { gap: 1, alignItems: "stretch", children: [
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { size: "small", value: "Sample text Field" }),
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "small" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "small" }),
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "small" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { size: "medium", value: "Sample text Field" }),
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "medium" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "medium" }),
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "medium" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { value: "Sample text Field" }),
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "large" })
+  ] }),
+  /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "large" }),
+    /* @__PURE__ */ jsx(Property, { ...args, paper: true, size: "large" })
+  ] })
+] });
+const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [useAppThemeDecorator];
+const WithTitle = Template.bind({});
+WithTitle.args = { title: "No Data" };
+WithTitle.decorators = [useAppThemeDecorator];
+const WithUndefinedData = Template.bind({});
+WithUndefinedData.args = { title: "Block Hash" };
+WithUndefinedData.decorators = [useAppThemeDecorator];
+const WithData = Template.bind({});
+WithData.args = { title: "Block Hash", value: PayloadWrapper.hashSync(sampleBlockWithPayloads) };
+WithData.decorators = [useAppThemeDecorator];
+const WithDataSmall = Template.bind({});
+WithDataSmall.args = { size: "small", title: "Block Hash", value: PayloadWrapper.hashSync(sampleBlockWithPayloads) };
+WithDataSmall.decorators = [useAppThemeDecorator];
+const WithDataCompare = TemplateWithCompare.bind({});
+WithDataCompare.args = { tip: "This is the block hash", title: "Block Hash", value: PayloadWrapper.hashSync(sampleBlockWithPayloads) };
+WithDataCompare.decorators = [useAppThemeDecorator];
+const WithDataCompareOutlined = TemplateWithCompare.bind({});
+WithDataCompareOutlined.args = {
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),
+  variant: "outlined"
+};
+WithDataCompareOutlined.decorators = [useAppThemeDecorator];
+const WithDataCompareElevation = TemplateWithCompare.bind({});
+WithDataCompareElevation.args = {
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads),
+  variant: "elevation"
+};
+WithDataCompareElevation.decorators = [useAppThemeDecorator];
+const WithDataAndBadgeSmall = Template.bind({});
+WithDataAndBadgeSmall.args = {
+  badge: true,
+  size: "small",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithDataAndBadgeSmall.decorators = [useAppThemeDecorator];
+const WithDataAndBadgeMedium = Template.bind({});
+WithDataAndBadgeMedium.args = {
+  badge: true,
+  size: "medium",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithDataAndBadgeMedium.decorators = [useAppThemeDecorator];
+const WithDataAndBadgeLarge = Template.bind({});
+WithDataAndBadgeLarge.args = {
+  badge: true,
+  size: "large",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithDataAndBadgeLarge.decorators = [useAppThemeDecorator];
+const WithTip = Template.bind({});
+WithTip.args = {
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithTip.decorators = [useAppThemeDecorator];
+const WithTipAndBadge = Template.bind({});
+WithTipAndBadge.args = {
+  badge: true,
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithTipAndBadge.decorators = [useAppThemeDecorator];
+const WithActions = Template.bind({});
+WithActions.args = {
+  actions: [{ name: "ActionOne" }, { name: "ActionTwo" }],
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+WithActions.decorators = [useAppThemeDecorator];
+const LargeWithValue = Template.bind({});
+LargeWithValue.args = {
+  badge: true,
+  size: "large",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+LargeWithValue.decorators = [useAppThemeDecorator];
+const LargeWithValueAndActions = Template.bind({});
+LargeWithValueAndActions.args = {
+  actions: [{ icon: /* @__PURE__ */ jsx(ReplayIcon, {}), name: "ActionOne" }, { name: "ActionTwo" }],
+  badge: true,
+  size: "large",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+LargeWithValueAndActions.decorators = [useAppThemeDecorator];
+const SmallWithValueAndActions = Template.bind({});
+SmallWithValueAndActions.args = {
+  actions: [{ icon: /* @__PURE__ */ jsx(ReplayIcon, {}), name: "ActionOne" }, { name: "ActionTwo" }],
+  badge: true,
+  size: "small",
+  tip: "This is the block hash",
+  title: "Block Hash",
+  value: PayloadWrapper.hashSync(sampleBlockWithPayloads)
+};
+SmallWithValueAndActions.decorators = [useAppThemeDecorator];
+var PropertyPaper_stories_default = StorybookEntry;
+export {
+  Default,
+  LargeWithValue,
+  LargeWithValueAndActions,
+  SmallWithValueAndActions,
+  WithActions,
+  WithData,
+  WithDataAndBadgeLarge,
+  WithDataAndBadgeMedium,
+  WithDataAndBadgeSmall,
+  WithDataCompare,
+  WithDataCompareElevation,
+  WithDataCompareOutlined,
+  WithDataSmall,
+  WithTip,
+  WithTipAndBadge,
+  WithUndefinedData,
+  PropertyPaper_stories_default as default
+};
+//# sourceMappingURL=PropertyPaper.stories.js.map