@xyo-network/react-address-render 2.64.0-rc.3 → 2.64.0-rc.5

package/dist/node/components/RenderRowBox.js

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RenderRowBox_exports = {};
+__export(RenderRowBox_exports, {
+  AddressRenderRowBox: () => AddressRenderRowBox
+});
+module.exports = __toCommonJS(RenderRowBox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_react_event = require("@xyo-network/react-event");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_react = require("react");
+var import_favorite = require("./favorite");
+const AddressRenderRowBox = (0, import_react.forwardRef)(
+  ({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
+    const theme = (0, import_material.useTheme)();
+    const sharedRef = (0, import_react_shared.useShareForwardedRef)(ref);
+    const [elementRef, dispatch] = (0, import_react_event.useEvent)(void 0, sharedRef);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_flexbox.FlexRow,
+      {
+        gap: 2,
+        justifyContent: "flex-start",
+        ref: elementRef,
+        onClick: () => {
+          if (address) {
+            dispatch("address", "click", address);
+          }
+        },
+        ...props,
+        children: [
+          icons && address ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_identicon.Identicon, { size: iconSize, value: address }) }) : null,
+          iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_shared.EllipsizeBox,
+            {
+              disableSharedRef,
+              ellipsisPosition: "end",
+              width: "100%",
+              typographyProps: { fontSize: theme.typography.body1.fontSize },
+              children: name ?? address
+            }
+          ),
+          children,
+          showFavorite && address ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_favorite.FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
+        ]
+      }
+    );
+  }
+);
+AddressRenderRowBox.displayName = "AddressRenderRowBox";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddressRenderRowBox
+});
+//# sourceMappingURL=RenderRowBox.js.map

