@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241126 → 3.0.0-nightly-10a43de88-241127

package/src/CardView.tsx

@@ -529,7 +529,7 @@ const cardViewStyles = style({
 
 export const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);
 
-function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   let domRef = useDOMRef(ref);
@@ -596,7 +596,4 @@ function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDiv
       </InternalCardViewContext.Provider>
     </UNSTABLE_Virtualizer>
   );
-}
-
-const _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);
-export {_CardView as CardView};
+});

package/src/Checkbox.tsx

@@ -125,7 +125,11 @@ const iconSize = {
   XL: 'L'
 } as const;
 
-function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Checkboxes allow users to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ */
+export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -179,11 +183,4 @@ function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLab
       }}
     </AriaCheckbox>
   );
-}
-
-/**
- * Checkboxes allow users to select multiple items from a list of individual items,
- * or to mark one individual item as selected.
- */
-let _Checkbox = forwardRef(Checkbox);
-export {_Checkbox as Checkbox};
+});

package/src/CheckboxGroup.tsx

@@ -51,7 +51,10 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
 
 export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A CheckboxGroup allows users to select one or more items from a list of choices.
+ */
+export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -134,10 +137,4 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
       </>)}
     </AriaCheckboxGroup>
   );
-}
-
-/**
- * A CheckboxGroup allows users to select one or more items from a list of choices.
- */
-let _CheckboxGroup = forwardRef(CheckboxGroup);
-export {_CheckboxGroup as CheckboxGroup};
+});

package/src/ClearButton.tsx

@@ -33,7 +33,7 @@ interface ClearButtonStyleProps {
 interface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}
 interface ClearButtonProps extends ButtonProps, ClearButtonStyleProps {}
 
-function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
 
   return (
@@ -60,7 +60,4 @@ function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElemen
       <CrossIcon size={props.size || 'M'} />
     </Button>
   );
-}
-
-let _ClearButton = forwardRef(ClearButton);
-export {_ClearButton as ClearButton};
+});

package/src/CloseButton.tsx

@@ -88,7 +88,10 @@ const styles = style({
 
 export const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * A CloseButton allows a user to dismiss a dialog.
+ */
+export const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);
   let {UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useFocusableRef(ref);
@@ -104,10 +107,4 @@ function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElemen
       <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />
     </Button>
   );
-}
-
-/**
- * A CloseButton allows a user to dismiss a dialog.
- */
-let _CloseButton = forwardRef(CloseButton);
-export {_CloseButton as CloseButton};
+});

package/src/ColorArea.tsx

@@ -27,7 +27,10 @@ export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'c
 
 export const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */
+export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
@@ -68,10 +71,4 @@ function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
       }
     </AriaColorArea>
   );
-}
-
-/**
- * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */
-let _ColorArea = forwardRef(ColorArea);
-export {_ColorArea as ColorArea};
+});

package/src/ColorField.tsx

@@ -36,7 +36,10 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
 
 export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);
 
-function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -103,10 +106,4 @@ function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
       </>)}
     </AriaColorField>
   );
-}
-
-/**
- * A color field allows users to edit a hex color or individual color channel value.
- */
-const _ColorField = forwardRef(ColorField);
-export {_ColorField as ColorField};
+});

package/src/ColorSlider.tsx

@@ -33,7 +33,10 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
 
 export const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorSlider allows users to adjust an individual channel of a color value.
+ */
+export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
@@ -138,10 +141,4 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
       </>)}
     </AriaColorSlider>
   );
-}
-
-/**
- * A ColorSlider allows users to adjust an individual channel of a color value.
- */
-let _ColorSlider = forwardRef(ColorSlider);
-export {_ColorSlider as ColorSlider};
+});

package/src/ColorSwatch.tsx

@@ -46,7 +46,10 @@ interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size'
 export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);
 export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
 
-function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);
   let domRef = useDOMRef(ref);
   let ctx = useContext(InternalColorSwatchContext);
@@ -104,10 +107,4 @@ function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.
   }
 
   return swatch;
-}
-
-/**
- * A ColorSwatch displays a preview of a selected color.
- */
-let _ColorSwatch = forwardRef(ColorSwatch);
-export {_ColorSwatch as ColorSwatch};
+});

