@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241126 → 3.0.0-nightly-b0f156972-241128

package/src/Form.tsx

@@ -62,7 +62,10 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
   }, [ctx, props, isSkeleton]);
 }
 
-function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
+/**
+ * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+ */
+export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
   let {
     labelPosition = 'top',
     labelAlign,
@@ -114,10 +117,4 @@ function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
       </FormContext.Provider>
     </RACForm>
   );
-}
-
-/**
- * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
- */
-let _Form = /*#__PURE__*/ forwardRef(Form);
-export {_Form as Form};
+});

package/src/FullscreenDialog.tsx

@@ -117,7 +117,10 @@ export const dialogInner = style({
   overflow: 'auto'
 });
 
-function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
+/**
+ * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
+ */
+export const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
   let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
@@ -145,11 +148,5 @@ function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
       </RACDialog>
     </Modal>
   );
-}
-
-/**
- * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
- */
-let _FullscreenDialog = forwardRef(FullscreenDialog);
-export {_FullscreenDialog as FullscreenDialog};
+});
 

package/src/IllustratedMessage.tsx

@@ -157,7 +157,11 @@ interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMe
 
 export const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * An IllustratedMessage displays an illustration and a message, usually
+ * for an empty state or an error page.
+ */
+export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);
   let domRef = useDOMRef(ref);
   let {
@@ -191,11 +195,4 @@ function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRe
       </Provider>
     </div>
   );
-}
-
-/**
- * An IllustratedMessage displays an illustration and a message, usually
- * for an empty state or an error page.
- */
-let _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);
-export {_IllustratedMessage as IllustratedMessage};
+});

package/src/Image.tsx

@@ -77,7 +77,7 @@ function createState(src: string): State {
     startTime: Date.now(),
     loadTime: 0
   };
-} 
+}
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -130,7 +130,7 @@ const imgStyles = style({
   transitionDuration: 500
 });
 
-function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
   [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
 
   let {
@@ -236,7 +236,4 @@ function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
         )}
     </div>
   ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
-}
-
-const _Image = forwardRef(Image);
-export {_Image as Image};
+});

package/src/InlineAlert.tsx

@@ -209,7 +209,11 @@ const content = style({
   }
 });
 
-function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Inline alerts display a non-modal message associated with objects in a view.
+ * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
+ */
+export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);
   let {
@@ -267,11 +271,4 @@ function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
       </div>
     </div>
   );
-}
-
-/**
- * Inline alerts display a non-modal message associated with objects in a view.
- * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
- */
-const _InlineAlert = /*#__PURE__*/ forwardRef(InlineAlert);
-export {_InlineAlert as InlineAlert};
+});

package/src/Link.tsx

@@ -83,7 +83,11 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
   disableTapHighlight: true
 }, getAllowedOverrides());
 
-function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
+/**
+ * Links allow users to navigate to a different location.
+ * They can be presented inline inside a paragraph or as standalone text.
+ */
+export const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
   let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;
 
@@ -107,11 +111,4 @@ function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
       {children}
     </RACLink>
   );
-}
-
-/**
- * Links allow users to navigate to a different location.
- * They can be presented inline inside a paragraph or as standalone text.
- */
-const _Link = /*#__PURE__*/ forwardRef(Link);
-export {_Link as Link};
+});

package/src/Menu.tsx

@@ -312,7 +312,10 @@ let descriptor = style({
 let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean}>({size: 'M', isSubmenu: false});
 let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);
 
-function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Menus display a list of actions or options that a user can choose.
+ */
+export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MenuContext);
   let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);
   let {
@@ -386,13 +389,7 @@ function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>
   }
 
   return content;
-}
-
-/**
- * Menus display a list of actions or options that a user can choose.
- */
-let _Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(Menu);
-export {_Menu as Menu};
+});
 
 export function Divider(props: SeparatorProps) {
   return (

package/src/Meter.tsx

@@ -101,7 +101,11 @@ const fillStyles = style<MeterStyleProps>({
   }
 });
 
-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);
 
@@ -141,11 +145,4 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </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

@@ -73,7 +73,10 @@ const modalOverlayStyles = style({
   }
 });
 
-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();
@@ -162,10 +165,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

package/src/Popover.tsx

