@react-spectrum/s2 0.5.0 → 0.6.0

package/src/Meter.tsx

@@ -40,7 +40,7 @@ interface MeterStyleProps {
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The label's overall position relative to the element it is labeling.
    * @default 'top'
@@ -77,7 +77,7 @@ const trackStyles = style({
   }
 });
 
-const fillStyles = style<MeterStyleProps>({
+const fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({
   height: 'full',
   borderStyle: 'none',
   borderRadius: 'full',
@@ -88,20 +88,16 @@ const fillStyles = style<MeterStyleProps>({
       notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',
       negative: lightDark('negative-800', 'negative-900') // 'negative-visual'
     },
-    staticColor: {
-      white: {
-        default: 'transparent-white-900'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'ButtonText'
   }
 });
 
-function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Meters are visual representations of a quantity or an achievement.
+ * Their progress is determined by user actions, rather than system actions.
+ */
+export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MeterContext);
   let domRef = useDOMRef(ref);
 
@@ -116,6 +112,7 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
     labelPosition = 'top',
     ...groupProps
   } = props;
+  let isStaticColor = !!staticColor;
 
   return (
     <AriaMeter
@@ -131,21 +128,14 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}
+          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}
           <SkeletonWrapper>
-            <div className={trackStyles({staticColor, size})}>
-              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
+            <div className={trackStyles({isStaticColor, size})}>
+              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />
             </div>
           </SkeletonWrapper>
         </>
       )}
     </AriaMeter>
   );
-}
-
-/**
- * Meters are visual representations of a quantity or an achievement.
- * Their progress is determined by user actions, rather than system actions.
- */
-let _Meter = forwardRef(Meter);
-export {_Meter as Meter};
+});

package/src/Modal.tsx

@@ -14,7 +14,6 @@ import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
 import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
-import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -28,28 +27,6 @@ interface ModalProps extends ModalOverlayProps {
   size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
 }
 
-const fade = keyframes(`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`);
-
-const fadeAndSlide = keyframes(`
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`);
-
 const modalOverlayStyles = style({
   ...colorScheme(),
   position: 'fixed',
@@ -59,21 +36,21 @@ const modalOverlayStyles = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  animation: {
-    isEntering: fade,
-    isExiting: fade
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
   },
-  animationDuration: {
-    isEntering: 250,
+  transition: 'opacity',
+  transitionDuration: {
+    default: 250,
     isExiting: 130
-  },
-  animationDirection: {
-    isEntering: 'normal',
-    isExiting: 'reverse'
   }
 });
 
-function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A modal is an overlay element which blocks interaction with elements outside it.
+ */
+export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
@@ -138,23 +115,22 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
             value: 'layer-2'
           },
           backgroundColor: '--s2-container-bg',
-          animation: {
-            isEntering: fadeAndSlide,
-            isExiting: fade
+          opacity: {
+            isEntering: 0,
+            isExiting: 0
+          },
+          translateY: {
+            isEntering: 20
           },
-          animationDuration: {
-            isEntering: 250,
+          transition: '[opacity, translate]',
+          transitionDuration: {
+            default: 250,
             isExiting: 130
           },
-          animationDelay: {
-            isEntering: 160,
+          transitionDelay: {
+            default: 160,
             isExiting: 0
           },
-          animationDirection: {
-            isEntering: 'normal',
-            isExiting: 'reverse'
-          },
-          animationFillMode: 'both',
           // Transparent outline for WHCM.
           outlineStyle: 'solid',
           outlineWidth: 1,
@@ -162,10 +138,4 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
         })({...renderProps, size: props.size})} />
     </ModalOverlay>
   );
-}
-
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */
-let _Modal = forwardRef(Modal);
-export {_Modal as Modal};
+});

package/src/NumberField.tsx

@@ -166,7 +166,10 @@ const stepperContainerStyles = style({
   }
 });
 
-function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
+ */
+export const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
@@ -287,7 +290,7 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
         }
     </AriaNumberField>
   );
-}
+});
 
 interface StepButtonProps extends AriaButtonProps {
 }
@@ -324,12 +327,6 @@ let StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivEl
   );
 });
 
