@react-spectrum/list 3.7.5-nightly.4321 → 3.7.5

package/dist/main.css.map

@@ -0,0 +1 @@
+{"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;AAiBE;;;;AAQM;;;;;AAQF;;;;;;;;;;;;;AAeA;;;;AAEE;;;;AAAA;;;;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;;;;;AAAA;;;;;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;;;;AAAA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAGE;;;;AAAA;;;;AAKA;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAMA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;AAOE;;;;;;AAUJ;;;;;;;AAQA;;;;;AAIE;;;;AAKF;;;;;;;;;;;;AAYE;;;;;AAMF;;;;;;;;AAAA;;;;;;;;AAWA;;;;;;AAOE;;;;AAKF;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;;;AAME;;;;AAKF;;;;;;;;AASE;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;;;;;AAQA;;;;AAGE;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBF;;;;AAAA;;;;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;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;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":"main.css.map"}

package/dist/main.js

@@ -1,4 +1,40 @@
+"use client";
+
 require("./main.css");
+var $1beeff0a5a0ccb2a$exports = require("./ar-AE.main.js");
+var $8d53c5c3a365f51f$exports = require("./bg-BG.main.js");
+var $99a0008efa578202$exports = require("./cs-CZ.main.js");
+var $fed6a92f3a9a90c2$exports = require("./da-DK.main.js");
+var $ad6943b7faf38b41$exports = require("./de-DE.main.js");
+var $ed6da119df8f733b$exports = require("./el-GR.main.js");
+var $a922ddd791b2701d$exports = require("./en-US.main.js");
+var $1616ac893d9df40d$exports = require("./es-ES.main.js");
+var $71139980c308673a$exports = require("./et-EE.main.js");
+var $df400f4d8990deb0$exports = require("./fi-FI.main.js");
+var $4fedac3a4a024339$exports = require("./fr-FR.main.js");
+var $0c1298be372fa672$exports = require("./he-IL.main.js");
+var $aac34baf9a6ccbce$exports = require("./hr-HR.main.js");
+var $6d93c8a72fbf4a90$exports = require("./hu-HU.main.js");
+var $69346d8975e9f344$exports = require("./it-IT.main.js");
+var $b263dd2c132d2852$exports = require("./ja-JP.main.js");
+var $b79146096cdb30c7$exports = require("./ko-KR.main.js");
+var $adc50e375b062a9e$exports = require("./lt-LT.main.js");
+var $20ba6eae003d4c10$exports = require("./lv-LV.main.js");
+var $6a03ad2ccd528f82$exports = require("./nb-NO.main.js");
+var $6bdc84276c605774$exports = require("./nl-NL.main.js");
+var $41e9b40a686907b7$exports = require("./pl-PL.main.js");
+var $332f285483e392b9$exports = require("./pt-BR.main.js");
+var $21a7a272ae3b9fd4$exports = require("./pt-PT.main.js");
+var $7f773822d0ecfb7d$exports = require("./ro-RO.main.js");
+var $7d8f25b69820e6ce$exports = require("./ru-RU.main.js");
+var $ef1cbac310feac6e$exports = require("./sk-SK.main.js");
+var $a37847ff0890b3f8$exports = require("./sl-SI.main.js");
+var $f95d6d9be7c5418d$exports = require("./sr-SP.main.js");
+var $eb2bbd94105316d8$exports = require("./sv-SE.main.js");
+var $afc69bf18d2f3b1a$exports = require("./tr-TR.main.js");
+var $eda3e7326f5e4dcb$exports = require("./uk-UA.main.js");
+var $6d455ae2db499a05$exports = require("./zh-CN.main.js");
+var $0fa2d17f8a898b48$exports = require("./zh-TW.main.js");
 var $k9Du2$reactstatelycollections = require("@react-stately/collections");
 var $k9Du2$reactariagridlist = require("@react-aria/gridlist");
 var $k9Du2$reactspectrumutils = require("@react-spectrum/utils");
