diff --git a/apps/xplat-v9/StrictDomDemo.tsx b/apps/xplat-v9/StrictDomDemo.tsx
index b6452c049d0326..d43930de94f876 100644
--- a/apps/xplat-v9/StrictDomDemo.tsx
+++ b/apps/xplat-v9/StrictDomDemo.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Label } from '@fluentui/react-label';
+import { Dropdown, Option } from '@fluentui/react-combobox';
 import { mergeClasses, makeStyles, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { FluentProvider } from '@fluentui/react-provider';
 import { tokens, webLightTheme } from '@fluentui/react-theme';
@@ -24,6 +25,12 @@ export const StrictDomDemo = () => {
   return (
     <FluentProvider theme={webLightTheme} className={mergeClasses(classNames.root)}>
       <Label required>Label</Label>
+      <h1>Dropdown</h1>
+      <Dropdown inlinePopup>
+        <Option>Option 1</Option>
+        <Option>Option 2</Option>
+        <Option>Option 3</Option>
+      </Dropdown>
       <ButtonStories />
     </FluentProvider>
   );
diff --git a/apps/xplat-v9/package.json b/apps/xplat-v9/package.json
index 9c0b44e1897de6..122095d0fa836b 100644
--- a/apps/xplat-v9/package.json
+++ b/apps/xplat-v9/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@fluentui/react-button": "*",
+    "@fluentui/react-combobox": "*",
     "@fluentui/react-jsx-runtime": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-platform-adapter-preview": "*",
diff --git a/package.json b/package.json
index 4068101656adef..692abdd469e32d 100644
--- a/package.json
+++ b/package.json
@@ -384,6 +384,7 @@
     "@types/jest-axe/axe-core": "4.7.2",
     "eslint": "7.25.0",
     "@mdx-js/loader/loader-utils": "~2.0.4",
+    "scheduler": "^0.20.2",
     "swc-loader": "^0.2.3",
     "prettier": "2.8.8",
     "puppeteer": "19.6.0"
diff --git a/packages/react-components/react-aria/etc/react-aria.api.md b/packages/react-components/react-aria/etc/react-aria.api.md
index da2334940f1193..4cfd1f83f444a2 100644
--- a/packages/react-components/react-aria/etc/react-aria.api.md
+++ b/packages/react-components/react-aria/etc/react-aria.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
diff --git a/packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts b/packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts
index 3fbe5e08891bb0..f3ee78ebef3327 100644
--- a/packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts
+++ b/packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts
@@ -16,14 +16,14 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
   const attributeVisibilityRef = React.useRef(true);
 
   const removeAttribute = React.useCallback(() => {
-    activeParentRef.current?.removeAttribute('aria-activedescendant');
+    activeParentRef.current?.removeAttribute?.('aria-activedescendant');
   }, []);
   const setAttribute = React.useCallback((id?: string) => {
     if (id) {
       activeIdRef.current = id;
     }
     if (attributeVisibilityRef.current && activeIdRef.current) {
-      activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);
+      activeParentRef.current?.setAttribute?.('aria-activedescendant', activeIdRef.current);
     }
   }, []);
 
@@ -35,9 +35,9 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
     }
 
     if (isNavigatingWithKeyboard) {
-      active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+      active.setAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
     } else {
-      active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
+      active.removeAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
     }
   });
 
@@ -51,8 +51,8 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
   const blurActiveDescendant = React.useCallback(() => {
     const active = getActiveDescendant();
     if (active) {
-      active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);
-      active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
+      active.removeAttribute?.(ACTIVEDESCENDANT_ATTRIBUTE);
+      active.removeAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
     }
 
     removeAttribute();
@@ -69,10 +69,10 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
 
       scrollIntoView(nextActive, listboxRef.current);
       setAttribute(nextActive.id);
-      nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
+      nextActive.setAttribute?.(ACTIVEDESCENDANT_ATTRIBUTE, '');
 
       if (focusVisibleRef.current) {
-        nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+        nextActive.setAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
       }
     },
     [listboxRef, blurActiveDescendant, setAttribute],
