@react-spectrum/card 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/main.js

@@ -1,1750 +1,1543 @@
-var {
-  Layout,
-  Rect,
-  LayoutInfo,
-  Size
-} = require("@react-stately/virtualizer");
-
-var {
-  Virtualizer,
-  VirtualizerItem
-} = require("@react-aria/virtualizer");
-
-var {
-  useListState
-} = require("@react-stately/list");
-
-var {
-  useGrid,
-  useGridCell,
-  useGridRow
-} = require("@react-aria/grid");
-
-var {
-  useCollator,
-  useLocale,
-  useMessageFormatter
-} = require("@react-aria/i18n");
-
-var {
-  ProgressCircle
-} = require("@react-spectrum/progress");
-
-var {
-  GridCollection,
-  useGridState
-} = require("@react-stately/grid");
-
-var {
-  useProviderProps,
-  useProvider
-} = require("@react-spectrum/provider");
-
-var {
-  useFocusWithin,
-  useHover
-} = require("@react-aria/interactions");
-
-var _react2 = require("react");
-
-var _react = $parcel$interopDefault(_react2);
-
-var {
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-  useContext,
-  forwardRef
-} = _react2;
-
-var {
-  FocusRing
-} = require("@react-aria/focus");
-
-var {
-  filterDOMProps,
-  mergeProps,
-  useLayoutEffect,
-  useResizeObserver,
-  useSlotId
-} = require("@react-aria/utils");
-
-var {
-  Divider
-} = require("@react-spectrum/divider");
-
-var {
-  classNames,
-  SlotProvider,
-  useDOMRef,
-  useHasChild,
-  useStyleProps,
-  useUnwrapDOMRef
-} = require("@react-spectrum/utils");
-
-var {
-  Checkbox
-} = require("@react-spectrum/checkbox");
-
-var _babelRuntimeHelpersInteropRequireDefault = $parcel$interopDefault(require("@babel/runtime/helpers/interopRequireDefault"));
-
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
-
 require("./main.css");
-
+var $jpY3B$reactspectrumutils = require("@react-spectrum/utils");
+var $jpY3B$reactstatelygrid = require("@react-stately/grid");
+var $jpY3B$reactariautils = require("@react-aria/utils");
+var $jpY3B$reactspectrumprogress = require("@react-spectrum/progress");
+var $jpY3B$react = require("react");
+var $jpY3B$reactariai18n = require("@react-aria/i18n");
+var $jpY3B$reactariagrid = require("@react-aria/grid");
+var $jpY3B$reactstatelylist = require("@react-stately/list");
+var $jpY3B$reactspectrumprovider = require("@react-spectrum/provider");
+var $jpY3B$reactariavirtualizer = require("@react-aria/virtualizer");
+var $jpY3B$reactspectrumcheckbox = require("@react-spectrum/checkbox");
+var $jpY3B$reactariafocus = require("@react-aria/focus");
+var $jpY3B$reactariainteractions = require("@react-aria/interactions");
+var $jpY3B$reactstatelyvirtualizer = require("@react-stately/virtualizer");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
 
-// ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/card/vars.css
-var $e80f3e549a26f7869571c50d85a$exports = {};
-$e80f3e549a26f7869571c50d85a$exports = {
-  "spectrum-Card": "_spectrum-Card_dd040",
-  "spectrum-Card-heading": "_spectrum-Card-heading_dd040",
-  "spectrum-Card-checkboxWrapper": "_spectrum-Card-checkboxWrapper_dd040",
-  "spectrum-Card-checkbox": "_spectrum-Card-checkbox_dd040",
-  "is-focused": "_is-focused_dd040",
-  "is-selected": "_is-selected_dd040",
-  "focus-ring": "_focus-ring_dd040",
-  "is-hovered": "_is-hovered_dd040",
-  "spectrum-Card-grid": "_spectrum-Card-grid_dd040",
-  "spectrum-Card-decoration": "_spectrum-Card-decoration_dd040",
-  "spectrum-Card-image": "_spectrum-Card-image_dd040",
-  "spectrum-Card-illustration": "_spectrum-Card-illustration_dd040",
-  "spectrum-Card-avatar": "_spectrum-Card-avatar_dd040",
-  "spectrum-Card-detail": "_spectrum-Card-detail_dd040",
-  "spectrum-Card-actions": "_spectrum-Card-actions_dd040",
-  "spectrum-Card-content": "_spectrum-Card-content_dd040",
-  "spectrum-Card-divider": "_spectrum-Card-divider_dd040",
-  "spectrum-Card-footer": "_spectrum-Card-footer_dd040",
-  "spectrum-Card--waterfall": "_spectrum-Card--waterfall_dd040",
-  "spectrum-Card--default": "_spectrum-Card--default_dd040",
-  "spectrum-Card--noPreview": "_spectrum-Card--noPreview_dd040",
-  "spectrum-Card--grid": "_spectrum-Card--grid_dd040",
-  "spectrum-Card--noLayout": "_spectrum-Card--noLayout_dd040",
-  "spectrum-Card--isQuiet": "_spectrum-Card--isQuiet_dd040",
-  "spectrum-Card--gallery": "_spectrum-Card--gallery_dd040",
-  "spectrum-Card--closeToSquare": "_spectrum-Card--closeToSquare_dd040",
-  "spectrum-Card--horizontal": "_spectrum-Card--horizontal_dd040",
-  "spectrum-CardView": "_spectrum-CardView_dd040",
-  "spectrum-CardView-centeredWrapper": "_spectrum-CardView-centeredWrapper_dd040",
-  "spectrum-CardView-row": "_spectrum-CardView-row_dd040",
-  "is-drop-target": "_is-drop-target_dd040"
-};
-
-const $d2268ebff01b30dc8701260db9de8b73$export$CardViewContext = /*#__PURE__*/_react.createContext(null);
-
-function $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext() {
-  return useContext($d2268ebff01b30dc8701260db9de8b73$export$CardViewContext);
+$parcel$export(module.exports, "CardView", () => $514a55f6d91f25ef$export$7e52c821f7b6f422);
+$parcel$export(module.exports, "GalleryLayout", () => $8019a3d2c7d098ea$export$8e52095834484b61);
+$parcel$export(module.exports, "GridLayout", () => $71b727f94b595b1a$export$7d2b12578154a735);
+$parcel$export(module.exports, "WaterfallLayout", () => $632abf8fbf0ad57b$export$e9f7cda058ba8df8);
+$parcel$export(module.exports, "Card", () => $6b630ac4b78ba7f3$export$60332b2344f7fe41);
+
+
+
+
+
+
+var $71570f0038472fa2$exports = {};
+
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card", () => $71570f0038472fa2$export$4e5e9f191b1edb8, (v) => $71570f0038472fa2$export$4e5e9f191b1edb8 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-heading", () => $71570f0038472fa2$export$92758a4a0e8d19e4, (v) => $71570f0038472fa2$export$92758a4a0e8d19e4 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-checkboxWrapper", () => $71570f0038472fa2$export$33977546b63e0df9, (v) => $71570f0038472fa2$export$33977546b63e0df9 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-checkbox", () => $71570f0038472fa2$export$842da5d48b8f6db2, (v) => $71570f0038472fa2$export$842da5d48b8f6db2 = v);
+$parcel$export($71570f0038472fa2$exports, "is-selected", () => $71570f0038472fa2$export$1e0fb04f31d3c22a, (v) => $71570f0038472fa2$export$1e0fb04f31d3c22a = v);
+$parcel$export($71570f0038472fa2$exports, "focus-ring", () => $71570f0038472fa2$export$f39a09f249340e2a, (v) => $71570f0038472fa2$export$f39a09f249340e2a = v);
+$parcel$export($71570f0038472fa2$exports, "is-hovered", () => $71570f0038472fa2$export$b8813cd5d7824ce7, (v) => $71570f0038472fa2$export$b8813cd5d7824ce7 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-grid", () => $71570f0038472fa2$export$b3dd760d2dfde29e, (v) => $71570f0038472fa2$export$b3dd760d2dfde29e = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-decoration", () => $71570f0038472fa2$export$48252dc130b62514, (v) => $71570f0038472fa2$export$48252dc130b62514 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-image", () => $71570f0038472fa2$export$8d5fea71dc66db80, (v) => $71570f0038472fa2$export$8d5fea71dc66db80 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-illustration", () => $71570f0038472fa2$export$13dd3510ae7a8399, (v) => $71570f0038472fa2$export$13dd3510ae7a8399 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-avatar", () => $71570f0038472fa2$export$159930c59efb6273, (v) => $71570f0038472fa2$export$159930c59efb6273 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-detail", () => $71570f0038472fa2$export$16715af38fbd9819, (v) => $71570f0038472fa2$export$16715af38fbd9819 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card-content", () => $71570f0038472fa2$export$d946625b97e8aa17, (v) => $71570f0038472fa2$export$d946625b97e8aa17 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--waterfall", () => $71570f0038472fa2$export$d9c7209e0e4f7e4d, (v) => $71570f0038472fa2$export$d9c7209e0e4f7e4d = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--default", () => $71570f0038472fa2$export$c7a022df9e10a238, (v) => $71570f0038472fa2$export$c7a022df9e10a238 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--noPreview", () => $71570f0038472fa2$export$b77922bc0320c9e4, (v) => $71570f0038472fa2$export$b77922bc0320c9e4 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--grid", () => $71570f0038472fa2$export$59739ab951d2dcc7, (v) => $71570f0038472fa2$export$59739ab951d2dcc7 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--noLayout", () => $71570f0038472fa2$export$a03d836e6ef3e749, (v) => $71570f0038472fa2$export$a03d836e6ef3e749 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--isQuiet", () => $71570f0038472fa2$export$92ad04b5ac9296ea, (v) => $71570f0038472fa2$export$92ad04b5ac9296ea = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--gallery", () => $71570f0038472fa2$export$ccd8ffc36bd10cc, (v) => $71570f0038472fa2$export$ccd8ffc36bd10cc = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-Card--horizontal", () => $71570f0038472fa2$export$1c52334407225704, (v) => $71570f0038472fa2$export$1c52334407225704 = v);
+$parcel$export($71570f0038472fa2$exports, "is-focused", () => $71570f0038472fa2$export$e7dc768d35940237, (v) => $71570f0038472fa2$export$e7dc768d35940237 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-CardView", () => $71570f0038472fa2$export$2f34e9e3e0b89d95, (v) => $71570f0038472fa2$export$2f34e9e3e0b89d95 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-CardView-centeredWrapper", () => $71570f0038472fa2$export$7fc89689fcfab196, (v) => $71570f0038472fa2$export$7fc89689fcfab196 = v);
+$parcel$export($71570f0038472fa2$exports, "spectrum-CardView-row", () => $71570f0038472fa2$export$4746ac09daa215ae, (v) => $71570f0038472fa2$export$4746ac09daa215ae = v);
+$parcel$export($71570f0038472fa2$exports, "is-drop-target", () => $71570f0038472fa2$export$d8467f38d2d00bd0, (v) => $71570f0038472fa2$export$d8467f38d2d00bd0 = v);
+var $71570f0038472fa2$export$4e5e9f191b1edb8;
+var $71570f0038472fa2$export$92758a4a0e8d19e4;
+var $71570f0038472fa2$export$33977546b63e0df9;
+var $71570f0038472fa2$export$842da5d48b8f6db2;
+var $71570f0038472fa2$export$1e0fb04f31d3c22a;
+var $71570f0038472fa2$export$f39a09f249340e2a;
+var $71570f0038472fa2$export$b8813cd5d7824ce7;
+var $71570f0038472fa2$export$b3dd760d2dfde29e;
+var $71570f0038472fa2$export$48252dc130b62514;
+var $71570f0038472fa2$export$8d5fea71dc66db80;
+var $71570f0038472fa2$export$13dd3510ae7a8399;
+var $71570f0038472fa2$export$159930c59efb6273;
+var $71570f0038472fa2$export$16715af38fbd9819;
+var $71570f0038472fa2$export$d946625b97e8aa17;
+var $71570f0038472fa2$export$d9c7209e0e4f7e4d;
+var $71570f0038472fa2$export$c7a022df9e10a238;
+var $71570f0038472fa2$export$b77922bc0320c9e4;
+var $71570f0038472fa2$export$59739ab951d2dcc7;
+var $71570f0038472fa2$export$a03d836e6ef3e749;
+var $71570f0038472fa2$export$92ad04b5ac9296ea;
+var $71570f0038472fa2$export$ccd8ffc36bd10cc;
+var $71570f0038472fa2$export$1c52334407225704;
+var $71570f0038472fa2$export$e7dc768d35940237;
+var $71570f0038472fa2$export$2f34e9e3e0b89d95;
+var $71570f0038472fa2$export$7fc89689fcfab196;
+var $71570f0038472fa2$export$4746ac09daa215ae;
+var $71570f0038472fa2$export$d8467f38d2d00bd0;
+$71570f0038472fa2$export$4e5e9f191b1edb8 = "spectrum-Card_6fdf9f";
+$71570f0038472fa2$export$92758a4a0e8d19e4 = "spectrum-Card-heading_6fdf9f";
+$71570f0038472fa2$export$33977546b63e0df9 = "spectrum-Card-checkboxWrapper_6fdf9f";
+$71570f0038472fa2$export$842da5d48b8f6db2 = "spectrum-Card-checkbox_6fdf9f";
+$71570f0038472fa2$export$1e0fb04f31d3c22a = "is-selected_6fdf9f";
+$71570f0038472fa2$export$f39a09f249340e2a = "focus-ring_6fdf9f";
+$71570f0038472fa2$export$b8813cd5d7824ce7 = "is-hovered_6fdf9f";
+$71570f0038472fa2$export$b3dd760d2dfde29e = "spectrum-Card-grid_6fdf9f";
+$71570f0038472fa2$export$48252dc130b62514 = "spectrum-Card-decoration_6fdf9f";
+$71570f0038472fa2$export$8d5fea71dc66db80 = "spectrum-Card-image_6fdf9f";
+$71570f0038472fa2$export$13dd3510ae7a8399 = "spectrum-Card-illustration_6fdf9f";
+$71570f0038472fa2$export$159930c59efb6273 = "spectrum-Card-avatar_6fdf9f";
+$71570f0038472fa2$export$16715af38fbd9819 = "spectrum-Card-detail_6fdf9f";
+$71570f0038472fa2$export$d946625b97e8aa17 = "spectrum-Card-content_6fdf9f";
+$71570f0038472fa2$export$d9c7209e0e4f7e4d = "spectrum-Card--waterfall_6fdf9f";
+$71570f0038472fa2$export$c7a022df9e10a238 = "spectrum-Card--default_6fdf9f";
+$71570f0038472fa2$export$b77922bc0320c9e4 = "spectrum-Card--noPreview_6fdf9f";
+$71570f0038472fa2$export$59739ab951d2dcc7 = "spectrum-Card--grid_6fdf9f";
+$71570f0038472fa2$export$a03d836e6ef3e749 = "spectrum-Card--noLayout_6fdf9f";
+$71570f0038472fa2$export$92ad04b5ac9296ea = "spectrum-Card--isQuiet_6fdf9f";
+$71570f0038472fa2$export$ccd8ffc36bd10cc = "spectrum-Card--gallery_6fdf9f";
+$71570f0038472fa2$export$1c52334407225704 = "spectrum-Card--horizontal_6fdf9f";
+$71570f0038472fa2$export$e7dc768d35940237 = "is-focused_6fdf9f";
+$71570f0038472fa2$export$2f34e9e3e0b89d95 = "spectrum-CardView_6fdf9f";
+$71570f0038472fa2$export$7fc89689fcfab196 = "spectrum-CardView-centeredWrapper_6fdf9f";
+$71570f0038472fa2$export$4746ac09daa215ae = "spectrum-CardView-row_6fdf9f";
+$71570f0038472fa2$export$d8467f38d2d00bd0 = "is-drop-target_6fdf9f";
+
+
+
+const $e57ab98cef2f01a5$export$64992ac69f286e5c = /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createContext(null);
+function $e57ab98cef2f01a5$export$fea0b38586ec8f13() {
+    return $jpY3B$react.useContext($e57ab98cef2f01a5$export$64992ac69f286e5c);
 }
 
-var $e80f3e549a26f7869571c50d85a$$interop$default = $parcel$interopDefault($e80f3e549a26f7869571c50d85a$exports);
-
-function $c05a01cf76428c47b3d1dc747d32$var$CardBase(props, ref) {
-  props = useProviderProps(props);
-  let context = $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
-
-  let {
-    state
-  } = context;
-  let manager = state == null ? void 0 : state.selectionManager;
-  let {
-    isQuiet,
-    orientation = 'vertical',
-    articleProps = {},
-    item,
-    layout
-  } = props;
-  let key = item == null ? void 0 : item.key;
-  let isSelected = manager == null ? void 0 : manager.isSelected(key);
-  let isDisabled = state == null ? void 0 : state.disabledKeys.has(key);
-
-  let onChange = () => manager == null ? void 0 : manager.select(key);
-
-  let {
-    styleProps
-  } = useStyleProps(props);
-  let {
-    cardProps,
-    titleProps,
-    contentProps
-  } = $c05a01cf76428c47b3d1dc747d32$var$useCard(props);
-  let domRef = useDOMRef(ref);
-  let gridRef = useRef(); // cards are only interactive if there is a selection manager and it allows selection
-
-  let {
-    hoverProps,
-    isHovered
-  } = useHover({
-    isDisabled: manager === undefined || (manager == null ? void 0 : manager.selectionMode) === 'none' || isDisabled
-  });
-  let [isFocused, setIsFocused] = useState(false);
-  let {
-    focusWithinProps
-  } = useFocusWithin({
-    onFocusWithinChange: setIsFocused,
-    isDisabled
-  });
-  let hasFooter = useHasChild("." + $e80f3e549a26f7869571c50d85a$$interop$default['spectrum-Card-footer'], gridRef); // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
-
-  let hasPreviewImage = useHasChild("." + $e80f3e549a26f7869571c50d85a$$interop$default['spectrum-Card-image'], gridRef);
-  let hasPreviewIllustration = useHasChild("." + $e80f3e549a26f7869571c50d85a$$interop$default['spectrum-Card-illustration'], gridRef);
-  let hasPreview = hasPreviewImage || hasPreviewIllustration; // this is for horizontal cards
-
-  let [height, setHeight] = useState(NaN);
-  let updateHeight = useCallback(() => {
-    if (orientation !== 'horizontal') {
-      return;
-    }
-
-    let cardHeight = gridRef.current.getBoundingClientRect().height;
-    setHeight(cardHeight);
-  }, [orientation, gridRef, setHeight]);
-  useResizeObserver({
-    ref: gridRef,
-    onResize: updateHeight
-  });
-  let aspectRatioEnforce = undefined;
-
-  if (orientation === 'horizontal' && !isNaN(height)) {
-    aspectRatioEnforce = {
-      height: height + "px",
-      width: height + "px"
-    };
-  }
-
-  let slots = useMemo(() => ({
-    image: _babelRuntimeHelpersExtends({
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-image'),
-      objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
-      alt: ''
-    }, aspectRatioEnforce),
-    illustration: _babelRuntimeHelpersExtends({
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-illustration')
-    }, aspectRatioEnforce),
-    avatar: {
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-avatar'),
-      size: 'avatar-size-400'
-    },
-    heading: _babelRuntimeHelpersExtends({
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-heading')
-    }, titleProps),
-    content: _babelRuntimeHelpersExtends({
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-content')
-    }, contentProps),
-    detail: {
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-detail')
-    },
-    actionmenu: {
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-actions'),
-      align: 'end',
-      isQuiet: true
-    },
-    footer: {
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-footer'),
-      isHidden: isQuiet
-    },
-    divider: {
-      UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-divider'),
-      size: 'S'
-    }
-  }), [titleProps, contentProps, height, isQuiet, orientation]); // This is only for quiet grid cards
-
-  let [isCloseToSquare, setIsCloseToSquare] = useState(false);
-  useLayoutEffect(() => {
-    if (!(layout === 'grid' && isQuiet)) {
-      return;
-    } // ToDo: how to handle illustrations? what if the illustration looks like an image? What about swatches/fonts https://spectrum-contributions.corp.adobe.com/page/asset-card-beta/#File-type
-
-
-    let image = gridRef.current.querySelector("." + $e80f3e549a26f7869571c50d85a$$interop$default['spectrum-Card-image'] + " img");
 
-    if (!image) {
-      return;
-    }
 
-    let measure = () => {
-      let height = image.naturalHeight;
-      let width = image.naturalWidth;
-      /*
-      * ToDo: Choose between min-padding and plain ratio
-      * Do we want to just do a ratio measurement when it's close to being a square?
-      * or do we want to actually figure out min-padding?
-      * Min Padding would require us to check that the padding is not less than the min in both Vertical and Horizontal
-      * Unfortunately img contain doesn't actually create padding, which is what this math below can figure out
-      * Vs the commented out straight ratio check
-      * */
-
-      let imgTagHeight = image.clientHeight;
-      let imgTagWidth = image.clientWidth;
-      let ratio = Math.min(imgTagWidth / width, imgTagHeight / height);
-      let trueHeight = ratio * height;
-      let trueWidth = ratio * width;
-      let paddingVertical = imgTagHeight - trueHeight;
-      let paddingHorizontal = imgTagWidth - trueWidth;
-
-      if (paddingVertical < 16 && paddingHorizontal < 16) {
-        // ToDo: does this need to be different per scale?
-        setIsCloseToSquare(true);
-      } else {
-        setIsCloseToSquare(false);
-      } // let ratio = height / width;
-      // if (ratio > 0.9 && ratio < 1.1) {
-      //   setIsCloseToSquare(true);
-      // }
 
+function $7888205ff7de382f$var$CardBase(props, ref) {
+    props = $jpY3B$reactspectrumprovider.useProviderProps(props);
+    let context = $e57ab98cef2f01a5$export$fea0b38586ec8f13() || {
+    }; // we can call again here, won't change from Card.tsx
+    let { state: state  } = context;
+    let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
+    let { isQuiet: isQuiet , orientation: orientation = 'vertical' , articleProps: articleProps = {
+    } , item: item , layout: layout , children: children  } = props;
+    let key = item === null || item === void 0 ? void 0 : item.key;
+    let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
+    let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
+    let onChange = ()=>{
+        return manager === null || manager === void 0 ? void 0 : manager.select(key);
     };
-
-    if (image.complete) {
-      measure();
-    } else {
-      image.addEventListener('load', measure);
-      return () => {
-        image.removeEventListener('load', measure);
-      };
-    } // ToDo: how to re-run if image src changes?
-
-  }, [props.children, setIsCloseToSquare, isQuiet, layout]);
-  return /*#__PURE__*/_react.createElement(FocusRing, {
-    focusRingClass: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'focus-ring')
-  }, /*#__PURE__*/_react.createElement("article", _babelRuntimeHelpersExtends({}, styleProps, mergeProps(cardProps, focusWithinProps, hoverProps, filterDOMProps(props), articleProps), {
-    ref: domRef,
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card', {
-      'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
-      'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
-      'spectrum-Card--horizontal': orientation === 'horizontal',
-      'spectrum-Card--closeToSquare': isCloseToSquare,
-      'spectrum-Card--noPreview': !hasPreview,
-      'is-hovered': isHovered,
-      'is-focused': isFocused,
-      'is-selected': isSelected,
-      'spectrum-Card--waterfall': layout === 'waterfall',
-      'spectrum-Card--gallery': layout === 'gallery',
-      'spectrum-Card--grid': layout === 'grid',
-      'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
-    }, styleProps.className)
-  }), /*#__PURE__*/_react.createElement("div", {
-    ref: gridRef,
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-grid')
-  }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/_react.createElement("div", {
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-checkboxWrapper')
-  }, /*#__PURE__*/_react.createElement(Checkbox, {
-    isDisabled: isDisabled,
-    excludeFromTabOrder: true,
-    isSelected: isSelected,
-    onChange: onChange,
-    UNSAFE_className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-checkbox'),
-    isEmphasized: true,
-    "aria-label": "select"
-  })), /*#__PURE__*/_react.createElement(SlotProvider, {
-    slots: slots
-  }, props.children, hasFooter && /*#__PURE__*/_react.createElement(Divider, null)), /*#__PURE__*/_react.createElement("div", {
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-Card-decoration')
-  }))));
-}
-
-function $c05a01cf76428c47b3d1dc747d32$var$useCard(props) {
-  let titleId = useSlotId();
-  let descriptionId = useSlotId();
-  let titleProps = useMemo(() => ({
-    id: titleId
-  }), [titleId]);
-  let contentProps = useMemo(() => ({
-    id: descriptionId
-  }), [descriptionId]);
-  return {
-    cardProps: _babelRuntimeHelpersExtends({}, filterDOMProps(props), {
-      'aria-labelledby': titleId,
-      'aria-describedby': descriptionId,
-      tabIndex: 0
-    }),
-    titleProps,
-    contentProps
-  };
-}
-/**
- * TODO: Add description of component here.
- */
-
-
-const $c05a01cf76428c47b3d1dc747d32$export$CardBase = /*#__PURE__*/_react.forwardRef($c05a01cf76428c47b3d1dc747d32$var$CardBase);
-
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/ar-AE.json
-var $a73c2251b3d85c65b5e95b28f93c8042$exports = {};
-$a73c2251b3d85c65b5e95b28f93c8042$exports = JSON.parse("{\"loading\":\"جارٍ التحميل...\",\"loadingMore\":\"جارٍ تحميل المزيد...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/bg-BG.json
-var $cd530dcba5c06fcc85025230ea1fa$exports = {};
-$cd530dcba5c06fcc85025230ea1fa$exports = JSON.parse("{\"loading\":\"Зареждане...\",\"loadingMore\":\"Зареждане на още...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/cs-CZ.json
-var $d4e7ef95b9eb2258a723c198e08ce1$exports = {};
-$d4e7ef95b9eb2258a723c198e08ce1$exports = JSON.parse("{\"loading\":\"Načítání...\",\"loadingMore\":\"Načítání dalších...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/da-DK.json
-var $e591e0ea92da820daf4525e271cb1091$exports = {};
-$e591e0ea92da820daf4525e271cb1091$exports = JSON.parse("{\"loading\":\"Indlæser ...\",\"loadingMore\":\"Indlæser flere ...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/de-DE.json
-var $a79235d0b2a717d6e877d4196d9a700$exports = {};
-$a79235d0b2a717d6e877d4196d9a700$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Mehr laden ...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/el-GR.json
-var $b031a841d1713b81f37be7a3e54f62bc$exports = {};
-$b031a841d1713b81f37be7a3e54f62bc$exports = JSON.parse("{\"loading\":\"Φόρτωση...\",\"loadingMore\":\"Φόρτωση περισσότερων...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/en-US.json
-var $fe3b01a31811de4315f58934cfe01d9f$exports = {};
-$fe3b01a31811de4315f58934cfe01d9f$exports = JSON.parse("{\"loading\":\"Loading…\",\"loadingMore\":\"Loading more…\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/es-ES.json
-var $dfccb4b840ac9a4f6372f30756231413$exports = {};
-$dfccb4b840ac9a4f6372f30756231413$exports = JSON.parse("{\"loading\":\"Cargando…\",\"loadingMore\":\"Cargando más…\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/et-EE.json
-var $c0afdcf18fcf36fd0acae74dbc5bddfb$exports = {};
-$c0afdcf18fcf36fd0acae74dbc5bddfb$exports = JSON.parse("{\"loading\":\"Laadimine...\",\"loadingMore\":\"Laadi rohkem...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/fi-FI.json
-var $bda8be2b1a9fa47093f290fdcbc590$exports = {};
-$bda8be2b1a9fa47093f290fdcbc590$exports = JSON.parse("{\"loading\":\"Ladataan…\",\"loadingMore\":\"Ladataan lisää…\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/fr-FR.json
-var $b400752af39f40d53ff83e9d6ae1716f$exports = {};
-$b400752af39f40d53ff83e9d6ae1716f$exports = JSON.parse("{\"loading\":\"Chargement...\",\"loadingMore\":\"Chargement supplémentaire...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/he-IL.json
-var $f52b9c77027a45c50447d15f211aee3c$exports = {};
-$f52b9c77027a45c50447d15f211aee3c$exports = JSON.parse("{\"loading\":\"טוען...\",\"loadingMore\":\"טוען עוד...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/hr-HR.json
-var $c51bbbe61ab7dda3d07ff8b63a6656e$exports = {};
-$c51bbbe61ab7dda3d07ff8b63a6656e$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/hu-HU.json
-var $f835d20fb8524bab4bfa3011b2fe2$exports = {};
-$f835d20fb8524bab4bfa3011b2fe2$exports = JSON.parse("{\"loading\":\"Betöltés folyamatban…\",\"loadingMore\":\"Továbbiak betöltése folyamatban…\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/it-IT.json
-var $a049c9a68793a22cc3d3121b0b4a10$exports = {};
-$a049c9a68793a22cc3d3121b0b4a10$exports = JSON.parse("{\"loading\":\"Caricamento...\",\"loadingMore\":\"Caricamento altri...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/ja-JP.json
-var $c90338eb448423751c80d6cf2fb8c8a1$exports = {};
-$c90338eb448423751c80d6cf2fb8c8a1$exports = JSON.parse("{\"loading\":\"読み込み中...\",\"loadingMore\":\"さらに読み込み中...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/ko-KR.json
-var $b635e415ea191230d720f8a57bcfac4$exports = {};
-$b635e415ea191230d720f8a57bcfac4$exports = JSON.parse("{\"loading\":\"로드 중\",\"loadingMore\":\"추가 로드 중\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/lt-LT.json
-var $bf40374472802f152aae7e860cbfba$exports = {};
-$bf40374472802f152aae7e860cbfba$exports = JSON.parse("{\"loading\":\"Įkeliama...\",\"loadingMore\":\"Įkeliama daugiau...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/lv-LV.json
-var $a5f0a1480f91d7acc8710521295c83e$exports = {};
-$a5f0a1480f91d7acc8710521295c83e$exports = JSON.parse("{\"loading\":\"Notiek ielāde...\",\"loadingMore\":\"Tiek ielādēts vēl...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/nb-NO.json
-var $dc580345c46a3bd686da9e80ef533a94$exports = {};
-$dc580345c46a3bd686da9e80ef533a94$exports = JSON.parse("{\"loading\":\"Laster inn ...\",\"loadingMore\":\"Laster inn flere ...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/nl-NL.json
-var $cf7646cd46b2513084100884bbfb5$exports = {};
-$cf7646cd46b2513084100884bbfb5$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Meer laden...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/pl-PL.json
-var $d45f9d44e7bb340675d3f3$exports = {};
-$d45f9d44e7bb340675d3f3$exports = JSON.parse("{\"loading\":\"Ładowanie...\",\"loadingMore\":\"Wczytywanie większej liczby...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/pt-BR.json
-var $d7fc96a2256f525f33439570c5176b6$exports = {};
-$d7fc96a2256f525f33439570c5176b6$exports = JSON.parse("{\"loading\":\"Carregando...\",\"loadingMore\":\"Carregando mais...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/pt-PT.json
-var $bce54762c8026412a8cc0b3c0e17$exports = {};
-$bce54762c8026412a8cc0b3c0e17$exports = JSON.parse("{\"loading\":\"A carregar...\",\"loadingMore\":\"A carregar mais...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/ro-RO.json
-var $b1a5d948f23fd42b37cf4a62bc20fbc9$exports = {};
-$b1a5d948f23fd42b37cf4a62bc20fbc9$exports = JSON.parse("{\"loading\":\"Se încarcă...\",\"loadingMore\":\"Se încarcă mai multe...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/ru-RU.json
-var $fd34d0ae6d3c2b124aa82bec518fdebc$exports = {};
-$fd34d0ae6d3c2b124aa82bec518fdebc$exports = JSON.parse("{\"loading\":\"Загрузка...\",\"loadingMore\":\"Дополнительная загрузка...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/sk-SK.json
-var $f0d899f938fc0b4d2e0a803e77f73b6$exports = {};
-$f0d899f938fc0b4d2e0a803e77f73b6$exports = JSON.parse("{\"loading\":\"Načítava sa...\",\"loadingMore\":\"Načítava sa viac...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/sl-SI.json
-var $fc6db5102b55f61b25dc1512b9307$exports = {};
-$fc6db5102b55f61b25dc1512b9307$exports = JSON.parse("{\"loading\":\"Nalaganje...\",\"loadingMore\":\"Nalaganje več vsebine...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/sr-SP.json
-var $b5867f72618ad3ebdf24df3b2c0c64ad$exports = {};
-$b5867f72618ad3ebdf24df3b2c0c64ad$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/sv-SE.json
-var $e75d48658029b318f5477dc4b15713$exports = {};
-$e75d48658029b318f5477dc4b15713$exports = JSON.parse("{\"loading\":\"Läser in...\",\"loadingMore\":\"Läser in mer...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/tr-TR.json
-var $a386b5db27abfbe3745c59576f$exports = {};
-$a386b5db27abfbe3745c59576f$exports = JSON.parse("{\"loading\":\"Yükleniyor...\",\"loadingMore\":\"Daha fazla yükleniyor...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/uk-UA.json
-var $d04a11b64459844c9f6c167e5538da$exports = {};
-$d04a11b64459844c9f6c167e5538da$exports = JSON.parse("{\"loading\":\"Завантаження…\",\"loadingMore\":\"Завантаження інших об’єктів...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/zh-CN.json
-var $b9216cdc8ad21d0c1b8e94822b8d13a3$exports = {};
-$b9216cdc8ad21d0c1b8e94822b8d13a3$exports = JSON.parse("{\"loading\":\"正在加载...\",\"loadingMore\":\"正在加载更多...\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/zh-TW.json
-var $f9135827d71b7bceae5eb74e24cd6$exports = {};
-$f9135827d71b7bceae5eb74e24cd6$exports = JSON.parse("{\"loading\":\"正在載入\",\"loadingMore\":\"正在載入更多…\"}");
-// @ts-ignore
-const $e13c04c0c86a4119edea9d2f83b$var$intlMessages = {
-  "ar-AE": _babelRuntimeHelpersInteropRequireDefault($a73c2251b3d85c65b5e95b28f93c8042$exports).default,
-  "bg-BG": _babelRuntimeHelpersInteropRequireDefault($cd530dcba5c06fcc85025230ea1fa$exports).default,
-  "cs-CZ": _babelRuntimeHelpersInteropRequireDefault($d4e7ef95b9eb2258a723c198e08ce1$exports).default,
-  "da-DK": _babelRuntimeHelpersInteropRequireDefault($e591e0ea92da820daf4525e271cb1091$exports).default,
-  "de-DE": _babelRuntimeHelpersInteropRequireDefault($a79235d0b2a717d6e877d4196d9a700$exports).default,
-  "el-GR": _babelRuntimeHelpersInteropRequireDefault($b031a841d1713b81f37be7a3e54f62bc$exports).default,
-  "en-US": _babelRuntimeHelpersInteropRequireDefault($fe3b01a31811de4315f58934cfe01d9f$exports).default,
-  "es-ES": _babelRuntimeHelpersInteropRequireDefault($dfccb4b840ac9a4f6372f30756231413$exports).default,
-  "et-EE": _babelRuntimeHelpersInteropRequireDefault($c0afdcf18fcf36fd0acae74dbc5bddfb$exports).default,
-  "fi-FI": _babelRuntimeHelpersInteropRequireDefault($bda8be2b1a9fa47093f290fdcbc590$exports).default,
-  "fr-FR": _babelRuntimeHelpersInteropRequireDefault($b400752af39f40d53ff83e9d6ae1716f$exports).default,
-  "he-IL": _babelRuntimeHelpersInteropRequireDefault($f52b9c77027a45c50447d15f211aee3c$exports).default,
-  "hr-HR": _babelRuntimeHelpersInteropRequireDefault($c51bbbe61ab7dda3d07ff8b63a6656e$exports).default,
-  "hu-HU": _babelRuntimeHelpersInteropRequireDefault($f835d20fb8524bab4bfa3011b2fe2$exports).default,
-  "it-IT": _babelRuntimeHelpersInteropRequireDefault($a049c9a68793a22cc3d3121b0b4a10$exports).default,
-  "ja-JP": _babelRuntimeHelpersInteropRequireDefault($c90338eb448423751c80d6cf2fb8c8a1$exports).default,
-  "ko-KR": _babelRuntimeHelpersInteropRequireDefault($b635e415ea191230d720f8a57bcfac4$exports).default,
-  "lt-LT": _babelRuntimeHelpersInteropRequireDefault($bf40374472802f152aae7e860cbfba$exports).default,
-  "lv-LV": _babelRuntimeHelpersInteropRequireDefault($a5f0a1480f91d7acc8710521295c83e$exports).default,
-  "nb-NO": _babelRuntimeHelpersInteropRequireDefault($dc580345c46a3bd686da9e80ef533a94$exports).default,
-  "nl-NL": _babelRuntimeHelpersInteropRequireDefault($cf7646cd46b2513084100884bbfb5$exports).default,
-  "pl-PL": _babelRuntimeHelpersInteropRequireDefault($d45f9d44e7bb340675d3f3$exports).default,
-  "pt-BR": _babelRuntimeHelpersInteropRequireDefault($d7fc96a2256f525f33439570c5176b6$exports).default,
-  "pt-PT": _babelRuntimeHelpersInteropRequireDefault($bce54762c8026412a8cc0b3c0e17$exports).default,
-  "ro-RO": _babelRuntimeHelpersInteropRequireDefault($b1a5d948f23fd42b37cf4a62bc20fbc9$exports).default,
-  "ru-RU": _babelRuntimeHelpersInteropRequireDefault($fd34d0ae6d3c2b124aa82bec518fdebc$exports).default,
-  "sk-SK": _babelRuntimeHelpersInteropRequireDefault($f0d899f938fc0b4d2e0a803e77f73b6$exports).default,
-  "sl-SI": _babelRuntimeHelpersInteropRequireDefault($fc6db5102b55f61b25dc1512b9307$exports).default,
-  "sr-SP": _babelRuntimeHelpersInteropRequireDefault($b5867f72618ad3ebdf24df3b2c0c64ad$exports).default,
-  "sv-SE": _babelRuntimeHelpersInteropRequireDefault($e75d48658029b318f5477dc4b15713$exports).default,
-  "tr-TR": _babelRuntimeHelpersInteropRequireDefault($a386b5db27abfbe3745c59576f$exports).default,
-  "uk-UA": _babelRuntimeHelpersInteropRequireDefault($d04a11b64459844c9f6c167e5538da$exports).default,
-  "zh-CN": _babelRuntimeHelpersInteropRequireDefault($b9216cdc8ad21d0c1b8e94822b8d13a3$exports).default,
-  "zh-TW": _babelRuntimeHelpersInteropRequireDefault($f9135827d71b7bceae5eb74e24cd6$exports).default
-};
-
-function $e13c04c0c86a4119edea9d2f83b$var$CardView(props, ref) {
-  let {
-    scale
-  } = useProvider();
-  let {
-    styleProps
-  } = useStyleProps(props);
-  let domRef = useDOMRef(ref);
-  let {
-    isQuiet,
-    renderEmptyState,
-    layout,
-    loadingState,
-    onLoadMore,
-    cardOrientation = 'vertical'
-  } = props;
-  let collator = useCollator({
-    usage: 'search',
-    sensitivity: 'base'
-  });
-  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-  let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({
-    collator,
-    cardOrientation,
-    scale
-  }) : layout, [layout, collator, cardOrientation, scale]);
-  let layoutType = cardViewLayout.layoutType;
-  let formatMessage = useMessageFormatter($e13c04c0c86a4119edea9d2f83b$var$intlMessages);
-  let {
-    direction
-  } = useLocale();
-  let {
-    collection
-  } = useListState(props);
-  let gridCollection = useMemo(() => new GridCollection({
-    columnCount: 1,
-    items: [...collection].map(item => _babelRuntimeHelpersExtends({}, item, {
-      hasChildNodes: true,
-      childNodes: [{
-        key: "cell-" + item.key,
-        type: 'cell',
-        value: null,
-        level: 0,
-        rendered: null,
-        textValue: item.textValue,
-        hasChildNodes: false,
-        childNodes: []
-      }]
-    }))
-  }), [collection]);
-  let state = useGridState(_babelRuntimeHelpersExtends({}, props, {
-    selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
-    collection: gridCollection,
-    focusMode: 'cell'
-  }));
-  cardViewLayout.collection = gridCollection;
-  cardViewLayout.disabledKeys = state.disabledKeys;
-  cardViewLayout.isLoading = isLoading;
-  cardViewLayout.direction = direction;
-  let {
-    gridProps
-  } = useGrid(_babelRuntimeHelpersExtends({}, props, {
-    isVirtualized: true,
-    keyboardDelegate: cardViewLayout
-  }), state, domRef);
-
-  let renderWrapper = (parent, reusableView) => /*#__PURE__*/_react.createElement(VirtualizerItem, {
-    key: reusableView.key,
-    reusableView: reusableView,
-    parent: parent
-  });
-
-  let focusedKey = state.selectionManager.focusedKey;
-  let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
-
-  if ((focusedItem == null ? void 0 : focusedItem.parentKey) != null) {
-    focusedKey = focusedItem.parentKey;
-  }
-
-  let margin = cardViewLayout.margin || 0;
-  let virtualizer = cardViewLayout.virtualizer;
-  let scrollToItem = useCallback(key => {
-    virtualizer && virtualizer.scrollToItem(key, {
-      duration: 0,
-      offsetY: margin
+    let { styleProps: styleProps  } = $jpY3B$reactspectrumutils.useStyleProps(props);
+    let { cardProps: cardProps , titleProps: titleProps , contentProps: contentProps  } = $7888205ff7de382f$var$useCard(props);
+    let domRef = $jpY3B$reactspectrumutils.useDOMRef(ref);
+    let gridRef = $jpY3B$react.useRef();
+    let checkboxRef = $jpY3B$react.useRef(null);
+    // cards are only interactive if there is a selection manager and it allows selection
+    let { hoverProps: hoverProps , isHovered: isHovered  } = $jpY3B$reactariainteractions.useHover({
+        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
     });
-  }, [margin, virtualizer]); // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
-
-  return /*#__PURE__*/_react.createElement($d2268ebff01b30dc8701260db9de8b73$export$CardViewContext.Provider, {
-    value: {
-      state,
-      isQuiet,
-      layout: cardViewLayout,
-      cardOrientation
-    }
-  }, /*#__PURE__*/_react.createElement(Virtualizer, _babelRuntimeHelpersExtends({}, gridProps, styleProps, {
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-CardView'),
-    ref: domRef,
-    focusedKey: focusedKey,
-    scrollDirection: "vertical",
-    layout: cardViewLayout,
-    collection: gridCollection,
-    isLoading: isLoading,
-    onLoadMore: onLoadMore,
-    renderWrapper: renderWrapper,
-    transitionDuration: isLoading ? 160 : 220,
-    scrollToItem: scrollToItem
-  }), (type, item) => {
-    if (type === 'item') {
-      return /*#__PURE__*/_react.createElement($e13c04c0c86a4119edea9d2f83b$var$InternalCard, {
-        item: item
-      });
-    } else if (type === 'loader') {
-      return /*#__PURE__*/_react.createElement($e13c04c0c86a4119edea9d2f83b$var$CenteredWrapper, null, /*#__PURE__*/_react.createElement(ProgressCircle, {
-        isIndeterminate: true,
-        "aria-label": state.collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')
-      }));
-    } else if (type === 'placeholder') {
-      let emptyState = renderEmptyState ? renderEmptyState() : null;
-
-      if (emptyState == null) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.createElement($e13c04c0c86a4119edea9d2f83b$var$CenteredWrapper, null, emptyState);
-    }
-  }));
-}
-
-function $e13c04c0c86a4119edea9d2f83b$var$CenteredWrapper(_ref) {
-  let {
-    children
-  } = _ref;
-  let {
-    state
-  } = $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext();
-  return /*#__PURE__*/_react.createElement("div", {
-    role: "row",
-    "aria-rowindex": state.collection.size + 1,
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-CardView-centeredWrapper')
-  }, /*#__PURE__*/_react.createElement("div", {
-    role: "gridcell"
-  }, children));
+    let [isFocused, setIsFocused] = $jpY3B$react.useState(false);
+    let { focusWithinProps: focusWithinProps  } = $jpY3B$reactariainteractions.useFocusWithin({
+        onFocusWithinChange: setIsFocused,
+        isDisabled: isDisabled
+    });
+    // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
+    let hasPreviewImage = $jpY3B$reactspectrumutils.useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports))['spectrum-Card-image']}`, gridRef);
+    let hasPreviewIllustration = $jpY3B$reactspectrumutils.useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports))['spectrum-Card-illustration']}`, gridRef);
+    let hasPreview = hasPreviewImage || hasPreviewIllustration;
+    // this is for horizontal cards
+    let [height, setHeight] = $jpY3B$react.useState(NaN);
+    let updateHeight = $jpY3B$react.useCallback(()=>{
+        if (orientation !== 'horizontal') return;
+        let cardHeight = gridRef.current.getBoundingClientRect().height;
+        setHeight(cardHeight);
+    }, [
+        orientation,
+        gridRef,
+        setHeight
+    ]);
+    $jpY3B$reactariautils.useResizeObserver({
+        ref: gridRef,
+        onResize: updateHeight
+    });
+    let aspectRatioEnforce = undefined;
+    if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
+        height: `${height}px`,
+        width: `${height}px`
+    };
+    let slots = $jpY3B$react.useMemo(()=>({
+            image: {
+                UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-image'),
+                objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
+                alt: '',
+                ...aspectRatioEnforce
+            },
+            illustration: {
+                UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-illustration'),
+                ...aspectRatioEnforce
+            },
+            avatar: {
+                UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-avatar'),
+                size: 'avatar-size-400'
+            },
+            heading: {
+                UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-heading'),
+                ...titleProps
+            },
+            content: {
+                UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-content'),
+                ...contentProps
+            },
+            detail: {
+                UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-detail')
+            }
+        })
+    , [
+        titleProps,
+        contentProps,
+        height,
+        isQuiet,
+        orientation
+    ]);
+    $jpY3B$reactariautils.useLayoutEffect(()=>{
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            let walker = $jpY3B$reactariafocus.getFocusableTreeWalker(gridRef.current);
+            let nextNode = walker.nextNode();
+            while(nextNode != null){
+                if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
+                    console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
+                    break;
+                }
+                nextNode = walker.nextNode();
+            }
+        }
+    }, [
+        children
+    ]);
+    return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($jpY3B$reactariafocus.FocusRing, {
+        focusRingClass: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'focus-ring')
+    }, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("article", {
+        ...styleProps,
+        ...$jpY3B$reactariautils.mergeProps(cardProps, focusWithinProps, hoverProps, $jpY3B$reactariautils.filterDOMProps(props), articleProps),
+        ref: domRef,
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card', {
+            'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
+            'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
+            'spectrum-Card--horizontal': orientation === 'horizontal',
+            'spectrum-Card--noPreview': !hasPreview,
+            'is-hovered': isHovered,
+            'is-focused': isFocused,
+            'is-selected': isSelected,
+            'spectrum-Card--waterfall': layout === 'waterfall',
+            'spectrum-Card--gallery': layout === 'gallery',
+            'spectrum-Card--grid': layout === 'grid',
+            'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
+        }, styleProps.className)
+    }, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("div", {
+        ref: gridRef,
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-grid')
+    }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("div", {
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-checkboxWrapper')
+    }, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($jpY3B$reactspectrumcheckbox.Checkbox, {
+        ref: checkboxRef,
+        isDisabled: isDisabled,
+        excludeFromTabOrder: true,
+        isSelected: isSelected,
+        onChange: onChange,
+        UNSAFE_className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-checkbox'),
+        isEmphasized: true,
+        "aria-label": "select"
+    })), /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($jpY3B$reactspectrumutils.SlotProvider, {
+        slots: slots
+    }, children), /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("div", {
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-Card-decoration')
+    })))));
 }
-
-function $e13c04c0c86a4119edea9d2f83b$var$InternalCard(props) {
-  let {
-    item
-  } = props;
-  let cellNode = [...item.childNodes][0];
-  let {
-    state,
-    cardOrientation,
-    isQuiet,
-    layout
-  } = $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext();
-  let layoutType = layout.layoutType;
-  let rowRef = useRef();
-  let cellRef = useRef();
-  let unwrappedRef = useUnwrapDOMRef(cellRef);
-  let {
-    rowProps
-  } = useGridRow({
-    node: item,
-    isVirtualized: true
-  }, state, rowRef);
-  let {
-    gridCellProps
-  } = useGridCell({
-    node: cellNode,
-    focusMode: 'cell'
-  }, state, unwrappedRef);
-
-  if (layoutType === 'grid' || layoutType === 'gallery') {
-    isQuiet = true;
-  }
-
-  if (layoutType !== 'grid') {
-    cardOrientation = 'vertical';
-  }
-
-  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, rowProps, {
-    ref: rowRef,
-    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-CardView-row')
-  }), /*#__PURE__*/_react.createElement($c05a01cf76428c47b3d1dc747d32$export$CardBase, {
-    ref: cellRef,
-    articleProps: gridCellProps,
-    isQuiet: isQuiet,
-    orientation: cardOrientation,
-    item: item,
-    layout: layoutType
-  }, item.rendered));
+function $7888205ff7de382f$var$useCard(props) {
+    let titleId = $jpY3B$reactariautils.useSlotId();
+    let descriptionId = $jpY3B$reactariautils.useSlotId();
+    let titleProps = $jpY3B$react.useMemo(()=>({
+            id: titleId
+        })
+    , [
+        titleId
+    ]);
+    let contentProps = $jpY3B$react.useMemo(()=>({
+            id: descriptionId
+        })
+    , [
+        descriptionId
+    ]);
+    return {
+        cardProps: {
+            ...$jpY3B$reactariautils.filterDOMProps(props),
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
+            tabIndex: 0
+        },
+        titleProps: titleProps,
+        contentProps: contentProps
+    };
 }
 /**
  * TODO: Add description of component here.
- */
+ */ const $7888205ff7de382f$export$7a6ccaf429ad93a8 = /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).forwardRef($7888205ff7de382f$var$CardBase);
 
 
-const CardView = /*#__PURE__*/_react.forwardRef($e13c04c0c86a4119edea9d2f83b$var$CardView);
 
-exports.CardView = CardView;
 
-class $ae626509048548c15655cbbeb258411$export$BaseLayout extends Layout {
-  constructor(options) {
-    if (options === void 0) {
-      options = {};
-    }
 
-    super();
-    this.contentSize = void 0;
-    this.layoutInfos = void 0;
-    this.collator = void 0;
-    this.lastCollection = void 0;
-    this.collection = void 0;
-    this.isLoading = void 0;
-    this.disabledKeys = new Set();
-    this.direction = void 0;
-    this.scale = void 0;
-    this.margin = void 0;
-    this.layoutInfos = new Map();
-    this.collator = options.collator;
-    this.lastCollection = null;
-    this.scale = options.scale || 'medium';
-    this.margin = options.margin || 24;
-  }
-
-  validate(invalidationContext) {
-    this.collection = this.virtualizer.collection;
-    this.buildCollection(invalidationContext); // Remove layout info that doesn't exist in new collection
-
-    if (this.lastCollection) {
-      for (let key of this.lastCollection.getKeys()) {
-        if (!this.collection.getItem(key)) {
-          this.layoutInfos.delete(key);
-        }
-      }
-
-      if (!this.isLoading) {
-        this.layoutInfos.delete('loader');
-      }
+var $dc38f0b958ac5018$exports = {};
+var $b0d49dbc72f937a2$exports = {};
+$b0d49dbc72f937a2$exports = {
+    "loading": `جارٍ التحميل...`,
+    "loadingMore": `جارٍ تحميل المزيد...`
+};
 
-      if (this.collection.size > 0) {
-        this.layoutInfos.delete('placeholder');
-      }
-    }
 
-    this.lastCollection = this.collection;
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+var $ce0dd82398fba411$exports = {};
+$ce0dd82398fba411$exports = {
+    "loading": `Зареждане...`,
+    "loadingMore": `Зареждане на още...`
+};
 
 
-  buildCollection(invalidationContext) {}
+var $1086444b40892e5d$exports = {};
+$1086444b40892e5d$exports = {
+    "loading": `Načítání...`,
+    "loadingMore": `Načítání dalších...`
+};
 
-  getContentSize() {
-    return this.contentSize;
-  }
 
-  getLayoutInfo(key) {
-    return this.layoutInfos.get(key);
-  }
+var $26f9bd87c0446842$exports = {};
+$26f9bd87c0446842$exports = {
+    "loading": `Indlæser...`,
+    "loadingMore": `Indlæser flere...`
+};
 
-  getVisibleLayoutInfos(rect) {
-    let res = [];
 
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (this.isVisible(layoutInfo, rect)) {
-        res.push(layoutInfo);
-      }
-    }
-
-    return res;
-  }
-
-  isVisible(layoutInfo, rect) {
-    return layoutInfo.rect.intersects(rect);
-  }
-
-  getInitialLayoutInfo(layoutInfo) {
-    layoutInfo.opacity = 0;
-    layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
-    return layoutInfo;
-  }
-
-  getFinalLayoutInfo(layoutInfo) {
-    layoutInfo.opacity = 0;
-    layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
-    return layoutInfo;
-  }
-
-  _findClosestLayoutInfo(target, rect) {
-    let layoutInfos = this.getVisibleLayoutInfos(rect);
-    let best = null;
-    let bestDistance = Infinity; // Calculates distance as the distance between the center of 2 rects.
-
-    for (let cur of layoutInfos) {
-      if (cur.type === 'item') {
-        let curRect = cur.rect;
-        let targetMidX = (target.x + target.maxX) / 2;
-        let targetMidY = (target.y + target.maxY) / 2;
-        let curMidX = (curRect.x + curRect.maxX) / 2;
-        let curMidY = (curRect.y + curRect.maxY) / 2;
-        let dist = Math.pow(targetMidX - curMidX, 2) + Math.pow(targetMidY - curMidY, 2);
-
-        if (dist < bestDistance) {
-          best = cur;
-          bestDistance = dist;
-        }
-      }
-    }
+var $5922ace8d8eedc34$exports = {};
+$5922ace8d8eedc34$exports = {
+    "loading": `Wird geladen...`,
+    "loadingMore": `Noch mehr wird geladen...`
+};
 
-    return best;
-  }
 
-  _findClosest(target, rect) {
-    let best = this._findClosestLayoutInfo(target, rect);
+var $0dff680a5aaa08a6$exports = {};
+$0dff680a5aaa08a6$exports = {
+    "loading": `Φόρτωση...`,
+    "loadingMore": `Φόρτωση περισσότερων...`
+};
 
-    return best || null;
-  }
 
-  getKeyBelow(key) {
-    var _this$_findClosest, _closestRow$childNode;
+var $40f72ebe96160fe5$exports = {};
+$40f72ebe96160fe5$exports = {
+    "loading": `Loading…`,
+    "loadingMore": `Loading more…`
+};
 
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    let layoutInfo = this.getLayoutInfo(parentRowKey);
-    let rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
-    let closestRow = this.collection.getItem((_this$_findClosest = this._findClosest(layoutInfo.rect, rect)) == null ? void 0 : _this$_findClosest.key);
-    return closestRow == null ? void 0 : (_closestRow$childNode = closestRow.childNodes[0]) == null ? void 0 : _closestRow$childNode.key;
-  }
 
-  getKeyAbove(key) {
-    var _this$_findClosest2, _closestRow$childNode2;
+var $fd3d037364cca31d$exports = {};
+$fd3d037364cca31d$exports = {
+    "loading": `Cargando…`,
+    "loadingMore": `Cargando más…`
+};
 
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    let layoutInfo = this.getLayoutInfo(parentRowKey);
-    let rect = new Rect(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
-    let closestRow = this.collection.getItem((_this$_findClosest2 = this._findClosest(layoutInfo.rect, rect)) == null ? void 0 : _this$_findClosest2.key);
-    return closestRow == null ? void 0 : (_closestRow$childNode2 = closestRow.childNodes[0]) == null ? void 0 : _closestRow$childNode2.key;
-  }
 
-  getKeyRightOf(key) {
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    key = this.direction === 'rtl' ? this.collection.getKeyBefore(parentRowKey) : this.collection.getKeyAfter(parentRowKey);
+var $aeb59a17c296301b$exports = {};
+$aeb59a17c296301b$exports = {
+    "loading": `Laadimine...`,
+    "loadingMore": `Laadi rohkem...`
+};
 
-    while (key != null) {
-      let item = this.collection.getItem(key); // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
 
-      if (item.type === 'item') {
-        return item.childNodes[0].key;
-      }
+var $8725562d6e87d608$exports = {};
+$8725562d6e87d608$exports = {
+    "loading": `Ladataan…`,
+    "loadingMore": `Ladataan lisää…`
+};
 
-      key = this.direction === 'rtl' ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
-    }
-  }
 
-  getKeyLeftOf(key) {
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    key = this.direction === 'rtl' ? this.collection.getKeyAfter(parentRowKey) : this.collection.getKeyBefore(parentRowKey);
+var $5b8a7cd61bd67f0d$exports = {};
+$5b8a7cd61bd67f0d$exports = {
+    "loading": `Chargement en cours…`,
+    "loadingMore": `Chargement d’autres d’éléments…`
+};
 
-    while (key != null) {
-      let item = this.collection.getItem(key); // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
 
-      if (item.type === 'item') {
-        return item.childNodes[0].key;
-      }
+var $904fdf1c66b8e1ae$exports = {};
+$904fdf1c66b8e1ae$exports = {
+    "loading": `טוען...`,
+    "loadingMore": `טוען עוד...`
+};
 
-      key = this.direction === 'rtl' ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
-    }
-  }
 
-  getFirstKey() {
-    let firstRow = this.collection.getItem(this.collection.getFirstKey());
-    return firstRow.childNodes[0].key;
-  }
+var $e321e496e49645f3$exports = {};
+$e321e496e49645f3$exports = {
+    "loading": `Učitavam...`,
+    "loadingMore": `Učitavam još...`
+};
 
-  getLastKey() {
-    let lastRow = this.collection.getItem(this.collection.getLastKey());
-    return lastRow.childNodes[0].key;
-  } // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
-  // Perhaps have layoutInfo store childKey as well so we don't need to do this? Or maybe make the layoutInfos be the cells instead of the rows?
 
+var $5fb9f79f322fc149$exports = {};
+$5fb9f79f322fc149$exports = {
+    "loading": `Betöltés folyamatban…`,
+    "loadingMore": `Továbbiak betöltése folyamatban…`
+};
 
-  getKeyPageAbove(key) {
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    let layoutInfo = this.getLayoutInfo(parentRowKey);
 
-    if (layoutInfo) {
-      var _this$collection$getI;
+var $87d8922713b63bdb$exports = {};
+$87d8922713b63bdb$exports = {
+    "loading": `Caricamento...`,
+    "loadingMore": `Caricamento altri...`
+};
 
-      let pageY = Math.max(0, layoutInfo.rect.y + layoutInfo.rect.height - this.virtualizer.visibleRect.height); // If the node is so large that it spans multiple page heights, return the key of the item immediately above
-      // Otherwise keep going up until we exceed a single page height worth of nodes
 
-      let keyAbove = (_this$collection$getI = this.collection.getItem(this.getKeyAbove(key))) == null ? void 0 : _this$collection$getI.parentKey;
-      layoutInfo = this.getLayoutInfo(keyAbove);
+var $57201e032f548603$exports = {};
+$57201e032f548603$exports = {
+    "loading": `読み込み中...`,
+    "loadingMore": `さらに読み込み中...`
+};
 
-      if (layoutInfo && layoutInfo.rect.y > pageY) {
-        while (layoutInfo && layoutInfo.rect.y > pageY) {
-          var _this$collection$getI2;
 
-          let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
-          let keyAbove = (_this$collection$getI2 = this.collection.getItem(this.getKeyAbove(childKey))) == null ? void 0 : _this$collection$getI2.parentKey;
-          layoutInfo = this.getLayoutInfo(keyAbove);
-        }
-      }
+var $74aa6884e1ef4030$exports = {};
+$74aa6884e1ef4030$exports = {
+    "loading": `로드 중…`,
+    "loadingMore": `추가 로드 중…`
+};
 
-      if (layoutInfo) {
-        let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
-        return childKey;
-      }
-    }
 
-    return this.getFirstKey();
-  } // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
-  // Perhaps have layoutInfo store childKey as well so we don't need to do this?
+var $50cefda6a03c058b$exports = {};
+$50cefda6a03c058b$exports = {
+    "loading": `Įkeliama…`,
+    "loadingMore": `Įkeliama daugiau…`
+};
 
 
-  getKeyPageBelow(key) {
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    let layoutInfo = this.getLayoutInfo(parentRowKey);
+var $3d08f75b6bbe5354$exports = {};
+$3d08f75b6bbe5354$exports = {
+    "loading": `Notiek ielāde…`,
+    "loadingMore": `Tiek ielādēts vēl...`
+};
 
-    if (layoutInfo) {
-      var _this$collection$getI3;
 
-      let pageY = Math.min(this.virtualizer.contentSize.height, layoutInfo.rect.y - layoutInfo.rect.height + this.virtualizer.visibleRect.height); // If the node is so large that it spans multiple page heights, return the key of the item immediately below
-      // Otherwise keep going up until we exceed a single page height worth of nodes
+var $c59f7b2f9755472b$exports = {};
+$c59f7b2f9755472b$exports = {
+    "loading": `Laster inn...`,
+    "loadingMore": `Laster inn flere...`
+};
 
-      let keyBelow = (_this$collection$getI3 = this.collection.getItem(this.getKeyBelow(key))) == null ? void 0 : _this$collection$getI3.parentKey;
-      layoutInfo = this.getLayoutInfo(keyBelow);
 
-      if (layoutInfo && layoutInfo.rect.y < pageY) {
-        while (layoutInfo && layoutInfo.rect.y < pageY) {
-          var _this$collection$getI4;
+var $d81bf728da4b1c33$exports = {};
+$d81bf728da4b1c33$exports = {
+    "loading": `Laden...`,
+    "loadingMore": `Meer laden...`
+};
 
-          let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
-          let keyBelow = (_this$collection$getI4 = this.collection.getItem(this.getKeyBelow(childKey))) == null ? void 0 : _this$collection$getI4.parentKey;
-          layoutInfo = this.getLayoutInfo(keyBelow);
-        }
-      }
 
-      if (layoutInfo) {
-        let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
-        return childKey;
-      }
-    }
+var $f323a42ea1486c2f$exports = {};
+$f323a42ea1486c2f$exports = {
+    "loading": `Wczytywanie...`,
+    "loadingMore": `Wczytywanie większej liczby...`
+};
 
-    return this.getLastKey();
-  }
 
-  getKeyForSearch(search, fromKey) {
-    if (!this.collator) {
-      return null;
-    }
+var $2b2937248d390105$exports = {};
+$2b2937248d390105$exports = {
+    "loading": `Carregando...`,
+    "loadingMore": `Carregando mais...`
+};
 
-    let collection = this.collection;
-    let key = fromKey != null ? fromKey : this.getFirstKey();
-    let startItem = collection.getItem(key);
-    key = startItem.parentKey;
 
-    while (key != null) {
-      let item = collection.getItem(key);
+var $156cd72030936350$exports = {};
+$156cd72030936350$exports = {
+    "loading": `A carregar...`,
+    "loadingMore": `A carregar mais...`
+};
 
-      if (item.textValue) {
-        let substring = item.textValue.slice(0, search.length);
 
-        if (this.collator.compare(substring, search) === 0) {
-          return [...item.childNodes][0].key;
-        }
-      }
+var $5964cf64325251a3$exports = {};
+$5964cf64325251a3$exports = {
+    "loading": `Se încarcă...`,
+    "loadingMore": `Se încarcă mai multe...`
+};
 
-      key = this.collection.getKeyAfter(key);
-    }
 
-    return null;
-  }
+var $71b3c908be47dc7e$exports = {};
+$71b3c908be47dc7e$exports = {
+    "loading": `Загрузка...`,
+    "loadingMore": `Дополнительная загрузка...`
+};
 
-}
 
-const $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS = {
-  S: {
-    idealRowHeight: 112,
-    minItemSize: new Size(96, 96),
-    itemSpacing: new Size(8, 16),
-    itemPadding: 24,
-    dropSpacing: 50,
-    margin: 8
-  },
-  L: {
-    idealRowHeight: 208,
-    minItemSize: new Size(136, 136),
-    itemSpacing: new Size(18, 18),
-    itemPadding: {
-      'medium': 114,
-      'large': 143
-    },
-    dropSpacing: 100,
-    margin: 24
-  }
+var $815155759d865560$exports = {};
+$815155759d865560$exports = {
+    "loading": `Načítava sa...`,
+    "loadingMore": `Načítava sa viac...`
 };
 
-class GalleryLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
-  constructor(options) {
-    if (options === void 0) {
-      options = {};
-    }
 
-    super(options);
-    this.idealRowHeight = void 0;
-    this.itemSpacing = void 0;
-    this.itemPadding = void 0;
-    this.minItemSize = void 0;
-    this.threshold = void 0;
-    let cardSize = 'L';
-    this.idealRowHeight = options.idealRowHeight || $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
-    this.itemSpacing = options.itemSpacing || $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
-    this.minItemSize = options.minItemSize || $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].minItemSize;
-    this.threshold = options.threshold || 1;
-    this.margin = options.margin != null ? options.margin : $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].margin;
-  }
-
-  get layoutType() {
-    return 'gallery';
-  }
-  /**
-   * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from
-   * the widest in the row until it can't give anymore, then move to the second widest and so forth.
-   * Do this until all assets meet the min-width.
-   * */
-
-
-  _distributeWidths(widths) {
-    // create a copy of the widths array and sort it largest to smallest
-    let sortedWidths = widths.concat().sort((a, b) => a[1] > b[1] ? -1 : 1);
-
-    for (let width of widths) {
-      // for each width, if it's smaller than the min width
-      if (width[1] < this.minItemSize.width) {
-        // then figure out how much smaller
-        let delta = this.minItemSize.width - width[1];
-
-        for (let item of sortedWidths) {
-          // go from the largest width in the row to the smallest
-          // if the width is greater than the min width
-          if (widths[item[0]][1] > this.minItemSize.width) {
-            // subtract the delta from the width, if it's still greater than the min width
-            // then we have finished, subtract the delta permanently from that width
-            if (widths[item[0]][1] - delta > this.minItemSize.width) {
-              widths[item[0]][1] -= delta;
-              delta = 0;
-              break;
-            } else {
-              // otherwise, we take as much as we can from the current width and then move on to
-              // the next largest and take some width from it
-              let maxChange = widths[item[0]][1] - this.minItemSize.width;
-              delta -= maxChange;
-              widths[item[0]][1] -= maxChange;
-            }
-          }
-        }
+var $d5deb2faae807da5$exports = {};
+$d5deb2faae807da5$exports = {
+    "loading": `Nalaganje...`,
+    "loadingMore": `Nalaganje dodatne vsebine...`
+};
 
-        if (delta > 0) {
-          return false;
-        } // force the width to be the min width that we just rebalanced for
 
+var $42e52cb34b81b4af$exports = {};
+$42e52cb34b81b4af$exports = {
+    "loading": `Učitavam...`,
+    "loadingMore": `Učitavam još...`
+};
 
-        width[1] = this.minItemSize.width;
-      }
-    }
 
-    return true;
-  }
+var $f278e5fd270ba60f$exports = {};
+$f278e5fd270ba60f$exports = {
+    "loading": `Läser in...`,
+    "loadingMore": `Läser in mer...`
+};
 
-  buildCollection() {
-    let visibleWidth = this.virtualizer.visibleRect.width;
-    let visibleHeight = this.virtualizer.visibleRect.height;
-    let y = this.margin;
-    let availableWidth = visibleWidth - this.margin * 2; // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
 
-    let ratios = [];
-    let totalWidth = 0;
-    let minRatio = this.minItemSize.width / this.minItemSize.height;
-    let maxRatio = availableWidth / this.minItemSize.height;
+var $523e0ad61eab5c5d$exports = {};
+$523e0ad61eab5c5d$exports = {
+    "loading": `Yükleniyor...`,
+    "loadingMore": `Daha fazla yükleniyor...`
+};
 
-    for (let node of this.collection) {
-      let ratio = node.props.width / node.props.height;
 
-      if (ratio < minRatio) {
-        ratio = minRatio;
-      } else if (ratio > maxRatio && ratio !== minRatio) {
-        ratio = maxRatio;
-      }
+var $a58cff5745fe89a6$exports = {};
+$a58cff5745fe89a6$exports = {
+    "loading": `Завантаження…`,
+    "loadingMore": `Завантаження інших об’єктів...`
+};
 
-      let itemWidth = ratio * this.minItemSize.height;
-      ratios.push(ratio);
-      totalWidth += itemWidth;
-    }
 
-    totalWidth += this.itemSpacing.width * (this.collection.size - 1); // Determine how many rows we'll need, and partition the items into rows
-    // using the aspect ratios as weights.
+var $2c1c50c48e046fcb$exports = {};
+$2c1c50c48e046fcb$exports = {
+    "loading": `正在加载...`,
+    "loadingMore": `正在加载更多...`
+};
 
-    let rows = Math.max(1, Math.ceil(totalWidth / availableWidth)); // if the available width can't hold two items, then every item will get its own row
-    // this leads to a faster run through linear partition and more dependable output for small row widths
 
-    if (availableWidth <= this.minItemSize.width * 2 + this.itemPadding * 2) {
-      rows = this.collection.size;
-    }
+var $d20ec5c21f83badd$exports = {};
+$d20ec5c21f83badd$exports = {
+    "loading": `正在載入…`,
+    "loadingMore": `正在載入更多…`
+};
 
-    let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio);
-    let partition = $a23e32931be921d018d1ae1efeda8$var$linearPartition(weightedRatios, rows);
-    let index = 0;
 
-    for (let row of partition) {
-      // Compute the total weight for this row
-      let totalWeight = 0;
+$dc38f0b958ac5018$exports = {
+    "ar-AE": $b0d49dbc72f937a2$exports,
+    "bg-BG": $ce0dd82398fba411$exports,
+    "cs-CZ": $1086444b40892e5d$exports,
+    "da-DK": $26f9bd87c0446842$exports,
+    "de-DE": $5922ace8d8eedc34$exports,
+    "el-GR": $0dff680a5aaa08a6$exports,
+    "en-US": $40f72ebe96160fe5$exports,
+    "es-ES": $fd3d037364cca31d$exports,
+    "et-EE": $aeb59a17c296301b$exports,
+    "fi-FI": $8725562d6e87d608$exports,
+    "fr-FR": $5b8a7cd61bd67f0d$exports,
+    "he-IL": $904fdf1c66b8e1ae$exports,
+    "hr-HR": $e321e496e49645f3$exports,
+    "hu-HU": $5fb9f79f322fc149$exports,
+    "it-IT": $87d8922713b63bdb$exports,
+    "ja-JP": $57201e032f548603$exports,
+    "ko-KR": $74aa6884e1ef4030$exports,
+    "lt-LT": $50cefda6a03c058b$exports,
+    "lv-LV": $3d08f75b6bbe5354$exports,
+    "nb-NO": $c59f7b2f9755472b$exports,
+    "nl-NL": $d81bf728da4b1c33$exports,
+    "pl-PL": $f323a42ea1486c2f$exports,
+    "pt-BR": $2b2937248d390105$exports,
+    "pt-PT": $156cd72030936350$exports,
+    "ro-RO": $5964cf64325251a3$exports,
+    "ru-RU": $71b3c908be47dc7e$exports,
+    "sk-SK": $815155759d865560$exports,
+    "sl-SI": $d5deb2faae807da5$exports,
+    "sr-SP": $42e52cb34b81b4af$exports,
+    "sv-SE": $f278e5fd270ba60f$exports,
+    "tr-TR": $523e0ad61eab5c5d$exports,
+    "uk-UA": $a58cff5745fe89a6$exports,
+    "zh-CN": $2c1c50c48e046fcb$exports,
+    "zh-TW": $d20ec5c21f83badd$exports
+};
 
-      for (let j = index; j < index + row.length; j++) {
-        totalWeight += ratios[j];
-      } // Determine the row height based on the total available width and weight of this row.
 
 
-      let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight; // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
-      // probably doing this because if the last row has one extremely tall image, then the row becomes huge
-      // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
 
-      if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
-        bestRowHeight = this.idealRowHeight;
-      }
 
-      let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
-      let x = this.margin; // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
 
-      let widths = [];
 
-      for (let j = index; j < index + row.length; j++) {
-        let width = Math.round(bestRowHeight * ratios[j]);
-        widths.push([j - index, width]);
-      }
 
-      this._distributeWidths(widths); // Create items for this row.
 
 
-      for (let j = index; j < index + row.length; j++) {
-        let node = this.collection.rows[j];
-        let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);
-        let rect = new Rect(x, y, itemWidth, itemHeight);
-        let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-        layoutInfo.allowOverflow = true;
-        this.layoutInfos.set(node.key, layoutInfo);
-        x += itemWidth + this.itemSpacing.width;
-      }
 
-      y += itemHeight + this.itemSpacing.height;
-      index += row.length;
-    }
+function $514a55f6d91f25ef$var$CardView(props, ref) {
+    let { scale: scale  } = $jpY3B$reactspectrumprovider.useProvider();
+    let { styleProps: styleProps  } = $jpY3B$reactspectrumutils.useStyleProps(props);
+    let domRef = $jpY3B$reactspectrumutils.useDOMRef(ref);
+    let { isQuiet: isQuiet , renderEmptyState: renderEmptyState , layout: layout , loadingState: loadingState , onLoadMore: onLoadMore , cardOrientation: cardOrientation = 'vertical'  } = props;
+    let collator = $jpY3B$reactariai18n.useCollator({
+        usage: 'search',
+        sensitivity: 'base'
+    });
+    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+    let cardViewLayout = $jpY3B$react.useMemo(()=>typeof layout === 'function' ? new layout({
+            collator: collator,
+            cardOrientation: cardOrientation,
+            scale: scale
+        }) : layout
+    , [
+        layout,
+        collator,
+        cardOrientation,
+        scale
+    ]);
+    let layoutType = cardViewLayout.layoutType;
+    let stringFormatter = $jpY3B$reactariai18n.useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($dc38f0b958ac5018$exports)));
+    let { direction: direction  } = $jpY3B$reactariai18n.useLocale();
+    let { collection: collection  } = $jpY3B$reactstatelylist.useListState(props);
+    let gridCollection = $jpY3B$react.useMemo(()=>new $jpY3B$reactstatelygrid.GridCollection({
+            columnCount: 1,
+            items: [
+                ...collection
+            ].map((item)=>({
+                    // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys
+                    ...item,
+                    hasChildNodes: true,
+                    childNodes: [
+                        {
+                            key: `cell-${item.key}`,
+                            type: 'cell',
+                            value: null,
+                            level: 0,
+                            rendered: null,
+                            textValue: item.textValue,
+                            hasChildNodes: false,
+                            childNodes: []
+                        }
+                    ]
+                })
+            )
+        })
+    , [
+        collection
+    ]);
+    let state = $jpY3B$reactstatelygrid.useGridState({
+        ...props,
+        selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
+        collection: gridCollection,
+        focusMode: 'cell'
+    });
+    cardViewLayout.collection = gridCollection;
+    cardViewLayout.disabledKeys = state.disabledKeys;
+    cardViewLayout.isLoading = isLoading;
+    cardViewLayout.direction = direction;
+    let { gridProps: gridProps  } = $jpY3B$reactariagrid.useGrid({
+        ...props,
+        isVirtualized: true,
+        keyboardDelegate: cardViewLayout
+    }, state, domRef);
+    let renderWrapper = (parent, reusableView)=>/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($jpY3B$reactariavirtualizer.VirtualizerItem, {
+            key: reusableView.key,
+            reusableView: reusableView,
+            parent: parent
+        })
+    ;
+    let focusedKey = state.selectionManager.focusedKey;
+    let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
+    if ((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) != null) focusedKey = focusedItem.parentKey;
+    let margin = cardViewLayout.margin || 0;
+    let virtualizer = cardViewLayout.virtualizer;
+    let scrollToItem = $jpY3B$react.useCallback((key)=>{
+        virtualizer && virtualizer.scrollToItem(key, {
+            duration: 0,
+            offsetY: margin
+        });
+    }, [
+        margin,
+        virtualizer
+    ]);
+    // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
+    return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($e57ab98cef2f01a5$export$64992ac69f286e5c.Provider, {
+        value: {
+            state: state,
+            isQuiet: isQuiet,
+            layout: cardViewLayout,
+            cardOrientation: cardOrientation
+        }
+    }, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($jpY3B$reactariavirtualizer.Virtualizer, {
+        ...gridProps,
+        ...styleProps,
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-CardView'),
+        ref: domRef,
+        focusedKey: focusedKey,
+        scrollDirection: "vertical",
+        layout: cardViewLayout,
+        collection: gridCollection,
+        isLoading: isLoading,
+        onLoadMore: onLoadMore,
+        renderWrapper: renderWrapper,
+        transitionDuration: isLoading ? 160 : 220,
+        scrollToItem: scrollToItem
+    }, (type, item)=>{
+        if (type === 'item') return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($514a55f6d91f25ef$var$InternalCard, {
+            item: item
+        }));
+        else if (type === 'loader') return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($514a55f6d91f25ef$var$CenteredWrapper, null, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($jpY3B$reactspectrumprogress.ProgressCircle, {
+            isIndeterminate: true,
+            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
+        })));
+        else if (type === 'placeholder') {
+            let emptyState = renderEmptyState ? renderEmptyState() : null;
+            if (emptyState == null) return null;
+            return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($514a55f6d91f25ef$var$CenteredWrapper, null, emptyState));
+        }
+    })));
+}
+function $514a55f6d91f25ef$var$CenteredWrapper({ children: children  }) {
+    let { state: state  } = $e57ab98cef2f01a5$export$fea0b38586ec8f13();
+    return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("div", {
+        role: "row",
+        "aria-rowindex": state.collection.size + 1,
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-CardView-centeredWrapper')
+    }, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("div", {
+        role: "gridcell"
+    }, children)));
+}
+function $514a55f6d91f25ef$var$InternalCard(props) {
+    let { item: item  } = props;
+    let cellNode = [
+        ...item.childNodes
+    ][0];
+    let { state: state , cardOrientation: cardOrientation , isQuiet: isQuiet , layout: layout  } = $e57ab98cef2f01a5$export$fea0b38586ec8f13();
+    let layoutType = layout.layoutType;
+    let rowRef = $jpY3B$react.useRef();
+    let cellRef = $jpY3B$react.useRef();
+    let unwrappedRef = $jpY3B$reactspectrumutils.useUnwrapDOMRef(cellRef);
+    let { rowProps: gridRowProps  } = $jpY3B$reactariagrid.useGridRow({
+        node: item,
+        isVirtualized: true
+    }, state, rowRef);
+    let { gridCellProps: gridCellProps  } = $jpY3B$reactariagrid.useGridCell({
+        node: cellNode,
+        focusMode: 'cell'
+    }, state, unwrappedRef);
+    // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
+    let allowsInteraction = state.selectionManager.selectionMode !== 'none';
+    let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
+    let onKeyDown = (e)=>{
+        if (e.key === ' ' && isDisabled) e.preventDefault();
+    };
+    let rowProps = $jpY3B$reactariautils.mergeProps(gridRowProps, {
+        onKeyDown: onKeyDown
+    });
+    if (layoutType === 'grid' || layoutType === 'gallery') isQuiet = true;
+    if (layoutType !== 'grid') cardOrientation = 'vertical';
+    // We don't want to focus the checkbox (or any other focusable elements) within the Card
+    // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
+    // the cards in the CardView is handled by useGrid => useSelectableCollection instead.
+    delete gridCellProps.onKeyDownCapture;
+    return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement("div", {
+        ...rowProps,
+        ref: rowRef,
+        className: $jpY3B$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($71570f0038472fa2$exports)), 'spectrum-CardView-row')
+    }, /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($7888205ff7de382f$export$7a6ccaf429ad93a8, {
+        ref: cellRef,
+        articleProps: gridCellProps,
+        isQuiet: isQuiet,
+        orientation: cardOrientation,
+        item: item,
+        layout: layoutType
+    }, item.rendered)));
+}
+/**
+ * TODO: Add description of component here.
+ */ const $514a55f6d91f25ef$export$7e52c821f7b6f422 = /*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).forwardRef($514a55f6d91f25ef$var$CardView);
 
-    if (this.isLoading) {
-      let loaderY = y;
-      let loaderHeight = 60; // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
-      // so it doesn't scroll
 
-      if (this.collection.size === 0) {
-        loaderY = 0;
-        loaderHeight = visibleHeight || 60;
-      }
 
-      let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      y = loader.rect.maxY;
+class $5ee605f09afaa4de$export$64943d2e59d72a29 extends $jpY3B$reactstatelyvirtualizer.Layout {
+    validate(invalidationContext) {
+        this.collection = this.virtualizer.collection;
+        this.buildCollection(invalidationContext);
+        // Remove layout info that doesn't exist in new collection
+        if (this.lastCollection) {
+            for (let key of this.lastCollection.getKeys())if (!this.collection.getItem(key)) this.layoutInfos.delete(key);
+            if (!this.isLoading) this.layoutInfos.delete('loader');
+            if (this.collection.size > 0) this.layoutInfos.delete('placeholder');
+        }
+        this.lastCollection = this.collection;
     }
-
-    if (this.collection.size === 0 && !this.isLoading) {
-      let rect = new Rect(0, 0, visibleWidth, visibleHeight);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      y = placeholder.rect.maxY;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    buildCollection(invalidationContext) {
     }
-
-    this.contentSize = new Size(visibleWidth, y);
-  }
-
-} // https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM
-
-
-exports.GalleryLayout = GalleryLayout;
-
-function $a23e32931be921d018d1ae1efeda8$var$linearPartition(seq, k) {
-  let n = seq.length;
-
-  if (k <= 0) {
-    return [];
-  }
-
-  if (k >= n) {
-    return seq.map(x => [x]);
-  }
-
-  if (n === 1) {
-    return [seq];
-  }
-
-  let table = Array(n).fill(0).map(() => Array(k).fill(0));
-  let solution = Array(n - 1).fill(0).map(() => Array(k - 1).fill(0));
-
-  for (let i = 0; i < n; i++) {
-    table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);
-  }
-
-  for (let i = 0; i < k; i++) {
-    table[0][i] = seq[0];
-  }
-
-  for (let i = 1; i < n; i++) {
-    for (let j = 1; j < k; j++) {
-      let currentMin = 0;
-      let minX = Infinity;
-
-      for (let x = 0; x < i; x++) {
-        let c1 = table[x][j - 1];
-        let c2 = table[i][0] - table[x][0];
-        let cost = Math.max(c1, c2);
-
-        if (!x || cost < currentMin) {
-          currentMin = cost;
-          minX = x;
+    getContentSize() {
+        return this.contentSize;
+    }
+    getLayoutInfo(key) {
+        return this.layoutInfos.get(key);
+    }
+    getVisibleLayoutInfos(rect) {
+        let res = [];
+        for (let layoutInfo of this.layoutInfos.values())if (this.isVisible(layoutInfo, rect)) res.push(layoutInfo);
+        return res;
+    }
+    isVisible(layoutInfo, rect) {
+        return layoutInfo.rect.intersects(rect);
+    }
+    getInitialLayoutInfo(layoutInfo) {
+        layoutInfo.opacity = 0;
+        layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
+        return layoutInfo;
+    }
+    getFinalLayoutInfo(layoutInfo) {
+        layoutInfo.opacity = 0;
+        layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
+        return layoutInfo;
+    }
+    _findClosestLayoutInfo(target, rect) {
+        let layoutInfos = this.getVisibleLayoutInfos(rect);
+        let best = null;
+        let bestDistance = Infinity;
+        // Calculates distance as the distance between the center of 2 rects.
+        for (let cur of layoutInfos)if (cur.type === 'item') {
+            let curRect = cur.rect;
+            let targetMidX = (target.x + target.maxX) / 2;
+            let targetMidY = (target.y + target.maxY) / 2;
+            let curMidX = (curRect.x + curRect.maxX) / 2;
+            let curMidY = (curRect.y + curRect.maxY) / 2;
+            let dist = Math.pow(targetMidX - curMidX, 2) + Math.pow(targetMidY - curMidY, 2);
+            if (dist < bestDistance) {
+                best = cur;
+                bestDistance = dist;
+            }
         }
-      }
-
-      table[i][j] = currentMin;
-      solution[i - 1][j - 1] = minX;
+        return best;
     }
-  }
-
-  n = n - 1;
-  k = k - 2;
-  let result = [];
-
-  while (k >= 0) {
-    if (n >= 1) {
-      let row = [];
-
-      for (let i = solution[n - 1][k] + 1; i < n + 1; i++) {
-        row.push(seq[i]);
-      }
-
-      result.unshift(row);
-      n = solution[n - 1][k];
+    _findClosest(target, rect) {
+        let best = this._findClosestLayoutInfo(target, rect);
+        return best || null;
     }
+    getKeyBelow(key) {
+        var ref, ref1;
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        let layoutInfo = this.getLayoutInfo(parentRowKey);
+        let rect = new $jpY3B$reactstatelyvirtualizer.Rect(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
+        let closestRow = this.collection.getItem((ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key);
+        return (ref1 = closestRow === null || closestRow === void 0 ? void 0 : closestRow.childNodes[0]) === null || ref1 === void 0 ? void 0 : ref1.key;
+    }
+    getKeyAbove(key) {
+        var ref, ref2;
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        let layoutInfo = this.getLayoutInfo(parentRowKey);
+        let rect = new $jpY3B$reactstatelyvirtualizer.Rect(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
+        let closestRow = this.collection.getItem((ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key);
+        return (ref2 = closestRow === null || closestRow === void 0 ? void 0 : closestRow.childNodes[0]) === null || ref2 === void 0 ? void 0 : ref2.key;
+    }
+    getKeyRightOf(key) {
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        key = this.direction === 'rtl' ? this.collection.getKeyBefore(parentRowKey) : this.collection.getKeyAfter(parentRowKey);
+        while(key != null){
+            let item = this.collection.getItem(key);
+            // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
+            if (item.type === 'item') return item.childNodes[0].key;
+            key = this.direction === 'rtl' ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
+        }
+    }
+    getKeyLeftOf(key) {
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        key = this.direction === 'rtl' ? this.collection.getKeyAfter(parentRowKey) : this.collection.getKeyBefore(parentRowKey);
+        while(key != null){
+            let item = this.collection.getItem(key);
+            // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
+            if (item.type === 'item') return item.childNodes[0].key;
+            key = this.direction === 'rtl' ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
+        }
+    }
+    getFirstKey() {
+        let firstRow = this.collection.getItem(this.collection.getFirstKey());
+        return firstRow.childNodes[0].key;
+    }
+    getLastKey() {
+        let lastRow = this.collection.getItem(this.collection.getLastKey());
+        return lastRow.childNodes[0].key;
+    }
+    // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
+    // Perhaps have layoutInfo store childKey as well so we don't need to do this? Or maybe make the layoutInfos be the cells instead of the rows?
+    getKeyPageAbove(key) {
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        let layoutInfo = this.getLayoutInfo(parentRowKey);
+        if (layoutInfo) {
+            var ref;
+            let pageY = Math.max(0, layoutInfo.rect.y + layoutInfo.rect.height - this.virtualizer.visibleRect.height);
+            // If the node is so large that it spans multiple page heights, return the key of the item immediately above
+            // Otherwise keep going up until we exceed a single page height worth of nodes
+            let keyAbove = (ref = this.collection.getItem(this.getKeyAbove(key))) === null || ref === void 0 ? void 0 : ref.parentKey;
+            layoutInfo = this.getLayoutInfo(keyAbove);
+            if (layoutInfo && layoutInfo.rect.y > pageY) while(layoutInfo && layoutInfo.rect.y > pageY){
+                var ref3;
+                let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+                let keyAbove = (ref3 = this.collection.getItem(this.getKeyAbove(childKey))) === null || ref3 === void 0 ? void 0 : ref3.parentKey;
+                layoutInfo = this.getLayoutInfo(keyAbove);
+            }
+            if (layoutInfo) {
+                let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+                return childKey;
+            }
+        }
+        return this.getFirstKey();
+    }
+    // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
+    // Perhaps have layoutInfo store childKey as well so we don't need to do this?
+    getKeyPageBelow(key) {
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        let layoutInfo = this.getLayoutInfo(parentRowKey);
+        if (layoutInfo) {
+            var ref;
+            let pageY = Math.min(this.virtualizer.contentSize.height, layoutInfo.rect.y - layoutInfo.rect.height + this.virtualizer.visibleRect.height);
+            // If the node is so large that it spans multiple page heights, return the key of the item immediately below
+            // Otherwise keep going up until we exceed a single page height worth of nodes
+            let keyBelow = (ref = this.collection.getItem(this.getKeyBelow(key))) === null || ref === void 0 ? void 0 : ref.parentKey;
+            layoutInfo = this.getLayoutInfo(keyBelow);
+            if (layoutInfo && layoutInfo.rect.y < pageY) while(layoutInfo && layoutInfo.rect.y < pageY){
+                var ref4;
+                let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+                let keyBelow = (ref4 = this.collection.getItem(this.getKeyBelow(childKey))) === null || ref4 === void 0 ? void 0 : ref4.parentKey;
+                layoutInfo = this.getLayoutInfo(keyBelow);
+            }
+            if (layoutInfo) {
+                let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+                return childKey;
+            }
+        }
+        return this.getLastKey();
+    }
+    getKeyForSearch(search, fromKey) {
+        if (!this.collator) return null;
+        let collection = this.collection;
+        let key = fromKey !== null && fromKey !== void 0 ? fromKey : this.getFirstKey();
+        let startItem = collection.getItem(key);
+        key = startItem.parentKey;
+        while(key != null){
+            let item = collection.getItem(key);
+            if (item.textValue) {
+                let substring = item.textValue.slice(0, search.length);
+                if (this.collator.compare(substring, search) === 0) return [
+                    ...item.childNodes
+                ][0].key;
+            }
+            key = this.collection.getKeyAfter(key);
+        }
+        return null;
+    }
+    constructor(options = {
+    }){
+        super();
+        this.disabledKeys = new Set();
+        this.layoutInfos = new Map();
+        this.collator = options.collator;
+        this.lastCollection = null;
+        this.scale = options.scale || 'medium';
+        this.margin = options.margin || 24;
+    }
+}
 
-    k--;
-  }
-
-  let row = [];
-
-  for (let i = 0; i < n + 1; i++) {
-    row.push(seq[i]);
-  }
 
-  result.unshift(row);
-  return result;
-}
 
-const $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS = {
-  S: {
-    itemPadding: 20,
-    minItemSize: {
-      'vertical': new Size(96, 96)
-    },
-    maxItemSize: new Size(Infinity, Infinity),
-    margin: 8,
-    minSpace: new Size(6, 6),
-    maxColumns: Infinity,
-    dropSpacing: 50
-  },
-  L: {
-    itemPadding: {
-      'vertical': {
-        'medium': 78,
-        'large': 98
-      },
-      'horizontal': {
-        'medium': 150,
-        'large': 170
-      }
-    },
-    minItemSize: {
-      'vertical': new Size(208, 208),
-      'horizontal': new Size(102, 102)
+const $8019a3d2c7d098ea$var$DEFAULT_OPTIONS = {
+    S: {
+        idealRowHeight: 112,
+        minItemSize: new $jpY3B$reactstatelyvirtualizer.Size(96, 96),
+        itemSpacing: new $jpY3B$reactstatelyvirtualizer.Size(8, 16),
+        itemPadding: 24,
+        dropSpacing: 50,
+        margin: 8
     },
-    maxItemSize: new Size(Infinity, Infinity),
-    margin: 24,
-    minSpace: new Size(18, 18),
-    maxColumns: Infinity,
-    dropSpacing: 100
-  }
+    L: {
+        idealRowHeight: 208,
+        minItemSize: new $jpY3B$reactstatelyvirtualizer.Size(136, 136),
+        itemSpacing: new $jpY3B$reactstatelyvirtualizer.Size(18, 18),
+        itemPadding: {
+            'medium': 78,
+            'large': 99
+        },
+        dropSpacing: 100,
+        margin: 24
+    }
 };
-
-class GridLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
-  constructor(options) {
-    if (options === void 0) {
-      options = {};
+class $8019a3d2c7d098ea$export$8e52095834484b61 extends $5ee605f09afaa4de$export$64943d2e59d72a29 {
+    get layoutType() {
+        return 'gallery';
     }
-
-    super(options);
-    this.minItemSize = void 0;
-    this.maxItemSize = void 0;
-    this.minSpace = void 0;
-    this.maxColumns = void 0;
-    this.itemPadding = void 0;
-    this.cardOrientation = void 0;
-    this.itemSize = void 0;
-    this.numColumns = void 0;
-    this.numRows = void 0;
-    this.horizontalSpacing = void 0;
-    let cardSize = 'L';
-    this.cardOrientation = options.cardOrientation || 'vertical';
-    this.minItemSize = options.minItemSize || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
-    this.maxItemSize = options.maxItemSize || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
-    this.margin = options.margin != null ? options.margin : $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].margin;
-    this.minSpace = options.minSpace || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].minSpace;
-    this.maxColumns = options.maxColumns || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].maxColumns;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
-    this.itemSize = null;
-    this.numColumns = 0;
-    this.numRows = 0;
-    this.horizontalSpacing = 0;
-  }
-
-  get layoutType() {
-    return 'grid';
-  }
-
-  getIndexAtPoint(x, y, allowInsertingAtEnd) {
-    if (allowInsertingAtEnd === void 0) {
-      allowInsertingAtEnd = false;
+    /**
+   * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from
+   * the widest in the row until it can't give anymore, then move to the second widest and so forth.
+   * Do this until all assets meet the min-width.
+   * */ _distributeWidths(widths) {
+        // create a copy of the widths array and sort it largest to smallest
+        let sortedWidths = widths.concat().sort((a, b)=>a[1] > b[1] ? -1 : 1
+        );
+        for (let width of widths)// for each width, if it's smaller than the min width
+        if (width[1] < this.minItemSize.width) {
+            // then figure out how much smaller
+            let delta = this.minItemSize.width - width[1];
+            for (let item of sortedWidths)// go from the largest width in the row to the smallest
+            // if the width is greater than the min width
+            if (widths[item[0]][1] > this.minItemSize.width) {
+                // subtract the delta from the width, if it's still greater than the min width
+                // then we have finished, subtract the delta permanently from that width
+                if (widths[item[0]][1] - delta > this.minItemSize.width) {
+                    widths[item[0]][1] -= delta;
+                    delta = 0;
+                    break;
+                } else {
+                    // otherwise, we take as much as we can from the current width and then move on to
+                    // the next largest and take some width from it
+                    let maxChange = widths[item[0]][1] - this.minItemSize.width;
+                    delta -= maxChange;
+                    widths[item[0]][1] -= maxChange;
+                }
+            }
+            if (delta > 0) return false;
+            // force the width to be the min width that we just rebalanced for
+            width[1] = this.minItemSize.width;
+        }
+        return true;
     }
-
-    let itemHeight = this.itemSize.height + this.minSpace.height;
-    let itemWidth = this.itemSize.width + this.horizontalSpacing;
-    return Math.max(0, Math.min(this.collection.size - (allowInsertingAtEnd ? 0 : 1), Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)));
-  }
-
-  getVisibleLayoutInfos(rect) {
-    let res = [];
-    let numItems = this.collection.size;
-
-    if (numItems <= 0 || !this.itemSize) {
-      // If there aren't any items in the collection, we are in a loader/placeholder state. Return those layoutInfos as
-      // the currently visible items
-      if (this.layoutInfos.size > 0) {
-        for (let layoutInfo of this.layoutInfos.values()) {
-          if (this.isVisible(layoutInfo, rect)) {
-            res.push(layoutInfo);
-          }
+    buildCollection() {
+        let visibleWidth = this.virtualizer.visibleRect.width;
+        let visibleHeight = this.virtualizer.visibleRect.height;
+        let y = this.margin;
+        let availableWidth = visibleWidth - this.margin * 2;
+        // If avaliable width is not greater than 0, skip node layout calculations
+        if (availableWidth > 0) {
+            // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
+            let ratios = [];
+            let totalWidth = 0;
+            let minRatio = this.minItemSize.width / this.minItemSize.height;
+            let maxRatio = availableWidth / this.minItemSize.height;
+            for (let node of this.collection){
+                let ratio = node.props.width / node.props.height;
+                if (ratio < minRatio) ratio = minRatio;
+                else if (ratio > maxRatio && ratio !== minRatio) ratio = maxRatio;
+                let itemWidth = ratio * this.minItemSize.height;
+                ratios.push(ratio);
+                totalWidth += itemWidth;
+            }
+            totalWidth += this.itemSpacing.width * (this.collection.size - 1);
+            // Determine how many rows we'll need, and partition the items into rows
+            // using the aspect ratios as weights.
+            let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
+            // if the available width can't hold two items, then every item will get its own row
+            // this leads to a faster run through linear partition and more dependable output for small row widths
+            if (availableWidth <= this.minItemSize.width * 2 + this.itemPadding * 2) rows = this.collection.size;
+            let weightedRatios = ratios.map((ratio)=>ratio < this.threshold ? ratio + 0.5 * (1 / ratio) : ratio
+            );
+            let partition = $8019a3d2c7d098ea$var$linearPartition(weightedRatios, rows);
+            let index = 0;
+            for (let row of partition){
+                // Compute the total weight for this row
+                let totalWeight = 0;
+                for(let j = index; j < index + row.length; j++)totalWeight += ratios[j];
+                // Determine the row height based on the total available width and weight of this row.
+                let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
+                // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
+                // probably doing this because if the last row has one extremely tall image, then the row becomes huge
+                // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
+                if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) bestRowHeight = this.idealRowHeight;
+                let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
+                let x = this.margin;
+                // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
+                let widths = [];
+                for(let j1 = index; j1 < index + row.length; j1++){
+                    let width = Math.round(bestRowHeight * ratios[j1]);
+                    widths.push([
+                        j1 - index,
+                        width
+                    ]);
+                }
+                this._distributeWidths(widths);
+                // Create items for this row.
+                for(let j2 = index; j2 < index + row.length; j2++){
+                    let node = this.collection.rows[j2];
+                    let itemWidth = Math.max(widths[j2 - index][1], this.minItemSize.width);
+                    let rect = new $jpY3B$reactstatelyvirtualizer.Rect(x, y, itemWidth, itemHeight);
+                    let layoutInfo = new $jpY3B$reactstatelyvirtualizer.LayoutInfo(node.type, node.key, rect);
+                    layoutInfo.allowOverflow = true;
+                    this.layoutInfos.set(node.key, layoutInfo);
+                    x += itemWidth + this.itemSpacing.width;
+                }
+                y += itemHeight + this.itemSpacing.height;
+                index += row.length;
+            }
+            if (this.isLoading) {
+                let loaderY = y;
+                let loaderHeight = 60;
+                // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+                // so it doesn't scroll
+                if (this.collection.size === 0) {
+                    loaderY = 0;
+                    loaderHeight = visibleHeight || 60;
+                }
+                let rect = new $jpY3B$reactstatelyvirtualizer.Rect(0, loaderY, visibleWidth, loaderHeight);
+                let loader = new $jpY3B$reactstatelyvirtualizer.LayoutInfo('loader', 'loader', rect);
+                this.layoutInfos.set('loader', loader);
+                y = loader.rect.maxY;
+            }
+            if (this.collection.size === 0 && !this.isLoading) {
+                let rect = new $jpY3B$reactstatelyvirtualizer.Rect(0, 0, visibleWidth, visibleHeight);
+                let placeholder = new $jpY3B$reactstatelyvirtualizer.LayoutInfo('placeholder', 'placeholder', rect);
+                this.layoutInfos.set('placeholder', placeholder);
+                y = placeholder.rect.maxY;
+            }
         }
-      }
-    } else {
-      // The approach from v2 uses indexes where other v3 layouts iterate through every node/root node. This feels more efficient
-      let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
-      let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
-
-      for (let index = firstVisibleItem; index <= lastVisibleItem; index++) {
-        let keyFromIndex = this.collection.rows[index].key;
-        let layoutInfo = this.layoutInfos.get(keyFromIndex);
-
-        if (layoutInfo && this.isVisible(layoutInfo, rect)) {
-          res.push(layoutInfo);
+        this.contentSize = new $jpY3B$reactstatelyvirtualizer.Size(visibleWidth, y);
+    }
+    constructor(options = {
+    }){
+        super(options);
+        let cardSize = 'L';
+        this.idealRowHeight = options.idealRowHeight || $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
+        this.itemSpacing = options.itemSpacing || $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
+        this.itemPadding = options.itemPadding != null ? options.itemPadding : $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
+        this.minItemSize = options.minItemSize || $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].minItemSize;
+        this.threshold = options.threshold || 1;
+        this.margin = options.margin != null ? options.margin : $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].margin;
+    }
+}
+// https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM
+function $8019a3d2c7d098ea$var$linearPartition(seq, k) {
+    let n = seq.length;
+    if (k <= 0) return [];
+    if (k >= n) return seq.map((x)=>[
+            x
+        ]
+    );
+    if (n === 1) return [
+        seq
+    ];
+    let table = Array(n).fill(0).map(()=>Array(k).fill(0)
+    );
+    let solution = Array(n - 1).fill(0).map(()=>Array(k - 1).fill(0)
+    );
+    for(let i = 0; i < n; i++)table[i][0] = seq[i] + (i > 0 ? table[i - 1][0] : 0);
+    for(let i1 = 0; i1 < k; i1++)table[0][i1] = seq[0];
+    for(let i2 = 1; i2 < n; i2++)for(let j = 1; j < k; j++){
+        let currentMin = 0;
+        let minX = Infinity;
+        for(let x = 0; x < i2; x++){
+            let c1 = table[x][j - 1];
+            let c2 = table[i2][0] - table[x][0];
+            let cost = Math.max(c1, c2);
+            if (!x || cost < currentMin) {
+                currentMin = cost;
+                minX = x;
+            }
         }
-      } // Check if loader is in view and add to res if so
-
-
-      let loader = this.layoutInfos.get('loader');
-
-      if (loader && this.isVisible(loader, rect)) {
-        res.push(loader);
-      }
+        table[i2][j] = currentMin;
+        solution[i2 - 1][j - 1] = minX;
     }
+    n = n - 1;
+    k = k - 2;
+    let result = [];
+    while(k >= 0){
+        if (n >= 1) {
+            let row = [];
+            for(let i = solution[n - 1][k] + 1; i < n + 1; i++)row.push(seq[i]);
+            result.unshift(row);
+            n = solution[n - 1][k];
+        }
+        k--;
+    }
+    let row = [];
+    for(let i3 = 0; i3 < n + 1; i3++)row.push(seq[i3]);
+    result.unshift(row);
+    return result;
+}
 
-    return res;
-  }
-
-  buildCollection() {
-    let visibleWidth = this.virtualizer.visibleRect.width;
-    let visibleHeight = this.virtualizer.visibleRect.height;
-    let horizontalItemPadding = this.cardOrientation === 'horizontal' ? this.itemPadding : 0;
-    let verticalItemPadding = this.cardOrientation === 'vertical' ? this.itemPadding : 0;
-    let minCardWidth = this.minItemSize.width + horizontalItemPadding; // Compute the number of rows and columns needed to display the content
-
-    let availableWidth = visibleWidth - this.margin * 2;
-    let columns = Math.floor((availableWidth + this.minSpace.width) / (minCardWidth + this.minSpace.width));
-    this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
-    this.numRows = Math.ceil(this.collection.size / this.numColumns); // Compute the available width (minus the space between items)
-
-    let width = availableWidth - this.minSpace.width * Math.max(0, this.numColumns - 1); // Compute the item width based on the space available
-
-    let itemWidth = Math.floor(width / this.numColumns);
-    itemWidth = Math.max(minCardWidth, Math.min(this.maxItemSize.width, itemWidth)); // Compute the item height, which is proportional to the item width
 
-    let t = (itemWidth - minCardWidth) / minCardWidth;
-    let itemHeight = Math.floor(this.minItemSize.height + this.minItemSize.height * t);
-    itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + verticalItemPadding;
-    this.itemSize = new Size(itemWidth, itemHeight); // Compute the horizontal spacing and content height
 
-    this.horizontalSpacing = this.numColumns < 2 ? 0 : Math.floor((availableWidth - this.numColumns * this.itemSize.width) / (this.numColumns - 1));
-    let y = this.margin;
-    let index = 0;
 
-    for (let node of this.collection) {
-      let layoutInfo = this.buildChild(node, y, index);
-      y = layoutInfo.rect.maxY;
-      index++;
+const $71b727f94b595b1a$var$DEFAULT_OPTIONS = {
+    S: {
+        itemPadding: 20,
+        minItemSize: {
+            'vertical': new $jpY3B$reactstatelyvirtualizer.Size(96, 96)
+        },
+        maxItemSize: new $jpY3B$reactstatelyvirtualizer.Size(Infinity, Infinity),
+        margin: 8,
+        minSpace: new $jpY3B$reactstatelyvirtualizer.Size(6, 6),
+        maxColumns: Infinity,
+        dropSpacing: 50
+    },
+    L: {
+        itemPadding: {
+            'vertical': {
+                'medium': 78,
+                'large': 98
+            },
+            'horizontal': {
+                'medium': 150,
+                'large': 170
+            }
+        },
+        minItemSize: {
+            'vertical': new $jpY3B$reactstatelyvirtualizer.Size(208, 208),
+            'horizontal': new $jpY3B$reactstatelyvirtualizer.Size(102, 102)
+        },
+        maxItemSize: new $jpY3B$reactstatelyvirtualizer.Size(Infinity, Infinity),
+        margin: 24,
+        minSpace: new $jpY3B$reactstatelyvirtualizer.Size(18, 18),
+        maxColumns: Infinity,
+        dropSpacing: 100
     }
-
-    if (this.isLoading) {
-      let loaderY = y;
-      let loaderHeight = 60; // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
-      // so it doesn't scroll
-
-      if (this.collection.size === 0) {
-        loaderY = 0;
-        loaderHeight = visibleHeight || 60;
-      }
-
-      let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      y = loader.rect.maxY;
+};
+class $71b727f94b595b1a$export$7d2b12578154a735 extends $5ee605f09afaa4de$export$64943d2e59d72a29 {
+    get layoutType() {
+        return 'grid';
     }
-
-    if (this.collection.size === 0 && !this.isLoading) {
-      let rect = new Rect(0, 0, visibleWidth, visibleHeight);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      y = placeholder.rect.maxY;
+    getIndexAtPoint(x, y, allowInsertingAtEnd = false) {
+        let itemHeight = this.itemSize.height + this.minSpace.height;
+        let itemWidth = this.itemSize.width + this.horizontalSpacing;
+        return Math.max(0, Math.min(this.collection.size - (allowInsertingAtEnd ? 0 : 1), Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)));
     }
-
-    this.contentSize = new Size(visibleWidth, y);
-  }
-
-  buildChild(node, y, index) {
-    let row = Math.floor(index / this.numColumns);
-    let column = index % this.numColumns;
-    let x = this.margin + column * (this.itemSize.width + this.horizontalSpacing);
-    y = this.margin + row * (this.itemSize.height + this.minSpace.height);
-    let rect = new Rect(x, y, this.itemSize.width, this.itemSize.height); // TODO: Perhaps have it so that the child key for each row is stored with the layoutInfo?
-
-    let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    layoutInfo.allowOverflow = true;
-    this.layoutInfos.set(node.key, layoutInfo);
-    return layoutInfo;
-  } // Since the collection doesn't represent the visual layout, need to calculate what row and column the current key is in,
-  // then return the key that occupies the row + column below. This can be done by figuring out how many cards exist per column then dividing the
-  // collection contents by that number (which will give us the row distribution)
-
-
-  getKeyBelow(key) {
-    var _this$collection$rows;
-
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    let indexRowBelow;
-    let index = this.collection.rows.findIndex(card => card.key === parentRowKey);
-
-    if (index !== -1) {
-      indexRowBelow = index + this.numColumns;
-    } else {
-      return null;
+    getVisibleLayoutInfos(rect) {
+        let res = [];
+        let numItems = this.collection.size;
+        if (numItems <= 0 || !this.itemSize) // If there aren't any items in the collection, we are in a loader/placeholder state. Return those layoutInfos as
+        // the currently visible items
+        {
+            if (this.layoutInfos.size > 0) {
+                for (let layoutInfo of this.layoutInfos.values())if (this.isVisible(layoutInfo, rect)) res.push(layoutInfo);
+            }
+        } else {
+            // The approach from v2 uses indexes where other v3 layouts iterate through every node/root node. This feels more efficient
+            let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
+            let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
+            for(let index = firstVisibleItem; index <= lastVisibleItem; index++){
+                let keyFromIndex = this.collection.rows[index].key;
+                let layoutInfo = this.layoutInfos.get(keyFromIndex);
+                if (layoutInfo && this.isVisible(layoutInfo, rect)) res.push(layoutInfo);
+            }
+            // Check if loader is in view and add to res if so
+            let loader = this.layoutInfos.get('loader');
+            if (loader && this.isVisible(loader, rect)) res.push(loader);
+        }
+        return res;
     }
-
-    return ((_this$collection$rows = this.collection.rows[indexRowBelow]) == null ? void 0 : _this$collection$rows.childNodes[0].key) || null;
-  }
-
-  getKeyAbove(key) {
-    var _this$collection$rows2;
-
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    let indexRowAbove;
-    let index = this.collection.rows.findIndex(card => card.key === parentRowKey);
-
-    if (index !== -1) {
-      indexRowAbove = index - this.numColumns;
-    } else {
-      return null;
+    buildCollection() {
+        let visibleWidth = this.virtualizer.visibleRect.width;
+        let visibleHeight = this.virtualizer.visibleRect.height;
+        let horizontalItemPadding = this.cardOrientation === 'horizontal' ? this.itemPadding : 0;
+        let verticalItemPadding = this.cardOrientation === 'vertical' ? this.itemPadding : 0;
+        let minCardWidth = this.minItemSize.width + horizontalItemPadding;
+        // Compute the number of rows and columns needed to display the content
+        let availableWidth = visibleWidth - this.margin * 2;
+        let columns = Math.floor((availableWidth + this.minSpace.width) / (minCardWidth + this.minSpace.width));
+        this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+        this.numRows = Math.ceil(this.collection.size / this.numColumns);
+        // Compute the available width (minus the space between items)
+        let width = availableWidth - this.minSpace.width * Math.max(0, this.numColumns - 1);
+        // Compute the item width based on the space available
+        let itemWidth = Math.floor(width / this.numColumns);
+        itemWidth = Math.max(minCardWidth, Math.min(this.maxItemSize.width, itemWidth));
+        // Compute the item height, which is proportional to the item width
+        let t = (itemWidth - minCardWidth) / minCardWidth;
+        let itemHeight = Math.floor(this.minItemSize.height + this.minItemSize.height * t);
+        itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + verticalItemPadding;
+        this.itemSize = new $jpY3B$reactstatelyvirtualizer.Size(itemWidth, itemHeight);
+        // Compute the horizontal spacing and content height
+        this.horizontalSpacing = this.numColumns < 2 ? 0 : Math.floor((availableWidth - this.numColumns * this.itemSize.width) / (this.numColumns - 1));
+        let y = this.margin;
+        let index = 0;
+        for (let node of this.collection){
+            let layoutInfo = this.buildChild(node, y, index);
+            y = layoutInfo.rect.maxY;
+            index++;
+        }
+        if (this.isLoading) {
+            let loaderY = y;
+            let loaderHeight = 60;
+            // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+            // so it doesn't scroll
+            if (this.collection.size === 0) {
+                loaderY = 0;
+                loaderHeight = visibleHeight || 60;
+            }
+            let rect = new $jpY3B$reactstatelyvirtualizer.Rect(0, loaderY, visibleWidth, loaderHeight);
+            let loader = new $jpY3B$reactstatelyvirtualizer.LayoutInfo('loader', 'loader', rect);
+            this.layoutInfos.set('loader', loader);
+            y = loader.rect.maxY;
+        }
+        if (this.collection.size === 0 && !this.isLoading) {
+            let rect = new $jpY3B$reactstatelyvirtualizer.Rect(0, 0, visibleWidth, visibleHeight);
+            let placeholder = new $jpY3B$reactstatelyvirtualizer.LayoutInfo('placeholder', 'placeholder', rect);
+            this.layoutInfos.set('placeholder', placeholder);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize = new $jpY3B$reactstatelyvirtualizer.Size(visibleWidth, y);
     }
-
-    return ((_this$collection$rows2 = this.collection.rows[indexRowAbove]) == null ? void 0 : _this$collection$rows2.childNodes[0].key) || null;
-  }
-
-}
-
-exports.GridLayout = GridLayout;
-
-// TODO: this didn't have any options that varied with card size, should it have?
-class WaterfallLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
-  constructor(options) {
-    if (options === void 0) {
-      options = {};
+    buildChild(node, y, index) {
+        let row = Math.floor(index / this.numColumns);
+        let column = index % this.numColumns;
+        let x = this.margin + column * (this.itemSize.width + this.horizontalSpacing);
+        y = this.margin + row * (this.itemSize.height + this.minSpace.height);
+        let rect = new $jpY3B$reactstatelyvirtualizer.Rect(x, y, this.itemSize.width, this.itemSize.height);
+        // TODO: Perhaps have it so that the child key for each row is stored with the layoutInfo?
+        let layoutInfo = new $jpY3B$reactstatelyvirtualizer.LayoutInfo(node.type, node.key, rect);
+        layoutInfo.allowOverflow = true;
+        this.layoutInfos.set(node.key, layoutInfo);
+        return layoutInfo;
     }
-
-    // TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
-    // minItemSize defaults or other things
-    super(options);
-    this.minItemSize = void 0;
-    this.maxItemSize = void 0;
-    this.minSpace = void 0;
-    this.maxColumns = void 0;
-    this.itemPadding = void 0;
-    this.numColumns = void 0;
-    this.itemWidth = void 0;
-    this.horizontalSpacing = void 0;
-    this.minItemSize = options.minItemSize || new Size(240, 136);
-    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);
-    this.margin = options.margin != null ? options.margin : 24;
-    this.minSpace = options.minSpace || new Size(18, 18);
-    this.maxColumns = options.maxColumns || Infinity; // TODO: not entirely sure what this is for since the layout will automatically shift itself to the correct vertical space for the card
-
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : 56;
-    this.itemWidth = 0;
-    this.numColumns = 0;
-    this.lastCollection = null;
-    this.collator = options.collator;
-  }
-
-  get layoutType() {
-    return 'waterfall';
-  }
-
-  buildCollection(invalidationContext) {
-    // Compute the number of columns needed to display the content
-    let visibleWidth = this.virtualizer.visibleRect.width;
-    let availableWidth = visibleWidth - this.margin * 2;
-    let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));
-    this.numColumns = Math.max(1, Math.min(this.maxColumns, columns)); // Compute the available width (minus the space between items)
-
-    let width = availableWidth - this.minSpace.width * (this.numColumns - 1); // Compute the item width based on the space available
-
-    let itemWidth = Math.round(width / this.numColumns);
-    itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));
-    this.itemWidth = itemWidth; // Compute the horizontal spacing
-    // if only one column, we cannot divide by zero, so set it to 1
-
-    let horizontalSpacing = Math.round((availableWidth - this.numColumns * itemWidth) / Math.max(1, this.numColumns - 1));
-    this.horizontalSpacing = horizontalSpacing; // Setup an array of column heights
-
-    let columnHeights = Array(this.numColumns).fill(this.margin);
-
-    for (let node of this.collection) {
-      let key = node.key; // Compute the height of the item. Use the existing height if available,
-      // otherwise call the delegate to estimate the size.
-
-      let oldLayoutInfo = this.layoutInfos.get(key);
-      let height;
-      let estimatedSize = true;
-
-      if (oldLayoutInfo) {
-        height = oldLayoutInfo.rect.height;
-        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
-      } else if (node.props.width && node.props.height) {
-        let nodeWidth = node.props.width;
-        let nodeHeight = node.props.height;
-        let scaledHeight = Math.round(nodeWidth * (itemWidth / nodeHeight));
-        height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight)) + this.itemPadding;
-      } else {
-        height = itemWidth;
-      } // Figure out which column to place the item in, and compute its position.
-
-
-      let column = this.getNextColumnIndex(columnHeights);
-      let x = this.margin + column * (itemWidth + horizontalSpacing);
-      let y = columnHeights[column];
-      let rect = new Rect(x, y, itemWidth, height);
-      let layoutInfo = new LayoutInfo(node.type, key, rect);
-      layoutInfo.estimatedSize = estimatedSize;
-      layoutInfo.allowOverflow = true;
-      this.layoutInfos.set(key, layoutInfo); // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?
-      // Removing it from v2 doesn't seem to do anything?
-      // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {
-      //   this.updateItemSize(new IndexPath(section, i));
-      // }
-
-      columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;
+    // Since the collection doesn't represent the visual layout, need to calculate what row and column the current key is in,
+    // then return the key that occupies the row + column below. This can be done by figuring out how many cards exist per column then dividing the
+    // collection contents by that number (which will give us the row distribution)
+    getKeyBelow(key) {
+        var ref;
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        let indexRowBelow;
+        let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey
+        );
+        if (index !== -1) indexRowBelow = index + this.numColumns;
+        else return null;
+        return ((ref = this.collection.rows[indexRowBelow]) === null || ref === void 0 ? void 0 : ref.childNodes[0].key) || null;
     }
+    getKeyAbove(key) {
+        var ref;
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        let indexRowAbove;
+        let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey
+        );
+        if (index !== -1) indexRowAbove = index - this.numColumns;
+        else return null;
+        return ((ref = this.collection.rows[indexRowAbove]) === null || ref === void 0 ? void 0 : ref.childNodes[0].key) || null;
+    }
+    constructor(options = {
+    }){
+        super(options);
+        let cardSize = 'L';
+        this.cardOrientation = options.cardOrientation || 'vertical';
+        this.minItemSize = options.minItemSize || $71b727f94b595b1a$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
+        this.maxItemSize = options.maxItemSize || $71b727f94b595b1a$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
+        this.margin = options.margin != null ? options.margin : $71b727f94b595b1a$var$DEFAULT_OPTIONS[cardSize].margin;
+        this.minSpace = options.minSpace || $71b727f94b595b1a$var$DEFAULT_OPTIONS[cardSize].minSpace;
+        this.maxColumns = options.maxColumns || $71b727f94b595b1a$var$DEFAULT_OPTIONS[cardSize].maxColumns;
+        this.itemPadding = options.itemPadding != null ? options.itemPadding : $71b727f94b595b1a$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
+        this.itemSize = null;
+        this.numColumns = 0;
+        this.numRows = 0;
+        this.horizontalSpacing = 0;
+    }
+}
 
