@react-spectrum/card 3.0.0-alpha.2 → 3.0.0-alpha.20

package/dist/import.mjs

@@ -0,0 +1,1624 @@
+import "./main.css";
+import {useStyleProps as $8EWFi$useStyleProps, useDOMRef as $8EWFi$useDOMRef, classNames as $8EWFi$classNames, useUnwrapDOMRef as $8EWFi$useUnwrapDOMRef, useHasChild as $8EWFi$useHasChild, SlotProvider as $8EWFi$SlotProvider} from "@react-spectrum/utils";
+import {GridCollection as $8EWFi$GridCollection, useGridState as $8EWFi$useGridState} from "@react-stately/grid";
+import {mergeProps as $8EWFi$mergeProps, useResizeObserver as $8EWFi$useResizeObserver, useLayoutEffect as $8EWFi$useLayoutEffect, filterDOMProps as $8EWFi$filterDOMProps, useSlotId as $8EWFi$useSlotId} from "@react-aria/utils";
+import {ProgressCircle as $8EWFi$ProgressCircle} from "@react-spectrum/progress";
+import $8EWFi$react, {useMemo as $8EWFi$useMemo, useCallback as $8EWFi$useCallback, useRef as $8EWFi$useRef, useState as $8EWFi$useState, useContext as $8EWFi$useContext, forwardRef as $8EWFi$forwardRef} from "react";
+import {useCollator as $8EWFi$useCollator, useLocalizedStringFormatter as $8EWFi$useLocalizedStringFormatter, useLocale as $8EWFi$useLocale} from "@react-aria/i18n";
+import {useGrid as $8EWFi$useGrid, useGridRow as $8EWFi$useGridRow, useGridCell as $8EWFi$useGridCell} from "@react-aria/grid";
+import {useListState as $8EWFi$useListState} from "@react-stately/list";
+import {useProvider as $8EWFi$useProvider, useProviderProps as $8EWFi$useProviderProps} from "@react-spectrum/provider";
+import {VirtualizerItem as $8EWFi$VirtualizerItem, Virtualizer as $8EWFi$Virtualizer} from "@react-aria/virtualizer";
+import {Checkbox as $8EWFi$Checkbox} from "@react-spectrum/checkbox";
+import {getFocusableTreeWalker as $8EWFi$getFocusableTreeWalker, FocusRing as $8EWFi$FocusRing} from "@react-aria/focus";
+import {useHover as $8EWFi$useHover, useFocusWithin as $8EWFi$useFocusWithin} from "@react-aria/interactions";
+import {Size as $8EWFi$Size, Rect as $8EWFi$Rect, LayoutInfo as $8EWFi$LayoutInfo, Layout as $8EWFi$Layout} from "@react-stately/virtualizer";
+import {getFirstItem as $8EWFi$getFirstItem, getChildNodes as $8EWFi$getChildNodes} from "@react-stately/collections";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+var $408a78e5068502c2$exports = {};
+
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card", () => $408a78e5068502c2$export$4e5e9f191b1edb8, (v) => $408a78e5068502c2$export$4e5e9f191b1edb8 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-heading", () => $408a78e5068502c2$export$92758a4a0e8d19e4, (v) => $408a78e5068502c2$export$92758a4a0e8d19e4 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-checkboxWrapper", () => $408a78e5068502c2$export$33977546b63e0df9, (v) => $408a78e5068502c2$export$33977546b63e0df9 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-checkbox", () => $408a78e5068502c2$export$842da5d48b8f6db2, (v) => $408a78e5068502c2$export$842da5d48b8f6db2 = v);
+$parcel$export($408a78e5068502c2$exports, "is-selected", () => $408a78e5068502c2$export$1e0fb04f31d3c22a, (v) => $408a78e5068502c2$export$1e0fb04f31d3c22a = v);
+$parcel$export($408a78e5068502c2$exports, "focus-ring", () => $408a78e5068502c2$export$f39a09f249340e2a, (v) => $408a78e5068502c2$export$f39a09f249340e2a = v);
+$parcel$export($408a78e5068502c2$exports, "is-hovered", () => $408a78e5068502c2$export$b8813cd5d7824ce7, (v) => $408a78e5068502c2$export$b8813cd5d7824ce7 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-grid", () => $408a78e5068502c2$export$b3dd760d2dfde29e, (v) => $408a78e5068502c2$export$b3dd760d2dfde29e = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-decoration", () => $408a78e5068502c2$export$48252dc130b62514, (v) => $408a78e5068502c2$export$48252dc130b62514 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-image", () => $408a78e5068502c2$export$8d5fea71dc66db80, (v) => $408a78e5068502c2$export$8d5fea71dc66db80 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-illustration", () => $408a78e5068502c2$export$13dd3510ae7a8399, (v) => $408a78e5068502c2$export$13dd3510ae7a8399 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-avatar", () => $408a78e5068502c2$export$159930c59efb6273, (v) => $408a78e5068502c2$export$159930c59efb6273 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-detail", () => $408a78e5068502c2$export$16715af38fbd9819, (v) => $408a78e5068502c2$export$16715af38fbd9819 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card-content", () => $408a78e5068502c2$export$d946625b97e8aa17, (v) => $408a78e5068502c2$export$d946625b97e8aa17 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--waterfall", () => $408a78e5068502c2$export$d9c7209e0e4f7e4d, (v) => $408a78e5068502c2$export$d9c7209e0e4f7e4d = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--default", () => $408a78e5068502c2$export$c7a022df9e10a238, (v) => $408a78e5068502c2$export$c7a022df9e10a238 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--noPreview", () => $408a78e5068502c2$export$b77922bc0320c9e4, (v) => $408a78e5068502c2$export$b77922bc0320c9e4 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--grid", () => $408a78e5068502c2$export$59739ab951d2dcc7, (v) => $408a78e5068502c2$export$59739ab951d2dcc7 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--noLayout", () => $408a78e5068502c2$export$a03d836e6ef3e749, (v) => $408a78e5068502c2$export$a03d836e6ef3e749 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--isQuiet", () => $408a78e5068502c2$export$92ad04b5ac9296ea, (v) => $408a78e5068502c2$export$92ad04b5ac9296ea = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--gallery", () => $408a78e5068502c2$export$ccd8ffc36bd10cc, (v) => $408a78e5068502c2$export$ccd8ffc36bd10cc = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-Card--horizontal", () => $408a78e5068502c2$export$1c52334407225704, (v) => $408a78e5068502c2$export$1c52334407225704 = v);
+$parcel$export($408a78e5068502c2$exports, "is-focused", () => $408a78e5068502c2$export$e7dc768d35940237, (v) => $408a78e5068502c2$export$e7dc768d35940237 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-CardView", () => $408a78e5068502c2$export$2f34e9e3e0b89d95, (v) => $408a78e5068502c2$export$2f34e9e3e0b89d95 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-CardView-centeredWrapper", () => $408a78e5068502c2$export$7fc89689fcfab196, (v) => $408a78e5068502c2$export$7fc89689fcfab196 = v);
+$parcel$export($408a78e5068502c2$exports, "spectrum-CardView-row", () => $408a78e5068502c2$export$4746ac09daa215ae, (v) => $408a78e5068502c2$export$4746ac09daa215ae = v);
+$parcel$export($408a78e5068502c2$exports, "is-drop-target", () => $408a78e5068502c2$export$d8467f38d2d00bd0, (v) => $408a78e5068502c2$export$d8467f38d2d00bd0 = v);
+var $408a78e5068502c2$export$4e5e9f191b1edb8;
+var $408a78e5068502c2$export$92758a4a0e8d19e4;
+var $408a78e5068502c2$export$33977546b63e0df9;
+var $408a78e5068502c2$export$842da5d48b8f6db2;
+var $408a78e5068502c2$export$1e0fb04f31d3c22a;
+var $408a78e5068502c2$export$f39a09f249340e2a;
+var $408a78e5068502c2$export$b8813cd5d7824ce7;
+var $408a78e5068502c2$export$b3dd760d2dfde29e;
+var $408a78e5068502c2$export$48252dc130b62514;
+var $408a78e5068502c2$export$8d5fea71dc66db80;
+var $408a78e5068502c2$export$13dd3510ae7a8399;
+var $408a78e5068502c2$export$159930c59efb6273;
+var $408a78e5068502c2$export$16715af38fbd9819;
+var $408a78e5068502c2$export$d946625b97e8aa17;
+var $408a78e5068502c2$export$d9c7209e0e4f7e4d;
+var $408a78e5068502c2$export$c7a022df9e10a238;
+var $408a78e5068502c2$export$b77922bc0320c9e4;
+var $408a78e5068502c2$export$59739ab951d2dcc7;
+var $408a78e5068502c2$export$a03d836e6ef3e749;
+var $408a78e5068502c2$export$92ad04b5ac9296ea;
+var $408a78e5068502c2$export$ccd8ffc36bd10cc;
+var $408a78e5068502c2$export$1c52334407225704;
+var $408a78e5068502c2$export$e7dc768d35940237;
+var $408a78e5068502c2$export$2f34e9e3e0b89d95;
+var $408a78e5068502c2$export$7fc89689fcfab196;
+var $408a78e5068502c2$export$4746ac09daa215ae;
+var $408a78e5068502c2$export$d8467f38d2d00bd0;
+$408a78e5068502c2$export$4e5e9f191b1edb8 = "spectrum-Card_6fdf9f";
+$408a78e5068502c2$export$92758a4a0e8d19e4 = "spectrum-Card-heading_6fdf9f";
+$408a78e5068502c2$export$33977546b63e0df9 = "spectrum-Card-checkboxWrapper_6fdf9f";
+$408a78e5068502c2$export$842da5d48b8f6db2 = "spectrum-Card-checkbox_6fdf9f";
+$408a78e5068502c2$export$1e0fb04f31d3c22a = "is-selected_6fdf9f";
+$408a78e5068502c2$export$f39a09f249340e2a = "focus-ring_6fdf9f";
+$408a78e5068502c2$export$b8813cd5d7824ce7 = "is-hovered_6fdf9f";
+$408a78e5068502c2$export$b3dd760d2dfde29e = "spectrum-Card-grid_6fdf9f";
+$408a78e5068502c2$export$48252dc130b62514 = "spectrum-Card-decoration_6fdf9f";
+$408a78e5068502c2$export$8d5fea71dc66db80 = "spectrum-Card-image_6fdf9f";
+$408a78e5068502c2$export$13dd3510ae7a8399 = "spectrum-Card-illustration_6fdf9f";
+$408a78e5068502c2$export$159930c59efb6273 = "spectrum-Card-avatar_6fdf9f";
+$408a78e5068502c2$export$16715af38fbd9819 = "spectrum-Card-detail_6fdf9f";
+$408a78e5068502c2$export$d946625b97e8aa17 = "spectrum-Card-content_6fdf9f";
+$408a78e5068502c2$export$d9c7209e0e4f7e4d = "spectrum-Card--waterfall_6fdf9f";
+$408a78e5068502c2$export$c7a022df9e10a238 = "spectrum-Card--default_6fdf9f";
+$408a78e5068502c2$export$b77922bc0320c9e4 = "spectrum-Card--noPreview_6fdf9f";
+$408a78e5068502c2$export$59739ab951d2dcc7 = "spectrum-Card--grid_6fdf9f";
+$408a78e5068502c2$export$a03d836e6ef3e749 = "spectrum-Card--noLayout_6fdf9f";
+$408a78e5068502c2$export$92ad04b5ac9296ea = "spectrum-Card--isQuiet_6fdf9f";
+$408a78e5068502c2$export$ccd8ffc36bd10cc = "spectrum-Card--gallery_6fdf9f";
+$408a78e5068502c2$export$1c52334407225704 = "spectrum-Card--horizontal_6fdf9f";
+$408a78e5068502c2$export$e7dc768d35940237 = "is-focused_6fdf9f";
+$408a78e5068502c2$export$2f34e9e3e0b89d95 = "spectrum-CardView_6fdf9f";
+$408a78e5068502c2$export$7fc89689fcfab196 = "spectrum-CardView-centeredWrapper_6fdf9f";
+$408a78e5068502c2$export$4746ac09daa215ae = "spectrum-CardView-row_6fdf9f";
+$408a78e5068502c2$export$d8467f38d2d00bd0 = "is-drop-target_6fdf9f";
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+const $8d180a244893de14$export$64992ac69f286e5c = /*#__PURE__*/ (0, $8EWFi$react).createContext(null);
+function $8d180a244893de14$export$fea0b38586ec8f13() {
+    return (0, $8EWFi$useContext)($8d180a244893de14$export$64992ac69f286e5c);
+}
+
+
+
+
+function $643dd8fa80926f94$var$CardBase(props, ref) {
+    props = (0, $8EWFi$useProviderProps)(props);
+    let context = (0, $8d180a244893de14$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);
+    };
+    let { styleProps: styleProps  } = (0, $8EWFi$useStyleProps)(props);
+    let { cardProps: cardProps , titleProps: titleProps , contentProps: contentProps  } = $643dd8fa80926f94$var$useCard(props);
+    let domRef = (0, $8EWFi$useDOMRef)(ref);
+    let gridRef = (0, $8EWFi$useRef)();
+    let checkboxRef = (0, $8EWFi$useRef)(null);
+    // cards are only interactive if there is a selection manager and it allows selection
+    let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $8EWFi$useHover)({
+        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
+    });
+    let [isFocused, setIsFocused] = (0, $8EWFi$useState)(false);
+    let { focusWithinProps: focusWithinProps  } = (0, $8EWFi$useFocusWithin)({
+        onFocusWithinChange: setIsFocused,
+        isDisabled: isDisabled
+    });
+    // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
+    let hasPreviewImage = (0, $8EWFi$useHasChild)(`.${(0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)))["spectrum-Card-image"]}`, gridRef);
+    let hasPreviewIllustration = (0, $8EWFi$useHasChild)(`.${(0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports)))["spectrum-Card-illustration"]}`, gridRef);
+    let hasPreview = hasPreviewImage || hasPreviewIllustration;
+    // this is for horizontal cards
+    let [height, setHeight] = (0, $8EWFi$useState)(NaN);
+    let updateHeight = (0, $8EWFi$useCallback)(()=>{
+        if (orientation !== "horizontal") return;
+        let cardHeight = gridRef.current.getBoundingClientRect().height;
+        setHeight(cardHeight);
+    }, [
+        orientation,
+        gridRef,
+        setHeight
+    ]);
+    (0, $8EWFi$useResizeObserver)({
+        ref: gridRef,
+        onResize: updateHeight
+    });
+    let aspectRatioEnforce = undefined;
+    if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
+        height: `${height}px`,
+        width: `${height}px`
+    };
+    let slots = (0, $8EWFi$useMemo)(()=>({
+            image: {
+                UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-image"),
+                objectFit: orientation === "horizontal" ? "cover" : "contain",
+                alt: "",
+                ...aspectRatioEnforce
+            },
+            illustration: {
+                UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-illustration"),
+                ...aspectRatioEnforce
+            },
+            avatar: {
+                UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-avatar"),
+                size: "avatar-size-400"
+            },
+            heading: {
+                UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-heading"),
+                ...titleProps
+            },
+            content: {
+                UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-content"),
+                ...contentProps
+            },
+            detail: {
+                UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-detail")
+            }
+        }), [
+        titleProps,
+        contentProps,
+        height,
+        isQuiet,
+        orientation
+    ]);
+    (0, $8EWFi$useLayoutEffect)(()=>{
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            let walker = (0, $8EWFi$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__*/ (0, $8EWFi$react).createElement((0, $8EWFi$FocusRing), {
+        focusRingClass: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "focus-ring")
+    }, /*#__PURE__*/ (0, $8EWFi$react).createElement("article", {
+        ...styleProps,
+        ...(0, $8EWFi$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8EWFi$filterDOMProps)(props), articleProps),
+        ref: domRef,
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$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__*/ (0, $8EWFi$react).createElement("div", {
+        ref: gridRef,
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-grid")
+    }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-checkboxWrapper")
+    }, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$Checkbox), {
+        ref: checkboxRef,
+        isDisabled: isDisabled,
+        excludeFromTabOrder: true,
+        isSelected: isSelected,
+        onChange: onChange,
+        UNSAFE_className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-checkbox"),
+        isEmphasized: true,
+        "aria-label": "select"
+    })), /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$SlotProvider), {
+        slots: slots
+    }, children), /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-Card-decoration")
+    }))));
+}
+function $643dd8fa80926f94$var$useCard(props) {
+    let titleId = (0, $8EWFi$useSlotId)();
+    let descriptionId = (0, $8EWFi$useSlotId)();
+    let titleProps = (0, $8EWFi$useMemo)(()=>({
+            id: titleId
+        }), [
+        titleId
+    ]);
+    let contentProps = (0, $8EWFi$useMemo)(()=>({
+            id: descriptionId
+        }), [
+        descriptionId
+    ]);
+    return {
+        cardProps: {
+            ...(0, $8EWFi$filterDOMProps)(props),
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: 0
+        },
+        titleProps: titleProps,
+        contentProps: contentProps
+    };
+}
+/**
+ * TODO: Add description of component here.
+ */ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8EWFi$react).forwardRef($643dd8fa80926f94$var$CardBase);
+
+
+
+
+
+var $49aba923a95704ba$exports = {};
+var $6cb102354c06de53$exports = {};
+$6cb102354c06de53$exports = {
+    "loading": `جارٍ التحميل...`,
+    "loadingMore": `جارٍ تحميل المزيد...`
+};
+
+
+var $17b8c838d83f13fc$exports = {};
+$17b8c838d83f13fc$exports = {
+    "loading": `Зареждане...`,
+    "loadingMore": `Зареждане на още...`
+};
+
+
+var $1ddb4e1a3e8b15a5$exports = {};
+$1ddb4e1a3e8b15a5$exports = {
+    "loading": `Načítání...`,
+    "loadingMore": `Načítání dalších...`
+};
+
+
+var $44b7f17cd1f1db7f$exports = {};
+$44b7f17cd1f1db7f$exports = {
+    "loading": `Indlæser...`,
+    "loadingMore": `Indlæser flere...`
+};
+
+
+var $ffa85bef2c730318$exports = {};
+$ffa85bef2c730318$exports = {
+    "loading": `Wird geladen...`,
+    "loadingMore": `Noch mehr wird geladen...`
+};
+
+
+var $1904be2ca25ad4ef$exports = {};
+$1904be2ca25ad4ef$exports = {
+    "loading": `Φόρτωση...`,
+    "loadingMore": `Φόρτωση περισσότερων...`
+};
+
+
+var $d120e7d3833466fb$exports = {};
+$d120e7d3833466fb$exports = {
+    "loading": `Loading…`,
+    "loadingMore": `Loading more…`
+};
+
+
+var $fe39ef3292597d11$exports = {};
+$fe39ef3292597d11$exports = {
+    "loading": `Cargando…`,
+    "loadingMore": `Cargando más…`
+};
+
+
+var $3204c020860ca192$exports = {};
+$3204c020860ca192$exports = {
+    "loading": `Laadimine...`,
+    "loadingMore": `Laadi rohkem...`
+};
+
+
+var $5ced2ee930f1d61a$exports = {};
+$5ced2ee930f1d61a$exports = {
+    "loading": `Ladataan…`,
+    "loadingMore": `Ladataan lisää…`
+};
+
+
+var $bd751114db2e8872$exports = {};
+$bd751114db2e8872$exports = {
+    "loading": `Chargement en cours…`,
+    "loadingMore": `Chargement d’autres d’éléments…`
+};
+
+
+var $6291b4a5eb5146c5$exports = {};
+$6291b4a5eb5146c5$exports = {
+    "loading": `טוען...`,
+    "loadingMore": `טוען עוד...`
+};
+
+
+var $cdc3f7b2aa8b1879$exports = {};
+$cdc3f7b2aa8b1879$exports = {
+    "loading": `Učitavam...`,
+    "loadingMore": `Učitavam još...`
+};
+
+
+var $1a69968dcbcabdff$exports = {};
+$1a69968dcbcabdff$exports = {
+    "loading": `Betöltés folyamatban…`,
+    "loadingMore": `Továbbiak betöltése folyamatban…`
+};
+
+
+var $fe72420090e5e44f$exports = {};
+$fe72420090e5e44f$exports = {
+    "loading": `Caricamento...`,
+    "loadingMore": `Caricamento altri...`
+};
+
+
+var $8643fac062a08b30$exports = {};
+$8643fac062a08b30$exports = {
+    "loading": `読み込み中...`,
+    "loadingMore": `さらに読み込み中...`
+};
+
+
+var $41f4de1d2f63c8f4$exports = {};
+$41f4de1d2f63c8f4$exports = {
+    "loading": `로드 중…`,
+    "loadingMore": `추가 로드 중…`
+};
+
+
+var $9819c3a9877418b0$exports = {};
+$9819c3a9877418b0$exports = {
+    "loading": `Įkeliama…`,
+    "loadingMore": `Įkeliama daugiau…`
+};
+
+
+var $3e8ad6b78b8cc064$exports = {};
+$3e8ad6b78b8cc064$exports = {
+    "loading": `Notiek ielāde…`,
+    "loadingMore": `Tiek ielādēts vēl...`
+};
+
+
+var $baa4fb210e65a6c5$exports = {};
+$baa4fb210e65a6c5$exports = {
+    "loading": `Laster inn...`,
+    "loadingMore": `Laster inn flere...`
+};
+
+
+var $ee123eda5b089b7d$exports = {};
+$ee123eda5b089b7d$exports = {
+    "loading": `Laden...`,
+    "loadingMore": `Meer laden...`
+};
+
+
+var $36a325cd1c9e414f$exports = {};
+$36a325cd1c9e414f$exports = {
+    "loading": `Wczytywanie...`,
+    "loadingMore": `Wczytywanie większej liczby...`
+};
+
+
+var $52d4fd0f211d7e51$exports = {};
+$52d4fd0f211d7e51$exports = {
+    "loading": `Carregando...`,
+    "loadingMore": `Carregando mais...`
+};
+
+
+var $ad1f55e36e4e9241$exports = {};
+$ad1f55e36e4e9241$exports = {
+    "loading": `A carregar...`,
+    "loadingMore": `A carregar mais...`
+};
+
+
+var $bfc201ee55c5f26f$exports = {};
+$bfc201ee55c5f26f$exports = {
+    "loading": `Se încarcă...`,
+    "loadingMore": `Se încarcă mai multe...`
+};
+
+
+var $5773113377d944b4$exports = {};
+$5773113377d944b4$exports = {
+    "loading": `Загрузка...`,
+    "loadingMore": `Дополнительная загрузка...`
+};
+
+
+var $75167f0b339049be$exports = {};
+$75167f0b339049be$exports = {
+    "loading": `Načítava sa...`,
+    "loadingMore": `Načítava sa viac...`
+};
+
+
+var $83a887ec3d5f2028$exports = {};
+$83a887ec3d5f2028$exports = {
+    "loading": `Nalaganje...`,
+    "loadingMore": `Nalaganje dodatne vsebine...`
+};
+
+
+var $8352707b2eadbfb4$exports = {};
+$8352707b2eadbfb4$exports = {
+    "loading": `Učitavam...`,
+    "loadingMore": `Učitavam još...`
+};
+
+
+var $212352f469058747$exports = {};
+$212352f469058747$exports = {
+    "loading": `Läser in...`,
+    "loadingMore": `Läser in mer...`
+};
+
+
+var $334510787f8a69f9$exports = {};
+$334510787f8a69f9$exports = {
+    "loading": `Yükleniyor...`,
+    "loadingMore": `Daha fazla yükleniyor...`
+};
+
+
+var $1b8fd2890c177825$exports = {};
+$1b8fd2890c177825$exports = {
+    "loading": `Завантаження…`,
+    "loadingMore": `Завантаження інших об’єктів...`
+};
+
+
+var $88c83d794a7a062b$exports = {};
+$88c83d794a7a062b$exports = {
+    "loading": `正在加载...`,
+    "loadingMore": `正在加载更多...`
+};
+
+
+var $b7e2865acb74a940$exports = {};
+$b7e2865acb74a940$exports = {
+    "loading": `正在載入…`,
+    "loadingMore": `正在載入更多…`
+};
+
+
+$49aba923a95704ba$exports = {
+    "ar-AE": $6cb102354c06de53$exports,
+    "bg-BG": $17b8c838d83f13fc$exports,
+    "cs-CZ": $1ddb4e1a3e8b15a5$exports,
+    "da-DK": $44b7f17cd1f1db7f$exports,
+    "de-DE": $ffa85bef2c730318$exports,
+    "el-GR": $1904be2ca25ad4ef$exports,
+    "en-US": $d120e7d3833466fb$exports,
+    "es-ES": $fe39ef3292597d11$exports,
+    "et-EE": $3204c020860ca192$exports,
+    "fi-FI": $5ced2ee930f1d61a$exports,
+    "fr-FR": $bd751114db2e8872$exports,
+    "he-IL": $6291b4a5eb5146c5$exports,
+    "hr-HR": $cdc3f7b2aa8b1879$exports,
+    "hu-HU": $1a69968dcbcabdff$exports,
+    "it-IT": $fe72420090e5e44f$exports,
+    "ja-JP": $8643fac062a08b30$exports,
+    "ko-KR": $41f4de1d2f63c8f4$exports,
+    "lt-LT": $9819c3a9877418b0$exports,
+    "lv-LV": $3e8ad6b78b8cc064$exports,
+    "nb-NO": $baa4fb210e65a6c5$exports,
+    "nl-NL": $ee123eda5b089b7d$exports,
+    "pl-PL": $36a325cd1c9e414f$exports,
+    "pt-BR": $52d4fd0f211d7e51$exports,
+    "pt-PT": $ad1f55e36e4e9241$exports,
+    "ro-RO": $bfc201ee55c5f26f$exports,
+    "ru-RU": $5773113377d944b4$exports,
+    "sk-SK": $75167f0b339049be$exports,
+    "sl-SI": $83a887ec3d5f2028$exports,
+    "sr-SP": $8352707b2eadbfb4$exports,
+    "sv-SE": $212352f469058747$exports,
+    "tr-TR": $334510787f8a69f9$exports,
+    "uk-UA": $1b8fd2890c177825$exports,
+    "zh-CN": $88c83d794a7a062b$exports,
+    "zh-TW": $b7e2865acb74a940$exports
+};
+
+
+
+
+
+
+
+
+
+
+
+function $81a52da995c19652$var$CardView(props, ref) {
+    let { scale: scale  } = (0, $8EWFi$useProvider)();
+    let { styleProps: styleProps  } = (0, $8EWFi$useStyleProps)(props);
+    let domRef = (0, $8EWFi$useDOMRef)(ref);
+    let { isQuiet: isQuiet , renderEmptyState: renderEmptyState , layout: layout , loadingState: loadingState , onLoadMore: onLoadMore , cardOrientation: cardOrientation = "vertical"  } = props;
+    let collator = (0, $8EWFi$useCollator)({
+        usage: "search",
+        sensitivity: "base"
+    });
+    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
+    let cardViewLayout = (0, $8EWFi$useMemo)(()=>typeof layout === "function" ? new layout({
+            collator: collator,
+            cardOrientation: cardOrientation,
+            scale: scale
+        }) : layout, [
+        layout,
+        collator,
+        cardOrientation,
+        scale
+    ]);
+    let layoutType = cardViewLayout.layoutType;
+    let stringFormatter = (0, $8EWFi$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($49aba923a95704ba$exports))));
+    let { direction: direction  } = (0, $8EWFi$useLocale)();
+    let { collection: collection  } = (0, $8EWFi$useListState)(props);
+    let gridCollection = (0, $8EWFi$useMemo)(()=>new (0, $8EWFi$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 = (0, $8EWFi$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  } = (0, $8EWFi$useGrid)({
+        ...props,
+        isVirtualized: true,
+        keyboardDelegate: cardViewLayout
+    }, state, domRef);
+    let renderWrapper = (parent, reusableView)=>{
+        /*#__PURE__*/ return (0, $8EWFi$react).createElement((0, $8EWFi$VirtualizerItem), {
+            key: reusableView.key,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+        }, reusableView.rendered);
+    };
+    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 = (0, $8EWFi$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__*/ (0, $8EWFi$react).createElement((0, $8d180a244893de14$export$64992ac69f286e5c).Provider, {
+        value: {
+            state: state,
+            isQuiet: isQuiet,
+            layout: cardViewLayout,
+            cardOrientation: cardOrientation
+        }
+    }, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$Virtualizer), {
+        ...gridProps,
+        ...styleProps,
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$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__*/ (0, $8EWFi$react).createElement($81a52da995c19652$var$InternalCard, {
+            item: item
+        });
+        else if (type === "loader") return /*#__PURE__*/ (0, $8EWFi$react).createElement($81a52da995c19652$var$CenteredWrapper, null, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $8EWFi$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__*/ (0, $8EWFi$react).createElement($81a52da995c19652$var$CenteredWrapper, null, emptyState);
+        }
+    }));
+}
+function $81a52da995c19652$var$CenteredWrapper({ children: children  }) {
+    let { state: state  } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    return /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
+        role: "row",
+        "aria-rowindex": state.collection.size + 1,
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-CardView-centeredWrapper")
+    }, /*#__PURE__*/ (0, $8EWFi$react).createElement("div", {
+        role: "gridcell"
+    }, children));
+}
+function $81a52da995c19652$var$InternalCard(props) {
+    let { item: item  } = props;
+    let cellNode = [
+        ...item.childNodes
+    ][0];
+    let { state: state , cardOrientation: cardOrientation , isQuiet: isQuiet , layout: layout  } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    let layoutType = layout.layoutType;
+    let rowRef = (0, $8EWFi$useRef)();
+    let cellRef = (0, $8EWFi$useRef)();
+    let unwrappedRef = (0, $8EWFi$useUnwrapDOMRef)(cellRef);
+    let { rowProps: gridRowProps  } = (0, $8EWFi$useGridRow)({
+        node: item,
+        isVirtualized: true
+    }, state, rowRef);
+    let { gridCellProps: gridCellProps  } = (0, $8EWFi$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 = (0, $8EWFi$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__*/ (0, $8EWFi$react).createElement("div", {
+        ...rowProps,
+        ref: rowRef,
+        className: (0, $8EWFi$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($408a78e5068502c2$exports))), "spectrum-CardView-row")
+    }, /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
+        ref: cellRef,
+        articleProps: gridCellProps,
+        isQuiet: isQuiet,
+        orientation: cardOrientation,
+        item: item,
+        layout: layoutType
+    }, item.rendered));
+}
+/**
+ * TODO: Add description of component here.
+ */ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $8EWFi$react).forwardRef($81a52da995c19652$var$CardView);
+
+
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$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;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    buildCollection(invalidationContext) {}
+    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;
+            }
+        }
+        return best;
+    }
+    _findClosest(target, rect) {
+        let best = this._findClosestLayoutInfo(target, rect);
+        return best || null;
+    }
+    getKeyBelow(key) {
+        var _this__findClosest, _getFirstItem;
+        // 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 (0, $8EWFi$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 || _this__findClosest === void 0 ? void 0 : _this__findClosest.key);
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(closestRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+    }
+    getKeyAbove(key) {
+        var _this__findClosest, _getFirstItem;
+        // 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 (0, $8EWFi$Rect)(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
+        let closestRow = this.collection.getItem((_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key);
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(closestRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.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){
+            var _getFirstItem;
+            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 (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.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){
+            var _getFirstItem;
+            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 (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+            key = this.direction === "rtl" ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
+        }
+    }
+    getFirstKey() {
+        var _getFirstItem;
+        let firstRow = this.collection.getItem(this.collection.getFirstKey());
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(firstRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+    }
+    getLastKey() {
+        var _getFirstItem;
+        let lastRow = this.collection.getItem(this.collection.getLastKey());
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(lastRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.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 _this_collection_getItem;
+            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_getItem = this.collection.getItem(this.getKeyAbove(key))) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.parentKey;
+            layoutInfo = this.getLayoutInfo(keyAbove);
+            if (layoutInfo && layoutInfo.rect.y > pageY) while(layoutInfo && layoutInfo.rect.y > pageY){
+                var _getFirstItem, _this_collection_getItem1;
+                let childKey = (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+                let keyAbove = (_this_collection_getItem1 = this.collection.getItem(this.getKeyAbove(childKey))) === null || _this_collection_getItem1 === void 0 ? void 0 : _this_collection_getItem1.parentKey;
+                layoutInfo = this.getLayoutInfo(keyAbove);
+            }
+            if (layoutInfo) {
+                var _getFirstItem1;
+                let childKey = (_getFirstItem1 = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem1 === void 0 ? void 0 : _getFirstItem1.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 _this_collection_getItem;
+            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 = (_this_collection_getItem = this.collection.getItem(this.getKeyBelow(key))) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.parentKey;
+            layoutInfo = this.getLayoutInfo(keyBelow);
+            if (layoutInfo && layoutInfo.rect.y < pageY) while(layoutInfo && layoutInfo.rect.y < pageY){
+                var _getFirstItem, _this_collection_getItem1;
+                let childKey = (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+                let keyBelow = (_this_collection_getItem1 = this.collection.getItem(this.getKeyBelow(childKey))) === null || _this_collection_getItem1 === void 0 ? void 0 : _this_collection_getItem1.parentKey;
+                layoutInfo = this.getLayoutInfo(keyBelow);
+            }
+            if (layoutInfo) {
+                var _getFirstItem1;
+                let childKey = (_getFirstItem1 = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem1 === void 0 ? void 0 : _getFirstItem1.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) {
+                var _getFirstItem;
+                let substring = item.textValue.slice(0, search.length);
+                if (this.collator.compare(substring, search) === 0) return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.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;
+    }
+}
+
+
+
+const $c0ba81539c443916$var$DEFAULT_OPTIONS = {
+    S: {
+        idealRowHeight: 112,
+        minItemSize: new (0, $8EWFi$Size)(96, 96),
+        itemSpacing: new (0, $8EWFi$Size)(8, 16),
+        itemPadding: 24,
+        dropSpacing: 50,
+        margin: 8
+    },
+    L: {
+        idealRowHeight: 208,
+        minItemSize: new (0, $8EWFi$Size)(136, 136),
+        itemSpacing: new (0, $8EWFi$Size)(18, 18),
+        itemPadding: {
+            "medium": 78,
+            "large": 99
+        },
+        dropSpacing: 100,
+        margin: 24
+    }
+};
+class $c0ba81539c443916$export$8e52095834484b61 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
+    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
+                // eslint-disable-next-line max-depth
+                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;
+    }
+    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 = $c0ba81539c443916$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 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 (0, $8EWFi$Rect)(x, y, itemWidth, itemHeight);
+                    let layoutInfo = new (0, $8EWFi$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 (0, $8EWFi$Rect)(0, loaderY, visibleWidth, loaderHeight);
+                let loader = new (0, $8EWFi$LayoutInfo)("loader", "loader", rect);
+                this.layoutInfos.set("loader", loader);
+                y = loader.rect.maxY;
+            }
+            if (this.collection.size === 0 && !this.isLoading) {
+                let rect = new (0, $8EWFi$Rect)(0, 0, visibleWidth, visibleHeight);
+                let placeholder = new (0, $8EWFi$LayoutInfo)("placeholder", "placeholder", rect);
+                this.layoutInfos.set("placeholder", placeholder);
+                y = placeholder.rect.maxY;
+            }
+        }
+        this.contentSize = new (0, $8EWFi$Size)(visibleWidth, y);
+    }
+    constructor(options = {}){
+        super(options);
+        let cardSize = "L";
+        this.idealRowHeight = options.idealRowHeight || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
+        this.itemSpacing = options.itemSpacing || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
+        this.itemPadding = options.itemPadding != null ? options.itemPadding : $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
+        this.minItemSize = options.minItemSize || $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].minItemSize;
+        this.threshold = options.threshold || 1;
+        this.margin = options.margin != null ? options.margin : $c0ba81539c443916$var$DEFAULT_OPTIONS[cardSize].margin;
+    }
+}
+// https://www8.cs.umu.se/kurser/TDBA77/VT06/algorithms/BOOK/BOOK2/NODE45.HTM
+function $c0ba81539c443916$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;
+            }
+        }
+        table[i][j] = currentMin;
+        solution[i - 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 i = 0; i < n + 1; i++)row.push(seq[i]);
+    result.unshift(row);
+    return result;
+}
+
+
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $ed42fd44b9b9b664$var$DEFAULT_OPTIONS = {
+    S: {
+        itemPadding: 20,
+        minItemSize: {
+            "vertical": new (0, $8EWFi$Size)(96, 96)
+        },
+        maxItemSize: new (0, $8EWFi$Size)(Infinity, Infinity),
+        margin: 8,
+        minSpace: new (0, $8EWFi$Size)(6, 6),
+        maxColumns: Infinity,
+        dropSpacing: 50
+    },
+    L: {
+        itemPadding: {
+            "vertical": {
+                "medium": 78,
+                "large": 98
+            },
+            "horizontal": {
+                "medium": 150,
+                "large": 170
+            }
+        },
+        minItemSize: {
+            "vertical": new (0, $8EWFi$Size)(208, 208),
+            "horizontal": new (0, $8EWFi$Size)(102, 102)
+        },
+        maxItemSize: new (0, $8EWFi$Size)(Infinity, Infinity),
+        margin: 24,
+        minSpace: new (0, $8EWFi$Size)(18, 18),
+        maxColumns: Infinity,
+        dropSpacing: 100
+    }
+};
+class $ed42fd44b9b9b664$export$7d2b12578154a735 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
+    get layoutType() {
+        return "grid";
+    }
+    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)));
+    }
+    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;
+    }
+    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 (0, $8EWFi$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 (0, $8EWFi$Rect)(0, loaderY, visibleWidth, loaderHeight);
+            let loader = new (0, $8EWFi$LayoutInfo)("loader", "loader", rect);
+            this.layoutInfos.set("loader", loader);
+            y = loader.rect.maxY;
+        }
+        if (this.collection.size === 0 && !this.isLoading) {
+            let rect = new (0, $8EWFi$Rect)(0, 0, visibleWidth, visibleHeight);
+            let placeholder = new (0, $8EWFi$LayoutInfo)("placeholder", "placeholder", rect);
+            this.layoutInfos.set("placeholder", placeholder);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize = new (0, $8EWFi$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 (0, $8EWFi$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 (0, $8EWFi$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 _getFirstItem;
+        // 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;
+        let row = this.collection.rows[indexRowBelow];
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(row, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+    }
+    getKeyAbove(key) {
+        var _getFirstItem;
+        // 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;
+        let row = this.collection.rows[indexRowAbove];
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(row, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+    }
+    constructor(options = {}){
+        super(options);
+        let cardSize = "L";
+        this.cardOrientation = options.cardOrientation || "vertical";
+        this.minItemSize = options.minItemSize || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
+        this.maxItemSize = options.maxItemSize || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
+        this.margin = options.margin != null ? options.margin : $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].margin;
+        this.minSpace = options.minSpace || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].minSpace;
+        this.maxColumns = options.maxColumns || $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].maxColumns;
+        this.itemPadding = options.itemPadding != null ? options.itemPadding : $ed42fd44b9b9b664$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
+        this.itemSize = null;
+        this.numColumns = 0;
+        this.numRows = 0;
+        this.horizontalSpacing = 0;
+    }
+}
+
+
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
+    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(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 (0, $8EWFi$Rect)(x, y, itemWidth, height);
+            let layoutInfo = new (0, $8EWFi$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 (0, $8EWFi$Rect)(0, loaderY, this.virtualizer.visibleRect.width, loaderHeight);
+            let loader = new (0, $8EWFi$LayoutInfo)("loader", "loader", rect);
+            this.layoutInfos.set("loader", loader);
+            y = loader.rect.maxY;
+        }
+        if (this.collection.size === 0 && !this.isLoading) {
+            let rect = new (0, $8EWFi$Rect)(0, 0, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+            let placeholder = new (0, $8EWFi$LayoutInfo)("placeholder", "placeholder", rect);
+            this.layoutInfos.set("placeholder", placeholder);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize = new (0, $8EWFi$Size)(this.virtualizer.visibleRect.width, y);
+    }
+    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;
+    }
+    getNextColumnIndex(columnHeights) {
+        let minIndex = 0;
+        for(let i = 0; i < columnHeights.length; i++)if (columnHeights[i] < columnHeights[minIndex]) minIndex = i;
+        return minIndex;
+    }
+    getClosestRight(key) {
+        var _this__findClosest, _getFirstItem;
+        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 (0, $8EWFi$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 || _this__findClosest === void 0 ? void 0 : _this__findClosest.key;
+        if (!key) {
+            var _this__findClosest1;
+            rect = new (0, $8EWFi$Rect)(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
+            key = (_this__findClosest1 = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest1 === void 0 ? void 0 : _this__findClosest1.key;
+        }
+        let item = this.collection.getItem(key);
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
+    }
+    getClosestLeft(key) {
+        var _this__findClosest, _getFirstItem;
+        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 (0, $8EWFi$Rect)(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
+        key = (_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key;
+        if (!key) {
+            var _this__findClosest1;
+            rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
+            key = (_this__findClosest1 = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest1 === void 0 ? void 0 : _this__findClosest1.key;
+        }
+        let item = this.collection.getItem(key);
+        return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.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 (0, $8EWFi$Size)(240, 136);
+        this.maxItemSize = options.maxItemSize || new (0, $8EWFi$Size)(Infinity, Infinity);
+        this.margin = options.margin != null ? options.margin : 24;
+        this.minSpace = options.minSpace || new (0, $8EWFi$Size)(18, 18);
+        this.maxColumns = options.maxColumns || Infinity;
+        this.itemWidth = 0;
+        this.numColumns = 0;
+        this.lastCollection = null;
+        this.collator = options.collator;
+    }
+}
+
+
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+let $d2d1c099b89e366a$var$Card = /*#__PURE__*/ (0, $8EWFi$forwardRef)((props, ref)=>{
+    let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    if (context !== null) return null;
+    else return /*#__PURE__*/ (0, $8EWFi$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
+        ...props,
+        ref: ref
+    });
+});
+// @ts-ignore
+$d2d1c099b89e366a$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 $d2d1c099b89e366a$export$60332b2344f7fe41 = $d2d1c099b89e366a$var$Card;
+
+
+
+
+export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView, $c0ba81539c443916$export$8e52095834484b61 as GalleryLayout, $ed42fd44b9b9b664$export$7d2b12578154a735 as GridLayout, $03278f8d0f6860bb$export$e9f7cda058ba8df8 as WaterfallLayout, $d2d1c099b89e366a$export$60332b2344f7fe41 as Card};
+//# sourceMappingURL=module.js.map