@react-spectrum/s2 3.0.0-nightly-1b425caa2-250114 → 3.0.0-nightly-1286a652e-250116

package/dist/CardView.css.map

@@ -1 +1 @@
-{"mappings":"AC+fuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2GY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3GZ;;AAAA;EAAA;IAAA;;;;;;AA2GY","sources":["bcfa03266ec99ed3","packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["@import \"b9a56ec855293cb6\";\n@import \"879fd470e85635cf\";\n","/*\n * Copyright 2024 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\nimport {\n  GridList as AriaGridList,\n  ContextValue,\n  GridLayoutOptions,\n  GridListItem,\n  GridListProps,\n  UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The layout of the cards.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall',\n  /**\n   * The size of the cards.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the cards.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the cards.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'checkbox' | 'highlight',\n  /** The loading state of the CardView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);\n    let iterator = this.virtualizer!.collection[Symbol.iterator]();\n    let y = rows > 0 ? minSpace.height : 0;\n    let newLayoutInfos = new Map();\n    let skeleton: Node<T> | null = null;\n    let skeletonCount = 0;\n    for (let row = 0; row < rows; row++) {\n      let maxHeight = 0;\n      let rowLayoutInfos: LayoutInfo[] = [];\n      for (let col = 0; col < numColumns; col++) {\n        // Repeat skeleton until the end of the current row.\n        let node = skeleton || iterator.next().value;\n        if (!node) {\n          break;\n        }\n\n        if (node.type === 'skeleton') {\n          skeleton = node;\n        }\n\n        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n        let content = skeleton ? {...skeleton} : node;\n        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n        let oldLayoutInfo = this.layoutInfos.get(key);\n        let height = itemHeight;\n        let estimatedSize = true;\n        if (oldLayoutInfo) {\n          height = oldLayoutInfo.rect.height;\n          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n        }\n\n        let rect = new Rect(x, y, itemWidth, height);\n        let layoutInfo = new LayoutInfo(node.type, key, rect);\n        layoutInfo.estimatedSize = estimatedSize;\n        layoutInfo.allowOverflow = true;\n        layoutInfo.content = content;\n        newLayoutInfos.set(key, layoutInfo);\n        rowLayoutInfos.push(layoutInfo);\n\n        maxHeight = Math.max(maxHeight, rect.height);\n      }\n\n      for (let layoutInfo of rowLayoutInfos) {\n        layoutInfo.rect.height = maxHeight;\n      }\n\n      y += maxHeight + minSpace.height;\n\n      // Keep adding skeleton rows until we fill the viewport\n      if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {\n        rows++;\n      }\n    }\n\n    this.layoutInfos = newLayoutInfos;\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n  column = 0;\n\n  copy(): WaterfallLayoutInfo {\n    let res = super.copy() as WaterfallLayoutInfo;\n    res.column = this.column;\n    return res;\n  }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n  protected numColumns = 0;\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n      let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let skeletonCount = 0;\n    for (let node of this.virtualizer!.collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else {\n        addNode(node.key, node);\n      }\n    }\n\n    // Reset all columns to the maximum for the next section\n    let maxHeight = Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spacially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spacially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle\n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n}\n\nconst layoutOptions = {\n  XS: {\n    compact: {\n      minSpace: new Size(6, 6),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    regular: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    spacious: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    }\n  },\n  S: {\n    compact: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    regular: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    spacious: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    }\n  },\n  M: {\n    compact: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    regular: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    spacious: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    }\n  },\n  L: {\n    compact: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    regular: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    spacious: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    }\n  },\n  XL: {\n    compact: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    regular: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    spacious: {\n      minSpace: new Size(28, 28),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    }\n  }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n  overflowY: {\n    default: 'auto',\n    isLoading: 'hidden'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  boxSizing: 'border-box',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isEmpty: {\n      isFocusVisible: 'solid'\n    }\n  },\n  outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\n  let layout = useMemo(() => {\n    return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n  }, [layoutName]);\n\n  // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n  let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n  let updateSize = useEffectEvent(() => {\n    let w = scrollRef.current?.clientWidth ?? 0;\n    let i = SIZES.length - 1;\n    while (i > 0) {\n      let opts = layoutOptions[SIZES[i]][density];\n      if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n        break;\n      }\n      i--;\n    }\n    setMaxSizeIndex(i);\n  });\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSize();\n  }, [updateSize]);\n\n  // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n  let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n  let options = layoutOptions[size][density];\n\n  useLoadMore({\n    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n    onLoadMore: props.onLoadMore\n  }, scrollRef);\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n  let cardView = (\n    <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={GridListItem}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...UNSAFE_style,\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n              {children}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </UNSTABLE_Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div ref={domRef} className={style({position: 'relative', overflow: 'clip', size: 'fit'})}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.css.map"}
+{"mappings":"AC+fuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2GY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3GZ;;AAAA;EAAA;IAAA","sources":["bcfa03266ec99ed3","packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["@import \"b9a56ec855293cb6\";\n@import \"879fd470e85635cf\";\n","/*\n * Copyright 2024 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\nimport {\n  GridList as AriaGridList,\n  ContextValue,\n  GridLayoutOptions,\n  GridListItem,\n  GridListProps,\n  UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The layout of the cards.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall',\n  /**\n   * The size of the cards.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the cards.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the cards.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'checkbox' | 'highlight',\n  /** The loading state of the CardView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);\n    let iterator = this.virtualizer!.collection[Symbol.iterator]();\n    let y = rows > 0 ? minSpace.height : 0;\n    let newLayoutInfos = new Map();\n    let skeleton: Node<T> | null = null;\n    let skeletonCount = 0;\n    for (let row = 0; row < rows; row++) {\n      let maxHeight = 0;\n      let rowLayoutInfos: LayoutInfo[] = [];\n      for (let col = 0; col < numColumns; col++) {\n        // Repeat skeleton until the end of the current row.\n        let node = skeleton || iterator.next().value;\n        if (!node) {\n          break;\n        }\n\n        if (node.type === 'skeleton') {\n          skeleton = node;\n        }\n\n        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n        let content = skeleton ? {...skeleton} : node;\n        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n        let oldLayoutInfo = this.layoutInfos.get(key);\n        let height = itemHeight;\n        let estimatedSize = true;\n        if (oldLayoutInfo) {\n          height = oldLayoutInfo.rect.height;\n          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n        }\n\n        let rect = new Rect(x, y, itemWidth, height);\n        let layoutInfo = new LayoutInfo(node.type, key, rect);\n        layoutInfo.estimatedSize = estimatedSize;\n        layoutInfo.allowOverflow = true;\n        layoutInfo.content = content;\n        newLayoutInfos.set(key, layoutInfo);\n        rowLayoutInfos.push(layoutInfo);\n\n        maxHeight = Math.max(maxHeight, rect.height);\n      }\n\n      for (let layoutInfo of rowLayoutInfos) {\n        layoutInfo.rect.height = maxHeight;\n      }\n\n      y += maxHeight + minSpace.height;\n\n      // Keep adding skeleton rows until we fill the viewport\n      if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {\n        rows++;\n      }\n    }\n\n    this.layoutInfos = newLayoutInfos;\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n  column = 0;\n\n  copy(): WaterfallLayoutInfo {\n    let res = super.copy() as WaterfallLayoutInfo;\n    res.column = this.column;\n    return res;\n  }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n  protected numColumns = 0;\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n      let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;\n      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let skeletonCount = 0;\n    for (let node of this.virtualizer!.collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else {\n        addNode(node.key, node);\n      }\n    }\n\n    // Reset all columns to the maximum for the next section\n    let maxHeight = Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spacially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spacially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle\n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n}\n\nconst layoutOptions = {\n  XS: {\n    compact: {\n      minSpace: new Size(6, 6),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    regular: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    spacious: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    }\n  },\n  S: {\n    compact: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    regular: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    spacious: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    }\n  },\n  M: {\n    compact: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    regular: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    spacious: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    }\n  },\n  L: {\n    compact: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    regular: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    spacious: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    }\n  },\n  XL: {\n    compact: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    regular: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    spacious: {\n      minSpace: new Size(28, 28),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    }\n  }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n  overflowY: {\n    default: 'auto',\n    isLoading: 'hidden'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  boxSizing: 'border-box',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isEmpty: {\n      isFocusVisible: 'solid'\n    }\n  },\n  outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\n  let layout = useMemo(() => {\n    return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n  }, [layoutName]);\n\n  // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n  let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n  let updateSize = useEffectEvent(() => {\n    let w = scrollRef.current?.clientWidth ?? 0;\n    let i = SIZES.length - 1;\n    while (i > 0) {\n      let opts = layoutOptions[SIZES[i]][density];\n      if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n        break;\n      }\n      i--;\n    }\n    setMaxSizeIndex(i);\n  });\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSize();\n  }, [updateSize]);\n\n  // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n  let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n  let options = layoutOptions[size][density];\n\n  useLoadMore({\n    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n    onLoadMore: props.onLoadMore\n  }, scrollRef);\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n  let cardView = (\n    <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={GridListItem}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...UNSAFE_style,\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n              {children}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </UNSTABLE_Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div ref={domRef} className={style({position: 'relative', overflow: 'clip', size: 'fit'})}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.css.map"}

package/dist/CenterBaseline.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   ._0d {
     display: flex;
@@ -18,5 +14,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 /*# sourceMappingURL=CenterBaseline.css.map */

package/dist/CenterBaseline.css.map

@@ -1 +1 @@
-{"mappings":"ACyBe;;;;AAAA;EAAA;;;;EAAA;;;;EAgBqB;;;;;;;AAhBrB","sources":["5200e45b7300f3eb","packages/@react-spectrum/s2/src/CenterBaseline.tsx"],"sourcesContent":["@import \"e3be4b39d25f6594\";\n@import \"a66f99bb46e8cd70\";\n","/*\n * Copyright 2024 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\nimport {CSSProperties, ReactNode} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\ninterface CenterBaselineProps {\n  style?: CSSProperties,\n  styles?: StyleString,\n  children: ReactNode,\n  slot?: string\n}\n\nconst styles = style({\n  display: 'flex',\n  alignItems: 'center'\n});\n\nexport function CenterBaseline(props: CenterBaselineProps) {\n  return (\n    <div\n      slot={props.slot}\n      style={props.style}\n      className={mergeStyles(styles, props.styles) + ' ' + centerBaselineBefore}>\n      {props.children}\n    </div>\n  );\n}\n\nexport const centerBaselineBefore = raw('&::before { content: \"\\u00a0\"; width: 0; visibility: hidden }');\n\nexport function centerBaseline(props: Omit<CenterBaselineProps, 'children'> = {}): (icon: ReactNode) => ReactNode {\n  return (icon: ReactNode) => <CenterBaseline {...props}>{icon}</CenterBaseline>;\n}\n"],"names":[],"version":3,"file":"CenterBaseline.css.map"}
+{"mappings":"ACyBe;EAAA;;;;EAAA;;;;EAgBqB;;;;;;;AAhBrB","sources":["5200e45b7300f3eb","packages/@react-spectrum/s2/src/CenterBaseline.tsx"],"sourcesContent":["@import \"e3be4b39d25f6594\";\n@import \"a66f99bb46e8cd70\";\n","/*\n * Copyright 2024 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\nimport {CSSProperties, ReactNode} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\ninterface CenterBaselineProps {\n  style?: CSSProperties,\n  styles?: StyleString,\n  children: ReactNode,\n  slot?: string\n}\n\nconst styles = style({\n  display: 'flex',\n  alignItems: 'center'\n});\n\nexport function CenterBaseline(props: CenterBaselineProps) {\n  return (\n    <div\n      slot={props.slot}\n      style={props.style}\n      className={mergeStyles(styles, props.styles) + ' ' + centerBaselineBefore}>\n      {props.children}\n    </div>\n  );\n}\n\nexport const centerBaselineBefore = raw('&::before { content: \"\\u00a0\"; width: 0; visibility: hidden }');\n\nexport function centerBaseline(props: Omit<CenterBaselineProps, 'children'> = {}): (icon: ReactNode) => ReactNode {\n  return (icon: ReactNode) => <CenterBaseline {...props}>{icon}</CenterBaseline>;\n}\n"],"names":[],"version":3,"file":"CenterBaseline.css.map"}

package/dist/Checkbox.css

@@ -304,8 +304,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
     ._ebf {
@@ -373,8 +371,4 @@
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=Checkbox.css.map */

package/dist/Checkbox.css.map

@@ -1 +1 @@
-{"mappings":"AC6CgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CO;;;;;AAjEV;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAoBG;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6CO;;;;;;AA7CP","sources":["547feb480bf9b133","packages/@react-spectrum/s2/src/Checkbox.tsx"],"sourcesContent":["@import \"bc01646daa9aaa9a\";\n@import \"4050adff4afc0e3e\";\n@import \"57a225a6b7ca79cd\";\n","/*\n * Copyright 2024 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\nimport {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport DashIcon from '../ui-icons/Dash';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CheckboxStyleProps {\n  /**\n   * The size of the Checkbox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether the Checkbox should be displayed with an emphasized style. */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}\n\nexport interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, CheckboxStyleProps {\n  /** The label for the element. */\n  children?: ReactNode\n}\n\nexport const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const box = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  borderRadius: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: 'Background',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isInvalid: {\n        default: baseColor('negative-900'),\n        forcedColors: 'Mark'\n      },\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  },\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  }\n});\n\nexport const iconStyles = style({\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'gray-25',\n      forcedColors: 'HighlightText'\n    }\n  }\n});\n\nconst iconSize = {\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nexport const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);\n  let boxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  let isInCheckboxGroup = !!useContext(CheckboxGroupStateContext);\n  let ctx = useSlottedContext(CheckboxContext, props.slot);\n\n  return (\n    <AriaCheckbox\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => {\n        let checkbox = (\n          <div\n            ref={boxRef}\n            style={pressScale(boxRef)(renderProps)}\n            className={box({\n              ...renderProps,\n              isSelected: renderProps.isSelected || renderProps.isIndeterminate,\n              size: props.size || 'M',\n              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized\n            })}>\n            {renderProps.isIndeterminate &&\n              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n            {renderProps.isSelected && !renderProps.isIndeterminate &&\n              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n          </div>\n        );\n\n        // Only render checkbox without center baseline if no label.\n        // This avoids expanding the checkbox height to the font's line height.\n        if (!children) {\n          return checkbox;\n        }\n\n        return (\n          <>\n            <CenterBaseline>\n              {checkbox}\n            </CenterBaseline>\n            {children}\n          </>\n        );\n      }}\n    </AriaCheckbox>\n  );\n});\n"],"names":[],"version":3,"file":"Checkbox.css.map"}
+{"mappings":"AC6CgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CO;;;;;AAjEV;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAoBG;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6CO","sources":["547feb480bf9b133","packages/@react-spectrum/s2/src/Checkbox.tsx"],"sourcesContent":["@import \"bc01646daa9aaa9a\";\n@import \"4050adff4afc0e3e\";\n@import \"57a225a6b7ca79cd\";\n","/*\n * Copyright 2024 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\nimport {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport DashIcon from '../ui-icons/Dash';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CheckboxStyleProps {\n  /**\n   * The size of the Checkbox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether the Checkbox should be displayed with an emphasized style. */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}\n\nexport interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, CheckboxStyleProps {\n  /** The label for the element. */\n  children?: ReactNode\n}\n\nexport const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const box = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  borderRadius: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: 'Background',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isInvalid: {\n        default: baseColor('negative-900'),\n        forcedColors: 'Mark'\n      },\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  },\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  }\n});\n\nexport const iconStyles = style({\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'gray-25',\n      forcedColors: 'HighlightText'\n    }\n  }\n});\n\nconst iconSize = {\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nexport const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);\n  let boxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  let isInCheckboxGroup = !!useContext(CheckboxGroupStateContext);\n  let ctx = useSlottedContext(CheckboxContext, props.slot);\n\n  return (\n    <AriaCheckbox\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => {\n        let checkbox = (\n          <div\n            ref={boxRef}\n            style={pressScale(boxRef)(renderProps)}\n            className={box({\n              ...renderProps,\n              isSelected: renderProps.isSelected || renderProps.isIndeterminate,\n              size: props.size || 'M',\n              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized\n            })}>\n            {renderProps.isIndeterminate &&\n              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n            {renderProps.isSelected && !renderProps.isIndeterminate &&\n              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n          </div>\n        );\n\n        // Only render checkbox without center baseline if no label.\n        // This avoids expanding the checkbox height to the font's line height.\n        if (!children) {\n          return checkbox;\n        }\n\n        return (\n          <>\n            <CenterBaseline>\n              {checkbox}\n            </CenterBaseline>\n            {children}\n          </>\n        );\n      }}\n    </AriaCheckbox>\n  );\n});\n"],"names":[],"version":3,"file":"Checkbox.css.map"}

package/dist/CheckboxGroup.css

@@ -149,8 +149,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
     ._ebf {
@@ -174,8 +172,4 @@
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=CheckboxGroup.css.map */

package/dist/CheckboxGroup.css.map

@@ -1 +1 @@
-{"mappings":"ACkFoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxBe;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBf","sources":["229a9af52db930e6","packages/@react-spectrum/s2/src/CheckboxGroup.tsx"],"sourcesContent":["@import \"99c19d559a913dfe\";\n@import \"3a372fd4efad6d81\";\n","/*\n * Copyright 2024 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\nimport {\n  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupProps as AriaCheckboxGroupProps,\n  ContextValue\n} from 'react-aria-components';\nimport {CheckboxContext} from './Checkbox';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the Checkboxes in the CheckboxGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The axis the checkboxes should align with.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation,\n  /**\n   * The Checkboxes contained within the CheckboxGroup.\n   */\n  children?: ReactNode,\n  /**\n   * By default, checkboxes are not emphasized (gray).\n   * The emphasized (blue) version provides visual prominence.\n   */\n  isEmphasized?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    children,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator = 'icon',\n    size = 'M',\n    orientation = 'vertical',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isEmphasized,\n    ...groupProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaCheckboxGroup\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        // Double the usual gap because of the internal padding within checkbox that spectrum has.\n        '--field-gap': {\n          type: 'rowGap',\n          value: '[calc(var(--field-height) - 1lh)]'\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <div\n          className={style({\n            gridArea: 'input',\n            display: 'flex',\n            flexDirection: {\n              orientation: {\n                vertical: 'column',\n                horizontal: 'row'\n              }\n            },\n            lineHeight: 'ui',\n            rowGap: '--field-gap',\n            // Spectrum uses a fixed spacing value for horizontal,\n            // but the gap changes depending on t-shirt size in vertical.\n            columnGap: 16,\n            flexWrap: 'wrap'\n          })({orientation})}>\n          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>\n            <CheckboxContext.Provider value={{isEmphasized}}>\n              {children}\n            </CheckboxContext.Provider>\n          </FormContext.Provider>\n        </div>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}\n          showErrorIcon>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaCheckboxGroup>\n  );\n});\n"],"names":[],"version":3,"file":"CheckboxGroup.css.map"}
+{"mappings":"ACkFoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxBe;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["229a9af52db930e6","packages/@react-spectrum/s2/src/CheckboxGroup.tsx"],"sourcesContent":["@import \"99c19d559a913dfe\";\n@import \"3a372fd4efad6d81\";\n","/*\n * Copyright 2024 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\nimport {\n  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupProps as AriaCheckboxGroupProps,\n  ContextValue\n} from 'react-aria-components';\nimport {CheckboxContext} from './Checkbox';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the Checkboxes in the CheckboxGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The axis the checkboxes should align with.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation,\n  /**\n   * The Checkboxes contained within the CheckboxGroup.\n   */\n  children?: ReactNode,\n  /**\n   * By default, checkboxes are not emphasized (gray).\n   * The emphasized (blue) version provides visual prominence.\n   */\n  isEmphasized?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    children,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator = 'icon',\n    size = 'M',\n    orientation = 'vertical',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isEmphasized,\n    ...groupProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaCheckboxGroup\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        // Double the usual gap because of the internal padding within checkbox that spectrum has.\n        '--field-gap': {\n          type: 'rowGap',\n          value: '[calc(var(--field-height) - 1lh)]'\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <div\n          className={style({\n            gridArea: 'input',\n            display: 'flex',\n            flexDirection: {\n              orientation: {\n                vertical: 'column',\n                horizontal: 'row'\n              }\n            },\n            lineHeight: 'ui',\n            rowGap: '--field-gap',\n            // Spectrum uses a fixed spacing value for horizontal,\n            // but the gap changes depending on t-shirt size in vertical.\n            columnGap: 16,\n            flexWrap: 'wrap'\n          })({orientation})}>\n          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>\n            <CheckboxContext.Provider value={{isEmphasized}}>\n              {children}\n            </CheckboxContext.Provider>\n          </FormContext.Provider>\n        </div>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}\n          showErrorIcon>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaCheckboxGroup>\n  );\n});\n"],"names":[],"version":3,"file":"CheckboxGroup.css.map"}

package/dist/ClearButton.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   ._0d {
     display: flex;
@@ -80,5 +76,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 /*# sourceMappingURL=ClearButton.css.map */

package/dist/ClearButton.css.map

@@ -1 +1 @@
-{"mappings":"AA0CgC;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ClearButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  Button,\n  ButtonProps,\n  ButtonRenderProps\n} from 'react-aria-components';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useFocusableRef} from '@react-spectrum/utils';\n\ninterface ClearButtonStyleProps {\n  /**\n   * The size of the ClearButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\ninterface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}\ninterface ClearButtonProps extends ButtonProps, ClearButtonStyleProps {}\n\nexport const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      className={renderProps => style<ClearButtonRenderProps>({\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: 'full',\n        width: 'control',\n        flexShrink: 0,\n        borderStyle: 'none',\n        outlineStyle: 'none',\n        backgroundColor: 'transparent',\n        padding: 0,\n        color: '[inherit]',\n        '--iconPrimary': {\n          type: 'fill',\n          value: 'currentColor'\n        }\n      })({...renderProps, size: props.size || 'M'})}>\n      <CrossIcon size={props.size || 'M'} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"ClearButton.css.map"}
+{"mappings":"AA0CgC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ClearButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  Button,\n  ButtonProps,\n  ButtonRenderProps\n} from 'react-aria-components';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useFocusableRef} from '@react-spectrum/utils';\n\ninterface ClearButtonStyleProps {\n  /**\n   * The size of the ClearButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\ninterface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}\ninterface ClearButtonProps extends ButtonProps, ClearButtonStyleProps {}\n\nexport const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      className={renderProps => style<ClearButtonRenderProps>({\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: 'full',\n        width: 'control',\n        flexShrink: 0,\n        borderStyle: 'none',\n        outlineStyle: 'none',\n        backgroundColor: 'transparent',\n        padding: 0,\n        color: '[inherit]',\n        '--iconPrimary': {\n          type: 'fill',\n          value: 'currentColor'\n        }\n      })({...renderProps, size: props.size || 'M'})}>\n      <CrossIcon size={props.size || 'M'} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"ClearButton.css.map"}

package/dist/CloseButton.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   ._Ma {
     outline-style: none;
@@ -176,7 +172,7 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {

package/dist/CloseButton.css.map

@@ -1 +1 @@
-{"mappings":"AAyCe;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.css.map"}
+{"mappings":"AAyCe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.css.map"}

package/dist/ColorArea.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   .Vc {
     position: relative;
@@ -64,7 +60,7 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {

package/dist/ColorArea.css.map

@@ -1 +1 @@
-{"mappings":"AA+CmD;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\n        borderRadius: 'default',\n        outlineColor: {\n          default: 'gray-1000/10',\n          forcedColors: 'ButtonBorder'\n        },\n        outlineWidth: 1,\n        outlineOffset: -1,\n        outlineStyle: {\n          default: 'solid',\n          isDisabled: 'none'\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        }\n      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.css.map"}
+{"mappings":"AA+CmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\n        borderRadius: 'default',\n        outlineColor: {\n          default: 'gray-1000/10',\n          forcedColors: 'ButtonBorder'\n        },\n        outlineWidth: 1,\n        outlineOffset: -1,\n        outlineStyle: {\n          default: 'solid',\n          isDisabled: 'none'\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        }\n      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.css.map"}

package/dist/ColorField.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   ._0f {
     display: grid;
@@ -113,8 +109,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
     ._ebf {

package/dist/ColorField.css.map

@@ -1 +1 @@
-{"mappings":"AA8EoC;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}
+{"mappings":"AA8EoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}

package/dist/ColorHandle.css

@@ -156,7 +156,7 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {
@@ -187,8 +187,4 @@
     transform: translateY(8px);
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=ColorHandle.css.map */

package/dist/ColorHandle.css.map

@@ -1 +1 @@
-{"mappings":"ACiCiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkFJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BE;;;;EAAA;;;;EAAA;;;;;AA/IF;;AAAA;EAAA;IAAA;;;;IAgCI;;;;IA+GF;;;;;;AAtDI;;;;;;;AAOD;;;;;;;AAkBL","sources":["e345175c46126410","packages/@react-spectrum/s2/src/ColorHandle.tsx"],"sourcesContent":["@import \"63203eb3a948f993\";\n@import \"ba33a56d675003f7\";\n@import \"bf115cb0a25c2b12\";\n@import \"5d32c8c9143517d5\";\n@import \"cf10a6b7558ccf38\";\n@import \"d7c9e49b2d44a61e\";\n","/*\n * Copyright 2024 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\nimport {cloneElement, JSX, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\n\nconst HANDLE_SIZE = 16;\nconst LOUPE_HEIGHT = 64; // Does not include borders\nconst LOUPE_WIDTH = 48;\nconst LOUPE_BORDER_WIDTH = 1;\nconst LOUPE_OFFSET = 12; // Offset from handle to loupe\n\ninterface ColorHandleProps {\n  containerRef: RefObject<HTMLElement | null>,\n  getPosition: () => {x: number, y: number}\n}\n\nexport function ColorHandle({containerRef, getPosition}: ColorHandleProps) {\n  return (\n    <ColorThumb\n      className={style({\n        transition: '[width, height]',\n        size: {\n          default: HANDLE_SIZE,\n          isFocusVisible: 32\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        },\n        borderRadius: 'full',\n        boxSizing: 'border-box',\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderColor: {\n          default: 'white',\n          isDisabled: 'disabled'\n        },\n        outlineStyle: 'solid',\n        outlineWidth: 1,\n        outlineColor: {\n          default: 'black/42',\n          forcedColors: 'ButtonBorder'\n        }\n      })}\n      style={({defaultStyle, isDisabled}) => ({\n        background: isDisabled ? undefined : `linear-gradient(${defaultStyle.backgroundColor}, ${defaultStyle.backgroundColor}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        backgroundColor: undefined,\n        top: defaultStyle.top || '50%',\n        left: defaultStyle.left || '50%'\n      })}>\n      {({isDragging, color}) => (<>\n        <div\n          className={style({\n            size: 'full',\n            borderRadius: 'full',\n            boxSizing: 'border-box',\n            borderStyle: 'solid',\n            borderWidth: 1,\n            borderColor: {\n              default: 'black/42',\n              forcedColors: 'ButtonBorder'\n            }\n          })} />\n        <ColorLoupePortal isOpen={isDragging}>\n          <ColorLoupe containerRef={containerRef} color={color} getPosition={getPosition} />\n        </ColorLoupePortal>\n      </>)}\n    </ColorThumb>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupePortal({isOpen, children}: { isOpen: boolean, children: JSX.Element }) {\n  let [state, setState] = useState(isOpen ? 'open' : 'closed');\n  if (isOpen && state === 'closed') {\n    setState('open');\n  }\n\n  if (!isOpen && state === 'open') {\n    setState('exiting');\n  }\n\n  if (isOpen || state === 'exiting') {\n    return createPortal(cloneElement(children, {isExiting: state === 'exiting', onExited: () => setState('closed')}), document.body);\n  }\n\n  return null;\n}\n\nfunction ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, color}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let {x: thumbLeft, y: thumbTop} = getPosition();\n  thumbTop *= containerRect.height;\n  thumbLeft *= containerRect.width;\n\n  let enterAnimation = keyframes(`\n    from {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  let exitAnimation = keyframes(`\n    to {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  return (\n    <svg\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft,\n        marginTop: -LOUPE_HEIGHT - LOUPE_BORDER_WIDTH * 2 - HANDLE_SIZE / 2 - LOUPE_OFFSET,\n        marginLeft: -LOUPE_WIDTH / 2 - LOUPE_BORDER_WIDTH,\n        animationName: isExiting ? exitAnimation : enterAnimation\n      }}\n      className={style({\n        filter: 'elevated',\n        pointerEvents: 'none',\n        animationDuration: 125,\n        animationFillMode: 'forwards',\n        animationTimingFunction: 'in-out',\n        isolation: 'isolate'\n      })}\n      onAnimationEnd={e => {\n        if (e.animationName === exitAnimation) {\n          onExited();\n        }\n      }}\n      width={LOUPE_WIDTH + LOUPE_BORDER_WIDTH * 2}\n      height={LOUPE_HEIGHT + LOUPE_BORDER_WIDTH * 2}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect fill=\"white\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect fill=\"#E1E1E1\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect fill=\"#E1E1E1\" x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={color.toString()} />\n      <path\n        className={style({\n          strokeWidth: 1,\n          stroke: {\n            default: 'transparent-black-200',\n            forcedColors: 'ButtonBorder'\n          },\n          fill: 'white'\n        })}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n    </svg>\n  );\n}\n"],"names":[],"version":3,"file":"ColorHandle.css.map"}
+{"mappings":"ACiCiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkFJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BE;;;;EAAA;;;;EAAA;;;;;AA/IF;;AAAA;EAAA;IAAA;;;;IAgCI;;;;IA+GF;;;;;;AAtDI;;;;;;;AAOD","sources":["e345175c46126410","packages/@react-spectrum/s2/src/ColorHandle.tsx"],"sourcesContent":["@import \"63203eb3a948f993\";\n@import \"ba33a56d675003f7\";\n@import \"bf115cb0a25c2b12\";\n@import \"5d32c8c9143517d5\";\n@import \"cf10a6b7558ccf38\";\n@import \"d7c9e49b2d44a61e\";\n","/*\n * Copyright 2024 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\nimport {cloneElement, JSX, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\n\nconst HANDLE_SIZE = 16;\nconst LOUPE_HEIGHT = 64; // Does not include borders\nconst LOUPE_WIDTH = 48;\nconst LOUPE_BORDER_WIDTH = 1;\nconst LOUPE_OFFSET = 12; // Offset from handle to loupe\n\ninterface ColorHandleProps {\n  containerRef: RefObject<HTMLElement | null>,\n  getPosition: () => {x: number, y: number}\n}\n\nexport function ColorHandle({containerRef, getPosition}: ColorHandleProps) {\n  return (\n    <ColorThumb\n      className={style({\n        transition: '[width, height]',\n        size: {\n          default: HANDLE_SIZE,\n          isFocusVisible: 32\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        },\n        borderRadius: 'full',\n        boxSizing: 'border-box',\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderColor: {\n          default: 'white',\n          isDisabled: 'disabled'\n        },\n        outlineStyle: 'solid',\n        outlineWidth: 1,\n        outlineColor: {\n          default: 'black/42',\n          forcedColors: 'ButtonBorder'\n        }\n      })}\n      style={({defaultStyle, isDisabled}) => ({\n        background: isDisabled ? undefined : `linear-gradient(${defaultStyle.backgroundColor}, ${defaultStyle.backgroundColor}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        backgroundColor: undefined,\n        top: defaultStyle.top || '50%',\n        left: defaultStyle.left || '50%'\n      })}>\n      {({isDragging, color}) => (<>\n        <div\n          className={style({\n            size: 'full',\n            borderRadius: 'full',\n            boxSizing: 'border-box',\n            borderStyle: 'solid',\n            borderWidth: 1,\n            borderColor: {\n              default: 'black/42',\n              forcedColors: 'ButtonBorder'\n            }\n          })} />\n        <ColorLoupePortal isOpen={isDragging}>\n          <ColorLoupe containerRef={containerRef} color={color} getPosition={getPosition} />\n        </ColorLoupePortal>\n      </>)}\n    </ColorThumb>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupePortal({isOpen, children}: { isOpen: boolean, children: JSX.Element }) {\n  let [state, setState] = useState(isOpen ? 'open' : 'closed');\n  if (isOpen && state === 'closed') {\n    setState('open');\n  }\n\n  if (!isOpen && state === 'open') {\n    setState('exiting');\n  }\n\n  if (isOpen || state === 'exiting') {\n    return createPortal(cloneElement(children, {isExiting: state === 'exiting', onExited: () => setState('closed')}), document.body);\n  }\n\n  return null;\n}\n\nfunction ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, color}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let {x: thumbLeft, y: thumbTop} = getPosition();\n  thumbTop *= containerRect.height;\n  thumbLeft *= containerRect.width;\n\n  let enterAnimation = keyframes(`\n    from {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  let exitAnimation = keyframes(`\n    to {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  return (\n    <svg\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft,\n        marginTop: -LOUPE_HEIGHT - LOUPE_BORDER_WIDTH * 2 - HANDLE_SIZE / 2 - LOUPE_OFFSET,\n        marginLeft: -LOUPE_WIDTH / 2 - LOUPE_BORDER_WIDTH,\n        animationName: isExiting ? exitAnimation : enterAnimation\n      }}\n      className={style({\n        filter: 'elevated',\n        pointerEvents: 'none',\n        animationDuration: 125,\n        animationFillMode: 'forwards',\n        animationTimingFunction: 'in-out',\n        isolation: 'isolate'\n      })}\n      onAnimationEnd={e => {\n        if (e.animationName === exitAnimation) {\n          onExited();\n        }\n      }}\n      width={LOUPE_WIDTH + LOUPE_BORDER_WIDTH * 2}\n      height={LOUPE_HEIGHT + LOUPE_BORDER_WIDTH * 2}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect fill=\"white\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect fill=\"#E1E1E1\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect fill=\"#E1E1E1\" x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={color.toString()} />\n      <path\n        className={style({\n          strokeWidth: 1,\n          stroke: {\n            default: 'transparent-black-200',\n            forcedColors: 'ButtonBorder'\n          },\n          fill: 'white'\n        })}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n    </svg>\n  );\n}\n"],"names":[],"version":3,"file":"ColorHandle.css.map"}

package/dist/ColorSlider.css

@@ -177,8 +177,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.c {
   ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -239,10 +237,6 @@
   }
 }
 
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.b.a {
   @media (forced-colors: active) {
     .da_____I {

package/dist/ColorSlider.css.map

@@ -1 +1 @@
-{"mappings":"ACoDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AApC4B;;AAoC5B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAeF;;;;AAAA;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 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\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}
+{"mappings":"ACoDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAeF;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 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\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}

package/dist/ColorSwatch.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   .lE {
     width: calc(1rem * var(--s2-scale));
@@ -120,5 +116,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 /*# sourceMappingURL=ColorSwatch.css.map */

package/dist/ColorSwatch.css.map

@@ -1 +1 @@
-{"mappings":"AA2EiB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}
+{"mappings":"AA2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}

package/dist/ColorSwatchPicker.css

@@ -184,7 +184,7 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {
@@ -193,8 +193,4 @@
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=ColorSwatchPicker.css.map */