@react-spectrum/card 3.0.0-alpha.32 → 3.0.0-alpha.33

package/dist/BaseLayout.main.js

@@ -26,8 +26,8 @@ class $5ee605f09afaa4de$export$64943d2e59d72a29 extends (0, $kQhHy$reactstatelyv
         // 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");
+            if (!this.isLoading) this.layoutInfos.delete('loader');
+            if (this.collection.size > 0) this.layoutInfos.delete('placeholder');
         }
         this.lastCollection = this.collection;
     }
@@ -49,12 +49,12 @@ class $5ee605f09afaa4de$export$64943d2e59d72a29 extends (0, $kQhHy$reactstatelyv
     }
     getInitialLayoutInfo(layoutInfo) {
         layoutInfo.opacity = 0;
-        layoutInfo.transform = "scale3d(0.8, 0.8, 0.8)";
+        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)";
+        layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
         return layoutInfo;
     }
     _findClosestLayoutInfo(target, rect) {
@@ -62,7 +62,7 @@ class $5ee605f09afaa4de$export$64943d2e59d72a29 extends (0, $kQhHy$reactstatelyv
         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") {
+        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;
@@ -101,25 +101,25 @@ class $5ee605f09afaa4de$export$64943d2e59d72a29 extends (0, $kQhHy$reactstatelyv
     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);
+        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, $kQhHy$reactstatelycollections.getFirstItem)((0, $kQhHy$reactstatelycollections.getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
-            key = this.direction === "rtl" ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
+            if (item.type === 'item') return (_getFirstItem = (0, $kQhHy$reactstatelycollections.getFirstItem)((0, $kQhHy$reactstatelycollections.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);
+        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, $kQhHy$reactstatelycollections.getFirstItem)((0, $kQhHy$reactstatelycollections.getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
-            key = this.direction === "rtl" ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
+            if (item.type === 'item') return (_getFirstItem = (0, $kQhHy$reactstatelycollections.getFirstItem)((0, $kQhHy$reactstatelycollections.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() {
@@ -209,7 +209,7 @@ class $5ee605f09afaa4de$export$64943d2e59d72a29 extends (0, $kQhHy$reactstatelyv
         this.layoutInfos = new Map();
         this.collator = options.collator;
         this.lastCollection = null;
-        this.scale = options.scale || "medium";
+        this.scale = options.scale || 'medium';
         this.margin = options.margin || 24;
     }
 }

package/dist/BaseLayout.mjs

@@ -20,8 +20,8 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
         // 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");
+            if (!this.isLoading) this.layoutInfos.delete('loader');
+            if (this.collection.size > 0) this.layoutInfos.delete('placeholder');
         }
         this.lastCollection = this.collection;
     }
@@ -43,12 +43,12 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
     }
     getInitialLayoutInfo(layoutInfo) {
         layoutInfo.opacity = 0;
-        layoutInfo.transform = "scale3d(0.8, 0.8, 0.8)";
+        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)";
+        layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
         return layoutInfo;
     }
     _findClosestLayoutInfo(target, rect) {
@@ -56,7 +56,7 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
         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") {
+        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;
@@ -95,25 +95,25 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
     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);
+        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, $1JdnP$getFirstItem)((0, $1JdnP$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
-            key = this.direction === "rtl" ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
+            if (item.type === 'item') return (_getFirstItem = (0, $1JdnP$getFirstItem)((0, $1JdnP$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);
+        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, $1JdnP$getFirstItem)((0, $1JdnP$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
-            key = this.direction === "rtl" ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
+            if (item.type === 'item') return (_getFirstItem = (0, $1JdnP$getFirstItem)((0, $1JdnP$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() {
@@ -203,11 +203,11 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
         this.layoutInfos = new Map();
         this.collator = options.collator;
         this.lastCollection = null;
-        this.scale = options.scale || "medium";
+        this.scale = options.scale || 'medium';
         this.margin = options.margin || 24;
     }
 }
 
 
 export {$3d424c147206bac9$export$64943d2e59d72a29 as BaseLayout};
-//# sourceMappingURL=BaseLayout.mjs.map
+//# sourceMappingURL=BaseLayout.module.js.map

package/dist/BaseLayout.module.js

@@ -20,8 +20,8 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
         // 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");
+            if (!this.isLoading) this.layoutInfos.delete('loader');
+            if (this.collection.size > 0) this.layoutInfos.delete('placeholder');
         }
         this.lastCollection = this.collection;
     }
@@ -43,12 +43,12 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
     }
     getInitialLayoutInfo(layoutInfo) {
         layoutInfo.opacity = 0;
-        layoutInfo.transform = "scale3d(0.8, 0.8, 0.8)";
+        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)";
+        layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
         return layoutInfo;
     }
     _findClosestLayoutInfo(target, rect) {
@@ -56,7 +56,7 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
         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") {
+        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;
@@ -95,25 +95,25 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
     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);
+        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, $1JdnP$getFirstItem)((0, $1JdnP$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
-            key = this.direction === "rtl" ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
+            if (item.type === 'item') return (_getFirstItem = (0, $1JdnP$getFirstItem)((0, $1JdnP$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);
+        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, $1JdnP$getFirstItem)((0, $1JdnP$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
-            key = this.direction === "rtl" ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
+            if (item.type === 'item') return (_getFirstItem = (0, $1JdnP$getFirstItem)((0, $1JdnP$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() {
@@ -203,7 +203,7 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $1JdnP$Layout) {
         this.layoutInfos = new Map();
         this.collator = options.collator;
         this.lastCollection = null;
-        this.scale = options.scale || "medium";
+        this.scale = options.scale || 'medium';
         this.margin = options.margin || 24;
     }
 }

package/dist/Card.main.js

@@ -37,10 +37,10 @@ let $6b630ac4b78ba7f3$var$Card = /*#__PURE__*/ (0, $495a5$react.forwardRef)((pro
 $6b630ac4b78ba7f3$var$Card.getCollectionNode = function* getCollectionNode(props) {
     let { children: children, textValue: textValue } = props;
     yield {
-        type: "item",
+        type: 'item',
         props: props,
         rendered: children,
-        "aria-label": props["aria-label"],
+        'aria-label': props['aria-label'],
         hasChildNodes: false,
         textValue: textValue
     };

package/dist/Card.mjs

@@ -27,10 +27,10 @@ let $d2d1c099b89e366a$var$Card = /*#__PURE__*/ (0, $kaPls$forwardRef)((props, re
 $d2d1c099b89e366a$var$Card.getCollectionNode = function* getCollectionNode(props) {
     let { children: children, textValue: textValue } = props;
     yield {
-        type: "item",
+        type: 'item',
         props: props,
         rendered: children,
-        "aria-label": props["aria-label"],
+        'aria-label': props['aria-label'],
         hasChildNodes: false,
         textValue: textValue
     };
@@ -39,4 +39,4 @@ let $d2d1c099b89e366a$export$60332b2344f7fe41 = $d2d1c099b89e366a$var$Card;
 
 
 export {$d2d1c099b89e366a$export$60332b2344f7fe41 as Card};
-//# sourceMappingURL=Card.mjs.map
+//# sourceMappingURL=Card.module.js.map

package/dist/Card.module.js

@@ -27,10 +27,10 @@ let $d2d1c099b89e366a$var$Card = /*#__PURE__*/ (0, $kaPls$forwardRef)((props, re
 $d2d1c099b89e366a$var$Card.getCollectionNode = function* getCollectionNode(props) {
     let { children: children, textValue: textValue } = props;
     yield {
-        type: "item",
+        type: 'item',
         props: props,
         rendered: children,
-        "aria-label": props["aria-label"],
+        'aria-label': props['aria-label'],
         hasChildNodes: false,
         textValue: textValue
     };

package/dist/CardBase.main.js

@@ -43,7 +43,7 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
     let context = (0, $e57ab98cef2f01a5$exports.useCardViewContext)() || {}; // 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 { 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);
@@ -55,7 +55,7 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
     let checkboxRef = (0, $1rjnI$react.useRef)(null);
     // cards are only interactive if there is a selection manager and it allows selection
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $1rjnI$reactariainteractions.useHover)({
-        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
+        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
     });
     let [isFocused, setIsFocused] = (0, $1rjnI$react.useState)(false);
     let { focusWithinProps: focusWithinProps } = (0, $1rjnI$reactariainteractions.useFocusWithin)({
@@ -63,13 +63,13 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
         isDisabled: isDisabled
     });
     // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
-    let hasPreviewImage = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))["spectrum-Card-image"]}`, gridRef);
-    let hasPreviewIllustration = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))["spectrum-Card-illustration"]}`, gridRef);
+    let hasPreviewImage = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))['spectrum-Card-image']}`, gridRef);
+    let hasPreviewIllustration = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))['spectrum-Card-illustration']}`, gridRef);
     let hasPreview = hasPreviewImage || hasPreviewIllustration;
     // this is for horizontal cards
     let [height, setHeight] = (0, $1rjnI$react.useState)(NaN);
     let updateHeight = (0, $1rjnI$react.useCallback)(()=>{
-        if (orientation !== "horizontal") return;
+        if (orientation !== 'horizontal') return;
         let cardHeight = gridRef.current.getBoundingClientRect().height;
         setHeight(cardHeight);
     }, [
@@ -82,35 +82,35 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
         onResize: updateHeight
     });
     let aspectRatioEnforce = undefined;
-    if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
+    if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
         height: `${height}px`,
         width: `${height}px`
     };
     let slots = (0, $1rjnI$react.useMemo)(()=>({
             image: {
-                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-image"),
-                objectFit: orientation === "horizontal" ? "cover" : "contain",
-                alt: "",
+                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-image'),
+                objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
+                alt: '',
                 ...aspectRatioEnforce
             },
             illustration: {
-                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-illustration"),
+                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-illustration'),
                 ...aspectRatioEnforce
             },
             avatar: {
-                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-avatar"),
-                size: "avatar-size-400"
+                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-avatar'),
+                size: 'avatar-size-400'
             },
             heading: {
-                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-heading"),
+                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-heading'),
                 ...titleProps
             },
             content: {
-                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-content"),
+                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-content'),
                 ...contentProps
             },
             detail: {
-                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-detail")
+                UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-detail')
             }
         }), [
         titleProps,
@@ -125,7 +125,7 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
             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.");
+                    console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
                     break;
                 }
                 nextNode = walker.nextNode();
@@ -135,42 +135,42 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
         children
     ]);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactariafocus.FocusRing), {
-        focusRingClass: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "focus-ring")
+        focusRingClass: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'focus-ring')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("article", {
         ...styleProps,
         ...(0, $1rjnI$reactariautils.mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $1rjnI$reactariautils.filterDOMProps)(props), articleProps),
         ref: domRef,
-        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($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"
+        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($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__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
         ref: gridRef,
-        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-grid")
-    }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
-        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-checkboxWrapper")
+        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-grid')
+    }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
+        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-checkboxWrapper')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactspectrumcheckbox.Checkbox), {
         ref: checkboxRef,
         isDisabled: isDisabled,
         excludeFromTabOrder: true,
         isSelected: isSelected,
         onChange: onChange,
-        UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-checkbox"),
+        UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-checkbox'),
         isEmphasized: true,
         "aria-label": "select"
     })), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactspectrumutils.SlotProvider), {
         slots: slots
     }, children), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
-        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-decoration")
+        className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-decoration')
     }))));
 }
 function $7888205ff7de382f$var$useCard(props) {
@@ -189,8 +189,8 @@ function $7888205ff7de382f$var$useCard(props) {
     return {
         cardProps: {
             ...(0, $1rjnI$reactariautils.filterDOMProps)(props),
-            "aria-labelledby": titleId,
-            "aria-describedby": descriptionId,
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
             tabIndex: 0
         },
         titleProps: titleProps,

package/dist/CardBase.mjs

@@ -37,7 +37,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
     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 { 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);
@@ -49,7 +49,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
     let checkboxRef = (0, $8eFIe$useRef)(null);
     // cards are only interactive if there is a selection manager and it allows selection
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
-        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
+        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
     });
     let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
     let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
@@ -57,13 +57,13 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
         isDisabled: isDisabled
     });
     // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