diff --git a/packages/react-components/react-card/etc/react-card.api.md b/packages/react-components/react-card/etc/react-card.api.md
index 3bb1cdebb1c786..5c4cd28987b2cb 100644
--- a/packages/react-components/react-card/etc/react-card.api.md
+++ b/packages/react-components/react-card/etc/react-card.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-combobox/package.json b/packages/react-components/react-combobox/package.json
index 8903976d28b701..d05216203df809 100644
--- a/packages/react-components/react-combobox/package.json
+++ b/packages/react-components/react-combobox/package.json
@@ -39,6 +39,7 @@
     "@fluentui/react-field": "^9.1.58",
     "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-jsx-runtime": "^9.0.34",
+    "@fluentui/react-platform-adapter-preview": "^0.0.0",
     "@fluentui/react-portal": "^9.4.18",
     "@fluentui/react-positioning": "^9.14.2",
     "@fluentui/react-shared-contexts": "^9.15.2",
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
index 4c6731353c8ec9..a84dc58914436c 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useActiveDescendant } from '@fluentui/react-aria';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import {
+  ChevronDownRegular as ChevronDownIcon,
+  DismissRegular as DismissIcon,
+} from '@fluentui/react-platform-adapter-preview';
 import {
   getPartitionedNativeProps,
   mergeCallbacks,
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
index 4d99ff5a09780e..f7bd3e9aa964d6 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { iconSizes } from '../../utils/internalTokens';
 import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
index 02348c1fbe508d..87b714ce7239f0 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
+++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { useActiveDescendant } from '@fluentui/react-aria';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import {
+  ChevronDownRegular as ChevronDownIcon,
+  DismissRegular as DismissIcon,
+} from '@fluentui/react-platform-adapter-preview';
 import {
   getPartitionedNativeProps,
   mergeCallbacks,
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
index 1fec9f48c9a65a..2f803abc16a47b 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts
@@ -1,7 +1,7 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { iconSizes } from '../../utils/internalTokens';
 import type { DropdownSlots, DropdownState } from './Dropdown.types';
 
@@ -239,12 +239,12 @@ const useIconStyles = makeStyles({
 const useBaseClearButtonStyle = makeResetStyles({
   alignSelf: 'center',
   backgroundColor: tokens.colorTransparentBackground,
-  border: 'none',
+  ...shorthands.borderStyle('none'),
   cursor: 'pointer',
   height: 'fit-content',
-  margin: 0,
+  ...shorthands.margin(0),
   marginRight: tokens.spacingHorizontalMNudge,
-  padding: 0,
+  ...shorthands.padding(0),
   position: 'relative',
 
   ...createFocusOutlineStyle(),
diff --git a/packages/react-components/react-combobox/src/components/Option/useOption.tsx b/packages/react-components/react-combobox/src/components/Option/useOption.tsx
index 8b7283f3ecb424..ca6b8eb2ecf8c6 100644
--- a/packages/react-components/react-combobox/src/components/Option/useOption.tsx
+++ b/packages/react-components/react-combobox/src/components/Option/useOption.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
-import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-platform-adapter-preview';
 import { useListboxContext_unstable } from '../../contexts/ListboxContext';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { OptionProps, OptionState } from './Option.types';
diff --git a/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts b/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
index d28f8c2e608246..f627e1cdf277b9 100644
--- a/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts
@@ -1,7 +1,7 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import type { OptionSlots, OptionState } from './Option.types';
 
 export const optionClassNames: SlotClassNames<OptionSlots> = {
diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts
index 4ee0681b0f30ab..9ac331fbee02e8 100644
--- a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts
+++ b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts
@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
 export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {
diff --git a/packages/react-components/react-divider/etc/react-divider.api.md b/packages/react-components/react-divider/etc/react-divider.api.md
index 10bd3f59533c3c..ab06f15bb2f1ee 100644
--- a/packages/react-components/react-divider/etc/react-divider.api.md
+++ b/packages/react-components/react-divider/etc/react-divider.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-image/etc/react-image.api.md b/packages/react-components/react-image/etc/react-image.api.md
index 25602056e50ce9..94f0a187322a37 100644
--- a/packages/react-components/react-image/etc/react-image.api.md
+++ b/packages/react-components/react-image/etc/react-image.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-label/etc/react-label.api.md b/packages/react-components/react-label/etc/react-label.api.md
index d27d3a189020a2..960f310802fe0f 100644
--- a/packages/react-components/react-label/etc/react-label.api.md
+++ b/packages/react-components/react-label/etc/react-label.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-link/etc/react-link.api.md b/packages/react-components/react-link/etc/react-link.api.md
index 4ad6f2a58b645a..1652aec158a19d 100644
--- a/packages/react-components/react-link/etc/react-link.api.md
+++ b/packages/react-components/react-link/etc/react-link.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md b/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md
index 41a712f0df1d72..e37f79ead05d49 100644
--- a/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md
+++ b/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md
@@ -4,6 +4,12 @@
 
 ```ts
 
+/// <reference types="react" />
+
+import { Checkmark12Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
+import { ChevronDownRegular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import type { GriffelStyle } from '@griffel/react';
 import { makeStyles } from '@griffel/react';
 import { makeStyles as makeStylesCore } from '@griffel/core';
@@ -15,6 +21,14 @@ import { TextDirectionProvider } from '@griffel/react';
 import type { Theme } from '@fluentui/react-theme';
 import { useRenderer_unstable } from '@griffel/react';
 
+export { Checkmark12Filled }
+
+export { CheckmarkFilled }
+
+export { ChevronDownRegular }
+
+export { DismissRegular }
+
 // @public (undocumented)
 export const getStylesFromClassName: (className: string) => {
     [key: string]: unknown;
diff --git a/packages/react-components/react-platform-adapter-preview/package.json b/packages/react-components/react-platform-adapter-preview/package.json
index c7f27bc092e5c8..2c0b13de37a6e5 100644
--- a/packages/react-components/react-platform-adapter-preview/package.json
+++ b/packages/react-components/react-platform-adapter-preview/package.json
@@ -34,6 +34,7 @@
     "@stylexjs/stylex": "^0.5.1"
   },
   "dependencies": {
+    "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-shared-contexts": "^9.15.2",
     "@fluentui/react-theme": "^9.1.19",
     "@griffel/core": "^1.14.1",
diff --git a/packages/react-components/react-platform-adapter-preview/src/icons/icons.native.tsx b/packages/react-components/react-platform-adapter-preview/src/icons/icons.native.tsx
new file mode 100644
index 00000000000000..19b617b3bbf93e
--- /dev/null
+++ b/packages/react-components/react-platform-adapter-preview/src/icons/icons.native.tsx
@@ -0,0 +1,7 @@
+import { html } from 'react-strict-dom';
+
+// TODO create real wrappers for svg icons
+export const Checkmark12Filled = html.span;
+export const CheckmarkFilled = html.span;
+export const ChevronDownRegular = html.span;
+export const DismissRegular = html.span;
diff --git a/packages/react-components/react-platform-adapter-preview/src/icons/icons.tsx b/packages/react-components/react-platform-adapter-preview/src/icons/icons.tsx
new file mode 100644
index 00000000000000..c3c7519c626b42
--- /dev/null
+++ b/packages/react-components/react-platform-adapter-preview/src/icons/icons.tsx
@@ -0,0 +1 @@
+export { Checkmark12Filled, CheckmarkFilled, ChevronDownRegular, DismissRegular } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-platform-adapter-preview/src/index.ts b/packages/react-components/react-platform-adapter-preview/src/index.ts
index 04468db613d4c0..575668fbe891a8 100644
--- a/packages/react-components/react-platform-adapter-preview/src/index.ts
+++ b/packages/react-components/react-platform-adapter-preview/src/index.ts
@@ -1,5 +1,6 @@
 export { XPlatProvider, suppressCssVariableInsertion } from './XPlatProvider/XPlatProvider';
 export type { XPlatProviderProps } from './XPlatProvider/XPlatProvider.types';
+export { Checkmark12Filled, CheckmarkFilled, ChevronDownRegular, DismissRegular } from './icons/icons';
 export { jsxPlatformAdapter } from './jsx/jsxPlatformAdapter';
 export { getStylesFromClassName } from './styling/classNameMap';
 export { makeResetStyles } from './styling/makeResetStyles';
diff --git a/packages/react-components/react-platform-adapter-preview/src/styling/convertGriffelToStyleX.native.ts b/packages/react-components/react-platform-adapter-preview/src/styling/convertGriffelToStyleX.native.ts
index 316f2cd38efbc1..2d6debf3f7af5b 100644
--- a/packages/react-components/react-platform-adapter-preview/src/styling/convertGriffelToStyleX.native.ts
+++ b/packages/react-components/react-platform-adapter-preview/src/styling/convertGriffelToStyleX.native.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type { GriffelStyle } from '@griffel/core';
 import type { UserAuthoredStyles as StyleXStyle } from '@stylexjs/stylex/lib/StyleXTypes';
 
@@ -15,6 +16,11 @@ type ValueWithSelectors = {
 type Selector = keyof ValueWithSelectors;
 
 function isSelector(key: string): key is Selector {
+  // Compound selectors are not supported
+  if (key.includes(',')) {
+    return false;
+  }
+
   return key.startsWith(':') || key.startsWith('@') || key === 'default';
 }
 
@@ -45,6 +51,40 @@ function makeValueWithSelectors(
   } as ValueWithSelectors;
 }
 
+function convertGriffelValueToStyleX(
+  griffelStyle: GriffelStyle,
+  property: string,
+): [keyof GriffelStyle & keyof StyleXStyle, GriffelStyle[keyof GriffelStyle]] | [undefined, undefined] {
+  const prop = property as keyof GriffelStyle & keyof StyleXStyle;
+  const value = griffelStyle[prop];
+  if (
+    prop.startsWith('grid') ||
+    prop.startsWith('outline') ||
+    prop === 'transform' || // REVIEW: Transform seems to be partly supported but causes errors
+    prop === 'cursor' ||
+    prop === 'clipPath' ||
+    prop === 'boxShadow' ||
+    (prop === 'display' && value === 'grid') ||
+    (prop === 'position' && value === 'static') ||
+    (prop === 'height' && value === 'fit-content')
+  ) {
+    console.log(`[convertGriffelToStyleX] Ignoring unsupported property '${prop}: ${value}'`);
+    return [undefined, undefined];
+  }
+
+  if (prop === 'columnGap' || prop === 'rowGap') {
+    console.log(`[convertGriffelToStyleX] Converting '${prop}' to 'gap'`);
+    return ['gap', value];
+  }
+
+  if (prop === 'display' && value === 'inline-flex') {
+    console.log(`[convertGriffelToStyleX] Converting 'display: inline-flex' to 'display: flex'`);
+    return ['display', 'flex'];
+  }
+
+  return [prop, value];
+}
+
 /**
  * Converts from Griffel's selector format to StyleX's format.
  *
@@ -80,17 +120,19 @@ function mergeSelectorValues(selectors: Selector[], griffelStyle: GriffelStyle,
       continue;
     }
 
-    const property = key as keyof GriffelStyle & keyof StyleXStyle;
-    const value = griffelStyle[property];
+    const [property, value] = convertGriffelValueToStyleX(griffelStyle, key);
+    if (property === undefined || value === undefined || value === null) {
+      continue;
+    }
 
     if (typeof value === 'string' || typeof value === 'number') {
       strictDomStyle[property] = makeValueWithSelectors(selectors, value, strictDomStyle[property]);
     } else if (Array.isArray(value)) {
-      console.warn('Unsupported array value for ', key);
+      console.log('[convertGriffelToStyleX] Unsupported array value for ', key);
     } else if (isSelector(key) && isValueWithSelectors(value)) {
       mergeSelectorValues([...selectors, key], value, strictDomStyle);
     } else {
-      console.warn(`Unsupported selector `, [...selectors, key]);
+      console.log(`[convertGriffelToStyleX] Unsupported selector `, [...selectors, key]);
     }
   }
 }
@@ -103,10 +145,8 @@ export const convertGriffelToStyleX = (griffelStyle: GriffelStyle): StyleXStyle
       continue;
     }
 
-    const property = key as keyof GriffelStyle & keyof StyleXStyle;
-
-    const value = griffelStyle[property];
-    if (value === null) {
+    const [property, value] = convertGriffelValueToStyleX(griffelStyle, key);
+    if (value === undefined || value === null) {
       continue;
     }
 
@@ -119,11 +159,14 @@ export const convertGriffelToStyleX = (griffelStyle: GriffelStyle): StyleXStyle
         strictDomStyle[property] = value;
       }
     } else if (Array.isArray(value)) {
-      console.warn('Unsupported array value for ', key);
-    } else if (isSelector(key) && isValueWithSelectors(value)) {
-      mergeSelectorValues([key], value, strictDomStyle);
+      console.log('[convertGriffelToStyleX] Unsupported array value for ', property);
+    } else if (property.includes('::') || property.includes(':before') || property.includes(':after')) {
+      // TODO this could potentially be solved by automatically adding extra elements to the DOM tree
+      console.log('[convertGriffelToStyleX] Unsupported pseudo-element ', property);
+    } else if (isSelector(property) && isValueWithSelectors(value)) {
+      mergeSelectorValues([property], value, strictDomStyle);
     } else {
-      console.warn(`Unsupported selector `, key);
+      console.log('[convertGriffelToStyleX] Unsupported selector ', property);
     }
   }
 
diff --git a/packages/react-components/react-popover/etc/react-popover.api.md b/packages/react-components/react-popover/etc/react-popover.api.md
index e6cca50af5bddc..2193d2572be923 100644
--- a/packages/react-components/react-popover/etc/react-popover.api.md
+++ b/packages/react-components/react-popover/etc/react-popover.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { ARIAButtonResultProps } from '@fluentui/react-aria';
 import { ARIAButtonType } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-skeleton/etc/react-skeleton.api.md b/packages/react-components/react-skeleton/etc/react-skeleton.api.md
index c0bc4c75354093..5ae23c86eb228e 100644
--- a/packages/react-components/react-skeleton/etc/react-skeleton.api.md
+++ b/packages/react-components/react-skeleton/etc/react-skeleton.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-spinner/etc/react-spinner.api.md b/packages/react-components/react-spinner/etc/react-spinner.api.md
index b3f4c3ba43fef9..63b3a572a53aa0 100644
--- a/packages/react-components/react-spinner/etc/react-spinner.api.md
+++ b/packages/react-components/react-spinner/etc/react-spinner.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tabs/etc/react-tabs.api.md b/packages/react-components/react-tabs/etc/react-tabs.api.md
index f7662bb2bfe77e..c5e29ac78711e6 100644
--- a/packages/react-components/react-tabs/etc/react-tabs.api.md
+++ b/packages/react-components/react-tabs/etc/react-tabs.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ContextSelector } from '@fluentui/react-context-selector';
diff --git a/packages/react-components/react-text/etc/react-text.api.md b/packages/react-components/react-text/etc/react-text.api.md
index 67502bace8d8d2..8248c7f560ed21 100644
--- a/packages/react-components/react-text/etc/react-text.api.md
+++ b/packages/react-components/react-text/etc/react-text.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tooltip/etc/react-tooltip.api.md b/packages/react-components/react-tooltip/etc/react-tooltip.api.md
index ada8f59ee9266d..47468641ac0c0a 100644
--- a/packages/react-components/react-tooltip/etc/react-tooltip.api.md
+++ b/packages/react-components/react-tooltip/etc/react-tooltip.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index 985292f0c166af..afa5459ad9db69 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/packages/react-components/react-utilities/etc/react-utilities.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { DispatchWithoutAction } from 'react';
 import * as React_2 from 'react';
 
diff --git a/packages/react-components/react-virtualizer/etc/react-virtualizer.api.md b/packages/react-components/react-virtualizer/etc/react-virtualizer.api.md
index 6b47e848983c25..0daf895698157e 100644
--- a/packages/react-components/react-virtualizer/etc/react-virtualizer.api.md
+++ b/packages/react-components/react-virtualizer/etc/react-virtualizer.api.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { Dispatch } from 'react';
diff --git a/yarn.lock b/yarn.lock
index acb7ff2db37179..924c5197b4aba9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23362,7 +23362,7 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@0.20.2, scheduler@^0.20.2:
+scheduler@0.20.2, scheduler@0.24.0-canary-efb381bbf-20230505, scheduler@^0.19.1, scheduler@^0.20.2, scheduler@^0.23.0:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
   integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
@@ -23370,28 +23370,6 @@ scheduler@0.20.2, scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@0.24.0-canary-efb381bbf-20230505:
-  version "0.24.0-canary-efb381bbf-20230505"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.24.0-canary-efb381bbf-20230505.tgz#5dddc60e29f91cd7f8b983d7ce4a99c2202d178f"
-  integrity sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA==
-  dependencies:
-    loose-envify "^1.1.0"
-
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
-  dependencies:
-    loose-envify "^1.1.0"
-
 schema-utils@2.7.0, schema-utils@^2.6.5, schema-utils@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"