-/**
- * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
- */
-let _NumberField = forwardRef(NumberField);
-export {_NumberField as NumberField};
-
 // replace from RAC
 function useRenderProps(props: any) {
   let {

package/src/Picker.tsx

@@ -228,7 +228,10 @@ const iconStyles = style({
 let InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
 let InsideSelectValueContext = createContext(false);
 
-function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
@@ -399,13 +402,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
       )}
     </AriaSelect>
   );
-}
-
-/**
- * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
- */
-let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
-export {_Picker as Picker};
+});
 
 export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
   children: ReactNode
@@ -467,11 +464,12 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
 
 export interface PickerSectionProps<T extends object> extends SectionProps<T> {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>) {
+  let {size} = useContext(InternalPickerContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />

package/src/Popover.tsx

@@ -24,7 +24,6 @@ import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './styl
 import {ColorSchemeContext} from './Provider';
 import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
-import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
@@ -46,52 +45,6 @@ export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arro
   // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in
 }
 
-const fadeKeyframes = keyframes(`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`);
-const slideUpKeyframes = keyframes(`
-  from {
-    transform: translateY(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`);
-const slideDownKeyframes = keyframes(`
-  from {
-    transform: translateY(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`);
-const slideRightKeyframes = keyframes(`
-  from {
-    transform: translateX(4px);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`);
-const slideLeftKeyframes = keyframes(`
-  from {
-    transform: translateX(-4px);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`);
-
 let popover = style({
   ...colorScheme(),
   '--s2-container-bg': {
@@ -126,63 +79,41 @@ let popover = style({
   // Don't be larger than full screen minus 2 * containerPadding
   maxWidth: '[calc(100vw - 24px)]',
   boxSizing: 'border-box',
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
+  },
   translateY: {
     placement: {
-      bottom: {
-        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop
-      },
       top: {
-        isArrowShown: -8
-      }
-    }
-  },
-  translateX: {
-    placement: {
-      left: {
-        isArrowShown: -8
+        isEntering: 4,
+        isExiting: 4
       },
-      right: {
-        isArrowShown: 8
+      bottom: {
+        isEntering: -4,
+        isExiting: -4
       }
-    }
+    },
+    isSubmenu: 0
   },
-  animation: {
+  translateX: {
     placement: {
-      top: {
-        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`
-      },
-      bottom: {
-        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`
-      },
       left: {
-        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`
+        isEntering: 4,
+        isExiting: 4
       },
       right: {
-        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`
+        isEntering: -4,
+        isExiting: -4
       }
     },
-    isSubmenu: {
-      isEntering: fadeKeyframes,
-      isExiting: fadeKeyframes
-    }
-  },
-  animationDuration: {
-    isEntering: 200,
-    isExiting: 200
-  },
-  animationDirection: {
-    isEntering: 'normal',
-    isExiting: 'reverse'
+    isSubmenu: 0
   },
-  animationTimingFunction: {
+  transition: '[opacity, translate]',
+  transitionDuration: 200,
+  transitionTimingFunction: {
     isExiting: 'in'
   },
-  transition: '[opacity, transform]',
-  willChange: '[opacity, transform]',
   isolation: 'isolate',
   pointerEvents: {
     isExiting: 'none'
@@ -215,7 +146,7 @@ let arrow = style({
   }
 });
 
-function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     hideArrow = false,
     UNSAFE_className = '',
@@ -262,6 +193,7 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <AriaPopover
       {...props}
+      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}
       ref={popoverRef}
       style={{
         ...UNSAFE_style,
@@ -283,10 +215,7 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
       ))}
     </AriaPopover>
   );
-}
-
-let _PopoverBase = forwardRef(PopoverBase);
-export {_PopoverBase as PopoverBase};
+});
 
 export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}
 
@@ -301,11 +230,14 @@ const dialogStyle = style({
   maxSize: '[inherit]'
 }, getAllowedOverrides({height: true}));
 
-function Popover(props: PopoverDialogProps, ref: DOMRef) {
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
   let domRef = useDOMRef(ref);
 
   return (
-    <_PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
+    <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
       <Dialog
         {...props}
         ref={domRef}
@@ -318,12 +250,6 @@ function Popover(props: PopoverDialogProps, ref: DOMRef) {
           </OverlayTriggerStateContext.Provider>
         ))}
       </Dialog>
-    </_PopoverBase>
+    </PopoverBase>
   );
-}
-
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */
-let _Popover = forwardRef(Popover);
-export {_Popover as Popover};
+});

package/src/ProgressBar.tsx

