@react-spectrum/s2 0.5.0 → 0.7.0

package/src/Divider.tsx

@@ -13,7 +13,7 @@
 import {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -34,33 +34,26 @@ interface DividerSpectrumProps {
    */
   orientation?: 'horizontal' | 'vertical',
   /** The static color style to apply. Useful when the Divider appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
 // TODO: allow overriding height (only when orientation is vertical)??
 export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}
 
-export const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);
+export const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 
-export const divider = style<DividerSpectrumProps>({
+export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
+  ...staticColor(),
   alignSelf: 'stretch',
   backgroundColor: {
     default: 'gray-200',
     size: {
       L: 'gray-800'
     },
-    staticColor: {
-      white: {
-        default: 'transparent-white-200',
-        size: {
-          L: 'transparent-white-800'
-        }
-      },
-      black: {
-        default: 'transparent-black-200',
-        size: {
-          L: 'transparent-black-800'
-        }
+    isStaticColor: {
+      default: 'transparent-overlay-200',
+      size: {
+        L: 'transparent-overlay-800'
       }
     },
     forcedColors: 'ButtonBorder'
@@ -93,7 +86,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);
 
@@ -105,14 +102,8 @@ function Divider(props: DividerProps, ref: DOMRef) {
       className={(props.UNSAFE_className || '') + divider({
         size: props.size || 'M',
         orientation: props.orientation || 'horizontal',
-        staticColor: props.staticColor
+        staticColor: props.staticColor,
+        isStaticColor: !!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

@@ -26,7 +26,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the drop zone. */
-  children?: ReactNode,
+  children: ReactNode,
   /** Whether the drop zone has been filled. */
   isFilled?: boolean,
   /** The message to replace the default banner message that is shown when the drop zone is filled. */
@@ -39,7 +39,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
     size?: 'S' | 'M' | 'L'
 }
 
-export const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);
+export const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const dropzone = style<DropZoneRenderProps>({
   display: 'flex',
@@ -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

@@ -36,13 +36,13 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
   labelAlign?: Alignment,
   labelPosition?: 'top' | 'side',
   includeNecessityIndicatorInAccessibilityName?: boolean,
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   contextualHelp?: ReactNode,
   isQuiet?: boolean,
   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,
@@ -98,7 +98,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         {...labelProps}
         ref={domRef}
         style={UNSAFE_style}
-        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, staticColor}), props.styles)}>
+        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>
         {props.children}
         {(isRequired || necessityIndicator === 'label') && (
           <span className={style({whiteSpace: 'nowrap'})}>
@@ -127,32 +127,31 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         )}
       </Label>
       {contextualHelp && (
-        <CenterBaseline
-          styles={style({
-            display: 'inline-flex',
-            height: 0,
-            marginStart: 4
-          })}>
-          <ContextualHelpContext.Provider
-            value={{
-              id: contextualHelpId,
-              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
-              size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
-            }}>
-            {contextualHelp}
-          </ContextualHelpContext.Provider>
-        </CenterBaseline>
+        <span className={style({whiteSpace: 'nowrap'})}>
+          &nbsp;
+          <CenterBaseline
+            styles={style({
+              display: 'inline-flex',
+              height: 0
+            })}>
+            <ContextualHelpContext.Provider
+              value={{
+                id: contextualHelpId,
+                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
+                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
+              }}>
+              {contextualHelp}
+            </ContextualHelpContext.Provider>
+          </CenterBaseline>
+        </span>
       )}
     </div>
   );
-}
-
-let _FieldLabel = forwardRef(FieldLabel);
-export {_FieldLabel as FieldLabel};
+});
 
 interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {
   size?: 'S' | 'M' | 'L' | 'XL',
-  children?: ReactNode,
+  children: ReactNode,
   styles?: StyleString
 }
 
@@ -193,7 +192,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 +216,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 +243,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',

package/src/Form.tsx