@@ -215,7 +215,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 = '',
@@ -283,10 +283,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 +298,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 +318,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

@@ -174,7 +174,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',
@@ -206,12 +210,5 @@ function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </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

@@ -98,7 +98,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',
@@ -159,11 +163,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};
+});

package/src/Radio.tsx

@@ -102,7 +102,11 @@ const circle = style<RenderProps>({
   }
 });
 
-function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Radio buttons allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -138,11 +142,4 @@ function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
       )}
     </AriaRadio>
   );
-}
-
-/**
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-let _Radio = /*#__PURE__*/ forwardRef(Radio);
-export {_Radio as Radio};
+});

package/src/RadioGroup.tsx

@@ -49,7 +49,11 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
 
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Radio groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -132,11 +136,4 @@ function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </AriaRadioGroup>
   );
-}
-
-/**
- * Radio groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-let _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
-export {_RadioGroup as RadioGroup};
+});

package/src/RangeSlider.tsx

@@ -39,7 +39,7 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
 
 export const RangeSliderContext = createContext<ContextValue<RangeSliderProps, FocusableRefValue<HTMLDivElement>>>(null);
 
-function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
   let formContext = useContext(FormContext);
@@ -124,7 +124,4 @@ function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>)
       </SliderTrack>
     </SliderBase>
   );
-}
-
-let _RangeSlider = /*#__PURE__*/ forwardRef(RangeSlider);
-export {_RangeSlider as RangeSlider};
+});

package/src/SearchField.tsx

@@ -42,7 +42,10 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
 
 export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);
 
-function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * A SearchField is a text field designed for searches.
+ */
+export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -151,10 +154,4 @@ function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
       </>)}
     </AriaSearchField>
   );
-}
-
-/**
- * A SearchField is a text field designed for searches.
- */
-let _SearchField = /*#__PURE__*/ forwardRef(SearchField);
-export {_SearchField as SearchField};
+});

package/src/SegmentedControl.tsx

@@ -151,7 +151,10 @@ interface DefaultSelectionTrackProps {
 
 const InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});
 
-function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
+ */
+export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
     defaultSelectedKey,
@@ -190,7 +193,7 @@ function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivEleme
       </DefaultSelectionTracker>
     </ToggleButtonGroup>
   );
-}
+});
 
 function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   let state = useContext(ToggleGroupStateContext);
@@ -214,7 +217,10 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   );
 }
 
-function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * A SegmentedControlItem represents an option within a SegmentedControl.
+ */
+export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
@@ -277,16 +283,4 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
       }
     </ToggleButton>
   );
-}
-
-/**
- * A SegmentedControlItem represents an option within a SegmentedControl.
- */
-const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
-export {_SegmentedControlItem as SegmentedControlItem};
-
-/**
- * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
- */
-const _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);
-export {_SegmentedControl as SegmentedControl};
+});

package/src/Slider.tsx

@@ -389,7 +389,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
   );
 }
 
-function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -443,7 +443,4 @@ function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
       </SliderTrack>
     </SliderBase>
   );
-}
-
-let _Slider = /*#__PURE__*/ forwardRef(Slider);
-export {_Slider as Slider};
+});

package/src/StatusLight.tsx

@@ -102,7 +102,11 @@ const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
   overflow: 'visible' // prevents the light from getting clipped on iOS
 });
 
-function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Status lights are used to color code categories and labels commonly found in data visualization.
+ * When status lights have a semantic meaning, they should use semantic variant colors.
+ */
+export const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
   let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
@@ -131,11 +135,4 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
       <Text>{children}</Text>
     </div>
   );
-}
-
-/**
- * Status lights are used to color code categories and labels commonly found in data visualization.
- * When status lights have a semantic meaning, they should use semantic variant colors.
- */
-let _StatusLight = /*#__PURE__*/ forwardRef(StatusLight);
-export {_StatusLight as StatusLight};
+});

package/src/Switch.tsx

@@ -149,7 +149,11 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
     : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
 });
 
-function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -184,11 +188,4 @@ function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
       )}
     </AriaSwitch>
   );
-}
-
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-let _Switch = /*#__PURE__*/ forwardRef(Switch);
-export {_Switch as Switch};
+});