@react-spectrum/list 3.8.2-nightly.5042 → 3.8.3

package/dist/{styles.d09a6cc6.css.map → styles.ad343ab0.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;AAiBE;;;;AAQM;;;;;AAQF;;;;;;;;;;AAeA;;;;AAEE;;;;AAKA;;;;AAKA;;;;;AAaE;;;;AAYA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAQA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUR;;;;;AAQJ;;;;AAII;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAgBJ;;;;;;AAQQ;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASR;;;;AAIA;;;;;;;;;;;;;AAaE;;;;AASA;;;;AAIA;;;;AAQE;;;;AAMA;;;;AAKF;;;;;AAMA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;AAOE;;;;;;AAUJ;;;;;;;AAQA;;;;;AAIE;;;;AAKF;;;;;;;;;;;;AAYE;;;;;AAMF;;;;;;;;AAWA;;;;;;AAOE;;;;AAKF;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;;;AAME;;;;AAKF;;;;;;;;AASE;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;;;;;AAQA;;;;AAGE;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBF;;;;AAUF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAKA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAME;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUA;;;;;AAIA;;;;AAMJ;;;;;;AAMA;;;;;;AAMA;;;;AAII;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMJ;;;;;;AAYA;;;;;;;AASE;;;;AAKF;;;;;;;;AAME;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;;;AAQE;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;AAoBJ;;;;;AAKA;;;;;AAUA;;;;;AAME;;;;;AAMF;EACE;;;;;;;;;;;;;;;;;;;EA0BM;;;;;;;EAUN;;;;EAGE","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\n  --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n  --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);\n  --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n  --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n  --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n  --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n  --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n  --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n  --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n  --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n  --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n  --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n  --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n  --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n  --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n  --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n  --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n  --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n  --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n  --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n  --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n  --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n  --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n  --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n  --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n  --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n  --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n  --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n  --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n  --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n  box-sizing: border-box;\n  border-color: var(--spectrum-listview-border-color);\n  border-style: solid;\n  position: relative;\n  border-width: var(--spectrum-listview-border-width);\n  border-radius: var(--spectrum-listview-border-radius);\n  overflow: auto;\n  vertical-align: var(--spectrum-table-cell-vertical-alignment);\n  border-collapse: separate;\n  border-spacing: 0;\n  transform: translate3d(0, 0, 0);\n  padding: 0;\n  background-color: var(--spectrum-listview-background-color);\n  outline: 0;\n  user-select: none;\n\n  .react-spectrum-ListView-row {\n    outline: none;\n  }\n\n  &.react-spectrum-ListView--emphasized {\n    &.react-spectrum-ListView--dropTarget {\n      .react-spectrum-ListViewItem:not(.is-selected) {\n        /* shift bottom border inwards so it doesn't overlap the root drop target */\n        &:after {\n          inset-inline-start: 1px;\n          inset-inline-end: 1px;\n        }\n      }\n    }\n    .react-spectrum-ListViewItem {\n      /* common pseudoelement for box shadows */\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        inset-inline-start: 0;\n        inset-inline-end: 0;\n        inset-block-end: 0;\n        inset-block-start: 0;\n        z-index: 3;\n        pointer-events: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n\n      &.is-selected {\n        background-color: var(--spectrum-listview-item-background-color-selected);\n        &.is-hovered,\n        &.is-active {\n          background-color: var(--spectrum-listview-item-background-color-selected-hover);\n        }\n\n        &:focus-visible {\n          background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n        }\n\n        /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n        &:after {\n          inset-block-start: -1px;\n          box-shadow:\n            inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n        }\n      }\n\n      /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n      &.react-spectrum-ListViewItem--firstRow {\n        &.is-selected {\n          &:after {\n            inset-block-start: 0px;\n          }\n        }\n      }\n    }\n\n    &:not(.react-spectrum-ListView--quiet) {\n      .react-spectrum-ListViewItem {\n        /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n        /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n        &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n          &:after {\n            box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n          }\n        }\n\n        &.react-spectrum-ListViewItem--firstRow.is-selected {\n          &:after {\n            border-start-start-radius: var(--spectrum-listview-item-border-radius);\n            border-start-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &:not(.react-spectrum-ListView--loadingMore) {\n        .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n          &:after {\n            border-end-start-radius: var(--spectrum-listview-item-border-radius);\n            border-end-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isVerticalScrollbarVisible {\n        .react-spectrum-ListViewItem {\n          &.react-spectrum-ListViewItem--firstRow.is-selected {\n            &:after {\n              border-start-end-radius: 0;\n            }\n          }\n        }\n\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-start-radius: 0;\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n    }\n  }\n  &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n    & .react-spectrum-ListViewItem-content,\n    & .react-spectrum-ListViewItem-description {\n      white-space: normal;\n      height: auto;\n    }\n  }\n}\n\n.react-spectrum-ListView-row {\n  cursor: default;\n  /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n  &:focus-visible {\n    &:before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n      z-index: 4;\n      background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n      /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n  background-color: var(--spectrum-listview-quiet-background-color);\n  border-width: 0;\n  border-radius: 0;\n\n  .react-spectrum-ListView-row {\n    &.round-tops {\n      &:focus-visible {\n        &:before {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n          border-start-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n\n    &.round-bottoms {\n      &:focus-visible {\n        &:before {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n          border-end-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n  }\n}\n\n.react-spectrum-ListView-row[data-href] {\n  cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n  display: grid; /* TODO: define grid areas */\n  box-sizing: border-box;\n  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n  line-height: var(--spectrum-listview-item-line-height);\n  padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n  position: relative;\n  /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n  color: var(--spectrum-listview-item-text-color);\n  outline: 0;\n  min-height: var(--spectrum-global-dimension-size-500);\n\n  &.is-hovered,\n  &.is-focused {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &:focus-visible {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &.is-active {\n    background-color: var(--spectrum-listview-item-background-color-down);\n  }\n\n  &.is-selected {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n\n    &.is-hovered,\n    &.is-active {\n      background-color: var(--spectrum-listview-item-background-color-hover);\n    }\n\n    &:focus-visible {\n      background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n    }\n  }\n\n  &.is-disabled {\n    &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n      color: var(--spectrum-listview-item-text-color-disabled);\n    }\n  }\n\n  &.has-checkbox {\n    /* have to eliminate vertical padding to allow proper vertical alignment */\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .react-spectrum-ListViewItem-grid {\n    display: grid;\n    grid-template-columns: auto auto auto 1fr auto auto auto;\n    grid-template-rows: 1fr auto;\n    grid-template-areas:\n      \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n      \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n    align-items: center;\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    grid-area: draghandle;\n    width: var(--spectrum-global-dimension-size-250);\n    display: flex;\n    align-self: stretch;\n    justify-self: stretch;\n    justify-content: center;\n    padding: var(--spectrum-global-dimension-size-25);\n    padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      width: var(--spectrum-global-dimension-size-200);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n\n      &:focus-visible {\n        box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n        outline: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-checkboxWrapper {\n    grid-area: checkbox;\n    align-items: center;\n    justify-items: center;\n    transition-duration: 160ms;\n    display: flex;\n  }\n\n  .react-spectrum-ListViewItem-checkbox {\n    min-height: 0;\n    height: 100%;\n\n    > span {\n      margin: 0;\n    }\n  }\n\n  .react-spectrum-ListViewItem-thumbnail {\n    box-sizing: content-box;\n    grid-area: thumbnail;\n    justify-items: center;\n    padding-inline-end: var(--spectrum-global-dimension-size-100);\n    display: flex;\n    border-radius: var(--spectrum-global-dimension-size-25);\n    width: var(--spectrum-global-dimension-size-400);\n    height: var(--spectrum-global-dimension-size-400);\n    align-items: center;\n    justify-content: center;\n\n    > img {\n      width: unset;\n      height: 100%;\n    }\n  }\n\n  .react-spectrum-ListViewItem-content,\n  .react-spectrum-ListViewItem-description {\n    flex-grow: 1;\n\n    /* truncate text with ellipsis */\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    height: var(--spectrum-listview-item-line-height);\n  }\n\n  .react-spectrum-ListViewItem-content {\n    grid-area: content;\n    color: var(--spectrum-listview-item-title-text-color);\n    font-size: var(--spectrum-listview-item-title-text-size);\n  }\n\n  &:not(.react-spectrum-ListView--hasDescription) {\n    .react-spectrum-ListViewItem-content {\n      grid-area: content / description;\n    }\n  }\n\n  .react-spectrum-ListViewItem-description {\n    grid-area: description;\n    color: var(--spectrum-listview-item-description-text-color);\n    font-size: var(--spectrum-listview-item-description-text-size);\n  }\n\n  .react-spectrum-ListViewItem-actions {\n    grid-area: actions;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  .react-spectrum-ListViewItem-actionmenu {\n    grid-area: actionmenu;\n  }\n\n  .react-spectrum-ListViewItem-parentIndicator {\n    grid-area: chevron;\n    padding-inline-start: var(--spectrum-global-dimension-size-75);\n    display: none;\n    transition: color var(--spectrum-global-animation-duration-100);\n\n    &.is-disabled {\n      color: var(--spectrum-alias-icon-color-disabled);\n    }\n  }\n\n  &.react-spectrum-ListViewItem-dragPreview {\n    width: var(--spectrum-global-dimension-size-2400);\n    border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n    border-radius: var(--spectrum-alias-border-radius-regular);\n    background-color: var(--spectrum-listview-background-color);\n\n    /* forced-color-adjust: none, so that background-color style will render */\n    forced-color-adjust: none;\n\n    &.react-spectrum-ListViewItem-dragPreview--compact {\n      padding-top: var(--spectrum-listview-item-compact-padding-y);\n      padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--spacious {\n      padding-top: var(--spectrum-listview-item-spacious-padding-y);\n      padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n    }\n\n    .react-spectrum-ListViewItem-grid {\n      grid-template-areas:\n        \"thumbnail content     . badge\"\n        \"thumbnail description . badge\";\n      grid-template-columns: auto auto 1fr auto;\n    }\n\n    .react-spectrum-ListViewItem-badge {\n      grid-area: badge;\n      color: var(--spectrum-listview-item-badge-text-color);\n      background: var(--spectrum-listview-item-badge-background-color);\n      padding: 0 8px;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--multiple {\n      position: relative;\n\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: -1;\n        top: 4px;\n        inset-inline-start: 4px;\n        width: 100%;\n        height: 100%;\n        border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n        border-radius: var(--spectrum-alias-border-radius-regular);\n        background-color: var(--spectrum-listview-background-color);\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n\n    .react-spectrum-ListViewItem-actions,\n    .react-spectrum-ListViewItem-actionmenu {\n      display: none;\n    }\n  }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n  /* give first and last items border-radius to match listview container */\n\n  .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n    border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n    border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  &.react-spectrum-ListView--isVerticalScrollbarVisible {\n    .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n      border-start-end-radius: 0;\n    }\n\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-end-radius: 0;\n    }\n  }\n\n  &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n.react-spectrum-ListView {\n  /* When we can use subgrid, get rid of this. */\n  &.react-spectrum-ListView--hasAnyChildren {\n    .react-spectrum-ListViewItem-parentIndicator {\n      display: inline-block;\n      visibility: hidden;\n    }\n    .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n      visibility: visible;\n    }\n  }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-compact-padding-y);\n  padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n  min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-spacious-padding-y);\n  padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n  min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {\n  padding-inline-start: 0;\n\n  .react-spectrum-ListViewItem-checkbox {\n    input {\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow:\n    inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow style will render */\n  forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n  border-color: var(--spectrum-listview-border-color-key-focus);\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n  forced-color-adjust: none;\n\n  /* Add border to quiet ListView only when it is a drop target */\n  &.react-spectrum-ListView--quiet {\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n  }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  &.react-spectrum-ListView-centeredWrapper--loadingMore {\n    padding-top: var(--spectrum-global-dimension-size-50);\n  }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n  width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n  inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n  position: absolute;\n  outline: none;\n\n  &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n    background: var(--spectrum-listview-dropindicator-border-color);\n    border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that background color\n    will render border for insertion indicator. */\n    forced-color-adjust: none;\n\n    &:before {\n      left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:after {\n      right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n      width: var(--spectrum-listview-dropindicator-circle-size);\n      height: var(--spectrum-listview-dropindicator-circle-size);\n      border-radius: 50%;\n      border: var(--spectrum-listview-dropindicator-border-size) solid;\n      box-sizing: border-box;\n      border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n      background-color: var(--spectrum-listview-background-color);\n      z-index: 5;\n\n      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n  opacity: 0.01;\n  max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n  opacity: 0.01;\n  max-width: 0px;\n}\n\n.react-spectrum-ListView {\n  &:focus-visible {\n    border-color: var(--spectrum-listview-border-color-key-focus);\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n  }\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-ListView,\n  .react-spectrum-ListViewItem {\n    --spectrum-listview-background-color: Canvas;\n    --spectrum-listview-item-background-color: Canvas;\n    --spectrum-listview-item-background-color-selected: Canvas;\n    --spectrum-listview-border-color-key-focus: Highlight;\n    --spectrum-listview-item-border-color: CanvasText;\n    --spectrum-listview-item-border-color-selected: Highlight;\n    --spectrum-listview-item-border-color-key-focus: Highlight;\n    --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n    --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n    --spectrum-listview-dropindicator-border-color: Highlight;\n    --spectrum-listview-dropindicator-circle-border-color: Highlight;\n    --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-listview-item-badge-text-color: HighlightText;\n    --spectrum-listview-item-badge-background-color: Highlight;\n    --spectrum-listview-item-title-text-color: CanvasText;\n    --spectrum-listview-item-description-text-color: CanvasText;\n  }\n\n  .react-spectrum-ListView-row {\n    &:focus-visible {\n      .react-spectrum-ListViewItem {\n        /* Adds a full outline style to the focused listview item to better distinguish between\n        the selected, not selected, selected + focused and selected + not focused\n        states without using a background color on the row in forced-colors: active mode. */\n        &:after {\n          outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n          outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n          top: calc(-1 * var(--spectrum-listview-border-width));\n          height: calc(100% + var(--spectrum-listview-border-width));\n        }\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    box-sizing: content-box;\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      /* Use CanvasText, so that focus ring color on drag handle button matches\n      focus ring color for other interactive elements within the listview item. */\n      --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n    }\n  }\n\n}\n"],"names":[],"version":3,"file":"styles.d09a6cc6.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;AAiBE;;;;AAQM;;;;;AAQF;;;;;;;;;;AAeA;;;;AAEE;;;;AAKA;;;;AAKA;;;;;AAaE;;;;AAYA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAQA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUR;;;;;AAQJ;;;;AAII;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAgBJ;;;;;;AAQQ;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASR;;;;AAIA;;;;;;;;;;;;;AAaE;;;;AASA;;;;AAIA;;;;AAQE;;;;AAMA;;;;AAKF;;;;;AAMA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;AAOE;;;;;;AAUJ;;;;;;;AAQA;;;;;AAIE;;;;AAKF;;;;;;;;;;;;AAYE;;;;;AAMF;;;;;;;;AAWA;;;;;;AAOE;;;;AAKF;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;;;AAME;;;;AAKF;;;;;;;;AASE;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;;;;;AAQA;;;;AAGE;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBF;;;;AAUF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAKA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAME;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUA;;;;;AAIA;;;;AAMJ;;;;;;AAMA;;;;;;AAMA;;;;AAII;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMJ;;;;;;AAYA;;;;;;;AASE;;;;AAKF;;;;;;;;AAME;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;;;AAQE;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;AAoBJ;;;;;AAKA;;;;;AAUA;;;;;AAME;;;;;AAMF;EACE;;;;;;;;;;;;;;;;;;;EA0BM;;;;;;;EAUN;;;;EAGE","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\n  --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n  --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);\n  --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n  --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n  --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n  --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n  --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n  --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n  --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n  --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n  --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n  --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n  --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n  --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n  --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n  --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n  --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n  --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n  --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n  --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n  --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n  --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n  --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n  --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n  --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n  --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n  --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n  --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n  --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n  --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n  box-sizing: border-box;\n  border-color: var(--spectrum-listview-border-color);\n  border-style: solid;\n  position: relative;\n  border-width: var(--spectrum-listview-border-width);\n  border-radius: var(--spectrum-listview-border-radius);\n  overflow: auto;\n  vertical-align: var(--spectrum-table-cell-vertical-alignment);\n  border-collapse: separate;\n  border-spacing: 0;\n  transform: translate3d(0, 0, 0);\n  padding: 0;\n  background-color: var(--spectrum-listview-background-color);\n  outline: 0;\n  user-select: none;\n\n  .react-spectrum-ListView-row {\n    outline: none;\n  }\n\n  &.react-spectrum-ListView--emphasized {\n    &.react-spectrum-ListView--dropTarget {\n      .react-spectrum-ListViewItem:not(.is-selected) {\n        /* shift bottom border inwards so it doesn't overlap the root drop target */\n        &:after {\n          inset-inline-start: 1px;\n          inset-inline-end: 1px;\n        }\n      }\n    }\n    .react-spectrum-ListViewItem {\n      /* common pseudoelement for box shadows */\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        inset-inline-start: 0;\n        inset-inline-end: 0;\n        inset-block-end: 0;\n        inset-block-start: 0;\n        z-index: 3;\n        pointer-events: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n\n      &.is-selected {\n        background-color: var(--spectrum-listview-item-background-color-selected);\n        &.is-hovered,\n        &.is-active {\n          background-color: var(--spectrum-listview-item-background-color-selected-hover);\n        }\n\n        &:focus-visible {\n          background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n        }\n\n        /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n        &:after {\n          inset-block-start: -1px;\n          box-shadow:\n            inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n        }\n      }\n\n      /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n      &.react-spectrum-ListViewItem--firstRow {\n        &.is-selected {\n          &:after {\n            inset-block-start: 0px;\n          }\n        }\n      }\n    }\n\n    &:not(.react-spectrum-ListView--quiet) {\n      .react-spectrum-ListViewItem {\n        /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n        /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n        &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n          &:after {\n            box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n          }\n        }\n\n        &.react-spectrum-ListViewItem--firstRow.is-selected {\n          &:after {\n            border-start-start-radius: var(--spectrum-listview-item-border-radius);\n            border-start-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &:not(.react-spectrum-ListView--loadingMore) {\n        .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n          &:after {\n            border-end-start-radius: var(--spectrum-listview-item-border-radius);\n            border-end-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isVerticalScrollbarVisible {\n        .react-spectrum-ListViewItem {\n          &.react-spectrum-ListViewItem--firstRow.is-selected {\n            &:after {\n              border-start-end-radius: 0;\n            }\n          }\n        }\n\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-start-radius: 0;\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n    }\n  }\n  &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n    & .react-spectrum-ListViewItem-content,\n    & .react-spectrum-ListViewItem-description {\n      white-space: normal;\n      height: auto;\n    }\n  }\n}\n\n.react-spectrum-ListView-row {\n  cursor: default;\n  /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n  &:focus-visible {\n    &:before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n      z-index: 4;\n      background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n      /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n  background-color: var(--spectrum-listview-quiet-background-color);\n  border-width: 0;\n  border-radius: 0;\n\n  .react-spectrum-ListView-row {\n    &.round-tops {\n      &:focus-visible {\n        &:before {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n          border-start-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n\n    &.round-bottoms {\n      &:focus-visible {\n        &:before {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n          border-end-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n  }\n}\n\n.react-spectrum-ListView-row[data-href] {\n  cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n  display: grid; /* TODO: define grid areas */\n  box-sizing: border-box;\n  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n  line-height: var(--spectrum-listview-item-line-height);\n  padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n  position: relative;\n  /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n  color: var(--spectrum-listview-item-text-color);\n  outline: 0;\n  min-height: var(--spectrum-global-dimension-size-500);\n\n  &.is-hovered,\n  &.is-focused {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &:focus-visible {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &.is-active {\n    background-color: var(--spectrum-listview-item-background-color-down);\n  }\n\n  &.is-selected {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n\n    &.is-hovered,\n    &.is-active {\n      background-color: var(--spectrum-listview-item-background-color-hover);\n    }\n\n    &:focus-visible {\n      background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n    }\n  }\n\n  &.is-disabled {\n    &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n      color: var(--spectrum-listview-item-text-color-disabled);\n    }\n  }\n\n  &.has-checkbox {\n    /* have to eliminate vertical padding to allow proper vertical alignment */\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .react-spectrum-ListViewItem-grid {\n    display: grid;\n    grid-template-columns: auto auto auto 1fr auto auto auto;\n    grid-template-rows: 1fr auto;\n    grid-template-areas:\n      \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n      \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n    align-items: center;\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    grid-area: draghandle;\n    width: var(--spectrum-global-dimension-size-250);\n    display: flex;\n    align-self: stretch;\n    justify-self: stretch;\n    justify-content: center;\n    padding: var(--spectrum-global-dimension-size-25);\n    padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      width: var(--spectrum-global-dimension-size-200);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n\n      &:focus-visible {\n        box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n        outline: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-checkboxWrapper {\n    grid-area: checkbox;\n    align-items: center;\n    justify-items: center;\n    transition-duration: 160ms;\n    display: flex;\n  }\n\n  .react-spectrum-ListViewItem-checkbox {\n    min-height: 0;\n    height: 100%;\n\n    > span {\n      margin: 0;\n    }\n  }\n\n  .react-spectrum-ListViewItem-thumbnail {\n    box-sizing: content-box;\n    grid-area: thumbnail;\n    justify-items: center;\n    padding-inline-end: var(--spectrum-global-dimension-size-100);\n    display: flex;\n    border-radius: var(--spectrum-global-dimension-size-25);\n    width: var(--spectrum-global-dimension-size-400);\n    height: var(--spectrum-global-dimension-size-400);\n    align-items: center;\n    justify-content: center;\n\n    > img {\n      width: unset;\n      height: 100%;\n    }\n  }\n\n  .react-spectrum-ListViewItem-content,\n  .react-spectrum-ListViewItem-description {\n    flex-grow: 1;\n\n    /* truncate text with ellipsis */\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    height: var(--spectrum-listview-item-line-height);\n  }\n\n  .react-spectrum-ListViewItem-content {\n    grid-area: content;\n    color: var(--spectrum-listview-item-title-text-color);\n    font-size: var(--spectrum-listview-item-title-text-size);\n  }\n\n  &:not(.react-spectrum-ListView--hasDescription) {\n    .react-spectrum-ListViewItem-content {\n      grid-area: content / description;\n    }\n  }\n\n  .react-spectrum-ListViewItem-description {\n    grid-area: description;\n    color: var(--spectrum-listview-item-description-text-color);\n    font-size: var(--spectrum-listview-item-description-text-size);\n  }\n\n  .react-spectrum-ListViewItem-actions {\n    grid-area: actions;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  .react-spectrum-ListViewItem-actionmenu {\n    grid-area: actionmenu;\n  }\n\n  .react-spectrum-ListViewItem-parentIndicator {\n    grid-area: chevron;\n    padding-inline-start: var(--spectrum-global-dimension-size-75);\n    display: none;\n    transition: color var(--spectrum-global-animation-duration-100);\n\n    &.is-disabled {\n      color: var(--spectrum-alias-icon-color-disabled);\n    }\n  }\n\n  &.react-spectrum-ListViewItem-dragPreview {\n    width: var(--spectrum-global-dimension-size-2400);\n    border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n    border-radius: var(--spectrum-alias-border-radius-regular);\n    background-color: var(--spectrum-listview-background-color);\n\n    /* forced-color-adjust: none, so that background-color style will render */\n    forced-color-adjust: none;\n\n    &.react-spectrum-ListViewItem-dragPreview--compact {\n      padding-top: var(--spectrum-listview-item-compact-padding-y);\n      padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--spacious {\n      padding-top: var(--spectrum-listview-item-spacious-padding-y);\n      padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n    }\n\n    .react-spectrum-ListViewItem-grid {\n      grid-template-areas:\n        \"thumbnail content     . badge\"\n        \"thumbnail description . badge\";\n      grid-template-columns: auto auto 1fr auto;\n    }\n\n    .react-spectrum-ListViewItem-badge {\n      grid-area: badge;\n      color: var(--spectrum-listview-item-badge-text-color);\n      background: var(--spectrum-listview-item-badge-background-color);\n      padding: 0 8px;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--multiple {\n      position: relative;\n\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: -1;\n        top: 4px;\n        inset-inline-start: 4px;\n        width: 100%;\n        height: 100%;\n        border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n        border-radius: var(--spectrum-alias-border-radius-regular);\n        background-color: var(--spectrum-listview-background-color);\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n\n    .react-spectrum-ListViewItem-actions,\n    .react-spectrum-ListViewItem-actionmenu {\n      display: none;\n    }\n  }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n  /* give first and last items border-radius to match listview container */\n\n  .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n    border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n    border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  &.react-spectrum-ListView--isVerticalScrollbarVisible {\n    .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n      border-start-end-radius: 0;\n    }\n\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-end-radius: 0;\n    }\n  }\n\n  &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n.react-spectrum-ListView {\n  /* When we can use subgrid, get rid of this. */\n  &.react-spectrum-ListView--hasAnyChildren {\n    .react-spectrum-ListViewItem-parentIndicator {\n      display: inline-block;\n      visibility: hidden;\n    }\n    .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n      visibility: visible;\n    }\n  }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-compact-padding-y);\n  padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n  min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-spacious-padding-y);\n  padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n  min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {\n  padding-inline-start: 0;\n\n  .react-spectrum-ListViewItem-checkbox {\n    input {\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow:\n    inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow style will render */\n  forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n  border-color: var(--spectrum-listview-border-color-key-focus);\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n  forced-color-adjust: none;\n\n  /* Add border to quiet ListView only when it is a drop target */\n  &.react-spectrum-ListView--quiet {\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n  }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  &.react-spectrum-ListView-centeredWrapper--loadingMore {\n    padding-top: var(--spectrum-global-dimension-size-50);\n  }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n  width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n  inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n  position: absolute;\n  outline: none;\n\n  &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n    background: var(--spectrum-listview-dropindicator-border-color);\n    border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that background color\n    will render border for insertion indicator. */\n    forced-color-adjust: none;\n\n    &:before {\n      left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:after {\n      right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n      width: var(--spectrum-listview-dropindicator-circle-size);\n      height: var(--spectrum-listview-dropindicator-circle-size);\n      border-radius: 50%;\n      border: var(--spectrum-listview-dropindicator-border-size) solid;\n      box-sizing: border-box;\n      border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n      background-color: var(--spectrum-listview-background-color);\n      z-index: 5;\n\n      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n  opacity: 0.01;\n  max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n  opacity: 0.01;\n  max-width: 0px;\n}\n\n.react-spectrum-ListView {\n  &:focus-visible {\n    border-color: var(--spectrum-listview-border-color-key-focus);\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n  }\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-ListView,\n  .react-spectrum-ListViewItem {\n    --spectrum-listview-background-color: Canvas;\n    --spectrum-listview-item-background-color: Canvas;\n    --spectrum-listview-item-background-color-selected: Canvas;\n    --spectrum-listview-border-color-key-focus: Highlight;\n    --spectrum-listview-item-border-color: CanvasText;\n    --spectrum-listview-item-border-color-selected: Highlight;\n    --spectrum-listview-item-border-color-key-focus: Highlight;\n    --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n    --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n    --spectrum-listview-dropindicator-border-color: Highlight;\n    --spectrum-listview-dropindicator-circle-border-color: Highlight;\n    --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-listview-item-badge-text-color: HighlightText;\n    --spectrum-listview-item-badge-background-color: Highlight;\n    --spectrum-listview-item-title-text-color: CanvasText;\n    --spectrum-listview-item-description-text-color: CanvasText;\n  }\n\n  .react-spectrum-ListView-row {\n    &:focus-visible {\n      .react-spectrum-ListViewItem {\n        /* Adds a full outline style to the focused listview item to better distinguish between\n        the selected, not selected, selected + focused and selected + not focused\n        states without using a background color on the row in forced-colors: active mode. */\n        &:after {\n          outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n          outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n          top: calc(-1 * var(--spectrum-listview-border-width));\n          height: calc(100% + var(--spectrum-listview-border-width));\n        }\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    box-sizing: content-box;\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      /* Use CanvasText, so that focus ring color on drag handle button matches\n      focus ring color for other interactive elements within the listview item. */\n      --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n    }\n  }\n\n}\n"],"names":[],"version":3,"file":"styles.ad343ab0.css.map"}

package/dist/styles_css.main.js

@@ -129,69 +129,69 @@ var $279507a6f189e509$export$38c6ebb7f58dedaa;
 var $279507a6f189e509$export$8a26470723c97997;
 var $279507a6f189e509$export$3b4577d06eb82ec0;
 var $279507a6f189e509$export$e77609e6ef08541e;
-$279507a6f189e509$export$bd7f6383fb9d6b48 = `C64cMW_actionmenu`;
-$279507a6f189e509$export$e324594224ef24da = `C64cMW_actions`;
-$279507a6f189e509$export$4aebd143f31d0c0d = `C64cMW_badge`;
-$279507a6f189e509$export$b07e517d22efa1ca = `C64cMW_checkbox`;
-$279507a6f189e509$export$980c1089c0604ea3 = `C64cMW_chevron`;
-$279507a6f189e509$export$a7db06668cad9adb = `C64cMW_content`;
-$279507a6f189e509$export$6d59db4903f20f7d = `C64cMW_description`;
-$279507a6f189e509$export$7b34ab0dc3a6dc3b = `C64cMW_draghandle`;
-$279507a6f189e509$export$f39a09f249340e2a = `C64cMW_focus-ring`;
-$279507a6f189e509$export$27f4d14f7fc5b94 = `C64cMW_has-checkbox`;
-$279507a6f189e509$export$20fd0f7cd4e6112f = `C64cMW_is-active`;
-$279507a6f189e509$export$d35bc1e505d1ebbf = `C64cMW_is-disabled`;
-$279507a6f189e509$export$e7dc768d35940237 = `C64cMW_is-focused`;
-$279507a6f189e509$export$b8813cd5d7824ce7 = `C64cMW_is-hovered`;
-$279507a6f189e509$export$53aa811f86efbfad = `C64cMW_is-next-selected`;
-$279507a6f189e509$export$1e0fb04f31d3c22a = `C64cMW_is-selected`;
-$279507a6f189e509$export$4ad4709e9aee8e02 = `C64cMW_react-spectrum-ListView`;
-$279507a6f189e509$export$1f55b27adf96a61e = `C64cMW_react-spectrum-ListView--compact`;
-$279507a6f189e509$export$a2d35348c0cc9bca = `C64cMW_react-spectrum-ListView--draggable`;
-$279507a6f189e509$export$d9ba3f873d0eaec6 = `C64cMW_react-spectrum-ListView--dropTarget`;
-$279507a6f189e509$export$eb0d5352b2a55473 = `C64cMW_react-spectrum-ListView--emphasized`;
-$279507a6f189e509$export$7150e72e440612bf = `C64cMW_react-spectrum-ListView--hasAnyChildren`;
-$279507a6f189e509$export$7c9efe74c4b77579 = `C64cMW_react-spectrum-ListView--hasDescription`;
-$279507a6f189e509$export$d9b13621bc5dd4d1 = `C64cMW_react-spectrum-ListView--isHorizontalScrollbarVisible`;
-$279507a6f189e509$export$1bf50375883926 = `C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible`;
-$279507a6f189e509$export$5aa06adeaa92dbca = `C64cMW_react-spectrum-ListView--loadingMore`;
-$279507a6f189e509$export$b01cb9680b0b8d22 = `C64cMW_react-spectrum-ListView--quiet`;
-$279507a6f189e509$export$cbd30c7809acdd81 = `C64cMW_react-spectrum-ListView--spacious`;
-$279507a6f189e509$export$68b45d42c77fe1cf = `C64cMW_react-spectrum-ListView--wrap`;
-$279507a6f189e509$export$1b66ee5cd8394caf = `C64cMW_react-spectrum-ListView-centeredWrapper`;
-$279507a6f189e509$export$6b3b7792abd9e5f4 = `C64cMW_react-spectrum-ListView-centeredWrapper--loadingMore`;
-$279507a6f189e509$export$f80410436c6352c8 = `C64cMW_react-spectrum-ListView-row`;
-$279507a6f189e509$export$2a6a235e0baff403 = `C64cMW_react-spectrum-ListViewInsertionIndicator`;
-$279507a6f189e509$export$927a243805a411ca = `C64cMW_react-spectrum-ListViewInsertionIndicator--dropTarget`;
-$279507a6f189e509$export$ce8c93b50eec2d4f = `C64cMW_react-spectrum-ListViewItem`;
-$279507a6f189e509$export$8afa006321ee3a8f = `C64cMW_react-spectrum-ListViewItem--dropTarget`;
-$279507a6f189e509$export$60162f05499b7560 = `C64cMW_react-spectrum-ListViewItem--firstRow`;
-$279507a6f189e509$export$f9ed481cac4d935a = `C64cMW_react-spectrum-ListViewItem--isFlushBottom`;
-$279507a6f189e509$export$659c081622dc13b0 = `C64cMW_react-spectrum-ListViewItem--lastRow`;
-$279507a6f189e509$export$58dfda3903289699 = `C64cMW_react-spectrum-ListViewItem-actionmenu`;
-$279507a6f189e509$export$26480389595d4515 = `C64cMW_react-spectrum-ListViewItem-actions`;
-$279507a6f189e509$export$6498e436231eea33 = `C64cMW_react-spectrum-ListViewItem-badge`;
-$279507a6f189e509$export$f979f76ca45242f2 = `C64cMW_react-spectrum-ListViewItem-checkbox`;
-$279507a6f189e509$export$9dc11c0e0825a249 = `C64cMW_react-spectrum-ListViewItem-checkbox--enter`;
-$279507a6f189e509$export$f89865e352230a35 = `C64cMW_react-spectrum-ListViewItem-checkbox--enterActive`;
-$279507a6f189e509$export$867c05a16e5d2a7c = `C64cMW_react-spectrum-ListViewItem-checkbox--exit`;
-$279507a6f189e509$export$61b66671605f1b1a = `C64cMW_react-spectrum-ListViewItem-checkbox--exitActive`;
-$279507a6f189e509$export$41a33ae9818c51be = `C64cMW_react-spectrum-ListViewItem-checkboxWrapper`;
-$279507a6f189e509$export$dc2b0b08d47555 = `C64cMW_react-spectrum-ListViewItem-content`;
-$279507a6f189e509$export$5d2adfeb248e654a = `C64cMW_react-spectrum-ListViewItem-description`;
-$279507a6f189e509$export$84286d36e5c00c55 = `C64cMW_react-spectrum-ListViewItem-dragPreview`;
-$279507a6f189e509$export$fcabaf52adc14efe = `C64cMW_react-spectrum-ListViewItem-dragPreview--compact`;
-$279507a6f189e509$export$2fb3c7c2d5c0d720 = `C64cMW_react-spectrum-ListViewItem-dragPreview--multiple`;
-$279507a6f189e509$export$256b97e812db1642 = `C64cMW_react-spectrum-ListViewItem-dragPreview--spacious`;
-$279507a6f189e509$export$4784f0c2ec8bbf7b = `C64cMW_react-spectrum-ListViewItem-draghandle-button`;
-$279507a6f189e509$export$f385e7456ddfee84 = `C64cMW_react-spectrum-ListViewItem-draghandle-container`;
-$279507a6f189e509$export$aaaf83100348d389 = `C64cMW_react-spectrum-ListViewItem-grid`;
-$279507a6f189e509$export$39b42a8a24290c17 = `C64cMW_react-spectrum-ListViewItem-parentIndicator`;
-$279507a6f189e509$export$c29dcfa80dab8c88 = `C64cMW_react-spectrum-ListViewItem-parentIndicator--hasChildItems`;
-$279507a6f189e509$export$38c6ebb7f58dedaa = `C64cMW_react-spectrum-ListViewItem-thumbnail`;
-$279507a6f189e509$export$8a26470723c97997 = `C64cMW_round-bottoms`;
-$279507a6f189e509$export$3b4577d06eb82ec0 = `C64cMW_round-tops`;
-$279507a6f189e509$export$e77609e6ef08541e = `C64cMW_thumbnail`;
+$279507a6f189e509$export$bd7f6383fb9d6b48 = `_2cwvvq_actionmenu`;
+$279507a6f189e509$export$e324594224ef24da = `_2cwvvq_actions`;
+$279507a6f189e509$export$4aebd143f31d0c0d = `_2cwvvq_badge`;
+$279507a6f189e509$export$b07e517d22efa1ca = `_2cwvvq_checkbox`;
+$279507a6f189e509$export$980c1089c0604ea3 = `_2cwvvq_chevron`;
+$279507a6f189e509$export$a7db06668cad9adb = `_2cwvvq_content`;
+$279507a6f189e509$export$6d59db4903f20f7d = `_2cwvvq_description`;
+$279507a6f189e509$export$7b34ab0dc3a6dc3b = `_2cwvvq_draghandle`;
+$279507a6f189e509$export$f39a09f249340e2a = `_2cwvvq_focus-ring`;
+$279507a6f189e509$export$27f4d14f7fc5b94 = `_2cwvvq_has-checkbox`;
+$279507a6f189e509$export$20fd0f7cd4e6112f = `_2cwvvq_is-active`;
+$279507a6f189e509$export$d35bc1e505d1ebbf = `_2cwvvq_is-disabled`;
+$279507a6f189e509$export$e7dc768d35940237 = `_2cwvvq_is-focused`;
+$279507a6f189e509$export$b8813cd5d7824ce7 = `_2cwvvq_is-hovered`;
+$279507a6f189e509$export$53aa811f86efbfad = `_2cwvvq_is-next-selected`;
+$279507a6f189e509$export$1e0fb04f31d3c22a = `_2cwvvq_is-selected`;
+$279507a6f189e509$export$4ad4709e9aee8e02 = `_2cwvvq_react-spectrum-ListView`;
+$279507a6f189e509$export$1f55b27adf96a61e = `_2cwvvq_react-spectrum-ListView--compact`;
+$279507a6f189e509$export$a2d35348c0cc9bca = `_2cwvvq_react-spectrum-ListView--draggable`;
+$279507a6f189e509$export$d9ba3f873d0eaec6 = `_2cwvvq_react-spectrum-ListView--dropTarget`;
+$279507a6f189e509$export$eb0d5352b2a55473 = `_2cwvvq_react-spectrum-ListView--emphasized`;
+$279507a6f189e509$export$7150e72e440612bf = `_2cwvvq_react-spectrum-ListView--hasAnyChildren`;
+$279507a6f189e509$export$7c9efe74c4b77579 = `_2cwvvq_react-spectrum-ListView--hasDescription`;
+$279507a6f189e509$export$d9b13621bc5dd4d1 = `_2cwvvq_react-spectrum-ListView--isHorizontalScrollbarVisible`;
+$279507a6f189e509$export$1bf50375883926 = `_2cwvvq_react-spectrum-ListView--isVerticalScrollbarVisible`;
+$279507a6f189e509$export$5aa06adeaa92dbca = `_2cwvvq_react-spectrum-ListView--loadingMore`;
+$279507a6f189e509$export$b01cb9680b0b8d22 = `_2cwvvq_react-spectrum-ListView--quiet`;
+$279507a6f189e509$export$cbd30c7809acdd81 = `_2cwvvq_react-spectrum-ListView--spacious`;
+$279507a6f189e509$export$68b45d42c77fe1cf = `_2cwvvq_react-spectrum-ListView--wrap`;
+$279507a6f189e509$export$1b66ee5cd8394caf = `_2cwvvq_react-spectrum-ListView-centeredWrapper`;
+$279507a6f189e509$export$6b3b7792abd9e5f4 = `_2cwvvq_react-spectrum-ListView-centeredWrapper--loadingMore`;
+$279507a6f189e509$export$f80410436c6352c8 = `_2cwvvq_react-spectrum-ListView-row`;
+$279507a6f189e509$export$2a6a235e0baff403 = `_2cwvvq_react-spectrum-ListViewInsertionIndicator`;
+$279507a6f189e509$export$927a243805a411ca = `_2cwvvq_react-spectrum-ListViewInsertionIndicator--dropTarget`;
+$279507a6f189e509$export$ce8c93b50eec2d4f = `_2cwvvq_react-spectrum-ListViewItem`;
+$279507a6f189e509$export$8afa006321ee3a8f = `_2cwvvq_react-spectrum-ListViewItem--dropTarget`;
+$279507a6f189e509$export$60162f05499b7560 = `_2cwvvq_react-spectrum-ListViewItem--firstRow`;
+$279507a6f189e509$export$f9ed481cac4d935a = `_2cwvvq_react-spectrum-ListViewItem--isFlushBottom`;
+$279507a6f189e509$export$659c081622dc13b0 = `_2cwvvq_react-spectrum-ListViewItem--lastRow`;
+$279507a6f189e509$export$58dfda3903289699 = `_2cwvvq_react-spectrum-ListViewItem-actionmenu`;
+$279507a6f189e509$export$26480389595d4515 = `_2cwvvq_react-spectrum-ListViewItem-actions`;
+$279507a6f189e509$export$6498e436231eea33 = `_2cwvvq_react-spectrum-ListViewItem-badge`;
+$279507a6f189e509$export$f979f76ca45242f2 = `_2cwvvq_react-spectrum-ListViewItem-checkbox`;
+$279507a6f189e509$export$9dc11c0e0825a249 = `_2cwvvq_react-spectrum-ListViewItem-checkbox--enter`;
+$279507a6f189e509$export$f89865e352230a35 = `_2cwvvq_react-spectrum-ListViewItem-checkbox--enterActive`;
+$279507a6f189e509$export$867c05a16e5d2a7c = `_2cwvvq_react-spectrum-ListViewItem-checkbox--exit`;
+$279507a6f189e509$export$61b66671605f1b1a = `_2cwvvq_react-spectrum-ListViewItem-checkbox--exitActive`;
+$279507a6f189e509$export$41a33ae9818c51be = `_2cwvvq_react-spectrum-ListViewItem-checkboxWrapper`;
+$279507a6f189e509$export$dc2b0b08d47555 = `_2cwvvq_react-spectrum-ListViewItem-content`;
+$279507a6f189e509$export$5d2adfeb248e654a = `_2cwvvq_react-spectrum-ListViewItem-description`;
+$279507a6f189e509$export$84286d36e5c00c55 = `_2cwvvq_react-spectrum-ListViewItem-dragPreview`;
+$279507a6f189e509$export$fcabaf52adc14efe = `_2cwvvq_react-spectrum-ListViewItem-dragPreview--compact`;
+$279507a6f189e509$export$2fb3c7c2d5c0d720 = `_2cwvvq_react-spectrum-ListViewItem-dragPreview--multiple`;
+$279507a6f189e509$export$256b97e812db1642 = `_2cwvvq_react-spectrum-ListViewItem-dragPreview--spacious`;
+$279507a6f189e509$export$4784f0c2ec8bbf7b = `_2cwvvq_react-spectrum-ListViewItem-draghandle-button`;
+$279507a6f189e509$export$f385e7456ddfee84 = `_2cwvvq_react-spectrum-ListViewItem-draghandle-container`;
+$279507a6f189e509$export$aaaf83100348d389 = `_2cwvvq_react-spectrum-ListViewItem-grid`;
+$279507a6f189e509$export$39b42a8a24290c17 = `_2cwvvq_react-spectrum-ListViewItem-parentIndicator`;
+$279507a6f189e509$export$c29dcfa80dab8c88 = `_2cwvvq_react-spectrum-ListViewItem-parentIndicator--hasChildItems`;
+$279507a6f189e509$export$38c6ebb7f58dedaa = `_2cwvvq_react-spectrum-ListViewItem-thumbnail`;
+$279507a6f189e509$export$8a26470723c97997 = `_2cwvvq_round-bottoms`;
+$279507a6f189e509$export$3b4577d06eb82ec0 = `_2cwvvq_round-tops`;
+$279507a6f189e509$export$e77609e6ef08541e = `_2cwvvq_thumbnail`;
 
 
 //# sourceMappingURL=styles_css.main.js.map

package/dist/styles_css.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AA9DA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAA6B,CAAC,eAAe,CAAC;AAC9C,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,2CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAqC,CAAC,uBAAuB,CAAC;AAC9D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAA0E,CAAC,4DAA4D,CAAC;AACxI,0CAAwE,CAAC,0DAA0D,CAAC;AACpI,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAyE,CAAC,2DAA2D,CAAC;AACtI,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAA8D,CAAC,gDAAgD,CAAC;AAChH,4CAA0E,CAAC,4DAA4D,CAAC;AACxI,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAA+D,CAAC,iDAAiD,CAAC;AAClH,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAA2D,CAAC,6CAA6C,CAAC;AAC1G,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAgE,CAAC,kDAAkD,CAAC;AACpH,4CAAsE,CAAC,wDAAwD,CAAC;AAChI,4CAA+D,CAAC,iDAAiD,CAAC;AAClH,4CAAqE,CAAC,uDAAuD,CAAC;AAC9H,4CAAgE,CAAC,kDAAkD,CAAC;AACpH,0CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAqE,CAAC,uDAAuD,CAAC;AAC9H,4CAAsE,CAAC,wDAAwD,CAAC;AAChI,4CAAsE,CAAC,wDAAwD,CAAC;AAChI,4CAAkE,CAAC,oDAAoD,CAAC;AACxH,4CAAqE,CAAC,uDAAuD,CAAC;AAC9H,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAAgE,CAAC,kDAAkD,CAAC;AACpH,4CAA+E,CAAC,iEAAiE,CAAC;AAClJ,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA8B,CAAC,gBAAgB,CAAC","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\n  --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n  --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);\n  --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n  --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n  --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n  --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n  --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n  --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n  --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n  --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n  --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n  --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n  --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n  --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n  --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n  --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n  --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n  --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n  --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n  --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n  --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n  --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n  --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n  --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n  --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n  --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n  --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n  --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n  --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n  --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n  box-sizing: border-box;\n  border-color: var(--spectrum-listview-border-color);\n  border-style: solid;\n  position: relative;\n  border-width: var(--spectrum-listview-border-width);\n  border-radius: var(--spectrum-listview-border-radius);\n  overflow: auto;\n  vertical-align: var(--spectrum-table-cell-vertical-alignment);\n  border-collapse: separate;\n  border-spacing: 0;\n  transform: translate3d(0, 0, 0);\n  padding: 0;\n  background-color: var(--spectrum-listview-background-color);\n  outline: 0;\n  user-select: none;\n\n  .react-spectrum-ListView-row {\n    outline: none;\n  }\n\n  &.react-spectrum-ListView--emphasized {\n    &.react-spectrum-ListView--dropTarget {\n      .react-spectrum-ListViewItem:not(.is-selected) {\n        /* shift bottom border inwards so it doesn't overlap the root drop target */\n        &:after {\n          inset-inline-start: 1px;\n          inset-inline-end: 1px;\n        }\n      }\n    }\n    .react-spectrum-ListViewItem {\n      /* common pseudoelement for box shadows */\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        inset-inline-start: 0;\n        inset-inline-end: 0;\n        inset-block-end: 0;\n        inset-block-start: 0;\n        z-index: 3;\n        pointer-events: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n\n      &.is-selected {\n        background-color: var(--spectrum-listview-item-background-color-selected);\n        &.is-hovered,\n        &.is-active {\n          background-color: var(--spectrum-listview-item-background-color-selected-hover);\n        }\n\n        &:focus-visible {\n          background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n        }\n\n        /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n        &:after {\n          inset-block-start: -1px;\n          box-shadow:\n            inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n        }\n      }\n\n      /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n      &.react-spectrum-ListViewItem--firstRow {\n        &.is-selected {\n          &:after {\n            inset-block-start: 0px;\n          }\n        }\n      }\n    }\n\n    &:not(.react-spectrum-ListView--quiet) {\n      .react-spectrum-ListViewItem {\n        /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n        /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n        &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n          &:after {\n            box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n          }\n        }\n\n        &.react-spectrum-ListViewItem--firstRow.is-selected {\n          &:after {\n            border-start-start-radius: var(--spectrum-listview-item-border-radius);\n            border-start-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &:not(.react-spectrum-ListView--loadingMore) {\n        .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n          &:after {\n            border-end-start-radius: var(--spectrum-listview-item-border-radius);\n            border-end-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isVerticalScrollbarVisible {\n        .react-spectrum-ListViewItem {\n          &.react-spectrum-ListViewItem--firstRow.is-selected {\n            &:after {\n              border-start-end-radius: 0;\n            }\n          }\n        }\n\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-start-radius: 0;\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n    }\n  }\n  &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n    & .react-spectrum-ListViewItem-content,\n    & .react-spectrum-ListViewItem-description {\n      white-space: normal;\n      height: auto;\n    }\n  }\n}\n\n.react-spectrum-ListView-row {\n  cursor: default;\n  /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n  &:focus-visible {\n    &:before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n      z-index: 4;\n      background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n      /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n  background-color: var(--spectrum-listview-quiet-background-color);\n  border-width: 0;\n  border-radius: 0;\n\n  .react-spectrum-ListView-row {\n    &.round-tops {\n      &:focus-visible {\n        &:before {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n          border-start-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n\n    &.round-bottoms {\n      &:focus-visible {\n        &:before {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n          border-end-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n  }\n}\n\n.react-spectrum-ListView-row[data-href] {\n  cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n  display: grid; /* TODO: define grid areas */\n  box-sizing: border-box;\n  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n  line-height: var(--spectrum-listview-item-line-height);\n  padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n  position: relative;\n  /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n  color: var(--spectrum-listview-item-text-color);\n  outline: 0;\n  min-height: var(--spectrum-global-dimension-size-500);\n\n  &.is-hovered,\n  &.is-focused {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &:focus-visible {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &.is-active {\n    background-color: var(--spectrum-listview-item-background-color-down);\n  }\n\n  &.is-selected {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n\n    &.is-hovered,\n    &.is-active {\n      background-color: var(--spectrum-listview-item-background-color-hover);\n    }\n\n    &:focus-visible {\n      background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n    }\n  }\n\n  &.is-disabled {\n    &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n      color: var(--spectrum-listview-item-text-color-disabled);\n    }\n  }\n\n  &.has-checkbox {\n    /* have to eliminate vertical padding to allow proper vertical alignment */\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .react-spectrum-ListViewItem-grid {\n    display: grid;\n    grid-template-columns: auto auto auto 1fr auto auto auto;\n    grid-template-rows: 1fr auto;\n    grid-template-areas:\n      \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n      \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n    align-items: center;\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    grid-area: draghandle;\n    width: var(--spectrum-global-dimension-size-250);\n    display: flex;\n    align-self: stretch;\n    justify-self: stretch;\n    justify-content: center;\n    padding: var(--spectrum-global-dimension-size-25);\n    padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      width: var(--spectrum-global-dimension-size-200);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n\n      &:focus-visible {\n        box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n        outline: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-checkboxWrapper {\n    grid-area: checkbox;\n    align-items: center;\n    justify-items: center;\n    transition-duration: 160ms;\n    display: flex;\n  }\n\n  .react-spectrum-ListViewItem-checkbox {\n    min-height: 0;\n    height: 100%;\n\n    > span {\n      margin: 0;\n    }\n  }\n\n  .react-spectrum-ListViewItem-thumbnail {\n    box-sizing: content-box;\n    grid-area: thumbnail;\n    justify-items: center;\n    padding-inline-end: var(--spectrum-global-dimension-size-100);\n    display: flex;\n    border-radius: var(--spectrum-global-dimension-size-25);\n    width: var(--spectrum-global-dimension-size-400);\n    height: var(--spectrum-global-dimension-size-400);\n    align-items: center;\n    justify-content: center;\n\n    > img {\n      width: unset;\n      height: 100%;\n    }\n  }\n\n  .react-spectrum-ListViewItem-content,\n  .react-spectrum-ListViewItem-description {\n    flex-grow: 1;\n\n    /* truncate text with ellipsis */\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    height: var(--spectrum-listview-item-line-height);\n  }\n\n  .react-spectrum-ListViewItem-content {\n    grid-area: content;\n    color: var(--spectrum-listview-item-title-text-color);\n    font-size: var(--spectrum-listview-item-title-text-size);\n  }\n\n  &:not(.react-spectrum-ListView--hasDescription) {\n    .react-spectrum-ListViewItem-content {\n      grid-area: content / description;\n    }\n  }\n\n  .react-spectrum-ListViewItem-description {\n    grid-area: description;\n    color: var(--spectrum-listview-item-description-text-color);\n    font-size: var(--spectrum-listview-item-description-text-size);\n  }\n\n  .react-spectrum-ListViewItem-actions {\n    grid-area: actions;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  .react-spectrum-ListViewItem-actionmenu {\n    grid-area: actionmenu;\n  }\n\n  .react-spectrum-ListViewItem-parentIndicator {\n    grid-area: chevron;\n    padding-inline-start: var(--spectrum-global-dimension-size-75);\n    display: none;\n    transition: color var(--spectrum-global-animation-duration-100);\n\n    &.is-disabled {\n      color: var(--spectrum-alias-icon-color-disabled);\n    }\n  }\n\n  &.react-spectrum-ListViewItem-dragPreview {\n    width: var(--spectrum-global-dimension-size-2400);\n    border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n    border-radius: var(--spectrum-alias-border-radius-regular);\n    background-color: var(--spectrum-listview-background-color);\n\n    /* forced-color-adjust: none, so that background-color style will render */\n    forced-color-adjust: none;\n\n    &.react-spectrum-ListViewItem-dragPreview--compact {\n      padding-top: var(--spectrum-listview-item-compact-padding-y);\n      padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--spacious {\n      padding-top: var(--spectrum-listview-item-spacious-padding-y);\n      padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n    }\n\n    .react-spectrum-ListViewItem-grid {\n      grid-template-areas:\n        \"thumbnail content     . badge\"\n        \"thumbnail description . badge\";\n      grid-template-columns: auto auto 1fr auto;\n    }\n\n    .react-spectrum-ListViewItem-badge {\n      grid-area: badge;\n      color: var(--spectrum-listview-item-badge-text-color);\n      background: var(--spectrum-listview-item-badge-background-color);\n      padding: 0 8px;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--multiple {\n      position: relative;\n\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: -1;\n        top: 4px;\n        inset-inline-start: 4px;\n        width: 100%;\n        height: 100%;\n        border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n        border-radius: var(--spectrum-alias-border-radius-regular);\n        background-color: var(--spectrum-listview-background-color);\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n\n    .react-spectrum-ListViewItem-actions,\n    .react-spectrum-ListViewItem-actionmenu {\n      display: none;\n    }\n  }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n  /* give first and last items border-radius to match listview container */\n\n  .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n    border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n    border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  &.react-spectrum-ListView--isVerticalScrollbarVisible {\n    .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n      border-start-end-radius: 0;\n    }\n\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-end-radius: 0;\n    }\n  }\n\n  &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n.react-spectrum-ListView {\n  /* When we can use subgrid, get rid of this. */\n  &.react-spectrum-ListView--hasAnyChildren {\n    .react-spectrum-ListViewItem-parentIndicator {\n      display: inline-block;\n      visibility: hidden;\n    }\n    .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n      visibility: visible;\n    }\n  }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-compact-padding-y);\n  padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n  min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-spacious-padding-y);\n  padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n  min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {\n  padding-inline-start: 0;\n\n  .react-spectrum-ListViewItem-checkbox {\n    input {\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow:\n    inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow style will render */\n  forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n  border-color: var(--spectrum-listview-border-color-key-focus);\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n  forced-color-adjust: none;\n\n  /* Add border to quiet ListView only when it is a drop target */\n  &.react-spectrum-ListView--quiet {\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n  }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  &.react-spectrum-ListView-centeredWrapper--loadingMore {\n    padding-top: var(--spectrum-global-dimension-size-50);\n  }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n  width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n  inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n  position: absolute;\n  outline: none;\n\n  &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n    background: var(--spectrum-listview-dropindicator-border-color);\n    border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that background color\n    will render border for insertion indicator. */\n    forced-color-adjust: none;\n\n    &:before {\n      left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:after {\n      right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n      width: var(--spectrum-listview-dropindicator-circle-size);\n      height: var(--spectrum-listview-dropindicator-circle-size);\n      border-radius: 50%;\n      border: var(--spectrum-listview-dropindicator-border-size) solid;\n      box-sizing: border-box;\n      border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n      background-color: var(--spectrum-listview-background-color);\n      z-index: 5;\n\n      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n  opacity: 0.01;\n  max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n  opacity: 0.01;\n  max-width: 0px;\n}\n\n.react-spectrum-ListView {\n  &:focus-visible {\n    border-color: var(--spectrum-listview-border-color-key-focus);\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n  }\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-ListView,\n  .react-spectrum-ListViewItem {\n    --spectrum-listview-background-color: Canvas;\n    --spectrum-listview-item-background-color: Canvas;\n    --spectrum-listview-item-background-color-selected: Canvas;\n    --spectrum-listview-border-color-key-focus: Highlight;\n    --spectrum-listview-item-border-color: CanvasText;\n    --spectrum-listview-item-border-color-selected: Highlight;\n    --spectrum-listview-item-border-color-key-focus: Highlight;\n    --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n    --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n    --spectrum-listview-dropindicator-border-color: Highlight;\n    --spectrum-listview-dropindicator-circle-border-color: Highlight;\n    --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-listview-item-badge-text-color: HighlightText;\n    --spectrum-listview-item-badge-background-color: Highlight;\n    --spectrum-listview-item-title-text-color: CanvasText;\n    --spectrum-listview-item-description-text-color: CanvasText;\n  }\n\n  .react-spectrum-ListView-row {\n    &:focus-visible {\n      .react-spectrum-ListViewItem {\n        /* Adds a full outline style to the focused listview item to better distinguish between\n        the selected, not selected, selected + focused and selected + not focused\n        states without using a background color on the row in forced-colors: active mode. */\n        &:after {\n          outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n          outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n          top: calc(-1 * var(--spectrum-listview-border-width));\n          height: calc(100% + var(--spectrum-listview-border-width));\n        }\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    box-sizing: content-box;\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      /* Use CanvasText, so that focus ring color on drag handle button matches\n      focus ring color for other interactive elements within the listview item. */\n      --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n    }\n  }\n\n}\n"],"names":[],"version":3,"file":"styles_css.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AA9DA,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAA4B,CAAC,eAAe,CAAC;AAC7C,4CAA0B,CAAC,aAAa,CAAC;AACzC,4CAA6B,CAAC,gBAAgB,CAAC;AAC/C,4CAA4B,CAAC,eAAe,CAAC;AAC7C,4CAA4B,CAAC,eAAe,CAAC;AAC7C,4CAAgC,CAAC,mBAAmB,CAAC;AACrD,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,2CAAiC,CAAC,oBAAoB,CAAC;AACvD,4CAA8B,CAAC,iBAAiB,CAAC;AACjD,4CAAgC,CAAC,mBAAmB,CAAC;AACrD,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAAqC,CAAC,wBAAwB,CAAC;AAC/D,4CAAgC,CAAC,mBAAmB,CAAC;AACrD,4CAA4C,CAAC,+BAA+B,CAAC;AAC7E,4CAAqD,CAAC,wCAAwC,CAAC;AAC/F,4CAAuD,CAAC,0CAA0C,CAAC;AACnG,4CAAwD,CAAC,2CAA2C,CAAC;AACrG,4CAAwD,CAAC,2CAA2C,CAAC;AACrG,4CAA4D,CAAC,+CAA+C,CAAC;AAC7G,4CAA4D,CAAC,+CAA+C,CAAC;AAC7G,4CAA0E,CAAC,6DAA6D,CAAC;AACzI,0CAAwE,CAAC,2DAA2D,CAAC;AACrI,4CAAyD,CAAC,4CAA4C,CAAC;AACvG,4CAAmD,CAAC,sCAAsC,CAAC;AAC3F,4CAAsD,CAAC,yCAAyC,CAAC;AACjG,4CAAkD,CAAC,qCAAqC,CAAC;AACzF,4CAA4D,CAAC,+CAA+C,CAAC;AAC7G,4CAAyE,CAAC,4DAA4D,CAAC;AACvI,4CAAgD,CAAC,mCAAmC,CAAC;AACrF,4CAA8D,CAAC,iDAAiD,CAAC;AACjH,4CAA0E,CAAC,6DAA6D,CAAC;AACzI,4CAAgD,CAAC,mCAAmC,CAAC;AACrF,4CAA4D,CAAC,+CAA+C,CAAC;AAC7G,4CAA0D,CAAC,6CAA6C,CAAC;AACzG,4CAA+D,CAAC,kDAAkD,CAAC;AACnH,4CAAyD,CAAC,4CAA4C,CAAC;AACvG,4CAA2D,CAAC,8CAA8C,CAAC;AAC3G,4CAAwD,CAAC,2CAA2C,CAAC;AACrG,4CAAsD,CAAC,yCAAyC,CAAC;AACjG,4CAAyD,CAAC,4CAA4C,CAAC;AACvG,4CAAgE,CAAC,mDAAmD,CAAC;AACrH,4CAAsE,CAAC,yDAAyD,CAAC;AACjI,4CAA+D,CAAC,kDAAkD,CAAC;AACnH,4CAAqE,CAAC,wDAAwD,CAAC;AAC/H,4CAAgE,CAAC,mDAAmD,CAAC;AACrH,0CAAwD,CAAC,2CAA2C,CAAC;AACrG,4CAA4D,CAAC,+CAA+C,CAAC;AAC7G,4CAA4D,CAAC,+CAA+C,CAAC;AAC7G,4CAAqE,CAAC,wDAAwD,CAAC;AAC/H,4CAAsE,CAAC,yDAAyD,CAAC;AACjI,4CAAsE,CAAC,yDAAyD,CAAC;AACjI,4CAAkE,CAAC,qDAAqD,CAAC;AACzH,4CAAqE,CAAC,wDAAwD,CAAC;AAC/H,4CAAqD,CAAC,wCAAwC,CAAC;AAC/F,4CAAgE,CAAC,mDAAmD,CAAC;AACrH,4CAA+E,CAAC,kEAAkE,CAAC;AACnJ,4CAA0D,CAAC,6CAA6C,CAAC;AACzG,4CAAkC,CAAC,qBAAqB,CAAC;AACzD,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAA8B,CAAC,iBAAiB,CAAC","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\n  --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n  --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);\n  --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n  --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n  --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n  --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n  --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n  --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n  --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n  --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n  --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n  --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n  --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n  --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n  --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n  --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n  --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n  --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n  --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n  --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n  --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n  --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n  --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n  --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n  --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n  --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n  --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n  --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n  --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n  --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n  --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n  --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n  --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n  box-sizing: border-box;\n  border-color: var(--spectrum-listview-border-color);\n  border-style: solid;\n  position: relative;\n  border-width: var(--spectrum-listview-border-width);\n  border-radius: var(--spectrum-listview-border-radius);\n  overflow: auto;\n  vertical-align: var(--spectrum-table-cell-vertical-alignment);\n  border-collapse: separate;\n  border-spacing: 0;\n  transform: translate3d(0, 0, 0);\n  padding: 0;\n  background-color: var(--spectrum-listview-background-color);\n  outline: 0;\n  user-select: none;\n\n  .react-spectrum-ListView-row {\n    outline: none;\n  }\n\n  &.react-spectrum-ListView--emphasized {\n    &.react-spectrum-ListView--dropTarget {\n      .react-spectrum-ListViewItem:not(.is-selected) {\n        /* shift bottom border inwards so it doesn't overlap the root drop target */\n        &:after {\n          inset-inline-start: 1px;\n          inset-inline-end: 1px;\n        }\n      }\n    }\n    .react-spectrum-ListViewItem {\n      /* common pseudoelement for box shadows */\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        inset-inline-start: 0;\n        inset-inline-end: 0;\n        inset-block-end: 0;\n        inset-block-start: 0;\n        z-index: 3;\n        pointer-events: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n\n      &.is-selected {\n        background-color: var(--spectrum-listview-item-background-color-selected);\n        &.is-hovered,\n        &.is-active {\n          background-color: var(--spectrum-listview-item-background-color-selected-hover);\n        }\n\n        &:focus-visible {\n          background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n        }\n\n        /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n        &:after {\n          inset-block-start: -1px;\n          box-shadow:\n            inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n            inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n        }\n      }\n\n      /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n      &.react-spectrum-ListViewItem--firstRow {\n        &.is-selected {\n          &:after {\n            inset-block-start: 0px;\n          }\n        }\n      }\n    }\n\n    &:not(.react-spectrum-ListView--quiet) {\n      .react-spectrum-ListViewItem {\n        /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n        /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n        &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n          &:after {\n            box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n          }\n        }\n\n        &.react-spectrum-ListViewItem--firstRow.is-selected {\n          &:after {\n            border-start-start-radius: var(--spectrum-listview-item-border-radius);\n            border-start-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &:not(.react-spectrum-ListView--loadingMore) {\n        .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n          &:after {\n            border-end-start-radius: var(--spectrum-listview-item-border-radius);\n            border-end-end-radius: var(--spectrum-listview-item-border-radius);\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isVerticalScrollbarVisible {\n        .react-spectrum-ListViewItem {\n          &.react-spectrum-ListViewItem--firstRow.is-selected {\n            &:after {\n              border-start-end-radius: 0;\n            }\n          }\n        }\n\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n\n      &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n        &:not(.react-spectrum-ListView--loadingMore) {\n          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n            &:after {\n              border-end-start-radius: 0;\n              border-end-end-radius: 0;\n            }\n          }\n        }\n      }\n    }\n  }\n  &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n    & .react-spectrum-ListViewItem-content,\n    & .react-spectrum-ListViewItem-description {\n      white-space: normal;\n      height: auto;\n    }\n  }\n}\n\n.react-spectrum-ListView-row {\n  cursor: default;\n  /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n  &:focus-visible {\n    &:before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n      z-index: 4;\n      background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n      /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n  background-color: var(--spectrum-listview-quiet-background-color);\n  border-width: 0;\n  border-radius: 0;\n\n  .react-spectrum-ListView-row {\n    &.round-tops {\n      &:focus-visible {\n        &:before {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-start-start-radius: var(--spectrum-listview-item-border-radius);\n        border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-start-start-radius: var(--spectrum-listview-item-border-radius);\n          border-start-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n\n    &.round-bottoms {\n      &:focus-visible {\n        &:before {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n      & > .react-spectrum-ListViewItem {\n        border-end-start-radius: var(--spectrum-listview-item-border-radius);\n        border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n        &:after {\n          border-end-start-radius: var(--spectrum-listview-item-border-radius);\n          border-end-end-radius: var(--spectrum-listview-item-border-radius);\n        }\n      }\n    }\n  }\n}\n\n.react-spectrum-ListView-row[data-href] {\n  cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n  display: grid; /* TODO: define grid areas */\n  box-sizing: border-box;\n  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n  line-height: var(--spectrum-listview-item-line-height);\n  padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n  position: relative;\n  /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n  color: var(--spectrum-listview-item-text-color);\n  outline: 0;\n  min-height: var(--spectrum-global-dimension-size-500);\n\n  &.is-hovered,\n  &.is-focused {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &:focus-visible {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n  }\n\n  &.is-active {\n    background-color: var(--spectrum-listview-item-background-color-down);\n  }\n\n  &.is-selected {\n    background-color: var(--spectrum-listview-item-background-color-hover);\n\n    &.is-hovered,\n    &.is-active {\n      background-color: var(--spectrum-listview-item-background-color-hover);\n    }\n\n    &:focus-visible {\n      background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n    }\n  }\n\n  &.is-disabled {\n    &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n      color: var(--spectrum-listview-item-text-color-disabled);\n    }\n  }\n\n  &.has-checkbox {\n    /* have to eliminate vertical padding to allow proper vertical alignment */\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .react-spectrum-ListViewItem-grid {\n    display: grid;\n    grid-template-columns: auto auto auto 1fr auto auto auto;\n    grid-template-rows: 1fr auto;\n    grid-template-areas:\n      \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n      \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n    align-items: center;\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    grid-area: draghandle;\n    width: var(--spectrum-global-dimension-size-250);\n    display: flex;\n    align-self: stretch;\n    justify-self: stretch;\n    justify-content: center;\n    padding: var(--spectrum-global-dimension-size-25);\n    padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      width: var(--spectrum-global-dimension-size-200);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n\n      &:focus-visible {\n        box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n        outline: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-checkboxWrapper {\n    grid-area: checkbox;\n    align-items: center;\n    justify-items: center;\n    transition-duration: 160ms;\n    display: flex;\n  }\n\n  .react-spectrum-ListViewItem-checkbox {\n    min-height: 0;\n    height: 100%;\n\n    > span {\n      margin: 0;\n    }\n  }\n\n  .react-spectrum-ListViewItem-thumbnail {\n    box-sizing: content-box;\n    grid-area: thumbnail;\n    justify-items: center;\n    padding-inline-end: var(--spectrum-global-dimension-size-100);\n    display: flex;\n    border-radius: var(--spectrum-global-dimension-size-25);\n    width: var(--spectrum-global-dimension-size-400);\n    height: var(--spectrum-global-dimension-size-400);\n    align-items: center;\n    justify-content: center;\n\n    > img {\n      width: unset;\n      height: 100%;\n    }\n  }\n\n  .react-spectrum-ListViewItem-content,\n  .react-spectrum-ListViewItem-description {\n    flex-grow: 1;\n\n    /* truncate text with ellipsis */\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    height: var(--spectrum-listview-item-line-height);\n  }\n\n  .react-spectrum-ListViewItem-content {\n    grid-area: content;\n    color: var(--spectrum-listview-item-title-text-color);\n    font-size: var(--spectrum-listview-item-title-text-size);\n  }\n\n  &:not(.react-spectrum-ListView--hasDescription) {\n    .react-spectrum-ListViewItem-content {\n      grid-area: content / description;\n    }\n  }\n\n  .react-spectrum-ListViewItem-description {\n    grid-area: description;\n    color: var(--spectrum-listview-item-description-text-color);\n    font-size: var(--spectrum-listview-item-description-text-size);\n  }\n\n  .react-spectrum-ListViewItem-actions {\n    grid-area: actions;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  .react-spectrum-ListViewItem-actionmenu {\n    grid-area: actionmenu;\n  }\n\n  .react-spectrum-ListViewItem-parentIndicator {\n    grid-area: chevron;\n    padding-inline-start: var(--spectrum-global-dimension-size-75);\n    display: none;\n    transition: color var(--spectrum-global-animation-duration-100);\n\n    &.is-disabled {\n      color: var(--spectrum-alias-icon-color-disabled);\n    }\n  }\n\n  &.react-spectrum-ListViewItem-dragPreview {\n    width: var(--spectrum-global-dimension-size-2400);\n    border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n    border-radius: var(--spectrum-alias-border-radius-regular);\n    background-color: var(--spectrum-listview-background-color);\n\n    /* forced-color-adjust: none, so that background-color style will render */\n    forced-color-adjust: none;\n\n    &.react-spectrum-ListViewItem-dragPreview--compact {\n      padding-top: var(--spectrum-listview-item-compact-padding-y);\n      padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--spacious {\n      padding-top: var(--spectrum-listview-item-spacious-padding-y);\n      padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n    }\n\n    .react-spectrum-ListViewItem-grid {\n      grid-template-areas:\n        \"thumbnail content     . badge\"\n        \"thumbnail description . badge\";\n      grid-template-columns: auto auto 1fr auto;\n    }\n\n    .react-spectrum-ListViewItem-badge {\n      grid-area: badge;\n      color: var(--spectrum-listview-item-badge-text-color);\n      background: var(--spectrum-listview-item-badge-background-color);\n      padding: 0 8px;\n      border-radius: var(--spectrum-alias-border-radius-regular);\n    }\n\n    &.react-spectrum-ListViewItem-dragPreview--multiple {\n      position: relative;\n\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: -1;\n        top: 4px;\n        inset-inline-start: 4px;\n        width: 100%;\n        height: 100%;\n        border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n        border-radius: var(--spectrum-alias-border-radius-regular);\n        background-color: var(--spectrum-listview-background-color);\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n    }\n\n    .react-spectrum-ListViewItem-actions,\n    .react-spectrum-ListViewItem-actionmenu {\n      display: none;\n    }\n  }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n  /* give first and last items border-radius to match listview container */\n\n  .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n    border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n    border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n\n  &.react-spectrum-ListView--isVerticalScrollbarVisible {\n    .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n      border-start-end-radius: 0;\n    }\n\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-end-radius: 0;\n    }\n  }\n\n  &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n.react-spectrum-ListView {\n  /* When we can use subgrid, get rid of this. */\n  &.react-spectrum-ListView--hasAnyChildren {\n    .react-spectrum-ListViewItem-parentIndicator {\n      display: inline-block;\n      visibility: hidden;\n    }\n    .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n      visibility: visible;\n    }\n  }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-compact-padding-y);\n  padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n  min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n  padding-top: var(--spectrum-listview-item-spacious-padding-y);\n  padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n  min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {\n  padding-inline-start: 0;\n\n  .react-spectrum-ListViewItem-checkbox {\n    input {\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow:\n    inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n    inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow style will render */\n  forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n  border-color: var(--spectrum-listview-border-color-key-focus);\n  background-color: var(--spectrum-listview-droptarget-background-color);\n  box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n  /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n  forced-color-adjust: none;\n\n  /* Add border to quiet ListView only when it is a drop target */\n  &.react-spectrum-ListView--quiet {\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n  }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  &.react-spectrum-ListView-centeredWrapper--loadingMore {\n    padding-top: var(--spectrum-global-dimension-size-50);\n  }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n  width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n  inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n  position: absolute;\n  outline: none;\n\n  &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n    background: var(--spectrum-listview-dropindicator-border-color);\n    border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that background color\n    will render border for insertion indicator. */\n    forced-color-adjust: none;\n\n    &:before {\n      left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:after {\n      right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n    }\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n      width: var(--spectrum-listview-dropindicator-circle-size);\n      height: var(--spectrum-listview-dropindicator-circle-size);\n      border-radius: 50%;\n      border: var(--spectrum-listview-dropindicator-border-size) solid;\n      box-sizing: border-box;\n      border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n      background-color: var(--spectrum-listview-background-color);\n      z-index: 5;\n\n      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n  opacity: 0.01;\n  max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n  opacity: 1;\n  max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n  opacity: 0.01;\n  max-width: 0px;\n}\n\n.react-spectrum-ListView {\n  &:focus-visible {\n    border-color: var(--spectrum-listview-border-color-key-focus);\n    box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n  }\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-ListView,\n  .react-spectrum-ListViewItem {\n    --spectrum-listview-background-color: Canvas;\n    --spectrum-listview-item-background-color: Canvas;\n    --spectrum-listview-item-background-color-selected: Canvas;\n    --spectrum-listview-border-color-key-focus: Highlight;\n    --spectrum-listview-item-border-color: CanvasText;\n    --spectrum-listview-item-border-color-selected: Highlight;\n    --spectrum-listview-item-border-color-key-focus: Highlight;\n    --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n    --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n    --spectrum-listview-dropindicator-border-color: Highlight;\n    --spectrum-listview-dropindicator-circle-border-color: Highlight;\n    --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-listview-item-badge-text-color: HighlightText;\n    --spectrum-listview-item-badge-background-color: Highlight;\n    --spectrum-listview-item-title-text-color: CanvasText;\n    --spectrum-listview-item-description-text-color: CanvasText;\n  }\n\n  .react-spectrum-ListView-row {\n    &:focus-visible {\n      .react-spectrum-ListViewItem {\n        /* Adds a full outline style to the focused listview item to better distinguish between\n        the selected, not selected, selected + focused and selected + not focused\n        states without using a background color on the row in forced-colors: active mode. */\n        &:after {\n          outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n          outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n          top: calc(-1 * var(--spectrum-listview-border-width));\n          height: calc(100% + var(--spectrum-listview-border-width));\n        }\n      }\n    }\n  }\n\n  .react-spectrum-ListViewItem-draghandle-container {\n    box-sizing: content-box;\n\n    .react-spectrum-ListViewItem-draghandle-button {\n      /* Use CanvasText, so that focus ring color on drag handle button matches\n      focus ring color for other interactive elements within the listview item. */\n      --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n    }\n  }\n\n}\n"],"names":[],"version":3,"file":"styles_css.main.js.map"}

package/dist/styles_css.mjs

@@ -130,69 +130,69 @@ var $c8bc378300208597$export$38c6ebb7f58dedaa;
 var $c8bc378300208597$export$8a26470723c97997;
 var $c8bc378300208597$export$3b4577d06eb82ec0;
 var $c8bc378300208597$export$e77609e6ef08541e;
-$c8bc378300208597$export$bd7f6383fb9d6b48 = `C64cMW_actionmenu`;
-$c8bc378300208597$export$e324594224ef24da = `C64cMW_actions`;
-$c8bc378300208597$export$4aebd143f31d0c0d = `C64cMW_badge`;
-$c8bc378300208597$export$b07e517d22efa1ca = `C64cMW_checkbox`;
-$c8bc378300208597$export$980c1089c0604ea3 = `C64cMW_chevron`;
-$c8bc378300208597$export$a7db06668cad9adb = `C64cMW_content`;
-$c8bc378300208597$export$6d59db4903f20f7d = `C64cMW_description`;
-$c8bc378300208597$export$7b34ab0dc3a6dc3b = `C64cMW_draghandle`;
-$c8bc378300208597$export$f39a09f249340e2a = `C64cMW_focus-ring`;
-$c8bc378300208597$export$27f4d14f7fc5b94 = `C64cMW_has-checkbox`;
-$c8bc378300208597$export$20fd0f7cd4e6112f = `C64cMW_is-active`;
-$c8bc378300208597$export$d35bc1e505d1ebbf = `C64cMW_is-disabled`;
-$c8bc378300208597$export$e7dc768d35940237 = `C64cMW_is-focused`;
-$c8bc378300208597$export$b8813cd5d7824ce7 = `C64cMW_is-hovered`;
-$c8bc378300208597$export$53aa811f86efbfad = `C64cMW_is-next-selected`;
-$c8bc378300208597$export$1e0fb04f31d3c22a = `C64cMW_is-selected`;
-$c8bc378300208597$export$4ad4709e9aee8e02 = `C64cMW_react-spectrum-ListView`;
-$c8bc378300208597$export$1f55b27adf96a61e = `C64cMW_react-spectrum-ListView--compact`;
-$c8bc378300208597$export$a2d35348c0cc9bca = `C64cMW_react-spectrum-ListView--draggable`;
-$c8bc378300208597$export$d9ba3f873d0eaec6 = `C64cMW_react-spectrum-ListView--dropTarget`;
-$c8bc378300208597$export$eb0d5352b2a55473 = `C64cMW_react-spectrum-ListView--emphasized`;
-$c8bc378300208597$export$7150e72e440612bf = `C64cMW_react-spectrum-ListView--hasAnyChildren`;
-$c8bc378300208597$export$7c9efe74c4b77579 = `C64cMW_react-spectrum-ListView--hasDescription`;
-$c8bc378300208597$export$d9b13621bc5dd4d1 = `C64cMW_react-spectrum-ListView--isHorizontalScrollbarVisible`;
-$c8bc378300208597$export$1bf50375883926 = `C64cMW_react-spectrum-ListView--isVerticalScrollbarVisible`;
-$c8bc378300208597$export$5aa06adeaa92dbca = `C64cMW_react-spectrum-ListView--loadingMore`;
-$c8bc378300208597$export$b01cb9680b0b8d22 = `C64cMW_react-spectrum-ListView--quiet`;
-$c8bc378300208597$export$cbd30c7809acdd81 = `C64cMW_react-spectrum-ListView--spacious`;
-$c8bc378300208597$export$68b45d42c77fe1cf = `C64cMW_react-spectrum-ListView--wrap`;
-$c8bc378300208597$export$1b66ee5cd8394caf = `C64cMW_react-spectrum-ListView-centeredWrapper`;
-$c8bc378300208597$export$6b3b7792abd9e5f4 = `C64cMW_react-spectrum-ListView-centeredWrapper--loadingMore`;
-$c8bc378300208597$export$f80410436c6352c8 = `C64cMW_react-spectrum-ListView-row`;
-$c8bc378300208597$export$2a6a235e0baff403 = `C64cMW_react-spectrum-ListViewInsertionIndicator`;
-$c8bc378300208597$export$927a243805a411ca = `C64cMW_react-spectrum-ListViewInsertionIndicator--dropTarget`;
-$c8bc378300208597$export$ce8c93b50eec2d4f = `C64cMW_react-spectrum-ListViewItem`;
-$c8bc378300208597$export$8afa006321ee3a8f = `C64cMW_react-spectrum-ListViewItem--dropTarget`;
-$c8bc378300208597$export$60162f05499b7560 = `C64cMW_react-spectrum-ListViewItem--firstRow`;
-$c8bc378300208597$export$f9ed481cac4d935a = `C64cMW_react-spectrum-ListViewItem--isFlushBottom`;
-$c8bc378300208597$export$659c081622dc13b0 = `C64cMW_react-spectrum-ListViewItem--lastRow`;
-$c8bc378300208597$export$58dfda3903289699 = `C64cMW_react-spectrum-ListViewItem-actionmenu`;
-$c8bc378300208597$export$26480389595d4515 = `C64cMW_react-spectrum-ListViewItem-actions`;
-$c8bc378300208597$export$6498e436231eea33 = `C64cMW_react-spectrum-ListViewItem-badge`;
-$c8bc378300208597$export$f979f76ca45242f2 = `C64cMW_react-spectrum-ListViewItem-checkbox`;
-$c8bc378300208597$export$9dc11c0e0825a249 = `C64cMW_react-spectrum-ListViewItem-checkbox--enter`;
-$c8bc378300208597$export$f89865e352230a35 = `C64cMW_react-spectrum-ListViewItem-checkbox--enterActive`;
-$c8bc378300208597$export$867c05a16e5d2a7c = `C64cMW_react-spectrum-ListViewItem-checkbox--exit`;
-$c8bc378300208597$export$61b66671605f1b1a = `C64cMW_react-spectrum-ListViewItem-checkbox--exitActive`;
-$c8bc378300208597$export$41a33ae9818c51be = `C64cMW_react-spectrum-ListViewItem-checkboxWrapper`;
-$c8bc378300208597$export$dc2b0b08d47555 = `C64cMW_react-spectrum-ListViewItem-content`;
-$c8bc378300208597$export$5d2adfeb248e654a = `C64cMW_react-spectrum-ListViewItem-description`;
-$c8bc378300208597$export$84286d36e5c00c55 = `C64cMW_react-spectrum-ListViewItem-dragPreview`;
-$c8bc378300208597$export$fcabaf52adc14efe = `C64cMW_react-spectrum-ListViewItem-dragPreview--compact`;
-$c8bc378300208597$export$2fb3c7c2d5c0d720 = `C64cMW_react-spectrum-ListViewItem-dragPreview--multiple`;
-$c8bc378300208597$export$256b97e812db1642 = `C64cMW_react-spectrum-ListViewItem-dragPreview--spacious`;
-$c8bc378300208597$export$4784f0c2ec8bbf7b = `C64cMW_react-spectrum-ListViewItem-draghandle-button`;
-$c8bc378300208597$export$f385e7456ddfee84 = `C64cMW_react-spectrum-ListViewItem-draghandle-container`;
-$c8bc378300208597$export$aaaf83100348d389 = `C64cMW_react-spectrum-ListViewItem-grid`;
-$c8bc378300208597$export$39b42a8a24290c17 = `C64cMW_react-spectrum-ListViewItem-parentIndicator`;
-$c8bc378300208597$export$c29dcfa80dab8c88 = `C64cMW_react-spectrum-ListViewItem-parentIndicator--hasChildItems`;
-$c8bc378300208597$export$38c6ebb7f58dedaa = `C64cMW_react-spectrum-ListViewItem-thumbnail`;
-$c8bc378300208597$export$8a26470723c97997 = `C64cMW_round-bottoms`;
-$c8bc378300208597$export$3b4577d06eb82ec0 = `C64cMW_round-tops`;
-$c8bc378300208597$export$e77609e6ef08541e = `C64cMW_thumbnail`;
+$c8bc378300208597$export$bd7f6383fb9d6b48 = `_2cwvvq_actionmenu`;
+$c8bc378300208597$export$e324594224ef24da = `_2cwvvq_actions`;
+$c8bc378300208597$export$4aebd143f31d0c0d = `_2cwvvq_badge`;
+$c8bc378300208597$export$b07e517d22efa1ca = `_2cwvvq_checkbox`;
+$c8bc378300208597$export$980c1089c0604ea3 = `_2cwvvq_chevron`;
+$c8bc378300208597$export$a7db06668cad9adb = `_2cwvvq_content`;
+$c8bc378300208597$export$6d59db4903f20f7d = `_2cwvvq_description`;
+$c8bc378300208597$export$7b34ab0dc3a6dc3b = `_2cwvvq_draghandle`;
+$c8bc378300208597$export$f39a09f249340e2a = `_2cwvvq_focus-ring`;
+$c8bc378300208597$export$27f4d14f7fc5b94 = `_2cwvvq_has-checkbox`;
+$c8bc378300208597$export$20fd0f7cd4e6112f = `_2cwvvq_is-active`;
+$c8bc378300208597$export$d35bc1e505d1ebbf = `_2cwvvq_is-disabled`;
+$c8bc378300208597$export$e7dc768d35940237 = `_2cwvvq_is-focused`;
+$c8bc378300208597$export$b8813cd5d7824ce7 = `_2cwvvq_is-hovered`;
+$c8bc378300208597$export$53aa811f86efbfad = `_2cwvvq_is-next-selected`;
+$c8bc378300208597$export$1e0fb04f31d3c22a = `_2cwvvq_is-selected`;
+$c8bc378300208597$export$4ad4709e9aee8e02 = `_2cwvvq_react-spectrum-ListView`;
+$c8bc378300208597$export$1f55b27adf96a61e = `_2cwvvq_react-spectrum-ListView--compact`;
+$c8bc378300208597$export$a2d35348c0cc9bca = `_2cwvvq_react-spectrum-ListView--draggable`;
+$c8bc378300208597$export$d9ba3f873d0eaec6 = `_2cwvvq_react-spectrum-ListView--dropTarget`;
+$c8bc378300208597$export$eb0d5352b2a55473 = `_2cwvvq_react-spectrum-ListView--emphasized`;
+$c8bc378300208597$export$7150e72e440612bf = `_2cwvvq_react-spectrum-ListView--hasAnyChildren`;
+$c8bc378300208597$export$7c9efe74c4b77579 = `_2cwvvq_react-spectrum-ListView--hasDescription`;
+$c8bc378300208597$export$d9b13621bc5dd4d1 = `_2cwvvq_react-spectrum-ListView--isHorizontalScrollbarVisible`;
+$c8bc378300208597$export$1bf50375883926 = `_2cwvvq_react-spectrum-ListView--isVerticalScrollbarVisible`;
+$c8bc378300208597$export$5aa06adeaa92dbca = `_2cwvvq_react-spectrum-ListView--loadingMore`;
+$c8bc378300208597$export$b01cb9680b0b8d22 = `_2cwvvq_react-spectrum-ListView--quiet`;
+$c8bc378300208597$export$cbd30c7809acdd81 = `_2cwvvq_react-spectrum-ListView--spacious`;
+$c8bc378300208597$export$68b45d42c77fe1cf = `_2cwvvq_react-spectrum-ListView--wrap`;
+$c8bc378300208597$export$1b66ee5cd8394caf = `_2cwvvq_react-spectrum-ListView-centeredWrapper`;
+$c8bc378300208597$export$6b3b7792abd9e5f4 = `_2cwvvq_react-spectrum-ListView-centeredWrapper--loadingMore`;
+$c8bc378300208597$export$f80410436c6352c8 = `_2cwvvq_react-spectrum-ListView-row`;
+$c8bc378300208597$export$2a6a235e0baff403 = `_2cwvvq_react-spectrum-ListViewInsertionIndicator`;
+$c8bc378300208597$export$927a243805a411ca = `_2cwvvq_react-spectrum-ListViewInsertionIndicator--dropTarget`;
+$c8bc378300208597$export$ce8c93b50eec2d4f = `_2cwvvq_react-spectrum-ListViewItem`;
+$c8bc378300208597$export$8afa006321ee3a8f = `_2cwvvq_react-spectrum-ListViewItem--dropTarget`;
+$c8bc378300208597$export$60162f05499b7560 = `_2cwvvq_react-spectrum-ListViewItem--firstRow`;
+$c8bc378300208597$export$f9ed481cac4d935a = `_2cwvvq_react-spectrum-ListViewItem--isFlushBottom`;
+$c8bc378300208597$export$659c081622dc13b0 = `_2cwvvq_react-spectrum-ListViewItem--lastRow`;
+$c8bc378300208597$export$58dfda3903289699 = `_2cwvvq_react-spectrum-ListViewItem-actionmenu`;
+$c8bc378300208597$export$26480389595d4515 = `_2cwvvq_react-spectrum-ListViewItem-actions`;
+$c8bc378300208597$export$6498e436231eea33 = `_2cwvvq_react-spectrum-ListViewItem-badge`;
+$c8bc378300208597$export$f979f76ca45242f2 = `_2cwvvq_react-spectrum-ListViewItem-checkbox`;
+$c8bc378300208597$export$9dc11c0e0825a249 = `_2cwvvq_react-spectrum-ListViewItem-checkbox--enter`;
+$c8bc378300208597$export$f89865e352230a35 = `_2cwvvq_react-spectrum-ListViewItem-checkbox--enterActive`;
+$c8bc378300208597$export$867c05a16e5d2a7c = `_2cwvvq_react-spectrum-ListViewItem-checkbox--exit`;
+$c8bc378300208597$export$61b66671605f1b1a = `_2cwvvq_react-spectrum-ListViewItem-checkbox--exitActive`;
+$c8bc378300208597$export$41a33ae9818c51be = `_2cwvvq_react-spectrum-ListViewItem-checkboxWrapper`;
+$c8bc378300208597$export$dc2b0b08d47555 = `_2cwvvq_react-spectrum-ListViewItem-content`;
+$c8bc378300208597$export$5d2adfeb248e654a = `_2cwvvq_react-spectrum-ListViewItem-description`;
+$c8bc378300208597$export$84286d36e5c00c55 = `_2cwvvq_react-spectrum-ListViewItem-dragPreview`;
+$c8bc378300208597$export$fcabaf52adc14efe = `_2cwvvq_react-spectrum-ListViewItem-dragPreview--compact`;
+$c8bc378300208597$export$2fb3c7c2d5c0d720 = `_2cwvvq_react-spectrum-ListViewItem-dragPreview--multiple`;
+$c8bc378300208597$export$256b97e812db1642 = `_2cwvvq_react-spectrum-ListViewItem-dragPreview--spacious`;
+$c8bc378300208597$export$4784f0c2ec8bbf7b = `_2cwvvq_react-spectrum-ListViewItem-draghandle-button`;
+$c8bc378300208597$export$f385e7456ddfee84 = `_2cwvvq_react-spectrum-ListViewItem-draghandle-container`;
+$c8bc378300208597$export$aaaf83100348d389 = `_2cwvvq_react-spectrum-ListViewItem-grid`;
+$c8bc378300208597$export$39b42a8a24290c17 = `_2cwvvq_react-spectrum-ListViewItem-parentIndicator`;
+$c8bc378300208597$export$c29dcfa80dab8c88 = `_2cwvvq_react-spectrum-ListViewItem-parentIndicator--hasChildItems`;
+$c8bc378300208597$export$38c6ebb7f58dedaa = `_2cwvvq_react-spectrum-ListViewItem-thumbnail`;
+$c8bc378300208597$export$8a26470723c97997 = `_2cwvvq_round-bottoms`;
+$c8bc378300208597$export$3b4577d06eb82ec0 = `_2cwvvq_round-tops`;
+$c8bc378300208597$export$e77609e6ef08541e = `_2cwvvq_thumbnail`;
 
 
 export {$c8bc378300208597$exports as default};