@xyo-network/react-property 7.6.2 → 8.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqC1D,CAAA"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6C1D,CAAA"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAC4B,aAAa,EACpD,MAAM,YAAY,CAAA;AAwEnB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAA"}
+{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAC4B,aAAa,EACpD,MAAM,YAAY,CAAA;AAkFnB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAA"}

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

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

package/dist/browser/index.mjs

@@ -45,16 +45,46 @@ var PropertyTitle = ({
   return /* @__PURE__ */ jsxs(
     FlexRow,
     {
-      bgcolor: isDark ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation) : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation),
-      alignItems: "center",
-      height: sizeTitleHeight[size],
-      justifyContent: "space-between",
       ...props,
+      sx: [{
+        bgcolor: isDark ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation) : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation),
+        alignItems: "center",
+        height: sizeTitleHeight[size],
+        justifyContent: "space-between"
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
       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
-        ] }),
+        /* @__PURE__ */ jsxs(
+          FlexRow,
+          {
+            sx: {
+              paddingX: 1,
+              paddingY: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  noWrap: true,
+                  variant: sizeVariants[size],
+                  sx: {
+                    fontWeight: 500,
+                    fontSize: sizeFontSize[size]
+                  },
+                  children: /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("strong", { children: title }) })
+                }
+              ),
+              tip ? /* @__PURE__ */ jsx(
+                QuickTipButton,
+                {
+                  style: { fontSize: quickTipSize },
+                  title: title ?? "",
+                  sx: { color: "inherit" },
+                  children: tip
+                }
+              ) : null
+            ]
+          }
+        ),
         more
       ]
     }
