@contentful/field-editor-reference 5.9.0 → 5.11.0

package/dist/field-editor-reference.esm.js

@@ -1,2727 +0,0 @@
-import React__default, { useState, useRef, useEffect, createElement, Fragment, useMemo, useCallback } from 'react';
-import { Menu, TextInput, Button, Paragraph, Card, Flex, SectionHeading, IconButton, Tooltip, Text, EntryCard, MenuItem, MenuDivider, AssetCard } from '@contentful/f36-components';
-import { SearchIcon, PlusIcon, ChevronDownIcon, LinkIcon, CloseIcon, FolderOpenTrimmedIcon, ClockIcon } from '@contentful/f36-icons';
-import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
-import get from 'lodash-es/get';
-import moment from 'moment';
-import { FieldConnector, isValidImage, entityHelpers, shortenStorageUnit } from '@contentful/field-editor-shared';
-import deepEqual from 'deep-equal';
-import { useQueryClient, useQuery, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import constate from 'constate';
-import { createClient } from 'contentful-management';
-import PQueue from 'p-queue';
-import isNumber from 'lodash-es/isNumber';
-import arrayMove from 'array-move';
-import { SortableContainer, SortableHandle, SortableElement } from 'react-sortable-hoc';
-import mimetype from '@contentful/mimetype';
-import { useInView } from 'react-intersection-observer';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const MAX_ITEMS_WITHOUT_SEARCH = 5;
-const menuPlacementMap = {
-  'bottom-left': 'bottom-start',
-  'bottom-right': 'bottom-end'
-};
-const styles = {
-  wrapper: /*#__PURE__*/css({
-    position: 'relative'
-  }),
-  inputWrapper: /*#__PURE__*/css({
-    position: 'relative',
-    padding: `0 ${tokens.spacing2Xs}`
-  }),
-  searchInput: /*#__PURE__*/css({
-    paddingRight: tokens.spacingXl,
-    textOverflow: 'ellipsis'
-  }),
-  searchIcon: /*#__PURE__*/css({
-    position: 'absolute',
-    right: tokens.spacingM,
-    top: tokens.spacingS,
-    zIndex: /*#__PURE__*/Number(tokens.zIndexDefault),
-    fill: tokens.gray600
-  }),
-  separator: /*#__PURE__*/css({
-    background: tokens.gray200,
-    margin: '10px 0'
-  }),
-  dropdownList: /*#__PURE__*/css({
-    borderColor: tokens.gray200
-  })
-};
-const CreateEntryMenuTrigger = ({
-  contentTypes,
-  suggestedContentTypeId,
-  contentTypesLabel,
-  onSelect,
-  testId,
-  dropdownSettings = {
-    position: 'bottom-left'
-  },
-  customDropdownItems,
-  children
-}) => {
-  const [isOpen, setOpen] = useState(false);
-  const [isSelecting, setSelecting] = useState(false);
-  const [searchInput, setSearchInput] = useState('');
-  const wrapper = useRef(null);
-  const textField = useRef(null);
-  const menuListRef = useRef(null);
-  /*
-    By default, dropdown wraps it's content, so it's width = the width of the widest item
-    During search, menu items change, and so the widest menu item can change
-    This leads to menu always changing it's width
-    To prevent this, we get the width of the menu item after the first mount of a dropdown (when all the content is displayed)
-    And hardcode it through the class name. This way we ensure that even during search the menu will keep that max width
-    That it had on initial mount and that fits any menu item in has
-  */
-
-  const [dropdownWidth, setDropdownWidth] = useState();
-  const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
-
-  const closeMenu = () => setOpen(false);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        var _textField$current, _textField$current$qu;
-
-        (_textField$current = textField.current) == null ? void 0 : (_textField$current$qu = _textField$current.querySelector('input')) == null ? void 0 : _textField$current$qu.focus({
-          preventScroll: true
-        });
-      }, 200);
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen && !dropdownWidth) {
-      var _menuListRef$current;
-
-      setDropdownWidth((_menuListRef$current = menuListRef.current) == null ? void 0 : _menuListRef$current.clientWidth);
-    }
-  }, [isOpen, dropdownWidth]);
-
-  const handleSelect = item => {
-    closeMenu();
-    const res = onSelect(item.sys.id); // TODO: Convert to controllable component.
-
-    if (res && typeof res.then === 'function') {
-      setSelecting(true);
-      res.then(() => setSelecting(false), () => setSelecting(false));
-    }
-  };
-
-  const handleMenuOpen = () => {
-    if (hasDropdown) {
-      setOpen(true);
-    } else {
-      handleSelect(contentTypes[0]);
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) {
-      setSearchInput('');
-    }
-  }, [isOpen]);
-
-  const renderSearchResultsCount = resultsLength => resultsLength ? React__default.createElement(Menu.SectionTitle, {
-    testId: "add-entru-menu-search-results"
-  }, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
-
-  const isSearchable = contentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
-  const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
-  const suggestedContentType = contentTypes.find(ct => ct.sys.id === suggestedContentTypeId);
-  const filteredContentTypes = contentTypes.filter(ct => !searchInput || get(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
-  return React__default.createElement("span", {
-    className: styles.wrapper,
-    ref: wrapper,
-    "data-test-id": testId
-  }, React__default.createElement(Menu, {
-    placement: menuPlacementMap[dropdownSettings.position],
-    isAutoalignmentEnabled: dropdownSettings.isAutoalignmentEnabled,
-    isOpen: isOpen,
-    onClose: closeMenu,
-    onOpen: handleMenuOpen
-  }, React__default.createElement(Menu.Trigger, null, children({
-    isOpen,
-    isSelecting
-  })), isOpen && React__default.createElement(Menu.List, {
-    className: styles.dropdownList,
-    style: {
-      width: dropdownWidth != undefined ? `${dropdownWidth}px` : undefined,
-      maxHeight: `${maxDropdownHeight}px`
-    },
-    ref: menuListRef,
-    testId: "add-entry-menu"
-  }, Boolean(customDropdownItems) && React__default.createElement(React__default.Fragment, null, customDropdownItems, React__default.createElement(Menu.Divider, null)), isSearchable && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    ref: textField,
-    className: styles.inputWrapper
-  }, React__default.createElement(TextInput, {
-    className: styles.searchInput,
-    placeholder: "Search all content types",
-    testId: "add-entry-menu-search",
-    value: searchInput,
-    onChange: e => setSearchInput(e.target.value)
-  }), React__default.createElement(SearchIcon, {
-    className: styles.searchIcon
-  })), React__default.createElement(Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && React__default.createElement(React__default.Fragment, null, React__default.createElement(Menu.SectionTitle, null, "Suggested Content Type"), React__default.createElement(Menu.Item, {
-    testId: "suggested",
-    onClick: () => handleSelect(suggestedContentType)
-  }, get(suggestedContentType, 'name')), React__default.createElement(Menu.Divider, null)), !searchInput && React__default.createElement(Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map((contentType, i) => React__default.createElement(Menu.Item, {
-    testId: "contentType",
-    key: `${get(contentType, 'name')}-${i}`,
-    onClick: () => handleSelect(contentType)
-  }, get(contentType, 'name', 'Untitled'))) : React__default.createElement(Menu.Item, {
-    testId: "add-entru-menu-search-results"
-  }, "No results found"))));
-};
-CreateEntryMenuTrigger.defaultProps = {
-  testId: 'create-entry-button-menu-trigger',
-  contentTypesLabel: 'All Content Types'
-};
-
-const standardStyles = {
-  spinnerMargin: /*#__PURE__*/css({
-    marginRight: tokens.spacingXs
-  }),
-  action: undefined
-};
-const redesignStyles = { ...standardStyles,
-  action: /*#__PURE__*/css({
-    textDecoration: 'none',
-    fontWeight: 'bold',
-    maxWidth: '300px'
-  })
-};
-const CreateEntryLinkButton = ({
-  contentTypes,
-  onSelect,
-  customDropdownItems,
-  text,
-  testId,
-  hasPlusIcon = false,
-  useExperimentalStyles,
-  suggestedContentTypeId,
-  dropdownSettings,
-  disabled = false
-}) => {
-  contentTypes = contentTypes.sort((a, b) => a.name.localeCompare(b.name));
-  const suggestedContentType = contentTypes.find(ct => ct.sys.id === suggestedContentTypeId);
-  const buttonText = text || `Add ${get(suggestedContentType || (contentTypes.length === 1 ? contentTypes[0] : {}), 'name', 'entry')}`;
-  const hasDropdown = contentTypes.length > 1 || customDropdownItems; // TODO: Introduce `icon: string` and remove `hasPlusIcon` or remove "Plus" if we keep new layout.
-
-  const plusIcon = hasPlusIcon ? React__default.createElement(PlusIcon, null) : undefined; // TODO: Always use "New content" here if we fully switch to new layout.
-
-  const contentTypesLabel = useExperimentalStyles ? 'New content' : undefined;
-  const styles = useExperimentalStyles ? redesignStyles : standardStyles;
-  return React__default.createElement(CreateEntryMenuTrigger, {
-    contentTypes: contentTypes,
-    suggestedContentTypeId: suggestedContentTypeId,
-    contentTypesLabel: contentTypesLabel,
-    onSelect: onSelect,
-    testId: testId,
-    dropdownSettings: dropdownSettings,
-    customDropdownItems: customDropdownItems
-  }, ({
-    isSelecting
-  }) => React__default.createElement(Button, {
-    endIcon: hasDropdown ? React__default.createElement(ChevronDownIcon, null) : undefined,
-    variant: "secondary",
-    className: styles.action,
-    isDisabled: disabled || isSelecting,
-    startIcon: isSelecting ? undefined : plusIcon,
-    size: "small",
-    testId: "create-entry-link-button",
-    isLoading: isSelecting
-  }, buttonText));
-};
-
-function NoLinkPermissionsInfo() {
-  return React__default.createElement(Paragraph, null, "You don't have permission to view this content or this field is not correctly configured. Contact your administrator for help.");
-}
-
-const container = /*#__PURE__*/css({
-  display: 'flex',
-  width: '100%',
-  marginTop: tokens.spacingS
-});
-const separator = /*#__PURE__*/css({
-  marginRight: tokens.spacingXl
-});
-
-const defaultEntryLabels = {
-  createNew: props => props != null && props.contentType ? `Create new ${props.contentType} and link` : 'Create new entry and link',
-  linkExisting: props => props != null && props.canLinkMultiple ? 'Link existing entries' : 'Link existing entry'
-};
-const defaultAssetLabels = {
-  createNew: () => `Create new asset and link`,
-  linkExisting: props => props != null && props.canLinkMultiple ? 'Link existing assets' : 'Link existing asset'
-};
-const testIds = {
-  dropdown: 'linkEditor.dropdown',
-  createAndLink: 'linkEditor.createAndLink',
-  createAndLinkWrapper: 'create-entry-button-menu-trigger',
-  linkExisting: 'linkEditor.linkExisting'
-};
-function LinkActions(props) {
-  if (props.isFull) {
-    return null; // Don't render link actions if we reached max allowed links.
-  }
-
-  const defaultLabels = props.entityType === 'Entry' ? defaultEntryLabels : defaultAssetLabels;
-  const labels = { ...defaultLabels,
-    ...props.actionLabels
-  };
-  return createElement("div", {
-    className: container
-  }, props.canCreateEntity && createElement(Fragment, null, props.entityType === 'Entry' && createElement(CreateEntryLinkButton, {
-    testId: testIds.createAndLink,
-    disabled: props.isDisabled,
-    text: labels.createNew({
-      contentType: props.contentTypes.length === 1 ? props.contentTypes[0].name : undefined
-    }),
-    contentTypes: props.contentTypes,
-    hasPlusIcon: true,
-    onSelect: contentTypeId => {
-      return contentTypeId ? props.onCreate(contentTypeId, props.itemsLength) : Promise.resolve();
-    }
-  }), props.entityType === 'Asset' && createElement(Button, {
-    isDisabled: props.isDisabled,
-    testId: testIds.createAndLink,
-    onClick: () => {
-      props.onCreate(undefined, props.itemsLength);
-    },
-    variant: "secondary",
-    startIcon: createElement(PlusIcon, null),
-    size: "small"
-  }, labels.createNew()), createElement("span", {
-    className: separator
-  })), props.canLinkEntity && createElement(Button, {
-    isDisabled: props.isDisabled,
-    testId: testIds.linkExisting,
-    onClick: () => {
-      props.onLinkExisting();
-    },
-    variant: "secondary",
-    startIcon: createElement(LinkIcon, null),
-    size: "small"
-  }, labels.linkExisting({
-    canLinkMultiple: props.canLinkMultiple
-  })), !props.canCreateEntity && !props.canLinkEntity && createElement(NoLinkPermissionsInfo, null));
-}
-
-const container$1 = /*#__PURE__*/css({
-  display: 'flex',
-  border: `1px dashed ${tokens.gray500}`,
-  borderRadius: tokens.borderRadiusMedium,
-  justifyContent: 'center',
-  padding: tokens.spacingXl
-});
-const action = /*#__PURE__*/css({
-  textDecoration: 'none',
-  fontWeight: 'bold'
-});
-
-const testIds$1 = { ...testIds,
-  actionsWrapper: 'link-actions-menu-trigger'
-};
-/**
- * Alternative, experimental alternative to <LinkActions /> that is planned to
- * replace the current default LinkActions in reference and media editors.
- *
- * Places both actions to create and link new, as well as link existing, behind
- * one action dropdown and introduces new copy for action labels.
- */
-
-function CombinedLinkActions(props) {
-  if (props.isFull) {
-    return null; // Don't render link actions if we reached max allowed links.
-  } // We don't want to render a spacious container in case there are are already
-  // assets linked (in case of entries, always show it) as the border wouldn't be
-  // nicely aligned with asset cards.
-
-
-  const hideEmptyCard = props.entityType === 'Asset' && !props.isEmpty;
-  return createElement("div", {
-    className: hideEmptyCard ? '' : container$1
-  }, !props.canCreateEntity && !props.canLinkEntity && createElement(NoLinkPermissionsInfo, null), props.entityType === 'Entry' && createElement(CombinedEntryLinkActions, { ...props
-  }), props.entityType === 'Asset' && createElement(CombinedAssetLinkActions, { ...props
-  }));
-}
-
-function CombinedEntryLinkActions(props) {
-  if (props.canCreateEntity) {
-    return createElement(CreateEntryLinkButton, {
-      testId: testIds$1.actionsWrapper,
-      disabled: props.isDisabled,
-      text: props.combinedActionsLabel || 'Add content',
-      contentTypes: props.contentTypes,
-      hasPlusIcon: true,
-      useExperimentalStyles: true,
-      dropdownSettings: {
-        position: 'bottom-left'
-      },
-      onSelect: contentTypeId => {
-        return contentTypeId ? props.onCreate(contentTypeId) : Promise.resolve();
-      },
-      customDropdownItems: props.canLinkEntity ? createElement(Menu.Item, {
-        testId: testIds$1.linkExisting,
-        onClick: () => {
-          props.onLinkExisting();
-        }
-      }, "Add existing content") : undefined
-    });
-  } else if (props.canLinkEntity) {
-    return createElement(Button, {
-      isDisabled: props.isDisabled,
-      testId: testIds$1.linkExisting,
-      className: action,
-      onClick: () => {
-        props.onLinkExisting();
-      },
-      variant: "secondary",
-      startIcon: createElement(LinkIcon, null),
-      size: "small"
-    }, "Add existing content");
-  }
-
-  return null;
-}
-
-function CombinedAssetLinkActions(props) {
-  const [isOpen, setOpen] = useState(false);
-
-  if (!props.canLinkEntity || !props.canCreateEntity) {
-    if (props.canLinkEntity) {
-      return createElement(Button, {
-        isDisabled: props.isDisabled,
-        testId: testIds$1.linkExisting,
-        className: action,
-        onClick: () => {
-          props.onLinkExisting();
-        },
-        variant: "secondary",
-        startIcon: createElement(PlusIcon, null),
-        size: "small"
-      }, "Add existing media");
-    }
-
-    if (props.canCreateEntity) {
-      return createElement(Button, {
-        isDisabled: props.isDisabled,
-        testId: testIds$1.createAndLink,
-        className: action,
-        onClick: () => {
-          props.onCreate();
-        },
-        variant: "secondary",
-        startIcon: createElement(PlusIcon, null),
-        size: "small"
-      }, "Add media");
-    }
-
-    return null;
-  } // TODO: If we fully switch to this new layout, make a more generic `CreateEntityLinkButton`
-  //  that works without content types to cover asset use-case.
-
-
-  return createElement(Menu, {
-    isOpen: isOpen,
-    onClose: () => {
-      setOpen(false);
-    },
-    onOpen: () => {
-      setOpen(true);
-    }
-  }, createElement(Menu.Trigger, null, createElement(Button, {
-    endIcon: createElement(ChevronDownIcon, null),
-    isDisabled: props.isDisabled,
-    testId: testIds$1.actionsWrapper,
-    className: action,
-    variant: "secondary",
-    startIcon: createElement(PlusIcon, null),
-    size: "small"
-  }, "Add media")), isOpen && createElement(Menu.List, {
-    testId: testIds$1.dropdown
-  }, createElement(Menu.Item, {
-    testId: testIds$1.linkExisting,
-    onClick: () => {
-      props.onLinkExisting();
-    }
-  }, "Add existing media"), createElement(Menu.Item, {
-    testId: testIds$1.createAndLink,
-    onClick: () => {
-      props.onCreate();
-    }
-  }, "Add new media")));
-}
-
-const card = /*#__PURE__*/css({
-  position: 'relative'
-});
-const squareCard = /*#__PURE__*/css({
-  display: 'flex',
-  alignItems: 'center',
-  width: '135px',
-  height: '160px',
-  textAlign: 'center'
-});
-
-function MissingEntityCard(props) {
-  return React__default.createElement(Card, {
-    className: card,
-    testId: "cf-ui-missing-entry-card"
-  }, React__default.createElement(Flex, {
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, React__default.createElement("div", {
-    className: props.asSquare ? squareCard : ''
-  }, React__default.createElement(SectionHeading, {
-    marginBottom: "none"
-  }, props.entityType, " is missing or inaccessible")), !props.isDisabled && props.onRemove && React__default.createElement(IconButton, {
-    variant: "transparent",
-    icon: React__default.createElement(CloseIcon, {
-      variant: "muted"
-    }),
-    "aria-label": "Delete",
-    onClick: () => {
-      props.onRemove && props.onRemove();
-    }
-  })));
-}
-
-const getContentTypeIds = contentTypes => contentTypes.map(ct => ct.sys.id);
-
-async function createEntity(props) {
-  if (props.entityType === 'Entry') {
-    if (!props.contentTypeId) {
-      return {};
-    }
-
-    const {
-      entity,
-      slide
-    } = await props.sdk.navigator.openNewEntry(props.contentTypeId, {
-      slideIn: true
-    });
-    return {
-      entity,
-      slide
-    };
-  } else {
-    const {
-      entity,
-      slide
-    } = await props.sdk.navigator.openNewAsset({
-      slideIn: true
-    });
-    return {
-      entity,
-      slide
-    };
-  }
-}
-async function selectSingleEntity(props) {
-  if (props.entityType === 'Entry') {
-    return await props.sdk.dialogs.selectSingleEntry({
-      locale: props.sdk.field.locale,
-      contentTypes: getContentTypeIds(props.editorPermissions.readableContentTypes)
-    });
-  } else {
-    return props.sdk.dialogs.selectSingleAsset({
-      locale: props.sdk.field.locale,
-      mimetypeGroups: props.editorPermissions.validations.mimetypeGroups
-    });
-  }
-}
-async function selectMultipleEntities(props) {
-  var _props$editorPermissi, _props$editorPermissi2;
-
-  const value = props.sdk.field.getValue();
-  const linkCount = Array.isArray(value) ? value.length : value ? 1 : 0; // TODO: Why not always set `min: 1` by default? Does it make sense to enforce
-  //  user to select as many entities as the field's "min" requires? What if e.g.
-  // "min" is 4 and the user wants to insert 2 entities first, then create 2 new ones?
-
-  const min = Math.max((((_props$editorPermissi = props.editorPermissions.validations.numberOfLinks) == null ? void 0 : _props$editorPermissi.min) || 1) - linkCount, 1); // TODO: Consider same for max. If e.g. "max" is 4, we disable the button if the
-  //  user wants to select 5 but we show no information why the button is disabled.
-
-  const max = (((_props$editorPermissi2 = props.editorPermissions.validations.numberOfLinks) == null ? void 0 : _props$editorPermissi2.max) || +Infinity) - linkCount;
-
-  if (props.entityType === 'Entry') {
-    return await props.sdk.dialogs.selectMultipleEntries({
-      locale: props.sdk.field.locale,
-      contentTypes: getContentTypeIds(props.editorPermissions.readableContentTypes),
-      min,
-      max
-    });
-  } else {
-    return props.sdk.dialogs.selectMultipleAssets({
-      locale: props.sdk.field.locale,
-      mimetypeGroups: props.editorPermissions.validations.mimetypeGroups,
-      min,
-      max
-    });
-  }
-}
-
-function useLinkActionsProps(props) {
-  var _editorPermissions$va;
-
-  const {
-    sdk,
-    editorPermissions,
-    entityType,
-    canLinkMultiple,
-    isDisabled,
-    actionLabels,
-    itemsLength
-  } = props;
-  const maxLinksCount = (_editorPermissions$va = editorPermissions.validations.numberOfLinks) == null ? void 0 : _editorPermissions$va.max;
-  const value = sdk.field.getValue();
-  const linkCount = Array.isArray(value) ? value.length : value ? 1 : 0;
-  const isFull = !!maxLinksCount && maxLinksCount <= linkCount;
-  const isEmpty = linkCount === 0;
-  const onCreated = useCallback((entity, index = itemsLength, slide) => {
-    props.onCreate(entity.sys.id, index);
-    props.onAction && props.onAction({
-      type: 'create_and_link',
-      entity: entityType,
-      entityData: entity,
-      slide,
-      index
-    });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [entityType, props.onCreate, props.onAction]);
-  const onLinkedExisting = useCallback((entities, index = itemsLength) => {
-    props.onLink(entities.map(item => item.sys.id), index);
-    entities.forEach((entity, i) => {
-      props.onAction && props.onAction({
-        type: 'select_and_link',
-        entity: entityType,
-        entityData: entity,
-        index: index === undefined ? undefined : index + i
-      });
-    });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [entityType, props.onLink, props.onAction]);
-  const onCreate = useCallback(async (contentTypeId, index) => {
-    const {
-      entity,
-      slide
-    } = await createEntity({
-      sdk,
-      entityType,
-      contentTypeId
-    });
-
-    if (!entity) {
-      return;
-    }
-
-    onCreated(entity, index, slide);
-  }, [sdk, entityType, onCreated]);
-  const onLinkExisting = useCallback(async index => {
-    const entity = await selectSingleEntity({
-      sdk,
-      entityType,
-      editorPermissions
-    });
-
-    if (!entity) {
-      return;
-    }
-
-    onLinkedExisting([entity], index);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [sdk, entityType, onLinkedExisting]);
-  const onLinkSeveralExisting = useCallback(async index => {
-    const entities = await selectMultipleEntities({
-      sdk,
-      entityType,
-      editorPermissions
-    });
-
-    if (!entities || entities.length === 0) {
-      return;
-    }
-
-    onLinkedExisting(entities, index);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [sdk, entityType, onLinkedExisting]); // FIXME: The memoization might rerun every time due to the always changing callback identities above
-
-  return useMemo(() => ({
-    entityType,
-    canLinkMultiple,
-    isDisabled,
-    isEmpty,
-    isFull,
-    canCreateEntity: editorPermissions.canCreateEntity,
-    canLinkEntity: editorPermissions.canLinkEntity,
-    contentTypes: editorPermissions.creatableContentTypes,
-    onCreate,
-    onLinkExisting: canLinkMultiple ? onLinkSeveralExisting : onLinkExisting,
-    actionLabels,
-    onCreated,
-    onLinkedExisting,
-    itemsLength
-  }), // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [entityType, canLinkMultiple, isDisabled, isEmpty, isFull, editorPermissions.canCreateEntity, editorPermissions.canLinkEntity, actionLabels, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  editorPermissions.creatableContentTypes.map(ct => ct.sys.id).join(':'), onCreate, onLinkExisting, onLinkSeveralExisting, onCreated, onLinkedExisting, itemsLength]);
-}
-function LinkEntityActions({
-  renderCustomActions,
-  ...props
-}) {
-  return renderCustomActions ? renderCustomActions(props) : createElement(LinkActions, { ...props
-  });
-}
-function CombinedLinkEntityActions({
-  renderCustomActions,
-  ...props
-}) {
-  return renderCustomActions ? renderCustomActions(props) : createElement(CombinedLinkActions, { ...props
-  });
-}
-
-// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
-/**
- * @param {Date|string} date A valid constructor argument for moment()
- * @param {boolean=} short Render only Today/Tomorrow/Yesterday if valid. Defaults to false
- */
-
-const formatDate = (date, short) => {
-  switch (moment().startOf('day').diff(moment(date).startOf('day'), 'days')) {
-    case 0:
-      return short ? 'Today' : `Today, ${moment(date).format('DD MMM YYYY')}`;
-
-    case -1:
-      return short ? 'Tomorrow' : `Tomorrow, ${moment(date).format('DD MMM YYYY')}`;
-
-    case 1:
-      return short ? 'Yesterday' : `Yesterday, ${moment(date).format('DD MMM YYYY')}`;
-
-    default:
-      return moment(date).format('ddd, DD MMM YYYY');
-  }
-};
-/**
- * Returns the time portion of a date in the local time in the format H:MM AM/PM
- *
- * == Examples
- * * `T15:36:45.000Z` => 3:36 PM (if in +0:00 offset)
- */
-
-const formatTime = date => {
-  return moment.utc(date).local().format('h:mm A');
-};
-const formatDateAndTime = (date, short) => {
-  return `${formatDate(date, short)} at ${formatTime(date)}`;
-};
-
-const getScheduleTooltipContent = ({
-  job,
-  jobsCount
-}) => {
-  return `Will ${job.action.toLowerCase()} ${formatDateAndTime(job.scheduledFor.datetime).toLowerCase()}
-  ${jobsCount > 1 ? `+ ${jobsCount - 1} more` : ''}`;
-};
-const ScheduleTooltip = ({
-  job,
-  jobsCount,
-  children
-}) => {
-  return React__default.createElement(Tooltip, {
-    placement: "top",
-    testId: job.sys.id,
-    as: "div",
-    content: getScheduleTooltipContent({
-      job,
-      jobsCount
-    })
-  }, children);
-};
-
-const ScheduledIconWithTooltip = ({
-  entityType,
-  entityId,
-  getEntityScheduledActions,
-  children
-}) => {
-  const [status, setStatus] = React__default.useState({
-    type: 'loading'
-  });
-  React__default.useEffect(() => {
-    getEntityScheduledActions(entityType, entityId).then(data => {
-      setStatus({
-        type: 'loaded',
-        jobs: data
-      });
-    }).catch(e => {
-      setStatus({
-        type: 'error',
-        error: e
-      });
-    }); // This should only be ever called once. Following the eslint hint to add used
-    // dependencies will cause page freeze (infinite loop)
-    // eslint-disable-next-line -- TODO: describe this disable
-  }, []);
-
-  if (status.type === 'loading' || status.type === 'error') {
-    return null;
-  }
-
-  const jobs = status.jobs ?? [];
-
-  if (jobs.length === 0) {
-    return null;
-  }
-
-  const mostRelevantJob = jobs[0];
-  return React__default.createElement(ScheduleTooltip, {
-    job: mostRelevantJob,
-    jobsCount: jobs.length
-  }, children);
-};
-
-const dimensions = {
-  width: 70,
-  height: 70
-};
-function AssetThumbnail(props) {
-  return React__default.createElement("img", {
-    alt: props.file.fileName,
-    src: `${props.file.url}?w=${dimensions.width}&h=${dimensions.height}&fit=thumb`,
-    height: dimensions.height,
-    width: dimensions.width
-  });
-}
-
-const globalQueue = /*#__PURE__*/new PQueue({
-  concurrency: 50
-});
-class UnsupportedError extends Error {
-  constructor(message) {
-    super(message);
-    this.isUnsupportedError = void 0;
-    this.isUnsupportedError = true;
-  }
-
-}
-function isUnsupportedError(value) {
-  return typeof value === 'object' && (value == null ? void 0 : value.isUnsupportedError) === true;
-}
-
-const isEntityQueryKey = queryKey => {
-  return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
-};
-
-async function fetchContentfulEntry(params) {
-  const {
-    urn,
-    fetch,
-    options
-  } = params;
-  const resourceId = urn.split(':', 6)[5];
-  const [, spaceId,, entryId] = resourceId.split('/');
-  const environmentId = 'master';
-  const [space, entry] = await Promise.all([fetch(['space', spaceId], ({
-    cmaClient
-  }) => cmaClient.space.get({
-    spaceId
-  }), options), fetch(['entry', spaceId, environmentId, entryId], ({
-    cmaClient
-  }) => cmaClient.entry.get({
-    spaceId,
-    environmentId,
-    entryId
-  }), options)]);
-  const contentTypeId = entry.sys.contentType.sys.id;
-  const [contentType, defaultLocaleCode] = await Promise.all([fetch(['contentType', spaceId, environmentId, contentTypeId], ({
-    cmaClient
-  }) => cmaClient.contentType.get({
-    contentTypeId,
-    spaceId,
-    environmentId
-  }), options), fetch(['defaultLocale', spaceId, environmentId], async ({
-    cmaClient
-  }) => {
-    var _locales$items$find;
-
-    const locales = await cmaClient.locale.getMany({
-      spaceId,
-      environmentId,
-      query: {
-        limit: 100
-      }
-    });
-    const defaultLocaleCode = (_locales$items$find = locales.items.find(locale => locale.default)) == null ? void 0 : _locales$items$find.code;
-    return defaultLocaleCode;
-  }, options)]);
-  return {
-    defaultLocaleCode,
-    resource: entry,
-    space: space,
-    contentType: contentType
-  };
-}
-
-const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = /*#__PURE__*/constate(function useInitServices(props) {
-  const currentSpaceId = props.sdk.ids.space;
-  const currentEnvironmentId = props.sdk.ids.environmentAlias ?? props.sdk.ids.environment;
-  const environmentIds = useMemo(() => [props.sdk.ids.environmentAlias, props.sdk.ids.environment], [props.sdk.ids.environmentAlias, props.sdk.ids.environment]);
-  const queryClient = useQueryClient();
-  const queryCache = queryClient.getQueryCache();
-  const entityChangeUnsubscribers = useRef({});
-  const cmaClient = useMemo(() => createClient({
-    apiAdapter: props.sdk.cmaAdapter
-  }, {
-    type: 'plain'
-  }), [props.sdk.cmaAdapter]);
-  const queryQueue = useMemo(() => {
-    if (props.queryConcurrency) {
-      return new PQueue({
-        concurrency: props.queryConcurrency
-      });
-    }
-
-    return globalQueue;
-  }, [props.queryConcurrency]);
-  const fetch = useCallback(function fetch(queryKey, fn, options = {}) {
-    const {
-      priority,
-      ...queryOptions
-    } = options;
-    return queryClient.fetchQuery(queryKey, () => queryQueue.add(() => fn({
-      cmaClient
-    }), {
-      priority
-    }), queryOptions);
-  }, [queryClient, queryQueue, cmaClient]);
-  const getEntity = useCallback(function getEntity(entityType, entityId, options) {
-    const spaceId = (options == null ? void 0 : options.spaceId) ?? currentSpaceId;
-    const environmentId = (options == null ? void 0 : options.environmentId) ?? currentEnvironmentId;
-    const queryKey = [entityType, entityId, spaceId, environmentId];
-    return fetch(queryKey, ({
-      cmaClient
-    }) => {
-      if (entityType === 'Entry') {
-        return cmaClient.entry.get({
-          entryId: entityId,
-          spaceId,
-          environmentId
-        });
-      }
-
-      if (entityType === 'Asset') {
-        return cmaClient.asset.get({
-          assetId: entityId,
-          spaceId,
-          environmentId
-        });
-      }
-
-      throw new UnsupportedError('Unsupported entity type');
-    }, options);
-  }, [fetch, currentSpaceId, currentEnvironmentId]);
-  /**
-   * Fetch all scheduled actions for a given entity.
-   * This function fetches all schedules for all entries and then returns
-   * a filtered result based on the entityID provided.
-   *
-   * The result is then reused/cached for subsequent calls to this function.
-   */
-
-  const getEntityScheduledActions = useCallback(function getEntityScheduledActions(entityType, entityId, options) {
-    // This is fixed to force the cache to reuse previous results
-    const fixedEntityCacheId = 'scheduledActionEntityId'; // A space+environment combo can only have up to 500 scheduled actions
-    // With this request we fetch all schedules and can reuse the results.
-    // See https://www.contentful.com/developers/docs/references/content-management-api/#/reference/scheduled-actions/limitations
-
-    const maxScheduledActions = 500;
-    const spaceId = (options == null ? void 0 : options.spaceId) ?? currentSpaceId;
-    const environmentId = (options == null ? void 0 : options.environmentId) ?? currentEnvironmentId;
-    const queryKey = ['scheduled-actions', entityType, fixedEntityCacheId, spaceId, environmentId]; // Fetch + Filter by entity ID in the end
-
-    return fetch(queryKey, async ({
-      cmaClient
-    }) => {
-      const response = await cmaClient.scheduledActions.getMany({
-        spaceId,
-        query: {
-          'environment.sys.id': environmentId,
-          'sys.status[in]': 'scheduled',
-          order: 'scheduledFor.datetime',
-          limit: maxScheduledActions
-        }
-      });
-      return response.items;
-    }, options).then(items => items.filter(action => action.entity.sys.id === entityId));
-  }, [fetch, currentSpaceId, currentEnvironmentId]);
-  const getResource = useCallback(function getResource(resourceType, urn, options) {
-    const queryKey = ['Resource', resourceType, urn];
-    return fetch(queryKey, () => {
-      if (resourceType === 'Contentful:Entry') {
-        return fetchContentfulEntry({
-          fetch,
-          urn,
-          options
-        });
-      }
-
-      throw new UnsupportedError('Unsupported resource type');
-    }, options);
-  }, [fetch]);
-  const isSameSpaceEntityQueryKey = useCallback(queryKey => {
-    const isEntityKey = isEntityQueryKey(queryKey);
-    const isSameSpaceEntityKey = isEntityKey && queryKey[2] === currentSpaceId && environmentIds.includes(queryKey[3]);
-    return isSameSpaceEntityKey;
-  }, [currentSpaceId, environmentIds]); // @ts-expect-error ...
-
-  const onEntityChanged = props.sdk.space.onEntityChanged;
-  const onSlideInNavigation = props.sdk.navigator.onSlideInNavigation;
-  useEffect(() => {
-    function findSameSpaceQueries() {
-      return queryCache.findAll({
-        type: 'active',
-        predicate: query => isSameSpaceEntityQueryKey(query.queryKey)
-      });
-    }
-
-    if (typeof onEntityChanged !== 'function') {
-      return onSlideInNavigation(({
-        oldSlideLevel,
-        newSlideLevel
-      }) => {
-        if (oldSlideLevel > newSlideLevel) {
-          findSameSpaceQueries().forEach(query => {
-            // automatically refetches the query
-            void queryClient.invalidateQueries(query.queryKey);
-          });
-        }
-      });
-    }
-
-    const subscribeQuery = ({
-      queryKey,
-      queryHash
-    }) => {
-      const [entityType, entityId] = queryKey;
-      entityChangeUnsubscribers.current[queryHash] = onEntityChanged(entityType, entityId, data => {
-        queryClient.setQueryData(queryKey, data);
-      });
-    };
-
-    findSameSpaceQueries().forEach(subscribeQuery);
-    const unsubscribe = queryCache.subscribe(event => {
-      if (!event) {
-        return;
-      }
-
-      const {
-        type,
-        query
-      } = event;
-      const {
-        queryKey,
-        queryHash
-      } = query;
-
-      if (!isSameSpaceEntityQueryKey(queryKey)) {
-        return;
-      }
-
-      if (type === 'added') {
-        subscribeQuery(query);
-      }
-
-      if (type === 'removed') {
-        var _entityChangeUnsubscr, _entityChangeUnsubscr2;
-
-        // calling unsubscribe
-        (_entityChangeUnsubscr = (_entityChangeUnsubscr2 = entityChangeUnsubscribers.current)[queryHash]) == null ? void 0 : _entityChangeUnsubscr.call(_entityChangeUnsubscr2);
-      }
-    });
-    return () => {
-      unsubscribe();
-      Object.values(entityChangeUnsubscribers.current).forEach(off => off());
-      entityChangeUnsubscribers.current = {};
-    };
-  }, [onEntityChanged, queryCache, isSameSpaceEntityQueryKey, queryClient, getEntity, onSlideInNavigation]);
-  return {
-    ids: props.sdk.ids,
-    cmaClient,
-    fetch,
-    getResource,
-    getEntity,
-    getEntityScheduledActions
-  };
-}, ({
-  fetch
-}) => fetch, ({
-  getResource,
-  getEntity,
-  getEntityScheduledActions
-}) => ({
-  getResource,
-  getEntity,
-  getEntityScheduledActions
-}), ({
-  ids
-}) => ({
-  environment: ids.environmentAlias ?? ids.environment,
-  space: ids.space
-}));
-function useEntity(entityType, entityId, options) {
-  const {
-    space,
-    environment
-  } = useCurrentIds();
-  const {
-    getEntity
-  } = useEntityLoader();
-  const queryKey = [entityType, entityId, (options == null ? void 0 : options.spaceId) ?? space, (options == null ? void 0 : options.environmentId) ?? environment];
-  const {
-    status,
-    data
-  } = useQuery(queryKey, () => getEntity(entityType, entityId, options), {
-    enabled: options == null ? void 0 : options.enabled
-  });
-  return {
-    status,
-    data
-  };
-}
-function useResource(resourceType, urn, options) {
-  const queryKey = ['Resource', resourceType, urn];
-  const {
-    getResource
-  } = useEntityLoader();
-  const {
-    status,
-    data,
-    error
-  } = useQuery(queryKey, () => getResource(resourceType, urn, options), {
-    enabled: options == null ? void 0 : options.enabled
-  });
-  return {
-    status,
-    data,
-    error
-  };
-}
-
-function EntityProvider({
-  children,
-  ...props
-}) {
-  const reactQueryClient = useMemo(() => {
-    const queryCache = new QueryCache();
-    const queryClient = new QueryClient({
-      queryCache,
-      defaultOptions: {
-        queries: {
-          useErrorBoundary: false,
-          refetchOnWindowFocus: false,
-          refetchOnReconnect: true,
-          refetchOnMount: false,
-          staleTime: Infinity,
-          retry: false
-        }
-      }
-    });
-    return queryClient;
-  }, []);
-  return React__default.createElement(QueryClientProvider, {
-    client: reactQueryClient
-  }, React__default.createElement(InternalServiceProvider, { ...props
-  }, children));
-}
-
-function ReferenceEditor(props) {
-  return createElement(EntityProvider, {
-    sdk: props.sdk
-  }, createElement(FieldConnector, {
-    throttle: 0,
-    field: props.sdk.field,
-    isInitiallyDisabled: props.isInitiallyDisabled,
-    isEqualValues: (value1, value2) => {
-      return deepEqual(value1, value2);
-    }
-  }, props.children));
-}
-ReferenceEditor.defaultProps = {
-  isInitiallyDisabled: true,
-  hasCardEditActions: true
-};
-
-function fromFieldValidations(field) {
-  var _field$items;
-
-  // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
-  const validations = [...field.validations, ...(((_field$items = field.items) == null ? void 0 : _field$items.validations) ?? [])];
-  const linkContentTypeValidations = validations.find(v => 'linkContentType' in v);
-  const linkMimetypeGroupValidations = validations.find(v => 'linkMimetypeGroup' in v);
-  const sizeValidations = validations.find(v => 'size' in v);
-  const size = sizeValidations && sizeValidations.size || {};
-  const min = size.min;
-  const max = size.max;
-  let numberOfLinks = undefined;
-
-  if (isNumber(min) && isNumber(max)) {
-    numberOfLinks = {
-      type: 'min-max',
-      min,
-      max
-    };
-  } else if (isNumber(min)) {
-    numberOfLinks = {
-      type: 'min',
-      min,
-      max: undefined
-    };
-  } else if (isNumber(max)) {
-    numberOfLinks = {
-      type: 'max',
-      max,
-      min: undefined
-    };
-  }
-
-  const result = {
-    contentTypes: (linkContentTypeValidations == null ? void 0 : linkContentTypeValidations.linkContentType) ?? undefined,
-    mimetypeGroups: (linkMimetypeGroupValidations == null ? void 0 : linkMimetypeGroupValidations.linkMimetypeGroup) ?? undefined,
-    numberOfLinks // todo: there are multiple BE problems that need to be solved first, for now we don't want to apply size constraints
-    // linkedFileSize: findValidation(field, 'assetFileSize', {}),
-    // linkedImageDimensions: findValidation(field, 'assetImageDimensions', {})
-
-  };
-  return result;
-}
-
-const AllowActionsOnContentType = () => Promise.resolve(true);
-
-function useAccessApi(accessApi) {
-  const canPerformAction = accessApi.can;
-  const canPerformActionOnEntryOfType = accessApi.canPerformActionOnEntryOfType ?? AllowActionsOnContentType;
-  return {
-    canPerformAction,
-    canPerformActionOnEntryOfType
-  };
-}
-
-async function filter(arr, predicate) {
-  // intentionally parallel as we assume it's cached in the implementation of the access api
-  const fail = Symbol();
-  const results = await Promise.all(arr.map(async item => (await predicate(item)) ? item : fail));
-  return results.filter(x => x !== fail);
-}
-
-function useContentTypePermissions(props) {
-  const availableContentTypes = useMemo(() => {
-    if (props.entityType === 'Asset') {
-      return [];
-    }
-
-    if (props.validations.contentTypes) {
-      return props.allContentTypes.filter(ct => {
-        var _props$validations$co;
-
-        return (_props$validations$co = props.validations.contentTypes) == null ? void 0 : _props$validations$co.includes(ct.sys.id);
-      });
-    }
-
-    return props.allContentTypes;
-  }, [props.allContentTypes, props.validations.contentTypes, props.entityType]);
-  const [creatableContentTypes, setCreatableContentTypes] = useState(availableContentTypes);
-  const [readableContentTypes, setReadableContentTypes] = useState(availableContentTypes);
-  const {
-    canPerformActionOnEntryOfType
-  } = useAccessApi(props.sdk.access);
-  useEffect(() => {
-    function getContentTypes(action) {
-      return filter(availableContentTypes, ct => canPerformActionOnEntryOfType(action, ct.sys.id));
-    }
-
-    async function checkContentTypeAccess() {
-      const creatable = await getContentTypes('create');
-      const readable = await getContentTypes('read');
-      setCreatableContentTypes(creatable);
-      setReadableContentTypes(readable);
-    }
-
-    void checkContentTypeAccess(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [availableContentTypes]);
-  return {
-    creatableContentTypes,
-    readableContentTypes,
-    availableContentTypes
-  };
-}
-
-function useEditorPermissions(props) {
-  const {
-    sdk,
-    entityType,
-    parameters
-  } = props;
-  const validations = useMemo(() => fromFieldValidations(props.sdk.field), [props.sdk.field]);
-  const [canCreateEntity, setCanCreateEntity] = useState(true);
-  const [canLinkEntity, setCanLinkEntity] = useState(true);
-  const {
-    creatableContentTypes,
-    readableContentTypes,
-    availableContentTypes
-  } = useContentTypePermissions({ ...props,
-    validations
-  });
-  const {
-    canPerformAction
-  } = useAccessApi(sdk.access);
-  useEffect(() => {
-    if (parameters.instance.showCreateEntityAction === false) {
-      setCanCreateEntity(false);
-      return;
-    }
-
-    async function checkCreateAccess() {
-      if (entityType === 'Asset') {
-        // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
-        // TODO: refine permissions check in order to account for tags in rules
-        const canCreate = (await canPerformAction('create', 'Asset')) || true;
-        setCanCreateEntity(canCreate);
-      }
-
-      if (entityType === 'Entry') {
-        // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
-        // TODO: refine permissions check in order to account for tags in rules
-        const canCreate = creatableContentTypes.length > 0 || true;
-        setCanCreateEntity(canCreate);
-      }
-    }
-
-    void checkCreateAccess(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [entityType, parameters.instance, creatableContentTypes]);
-  useEffect(() => {
-    if (parameters.instance.showLinkEntityAction === false) {
-      setCanLinkEntity(false);
-      return;
-    }
-
-    async function checkLinkAccess() {
-      if (entityType === 'Asset') {
-        // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
-        // TODO: refine permissions check in order to account for tags in rules
-        const canRead = (await canPerformAction('read', 'Asset')) || true;
-        setCanLinkEntity(canRead);
-      }
-
-      if (entityType === 'Entry') {
-        // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
-        // TODO: refine permissions check in order to account for tags in rules
-        // TODO: always show every content type (it's just a filter) to avoid people not seeing
-        // their (partly limited) content types
-        const canRead = true;
-        setCanLinkEntity(canRead);
-      }
-    }
-
-    void checkLinkAccess(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [entityType, parameters.instance, readableContentTypes]);
-  return {
-    canCreateEntity,
-    canLinkEntity,
-    creatableContentTypes,
-    readableContentTypes,
-    availableContentTypes,
-    validations
-  };
-}
-
-function Editor(props) {
-  const {
-    setValue,
-    entityType
-  } = props;
-  const editorPermissions = useEditorPermissions(props);
-  const onCreate = useCallback(id => void setValue({
-    sys: {
-      type: 'Link',
-      linkType: entityType,
-      id
-    }
-  }), [setValue, entityType]);
-  const onLink = useCallback(ids => {
-    const [id] = ids;
-    setValue({
-      sys: {
-        type: 'Link',
-        linkType: entityType,
-        id
-      }
-    });
-  }, [setValue, entityType]);
-  const linkActionsProps = useLinkActionsProps({ ...props,
-    canLinkMultiple: false,
-    editorPermissions,
-    onCreate,
-    onLink
-  }); // Inject card actions props into the given custom card renderer
-
-  const customCardRenderer = useCallback((cardProps, _, renderDefaultCard) => props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [linkActionsProps]);
-
-  if (!props.entityId) {
-    return createElement(LinkEntityActions, {
-      renderCustomActions: props.renderCustomActions,
-      ...linkActionsProps
-    });
-  }
-
-  return props.children({ ...props,
-    renderCustomCard: props.renderCustomCard && customCardRenderer
-  });
-}
-
-function SingleReferenceEditor(props) {
-  const allContentTypes = props.sdk.space.getCachedContentTypes();
-  return createElement(ReferenceEditor, { ...props
-  }, ({
-    value,
-    setValue,
-    disabled,
-    externalReset
-  }) => {
-    return createElement(Editor, { ...props,
-      key: `${externalReset}-reference`,
-      entityId: value ? value.sys.id : '',
-      isDisabled: disabled,
-      setValue: setValue,
-      allContentTypes: allContentTypes
-    });
-  });
-}
-SingleReferenceEditor.defaultProps = {
-  hasCardEditActions: true,
-  hasCardRemoveActions: true
-};
-
-const styles$1 = {
-  spaceIcon: /*#__PURE__*/css({
-    flexShrink: 0,
-    fill: tokens.purple600
-  }),
-  spaceName: /*#__PURE__*/css({
-    color: tokens.gray700,
-    fontSize: tokens.fontSizeS,
-    fontWeight: tokens.fontWeightDemiBold,
-    maxWidth: '80px',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  })
-};
-function SpaceName(props) {
-  return createElement(Tooltip, {
-    placement: "top",
-    as: "div",
-    content: `Space: ${props.spaceName}`
-  }, createElement(Flex, {
-    alignItems: "center",
-    gap: "spacingXs",
-    marginRight: "spacingS"
-  }, createElement(FolderOpenTrimmedIcon, {
-    className: styles$1.spaceIcon,
-    size: "tiny",
-    "aria-label": "Source space"
-  }), createElement(Text, {
-    className: styles$1.spaceName
-  }, props.spaceName)));
-}
-
-const {
-  getEntryTitle,
-  getEntityDescription,
-  getEntryStatus,
-  getEntryImage
-} = entityHelpers;
-const styles$2 = {
-  scheduleIcon: /*#__PURE__*/css({
-    marginRight: tokens.spacing2Xs
-  })
-};
-const defaultProps = {
-  isClickable: true,
-  hasCardEditActions: true,
-  hasCardMoveActions: true,
-  hasCardRemoveActions: true
-};
-function WrappedEntryCard(props) {
-  var _props$entry;
-
-  const [file, setFile] = useState(null);
-  const {
-    contentType
-  } = props;
-  useEffect(() => {
-    if (props.entry) {
-      getEntryImage({
-        entry: props.entry,
-        contentType,
-        localeCode: props.localeCode,
-        defaultLocaleCode: props.defaultLocaleCode
-      }, props.getAsset).then(file => {
-        setFile(file);
-      }).catch(() => {
-        setFile(null);
-      });
-    }
-  }, [props.entry, props.getAsset, contentType, props.localeCode, props.defaultLocaleCode]);
-  const status = getEntryStatus((_props$entry = props.entry) == null ? void 0 : _props$entry.sys);
-
-  if (status === 'deleted') {
-    return createElement(MissingEntityCard, {
-      entityType: "Entry",
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
-
-  const title = getEntryTitle({
-    entry: props.entry,
-    contentType,
-    localeCode: props.localeCode,
-    defaultLocaleCode: props.defaultLocaleCode,
-    defaultTitle: 'Untitled'
-  });
-  const description = getEntityDescription({
-    entity: props.entry,
-    contentType,
-    localeCode: props.localeCode,
-    defaultLocaleCode: props.defaultLocaleCode
-  });
-  return createElement(EntryCard, {
-    as: props.entryUrl ? 'a' : 'article',
-    href: props.entryUrl,
-    title: title,
-    description: description,
-    contentType: contentType == null ? void 0 : contentType.name,
-    size: props.size,
-    isSelected: props.isSelected,
-    status: status,
-    icon: props.spaceName ? createElement(SpaceName, {
-      spaceName: props.spaceName
-    }) : createElement(ScheduledIconWithTooltip, {
-      getEntityScheduledActions: props.getEntityScheduledActions,
-      entityType: "Entry",
-      entityId: props.entry.sys.id
-    }, createElement(ClockIcon, {
-      className: styles$2.scheduleIcon,
-      size: "small",
-      variant: "muted",
-      testId: "schedule-icon"
-    })),
-    thumbnailElement: file && isValidImage(file) ? createElement(AssetThumbnail, {
-      file: file
-    }) : undefined,
-    dragHandleRender: props.renderDragHandle,
-    withDragHandle: !!props.renderDragHandle,
-    actions: props.onEdit || props.onRemove ? [props.hasCardEditActions && props.onEdit ? createElement(MenuItem, {
-      key: "edit",
-      testId: "edit",
-      onClick: () => {
-        props.onEdit && props.onEdit();
-      }
-    }, "Edit") : null, props.hasCardRemoveActions && props.onRemove ? createElement(MenuItem, {
-      key: "delete",
-      testId: "delete",
-      onClick: () => {
-        props.onRemove && props.onRemove();
-      }
-    }, "Remove") : null, props.hasCardMoveActions && (props.onMoveTop || props.onMoveBottom) ? createElement(MenuDivider, {
-      key: "divider"
-    }) : null, props.hasCardMoveActions && props.onMoveTop ? createElement(MenuItem, {
-      key: "move-top",
-      onClick: () => props.onMoveTop && props.onMoveTop(),
-      testId: "move-top"
-    }, "Move to top") : null, props.hasCardMoveActions && props.onMoveBottom ? createElement(MenuItem, {
-      key: "move-bottom",
-      onClick: () => props.onMoveBottom && props.onMoveBottom(),
-      testId: "move-bottom"
-    }, "Move to bottom") : null].filter(item => item) : [],
-    onClick: // Providing an onClick handler messes up with some rich text
-    // features e.g. pressing ENTER on a card to add a new paragraph
-    // underneath. It's crucial not to pass a custom handler when
-    // isClickable is disabled which in the case of RT it's.
-    props.isClickable ? e => {
-      e.preventDefault();
-      if (props.onClick) return props.onClick(e);
-      props.onEdit && props.onEdit();
-    } : undefined
-  });
-}
-WrappedEntryCard.defaultProps = defaultProps;
-
-async function openEntry(sdk, entryId, options) {
-  let slide;
-
-  if (options.bulkEditing) {
-    try {
-      const result = await sdk.navigator.openBulkEditor(sdk.entry.getSys().id, {
-        fieldId: sdk.field.id,
-        locale: sdk.field.locale,
-        index: options.index ?? 0
-      });
-      slide = result.slide;
-      return slide;
-    } catch (e) {// we don't allow to open multiple bulk editors for performance reasons
-      // proceed with a default openEntry
-    }
-  }
-
-  const result = await sdk.navigator.openEntry(entryId, {
-    slideIn: true
-  });
-  slide = result.slide;
-  return slide;
-}
-
-function FetchingWrappedEntryCard(props) {
-  const {
-    data: entry,
-    status
-  } = useEntity('Entry', props.entryId);
-  const {
-    getEntityScheduledActions
-  } = useEntityLoader();
-  const loadEntityScheduledActions = useCallback(() => getEntityScheduledActions('Entry', props.entryId), [getEntityScheduledActions, props.entryId]);
-  const size = props.viewType === 'link' ? 'small' : 'default';
-  const {
-    getEntity
-  } = useEntityLoader();
-
-  const getAsset = assetId => getEntity('Asset', assetId);
-
-  const onEdit = async () => {
-    const slide = await openEntry(props.sdk, props.entryId, {
-      bulkEditing: props.parameters.instance.bulkEditing,
-      index: props.index
-    });
-    props.onAction && props.onAction({
-      entity: 'Entry',
-      type: 'edit',
-      id: props.entryId,
-      contentTypeId: get(entry, 'sys.contentType.sys.id'),
-      slide
-    });
-  };
-
-  const onRemoveEntry = () => {
-    props.onRemove();
-    props.onAction && props.onAction({
-      entity: 'Entry',
-      type: 'delete',
-      id: props.entryId,
-      contentTypeId: get(entry, 'sys.contentType.sys.id')
-    });
-  };
-
-  useEffect(() => {
-    if (entry) {
-      props.onAction && props.onAction({
-        type: 'rendered',
-        entity: 'Entry'
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-
-  }, [entry]);
-  return useMemo(() => {
-    if (status === 'error') {
-      const card = createElement(MissingEntityCard, {
-        entityType: "Entry",
-        isDisabled: props.isDisabled,
-        onRemove: onRemoveEntry
-      });
-
-      if (props.renderCustomMissingEntityCard) {
-        return props.renderCustomMissingEntityCard({
-          defaultCard: card,
-          entity: {
-            id: props.entryId,
-            type: 'Entry'
-          }
-        });
-      }
-
-      return card;
-    }
-
-    if (status === 'loading') {
-      return createElement(EntryCard, {
-        size: size,
-        isLoading: true
-      });
-    }
-
-    const sharedCardProps = {
-      index: props.index,
-      entity: entry,
-      entityUrl: props.getEntityUrl && props.getEntityUrl(entry.sys.id),
-      contentType: props.allContentTypes.find(contentType => contentType.sys.id === entry.sys.contentType.sys.id),
-      isDisabled: props.isDisabled,
-      size,
-      localeCode: props.sdk.field.locale,
-      defaultLocaleCode: props.sdk.locales.default,
-      renderDragHandle: props.renderDragHandle,
-      onEdit,
-      onRemove: onRemoveEntry,
-      onMoveTop: props.onMoveTop,
-      onMoveBottom: props.onMoveBottom,
-      isBeingDragged: props.isBeingDragged
-    };
-    const {
-      hasCardEditActions,
-      hasCardMoveActions,
-      hasCardRemoveActions
-    } = props;
-
-    function renderDefaultCard(props) {
-      const builtinCardProps = { ...sharedCardProps,
-        ...props,
-        hasCardEditActions,
-        hasCardMoveActions,
-        hasCardRemoveActions,
-        getAsset,
-        getEntityScheduledActions: loadEntityScheduledActions,
-        entry: (props == null ? void 0 : props.entity) || sharedCardProps.entity,
-        entryUrl: (props == null ? void 0 : props.entityUrl) || sharedCardProps.entityUrl
-      };
-      return createElement(WrappedEntryCard, { ...builtinCardProps
-      });
-    }
-
-    if (props.renderCustomCard) {
-      // LinkActionsProps are injected higher SingleReferenceEditor/MultipleReferenceEditor
-      const renderedCustomCard = props.renderCustomCard(sharedCardProps, {}, renderDefaultCard); // Only `false` indicates to render the original card. E.g. `null` would result in no card.
-
-      if (renderedCustomCard !== false) {
-        return renderedCustomCard;
-      }
-    }
-
-    return renderDefaultCard(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [props, status, entry]);
-}
-
-function SingleEntryReferenceEditor(props) {
-  return createElement(SingleReferenceEditor, { ...props,
-    entityType: "Entry"
-  }, ({
-    allContentTypes,
-    isDisabled,
-    entityId,
-    setValue,
-    renderCustomCard,
-    hasCardRemoveActions,
-    hasCardEditActions
-  }) => {
-    return createElement(FetchingWrappedEntryCard, { ...props,
-      allContentTypes: allContentTypes,
-      isDisabled: isDisabled,
-      entryId: entityId,
-      renderCustomCard: renderCustomCard,
-      hasCardEditActions: hasCardEditActions,
-      hasCardRemoveActions: hasCardRemoveActions,
-      onRemove: () => {
-        setValue(null);
-      }
-    });
-  });
-}
-SingleEntryReferenceEditor.defaultProps = {
-  isInitiallyDisabled: true
-};
-
-function onLinkOrCreate(setValue, entityType, items, ids, index = items.length) {
-  const links = ids.map(id => ({
-    sys: {
-      type: 'Link',
-      linkType: entityType,
-      id
-    }
-  }));
-  const newItems = Array.from(items);
-  newItems.splice(index, 0, ...links);
-  setValue(newItems);
-}
-
-const emptyArray = [];
-const nullableValue = {
-  sys: {
-    id: 'null-value'
-  }
-};
-
-function Editor$1(props) {
-  const {
-    setValue,
-    entityType,
-    setIndexToUpdate
-  } = props;
-  const editorPermissions = useEditorPermissions(props);
-  const items = useMemo(() => {
-    return (props.items || []). // If null values have found their way into the persisted
-    // value for the multiref field, replace them with an object
-    // that has the shape of a Link to make the missing entry/asset
-    // card render
-    map(link => link || nullableValue);
-  }, [props.items]);
-  const onSortStart = useCallback((_, event) => {
-    if (event instanceof MouseEvent) {
-      document.body.classList.add('grabbing');
-    }
-
-    event.preventDefault();
-  }, []);
-  const onSortEnd = useCallback(({
-    oldIndex,
-    newIndex
-  }) => {
-    // custom callback that is invoked *before* we sort the array
-    // e.g. in Compose we want to sort the references in the referenceMap before re-rendering drag and drop
-    props.onSortingEnd && props.onSortingEnd({
-      oldIndex,
-      newIndex
-    });
-    const newItems = arrayMove(items, oldIndex, newIndex);
-    setValue(newItems);
-    setIndexToUpdate && setIndexToUpdate(undefined);
-    document.body.classList.remove('grabbing');
-  }, [items, props, setIndexToUpdate, setValue]);
-  const onMove = useCallback((oldIndex, newIndex) => {
-    const newItems = arrayMove(items, oldIndex, newIndex);
-    setValue(newItems);
-  }, [items, setValue]);
-  const onCreate = useCallback((id, index) => onLinkOrCreate(setValue, entityType, items, [id], index), [setValue, items, entityType]);
-  const onLink = useCallback((ids, index) => onLinkOrCreate(setValue, entityType, items, ids, index), [setValue, items, entityType]);
-  const linkActionsProps = useLinkActionsProps({ ...props,
-    canLinkMultiple: true,
-    editorPermissions,
-    onCreate,
-    onLink,
-    itemsLength: items.length
-  });
-  const customCardRenderer = useCallback((cardProps, _, renderDefaultCard) => props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  [linkActionsProps]);
-  return createElement(Fragment, null, props.children({ ...props,
-    onSortStart: onSortStart,
-    onSortEnd: onSortEnd,
-    onMove,
-    renderCustomCard: props.renderCustomCard && customCardRenderer
-  }), createElement(LinkEntityActions, {
-    renderCustomActions: props.renderCustomActions,
-    ...linkActionsProps
-  }));
-}
-
-function MultipleReferenceEditor(props) {
-  const allContentTypes = props.sdk.space.getCachedContentTypes();
-  return createElement(ReferenceEditor, { ...props
-  }, ({
-    value,
-    disabled,
-    setValue,
-    externalReset
-  }) => {
-    return createElement(Editor$1, { ...props,
-      items: value || emptyArray,
-      isDisabled: disabled,
-      setValue: setValue,
-      key: `${externalReset}-list`,
-      allContentTypes: allContentTypes
-    });
-  });
-}
-MultipleReferenceEditor.defaultProps = {
-  hasCardEditActions: true
-};
-
-const styles$3 = {
-  container: /*#__PURE__*/css({
-    position: 'relative'
-  }),
-  item: /*#__PURE__*/css({
-    marginBottom: tokens.spacingM,
-    zIndex: tokens.zIndexModal // setting this to an index above 99 fixes dragged item disappearing issue. Should not be higher than 100 so it does not overlap the asset modal.
-
-  })
-};
-
-const DragHandle = props => {
-  const SortableDragHandle = SortableHandle(() => props.drag);
-  return React__default.createElement(SortableDragHandle, null);
-};
-
-const SortableLink = /*#__PURE__*/SortableElement(props => React__default.createElement("div", {
-  className: styles$3.item
-}, props.children));
-const SortableLinkListInternal = /*#__PURE__*/SortableContainer(props => {
-  return React__default.createElement("div", {
-    className: cx(styles$3.container, props.className)
-  }, props.items.map((item, index) => React__default.createElement(SortableLink, {
-    disabled: props.isDisabled,
-    key: `${item.sys.urn ?? item.sys.id}-${index}`,
-    index: index
-  }, props.children({
-    items: props.items,
-    isDisabled: props.isDisabled,
-    item,
-    index,
-    DragHandle: props.isDisabled ? undefined : DragHandle
-  }))));
-}); // HOC does not support generics, so we mimic it via additional component
-
-function SortableLinkList(props) {
-  // with the default distance of 0 the drag start event is "confused" with the click event,
-  // so the latter one isn't fired and click handlers on child elements don't work
-  return React__default.createElement(SortableLinkListInternal, {
-    distance: 1,
-    ...props
-  }, props.children);
-}
-
-function MultipleEntryReferenceEditor(props) {
-  const [indexToUpdate, setIndexToUpdate] = useState(undefined);
-
-  const updateBeforeSortStart = ({
-    index
-  }) => {
-    setIndexToUpdate(index);
-  };
-
-  return createElement(MultipleReferenceEditor, { ...props,
-    entityType: "Entry",
-    setIndexToUpdate: setIndexToUpdate
-  }, childrenProps => createElement(SortableLinkList, { ...childrenProps,
-    axis: "y",
-    useDragHandle: true,
-    updateBeforeSortStart: updateBeforeSortStart
-  }, ({
-    items,
-    item,
-    index,
-    isDisabled,
-    DragHandle
-  }) => {
-    const lastIndex = items.length - 1;
-    return createElement(FetchingWrappedEntryCard, { ...childrenProps,
-      key: `${item.sys.id}-${index}`,
-      index: index,
-      allContentTypes: childrenProps.allContentTypes,
-      isDisabled: isDisabled,
-      entryId: item.sys.id,
-      onRemove: () => {
-        childrenProps.setValue(items.filter((_value, i) => i !== index));
-      },
-      onMoveTop: index !== 0 ? () => childrenProps.onMove(index, 0) : undefined,
-      onMoveBottom: index !== lastIndex ? () => childrenProps.onMove(index, lastIndex) : undefined,
-      renderDragHandle: DragHandle,
-      isBeingDragged: index === indexToUpdate
-    });
-  }));
-}
-
-function downloadAsset(url) {
-  window.open(url, '_blank', 'noopener,noreferrer');
-}
-
-function renderAssetInfo(props) {
-  const {
-    entityFile
-  } = props;
-  const fileName = get(entityFile, 'fileName');
-  const mimeType = get(entityFile, 'contentType');
-  const fileSize = get(entityFile, 'details.size');
-  const image = get(entityFile, 'details.image');
-  return [React__default.createElement(Menu.SectionTitle, {
-    key: "file-section"
-  }, "File info"), fileName && React__default.createElement(Menu.Item, {
-    key: "file-name"
-  }, React__default.createElement(Text, {
-    isTruncated: true
-  }, fileName)), mimeType && React__default.createElement(Menu.Item, {
-    key: "file-type"
-  }, React__default.createElement(Text, {
-    isTruncated: true
-  }, mimeType)), fileSize && React__default.createElement(Menu.Item, {
-    key: "file-size"
-  }, shortenStorageUnit(fileSize, 'B')), image && React__default.createElement(Menu.Item, {
-    key: "file-dimentions"
-  }, `${image.width} × ${image.height}`)].filter(item => item);
-}
-function renderActions(props) {
-  const {
-    entityFile,
-    isDisabled,
-    onEdit,
-    onRemove
-  } = props;
-  return [React__default.createElement(Menu.SectionTitle, {
-    key: "section-title"
-  }, "Actions"), onEdit ? React__default.createElement(Menu.Item, {
-    key: "edit",
-    onClick: onEdit,
-    testId: "card-action-edit"
-  }, "Edit") : null, entityFile ? React__default.createElement(Menu.Item, {
-    key: "download",
-    onClick: () => {
-      if (typeof entityFile.url === 'string') {
-        downloadAsset(entityFile.url);
-      }
-    },
-    testId: "card-action-download"
-  }, "Download") : null, onRemove ? React__default.createElement(Menu.Item, {
-    key: "remove",
-    disabled: isDisabled,
-    onClick: onRemove,
-    testId: "card-action-remove"
-  }, "Remove") : null].filter(item => item);
-}
-
-const groupToIconMap = {
-  image: 'image',
-  video: 'video',
-  audio: 'audio',
-  richtext: 'richtext',
-  presentation: 'presentation',
-  spreadsheet: 'spreadsheet',
-  pdfdocument: 'pdf',
-  archive: 'archive',
-  plaintext: 'plaintext',
-  code: 'code',
-  markup: 'markup'
-};
-const styles$4 = {
-  scheduleIcon: /*#__PURE__*/css({
-    marginRight: tokens.spacing2Xs
-  })
-};
-const defaultProps$1 = {
-  isClickable: true
-}; // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
-
-function getFileType(file) {
-  if (!file) {
-    return 'archive';
-  }
-
-  const groupName = mimetype.getGroupLabel({
-    type: file.contentType,
-    fallbackFileName: file.fileName
-  });
-  return groupToIconMap[groupName] || 'archive';
-}
-
-const WrappedAssetCard = props => {
-  const {
-    className,
-    onEdit,
-    getAssetUrl,
-    onRemove,
-    size,
-    isDisabled,
-    isSelected,
-    isClickable
-  } = props;
-  const status = entityHelpers.getEntryStatus(props.asset.sys);
-
-  if (status === 'deleted') {
-    return React__default.createElement(MissingEntityCard, {
-      entityType: "Asset",
-      asSquare: true,
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
-
-  const entityTitle = entityHelpers.getAssetTitle({
-    asset: props.asset,
-    localeCode: props.localeCode,
-    defaultLocaleCode: props.defaultLocaleCode,
-    defaultTitle: 'Untitled'
-  });
-  const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
-  const href = getAssetUrl ? getAssetUrl(props.asset.sys.id) : undefined;
-  return React__default.createElement(AssetCard, {
-    as: href ? 'a' : 'article',
-    type: getFileType(entityFile),
-    title: entityTitle,
-    className: className,
-    isSelected: isSelected,
-    href: href,
-    status: status,
-    icon: React__default.createElement(ScheduledIconWithTooltip, {
-      getEntityScheduledActions: props.getEntityScheduledActions,
-      entityType: "Asset",
-      entityId: props.asset.sys.id
-    }, React__default.createElement(ClockIcon, {
-      className: styles$4.scheduleIcon,
-      size: "small",
-      variant: "muted",
-      testId: "schedule-icon"
-    })),
-    src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
-    onClick: // Providing an onClick handler messes up with some rich text
-    // features e.g. pressing ENTER on a card to add a new paragraph
-    // underneath. It's crucial not to pass a custom handler when
-    // isClickable is disabled which in the case of RT it's.
-    isClickable ? e => {
-      e.preventDefault();
-      onEdit && onEdit();
-    } : undefined,
-
-    /* todo - remove this when onKeyDown is allowed as a prop for BaseCard in forma 36
-    // @ts-expect-error */
-    onKeyDown: isClickable ? e => {
-      if (e.key === 'Enter' && onEdit) {
-        e.preventDefault();
-        onEdit();
-      }
-    } : undefined,
-    dragHandleRender: props.renderDragHandle,
-    withDragHandle: !!props.renderDragHandle,
-    actions: [...renderActions({
-      entityFile,
-      isDisabled: isDisabled,
-      onEdit,
-      onRemove
-    }), ...(entityFile ? renderAssetInfo({
-      entityFile
-    }) : [])].filter(item => item),
-    size: size
-  });
-};
-WrappedAssetCard.defaultProps = defaultProps$1;
-
-const styles$5 = {
-  scheduleIcon: /*#__PURE__*/css({
-    marginRight: tokens.spacing2Xs
-  })
-};
-const WrappedAssetLink = props => {
-  const {
-    className,
-    href,
-    onEdit,
-    onRemove,
-    isDisabled
-  } = props;
-  const status = entityHelpers.getEntryStatus(props.asset.sys);
-
-  if (status === 'deleted') {
-    return React__default.createElement(MissingEntityCard, {
-      entityType: "Asset",
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
-
-  const entityTitle = entityHelpers.getAssetTitle({
-    asset: props.asset,
-    localeCode: props.localeCode,
-    defaultLocaleCode: props.defaultLocaleCode,
-    defaultTitle: 'Untitled'
-  });
-  const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
-  return React__default.createElement(EntryCard, {
-    as: href ? 'a' : 'article',
-    contentType: "Asset",
-    title: entityTitle,
-    className: className,
-    href: href,
-    size: "small",
-    status: status,
-    thumbnailElement: entityFile && isValidImage(entityFile) ? React__default.createElement(AssetThumbnail, {
-      file: entityFile
-    }) : undefined,
-    icon: React__default.createElement(ScheduledIconWithTooltip, {
-      getEntityScheduledActions: props.getEntityScheduledActions,
-      entityType: "Asset",
-      entityId: props.asset.sys.id
-    }, React__default.createElement(ClockIcon, {
-      className: styles$5.scheduleIcon,
-      size: "small",
-      variant: "muted",
-      testId: "schedule-icon"
-    })),
-    onClick: e => {
-      e.preventDefault();
-      onEdit();
-    },
-    onKeyDown: e => {
-      if (e.key === 'Enter' && onEdit) {
-        e.preventDefault();
-        onEdit();
-      }
-    },
-    dragHandleRender: props.renderDragHandle,
-    withDragHandle: !!props.renderDragHandle,
-    actions: [renderActions({
-      entityFile,
-      isDisabled: isDisabled,
-      onEdit,
-      onRemove
-    }), entityFile ? renderAssetInfo({
-      entityFile
-    }) : null].filter(item => item)
-  });
-};
-
-function FetchingWrappedAssetCard(props) {
-  const {
-    data: asset,
-    status
-  } = useEntity('Asset', props.assetId);
-  const {
-    getEntityScheduledActions
-  } = useEntityLoader();
-  const loadEntityScheduledActions = useCallback(() => getEntityScheduledActions('Asset', props.assetId), [getEntityScheduledActions, props.assetId]);
-  useEffect(() => {
-    if (asset) {
-      props.onAction && props.onAction({
-        type: 'rendered',
-        entity: 'Asset'
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-
-  }, [asset]);
-
-  const onEdit = async () => {
-    const {
-      slide
-    } = await props.sdk.navigator.openAsset(props.assetId, {
-      slideIn: true
-    });
-    props.onAction && props.onAction({
-      entity: 'Asset',
-      type: 'edit',
-      id: props.assetId,
-      contentTypeId: '',
-      slide
-    });
-  };
-
-  const onRemove = () => {
-    props.onRemove();
-    props.onAction && props.onAction({
-      entity: 'Asset',
-      type: 'delete',
-      id: props.assetId,
-      contentTypeId: ''
-    });
-  };
-
-  return useMemo(() => {
-    if (status === 'error') {
-      const card = createElement(MissingEntityCard, {
-        entityType: "Asset",
-        asSquare: props.viewType !== 'link',
-        isDisabled: props.isDisabled,
-        onRemove: onRemove
-      });
-
-      if (props.renderCustomMissingEntityCard) {
-        return props.renderCustomMissingEntityCard({
-          defaultCard: card,
-          entity: {
-            id: props.assetId,
-            type: 'Asset'
-          }
-        });
-      }
-
-      return card;
-    }
-
-    const {
-      getEntityUrl
-    } = props;
-    const size = props.viewType === 'big_card' ? 'default' : 'small';
-    const commonProps = {
-      asset,
-      entityUrl: getEntityUrl && getEntityUrl(props.assetId),
-      size: size,
-      isDisabled: props.isDisabled,
-      localeCode: props.sdk.field.locale,
-      defaultLocaleCode: props.sdk.locales.default,
-      renderDragHandle: props.renderDragHandle,
-      onEdit,
-      onRemove
-    };
-
-    if (props.viewType === 'link') {
-      if (status === 'loading') {
-        return createElement(EntryCard, {
-          size: "small",
-          isLoading: true
-        });
-      }
-
-      return createElement(WrappedAssetLink, { ...commonProps,
-        href: commonProps.entityUrl,
-        getEntityScheduledActions: loadEntityScheduledActions
-      });
-    }
-
-    if (status === 'loading') {
-      return createElement(AssetCard, {
-        size: size,
-        isLoading: true
-      });
-    }
-
-    function renderDefaultCard(props) {
-      // isClickable has a default value, so omit it from the props
-      const builtinCardProps = { ...commonProps,
-        ...props,
-        getEntityScheduledActions: loadEntityScheduledActions,
-        asset: (props == null ? void 0 : props.entity) || commonProps.asset,
-        getAssetUrl: getEntityUrl
-      };
-      return createElement(WrappedAssetCard, { ...builtinCardProps
-      });
-    }
-
-    if (props.renderCustomCard) {
-      const customProps = { ...commonProps,
-        entity: commonProps.asset
-      }; // LinkActionsProps are injected higher SingleReferenceEditor/MultipleReferenceEditor
-
-      const renderedCustomCard = props.renderCustomCard(customProps, {}, renderDefaultCard); // Only `false` indicates to render the original card. E.g. `null` would result in no card.
-
-      if (renderedCustomCard !== false) {
-        return renderedCustomCard;
-      }
-    }
-
-    return renderDefaultCard(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [props, status, asset]);
-}
-
-function SingleMediaEditor(props) {
-  return createElement(SingleReferenceEditor, { ...props,
-    entityType: "Asset"
-  }, ({
-    entityId,
-    isDisabled,
-    setValue
-  }) => createElement(FetchingWrappedAssetCard, { ...props,
-    viewType: "big_card",
-    assetId: entityId,
-    isDisabled: isDisabled,
-    onRemove: () => {
-      setValue(null);
-    }
-  }));
-}
-SingleMediaEditor.defaultProps = {
-  isInitiallyDisabled: true
-};
-
-const styles$6 = {
-  gridContainer: /*#__PURE__*/css({
-    position: 'relative',
-    display: 'flex',
-    flexWrap: 'wrap'
-  })
-};
-function MultipleMediaEditor(props) {
-  return createElement(MultipleReferenceEditor, { ...props,
-    entityType: "Asset"
-  }, childrenProps => createElement(SortableLinkList, { ...childrenProps,
-    className: cx({
-      [styles$6.gridContainer]: childrenProps.viewType === 'card'
-    }),
-    axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
-    useDragHandle: true
-  }, ({
-    items,
-    item,
-    index,
-    isDisabled,
-    DragHandle
-  }) => createElement(FetchingWrappedAssetCard, { ...childrenProps,
-    isDisabled: isDisabled,
-    key: `${item.sys.id}-${index}`,
-    assetId: item.sys.id,
-    onRemove: () => {
-      childrenProps.setValue(items.filter((_value, i) => i !== index));
-    },
-    renderDragHandle: DragHandle
-  })));
-}
-MultipleMediaEditor.defaultProps = {
-  isInitiallyDisabled: true
-};
-
-const resolveAsset = () => Promise.resolve(); // we don't want to show scheduled actions for resources
-
-
-const resolveScheduledActions = () => Promise.resolve([]);
-
-function ContentfulEntryCard({
-  info,
-  isDisabled,
-  renderDragHandle,
-  onRemove,
-  onMoveTop,
-  onMoveBottom,
-  getEntryRouteHref
-}) {
-  const resourceSys = info.resource.sys;
-  const spaceId = resourceSys.space.sys.id;
-  const environmentId = resourceSys.environment.sys.id;
-  const entryId = resourceSys.id;
-  const resourceHref = getEntryRouteHref({
-    spaceId,
-    environmentId,
-    entryId
-  }); // TODO: move this into `sdk.navigator.openEntry()`, note that it's signature only include the entry id (not a space or environment)
-
-  const openEntryDetail = () => {
-    window.open(resourceHref, '_blank', 'noopener,noreferrer');
-  };
-
-  return createElement(WrappedEntryCard, {
-    entry: info.resource,
-    isDisabled: isDisabled,
-    hasCardEditActions: false,
-    contentType: info.contentType,
-    // we use the default locale from the space the entry belongs to
-    // as we assume this gives a more consistent behaviour.
-    // locales will inevitably differ from space to space, so it's likely
-    // that the current locale does not exist in the "remote" space
-    localeCode: info.defaultLocaleCode,
-    defaultLocaleCode: info.defaultLocaleCode,
-    size: "small",
-    getAsset: resolveAsset,
-    getEntityScheduledActions: resolveScheduledActions,
-    spaceName: info.space.name,
-    renderDragHandle: renderDragHandle,
-    isClickable: true,
-    onEdit: openEntryDetail,
-    hasCardRemoveActions: Boolean(onRemove),
-    onRemove: onRemove,
-    onMoveBottom: onMoveBottom,
-    onMoveTop: onMoveTop,
-    entryUrl: resourceHref
-  });
-}
-
-const styles$7 = {
-  card: /*#__PURE__*/css({
-    position: 'relative'
-  })
-};
-function UnsupportedEntityCard(props) {
-  return React__default.createElement(Card, {
-    className: styles$7.card
-  }, React__default.createElement(SectionHeading, {
-    marginBottom: "none"
-  }, "Resource type ", props.entityType, " is currently not supported"));
-}
-
-function ResourceCardSkeleton() {
-  return createElement(EntryCard, {
-    size: "small",
-    isLoading: true
-  });
-}
-
-function ExistingResourceCard(props) {
-  const {
-    resourceLink,
-    inView,
-    index = 0
-  } = props;
-  const resourceOptions = {
-    priority: index * -1,
-    enabled: inView
-  };
-  const {
-    data,
-    error
-  } = useResource(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions);
-
-  if (!data && !error) {
-    return createElement(ResourceCardSkeleton, null);
-  }
-
-  if (data) {
-    return createElement(ContentfulEntryCard, {
-      info: data,
-      ...props
-    });
-  }
-
-  if (isUnsupportedError(error)) {
-    return createElement(UnsupportedEntityCard, {
-      entityType: resourceLink.sys.linkType
-    });
-  }
-
-  return createElement(MissingEntityCard, {
-    entityType: "Entry",
-    isDisabled: props.isDisabled,
-    onRemove: props.onRemove
-  });
-}
-
-function ResourceCardWrapper(props) {
-  if (!props.resourceLink) {
-    return null;
-  }
-
-  return createElement(ExistingResourceCard, { ...props,
-    resourceLink: props.resourceLink,
-    getEntryRouteHref: props.getEntryRouteHref
-  });
-}
-
-function ResourceCard(props) {
-  const {
-    ref,
-    inView
-  } = useInView({
-    triggerOnce: true,
-    rootMargin: '300px 0px 0px 300px'
-  }); // Forma does not offer us to pass refs, so we need an additional wrapper here
-
-  return createElement("div", {
-    ref: ref
-  }, createElement(ResourceCardWrapper, { ...props,
-    inView: inView
-  }));
-}
-
-const toLinkItem = (entry, apiUrl) => ({
-  sys: {
-    type: 'ResourceLink',
-    linkType: 'Contentful:Entry',
-    urn: entry.sys.urn ?? `crn:${apiUrl}:::content:spaces/${entry.sys.space.sys.id}/entries/${entry.sys.id}`
-  }
-});
-
-const getUpdatedValue = (field, entries, apiUrl) => {
-  const multiple = field.type === 'Array';
-
-  if (multiple) {
-    const linkItems = entries.map(entry => toLinkItem(entry, apiUrl));
-    const prevValue = field.getValue() || [];
-    return [...prevValue, ...linkItems];
-  } else {
-    return toLinkItem(entries[0], apiUrl);
-  }
-};
-
-function useResourceLinkActions({
-  dialogs,
-  field,
-  onAfterLink,
-  apiUrl
-}) {
-  const handleAfterLink = useCallback(entries => {
-    if (!onAfterLink) {
-      return;
-    }
-
-    entries.forEach(onAfterLink);
-  }, [onAfterLink]);
-  const onLinkedExisting = useMemo(() => {
-    return entries => {
-      const updatedValue = getUpdatedValue(field, entries, apiUrl);
-      field.setValue(updatedValue);
-      handleAfterLink(entries);
-    };
-  }, [field, handleAfterLink, apiUrl]);
-  const multiple = field.type === 'Array';
-  const onLinkExisting = useMemo(() => {
-    const promptSelection = multiple ? async () => // @ts-expect-error wait for update of app-sdk version
-    await dialogs.selectMultipleResourceEntries({
-      // @ts-expect-error wait for update of app-sdk version
-      allowedResources: field.allowedResources
-    }) : async () => [// @ts-expect-error wait for update of app-sdk version
-    await dialogs.selectSingleResourceEntry({
-      // @ts-expect-error wait for update of app-sdk version
-      allowedResources: field.allowedResources
-    })];
-    return async () => {
-      const res = await promptSelection();
-
-      if (!res) {
-        return;
-      }
-
-      onLinkedExisting(res);
-    }; // @ts-expect-error wait for update of app-sdk version
-  }, [dialogs, field.allowedResources, multiple, onLinkedExisting]);
-  return {
-    onLinkExisting,
-    onLinkedExisting,
-    // hardcoded values to match interface for standard reference field actions
-    entityType: 'Entry',
-    contentTypes: [],
-    canCreateEntity: false,
-    canLinkMultiple: multiple,
-    canLinkEntity: true,
-    isDisabled: false,
-    isEmpty: false,
-    isFull: false,
-    // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
-    onCreate: async () => {},
-    // eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
-    onCreated: () => {}
-  };
-}
-
-function ResourceEditor(props) {
-  const {
-    setValue,
-    items,
-    apiUrl
-  } = props;
-  const onSortStart = useCallback((_, event) => event.preventDefault(), []);
-  const onSortEnd = useCallback(({
-    oldIndex,
-    newIndex
-  }) => {
-    const newItems = arrayMove(items, oldIndex, newIndex);
-    setValue(newItems);
-  }, [items, setValue]);
-  const onMove = useCallback((oldIndex, newIndex) => {
-    const newItems = arrayMove(items, oldIndex, newIndex);
-    setValue(newItems);
-  }, [items, setValue]);
-  const onRemoteItemAtIndex = useCallback(index => {
-    setValue(items.filter((_v, i) => i !== index));
-  }, [items, setValue]);
-  const {
-    dialogs,
-    field
-  } = props.sdk;
-  const linkActionsProps = useResourceLinkActions({
-    dialogs,
-    field,
-    apiUrl
-  });
-  return createElement(Fragment, null, props.children({ ...props,
-    onSortStart,
-    onSortEnd,
-    onMove,
-    onRemoteItemAtIndex
-  }), createElement(CombinedLinkEntityActions, { ...linkActionsProps,
-    renderCustomActions: props.renderCustomActions
-  }));
-} // provides memoized callbacks bound to a given item
-
-
-function WithPerItemCallbacks({
-  listLength,
-  index,
-  onMove,
-  onRemoteItemAtIndex,
-  children
-}) {
-  const handleMoveTop = useMemo(() => index > 0 ? () => onMove(index, 0) : undefined, [index, onMove]);
-  const handleMoveBottom = useMemo(() => index < listLength - 1 ? () => onMove(index, listLength - 1) : undefined, [index, onMove, listLength]);
-  const handleRemove = useCallback(() => onRemoteItemAtIndex(index), [index, onRemoteItemAtIndex]);
-  return createElement(Fragment, null, children({
-    onMoveBottom: handleMoveBottom,
-    onMoveTop: handleMoveTop,
-    onRemove: handleRemove
-  }));
-}
-
-const EMPTY_ARRAY = [];
-function MultipleResourceReferenceEditor(props) {
-  return createElement(EntityProvider, {
-    sdk: props.sdk
-  }, createElement(FieldConnector, {
-    throttle: 0,
-    field: props.sdk.field,
-    isInitiallyDisabled: props.isInitiallyDisabled,
-    isEqualValues: deepEqual
-  }, ({
-    value,
-    disabled,
-    setValue,
-    externalReset
-  }) => {
-    return createElement(ResourceEditor, { ...props,
-      items: value || EMPTY_ARRAY,
-      isDisabled: disabled,
-      setValue: setValue,
-      renderCustomActions: props.renderCustomActions,
-      key: `${externalReset}-list`
-    }, editorProps => createElement(SortableLinkList, { ...editorProps
-    }, ({
-      item,
-      isDisabled,
-      DragHandle,
-      index
-    }) => createElement(WithPerItemCallbacks, {
-      index: index,
-      onMove: editorProps.onMove,
-      onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
-      listLength: (value == null ? void 0 : value.length) || 0
-    }, ({
-      onMoveBottom,
-      onMoveTop,
-      onRemove
-    }) => createElement(ResourceCard, {
-      index: index,
-      resourceLink: item,
-      isDisabled: isDisabled,
-      renderDragHandle: DragHandle,
-      onMoveTop: onMoveTop,
-      onMoveBottom: onMoveBottom,
-      onRemove: onRemove,
-      getEntryRouteHref: props.getEntryRouteHref
-    }))));
-  }));
-}
-
-function SingleResourceReferenceEditor(props) {
-  const {
-    dialogs,
-    field
-  } = props.sdk;
-  const linkActionsProps = useResourceLinkActions({
-    dialogs,
-    field,
-    apiUrl: props.apiUrl
-  });
-  return createElement(EntityProvider, {
-    sdk: props.sdk
-  }, createElement(FieldConnector, {
-    throttle: 0,
-    field: props.sdk.field,
-    isInitiallyDisabled: props.isInitiallyDisabled,
-    isEqualValues: deepEqual
-  }, ({
-    value,
-    disabled
-  }) => {
-    return value ? createElement(ResourceCard, {
-      onRemove: () => props.sdk.field.removeValue(),
-      resourceLink: value,
-      isDisabled: disabled,
-      getEntryRouteHref: props.getEntryRouteHref
-    }) : createElement(CombinedLinkEntityActions, { ...linkActionsProps,
-      renderCustomActions: props.renderCustomActions
-    });
-  }));
-}
-
-export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, MultipleResourceReferenceEditor, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, SingleResourceReferenceEditor, SortableLinkList, WrappedAssetCard, WrappedEntryCard, getScheduleTooltipContent, useEntity, useEntityLoader, useResource };
-//# sourceMappingURL=field-editor-reference.esm.js.map