package/dist/node/components/RenderRowBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RenderRowBox.tsx"],"sourcesContent":["import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n  address?: string | null\n  disableSharedRef?: boolean\n  favorite?: boolean\n  iconOnly?: boolean\n  iconSize?: number\n  icons?: boolean\n  name?: string\n  showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n  (\n    { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n    ref,\n  ) => {\n    const theme = useTheme()\n\n    const sharedRef = useShareForwardedRef(ref)\n    const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n    return (\n      <FlexRow\n        gap={2}\n        justifyContent=\"flex-start\"\n        ref={elementRef}\n        onClick={() => {\n          if (address) {\n            dispatch('address', 'click', address)\n          }\n        }}\n        {...props}\n      >\n        {icons && address ? (\n          <ListItemIcon sx={{ minWidth: 0 }}>\n            <Identicon size={iconSize} value={address} />\n          </ListItemIcon>\n        ) : null}\n        {iconOnly ? null : (\n          <EllipsizeBox\n            disableSharedRef={disableSharedRef}\n            ellipsisPosition={'end'}\n            width=\"100%\"\n            typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n          >\n            {name ?? address}\n          </EllipsizeBox>\n        )}\n        {children}\n        {showFavorite && address ? (\n          <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n        ) : null}\n      </FlexRow>\n    )\n  },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BM;AA/BN,sBAAuC;AACvC,2BAAsC;AACtC,6BAA0B;AAC1B,yBAAyB;AACzB,0BAAmD;AACnD,mBAA2B;AAE3B,sBAAmC;AAa5B,MAAM,0BAAsB;AAAA,EACjC,CACE,EAAE,SAAS,UAAU,kBAAkB,UAAU,eAAe,OAAO,UAAU,WAAW,IAAI,OAAO,MAAM,eAAe,OAAO,GAAG,MAAM,GAC5I,QACG;AACH,UAAM,YAAQ,0BAAS;AAEvB,UAAM,gBAAY,0CAAqB,GAAG;AAC1C,UAAM,CAAC,YAAY,QAAQ,QAAI,6BAAS,QAAW,SAAS;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,KAAK;AAAA,QACL,SAAS,MAAM;AACb,cAAI,SAAS;AACX,qBAAS,WAAW,SAAS,OAAO;AAAA,UACtC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,UACR,4CAAC,gCAAa,IAAI,EAAE,UAAU,EAAE,GAC9B,sDAAC,oCAAU,MAAM,UAAU,OAAO,SAAS,GAC7C,IACE;AAAA,UACH,WAAW,OACV;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,kBAAkB;AAAA,cAClB,OAAM;AAAA,cACN,iBAAiB,EAAE,UAAU,MAAM,WAAW,MAAM,SAAS;AAAA,cAE5D,kBAAQ;AAAA;AAAA,UACX;AAAA,UAED;AAAA,UACA,gBAAgB,UACf,4CAAC,sCAAmB,MAAY,MAAM,SAAS,OAAO,SAAS,WAAW,WAAW,UAAU,cAAc,IAC3G;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;","names":[]}

package/dist/node/components/RenderRowBox.mjs

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ListItemIcon, useTheme } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { Identicon } from "@xylabs/react-identicon";
+import { useEvent } from "@xyo-network/react-event";
+import { EllipsizeBox, useShareForwardedRef } from "@xyo-network/react-shared";
+import { forwardRef } from "react";
+import { FavoriteIconButton } from "./favorite";
+const AddressRenderRowBox = forwardRef(
+  ({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
+    const theme = useTheme();
+    const sharedRef = useShareForwardedRef(ref);
+    const [elementRef, dispatch] = useEvent(void 0, sharedRef);
+    return /* @__PURE__ */ jsxs(
+      FlexRow,
+      {
+        gap: 2,
+        justifyContent: "flex-start",
+        ref: elementRef,
+        onClick: () => {
+          if (address) {
+            dispatch("address", "click", address);
+          }
+        },
+        ...props,
+        children: [
+          icons && address ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx(Identicon, { size: iconSize, value: address }) }) : null,
+          iconOnly ? null : /* @__PURE__ */ jsx(
+            EllipsizeBox,
+            {
+              disableSharedRef,
+              ellipsisPosition: "end",
+              width: "100%",
+              typographyProps: { fontSize: theme.typography.body1.fontSize },
+              children: name ?? address
+            }
+          ),
+          children,
+          showFavorite && address ? /* @__PURE__ */ jsx(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
+        ]
+      }
+    );
+  }
+);
+AddressRenderRowBox.displayName = "AddressRenderRowBox";
+export {
+  AddressRenderRowBox
+};
+//# sourceMappingURL=RenderRowBox.mjs.map

package/dist/node/components/RenderRowBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RenderRowBox.tsx"],"sourcesContent":["import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n  address?: string | null\n  disableSharedRef?: boolean\n  favorite?: boolean\n  iconOnly?: boolean\n  iconSize?: number\n  icons?: boolean\n  name?: string\n  showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n  (\n    { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n    ref,\n  ) => {\n    const theme = useTheme()\n\n    const sharedRef = useShareForwardedRef(ref)\n    const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n    return (\n      <FlexRow\n        gap={2}\n        justifyContent=\"flex-start\"\n        ref={elementRef}\n        onClick={() => {\n          if (address) {\n            dispatch('address', 'click', address)\n          }\n        }}\n        {...props}\n      >\n        {icons && address ? (\n          <ListItemIcon sx={{ minWidth: 0 }}>\n            <Identicon size={iconSize} value={address} />\n          </ListItemIcon>\n        ) : null}\n        {iconOnly ? null : (\n          <EllipsizeBox\n            disableSharedRef={disableSharedRef}\n            ellipsisPosition={'end'}\n            width=\"100%\"\n            typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n          >\n            {name ?? address}\n          </EllipsizeBox>\n        )}\n        {children}\n        {showFavorite && address ? (\n          <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n        ) : null}\n      </FlexRow>\n    )\n  },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"AA+BM,SAaM,KAbN;AA/BN,SAAS,cAAc,gBAAgB;AACvC,SAAuB,eAAe;AACtC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,cAAc,4BAA4B;AACnD,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AAa5B,MAAM,sBAAsB;AAAA,EACjC,CACE,EAAE,SAAS,UAAU,kBAAkB,UAAU,eAAe,OAAO,UAAU,WAAW,IAAI,OAAO,MAAM,eAAe,OAAO,GAAG,MAAM,GAC5I,QACG;AACH,UAAM,QAAQ,SAAS;AAEvB,UAAM,YAAY,qBAAqB,GAAG;AAC1C,UAAM,CAAC,YAAY,QAAQ,IAAI,SAAS,QAAW,SAAS;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,KAAK;AAAA,QACL,SAAS,MAAM;AACb,cAAI,SAAS;AACX,qBAAS,WAAW,SAAS,OAAO;AAAA,UACtC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,UACR,oBAAC,gBAAa,IAAI,EAAE,UAAU,EAAE,GAC9B,8BAAC,aAAU,MAAM,UAAU,OAAO,SAAS,GAC7C,IACE;AAAA,UACH,WAAW,OACV;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,kBAAkB;AAAA,cAClB,OAAM;AAAA,cACN,iBAAiB,EAAE,UAAU,MAAM,WAAW,MAAM,SAAS;AAAA,cAE5D,kBAAQ;AAAA;AAAA,UACX;AAAA,UAED;AAAA,UACA,gBAAgB,UACf,oBAAC,sBAAmB,MAAY,MAAM,SAAS,OAAO,SAAS,WAAW,WAAW,UAAU,cAAc,IAC3G;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;","names":[]}

package/dist/node/components/RenderRowBox.stories.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RenderRowBox_stories_exports = {};
+__export(RenderRowBox_stories_exports, {
+  Default: () => Default,
+  WithAddress: () => WithAddress,
+  WithChildren: () => WithChildren,
+  WithFavorite: () => WithFavorite,
+  WithFavoriteAlias: () => WithFavoriteAlias,
+  WithIcon: () => WithIcon,
+  WithIconOnly: () => WithIconOnly,
+  default: () => RenderRowBox_stories_default
+});
+module.exports = __toCommonJS(RenderRowBox_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_account = require("@xyo-network/account");
+var import_react_event = require("@xyo-network/react-event");
+var import_react2 = require("react");
+var import_RenderRowBox = require("./RenderRowBox");
+const address = new import_account.Account({ phrase: "temp" }).address;
+const StorybookEntry = {
+  argTypes: {},
+  component: import_RenderRowBox.AddressRenderRowBox,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "address/render/AddressRenderRowBox"
+};
+const Template = (args) => {
+  const [ref] = (0, import_react_event.useEvent)((noun, verb, data) => {
+    console.log(`${noun}|${verb}|${data}`);
+    const parsedEvent = JSON.parse(data ?? "");
+    if (parsedEvent.favorite) {
+      setName(parsedEvent.name);
+    } else {
+      setName(void 0);
+    }
+  });
+  const [name, setName] = (0, import_react2.useState)(args.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RenderRowBox.AddressRenderRowBox, { ...args, name, ref });
+};
+const Default = Template.bind({});
+Default.args = {};
+const WithAddress = Template.bind({});
+WithAddress.args = {
+  address
+};
+const WithIcon = Template.bind({});
+WithIcon.args = {
+  address,
+  icons: true
+};
+const WithIconOnly = Template.bind({});
+WithIconOnly.args = {
+  address,
+  iconOnly: true,
+  icons: true
+};
+const WithFavorite = Template.bind({});
+WithFavorite.args = {
+  address,
+  favorite: true,
+  icons: true,
+  showFavorite: true
+};
+const WithFavoriteAlias = Template.bind({});
+WithFavoriteAlias.args = {
+  address,
+  favorite: true,
+  icons: true,
+  name: "My Name",
+  showFavorite: true
+};
+const WithChildren = Template.bind({});
+WithChildren.args = {
+  address,
+  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "[InsertedChild]" }),
+  favorite: true,
+  icons: true,
+  showFavorite: true
+};
+var RenderRowBox_stories_default = StorybookEntry;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Default,
+  WithAddress,
+  WithChildren,
+  WithFavorite,
+  WithFavoriteAlias,
+  WithIcon,
+  WithIconOnly
+});
+//# sourceMappingURL=RenderRowBox.stories.js.map

package/dist/node/components/RenderRowBox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RenderRowBox.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { Account } from '@xyo-network/account'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useState } from 'react'\n\nimport { FavoriteItemEvent } from './lib'\nimport { AddressRenderRowBox } from './RenderRowBox'\n\nconst address = new Account({ phrase: 'temp' }).address\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: AddressRenderRowBox,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'address/render/AddressRenderRowBox',\n} as Meta<typeof AddressRenderRowBox>\n\nconst Template: StoryFn<typeof AddressRenderRowBox> = (args) => {\n  const [ref] = useEvent<HTMLLIElement>((noun, verb, data) => {\n    console.log(`${noun}|${verb}|${data}`)\n    const parsedEvent = JSON.parse(data ?? '') as FavoriteItemEvent\n    if (parsedEvent.favorite) {\n      setName(parsedEvent.name)\n    } else {\n      setName(undefined)\n    }\n  })\n  const [name, setName] = useState(args.name)\n  return <AddressRenderRowBox {...args} name={name} ref={ref} />\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nconst WithAddress = Template.bind({})\nWithAddress.args = {\n  address,\n}\n\nconst WithIcon = Template.bind({})\nWithIcon.args = {\n  address,\n  icons: true,\n}\n\nconst WithIconOnly = Template.bind({})\nWithIconOnly.args = {\n  address,\n  iconOnly: true,\n  icons: true,\n}\n\nconst WithFavorite = Template.bind({})\nWithFavorite.args = {\n  address,\n  favorite: true,\n  icons: true,\n  showFavorite: true,\n}\n\nconst WithFavoriteAlias = Template.bind({})\nWithFavoriteAlias.args = {\n  address,\n  favorite: true,\n  icons: true,\n  name: 'My Name',\n  showFavorite: true,\n}\n\nconst WithChildren = Template.bind({})\nWithChildren.args = {\n  address,\n  children: <span>{'[InsertedChild]'}</span>,\n  favorite: true,\n  icons: true,\n  showFavorite: true,\n}\n\nexport { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCS;AA/BT,qBAAwB;AACxB,yBAAyB;AACzB,IAAAA,gBAAyB;AAGzB,0BAAoC;AAEpC,MAAM,UAAU,IAAI,uBAAQ,EAAE,QAAQ,OAAO,CAAC,EAAE;AAEhD,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,SAAS;AAC9D,QAAM,CAAC,GAAG,QAAI,6BAAwB,CAAC,MAAM,MAAM,SAAS;AAC1D,YAAQ,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACrC,UAAM,cAAc,KAAK,MAAM,QAAQ,EAAE;AACzC,QAAI,YAAY,UAAU;AACxB,cAAQ,YAAY,IAAI;AAAA,IAC1B,OAAO;AACL,cAAQ,MAAS;AAAA,IACnB;AAAA,EACF,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK,IAAI;AAC1C,SAAO,4CAAC,2CAAqB,GAAG,MAAM,MAAY,KAAU;AAC9D;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAEhB,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AACpC,YAAY,OAAO;AAAA,EACjB;AACF;AAEA,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACjC,SAAS,OAAO;AAAA,EACd;AAAA,EACA,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAEA,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU,4CAAC,UAAM,6BAAkB;AAAA,EACnC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAKA,IAAO,+BAAQ;","names":["import_react"]}

package/dist/node/components/RenderRowBox.stories.mjs

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { Account } from "@xyo-network/account";
+import { useEvent } from "@xyo-network/react-event";
+import { useState } from "react";
+import { AddressRenderRowBox } from "./RenderRowBox";
+const address = new Account({ phrase: "temp" }).address;
+const StorybookEntry = {
+  argTypes: {},
+  component: AddressRenderRowBox,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "address/render/AddressRenderRowBox"
+};
+const Template = (args) => {
+  const [ref] = useEvent((noun, verb, data) => {
+    console.log(`${noun}|${verb}|${data}`);
+    const parsedEvent = JSON.parse(data ?? "");
+    if (parsedEvent.favorite) {
+      setName(parsedEvent.name);
+    } else {
+      setName(void 0);
+    }
+  });
+  const [name, setName] = useState(args.name);
+  return /* @__PURE__ */ jsx(AddressRenderRowBox, { ...args, name, ref });
+};
+const Default = Template.bind({});
+Default.args = {};
+const WithAddress = Template.bind({});
+WithAddress.args = {
+  address
+};
+const WithIcon = Template.bind({});
+WithIcon.args = {
+  address,
+  icons: true
+};
+const WithIconOnly = Template.bind({});
+WithIconOnly.args = {
+  address,
+  iconOnly: true,
+  icons: true
+};
+const WithFavorite = Template.bind({});
+WithFavorite.args = {
+  address,
+  favorite: true,
+  icons: true,
+  showFavorite: true
+};
+const WithFavoriteAlias = Template.bind({});
+WithFavoriteAlias.args = {
+  address,
+  favorite: true,
+  icons: true,
+  name: "My Name",
+  showFavorite: true
+};
+const WithChildren = Template.bind({});
+WithChildren.args = {
+  address,
+  children: /* @__PURE__ */ jsx("span", { children: "[InsertedChild]" }),
+  favorite: true,
+  icons: true,
+  showFavorite: true
+};
+var RenderRowBox_stories_default = StorybookEntry;
+export {
+  Default,
+  WithAddress,
+  WithChildren,
+  WithFavorite,
+  WithFavoriteAlias,
+  WithIcon,
+  WithIconOnly,
+  RenderRowBox_stories_default as default
+};
+//# sourceMappingURL=RenderRowBox.stories.mjs.map

package/dist/node/components/RenderRowBox.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RenderRowBox.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { Account } from '@xyo-network/account'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useState } from 'react'\n\nimport { FavoriteItemEvent } from './lib'\nimport { AddressRenderRowBox } from './RenderRowBox'\n\nconst address = new Account({ phrase: 'temp' }).address\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: AddressRenderRowBox,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'address/render/AddressRenderRowBox',\n} as Meta<typeof AddressRenderRowBox>\n\nconst Template: StoryFn<typeof AddressRenderRowBox> = (args) => {\n  const [ref] = useEvent<HTMLLIElement>((noun, verb, data) => {\n    console.log(`${noun}|${verb}|${data}`)\n    const parsedEvent = JSON.parse(data ?? '') as FavoriteItemEvent\n    if (parsedEvent.favorite) {\n      setName(parsedEvent.name)\n    } else {\n      setName(undefined)\n    }\n  })\n  const [name, setName] = useState(args.name)\n  return <AddressRenderRowBox {...args} name={name} ref={ref} />\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nconst WithAddress = Template.bind({})\nWithAddress.args = {\n  address,\n}\n\nconst WithIcon = Template.bind({})\nWithIcon.args = {\n  address,\n  icons: true,\n}\n\nconst WithIconOnly = Template.bind({})\nWithIconOnly.args = {\n  address,\n  iconOnly: true,\n  icons: true,\n}\n\nconst WithFavorite = Template.bind({})\nWithFavorite.args = {\n  address,\n  favorite: true,\n  icons: true,\n  showFavorite: true,\n}\n\nconst WithFavoriteAlias = Template.bind({})\nWithFavoriteAlias.args = {\n  address,\n  favorite: true,\n  icons: true,\n  name: 'My Name',\n  showFavorite: true,\n}\n\nconst WithChildren = Template.bind({})\nWithChildren.args = {\n  address,\n  children: <span>{'[InsertedChild]'}</span>,\n  favorite: true,\n  icons: true,\n  showFavorite: true,\n}\n\nexport { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"AAgCS;AA/BT,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAGzB,SAAS,2BAA2B;AAEpC,MAAM,UAAU,IAAI,QAAQ,EAAE,QAAQ,OAAO,CAAC,EAAE;AAEhD,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,SAAS;AAC9D,QAAM,CAAC,GAAG,IAAI,SAAwB,CAAC,MAAM,MAAM,SAAS;AAC1D,YAAQ,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACrC,UAAM,cAAc,KAAK,MAAM,QAAQ,EAAE;AACzC,QAAI,YAAY,UAAU;AACxB,cAAQ,YAAY,IAAI;AAAA,IAC1B,OAAO;AACL,cAAQ,MAAS;AAAA,IACnB;AAAA,EACF,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,IAAI;AAC1C,SAAO,oBAAC,uBAAqB,GAAG,MAAM,MAAY,KAAU;AAC9D;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAEhB,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AACpC,YAAY,OAAO;AAAA,EACjB;AACF;AAEA,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACjC,SAAS,OAAO;AAAA,EACd;AAAA,EACA,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AACT;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAEA,MAAM,oBAAoB,SAAS,KAAK,CAAC,CAAC;AAC1C,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AAEA,MAAM,eAAe,SAAS,KAAK,CAAC,CAAC;AACrC,aAAa,OAAO;AAAA,EAClB;AAAA,EACA,UAAU,oBAAC,UAAM,6BAAkB;AAAA,EACnC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAChB;AAKA,IAAO,+BAAQ;","names":[]}

package/dist/node/components/favorite/FavoriteIconButton.d.mts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
+import { FavoriteItemEvent } from '../lib';
+export interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {
+    favorite?: FavoriteItemEvent['favorite'];
+    name?: FavoriteItemEvent['name'];
+    value?: string;
+    valueType?: FavoriteItemEvent['favoriteType'];
+}
+export declare const FavoriteIconButton: import("react").ForwardRefExoticComponent<Omit<FavoriteIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=FavoriteIconButton.d.ts.map

package/dist/node/components/favorite/FavoriteIconButton.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,eAAe,EAAU,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKnD,OAAO,EAAE,iBAAiB,EAAyB,MAAM,QAAQ,CAAA;AAKjE,MAAM,WAAW,uBAAwB,SAAQ,YAAY,EAAE,eAAe;IAC5E,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,kBAAkB,oIAqD9B,CAAA"}

package/dist/node/components/favorite/FavoriteIconButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
+import { FavoriteItemEvent } from '../lib';
+export interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {
+    favorite?: FavoriteItemEvent['favorite'];
+    name?: FavoriteItemEvent['name'];
+    value?: string;
+    valueType?: FavoriteItemEvent['favoriteType'];
+}
+export declare const FavoriteIconButton: import("react").ForwardRefExoticComponent<Omit<FavoriteIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=FavoriteIconButton.d.ts.map

package/dist/node/components/favorite/FavoriteIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,eAAe,EAAU,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKnD,OAAO,EAAE,iBAAiB,EAAyB,MAAM,QAAQ,CAAA;AAKjE,MAAM,WAAW,uBAAwB,SAAQ,YAAY,EAAE,eAAe;IAC5E,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,kBAAkB,oIAqD9B,CAAA"}

package/dist/node/components/favorite/FavoriteIconButton.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FavoriteIconButton_exports = {};
+__export(FavoriteIconButton_exports, {
+  FavoriteIconButton: () => FavoriteIconButton
+});
+module.exports = __toCommonJS(FavoriteIconButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_material = require("@mui/material");
+var import_react_event = require("@xyo-network/react-event");
+var import_react_shared2 = require("@xyo-network/react-shared");
+var import_react = require("react");
+var import_lib = require("../lib");
+var import_FavoriteToggleSVG = require("./FavoriteToggleSVG");
+var import_lib2 = require("./lib");
+var import_Popper = require("./Popper");
+const FavoriteIconButton = (0, import_react.forwardRef)(
+  ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
+    const [openPopper, setOpenPopper] = (0, import_react.useState)(false);
+    const [favorite, setFavorite] = (0, import_react.useState)(favoriteProp);
+    (0, import_react.useEffect)(() => {
+      setFavorite(favoriteProp);
+    }, [favoriteProp]);
+    const sharedRef = (0, import_react_shared2.useShareForwardedRef)(ref);
+    const [buttonRef, dispatch] = (0, import_react_event.useEvent)(void 0, sharedRef);
+    const onConfirmFavorite = (name2, newFavoriteState) => {
+      const favoriteEvent = (0, import_lib.generateFavoriteEvent)(!!newFavoriteState, valueType, value, name2);
+      dispatch("address", "favorite", JSON.stringify(favoriteEvent));
+      setFavorite(newFavoriteState);
+      setOpenPopper(false);
+    };
+    const starRef = (0, import_react.useRef)(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      IconButtonCondensed,
+      {
+        "aria-describedby": import_lib2.popperId,
+        ref: buttonRef,
+        onClick: (event) => {
+          event.stopPropagation();
+          setOpenPopper(!openPopper);
+        },
+        onTouchStart: (event) => {
+          event.stopPropagation();
+          setOpenPopper(!openPopper);
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        sx: { lineHeight: 0, p: 0.25 },
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: starRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FavoriteToggleSVG.FavoriteToggleSVG, { favorite }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Popper.FavoritePopper,
+            {
+              sx: { zIndex: 1301 },
+              name,
+              favorite,
+              favoriteRef: starRef,
+              open: openPopper,
+              onConfirmFavorite,
+              onClickAway: () => setOpenPopper(false)
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FavoriteIconButton.displayName = "FavoriteIconButton";
+const IconButtonCondensed = (0, import_material.styled)(import_material.IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
+  lineHeight: 0,
+  padding: theme.spacing(0.25)
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FavoriteIconButton
+});
+//# sourceMappingURL=FavoriteIconButton.js.map

package/dist/node/components/favorite/FavoriteIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n  favorite?: FavoriteItemEvent['favorite']\n  name?: FavoriteItemEvent['name']\n  value?: string\n  valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n  ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n    const [openPopper, setOpenPopper] = useState(false)\n\n    const [favorite, setFavorite] = useState(favoriteProp)\n    useEffect(() => {\n      setFavorite(favoriteProp)\n    }, [favoriteProp])\n\n    const sharedRef = useShareForwardedRef(ref)\n    const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n    const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n      const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n      dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n      setFavorite(newFavoriteState)\n      setOpenPopper(false)\n    }\n\n    const starRef = useRef<HTMLSpanElement>(null)\n\n    return (\n      <IconButtonCondensed\n        aria-describedby={popperId}\n        ref={buttonRef}\n        onClick={(event) => {\n          event.stopPropagation()\n          setOpenPopper(!openPopper)\n        }}\n        onTouchStart={(event) => {\n          event.stopPropagation()\n          setOpenPopper(!openPopper)\n        }}\n        onMouseDown={(e) => e.stopPropagation()}\n        sx={{ lineHeight: 0, p: 0.25 }}\n        {...props}\n      >\n        <span ref={starRef}>\n          <FavoriteToggleSVG favorite={favorite} />\n        </span>\n        <FavoritePopper\n          sx={{ zIndex: 1301 }}\n          name={name}\n          favorite={favorite}\n          favoriteRef={starRef}\n          open={openPopper}\n          onConfirmFavorite={onConfirmFavorite}\n          onClickAway={() => setOpenPopper(false)}\n        />\n        {children}\n      </IconButtonCondensed>\n    )\n  },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n  lineHeight: 0,\n  padding: theme.spacing(0.25),\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCM;AAxCN,sBAAoD;AAEpD,yBAAyB;AACzB,IAAAA,uBAAqC;AACrC,mBAAwD;AAExD,iBAAyD;AACzD,+BAAkC;AAClC,IAAAC,cAAyB;AACzB,oBAA+B;AASxB,MAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,UAAU,cAAc,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC/E,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,UAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,YAAY;AACrD,gCAAU,MAAM;AACd,kBAAY,YAAY;AAAA,IAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,UAAM,gBAAY,2CAAqB,GAAG;AAC1C,UAAM,CAAC,WAAW,QAAQ,QAAI,6BAAS,QAAW,SAAS;AAE3D,UAAM,oBAAoB,CAACC,OAAe,qBAA+B;AACvE,YAAM,oBAAgB,kCAAsB,CAAC,CAAC,kBAAkB,WAAW,OAAOA,KAAI;AACtF,eAAS,WAAW,YAAY,KAAK,UAAU,aAAa,CAAC;AAC7D,kBAAY,gBAAgB;AAC5B,oBAAc,KAAK;AAAA,IACrB;AAEA,UAAM,cAAU,qBAAwB,IAAI;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,cAAc,CAAC,UAAU;AACvB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACtC,IAAI,EAAE,YAAY,GAAG,GAAG,KAAK;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA,sDAAC,UAAK,KAAK,SACT,sDAAC,8CAAkB,UAAoB,GACzC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,EAAE,QAAQ,KAAK;AAAA,cACnB;AAAA,cACA;AAAA,cACA,aAAa;AAAA,cACb,MAAM;AAAA,cACN;AAAA,cACA,aAAa,MAAM,cAAc,KAAK;AAAA;AAAA,UACxC;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAEjC,MAAM,0BAAsB,wBAAO,4BAAY,EAAE,MAAM,sBAAsB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9F,YAAY;AAAA,EACZ,SAAS,MAAM,QAAQ,IAAI;AAC7B,EAAE;","names":["import_react_shared","import_lib","name"]}

package/dist/node/components/favorite/FavoriteIconButton.mjs

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconButton, styled } from "@mui/material";
+import { useEvent } from "@xyo-network/react-event";
+import { useShareForwardedRef } from "@xyo-network/react-shared";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { generateFavoriteEvent } from "../lib";
+import { FavoriteToggleSVG } from "./FavoriteToggleSVG";
+import { popperId } from "./lib";
+import { FavoritePopper } from "./Popper";
+const FavoriteIconButton = forwardRef(
+  ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
+    const [openPopper, setOpenPopper] = useState(false);
+    const [favorite, setFavorite] = useState(favoriteProp);
+    useEffect(() => {
+      setFavorite(favoriteProp);
+    }, [favoriteProp]);
+    const sharedRef = useShareForwardedRef(ref);
+    const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
+    const onConfirmFavorite = (name2, newFavoriteState) => {
+      const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
+      dispatch("address", "favorite", JSON.stringify(favoriteEvent));
+      setFavorite(newFavoriteState);
+      setOpenPopper(false);
+    };
+    const starRef = useRef(null);
+    return /* @__PURE__ */ jsxs(
+      IconButtonCondensed,
+      {
+        "aria-describedby": popperId,
+        ref: buttonRef,
+        onClick: (event) => {
+          event.stopPropagation();
+          setOpenPopper(!openPopper);
+        },
+        onTouchStart: (event) => {
+          event.stopPropagation();
+          setOpenPopper(!openPopper);
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        sx: { lineHeight: 0, p: 0.25 },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { ref: starRef, children: /* @__PURE__ */ jsx(FavoriteToggleSVG, { favorite }) }),
+          /* @__PURE__ */ jsx(
+            FavoritePopper,
+            {
+              sx: { zIndex: 1301 },
+              name,
+              favorite,
+              favoriteRef: starRef,
+              open: openPopper,
+              onConfirmFavorite,
+              onClickAway: () => setOpenPopper(false)
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FavoriteIconButton.displayName = "FavoriteIconButton";
+const IconButtonCondensed = styled(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
+  lineHeight: 0,
+  padding: theme.spacing(0.25)
+}));
+export {
+  FavoriteIconButton
+};
+//# sourceMappingURL=FavoriteIconButton.mjs.map

package/dist/node/components/favorite/FavoriteIconButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n  favorite?: FavoriteItemEvent['favorite']\n  name?: FavoriteItemEvent['name']\n  value?: string\n  valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n  ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n    const [openPopper, setOpenPopper] = useState(false)\n\n    const [favorite, setFavorite] = useState(favoriteProp)\n    useEffect(() => {\n      setFavorite(favoriteProp)\n    }, [favoriteProp])\n\n    const sharedRef = useShareForwardedRef(ref)\n    const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n    const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n      const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n      dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n      setFavorite(newFavoriteState)\n      setOpenPopper(false)\n    }\n\n    const starRef = useRef<HTMLSpanElement>(null)\n\n    return (\n      <IconButtonCondensed\n        aria-describedby={popperId}\n        ref={buttonRef}\n        onClick={(event) => {\n          event.stopPropagation()\n          setOpenPopper(!openPopper)\n        }}\n        onTouchStart={(event) => {\n          event.stopPropagation()\n          setOpenPopper(!openPopper)\n        }}\n        onMouseDown={(e) => e.stopPropagation()}\n        sx={{ lineHeight: 0, p: 0.25 }}\n        {...props}\n      >\n        <span ref={starRef}>\n          <FavoriteToggleSVG favorite={favorite} />\n        </span>\n        <FavoritePopper\n          sx={{ zIndex: 1301 }}\n          name={name}\n          favorite={favorite}\n          favoriteRef={starRef}\n          open={openPopper}\n          onConfirmFavorite={onConfirmFavorite}\n          onClickAway={() => setOpenPopper(false)}\n        />\n        {children}\n      </IconButtonCondensed>\n    )\n  },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n  lineHeight: 0,\n  padding: theme.spacing(0.25),\n}))\n"],"mappings":"AAwCM,SAgBI,KAhBJ;AAxCN,SAAS,YAA6B,cAAc;AAEpD,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AAExD,SAA4B,6BAA6B;AACzD,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AASxB,MAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,UAAU,cAAc,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC/E,UAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,UAAM,CAAC,UAAU,WAAW,IAAI,SAAS,YAAY;AACrD,cAAU,MAAM;AACd,kBAAY,YAAY;AAAA,IAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,UAAM,YAAY,qBAAqB,GAAG;AAC1C,UAAM,CAAC,WAAW,QAAQ,IAAI,SAAS,QAAW,SAAS;AAE3D,UAAM,oBAAoB,CAACA,OAAe,qBAA+B;AACvE,YAAM,gBAAgB,sBAAsB,CAAC,CAAC,kBAAkB,WAAW,OAAOA,KAAI;AACtF,eAAS,WAAW,YAAY,KAAK,UAAU,aAAa,CAAC;AAC7D,kBAAY,gBAAgB;AAC5B,oBAAc,KAAK;AAAA,IACrB;AAEA,UAAM,UAAU,OAAwB,IAAI;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,cAAc,CAAC,UAAU;AACvB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACtC,IAAI,EAAE,YAAY,GAAG,GAAG,KAAK;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,KAAK,SACT,8BAAC,qBAAkB,UAAoB,GACzC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,EAAE,QAAQ,KAAK;AAAA,cACnB;AAAA,cACA;AAAA,cACA,aAAa;AAAA,cACb,MAAM;AAAA,cACN;AAAA,cACA,aAAa,MAAM,cAAc,KAAK;AAAA;AAAA,UACxC;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAEjC,MAAM,sBAAsB,OAAO,YAAY,EAAE,MAAM,sBAAsB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9F,YAAY;AAAA,EACZ,SAAS,MAAM,QAAQ,IAAI;AAC7B,EAAE;","names":["name"]}

package/dist/node/components/favorite/FavoriteToggleSVG.d.mts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FavoriteToggleSVG: React.FC<{
+    favorite?: boolean;
+}>;
+//# sourceMappingURL=FavoriteToggleSVG.d.ts.map

package/dist/node/components/favorite/FavoriteToggleSVG.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteToggleSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteToggleSVG.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAQ9D,CAAA"}

package/dist/node/components/favorite/FavoriteToggleSVG.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FavoriteToggleSVG: React.FC<{
+    favorite?: boolean;
+}>;
+//# sourceMappingURL=FavoriteToggleSVG.d.ts.map

package/dist/node/components/favorite/FavoriteToggleSVG.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteToggleSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteToggleSVG.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAQ9D,CAAA"}

package/dist/node/components/favorite/FavoriteToggleSVG.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FavoriteToggleSVG_exports = {};
+__export(FavoriteToggleSVG_exports, {
+  FavoriteToggleSVG: () => FavoriteToggleSVG
+});
+module.exports = __toCommonJS(FavoriteToggleSVG_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_icons_material = require("@mui/icons-material");
+const FavoriteToggleSVG = ({ favorite }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: favorite ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Star, { className: "favorite-icon", component: "svg", color: "secondary", fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.StarBorder, { className: "favorite-icon", fontSize: "small" }) });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FavoriteToggleSVG
+});
+//# sourceMappingURL=FavoriteToggleSVG.js.map

