@multiplatform.one/forms 7.5.0 → 7.6.0

package/src/Button/Button.density.spec.tsx

@@ -2,17 +2,25 @@
  * @vitest-environment jsdom
  *
  * MPO-42 / LC-76: the density knob and the `compact` PROP must land the
- * SAME padX. Height stays 44 at both stops — density moves pad/gap only.
+ * SAME padX. Height stays 44 at both stops — density moves space, not size.
+ *
+ * LC-79 / LC-80: the internals come from the size recipe, so density picks
+ * the recipe FAMILY (`control` -> `controlCompact`) and never subtracts a
+ * hand-set delta. The delta drifted from the generated table at every token
+ * but `$4`, and at `$2` it INVERTED — `max(8, 7 - 2)` painted a compact
+ * Button 8px wider than the comfortable 7px one.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, recipeFamilies } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { Button } from "./index";
+import { Button, buttonDensityFamily, resolveButtonSizeRecipe } from "./index";
 
 afterEach(cleanup);
 
+const sizes = ["$2", "$3", "$4"] as const;
+
 /** Last `_pl-Npx` / `_pr-Npx` class wins (paddingHorizontal expands to both). */
 function paddingPxFromClass(el: HTMLElement): number | null {
   let found: number | null = null;
@@ -23,56 +31,134 @@ function paddingPxFromClass(el: HTMLElement): number | null {
   return found;
 }
 
+function gapPxFromClass(el: HTMLElement): number | null {
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_gap-(\d+)px$/);
+    if (m) return Number(m[1]);
+  }
+  return null;
+}
+
+function renderProp(size: (typeof sizes)[number]) {
+  renderWithProviders(
+    <Button compact size={size} icon={<span>i</span>}>
+      Save
+    </Button>,
+  );
+  return screen.getByRole("button");
+}
+
+function renderKnob(size: (typeof sizes)[number]) {
+  renderWithProviders(
+    <Preset overrides={{ density: "compact" }}>
+      <Button size={size} icon={<span>i</span>}>
+        Save
+      </Button>
+    </Preset>,
+  );
+  return screen.getByRole("button");
+}
+
+function renderComfortable(size: (typeof sizes)[number]) {
+  renderWithProviders(
+    <Button size={size} icon={<span>i</span>}>
+      Save
+    </Button>,
+  );
+  return screen.getByRole("button");
+}
+
 describe("Button density knob = compact PROP (MPO-42)", () => {
   it("compact PROP and density:compact knob land the SAME padX", () => {
-    renderWithProviders(
-      <Button compact size="$4">
-        Save
-      </Button>,
-    );
-    const viaProp = screen.getByRole("button");
+    const viaProp = renderProp("$4");
     const propPad = paddingPxFromClass(viaProp);
     expect(viaProp.getAttribute("data-mp-density")).toBe("compact");
     expect(propPad).toBe(16);
     cleanup();
 
-    renderWithProviders(
-      <Preset overrides={{ density: "compact" }}>
-        <Button size="$4">Save</Button>
-      </Preset>,
-    );
-    const viaKnob = screen.getByRole("button");
-    const knobPad = paddingPxFromClass(viaKnob);
+    const viaKnob = renderKnob("$4");
     expect(viaKnob.getAttribute("data-mp-density")).toBe("compact");
-    expect(knobPad).toBe(propPad);
-    expect(knobPad).toBe(16);
+    expect(paddingPxFromClass(viaKnob)).toBe(propPad);
+    expect(paddingPxFromClass(viaKnob)).toBe(16);
+  });
+
+  it("both channels land the SAME padX at every size step, not just $4", () => {
+    for (const size of sizes) {
+      const viaProp = paddingPxFromClass(renderProp(size));
+      cleanup();
+      const viaKnob = paddingPxFromClass(renderKnob(size));
+      cleanup();
+      expect(viaKnob, `padX at ${size}`).toBe(viaProp);
+    }
   });
 
   it("height stays 44 at comfortable and compact density stops", () => {
-    renderWithProviders(<Button size="$4">Save</Button>);
-    const comfortable = screen.getByRole("button");
+    const comfortable = renderComfortable("$4");
     expect(comfortable.getAttribute("data-mp-button-height")).toBe("44");
     expect(comfortable.className).toMatch(/_h-44px/);
     expect(paddingPxFromClass(comfortable)).toBe(18);
     cleanup();
 
-    renderWithProviders(
-      <Preset overrides={{ density: "compact" }}>
-        <Button size="$4">Save</Button>
-      </Preset>,
-    );
-    const viaKnob = screen.getByRole("button");
+    const viaKnob = renderKnob("$4");
     expect(viaKnob.getAttribute("data-mp-button-height")).toBe("44");
     expect(viaKnob.className).toMatch(/_h-44px/);
     cleanup();
 
-    renderWithProviders(
-      <Button compact size="$4">
-        Save
-      </Button>,
-    );
-    const viaProp = screen.getByRole("button");
+    const viaProp = renderProp("$4");
     expect(viaProp.getAttribute("data-mp-button-height")).toBe("44");
     expect(viaProp.className).toMatch(/_h-44px/);
   });
+
+  it("density never changes the painted height at any size step (LC-76)", () => {
+    for (const size of sizes) {
+      const relaxed = renderComfortable(size).getAttribute("data-mp-button-height");
+      cleanup();
+      const tight = renderKnob(size).getAttribute("data-mp-button-height");
+      cleanup();
+      expect(tight, `height at ${size}`).toBe(relaxed);
+    }
+  });
+});
+
+describe("Button density comes from the recipe family (LC-79 / LC-80)", () => {
+  it("density picks the family, it does not subtract from the recipe", () => {
+    expect(buttonDensityFamily("control", true)).toBe("controlCompact");
+    expect(buttonDensityFamily("control", false)).toBe("control");
+    // An explicit controlCompact consumer (Chip) does not tighten twice.
+    expect(buttonDensityFamily("controlCompact", true)).toBe("controlCompact");
+  });
+
+  it("compact padX is the generated controlCompact table, at every size", () => {
+    for (const size of sizes) {
+      const expected = resolveButtonSizeRecipe(size, "controlCompact").paddingHorizontal;
+      const viaKnob = paddingPxFromClass(renderKnob(size));
+      cleanup();
+      expect(viaKnob, `padX at ${size}`).toBe(expected);
+    }
+  });
+
+  it("compact is never WIDER than comfortable — the $2 inversion stays fixed", () => {
+    for (const size of sizes) {
+      const relaxed = paddingPxFromClass(renderComfortable(size)) ?? 0;
+      cleanup();
+      const tight = paddingPxFromClass(renderKnob(size)) ?? 0;
+      cleanup();
+      expect(tight, `padX at ${size}`).toBeLessThan(relaxed);
+    }
+  });
+
+  it("the inner gap stays the recipe gap — gap == radius at both stops", () => {
+    for (const size of sizes) {
+      const radius = recipeFamilies.controlCompact.radii[size];
+      const relaxed = gapPxFromClass(renderComfortable(size));
+      cleanup();
+      const tight = gapPxFromClass(renderKnob(size));
+      cleanup();
+      expect(tight, `gap at ${size}`).toBe(resolveButtonSizeRecipe(size, "controlCompact").gap);
+      expect(tight, `gap == radius at ${size}`).toBe(radius);
+      expect(relaxed, `comfortable gap at ${size}`).toBe(
+        resolveButtonSizeRecipe(size, "control").gap,
+      );
+    }
+  });
 });