package/src/ColorSwatchPicker.tsx

@@ -42,7 +42,10 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
 
 export const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);
   let {
     density = 'regular',
@@ -72,13 +75,7 @@ function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivEle
       </InternalColorSwatchContext.Provider>
     </AriaColorSwatchPicker>
   );
-}
-
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */
-let _ColorSwatchPicker = forwardRef(ColorSwatchPicker);
-export {_ColorSwatchPicker as ColorSwatchPicker};
+});
 
 function useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {
   return (

package/src/ColorWheel.tsx

@@ -33,7 +33,10 @@ export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' |
 
 export const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);
   let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;
   let containerRef = useDOMRef(ref);
@@ -101,10 +104,4 @@ function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
       </>)}
     </AriaColorWheel>
   );
-}
-
-/**
- * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-let _ColorWheel = forwardRef(ColorWheel);
-export {_ColorWheel as ColorWheel};
+});

package/src/ComboBox.tsx

@@ -149,7 +149,10 @@ const iconStyles = style({
 
 let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
 
-function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
+/**
+ * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useRef<HTMLDivElement>(null);
@@ -321,13 +324,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldR
       )}
     </AriaComboBox>
   );
-}
-
-/**
- * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
- */
-let _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);
-export {_ComboBox as ComboBox};
+});
 
 
 export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {

package/src/Content.tsx

@@ -31,7 +31,7 @@ interface HeadingProps extends ContentProps {
 
 export const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);
 
-// Wrapper around RAC Heading to unmount when hidden.
+export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
@@ -48,14 +48,11 @@ function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Heading = forwardRef(Heading);
-export {_Heading as Heading};
+});
 
 export const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);
 
-function Header(props: ContentProps, ref: DOMRef) {
+export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
@@ -71,14 +68,11 @@ function Header(props: ContentProps, ref: DOMRef) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Header = forwardRef(Header);
-export {_Header as Header};
+});
 
 export const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
+export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
@@ -93,14 +87,11 @@ function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Content = forwardRef(Content);
-export {_Content as Content};
+});
 
 export const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);
 
-function Text(props: ContentProps, ref: DOMRef) {
+export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;
@@ -130,14 +121,11 @@ function Text(props: ContentProps, ref: DOMRef) {
   }
 
   return text;
-}
-
-const _Text = forwardRef(Text);
-export {_Text as Text};
+});
 
 export const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
 
-function Keyboard(props: ContentProps, ref: DOMRef) {
+export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
@@ -152,14 +140,11 @@ function Keyboard(props: ContentProps, ref: DOMRef) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Keyboard = forwardRef(Keyboard);
-export {_Keyboard as Keyboard};
+});
 
 export const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
 
-function Footer(props: ContentProps, ref: DOMRef) {
+export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
@@ -174,7 +159,4 @@ function Footer(props: ContentProps, ref: DOMRef) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Footer = forwardRef(Footer);
-export {_Footer as Footer};
+});

package/src/ContextualHelp.tsx

@@ -48,7 +48,10 @@ const popover = style({
 
 export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
+ */
+export const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);
   let {
@@ -128,10 +131,4 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
       </PopoverBase>
     </DialogTrigger>
   );
-}
-
-/**
- * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
- */
-let _ContextualHelp = forwardRef(ContextualHelp);
-export {_ContextualHelp as ContextualHelp};
+});

package/src/CustomDialog.tsx

@@ -55,7 +55,10 @@ const dialogStyle = style({
   maxSize: '[inherit]'
 }, getAllowedOverrides({height: true}));
 
-function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
+/**
+ * A CustomDialog is a floating window with a custom layout.
+ */
+export const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
   let {
     size,
     isDismissible,
@@ -80,10 +83,4 @@ function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
       </RACDialog>
     </Modal>
   );
-}
-
-/**
- * A CustomDialog is a floating window with a custom layout.
- */
-let _CustomDialog = forwardRef(CustomDialog);
-export {_CustomDialog as CustomDialog};
+});

package/src/Dialog.tsx

@@ -90,7 +90,11 @@ export const dialogInner = style({
   overflow: 'auto'
 });
 
