[pull] main from expo:main

docs/components/DocumentationNestedScrollLayout.tsx

@@ -84,7 +84,7 @@ export default function DocumentationNestedScrollLayout({
     <div className="mx-auto flex h-dvh w-full flex-col overflow-hidden">
       <div className="max-lg-gutters:sticky">{header}</div>
       <div className="mx-auto flex h-[calc(100dvh-60px)] w-full items-center justify-between">
-        <div className="relative h-full max-lg-gutters:hidden">
+        <div className="max-lg-gutters:hidden relative h-full">
           {onSidebarToggle ? (
             <div
               className={mergeClasses(
@@ -99,12 +99,12 @@ export default function DocumentationNestedScrollLayout({
                     theme="quaternary"
                     size="xs"
                     className={mergeClasses(
-                      'inline-flex size-9 items-center justify-center rounded-full border !p-0 transition-colors duration-150 ease-out',
+                      'inline-flex size-9 items-center justify-center rounded-full border p-0! transition-colors duration-150 ease-out',
                       'shadow-sm',
                       isSidebarCollapsed
                         ? 'border-palette-gray5 bg-palette-gray4 text-icon-secondary dark:border-palette-gray6 dark:bg-palette-gray5'
                         : 'border-default bg-default text-icon-secondary',
-                      'hover:bg-element focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-palette-blue9'
+                      'hover:bg-element focus-visible:ring-palette-blue9 focus-visible:ring-2 focus-visible:outline-none'
                     )}
                     aria-label={isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                     title={isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
@@ -128,7 +128,7 @@ export default function DocumentationNestedScrollLayout({
           ) : null}
           <div
             className={mergeClasses(
-              'flex h-full max-w-[280px] flex-col overflow-hidden border-r border-r-default transition-[max-width,opacity,width] duration-200 ease-out will-change-[max-width,width,opacity]',
+              'border-r-default flex h-full max-w-[280px] flex-col overflow-hidden border-r transition-[max-width,opacity,width] duration-200 ease-out will-change-[max-width,width,opacity]',
               isSidebarCollapsed
                 ? 'w-0 max-w-0 border-r-0 opacity-0'
                 : 'w-[280px] max-w-[280px] opacity-100'
@@ -158,7 +158,7 @@ export default function DocumentationNestedScrollLayout({
               className={mergeClasses(
                 'mx-auto max-w-screen-xl transition-[padding,max-width,margin] duration-200 ease-out will-change-[padding,max-width,margin]',
                 isChatExpanded &&
-                  'lg:pr-[360px] lg:pl-8 lg:max-w-[calc(100%-360px)] max-lg-gutters:max-w-screen-xl max-lg-gutters:pl-0 max-lg-gutters:pr-0'
+                  'max-lg-gutters:max-w-screen-xl max-lg-gutters:pl-0 max-lg-gutters:pr-0'
               )}>
               {children}
             </div>
@@ -167,7 +167,7 @@ export default function DocumentationNestedScrollLayout({
         {!hideTOC && (
           <div
             className={mergeClasses(
-              'flex h-[calc(100dvh-60px)] max-w-[280px] shrink-0 flex-col overflow-hidden border-l border-l-default',
+              'border-l-default flex h-[calc(100dvh-60px)] max-w-[280px] shrink-0 flex-col overflow-hidden border-l',
               'max-xl-gutters:hidden'
             )}>
             <ScrollContainer ref={sidebarRightRef}>

docs/components/DocumentationPage.tsx

@@ -341,7 +341,7 @@ export default function DocumentationPage({
         <div
           className={mergeClasses(
             'pointer-events-none absolute z-10 h-8 w-[calc(100%-6px)] max-w-screen-xl',
-            'bg-gradient-to-b from-default to-transparent opacity-90'
+            'from-default bg-linear-to-b to-transparent opacity-90'
           )}
         />
         <main
@@ -350,7 +350,7 @@ export default function DocumentationPage({
             'max-lg-gutters:px-4 max-lg-gutters:pt-5'
           )}>
           {version && version === 'unversioned' && (
-            <InlineHelp type="default" size="sm" className="!mb-5 !inline-flex w-full">
+            <InlineHelp type="default" size="sm" className="mb-5! inline-flex! w-full">
               This is documentation for the next SDK version. For up-to-date documentation, see the{' '}
               <A href={pathname.replace('unversioned', 'latest')}>latest version</A> (
               {versionToText(LATEST_VERSION)}).

docs/components/ScrollContainer.tsx

@@ -41,7 +41,7 @@ export const ScrollContainer = forwardRef<ScrollContainerHandle, ScrollContainer
     return (
       <div
         className={mergeClasses(
-          'size-full transform-gpu overflow-y-auto overflow-x-hidden',
+          'size-full transform-gpu overflow-x-hidden overflow-y-auto',
           className
         )}
         ref={scrollRef}

docs/components/base/code.tsx

@@ -93,8 +93,8 @@ export function Code({ className, children, title }: CodeProps) {
   }
 
   const commonClasses = mergeClasses(
-    wordWrap && '!break-words !whitespace-pre-wrap',
-    showExpand && !isExpanded && `!overflow-y-hidden [&::-webkit-scrollbar-track]:!bg-default`
+    wordWrap && 'break-words! whitespace-pre-wrap!',
+    showExpand && !isExpanded && `[&::-webkit-scrollbar-track]:bg-default! overflow-y-hidden!`
   );
 
   return codeBlockTitle ? (
@@ -130,7 +130,7 @@ export function Code({ className, children, title }: CodeProps) {
         maxHeight: collapseBound,
       }}
       className={mergeClasses(
-        'relative my-4 overflow-x-auto whitespace-pre rounded-md border border-secondary bg-subtle',
+        'border-secondary bg-subtle relative my-4 overflow-x-auto rounded-md border whitespace-pre',
         preferredTheme === Themes.DARK && 'dark-theme',
         commonClasses,
         '[p+&]:mt-0'
@@ -157,12 +157,12 @@ export const CodeBlock = ({ children, theme, className, inline = false }: CodeBl
   const Element = inline ? 'span' : 'pre';
   return (
     <Element
-      className={mergeClasses('m-0 whitespace-pre px-1 py-1.5', inline && 'inline-flex !p-0')}
+      className={mergeClasses('m-0 px-1 py-1.5 whitespace-pre', inline && 'inline-flex p-0!')}
       {...attributes}>
       <CODE
         className={mergeClasses(
-          '!text-3xs text-default',
-          inline && 'block w-full !p-1.5',
+          'text-3xs! text-default',
+          inline && 'block w-full p-1.5!',
           className
         )}
         theme={theme}>

docs/components/plugins/APIBox.tsx

@@ -33,7 +33,7 @@ export const APIBox = ({
         STYLES_APIBOX_WRAPPER,
         headerNestingLevel > 3 && STYLES_APIBOX_NESTED,
         className,
-        '!pb-4 last:[&>*]:!mb-1'
+        'pb-4! [&>*:last-child]:mb-1!'
       )}>
       {header && (
         <HeadingElement tags={platforms}>

docs/components/plugins/CodeBlocksTable.tsx

@@ -41,14 +41,14 @@ export function CodeBlocksTable({ children, tabs, connected = true, ...rest }: P
         'grid grid-cols-2 gap-4',
         connected && 'lg-gutters:mb-4 lg-gutters:gap-0',
         connected &&
-          '[&>div:nth-child(odd)>div]:lg-gutters:!rounded-r-none [&>div:nth-child(odd)>div]:lg-gutters:border-r-0',
-        connected && '[&>div:nth-child(even)>div]:lg-gutters:!rounded-l-none',
+          '[&>div:nth-child(odd)>div]:lg-gutters:rounded-r-none! [&>div:nth-child(odd)>div]:lg-gutters:border-r-0',
+        connected && '[&>div:nth-child(even)>div]:lg-gutters:rounded-l-none!',
         '[&_pre]:m-0 [&_pre]:border-0',
         'max-lg-gutters:grid-cols-1'
       )}
       {...rest}>
       {codeBlocks.map((codeBlock, index) => (
-        <Snippet key={index} className="mb-0 last:max-lg-gutters:mb-4">
+        <Snippet key={index} className="last:max-lg-gutters:mb-4 mb-0">
           <SnippetHeader title={tabNames[index]} Icon={FileCode01Icon}>
             <CopyAction text={cleanCopyValue(codeBlock.props.children.props.children)} />
           </SnippetHeader>

docs/components/plugins/EasMetadataTable.tsx

@@ -31,7 +31,7 @@ export function MetadataTable({
   const id = useId();
 
   return (
-    <div className="mb-2 mt-1">
+    <div className="mt-1 mb-2">
       <Table headers={headers}>
         {children.map(property => (
           <TableRow key={`${id}-${property.name}`}>