@@ -281,242 +317,38 @@ function $fc02fd49ab58c72e$export$2e2bcd8739ae039(props) {
 
 
 var $2ebea2d8da6d3b78$exports = {};
-var $1beeff0a5a0ccb2a$exports = {};
-$1beeff0a5a0ccb2a$exports = {
-    "loading": `\u{62C}\u{627}\u{631}\u{64D} \u{627}\u{644}\u{62A}\u{62D}\u{645}\u{64A}\u{644}...`,
-    "loadingMore": `\u{62C}\u{627}\u{631}\u{64D} \u{62A}\u{62D}\u{645}\u{64A}\u{644} \u{627}\u{644}\u{645}\u{632}\u{64A}\u{62F}...`
-};
 
 
-var $8d53c5c3a365f51f$exports = {};
-$8d53c5c3a365f51f$exports = {
-    "loading": `\u{417}\u{430}\u{440}\u{435}\u{436}\u{434}\u{430}\u{43D}\u{435}...`,
-    "loadingMore": `\u{417}\u{430}\u{440}\u{435}\u{436}\u{434}\u{430}\u{43D}\u{435} \u{43D}\u{430} \u{43E}\u{449}\u{435}...`
-};
 
 
-var $99a0008efa578202$exports = {};
-$99a0008efa578202$exports = {
-    "loading": `Na\u{10D}\xedt\xe1n\xed...`,
-    "loadingMore": `Na\u{10D}\xedt\xe1n\xed dal\u{161}\xedch...`
-};
 
 
-var $fed6a92f3a9a90c2$exports = {};
-$fed6a92f3a9a90c2$exports = {
-    "loading": `Indl\xe6ser...`,
-    "loadingMore": `Indl\xe6ser flere...`
-};
 
 
-var $ad6943b7faf38b41$exports = {};
-$ad6943b7faf38b41$exports = {
-    "loading": `Laden...`,
-    "loadingMore": `Mehr laden ...`
-};
-
 
-var $ed6da119df8f733b$exports = {};
-$ed6da119df8f733b$exports = {
-    "loading": `\u{3A6}\u{3CC}\u{3C1}\u{3C4}\u{3C9}\u{3C3}\u{3B7}...`,
-    "loadingMore": `\u{3A6}\u{3CC}\u{3C1}\u{3C4}\u{3C9}\u{3C3}\u{3B7} \u{3C0}\u{3B5}\u{3C1}\u{3B9}\u{3C3}\u{3C3}\u{3CC}\u{3C4}\u{3B5}\u{3C1}\u{3C9}\u{3BD}...`
-};
 
 
-var $a922ddd791b2701d$exports = {};
-$a922ddd791b2701d$exports = {
-    "loading": `Loading\u{2026}`,
-    "loadingMore": `Loading more\u{2026}`
-};
 
 
-var $1616ac893d9df40d$exports = {};
-$1616ac893d9df40d$exports = {
-    "loading": `Cargando\u{2026}`,
-    "loadingMore": `Cargando m\xe1s\u{2026}`
-};
 
 
-var $71139980c308673a$exports = {};
-$71139980c308673a$exports = {
-    "loading": `Laadimine...`,
-    "loadingMore": `Laadi rohkem...`
-};
 
 
-var $df400f4d8990deb0$exports = {};
-$df400f4d8990deb0$exports = {
-    "loading": `Ladataan\u{2026}`,
-    "loadingMore": `Ladataan lis\xe4\xe4\u{2026}`
-};
 
 
-var $4fedac3a4a024339$exports = {};
-$4fedac3a4a024339$exports = {
-    "loading": `Chargement...`,
-    "loadingMore": `Chargement suppl\xe9mentaire...`
-};
 
 
-var $0c1298be372fa672$exports = {};
-$0c1298be372fa672$exports = {
-    "loading": `\u{5D8}\u{5D5}\u{5E2}\u{5DF}...`,
-    "loadingMore": `\u{5D8}\u{5D5}\u{5E2}\u{5DF} \u{5E2}\u{5D5}\u{5D3}...`
-};
 
 
-var $aac34baf9a6ccbce$exports = {};
-$aac34baf9a6ccbce$exports = {
-    "loading": `U\u{10D}itavam...`,
-    "loadingMore": `U\u{10D}itavam jo\u{161}...`
-};
 
 
-var $6d93c8a72fbf4a90$exports = {};
-$6d93c8a72fbf4a90$exports = {
-    "loading": `Bet\xf6lt\xe9s folyamatban\u{2026}`,
-    "loadingMore": `Tov\xe1bbiak bet\xf6lt\xe9se folyamatban\u{2026}`
-};
 
 
-var $69346d8975e9f344$exports = {};
-$69346d8975e9f344$exports = {
-    "loading": `Caricamento...`,
-    "loadingMore": `Caricamento altri...`
-};
 
 
-var $b263dd2c132d2852$exports = {};
-$b263dd2c132d2852$exports = {
-    "loading": `\u{8AAD}\u{307F}\u{8FBC}\u{307F}\u{4E2D}...`,
-    "loadingMore": `\u{3055}\u{3089}\u{306B}\u{8AAD}\u{307F}\u{8FBC}\u{307F}\u{4E2D}...`
-};
 
 
-var $b79146096cdb30c7$exports = {};
-$b79146096cdb30c7$exports = {
-    "loading": `\u{B85C}\u{B4DC} \u{C911}\u{2026}`,
-    "loadingMore": `\u{CD94}\u{AC00} \u{B85C}\u{B4DC} \u{C911}\u{2026}`
-};
-
-
-var $adc50e375b062a9e$exports = {};
-$adc50e375b062a9e$exports = {
-    "loading": `\u{12E}keliama...`,
-    "loadingMore": `\u{12E}keliama daugiau...`
-};
-
-
-var $20ba6eae003d4c10$exports = {};
-$20ba6eae003d4c10$exports = {
-    "loading": `Notiek iel\u{101}de...`,
-    "loadingMore": `Tiek iel\u{101}d\u{113}ts v\u{113}l...`
-};
-
-
-var $6a03ad2ccd528f82$exports = {};
-$6a03ad2ccd528f82$exports = {
-    "loading": `Laster inn ...`,
-    "loadingMore": `Laster inn flere ...`
-};
-
-
-var $6bdc84276c605774$exports = {};
-$6bdc84276c605774$exports = {
-    "loading": `Laden...`,
-    "loadingMore": `Meer laden...`
-};
-
-
-var $41e9b40a686907b7$exports = {};
-$41e9b40a686907b7$exports = {
-    "loading": `\u{141}adowanie...`,
-    "loadingMore": `Wczytywanie wi\u{119}kszej liczby...`
-};
-
 
-var $332f285483e392b9$exports = {};
-$332f285483e392b9$exports = {
-    "loading": `Carregando...`,
-    "loadingMore": `Carregando mais...`
-};
-
-
-var $21a7a272ae3b9fd4$exports = {};
-$21a7a272ae3b9fd4$exports = {
-    "loading": `A carregar...`,
-    "loadingMore": `A carregar mais...`
-};
-
-
-var $7f773822d0ecfb7d$exports = {};
-$7f773822d0ecfb7d$exports = {
-    "loading": `Se \xeencarc\u{103}...`,
-    "loadingMore": `Se \xeencarc\u{103} mai multe...`
-};
-
-
-var $7d8f25b69820e6ce$exports = {};
-$7d8f25b69820e6ce$exports = {
-    "loading": `\u{417}\u{430}\u{433}\u{440}\u{443}\u{437}\u{43A}\u{430}...`,
-    "loadingMore": `\u{414}\u{43E}\u{43F}\u{43E}\u{43B}\u{43D}\u{438}\u{442}\u{435}\u{43B}\u{44C}\u{43D}\u{430}\u{44F} \u{437}\u{430}\u{433}\u{440}\u{443}\u{437}\u{43A}\u{430}...`
-};
-
-
-var $ef1cbac310feac6e$exports = {};
-$ef1cbac310feac6e$exports = {
-    "loading": `Na\u{10D}\xedtava sa...`,
-    "loadingMore": `Na\u{10D}\xedtava sa viac...`
-};
-
-
-var $a37847ff0890b3f8$exports = {};
-$a37847ff0890b3f8$exports = {
-    "loading": `Nalaganje ...`,
-    "loadingMore": `Nalaganje ve\u{10D} vsebine ...`
-};
-
-
-var $f95d6d9be7c5418d$exports = {};
-$f95d6d9be7c5418d$exports = {
-    "loading": `U\u{10D}itavam...`,
-    "loadingMore": `U\u{10D}itavam jo\u{161}...`
-};
-
-
-var $eb2bbd94105316d8$exports = {};
-$eb2bbd94105316d8$exports = {
-    "loading": `L\xe4ser in...`,
-    "loadingMore": `L\xe4ser in mer...`
-};
-
-
-var $afc69bf18d2f3b1a$exports = {};
-$afc69bf18d2f3b1a$exports = {
-    "loading": `Y\xfckleniyor...`,
-    "loadingMore": `Daha fazla y\xfckleniyor...`
-};
-
-
-var $eda3e7326f5e4dcb$exports = {};
-$eda3e7326f5e4dcb$exports = {
-    "loading": `\u{417}\u{430}\u{432}\u{430}\u{43D}\u{442}\u{430}\u{436}\u{435}\u{43D}\u{43D}\u{44F}\u{2026}`,
-    "loadingMore": `\u{417}\u{430}\u{432}\u{430}\u{43D}\u{442}\u{430}\u{436}\u{435}\u{43D}\u{43D}\u{44F} \u{456}\u{43D}\u{448}\u{438}\u{445} \u{43E}\u{431}\u{2019}\u{454}\u{43A}\u{442}\u{456}\u{432}...`
-};
-
-
-var $6d455ae2db499a05$exports = {};
-$6d455ae2db499a05$exports = {
-    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`,
-    "loadingMore": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}\u{66F4}\u{591A}...`
-};
-
-
-var $0fa2d17f8a898b48$exports = {};
-$0fa2d17f8a898b48$exports = {
-    "loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`,
-    "loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
-};
 
 
 $2ebea2d8da6d3b78$exports = {
@@ -935,7 +767,7 @@ function $60684b441be8e84c$var$ListView(props, ref) {
         selectionBehavior: props.selectionStyle === "highlight" ? "replace" : "toggle"
     });
     let { collection: collection, selectionManager: selectionManager } = state;
-    let stringFormatter = (0, $k9Du2$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($2ebea2d8da6d3b78$exports))));
+    let stringFormatter = (0, $k9Du2$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($2ebea2d8da6d3b78$exports))), "@react-spectrum/list");
     let isLoading = loadingState === "loading" || loadingState === "loadingMore";
     let { styleProps: styleProps } = (0, $k9Du2$reactspectrumutils.useStyleProps)(props);
     let dragState;