-function Dialog(props: DialogProps, ref: DOMRef) {
+/**
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+ * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ */
+export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
   let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
@@ -224,11 +228,4 @@ function Dialog(props: DialogProps, ref: DOMRef) {
       </RACDialog>
     </Modal>
   );
-}
-
-/**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
- */
-let _Dialog = forwardRef(Dialog);
-export {_Dialog as Dialog};
+});

package/src/Disclosure.tsx

@@ -65,7 +65,10 @@ const disclosure = style({
   minWidth: 200
 }, getAllowedOverrides());
 
-function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
+ */
+export const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);
   let {
     size = 'M',
@@ -92,13 +95,7 @@ function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
       </RACDisclosure>
     </Provider>
   );
-}
-
-/**
- * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- */
-let _Disclosure = forwardRef(Disclosure);
-export {_Disclosure as Disclosure};
+});
 
 export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
   /** The heading level of the disclosure header.
@@ -256,7 +253,10 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
  */
 export const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
 
-function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
+ */
+export const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
   let {
     level = 3,
     UNSAFE_style,
@@ -295,13 +295,7 @@ function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement
       {buttonTrigger}
     </DisclosureHeader>
   );
-}
-
-/**
- * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
- */
-let _DisclosureTitle = forwardRef(DisclosureTitle);
-export {_DisclosureTitle as DisclosureTitle};
+});
 
 export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
   children: React.ReactNode
@@ -327,7 +321,10 @@ const panelStyles = style({
   }
 });
 
-function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
+ */
+export const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
   let {
     UNSAFE_style,
     UNSAFE_className = '',
@@ -346,11 +343,5 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement
       {props.children}
     </RACDisclosurePanel>
   );
-}
-
-/**
- * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
- */
-let _DisclosurePanel = forwardRef(DisclosurePanel);
-export {_DisclosurePanel as DisclosurePanel};
+});
 

package/src/Divider.tsx

@@ -93,7 +93,11 @@ export const divider = style<DividerSpectrumProps>({
   }
 }, getAllowedOverrides());
 
-function Divider(props: DividerProps, ref: DOMRef) {
+/**
+ * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
+ * They can also be used to establish rhythm and hierarchy.
+ */
+export const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, DividerContext);
   let domRef = useDOMRef(ref);
 
@@ -108,11 +112,4 @@ function Divider(props: DividerProps, ref: DOMRef) {
         staticColor: props.staticColor
       }, props.styles)} />
   );
-}
-
-/**
- * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
- * They can also be used to establish rhythm and hierarchy.
- */
-let _Divider = /*#__PURE__*/ forwardRef(Divider);
-export {_Divider as Divider};
+});

package/src/DropZone.tsx

@@ -89,7 +89,10 @@ const banner = style({
   padding: '[calc((self(minHeight))/1.5)]'
 });
 
-function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A drop zone is an area into which one or multiple objects can be dragged and dropped.
+ */
+export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
   let {
@@ -119,10 +122,4 @@ function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </RACDropZone>
   );
-}
-
-/**
- * A drop zone is an area into which one or multiple objects can be dragged and dropped.
- */
-let _DropZone = /*#__PURE__*/ forwardRef(DropZone);
-export {_DropZone as DropZone};
+});

package/src/Field.tsx

@@ -42,7 +42,7 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
   children?: ReactNode
 }
 
-function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     isDisabled,
@@ -145,10 +145,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
       )}
     </div>
   );
-}
-
-let _FieldLabel = forwardRef(FieldLabel);
-export {_FieldLabel as FieldLabel};
+});
 
 interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {
   size?: 'S' | 'M' | 'L' | 'XL',
@@ -193,7 +190,7 @@ const fieldGroupStyles = style({
   }
 });
 
-function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   return (
     <Group
       ref={ref}
@@ -217,14 +214,11 @@ function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
         props.styles
       )} />
   );
-}
-
-let _FieldGroup = forwardRef(FieldGroup);
-export {_FieldGroup as FieldGroup};
+});
 
 export interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}
 
-function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+export const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   return (
     <RACInput
@@ -247,10 +241,7 @@ function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
         truncate: true
       }), styles)} />
   );
-}
-
-let _Input = forwardRef(Input);
-export {_Input as Input};
+});
 
 interface HelpTextProps extends FieldErrorProps {
   size?: 'S' | 'M' | 'L' | 'XL',