-    let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-image"]}`, gridRef);
-    let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-illustration"]}`, gridRef);
+    let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-image']}`, gridRef);
+    let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-illustration']}`, gridRef);
     let hasPreview = hasPreviewImage || hasPreviewIllustration;
     // this is for horizontal cards
     let [height, setHeight] = (0, $8eFIe$useState)(NaN);
     let updateHeight = (0, $8eFIe$useCallback)(()=>{
-        if (orientation !== "horizontal") return;
+        if (orientation !== 'horizontal') return;
         let cardHeight = gridRef.current.getBoundingClientRect().height;
         setHeight(cardHeight);
     }, [
@@ -76,35 +76,35 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
         onResize: updateHeight
     });
     let aspectRatioEnforce = undefined;
-    if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
+    if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
         height: `${height}px`,
         width: `${height}px`
     };
     let slots = (0, $8eFIe$useMemo)(()=>({
             image: {
-                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-image"),
-                objectFit: orientation === "horizontal" ? "cover" : "contain",
-                alt: "",
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-image'),
+                objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
+                alt: '',
                 ...aspectRatioEnforce
             },
             illustration: {
-                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-illustration"),
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-illustration'),
                 ...aspectRatioEnforce
             },
             avatar: {
-                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-avatar"),
-                size: "avatar-size-400"
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-avatar'),
+                size: 'avatar-size-400'
             },
             heading: {
-                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-heading"),
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-heading'),
                 ...titleProps
             },
             content: {
-                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-content"),
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-content'),
                 ...contentProps
             },
             detail: {
-                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-detail")
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-detail')
             }
         }), [
         titleProps,
@@ -119,7 +119,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
             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.");
+                    console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
                     break;
                 }
                 nextNode = walker.nextNode();
@@ -129,42 +129,42 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
         children
     ]);
     return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
