sanity-plugin-utils 1.6.5 → 1.6.7

package/lib/index.js

@@ -1,997 +1,658 @@
-import React, { useMemo, useState, useRef, useEffect } from 'react';
-import { useClient, useDocumentStore, useWorkspace, UserAvatar } from 'sanity';
-import isEqual from 'react-fast-compare';
-import { distinctUntilChanged, catchError } from 'rxjs/operators';
-import { usePaneRouter } from 'sanity/structure';
-import { RouterContext } from 'sanity/router';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Card, Flex, Box, Stack, Text, Menu, MenuItem, TextInput, Badge } from '@sanity/ui';
-import styled, { css } from 'styled-components';
-import { RemoveCircleIcon, AddCircleIcon, RestoreIcon } from '@sanity/icons';
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, Flex, Box, Stack, Text, Menu, MenuItem, TextInput, Badge } from "@sanity/ui";
+import { styled, css } from "styled-components";
+import { RemoveCircleIcon, AddCircleIcon, RestoreIcon } from "@sanity/icons";
+import { useState, useRef, useMemo, useEffect, useContext, useCallback } from "react";
+import { UserAvatar, useClient, useDocumentStore, useWorkspace } from "sanity";
+import isEqual from "react-fast-compare";
+import { distinctUntilChanged, catchError } from "rxjs/operators";
+import { RouterContext } from "sanity/router";
+import { usePaneRouter } from "sanity/structure";
+var __defProp$3 = Object.defineProperty, __getOwnPropSymbols$3 = Object.getOwnPropertySymbols, __hasOwnProp$3 = Object.prototype.hasOwnProperty, __propIsEnum$3 = Object.prototype.propertyIsEnumerable, __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$3.call(b, prop) && __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b))
+      __propIsEnum$3.call(b, prop) && __defNormalProp$3(a, prop, b[prop]);
+  return a;
+};
+const DEFAULT_PROPS = {
+  tone: "primary"
+};
+function Feedback(props) {
+  const { title, description, icon, tone, children } = __spreadValues$3(__spreadValues$3({}, DEFAULT_PROPS), props);
+  return /* @__PURE__ */ jsx(Card, { tone, padding: 4, radius: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { children: [
+    icon ? "display icon" : null,
+    children || /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+      title ? /* @__PURE__ */ jsx(Text, { weight: "semibold", children: title }) : null,
+      description ? /* @__PURE__ */ jsx(Text, { size: 2, children: description }) : null
+    ] }) })
+  ] }) });
 }
-var builder = {};
-var urlForImage = {};
-var parseAssetId$1 = {};
-Object.defineProperty(parseAssetId$1, "__esModule", {
-  value: true
-});
-var example = 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg';
-function parseAssetId(ref) {
-  var _a = ref.split('-'),
-    id = _a[1],
-    dimensionString = _a[2],
-    format = _a[3];
-  if (!id || !dimensionString || !format) {
-    throw new Error("Malformed asset _ref '".concat(ref, "'. Expected an id like \"").concat(example, "\"."));
-  }
-  var _b = dimensionString.split('x'),
-    imgWidthStr = _b[0],
-    imgHeightStr = _b[1];
-  var width = +imgWidthStr;
-  var height = +imgHeightStr;
-  var isValidAssetId = isFinite(width) && isFinite(height);
-  if (!isValidAssetId) {
-    throw new Error("Malformed asset _ref '".concat(ref, "'. Expected an id like \"").concat(example, "\"."));
-  }
-  return {
-    id: id,
-    width: width,
-    height: height,
-    format: format
-  };
+var __defProp$2 = Object.defineProperty, __defProps$1 = Object.defineProperties, __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$2 = Object.getOwnPropertySymbols, __hasOwnProp$2 = Object.prototype.hasOwnProperty, __propIsEnum$2 = Object.prototype.propertyIsEnumerable, __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$2.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b))
+      __propIsEnum$2.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
+  return a;
+}, __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b)), __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    __hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source))
+      exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop) && (target[prop] = source[prop]);
+  return target;
+};
+const TableWrapper = (props = {}) => /* @__PURE__ */ jsx(Card, __spreadValues$2({ as: "table" }, props)), StyledTable = styled(TableWrapper)(
+  () => css`
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+
+    &:not([hidden]) {
+      display: table;
+      border-collapse: collapse;
+    }
+  `
+);
+function Table(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledTable, __spreadProps$1(__spreadValues$2({}, rest), { children }));
 }
-parseAssetId$1.default = parseAssetId;
-var parseSource$1 = {};
-var __assign$1 = commonjsGlobal && commonjsGlobal.__assign || function () {
-  __assign$1 = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+const RowWrapper = (props = {}) => /* @__PURE__ */ jsx(Card, __spreadValues$2({ as: "tr" }, props)), StyledRow = styled(RowWrapper)(
+  () => css`
+    display: table-row;
+
+    &:not([hidden]) {
+      display: table-row;
     }
-    return t;
-  };
-  return __assign$1.apply(this, arguments);
-};
-Object.defineProperty(parseSource$1, "__esModule", {
-  value: true
-});
-var isRef = function (src) {
-  var source = src;
-  return source ? typeof source._ref === 'string' : false;
-};
-var isAsset = function (src) {
-  var source = src;
-  return source ? typeof source._id === 'string' : false;
+  `
+);
+function Row(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledRow, __spreadProps$1(__spreadValues$2({}, rest), { children }));
+}
+const CellWrapper = (props = {}) => /* @__PURE__ */ jsx(Card, __spreadValues$2({ as: "td" }, props)), StyledCell = styled(CellWrapper)(
+  () => css`
+    display: table-cell;
+
+    &:not([hidden]) {
+      display: table-cell;
+    }
+  `
+);
+function Cell(props) {
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledCell, __spreadProps$1(__spreadValues$2({}, rest), { children }));
+}
+var __defProp$1 = Object.defineProperty, __getOwnPropSymbols$1 = Object.getOwnPropertySymbols, __hasOwnProp$1 = Object.prototype.hasOwnProperty, __propIsEnum$1 = Object.prototype.propertyIsEnumerable, __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$1.call(b, prop) && __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b))
+      __propIsEnum$1.call(b, prop) && __defNormalProp$1(a, prop, b[prop]);
+  return a;
 };
