fix(Dialog): replace useId with React 17-compatible id counter

The library's peer range is react >=17 but useId is React 18+. The dialog
surface renders only behind the client-only mounted gate, so a per-instance
counter id is safe (no SSR output to hydrate-mismatch). Also restore
alphabetical ordering of the Dialog export in the components barrel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: woobottle

src/components/Dialog/Dialog.web.tsx

@@ -8,7 +8,6 @@
 import React, {
   useContext,
   useEffect,
-  useId,
   useMemo,
   useRef,
   useState,
@@ -30,6 +29,11 @@ import {cssifyWebStyles} from '../../core/utils/cssifyWebStyles';
 
 const dialogStyles = getDialogStyles();
 
+// Per-instance id source. `useId` would be cleaner but is React 18+, while the
+// library's peer range is `react >=17`. The dialog surface only renders behind
+// the client-only `mounted` gate, so there is no SSR output to mismatch on.
+let dialogIdCounter = 0;
+
 function DialogBase({
   open,
   onClose,
@@ -41,8 +45,13 @@ function DialogBase({
   style,
   testID,
 }: DialogWebProps) {
-  const titleId = useId();
-  const descriptionId = useId();
+  const [{titleId, descriptionId}] = useState(() => {
+    dialogIdCounter += 1;
+    return {
+      titleId: `wb-dialog-title-${dialogIdCounter}`,
+      descriptionId: `wb-dialog-desc-${dialogIdCounter}`,
+    };
+  });
 
   const [hasTitle, setHasTitle] = useState(false);
   const [hasDescription, setHasDescription] = useState(false);

src/components/index.ts

@@ -3,8 +3,8 @@ export * from './Badge';
 export * from './Box';
 export * from './Button';
 export * from './Card';
-export * from './Dialog';
 export * from './Chip';
+export * from './Dialog';
 export * from './Divider';
 export * from './Eyebrow';
 export * from './Fab';