@xyo-network/react-property 2.25.20 → 2.25.23

package/src/components/PropertyPaper.stories.tsx

@@ -0,0 +1,174 @@
+import ReplayIcon from '@mui/icons-material/Replay'
+import { TextField } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+
+import { appThemeDecorator, sampleBlockWithPayloads } from '../.storybook'
+import { Property } from './Property'
+import { PropertyPaperProps } from './Props'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: Property,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Properties/PropertyPaper',
+} as ComponentMeta<typeof Property>
+
+const Template: ComponentStory<typeof Property> = (args) => <Property {...(args as PropertyPaperProps)} paper={true}></Property>
+
+const TemplateWithCompare: ComponentStory<typeof Property> = (args) => (
+  <FlexCol gap={1} alignItems="stretch">
+    <FlexRow gap={1}>
+      <TextField size="small" value="Sample text Field" />
+      <Property {...(args as PropertyPaperProps)} paper={true} size="small"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="small"></Property>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="small"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <TextField size="medium" value="Sample text Field" />
+      <Property {...(args as PropertyPaperProps)} paper={true} size="medium"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="medium"></Property>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="medium"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <TextField value="Sample text Field" />
+      <Property {...(args as PropertyPaperProps)} paper={true} size="large"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="large"></Property>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="large"></Property>
+    </FlexRow>
+  </FlexCol>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [appThemeDecorator]
+
+const WithTitle = Template.bind({})
+WithTitle.args = { title: 'No Data' }
+WithTitle.decorators = [appThemeDecorator]
+
+const WithUndefinedData = Template.bind({})
+WithUndefinedData.args = { title: 'Block Hash' }
+WithUndefinedData.decorators = [appThemeDecorator]
+
+const WithData = Template.bind({})
+WithData.args = { title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithData.decorators = [appThemeDecorator]
+
+const WithDataSmall = Template.bind({})
+WithDataSmall.args = { size: 'small', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataSmall.decorators = [appThemeDecorator]
+
+const WithDataCompare = TemplateWithCompare.bind({})
+WithDataCompare.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataCompare.decorators = [appThemeDecorator]
+
+const WithDataCompareOutlined = TemplateWithCompare.bind({})
+WithDataCompareOutlined.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash, variant: 'outlined' }
+WithDataCompareOutlined.decorators = [appThemeDecorator]
+
+const WithDataCompareElevation = TemplateWithCompare.bind({})
+WithDataCompareElevation.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash, variant: 'elevation' }
+WithDataCompareElevation.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeSmall = Template.bind({})
+WithDataAndBadgeSmall.args = { badge: true, size: 'small', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeSmall.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeMedium = Template.bind({})
+WithDataAndBadgeMedium.args = { badge: true, size: 'medium', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeMedium.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeLarge = Template.bind({})
+WithDataAndBadgeLarge.args = { badge: true, size: 'large', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeLarge.decorators = [appThemeDecorator]
+
+const WithTip = Template.bind({})
+WithTip.args = {
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithTip.decorators = [appThemeDecorator]
+
+const WithTipAndBadge = Template.bind({})
+WithTipAndBadge.args = {
+  badge: true,
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithTipAndBadge.decorators = [appThemeDecorator]
+
+const WithActions = Template.bind({})
+WithActions.args = {
+  actions: [{ name: 'ActionOne' }, { name: 'ActionTwo' }],
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithActions.decorators = [appThemeDecorator]
+
+const LargeWithValue = Template.bind({})
+LargeWithValue.args = {
+  badge: true,
+  size: 'large',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+LargeWithValue.decorators = [appThemeDecorator]
+
+const LargeWithValueAndActions = Template.bind({})
+LargeWithValueAndActions.args = {
+  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
+  badge: true,
+  size: 'large',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+LargeWithValueAndActions.decorators = [appThemeDecorator]
+
+const SmallWithValueAndActions = Template.bind({})
+SmallWithValueAndActions.args = {
+  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
+  badge: true,
+  size: 'small',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+SmallWithValueAndActions.decorators = [appThemeDecorator]
+
+export {
+  Default,
+  LargeWithValue,
+  LargeWithValueAndActions,
+  SmallWithValueAndActions,
+  WithActions,
+  WithData,
+  WithDataAndBadgeLarge,
+  WithDataAndBadgeMedium,
+  WithDataAndBadgeSmall,
+  WithDataCompare,
+  WithDataCompareElevation,
+  WithDataCompareOutlined,
+  WithDataSmall,
+  WithTip,
+  WithTipAndBadge,
+  WithUndefinedData,
+}
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Props.tsx

@@ -0,0 +1,48 @@
+import { PaperProps } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/sdk-react'
+import { SizeProp } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+
+import { PropertyAction } from './Action'
+import { PropertyTitleProps } from './Title'
+
+export interface PropertyBaseProps {
+  tip?: ReactNode
+  title?: string
+  paper?: boolean
+  titleProps?: PropertyTitleProps
+}
+
+export type PropertyFieldBaseProps = PropertyBaseProps & {
+  actions?: PropertyAction[]
+  required?: boolean
+  value?: string | number | boolean | null
+  badge?: boolean
+  size?: SizeProp
+}
+
+export type PropertyBoxProps = PropertyFieldBaseProps &
+  FlexBoxProps & {
+    paper?: false
+  }
+
+export type PropertyPaperProps = PropertyFieldBaseProps &
+  PaperProps & {
+    paper: true
+  }
+
+export type PropertyProps = PropertyBoxProps | PropertyPaperProps
+
+export type PropertyGroupBaseProps = PropertyBaseProps
+
+export type PropertyGroupBoxProps = PropertyGroupBaseProps &
+  FlexBoxProps & {
+    paper?: false
+  }
+
+export type PropertyGroupPaperProps = PropertyGroupBaseProps &
+  PaperProps & {
+    paper: true
+  }
+
+export type PropertyGroupProps = PropertyGroupBoxProps | PropertyGroupPaperProps

package/src/components/Title.tsx

@@ -1,32 +1,60 @@
-import { Typography, TypographyVariant, useTheme } from '@mui/material'
+import { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'
 import { FlexBoxProps, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
 import { SizeProp } from '@xyo-network/react-shared'
 import { ReactNode } from 'react'
 
+type TitleSizeProp = SizeProp | 'full'
+
 export interface PropertyTitleProps extends FlexBoxProps {
   tip?: ReactNode
   more?: ReactNode
   title?: string
-  size?: SizeProp
+  size?: TitleSizeProp
+  elevation?: number
 }
 
-export const PropertyTitle: React.FC<PropertyTitleProps> = ({ size = 'medium', tip, more, title, ...props }) => {
-  const sizeVariants: Record<SizeProp, TypographyVariant> = {
-    large: 'h6',
+export const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {
+  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {
+    full: 'caption',
+    large: 'caption',
     medium: 'caption',
     small: 'caption',
   }
 
+  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {
+    full: undefined,
+    large: 32,
+    medium: 20,
+    small: 16,
+  }
+
+  const sizeFontSize: Record<TitleSizeProp, number> = {
+    full: 16,
+    large: 16,
+    medium: 14,
+    small: 10,
+  }
+
+  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16
+
   const theme = useTheme()
 
   return (
-    <FlexRow justifyContent="space-between" {...props}>
-      <FlexRow paddingX={1}>
-        <Typography noWrap variant={sizeVariants[size]}>
-          {title}
+    <FlexRow
+      bgcolor={theme.palette.mode === 'dark' ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.05 * elevation)}
+      alignItems="center"
+      height={sizeTitleHeight[size]}
+      justifyContent="space-between"
+      {...props}
+    >
+      <FlexRow paddingX={1} paddingY={0.5}>
+        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>
+          <small>
+            <strong>{title}</strong>
+          </small>
         </Typography>
         {tip ? (
-          <QuickTipButton style={{ fontSize: theme.typography[sizeVariants[size]].fontSize }} color="inherit" title={title ?? ''}>
+          <QuickTipButton style={{ fontSize: quickTipSize }} color="inherit" title={title ?? ''}>
             {tip}
           </QuickTipButton>
         ) : null}

package/src/components/Value.tsx

@@ -48,7 +48,7 @@ export const PropertyValue: React.FC<PropertyValueProps> = ({ value, shortSpace,
   }, [])
 
   return value !== undefined ? (
-    <Typography minWidth={0} marginX={1} ref={ref} component="div" variant={typographyVariant} fontFamily="monospace" fontWeight="light" {...customThemeProps} {...props}>
+    <Typography minWidth={0} ref={ref} component="div" variant={typographyVariant} fontFamily="monospace" fontWeight="light" {...customThemeProps} {...props}>
       {value}
     </Typography>
   ) : null

package/src/components/index.ts

@@ -1,6 +1,5 @@
+export * from './Action'
+export * from './Group'
 export * from './Property'
-export * from './PropertyAction'
-export * from './PropertyGroup'
-export * from './PropertyProps'
-export * from './usePropertyHeroProps'
+export * from './Props'
 export * from './Value'

package/dist/cjs/components/PropertyAction.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyAction.js","sourceRoot":"","sources":["../../../src/components/PropertyAction.ts"],"names":[],"mappings":""}

package/dist/cjs/components/PropertyActions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyActions.js","sourceRoot":"","sources":["../../../src/components/PropertyActions.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiD;AACjD,iDAAqD;AAI9C,MAAM,eAAe,GAAmC,CAAC,EAAsC,EAAE,EAAE;;QAA1C,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAApC,sBAAsC,CAAF;IAClG,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAClC,uBAAC,mBAAO,oBAAK,KAAK,cAChB,uBAAC,gBAAK,kBAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,gBAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CACnB,uBAAC,qBAAU,kBAAC,IAAI,EAAC,OAAO,EAAa,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,gBACzE,MAAM,CAAC,IAAI,KADgB,KAAK,CAEtB,CACd,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,uBAAC,oBAAQ,kBAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAa,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,gBACpI,MAAM,CAAC,IAAI,KAD8B,KAAK,CAEtC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,IACI,IACA,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;KACT;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AArBY,QAAA,eAAe,mBAqB3B"}

package/dist/cjs/components/PropertyActionsMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyActionsMenu.js","sourceRoot":"","sources":["../../../src/components/PropertyActionsMenu.tsx"],"names":[],"mappings":";;;;;AAAA,sFAAyD;AACzD,4CAA0D;AAC1D,iDAA2C;AAC3C,iCAAgC;AAIzB,MAAM,mBAAmB,GAAmC,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAnB,WAAqB,CAAF;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAqB,IAAI,CAAC,CAAA;IAClE,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAA;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC3D,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;IAClC,CAAC,CAAA;IACD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,WAAW,CAAC,IAAI,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,OAAO,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,CACtC,wBAAC,mBAAO,oBAAK,KAAK,eAChB,uBAAC,qBAAU,kBAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,gBAC3D,uBAAC,mBAAa,IAAC,QAAQ,EAAC,SAAS,GAAG,IACzB,EACb,uBAAC,eAAI,kBAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,gBACvD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACvB,OAAO,CACL,uBAAC,mBAAQ,kBAEP,OAAO,EAAE,GAAG,EAAE;;4BACZ,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,sDAAI,CAAA;4BACnB,WAAW,EAAE,CAAA;wBACf,CAAC,gBAEA,MAAM,CAAC,IAAI,KANP,MAAM,CAAC,IAAI,CAOP,CACZ,CAAA;gBACH,CAAC,CAAC,IACG,KACC,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAjCY,QAAA,mBAAmB,uBAiC/B"}

package/dist/cjs/components/PropertyActionsProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyActionsProps.js","sourceRoot":"","sources":["../../../src/components/PropertyActionsProps.ts"],"names":[],"mappings":""}

package/dist/cjs/components/PropertyGroup.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PropertyGroup = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const sdk_react_1 = require("@xylabs/sdk-react");
-const core_1 = require("@xyo-network/core");
-const PropertyGroup = (_a) => {
-    var { border, borderColor, borderRadius, variant = 'outlined', children, title, color = 'secondary', tip } = _a, props = tslib_1.__rest(_a, ["border", "borderColor", "borderRadius", "variant", "children", "title", "color", "tip"]);
-    const theme = (0, material_1.useTheme)();
-    const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color;
-    const childrenArray = (0, core_1.typeOf)(children) === 'array' ? children : undefined;
-    return ((0, jsx_runtime_1.jsxs)(sdk_react_1.FlexRow, Object.assign({ border: (border !== null && border !== void 0 ? border : variant === 'outlined') ? 1 : 0, borderColor: (borderColor !== null && borderColor !== void 0 ? borderColor : variant === 'outlined') ? theme.palette.divider : undefined, borderRadius: (borderRadius !== null && borderRadius !== void 0 ? borderRadius : variant === 'outlined') ? 1 : undefined, overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch" }, props, { children: [(0, jsx_runtime_1.jsxs)(sdk_react_1.FlexRow, Object.assign({ padding: 1, justifyContent: "start", bgcolor: bgcolor, color: theme.palette.getContrastText(bgcolor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: title }), tip ? ((0, jsx_runtime_1.jsx)(sdk_react_1.QuickTipButton, Object.assign({ color: "inherit", title: title }, { children: tip }))) : null] })), childrenArray ? ((0, jsx_runtime_1.jsx)(sdk_react_1.FlexGrowRow, { children: childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.map((child, index) => {
-                    return child ? ((0, jsx_runtime_1.jsx)(sdk_react_1.FlexGrowRow, Object.assign({ borderLeft: 1, borderColor: theme.palette.divider }, { children: child }), index)) : null;
-                }) })) : (children)] })));
-};
-exports.PropertyGroup = PropertyGroup;
-//# sourceMappingURL=PropertyGroup.js.map

package/dist/cjs/components/PropertyGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyGroup.js","sourceRoot":"","sources":["../../../src/components/PropertyGroup.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAoD;AACpD,iDAAwE;AACxE,4CAA0C;AAKnC,MAAM,aAAa,GAAiC,CAAC,EAAgH,EAAE,EAAE;QAApH,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,OAAY,EAAP,KAAK,sBAA9G,yFAAgH,CAAF;IACxK,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IAChG,MAAM,aAAa,GAAG,IAAA,aAAM,EAAC,QAAQ,CAAC,KAAK,OAAO,CAAC,CAAC,CAAE,QAA2B,CAAC,CAAC,CAAC,SAAS,CAAA;IAC7F,OAAO,CACL,wBAAC,mBAAO,kBACN,MAAM,EAAE,CAAA,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,OAAO,KAAK,UAAU,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChD,WAAW,EAAE,CAAA,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,OAAO,KAAK,UAAU,EAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACtF,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,OAAO,KAAK,UAAU,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpE,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,YAAY,EAC3B,UAAU,EAAC,SAAS,IAChB,KAAK,eAET,wBAAC,mBAAO,kBAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,iBACzG,uBAAC,qBAAU,cAAE,KAAK,GAAc,EAC/B,GAAG,CAAC,CAAC,CAAC,CACL,uBAAC,0BAAc,kBAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,gBACzC,GAAG,IACW,CAClB,CAAC,CAAC,CAAC,IAAI,KACA,EACT,aAAa,CAAC,CAAC,CAAC,CACf,uBAAC,uBAAW,cACT,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,uBAAC,uBAAW,kBAAa,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,gBACvE,KAAK,KADU,KAAK,CAET,CACf,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,GACU,CACf,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,KACO,CACX,CAAA;AACH,CAAC,CAAA;AArCY,QAAA,aAAa,iBAqCzB"}

package/dist/cjs/components/PropertyProps.d.ts

@@ -1,18 +0,0 @@
-import { FlexBoxProps } from '@xylabs/sdk-react';
-import { SizeProp } from '@xyo-network/react-shared';
-import { ReactNode } from 'react';
-import { PropertyAction } from './PropertyAction';
-export interface PropertyBaseProps extends FlexBoxProps {
-    tip?: ReactNode;
-    title?: string;
-    color?: 'primary' | 'secondary' | string;
-    variant?: 'outlined' | 'default';
-}
-export interface PropertyProps extends PropertyBaseProps {
-    actions?: PropertyAction[];
-    required?: boolean;
-    value?: string | number | boolean | null;
-    badge?: boolean;
-    size?: SizeProp;
-}
-export declare type PropertyGroupProps = PropertyBaseProps;

package/dist/cjs/components/PropertyProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyProps.js","sourceRoot":"","sources":["../../../src/components/PropertyProps.tsx"],"names":[],"mappings":""}

package/dist/cjs/components/usePropertyHeroProps.d.ts

@@ -1,6 +0,0 @@
-declare const usePropertyHeroProps: (props: Record<any, any>) => {
-    isHero: any;
-    paddingFactor: any;
-    showBadge: any;
-};
-export { usePropertyHeroProps };

package/dist/cjs/components/usePropertyHeroProps.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePropertyHeroProps = void 0;
-// Any is ok since we are destructuring props of any shape
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const usePropertyHeroProps = (props) => {
-    const { isHero, paddingFactor, showBadge } = props;
-    return {
-        isHero,
-        paddingFactor,
-        showBadge,
-    };
-};
-exports.usePropertyHeroProps = usePropertyHeroProps;
-//# sourceMappingURL=usePropertyHeroProps.js.map

package/dist/cjs/components/usePropertyHeroProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePropertyHeroProps.js","sourceRoot":"","sources":["../../../src/components/usePropertyHeroProps.tsx"],"names":[],"mappings":";;;AAAA,0DAA0D;AAC1D,8DAA8D;AAC9D,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAE,EAAE;IACvD,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAClD,OAAO;QACL,MAAM;QACN,aAAa;QACb,SAAS;KACV,CAAA;AACH,CAAC,CAAA;AAEQ,oDAAoB"}

package/dist/esm/components/PropertyAction.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=PropertyAction.js.map

package/dist/esm/components/PropertyAction.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyAction.js","sourceRoot":"","sources":["../../../src/components/PropertyAction.ts"],"names":[],"mappings":""}

package/dist/esm/components/PropertyActions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyActions.js","sourceRoot":"","sources":["../../../src/components/PropertyActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,OAAO,OAAK,KAAK,YAChB,KAAC,KAAK,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,YAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAa,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YACzE,MAAM,CAAC,IAAI,IADgB,KAAK,CAEtB,CACd,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAa,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YACpI,MAAM,CAAC,IAAI,IAD8B,KAAK,CAEtC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,GACI,GACA,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;KACT;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/dist/esm/components/PropertyActionsMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyActionsMenu.js","sourceRoot":"","sources":["../../../src/components/PropertyActionsMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIhC,MAAM,CAAC,MAAM,mBAAmB,GAAmC,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAClE,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAA;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC3D,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;IAClC,CAAC,CAAA;IACD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,WAAW,CAAC,IAAI,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,OAAO,IAAI,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtC,MAAC,OAAO,OAAK,KAAK,aAChB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,YAC3D,KAAC,aAAa,IAAC,QAAQ,EAAC,SAAS,GAAG,GACzB,EACb,KAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YACvD,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACvB,OAAO,CACL,KAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,EAAE,OAAO,EAAE,EAAE,CAAA;4BACnB,WAAW,EAAE,CAAA;wBACf,CAAC,YAEA,MAAM,CAAC,IAAI,IANP,MAAM,CAAC,IAAI,CAOP,CACZ,CAAA;gBACH,CAAC,CAAC,GACG,IACC,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/dist/esm/components/PropertyActionsProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=PropertyActionsProps.js.map

package/dist/esm/components/PropertyActionsProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyActionsProps.js","sourceRoot":"","sources":["../../../src/components/PropertyActionsProps.ts"],"names":[],"mappings":""}

package/dist/esm/components/PropertyGroup.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, useTheme } from '@mui/material';
-import { FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react';
-import { typeOf } from '@xyo-network/core';
-export const PropertyGroup = ({ border, borderColor, borderRadius, variant = 'outlined', children, title, color = 'secondary', tip, ...props }) => {
-    const theme = useTheme();
-    const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color;
-    const childrenArray = typeOf(children) === 'array' ? children : undefined;
-    return (_jsxs(FlexRow, { border: border ?? variant === 'outlined' ? 1 : 0, borderColor: borderColor ?? variant === 'outlined' ? theme.palette.divider : undefined, borderRadius: borderRadius ?? variant === 'outlined' ? 1 : undefined, overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", ...props, children: [_jsxs(FlexRow, { padding: 1, justifyContent: "start", bgcolor: bgcolor, color: theme.palette.getContrastText(bgcolor), children: [_jsx(Typography, { children: title }), tip ? (_jsx(QuickTipButton, { color: "inherit", title: title, children: tip })) : null] }), childrenArray ? (_jsx(FlexGrowRow, { children: childrenArray?.map((child, index) => {
-                    return child ? (_jsx(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index)) : null;
-                }) })) : (children)] }));
-};
-//# sourceMappingURL=PropertyGroup.js.map

package/dist/esm/components/PropertyGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyGroup.js","sourceRoot":"","sources":["../../../src/components/PropertyGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAK1C,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9K,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IAChG,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,OAAO,CAAC,CAAC,CAAE,QAA2B,CAAC,CAAC,CAAC,SAAS,CAAA;IAC7F,OAAO,CACL,MAAC,OAAO,IACN,MAAM,EAAE,MAAM,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChD,WAAW,EAAE,WAAW,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACtF,YAAY,EAAE,YAAY,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpE,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,YAAY,EAC3B,UAAU,EAAC,SAAS,KAChB,KAAK,aAET,MAAC,OAAO,IAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,aACzG,KAAC,UAAU,cAAE,KAAK,GAAc,EAC/B,GAAG,CAAC,CAAC,CAAC,CACL,KAAC,cAAc,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,YACzC,GAAG,GACW,CAClB,CAAC,CAAC,CAAC,IAAI,IACA,EACT,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,WAAW,cACT,aAAa,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,WAAW,IAAa,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,YACvE,KAAK,IADU,KAAK,CAET,CACf,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,GACU,CACf,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,IACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/PropertyProps.d.ts

@@ -1,18 +0,0 @@
-import { FlexBoxProps } from '@xylabs/sdk-react';
-import { SizeProp } from '@xyo-network/react-shared';
-import { ReactNode } from 'react';
-import { PropertyAction } from './PropertyAction';
-export interface PropertyBaseProps extends FlexBoxProps {
-    tip?: ReactNode;
-    title?: string;
-    color?: 'primary' | 'secondary' | string;
-    variant?: 'outlined' | 'default';
-}
-export interface PropertyProps extends PropertyBaseProps {
-    actions?: PropertyAction[];
-    required?: boolean;
-    value?: string | number | boolean | null;
-    badge?: boolean;
-    size?: SizeProp;
-}
-export declare type PropertyGroupProps = PropertyBaseProps;

package/dist/esm/components/PropertyProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=PropertyProps.js.map

package/dist/esm/components/PropertyProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PropertyProps.js","sourceRoot":"","sources":["../../../src/components/PropertyProps.tsx"],"names":[],"mappings":""}

package/dist/esm/components/usePropertyHeroProps.d.ts

@@ -1,6 +0,0 @@
-declare const usePropertyHeroProps: (props: Record<any, any>) => {
-    isHero: any;
-    paddingFactor: any;
-    showBadge: any;
-};
-export { usePropertyHeroProps };

package/dist/esm/components/usePropertyHeroProps.js

@@ -1,12 +0,0 @@
-// Any is ok since we are destructuring props of any shape
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const usePropertyHeroProps = (props) => {
-    const { isHero, paddingFactor, showBadge } = props;
-    return {
-        isHero,
-        paddingFactor,
-        showBadge,
-    };
-};
-export { usePropertyHeroProps };
-//# sourceMappingURL=usePropertyHeroProps.js.map

package/dist/esm/components/usePropertyHeroProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePropertyHeroProps.js","sourceRoot":"","sources":["../../../src/components/usePropertyHeroProps.tsx"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,8DAA8D;AAC9D,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAE,EAAE;IACvD,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAClD,OAAO;QACL,MAAM;QACN,aAAa;QACb,SAAS;KACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/src/components/PropertyGroup.tsx

@@ -1,45 +0,0 @@
-import { Typography, useTheme } from '@mui/material'
-import { FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
-import { typeOf } from '@xyo-network/core'
-import { ReactElement } from 'react'
-
-import { PropertyGroupProps } from './PropertyProps'
-
-export const PropertyGroup: React.FC<PropertyGroupProps> = ({ border, borderColor, borderRadius, variant = 'outlined', children, title, color = 'secondary', tip, ...props }) => {
-  const theme = useTheme()
-  const bgcolor = color === 'primary' || color === 'secondary' ? theme.palette[color].main : color
-  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined
-  return (
-    <FlexRow
-      border={border ?? variant === 'outlined' ? 1 : 0}
-      borderColor={borderColor ?? variant === 'outlined' ? theme.palette.divider : undefined}
-      borderRadius={borderRadius ?? variant === 'outlined' ? 1 : undefined}
-      overflow="hidden"
-      justifyContent="flex-start"
-      alignItems="stretch"
-      {...props}
-    >
-      <FlexRow padding={1} justifyContent="start" bgcolor={bgcolor} color={theme.palette.getContrastText(bgcolor)}>
-        <Typography>{title}</Typography>
-        {tip ? (
-          <QuickTipButton color="inherit" title={title}>
-            {tip}
-          </QuickTipButton>
-        ) : null}
-      </FlexRow>
-      {childrenArray ? (
-        <FlexGrowRow>
-          {childrenArray?.map((child, index) => {
-            return child ? (
-              <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>
-                {child}
-              </FlexGrowRow>
-            ) : null
-          })}
-        </FlexGrowRow>
-      ) : (
-        children
-      )}
-    </FlexRow>
-  )
-}

package/src/components/PropertyProps.tsx

@@ -1,21 +0,0 @@
-import { FlexBoxProps } from '@xylabs/sdk-react'
-import { SizeProp } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
-
-import { PropertyAction } from './PropertyAction'
-
-export interface PropertyBaseProps extends FlexBoxProps {
-  tip?: ReactNode
-  title?: string
-  color?: 'primary' | 'secondary' | string
-  variant?: 'outlined' | 'default'
-}
-export interface PropertyProps extends PropertyBaseProps {
-  actions?: PropertyAction[]
-  required?: boolean
-  value?: string | number | boolean | null
-  badge?: boolean
-  size?: SizeProp
-}
-
-export type PropertyGroupProps = PropertyBaseProps

package/src/components/usePropertyHeroProps.tsx

@@ -1,12 +0,0 @@
-// Any is ok since we are destructuring props of any shape
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const usePropertyHeroProps = (props: Record<any, any>) => {
-  const { isHero, paddingFactor, showBadge } = props
-  return {
-    isHero,
-    paddingFactor,
-    showBadge,
-  }
-}
-
-export { usePropertyHeroProps }