@astryxdesign/core 0.7.5 → 0.7.6-canary.bb18c81

package/src/Drawer/DrawerHeader.spec.md

@@ -0,0 +1,181 @@
+---
+schema_version: 3
+template_version: 7
+kind: component
+id: component:DrawerHeader
+authority: current
+archive_reason: null
+superseded_by: null
+approved_by: cixzhang
+approved_at: 2026-10-30
+owners: [cixzhang, imdreamrunner]
+review_triggers: [public-api, behavior, layout, theming, accessibility]
+verified_by:
+  [
+    packages/core/src/Drawer/DrawerHeader.test.tsx,
+    apps/storybook/stories/DrawerHeader.stories.tsx,
+    scripts/check-knowledge.mjs,
+  ]
+modules: []
+families: [family:layout-regions]
+design_specs: []
+architecture:
+  [architecture:component-theming-surface, architecture:container-padding]
+contributing: []
+system_specs: []
+---
+
+# DrawerHeader component contract
+
+## Contract at a glance
+
+| Area                    | Contract                                                                                                                                                                                        |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | `DrawerHeader` with `title`, `subtitle`, `onOpenChange`, `startContent`, `endContent`, `endContentEdgeCompensation` (`inline`, `block`, `all`), and `hasDivider`; five `drawer-header` targets. |
+| Behavior                | A Layout header row for a Drawer: optional start content, an h2 title with optional subtitle, optional end content, and a close button only when `onOpenChange` is given.                       |
+| End-user impact         | Users see the drawer's title and, when the caller provides one, a named close button; focus is not moved when the header mounts.                                                                |
+| Builder impact          | None.                                                                                                                                                                                           |
+| Compatibility/readiness | Records shipped behavior; no public change.                                                                                                                                                     |
+| Review checks           | Reject a close button rendered without `onOpenChange`, a header that names the Drawer or moves focus on mount, or a title that is not an h2.                                                    |
+| Governing rules         | `component:Drawer` (the panel and naming); `family:layout-regions`; `architecture:component-theming-surface`.                                                                                   |
+
+This table is a review projection; the body below is authoritative.
+
+## Intent
+
+DrawerHeader is the optional title row a caller composes in a Drawer's Layout
+header slot. It owns the row's parts, its close button, and its targets.
+Consumer usage lives in `DrawerHeader.doc.mjs`.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: records shipped behavior; no public change
+- Controlled/uncontrolled behavior: the close button calls the caller's
+  `onOpenChange(false)` and owns no state
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The header row, its slots, title semantics, close button, end-content edge
+  compensation, and five targets (FR1–FR5).
+
+**Does not own / non-goals**
+
+- The Drawer's name, focus entry, and open state — owned by `component:Drawer`.
+- The header region's padding, divider default, and place in the Layout — owned
+  by `family:layout-regions` through `LayoutHeader`.
+- The close Button — owned by `component:Button`.
+
+## Public concepts
+
+| Concept                  | Closed values or states           | Meaning                                                                                       | Availability by variant/orientation/state | Default                                              | Owner                    | Stability | Invalid-value behavior           |
+| ------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------- | ---------------------------------------------------- | ------------------------ | --------- | -------------------------------- |
+| End-content compensation | `inline`, `block`, `all`, omitted | Which edges of the end slot pull outward to align a trailing control with the container edge. | End slot.                                 | Both axes when `onOpenChange` is set, none otherwise | `component:DrawerHeader` | Stable    | TypeScript rejects other values. |
+
+## Behavioral and layout contract
+
+| ID  | Invariant                                                                                                                                                                                                                                 | Basis                    |
+| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| FR1 | DrawerHeader renders inside a LayoutHeader that receives `ref`, `hasDivider`, `xstyle`, `className`, `style`, and other DOM props. Its row carries `drawer-header` and shows, in order, start content, the title block, and the end slot. | Current source and tests |
+| FR2 | The title renders as an h2; a renderable `subtitle` (including `0`) renders below it as secondary small body text, and an empty one renders nothing. Start and end slots render when their content is renderable, including `0`.          | Current source and tests |
+| FR3 | With `onOpenChange`, the end slot ends with an icon-only ghost Button named and tooltipped by `@astryx.dialog.close` that calls `onOpenChange(false)`; without it there is no close button.                                               | Current source and tests |
+| FR4 | The end slot pulls outward by `--spacing-2` on the block axis, the inline-end edge, or both, per `endContentEdgeCompensation`; when omitted, both apply only if there is a close button.                                                  | Current source           |
+| FR5 | The start slot, title block, end slot, and close glyph carry `drawer-header-start-content`, `drawer-header-title-block`, `drawer-header-end-content`, and `drawer-header-close-icon`.                                                     | Current source and tests |
+| FR6 | Mounting the header does not move focus, and the header does not name the Drawer.                                                                                                                                                         | Current source and tests |
+
+### Allowed variation
+
+- **AV1 — Slots.** Start, end, and subtitle content vary or are absent.
+
+### Representative states
+
+| State               | Required invariant                                | Allowed variation |
+| ------------------- | ------------------------------------------------- | ----------------- |
+| Title only          | h2 title; no close button.                        | —                 |
+| With `onOpenChange` | Named close button at the end; edges compensated. | End content.      |
+| Start and end slots | Order: start, title block, end.                   | Content.          |
+
+### Transformation and precedence order
+
+- **ORD1 — Compensation.** `endContentEdgeCompensation`, then the close-button
+  default (FR4).
+
+### Performance and resources
+
+- No resource rule.
+
+## Accessibility contract
+
+- **AR1 — Heading.** The title is an h2.
+- **AR2 — Close name.** FR3's translated name and tooltip.
+- **AR3 — Focus.** FR6.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                            | Representation authority       | Hierarchy role | Component contract |
+| ---------------- | --------------------------------------------- | ------------------------------ | -------------- | ------------------ |
+| Header row       | Start, title block, end in one row.           | Current source and public docs | Supporting     | FR1                |
+| Start content    | Leading caller content.                       | Current source and public docs | Supporting     | FR2, FR5           |
+| Title block      | Title and optional subtitle.                  | Current source and public docs | Prominent      | FR2, FR5           |
+| End content      | Trailing caller content and the close button. | Current source and public docs | Supporting     | FR3–FR5            |
+| Close icon       | Close glyph inside the button.                | Current source and public docs | Supporting     | FR3, FR5           |
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Header row": {"target": "drawer-header"},
+  "Start content": {"target": "drawer-header-start-content"},
+  "Title block": {"target": "drawer-header-title-block"},
+  "End content": {"target": "drawer-header-end-content"},
+  "Close icon": {"target": "drawer-header-close-icon"}
+}
+```
+
+## Family and system relationships
+
+- `component:Drawer` hosts the header in its Layout and owns naming and focus.
+- `family:layout-regions` owns the header region it renders into.
+
+## Verification map
+
+| Contract            | Verification                                 | Representative states                    | Mutation or failure expectation                    | Audit section                      |
+| ------------------- | -------------------------------------------- | ---------------------------------------- | -------------------------------------------------- | ---------------------------------- |
+| FR1, FR2, AR1       | `DrawerHeader.test.tsx` title and slot tests | Title, subtitle, `0` values, empty slots | Wrong heading level or dropped content fails.      | `audit:DrawerHeader/anatomy`       |
+| FR3, AR2            | `DrawerHeader.test.tsx` close-button tests   | With and without `onOpenChange`          | A button without a callback, or no name, fails.    | `audit:DrawerHeader/accessibility` |
+| FR5                 | `DrawerHeader.test.tsx` theming target test  | All slots                                | A missing target fails.                            | `audit:DrawerHeader/theming`       |
+| FR6, AR3            | `DrawerHeader.test.tsx` focus test           | Mount                                    | Focus moved on mount fails.                        | `audit:DrawerHeader/accessibility` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                | Consumer anatomy and current targets     | Missing, extra, or stale mappings fail validation. | `audit:DrawerHeader/theming`       |
+
+FR4 is read from source; no focused test checks it yet.
+
+Read from source, with no focused test yet:
+
+- FR1: `ref`, `hasDivider`, `xstyle`, `className`, `style`, and other DOM
+  props reaching the LayoutHeader.
+- FR3: the close button's tooltip.
+- FR4: the end slot's edge compensation.
+- FR6: the header not naming the Drawer.
+
+## Decision log
+
+No component-local decision is recorded.
+
+## Open questions
+
+- How do `endContentEdgeCompensation`'s `inline`, `block`, and `all` axis
+  values map onto `endContentEdge` treatment values
+  (`architecture:container-padding`), and when does the old prop enter its
+  compatibility window? Today the prop stays supported as released.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables, examples, or Drawer
+behavior. It links to their owners.

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -127,6 +127,47 @@ describe('DropdownMenu', () => {
     ).not.toBeInTheDocument();
   });
 
+  it("forwards the button's ref object to the popover trigger", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <DropdownMenu
+        button={{label: 'Project actions', ref}}
+        items={[{label: 'Edit project', onClick: vi.fn()}]}
+      />,
+    );
+    expect(ref.current).toBe(
+      screen.getByRole('button', {name: /Project actions/}),
+    );
+  });
+
+  it("forwards the button's ref object to the bottom-sheet trigger", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <DropdownMenu
+        button={{label: 'Project actions', ref}}
+        presentation="bottom-sheet"
+        items={[{label: 'Edit project', onClick: vi.fn()}]}
+      />,
+    );
+    expect(ref.current).toBe(
+      screen.getByRole('button', {name: /Project actions/}),
+    );
+  });
+
+  it("forwards the button's callback ref to the bottom-sheet trigger", () => {
+    const ref = vi.fn();
+    render(
+      <DropdownMenu
+        button={{label: 'Project actions', ref}}
+        presentation="bottom-sheet"
+        items={[{label: 'Edit project', onClick: vi.fn()}]}
+      />,
+    );
+    expect(ref).toHaveBeenCalledWith(
+      screen.getByRole('button', {name: /Project actions/}),
+    );
+  });
+
   it('renders data-driven actions in a bottom sheet when requested', async () => {
     const user = userEvent.setup();
     const onEdit = vi.fn();

package/src/DropdownMenu/DropdownMenu.tsx

@@ -67,6 +67,7 @@ import {
   type DropdownMenuSurfaceValue,
 } from './DropdownMenuContext';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useListFocus} from '../hooks/useListFocus';
 import {useMenuPress} from '../hooks/useMenuPress';
 import type {MenuPressPointerType} from '../hooks/menuPressGesture';
@@ -621,6 +622,11 @@ function DropdownMenuBottomSheet({
   const button = buttonFromProps ?? {label: t(DEFAULT_BUTTON_I18N_KEY)};
   const backLabel = t('@astryx.dropdownMenu.back');
   const buttonRef = useRef<HTMLElement>(null);
+  // The caller's `button.ref` rides along with the sheet's own trigger ref.
+  const triggerRef = useMergedRefs<HTMLButtonElement>(
+    buttonRef as React.Ref<HTMLButtonElement>,
+    button.ref,
+  );
   const triggerId = useId();
   const sheetId = useId();
   const actionListRef = useRef<HTMLDivElement>(null);
@@ -806,7 +812,7 @@ function DropdownMenuBottomSheet({
       ) : (
         <Button
           {...button}
-          ref={buttonRef as React.Ref<HTMLButtonElement>}
+          ref={triggerRef}
           xstyle={[
             isOpen && styles.triggerOpen,
             button.xstyle,

package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

@@ -647,6 +647,40 @@ describe('DropdownMenu data-driven submenus', () => {
     expect(onMove).toHaveBeenCalledWith('b');
   });
 
+  it('renders a submenu for an item with nested items inside a section', async () => {
+    const user = userEvent.setup();
+    const onWork = vi.fn();
+    render(
+      <DropdownMenu
+        button={{label: 'Share'}}
+        items={[
+          {
+            type: 'section',
+            title: 'Send',
+            items: [
+              {label: 'Copy link', onClick: () => {}},
+              {
+                label: 'Email',
+                items: [
+                  {label: 'Work', onClick: onWork},
+                  {label: 'Personal', onClick: () => {}},
+                ],
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: /Share/}));
+    const trigger = screen.getByRole('menuitem', {name: /Email/, hidden: true});
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+    await user.click(trigger);
+    await user.click(
+      await screen.findByRole('menuitem', {name: 'Work', hidden: true}),
+    );
+    expect(onWork).toHaveBeenCalled();
+  });
+
   it('keyboard-reaches an item positioned after a submenu row', async () => {
     // Regression: the submenu flyout renders inline inside the root menu, so
     // the root's item query swept in the (hidden) flyout items. Arrow nav then

package/src/DropdownMenu/MenuBottomSheetActionList.tsx

@@ -11,13 +11,14 @@
 
 import React, {useRef, type ReactElement} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {Divider} from '../Divider';
-import {Heading} from '../Heading';
-import {Icon, renderIconSlot} from '../Icon';
-import {List, ListItem} from '../List';
+import {Divider} from '../Divider/Divider';
+import {Heading} from '../Heading/Heading';
+import {Icon, renderIconSlot} from '../Icon/Icon';
+import {List} from '../List/List';
+import {ListItem} from '../List/ListItem';
 import {useMenuPress} from '../hooks/useMenuPress';
 import {colorVars, spacingVars} from '../theme/tokens.stylex';
-import {rtlStyles} from '../utils';
+import {rtlStyles} from '../utils/rtlStyles';
 import {getInteractionModality} from '../utils/interactionModality';
 import type {DropdownMenuItemData, DropdownMenuOption} from './DropdownMenu';
 import {isModifiedClick} from './menuItemRoles';

package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts

@@ -120,16 +120,28 @@ async function runState(
   });
 }
 
-test('every menu expectation is exercised by a DropdownMenu state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every menu expectation is exercised by a DropdownMenu state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of MENU_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(MENU_KNOWN_FAILURES, results)).toEqual([]);
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      MENU_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(MENU_KNOWN_FAILURES, results)).toEqual([]);
+  });
 });
 
 for (const state of MENU_BINDING_STATES) {

package/src/DropdownMenu/__tests__/MenuButton.a11y.chromium.spec.ts

@@ -107,18 +107,30 @@ async function runState(
   });
 }
 
-test('every menu-button expectation is exercised by a DropdownMenu or MoreMenu state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every menu-button expectation is exercised by a DropdownMenu or MoreMenu state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of MENU_BUTTON_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(MENU_BUTTON_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      MENU_BUTTON_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(MENU_BUTTON_KNOWN_FAILURES, results)).toEqual(
+      [],
+    );
+  });
 });
 
 for (const state of MENU_BUTTON_BINDING_STATES) {

package/src/DropdownMenu/lazyMenuBottomSheet.test.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file lazyMenuBottomSheet.test.ts
+ * @input lazyMenuBottomSheet's action-list preload, with the list's module
+ *   failing to load once
+ * @output A failed preload is no unhandled rejection, and is not kept: the
+ *   next load asks the module loader again
+ * @position Unit test of ./lazyMenuBottomSheet; the hydration case is in
+ *   DropdownMenu.ssr.test.tsx
+ */
+
+import {afterEach, describe, expect, it, vi} from 'vitest';
+
+afterEach(() => {
+  vi.doUnmock('./MenuBottomSheetActionList');
+  vi.resetModules();
+});
+
+describe('preloadMenuBottomSheetActionList', () => {
+  it('drops a failed preload without an unhandled rejection, and asks the module loader again on the next call', async () => {
+    vi.resetModules();
+    let attempts = 0;
+    vi.doMock('./MenuBottomSheetActionList', () => {
+      attempts += 1;
+      if (attempts === 1) {
+        throw new Error('the connection dropped');
+      }
+      return {MenuBottomSheetActionList: () => null};
+    });
+    const unhandled: unknown[] = [];
+    const onUnhandled = (reason: unknown) => unhandled.push(reason);
+    process.on('unhandledRejection', onUnhandled);
+    try {
+      const {preloadMenuBottomSheetActionList} =
+        await import('./lazyMenuBottomSheet');
+      preloadMenuBottomSheetActionList();
+      await vi.waitFor(() => expect(attempts).toBe(1));
+      // An unhandled rejection is reported after the rejecting task's
+      // microtasks: give it two macrotasks.
+      await new Promise(resolve => setTimeout(resolve, 0));
+      await new Promise(resolve => setTimeout(resolve, 0));
+      expect(unhandled).toEqual([]);
+
+      preloadMenuBottomSheetActionList();
+      await vi.waitFor(() => expect(attempts).toBe(2));
+      const loaded = await import('./MenuBottomSheetActionList');
+      expect(typeof loaded.MenuBottomSheetActionList).toBe('function');
+    } finally {
+      process.off('unhandledRejection', onUnhandled);
+    }
+  });
+});

package/src/DropdownMenu/lazyMenuBottomSheet.ts

@@ -15,6 +15,11 @@
  * of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
  * the wrapped component's props and renders nothing until its module loads.
  *
+ * The action list preloads at rest; a failed load is not kept, so the next
+ * preload or open asks the module loader again (a loader that retries then
+ * loads it; a browser does not fetch a native module again once its import
+ * failed).
+ *
  * Neither wrapper renders on the server or in the render that hydrates server
  * HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
  * leave server markup incomplete and abort hydration. The closed sheet has no
@@ -47,16 +52,28 @@ const LazyMenuBottomSheet = lazy(async () =>
 let actionListModule: typeof ActionListModule | null = null;
 let actionListLoad: Promise<typeof ActionListModule> | null = null;
 async function loadActionList(): Promise<typeof ActionListModule> {
-  actionListLoad ??= import('./MenuBottomSheetActionList').then(module => {
-    actionListModule = module;
-    return module;
-  });
+  actionListLoad ??= import('./MenuBottomSheetActionList').then(
+    module => {
+      actionListModule = module;
+      return module;
+    },
+    (error: unknown) => {
+      // A failed load (a dropped connection) is not kept: the next caller
+      // asks the module loader again.
+      actionListLoad = null;
+      throw error;
+    },
+  );
   return actionListLoad;
 }
 
-/** Starts loading the action list; a sheet menu calls it at rest. */
+/**
+ * Starts loading the action list; a sheet menu calls it at rest. A preload
+ * that fails is dropped, never an unhandled rejection: the first open asks the
+ * module loader again.
+ */
 export function preloadMenuBottomSheetActionList(): void {
-  void loadActionList();
+  loadActionList().catch(() => {});
 }
 
 const LazyMenuBottomSheetActionList = lazy(async () =>

package/src/DropdownMenu/renderDropdownItems.tsx

@@ -68,6 +68,28 @@ function renderLeafItem(
   return <DropdownMenuItem key={getItemKey(item, index)} {...itemProps} />;
 }
 
+/**
+ * A data item that declares nested `items` becomes a submenu (data-mode
+ * parity with the compound DropdownMenuSubMenu API), at the top level and
+ * inside a section alike; otherwise it's a leaf. renderDropdownItems owns the
+ * recursion and hands the rendered children to DropdownMenuSubMenu, so
+ * DropdownMenuSubMenu never imports this module back (no import cycle).
+ */
+function renderItem(item: DropdownMenuItemData, index: number): ReactElement {
+  if (item.items && item.items.length > 0) {
+    return (
+      <DropdownMenuSubMenu
+        key={getItemKey(item, index)}
+        icon={item.icon}
+        label={item.label}
+        isDisabled={item.isDisabled}>
+        {renderDropdownItems(item.items)}
+      </DropdownMenuSubMenu>
+    );
+  }
+  return renderLeafItem(item, index);
+}
+
 /**
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
@@ -96,28 +118,11 @@ export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
               {option.title}
             </div>
           )}
-          {option.items.map(renderLeafItem)}
+          {option.items.map(renderItem)}
         </div>,
       );
     } else if (!('type' in option)) {
-      // A plain item that declares nested `items` becomes a submenu (data-mode
-      // parity with the compound DropdownMenuSubMenu API); otherwise it's a
-      // leaf. renderDropdownItems owns the recursion and hands the rendered
-      // children to DropdownMenuSubMenu — so DropdownMenuSubMenu never imports
-      // this module back (no import cycle).
-      if (option.items && option.items.length > 0) {
-        elements.push(
-          <DropdownMenuSubMenu
-            key={getItemKey(option, i)}
-            icon={option.icon}
-            label={option.label}
-            isDisabled={option.isDisabled}>
-            {renderDropdownItems(option.items)}
-          </DropdownMenuSubMenu>,
-        );
-      } else {
-        elements.push(renderLeafItem(option, i));
-      }
+      elements.push(renderItem(option, i));
     }
   }
 

package/src/EmptyState/EmptyState.tsx

@@ -24,7 +24,8 @@ import {
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {AnnounceRenderedText} from '../hooks/AnnounceRenderedText';
-import {isRenderable, mergeProps} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
+import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({

package/src/Field/FieldLabel.tsx

@@ -19,7 +19,7 @@
 import {use, useMemo, useRef, type ReactNode, type RefObject} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 
 import {
   colorVars,
@@ -28,9 +28,10 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {Icon, renderIconSlot, type IconType} from '../Icon';
-import {Tooltip} from '../Tooltip';
-import {useTranslator} from '../i18n';
+import {Icon, renderIconSlot} from '../Icon/Icon';
+import type {IconType} from '../Icon';
+import {Tooltip} from '../Tooltip/Tooltip';
+import {useTranslator} from '../i18n/useTranslator';
 import {themeProps} from '../utils/themeProps';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {FormLayoutContext} from '../FormLayout/FormLayoutContext';

package/src/Field/InputClearButton.tsx

@@ -18,9 +18,9 @@
 
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import {useTranslator} from '../i18n';
+import {Button} from '../Button/Button';
+import {Icon} from '../Icon/Icon';
+import {useTranslator} from '../i18n/useTranslator';
 import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({

package/src/Field/PanelSearchInput.tsx

@@ -42,9 +42,9 @@
 import {useCallback, useState, type Ref} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {Icon} from '../Icon';
+import {Icon} from '../Icon/Icon';
 import {InputClearButton} from './InputClearButton';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {
   getInteractionModality,
   useInteractionModalityTracking,

package/src/FieldStatus/FieldStatus.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {
   colorVars,
   radiusVars,
@@ -31,7 +31,7 @@ import {
 import type {InputStatusType} from '../Field/types';
 import {useEntryAnimation} from '../hooks/useEntryAnimation';
 import {themeProps} from '../utils/themeProps';
-import {Icon} from '../Icon';
+import {Icon} from '../Icon/Icon';
 import type {IconName} from '../Icon';
 import type {FieldStatusVariantMap} from './index';
 import {useFieldStatusAnnouncement} from './useFieldStatusAnnouncement';