package/dist/node/components/favorite/FavoriteToggleSVG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/favorite/FavoriteToggleSVG.tsx"],"sourcesContent":["import { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n  <>\n    {favorite ? (\n      <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n    ) : (\n      <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />\n    )}\n  </>\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGE;AAHF,4BAA+D;AAExD,MAAM,oBAAsD,CAAC,EAAE,SAAS,MAC7E,2EACG,qBACC,4CAAC,sBAAAA,MAAA,EAAS,WAAU,iBAAgB,WAAW,OAAO,OAAM,aAAY,UAAS,SAAQ,IAEzF,4CAAC,sBAAAC,YAAA,EAAe,WAAU,iBAAgB,UAAS,SAAQ,GAE/D;","names":["StarIcon","StarBorderIcon"]}

package/dist/node/components/favorite/FavoriteToggleSVG.mjs

@@ -0,0 +1,7 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
+const FavoriteToggleSVG = ({ favorite }) => /* @__PURE__ */ jsx(Fragment, { children: favorite ? /* @__PURE__ */ jsx(StarIcon, { className: "favorite-icon", component: "svg", color: "secondary", fontSize: "small" }) : /* @__PURE__ */ jsx(StarBorderIcon, { className: "favorite-icon", fontSize: "small" }) });
+export {
+  FavoriteToggleSVG
+};
+//# sourceMappingURL=FavoriteToggleSVG.mjs.map