refactor: Make it a TypeScript error to pass style macro to UNSAFE_className (#8109)

Author: devongovett

packages/@react-spectrum/s2/src/ContextualHelp.tsx

@@ -103,7 +103,7 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         offset={offset}
         crossOffset={crossOffset}
         hideArrow
-        UNSAFE_className={popover}>
+        styles={popover}>
         <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>
           <Provider
             values={[

packages/@react-spectrum/s2/src/style-utils.ts

@@ -186,9 +186,10 @@ const heightProperties = [
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
 export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
+export type UnsafeClassName = string & {properties?: never};
 export interface UnsafeStyles {
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
-  UNSAFE_className?: string,
+  UNSAFE_className?: UnsafeClassName,
   /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
   UNSAFE_style?: CSSProperties
 }