@@ -41,7 +41,7 @@ interface ProgressBarStyleProps {
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The label's overall position relative to the element it is labeling.
    * @default 'top'
@@ -135,21 +135,13 @@ const trackStyles = style({
   }
 });
 
-const fill = style<ProgressBarStyleProps>({
+const fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({
   height: 'full',
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
     default: 'accent',
-    staticColor: {
-      white: {
-        default: 'transparent-white-900'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'ButtonText'
   },
   width: {
@@ -174,7 +166,11 @@ const indeterminateAnimation = style({
   position: 'relative'
 });
 
-function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
+ * They can represent either determinate or indeterminate progress.
+ */
+export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
   let {
     label, size = 'M',
@@ -186,32 +182,26 @@ function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   } = props;
   let domRef = useDOMRef(ref);
   let {direction} = useLocale();
+  let isStaticColor = !!staticColor;
 
   return (
     <AriaProgressBar
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>
+      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)}>
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}
-          <div className={trackStyles({...props})}>
+          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</span>}
+          <div className={trackStyles({isStaticColor, size})}>
             <div
-              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
+              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
               style={{width: isIndeterminate ? undefined : percentage + '%'}} />
           </div>
         </>
       )}
     </AriaProgressBar>
   );
-}
-
-/**
- * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
- * They can represent either determinate or indeterminate progress.
- */
-const _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);
-export {_ProgressBar as ProgressBar};
+});
 

package/src/ProgressCircle.tsx

@@ -13,7 +13,7 @@
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -27,7 +27,7 @@ export interface ProgressCircleStyleProps {
    */
   size?: 'S' | 'M' | 'L',
   /** The static color style to apply. Useful when the button appears over a color background. */
-  staticColor?: 'black' | 'white',
+  staticColor?: 'black' | 'white' | 'auto',
   /**
    * Whether presentation is indeterminate when progress isn't known.
    */
@@ -38,6 +38,7 @@ export const ProgressCircleContext = createContext<ContextValue<ProgressCirclePr
 
 // Double check the types passed to each style, may not need all for each
 const wrapper = style<ProgressCircleStyleProps>({
+  ...staticColor(),
   size: {
     default: 32,
     size: {
@@ -48,24 +49,18 @@ const wrapper = style<ProgressCircleStyleProps>({
   aspectRatio: 'square'
 }, getAllowedOverrides({height: true}));
 
-const track = style<ProgressCircleStyleProps>({
+const track = style({
   stroke: {
     default: 'gray-300',
-    staticColor: {
-      white: 'transparent-white-300',
-      black: 'transparent-black-300'
-    },
+    isStaticColor: 'transparent-overlay-300',
     forcedColors: 'Background'
   }
 });
 
-const fill = style<ProgressCircleStyleProps>({
+const fill = style({
   stroke: {
     default: 'blue-900',
-    staticColor: {
-      white: 'transparent-white-900',
-      black: 'transparent-black-900'
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'Highlight'
   },
   rotate: -90,
@@ -98,7 +93,11 @@ const dashoffsetAnimation = keyframes(`
   }
 `);
 
-function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
+ * They can represent determinate or indeterminate progress.
+ */
+export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
   let {
     size = 'M',
@@ -117,6 +116,7 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
 
   // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
   let radius = `calc(50% - ${strokeWidth / 2}px)`;
+  let isStaticColor = !!staticColor;
 
   return (
     <RACProgressBar
@@ -125,7 +125,8 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
       style={UNSAFE_style}
       className={renderProps => UNSAFE_className + wrapper({
         ...renderProps,
-        size
+        size,
+        staticColor
       }, props.styles)}>
       {({percentage, isIndeterminate}) => (
         <svg
@@ -137,13 +138,13 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
             cy="50%"
             r={radius}
             strokeWidth={strokeWidth}
-            className={track({staticColor})} />
+            className={track({isStaticColor})} />
           <circle
             cx="50%"
             cy="50%"
             r={radius}
             strokeWidth={strokeWidth}
-            className={fill({staticColor})}
+            className={fill({isStaticColor})}
             style={{
               // These cubic-bezier timing functions were derived from the previous animation keyframes
               // using a best fit algorithm, and then manually adjusted to approximate the original animation.
@@ -159,11 +160,4 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
       )}
     </RACProgressBar>
   );
-}
-
-/**
- * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
- * They can represent determinate or indeterminate progress.
- */
-let _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);
-export {_ProgressCircle as ProgressCircle};
+});