sanity-plugin-shopify-assets 1.2.3 → 2.0.1

package/dist/index.esm.js

@@ -1,859 +0,0 @@
-import { useProjectId, useDataset, useClient, PatchEvent, set, unset, DiffFromTo, defineType, defineField, definePlugin } from 'sanity';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { LaunchIcon, ErrorOutlineIcon } from '@sanity/icons';
-import { Card, Box, Text, Flex, Button, Stack, Dialog, Inline, TextInput, Spinner, Grid } from '@sanity/ui';
-import React, { useEffect, useCallback, useRef, useState, useMemo } from 'react';
-import prettyBytes from 'pretty-bytes';
-import prettyMilliseconds from 'pretty-ms';
-import { styled } from 'styled-components';
-import videojs from 'video.js';
-import { concat, defer, BehaviorSubject } from 'rxjs';
-import PhotoAlbum from 'react-photo-album';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { withLatestFrom, debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
-import axios from 'axios';
-const Root = styled.div`
-  overflow: hidden;
-  background-origin: content-box;
-  background-repeat: no-repeat;
-  background-clip: border-box;
-  background-size: cover;
-  background-color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.sanity.color.card.enabled.bg2;
-}};
-  position: relative;
-  outline: none !important;
-  border: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return `1px solid ${theme.sanity.color.card.enabled.border}`;
-}};
-  box-sizing: content-box;
-  user-drag: none;
-
-  &:hover {
-    opacity: 0.85;
-  }
-
-  &:focus,
-  &:active {
-    border: 1px solid var(--input-border-color-focus);
-    box-shadow: inset 0 0 0 3px var(--input-border-color-focus);
-  }
-`;
-const InfoLine = styled(Card)`
-  ${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return `
-    --infoline-fg: ${theme.sanity.color.card.enabled.fg};
-    --infoline-bg: ${theme.sanity.color.card.enabled.bg};
-  `;
-}};
-  user-drag: none;
-  position: absolute;
-  background-color: var(--infoline-bg);
-  top: 0;
-  left: 0;
-  max-width: 65%;
-  overflow-wrap: break-word;
-
-  [data-ui='Text'] {
-    color: var(--infoline-fg);
-  }
-`;
-const DurationLine = styled(Card)`
-  ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return `
-    --durationline-fg: ${theme.sanity.color.card.enabled.bg};
-    --durationline-bg: ${theme.sanity.color.card.enabled.fg};
-  `;
-}};
-  user-drag: none;
-  position: absolute;
-  background-color: var(--durationline-bg);
-  top: 0;
-  right: 0;
-
-  [data-ui='Text'] {
-    color: var(--durationline-fg);
-  }
-`;
-const VideoPlayer = _ref5 => {
-  let {
-    src,
-    kind
-  } = _ref5;
-  const videoNode = React.useRef(null);
-  const player = React.useRef();
-  useEffect(() => {
-    player.current = videojs(videoNode.current ?? "", {
-      sources: [{
-        src
-      }],
-      controls: true
-    });
-    player.current.src({
-      src
-    });
-  }, [src]);
-  const stopPropagation = useCallback(event => {
-    event.stopPropagation();
-  }, []);
-  const className = {
-    player: "video-js vjs-16-9 vjs-big-play-centered",
-    diff: "video-js vjs-layout-tiny vjs-fluid"
-  };
-  const style = {
-    position: "relative"
-  };
-  return /* @__PURE__ */jsxs("div", {
-    children: [/* @__PURE__ */jsx("link", {
-      href: "https://vjs.zencdn.net/7.8.4/video-js.css",
-      rel: "stylesheet"
-    }), /* @__PURE__ */jsx("div", {
-      "data-vjs-player": true,
-      children: /* @__PURE__ */jsx("video", {
-        onClick: stopPropagation,
-        style: kind === "diff" ? style : {},
-        className: className[kind],
-        ref: videoNode
-      })
-    })]
-  });
-};
-const StyledBox = styled(Box)`
-  background-color: ${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.sanity.color?.card?.enabled?.bg2;
-}};
-  border: ${_ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return `1px solid ${theme.sanity?.color?.card?.enabled?.border}`;
-}};
-  display: flex;
-  justify-content: center;
-  margin-bottom: ${_ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.sanity.space[4];
-}};
-  position: relative;
-`;
-const RenderAsset = _ref9 => {
-  let {
-    value,
-    url
-  } = _ref9;
-  switch (value.type) {
-    case "video":
-      return /* @__PURE__ */jsx(VideoPlayer, {
-        src: url,
-        kind: "player"
-      });
-    default:
-      return /* @__PURE__ */jsx(Flex, {
-        justify: "center",
-        children: /* @__PURE__ */jsx("img", {
-          alt: "preview",
-          src: value?.preview?.url,
-          style: {
-            maxWidth: "100%",
-            height: "auto",
-            display: "block",
-            maxHeight: "30vh"
-          }
-        })
-      });
-  }
-};
-const AssetPreview = _ref0 => {
-  let {
-    value
-  } = _ref0;
-  const url = value && value.url;
-  if (!value || !url) {
-    return null;
-  }
-  const {
-    filename,
-    meta
-  } = value;
-  const {
-    fileSize,
-    duration
-  } = meta;
-  return /* @__PURE__ */jsxs(StyledBox, {
-    marginBottom: 2,
-    children: [/* @__PURE__ */jsx(RenderAsset, {
-      value,
-      url
-    }), /* @__PURE__ */jsx(InfoLine, {
-      padding: 2,
-      radius: 2,
-      margin: 2,
-      children: /* @__PURE__ */jsxs(Text, {
-        size: 1,
-        title: `Select ${filename}`,
-        children: [filename, " ", fileSize && `(${prettyBytes(fileSize)})`]
-      })
-    }), duration && /* @__PURE__ */jsx(DurationLine, {
-      padding: 2,
-      radius: 2,
-      margin: 2,
-      children: /* @__PURE__ */jsx(Text, {
-        size: 1,
-        title: `Video duration: ${filename}`,
-        children: prettyMilliseconds(duration, {
-          colonNotation: true,
-          secondsDecimalDigits: 0
-        })
-      })
-    })]
-  });
-};
-const fetchSearch = props => {
-  const {
-    projectId,
-    dataset,
-    shop,
-    query,
-    cursor,
-    resultsPerPage,
-    token
-  } = props;
-  return defer(() => {
-    return axios.get(`https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}&query=${encodeURIComponent(query)}${cursor && `&cursor=${cursor}`}&limit=${resultsPerPage}`, {
-      withCredentials: true,
-      method: "GET",
-      headers: token ? {
-        Authorization: `Bearer ${token}`
-      } : {}
-    });
-  }).pipe(map(result => result.data));
-};
-const fetchList = props => {
-  const {
-    projectId,
-    dataset,
-    shop,
-    cursor,
-    resultsPerPage,
-    token
-  } = props;
-  return defer(() => axios.get(`https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}${cursor && `&cursor=${cursor}`}&limit=${resultsPerPage}`, {
-    withCredentials: true,
-    method: "GET",
-    headers: token ? {
-      Authorization: `Bearer ${token}`
-    } : {}
-  })).pipe(map(result => result.data));
-};
-const search = props => {
-  const {
-    projectId,
-    dataset,
-    shop,
-    query,
-    cursor,
-    resultsPerPage,
-    token
-  } = props;
-  return concat(query.pipe(withLatestFrom(cursor), debounceTime(500), distinctUntilChanged(), switchMap(_ref1 => {
-    let [q, c] = _ref1;
-    if (q) {
-      return fetchSearch({
-        projectId,
-        dataset,
-        shop,
-        query: q,
-        cursor: c,
-        resultsPerPage,
-        token
-      }).pipe(distinctUntilChanged());
-    }
-    return fetchList({
-      projectId,
-      dataset,
-      shop,
-      cursor: c,
-      resultsPerPage,
-      token
-    });
-  })));
-};
-const DialogHeader = props => {
-  const {
-    title,
-    shopifyDomain
-  } = props;
-  const handleOpenInNewTab = useCallback(() => {
-    window.open(`https://${shopifyDomain}/admin/content/files`, "_blank");
-  }, [shopifyDomain]);
-  return /* @__PURE__ */jsxs(Flex, {
-    align: "center",
-    children: [title, /* @__PURE__ */jsx("input", {
-      style: {
-        opacity: 0
-      },
-      tabIndex: -1,
-      type: "button"
-    }), /* @__PURE__ */jsx(Box, {
-      style: {
-        position: "absolute",
-        right: "-1.5em"
-      },
-      children: /* @__PURE__ */jsx(Box, {
-        className: "button-large",
-        children: /* @__PURE__ */jsx(Button, {
-          fontSize: 1,
-          icon: LaunchIcon,
-          mode: "bleed",
-          onClick: handleOpenInNewTab,
-          text: "Add New"
-        })
-      })
-    })]
-  });
-};
-const extractName = name => name?.split("/")?.pop()?.split("?")[0] ?? "";
-function File(props) {
-  const {
-    onClick,
-    data,
-    width,
-    height
-  } = props;
-  const rootElm = useRef(null);
-  const {
-    preview,
-    meta
-  } = data;
-  const filename = extractName(data.url);
-  const handleClick = useCallback(() => {
-    onClick({
-      ...data,
-      filename
-    });
-  }, [onClick, data, filename]);
-  return /* @__PURE__ */jsxs(Root, {
-    ref: rootElm,
-    title: `${filename}`,
-    tabIndex: 0,
-    style: {
-      width: `${width}px`,
-      height: `${height}px`,
-      backgroundImage: `url("${preview?.url}")`
-    },
-    onClick: handleClick,
-    children: [/* @__PURE__ */jsx(InfoLine, {
-      padding: 2,
-      radius: 2,
-      margin: 2,
-      children: /* @__PURE__ */jsxs(Text, {
-        size: 1,
-        title: `Select ${filename}`,
-        children: [filename, " ", meta.fileSize && `(${prettyBytes(meta.fileSize)})`]
-      })
-    }), meta.duration && /* @__PURE__ */jsx(DurationLine, {
-      padding: 2,
-      radius: 2,
-      margin: 2,
-      children: /* @__PURE__ */jsx(Text, {
-        size: 1,
-        title: `Video duration: ${filename}`,
-        children: prettyMilliseconds(meta.duration, {
-          colonNotation: true,
-          secondsDecimalDigits: 0
-        })
-      })
-    })]
-  });
-}
-const Search = styled(Stack)`
-  position: sticky;
-  top: 0;
-  z-index: 1;
-`;
-styled.div`
-  overflow-y: auto;
-  max-height: 80vh;
-`;
-const RESULTS_PER_PAGE = 42;
-const PHOTO_SPACING = 2;
-const PHOTO_PADDING = 1;
-function ShopifyAssetPicker(props) {
-  const {
-    isOpen,
-    onClose,
-    shopifyDomain,
-    onChange,
-    schemaType,
-    value
-  } = props;
-  const projectId = useProjectId();
-  const dataset = useDataset();
-  const client = useClient({
-    apiVersion: "2021-06-07"
-  });
-  const token = client.config().token;
-  const [error, setError] = useState("");
-  const [query, setQuery] = useState("");
-  const [searchResults, setSearchResults] = useState([]);
-  const [pageInfo, setPageInfo] = useState();
-  const [isLoading, setIsLoading] = useState(true);
-  const searchSubject$ = useMemo(() => new BehaviorSubject(""), []);
-  const cursorSubject$ = useMemo(() => new BehaviorSubject(""), []);
-  useEffect(() => {
-    if (!shopifyDomain) setError("Please configure your Shopify domain in the plugin config");
-  }, [shopifyDomain]);
-  useEffect(() => {
-    const searchSubscription = search({
-      projectId,
-      dataset,
-      shop: shopifyDomain,
-      query: searchSubject$,
-      cursor: cursorSubject$,
-      resultsPerPage: RESULTS_PER_PAGE,
-      token
-    }).subscribe({
-      next: results => {
-        setSearchResults(prevResults => [...prevResults, ...results.assets]);
-        setPageInfo(results.pageInfo);
-        setIsLoading(false);
-      },
-      error: err => {
-        setError(`${err.response?.data?.message || err.message || "An error occurred"} - check plugin configuration`);
-      }
-    });
-    return () => searchSubscription.unsubscribe();
-  }, [searchSubject$, cursorSubject$, shopifyDomain, projectId, dataset, token]);
-  const handleSearchTermChanged = useCallback(event => {
-    const newQuery = event.currentTarget.value;
-    setQuery(newQuery);
-    setSearchResults([]);
-    setPageInfo(void 0);
-    setIsLoading(true);
-    cursorSubject$.next("");
-    searchSubject$.next(newQuery);
-  }, [cursorSubject$, searchSubject$]);
-  const handleScollerLoadMore = useCallback(() => {
-    setIsLoading(true);
-    if (pageInfo) cursorSubject$.next(pageInfo.cursor);
-    searchSubject$.next(query);
-  }, [cursorSubject$, pageInfo, searchSubject$, query]);
-  const handleSelect = useCallback(file => {
-    file._key = value?._key;
-    file._type = schemaType.name;
-    onChange(PatchEvent.from([set(file)]));
-    onClose();
-  }, [onChange, onClose, schemaType.name, value?._key]);
-  const renderFile = useCallback(fileProps => {
-    const {
-      photo,
-      layout
-    } = fileProps;
-    return /* @__PURE__ */jsx(File, {
-      onClick: handleSelect,
-      data: photo.data,
-      width: layout.width,
-      height: layout.height
-    });
-  }, [handleSelect]);
-  const handleWidth = useCallback(width => {
-    if (width < 300) return 150;else if (width < 600) return 200;
-    return 300;
-  }, []);
-  return /* @__PURE__ */jsx(Dialog, {
-    id: "shopify-asset-source",
-    header: /* @__PURE__ */jsx(DialogHeader, {
-      title: "Shopify Assets",
-      shopifyDomain
-    }),
-    onClose,
-    open: isOpen,
-    width: 4,
-    children: /* @__PURE__ */jsx(Stack, {
-      space: 3,
-      padding: 4,
-      children: error ? /* @__PURE__ */jsx(Card, {
-        overflow: "hidden",
-        padding: 4,
-        radius: 2,
-        shadow: 1,
-        tone: "critical",
-        children: /* @__PURE__ */jsxs(Flex, {
-          align: "center",
-          gap: 3,
-          children: [/* @__PURE__ */jsx(Text, {
-            size: 2,
-            children: /* @__PURE__ */jsx(ErrorOutlineIcon, {})
-          }), /* @__PURE__ */jsx(Inline, {
-            space: 2,
-            children: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              children: error
-            })
-          })]
-        })
-      }) : /* @__PURE__ */jsxs(Fragment, {
-        children: [/* @__PURE__ */jsx(Card, {
-          children: /* @__PURE__ */jsxs(Search, {
-            space: 3,
-            children: [/* @__PURE__ */jsx(Text, {
-              size: 1,
-              weight: "semibold",
-              children: "Search Shopify for assets"
-            }), /* @__PURE__ */jsx(TextInput, {
-              label: "Search Images",
-              placeholder: "filename.jpg",
-              value: query,
-              onChange: handleSearchTermChanged
-            })]
-          })
-        }), !isLoading && searchResults.length === 0 && /* @__PURE__ */jsx(Text, {
-          size: 1,
-          muted: true,
-          children: "No results found"
-        }), /* @__PURE__ */jsx(InfiniteScroll, {
-          dataLength: searchResults.length,
-          next: handleScollerLoadMore,
-          hasMore: pageInfo ? pageInfo?.hasNextPage : true,
-          scrollThreshold: 0.99,
-          height: "60vh",
-          loader: /* @__PURE__ */jsx(Flex, {
-            align: "center",
-            justify: "center",
-            padding: 3,
-            children: /* @__PURE__ */jsx(Spinner, {
-              muted: true
-            })
-          }),
-          endMessage: /* @__PURE__ */jsx(Flex, {
-            align: "center",
-            justify: "center",
-            padding: 3,
-            children: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              muted: true,
-              children: "No more results"
-            })
-          }),
-          children: searchResults && /* @__PURE__ */jsx(PhotoAlbum, {
-            layout: "rows",
-            spacing: PHOTO_SPACING,
-            padding: PHOTO_PADDING,
-            targetRowHeight: handleWidth,
-            photos: searchResults.map(file => ({
-              src: file?.preview?.url,
-              width: file?.preview?.width || 2048,
-              height: file?.preview?.height || 2048,
-              key: file.id,
-              data: file
-            })),
-            renderPhoto: renderFile,
-            componentsProps: {
-              containerProps: {
-                style: {
-                  marginBottom: `${PHOTO_SPACING}px`
-                }
-              }
-            }
-          })
-        })]
-      })
-    })
-  });
-}
-const ShopifyIcon = () => {
-  return /* @__PURE__ */jsxs("svg", {
-    width: "18",
-    height: "20",
-    viewBox: "0 0 18 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/* @__PURE__ */jsx("path", {
-      d: "M15.3269 3.85113C15.3132 3.75015 15.2258 3.69411 15.1531 3.688C15.081 3.6819 13.6693 3.66026 13.6693 3.66026C13.6693 3.66026 12.4887 2.50392 12.3722 2.38628C12.2555 2.26865 12.0277 2.30417 11.9392 2.3308C11.9381 2.33135 11.7175 2.40016 11.3461 2.51612C11.2839 2.31304 11.1927 2.06335 11.0622 1.81255C10.6419 1.00356 10.0263 0.575752 9.2825 0.574642C9.28142 0.574642 9.28092 0.574642 9.27975 0.574642C9.22808 0.574642 9.17692 0.579636 9.12517 0.584074C9.10317 0.557441 9.08117 0.531362 9.05808 0.505838C8.73408 0.156272 8.31869 -0.0140727 7.82082 0.000908712C6.86027 0.0286521 5.90357 0.72834 5.12787 1.97124C4.58212 2.84572 4.16677 3.94435 4.04904 4.79497C2.94601 5.13953 2.17471 5.38035 2.15766 5.3859C1.60091 5.56235 1.58331 5.57955 1.51069 6.10889C1.45677 6.50895 0 17.8704 0 17.8704L12.2082 20L17.4994 18.6733C17.4994 18.6733 15.3407 3.95212 15.3269 3.85113ZM10.7349 2.707C10.4537 2.79467 10.1342 2.89454 9.78758 3.00274C9.78042 2.51224 9.72267 1.82975 9.496 1.23992C10.2249 1.3792 10.5836 2.21095 10.7349 2.707ZM9.14883 3.20249C8.509 3.40225 7.81091 3.62031 7.11058 3.83892C7.30753 3.0782 7.68107 2.32081 8.13989 1.8242C8.31044 1.63943 8.54917 1.43358 8.832 1.31594C9.09767 1.87525 9.15542 2.66705 9.14883 3.20249ZM7.84007 0.645665C8.06562 0.640671 8.25542 0.690609 8.41775 0.798253C8.15805 0.9342 7.90718 1.12951 7.67172 1.38419C7.06162 2.04448 6.594 3.06932 6.4075 4.0581C5.826 4.23954 5.25715 4.41766 4.73342 4.58078C5.06405 3.02438 6.35743 0.688944 7.84007 0.645665Z",
-      fill: "#95BF47"
-    }), /* @__PURE__ */jsx("path", {
-      d: "M9.276 6.43238L8.66142 8.75117C8.66142 8.75117 7.97598 8.43658 7.16342 8.48817C5.97181 8.56417 5.95916 9.32217 5.97126 9.51242C6.03618 10.5495 8.74125 10.7759 8.89308 13.2051C9.01242 15.1161 7.88796 16.4233 6.26779 16.5265C4.32303 16.6502 3.25246 15.4933 3.25246 15.4933L3.66452 13.7256C3.66452 13.7256 4.74224 14.5457 5.60487 14.4907C6.16821 14.4547 6.36957 13.9924 6.34921 13.6657C6.26448 12.3128 4.06172 12.3927 3.92253 10.17C3.80536 8.29951 5.02337 6.40408 7.71081 6.23318C8.74617 6.16604 9.276 6.43238 9.276 6.43238Z",
-      fill: "white"
-    }), /* @__PURE__ */jsx("path", {
-      d: "M15.1536 3.68853C15.0815 3.68243 13.6698 3.66078 13.6698 3.66078C13.6698 3.66078 12.4893 2.50444 12.3726 2.38681C12.3292 2.34298 12.2703 2.32023 12.2087 2.31079L12.2093 19.9994L17.4999 18.6733C17.4999 18.6733 15.3412 3.95264 15.3274 3.85166C15.3137 3.75068 15.2257 3.69463 15.1536 3.68853Z",
-      fill: "#5E8E3E"
-    })]
-  });
-};
-function ShopifyAssetInput(props) {
-  const {
-    onChange,
-    readOnly,
-    value,
-    schemaType
-  } = props;
-  const {
-    options
-  } = schemaType;
-  const {
-    shopifyDomain
-  } = options;
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const removeValue = useCallback(() => {
-    onChange(PatchEvent.from([unset()]));
-  }, [onChange]);
-  const onOpen = useCallback(() => {
-    setDialogOpen(true);
-  }, [setDialogOpen]);
-  const onClose = useCallback(() => {
-    setDialogOpen(false);
-  }, [setDialogOpen]);
-  if (!shopifyDomain) {
-    return /* @__PURE__ */jsx(Card, {
-      overflow: "hidden",
-      padding: 4,
-      radius: 2,
-      shadow: 1,
-      tone: "critical",
-      children: /* @__PURE__ */jsxs(Flex, {
-        align: "center",
-        gap: 3,
-        children: [/* @__PURE__ */jsx(Text, {
-          size: 2,
-          children: /* @__PURE__ */jsx(ErrorOutlineIcon, {})
-        }), /* @__PURE__ */jsx(Inline, {
-          space: 2,
-          children: /* @__PURE__ */jsx(Text, {
-            size: 1,
-            children: "You need to configure your *.myshopify.com domain in the plugin / field options to enable Shopify Assets."
-          })
-        })]
-      })
-    });
-  }
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [dialogOpen && /* @__PURE__ */jsx(ShopifyAssetPicker, {
-      ...props,
-      shopifyDomain,
-      isOpen: dialogOpen,
-      onClose,
-      value
-    }), /* @__PURE__ */jsxs(Stack, {
-      children: [/* @__PURE__ */jsx(AssetPreview, {
-        value
-      }), /* @__PURE__ */jsxs(Grid, {
-        gap: 1,
-        style: {
-          gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))"
-        },
-        children: [/* @__PURE__ */jsx(Button, {
-          disabled: readOnly,
-          mode: "ghost",
-          icon: ShopifyIcon,
-          title: "Select an asset",
-          onClick: onOpen,
-          text: "Select\u2026"
-        }), /* @__PURE__ */jsx(Button, {
-          disabled: readOnly || !value,
-          tone: "critical",
-          mode: "ghost",
-          title: "Remove asset",
-          text: "Remove",
-          onClick: removeValue
-        })]
-      })]
-    })]
-  });
-}
-const CloudinaryDiffPreview = _ref10 => {
-  let {
-    value
-  } = _ref10;
-  if (!value) {
-    return null;
-  }
-  if (value?.preview?.url) {
-    return /* @__PURE__ */jsx(Flex, {
-      justify: "center",
-      align: "center",
-      height: "fill",
-      width: "fill",
-      children: /* @__PURE__ */jsxs(Stack, {
-        space: 2,
-        children: [/* @__PURE__ */jsx("img", {
-          alt: "preview",
-          src: value?.preview?.url,
-          style: {
-            objectFit: "contain",
-            margin: "auto",
-            maxWidth: "100%",
-            maxHeight: "100%"
-          }
-        }), /* @__PURE__ */jsx(Text, {
-          size: 1,
-          children: value.type.charAt(0).toUpperCase() + value.type.slice(1)
-        })]
-      })
-    });
-  }
-  return /* @__PURE__ */jsx(Flex, {
-    justify: "center",
-    align: "center",
-    height: "fill",
-    width: "fill",
-    children: /* @__PURE__ */jsx("div", {
-      children: "(no image)"
-    })
-  });
-};
-const AssetDiff = _ref11 => {
-  let {
-    diff,
-    schemaType
-  } = _ref11;
-  return /* @__PURE__ */jsx(DiffFromTo, {
-    diff,
-    schemaType,
-    previewComponent: CloudinaryDiffPreview,
-    layout: "grid"
-  });
-};
-const shopifyAssetSchema = config => {
-  const {
-    shopifyDomain
-  } = config;
-  return defineType({
-    type: "object",
-    name: "shopify.asset",
-    title: "Shopify Asset",
-    options: {
-      shopifyDomain
-    },
-    fields: [defineField({
-      type: "string",
-      name: "filename",
-      title: "Filename"
-    }), defineField({
-      type: "string",
-      name: "id",
-      title: "ID"
-    }), defineField({
-      type: "shopify.assetMetadata",
-      name: "meta",
-      title: "Metadata"
-    }), defineField({
-      type: "shopify.assetPreview",
-      name: "preview",
-      title: "Preview"
-    }), defineField({
-      type: "string",
-      name: "type",
-      title: "Type"
-    }), defineField({
-      type: "url",
-      name: "url",
-      title: "URL"
-    })],
-    ...{
-      components: {
-        input: ShopifyAssetInput,
-        diff: AssetDiff,
-        preview: AssetPreview
-      }
-    },
-    preview: {
-      select: {
-        meta: "meta",
-        preview: "preview",
-        url: "url",
-        filename: "filename",
-        type: "type"
-      },
-      prepare(_ref12) {
-        let {
-          url,
-          meta,
-          preview,
-          filename,
-          type
-        } = _ref12;
-        return {
-          title: filename,
-          subtitle: type,
-          value: {
-            url,
-            meta,
-            preview,
-            filename
-          }
-        };
-      }
-    }
-  });
-};
-const shopifyAssetPreviewSchema = defineType({
-  type: "object",
-  name: "shopify.assetPreview",
-  title: "Asset preview",
-  fields: [defineField({
-    type: "number",
-    name: "height",
-    title: "Height"
-  }), defineField({
-    type: "number",
-    name: "width",
-    title: "Width"
-  }), defineField({
-    type: "url",
-    name: "url",
-    title: "URL"
-  })]
-});
-const shopifyAssetMetadataSchema = defineType({
-  type: "object",
-  name: "shopify.assetMetadata",
-  title: "Asset metadata",
-  fields: [defineField({
-    type: "string",
-    name: "alt",
-    title: "Alternative text"
-  }), defineField({
-    type: "number",
-    name: "duration",
-    title: "Duration"
-  }), defineField({
-    type: "number",
-    name: "fileSize",
-    title: "File size"
-  }), defineField({
-    type: "number",
-    name: "height",
-    title: "Height"
-  }), defineField({
-    type: "number",
-    name: "width",
-    title: "Width"
-  })]
-});
-const shopifyAssets = definePlugin(config => {
-  return {
-    name: "shopify-asset-schema",
-    schema: {
-      types: [shopifyAssetPreviewSchema, shopifyAssetMetadataSchema, shopifyAssetSchema(config)]
-    }
-  };
-});
-export { shopifyAssets };
-//# sourceMappingURL=index.esm.js.map