@@ -31,10 +31,10 @@ interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'context
 }
 
 export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'children'>, StyleProps {
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const FormContext = createContext<FormStyleProps | null>(null);
+export const FormContext = createContext<Partial<FormStyleProps | null>>(null);
 export function useFormProps<T extends FormStyleProps>(props: T): T {
   let ctx = useContext(FormContext);
   let isSkeleton = useIsSkeleton();
@@ -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/Icon.tsx

@@ -31,8 +31,8 @@ export interface IllustrationContextValue extends IconContextValue {
   size?: 'S' | 'M' | 'L'
 }
 
-export const IconContext = createContext<ContextValue<IconContextValue, SVGElement>>({});
-export const IllustrationContext = createContext<ContextValue<IllustrationContextValue, SVGElement>>({});
+export const IconContext = createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
+export const IllustrationContext = createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
 
 export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext): FunctionComponent<IconProps> {
   return (props: IconProps) => {

package/src/IllustratedMessage.tsx

@@ -155,9 +155,13 @@ interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMe
   isDropTarget?: boolean
 }
 
-export const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);
+export const IllustratedMessageContext = createContext<ContextValue<Partial<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

@@ -1,5 +1,5 @@
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef} from 'react';
+import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
 import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
 import {mergeStyles} from '../style/runtime';
@@ -27,8 +27,11 @@ export interface ImageProps extends UnsafeStyles, SlotProps {
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).
    */
   decoding?: 'async' | 'auto' | 'sync',
-  // Only supported in React 19...
-  // fetchPriority?: 'high' | 'low' | 'auto',
+  /**
+   * Provides a hint of the relative priority to use when fetching the image.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).
+   */
+  fetchPriority?: 'high' | 'low' | 'auto',
   /**
    * Whether the image should be loaded immediately or lazily when scrolled into view.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).
@@ -54,7 +57,7 @@ interface ImageContextValue extends ImageProps {
   hidden?: boolean
 }
 
-export const ImageContext = createContext<ContextValue<ImageContextValue, HTMLDivElement>>(null);
+export const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
 
 type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
 interface State {
@@ -77,7 +80,7 @@ function createState(src: string): State {
     startTime: Date.now(),
     loadTime: 0
   };
-} 
+}
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -130,7 +133,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 {
@@ -146,6 +149,7 @@ function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
     alt,
     crossOrigin,
     decoding,
+    fetchPriority,
     loading,
     referrerPolicy,
     slot
@@ -223,6 +227,7 @@ function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
       {errorState}
       {!errorState && (
         <img
+          {...getFetchPriorityProp(fetchPriority)}
           src={src}
           alt={alt}
           crossOrigin={crossOrigin}
@@ -235,8 +240,14 @@ function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
           className={imgStyles({isRevealed, isTransitioning})} />
         )}
     </div>
-  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
-}
+  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
+});
 
-const _Image = forwardRef(Image);
-export {_Image as Image};
+function getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {
+  const pieces = version.split('.');
+  const major = parseInt(pieces[0], 10);
+  if (major >= 19) {
+    return {fetchPriority};
+  }
+  return {fetchpriority: fetchPriority};
+}

package/src/InlineAlert.tsx

@@ -60,7 +60,6 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   display: 'inline-block',
   position: 'relative',
   boxSizing: 'border-box',
-  maxWidth: 320,
   padding: 24,
   borderRadius: 'lg',
   borderStyle: 'solid',
@@ -209,7 +208,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 +270,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

@@ -14,7 +14,7 @@ import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProp
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -27,7 +27,7 @@ interface LinkStyleProps {
    */
   variant?: 'primary' | 'secondary',
   /** The static color style to apply. Useful when the link appears over a color background. */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /** Whether the link is on its own vs inside a longer string of text. */
   isStandalone?: boolean,
   /** Whether the link should be displayed with a quiet style. */
@@ -35,13 +35,14 @@ interface LinkStyleProps {
 }
 
 export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
-const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
+const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({
   ...focusRing(),
+  ...staticColor(),
   borderRadius: 'sm',
   font: {
     isStandalone: 'ui'
@@ -51,10 +52,7 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
       primary: 'accent',
       secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?
     },
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'LinkText'
   },
   transition: 'default',
@@ -74,16 +72,17 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   },
   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;
 
@@ -103,15 +102,8 @@ function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
+      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
       {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};
+});