package/src/Button/Button.labelInk.spec.tsx

@@ -9,21 +9,20 @@
  *
  * jsdom cannot cascade Tamagui CSS, so the DOM arm reads the atomic
  * classes the text node emits (`_col-color11`, `_fow-400`). Contrast is
- * the theme-table arm: intent `$color11` vs the page `$background` in
- * both schemes.
+ * the theme-table arm: intent `$color11` against EVERY page surface the
+ * house theme paints, in both schemes — `$background`/`$color1` (white)
+ * and `$color2` (#f9f9fa, what the gallery boards are shot on).
  */
 
 import { render, cleanup, screen } from "@testing-library/react";
 import {
   aaTextContrastRatio,
-  contrastRatio,
   createDefaultThemeConfig,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
   defaultBuilderOptions,
-  normalizeToHex,
-  relativeLuminance,
+  measureContrast,
 } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
 import { TamaguiProvider, YStack } from "tamagui";
@@ -40,6 +39,15 @@ const houseThemes = createThemesBuilder(
 
 const INTENTS = ["error", "warning", "success"] as const;
 const SCHEMES = ["light", "dark"] as const;
+/**
+ * The house theme has THREE page surfaces and they are not interchangeable:
+ * `$background` and `$color1` are pure white, `$color2` is #f9f9fa. Every
+ * gallery board paints `$color2` (actionFeedbackMain.tsx board root), so a
+ * contrast arm that only reads `$background` certifies on a surface the
+ * boards never shoot — the same shape of hole as measuring the FRAME
+ * instead of the text node. All three are measured here.
+ */
+const WHITE_PAGE_SURFACES = ["background", "color1"] as const;
 
 function houseRender(ui: React.ReactElement, theme: "light" | "dark" = "light") {
   return render(
@@ -53,12 +61,13 @@ function labelNode(text: string): HTMLElement {
   return screen.getByText(text);
 }
 
-function contrastAgainstPage(ink: string, ground: string): number {
-  const inkHex = normalizeToHex(ink);
-  const groundHex = normalizeToHex(ground);
-  expect(inkHex, `ink ${ink}`).toBeTruthy();
-  expect(groundHex, `ground ${ground}`).toBeTruthy();
-  return contrastRatio(relativeLuminance(inkHex!), relativeLuminance(groundHex!));
+/**
+ * One implementation of the arithmetic (the point of exporting
+ * `measureContrast`), and the REPORTED 2-decimal ratio, so the number a
+ * failure prints is the number the verdict used.
+ */
+function pageRatio(ink: string, ground: string, label: string): number {
+  return measureContrast({ foreground: ink, background: ground, label }).ratio;
 }
 
 describe("Button MPO-40 outlined intent label ink", () => {
@@ -121,23 +130,67 @@ describe("Button MPO-40 outlined intent label ink", () => {
     }
   });
 
-  it("intent $color11 vs page ground is >= 4.5:1 in both schemes; on-fill $color is not", () => {
+  it("intent $color11 clears 4.5:1 on the white page surfaces in both schemes; on-fill $color never does", () => {
     for (const scheme of SCHEMES) {
-      const ground = houseThemes[scheme].background;
       for (const intent of INTENTS) {
         const ink = houseThemes[`${scheme}_${intent}`].color11;
-        const ratio = contrastAgainstPage(ink, ground);
-        expect(
-          ratio,
-          `${scheme}_${intent}.color11 ${ink} vs ${ground}`,
-        ).toBeGreaterThanOrEqual(aaTextContrastRatio);
+        for (const surface of WHITE_PAGE_SURFACES) {
+          const ground = houseThemes[scheme][surface];
+          const label = `${scheme}_${intent}.color11 ${ink} on ${scheme}.${surface} ${ground}`;
+          expect(pageRatio(ink, ground, label), label).toBeGreaterThanOrEqual(aaTextContrastRatio);
+        }
 
         const onFill = houseThemes[`${scheme}_${intent}_Button`].color;
+        const ground = houseThemes[scheme].background;
         expect(
-          contrastAgainstPage(onFill, ground),
+          pageRatio(onFill, ground, `${scheme}_${intent}_Button.color`),
           `${scheme}_${intent}_Button.color is the on-fill foreground`,
         ).toBeLessThan(2);
       }
     }
   });
+
+  it("dark intent $color11 clears 4.5:1 on the $color2 page surface too", () => {
+    for (const intent of INTENTS) {
+      const ink = houseThemes[`dark_${intent}`].color11;
+      const ground = houseThemes.dark.color2;
+      const label = `dark_${intent}.color11 ${ink} on dark.color2 ${ground}`;
+      expect(pageRatio(ink, ground, label), label).toBeGreaterThanOrEqual(aaTextContrastRatio);
+    }
+  });
+
+  // PINNED MISS — MPO-40's own secondary finding, still OPEN.
+  //
+  // Fixing the plumbing (the arm above) was necessary, not sufficient. On
+  // $color2 — the surface every gallery board is shot on — light warning
+  // and success $color11 are under mpo's own floor, and those are exactly
+  // the numbers button-anatomy already prints for its CONTRACT row. The
+  // step that would close them is a PALETTE change (Radix yellow-11
+  // #9e6c00 / green-11 #218358), owned by the contrast-floor lane, not by
+  // the Button. colorRules.ts pins the same warning miss on the intent's
+  // own color1 (#fcfcf7, 4.44:1); this pins it on the page ground.
+  //
+  // These numbers are asserted EXACTLY on purpose. Step the palette and
+  // this test fails, which is the reminder to re-measure the board and
+  // tick MPO-40's contrast criterion — never a regression to re-baseline.
+  it("light warning/success $color11 are STILL under 4.5:1 on the $color2 page surface", () => {
+    const ground = houseThemes.light.color2;
+    const measured = Object.fromEntries(
+      INTENTS.map((intent): [string, number] => [
+        intent,
+        pageRatio(
+          houseThemes[`light_${intent}`].color11,
+          ground,
+          `light_${intent}.color11 on light.color2`,
+        ),
+      ]),
+    );
+    expect(measured, `light.color2 is ${ground}`).toEqual({
+      error: 4.95,
+      warning: 4.34,
+      success: 4.48,
+    });
+    expect(measured.warning).toBeLessThan(aaTextContrastRatio);
+    expect(measured.success).toBeLessThan(aaTextContrastRatio);
+  });
 });

package/src/Button/Button.lc71.spec.tsx

@@ -6,7 +6,7 @@ import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Button, buttonDensityPad, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
+import { Button, buttonDensityFamily, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
 
 afterEach(cleanup);
 
@@ -52,8 +52,15 @@ describe("Button size recipes", () => {
 
 describe("Button density ≠ size", () => {
   it("compact tightens pad without shrinking recipe height", () => {
-    expect(buttonDensityPad(12, true)).toBe(10);
-    expect(buttonDensityPad(12, false)).toBe(12);
+    // Density picks the FAMILY; it never subtracts from the recipe (LC-79).
+    expect(buttonDensityFamily("control", true)).toBe("controlCompact");
+    expect(buttonDensityFamily("control", false)).toBe("control");
+    expect(resolveButtonSizeRecipe("$4", "controlCompact").paddingHorizontal).toBeLessThan(
+      resolveButtonSizeRecipe("$4", "control").paddingHorizontal,
+    );
+    expect(resolveButtonSizeRecipe("$4", "controlCompact").height).toBe(
+      resolveButtonSizeRecipe("$4", "control").height,
+    );
     renderWithProviders(
       <Button compact size="$4">
         Save

package/src/Button/Button.stories.tsx

@@ -57,11 +57,12 @@ export const Basic: Story = {
       options: ["$2", "$3", "$4", "$5", "$6"],
       description: "Tamagui size token",
     },
-    variant: {
-      control: "select",
-      options: [undefined, "outlined"],
-      description: "Structural variant",
-    },
+    // The house fill channel is the `outlined` boolean. `variant="outlined"`
+    // is raw-tamagui API this component does not read (only the
+    // `@multiplatform.one/components` shim maps it), so a `variant` control
+    // here drove nothing — MPO-19 X3 measured the board's own "Outlined"
+    // specimen rendering as a filled button with a transparent edge.
+    outlined: { control: "boolean", description: "Outlined fill style" },
     chromeless: { control: "boolean", description: "Transparent, text-only style" },
     disabled: { control: "boolean", description: "Disable the button" },
     skeleton: { control: "boolean", description: "Show skeleton placeholder" },
@@ -210,7 +211,7 @@ export const Comparison: Story = {
         <Button icon={Activity} onPress={pressed("custom.icon")}>
           With Icon
         </Button>
-        <Button variant="outlined" onPress={pressed("custom.outlined")}>
+        <Button outlined onPress={pressed("custom.outlined")}>
           Outlined
         </Button>
         <Button disabled disabledReason="Needs a completed draft">

package/src/Button/index.tsx

@@ -76,13 +76,18 @@ export function resolveButtonSizeRecipe(
   return sizeRecipeForToken(size == null ? "$true" : String(size), { family });
 }
 
-/** Density tightens pad/gap only — never height, type, or icon (density ≠ size). */
-export function buttonDensityPad(padX: number, densityTight: boolean): number {
-  return densityTight ? Math.max(8, padX - 2) : padX;
-}
-
-export function buttonDensityGap(gap: number, densityTight: boolean): number {
-  return densityTight ? Math.max(4, gap - 1) : gap;
+/**
+ * Density selects the recipe FAMILY, it does not subtract from the recipe
+ * (LC-79 / LC-80): control -> controlCompact, same heights, tighter ratios.
+ * A hand-set delta is a second density writer and it drifts from the
+ * generated table at every token but `$4` — it inverted at `$2`, where
+ * `max(8, 7 - 2)` painted a compact Button WIDER than a comfortable one.
+ */
+export function buttonDensityFamily(
+  family: RecipeFamilyName,
+  densityTight: boolean,
+): RecipeFamilyName {
+  return densityTight ? "controlCompact" : family;
 }
 
 /**
@@ -416,9 +421,11 @@ export function Button({
     (warning && "warning") ||
     (success && "success") ||
     undefined;
-  // compact is density (pad/gap), not a size step — do not pass it through
+  // compact is density, not a size step — do not pass it through
   // useResolvedKnobs (size stays on the size axis; LC-76). The PROP and the
-  // density knob must share this channel so both land the same padX/gap.
+  // density knob share one channel: both pick the recipe FAMILY, the same
+  // way resolveKnobs picks it for every other control, so both land the
+  // same padX and the internals stay recipe-generated (LC-75 / LC-79).
   const { knobProps, control, text, disabledState } = useResolvedKnobs({
     intent,
     component: "Button",
@@ -430,10 +437,13 @@ export function Button({
   const grouped = useControlGrouped();
   const sizeProp = (props as { size?: SizeTokens | number }).size;
   const resolvedSize = sizeProp ?? knobProps.sizeToken;
-  const recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily);
   const densityTight = compact !== undefined ? compact === true : knobProps.density === "compact";
-  const padX = buttonDensityPad(recipe.paddingHorizontal, densityTight);
-  const innerGap = buttonDensityGap(recipe.gap, densityTight);
+  const recipe = resolveButtonSizeRecipe(
+    resolvedSize,
+    buttonDensityFamily(recipeFamily, densityTight),
+  );
+  const padX = recipe.paddingHorizontal;
+  const innerGap = recipe.gap;
   if (skeleton) {
     return (
       <View

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -102,7 +102,6 @@ export function UnsavedChangesDialog({
             </Button>
             <Button
               error
-              theme="red"
               actionRole="primary"
               data-mp-savebar-discard-confirm=""
               onPress={() => {

package/src/FieldDisplay/FieldDisplay.spec.tsx

@@ -119,11 +119,20 @@ describe("FieldDisplay", () => {
     expect(root?.getAttribute("data-field")).toBe("datepicker");
   });
 
-  it("draws a QR matrix when barcode fieldProps.formats starts with qr", () => {
+  /**
+   * The qr format reaches BarcodePreview (the round trip is asserted there),
+   * but a display cell's bound is the glyph size — around 20px — and a QR
+   * needs one WHOLE pixel per module, 29 minimum. So the cell draws no matrix
+   * and, because it already prints the value beside the symbol, contributes
+   * nothing rather than a second copy of the string (textFallback={false}).
+   * Growing the row to fit a scannable square is the thing LC-06 forbids.
+   */
+  it("prints the barcode value once and draws no unreadable QR at a display bound", () => {
     const result = renderWithProviders(
       <FieldDisplay field="barcode" value="SKU-001234" fieldProps={{ formats: ["qr"] }} />,
     );
-    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
     expect(result.container.querySelector("canvas")).toBeNull();
+    expect(result.container.textContent?.split("SKU-001234").length).toBe(2); // exactly once
   });
 });

package/src/FieldDisplay/index.tsx

@@ -563,11 +563,16 @@ function BarcodeDisplay({ value, fieldProps }: { value: any; fieldProps?: Record
   return (
     <XStack alignItems="center" minWidth={0} flexShrink={1} {...knobProps.gap}>
       <ValueText mono>{text}</ValueText>
+      {/* The value is already printed beside the symbol, so an undrawable one
+          contributes NOTHING rather than a second copy of the string. At this
+          bound that is every QR past a short value at a large size — a display
+          cell cannot hold 33 whole-pixel modules without growing the row. */}
       <BarcodePreview
         value={text}
         height={Math.max(12, glyphSize)}
         moduleWidth={1}
         format={typeof format === "string" ? format : undefined}
+        textFallback={false}
       />
     </XStack>
   );

package/src/FloatingPanel/index.tsx

@@ -607,6 +607,18 @@ function FloatingPanelWeb({
   // animation=none → no CSS tween (same contract as knobProps.transition === undefined)
   const webTransition = panel.knobProps.transition ? panelTransition : "none";
 
+  // `elevatedSurface` carries a web-only `style: { boxShadow }` (MPO-69,
+  // d326cc0c2). Two `style` props on one element do NOT merge — the later
+  // spread replaces the earlier — so spreading the complete fragment after the
+  // positioning style silently dropped `position: fixed`, `top`, `left`,
+  // `zIndex` and `overflow`, and every web FloatingPanel rendered in normal
+  // flow, pushing the page down instead of floating over it. Measured on
+  // origin/main 048289071: DatePicker's panel sat at trigger.bottom + 5.39 (the
+  // field container's flex gap), not the contract's 0.
+  // The complete fragment still goes on the element (AGENTS.md) — its style is
+  // folded into the positioning style rather than competing with it.
+  const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = panel.knobProps.elevatedSurface;
+
   // Same slot problem as the sheet branch, but only half of it lands here. The
   // POINTER path survives, because `useClick(..., { event: "mousedown" })`
   // listens on mousedown and Tamagui only stops the click. The KEYBOARD path
@@ -650,6 +662,13 @@ function FloatingPanelWeb({
         })}
         cursor={disabled ? "not-allowed" : "pointer"}
         opacity={disabled ? 0.5 : 1}
+        // The cover contract is stated as a relation between the panel's top
+        // edge and THIS element's bottom edge — the box floating-ui anchors
+        // to, which is the whole trigger, not whatever glyph inside it was
+        // clicked. Marking it keeps the measurement unambiguous (a ColorPicker
+        // read from its swatch measures the swatch's inset, not the gap).
+        // Same idiom TreeSelect already uses for `data-fp-panel`.
+        data-fp-reference=""
       >
         {trigger}
       </View>
@@ -659,6 +678,7 @@ function FloatingPanelWeb({
           {...getFloatingProps({
             ref: panel.refs.setFloating,
             style: {
+              ...elevatedSurfaceStyle,
               position: panel.strategy,
               top: overlayStyleRef.current?.top ?? panel.y ?? 0,
               left: panel.x ?? 0,
@@ -675,9 +695,10 @@ function FloatingPanelWeb({
             onScroll: handleScroll,
           })}
           data-testid="floating-panel-viewport"
+          data-fp-panel=""
           {...panelChromeFocus}
           pointerEvents={panel.visible ? "auto" : "none"}
-          {...panel.knobProps.elevatedSurface}
+          {...elevatedSurfaceProps}
           // Complete elevatedSurface fragment above is the ONLY surface source
           // (SF-OVERLAY "including border and elevation", Round 2 docket).
           // The one layered exception is anatomy, not surface: the dropdown

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -27,6 +27,7 @@ const fieldShapedPickers = [
   "DatePicker/DatetimePicker.tsx",
   "TimePicker/index.tsx",
   "ColorPicker/parts.tsx",
+  "Icon/index.tsx",
 ];
 
 /** Panels opened from an icon/button trigger, where fit-content is correct. */