-        focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "focus-ring")
+        focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'focus-ring')
     }, /*#__PURE__*/ (0, $8eFIe$react).createElement("article", {
         ...styleProps,
         ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
         ref: domRef,
-        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "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"
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), '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, $8eFIe$react).createElement("div", {
         ref: gridRef,
-        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-grid")
-    }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
-        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkboxWrapper")
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-grid')
+    }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkboxWrapper')
     }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
         ref: checkboxRef,
         isDisabled: isDisabled,
         excludeFromTabOrder: true,
         isSelected: isSelected,
         onChange: onChange,
-        UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkbox"),
+        UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkbox'),
         isEmphasized: true,
         "aria-label": "select"
     })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
         slots: slots
     }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
-        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-decoration")
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
     }))));
 }
 function $643dd8fa80926f94$var$useCard(props) {
@@ -183,8 +183,8 @@ function $643dd8fa80926f94$var$useCard(props) {
     return {
         cardProps: {
             ...(0, $8eFIe$filterDOMProps)(props),
-            "aria-labelledby": titleId,
-            "aria-describedby": descriptionId,
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
             tabIndex: 0
         },
         titleProps: titleProps,
@@ -197,4 +197,4 @@ function $643dd8fa80926f94$var$useCard(props) {
 
 
 export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
-//# sourceMappingURL=CardBase.mjs.map
+//# sourceMappingURL=CardBase.module.js.map