-var isAssetStub = function (src) {
-  var source = src;
-  return source && source.asset ? typeof source.asset.url === 'string' : false;
+function searchUsers(users, searchString) {
+  return users.filter((user) => !!((user.displayName || "").toLowerCase().startsWith(searchString) || (user.givenName || "").toLowerCase().startsWith(searchString) || (user.middleName || "").toLowerCase().startsWith(searchString) || (user.familyName || "").toLowerCase().startsWith(searchString)));
+}
+const LABELS = {
+  addMe: "Assign myself",
+  removeMe: "Unassign myself",
+  clear: "Clear assignees",
+  searchPlaceholder: "Search users",
+  notFound: "No users found"
 };
-// Convert an asset-id, asset or image to an image record suitable for processing
-// eslint-disable-next-line complexity
-function parseSource(source) {
-  if (!source) {
-    return null;
-  }
-  var image;
-  if (typeof source === 'string' && isUrl(source)) {
-    // Someone passed an existing image url?
-    image = {
-      asset: {
-        _ref: urlToId(source)
+function UserSelectMenu(props) {
+  const {
+    value = [],
+    userList = [],
+    onAdd,
+    onRemove,
+    onClear,
+    style = {}
+  } = props, labels = props != null && props.labels ? __spreadValues$1(__spreadValues$1({}, LABELS), props.labels) : LABELS, [searchString, setSearchString] = useState(""), searchResults = searchUsers(userList || [], searchString), me = userList.find((u) => u.isCurrentUser), meAssigned = me && value.includes(me.id), input = useRef(null), handleSearchChange = (event) => {
+    setSearchString(event.target.value);
+  }, handleSelect = (isChecked, user) => {
+    isChecked ? onRemove && onRemove(user.id) : onAdd && onAdd(user.id);
+  }, handleAssignMyself = () => {
+    me && onAdd && onAdd(me.id);
+  }, handleUnassignMyself = () => {
+    me && onRemove && onRemove(me.id);
+  }, handleClearAssigneesClick = () => {
+    onClear && onClear();
+  };
+  return /* @__PURE__ */ jsxs(Menu, { style, children: [
+    meAssigned ? /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        tone: "caution",
+        disabled: !me,
+        onClick: handleUnassignMyself,
+        icon: RemoveCircleIcon,
+        text: labels.removeMe
       }
-    };
-  } else if (typeof source === 'string') {
-    // Just an asset id
-    image = {
-      asset: {
-        _ref: source
+    ) : /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        tone: "positive",
+        onClick: handleAssignMyself,
+        icon: AddCircleIcon,
+        text: labels.addMe
       }
-    };
-  } else if (isRef(source)) {
-    // We just got passed an asset directly
-    image = {
-      asset: source
-    };
-  } else if (isAsset(source)) {
-    // If we were passed an image asset document
-    image = {
-      asset: {
-        _ref: source._id || ''
+    ),
+    /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        tone: "critical",
+        disabled: value.length === 0,
+        onClick: handleClearAssigneesClick,
+        icon: RestoreIcon,
+        text: labels.clear
       }
-    };
-  } else if (isAssetStub(source)) {
-    // If we were passed a partial asset (`url`, but no `_id`)
-    image = {
-      asset: {
-        _ref: urlToId(source.asset.url)
+    ),
+    /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        ref: input,
+        onChange: handleSearchChange,
+        placeholder: labels.searchPlaceholder,
+        value: searchString
       }
-    };
-  } else if (typeof source.asset === 'object') {
-    // Probably an actual image with materialized asset
-    image = __assign$1({}, source);
-  } else {
-    // We got something that does not look like an image, or it is an image
-    // that currently isn't sporting an asset.
-    return null;
-  }
-  var img = source;
-  if (img.crop) {
-    image.crop = img.crop;
-  }
-  if (img.hotspot) {
-    image.hotspot = img.hotspot;
-  }
-  return applyDefaults(image);
+    ) }),
+    searchString && (searchResults == null ? void 0 : searchResults.length) === 0 && /* @__PURE__ */ jsx(MenuItem, { disabled: !0, text: labels.notFound }),
+    searchResults && searchResults.map((user) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        pressed: value.includes(user.id),
+        onClick: () => handleSelect(value.indexOf(user.id) > -1, user),
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+          /* @__PURE__ */ jsx(UserAvatar, { user, size: 1 }),
+          /* @__PURE__ */ jsx(Box, { paddingX: 2, flex: 1, children: /* @__PURE__ */ jsx(Text, { children: user.displayName }) }),
+          user.isCurrentUser && /* @__PURE__ */ jsx(Badge, { fontSize: 1, tone: "positive", mode: "outline", children: "Me" })
+        ] })
+      },
+      user.id
+    ))
+  ] });
 }
-parseSource$1.default = parseSource;
-function isUrl(url) {
-  return /^https?:\/\//.test("".concat(url));
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
 }