@@ -72,12 +102,51 @@ var PropertyGroupBox = ({
 }) => {
   const theme = useTheme2();
   const childrenArray = typeOf(children) === "array" ? children : void 0;
-  return /* @__PURE__ */ jsx2(FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ jsxs2(FlexRow2, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
-    /* @__PURE__ */ jsx2(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
-    childrenArray ? /* @__PURE__ */ jsx2(FlexGrowRow, { children: childrenArray?.map((child, index) => {
-      return child ? /* @__PURE__ */ jsx2(FlexGrowRow, { borderLeft: 1, borderColor: theme.vars.palette.divider, children: child }, child.key ?? `group-child-${index}`) : null;
-    }) }) : /* @__PURE__ */ jsx2(FlexGrowRow, { overflow: "hidden", children })
-  ] }) });
+  return /* @__PURE__ */ jsx2(
+    FlexCol,
+    {
+      ...props,
+      sx: [{
+        alignItems: "stretch",
+        overflow: "hidden"
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: /* @__PURE__ */ jsxs2(
+        FlexRow2,
+        {
+          sx: {
+            overflow: "hidden",
+            justifyContent: "stretch",
+            alignItems: "stretch"
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              PropertyTitle,
+              {
+                size: "full",
+                title,
+                tip,
+                ...titleProps,
+                sx: [{ alignItems: "flex-start" }, ...Array.isArray(titleProps?.sx) ? titleProps.sx : [titleProps?.sx]]
+              }
+            ),
+            childrenArray ? /* @__PURE__ */ jsx2(FlexGrowRow, { children: childrenArray?.map((child, index) => {
+              return child ? /* @__PURE__ */ jsx2(
+                FlexGrowRow,
+                {
+                  sx: {
+                    borderLeft: 1,
+                    borderColor: theme.vars.palette.divider
+                  },
+                  children: child
+                },
+                child.key ?? `group-child-${index}`
+              ) : null;
+            }) }) : /* @__PURE__ */ jsx2(FlexGrowRow, { sx: { overflow: "hidden" }, children })
+          ]
+        }
+      )
+    }
+  );
 };
 var PropertyGroupPaper = ({
   style,
@@ -129,7 +198,15 @@ var PropertyActionsMenu = ({ actions, ...props }) => {
     setAnchorEl(null);
   };
   return actions && actions?.length > 0 ? /* @__PURE__ */ jsxs3(FlexRow3, { ...props, children: [
-    /* @__PURE__ */ jsx3(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ jsx3(MoreHorizIcon, { fontSize: "inherit" }) }),
+    /* @__PURE__ */ jsx3(
+      IconButton,
+      {
+        size: "small",
+        onClick: handleClick,
+        sx: { color: "inherit" },
+        children: /* @__PURE__ */ jsx3(MoreHorizIcon, { sx: { fontSize: "inherit" } })
+      }
+    ),
     /* @__PURE__ */ jsx3(Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
       return /* @__PURE__ */ jsx3(
         MenuItem,
@@ -164,7 +241,27 @@ var IdenticonCorner = ({ value, ...props }) => {
     const height = ref.current?.parentElement?.parentElement?.clientHeight ?? 0;
     setCalculatedHeight(height);
   }, []);
-  return /* @__PURE__ */ jsx4(FlexRow4, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ jsx4(FlexRow4, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.vars.palette.divider}`, children: /* @__PURE__ */ jsx4("div", { ref, children: /* @__PURE__ */ jsx4(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
+  return /* @__PURE__ */ jsx4(
+    FlexRow4,
+    {
+      sx: {
+        alignItems: "flex-start",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsx4(
+        FlexRow4,
+        {
+          background: true,
+          sx: {
+            height: calculatedHeight,
+            width: calculatedHeight,
+            borderLeft: `1px solid ${theme.vars.palette.divider}`
+          },
+          children: /* @__PURE__ */ jsx4("div", { ref, children: /* @__PURE__ */ jsx4(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) })
+        }
+      )
+    }
+  );
 };
 
 // src/components/Value.tsx
@@ -184,9 +281,9 @@ var PropertyValue = ({
         title: value?.toString(),
         variant: typographyVariant
       },
-      width: "100%",
       ref,
       ...props,
+      sx: [{ width: "100%" }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
       children: value
     }
   );
@@ -217,32 +314,46 @@ var PropertyBox = ({
     medium: "body1",
     small: "body2"
   };
-  return /* @__PURE__ */ jsxs4(FlexRow5, { flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
-    title === void 0 ? null : /* @__PURE__ */ jsx6(
-      PropertyTitle,
-      {
-        tip,
-        title: required ? `${title}*` : title,
-        size,
-        more: /* @__PURE__ */ jsx6(PropertyActionsMenu, { actions }),
-        ...titleProps
-      }
-    ),
-    /* @__PURE__ */ jsxs4(
-      FlexRow5,
-      {
-        pl: 1,
-        columnGap: 1,
-        justifyContent: value === void 0 ? "center" : "space-between",
-        overflow: "hidden",
-        height: sizeValueHeight[size],
-        children: [
-          children ?? (value === void 0 ? /* @__PURE__ */ jsx6(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx6(PropertyValue, { value, typographyVariant: sizeVariants[size] })),
-          value === void 0 ? null : badge ? /* @__PURE__ */ jsx6(IdenticonCorner, { value }) : null
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs4(
+    FlexRow5,
+    {
+      ...props,
+      sx: [{
+        flexDirection: "column",
+        minWidth: 0,
+        alignItems: "stretch",
+        overflow: "hidden"
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: [
+        title === void 0 ? null : /* @__PURE__ */ jsx6(
+          PropertyTitle,
+          {
+            tip,
+            title: required ? `${title}*` : title,
+            size,
+            more: /* @__PURE__ */ jsx6(PropertyActionsMenu, { actions }),
+            ...titleProps
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          FlexRow5,
+          {
+            sx: {
+              pl: 1,
+              columnGap: 1,
+              justifyContent: value === void 0 ? "center" : "space-between",
+              overflow: "hidden",
+              height: sizeValueHeight[size]
+            },
+            children: [
+              children ?? (value === void 0 ? /* @__PURE__ */ jsx6(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx6(PropertyValue, { value, typographyVariant: sizeVariants[size] })),
+              value === void 0 ? null : badge ? /* @__PURE__ */ jsx6(IdenticonCorner, { value }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 PropertyBox.displayName = "PropertyBox";
 var PropertyPaper = ({

package/dist/browser/index.mjs.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-property",
-  "version": "7.6.2",
+  "version": "8.0.0",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -41,38 +41,38 @@
     "README.md"
   ],
   "dependencies": {
-    "@xyo-network/react-shared": "~7.6.2"
+    "@xyo-network/react-shared": "~8.0.0"
   },
   "devDependencies": {
     "@bitauth/libauth": "~3.0.0",
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@react-spring/web": "~10.0.3",
     "@scure/base": "~2.2.0",
     "@storybook/react-vite": "~10.3.6",
     "@types/react": "^19.2.14",
-    "@xylabs/pixel": "~5.1.1",
-    "@xylabs/react-button": "~7.2.3",
-    "@xylabs/react-flexbox": "~7.2.3",
-    "@xylabs/react-hooks": "~7.2.3",
-    "@xylabs/react-identicon": "~7.2.3",
-    "@xylabs/react-link": "~7.2.3",
-    "@xylabs/react-promise": "~7.2.3",
-    "@xylabs/react-quick-tip-button": "~7.2.3",
-    "@xylabs/react-shared": "~7.2.3",
-    "@xylabs/react-theme": "~7.2.3",
-    "@xylabs/sdk-js": "^5.1.1",
-    "@xylabs/threads": "~5.1.1",
-    "@xylabs/toolchain": "~7.13.7",
-    "@xylabs/tsconfig": "^7.13.7",
-    "@xylabs/tsconfig-dom": "^7.13.7",
-    "@xylabs/tsconfig-react": "~7.13.7",
-    "@xyo-network/boundwitness-model": "^5.6.2",
-    "@xyo-network/boundwitness-validator": "^5.6.1",
-    "@xyo-network/payload-builder": "^5.6.1",
-    "@xyo-network/payload-model": "^5.6.2",
+    "@xylabs/pixel": "~5.1.2",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-hooks": "~8.0",
+    "@xylabs/react-identicon": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-promise": "~8.0",
+    "@xylabs/react-quick-tip-button": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/react-theme": "~8.0",
+    "@xylabs/sdk-js": "^5.1.2",
+    "@xylabs/threads": "~5.1.2",
+    "@xylabs/toolchain": "~7.13.22",
+    "@xylabs/tsconfig": "^7.13.22",
+    "@xylabs/tsconfig-dom": "^7.13.22",
+    "@xylabs/tsconfig-react": "~7.13.22",
+    "@xyo-network/boundwitness-model": "^5.6.3",
+    "@xyo-network/boundwitness-validator": "^5.6.2",
+    "@xyo-network/payload-builder": "^5.6.2",
+    "@xyo-network/payload-model": "^5.6.3",
     "@xyo-network/typeof": "~5.3.30",
     "async-mutex": "^0.5.0",
     "bn.js": "^5.2.3",
@@ -90,66 +90,66 @@
     "observable-fns": "~0.6.1",
     "pako": "^2.1.0",
     "query-string": "~9.3.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-is": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-is": "^19.2.6",
     "react-router-dom": "^7.15.0",
     "recharts": "~3.8.1",
     "spark-md5": "~3.0.2",
     "storybook": "^10.3.6",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.11",
     "wasm-feature-detect": "~1.8.0",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@bitauth/libauth": ">=3.0.0 <3.1",
-    "@mui/icons-material": ">=7.3.10 <8",
-    "@mui/material": ">=7.3.10 <8",
-    "@opentelemetry/api": ">=1.9.1 <2",
-    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
-    "@react-spring/web": ">=10.0.3 <10.1",
-    "@scure/base": ">=2.2.0 <2.3",
-    "@xylabs/pixel": ">=5.1.1 <5.2",
-    "@xylabs/react-button": ">=7.2.3 <7.3",
-    "@xylabs/react-flexbox": ">=7.2.3 <7.3",
-    "@xylabs/react-hooks": ">=7.2.3 <7.3",
-    "@xylabs/react-identicon": ">=7.2.3 <7.3",
-    "@xylabs/react-link": ">=7.2.3 <7.3",
-    "@xylabs/react-promise": ">=7.2.3 <7.3",
-    "@xylabs/react-quick-tip-button": ">=7.2.3 <7.3",
-    "@xylabs/react-shared": ">=7.2.3 <7.3",
-    "@xylabs/react-theme": ">=7.2.3 <7.3",
-    "@xylabs/sdk-js": ">=5.1.1 <6",
-    "@xylabs/threads": ">=5.1.1 <5.2",
-    "@xyo-network/boundwitness-model": ">=5.6.2 <6",
-    "@xyo-network/boundwitness-validator": ">=5.6.1 <6",
-    "@xyo-network/payload-builder": ">=5.6.1 <6",
-    "@xyo-network/payload-model": ">=5.6.2 <6",
-    "@xyo-network/typeof": ">=5.3.30 <5.4",
-    "async-mutex": ">=0.5.0 <1",
-    "bn.js": ">=5.2.3 <6",
-    "bowser": ">=2.14.1 <3",
-    "buffer": ">=6.0.3 <7",
-    "chalk": ">=5.6.2 <6",
-    "debug": ">=4.4.3 <4.5",
-    "ethers": ">=6.16.0 <7",
-    "fast-deep-equal": ">=3.1.3 <3.2",
-    "hash-wasm": ">=4.12.0 <4.13",
-    "js-cookie": ">=3.0.5 <3.1",
-    "md5": ">=2.3.0 <2.4",
-    "mixpanel-browser": ">=2.78.0 <2.79",
-    "observable-fns": ">=0.6.1 <0.7",
-    "pako": ">=2.1.0 <3",
-    "query-string": ">=9.3.1 <9.4",
-    "react": ">=19.2.5 <20",
-    "react-dom": ">=19.2.5 <20",
-    "react-is": ">=19.2.5 <20",
-    "react-router-dom": ">=7.15.0 <8",
-    "recharts": ">=3.8.1 <3.9",
-    "spark-md5": ">=3.0.2 <3.1",
-    "wasm-feature-detect": ">=1.8.0 <1.9",
-    "zod": ">=4.4.3 <5"
+    "@bitauth/libauth": "~3.0",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
+    "@opentelemetry/api": "^1.9",
+    "@opentelemetry/sdk-trace-base": "^2.7",
+    "@react-spring/web": "~10.0",
+    "@scure/base": "~2.2",
+    "@xylabs/pixel": "~5.1",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-hooks": "~8.0",
+    "@xylabs/react-identicon": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-promise": "~8.0",
+    "@xylabs/react-quick-tip-button": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/react-theme": "~8.0",
+    "@xylabs/sdk-js": "^5.1",
+    "@xylabs/threads": "~5.1",
+    "@xyo-network/boundwitness-model": "^5.6",
+    "@xyo-network/boundwitness-validator": "^5.6",
+    "@xyo-network/payload-builder": "^5.6",
+    "@xyo-network/payload-model": "^5.6",
+    "@xyo-network/typeof": "~5.3",
+    "async-mutex": "^0.5",
+    "bn.js": "^5.2",
+    "bowser": "^2.14",
+    "buffer": "^6.0",
+    "chalk": "^5.6",
+    "debug": "~4.4",
+    "ethers": "^6.16",
+    "fast-deep-equal": "~3.1",
+    "hash-wasm": "~4.12",
+    "js-cookie": "~3.0",
+    "md5": "~2.3",
+    "mixpanel-browser": "~2.78",
+    "observable-fns": "~0.6",
+    "pako": "^2.1",
+    "query-string": "~9.3",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "react-is": "^19.2",
+    "react-router-dom": "^7.15",
+    "recharts": "~3.8",
+    "spark-md5": "~3.0",
+    "wasm-feature-detect": "~1.8",
+    "zod": "^4.4"
   },
   "publishConfig": {
     "access": "public"