sanity-plugin-hotspot-array 0.0.7 → 0.1.0-v3-studio.1

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["src/index.tsx","src/ImageHotspotArray.tsx","src/Feedback.tsx","src/Spot.tsx"],"sourcesContent":["import {ImageHotspotArray, type HotspotItem} from './ImageHotspotArray'\nimport React, {ComponentType} from 'react'\nimport {ArrayOfObjectsInputProps, createPlugin} from 'sanity'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n  pathRoot?: 'document' | 'parent'\n  imagePath: string\n  descriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module '@sanity/types' {\n  export interface ArrayOptions {\n    imageHotspot?: ImageHotspotOptions\n  }\n}\n\nexport {ImageHotspotArray}\nexport type {HotspotTooltipProps, HotspotItem}\n\nexport const imageHotspotArrayPlugin = createPlugin({\n  name: 'image-hotspot-array',\n  form: {\n    components: {\n      input: (props) => {\n        if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n          const imageHotspotOptions = props.schemaType.options?.imageHotspot\n          if (imageHotspotOptions) {\n            return (\n              <ImageHotspotArray\n                {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n                imageHotspotOptions={imageHotspotOptions}\n              />\n            )\n          }\n        }\n        return props.renderDefault(props)\n      },\n    },\n  },\n})\n","/* eslint-disable react/display-name */\n\nimport {getImageDimensions} from '@sanity/asset-utils'\nimport {\n  ArrayOfObjectsInputProps,\n  ImageValue,\n  insert,\n  ObjectSchemaType,\n  PatchEvent,\n  set,\n  setIfMissing,\n  useClient,\n  useFormValue,\n} from 'sanity'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {Card, Flex, Stack} from '@sanity/ui'\nimport {randomKey} from '@sanity/util/content'\nimport get from 'lodash/get'\nimport React, {useCallback, useMemo, useRef, useState} from 'react'\n\nimport {IUseResizeObserverCallback, useDebouncedCallback, useResizeObserver} from '@react-hookz/web'\nimport Feedback from './Feedback'\nimport Spot from './Spot'\nimport {ImageHotspotOptions} from './index'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nexport type FnHotspotMove = (key: string, x: number, y: number) => void\n\nexport type HotspotItem<HotspotFields = {[key: string]: unknown}> = {\n  _key: string\n  _type: string\n  x: number\n  y: number\n} & HotspotFields\n\nexport function ImageHotspotArray(\n  props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions}\n) {\n  const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props\n\n  const sanityClient = useClient({apiVersion: '2022-01-01'})\n\n  const imageHotspotPathRoot = useMemo(() => {\n    const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')\n      ? imageHotspotOptions.pathRoot\n      : 'document'\n    return pathRoot === 'document' ? [] : props.path.slice(0, -1)\n  }, [imageHotspotOptions.pathRoot, props.path])\n\n  const rootObject = useFormValue(imageHotspotPathRoot)\n\n  /**\n   * Finding the image from the imageHotspotPathRoot (defaults to document),\n   * using the path from the hotspot's `options` field\n   *\n   * when changes in imageHotspotPathRoot (e.g. document) occur,\n   * check if there are any changes to the hotspotImage and update the reference\n   */\n  const hotspotImage = useMemo(() => {\n    return get(rootObject, imageHotspotOptions.imagePath) as ImageValue | undefined\n  }, [rootObject, imageHotspotOptions.imagePath])\n\n  const displayImage = useMemo(() => {\n    const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')\n    const urlFor = (source: ImageValue) => builder.image(source)\n\n    if (hotspotImage?.asset?._ref) {\n      const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n      const width = 1200\n      const height = Math.round(width / aspectRatio)\n      const url = urlFor(hotspotImage).width(width).url()\n\n      return {width, height, url}\n    }\n\n    return null\n  }, [hotspotImage, sanityClient])\n\n  const handleHotspotImageClick = useCallback(\n    (event: any) => {\n      const {nativeEvent} = event\n\n      // Calculate the x/y percentage of the click position\n      const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))\n      const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))\n      const description = `New Hotspot at ${x}% x ${y}%`\n\n      const newRow: HotspotItem = {\n        _key: randomKey(12),\n        _type: schemaType.of[0].name,\n        x,\n        y,\n      }\n\n      if (imageHotspotOptions?.descriptionPath) {\n        newRow[imageHotspotOptions.descriptionPath] = description\n      }\n\n      onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))\n    },\n    [imageHotspotOptions, onChange, schemaType]\n  )\n\n  const handleHotspotMove: FnHotspotMove = useCallback(\n    (key, x, y) => {\n      onChange(\n        PatchEvent.from([\n          // Set the `x` value of this array key item\n          set(x, [{_key: key}, 'x']),\n          // Set the `y` value of this array key item\n          set(y, [{_key: key}, 'y']),\n        ])\n      )\n    },\n    [onChange]\n  )\n\n  const hotspotImageRef = useRef<HTMLImageElement | null>(null)\n\n  const [imageRect, setImageRect] = useState<DOMRectReadOnly>()\n  const updateImageRectCallback = useDebouncedCallback(\n    ((e) => setImageRect(e.contentRect)) as IUseResizeObserverCallback,\n    [setImageRect],\n    200\n  )\n  useResizeObserver(hotspotImageRef, updateImageRectCallback)\n\n  return (\n    <Stack space={[2, 2, 3]}>\n      {displayImage?.url ? (\n        <div style={{position: `relative`}}>\n          {imageRect &&\n            (value?.length ?? 0) > 0 &&\n            value?.map((spot, index) => (\n              <Spot\n                index={index}\n                key={spot._key}\n                value={spot}\n                bounds={imageRect}\n                update={handleHotspotMove}\n                hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}\n                tooltip={imageHotspotOptions?.tooltip}\n                renderPreview={renderPreview}\n                schemaType={schemaType.of[0] as ObjectSchemaType}\n              />\n            ))}\n\n          <Card __unstable_checkered shadow={1}>\n            <Flex align=\"center\" justify=\"center\">\n              <img\n                ref={hotspotImageRef}\n                src={displayImage.url}\n                width={displayImage.width}\n                height={displayImage.height}\n                alt=\"\"\n                style={imageStyle}\n                onClick={handleHotspotImageClick}\n              />\n            </Flex>\n          </Card>\n        </div>\n      ) : (\n        <Feedback>\n          {imageHotspotOptions.imagePath ? (\n            <>\n              No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>\n            </>\n          ) : (\n            <>\n              Define a path in this field using to the image field in this document at{' '}\n              <code>options.hotspotImagePath</code>\n            </>\n          )}\n        </Feedback>\n      )}\n      {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (\n        <Feedback>\n          The supplied imageHotspotPathRoot \"{imageHotspotOptions.pathRoot}\" is not valid, falling\n          back to \"document\". Available values are \"{VALID_ROOT_PATHS.join(', ')}\".\n        </Feedback>\n      )}\n      {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}\n    </Stack>\n  )\n}\n","import React, {ReactNode} from 'react'\nimport {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}: {children: ReactNode}) {\n  return (\n    <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n      <Text>{children}</Text>\n    </Card>\n  )\n}\n","/* eslint-disable */\nimport {Box, Text, Tooltip} from '@sanity/ui'\nimport {motion, useMotionValue} from 'framer-motion'\nimport get from 'lodash/get'\nimport React, {ComponentType, CSSProperties, ReactElement, useEffect} from 'react'\nimport {FnHotspotMove, HotspotItem} from './ImageHotspotArray'\nimport {ObjectSchemaType, RenderPreviewCallback} from 'sanity'\n\nconst dragStyle: CSSProperties = {\n  width: '1.4rem',\n  height: '1.4rem',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  top: 0,\n  left: 0,\n  margin: '-0.7rem 0 0 -0.7rem',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '50%',\n  background: '#000',\n  color: 'white',\n}\n\nconst dragStyleWhileDrag: CSSProperties = {\n  background: 'rgba(0, 0, 0, 0.1)',\n  border: '1px solid #fff',\n  cursor: 'none',\n}\n\nconst dragStyleWhileHover: CSSProperties = {\n  background: 'rgba(0, 0, 0, 0.1)',\n  border: '1px solid #fff',\n}\n\nconst dotStyle: CSSProperties = {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  height: '0.2rem',\n  width: '0.2rem',\n  margin: '-0.1rem 0 0 -0.1rem',\n  background: '#fff',\n  visibility: 'hidden',\n  borderRadius: '50%',\n  // make sure pointer events only run on the parent\n  pointerEvents: 'none',\n}\n\nconst dotStyleWhileActive: CSSProperties = {\n  visibility: 'visible',\n}\n\nconst labelStyle: CSSProperties = {\n  color: 'white',\n  fontSize: '0.7rem',\n  fontWeight: 600,\n  lineHeight: '1',\n}\n\nconst labelStyleWhileActive: CSSProperties = {\n  visibility: 'hidden',\n}\n\nconst round = (num: number) => Math.round(num * 100) / 100\n\nexport interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {\n  value: HotspotItem<HotspotFields>\n  schemaType: ObjectSchemaType\n  renderPreview: RenderPreviewCallback\n}\n\ninterface HotspotProps<HotspotFields = {[key: string]: unknown}> {\n  value: HotspotItem\n  bounds: DOMRectReadOnly\n  update: FnHotspotMove\n  hotspotDescriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n  index: number\n  schemaType: ObjectSchemaType\n  renderPreview: RenderPreviewCallback\n}\n\nexport default function Spot({\n  value,\n  bounds,\n  update,\n  hotspotDescriptionPath,\n  tooltip,\n  index,\n  schemaType,\n  renderPreview,\n}: HotspotProps) {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [isHovering, setIsHovering] = React.useState(false)\n\n  // x/y are stored as % but need to be converted to px\n  const x = useMotionValue(round(bounds.width * (value.x / 100)))\n  const y = useMotionValue(round(bounds.height * (value.y / 100)))\n\n  /**\n   * update x/y if the bounds change when resizing the window\n   */\n  useEffect(() => {\n    x.set(round(bounds.width * (value.x / 100)))\n    y.set(round(bounds.height * (value.y / 100)))\n  }, [x, y, value, bounds])\n\n  const handleDragEnd = React.useCallback(() => {\n    setIsDragging(false)\n\n    // get current values for x/y in px\n    const currentX = x.get()\n    const currentY = y.get()\n\n    // Which we need to convert back to `%` to patch the document\n    const newX = round((currentX * 100) / bounds.width)\n    const newY = round((currentY * 100) / bounds.height)\n\n    // Don't go below 0 or above 100\n    const safeX = Math.max(0, Math.min(100, newX))\n    const safeY = Math.max(0, Math.min(100, newY))\n\n    update(value._key, safeX, safeY)\n  }, [x, y, value, update, bounds])\n  const handleDragStart = React.useCallback(() => setIsDragging(true), [])\n\n  const handleHoverStart = React.useCallback(() => setIsHovering(true), [])\n  const handleHoverEnd = React.useCallback(() => setIsHovering(false), [])\n\n  if (!x || !y) {\n    return null\n  }\n\n  return (\n    <Tooltip\n      key={value._key}\n      disabled={isDragging}\n      portal\n      content={\n        tooltip && typeof tooltip === 'function' ? (\n          React.createElement(tooltip, {value, renderPreview, schemaType})\n        ) : (\n          <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n            <Text textOverflow=\"ellipsis\">\n              {hotspotDescriptionPath\n                ? (get(value, hotspotDescriptionPath) as string)\n                : `${value.x}% x ${value.y}%`}\n            </Text>\n          </Box>\n        )\n      }\n    >\n      <motion.div\n        drag\n        dragConstraints={bounds}\n        dragElastic={0}\n        dragMomentum={false}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        style={{\n          ...dragStyle,\n          x,\n          y,\n          ...(isDragging && {...dragStyleWhileDrag}),\n          ...(isHovering && {...dragStyleWhileHover}),\n        }}\n      >\n        {/* Dot */}\n        <Box\n          style={{\n            ...dotStyle,\n            ...((isDragging || isHovering) && {...dotStyleWhileActive}),\n          }}\n        />\n        {/* Label */}\n        <div\n          style={{\n            ...labelStyle,\n            ...((isDragging || isHovering) && {...labelStyleWhileActive}),\n          }}\n        >\n          {index + 1}\n        </div>\n      </motion.div>\n    </Tooltip>\n  )\n}\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../"}

