@react-spectrum/card 3.0.0-alpha.0 → 3.0.0-alpha.4

package/src/GalleryLayout.tsx

@@ -30,7 +30,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
   itemSpacing?: Size,
   /**
    * The vertical padding for an item.
-   * @default 114
+   * @default 78
    */
   itemPadding?: number,
   /**
@@ -43,22 +43,14 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
    * will be targeted.
    * @type {number}
    */
-  threshold?: number,
-  /**
-   * The margin around the grid view between the edges and the items.
-   * @default 24
-   */
-  margin?: number // TODO: Perhaps should accept Responsive<DimensionValue>
+  threshold?: number
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const DEFAULT_OPTIONS = {
   S: {
     idealRowHeight: 112,
     minItemSize: new Size(96, 96),
     itemSpacing: new Size(8, 16),
-    // TODO: will need to update as well
     itemPadding: 24,
     dropSpacing: 50,
     margin: 8
@@ -67,8 +59,10 @@ const DEFAULT_OPTIONS = {
     idealRowHeight: 208,
     minItemSize: new Size(136, 136),
     itemSpacing: new Size(18, 18),
-    // TODO: updated to work with new v3 cards (there is additional space required for the descriptions if there is a description)
-    itemPadding: 114,
+    itemPadding: {
+      'medium': 78,
+      'large': 99
+    },
     dropSpacing: 100,
     margin: 24
   }
@@ -76,7 +70,6 @@ const DEFAULT_OPTIONS = {
 
 export class GalleryLayout<T> extends BaseLayout<T> {
   protected idealRowHeight: number;
-  protected margin: number;
   protected itemSpacing: Size;
   itemPadding: number;
   protected minItemSize: Size;
@@ -84,11 +77,10 @@ export class GalleryLayout<T> extends BaseLayout<T> {
 
   constructor(options: GalleryLayoutOptions = {}) {
     super(options);
-    // TODO: restore cardSize option when we support different size cards
     let cardSize = 'L';
     this.idealRowHeight = options.idealRowHeight || DEFAULT_OPTIONS[cardSize].idealRowHeight;
     this.itemSpacing = options.itemSpacing || DEFAULT_OPTIONS[cardSize].itemSpacing;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
     this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;
     this.threshold = options.threshold || 1;
     this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;
@@ -146,104 +138,107 @@ export class GalleryLayout<T> extends BaseLayout<T> {
     let y = this.margin;
     let availableWidth = visibleWidth - this.margin * 2;
 
-    // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
-    let ratios = [];
-    let totalWidth = 0;
-    let minRatio = this.minItemSize.width / this.minItemSize.height;
-    let maxRatio = availableWidth / this.minItemSize.height;
-
-    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;
+    // 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;
       }
 
-      let itemWidth = ratio * this.minItemSize.height;
-      ratios.push(ratio);
-      totalWidth += itemWidth;
-    }
+      totalWidth += this.itemSpacing.width * (this.collection.size - 1);
 
-    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;
+      }
 
-    // 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 = linearPartition(weightedRatios, rows);
 
-    let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);
-    let partition = 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];
+        }
 
-    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;
 
-      // Determine the row height based on the total available width and weight of this row.
-      let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
+        // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
+        // probably doing this because if the last row has one extremely tall image, then the row becomes huge
+        // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
+        if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
+          bestRowHeight = this.idealRowHeight;
+        }
+        let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
+        let x = this.margin;
+
+        // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
+        let widths = [];
+        for (let j = index; j < index + row.length; j++) {
+          let width = Math.round(bestRowHeight * ratios[j]);
+          widths.push([j - index, width]);
+        }
+        this._distributeWidths(widths);
+
+        // Create items for this row.
+        for (let j = index; j < index + row.length; j++) {
+          let node = this.collection.rows[j];
+          let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);
+          let rect = new Rect(x, y, itemWidth, itemHeight);
+          let layoutInfo = new LayoutInfo(node.type, node.key, rect);
+          layoutInfo.allowOverflow = true;
+          this.layoutInfos.set(node.key, layoutInfo);
+          x += itemWidth + this.itemSpacing.width;
+        }
 
-      // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
-      // probably doing this because if the last row has one extremely tall image, then the row becomes huge
-      // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
-      if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
-        bestRowHeight = this.idealRowHeight;
-      }
-      let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
-      let x = this.margin;
-
-      // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
-      let widths = [];
-      for (let j = index; j < index + row.length; j++) {
-        let width = Math.round(bestRowHeight * ratios[j]);
-        widths.push([j - index, width]);
-      }
-      this._distributeWidths(widths);
-
-      // Create items for this row.
-      for (let j = index; j < index + row.length; j++) {
-        let node = this.collection.rows[j];
-        let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);
-        let rect = new Rect(x, y, itemWidth, itemHeight);
-        let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-        this.layoutInfos.set(node.key, layoutInfo);
-        x += itemWidth + this.itemSpacing.width;
+        y += itemHeight + this.itemSpacing.height;
+        index += row.length;
       }
 
-      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;
+        }
 
-    if (this.isLoading) {
-      let loaderY = y;
-      let loaderHeight = 60;
-      // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
-      // so it doesn't scroll
-      if (this.collection.size === 0) {
-        loaderY = 0;
-        loaderHeight = visibleHeight || 60;
+        let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
+        let loader = new LayoutInfo('loader', 'loader', rect);
+        this.layoutInfos.set('loader', loader);
+        y = loader.rect.maxY;
       }
 
-      let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      y = loader.rect.maxY;
-    }
-
-    if (this.collection.size === 0 && !this.isLoading) {
-      let rect = new Rect(0, 0, visibleWidth, visibleHeight);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      y = placeholder.rect.maxY;
+      if (this.collection.size === 0 && !this.isLoading) {
+        let rect = new Rect(0, 0, visibleWidth, visibleHeight);
+        let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
+        this.layoutInfos.set('placeholder', placeholder);
+        y = placeholder.rect.maxY;
+      }
     }
-
     this.contentSize = new Size(visibleWidth, y);
   }
 }

package/src/GridLayout.tsx

@@ -13,7 +13,7 @@
 import {BaseLayout, BaseLayoutOptions} from './BaseLayout';
 import {Key} from 'react';
 import {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Node} from '@react-types/shared';