-function urlToId(url) {
-  var parts = url.split('/').slice(-1);
-  return "image-".concat(parts[0]).replace(/\.([a-z]+)$/, '-$1');
+var builder = {}, urlForImage = {}, parseAssetId = {}, hasRequiredParseAssetId;
+function requireParseAssetId() {
+  if (hasRequiredParseAssetId) return parseAssetId;
+  hasRequiredParseAssetId = 1, Object.defineProperty(parseAssetId, "__esModule", { value: !0 });
+  var example = "image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg";
+  function parseAssetId$1(ref) {
+    var _a = ref.split("-"), id = _a[1], dimensionString = _a[2], format = _a[3];
+    if (!id || !dimensionString || !format)
+      throw new Error("Malformed asset _ref '".concat(ref, `'. Expected an id like "`).concat(example, '".'));
+    var _b = dimensionString.split("x"), imgWidthStr = _b[0], imgHeightStr = _b[1], width = +imgWidthStr, height = +imgHeightStr, isValidAssetId = isFinite(width) && isFinite(height);
+    if (!isValidAssetId)
+      throw new Error("Malformed asset _ref '".concat(ref, `'. Expected an id like "`).concat(example, '".'));
+    return { id, width, height, format };
+  }
+  return parseAssetId.default = parseAssetId$1, parseAssetId;
 }
-// Mock crop and hotspot if image lacks it
-function applyDefaults(image) {
-  if (image.crop && image.hotspot) {
-    return image;
+var parseSource = {}, hasRequiredParseSource;
+function requireParseSource() {
+  if (hasRequiredParseSource) return parseSource;
+  hasRequiredParseSource = 1;
+  var __assign = parseSource && parseSource.__assign || function() {
+    return __assign = Object.assign || function(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
+      }
+      return t;
+    }, __assign.apply(this, arguments);
+  };
+  Object.defineProperty(parseSource, "__esModule", { value: !0 });
+  var isRef = function(src) {
+    var source = src;
+    return source ? typeof source._ref == "string" : !1;
+  }, isAsset = function(src) {
+    var source = src;
+    return source ? typeof source._id == "string" : !1;
+  }, isAssetStub = function(src) {
+    var source = src;
+    return source && source.asset ? typeof source.asset.url == "string" : !1;
+  };
+  function parseSource$1(source) {
+    if (!source)
+      return null;
+    var image;
+    if (typeof source == "string" && isUrl(source))
+      image = {
+        asset: { _ref: urlToId(source) }
+      };
+    else if (typeof source == "string")
+      image = {
+        asset: { _ref: source }
+      };
+    else if (isRef(source))
+      image = {
+        asset: source
+      };
+    else if (isAsset(source))
+      image = {
+        asset: {
+          _ref: source._id || ""
+        }
+      };
+    else if (isAssetStub(source))
+      image = {
+        asset: {
+          _ref: urlToId(source.asset.url)
+        }
+      };
+    else if (typeof source.asset == "object")
+      image = __assign({}, source);
+    else
+      return null;
+    var img = source;
+    return img.crop && (image.crop = img.crop), img.hotspot && (image.hotspot = img.hotspot), applyDefaults(image);
   }
-  // We need to pad in default values for crop or hotspot
-  var result = __assign$1({}, image);
-  if (!result.crop) {
-    result.crop = {
+  parseSource.default = parseSource$1;
+  function isUrl(url) {
+    return /^https?:\/\//.test("".concat(url));
+  }
+  function urlToId(url) {
+    var parts = url.split("/").slice(-1);
+    return "image-".concat(parts[0]).replace(/\.([a-z]+)$/, "-$1");
+  }
+  function applyDefaults(image) {
+    if (image.crop && image.hotspot)
+      return image;
+    var result = __assign({}, image);
+    return result.crop || (result.crop = {
       left: 0,
       top: 0,
       bottom: 0,
       right: 0
-    };
-  }
-  if (!result.hotspot) {
-    result.hotspot = {
+    }), result.hotspot || (result.hotspot = {
       x: 0.5,
       y: 0.5,
-      height: 1.0,
-      width: 1.0
-    };
+      height: 1,
+      width: 1
+    }), result;
   }
-  return result;
+  return parseSource;
 }
-(function (exports) {
-  var __assign = commonjsGlobal && commonjsGlobal.__assign || function () {
-    __assign = Object.assign || function (t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign.apply(this, arguments);
-  };
-  var __importDefault = commonjsGlobal && commonjsGlobal.__importDefault || function (mod) {
-    return mod && mod.__esModule ? mod : {
-      "default": mod
-    };
-  };
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.parseSource = exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = void 0;
-  var parseAssetId_1 = __importDefault(parseAssetId$1);
-  var parseSource_1 = __importDefault(parseSource$1);
-  exports.parseSource = parseSource_1.default;
-  exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = [['width', 'w'], ['height', 'h'], ['format', 'fm'], ['download', 'dl'], ['blur', 'blur'], ['sharpen', 'sharp'], ['invert', 'invert'], ['orientation', 'or'], ['minHeight', 'min-h'], ['maxHeight', 'max-h'], ['minWidth', 'min-w'], ['maxWidth', 'max-w'], ['quality', 'q'], ['fit', 'fit'], ['crop', 'crop'], ['saturation', 'sat'], ['auto', 'auto'], ['dpr', 'dpr'], ['pad', 'pad']];
-  function urlForImage(options) {
-    var spec = __assign({}, options || {});
-    var source = spec.source;
-    delete spec.source;
-    var image = (0, parseSource_1.default)(source);
-    if (!image) {
-      throw new Error("Unable to resolve image URL from source (".concat(JSON.stringify(source), ")"));
-    }
-    var id = image.asset._ref || image.asset._id || '';
-    var asset = (0, parseAssetId_1.default)(id);
-    // Compute crop rect in terms of pixel coordinates in the raw source image
-    var cropLeft = Math.round(image.crop.left * asset.width);
-    var cropTop = Math.round(image.crop.top * asset.height);
-    var crop = {
-      left: cropLeft,
-      top: cropTop,
-      width: Math.round(asset.width - image.crop.right * asset.width - cropLeft),
-      height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
+var hasRequiredUrlForImage;
+function requireUrlForImage() {
+  return hasRequiredUrlForImage || (hasRequiredUrlForImage = 1, function(exports) {
+    var __assign = urlForImage && urlForImage.__assign || function() {
+      return __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
+        }
+        return t;
+      }, __assign.apply(this, arguments);
+    }, __importDefault = urlForImage && urlForImage.__importDefault || function(mod) {
+      return mod && mod.__esModule ? mod : { default: mod };
     };
-    // Compute hot spot rect in terms of pixel coordinates
-    var hotSpotVerticalRadius = image.hotspot.height * asset.height / 2;
-    var hotSpotHorizontalRadius = image.hotspot.width * asset.width / 2;
-    var hotSpotCenterX = image.hotspot.x * asset.width;
-    var hotSpotCenterY = image.hotspot.y * asset.height;
-    var hotspot = {
-      left: hotSpotCenterX - hotSpotHorizontalRadius,
-      top: hotSpotCenterY - hotSpotVerticalRadius,
-      right: hotSpotCenterX + hotSpotHorizontalRadius,
-      bottom: hotSpotCenterY + hotSpotVerticalRadius
-    };
-    // If irrelevant, or if we are requested to: don't perform crop/fit based on
-    // the crop/hotspot.
-    if (!(spec.rect || spec.focalPoint || spec.ignoreImageParams || spec.crop)) {
-      spec = __assign(__assign({}, spec), fit({
-        crop: crop,
-        hotspot: hotspot
-      }, spec));
+    Object.defineProperty(exports, "__esModule", { value: !0 }), exports.parseSource = exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = void 0;
+    var parseAssetId_1 = __importDefault(requireParseAssetId()), parseSource_1 = __importDefault(requireParseSource());
+    exports.parseSource = parseSource_1.default, exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = [
+      ["width", "w"],
+      ["height", "h"],
+      ["format", "fm"],
+      ["download", "dl"],
+      ["blur", "blur"],
+      ["sharpen", "sharp"],
+      ["invert", "invert"],
+      ["orientation", "or"],
+      ["minHeight", "min-h"],
+      ["maxHeight", "max-h"],
+      ["minWidth", "min-w"],
+      ["maxWidth", "max-w"],
+      ["quality", "q"],
+      ["fit", "fit"],
+      ["crop", "crop"],
+      ["saturation", "sat"],
+      ["auto", "auto"],
+      ["dpr", "dpr"],
+      ["pad", "pad"]
+    ];
+    function urlForImage$1(options) {
+      var spec = __assign({}, options || {}), source = spec.source;
+      delete spec.source;
+      var image = (0, parseSource_1.default)(source);
+      if (!image)
+        throw new Error("Unable to resolve image URL from source (".concat(JSON.stringify(source), ")"));
+      var id = image.asset._ref || image.asset._id || "", asset = (0, parseAssetId_1.default)(id), cropLeft = Math.round(image.crop.left * asset.width), cropTop = Math.round(image.crop.top * asset.height), crop = {
+        left: cropLeft,
+        top: cropTop,
+        width: Math.round(asset.width - image.crop.right * asset.width - cropLeft),
+        height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
+      }, hotSpotVerticalRadius = image.hotspot.height * asset.height / 2, hotSpotHorizontalRadius = image.hotspot.width * asset.width / 2, hotSpotCenterX = image.hotspot.x * asset.width, hotSpotCenterY = image.hotspot.y * asset.height, hotspot = {
+        left: hotSpotCenterX - hotSpotHorizontalRadius,
+        top: hotSpotCenterY - hotSpotVerticalRadius,
+        right: hotSpotCenterX + hotSpotHorizontalRadius,
+        bottom: hotSpotCenterY + hotSpotVerticalRadius
+      };
+      return spec.rect || spec.focalPoint || spec.ignoreImageParams || spec.crop || (spec = __assign(__assign({}, spec), fit({ crop, hotspot }, spec))), specToImageUrl(__assign(__assign({}, spec), { asset }));
     }
-    return specToImageUrl(__assign(__assign({}, spec), {
-      asset: asset
-    }));
-  }
-  exports.default = urlForImage;
-  // eslint-disable-next-line complexity
-  function specToImageUrl(spec) {
-    var cdnUrl = (spec.baseUrl || 'https://cdn.sanity.io').replace(/\/+$/, '');
-    var filename = "".concat(spec.asset.id, "-").concat(spec.asset.width, "x").concat(spec.asset.height, ".").concat(spec.asset.format);
-    var baseUrl = "".concat(cdnUrl, "/images/").concat(spec.projectId, "/").concat(spec.dataset, "/").concat(filename);
-    var params = [];
-    if (spec.rect) {
-      // Only bother url with a crop if it actually crops anything
-      var _a = spec.rect,
-        left = _a.left,
-        top_1 = _a.top,
-        width = _a.width,
-        height = _a.height;
-      var isEffectiveCrop = left !== 0 || top_1 !== 0 || height !== spec.asset.height || width !== spec.asset.width;
-      if (isEffectiveCrop) {
-        params.push("rect=".concat(left, ",").concat(top_1, ",").concat(width, ",").concat(height));
+    exports.default = urlForImage$1;
+    function specToImageUrl(spec) {
+      var cdnUrl = (spec.baseUrl || "https://cdn.sanity.io").replace(/\/+$/, ""), filename = "".concat(spec.asset.id, "-").concat(spec.asset.width, "x").concat(spec.asset.height, ".").concat(spec.asset.format), baseUrl = "".concat(cdnUrl, "/images/").concat(spec.projectId, "/").concat(spec.dataset, "/").concat(filename), params = [];
+      if (spec.rect) {
+        var _a = spec.rect, left = _a.left, top_1 = _a.top, width = _a.width, height = _a.height, isEffectiveCrop = left !== 0 || top_1 !== 0 || height !== spec.asset.height || width !== spec.asset.width;
+        isEffectiveCrop && params.push("rect=".concat(left, ",").concat(top_1, ",").concat(width, ",").concat(height));
       }
+      spec.bg && params.push("bg=".concat(spec.bg)), spec.focalPoint && (params.push("fp-x=".concat(spec.focalPoint.x)), params.push("fp-y=".concat(spec.focalPoint.y)));
+      var flip = [spec.flipHorizontal && "h", spec.flipVertical && "v"].filter(Boolean).join("");
+      return flip && params.push("flip=".concat(flip)), exports.SPEC_NAME_TO_URL_NAME_MAPPINGS.forEach(function(mapping) {
+        var specName = mapping[0], param = mapping[1];
+        typeof spec[specName] < "u" ? params.push("".concat(param, "=").concat(encodeURIComponent(spec[specName]))) : typeof spec[param] < "u" && params.push("".concat(param, "=").concat(encodeURIComponent(spec[param])));
+      }), params.length === 0 ? baseUrl : "".concat(baseUrl, "?").concat(params.join("&"));
     }
-    if (spec.bg) {
-      params.push("bg=".concat(spec.bg));
-    }
-    if (spec.focalPoint) {
-      params.push("fp-x=".concat(spec.focalPoint.x));
-      params.push("fp-y=".concat(spec.focalPoint.y));
-    }
-    var flip = [spec.flipHorizontal && 'h', spec.flipVertical && 'v'].filter(Boolean).join('');
-    if (flip) {
-      params.push("flip=".concat(flip));
-    }
-    // Map from spec name to url param name, and allow using the actual param name as an alternative
-    exports.SPEC_NAME_TO_URL_NAME_MAPPINGS.forEach(function (mapping) {
-      var specName = mapping[0],
-        param = mapping[1];
-      if (typeof spec[specName] !== 'undefined') {
-        params.push("".concat(param, "=").concat(encodeURIComponent(spec[specName])));
-      } else if (typeof spec[param] !== 'undefined') {
-        params.push("".concat(param, "=").concat(encodeURIComponent(spec[param])));
+    function fit(source, spec) {
+      var cropRect, imgWidth = spec.width, imgHeight = spec.height;
+      if (!(imgWidth && imgHeight))
+        return { width: imgWidth, height: imgHeight, rect: source.crop };
+      var crop = source.crop, hotspot = source.hotspot, desiredAspectRatio = imgWidth / imgHeight, cropAspectRatio = crop.width / crop.height;
+      if (cropAspectRatio > desiredAspectRatio) {
+        var height = Math.round(crop.height), width = Math.round(height * desiredAspectRatio), top_2 = Math.max(0, Math.round(crop.top)), hotspotXCenter = Math.round((hotspot.right - hotspot.left) / 2 + hotspot.left), left = Math.max(0, Math.round(hotspotXCenter - width / 2));
+        left < crop.left ? left = crop.left : left + width > crop.left + crop.width && (left = crop.left + crop.width - width), cropRect = { left, top: top_2, width, height };
+      } else {
+        var width = crop.width, height = Math.round(width / desiredAspectRatio), left = Math.max(0, Math.round(crop.left)), hotspotYCenter = Math.round((hotspot.bottom - hotspot.top) / 2 + hotspot.top), top_3 = Math.max(0, Math.round(hotspotYCenter - height / 2));
+        top_3 < crop.top ? top_3 = crop.top : top_3 + height > crop.top + crop.height && (top_3 = crop.top + crop.height - height), cropRect = { left, top: top_3, width, height };
       }
-    });
-    if (params.length === 0) {
-      return baseUrl;
-    }
-    return "".concat(baseUrl, "?").concat(params.join('&'));
-  }
-  function fit(source, spec) {
-    var cropRect;
-    var imgWidth = spec.width;
-    var imgHeight = spec.height;
-    // If we are not constraining the aspect ratio, we'll just use the whole crop
-    if (!(imgWidth && imgHeight)) {
       return {
         width: imgWidth,
         height: imgHeight,
-        rect: source.crop
+        rect: cropRect
       };
     }
-    var crop = source.crop;
-    var hotspot = source.hotspot;
-    // If we are here, that means aspect ratio is locked and fitting will be a bit harder
-    var desiredAspectRatio = imgWidth / imgHeight;
-    var cropAspectRatio = crop.width / crop.height;
-    if (cropAspectRatio > desiredAspectRatio) {
-      // The crop is wider than the desired aspect ratio. That means we are cutting from the sides
-      var height = Math.round(crop.height);
-      var width = Math.round(height * desiredAspectRatio);
-      var top_2 = Math.max(0, Math.round(crop.top));
-      // Center output horizontally over hotspot
-      var hotspotXCenter = Math.round((hotspot.right - hotspot.left) / 2 + hotspot.left);
-      var left = Math.max(0, Math.round(hotspotXCenter - width / 2));
-      // Keep output within crop
-      if (left < crop.left) {
-        left = crop.left;
-      } else if (left + width > crop.left + crop.width) {
-        left = crop.left + crop.width - width;
-      }
-      cropRect = {
-        left: left,
-        top: top_2,
-        width: width,
-        height: height
-      };
-    } else {
-      // The crop is taller than the desired ratio, we are cutting from top and bottom
-      var width = crop.width;
-      var height = Math.round(width / desiredAspectRatio);
-      var left = Math.max(0, Math.round(crop.left));
-      // Center output vertically over hotspot
-      var hotspotYCenter = Math.round((hotspot.bottom - hotspot.top) / 2 + hotspot.top);
-      var top_3 = Math.max(0, Math.round(hotspotYCenter - height / 2));
-      // Keep output rect within crop
-      if (top_3 < crop.top) {
-        top_3 = crop.top;
-      } else if (top_3 + height > crop.top + crop.height) {
-        top_3 = crop.top + crop.height - height;
+  }(urlForImage)), urlForImage;
+}
+var hasRequiredBuilder;
+function requireBuilder() {
+  if (hasRequiredBuilder) return builder;
+  hasRequiredBuilder = 1;
+  var __assign = builder && builder.__assign || function() {
+    return __assign = Object.assign || function(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
       }
-      cropRect = {
-        left: left,
-        top: top_3,
-        width: width,
-        height: height
-      };
-    }
-    return {
-      width: imgWidth,
-      height: imgHeight,
-      rect: cropRect
-    };
+      return t;
+    }, __assign.apply(this, arguments);
+  }, __createBinding = builder && builder.__createBinding || (Object.create ? function(o, m, k, k2) {
+    k2 === void 0 && (k2 = k), Object.defineProperty(o, k2, { enumerable: !0, get: function() {
+      return m[k];
+    } });
+  } : function(o, m, k, k2) {
+    k2 === void 0 && (k2 = k), o[k2] = m[k];
+  }), __setModuleDefault = builder && builder.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: !0, value: v });
+  } : function(o, v) {
+    o.default = v;
+  }), __importStar = builder && builder.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) k !== "default" && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+  };
+  Object.defineProperty(builder, "__esModule", { value: !0 }), builder.ImageUrlBuilder = void 0;
+  var urlForImage_1 = __importStar(requireUrlForImage()), validFits = ["clip", "crop", "fill", "fillmax", "max", "scale", "min"], validCrops = ["top", "bottom", "left", "right", "center", "focalpoint", "entropy"], validAutoModes = ["format"];
+  function isSanityModernClientLike(client) {
+    return client && "config" in client ? typeof client.config == "function" : !1;
+  }
+  function isSanityClientLike(client) {
+    return client && "clientConfig" in client ? typeof client.clientConfig == "object" : !1;
   }
-})(urlForImage);
-var __assign = commonjsGlobal && commonjsGlobal.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+  function rewriteSpecName(key) {
+    for (var specs = urlForImage_1.SPEC_NAME_TO_URL_NAME_MAPPINGS, _i = 0, specs_1 = specs; _i < specs_1.length; _i++) {
+      var entry = specs_1[_i], specName = entry[0], param = entry[1];
+      if (key === specName || key === param)
+        return specName;
     }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __createBinding = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function () {
-      return m[k];
+    return key;
+  }
+  function urlBuilder(options) {
+    if (isSanityModernClientLike(options)) {
+      var _a = options.config(), apiUrl = _a.apiHost, projectId = _a.projectId, dataset = _a.dataset, apiHost = apiUrl || "https://api.sanity.io";
+      return new ImageUrlBuilder(null, {
+        baseUrl: apiHost.replace(/^https:\/\/api\./, "https://cdn."),
+        projectId,
+        dataset
+      });
     }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = commonjsGlobal && commonjsGlobal.__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = commonjsGlobal && commonjsGlobal.__importStar || function (mod) {
-  if (mod && mod.__esModule) return mod;
-  var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  __setModuleDefault(result, mod);
-  return result;
-};
-Object.defineProperty(builder, "__esModule", {
-  value: true
-});
-builder.ImageUrlBuilder = void 0;
-var urlForImage_1 = __importStar(urlForImage);
-var validFits = ['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min'];
-var validCrops = ['top', 'bottom', 'left', 'right', 'center', 'focalpoint', 'entropy'];
-var validAutoModes = ['format'];
-function isSanityModernClientLike(client) {
-  return client && 'config' in client ? typeof client.config === 'function' : false;
-}
-function isSanityClientLike(client) {
-  return client && 'clientConfig' in client ? typeof client.clientConfig === 'object' : false;
-}
-function rewriteSpecName(key) {
-  var specs = urlForImage_1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
-  for (var _i = 0, specs_1 = specs; _i < specs_1.length; _i++) {
-    var entry = specs_1[_i];
-    var specName = entry[0],
-      param = entry[1];
-    if (key === specName || key === param) {
-      return specName;
+    var client = options;
+    if (isSanityClientLike(client)) {
+      var _b = client.clientConfig, apiUrl = _b.apiHost, projectId = _b.projectId, dataset = _b.dataset, apiHost = apiUrl || "https://api.sanity.io";
+      return new ImageUrlBuilder(null, {
+        baseUrl: apiHost.replace(/^https:\/\/api\./, "https://cdn."),
+        projectId,
+        dataset
+      });
     }
+    return new ImageUrlBuilder(null, options);
   }
-  return key;
+  builder.default = urlBuilder;
+  var ImageUrlBuilder = (
+    /** @class */
+    function() {
+      function ImageUrlBuilder2(parent, options) {
+        this.options = parent ? __assign(__assign({}, parent.options || {}), options || {}) : __assign({}, options || {});
+      }
+      return ImageUrlBuilder2.prototype.withOptions = function(options) {
+        var baseUrl = options.baseUrl || this.options.baseUrl, newOptions = { baseUrl };
+        for (var key in options)
+          if (options.hasOwnProperty(key)) {
+            var specKey = rewriteSpecName(key);
+            newOptions[specKey] = options[key];
+          }
+        return new ImageUrlBuilder2(this, __assign({ baseUrl }, newOptions));
+      }, ImageUrlBuilder2.prototype.image = function(source) {
+        return this.withOptions({ source });
+      }, ImageUrlBuilder2.prototype.dataset = function(dataset) {
+        return this.withOptions({ dataset });
+      }, ImageUrlBuilder2.prototype.projectId = function(projectId) {
+        return this.withOptions({ projectId });
+      }, ImageUrlBuilder2.prototype.bg = function(bg) {
+        return this.withOptions({ bg });
+      }, ImageUrlBuilder2.prototype.dpr = function(dpr) {
+        return this.withOptions(dpr && dpr !== 1 ? { dpr } : {});
+      }, ImageUrlBuilder2.prototype.width = function(width) {
+        return this.withOptions({ width });
+      }, ImageUrlBuilder2.prototype.height = function(height) {
+        return this.withOptions({ height });
+      }, ImageUrlBuilder2.prototype.focalPoint = function(x, y) {
+        return this.withOptions({ focalPoint: { x, y } });
+      }, ImageUrlBuilder2.prototype.maxWidth = function(maxWidth) {
+        return this.withOptions({ maxWidth });
+      }, ImageUrlBuilder2.prototype.minWidth = function(minWidth) {
+        return this.withOptions({ minWidth });
+      }, ImageUrlBuilder2.prototype.maxHeight = function(maxHeight) {
+        return this.withOptions({ maxHeight });
+      }, ImageUrlBuilder2.prototype.minHeight = function(minHeight) {
+        return this.withOptions({ minHeight });
+      }, ImageUrlBuilder2.prototype.size = function(width, height) {
+        return this.withOptions({ width, height });
+      }, ImageUrlBuilder2.prototype.blur = function(blur) {
+        return this.withOptions({ blur });
+      }, ImageUrlBuilder2.prototype.sharpen = function(sharpen) {
+        return this.withOptions({ sharpen });
+      }, ImageUrlBuilder2.prototype.rect = function(left, top, width, height) {
+        return this.withOptions({ rect: { left, top, width, height } });
+      }, ImageUrlBuilder2.prototype.format = function(format) {
+        return this.withOptions({ format });
+      }, ImageUrlBuilder2.prototype.invert = function(invert) {
+        return this.withOptions({ invert });
+      }, ImageUrlBuilder2.prototype.orientation = function(orientation) {
+        return this.withOptions({ orientation });
+      }, ImageUrlBuilder2.prototype.quality = function(quality) {
+        return this.withOptions({ quality });
+      }, ImageUrlBuilder2.prototype.forceDownload = function(download) {
+        return this.withOptions({ download });
+      }, ImageUrlBuilder2.prototype.flipHorizontal = function() {
+        return this.withOptions({ flipHorizontal: !0 });
+      }, ImageUrlBuilder2.prototype.flipVertical = function() {
+        return this.withOptions({ flipVertical: !0 });
+      }, ImageUrlBuilder2.prototype.ignoreImageParams = function() {
+        return this.withOptions({ ignoreImageParams: !0 });
+      }, ImageUrlBuilder2.prototype.fit = function(value) {
+        if (validFits.indexOf(value) === -1)
+          throw new Error('Invalid fit mode "'.concat(value, '"'));
+        return this.withOptions({ fit: value });
+      }, ImageUrlBuilder2.prototype.crop = function(value) {
+        if (validCrops.indexOf(value) === -1)
+          throw new Error('Invalid crop mode "'.concat(value, '"'));
+        return this.withOptions({ crop: value });
+      }, ImageUrlBuilder2.prototype.saturation = function(saturation) {
+        return this.withOptions({ saturation });
+      }, ImageUrlBuilder2.prototype.auto = function(value) {
+        if (validAutoModes.indexOf(value) === -1)
+          throw new Error('Invalid auto mode "'.concat(value, '"'));
+        return this.withOptions({ auto: value });
+      }, ImageUrlBuilder2.prototype.pad = function(pad) {
+        return this.withOptions({ pad });
+      }, ImageUrlBuilder2.prototype.url = function() {
+        return (0, urlForImage_1.default)(this.options);
+      }, ImageUrlBuilder2.prototype.toString = function() {
+        return this.url();
+      }, ImageUrlBuilder2;
+    }()
+  );
+  return builder.ImageUrlBuilder = ImageUrlBuilder, builder;
 }
-function urlBuilder(options) {
-  // Did we get a modernish client?
-  if (isSanityModernClientLike(options)) {
-    // Inherit config from client
-    var _a = options.config(),
-      apiUrl = _a.apiHost,
-      projectId = _a.projectId,
-      dataset = _a.dataset;
-    var apiHost = apiUrl || 'https://api.sanity.io';
-    return new ImageUrlBuilder(null, {
-      baseUrl: apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),
-      projectId: projectId,
-      dataset: dataset
-    });
-  }
-  // Did we get a SanityClient?
-  var client = options;
-  if (isSanityClientLike(client)) {
-    // Inherit config from client
-    var _b = client.clientConfig,
-      apiUrl = _b.apiHost,
-      projectId = _b.projectId,
-      dataset = _b.dataset;
-    var apiHost = apiUrl || 'https://api.sanity.io';
-    return new ImageUrlBuilder(null, {
-      baseUrl: apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),
-      projectId: projectId,
-      dataset: dataset
-    });
-  }
-  // Or just accept the options as given
-  return new ImageUrlBuilder(null, options);
+var node, hasRequiredNode;
+function requireNode() {
+  if (hasRequiredNode) return node;
+  hasRequiredNode = 1;
+  var __importDefault = node && node.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  }, builder_1 = __importDefault(requireBuilder());
+  return node = builder_1.default, node;
 }
-builder.default = urlBuilder;
-var ImageUrlBuilder = /** @class */function () {
-  function ImageUrlBuilder(parent, options) {
-    this.options = parent ? __assign(__assign({}, parent.options || {}), options || {}) : __assign({}, options || {}); // Copy options
-  }
-  ImageUrlBuilder.prototype.withOptions = function (options) {
-    var baseUrl = options.baseUrl || this.options.baseUrl;
-    var newOptions = {
-      baseUrl: baseUrl
-    };
-    for (var key in options) {
-      if (options.hasOwnProperty(key)) {
-        var specKey = rewriteSpecName(key);
-        newOptions[specKey] = options[key];
-      }
-    }
-    return new ImageUrlBuilder(this, __assign({
-      baseUrl: baseUrl
-    }, newOptions));
-  };
-  // The image to be represented. Accepts a Sanity 'image'-document, 'asset'-document or
-  // _id of asset. To get the benefit of automatic hot-spot/crop integration with the content
-  // studio, the 'image'-document must be provided.
-  ImageUrlBuilder.prototype.image = function (source) {
-    return this.withOptions({
-      source: source
-    });
-  };
-  // Specify the dataset
-  ImageUrlBuilder.prototype.dataset = function (dataset) {
-    return this.withOptions({
-      dataset: dataset
-    });
-  };
-  // Specify the projectId
-  ImageUrlBuilder.prototype.projectId = function (projectId) {
-    return this.withOptions({
-      projectId: projectId
-    });
-  };
-  // Specify background color
-  ImageUrlBuilder.prototype.bg = function (bg) {
-    return this.withOptions({
-      bg: bg
-    });
-  };
-  // Set DPR scaling factor
-  ImageUrlBuilder.prototype.dpr = function (dpr) {
-    // A DPR of 1 is the default - so only include it if we have a different value
-    return this.withOptions(dpr && dpr !== 1 ? {
-      dpr: dpr
-    } : {});
-  };
-  // Specify the width of the image in pixels
-  ImageUrlBuilder.prototype.width = function (width) {
-    return this.withOptions({
-      width: width
-    });
-  };
-  // Specify the height of the image in pixels
-  ImageUrlBuilder.prototype.height = function (height) {
-    return this.withOptions({
-      height: height
-    });
-  };
-  // Specify focal point in fraction of image dimensions. Each component 0.0-1.0
-  ImageUrlBuilder.prototype.focalPoint = function (x, y) {
-    return this.withOptions({
-      focalPoint: {
-        x: x,
-        y: y
-      }
-    });
-  };
-  ImageUrlBuilder.prototype.maxWidth = function (maxWidth) {
-    return this.withOptions({
-      maxWidth: maxWidth
-    });
-  };
-  ImageUrlBuilder.prototype.minWidth = function (minWidth) {
-    return this.withOptions({
-      minWidth: minWidth
-    });
-  };
-  ImageUrlBuilder.prototype.maxHeight = function (maxHeight) {
-    return this.withOptions({
-      maxHeight: maxHeight
-    });
-  };
-  ImageUrlBuilder.prototype.minHeight = function (minHeight) {
-    return this.withOptions({
-      minHeight: minHeight
-    });
-  };
-  // Specify width and height in pixels
-  ImageUrlBuilder.prototype.size = function (width, height) {
-    return this.withOptions({
-      width: width,
-      height: height
-    });
-  };
-  // Specify blur between 0 and 100
-  ImageUrlBuilder.prototype.blur = function (blur) {
-    return this.withOptions({
-      blur: blur
-    });
-  };
-  ImageUrlBuilder.prototype.sharpen = function (sharpen) {
-    return this.withOptions({
-      sharpen: sharpen
-    });
-  };
-  // Specify the desired rectangle of the image
-  ImageUrlBuilder.prototype.rect = function (left, top, width, height) {
-    return this.withOptions({
-      rect: {
-        left: left,
-        top: top,
-        width: width,
-        height: height
-      }
-    });
-  };
-  // Specify the image format of the image. 'jpg', 'pjpg', 'png', 'webp'
-  ImageUrlBuilder.prototype.format = function (format) {
-    return this.withOptions({
-      format: format
-    });
-  };
-  ImageUrlBuilder.prototype.invert = function (invert) {
-    return this.withOptions({
-      invert: invert
-    });
-  };
-  // Rotation in degrees 0, 90, 180, 270
-  ImageUrlBuilder.prototype.orientation = function (orientation) {
-    return this.withOptions({
-      orientation: orientation
-    });
-  };
-  // Compression quality 0-100
-  ImageUrlBuilder.prototype.quality = function (quality) {
-    return this.withOptions({
-      quality: quality
-    });
-  };
-  // Make it a download link. Parameter is default filename.
-  ImageUrlBuilder.prototype.forceDownload = function (download) {
-    return this.withOptions({
-      download: download
-    });
-  };
-  // Flip image horizontally
-  ImageUrlBuilder.prototype.flipHorizontal = function () {
-    return this.withOptions({
-      flipHorizontal: true
-    });
-  };
-  // Flip image vertically
-  ImageUrlBuilder.prototype.flipVertical = function () {
-    return this.withOptions({
-      flipVertical: true
-    });
-  };
-  // Ignore crop/hotspot from image record, even when present
-  ImageUrlBuilder.prototype.ignoreImageParams = function () {
-    return this.withOptions({
-      ignoreImageParams: true
-    });
-  };
-  ImageUrlBuilder.prototype.fit = function (value) {
-    if (validFits.indexOf(value) === -1) {
-      throw new Error("Invalid fit mode \"".concat(value, "\""));
-    }
-    return this.withOptions({
-      fit: value
-    });
-  };
-  ImageUrlBuilder.prototype.crop = function (value) {
-    if (validCrops.indexOf(value) === -1) {
-      throw new Error("Invalid crop mode \"".concat(value, "\""));
-    }
-    return this.withOptions({
-      crop: value
-    });
-  };
-  // Saturation
-  ImageUrlBuilder.prototype.saturation = function (saturation) {
-    return this.withOptions({
-      saturation: saturation
-    });
-  };
-  ImageUrlBuilder.prototype.auto = function (value) {
-    if (validAutoModes.indexOf(value) === -1) {
-      throw new Error("Invalid auto mode \"".concat(value, "\""));
-    }
-    return this.withOptions({
-      auto: value
-    });
-  };
-  // Specify the number of pixels to pad the image
-  ImageUrlBuilder.prototype.pad = function (pad) {
-    return this.withOptions({
-      pad: pad
-    });
-  };
-  // Gets the url based on the submitted parameters
-  ImageUrlBuilder.prototype.url = function () {
-    return (0, urlForImage_1.default)(this.options);
-  };
-  // Alias for url()
-  ImageUrlBuilder.prototype.toString = function () {
-    return this.url();
-  };
-  return ImageUrlBuilder;
-}();
-builder.ImageUrlBuilder = ImageUrlBuilder;
-var __importDefault = commonjsGlobal && commonjsGlobal.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-var builder_1 = __importDefault(builder);
-var node = builder_1.default;
-var createImageUrlBuilder = /*@__PURE__*/getDefaultExportFromCjs(node);
+var nodeExports = /* @__PURE__ */ requireNode(), createImageUrlBuilder = /* @__PURE__ */ getDefaultExportFromCjs(nodeExports);
 function useImageUrlBuilder(clientOptions) {
   const client = useClient(clientOptions);
-  const builder = useMemo(() => createImageUrlBuilder(client), [client]);
-  return builder;
+  return useMemo(() => createImageUrlBuilder(client), [client]);
 }
 function useImageUrlBuilderImage(source, clientOptions) {
-  const builder = useImageUrlBuilder(clientOptions);
-  const image = useMemo(() => source && builder ? builder.image(source) : null, [builder, source]);
-  return image;
+  const builder2 = useImageUrlBuilder(clientOptions);
+  return useMemo(
+    () => source && builder2 ? builder2.image(source) : null,
+    [builder2, source]
+  );
 }
-const DEFAULT_PARAMS = {};
-const DEFAULT_OPTIONS = {
-  apiVersion: "v2023-05-01"
-};
-const DEFAULT_INITIAL_VALUE = null;
+const DEFAULT_PARAMS = {}, DEFAULT_OPTIONS = { apiVersion: "v2023-05-01" }, DEFAULT_INITIAL_VALUE = null;
 function useParams(params) {
-  const stringifiedParams = useMemo(() => JSON.stringify(params || {}), [params]);
+  const stringifiedParams = useMemo(
+    () => JSON.stringify(params || {}),
+    [params]
+  );
   return useMemo(() => JSON.parse(stringifiedParams), [stringifiedParams]);
 }
-function useListeningQuery(query, _ref) {
-  let {
-    params = DEFAULT_PARAMS,
-    options = DEFAULT_OPTIONS,
-    initialValue = DEFAULT_INITIAL_VALUE
-  } = _ref;
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  const [data, setData] = useState(initialValue);
-  const memoParams = useParams(params);
-  const memoOptions = useParams(options);
-  const subscription = useRef(null);
-  const documentStore = useDocumentStore();
-  useEffect(() => {
-    if (query && !error && !subscription.current) {
+function useListeningQuery(query, {
+  params = DEFAULT_PARAMS,
+  options = DEFAULT_OPTIONS,
+  initialValue = DEFAULT_INITIAL_VALUE
+}) {
+  const [loading, setLoading] = useState(!0), [error, setError] = useState(!1), [data, setData] = useState(initialValue), memoParams = useParams(params), memoOptions = useParams(options), subscription = useRef(null), documentStore = useDocumentStore();
+  return useEffect(() => {
+    if (query && !error && !subscription.current)
       try {
-        subscription.current = documentStore.listenQuery(query, memoParams, memoOptions).pipe(distinctUntilChanged(isEqual), catchError(err => {
-          console.error(err);
-          setError(err);
-          setLoading(false);
-          setData(null);
-          return err;
-        })).subscribe(documents => {
-          setData(current => isEqual(current, documents) ? current : documents);
-          setLoading(false);
-          setError(false);
+        subscription.current = documentStore.listenQuery(query, memoParams, memoOptions).pipe(
+          distinctUntilChanged(isEqual),
+          catchError((err) => (console.error(err), setError(err), setLoading(!1), setData(null), err))
+        ).subscribe((documents) => {
+          setData(
+            (current) => isEqual(current, documents) ? current : documents
+          ), setLoading(!1), setError(!1);
         });
       } catch (err) {
-        console.error(err);
-        setLoading(false);
-        setError(err);
+        console.error(err), setLoading(!1), setError(err);
       }
-    }
-    if (error && subscription.current) {
-      subscription.current.unsubscribe();
-    }
-    return () => {
+    return error && subscription.current && subscription.current.unsubscribe(), () => {
       var _a;
-      if (subscription.current) {
-        (_a = subscription == null ? void 0 : subscription.current) == null ? void 0 : _a.unsubscribe();
-        subscription.current = null;
-      }
+      subscription.current && ((_a = subscription == null ? void 0 : subscription.current) == null || _a.unsubscribe(), subscription.current = null);
     };
-  }, [query, error, memoParams, memoOptions, documentStore]);
-  return {
-    data,
-    loading,
-    error
-  };
-}
-function useProjectUsers(_ref2) {
-  let {
-    apiVersion
-  } = _ref2;
-  const {
-    currentUser
-  } = useWorkspace();
-  const client = useClient({
-    apiVersion: apiVersion != null ? apiVersion : "2023-01-01"
-  });
-  const [users, setUsers] = useState([]);
-  useEffect(() => {
-    const {
-      projectId
-    } = client.config();
-    async function getUser(id) {
-      const userDetails = await client.request({
-        url: "/projects/".concat(projectId, "/users/").concat(id)
-      });
-      return userDetails;
-    }
-    async function getUsersWithRoles() {
-      const userRoles = await client.request({
-        url: "/projects/".concat(projectId, "/acl")
-      }).then(async res => Promise.all(res.map(async user => ({
-        isCurrentUser: user.projectUserId === (currentUser == null ? void 0 : currentUser.id),
-        ...(await getUser(user.projectUserId))
-      })))).catch(err => err);
-      setUsers(userRoles);
-    }
-    if (!users.length) {
-      getUsersWithRoles();
-    }
-  }, [client, currentUser == null ? void 0 : currentUser.id, users.length]);
-  return users;
+  }, [query, error, memoParams, memoOptions, documentStore]), { data, loading, error };
 }
 function useOpenInNewPane(id, type) {
-  const routerContext = React.useContext(RouterContext);
-  const {
-    routerPanesState,
-    groupIndex
-  } = usePaneRouter();
-  const openInNewPane = React.useCallback(() => {
-    if (!routerContext || !id || !type) {
+  const routerContext = useContext(RouterContext), { routerPanesState, groupIndex } = usePaneRouter();
+  return useCallback(() => {
+    if (!routerContext || !id || !type)
       return;
-    }
     const panes = [...routerPanesState];
-    panes.splice(groupIndex + 1, 0, [{
-      id,
-      params: {
-        type
+    panes.splice(groupIndex + 1, 0, [
+      {
+        id,
+        params: { type }
       }
-    }]);
-    const href = routerContext.resolvePathFromState({
-      panes
-    });
-    routerContext.navigateUrl({
-      path: href
-    });
+    ]);
+    const href = routerContext.resolvePathFromState({ panes });
+    routerContext.navigateUrl({ path: href });
   }, [id, type, routerContext, routerPanesState, groupIndex]);
-  return openInNewPane;
-}
-const DEFAULT_PROPS = {
-  tone: "primary"
-};
-function Feedback(props) {
-  const {
-    title,
-    description,
-    icon,
-    tone,
-    children
-  } = {
-    ...DEFAULT_PROPS,
-    ...props
-  };
-  return /* @__PURE__ */jsx(Card, {
-    tone,
-    padding: 4,
-    radius: 3,
-    border: true,
-    children: /* @__PURE__ */jsxs(Flex, {
-      children: [icon ? "display icon" : null, children ? children : /* @__PURE__ */jsx(Box, {
-        flex: 1,
-        children: /* @__PURE__ */jsxs(Stack, {
-          space: 4,
-          children: [title ? /* @__PURE__ */jsx(Text, {
-            weight: "semibold",
-            children: title
-          }) : null, description ? /* @__PURE__ */jsx(Text, {
-            size: 2,
-            children: description
-          }) : null]
-        })
-      })]
-    })
-  });
 }
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
-  value: __freeze(cooked.slice())
-}));
-var _a, _b, _c;
-const TableWrapper = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /* @__PURE__ */jsx(Card, {
-    as: "table",
-    ...props
-  });
-};
-const StyledTable = styled(TableWrapper)(() => css(_a || (_a = __template(["\n    display: table;\n    width: 100%;\n    border-collapse: collapse;\n\n    &:not([hidden]) {\n      display: table;\n      border-collapse: collapse;\n    }\n  "]))));
-function Table(props) {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */jsx(StyledTable, {
-    ...rest,
-    children
-  });
+var __defProp = Object.defineProperty, __defProps = Object.defineProperties, __getOwnPropDescs = Object.getOwnPropertyDescriptors, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b))
+      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  return a;
+}, __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function chunkArray(array, size) {
+  const chunks = [];
+  for (let i = 0; i < array.length; i += size)
+    chunks.push(array.slice(i, i + size));
+  return chunks;
 }
-const RowWrapper = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /* @__PURE__ */jsx(Card, {
-    as: "tr",
-    ...props
-  });
-};
-const StyledRow = styled(RowWrapper)(() => css(_b || (_b = __template(["\n    display: table-row;\n\n    &:not([hidden]) {\n      display: table-row;\n    }\n  "]))));
-function Row(props) {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */jsx(StyledRow, {
-    ...rest,
-    children
-  });
-}
-const CellWrapper = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /* @__PURE__ */jsx(Card, {
-    as: "td",
-    ...props
-  });
-};
-const StyledCell = styled(CellWrapper)(() => css(_c || (_c = __template(["\n    display: table-cell;\n\n    &:not([hidden]) {\n      display: table-cell;\n    }\n  "]))));
-function Cell(props) {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */jsx(StyledCell, {
-    ...rest,
-    children
-  });
-}
-function searchUsers(users, searchString) {
-  return users.filter(user => {
-    const displayName = (user.displayName || "").toLowerCase();
-    if (displayName.startsWith(searchString)) return true;
-    const givenName = (user.givenName || "").toLowerCase();
-    if (givenName.startsWith(searchString)) return true;
-    const middleName = (user.middleName || "").toLowerCase();
-    if (middleName.startsWith(searchString)) return true;
-    const familyName = (user.familyName || "").toLowerCase();
-    if (familyName.startsWith(searchString)) return true;
-    return false;
-  });
+function useProjectUsers({ apiVersion }) {
+  const { currentUser } = useWorkspace(), client = useClient({ apiVersion: apiVersion != null ? apiVersion : "2023-01-01" }), [users, setUsers] = useState([]);
+  return useEffect(() => {
+    const { projectId } = client.config();
+    async function getUsersWithRoles() {
+      try {
+        const aclData = await client.request({
+          url: `/projects/${projectId}/acl`
+        }), userIds = aclData.map((user) => user.projectUserId), userIdChunks = chunkArray(userIds, 200);
+        let usersData = [];
+        for (const chunk of userIdChunks) {
+          const chunkedUserIds = chunk.join(","), response = await client.request({
+            url: `/projects/${projectId}/users/${chunkedUserIds}`
+          });
+          usersData = [...usersData, ...response];
+        }
+        const usersWithRoles = usersData.map((user) => {
+          var _a;
+          const userRoles = ((_a = aclData.find(
+            (aclUser) => aclUser.projectUserId === user.id
+          )) == null ? void 0 : _a.roles) || [];
+          return __spreadProps(__spreadValues({}, user), {
+            isCurrentUser: user.id === (currentUser == null ? void 0 : currentUser.id),
+            roles: userRoles
+          });
+        });
+        setUsers(usersWithRoles);
+      } catch (err) {
+        console.error("Failed to fetch users:", err);
+      }
+    }
+    users.length || getUsersWithRoles();
+  }, [client, currentUser == null ? void 0 : currentUser.id, users.length]), users;
 }
-const LABELS = {
-  addMe: "Assign myself",
-  removeMe: "Unassign myself",
-  clear: "Clear assignees",
-  searchPlaceholder: "Search users",
-  notFound: "No users found"
+export {
+  Cell,
+  Feedback,
+  Row,
+  Table,
+  UserSelectMenu,
+  useImageUrlBuilder,
+  useImageUrlBuilderImage,
+  useListeningQuery,
+  useOpenInNewPane,
+  useProjectUsers
 };
-function UserSelectMenu(props) {
-  const {
-    value = [],
-    userList = [],
-    onAdd,
-    onRemove,
-    onClear,
-    style = {}
-  } = props;
-  const labels = (props == null ? void 0 : props.labels) ? {
-    ...LABELS,
-    ...props.labels
-  } : LABELS;
-  const [searchString, setSearchString] = React.useState("");
-  const searchResults = searchUsers(userList || [], searchString);
-  const me = userList.find(u => u.isCurrentUser);
-  const meAssigned = me && value.includes(me.id);
-  const input = useRef(null);
-  const handleSearchChange = event => {
-    setSearchString(event.target.value);
-  };
-  const handleSelect = (isChecked, user) => {
-    if (!isChecked) {
-      if (onAdd) onAdd(user.id);
-    } else if (onRemove) onRemove(user.id);
-  };
-  const handleAssignMyself = () => {
-    if (me && onAdd) onAdd(me.id);
-  };
-  const handleUnassignMyself = () => {
-    if (me && onRemove) onRemove(me.id);
-  };
-  const handleClearAssigneesClick = () => {
-    if (onClear) onClear();
-  };
-  return /* @__PURE__ */jsxs(Menu, {
-    style,
-    children: [meAssigned ? /* @__PURE__ */jsx(MenuItem, {
-      tone: "caution",
-      disabled: !me,
-      onClick: handleUnassignMyself,
-      icon: RemoveCircleIcon,
-      text: labels.removeMe
-    }) : /* @__PURE__ */jsx(MenuItem, {
-      tone: "positive",
-      onClick: handleAssignMyself,
-      icon: AddCircleIcon,
-      text: labels.addMe
-    }), /* @__PURE__ */jsx(MenuItem, {
-      tone: "critical",
-      disabled: value.length === 0,
-      onClick: handleClearAssigneesClick,
-      icon: RestoreIcon,
-      text: labels.clear
-    }), /* @__PURE__ */jsx(Box, {
-      padding: 1,
-      children: /* @__PURE__ */jsx(TextInput, {
-        ref: input,
-        onChange: handleSearchChange,
-        placeholder: labels.searchPlaceholder,
-        value: searchString
-      })
-    }), searchString && (searchResults == null ? void 0 : searchResults.length) === 0 && /* @__PURE__ */jsx(MenuItem, {
-      disabled: true,
-      text: labels.notFound
-    }), searchResults && searchResults.map(user => /* @__PURE__ */jsx(MenuItem, {
-      pressed: value.includes(user.id),
-      onClick: () => handleSelect(value.indexOf(user.id) > -1, user),
-      children: /* @__PURE__ */jsxs(Flex, {
-        align: "center",
-        children: [/* @__PURE__ */jsx(UserAvatar, {
-          user,
-          size: 1
-        }), /* @__PURE__ */jsx(Box, {
-          paddingX: 2,
-          flex: 1,
-          children: /* @__PURE__ */jsx(Text, {
-            children: user.displayName
-          })
-        }), user.isCurrentUser && /* @__PURE__ */jsx(Badge, {
-          fontSize: 1,
-          tone: "positive",
-          mode: "outline",
-          children: "Me"
-        })]
-      })
-    }, user.id))]
-  });
-}
-export { Cell, Feedback, Row, Table, UserSelectMenu, useImageUrlBuilder, useImageUrlBuilderImage, useListeningQuery, useOpenInNewPane, useProjectUsers };
 //# sourceMappingURL=index.js.map