package/lib/esm/index.js

@@ -0,0 +1,395 @@
+import {jsx as $7XdDa$jsx, jsxs as $7XdDa$jsxs, Fragment as $7XdDa$Fragment} from "react/jsx-runtime";
+import $7XdDa$react, {useMemo as $7XdDa$useMemo, useCallback as $7XdDa$useCallback, useRef as $7XdDa$useRef, useState as $7XdDa$useState, useEffect as $7XdDa$useEffect} from "react";
+import {createPlugin as $7XdDa$createPlugin, useClient as $7XdDa$useClient, useFormValue as $7XdDa$useFormValue, PatchEvent as $7XdDa$PatchEvent, setIfMissing as $7XdDa$setIfMissing, insert as $7XdDa$insert, set as $7XdDa$set} from "sanity";
+import {getImageDimensions as $7XdDa$getImageDimensions} from "@sanity/asset-utils";
+import $7XdDa$sanityimageurl from "@sanity/image-url";
+import {Stack as $7XdDa$Stack, Card as $7XdDa$Card, Flex as $7XdDa$Flex, Text as $7XdDa$Text, Tooltip as $7XdDa$Tooltip, Box as $7XdDa$Box} from "@sanity/ui";
+import {randomKey as $7XdDa$randomKey} from "@sanity/util/content";
+import $7XdDa$lodashget from "lodash/get";
+import {useDebouncedCallback as $7XdDa$useDebouncedCallback, useResizeObserver as $7XdDa$useResizeObserver} from "@react-hookz/web";
+import {useMotionValue as $7XdDa$useMotionValue, motion as $7XdDa$motion} from "framer-motion";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $60d135b0057fb272$export$2e2bcd8739ae039({ children: children  }) {
+    return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Card), {
+        padding: 4,
+        radius: 2,
+        shadow: 1,
+        tone: "caution",
+        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Text), {
+            children: children
+        })
+    });
+}
+
+
+
+
+
+
+
+const $ad617f9fb52013ae$var$dragStyle = {
+    width: "1.4rem",
+    height: "1.4rem",
+    position: "absolute",
+    boxSizing: "border-box",
+    top: 0,
+    left: 0,
+    margin: "-0.7rem 0 0 -0.7rem",
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "50%",
+    background: "#000",
+    color: "white"
+};
+const $ad617f9fb52013ae$var$dragStyleWhileDrag = {
+    background: "rgba(0, 0, 0, 0.1)",
+    border: "1px solid #fff",
+    cursor: "none"
+};
+const $ad617f9fb52013ae$var$dragStyleWhileHover = {
+    background: "rgba(0, 0, 0, 0.1)",
+    border: "1px solid #fff"
+};
+const $ad617f9fb52013ae$var$dotStyle = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    height: "0.2rem",
+    width: "0.2rem",
+    margin: "-0.1rem 0 0 -0.1rem",
+    background: "#fff",
+    visibility: "hidden",
+    borderRadius: "50%",
+    // make sure pointer events only run on the parent
+    pointerEvents: "none"
+};
+const $ad617f9fb52013ae$var$dotStyleWhileActive = {
+    visibility: "visible"
+};
+const $ad617f9fb52013ae$var$labelStyle = {
+    color: "white",
+    fontSize: "0.7rem",
+    fontWeight: 600,
+    lineHeight: "1"
+};
+const $ad617f9fb52013ae$var$labelStyleWhileActive = {
+    visibility: "hidden"
+};
+const $ad617f9fb52013ae$var$round = (num)=>Math.round(num * 100) / 100;
+function $ad617f9fb52013ae$export$2e2bcd8739ae039({ value: value , bounds: bounds , update: update , hotspotDescriptionPath: hotspotDescriptionPath , tooltip: tooltip , index: index , schemaType: schemaType , renderPreview: renderPreview  }) {
+    const [isDragging, setIsDragging] = (0, $7XdDa$react).useState(false);
+    const [isHovering, setIsHovering] = (0, $7XdDa$react).useState(false);
+    // x/y are stored as % but need to be converted to px
+    const x = (0, $7XdDa$useMotionValue)($ad617f9fb52013ae$var$round(bounds.width * (value.x / 100)));
+    const y = (0, $7XdDa$useMotionValue)($ad617f9fb52013ae$var$round(bounds.height * (value.y / 100)));
+    /**
+   * update x/y if the bounds change when resizing the window
+   */ (0, $7XdDa$useEffect)(()=>{
+        x.set($ad617f9fb52013ae$var$round(bounds.width * (value.x / 100)));
+        y.set($ad617f9fb52013ae$var$round(bounds.height * (value.y / 100)));
+    }, [
+        x,
+        y,
+        value,
+        bounds
+    ]);
+    const handleDragEnd = (0, $7XdDa$react).useCallback(()=>{
+        setIsDragging(false);
+        // get current values for x/y in px
+        const currentX = x.get();
+        const currentY = y.get();
+        // Which we need to convert back to `%` to patch the document
+        const newX = $ad617f9fb52013ae$var$round(currentX * 100 / bounds.width);
+        const newY = $ad617f9fb52013ae$var$round(currentY * 100 / bounds.height);
+        // Don't go below 0 or above 100
+        const safeX = Math.max(0, Math.min(100, newX));
+        const safeY = Math.max(0, Math.min(100, newY));
+        update(value._key, safeX, safeY);
+    }, [
+        x,
+        y,
+        value,
+        update,
+        bounds
+    ]);
+    const handleDragStart = (0, $7XdDa$react).useCallback(()=>setIsDragging(true), []);
+    const handleHoverStart = (0, $7XdDa$react).useCallback(()=>setIsHovering(true), []);
+    const handleHoverEnd = (0, $7XdDa$react).useCallback(()=>setIsHovering(false), []);
+    if (!x || !y) return null;
+    return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Tooltip), {
+        disabled: isDragging,
+        portal: true,
+        content: tooltip && typeof tooltip === "function" ? /*#__PURE__*/ (0, $7XdDa$react).createElement(tooltip, {
+            value: value,
+            renderPreview: renderPreview,
+            schemaType: schemaType
+        }) : /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Box), {
+            padding: 2,
+            style: {
+                maxWidth: 200,
+                pointerEvents: `none`
+            },
+            children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Text), {
+                textOverflow: "ellipsis",
+                children: hotspotDescriptionPath ? (0, $7XdDa$lodashget)(value, hotspotDescriptionPath) : `${value.x}% x ${value.y}%`
+            })
+        }),
+        children: /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$motion).div, {
+            drag: true,
+            dragConstraints: bounds,
+            dragElastic: 0,
+            dragMomentum: false,
+            onDragEnd: handleDragEnd,
+            onDragStart: handleDragStart,
+            onHoverStart: handleHoverStart,
+            onHoverEnd: handleHoverEnd,
+            style: {
+                ...$ad617f9fb52013ae$var$dragStyle,
+                x: x,
+                y: y,
+                ...isDragging && {
+                    ...$ad617f9fb52013ae$var$dragStyleWhileDrag
+                },
+                ...isHovering && {
+                    ...$ad617f9fb52013ae$var$dragStyleWhileHover
+                }
+            },
+            children: [
+                /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Box), {
+                    style: {
+                        ...$ad617f9fb52013ae$var$dotStyle,
+                        ...(isDragging || isHovering) && {
+                            ...$ad617f9fb52013ae$var$dotStyleWhileActive
+                        }
+                    }
+                }),
+                /*#__PURE__*/ (0, $7XdDa$jsx)("div", {
+                    style: {
+                        ...$ad617f9fb52013ae$var$labelStyle,
+                        ...(isDragging || isHovering) && {
+                            ...$ad617f9fb52013ae$var$labelStyleWhileActive
+                        }
+                    },
+                    children: index + 1
+                })
+            ]
+        })
+    }, value._key);
+}
+
+
+const $3fa33a99b88eeab6$var$imageStyle = {
+    width: `100%`,
+    height: `auto`
+};
+const $3fa33a99b88eeab6$var$VALID_ROOT_PATHS = [
+    "document",
+    "parent"
+];
+function $3fa33a99b88eeab6$export$aa9dd3c5642820fe(props) {
+    const { value: value , onChange: onChange , imageHotspotOptions: imageHotspotOptions , schemaType: schemaType , renderPreview: renderPreview  } = props;
+    const sanityClient = (0, $7XdDa$useClient)({
+        apiVersion: "2022-01-01"
+    });
+    const imageHotspotPathRoot = (0, $7XdDa$useMemo)(()=>{
+        const pathRoot = $3fa33a99b88eeab6$var$VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? "") ? imageHotspotOptions.pathRoot : "document";
+        return pathRoot === "document" ? [] : props.path.slice(0, -1);
+    }, [
+        imageHotspotOptions.pathRoot,
+        props.path
+    ]);
+    const rootObject = (0, $7XdDa$useFormValue)(imageHotspotPathRoot);
+    /**
+   * Finding the image from the imageHotspotPathRoot (defaults to document),
+   * using the path from the hotspot's `options` field
+   *
+   * when changes in imageHotspotPathRoot (e.g. document) occur,
+   * check if there are any changes to the hotspotImage and update the reference
+   */ const hotspotImage = (0, $7XdDa$useMemo)(()=>{
+        return (0, $7XdDa$lodashget)(rootObject, imageHotspotOptions.imagePath);
+    }, [
+        rootObject,
+        imageHotspotOptions.imagePath
+    ]);
+    const displayImage = (0, $7XdDa$useMemo)(()=>{
+        const builder = (0, $7XdDa$sanityimageurl)(sanityClient).dataset(sanityClient.config().dataset ?? "");
+        const urlFor = (source)=>builder.image(source);
+        if (hotspotImage?.asset?._ref) {
+            const { aspectRatio: aspectRatio  } = (0, $7XdDa$getImageDimensions)(hotspotImage.asset._ref);
+            const width = 1200;
+            const height = Math.round(width / aspectRatio);
+            const url = urlFor(hotspotImage).width(width).url();
+            return {
+                width: width,
+                height: height,
+                url: url
+            };
+        }
+        return null;
+    }, [
+        hotspotImage,
+        sanityClient
+    ]);
+    const handleHotspotImageClick = (0, $7XdDa$useCallback)((event)=>{
+        const { nativeEvent: nativeEvent  } = event;
+        // Calculate the x/y percentage of the click position
+        const x = Number((nativeEvent.offsetX * 100 / nativeEvent.srcElement.width).toFixed(2));
+        const y = Number((nativeEvent.offsetY * 100 / nativeEvent.srcElement.height).toFixed(2));
+        const description = `New Hotspot at ${x}% x ${y}%`;
+        const newRow = {
+            _key: (0, $7XdDa$randomKey)(12),
+            _type: schemaType.of[0].name,
+            x: x,
+            y: y
+        };
+        if (imageHotspotOptions?.descriptionPath) newRow[imageHotspotOptions.descriptionPath] = description;
+        onChange((0, $7XdDa$PatchEvent).from([
+            (0, $7XdDa$setIfMissing)([]),
+            (0, $7XdDa$insert)([
+                newRow
+            ], "after", [
+                -1
+            ])
+        ]));
+    }, [
+        imageHotspotOptions,
+        onChange,
+        schemaType
+    ]);
+    const handleHotspotMove = (0, $7XdDa$useCallback)((key, x, y)=>{
+        onChange((0, $7XdDa$PatchEvent).from([
+            // Set the `x` value of this array key item
+            (0, $7XdDa$set)(x, [
+                {
+                    _key: key
+                },
+                "x"
+            ]),
+            // Set the `y` value of this array key item
+            (0, $7XdDa$set)(y, [
+                {
+                    _key: key
+                },
+                "y"
+            ]), 
+        ]));
+    }, [
+        onChange
+    ]);
+    const hotspotImageRef = (0, $7XdDa$useRef)(null);
+    const [imageRect, setImageRect] = (0, $7XdDa$useState)();
+    const updateImageRectCallback = (0, $7XdDa$useDebouncedCallback)((e)=>setImageRect(e.contentRect), [
+        setImageRect
+    ], 200);
+    (0, $7XdDa$useResizeObserver)(hotspotImageRef, updateImageRectCallback);
+    return /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Stack), {
+        space: [
+            2,
+            2,
+            3
+        ],
+        children: [
+            displayImage?.url ? /*#__PURE__*/ (0, $7XdDa$jsxs)("div", {
+                style: {
+                    position: `relative`
+                },
+                children: [
+                    imageRect && (value?.length ?? 0) > 0 && value?.map((spot, index)=>/*#__PURE__*/ (0, $7XdDa$jsx)((0, $ad617f9fb52013ae$export$2e2bcd8739ae039), {
+                            index: index,
+                            value: spot,
+                            bounds: imageRect,
+                            update: handleHotspotMove,
+                            hotspotDescriptionPath: imageHotspotOptions?.descriptionPath,
+                            tooltip: imageHotspotOptions?.tooltip,
+                            renderPreview: renderPreview,
+                            schemaType: schemaType.of[0]
+                        }, spot._key)),
+                    /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Card), {
+                        __unstable_checkered: true,
+                        shadow: 1,
+                        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Flex), {
+                            align: "center",
+                            justify: "center",
+                            children: /*#__PURE__*/ (0, $7XdDa$jsx)("img", {
+                                ref: hotspotImageRef,
+                                src: displayImage.url,
+                                width: displayImage.width,
+                                height: displayImage.height,
+                                alt: "",
+                                style: $3fa33a99b88eeab6$var$imageStyle,
+                                onClick: handleHotspotImageClick
+                            })
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, $7XdDa$jsx)((0, $60d135b0057fb272$export$2e2bcd8739ae039), {
+                children: imageHotspotOptions.imagePath ? /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
+                    children: [
+                        "No Hotspot image found at path ",
+                        /*#__PURE__*/ (0, $7XdDa$jsx)("code", {
+                            children: imageHotspotOptions.imagePath
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Fragment), {
+                    children: [
+                        "Define a path in this field using to the image field in this document at",
+                        " ",
+                        /*#__PURE__*/ (0, $7XdDa$jsx)("code", {
+                            children: "options.hotspotImagePath"
+                        })
+                    ]
+                })
+            }),
+            imageHotspotOptions.pathRoot && !$3fa33a99b88eeab6$var$VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $60d135b0057fb272$export$2e2bcd8739ae039), {
+                children: [
+                    'The supplied imageHotspotPathRoot "',
+                    imageHotspotOptions.pathRoot,
+                    '" is not valid, falling back to "document". Available values are "',
+                    $3fa33a99b88eeab6$var$VALID_ROOT_PATHS.join(", "),
+                    '".'
+                ]
+            }),
+            props.renderDefault(props)
+        ]
+    });
+}
+
+
+
+
+const $357f50a17451fe9f$export$2e97a933fd61fb01 = (0, $7XdDa$createPlugin)({
+    name: "image-hotspot-array",
+    form: {
+        components: {
+            input: (props)=>{
+                if (props.schemaType.jsonType === "array" && props.schemaType.options?.imageHotspot) {
+                    const imageHotspotOptions = props.schemaType.options?.imageHotspot;
+                    if (imageHotspotOptions) return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $3fa33a99b88eeab6$export$aa9dd3c5642820fe), {
+                        ...props,
+                        imageHotspotOptions: imageHotspotOptions
+                    });
+                }
+                return props.renderDefault(props);
+            }
+        }
+    }
+});
+
+
+export {$357f50a17451fe9f$export$2e97a933fd61fb01 as imageHotspotArrayPlugin, $3fa33a99b88eeab6$export$aa9dd3c5642820fe as ImageHotspotArray};
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;ACEA;;;;;;;;;ACFA;;;AAGe,kDAAkB,YAAC,QAAQ,CAAA,EAAwB,EAAE;IAClE,qBACE,gBAAC,CAAA,GAAA,WAAI,CAAA;QAAC,OAAO,EAAE,CAAC;QAAE,MAAM,EAAE,CAAC;QAAE,MAAM,EAAE,CAAC;QAAE,IAAI,EAAC,SAAS;kBACpD,cAAA,gBAAC,CAAA,GAAA,WAAI,CAAA;sBAAE,QAAQ;UAAQ;MAClB,CACR;CACF;;;ACRD;;;;;AAOA,MAAM,+BAAS,GAAkB;IAC/B,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,qBAAqB;IAC7B,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,OAAO;CACf;AAED,MAAM,wCAAkB,GAAkB;IACxC,UAAU,EAAE,oBAAoB;IAChC,MAAM,EAAE,gBAAgB;IACxB,MAAM,EAAE,MAAM;CACf;AAED,MAAM,yCAAmB,GAAkB;IACzC,UAAU,EAAE,oBAAoB;IAChC,MAAM,EAAE,gBAAgB;CACzB;AAED,MAAM,8BAAQ,GAAkB;IAC9B,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,qBAAqB;IAC7B,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,KAAK;IACnB,kDAAkD;IAClD,aAAa,EAAE,MAAM;CACtB;AAED,MAAM,yCAAmB,GAAkB;IACzC,UAAU,EAAE,SAAS;CACtB;AAED,MAAM,gCAAU,GAAkB;IAChC,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,GAAG;IACf,UAAU,EAAE,GAAG;CAChB;AAED,MAAM,2CAAqB,GAAkB;IAC3C,UAAU,EAAE,QAAQ;CACrB;AAED,MAAM,2BAAK,GAAG,CAAC,GAAW,GAAK,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG;AAmB3C,kDAAc,SAC3B,KAAK,CAAA,UACL,MAAM,CAAA,UACN,MAAM,CAAA,0BACN,sBAAsB,CAAA,WACtB,OAAO,CAAA,SACP,KAAK,CAAA,cACL,UAAU,CAAA,iBACV,aAAa,CAAA,EACA,EAAE;IACf,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,CAAA,GAAA,YAAK,CAAA,CAAC,QAAQ,CAAC,KAAK,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,CAAA,GAAA,YAAK,CAAA,CAAC,QAAQ,CAAC,KAAK,CAAC;IAEzD,qDAAqD;IACrD,MAAM,CAAC,GAAG,CAAA,GAAA,qBAAc,CAAA,CAAC,2BAAK,CAAC,MAAM,CAAC,KAAK,GAAI,CAAA,KAAK,CAAC,CAAC,GAAG,GAAG,CAAA,AAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,GAAG,CAAA,GAAA,qBAAc,CAAA,CAAC,2BAAK,CAAC,MAAM,CAAC,MAAM,GAAI,CAAA,KAAK,CAAC,CAAC,GAAG,GAAG,CAAA,AAAC,CAAC,CAAC;IAEhE;;KAEG,CACH,CAAA,GAAA,gBAAS,CAAA,CAAC,IAAM;QACd,CAAC,CAAC,GAAG,CAAC,2BAAK,CAAC,MAAM,CAAC,KAAK,GAAI,CAAA,KAAK,CAAC,CAAC,GAAG,GAAG,CAAA,AAAC,CAAC,CAAC;QAC5C,CAAC,CAAC,GAAG,CAAC,2BAAK,CAAC,MAAM,CAAC,MAAM,GAAI,CAAA,KAAK,CAAC,CAAC,GAAG,GAAG,CAAA,AAAC,CAAC,CAAC;KAC9C,EAAE;QAAC,CAAC;QAAE,CAAC;QAAE,KAAK;QAAE,MAAM;KAAC,CAAC;IAEzB,MAAM,aAAa,GAAG,CAAA,GAAA,YAAK,CAAA,CAAC,WAAW,CAAC,IAAM;QAC5C,aAAa,CAAC,KAAK,CAAC;QAEpB,mCAAmC;QACnC,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,EAAE;QACxB,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,EAAE;QAExB,6DAA6D;QAC7D,MAAM,IAAI,GAAG,2BAAK,CAAC,AAAC,QAAQ,GAAG,GAAG,GAAI,MAAM,CAAC,KAAK,CAAC;QACnD,MAAM,IAAI,GAAG,2BAAK,CAAC,AAAC,QAAQ,GAAG,GAAG,GAAI,MAAM,CAAC,MAAM,CAAC;QAEpD,gCAAgC;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAE9C,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC;KACjC,EAAE;QAAC,CAAC;QAAE,CAAC;QAAE,KAAK;QAAE,MAAM;QAAE,MAAM;KAAC,CAAC;IACjC,MAAM,eAAe,GAAG,CAAA,GAAA,YAAK,CAAA,CAAC,WAAW,CAAC,IAAM,aAAa,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;IAExE,MAAM,gBAAgB,GAAG,CAAA,GAAA,YAAK,CAAA,CAAC,WAAW,CAAC,IAAM,aAAa,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;IACzE,MAAM,cAAc,GAAG,CAAA,GAAA,YAAK,CAAA,CAAC,WAAW,CAAC,IAAM,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;IAExE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EACV,OAAO,IAAI,CAAA;IAGb,qBACE,gBAAC,CAAA,GAAA,cAAO,CAAA;QAEN,QAAQ,EAAE,UAAU;QACpB,MAAM;QACN,OAAO,EACL,OAAO,IAAI,OAAO,OAAO,KAAK,UAAU,iBACtC,CAAA,GAAA,YAAK,CAAA,CAAC,aAAa,CAAC,OAAO,EAAE;mBAAC,KAAK;2BAAE,aAAa;wBAAE,UAAU;SAAC,CAAC,iBAEhE,gBAAC,CAAA,GAAA,UAAG,CAAA;YAAC,OAAO,EAAE,CAAC;YAAE,KAAK,EAAE;gBAAC,QAAQ,EAAE,GAAG;gBAAE,aAAa,EAAE,CAAC,IAAI,CAAC;aAAC;sBAC5D,cAAA,gBAAC,CAAA,GAAA,WAAI,CAAA;gBAAC,YAAY,EAAC,UAAU;0BAC1B,sBAAsB,GAClB,CAAA,GAAA,gBAAG,CAAA,CAAC,KAAK,EAAE,sBAAsB,CAAC,GACnC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;cAC1B;UACH,AACP;kBAGH,cAAA,iBAAC,CAAA,GAAA,aAAM,CAAA,CAAC,GAAG;YACT,IAAI;YACJ,eAAe,EAAE,MAAM;YACvB,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,gBAAgB;YAC9B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE;gBACL,GAAG,+BAAS;mBACZ,CAAC;mBACD,CAAC;gBACD,GAAI,UAAU,IAAI;oBAAC,GAAG,wCAAkB;iBAAC;gBACzC,GAAI,UAAU,IAAI;oBAAC,GAAG,yCAAmB;iBAAC;aAC3C;;8BAGD,gBAAC,CAAA,GAAA,UAAG,CAAA;oBACF,KAAK,EAAE;wBACL,GAAG,8BAAQ;wBACX,GAAI,AAAC,CAAA,UAAU,IAAI,UAAU,CAAA,IAAK;4BAAC,GAAG,yCAAmB;yBAAC;qBAC3D;kBACD;8BAEF,gBAAC,KAAG;oBACF,KAAK,EAAE;wBACL,GAAG,gCAAU;wBACb,GAAI,AAAC,CAAA,UAAU,IAAI,UAAU,CAAA,IAAK;4BAAC,GAAG,2CAAqB;yBAAC;qBAC7D;8BAEA,KAAK,GAAG,CAAC;kBACN;;UACK;OAlDR,KAAK,CAAC,IAAI,CAmDP,CACX;CACF;;;AFrKD,MAAM,gCAAU,GAAG;IAAC,KAAK,EAAE,CAAC,IAAI,CAAC;IAAE,MAAM,EAAE,CAAC,IAAI,CAAC;CAAC;AAElD,MAAM,sCAAgB,GAAG;IAAC,UAAU;IAAE,QAAQ;CAAC;AAWxC,SAAS,yCAAiB,CAC/B,KAAyF,EACzF;IACA,MAAM,SAAC,KAAK,CAAA,YAAE,QAAQ,CAAA,uBAAE,mBAAmB,CAAA,cAAE,UAAU,CAAA,iBAAE,aAAa,CAAA,EAAC,GAAG,KAAK;IAE/E,MAAM,YAAY,GAAG,CAAA,GAAA,gBAAS,CAAA,CAAC;QAAC,UAAU,EAAE,YAAY;KAAC,CAAC;IAE1D,MAAM,oBAAoB,GAAG,CAAA,GAAA,cAAO,CAAA,CAAC,IAAM;QACzC,MAAM,QAAQ,GAAG,sCAAgB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,IAAI,EAAE,CAAC,GAC1E,mBAAmB,CAAC,QAAQ,GAC5B,UAAU;QACd,OAAO,QAAQ,KAAK,UAAU,GAAG,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;KAC9D,EAAE;QAAC,mBAAmB,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI;KAAC,CAAC;IAE9C,MAAM,UAAU,GAAG,CAAA,GAAA,mBAAY,CAAA,CAAC,oBAAoB,CAAC;IAErD;;;;;;KAMG,CACH,MAAM,YAAY,GAAG,CAAA,GAAA,cAAO,CAAA,CAAC,IAAM;QACjC,OAAO,CAAA,GAAA,gBAAG,CAAA,CAAC,UAAU,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAA0B;KAChF,EAAE;QAAC,UAAU;QAAE,mBAAmB,CAAC,SAAS;KAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,CAAA,GAAA,cAAO,CAAA,CAAC,IAAM;QACjC,MAAM,OAAO,GAAG,CAAA,GAAA,qBAAe,CAAA,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC;QAC1F,MAAM,MAAM,GAAG,CAAC,MAAkB,GAAK,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;QAE5D,IAAI,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE;YAC7B,MAAM,eAAC,WAAW,CAAA,EAAC,GAAG,CAAA,GAAA,yBAAkB,CAAA,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;YACjE,MAAM,KAAK,GAAG,IAAI;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC;YAC9C,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YAEnD,OAAO;uBAAC,KAAK;wBAAE,MAAM;qBAAE,GAAG;aAAC,CAAA;SAC5B;QAED,OAAO,IAAI,CAAA;KACZ,EAAE;QAAC,YAAY;QAAE,YAAY;KAAC,CAAC;IAEhC,MAAM,uBAAuB,GAAG,CAAA,GAAA,kBAAW,CAAA,CACzC,CAAC,KAAU,GAAK;QACd,MAAM,eAAC,WAAW,CAAA,EAAC,GAAG,KAAK;QAE3B,qDAAqD;QACrD,MAAM,CAAC,GAAG,MAAM,CAAC,AAAC,CAAA,AAAC,WAAW,CAAC,OAAO,GAAG,GAAG,GAAI,WAAW,CAAC,UAAU,CAAC,KAAK,CAAA,CAAE,OAAO,CAAC,CAAC,CAAC,CAAC;QACzF,MAAM,CAAC,GAAG,MAAM,CAAC,AAAC,CAAA,AAAC,WAAW,CAAC,OAAO,GAAG,GAAG,GAAI,WAAW,CAAC,UAAU,CAAC,MAAM,CAAA,CAAE,OAAO,CAAC,CAAC,CAAC,CAAC;QAC1F,MAAM,WAAW,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAElD,MAAM,MAAM,GAAgB;YAC1B,IAAI,EAAE,CAAA,GAAA,gBAAS,CAAA,CAAC,EAAE,CAAC;YACnB,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;eAC5B,CAAC;eACD,CAAC;SACF;QAED,IAAI,mBAAmB,EAAE,eAAe,EACtC,MAAM,CAAC,mBAAmB,CAAC,eAAe,CAAC,GAAG,WAAW;QAG3D,QAAQ,CAAC,CAAA,GAAA,iBAAU,CAAA,CAAC,IAAI,CAAC;YAAC,CAAA,GAAA,mBAAY,CAAA,CAAC,EAAE,CAAC;YAAE,CAAA,GAAA,aAAM,CAAA,CAAC;gBAAC,MAAM;aAAC,EAAE,OAAO,EAAE;AAAC,kBAAE;aAAC,CAAC;SAAC,CAAC,CAAC;KAC/E,EACD;QAAC,mBAAmB;QAAE,QAAQ;QAAE,UAAU;KAAC,CAC5C;IAED,MAAM,iBAAiB,GAAkB,CAAA,GAAA,kBAAW,CAAA,CAClD,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,GAAK;QACb,QAAQ,CACN,CAAA,GAAA,iBAAU,CAAA,CAAC,IAAI,CAAC;YACd,2CAA2C;YAC3C,CAAA,GAAA,UAAG,CAAA,CAAC,CAAC,EAAE;gBAAC;oBAAC,IAAI,EAAE,GAAG;iBAAC;gBAAE,GAAG;aAAC,CAAC;YAC1B,2CAA2C;YAC3C,CAAA,GAAA,UAAG,CAAA,CAAC,CAAC,EAAE;gBAAC;oBAAC,IAAI,EAAE,GAAG;iBAAC;gBAAE,GAAG;aAAC,CAAC;SAC3B,CAAC,CACH;KACF,EACD;QAAC,QAAQ;KAAC,CACX;IAED,MAAM,eAAe,GAAG,CAAA,GAAA,aAAM,CAAA,CAA0B,IAAI,CAAC;IAE7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,CAAA,GAAA,eAAQ,CAAA,EAAmB;IAC7D,MAAM,uBAAuB,GAAG,CAAA,GAAA,2BAAoB,CAAA,CACjD,CAAC,CAAC,GAAK,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,EACnC;QAAC,YAAY;KAAC,EACd,GAAG,CACJ;IACD,CAAA,GAAA,wBAAiB,CAAA,CAAC,eAAe,EAAE,uBAAuB,CAAC;IAE3D,qBACE,iBAAC,CAAA,GAAA,YAAK,CAAA;QAAC,KAAK,EAAE;AAAC,aAAC;AAAE,aAAC;AAAE,aAAC;SAAC;;YACpB,YAAY,EAAE,GAAG,iBAChB,iBAAC,KAAG;gBAAC,KAAK,EAAE;oBAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;iBAAC;;oBAC/B,SAAS,IACR,AAAC,CAAA,KAAK,EAAE,MAAM,IAAI,CAAC,CAAA,GAAI,CAAC,IACxB,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,iBACrB,gBAAC,CAAA,GAAA,wCAAI,CAAA;4BACH,KAAK,EAAE,KAAK;4BAEZ,KAAK,EAAE,IAAI;4BACX,MAAM,EAAE,SAAS;4BACjB,MAAM,EAAE,iBAAiB;4BACzB,sBAAsB,EAAE,mBAAmB,EAAE,eAAe;4BAC5D,OAAO,EAAE,mBAAmB,EAAE,OAAO;4BACrC,aAAa,EAAE,aAAa;4BAC5B,UAAU,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;2BAPvB,IAAI,CAAC,IAAI,CAQd,AACH,CAAC;kCAEJ,gBAAC,CAAA,GAAA,WAAI,CAAA;wBAAC,oBAAoB;wBAAC,MAAM,EAAE,CAAC;kCAClC,cAAA,gBAAC,CAAA,GAAA,WAAI,CAAA;4BAAC,KAAK,EAAC,QAAQ;4BAAC,OAAO,EAAC,QAAQ;sCACnC,cAAA,gBAAC,KAAG;gCACF,GAAG,EAAE,eAAe;gCACpB,GAAG,EAAE,YAAY,CAAC,GAAG;gCACrB,KAAK,EAAE,YAAY,CAAC,KAAK;gCACzB,MAAM,EAAE,YAAY,CAAC,MAAM;gCAC3B,GAAG,EAAC,EAAE;gCACN,KAAK,EAAE,gCAAU;gCACjB,OAAO,EAAE,uBAAuB;8BAChC;0BACG;sBACF;;cACH,iBAEN,gBAAC,CAAA,GAAA,wCAAQ,CAAA;0BACN,mBAAmB,CAAC,SAAS,iBAC5B;;wBAAE,iCAC+B;sCAAA,gBAAC,MAAI;sCAAE,mBAAmB,CAAC,SAAS;0BAAQ;;kBAC1E,iBAEH;;wBAAE,0EACwE;wBAAC,GAAG;sCAC5E,gBAAC,MAAI;sCAAC,0BAAwB;0BAAO;;kBACpC,AACJ;cACQ,AACZ;YACA,mBAAmB,CAAC,QAAQ,IAAI,CAAC,sCAAgB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,kBACvF,iBAAC,CAAA,GAAA,wCAAQ,CAAA;;oBAAC,qCAC2B;oBAAC,mBAAmB,CAAC,QAAQ;oBAAC,oEACvB;oBAAC,sCAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;oBAAC,IACzE;;cAAW,AACZ;YACA,KAAK,CAAC,aAAa,CAAC,KAAK,CAAwC;;MAC5D,CACT;CACF;;;;;ADtKM,MAAM,yCAAuB,GAAG,CAAA,GAAA,mBAAY,CAAA,CAAC;IAClD,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,KAAK,EAAE,CAAC,KAAK,GAAK;gBAChB,IAAI,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE;oBACnF,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY;oBAClE,IAAI,mBAAmB,EACrB,qBACE,gBAAC,CAAA,GAAA,yCAAiB,CAAA;wBACf,GAAI,KAAK;wBACV,mBAAmB,EAAE,mBAAmB;sBACxC,CACH;iBAEJ;gBACD,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;aAClC;SACF;KACF;CACF,CAAC","sources":["src/index.tsx","src/ImageHotspotArray.tsx","src/Feedback.tsx","src/Spot.tsx"],"sourcesContent":["import {ImageHotspotArray, type HotspotItem} from './ImageHotspotArray'\nimport React, {ComponentType} from 'react'\nimport {ArrayOfObjectsInputProps, createPlugin} from 'sanity'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n  pathRoot?: 'document' | 'parent'\n  imagePath: string\n  descriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module '@sanity/types' {\n  export interface ArrayOptions {\n    imageHotspot?: ImageHotspotOptions\n  }\n}\n\nexport {ImageHotspotArray}\nexport type {HotspotTooltipProps, HotspotItem}\n\nexport const imageHotspotArrayPlugin = createPlugin({\n  name: 'image-hotspot-array',\n  form: {\n    components: {\n      input: (props) => {\n        if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n          const imageHotspotOptions = props.schemaType.options?.imageHotspot\n          if (imageHotspotOptions) {\n            return (\n              <ImageHotspotArray\n                {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n                imageHotspotOptions={imageHotspotOptions}\n              />\n            )\n          }\n        }\n        return props.renderDefault(props)\n      },\n    },\n  },\n})\n","/* eslint-disable react/display-name */\n\nimport {getImageDimensions} from '@sanity/asset-utils'\nimport {\n  ArrayOfObjectsInputProps,\n  ImageValue,\n  insert,\n  ObjectSchemaType,\n  PatchEvent,\n  set,\n  setIfMissing,\n  useClient,\n  useFormValue,\n} from 'sanity'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {Card, Flex, Stack} from '@sanity/ui'\nimport {randomKey} from '@sanity/util/content'\nimport get from 'lodash/get'\nimport React, {useCallback, useMemo, useRef, useState} from 'react'\n\nimport {IUseResizeObserverCallback, useDebouncedCallback, useResizeObserver} from '@react-hookz/web'\nimport Feedback from './Feedback'\nimport Spot from './Spot'\nimport {ImageHotspotOptions} from './index'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nexport type FnHotspotMove = (key: string, x: number, y: number) => void\n\nexport type HotspotItem<HotspotFields = {[key: string]: unknown}> = {\n  _key: string\n  _type: string\n  x: number\n  y: number\n} & HotspotFields\n\nexport function ImageHotspotArray(\n  props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions}\n) {\n  const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props\n\n  const sanityClient = useClient({apiVersion: '2022-01-01'})\n\n  const imageHotspotPathRoot = useMemo(() => {\n    const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')\n      ? imageHotspotOptions.pathRoot\n      : 'document'\n    return pathRoot === 'document' ? [] : props.path.slice(0, -1)\n  }, [imageHotspotOptions.pathRoot, props.path])\n\n  const rootObject = useFormValue(imageHotspotPathRoot)\n\n  /**\n   * Finding the image from the imageHotspotPathRoot (defaults to document),\n   * using the path from the hotspot's `options` field\n   *\n   * when changes in imageHotspotPathRoot (e.g. document) occur,\n   * check if there are any changes to the hotspotImage and update the reference\n   */\n  const hotspotImage = useMemo(() => {\n    return get(rootObject, imageHotspotOptions.imagePath) as ImageValue | undefined\n  }, [rootObject, imageHotspotOptions.imagePath])\n\n  const displayImage = useMemo(() => {\n    const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')\n    const urlFor = (source: ImageValue) => builder.image(source)\n\n    if (hotspotImage?.asset?._ref) {\n      const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n      const width = 1200\n      const height = Math.round(width / aspectRatio)\n      const url = urlFor(hotspotImage).width(width).url()\n\n      return {width, height, url}\n    }\n\n    return null\n  }, [hotspotImage, sanityClient])\n\n  const handleHotspotImageClick = useCallback(\n    (event: any) => {\n      const {nativeEvent} = event\n\n      // Calculate the x/y percentage of the click position\n      const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))\n      const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))\n      const description = `New Hotspot at ${x}% x ${y}%`\n\n      const newRow: HotspotItem = {\n        _key: randomKey(12),\n        _type: schemaType.of[0].name,\n        x,\n        y,\n      }\n\n      if (imageHotspotOptions?.descriptionPath) {\n        newRow[imageHotspotOptions.descriptionPath] = description\n      }\n\n      onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))\n    },\n    [imageHotspotOptions, onChange, schemaType]\n  )\n\n  const handleHotspotMove: FnHotspotMove = useCallback(\n    (key, x, y) => {\n      onChange(\n        PatchEvent.from([\n          // Set the `x` value of this array key item\n          set(x, [{_key: key}, 'x']),\n          // Set the `y` value of this array key item\n          set(y, [{_key: key}, 'y']),\n        ])\n      )\n    },\n    [onChange]\n  )\n\n  const hotspotImageRef = useRef<HTMLImageElement | null>(null)\n\n  const [imageRect, setImageRect] = useState<DOMRectReadOnly>()\n  const updateImageRectCallback = useDebouncedCallback(\n    ((e) => setImageRect(e.contentRect)) as IUseResizeObserverCallback,\n    [setImageRect],\n    200\n  )\n  useResizeObserver(hotspotImageRef, updateImageRectCallback)\n\n  return (\n    <Stack space={[2, 2, 3]}>\n      {displayImage?.url ? (\n        <div style={{position: `relative`}}>\n          {imageRect &&\n            (value?.length ?? 0) > 0 &&\n            value?.map((spot, index) => (\n              <Spot\n                index={index}\n                key={spot._key}\n                value={spot}\n                bounds={imageRect}\n                update={handleHotspotMove}\n                hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}\n                tooltip={imageHotspotOptions?.tooltip}\n                renderPreview={renderPreview}\n                schemaType={schemaType.of[0] as ObjectSchemaType}\n              />\n            ))}\n\n          <Card __unstable_checkered shadow={1}>\n            <Flex align=\"center\" justify=\"center\">\n              <img\n                ref={hotspotImageRef}\n                src={displayImage.url}\n                width={displayImage.width}\n                height={displayImage.height}\n                alt=\"\"\n                style={imageStyle}\n                onClick={handleHotspotImageClick}\n              />\n            </Flex>\n          </Card>\n        </div>\n      ) : (\n        <Feedback>\n          {imageHotspotOptions.imagePath ? (\n            <>\n              No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>\n            </>\n          ) : (\n            <>\n              Define a path in this field using to the image field in this document at{' '}\n              <code>options.hotspotImagePath</code>\n            </>\n          )}\n        </Feedback>\n      )}\n      {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (\n        <Feedback>\n          The supplied imageHotspotPathRoot \"{imageHotspotOptions.pathRoot}\" is not valid, falling\n          back to \"document\". Available values are \"{VALID_ROOT_PATHS.join(', ')}\".\n        </Feedback>\n      )}\n      {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}\n    </Stack>\n  )\n}\n","import React, {ReactNode} from 'react'\nimport {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}: {children: ReactNode}) {\n  return (\n    <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n      <Text>{children}</Text>\n    </Card>\n  )\n}\n","/* eslint-disable */\nimport {Box, Text, Tooltip} from '@sanity/ui'\nimport {motion, useMotionValue} from 'framer-motion'\nimport get from 'lodash/get'\nimport React, {ComponentType, CSSProperties, ReactElement, useEffect} from 'react'\nimport {FnHotspotMove, HotspotItem} from './ImageHotspotArray'\nimport {ObjectSchemaType, RenderPreviewCallback} from 'sanity'\n\nconst dragStyle: CSSProperties = {\n  width: '1.4rem',\n  height: '1.4rem',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  top: 0,\n  left: 0,\n  margin: '-0.7rem 0 0 -0.7rem',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '50%',\n  background: '#000',\n  color: 'white',\n}\n\nconst dragStyleWhileDrag: CSSProperties = {\n  background: 'rgba(0, 0, 0, 0.1)',\n  border: '1px solid #fff',\n  cursor: 'none',\n}\n\nconst dragStyleWhileHover: CSSProperties = {\n  background: 'rgba(0, 0, 0, 0.1)',\n  border: '1px solid #fff',\n}\n\nconst dotStyle: CSSProperties = {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  height: '0.2rem',\n  width: '0.2rem',\n  margin: '-0.1rem 0 0 -0.1rem',\n  background: '#fff',\n  visibility: 'hidden',\n  borderRadius: '50%',\n  // make sure pointer events only run on the parent\n  pointerEvents: 'none',\n}\n\nconst dotStyleWhileActive: CSSProperties = {\n  visibility: 'visible',\n}\n\nconst labelStyle: CSSProperties = {\n  color: 'white',\n  fontSize: '0.7rem',\n  fontWeight: 600,\n  lineHeight: '1',\n}\n\nconst labelStyleWhileActive: CSSProperties = {\n  visibility: 'hidden',\n}\n\nconst round = (num: number) => Math.round(num * 100) / 100\n\nexport interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {\n  value: HotspotItem<HotspotFields>\n  schemaType: ObjectSchemaType\n  renderPreview: RenderPreviewCallback\n}\n\ninterface HotspotProps<HotspotFields = {[key: string]: unknown}> {\n  value: HotspotItem\n  bounds: DOMRectReadOnly\n  update: FnHotspotMove\n  hotspotDescriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n  index: number\n  schemaType: ObjectSchemaType\n  renderPreview: RenderPreviewCallback\n}\n\nexport default function Spot({\n  value,\n  bounds,\n  update,\n  hotspotDescriptionPath,\n  tooltip,\n  index,\n  schemaType,\n  renderPreview,\n}: HotspotProps) {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [isHovering, setIsHovering] = React.useState(false)\n\n  // x/y are stored as % but need to be converted to px\n  const x = useMotionValue(round(bounds.width * (value.x / 100)))\n  const y = useMotionValue(round(bounds.height * (value.y / 100)))\n\n  /**\n   * update x/y if the bounds change when resizing the window\n   */\n  useEffect(() => {\n    x.set(round(bounds.width * (value.x / 100)))\n    y.set(round(bounds.height * (value.y / 100)))\n  }, [x, y, value, bounds])\n\n  const handleDragEnd = React.useCallback(() => {\n    setIsDragging(false)\n\n    // get current values for x/y in px\n    const currentX = x.get()\n    const currentY = y.get()\n\n    // Which we need to convert back to `%` to patch the document\n    const newX = round((currentX * 100) / bounds.width)\n    const newY = round((currentY * 100) / bounds.height)\n\n    // Don't go below 0 or above 100\n    const safeX = Math.max(0, Math.min(100, newX))\n    const safeY = Math.max(0, Math.min(100, newY))\n\n    update(value._key, safeX, safeY)\n  }, [x, y, value, update, bounds])\n  const handleDragStart = React.useCallback(() => setIsDragging(true), [])\n\n  const handleHoverStart = React.useCallback(() => setIsHovering(true), [])\n  const handleHoverEnd = React.useCallback(() => setIsHovering(false), [])\n\n  if (!x || !y) {\n    return null\n  }\n\n  return (\n    <Tooltip\n      key={value._key}\n      disabled={isDragging}\n      portal\n      content={\n        tooltip && typeof tooltip === 'function' ? (\n          React.createElement(tooltip, {value, renderPreview, schemaType})\n        ) : (\n          <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n            <Text textOverflow=\"ellipsis\">\n              {hotspotDescriptionPath\n                ? (get(value, hotspotDescriptionPath) as string)\n                : `${value.x}% x ${value.y}%`}\n            </Text>\n          </Box>\n        )\n      }\n    >\n      <motion.div\n        drag\n        dragConstraints={bounds}\n        dragElastic={0}\n        dragMomentum={false}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        style={{\n          ...dragStyle,\n          x,\n          y,\n          ...(isDragging && {...dragStyleWhileDrag}),\n          ...(isHovering && {...dragStyleWhileHover}),\n        }}\n      >\n        {/* Dot */}\n        <Box\n          style={{\n            ...dotStyle,\n            ...((isDragging || isHovering) && {...dotStyleWhileActive}),\n          }}\n        />\n        {/* Label */}\n        <div\n          style={{\n            ...labelStyle,\n            ...((isDragging || isHovering) && {...labelStyleWhileActive}),\n          }}\n        >\n          {index + 1}\n        </div>\n      </motion.div>\n    </Tooltip>\n  )\n}\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../"}

package/lib/types/index.d.ts

@@ -0,0 +1,36 @@
+import { ObjectSchemaType, RenderPreviewCallback, ArrayOfObjectsInputProps } from "sanity";
+import { ComponentType } from "react";
+export interface HotspotTooltipProps<HotspotFields = {
+    [key: string]: unknown;
+}> {
+    value: HotspotItem<HotspotFields>;
+    schemaType: ObjectSchemaType;
+    renderPreview: RenderPreviewCallback;
+}
+export type HotspotItem<HotspotFields = {
+    [key: string]: unknown;
+}> = {
+    _key: string;
+    _type: string;
+    x: number;
+    y: number;
+} & HotspotFields;
+export function ImageHotspotArray(props: ArrayOfObjectsInputProps<HotspotItem> & {
+    imageHotspotOptions: ImageHotspotOptions;
+}): JSX.Element;
+export interface ImageHotspotOptions<HotspotFields = {
+    [key: string]: unknown;
+}> {
+    pathRoot?: 'document' | 'parent';
+    imagePath: string;
+    descriptionPath?: string;
+    tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>;
+}
+declare module '@sanity/types' {
+    interface ArrayOptions {
+        imageHotspot?: ImageHotspotOptions;
+    }
+}
+export const imageHotspotArrayPlugin: import("sanity").Plugin<void>;
+
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;ACmEA,qCAAqC,aAAa,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC;IAC3E,KAAK,EAAE,YAAY,aAAa,CAAC,CAAA;IACjC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,aAAa,EAAE,qBAAqB,CAAA;CACrC;ACxCD,wBAAwB,aAAa,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,IAAI;IAClE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,GAAG,aAAa,CAAA;AAEjB,kCACE,KAAK,EAAE,yBAAyB,WAAW,CAAC,GAAG;IAAC,mBAAmB,EAAE,mBAAmB,CAAA;CAAC,eAoJ1F;ACtLD,qCAAqC,aAAa,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC;IAC3E,QAAQ,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,cAAc,oBAAoB,aAAa,CAAC,CAAC,CAAA;CAC5D;AAED,eAAe,eAAe,CAAC;IAC7B,UAAiB,YAAY;QAC3B,YAAY,CAAC,EAAE,mBAAmB,CAAA;KACnC;CACF;AAKD,OAAO,MAAM,sDAoBX,CAAA","sources":["src/src/Feedback.tsx","src/src/Spot.tsx","src/src/ImageHotspotArray.tsx","src/src/index.tsx","src/index.tsx"],"sourcesContent":[null,null,null,null,"import {ImageHotspotArray, type HotspotItem} from './ImageHotspotArray'\nimport React, {ComponentType} from 'react'\nimport {ArrayOfObjectsInputProps, createPlugin} from 'sanity'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n  pathRoot?: 'document' | 'parent'\n  imagePath: string\n  descriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module '@sanity/types' {\n  export interface ArrayOptions {\n    imageHotspot?: ImageHotspotOptions\n  }\n}\n\nexport {ImageHotspotArray}\nexport type {HotspotTooltipProps, HotspotItem}\n\nexport const imageHotspotArrayPlugin = createPlugin({\n  name: 'image-hotspot-array',\n  form: {\n    components: {\n      input: (props) => {\n        if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n          const imageHotspotOptions = props.schemaType.options?.imageHotspot\n          if (imageHotspotOptions) {\n            return (\n              <ImageHotspotArray\n                {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n                imageHotspotOptions={imageHotspotOptions}\n              />\n            )\n          }\n        }\n        return props.renderDefault(props)\n      },\n    },\n  },\n})\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../../"}