+import {Node, Orientation} from '@react-types/shared';
 
 export interface GridLayoutOptions extends BaseLayoutOptions {
   // /**
@@ -22,7 +22,7 @@ export interface GridLayoutOptions extends BaseLayoutOptions {
   // cardSize?: 'S' | 'M' | 'L',
   /**
    * The minimum item size.
-   * @default 208 x 208
+   * @default 208 x 208 for horizontal card orientation. 102 x 102 for vertical card orientation.
    */
   minItemSize?: Size,
   /**
@@ -30,11 +30,6 @@ export interface GridLayoutOptions extends BaseLayoutOptions {
    * @default Infinity
    */
   maxItemSize?: Size,
-  /**
-   * The margin around the grid view between the edges and the items.
-   * @default 24
-   */
-  margin?: number, // TODO: Perhaps should accept Responsive<DimensionValue>
   /**
    * The minimum space required between items.
    * @default 18 x 18
@@ -46,18 +41,23 @@ export interface GridLayoutOptions extends BaseLayoutOptions {
    */
   maxColumns?: number,
   /**
-   * The vertical padding for an item.
+   * The additional padding along the card's main axis. Affects the sizing of the content area following the card image.
    * @default 95
    */
-  itemPadding?: number
+  itemPadding?: number,
+  /**
+   * The orientation of the cards withn the grid.
+   * @default vertical
+   */
+  cardOrientation?: Orientation
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const DEFAULT_OPTIONS = {
   S: {
     itemPadding: 20,
-    minItemSize: new Size(96, 96),
+    minItemSize: {
+      'vertical': new Size(96, 96)
+    },
     maxItemSize: new Size(Infinity, Infinity),
     margin: 8,
     minSpace: new Size(6, 6),
@@ -65,10 +65,20 @@ const DEFAULT_OPTIONS = {
     dropSpacing: 50
   },
   L: {
-    // TODO: for now bumping this higher since the new cards have more stuff in the content area.
-    // Will need to ask Spectrum what these values should be. Used to be 52. Do the same for S above
-    itemPadding: 95,
-    minItemSize: new Size(208, 208),
+    itemPadding: {
+      'vertical': {
+        'medium': 78,
+        'large': 98
+      },
+      'horizontal': {
+        'medium': 150,
+        'large': 170
+      }
+    },
+    minItemSize: {
+      'vertical': new Size(208, 208),
+      'horizontal': new Size(102, 102)
+    },
     maxItemSize: new Size(Infinity, Infinity),
     margin: 24,
     minSpace: new Size(18, 18),
@@ -80,10 +90,10 @@ const DEFAULT_OPTIONS = {
 export class GridLayout<T> extends BaseLayout<T> {
   protected minItemSize: Size;
   protected maxItemSize: Size;
-  protected margin: number;
   protected minSpace: Size;
   protected maxColumns: number;
   itemPadding: number;
+  cardOrientation: Orientation;
   protected itemSize: Size;
   protected numColumns: number;
   protected numRows: number;
@@ -91,14 +101,14 @@ export class GridLayout<T> extends BaseLayout<T> {
 
   constructor(options: GridLayoutOptions = {}) {
     super(options);
-    // TODO: restore cardSize option when we support different size cards
     let cardSize = 'L';
-    this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;
+    this.cardOrientation = options.cardOrientation || 'vertical';
+    this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
     this.maxItemSize = options.maxItemSize || DEFAULT_OPTIONS[cardSize].maxItemSize;
     this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;
     this.minSpace = options.minSpace || DEFAULT_OPTIONS[cardSize].minSpace;
     this.maxColumns = options.maxColumns || DEFAULT_OPTIONS[cardSize].maxColumns;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
     this.itemSize = null;
     this.numColumns = 0;
     this.numRows = 0;
@@ -109,7 +119,6 @@ export class GridLayout<T> extends BaseLayout<T> {
     return 'grid';
   }
 
-  // TODO: Below functions From V2 Maybe don't need this? Might be a short cut for getting all visible rects since otherwise we'd have to iterate across all nodes
   getIndexAtPoint(x, y, allowInsertingAtEnd = false) {
     let itemHeight = this.itemSize.height + this.minSpace.height;
     let itemWidth = this.itemSize.width + this.horizontalSpacing;
@@ -141,7 +150,7 @@ export class GridLayout<T> extends BaseLayout<T> {
       for (let index = firstVisibleItem; index <= lastVisibleItem; index++) {
         let keyFromIndex = this.collection.rows[index].key;
         let layoutInfo = this.layoutInfos.get(keyFromIndex);
-        if (this.isVisible(layoutInfo, rect)) {
+        if (layoutInfo && this.isVisible(layoutInfo, rect)) {
           res.push(layoutInfo);
         }
       }
@@ -159,10 +168,13 @@ export class GridLayout<T> extends BaseLayout<T> {
   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) / (this.minItemSize.width + this.minSpace.width));
+    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);
 
@@ -171,13 +183,11 @@ export class GridLayout<T> extends BaseLayout<T> {
 
     // Compute the item width based on the space available
     let itemWidth = Math.floor(width / this.numColumns);
-    itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));
-
+    itemWidth = Math.max(minCardWidth, Math.min(this.maxItemSize.width, itemWidth));
     // Compute the item height, which is proportional to the item width
-    let t = ((itemWidth - this.minItemSize.width) / this.minItemSize.width);
-    let itemHeight = this.minItemSize.height + this.minItemSize.height * t;
-    itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + this.itemPadding;
-
+    let t = ((itemWidth - minCardWidth) / minCardWidth);
+    let itemHeight = Math.floor(this.minItemSize.height + this.minItemSize.height * t);
+    itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + verticalItemPadding;
     this.itemSize = new Size(itemWidth, itemHeight);
 
     // Compute the horizontal spacing and content height
@@ -226,6 +236,7 @@ export class GridLayout<T> extends BaseLayout<T> {
     let rect = new Rect(x, y, this.itemSize.width, this.itemSize.height);
     // TODO: Perhaps have it so that the child key for each row is stored with the layoutInfo?
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
+    layoutInfo.allowOverflow = true;
     this.layoutInfos.set(node.key, layoutInfo);
     return layoutInfo;
   }

package/src/WaterfallLayout.tsx

@@ -26,11 +26,6 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
    * @default Infinity
    */
   maxItemSize?: Size,
-  /**
-   * The margin around the grid view between the edges and the items.
-   * @default 24
-   */
-  margin?: number, // TODO: Perhaps should accept Responsive<DimensionValue>
   /**
    * The minimum space required between items.
    * @default 18 x 18
@@ -40,22 +35,15 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
    * The maximum number of columns.
    * @default Infinity
    */
-  maxColumns?: number,
-  /**
-   * The vertical padding for an item.
-   * @default 56
-   */
-  itemPadding?: number
+  maxColumns?: number
 }
 
 // TODO: this didn't have any options that varied with card size, should it have?
 export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {
   protected minItemSize: Size;
   protected maxItemSize: Size;
-  protected margin: number;
   protected minSpace: Size;
   protected maxColumns: number;
-  itemPadding: number;
   protected numColumns: number;
   protected itemWidth: number;
   protected horizontalSpacing: number;
@@ -69,8 +57,6 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     this.margin = options.margin != null ? options.margin : 24;
     this.minSpace = options.minSpace || new Size(18, 18);
     this.maxColumns = options.maxColumns || Infinity;
-    // TODO: not entirely sure what this is for since the layout will automatically shift itself to the correct vertical space for the card
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : 56;
 
     this.itemWidth = 0;
     this.numColumns = 0;
@@ -119,8 +105,8 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       } else if (node.props.width && node.props.height) {
         let nodeWidth = node.props.width;
         let nodeHeight = node.props.height;
-        let scaledHeight = Math.round(nodeWidth * ((itemWidth) / nodeHeight));
-        height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight)) + this.itemPadding;
+        let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));
+        height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));
       } else {
         height = itemWidth;
       }
@@ -133,6 +119,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       let rect = new Rect(x, y, itemWidth, height);
       let layoutInfo = new LayoutInfo(node.type, key, rect);
       layoutInfo.estimatedSize = estimatedSize;
+      layoutInfo.allowOverflow = true;
       this.layoutInfos.set(key, layoutInfo);
 
       // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?
@@ -185,10 +172,9 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       // 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;
+      newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;
+      newLayoutInfo.estimatedSize = false;
       this.layoutInfos.set(key, newLayoutInfo);
-      // TODO: v2 had layoutInfo.estimatedSize = view.estimatedSize || false; but we can't do the same here?
-      layoutInfo.estimatedSize = false;
       return true;
     }
 

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["./node_modules/@adobe/spectrum-css-temp/components/card/index.css","./node_modules/@adobe/spectrum-css-temp/components/card/skin.css","./packages/@react-spectrum/card/src/cardview.css"],"sourcesContent":["/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n\n/**\nLAYERS: There are 5 layers to quiet cards\nlayer -1:\n  card back color, seen mostly in quiet cards in a grid\n\nlayer default:\n  all content provided by the user\n\nlayer 1:\n  avatar\n\nlayer 2:\n  color covering\n\nlayer 3:\n  checkbox\n*/\n/**\nLAYERS: There are 4 layers to standard/horizontal cards\nno -1 layer because standard cards have a background already\nlayer default:\n  all content provided by the user\n\nlayer 1:\n  avatar\n\nlayer 2:\n  color covering\n\nlayer 3:\n  checkbox\n*/\n\n/**\nLAYOUTS\n                       standard-vertical      standard-horizontal       quiet-vertical\nvertical-masonry       x                      no                        x\nhorizontal-masonry     no                     no                        x\ntiles                  x                      x                         x\nstandalone             x                      x                         x\n\nStandard Vertical\n.spectrum-Card--waterfall\n.spectrum-Card--tile\n.spectrum-Card--noLayout\n\nStandard Horizontal\n.spectrum-Card--tile\n.spectrum-Card--noLayout\n\nQuiet Vertical\n.spectrum-Card--waterfall\n.spectrum-Card--gallery\n.spectrum-Card--tile\n.spectrum-Card--noLayout\n*/\n\n/**\nELEMENTS\n.spectrum-Card\n.spectrum-Card:before element in standard cards for border/focus\n.spectrum-Card:after element in standard cards for selection overlay\n.spectrum-Card-grid element defining the css grid that everything is laid out on\n.spectrum-Card-grid:before element in the grid used to enforce aspect ratio in quiet cards\n.spectrum-Card-grid:after element in the grid used to decorate with focus ring (required on just the image part in quiet cards)\n.spectrum-Card-grid .spectrum-Card-decoration extra element in the grid used to decorative features like the blue overlay just over the image in quiet cards\n.spectrum-Card-grid .spectrum-Card-sizeHelper extra element in the grid used to enforce aspect ratio in horizontal cards (can't use the before for this, see FF)\n.spectrum-Card-checkboxWrapper\n.spectrum-Card-checkbox\n\nuser-provided\n.spectrum-Card-image\n.spectrum-Card-illustration\n.spectrum-Card-avatar\n.spectrum-Card-heading\n.spectrum-Card-detail\n.spectrum-Card-actions\n.spectrum-Card-content\n.spectrum-Card-divider\n.spectrum-Card-footer\n */\n\n\n/** Shared **/\n.spectrum-Card {\n  box-sizing: border-box;\n  min-inline-size: var(--spectrum-card-body-header-height);;\n  block-size: 100%;\n  border-radius: var(--spectrum-card-border-radius);\n\n  user-select: none;\n  text-decoration: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  .spectrum-Card-heading {\n    margin: 0;\n  }\n  .spectrum-Card-checkboxWrapper {\n    position: absolute;\n    inset-inline-start: var(--spectrum-card-checkbox-margin);\n    inset-block-start: var(--spectrum-card-checkbox-margin);\n    display: grid;\n    inline-size: var(--spectrum-quickactions-height);\n    block-size: var(--spectrum-quickactions-height);\n    border-radius: var(--spectrum-card-quiet-border-radius);\n    visibility: hidden;\n  }\n  .spectrum-Card-checkbox {\n    /* make hitbox of checkbox same as the floating background it sits on, top and bottom are computing 0 right now though\n     using calc(50% - var(--spectrum-checkbox-height) - calc(var(--spectrum-checkbox-box-size) / 2))\n     */\n    padding: 4px\n      calc(50% - calc(var(--spectrum-checkbox-box-size) / 2))\n      4px\n      calc(50% - calc(var(--spectrum-checkbox-box-size) / 2));\n  }\n\n  &.is-focused,\n  &.is-selected,\n  &.focus-ring, /* only for visible focus */\n  &:hover {\n    .spectrum-Card-checkboxWrapper {\n      /* Ideally, this would simply apply is-open to the QuickActions component */\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n  }\n}\n\n.spectrum-Card-grid {\n  position: relative;\n  &:before {\n\n  }\n  &:after,\n  .spectrum-Card-decoration{\n    pointer-events: none;\n  }\n}\n\n.spectrum-Card-image {\n  grid-area: preview;\n  & img {\n    -webkit-user-drag: none;\n    user-drag: none;\n  }\n}\n.spectrum-Card-illustration {\n  grid-area: preview;\n  & svg {\n    -webkit-user-drag: none;\n    user-drag: none;\n  }\n}\n.spectrum-Card-avatar {\n  grid-area: avatar;\n  z-index: 1;\n}\n.spectrum-Card-heading {\n  grid-area: title;\n  word-break: break-word;\n}\n.spectrum-Card-detail {\n  grid-area: detail;\n  word-break: break-word;\n}\n.spectrum-Card-actions {\n  grid-area: actionmenu;\n  align-self: start;\n}\n.spectrum-Card-content {\n  grid-area: content;\n  word-break: break-word;\n  overflow: hidden;\n}\n.spectrum-Card-divider {\n  grid-area: divider;\n}\n.spectrum-Card-footer {\n  grid-area: footer;\n}\n.spectrum-Card-decoration {\n  display: none;\n}\n\n/** Standard Vertical **/\n/** Waterfall **/\n.spectrum-Card--waterfall.spectrum-Card--default {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  &:after {\n    z-index: 2;\n    pointer-events: none;\n  }\n  position: relative;\n  border-width: var(--spectrum-card-border-size);\n  border-style: solid;\n  border-radius: var(--spectrum-card-border-radius);\n\n  &:before {\n    content: ' ';\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    border-radius: var(--spectrum-card-border-radius);\n  }\n\n  &:after {\n    content: ' ';\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    border-radius: var(--spectrum-card-border-radius);\n  }\n\n  .spectrum-Card-grid {\n    display: grid;\n    grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right);\n    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), auto) var(--spectrum-global-dimension-size-300) minmax(var(--spectrum-actionbutton-height), auto) 1fr auto auto var(--spectrum-card-body-padding-bottom);\n    /* absolutely position avatar relative to the preview */\n    grid-template-areas:\n      \"preview preview preview preview    preview\"\n      \".       .       .       .          .\"\n      \".       title   detail  actionmenu .\"\n      \".       content content content    .\"\n      \".       divider divider divider    .\"\n      \".       footer  footer  footer     .\"\n      \".       .       .       .          .\";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n      border-start-start-radius: var(--spectrum-card-border-radius);\n      border-start-end-radius: var(--spectrum-card-border-radius);\n    }\n  }\n\n  &.spectrum-Card--noPreview .spectrum-Card-grid {\n    display: grid;\n    grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right);\n    grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr auto auto var(--spectrum-card-body-padding-bottom);\n    /* absolutely position avatar relative to the preview */\n    grid-template-areas:\n      \".       .       .       .          .\"\n      \".       title   detail  actionmenu .\"\n      \".       content content content    .\"\n      \".       divider divider divider    .\"\n      \".       footer  footer  footer     .\"\n      \".       .       .       .          .\";\n\n    .spectrum-Card-avatar {\n      display: none;\n    }\n  }\n\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    inline-size: 100%;\n    block-size: 100%;\n\n    align-self: center;\n    justify-self: center;\n\n    border-block-end-width: var(--spectrum-card-border-size);\n    border-block-end-style: solid;\n    border-start-start-radius: var(--spectrum-card-border-radius);\n    border-start-end-radius: var(--spectrum-card-border-radius);\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n  }\n  .spectrum-Card-avatar {\n    grid-area: preview;\n    position: absolute;\n    inset-block-end: -10px;\n    inset-inline-start: var(--spectrum-card-body-padding-left);\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-divider {\n    margin-block-start: 5px;\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-footer {\n    margin-block-start: 5px;\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n\n/** Tile **/\n.spectrum-Card--grid.spectrum-Card--default {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  &:after {\n    z-index: 2;\n    pointer-events: none;\n  }\n  position: relative;\n  border-width: var(--spectrum-card-border-size);\n  border-style: solid;\n  border-radius: var(--spectrum-card-border-radius);\n\n  &:before {\n    content: ' ';\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    border-radius: var(--spectrum-card-border-radius);\n  }\n\n  &:after {\n    content: ' ';\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    border-radius: var(--spectrum-card-border-radius);\n  }\n\n  &:not(.spectrum-Card--noPreview) .spectrum-Card-grid {\n    display: grid;\n    block-size: 100%;\n    grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right);\n    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), 1fr) var(--spectrum-global-dimension-size-200) minmax(var(--spectrum-actionbutton-height), auto) auto auto auto var(--spectrum-card-body-padding-bottom);\n    /* absolutely position avatar relative to the preview */\n    grid-template-areas:\n      \"preview preview preview preview    preview\"\n      \".       .       .       .          .\"\n      \".       title   detail  actionmenu .\"\n      \".       content content content    .\"\n      \".       divider divider divider    .\"\n      \".       footer  footer  footer     .\"\n      \".       .       .       .          .\";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n      border-start-start-radius: var(--spectrum-card-border-radius);\n      border-start-end-radius: var(--spectrum-card-border-radius);\n    }\n  }\n\n  &.spectrum-Card--noPreview .spectrum-Card-grid {\n    display: grid;\n    block-size: 100%;\n    grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right);\n    grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr auto auto var(--spectrum-card-body-padding-bottom);\n    /* absolutely position avatar relative to the preview */\n    grid-template-areas:\n      \".       .       .       .          .\"\n      \".       title   detail  actionmenu .\"\n      \".       content content content    .\"\n      \".       divider divider divider    .\"\n      \".       footer  footer  footer     .\"\n      \".       .       .       .          .\";\n\n    .spectrum-Card-avatar {\n      display: none;\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    inline-size: 100%;\n    block-size: 100%;\n    /*min-inline-size: var(--spectrum-card-min-width); causes to obscure border */\n\n    align-self: center;\n    justify-self: center;\n\n    border-block-end-width: var(--spectrum-card-border-size);\n    border-block-end-style: solid;\n    border-start-start-radius: var(--spectrum-card-border-radius);\n    border-start-end-radius: var(--spectrum-card-border-radius);\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n  }\n  .spectrum-Card-avatar {\n    grid-area: preview;\n    position: absolute;\n    inset-block-end: -10px;\n    inset-inline-start: var(--spectrum-card-body-padding-left);\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .spectrum-Card-divider {\n    margin-block-start: 5px;\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-footer {\n    margin-block-start: 5px;\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n\n/** Standalone **/\n.spectrum-Card--noLayout.spectrum-Card--default {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  &:after {\n    z-index: 2;\n    pointer-events: none;\n  }\n  position: relative;\n  border-width: var(--spectrum-card-border-size);\n  border-style: solid;\n  border-radius: var(--spectrum-card-border-radius);\n\n  &:before {\n    content: ' ';\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    border-radius: var(--spectrum-card-border-radius);\n  }\n\n  &:after {\n    content: ' ';\n    inline-size: 100%;\n    block-size: 100%;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    border-radius: var(--spectrum-card-border-radius);\n  }\n\n  &:not(.spectrum-Card--noPreview) .spectrum-Card-grid {\n    display: grid;\n    grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right);\n    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), auto) var(--spectrum-global-dimension-size-300) minmax(var(--spectrum-actionbutton-height), auto) 1fr auto auto var(--spectrum-card-body-padding-bottom);\n    /* absolutely position avatar relative to the preview */\n    grid-template-areas:\n      \"preview preview preview preview    preview\"\n      \".       .       .       .          .\"\n      \".       title   detail  actionmenu .\"\n      \".       content content content    .\"\n      \".       divider divider divider    .\"\n      \".       footer  footer  footer     .\"\n      \".       .       .       .          .\";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n      border-start-start-radius: var(--spectrum-card-border-radius);\n      border-start-end-radius: var(--spectrum-card-border-radius);\n    }\n  }\n\n  &.spectrum-Card--noPreview .spectrum-Card-grid {\n    display: grid;\n    grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) 1fr minmax(0, auto) var(--spectrum-card-body-padding-right);\n    grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr auto auto var(--spectrum-card-body-padding-bottom);\n    /* absolutely position avatar relative to the preview */\n    grid-template-areas:\n      \".       .       .       .          .\"\n      \".       title   detail  actionmenu .\"\n      \".       content content content    .\"\n      \".       divider divider divider    .\"\n      \".       footer  footer  footer     .\"\n      \".       .       .       .          .\";\n\n    /* TODO: is this accurate? if we don't want to enforce it, then we can\n        give min-height to spectrum-Card-image/illustration\n        and it would no longer be a card state, we could simplify */\n    .spectrum-Card-avatar {\n      display: none;\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    inline-size: 100%;\n    block-size: 100%;\n    /*min-inline-size: var(--spectrum-card-min-width); causes to obscure border */\n\n    align-self: center;\n    justify-self: center;\n\n    border-block-end-width: var(--spectrum-card-border-size);\n    border-block-end-style: solid;\n    border-start-start-radius: var(--spectrum-card-border-radius);\n    border-start-end-radius: var(--spectrum-card-border-radius);\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n    inline-size: 100%;\n    block-size: var(--spectrum-card-coverphoto-height); /* this may be an incorrect assumption */\n  }\n  .spectrum-Card-avatar {\n    grid-area: preview;\n    position: absolute;\n    inset-block-end: -10px;\n    inset-inline-start: var(--spectrum-card-body-padding-left);\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-divider {\n    margin-block-start: 5px;\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-footer {\n    margin-block-start: 5px;\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n/** END Standard Vertical **/\n\n\n/** Quiet Vertical **/\n/** Waterfall **/\n.spectrum-Card--waterfall.spectrum-Card--isQuiet {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  .spectrum-Card-grid:before {\n    z-index: -1;\n  }\n  .spectrum-Card-grid:after {\n    z-index: 2;\n  }\n  min-inline-size: var(--spectrum-card-quiet-min-size);\n\n  .spectrum-Card-grid {\n    block-size: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, auto) minmax(30px, 1fr) minmax(0, auto);\n    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), auto) var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) 1fr var(--spectrum-card-body-padding-bottom);\n    grid-template-areas:\n      \"preview preview preview\"\n      \".       .       .\"\n      \"title   detail  actionmenu\"\n      \"content content content\"\n      \".       .       .      \";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n\n    &:after {\n      content: ' ';\n      grid-area: preview;\n      position: absolute;\n      inset-inline-start: 0;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);\n\n      border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap));\n    }\n    .spectrum-Card-decoration {\n      display: block;\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    block-size: 100%;\n    inline-size: 100%;\n    min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */\n\n    align-self: center;\n    justify-self: center;\n    border-radius: var(--spectrum-card-quiet-border-radius);\n  }\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n  }\n  .spectrum-Card-avatar {\n    display: none;\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-divider {\n    display: none;\n  }\n  .spectrum-Card-footer {\n    display: none;\n  }\n}\n\n/** Gallery **/\n/** Non-collection version doesn't work in FF, but should work in a collection which determines the size **/\n.spectrum-Card--gallery.spectrum-Card--isQuiet {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  .spectrum-Card-grid:before {\n    z-index: -1;\n  }\n  .spectrum-Card-grid:after {\n    z-index: 2;\n  }\n  min-inline-size: var(--spectrum-card-quiet-min-size);\n\n  .spectrum-Card-grid {\n    block-size: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, auto) minmax(30px, 1fr) minmax(0, auto);\n    grid-template-rows: 1fr var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) minmax(auto, var(--spectrum-global-dimension-size-600)) var(--spectrum-card-body-padding-bottom);\n    grid-template-areas:\n      \"preview preview preview\"\n      \".       .       .\"\n      \"title   detail  actionmenu\"\n      \"content content content\"\n      \".       .       .      \";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n\n    &:after {\n      content: ' ';\n      grid-area: preview;\n      position: absolute;\n      inset-inline-start: 0;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);\n\n      border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap));\n    }\n    .spectrum-Card-decoration {\n      display: block;\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    block-size: 100%;\n    inline-size: 100%;\n    min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */\n\n    align-self: center;\n    justify-self: center;\n    border-radius: var(--spectrum-card-quiet-border-radius);\n    > img {\n      width: unset;\n      margin: auto;\n    }\n  }\n\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n  }\n  .spectrum-Card-avatar {\n    display: none;\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .spectrum-Card-divider {\n    display: none;\n  }\n  .spectrum-Card-footer {\n    display: none;\n  }\n}\n\n/** Tile **/\n.spectrum-Card--grid.spectrum-Card--isQuiet {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  .spectrum-Card-grid:before {\n    z-index: -1;\n  }\n  .spectrum-Card-grid:after {\n    z-index: 2;\n  }\n  min-inline-size: var(--spectrum-card-quiet-min-size);\n\n  .spectrum-Card-grid {\n    block-size: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, auto) minmax(30px, 1fr) minmax(0, auto);\n    grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) 1fr var(--spectrum-card-body-padding-bottom);\n    grid-template-areas:\n      \"preview preview preview\"\n      \".       .       .\"\n      \"title   detail  actionmenu\"\n      \"content content content\"\n      \".       .       .      \";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n\n      /* aspect ratio 1:1 because padding-top is calculated from width */\n      inline-size: 0;\n      block-size: 0;\n      padding-top: 100%;\n      padding-left: 100%;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n\n    &:after {\n      content: ' ';\n      grid-area: preview;\n      position: absolute;\n      inset-inline-start: 0;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);\n\n      border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap));\n    }\n    .spectrum-Card-decoration {\n      display: block;\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n  }\n  &:not(.spectrum-Card--closeToSquare) .spectrum-Card-image,\n  &:not(.spectrum-Card--closeToSquare) .spectrum-Card-illustration {\n    box-sizing: border-box; /* so that 100% counts padding as well */\n    block-size: 100%;\n    inline-size: 100%;\n    min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */\n\n    align-self: center;\n    justify-self: center;\n  }\n  &.spectrum-Card--closeToSquare .spectrum-Card-image,\n  &.spectrum-Card--closeToSquare .spectrum-Card-illustration {\n    box-sizing: border-box; /* so that 100% counts padding as well */\n    padding: var(--spectrum-global-dimension-size-300);\n    block-size: 100%;\n    inline-size: 100%;\n    min-inline-size: 100%; /* I do not know why setting a min-width causes the image to shrink */\n\n    align-self: center;\n    justify-self: center;\n  }\n  .spectrum-Card-image {\n    clip-path: inset(0% 0% 0% 0% round var(--spectrum-card-quiet-border-radius));\n    /* remove from flow so it doesn't affect grid area size, this way the aspect ratio is maintained\n     todo: figure out why or how it's already in the correct centered spot */\n    position: absolute;\n  }\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n  }\n  .spectrum-Card-avatar {\n    display: none;\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .spectrum-Card-divider {\n    display: none;\n  }\n  .spectrum-Card-footer {\n    display: none;\n  }\n}\n\n/** Standalone **/\n.spectrum-Card--noLayout.spectrum-Card--isQuiet {\n  .spectrum-Card-checkboxWrapper {\n    z-index: 3;\n  }\n  .spectrum-Card-grid:before {\n    z-index: -1;\n  }\n  .spectrum-Card-grid:after {\n    z-index: 2;\n  }\n  min-inline-size: var(--spectrum-card-quiet-min-size);\n\n  .spectrum-Card-grid {\n    block-size: 100%;\n    display: grid;\n    grid-template-columns: minmax(0, auto) minmax(30px, 1fr) minmax(0, auto);\n    grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) auto var(--spectrum-card-body-padding-bottom);\n    grid-template-areas:\n      \"preview preview preview\"\n      \".       .       .\"\n      \"title   detail  actionmenu\"\n      \"content content content\"\n      \".       .       .      \";\n\n    &:before {\n      content: ' ';\n      grid-area: preview;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n\n    &:after {\n      content: ' ';\n      grid-area: preview;\n      position: absolute;\n      inset-inline-start: 0;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);\n      padding: calc(var(--spectrum-alias-focus-ring-gap) * 2);\n      background-clip: content-box;\n\n      border-radius: calc(var(--spectrum-card-quiet-border-radius) + var(--spectrum-alias-focus-ring-gap));\n    }\n    .spectrum-Card-decoration {\n      display: block;\n      grid-area: preview;\n      inline-size: 100%;\n      block-size: 100%;\n\n      border-radius: var(--spectrum-card-quiet-border-radius);\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    display: flex;\n\n    align-self: center;\n    justify-self: center;\n\n    border-radius: var(--spectrum-card-quiet-border-radius);\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-illustration {\n    display: grid; /* not sure why flex doesn't work here */\n    align-items: center;\n    justify-items: center;\n    inline-size: 100%;\n    block-size: var(--spectrum-card-coverphoto-height);\n  }\n  .spectrum-Card-avatar {\n    display: none;\n  }\n  .spectrum-Card-heading {\n    align-self: baseline;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    align-self: baseline;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    margin-block-end: 5px;\n  }\n  .spectrum-Card-divider {\n    display: none;\n  }\n  .spectrum-Card-footer {\n    display: none;\n  }\n}\n/** END Quiet Vertical **/\n\n/** Standard Horizontal **/\n/**\nBroken as a CSS only solution in Safari until aspect-ratio is supported https://caniuse.com/?search=aspect-ratio\nFor now working around it with a useLayoutEffect in CardBase.\n**/\n/** Tile **/\n.spectrum-Card--grid.spectrum-Card--horizontal {\n  .spectrum-Card-grid:after {\n    z-index: 2;\n  }\n  border-width: var(--spectrum-card-border-size);\n  border-style: solid;\n  border-radius: var(--spectrum-card-border-radius);\n  .spectrum-Card-checkboxWrapper {\n    display: none;\n  }\n  &.is-focused,\n  &.is-selected,\n  &:focus,\n  &:hover {\n    .spectrum-Card-checkboxWrapper {\n      display: none;\n    }\n  }\n\n  .spectrum-Card-grid {\n    display: grid;\n    block-size: 100%;\n    grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200);\n    grid-template-rows: auto 1fr var(--spectrum-global-dimension-size-200);\n    grid-template-areas:\n      \"preview . title   actionmenu .\"\n      \"preview . content content .\"\n      \"preview . .       .       .\";\n\n    &:before {\n      content: ' ';\n      position: absolute;\n\n      inline-size: 100%;\n      block-size: 100%;\n      border-radius: var(--spectrum-card-border-radius);\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    grid-area: preview;\n    block-size: 100%;\n    /*aspect-ratio: 1/1;*/ /* can't use in safari or FF :( */\n\n    align-self: center;\n    justify-self: center;\n\n    border-start-start-radius: var(--spectrum-card-border-radius);\n    border-end-start-radius: var(--spectrum-card-border-radius);\n    border-inline-end-width: var(--spectrum-card-border-size);\n    border-inline-end-style: solid;\n  }\n\n  .spectrum-Card-image {\n  }\n\n  .spectrum-Card-illustration {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n  }\n\n  .spectrum-Card-avatar {\n    display: none;\n  }\n  .spectrum-Card-heading {\n    align-self: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    display: none;\n  }\n  .spectrum-Card-actions {\n  }\n  /* how to handle long description?? */\n  .spectrum-Card-content {\n    width: 100%;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* not working because this line is removed in css preprocessing */\n    -webkit-box-orient: vertical;\n    visibility: visible;\n  }\n  .spectrum-Card-divider {\n    display: none;\n  }\n  .spectrum-Card-footer {\n    display: none;\n  }\n}\n\n/** Standalone **/\n.spectrum-Card--noLayout.spectrum-Card--horizontal {\n  .spectrum-Card-grid:after {\n    z-index: 2;\n  }\n  border-width: var(--spectrum-card-border-size);\n  border-style: solid;\n  border-radius: var(--spectrum-card-border-radius);\n  .spectrum-Card-checkboxWrapper {\n    display: none;\n  }\n  &.is-focused,\n  &.is-selected,\n  &:focus,\n  &:hover {\n    .spectrum-Card-checkboxWrapper {\n      display: none;\n    }\n  }\n\n  .spectrum-Card-grid {\n    position: relative;\n    display: grid;\n    block-size: 100%;\n    max-block-size: 100%;\n    grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200);\n    grid-template-rows: auto 1fr var(--spectrum-global-dimension-size-200);\n    grid-template-areas:\n      \"preview . title   actionmenu .\"\n      \"preview . content content .\"\n      \"preview . .       .       .\";\n\n    &:before {\n      content: ' ';\n      inline-size: 100%;\n      block-size: 100%;\n      position: absolute;\n      border-radius: var(--spectrum-card-border-radius);\n    }\n\n    &:after {\n      content: ' ';\n      inline-size: 100%;\n      block-size: 100%;\n      position: absolute;\n      border-radius: var(--spectrum-card-border-radius);\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    grid-area: preview;\n    block-size: 100%;\n    /*aspect-ratio: 1/1;*/ /* can't use in safari or FF :( */\n\n    align-self: center;\n    justify-self: center;\n\n    border-start-start-radius: var(--spectrum-card-border-radius);\n    border-end-start-radius: var(--spectrum-card-border-radius);\n    border-inline-end-width: var(--spectrum-card-border-size);\n    border-inline-end-style: solid;\n  }\n\n  .spectrum-Card-image {\n  }\n\n  .spectrum-Card-illustration {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n  }\n\n  .spectrum-Card-avatar {\n    display: none;\n  }\n  .spectrum-Card-heading {\n    align-self: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-inline-end: var(--spectrum-card-title-padding-right);\n  }\n  .spectrum-Card-detail {\n    display: none;\n  }\n  .spectrum-Card-actions {\n  }\n  /* how to handle long description?? */\n  .spectrum-Card-content {\n    width: 100%;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* not working because this line is removed in css preprocessing */\n    -webkit-box-orient: vertical;\n    visibility: visible;\n  }\n  .spectrum-Card-divider {\n    display: none;\n  }\n  .spectrum-Card-footer {\n    display: none;\n  }\n}\n/** END Standard Horizontal **/\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n.spectrum-Card {\n\n  &.is-drop-target {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n    background-color: var(--spectrum-alias-highlight-selected);\n  }\n\n   .spectrum-Card-checkboxWrapper {\n     background-color: var(--spectrum-quickactions-background-color);\n   }\n\n  .spectrum-Card-detail {\n    color: var(--spectrum-card-description-text-color);\n  }\n}\n\n.spectrum-Card-illustration {\n}\n.spectrum-Card-image {\n}\n.spectrum-Card-avatar {\n}\n.spectrum-Card-heading {\n  color: var(--spectrum-global-color-gray-900);\n}\n.spectrum-Card-detail {\n  color: var(--spectrum-global-color-gray-700);\n}\n.spectrum-Card-actions {\n}\n.spectrum-Card-content {\n  color: var(--spectrum-global-color-gray-700);\n}\n.spectrum-Card-divider {\n}\n.spectrum-Card-footer {\n}\n\n.spectrum-Card--default {\n  border-color: var(--spectrum-card-border-color);\n  background-color: var(--spectrum-card-background-color);\n\n  &:hover {\n    border-color: var(--spectrum-card-border-color-hover);\n    &:before {\n      box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover);\n    }\n  }\n\n  &.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    &:before {\n      /* Image needs to go right to the edge, so no border. Adding border on focus causes\n      * a jump in the text and image. So focus ring is only box-shadow\n      */\n      box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n    }\n  }\n\n  &:hover.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    &:before {\n      /* Image needs to go right to the edge, so no border. Adding border on focus causes\n      * a jump in the text and image. So focus ring is only box-shadow\n      */\n      box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n    }\n  }\n\n  &:focus-ring {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    &:before {\n      box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus);\n    }\n  }\n\n  &:focus-ring:hover.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    &:before {\n      box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus);\n    }\n  }\n\n  &.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    &:after {\n      background-color: var(--spectrum-global-color-blue-400);\n      opacity: 0.15;\n    }\n    &:hover {\n      border-color: var(--spectrum-card-border-color-key-focus);\n      &:after {\n        background-color: var(--spectrum-global-color-blue-400);\n        opacity: 0.25;\n      }\n    }\n  }\n  &:before {\n    transition: background-color var(--spectrum-global-animation-duration-100);\n  }\n  &:after {\n    transition: background-color var(--spectrum-global-animation-duration-100),\n                opacity var(--spectrum-global-animation-duration-100);\n    opacity: 0;\n  }\n  .spectrum-Card-grid {\n    &:before {\n      transition: background-color var(--spectrum-global-animation-duration-100);\n      background-color: var(--spectrum-card-quiet-preview-background-color);\n    }\n  }\n\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    border-block-end-color: var(--spectrum-card-coverphoto-border-color);\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-avatar {\n  }\n  .spectrum-Card-heading {\n  }\n  .spectrum-Card-detail {\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n    color: var(--spectrum-card-description-text-color);\n  }\n  .spectrum-Card-divider {\n  }\n  .spectrum-Card-footer {\n  }\n}\n\n.spectrum-Card--isQuiet {\n  border-color: transparent;\n  background-color: transparent;\n  &:hover {\n    .spectrum-Card-grid {\n      &:before {\n        background-color: var(--spectrum-card-quiet-preview-background-color-hover);\n        /* TODO do we still want this border on the image itself? */\n        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover);\n      }\n    }\n  }\n\n  &.is-selected {\n    .spectrum-Card-grid {\n      &:after {\n        /* Image needs to go right to the edge, so no border. Adding border on focus causes\n        * a jump in the text and image. So focus ring is only box-shadow\n        */\n        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &:hover.is-selected {\n    .spectrum-Card-grid {\n      &:after {\n        /* Image needs to go right to the edge, so no border. Adding border on focus causes\n        * a jump in the text and image. So focus ring is only box-shadow\n        */\n        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &:focus-ring {\n    .spectrum-Card-grid {\n      &:after {\n        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &:focus-ring:hover.is-selected {\n    .spectrum-Card-grid {\n      &:after {\n        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &.is-selected {\n    .spectrum-Card-grid {\n      .spectrum-Card-decoration {\n        opacity: 0.15;\n      }\n    }\n    &:hover {\n      .spectrum-Card-grid {\n        .spectrum-Card-decoration {\n          opacity: 0.25;\n        }\n      }\n    }\n  }\n\n  .spectrum-Card-grid {\n    &:before {\n      transition: background-color var(--spectrum-global-animation-duration-100);\n      background-color: var(--spectrum-card-quiet-preview-background-color);\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-avatar {\n  }\n  .spectrum-Card-heading {\n  }\n  .spectrum-Card-detail {\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n  }\n  .spectrum-Card-divider {\n  }\n  .spectrum-Card-footer {\n  }\n  .spectrum-Card-decoration {\n    transition: background-color var(--spectrum-global-animation-duration-100),\n                opacity var(--spectrum-global-animation-duration-100);\n    background-color: var(--spectrum-global-color-blue-400);\n    opacity: 0;\n  }\n}\n\n.spectrum-Card--horizontal {\n  border-color: var(--spectrum-card-border-color);\n  background-color: var(--spectrum-card-background-color);\n  &:hover {\n    border-color: var(--spectrum-card-border-color-hover);\n    .spectrum-Card-grid {\n      &:before {\n        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover);\n      }\n    }\n  }\n\n  &.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    .spectrum-Card-grid {\n      &:before {\n        /* Image needs to go right to the edge, so no border. Adding border on focus causes\n        * a jump in the text and image. So focus ring is only box-shadow\n        */\n        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &:hover.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    .spectrum-Card-grid {\n      &:before {\n        /* Image needs to go right to the edge, so no border. Adding border on focus causes\n        * a jump in the text and image. So focus ring is only box-shadow\n        */\n        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &:focus-ring {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    .spectrum-Card-grid {\n      &:before {\n        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &:focus-ring:hover.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    .spectrum-Card-grid {\n      &:before {\n        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus);\n      }\n    }\n  }\n\n  &.is-selected {\n    border-color: var(--spectrum-card-border-color-key-focus);\n    .spectrum-Card-grid {\n      &:after {\n        background-color: var(--spectrum-global-color-blue-400);\n        opacity: 0.15;\n      }\n    }\n    &:hover {\n      border-color: var(--spectrum-card-border-color-key-focus);\n      .spectrum-Card-grid {\n        &:after {\n          background-color: var(--spectrum-global-color-blue-400);\n          opacity: 0.25;\n        }\n      }\n    }\n  }\n\n  .spectrum-Card-grid {\n    &:after {\n      transition: background-color var(--spectrum-global-animation-duration-100),\n                  opacity var(--spectrum-global-animation-duration-100);\n      opacity: 0;\n    }\n  }\n  .spectrum-Card-image,\n  .spectrum-Card-illustration {\n    border-inline-end-color: var(--spectrum-card-coverphoto-border-color);\n  }\n  .spectrum-Card-image {\n  }\n  .spectrum-Card-illustration {\n  }\n  .spectrum-Card-avatar {\n  }\n  .spectrum-Card-heading {\n  }\n  .spectrum-Card-detail {\n  }\n  .spectrum-Card-actions {\n  }\n  .spectrum-Card-content {\n  }\n  .spectrum-Card-divider {\n  }\n  .spectrum-Card-footer {\n  }\n}\n",".react-spectrum-CardView-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.react-spectrum-CardView-CardWrapper {\n  overflow: visible !important;\n  contain: size layout style !important;\n}\n\n.react-spectrum-CardView {\n  outline: none;\n}\n"],"names":[],"version":3,"file":"main.css.map"}