-    let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;
-    columnHeights.fill(maxHeight);
-    let y = columnHeights[0];
 
-    if (this.isLoading) {
-      let loaderY = y;
-      let loaderHeight = 60; // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
-      // so it doesn't scroll
 
-      if (this.collection.size === 0) {
-        loaderY = 0;
-        loaderHeight = this.virtualizer.visibleRect.height || 60;
-      }
 
-      let rect = new Rect(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      y = loader.rect.maxY;
+class $632abf8fbf0ad57b$export$e9f7cda058ba8df8 extends $5ee605f09afaa4de$export$64943d2e59d72a29 {
+    get layoutType() {
+        return 'waterfall';
     }
-
-    if (this.collection.size === 0 && !this.isLoading) {
-      let rect = new Rect(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      y = placeholder.rect.maxY;
+    buildCollection(invalidationContext) {
+        // Compute the number of columns needed to display the content
+        let visibleWidth = this.virtualizer.visibleRect.width;
+        let availableWidth = visibleWidth - this.margin * 2;
+        let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));
+        this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+        // Compute the available width (minus the space between items)
+        let width = availableWidth - this.minSpace.width * (this.numColumns - 1);
+        // Compute the item width based on the space available
+        let itemWidth = Math.round(width / this.numColumns);
+        itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));
+        this.itemWidth = itemWidth;
+        // Compute the horizontal spacing
+        // if only one column, we cannot divide by zero, so set it to 1
+        let horizontalSpacing = Math.round((availableWidth - this.numColumns * itemWidth) / Math.max(1, this.numColumns - 1));
+        this.horizontalSpacing = horizontalSpacing;
+        // Setup an array of column heights
+        let columnHeights = Array(this.numColumns).fill(this.margin);
+        for (let node of this.collection){
+            let key = node.key;
+            // Compute the height of the item. Use the existing height if available,
+            // otherwise call the delegate to estimate the size.
+            let oldLayoutInfo = this.layoutInfos.get(key);
+            let height;
+            let estimatedSize = true;
+            if (oldLayoutInfo) {
+                height = oldLayoutInfo.rect.height;
+                estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
+            } else if (node.props.width && node.props.height) {
+                let nodeWidth = node.props.width;
+                let nodeHeight = node.props.height;
+                let scaledHeight = Math.round(nodeHeight * (itemWidth / nodeWidth));
+                height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));
+            } else height = itemWidth;
+            // Figure out which column to place the item in, and compute its position.
+            let column = this.getNextColumnIndex(columnHeights);
+            let x = this.margin + column * (itemWidth + horizontalSpacing);
+            let y = columnHeights[column];
+            let rect = new $jpY3B$reactstatelyvirtualizer.Rect(x, y, itemWidth, height);
+            let layoutInfo = new $jpY3B$reactstatelyvirtualizer.LayoutInfo(node.type, key, rect);
+            layoutInfo.estimatedSize = estimatedSize;
+            layoutInfo.allowOverflow = true;
+            this.layoutInfos.set(key, layoutInfo);
+            // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?
+            // Removing it from v2 doesn't seem to do anything?
+            // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {
+            //   this.updateItemSize(new IndexPath(section, i));
+            // }
+            columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;
+        }
+        // Reset all columns to the maximum for the next section
+        let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;
+        columnHeights.fill(maxHeight);
+        let y = columnHeights[0];
+        if (this.isLoading) {
+            let loaderY = y;
+            let loaderHeight = 60;
+            // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+            // so it doesn't scroll
+            if (this.collection.size === 0) {
+                loaderY = 0;
+                loaderHeight = this.virtualizer.visibleRect.height || 60;
+            }
+            let rect = new $jpY3B$reactstatelyvirtualizer.Rect(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
+            let loader = new $jpY3B$reactstatelyvirtualizer.LayoutInfo('loader', 'loader', rect);
+            this.layoutInfos.set('loader', loader);
+            y = loader.rect.maxY;
+        }
+        if (this.collection.size === 0 && !this.isLoading) {
+            let rect = new $jpY3B$reactstatelyvirtualizer.Rect(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+            let placeholder = new $jpY3B$reactstatelyvirtualizer.LayoutInfo('placeholder', 'placeholder', rect);
+            this.layoutInfos.set('placeholder', placeholder);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize = new $jpY3B$reactstatelyvirtualizer.Size(this.virtualizer.visibleRect.width, y);
     }
-
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
-  }
-
-  updateItemSize(key, size) {
-    let layoutInfo = this.layoutInfos.get(key);
-
-    if (!size || !layoutInfo) {
-      return false;
+    updateItemSize(key, size) {
+        let layoutInfo = this.layoutInfos.get(key);
+        if (!size || !layoutInfo) return false;
+        if (size.height !== layoutInfo.rect.height) {
+            // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below
+            // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have
+            let newLayoutInfo = layoutInfo.copy();
+            newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;
+            newLayoutInfo.estimatedSize = false;
+            this.layoutInfos.set(key, newLayoutInfo);
+            return true;
+        }
+        return false;
     }
-
-    if (size.height !== layoutInfo.rect.height) {
-      // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below
-      // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have
-      let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
-      this.layoutInfos.set(key, newLayoutInfo); // TODO: v2 had layoutInfo.estimatedSize = view.estimatedSize || false; but we can't do the same here?
-
-      layoutInfo.estimatedSize = false;
-      return true;
+    getNextColumnIndex(columnHeights) {
+        let minIndex = 0;
+        for(let i = 0; i < columnHeights.length; i++)if (columnHeights[i] < columnHeights[minIndex]) minIndex = i;
+        return minIndex;
     }
-
-    return false;
-  }
-
-  getNextColumnIndex(columnHeights) {
-    let minIndex = 0;
-
-    for (let i = 0; i < columnHeights.length; i++) {
-      if (columnHeights[i] < columnHeights[minIndex]) {
-        minIndex = i;
-      }
+    getClosestRight(key) {
+        var ref, ref1, ref2;
+        let layoutInfo = this.getLayoutInfo(key);
+        // Refactored from v2. Current strategy is to find the closest card in the adjacent column.
+        // This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall
+        // and thus the top corner to top corner distance was massive.
+        // First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card
+        let rect = new $jpY3B$reactstatelyvirtualizer.Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
+        key = (ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key;
+        if (!key) {
+            var ref3;
+            rect = new $jpY3B$reactstatelyvirtualizer.Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
+            key = (ref3 = this._findClosest(layoutInfo.rect, rect)) === null || ref3 === void 0 ? void 0 : ref3.key;
+        }
+        return (ref2 = (ref1 = this.collection.getItem(key)) === null || ref1 === void 0 ? void 0 : ref1.childNodes[0]) === null || ref2 === void 0 ? void 0 : ref2.key;
     }
-
-    return minIndex;
-  }
-
-  getClosestRight(key) {
-    var _this$_findClosest, _this$collection$getI, _this$collection$getI2;
-
-    let layoutInfo = this.getLayoutInfo(key); // Refactored from v2. Current strategy is to find the closest card in the adjacent column.
-    // This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall
-    // and thus the top corner to top corner distance was massive.
-    // First look for a card to the immediate right of the current card. If we can't find any, look for the nearest card in the entire column to the right of the card
-
-    let rect = new Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
-    key = (_this$_findClosest = this._findClosest(layoutInfo.rect, rect)) == null ? void 0 : _this$_findClosest.key;
-
-    if (!key) {
-      var _this$_findClosest2;
-
-      rect = new Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
-      key = (_this$_findClosest2 = this._findClosest(layoutInfo.rect, rect)) == null ? void 0 : _this$_findClosest2.key;
+    getClosestLeft(key) {
+        var ref, ref4, ref5;
+        let layoutInfo = this.getLayoutInfo(key);
+        // First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card
+        let rect = new $jpY3B$reactstatelyvirtualizer.Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
+        key = (ref = this._findClosest(layoutInfo.rect, rect)) === null || ref === void 0 ? void 0 : ref.key;
+        if (!key) {
+            var ref6;
+            rect = new $jpY3B$reactstatelyvirtualizer.Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
+            key = (ref6 = this._findClosest(layoutInfo.rect, rect)) === null || ref6 === void 0 ? void 0 : ref6.key;
+        }
+        return (ref5 = (ref4 = this.collection.getItem(key)) === null || ref4 === void 0 ? void 0 : ref4.childNodes[0]) === null || ref5 === void 0 ? void 0 : ref5.key;
     }
+    getKeyRightOf(key) {
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
+    }
+    getKeyLeftOf(key) {
+        // Expected key is the currently focused cell so we need the parent row key
+        let parentRowKey = this.collection.getItem(key).parentKey;
+        return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
+    }
+    constructor(options = {
+    }){
+        // TODO: WaterfallLayout doesn't use card size in v2, but perhaps it should support it? Perhaps it would modify
+        // minItemSize defaults or other things
+        super(options);
+        this.minItemSize = options.minItemSize || new $jpY3B$reactstatelyvirtualizer.Size(240, 136);
+        this.maxItemSize = options.maxItemSize || new $jpY3B$reactstatelyvirtualizer.Size(Infinity, Infinity);
+        this.margin = options.margin != null ? options.margin : 24;
+        this.minSpace = options.minSpace || new $jpY3B$reactstatelyvirtualizer.Size(18, 18);
+        this.maxColumns = options.maxColumns || Infinity;
+        this.itemWidth = 0;
+        this.numColumns = 0;
+        this.lastCollection = null;
+        this.collator = options.collator;
+    }
+}
 
-    return (_this$collection$getI = this.collection.getItem(key)) == null ? void 0 : (_this$collection$getI2 = _this$collection$getI.childNodes[0]) == null ? void 0 : _this$collection$getI2.key;
-  }
-
-  getClosestLeft(key) {
-    var _this$_findClosest3, _this$collection$getI3, _this$collection$getI4;
-
-    let layoutInfo = this.getLayoutInfo(key); // First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card
-
-    let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
-    key = (_this$_findClosest3 = this._findClosest(layoutInfo.rect, rect)) == null ? void 0 : _this$_findClosest3.key;
 
-    if (!key) {
-      var _this$_findClosest4;
 
-      rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
-      key = (_this$_findClosest4 = this._findClosest(layoutInfo.rect, rect)) == null ? void 0 : _this$_findClosest4.key;
-    }
 
-    return (_this$collection$getI3 = this.collection.getItem(key)) == null ? void 0 : (_this$collection$getI4 = _this$collection$getI3.childNodes[0]) == null ? void 0 : _this$collection$getI4.key;
-  }
 
-  getKeyRightOf(key) {
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    return this.direction === 'rtl' ? this.getClosestLeft(parentRowKey) : this.getClosestRight(parentRowKey);
-  }
+let $6b630ac4b78ba7f3$var$Card = /*#__PURE__*/ $jpY3B$react.forwardRef((props, ref)=>{
+    let context = $e57ab98cef2f01a5$export$fea0b38586ec8f13();
+    if (context !== null) return null;
+    else return(/*#__PURE__*/ ($parcel$interopDefault($jpY3B$react)).createElement($7888205ff7de382f$export$7a6ccaf429ad93a8, {
+        ...props,
+        ref: ref
+    }));
+});
+// @ts-ignore
+$6b630ac4b78ba7f3$var$Card.getCollectionNode = function* getCollectionNode(props) {
+    let { children: children , textValue: textValue  } = props;
+    yield {
+        type: 'item',
+        props: props,
+        rendered: children,
+        'aria-label': props['aria-label'],
+        hasChildNodes: false,
+        textValue: textValue
+    };
+};
+let $6b630ac4b78ba7f3$export$60332b2344f7fe41 = $6b630ac4b78ba7f3$var$Card;
 
-  getKeyLeftOf(key) {
-    // Expected key is the currently focused cell so we need the parent row key
-    let parentRowKey = this.collection.getItem(key).parentKey;
-    return this.direction === 'rtl' ? this.getClosestRight(parentRowKey) : this.getClosestLeft(parentRowKey);
-  }
 
-}
 
-exports.WaterfallLayout = WaterfallLayout;
-let $bc2440b48de2b2afa97227cbf612729$var$Card = /*#__PURE__*/forwardRef((props, ref) => {
-  let context = $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext();
 
-  if (context !== null) {
-    return null;
-  } else {
-    return /*#__PURE__*/_react.createElement($c05a01cf76428c47b3d1dc747d32$export$CardBase, _babelRuntimeHelpersExtends({}, props, {
-      ref: ref
-    }));
-  }
-}); // TODO: Update the typescript for the below and the export
-// @ts-ignore
-// eslint-disable-next-line
-
-$bc2440b48de2b2afa97227cbf612729$var$Card.getCollectionNode = function* getCollectionNode(props, context) {
-  let {
-    children,
-    textValue
-  } = props;
-  yield {
-    type: 'item',
-    props: props,
-    rendered: children,
-    'aria-label': props['aria-label'],
-    hasChildNodes: false,
-    textValue
-  };
-}; // eslint-disable-next-line
-
-
-let Card = $bc2440b48de2b2afa97227cbf612729$var$Card;
-exports.Card = Card;
 //# sourceMappingURL=main.js.map