@adobe/react-spectrum 3.47.0 → 3.47.1

package/dist/private/tree/TreeView.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tree/TreeView.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 {AriaTreeProps} from 'react-aria/useTree';\n\nimport {ButtonContext} from 'react-aria-components/Button';\n\nimport {Checkbox} from '../checkbox/Checkbox';\n\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {isAndroid} from 'react-aria/private/utils/platform';\nimport React, {createContext, JSX, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport {\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemContentRenderProps,\n  TreeItemProps,\n  TreeItemRenderProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport {useButton} from 'react-aria/useButton';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeProps<T>, 'children' | 'render'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'render' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n// TODO: add animations for rows appearing and disappearing\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  ...focusRing(),\n  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers\n  height: 'full',\n  width: 'full',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  overflow: 'auto'\n});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = React.forwardRef(function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle, UNSAFE_className} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <Tree {...props} {...styleProps} className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </Tree>\n    </TreeRendererContext.Provider>\n  );\n}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 10, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    },\n    isFirst: 0\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })} />\n  );\n};\n\nexport interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\n\nexport const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n\n  return (\n    (<TreeItemContent>\n      {({isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible, state, id}) => {\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          (<div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              (<Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />)\n              )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            {hasChildItems && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                  // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                  // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {children}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />\n          </div>)\n        );\n      }}\n    </TreeItemContent>)\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n"],"names":[],"version":3,"file":"TreeView.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tree/TreeView.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 {AriaTreeProps} from 'react-aria/useTree';\n\nimport {ButtonContext} from 'react-aria-components/Button';\n\nimport {Checkbox} from '../checkbox/Checkbox';\n\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {\n  DOMRef,\n  Expandable,\n  Key,\n  SelectionBehavior,\n  SpectrumSelectionProps,\n  StyleProps\n} from '@react-types/shared';\nimport {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {isAndroid} from 'react-aria/private/utils/platform';\nimport React, {\n  createContext,\n  JSX,\n  JSXElementConstructor,\n  ReactElement,\n  ReactNode,\n  useRef\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport {\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemContentRenderProps,\n  TreeItemProps,\n  TreeItemRenderProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport {useButton} from 'react-aria/useButton';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTreeViewProps<T>\n  extends\n    Omit<AriaTreeProps<T>, 'children' | 'render'>,\n    StyleProps,\n    SpectrumSelectionProps,\n    Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element;\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends\n   * on the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<\n  TreeItemProps,\n  | 'className'\n  | 'style'\n  | 'render'\n  | 'value'\n  | 'onHoverStart'\n  | 'onHoverEnd'\n  | 'onHoverChange'\n  | 'onClick'\n> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode;\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>;\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n// TODO: add animations for rows appearing and disappearing\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  ...focusRing(),\n  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers\n  height: 'full',\n  width: 'full',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  overflow: 'auto'\n});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = React.forwardRef(function TreeView<T extends object>(\n  props: SpectrumTreeViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {children, selectionStyle, UNSAFE_className} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <Tree\n        {...props}\n        {...styleProps}\n        className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)}\n        selectionBehavior={selectionBehavior as SelectionBehavior}\n        ref={domRef}>\n        {props.children}\n      </Tree>\n    </TreeRendererContext.Provider>\n  );\n}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean;\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  gridTemplateColumns: [\n    'minmax(0, auto)',\n    'minmax(0, auto)',\n    'minmax(0, auto)',\n    10,\n    'minmax(0, auto)',\n    '1fr',\n    'minmax(0, auto)',\n    'auto'\n  ],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 0.5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    },\n    isFirst: 0\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible:\n      '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default:\n        '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible:\n        '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible:\n        '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default:\n          '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible:\n          '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps): ReactNode => {\n  let {href} = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps =>\n        treeRow({\n          ...renderProps,\n          isLink: !!href\n        })\n      }\n    />\n  );\n};\n\nexport interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode;\n}\n\nexport const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps): ReactNode => {\n  let {children} = props;\n\n  return (\n    <TreeItemContent>\n      {({\n        isExpanded,\n        hasChildItems,\n        level,\n        selectionMode,\n        selectionBehavior,\n        isDisabled,\n        isSelected,\n        isFocusVisible,\n        state,\n        id\n      }) => {\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\"\n              />\n            )}\n            <div\n              style={{\n                gridArea: 'level-padding',\n                marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`\n              }}\n            />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            {hasChildItems && (\n              <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />\n            )}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {\n                  UNSAFE_className: treeActionMenu(),\n                  UNSAFE_style: {marginInlineEnd: '.5rem'},\n                  isQuiet: true\n                }\n              }}>\n              {children}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean;\n  isDisabled?: boolean;\n  isRTL?: boolean;\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef(null);\n  let [fullProps, ref] = useContextProps(\n    {...props, slot: 'chevron'},\n    expandButtonRef,\n    ButtonContext\n  );\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton(\n    {\n      ...fullProps,\n      elementType: 'span'\n    },\n    ref\n  );\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n"],"names":[],"version":3,"file":"TreeView.js.map"}

package/dist/private/tree/TreeView.mjs

@@ -201,7 +201,8 @@ const $85896c343d88fa63$export$9a5779ed3fade674 = (props)=>{
             className: $85896c343d88fa63$var$treeCellGrid({
                 isDisabled: isDisabled
             })
-        }, selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $ceFJu$react).createElement((0, $b50e47f9c64ebdde$export$48513f6b9f8ce62d), {
+        }, selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
+        /*#__PURE__*/ (0, $ceFJu$react).createElement((0, $b50e47f9c64ebdde$export$48513f6b9f8ce62d), {
             isEmphasized: true,
             UNSAFE_className: $85896c343d88fa63$var$treeCheckbox(),
             UNSAFE_style: {

package/dist/private/tree/TreeView.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tree/TreeView.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 {AriaTreeProps} from 'react-aria/useTree';\n\nimport {ButtonContext} from 'react-aria-components/Button';\n\nimport {Checkbox} from '../checkbox/Checkbox';\n\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {isAndroid} from 'react-aria/private/utils/platform';\nimport React, {createContext, JSX, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport {\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemContentRenderProps,\n  TreeItemProps,\n  TreeItemRenderProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport {useButton} from 'react-aria/useButton';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeProps<T>, 'children' | 'render'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'render' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n// TODO: add animations for rows appearing and disappearing\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  ...focusRing(),\n  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers\n  height: 'full',\n  width: 'full',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  overflow: 'auto'\n});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = React.forwardRef(function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle, UNSAFE_className} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <Tree {...props} {...styleProps} className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </Tree>\n    </TreeRendererContext.Provider>\n  );\n}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 10, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    },\n    isFirst: 0\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })} />\n  );\n};\n\nexport interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\n\nexport const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n\n  return (\n    (<TreeItemContent>\n      {({isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible, state, id}) => {\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          (<div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              (<Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />)\n              )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            {hasChildItems && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                  // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                  // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {children}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />\n          </div>)\n        );\n      }}\n    </TreeItemContent>)\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n"],"names":[],"version":3,"file":"TreeView.mjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tree/TreeView.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 {AriaTreeProps} from 'react-aria/useTree';\n\nimport {ButtonContext} from 'react-aria-components/Button';\n\nimport {Checkbox} from '../checkbox/Checkbox';\n\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {\n  DOMRef,\n  Expandable,\n  Key,\n  SelectionBehavior,\n  SpectrumSelectionProps,\n  StyleProps\n} from '@react-types/shared';\nimport {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {isAndroid} from 'react-aria/private/utils/platform';\nimport React, {\n  createContext,\n  JSX,\n  JSXElementConstructor,\n  ReactElement,\n  ReactNode,\n  useRef\n} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport {\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemContentRenderProps,\n  TreeItemProps,\n  TreeItemRenderProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport {useButton} from 'react-aria/useButton';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTreeViewProps<T>\n  extends\n    Omit<AriaTreeProps<T>, 'children' | 'render'>,\n    StyleProps,\n    SpectrumSelectionProps,\n    Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element;\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends\n   * on the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<\n  TreeItemProps,\n  | 'className'\n  | 'style'\n  | 'render'\n  | 'value'\n  | 'onHoverStart'\n  | 'onHoverEnd'\n  | 'onHoverChange'\n  | 'onClick'\n> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode;\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>;\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n// TODO: add animations for rows appearing and disappearing\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  ...focusRing(),\n  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers\n  height: 'full',\n  width: 'full',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  overflow: 'auto'\n});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = React.forwardRef(function TreeView<T extends object>(\n  props: SpectrumTreeViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {children, selectionStyle, UNSAFE_className} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <Tree\n        {...props}\n        {...styleProps}\n        className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)}\n        selectionBehavior={selectionBehavior as SelectionBehavior}\n        ref={domRef}>\n        {props.children}\n      </Tree>\n    </TreeRendererContext.Provider>\n  );\n}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean;\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  gridTemplateColumns: [\n    'minmax(0, auto)',\n    'minmax(0, auto)',\n    'minmax(0, auto)',\n    10,\n    'minmax(0, auto)',\n    '1fr',\n    'minmax(0, auto)',\n    'auto'\n  ],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: 0.5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    },\n    isFirst: 0\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible:\n      '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default:\n        '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible:\n        '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible:\n        '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default:\n          '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible:\n          '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps): ReactNode => {\n  let {href} = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps =>\n        treeRow({\n          ...renderProps,\n          isLink: !!href\n        })\n      }\n    />\n  );\n};\n\nexport interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode;\n}\n\nexport const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps): ReactNode => {\n  let {children} = props;\n\n  return (\n    <TreeItemContent>\n      {({\n        isExpanded,\n        hasChildItems,\n        level,\n        selectionMode,\n        selectionBehavior,\n        isDisabled,\n        isSelected,\n        isFocusVisible,\n        state,\n        id\n      }) => {\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          <div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\"\n              />\n            )}\n            <div\n              style={{\n                gridArea: 'level-padding',\n                marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`\n              }}\n            />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            {hasChildItems && (\n              <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />\n            )}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {\n                  UNSAFE_className: treeActionMenu(),\n                  UNSAFE_style: {marginInlineEnd: '.5rem'},\n                  isQuiet: true\n                }\n              }}>\n              {children}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean;\n  isDisabled?: boolean;\n  isRTL?: boolean;\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef(null);\n  let [fullProps, ref] = useContextProps(\n    {...props, slot: 'chevron'},\n    expandButtonRef,\n    ButtonContext\n  );\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton(\n    {\n      ...fullProps,\n      elementType: 'span'\n    },\n    ref\n  );\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n"],"names":[],"version":3,"file":"TreeView.mjs.map"}

package/dist/private/typography_index.css

@@ -1,41 +1,41 @@
-.kDKRXa_i18nFontFamily {
+.oAOseG_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(ar) {
+.oAOseG_i18nFontFamily:lang(ar) {
   font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(he) {
+.oAOseG_i18nFontFamily:lang(he) {
   font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(zh) {
+.oAOseG_i18nFontFamily:lang(zh) {
   font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(zh-Hans) {
+.oAOseG_i18nFontFamily:lang(zh-Hans) {
   font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(zh-Hant) {
+.oAOseG_i18nFontFamily:lang(zh-Hant) {
   font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(zh-SG), .kDKRXa_i18nFontFamily:lang(zh-CN) {
+.oAOseG_i18nFontFamily:lang(zh-SG), .oAOseG_i18nFontFamily:lang(zh-CN) {
   font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(ko) {
+.oAOseG_i18nFontFamily:lang(ko) {
   font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
 }
 
-.kDKRXa_i18nFontFamily:lang(ja) {
+.oAOseG_i18nFontFamily:lang(ja) {
   font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
 }
 
-.kDKRXa_spectrum-FocusRing-ring {
+.oAOseG_spectrum-FocusRing-ring {
   --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
   --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
@@ -43,55 +43,56 @@
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
 }
 
-.kDKRXa_spectrum-FocusRing-ring:after {
+.oAOseG_spectrum-FocusRing-ring:after {
   border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
   content: "";
   margin: calc(-1 * var(--spectrum-focus-ring-border-size));
   pointer-events: none;
   transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
-                margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+      margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
   display: block;
   position: absolute;
   inset: 0;
 }
 
-.kDKRXa_spectrum-FocusRing.kDKRXa_focus-ring:after {
+.oAOseG_spectrum-FocusRing.oAOseG_focus-ring:after {
   margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
   box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
 }
 
-.kDKRXa_spectrum-FocusRing--quiet:after {
+.oAOseG_spectrum-FocusRing--quiet:after {
   border-radius: 0;
 }
 
-.kDKRXa_spectrum-FocusRing--quiet.kDKRXa_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
+.oAOseG_spectrum-FocusRing--quiet.oAOseG_focus-ring:after {
+  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+        0;
   box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
 }
 
 @media (forced-colors: active) {
-  .kDKRXa_spectrum-FocusRing, .kDKRXa_spectrum-FocusRing-ring, .kDKRXa_spectrum-FocusRing--quiet {
+  .oAOseG_spectrum-FocusRing, .oAOseG_spectrum-FocusRing-ring, .oAOseG_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
   }
 
-  :is(.kDKRXa_spectrum-FocusRing, .kDKRXa_spectrum-FocusRing-ring, .kDKRXa_spectrum-FocusRing--quiet):after {
+  :is(.oAOseG_spectrum-FocusRing, .oAOseG_spectrum-FocusRing-ring, .oAOseG_spectrum-FocusRing--quiet):after {
     forced-color-adjust: none;
   }
 }
 
-.kDKRXa_spectrum {
+.oAOseG_spectrum {
   font-size: var(--spectrum-alias-font-size-default, var(--spectrum-global-dimension-font-size-100));
   color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color));
 }
 
-.kDKRXa_spectrum, .kDKRXa_spectrum-Body, .kDKRXa_spectrum, .kDKRXa_spectrum-Body {
+.oAOseG_spectrum, .oAOseG_spectrum-Body, .oAOseG_spectrum, .oAOseG_spectrum-Body {
   font-size: var(--spectrum-body-4-text-size, var(--spectrum-alias-font-size-default));
   font-weight: var(--spectrum-body-4-text-font-weight, var(--spectrum-alias-body-text-font-weight));
   line-height: var(--spectrum-body-4-text-line-height, var(--spectrum-alias-body-text-line-height));
   font-style: var(--spectrum-body-4-text-font-style, var(--spectrum-global-font-style-regular));
 }
 
-.kDKRXa_spectrum-Body--italic {
+.oAOseG_spectrum-Body--italic {
   font-style: var(--spectrum-body-4-emphasis-text-font-style, var(--spectrum-global-font-style-italic));
 }
 /*# sourceMappingURL=typography_index.css.map */

package/dist/private/typography_index.css.map

@@ -1 +1 @@
-{"mappings":"AAgDA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA","sources":["packages/@adobe/spectrum-css-temp/components/typography/index.css"],"sourcesContent":["/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n@import 'font.css';\n\n/*@mixin typography .spectrum-Body1 {}\n@mixin typography .spectrum-Body2 {}\n@mixin typography .spectrum-Body3 {}\n@mixin typography .spectrum-Body4 {}\n@mixin typography .spectrum-Body5 {}\n@mixin typography .spectrum-Heading1 {}\n@mixin typography .spectrum-Heading2 {}\n@mixin typography .spectrum-Heading3 {}\n@mixin typography .spectrum-Heading4 {}\n@mixin typography .spectrum-Heading5 {}\n@mixin typography .spectrum-Heading6 {}\n@mixin typography .spectrum-Subheading {}\n@mixin typography .spectrum-Detail {}\n@mixin typography .spectrum-Heading1--quiet, heading-quiet-1 {}\n@mixin typography .spectrum-Heading2--quiet, heading-quiet-2 {}\n@mixin typography .spectrum-Heading1--strong, heading-strong-1 {}\n@mixin typography .spectrum-Heading2--strong, heading-strong-2 {}\n@mixin typography .spectrum-Heading1--display, display-1 {}\n@mixin typography .spectrum-Heading2--display, display-2 {}\n@mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}\n@mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}\n@mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}\n@mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}\n\n.spectrum-Typography {\n  @mixin typographyMargins .spectrum-Body1 {}\n  @mixin typographyMargins .spectrum-Body2 {}\n  @mixin typographyMargins .spectrum-Body3 {}\n  @mixin typographyMargins .spectrum-Body4 {}\n  @mixin typographyMargins .spectrum-Body5 {}\n  @mixin typographyMargins .spectrum-Heading1 {}\n  @mixin typographyMargins .spectrum-Heading2 {}\n  @mixin typographyMargins .spectrum-Heading3 {}\n  @mixin typographyMargins .spectrum-Heading4 {}\n  @mixin typographyMargins .spectrum-Heading5 {}\n  @mixin typographyMargins .spectrum-Heading6 {}\n  @mixin typographyMargins .spectrum-Subheading {}\n  @mixin typographyMargins .spectrum-Detail {}\n  @mixin typographyMargins .spectrum-Heading1--quiet, heading-quiet-1 {}\n  @mixin typographyMargins .spectrum-Heading2--quiet, heading-quiet-2 {}\n  @mixin typographyMargins .spectrum-Heading1--strong, heading-strong-1 {}\n  @mixin typographyMargins .spectrum-Heading2--strong, heading-strong-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display, display-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display, display-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}\n}\n\n.spectrum-Article {\n  font-family: var(--spectrum-body-article-1-text-font-family);\n  @mixin typography .spectrum-Body1, body-article-1 {}\n  @mixin typography .spectrum-Body2, body-article-2 {}\n  @mixin typography .spectrum-Body3, body-article-3 {}\n  @mixin typography .spectrum-Body4, body-article-4 {}\n  @mixin typography .spectrum-Body5, body-article-5 {}\n  @mixin typography .spectrum-Heading1, heading-article-1 {}\n  @mixin typography .spectrum-Heading2, heading-article-2 {}\n  @mixin typography .spectrum-Heading3, heading-article-3 {}\n  @mixin typography .spectrum-Heading4, heading-article-4 {}\n  @mixin typography .spectrum-Heading5, heading-article-5 {}\n  @mixin typography .spectrum-Heading6, heading-article-6 {}\n  @mixin typography .spectrum-Subheading, subheading-article {}\n  @mixin typography .spectrum-Detail, detail-article {}\n  @mixin typography .spectrum-Heading1--quiet, heading-quiet-article-1 {}\n  @mixin typography .spectrum-Heading2--quiet, heading-quiet-article-2 {}\n  @mixin typography .spectrum-Heading1--display, display-article-1 {}\n  @mixin typography .spectrum-Heading2--display, display-article-2 {}\n  @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-article-1 {}\n  @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-article-2 {}\n}\n.spectrum {\n  &:lang(ja),\n  &:lang(ko),\n  &:lang(zh) {\n    @mixin typography .spectrum-Body1, body-han-1 {}\n    @mixin typography .spectrum-Body2, body-han-2 {}\n    @mixin typography .spectrum-Body3, body-han-3 {}\n    @mixin typography .spectrum-Body4, body-han-4 {}\n    @mixin typography .spectrum-Body5, body-han-5 {}\n    @mixin typography .spectrum-Heading1, heading-han-1 {}\n    @mixin typography .spectrum-Heading2, heading-han-2 {}\n    @mixin typography .spectrum-Heading3, heading-han-3 {}\n    @mixin typography .spectrum-Heading4, heading-han-4 {}\n    @mixin typography .spectrum-Heading5, heading-han-5 {}\n    @mixin typography .spectrum-Heading6, heading-han-6 {}\n    @mixin typography .spectrum-Subheading, subheading-han {}\n    @mixin typography .spectrum-Detail, detail-han {}\n    @mixin typography .spectrum-Heading1--quiet, heading-quiet-han-1 {}\n    @mixin typography .spectrum-Heading2--quiet, heading-quiet-han-2 {}\n    @mixin typography .spectrum-Heading1--strong, heading-strong-han-1 {}\n    @mixin typography .spectrum-Heading2--strong, heading-strong-han-2 {}\n    @mixin typography .spectrum-Heading1--display, display-han-1 {}\n    @mixin typography .spectrum-Heading2--display, display-han-2 {}\n    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-han-1 {}\n    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-han-2 {}\n    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-han-1 {}\n    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-han-2 {}\n  }\n}\n@mixin typography .spectrum-Code1, body-code-1, true {\n  font-family: var(--spectrum-body-code-1-text-font-family);\n}\n@mixin typography .spectrum-Code2, body-code-2, true {\n  font-family: var(--spectrum-body-code-2-text-font-family);\n}\n@mixin typography .spectrum-Code3, body-code-3, true {\n  font-family: var(--spectrum-body-code-3-text-font-family);\n}\n@mixin typography .spectrum-Code4, body-code-4, true {\n  font-family: var(--spectrum-body-code-4-text-font-family);\n}\n@mixin typography .spectrum-Code5, body-code-5, true {\n  font-family: var(--spectrum-body-code-5-text-font-family);\n}*/\n\n/*\n  The &.spectrum makes it so users can do <div class=\"spectrum spectrum--large\"> and still get the right font sizes\n  Without this, they would have to do <div class=\"spectrum--large\"><div class=\"spectrum\">, which makes no sense\n*/\n.spectrum,\n.spectrum-Body,\n.spectrum,\n.spectrum-Body {\n  font-size: var(--spectrum-body-4-text-size);\n  font-weight: var(--spectrum-body-4-text-font-weight);\n  line-height: var(--spectrum-body-4-text-line-height);\n  font-style: var(--spectrum-body-4-text-font-style);\n}\n\n.spectrum-Body--italic {\n  font-style: var(--spectrum-body-4-emphasis-text-font-style);\n}\n\n/*\n.spectrum-Body--large {\n  @extend .spectrum-Body2;\n}\n\n.spectrum-Body--small {\n  @extend .spectrum-Body5;\n}\n\n.spectrum-Body--secondary {\n  @extend .spectrum-Body4;\n}\n\n.spectrum-Heading--display {\n  @extend .spectrum-Heading2--display.spectrum-Heading2--quiet;\n}\n\n.spectrum-Heading--pageTitle {\n  @extend .spectrum-Heading2--quiet;\n}\n\n.spectrum-Heading--subtitle1 {\n  @extend .spectrum-Heading4;\n}\n\n.spectrum-Heading--subtitle2 {\n  @extend .spectrum-Heading6;\n}\n\n.spectrum-Heading--subtitle3 {\n  @extend .spectrum-Subheading;\n}*/\n"],"names":[],"version":3,"file":"typography_index.css.map"}
+{"mappings":"AAgDA;;;;;AAKE;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAQA;;;;AAIA;;;;AAMF;;;;;;;;AAUE","sources":["packages/@adobe/spectrum-css-temp/components/typography/index.css"],"sourcesContent":["/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n@import 'font.css';\n\n/*@mixin typography .spectrum-Body1 {}\n@mixin typography .spectrum-Body2 {}\n@mixin typography .spectrum-Body3 {}\n@mixin typography .spectrum-Body4 {}\n@mixin typography .spectrum-Body5 {}\n@mixin typography .spectrum-Heading1 {}\n@mixin typography .spectrum-Heading2 {}\n@mixin typography .spectrum-Heading3 {}\n@mixin typography .spectrum-Heading4 {}\n@mixin typography .spectrum-Heading5 {}\n@mixin typography .spectrum-Heading6 {}\n@mixin typography .spectrum-Subheading {}\n@mixin typography .spectrum-Detail {}\n@mixin typography .spectrum-Heading1--quiet, heading-quiet-1 {}\n@mixin typography .spectrum-Heading2--quiet, heading-quiet-2 {}\n@mixin typography .spectrum-Heading1--strong, heading-strong-1 {}\n@mixin typography .spectrum-Heading2--strong, heading-strong-2 {}\n@mixin typography .spectrum-Heading1--display, display-1 {}\n@mixin typography .spectrum-Heading2--display, display-2 {}\n@mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}\n@mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}\n@mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}\n@mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}\n\n.spectrum-Typography {\n  @mixin typographyMargins .spectrum-Body1 {}\n  @mixin typographyMargins .spectrum-Body2 {}\n  @mixin typographyMargins .spectrum-Body3 {}\n  @mixin typographyMargins .spectrum-Body4 {}\n  @mixin typographyMargins .spectrum-Body5 {}\n  @mixin typographyMargins .spectrum-Heading1 {}\n  @mixin typographyMargins .spectrum-Heading2 {}\n  @mixin typographyMargins .spectrum-Heading3 {}\n  @mixin typographyMargins .spectrum-Heading4 {}\n  @mixin typographyMargins .spectrum-Heading5 {}\n  @mixin typographyMargins .spectrum-Heading6 {}\n  @mixin typographyMargins .spectrum-Subheading {}\n  @mixin typographyMargins .spectrum-Detail {}\n  @mixin typographyMargins .spectrum-Heading1--quiet, heading-quiet-1 {}\n  @mixin typographyMargins .spectrum-Heading2--quiet, heading-quiet-2 {}\n  @mixin typographyMargins .spectrum-Heading1--strong, heading-strong-1 {}\n  @mixin typographyMargins .spectrum-Heading2--strong, heading-strong-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display, display-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display, display-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}\n}\n\n.spectrum-Article {\n  font-family: var(--spectrum-body-article-1-text-font-family);\n  @mixin typography .spectrum-Body1, body-article-1 {}\n  @mixin typography .spectrum-Body2, body-article-2 {}\n  @mixin typography .spectrum-Body3, body-article-3 {}\n  @mixin typography .spectrum-Body4, body-article-4 {}\n  @mixin typography .spectrum-Body5, body-article-5 {}\n  @mixin typography .spectrum-Heading1, heading-article-1 {}\n  @mixin typography .spectrum-Heading2, heading-article-2 {}\n  @mixin typography .spectrum-Heading3, heading-article-3 {}\n  @mixin typography .spectrum-Heading4, heading-article-4 {}\n  @mixin typography .spectrum-Heading5, heading-article-5 {}\n  @mixin typography .spectrum-Heading6, heading-article-6 {}\n  @mixin typography .spectrum-Subheading, subheading-article {}\n  @mixin typography .spectrum-Detail, detail-article {}\n  @mixin typography .spectrum-Heading1--quiet, heading-quiet-article-1 {}\n  @mixin typography .spectrum-Heading2--quiet, heading-quiet-article-2 {}\n  @mixin typography .spectrum-Heading1--display, display-article-1 {}\n  @mixin typography .spectrum-Heading2--display, display-article-2 {}\n  @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-article-1 {}\n  @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-article-2 {}\n}\n.spectrum {\n  &:lang(ja),\n  &:lang(ko),\n  &:lang(zh) {\n    @mixin typography .spectrum-Body1, body-han-1 {}\n    @mixin typography .spectrum-Body2, body-han-2 {}\n    @mixin typography .spectrum-Body3, body-han-3 {}\n    @mixin typography .spectrum-Body4, body-han-4 {}\n    @mixin typography .spectrum-Body5, body-han-5 {}\n    @mixin typography .spectrum-Heading1, heading-han-1 {}\n    @mixin typography .spectrum-Heading2, heading-han-2 {}\n    @mixin typography .spectrum-Heading3, heading-han-3 {}\n    @mixin typography .spectrum-Heading4, heading-han-4 {}\n    @mixin typography .spectrum-Heading5, heading-han-5 {}\n    @mixin typography .spectrum-Heading6, heading-han-6 {}\n    @mixin typography .spectrum-Subheading, subheading-han {}\n    @mixin typography .spectrum-Detail, detail-han {}\n    @mixin typography .spectrum-Heading1--quiet, heading-quiet-han-1 {}\n    @mixin typography .spectrum-Heading2--quiet, heading-quiet-han-2 {}\n    @mixin typography .spectrum-Heading1--strong, heading-strong-han-1 {}\n    @mixin typography .spectrum-Heading2--strong, heading-strong-han-2 {}\n    @mixin typography .spectrum-Heading1--display, display-han-1 {}\n    @mixin typography .spectrum-Heading2--display, display-han-2 {}\n    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-han-1 {}\n    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-han-2 {}\n    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-han-1 {}\n    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-han-2 {}\n  }\n}\n@mixin typography .spectrum-Code1, body-code-1, true {\n  font-family: var(--spectrum-body-code-1-text-font-family);\n}\n@mixin typography .spectrum-Code2, body-code-2, true {\n  font-family: var(--spectrum-body-code-2-text-font-family);\n}\n@mixin typography .spectrum-Code3, body-code-3, true {\n  font-family: var(--spectrum-body-code-3-text-font-family);\n}\n@mixin typography .spectrum-Code4, body-code-4, true {\n  font-family: var(--spectrum-body-code-4-text-font-family);\n}\n@mixin typography .spectrum-Code5, body-code-5, true {\n  font-family: var(--spectrum-body-code-5-text-font-family);\n}*/\n\n/*\n  The &.spectrum makes it so users can do <div class=\"spectrum spectrum--large\"> and still get the right font sizes\n  Without this, they would have to do <div class=\"spectrum--large\"><div class=\"spectrum\">, which makes no sense\n*/\n.spectrum,\n.spectrum-Body,\n.spectrum,\n.spectrum-Body {\n  font-size: var(--spectrum-body-4-text-size);\n  font-weight: var(--spectrum-body-4-text-font-weight);\n  line-height: var(--spectrum-body-4-text-line-height);\n  font-style: var(--spectrum-body-4-text-font-style);\n}\n\n.spectrum-Body--italic {\n  font-style: var(--spectrum-body-4-emphasis-text-font-style);\n}\n\n/*\n.spectrum-Body--large {\n  @extend .spectrum-Body2;\n}\n\n.spectrum-Body--small {\n  @extend .spectrum-Body5;\n}\n\n.spectrum-Body--secondary {\n  @extend .spectrum-Body4;\n}\n\n.spectrum-Heading--display {\n  @extend .spectrum-Heading2--display.spectrum-Heading2--quiet;\n}\n\n.spectrum-Heading--pageTitle {\n  @extend .spectrum-Heading2--quiet;\n}\n\n.spectrum-Heading--subtitle1 {\n  @extend .spectrum-Heading4;\n}\n\n.spectrum-Heading--subtitle2 {\n  @extend .spectrum-Heading6;\n}\n\n.spectrum-Heading--subtitle3 {\n  @extend .spectrum-Subheading;\n}*/\n"],"names":[],"version":3,"file":"typography_index.css.map"}

package/dist/private/typography_index_css.cjs

@@ -19,14 +19,14 @@ var $a6bc8488685ed47c$export$7b2dac1166f6ec4c;
 var $a6bc8488685ed47c$export$4109102f950813a6;
 var $a6bc8488685ed47c$export$24c7f46a6e3605dd;
 var $a6bc8488685ed47c$export$2927016961429360;
-$a6bc8488685ed47c$export$f39a09f249340e2a = `kDKRXa_focus-ring`;
-$a6bc8488685ed47c$export$8c4ee2c50c22c514 = `kDKRXa_i18nFontFamily`;
-$a6bc8488685ed47c$export$3311ab3a441bc141 = `kDKRXa_spectrum ${$a6bc8488685ed47c$export$8c4ee2c50c22c514}`;
-$a6bc8488685ed47c$export$a30bf7810c8453d1 = `kDKRXa_spectrum-Body`;
-$a6bc8488685ed47c$export$7b2dac1166f6ec4c = `kDKRXa_spectrum-Body--italic`;
-$a6bc8488685ed47c$export$4109102f950813a6 = `kDKRXa_spectrum-FocusRing-ring`;
-$a6bc8488685ed47c$export$24c7f46a6e3605dd = `kDKRXa_spectrum-FocusRing ${$a6bc8488685ed47c$export$4109102f950813a6}`;
-$a6bc8488685ed47c$export$2927016961429360 = `kDKRXa_spectrum-FocusRing--quiet`;
+$a6bc8488685ed47c$export$f39a09f249340e2a = `oAOseG_focus-ring`;
+$a6bc8488685ed47c$export$8c4ee2c50c22c514 = `oAOseG_i18nFontFamily`;
+$a6bc8488685ed47c$export$3311ab3a441bc141 = `oAOseG_spectrum ${$a6bc8488685ed47c$export$8c4ee2c50c22c514}`;
+$a6bc8488685ed47c$export$a30bf7810c8453d1 = `oAOseG_spectrum-Body`;
+$a6bc8488685ed47c$export$7b2dac1166f6ec4c = `oAOseG_spectrum-Body--italic`;
+$a6bc8488685ed47c$export$4109102f950813a6 = `oAOseG_spectrum-FocusRing-ring`;
+$a6bc8488685ed47c$export$24c7f46a6e3605dd = `oAOseG_spectrum-FocusRing ${$a6bc8488685ed47c$export$4109102f950813a6}`;
+$a6bc8488685ed47c$export$2927016961429360 = `oAOseG_spectrum-FocusRing--quiet`;
 
 
 //# sourceMappingURL=typography_index_css.cjs.map

package/dist/private/typography_index_css.mjs

@@ -20,14 +20,14 @@ var $75983cb9bae5f5d5$export$7b2dac1166f6ec4c;
 var $75983cb9bae5f5d5$export$4109102f950813a6;
 var $75983cb9bae5f5d5$export$24c7f46a6e3605dd;
 var $75983cb9bae5f5d5$export$2927016961429360;
-$75983cb9bae5f5d5$export$f39a09f249340e2a = `kDKRXa_focus-ring`;
-$75983cb9bae5f5d5$export$8c4ee2c50c22c514 = `kDKRXa_i18nFontFamily`;
-$75983cb9bae5f5d5$export$3311ab3a441bc141 = `kDKRXa_spectrum ${$75983cb9bae5f5d5$export$8c4ee2c50c22c514}`;
-$75983cb9bae5f5d5$export$a30bf7810c8453d1 = `kDKRXa_spectrum-Body`;
-$75983cb9bae5f5d5$export$7b2dac1166f6ec4c = `kDKRXa_spectrum-Body--italic`;
-$75983cb9bae5f5d5$export$4109102f950813a6 = `kDKRXa_spectrum-FocusRing-ring`;
-$75983cb9bae5f5d5$export$24c7f46a6e3605dd = `kDKRXa_spectrum-FocusRing ${$75983cb9bae5f5d5$export$4109102f950813a6}`;
-$75983cb9bae5f5d5$export$2927016961429360 = `kDKRXa_spectrum-FocusRing--quiet`;
+$75983cb9bae5f5d5$export$f39a09f249340e2a = `oAOseG_focus-ring`;
+$75983cb9bae5f5d5$export$8c4ee2c50c22c514 = `oAOseG_i18nFontFamily`;
+$75983cb9bae5f5d5$export$3311ab3a441bc141 = `oAOseG_spectrum ${$75983cb9bae5f5d5$export$8c4ee2c50c22c514}`;
+$75983cb9bae5f5d5$export$a30bf7810c8453d1 = `oAOseG_spectrum-Body`;
+$75983cb9bae5f5d5$export$7b2dac1166f6ec4c = `oAOseG_spectrum-Body--italic`;
+$75983cb9bae5f5d5$export$4109102f950813a6 = `oAOseG_spectrum-FocusRing-ring`;
+$75983cb9bae5f5d5$export$24c7f46a6e3605dd = `oAOseG_spectrum-FocusRing ${$75983cb9bae5f5d5$export$4109102f950813a6}`;
+$75983cb9bae5f5d5$export$2927016961429360 = `oAOseG_spectrum-FocusRing--quiet`;
 
 
 export {$75983cb9bae5f5d5$exports as default};

package/dist/private/underlay_vars.css

@@ -1,41 +1,41 @@
-.fdFt3W_i18nFontFamily {
+.CctUYa_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(ar) {
+.CctUYa_i18nFontFamily:lang(ar) {
   font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(he) {
+.CctUYa_i18nFontFamily:lang(he) {
   font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(zh) {
+.CctUYa_i18nFontFamily:lang(zh) {
   font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(zh-Hans) {
+.CctUYa_i18nFontFamily:lang(zh-Hans) {
   font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(zh-Hant) {
+.CctUYa_i18nFontFamily:lang(zh-Hant) {
   font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(zh-SG), .fdFt3W_i18nFontFamily:lang(zh-CN) {
+.CctUYa_i18nFontFamily:lang(zh-SG), .CctUYa_i18nFontFamily:lang(zh-CN) {
   font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(ko) {
+.CctUYa_i18nFontFamily:lang(ko) {
   font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
 }
 
-.fdFt3W_i18nFontFamily:lang(ja) {
+.CctUYa_i18nFontFamily:lang(ja) {
   font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
 }
 
-.fdFt3W_spectrum-FocusRing-ring {
+.CctUYa_spectrum-FocusRing-ring {
   --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
   --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
@@ -43,93 +43,100 @@
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
 }
 
-.fdFt3W_spectrum-FocusRing-ring:after {
+.CctUYa_spectrum-FocusRing-ring:after {
   border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
   content: "";
   margin: calc(-1 * var(--spectrum-focus-ring-border-size));
   pointer-events: none;
   transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
-                margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+      margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
   display: block;
   position: absolute;
   inset: 0;
 }
 
-.fdFt3W_spectrum-FocusRing.fdFt3W_focus-ring:after {
+.CctUYa_spectrum-FocusRing.CctUYa_focus-ring:after {
   margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
   box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
 }
 
-.fdFt3W_spectrum-FocusRing--quiet:after {
+.CctUYa_spectrum-FocusRing--quiet:after {
   border-radius: 0;
 }
 
-.fdFt3W_spectrum-FocusRing--quiet.fdFt3W_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
+.CctUYa_spectrum-FocusRing--quiet.CctUYa_focus-ring:after {
+  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+        0;
   box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
 }
 
 @media (forced-colors: active) {
-  .fdFt3W_spectrum-FocusRing, .fdFt3W_spectrum-FocusRing-ring, .fdFt3W_spectrum-FocusRing--quiet {
+  .CctUYa_spectrum-FocusRing, .CctUYa_spectrum-FocusRing-ring, .CctUYa_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
   }
 
-  :is(.fdFt3W_spectrum-FocusRing, .fdFt3W_spectrum-FocusRing-ring, .fdFt3W_spectrum-FocusRing--quiet):after {
+  :is(.CctUYa_spectrum-FocusRing, .CctUYa_spectrum-FocusRing-ring, .CctUYa_spectrum-FocusRing--quiet):after {
     forced-color-adjust: none;
   }
 }
 
-.fdFt3W_spectrum-overlay {
+.CctUYa_spectrum-overlay {
   visibility: hidden;
   opacity: 0;
   transition: transform var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
-              opacity var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
-              visibility 0s linear var(--spectrum-global-animation-duration-100, .13s);
+    opacity var(--spectrum-global-animation-duration-100, .13s) ease-in-out,
+    visibility 0s linear var(--spectrum-global-animation-duration-100, .13s);
   pointer-events: none;
 }
 
-.fdFt3W_spectrum-overlay--open {
+.CctUYa_spectrum-overlay--open {
   visibility: visible;
   opacity: .9999;
   pointer-events: auto;
   transition-delay: 0s;
 }
 
-.fdFt3W_spectrum-overlay--bottom--open {
+.CctUYa_spectrum-overlay--bottom--open {
   transform: translateY(var(--spectrum-overlay-positive-transform-distance));
 }
 
-.fdFt3W_spectrum-overlay--top--open {
+.CctUYa_spectrum-overlay--top--open {
   transform: translateY(var(--spectrum-overlay-negative-transform-distance));
 }
 
-.fdFt3W_spectrum-overlay--right--open {
+.CctUYa_spectrum-overlay--right--open {
   transform: translateX(var(--spectrum-overlay-positive-transform-distance));
 }
 
-.fdFt3W_spectrum-overlay--left--open {
+.CctUYa_spectrum-overlay--left--open {
   transform: translateX(var(--spectrum-overlay-negative-transform-distance));
 }
 
-.fdFt3W_spectrum-Underlay {
+.CctUYa_spectrum-Underlay {
   z-index: 1;
-  transition: opacity var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)) cubic-bezier(.5, 0, 1, 1) var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)),
-              visibility 0s linear calc(var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)));
+  transition: opacity var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300))
+      cubic-bezier(.5, 0, 1, 1)
+      var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)),
+    visibility 0s linear
+      calc(var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)) +
+          var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)));
   position: absolute;
   inset: 0;
   overflow: hidden;
 }
 
-.fdFt3W_spectrum-Underlay.fdFt3W_spectrum-Underlay--transparent {
+.CctUYa_spectrum-Underlay.CctUYa_spectrum-Underlay--transparent {
   background: none;
   transition: none;
 }
 
-.fdFt3W_is-open {
-  transition: opacity var(--spectrum-dialog-background-entry-animation-duration, var(--spectrum-global-animation-duration-600)) cubic-bezier(0, 0, .4, 1) 0s;
+.CctUYa_is-open {
+  transition: opacity var(--spectrum-dialog-background-entry-animation-duration, var(--spectrum-global-animation-duration-600))
+    cubic-bezier(0, 0, .4, 1)
+    0s;
 }
 
-.fdFt3W_spectrum-Underlay {
+.CctUYa_spectrum-Underlay {
   background: var(--spectrum-dialog-underlay-background-color, var(--spectrum-alias-background-color-modal-overlay));
 }
 /*# sourceMappingURL=underlay_vars.css.map */

package/dist/private/underlay_vars.css.map

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GF","sources":["packages/@adobe/spectrum-css-temp/components/underlay/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"underlay_vars.css.map"}
+{"mappings":"AA4DA;;;;;AAKE;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAQA;;;;AAIA;;;;AAMF;;;;;;;;AAUE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FF;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAqDA","sources":["packages/@adobe/spectrum-css-temp/components/underlay/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"underlay_vars.css.map"}

package/dist/private/underlay_vars_css.cjs

@@ -31,20 +31,20 @@ var $3e5647342fe68f54$export$a96755f239de61ee;
 var $3e5647342fe68f54$export$a85c0c6b6cf8598c;
 var $3e5647342fe68f54$export$85aaa87e65e040bf;
 var $3e5647342fe68f54$export$b9768db7ffc1bc2;
-$3e5647342fe68f54$export$f39a09f249340e2a = `fdFt3W_focus-ring`;
-$3e5647342fe68f54$export$8c4ee2c50c22c514 = `fdFt3W_i18nFontFamily`;
-$3e5647342fe68f54$export$a397eb58038aa381 = `fdFt3W_spectrum-overlay--open`;
-$3e5647342fe68f54$export$a9781837241c946d = `fdFt3W_is-open ${$3e5647342fe68f54$export$a397eb58038aa381}`;
-$3e5647342fe68f54$export$4109102f950813a6 = `fdFt3W_spectrum-FocusRing-ring`;
-$3e5647342fe68f54$export$24c7f46a6e3605dd = `fdFt3W_spectrum-FocusRing ${$3e5647342fe68f54$export$4109102f950813a6}`;
-$3e5647342fe68f54$export$2927016961429360 = `fdFt3W_spectrum-FocusRing--quiet`;
-$3e5647342fe68f54$export$39eed38e2296a1d6 = `fdFt3W_spectrum-overlay`;
-$3e5647342fe68f54$export$74470528f463af97 = `fdFt3W_spectrum-Underlay ${$3e5647342fe68f54$export$39eed38e2296a1d6}`;
-$3e5647342fe68f54$export$8eb3860104039b44 = `fdFt3W_spectrum-Underlay--transparent`;
-$3e5647342fe68f54$export$a96755f239de61ee = `fdFt3W_spectrum-overlay--bottom--open`;
-$3e5647342fe68f54$export$a85c0c6b6cf8598c = `fdFt3W_spectrum-overlay--left--open`;
-$3e5647342fe68f54$export$85aaa87e65e040bf = `fdFt3W_spectrum-overlay--right--open`;
-$3e5647342fe68f54$export$b9768db7ffc1bc2 = `fdFt3W_spectrum-overlay--top--open`;
+$3e5647342fe68f54$export$f39a09f249340e2a = `CctUYa_focus-ring`;
+$3e5647342fe68f54$export$8c4ee2c50c22c514 = `CctUYa_i18nFontFamily`;
+$3e5647342fe68f54$export$a397eb58038aa381 = `CctUYa_spectrum-overlay--open`;
+$3e5647342fe68f54$export$a9781837241c946d = `CctUYa_is-open ${$3e5647342fe68f54$export$a397eb58038aa381}`;
+$3e5647342fe68f54$export$4109102f950813a6 = `CctUYa_spectrum-FocusRing-ring`;
+$3e5647342fe68f54$export$24c7f46a6e3605dd = `CctUYa_spectrum-FocusRing ${$3e5647342fe68f54$export$4109102f950813a6}`;
+$3e5647342fe68f54$export$2927016961429360 = `CctUYa_spectrum-FocusRing--quiet`;
+$3e5647342fe68f54$export$39eed38e2296a1d6 = `CctUYa_spectrum-overlay`;
+$3e5647342fe68f54$export$74470528f463af97 = `CctUYa_spectrum-Underlay ${$3e5647342fe68f54$export$39eed38e2296a1d6}`;
+$3e5647342fe68f54$export$8eb3860104039b44 = `CctUYa_spectrum-Underlay--transparent`;
+$3e5647342fe68f54$export$a96755f239de61ee = `CctUYa_spectrum-overlay--bottom--open`;
+$3e5647342fe68f54$export$a85c0c6b6cf8598c = `CctUYa_spectrum-overlay--left--open`;
+$3e5647342fe68f54$export$85aaa87e65e040bf = `CctUYa_spectrum-overlay--right--open`;
+$3e5647342fe68f54$export$b9768db7ffc1bc2 = `CctUYa_spectrum-overlay--top--open`;
 
 
 //# sourceMappingURL=underlay_vars_css.cjs.map