@adobe/react-spectrum 3.47.0 → 3.47.2

package/dist/private/picker/Picker.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.tsx"],"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\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {Alignment, AsyncLoadable, DimensionValue, DOMRef, DOMRefValue, FocusableRefValue, LabelPosition, SingleSelection, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\n// @ts-ignore\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T> extends Omit<AriaSelectProps<T>, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit<SingleSelection, 'disallowEmptySelection'>, AsyncLoadable, SpectrumLabelableProps, StyleProps  {\n  /** Whether the textfield should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** Alignment of the menu relative to the input target.\n   * @default 'start'\n   */\n  align?: Alignment,\n  /**\n   * Direction the menu will render relative to the Picker.\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   * @default true\n   */\n  shouldFlip?: boolean,\n  /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n  menuWidth?: DimensionValue,\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Picker = React.forwardRef(function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {\n  props = useSlotProps(props, 'picker');\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n  let {\n    autoComplete,\n    isDisabled,\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    placeholder = stringFormatter.format('placeholder'),\n    isQuiet,\n    labelPosition = 'top' as LabelPosition,\n    menuWidth,\n    autoFocus\n  } = props;\n\n  let state = useSelectState(props);\n  let domRef = useDOMRef(ref);\n\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n  let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n  let listboxRef = useRef(null);\n\n  let isLoadingInitial = props.isLoading && state.collection.size === 0;\n  let isLoadingMore = props.isLoading && state.collection.size > 0;\n  let progressCircleId = useId();\n\n  // We create the listbox layout in Picker and pass it to ListBoxBase below\n  // so that the layout information can be cached even while the listbox is not mounted.\n  // We also use the layout as the keyboard delegate for type to select.\n  let layout = useListBoxLayout();\n  let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({\n    ...props,\n    'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)\n  }, state, unwrappedTriggerRef);\n\n  let isMobile = useIsMobileDevice();\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n  let listbox = (\n    <ListBoxBase\n      {...menuProps}\n      ref={listboxRef}\n      disallowEmptySelection\n      autoFocus={state.focusStrategy || true}\n      shouldSelectOnPressUp\n      focusOnPointerEnter\n      layout={layout}\n      state={state}\n      width={isMobile ? '100%' : undefined}\n      // Set max height: inherit so Tray scrolling works\n      UNSAFE_style={{maxHeight: 'inherit'}}\n      isLoading={props.isLoading}\n      showLoadingSpinner={isLoadingMore}\n      onLoadMore={props.onLoadMore} />\n  );\n\n  // Measure the width of the button to inform the width of the menu (below).\n  let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n  let {scale} = useProvider();\n\n  let onResize = useCallback(() => {\n    if (!isMobile && unwrappedTriggerRef.current) {\n      let width = unwrappedTriggerRef.current.offsetWidth;\n      setButtonWidth(width);\n    }\n  }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n  useResizeObserver({\n    ref: unwrappedTriggerRef,\n    onResize: onResize\n  });\n\n  useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray state={state}>\n        {listbox}\n      </Tray>\n    );\n  } else {\n    // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n    // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n    // Not using style props for this because they don't support `calc`.\n    let width = isQuiet ? undefined : buttonWidth;\n    let style = {\n      width: menuWidth ? dimensionValue(menuWidth) : width,\n      minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth\n    };\n\n    overlay = (\n      <Popover\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {'spectrum-Dropdown-popover--quiet': isQuiet})}\n        ref={popoverRef}\n        placement={`${direction} ${align}`}\n        shouldFlip={shouldFlip}\n        hideArrow\n        state={state}\n        triggerRef={unwrappedTriggerRef}\n        scrollRef={listboxRef}\n        shouldContainFocus>\n        {listbox}\n      </Popover>\n    );\n  }\n\n  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n  if (typeof contents === 'string') {\n    contents = <Text>{contents}</Text>;\n  }\n\n  let picker = (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-Dropdown',\n          {\n            'is-invalid': isInvalid && !isDisabled,\n            'is-disabled': isDisabled,\n            'spectrum-Dropdown--quiet': isQuiet\n          }\n        )\n      }>\n      <HiddenSelect\n        autoComplete={autoComplete}\n        {...hiddenSelectProps} />\n      <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n        <FieldButton\n          ref={triggerRef}\n          isActive={state.isOpen}\n          isQuiet={isQuiet}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          autoFocus={autoFocus}\n          UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {'is-hovered': isHovered})}>\n          <SlotProvider\n            slots={{\n              icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n              avatar: {UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'), size: 'avatar-size-100'},\n              text: {\n                ...valueProps,\n                UNSAFE_className: classNames(\n                  styles,\n                  'spectrum-Dropdown-label',\n                  {'is-placeholder': !state.selectedItem}\n                )\n              },\n              description: {\n                isHidden: true\n              }\n            }}>\n            {contents}\n          </SlotProvider>\n          {isLoadingInitial &&\n            <ProgressCircle\n              id={progressCircleId}\n              isIndeterminate\n              size=\"S\"\n              aria-label={stringFormatter.format('loading')}\n              UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n          }\n          {isInvalid && !isLoadingInitial && !isDisabled &&\n            <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n          }\n          <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n        </FieldButton>\n      </PressResponder>\n      {state.collection.size === 0 ? null : overlay}\n    </div>\n  );\n\n  let wrapperClassName = classNames(\n    styles,\n    'spectrum-Field',\n    {\n      'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n      'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n    }\n  );\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={wrapperClassName}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      showErrorIcon={false}\n      includeNecessityIndicatorInAccessibilityName\n      elementType=\"span\">\n      {picker}\n    </Field>\n  );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/picker/Picker.tsx"],"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\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {\n  Alignment,\n  AsyncLoadable,\n  DimensionValue,\n  DOMRef,\n  DOMRefValue,\n  FocusableRefValue,\n  LabelPosition,\n  SingleSelection,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria/useSelect';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport intlMessages from '../../intl/picker/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '../text/Text';\nimport {Tray} from '../overlays/Tray';\nimport {useDOMRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSelectState} from 'react-stately/useSelectState';\n\nexport interface SpectrumPickerProps<T>\n  extends\n    Omit<\n      AriaSelectProps<T>,\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'allowsEmptyCollection'\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\n    AsyncLoadable,\n    SpectrumLabelableProps,\n    StyleProps {\n  /** Whether the textfield should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: Alignment;\n  /**\n   * Direction the menu will render relative to the Picker.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n   * dropdown is always equal to the trigger's width.\n   */\n  menuWidth?: DimensionValue;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nexport const Picker = React.forwardRef(function Picker<T extends object>(\n  props: SpectrumPickerProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  props = useSlotProps(props, 'picker');\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n  let {\n    autoComplete,\n    isDisabled,\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    placeholder = stringFormatter.format('placeholder'),\n    isQuiet,\n    labelPosition = 'top' as LabelPosition,\n    menuWidth,\n    autoFocus\n  } = props;\n\n  let state = useSelectState(props);\n  let domRef = useDOMRef(ref);\n\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n  let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n  let listboxRef = useRef(null);\n\n  let isLoadingInitial = props.isLoading && state.collection.size === 0;\n  let isLoadingMore = props.isLoading && state.collection.size > 0;\n  let progressCircleId = useId();\n\n  // We create the listbox layout in Picker and pass it to ListBoxBase below\n  // so that the layout information can be cached even while the listbox is not mounted.\n  // We also use the layout as the keyboard delegate for type to select.\n  let layout = useListBoxLayout();\n  let {\n    labelProps,\n    triggerProps,\n    valueProps,\n    menuProps,\n    hiddenSelectProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useSelect(\n    {\n      ...props,\n      'aria-describedby': isLoadingInitial ? progressCircleId : undefined\n    },\n    state,\n    unwrappedTriggerRef\n  );\n\n  let isMobile = useIsMobileDevice();\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n  let listbox = (\n    <ListBoxBase\n      {...menuProps}\n      ref={listboxRef}\n      disallowEmptySelection\n      autoFocus={state.focusStrategy || true}\n      shouldSelectOnPressUp\n      focusOnPointerEnter\n      layout={layout}\n      state={state}\n      width={isMobile ? '100%' : undefined}\n      // Set max height: inherit so Tray scrolling works\n      UNSAFE_style={{maxHeight: 'inherit'}}\n      isLoading={props.isLoading}\n      showLoadingSpinner={isLoadingMore}\n      onLoadMore={props.onLoadMore}\n    />\n  );\n\n  // Measure the width of the button to inform the width of the menu (below).\n  let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n  let {scale} = useProvider();\n\n  let onResize = useCallback(() => {\n    if (!isMobile && unwrappedTriggerRef.current) {\n      let width = unwrappedTriggerRef.current.offsetWidth;\n      setButtonWidth(width);\n    }\n  }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n  useResizeObserver({\n    ref: unwrappedTriggerRef,\n    onResize: onResize\n  });\n\n  useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n  let overlay;\n  if (isMobile) {\n    overlay = <Tray state={state}>{listbox}</Tray>;\n  } else {\n    // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n    // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n    // Not using style props for this because they don't support `calc`.\n    let width = isQuiet ? undefined : buttonWidth;\n    let style = {\n      width: menuWidth ? dimensionValue(menuWidth) : width,\n      minWidth: isQuiet\n        ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n        : buttonWidth\n    };\n\n    overlay = (\n      <Popover\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {\n          'spectrum-Dropdown-popover--quiet': isQuiet\n        })}\n        ref={popoverRef}\n        placement={`${direction} ${align}`}\n        shouldFlip={shouldFlip}\n        hideArrow\n        state={state}\n        triggerRef={unwrappedTriggerRef}\n        scrollRef={listboxRef}\n        shouldContainFocus>\n        {listbox}\n      </Popover>\n    );\n  }\n\n  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n  if (typeof contents === 'string') {\n    contents = <Text>{contents}</Text>;\n  }\n\n  let picker = (\n    <div\n      className={classNames(styles, 'spectrum-Dropdown', {\n        'is-invalid': isInvalid && !isDisabled,\n        'is-disabled': isDisabled,\n        'spectrum-Dropdown--quiet': isQuiet\n      })}>\n      <HiddenSelect autoComplete={autoComplete} {...hiddenSelectProps} />\n      <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n        <FieldButton\n          ref={triggerRef}\n          isActive={state.isOpen}\n          isQuiet={isQuiet}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          autoFocus={autoFocus}\n          UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {\n            'is-hovered': isHovered\n          })}>\n          <SlotProvider\n            slots={{\n              icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n              avatar: {\n                UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'),\n                size: 'avatar-size-100'\n              },\n              text: {\n                ...valueProps,\n                UNSAFE_className: classNames(styles, 'spectrum-Dropdown-label', {\n                  'is-placeholder': !state.selectedItem\n                })\n              },\n              description: {\n                isHidden: true\n              }\n            }}>\n            {contents}\n          </SlotProvider>\n          {isLoadingInitial && (\n            <ProgressCircle\n              id={progressCircleId}\n              isIndeterminate\n              size=\"S\"\n              aria-label={stringFormatter.format('loading')}\n              UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n            />\n          )}\n          {isInvalid && !isLoadingInitial && !isDisabled && (\n            <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n          )}\n          <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n        </FieldButton>\n      </PressResponder>\n      {state.collection.size === 0 ? null : overlay}\n    </div>\n  );\n\n  let wrapperClassName = classNames(styles, 'spectrum-Field', {\n    'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n    'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n  });\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={wrapperClassName}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      showErrorIcon={false}\n      includeNecessityIndicatorInAccessibilityName\n      elementType=\"span\">\n      {picker}\n    </Field>\n  );\n}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.mjs.map"}

package/dist/private/popover_vars.css

@@ -1,117 +1,126 @@
-.OHFFrW_i18nFontFamily {
+.p6aKLq_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.OHFFrW_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;
-}
+  &:lang(ar) {
+    font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.OHFFrW_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;
-}
+  &:lang(he) {
+    font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.OHFFrW_i18nFontFamily:lang(zh) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
-}
+  &:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
 
-.OHFFrW_i18nFontFamily:lang(zh-Hans) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-Hans) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.OHFFrW_i18nFontFamily:lang(zh-Hant) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
-}
+  &:lang(zh-Hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
 
-.OHFFrW_i18nFontFamily:lang(zh-SG), .OHFFrW_i18nFontFamily:lang(zh-CN) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-SG), &:lang(zh-CN) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.OHFFrW_i18nFontFamily:lang(ko) {
-  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
-}
+  &:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
 
