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

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

@@ -0,0 +1,195 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/favorite/FavoriteIconButton.tsx
+var FavoriteIconButton_exports = {};
+__export(FavoriteIconButton_exports, {
+  FavoriteIconButton: () => FavoriteIconButton
+});
+module.exports = __toCommonJS(FavoriteIconButton_exports);
+var import_material3 = require("@mui/material");
+var import_react_event = require("@xyo-network/react-event");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_react2 = require("react");
+
+// src/components/lib/FavoriteItemEvent.ts
+var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
+  favorite: !!favorite,
+  favoriteType,
+  favoriteValue,
+  name
+});
+
+// src/components/favorite/FavoriteToggleSVG.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var 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" }) });
+
+// src/components/favorite/lib/PopperId.ts
+var popperId = "favorite-popper";
+
+// src/components/favorite/Popper.tsx
+var import_material2 = require("@mui/material");
+var import_react = require("react");
+
+// src/components/favorite/PopperButtonGroup.tsx
+var import_icons_material2 = require("@mui/icons-material");
+var import_material = require("@mui/material");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PopperButtonGroup = ({ name, onConfirmFavorite, favorite, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material.ButtonGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_material.Button,
+      {
+        title: "Save Favorite",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          onConfirmFavorite == null ? void 0 : onConfirmFavorite(name, true);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Star, {})
+      }
+    ),
+    favorite ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_material.Button,
+      {
+        title: "Remove Favorite",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          onConfirmFavorite == null ? void 0 : onConfirmFavorite(name, false);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Delete, {})
+      }
+    ) : null
+  ] });
+};
+
+// src/components/favorite/Popper.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FavoritePopper = (0, import_react.forwardRef)(
+  ({
+    name: nameProp,
+    favorite,
+    favoriteRef,
+    onClickAway = () => {
+      return;
+    },
+    onConfirmFavorite,
+    ...props
+  }, ref) => {
+    const [name, setName] = (0, import_react.useState)(nameProp);
+    (0, import_react.useEffect)(() => {
+      setName(nameProp);
+    }, [nameProp]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.ClickAwayListener, { onClickAway, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PopperStyled,
+      {
+        id: popperId,
+        anchorEl: favoriteRef == null ? void 0 : favoriteRef.current,
+        onClick: (e) => e.stopPropagation(),
+        onTouchStart: (e) => e.stopPropagation(),
+        transition: true,
+        ref,
+        ...props,
+        children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.CardContent, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_material2.TextField,
+            {
+              autoFocus: true,
+              label: "Favorite Name",
+              placeholder: "optional",
+              size: "small",
+              value: name ?? "",
+              onChange: (e) => setName(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopperButtonGroup, { favorite, onConfirmFavorite, name })
+        ] }) }) })
+      }
+    ) });
+  }
+);
+FavoritePopper.displayName = "FavoritePopper";
+var PopperStyled = (0, import_material2.styled)(import_material2.Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
+
+// src/components/favorite/FavoriteIconButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FavoriteIconButton = (0, import_react2.forwardRef)(
+  ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
+    const [openPopper, setOpenPopper] = (0, import_react2.useState)(false);
+    const [favorite, setFavorite] = (0, import_react2.useState)(favoriteProp);
+    (0, import_react2.useEffect)(() => {
+      setFavorite(favoriteProp);
+    }, [favoriteProp]);
+    const sharedRef = (0, import_react_shared.useShareForwardedRef)(ref);
+    const [buttonRef, dispatch] = (0, import_react_event.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 = (0, import_react2.useRef)(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("span", { ref: starRef, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FavoriteToggleSVG, { favorite }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            FavoritePopper,
+            {
+              sx: { zIndex: 1301 },
+              name,
+              favorite,
+              favoriteRef: starRef,
+              open: openPopper,
+              onConfirmFavorite,
+              onClickAway: () => setOpenPopper(false)
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FavoriteIconButton.displayName = "FavoriteIconButton";
+var IconButtonCondensed = (0, import_material3.styled)(import_material3.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.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/favorite/FavoriteIconButton.tsx","../../../../src/components/lib/FavoriteItemEvent.ts","../../../../src/components/favorite/FavoriteToggleSVG.tsx","../../../../src/components/favorite/lib/PopperId.ts","../../../../src/components/favorite/Popper.tsx","../../../../src/components/favorite/PopperButtonGroup.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","export interface FavoriteItemEvent {\n  favorite?: boolean\n  favoriteType?: FavoriteType\n  favoriteValue?: string\n  name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n  favorite: !!favorite,\n  favoriteType,\n  favoriteValue,\n  name,\n})\n","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","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n  favorite?: boolean\n  favoriteRef?: RefObject<HTMLElement>\n  name?: string\n  onClickAway?: (event: MouseEvent | TouchEvent) => void\n  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n  (\n    {\n      name: nameProp,\n      favorite,\n      favoriteRef,\n      onClickAway = () => {\n        return\n      },\n      onConfirmFavorite,\n      ...props\n    },\n    ref,\n  ) => {\n    const [name, setName] = useState(nameProp)\n    useEffect(() => {\n      setName(nameProp)\n    }, [nameProp])\n\n    return (\n      <ClickAwayListener onClickAway={onClickAway}>\n        <PopperStyled\n          id={popperId}\n          anchorEl={favoriteRef?.current}\n          onClick={(e) => e.stopPropagation()}\n          onTouchStart={(e) => e.stopPropagation()}\n          transition\n          ref={ref}\n          {...props}\n        >\n          {({ TransitionProps }) => (\n            <Fade {...TransitionProps} timeout={350}>\n              <Card>\n                <CardContent sx={{ display: 'flex', gap: 1 }}>\n                  <TextField\n                    autoFocus\n                    label=\"Favorite Name\"\n                    placeholder=\"optional\"\n                    size=\"small\"\n                    value={name ?? ''}\n                    onChange={(e) => setName(e.target.value)}\n                  />\n                  <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n                </CardContent>\n              </Card>\n            </Fade>\n          )}\n        </PopperStyled>\n      </ClickAwayListener>\n    )\n  },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n  favorite?: boolean\n  name?: string\n  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n  return (\n    <ButtonGroup {...props}>\n      <Button\n        title=\"Save Favorite\"\n        variant=\"contained\"\n        onClick={(e) => {\n          e.stopPropagation()\n          onConfirmFavorite?.(name, true)\n        }}\n      >\n        <StarIcon />\n      </Button>\n      {favorite ? (\n        <Button\n          title=\"Remove Favorite\"\n          variant=\"contained\"\n          onClick={(e) => {\n            e.stopPropagation()\n            onConfirmFavorite?.(name, false)\n          }}\n        >\n          <DeleteIcon />\n        </Button>\n      ) : null}\n    </ButtonGroup>\n  )\n}\n"],"mappings":"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","names":["import_material","import_react","StarIcon","StarBorderIcon","import_material","import_icons_material","import_jsx_runtime","StarIcon","DeleteIcon","import_jsx_runtime","import_jsx_runtime","name"]}

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

@@ -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.cts.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

@@ -1,55 +1,132 @@
-"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 });
+// src/components/favorite/FavoriteIconButton.tsx
+import { IconButton, styled as styled2 } from "@mui/material";
+import { useEvent } from "@xyo-network/react-event";
+import { useShareForwardedRef } from "@xyo-network/react-shared";
+import { forwardRef as forwardRef2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// src/components/lib/FavoriteItemEvent.ts
+var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
+  favorite: !!favorite,
+  favoriteType,
+  favoriteValue,
+  name
+});
+
+// src/components/favorite/FavoriteToggleSVG.tsx
+import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
+import { Fragment, jsx } from "react/jsx-runtime";
+var 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" }) });
+
+// src/components/favorite/lib/PopperId.ts
+var popperId = "favorite-popper";
+
+// src/components/favorite/Popper.tsx
+import { Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField } from "@mui/material";
+import { forwardRef, useEffect, useState } from "react";
+
+// src/components/favorite/PopperButtonGroup.tsx
+import { Delete as DeleteIcon, Star as StarIcon2 } from "@mui/icons-material";
+import { Button, ButtonGroup } from "@mui/material";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PopperButtonGroup = ({ name, onConfirmFavorite, favorite, ...props }) => {
+  return /* @__PURE__ */ jsxs(ButtonGroup, { ...props, children: [
+    /* @__PURE__ */ jsx2(
+      Button,
+      {
+        title: "Save Favorite",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          onConfirmFavorite == null ? void 0 : onConfirmFavorite(name, true);
+        },
+        children: /* @__PURE__ */ jsx2(StarIcon2, {})
+      }
+    ),
+    favorite ? /* @__PURE__ */ jsx2(
+      Button,
+      {
+        title: "Remove Favorite",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          onConfirmFavorite == null ? void 0 : onConfirmFavorite(name, false);
+        },
+        children: /* @__PURE__ */ jsx2(DeleteIcon, {})
+      }
+    ) : null
+  ] });
 };
-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 });
+
+// src/components/favorite/Popper.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FavoritePopper = forwardRef(
+  ({
+    name: nameProp,
+    favorite,
+    favoriteRef,
+    onClickAway = () => {
+      return;
+    },
+    onConfirmFavorite,
+    ...props
+  }, ref) => {
+    const [name, setName] = useState(nameProp);
+    useEffect(() => {
+      setName(nameProp);
+    }, [nameProp]);
+    return /* @__PURE__ */ jsx3(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx3(
+      PopperStyled,
+      {
+        id: popperId,
+        anchorEl: favoriteRef == null ? void 0 : favoriteRef.current,
+        onClick: (e) => e.stopPropagation(),
+        onTouchStart: (e) => e.stopPropagation(),
+        transition: true,
+        ref,
+        ...props,
+        children: ({ TransitionProps }) => /* @__PURE__ */ jsx3(Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsx3(Card, { children: /* @__PURE__ */ jsxs2(CardContent, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ jsx3(
+            TextField,
+            {
+              autoFocus: true,
+              label: "Favorite Name",
+              placeholder: "optional",
+              size: "small",
+              value: name ?? "",
+              onChange: (e) => setName(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx3(PopperButtonGroup, { favorite, onConfirmFavorite, name })
+        ] }) }) })
+      }
+    ) });
   }
-  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)(
+);
+FavoritePopper.displayName = "FavoritePopper";
+var PopperStyled = styled(Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
+
+// src/components/favorite/FavoriteIconButton.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FavoriteIconButton = forwardRef2(
   ({ 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)(() => {
+    const [openPopper, setOpenPopper] = useState2(false);
+    const [favorite, setFavorite] = useState2(favoriteProp);
+    useEffect2(() => {
       setFavorite(favoriteProp);
     }, [favoriteProp]);
-    const sharedRef = (0, import_react_shared2.useShareForwardedRef)(ref);
-    const [buttonRef, dispatch] = (0, import_react_event.useEvent)(void 0, sharedRef);
+    const sharedRef = useShareForwardedRef(ref);
+    const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
     const onConfirmFavorite = (name2, newFavoriteState) => {
-      const favoriteEvent = (0, import_lib.generateFavoriteEvent)(!!newFavoriteState, valueType, value, name2);
+      const favoriteEvent = 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)(
+    const starRef = useRef(null);
+    return /* @__PURE__ */ jsxs3(
       IconButtonCondensed,
       {
-        "aria-describedby": import_lib2.popperId,
+        "aria-describedby": popperId,
         ref: buttonRef,
         onClick: (event) => {
           event.stopPropagation();
@@ -63,9 +140,9 @@ const FavoriteIconButton = (0, import_react.forwardRef)(
         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,
+          /* @__PURE__ */ jsx4("span", { ref: starRef, children: /* @__PURE__ */ jsx4(FavoriteToggleSVG, { favorite }) }),
+          /* @__PURE__ */ jsx4(
+            FavoritePopper,
             {
               sx: { zIndex: 1301 },
               name,
@@ -83,12 +160,11 @@ const FavoriteIconButton = (0, import_react.forwardRef)(
   }
 );
 FavoriteIconButton.displayName = "FavoriteIconButton";
-const IconButtonCondensed = (0, import_material.styled)(import_material.IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
+var IconButtonCondensed = styled2(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
   lineHeight: 0,
   padding: theme.spacing(0.25)
 }));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   FavoriteIconButton
-});
+};
 //# sourceMappingURL=FavoriteIconButton.js.map

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../../src/components/favorite/FavoriteIconButton.tsx","../../../../src/components/lib/FavoriteItemEvent.ts","../../../../src/components/favorite/FavoriteToggleSVG.tsx","../../../../src/components/favorite/lib/PopperId.ts","../../../../src/components/favorite/Popper.tsx","../../../../src/components/favorite/PopperButtonGroup.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","export interface FavoriteItemEvent {\n  favorite?: boolean\n  favoriteType?: FavoriteType\n  favoriteValue?: string\n  name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n  favorite: !!favorite,\n  favoriteType,\n  favoriteValue,\n  name,\n})\n","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","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n  favorite?: boolean\n  favoriteRef?: RefObject<HTMLElement>\n  name?: string\n  onClickAway?: (event: MouseEvent | TouchEvent) => void\n  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n  (\n    {\n      name: nameProp,\n      favorite,\n      favoriteRef,\n      onClickAway = () => {\n        return\n      },\n      onConfirmFavorite,\n      ...props\n    },\n    ref,\n  ) => {\n    const [name, setName] = useState(nameProp)\n    useEffect(() => {\n      setName(nameProp)\n    }, [nameProp])\n\n    return (\n      <ClickAwayListener onClickAway={onClickAway}>\n        <PopperStyled\n          id={popperId}\n          anchorEl={favoriteRef?.current}\n          onClick={(e) => e.stopPropagation()}\n          onTouchStart={(e) => e.stopPropagation()}\n          transition\n          ref={ref}\n          {...props}\n        >\n          {({ TransitionProps }) => (\n            <Fade {...TransitionProps} timeout={350}>\n              <Card>\n                <CardContent sx={{ display: 'flex', gap: 1 }}>\n                  <TextField\n                    autoFocus\n                    label=\"Favorite Name\"\n                    placeholder=\"optional\"\n                    size=\"small\"\n                    value={name ?? ''}\n                    onChange={(e) => setName(e.target.value)}\n                  />\n                  <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n                </CardContent>\n              </Card>\n            </Fade>\n          )}\n        </PopperStyled>\n      </ClickAwayListener>\n    )\n  },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n  favorite?: boolean\n  name?: string\n  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n  return (\n    <ButtonGroup {...props}>\n      <Button\n        title=\"Save Favorite\"\n        variant=\"contained\"\n        onClick={(e) => {\n          e.stopPropagation()\n          onConfirmFavorite?.(name, true)\n        }}\n      >\n        <StarIcon />\n      </Button>\n      {favorite ? (\n        <Button\n          title=\"Remove Favorite\"\n          variant=\"contained\"\n          onClick={(e) => {\n            e.stopPropagation()\n            onConfirmFavorite?.(name, false)\n          }}\n        >\n          <DeleteIcon />\n        </Button>\n      ) : null}\n    </ButtonGroup>\n  )\n}\n"],"mappings":";AAAA,SAAS,YAA6B,UAAAA,eAAc;AAEpD,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,cAAAC,aAAY,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;;;ACKjD,IAAM,wBAAwB,CAAC,UAAoB,cAA6B,eAAwB,UAAsC;AAAA,EACnJ,UAAU,CAAC,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF;;;ACdA,SAAS,QAAQ,UAAU,cAAc,sBAAsB;AAG7D,mBAEI,WAFJ;AADK,IAAM,oBAAsD,CAAC,EAAE,SAAS,MAC7E,gCACG,qBACC,oBAAC,YAAS,WAAU,iBAAgB,WAAW,OAAO,OAAM,aAAY,UAAS,SAAQ,IAEzF,oBAAC,kBAAe,WAAU,iBAAgB,UAAS,SAAQ,GAE/D;;;ACTK,IAAM,WAAW;;;ACAxB,SAAS,MAAM,aAAa,mBAAmB,MAAM,QAAqB,QAAQ,iBAAiB;AACnG,SAAS,YAAuB,WAAW,gBAAgB;;;ACD3D,SAAS,UAAU,YAAY,QAAQC,iBAAgB;AACvD,SAAS,QAAQ,mBAAqC;AAUlD,SASI,OAAAC,MATJ;AAFG,IAAM,oBAAmD,CAAC,EAAE,MAAM,mBAAmB,UAAU,GAAG,MAAM,MAAM;AACnH,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,oBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,iEAAoB,MAAM;AAAA,QAC5B;AAAA,QAEA,0BAAAA,KAACD,WAAA,EAAS;AAAA;AAAA,IACZ;AAAA,IACC,WACC,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,iEAAoB,MAAM;AAAA,QAC5B;AAAA,QAEA,0BAAAA,KAAC,cAAW;AAAA;AAAA,IACd,IACE;AAAA,KACN;AAEJ;;;ADUgB,SACE,OAAAC,MADF,QAAAC,aAAA;AAjCT,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,cAAc,MAAM;AAClB;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ;AACzC,cAAU,MAAM;AACd,cAAQ,QAAQ;AAAA,IAClB,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE,gBAAAD,KAAC,qBAAkB,aACjB,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU,2CAAa;AAAA,QACvB,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,cAAc,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACvC,YAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEH,WAAC,EAAE,gBAAgB,MAClB,gBAAAA,KAAC,QAAM,GAAG,iBAAiB,SAAS,KAClC,0BAAAA,KAAC,QACC,0BAAAC,MAAC,eAAY,IAAI,EAAE,SAAS,QAAQ,KAAK,EAAE,GACzC;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,MAAK;AAAA,cACL,OAAO,QAAQ;AAAA,cACf,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA;AAAA,UACzC;AAAA,UACA,gBAAAA,KAAC,qBAAkB,UAAoB,mBAAsC,MAAY;AAAA,WAC3F,GACF,GACF;AAAA;AAAA,IAEJ,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAG7B,IAAM,eAAe,OAAO,QAAQ,EAAE,MAAM,eAAe,CAAC,EAAE,OAAO,EAAE,QAAQ,KAAK,EAAE;;;AJ7BhF,SAgBI,OAAAE,MAhBJ,QAAAC,aAAA;AAtBC,IAAM,qBAAqBC;AAAA,EAChC,CAAC,EAAE,UAAU,UAAU,cAAc,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC/E,UAAM,CAAC,YAAY,aAAa,IAAIC,UAAS,KAAK;AAElD,UAAM,CAAC,UAAU,WAAW,IAAIA,UAAS,YAAY;AACrD,IAAAC,WAAU,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,CAACC,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,gBAAAJ;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,0BAAAD,KAAC,UAAK,KAAK,SACT,0BAAAA,KAAC,qBAAkB,UAAoB,GACzC;AAAA,UACA,gBAAAA;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,IAAM,sBAAsBM,QAAO,YAAY,EAAE,MAAM,sBAAsB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9F,YAAY;AAAA,EACZ,SAAS,MAAM,QAAQ,IAAI;AAC7B,EAAE;","names":["styled","forwardRef","useEffect","useState","StarIcon","jsx","jsx","jsxs","jsx","jsxs","forwardRef","useState","useEffect","name","styled"]}

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

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/favorite/FavoriteToggleSVG.tsx
+var FavoriteToggleSVG_exports = {};
+__export(FavoriteToggleSVG_exports, {
+  FavoriteToggleSVG: () => FavoriteToggleSVG
+});
+module.exports = __toCommonJS(FavoriteToggleSVG_exports);
+var import_icons_material = require("@mui/icons-material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var 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.cjs.map

package/dist/node/components/favorite/FavoriteToggleSVG.cjs.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;AAAA,4BAA+D;AAG7D;AADK,IAAM,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.d.cts

@@ -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.cts.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

@@ -1,31 +1,8 @@
-"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 = {
+// src/components/favorite/FavoriteToggleSVG.tsx
+import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
+import { Fragment, jsx } from "react/jsx-runtime";
+var 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.js.map

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

@@ -1 +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"]}
+{"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,SAAS,QAAQ,UAAU,cAAc,sBAAsB;AAG7D,mBAEI,WAFJ;AADK,IAAM,oBAAsD,CAAC,EAAE,SAAS,MAC7E,gCACG,qBACC,oBAAC,YAAS,WAAU,iBAAgB,WAAW,OAAO,OAAM,aAAY,UAAS,SAAQ,IAEzF,oBAAC,kBAAe,WAAU,iBAAgB,UAAS,SAAQ,GAE/D;","names":[]}