-.OHFFrW_i18nFontFamily:lang(ja) {
-  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  &:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
 }
 
-.OHFFrW_spectrum-FocusRing-ring {
+.p6aKLq_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);
   --spectrum-focus-ring-border-size: 0px;
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
-}
 
-.OHFFrW_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;
-  display: block;
-  position: absolute;
-  inset: 0;
+  &: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;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
 }
 
-.OHFFrW_spectrum-FocusRing.OHFFrW_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);
+.p6aKLq_spectrum-FocusRing {
+  &.p6aKLq_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);
+    }
+  }
 }
 
-.OHFFrW_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.p6aKLq_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.OHFFrW_spectrum-FocusRing--quiet.OHFFrW_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);
+  &.p6aKLq_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) {
-  .OHFFrW_spectrum-FocusRing, .OHFFrW_spectrum-FocusRing-ring, .OHFFrW_spectrum-FocusRing--quiet {
+  .p6aKLq_spectrum-FocusRing, .p6aKLq_spectrum-FocusRing-ring, .p6aKLq_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.OHFFrW_spectrum-FocusRing, .OHFFrW_spectrum-FocusRing-ring, .OHFFrW_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
-.OHFFrW_spectrum-overlay {
+.p6aKLq_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;
 }
 
-.OHFFrW_spectrum-overlay--open {
+.p6aKLq_spectrum-overlay--open {
   visibility: visible;
   opacity: .9999;
   pointer-events: auto;
   transition-delay: 0s;
 }
 
-.OHFFrW_spectrum-overlay--bottom--open {
+.p6aKLq_spectrum-overlay--bottom--open {
   transform: translateY(var(--spectrum-overlay-positive-transform-distance));
 }
 
-.OHFFrW_spectrum-overlay--top--open {
+.p6aKLq_spectrum-overlay--top--open {
   transform: translateY(var(--spectrum-overlay-negative-transform-distance));
 }
 
-.OHFFrW_spectrum-overlay--right--open {
+.p6aKLq_spectrum-overlay--right--open {
   transform: translateX(var(--spectrum-overlay-positive-transform-distance));
 }
 
-.OHFFrW_spectrum-overlay--left--open {
+.p6aKLq_spectrum-overlay--left--open {
   transform: translateX(var(--spectrum-overlay-negative-transform-distance));
 }
 
-.OHFFrW_spectrum-Popover {
+.p6aKLq_spectrum-Popover {
   box-sizing: border-box;
   min-width: var(--spectrum-global-dimension-size-400);
   min-height: var(--spectrum-global-dimension-size-400);
@@ -125,92 +134,107 @@
   overflow: hidden;
 }
 
-.OHFFrW_spectrum-Popover.OHFFrW_is-exiting, .OHFFrW_spectrum-Popover.OHFFrW_is-exiting * {
+.p6aKLq_spectrum-Popover.p6aKLq_is-exiting, .p6aKLq_spectrum-Popover.p6aKLq_is-exiting * {
   pointer-events: none;
   touch-action: none;
 }
 
-.OHFFrW_spectrum-Popover--withTip {
+.p6aKLq_spectrum-Popover--withTip {
   overflow: visible;
 }
 
-.OHFFrW_spectrum-Popover-tip {
+.p6aKLq_spectrum-Popover-tip {
   --spectrum-popover-tip-size: var(--spectrum-popover-tip-width, var(--spectrum-global-dimension-size-250));
   --spectrum-popover-tip-borderWidth: var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin));
   position: absolute;
   -webkit-transform: translate(0);
-}
 
-.OHFFrW_spectrum-Popover-tip .OHFFrW_spectrum-Popover-tip-triangle {
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-  stroke-width: var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin));
+  & .p6aKLq_spectrum-Popover-tip-triangle {
+    stroke-linecap: square;
+    stroke-linejoin: miter;
+    stroke-width: var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin));
+  }
 }
 
-.OHFFrW_spectrum-Popover--dialog {
+.p6aKLq_spectrum-Popover--dialog {
   min-width: 270px;
   padding: 30px 29px;
 }
 
-.OHFFrW_spectrum-Popover--left.OHFFrW_spectrum-Popover--withTip {
-  margin-right: 13px;
-}
+.p6aKLq_spectrum-Popover--left {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-right: 13px;
+  }
 
-.OHFFrW_spectrum-Popover--left .OHFFrW_spectrum-Popover-tip {
-  left: 100%;
+  & .p6aKLq_spectrum-Popover-tip {
+    left: 100%;
+  }
 }
 
-.OHFFrW_spectrum-Popover--right.OHFFrW_spectrum-Popover--withTip {
-  margin-left: 13px;
-}
+.p6aKLq_spectrum-Popover--right {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-left: 13px;
+  }
 
-.OHFFrW_spectrum-Popover--right .OHFFrW_spectrum-Popover-tip {
-  right: 100%;
-  transform: scaleX(-1);
+  & .p6aKLq_spectrum-Popover-tip {
+    right: 100%;
+    transform: scaleX(-1);
+  }
 }
 
-:is(.OHFFrW_spectrum-Popover--left, .OHFFrW_spectrum-Popover--right) .OHFFrW_spectrum-Popover-tip {
-  margin-top: calc(var(--spectrum-global-dimension-size-150) * -1);
-  top: 50%;
+.p6aKLq_spectrum-Popover--left, .p6aKLq_spectrum-Popover--right {
+  & .p6aKLq_spectrum-Popover-tip {
+    margin-top: calc(var(--spectrum-global-dimension-size-150) * -1);
+    top: 50%;
+  }
 }
 
-.OHFFrW_spectrum-Popover--bottom.OHFFrW_spectrum-Popover--withTip {
-  margin-top: 13px;
-}
+.p6aKLq_spectrum-Popover--bottom {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-top: 13px;
+  }
 
-.OHFFrW_spectrum-Popover--bottom .OHFFrW_spectrum-Popover-tip {
-  bottom: 100%;
-  transform: scaleY(-1);
+  & .p6aKLq_spectrum-Popover-tip {
+    bottom: 100%;
+    transform: scaleY(-1);
+  }
 }
 
-.OHFFrW_spectrum-Popover--top.OHFFrW_spectrum-Popover--withTip {
-  margin-bottom: 13px;
-}
+.p6aKLq_spectrum-Popover--top {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-bottom: 13px;
+  }
 
-.OHFFrW_spectrum-Popover--top .OHFFrW_spectrum-Popover-tip {
-  top: 100%;
+  & .p6aKLq_spectrum-Popover-tip {
+    top: 100%;
+  }
 }
 
-:is(.OHFFrW_spectrum-Popover--bottom, .OHFFrW_spectrum-Popover--top) .OHFFrW_spectrum-Popover-tip {
-  margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
-  left: 50%;
+.p6aKLq_spectrum-Popover--bottom, .p6aKLq_spectrum-Popover--top {
+  & .p6aKLq_spectrum-Popover-tip {
+    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
+    left: 50%;
+  }
 }
 
-.OHFFrW_spectrum-Popover {
+.p6aKLq_spectrum-Popover {
   background-color: var(--spectrum-popover-background-color, var(--spectrum-global-color-gray-50));
   border-color: var(--spectrum-popover-border-color, var(--spectrum-alias-border-color-dark));
-  -webkit-filter: drop-shadow(0 var(--spectrum-popover-shadow-offset-y, var(--spectrum-alias-dropshadow-offset-y)) var(--spectrum-popover-shadow-blur, var(--spectrum-alias-dropshadow-blur)) var(--spectrum-popover-shadow-color, var(--spectrum-alias-dropshadow-color)));
+  -webkit-filter: drop-shadow(0 var(--spectrum-popover-shadow-offset-y, var(--spectrum-alias-dropshadow-offset-y)) var(--spectrum-popover-shadow-blur, var(--spectrum-alias-dropshadow-blur))
+      var(--spectrum-popover-shadow-color, var(--spectrum-alias-dropshadow-color)));
   will-change: filter;
   clip-path: inset(-30px);
-}
 
-.OHFFrW_spectrum-Popover .OHFFrW_spectrum-Popover-tip .OHFFrW_spectrum-Popover-tip-triangle {
-  fill: var(--spectrum-popover-background-color, var(--spectrum-global-color-gray-50));
-  stroke: var(--spectrum-popover-border-color, var(--spectrum-alias-border-color-dark));
+  & .p6aKLq_spectrum-Popover-tip {
+    & .p6aKLq_spectrum-Popover-tip-triangle {
+      fill: var(--spectrum-popover-background-color, var(--spectrum-global-color-gray-50));
+      stroke: var(--spectrum-popover-border-color, var(--spectrum-alias-border-color-dark));
+    }
+  }
 }
 
 @media (forced-colors: active) {
-  .OHFFrW_spectrum-Popover {
+  .p6aKLq_spectrum-Popover {
     --spectrum-popover-background-color: Canvas;
     --spectrum-popover-border-color: CanvasText;
   }

package/dist/private/popover_vars.css.map

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA","sources":["packages/@adobe/spectrum-css-temp/components/popover/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":"popover_vars.css.map"}
+{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DJ;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;;;;;;;;;;;;;;;;;;;;EAwBE;;;;;;;;;;EAcA;;;;;;;;;;;;;;;;;;EAyBA;;;;;;;;;;;EAeA","sources":["packages/@adobe/spectrum-css-temp/components/popover/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":"popover_vars.css.map"}

package/dist/private/popover_vars_css.cjs

@@ -55,32 +55,32 @@ var $54d1bc5a3ad5cc53$export$f30becfb1df0cae4;
 var $54d1bc5a3ad5cc53$export$d8b16c5377728262;
 var $54d1bc5a3ad5cc53$export$3100ec4dc1668df1;
 var $54d1bc5a3ad5cc53$export$ed733fa6cf19ab80;
-$54d1bc5a3ad5cc53$export$f39a09f249340e2a = `OHFFrW_focus-ring`;
-$54d1bc5a3ad5cc53$export$8c4ee2c50c22c514 = `OHFFrW_i18nFontFamily`;
-$54d1bc5a3ad5cc53$export$5b2da502e3fd1ca6 = `OHFFrW_is-exiting`;
-$54d1bc5a3ad5cc53$export$a397eb58038aa381 = `OHFFrW_spectrum-overlay--open`;
-$54d1bc5a3ad5cc53$export$a9781837241c946d = `OHFFrW_is-open ${$54d1bc5a3ad5cc53$export$a397eb58038aa381}`;
-$54d1bc5a3ad5cc53$export$a96755f239de61ee = `OHFFrW_spectrum-overlay--bottom--open`;
-$54d1bc5a3ad5cc53$export$1f160596ffe52357 = `OHFFrW_is-open--bottom ${$54d1bc5a3ad5cc53$export$a96755f239de61ee}`;
-$54d1bc5a3ad5cc53$export$a85c0c6b6cf8598c = `OHFFrW_spectrum-overlay--left--open`;
-$54d1bc5a3ad5cc53$export$d6106cb3acaf56ae = `OHFFrW_is-open--left ${$54d1bc5a3ad5cc53$export$a85c0c6b6cf8598c}`;
-$54d1bc5a3ad5cc53$export$85aaa87e65e040bf = `OHFFrW_spectrum-overlay--right--open`;
-$54d1bc5a3ad5cc53$export$8935d072812c3169 = `OHFFrW_is-open--right ${$54d1bc5a3ad5cc53$export$85aaa87e65e040bf}`;
-$54d1bc5a3ad5cc53$export$b9768db7ffc1bc2 = `OHFFrW_spectrum-overlay--top--open`;
-$54d1bc5a3ad5cc53$export$cd4bf1e07ae86214 = `OHFFrW_is-open--top ${$54d1bc5a3ad5cc53$export$b9768db7ffc1bc2}`;
-$54d1bc5a3ad5cc53$export$4109102f950813a6 = `OHFFrW_spectrum-FocusRing-ring`;
-$54d1bc5a3ad5cc53$export$24c7f46a6e3605dd = `OHFFrW_spectrum-FocusRing ${$54d1bc5a3ad5cc53$export$4109102f950813a6}`;
-$54d1bc5a3ad5cc53$export$2927016961429360 = `OHFFrW_spectrum-FocusRing--quiet`;
-$54d1bc5a3ad5cc53$export$39eed38e2296a1d6 = `OHFFrW_spectrum-overlay`;
-$54d1bc5a3ad5cc53$export$a62dc1b6ab23a7bb = `OHFFrW_spectrum-Popover ${$54d1bc5a3ad5cc53$export$39eed38e2296a1d6}`;
-$54d1bc5a3ad5cc53$export$6a19b19b14780d4a = `OHFFrW_spectrum-Popover--bottom`;
-$54d1bc5a3ad5cc53$export$cf634262e726cd19 = `OHFFrW_spectrum-Popover--dialog`;
-$54d1bc5a3ad5cc53$export$79cc55906ac5b00 = `OHFFrW_spectrum-Popover--left`;
-$54d1bc5a3ad5cc53$export$5fc8b429396c9f58 = `OHFFrW_spectrum-Popover--right`;
-$54d1bc5a3ad5cc53$export$f30becfb1df0cae4 = `OHFFrW_spectrum-Popover--top`;
-$54d1bc5a3ad5cc53$export$d8b16c5377728262 = `OHFFrW_spectrum-Popover--withTip`;
-$54d1bc5a3ad5cc53$export$3100ec4dc1668df1 = `OHFFrW_spectrum-Popover-tip`;
-$54d1bc5a3ad5cc53$export$ed733fa6cf19ab80 = `OHFFrW_spectrum-Popover-tip-triangle`;
+$54d1bc5a3ad5cc53$export$f39a09f249340e2a = `p6aKLq_focus-ring`;
+$54d1bc5a3ad5cc53$export$8c4ee2c50c22c514 = `p6aKLq_i18nFontFamily`;
+$54d1bc5a3ad5cc53$export$5b2da502e3fd1ca6 = `p6aKLq_is-exiting`;
+$54d1bc5a3ad5cc53$export$a397eb58038aa381 = `p6aKLq_spectrum-overlay--open`;
+$54d1bc5a3ad5cc53$export$a9781837241c946d = `p6aKLq_is-open ${$54d1bc5a3ad5cc53$export$a397eb58038aa381}`;
+$54d1bc5a3ad5cc53$export$a96755f239de61ee = `p6aKLq_spectrum-overlay--bottom--open`;
+$54d1bc5a3ad5cc53$export$1f160596ffe52357 = `p6aKLq_is-open--bottom ${$54d1bc5a3ad5cc53$export$a96755f239de61ee}`;
+$54d1bc5a3ad5cc53$export$a85c0c6b6cf8598c = `p6aKLq_spectrum-overlay--left--open`;
+$54d1bc5a3ad5cc53$export$d6106cb3acaf56ae = `p6aKLq_is-open--left ${$54d1bc5a3ad5cc53$export$a85c0c6b6cf8598c}`;
+$54d1bc5a3ad5cc53$export$85aaa87e65e040bf = `p6aKLq_spectrum-overlay--right--open`;
+$54d1bc5a3ad5cc53$export$8935d072812c3169 = `p6aKLq_is-open--right ${$54d1bc5a3ad5cc53$export$85aaa87e65e040bf}`;
+$54d1bc5a3ad5cc53$export$b9768db7ffc1bc2 = `p6aKLq_spectrum-overlay--top--open`;
+$54d1bc5a3ad5cc53$export$cd4bf1e07ae86214 = `p6aKLq_is-open--top ${$54d1bc5a3ad5cc53$export$b9768db7ffc1bc2}`;
+$54d1bc5a3ad5cc53$export$4109102f950813a6 = `p6aKLq_spectrum-FocusRing-ring`;
+$54d1bc5a3ad5cc53$export$24c7f46a6e3605dd = `p6aKLq_spectrum-FocusRing ${$54d1bc5a3ad5cc53$export$4109102f950813a6}`;
+$54d1bc5a3ad5cc53$export$2927016961429360 = `p6aKLq_spectrum-FocusRing--quiet`;
+$54d1bc5a3ad5cc53$export$39eed38e2296a1d6 = `p6aKLq_spectrum-overlay`;
+$54d1bc5a3ad5cc53$export$a62dc1b6ab23a7bb = `p6aKLq_spectrum-Popover ${$54d1bc5a3ad5cc53$export$39eed38e2296a1d6}`;
+$54d1bc5a3ad5cc53$export$6a19b19b14780d4a = `p6aKLq_spectrum-Popover--bottom`;
+$54d1bc5a3ad5cc53$export$cf634262e726cd19 = `p6aKLq_spectrum-Popover--dialog`;
+$54d1bc5a3ad5cc53$export$79cc55906ac5b00 = `p6aKLq_spectrum-Popover--left`;
+$54d1bc5a3ad5cc53$export$5fc8b429396c9f58 = `p6aKLq_spectrum-Popover--right`;
+$54d1bc5a3ad5cc53$export$f30becfb1df0cae4 = `p6aKLq_spectrum-Popover--top`;
+$54d1bc5a3ad5cc53$export$d8b16c5377728262 = `p6aKLq_spectrum-Popover--withTip`;
+$54d1bc5a3ad5cc53$export$3100ec4dc1668df1 = `p6aKLq_spectrum-Popover-tip`;
+$54d1bc5a3ad5cc53$export$ed733fa6cf19ab80 = `p6aKLq_spectrum-Popover-tip-triangle`;
 
 
 //# sourceMappingURL=popover_vars_css.cjs.map

package/dist/private/popover_vars_css.mjs

@@ -56,32 +56,32 @@ var $42f46d8915df50aa$export$f30becfb1df0cae4;
 var $42f46d8915df50aa$export$d8b16c5377728262;
 var $42f46d8915df50aa$export$3100ec4dc1668df1;
 var $42f46d8915df50aa$export$ed733fa6cf19ab80;
-$42f46d8915df50aa$export$f39a09f249340e2a = `OHFFrW_focus-ring`;
-$42f46d8915df50aa$export$8c4ee2c50c22c514 = `OHFFrW_i18nFontFamily`;
-$42f46d8915df50aa$export$5b2da502e3fd1ca6 = `OHFFrW_is-exiting`;
-$42f46d8915df50aa$export$a397eb58038aa381 = `OHFFrW_spectrum-overlay--open`;
-$42f46d8915df50aa$export$a9781837241c946d = `OHFFrW_is-open ${$42f46d8915df50aa$export$a397eb58038aa381}`;
-$42f46d8915df50aa$export$a96755f239de61ee = `OHFFrW_spectrum-overlay--bottom--open`;
-$42f46d8915df50aa$export$1f160596ffe52357 = `OHFFrW_is-open--bottom ${$42f46d8915df50aa$export$a96755f239de61ee}`;
-$42f46d8915df50aa$export$a85c0c6b6cf8598c = `OHFFrW_spectrum-overlay--left--open`;
-$42f46d8915df50aa$export$d6106cb3acaf56ae = `OHFFrW_is-open--left ${$42f46d8915df50aa$export$a85c0c6b6cf8598c}`;
-$42f46d8915df50aa$export$85aaa87e65e040bf = `OHFFrW_spectrum-overlay--right--open`;
-$42f46d8915df50aa$export$8935d072812c3169 = `OHFFrW_is-open--right ${$42f46d8915df50aa$export$85aaa87e65e040bf}`;
-$42f46d8915df50aa$export$b9768db7ffc1bc2 = `OHFFrW_spectrum-overlay--top--open`;
-$42f46d8915df50aa$export$cd4bf1e07ae86214 = `OHFFrW_is-open--top ${$42f46d8915df50aa$export$b9768db7ffc1bc2}`;
-$42f46d8915df50aa$export$4109102f950813a6 = `OHFFrW_spectrum-FocusRing-ring`;
-$42f46d8915df50aa$export$24c7f46a6e3605dd = `OHFFrW_spectrum-FocusRing ${$42f46d8915df50aa$export$4109102f950813a6}`;
-$42f46d8915df50aa$export$2927016961429360 = `OHFFrW_spectrum-FocusRing--quiet`;
-$42f46d8915df50aa$export$39eed38e2296a1d6 = `OHFFrW_spectrum-overlay`;
-$42f46d8915df50aa$export$a62dc1b6ab23a7bb = `OHFFrW_spectrum-Popover ${$42f46d8915df50aa$export$39eed38e2296a1d6}`;
-$42f46d8915df50aa$export$6a19b19b14780d4a = `OHFFrW_spectrum-Popover--bottom`;
-$42f46d8915df50aa$export$cf634262e726cd19 = `OHFFrW_spectrum-Popover--dialog`;
-$42f46d8915df50aa$export$79cc55906ac5b00 = `OHFFrW_spectrum-Popover--left`;
-$42f46d8915df50aa$export$5fc8b429396c9f58 = `OHFFrW_spectrum-Popover--right`;
-$42f46d8915df50aa$export$f30becfb1df0cae4 = `OHFFrW_spectrum-Popover--top`;
-$42f46d8915df50aa$export$d8b16c5377728262 = `OHFFrW_spectrum-Popover--withTip`;
-$42f46d8915df50aa$export$3100ec4dc1668df1 = `OHFFrW_spectrum-Popover-tip`;
-$42f46d8915df50aa$export$ed733fa6cf19ab80 = `OHFFrW_spectrum-Popover-tip-triangle`;
+$42f46d8915df50aa$export$f39a09f249340e2a = `p6aKLq_focus-ring`;
+$42f46d8915df50aa$export$8c4ee2c50c22c514 = `p6aKLq_i18nFontFamily`;
+$42f46d8915df50aa$export$5b2da502e3fd1ca6 = `p6aKLq_is-exiting`;
+$42f46d8915df50aa$export$a397eb58038aa381 = `p6aKLq_spectrum-overlay--open`;
+$42f46d8915df50aa$export$a9781837241c946d = `p6aKLq_is-open ${$42f46d8915df50aa$export$a397eb58038aa381}`;
+$42f46d8915df50aa$export$a96755f239de61ee = `p6aKLq_spectrum-overlay--bottom--open`;
+$42f46d8915df50aa$export$1f160596ffe52357 = `p6aKLq_is-open--bottom ${$42f46d8915df50aa$export$a96755f239de61ee}`;
+$42f46d8915df50aa$export$a85c0c6b6cf8598c = `p6aKLq_spectrum-overlay--left--open`;
+$42f46d8915df50aa$export$d6106cb3acaf56ae = `p6aKLq_is-open--left ${$42f46d8915df50aa$export$a85c0c6b6cf8598c}`;
+$42f46d8915df50aa$export$85aaa87e65e040bf = `p6aKLq_spectrum-overlay--right--open`;
+$42f46d8915df50aa$export$8935d072812c3169 = `p6aKLq_is-open--right ${$42f46d8915df50aa$export$85aaa87e65e040bf}`;
+$42f46d8915df50aa$export$b9768db7ffc1bc2 = `p6aKLq_spectrum-overlay--top--open`;
+$42f46d8915df50aa$export$cd4bf1e07ae86214 = `p6aKLq_is-open--top ${$42f46d8915df50aa$export$b9768db7ffc1bc2}`;
+$42f46d8915df50aa$export$4109102f950813a6 = `p6aKLq_spectrum-FocusRing-ring`;
+$42f46d8915df50aa$export$24c7f46a6e3605dd = `p6aKLq_spectrum-FocusRing ${$42f46d8915df50aa$export$4109102f950813a6}`;
+$42f46d8915df50aa$export$2927016961429360 = `p6aKLq_spectrum-FocusRing--quiet`;
+$42f46d8915df50aa$export$39eed38e2296a1d6 = `p6aKLq_spectrum-overlay`;
+$42f46d8915df50aa$export$a62dc1b6ab23a7bb = `p6aKLq_spectrum-Popover ${$42f46d8915df50aa$export$39eed38e2296a1d6}`;
+$42f46d8915df50aa$export$6a19b19b14780d4a = `p6aKLq_spectrum-Popover--bottom`;
+$42f46d8915df50aa$export$cf634262e726cd19 = `p6aKLq_spectrum-Popover--dialog`;
+$42f46d8915df50aa$export$79cc55906ac5b00 = `p6aKLq_spectrum-Popover--left`;
+$42f46d8915df50aa$export$5fc8b429396c9f58 = `p6aKLq_spectrum-Popover--right`;
+$42f46d8915df50aa$export$f30becfb1df0cae4 = `p6aKLq_spectrum-Popover--top`;
+$42f46d8915df50aa$export$d8b16c5377728262 = `p6aKLq_spectrum-Popover--withTip`;
+$42f46d8915df50aa$export$3100ec4dc1668df1 = `p6aKLq_spectrum-Popover-tip`;
+$42f46d8915df50aa$export$ed733fa6cf19ab80 = `p6aKLq_spectrum-Popover-tip-triangle`;
 
 
 export {$42f46d8915df50aa$exports as default};

package/dist/private/progress/ProgressBar.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,IAAI,eAAC,WAAW,WAAE,OAAO,EAAE,GAAG,YAAW,GAAG;IAC5C,MAAM,oBACJ,gBAAgB,cAChB,UAAU,EACX,GAAG,CAAA,GAAA,6CAAa,EAAE;IAEnB,qBACE,0DAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,cACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;YACE,sCAAsC,YAAY;YAClD,mCAAmC,gBAAgB;YACnD,mCAAmC,gBAAgB;QACrD;;AAIV","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBar.tsx"],"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\nimport {classNames} from '../utils/classNames';\nimport {DOMRef} from '@react-types/shared';\nimport {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useProgressBar} from 'react-aria/useProgressBar';\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  let {staticColor, variant, ...otherProps} = props;\n  const {\n    progressBarProps,\n    labelProps\n  } = useProgressBar(props);\n\n  return (\n    <ProgressBarBase\n      {...otherProps}\n      ref={ref}\n      barProps={progressBarProps}\n      labelProps={labelProps}\n      barClassName={\n        classNames(\n          styles,\n          {\n            'spectrum-BarLoader--overBackground': variant === 'overBackground',\n            'spectrum-BarLoader--staticWhite': staticColor === 'white',\n            'spectrum-BarLoader--staticBlack': staticColor === 'black'\n          }\n        )\n      } />\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,eAAC,WAAW,WAAE,OAAO,EAAE,GAAG,YAAW,GAAG;IAC5C,MAAM,oBAAC,gBAAgB,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,6CAAa,EAAE;IAEtD,qBACE,0DAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,cAAc,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC/B,sCAAsC,YAAY;YAClD,mCAAmC,gBAAgB;YACnD,mCAAmC,gBAAgB;QACrD;;AAGN","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBar.tsx"],"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\nimport {classNames} from '../utils/classNames';\nimport {DOMRef} from '@react-types/shared';\nimport {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useProgressBar} from 'react-aria/useProgressBar';\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing,\n * etc., in a visual way. They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = React.forwardRef(function ProgressBar(\n  props: SpectrumProgressBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {staticColor, variant, ...otherProps} = props;\n  const {progressBarProps, labelProps} = useProgressBar(props);\n\n  return (\n    <ProgressBarBase\n      {...otherProps}\n      ref={ref}\n      barProps={progressBarProps}\n      labelProps={labelProps}\n      barClassName={classNames(styles, {\n        'spectrum-BarLoader--overBackground': variant === 'overBackground',\n        'spectrum-BarLoader--staticWhite': staticColor === 'white',\n        'spectrum-BarLoader--staticBlack': staticColor === 'black'\n      })}\n    />\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}

package/dist/private/progress/ProgressBar.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,IAAI,eAAC,WAAW,WAAE,OAAO,EAAE,GAAG,YAAW,GAAG;IAC5C,MAAM,oBACJ,gBAAgB,cAChB,UAAU,EACX,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnB,qBACE,gCAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,cACE,CAAA,GAAA,yCAAS,EACP,CAAA,GAAA,sDAAK,GACL;YACE,sCAAsC,YAAY;YAClD,mCAAmC,gBAAgB;YACnD,mCAAmC,gBAAgB;QACrD;;AAIV","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBar.tsx"],"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\nimport {classNames} from '../utils/classNames';\nimport {DOMRef} from '@react-types/shared';\nimport {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useProgressBar} from 'react-aria/useProgressBar';\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  let {staticColor, variant, ...otherProps} = props;\n  const {\n    progressBarProps,\n    labelProps\n  } = useProgressBar(props);\n\n  return (\n    <ProgressBarBase\n      {...otherProps}\n      ref={ref}\n      barProps={progressBarProps}\n      labelProps={labelProps}\n      barClassName={\n        classNames(\n          styles,\n          {\n            'spectrum-BarLoader--overBackground': variant === 'overBackground',\n            'spectrum-BarLoader--staticWhite': staticColor === 'white',\n            'spectrum-BarLoader--staticBlack': staticColor === 'black'\n          }\n        )\n      } />\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.js.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,eAAC,WAAW,WAAE,OAAO,EAAE,GAAG,YAAW,GAAG;IAC5C,MAAM,oBAAC,gBAAgB,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,cAAc,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;YAC/B,sCAAsC,YAAY;YAClD,mCAAmC,gBAAgB;YACnD,mCAAmC,gBAAgB;QACrD;;AAGN","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBar.tsx"],"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\nimport {classNames} from '../utils/classNames';\nimport {DOMRef} from '@react-types/shared';\nimport {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useProgressBar} from 'react-aria/useProgressBar';\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing,\n * etc., in a visual way. They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = React.forwardRef(function ProgressBar(\n  props: SpectrumProgressBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {staticColor, variant, ...otherProps} = props;\n  const {progressBarProps, labelProps} = useProgressBar(props);\n\n  return (\n    <ProgressBarBase\n      {...otherProps}\n      ref={ref}\n      barProps={progressBarProps}\n      labelProps={labelProps}\n      barClassName={classNames(styles, {\n        'spectrum-BarLoader--overBackground': variant === 'overBackground',\n        'spectrum-BarLoader--staticWhite': staticColor === 'white',\n        'spectrum-BarLoader--staticBlack': staticColor === 'black'\n      })}\n    />\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.js.map"}

package/dist/private/progress/ProgressBar.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,IAAI,eAAC,WAAW,WAAE,OAAO,EAAE,GAAG,YAAW,GAAG;IAC5C,MAAM,oBACJ,gBAAgB,cAChB,UAAU,EACX,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnB,qBACE,gCAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,cACE,CAAA,GAAA,yCAAS,EACP,CAAA,GAAA,sDAAK,GACL;YACE,sCAAsC,YAAY;YAClD,mCAAmC,gBAAgB;YACnD,mCAAmC,gBAAgB;QACrD;;AAIV","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBar.tsx"],"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\nimport {classNames} from '../utils/classNames';\nimport {DOMRef} from '@react-types/shared';\nimport {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useProgressBar} from 'react-aria/useProgressBar';\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  let {staticColor, variant, ...otherProps} = props;\n  const {\n    progressBarProps,\n    labelProps\n  } = useProgressBar(props);\n\n  return (\n    <ProgressBarBase\n      {...otherProps}\n      ref={ref}\n      barProps={progressBarProps}\n      labelProps={labelProps}\n      barClassName={\n        classNames(\n          styles,\n          {\n            'spectrum-BarLoader--overBackground': variant === 'overBackground',\n            'spectrum-BarLoader--staticWhite': staticColor === 'white',\n            'spectrum-BarLoader--staticBlack': staticColor === 'black'\n          }\n        )\n      } />\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,eAAC,WAAW,WAAE,OAAO,EAAE,GAAG,YAAW,GAAG;IAC5C,MAAM,oBAAC,gBAAgB,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,cAAc,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;YAC/B,sCAAsC,YAAY;YAClD,mCAAmC,gBAAgB;YACnD,mCAAmC,gBAAgB;QACrD;;AAGN","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBar.tsx"],"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\nimport {classNames} from '../utils/classNames';\nimport {DOMRef} from '@react-types/shared';\nimport {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useProgressBar} from 'react-aria/useProgressBar';\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing,\n * etc., in a visual way. They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = React.forwardRef(function ProgressBar(\n  props: SpectrumProgressBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {staticColor, variant, ...otherProps} = props;\n  const {progressBarProps, labelProps} = useProgressBar(props);\n\n  return (\n    <ProgressBarBase\n      {...otherProps}\n      ref={ref}\n      barProps={progressBarProps}\n      labelProps={labelProps}\n      barClassName={classNames(styles, {\n        'spectrum-BarLoader--overBackground': variant === 'overBackground',\n        'spectrum-BarLoader--staticWhite': staticColor === 'white',\n        'spectrum-BarLoader--staticBlack': staticColor === 'black'\n      })}\n    />\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}