@multiplatform.one/theme 7.38.0 → 7.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.38.0",
+  "version": "7.40.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -59,8 +59,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.38.0",
-    "@multiplatform.one/store": "^7.38.0",
+    "@multiplatform.one/platform": "^7.40.0",
+    "@multiplatform.one/store": "^7.40.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -73,8 +73,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.38.0",
-    "@multiplatform.one/test-utils": "7.38.0",
+    "@multiplatform.one/config": "7.40.0",
+    "@multiplatform.one/test-utils": "7.40.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/IconSlot.spec.tsx

@@ -0,0 +1,88 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { forwardRef, memo } from "react";
+import { getVariableValue, TamaguiProvider, useTheme } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { IconSlot } from "./IconSlot";
+
+const platform = vi.hoisted(() => ({ web: false }));
+vi.mock("tamagui", async (original) => ({
+  ...(await original<typeof import("tamagui")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+const config = createDefaultThemeConfig();
+function Probe({ color, size }: { color?: string; size?: number }) {
+  const theme = useTheme();
+  return (
+    <span
+      data-testid="icon"
+      data-color={color ?? "black"}
+      data-size={size}
+      data-ink={String(getVariableValue(theme.color))}
+      data-muted={String(getVariableValue(theme.color11))}
+    />
+  );
+}
+const Memo = memo(Probe);
+const Forward = forwardRef<HTMLSpanElement, { color?: string; size?: number }>((props, _ref) => (
+  <Probe {...props} />
+));
+afterEach(() => {
+  cleanup();
+  platform.web = false;
+});
+describe("IconSlot", () => {
+  it.each(["light", "dark"] as const)(
+    "%s resolves functions, memo, forwardRef, elements and fragments",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <IconSlot icon={Probe} />
+          <IconSlot icon={Memo} />
+          <IconSlot icon={Forward} />
+          <IconSlot icon={<Probe color="currentColor" />} />
+          <IconSlot
+            icon={
+              <>
+                <Probe />
+              </>
+            }
+          />
+        </TamaguiProvider>,
+      );
+      for (const icon of screen.getAllByTestId("icon"))
+        expect(icon.dataset.color).toBe(icon.dataset.ink);
+    },
+  );
+  it("resolves an explicit token and preserves literal ink", () => {
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <IconSlot icon={<Probe color="$color11" />} size={20} />
+        <IconSlot icon={<Probe color="rebeccapurple" />} />
+      </TamaguiProvider>,
+    );
+    const [token, literal] = screen.getAllByTestId("icon");
+    expect(token.dataset.color).toBe(token.dataset.muted);
+    expect(token.dataset.size).toBe("20");
+    expect(literal.dataset.color).toBe("rebeccapurple");
+  });
+  it("preserves explicit element size", () => {
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <IconSlot icon={<Probe size={12} />} size={20} />
+      </TamaguiProvider>,
+    );
+    expect(screen.getByTestId("icon").dataset.size).toBe("12");
+  });
+  it("keeps web inheritance", () => {
+    platform.web = true;
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <IconSlot icon={<Probe color="currentColor" />} />
+      </TamaguiProvider>,
+    );
+    expect(screen.getByTestId("icon").dataset.color).toBe("currentColor");
+  });
+});

package/src/theme/IconSlot.tsx

@@ -0,0 +1,51 @@
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  createElement,
+  isValidElement,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { isWeb, useTheme } from "tamagui";
+import { resolveGlyphPaint } from "./glyphPaint";
+
+export type IconSlotValue = ReactNode | ComponentType<{ size?: number; color?: string }>;
+
+export function IconSlot({
+  icon,
+  color,
+  size,
+}: {
+  icon: IconSlotValue;
+  color?: string;
+  size?: number;
+}) {
+  const theme = useTheme();
+  const ink = (value?: string) =>
+    resolveGlyphPaint(
+      theme,
+      value && value !== "currentColor" ? value : color === "currentColor" ? undefined : color,
+    );
+  const render = (value: IconSlotValue): ReactNode => {
+    if (isValidElement<{ color?: string; size?: number; children?: ReactNode }>(value)) {
+      if (value.type === Fragment)
+        return cloneElement(value, {}, Children.map(value.props.children, render));
+      return cloneElement(value, {
+        ...(size == null || value.props.size != null ? {} : { size }),
+        ...(!isWeb ? { color: ink(value.props.color) } : {}),
+      });
+    }
+    if (
+      typeof value === "function" ||
+      (value && typeof value === "object" && "$$typeof" in value)
+    ) {
+      return createElement(value as ComponentType<{ size?: number; color?: string }>, {
+        size,
+        ...(!isWeb ? { color: ink() } : {}),
+      });
+    }
+    return value as ReactNode;
+  };
+  return render(icon);
+}

package/src/theme/Preset.tsx

@@ -6,10 +6,24 @@ import { defaultKnobs, type Knobs } from "./knobs";
 import type { Preset as PresetType } from "./preset.types";
 import { getPreset } from "./shared";
 
+/**
+ * FZ-7715. A preset owns shape, density, type and its default accent. A colour
+ * theme the user picks is the accent, so it replaces the preset's `theme` and
+ * every decorative tint; the preset's own colour shows only with no pick.
+ */
+export function applyColorTheme(preset: PresetType, color?: ThemeName | ""): PresetType {
+  if (!color) return preset;
+  return { ...preset, theme: color, tints: [color] };
+}
+
 export interface PresetProps extends PropsWithChildren {
   /** Named preset to apply. Looked up from the preset registry. */
   preset?: string;
-  /** Tamagui theme name (e.g. "blue", "red"). Wraps children in <Theme />. */
+  /**
+   * Colour theme (e.g. "blue", "red"). Wraps children in <Theme /> and beats
+   * the preset's tint, through nested named presets too. `""` drops an
+   * inherited pick and returns to the preset's own colour.
+   */
   theme?: ThemeName;
   /** Partial knob overrides merged on top of the preset's knobs. */
   overrides?: Partial<Knobs>;
@@ -25,8 +39,9 @@ export function Preset({
   cascade = true,
 }: PresetProps) {
   const parentCtx = useContext(PresetContext);
+  const color = theme === undefined ? (cascade ? parentCtx?.color : undefined) : theme || undefined;
 
-  const ctxValue = useMemo((): PresetContextValue => {
+  const composed = useMemo((): PresetContextValue => {
     // 1. Determine base preset
     let base: PresetType;
 
@@ -87,11 +102,21 @@ export function Preset({
     return { preset: base, ...scope };
   }, [cascade, parentCtx, presetName, overrides]);
 
+  const ctxValue = useMemo((): PresetContextValue => {
+    if (color) return { ...composed, preset: applyColorTheme(composed.preset, color), color };
+    if (theme !== "") return composed;
+    // The cascaded preset already carries the parent's colour: take theme and
+    // tints back from the named (or the provider's) preset.
+    const own = getPreset(presetName ?? parentCtx?.presetName ?? "") ?? composed.preset;
+    return { ...composed, preset: { ...composed.preset, theme: own.theme, tints: own.tints } };
+  }, [composed, color, theme, presetName, parentCtx]);
+
   let element = <PresetContext.Provider value={ctxValue}>{children}</PresetContext.Provider>;
 
-  // Wrap with Tamagui <Theme /> when theme is specified
-  if (theme) {
-    element = <TamaguiTheme name={theme}>{element}</TamaguiTheme>;
+  // An explicit colour wraps in its Tamagui theme; `""` re-applies the preset's own.
+  const wrap = theme ? theme : theme === "" ? ctxValue.preset.theme : undefined;
+  if (wrap) {
+    element = <TamaguiTheme name={wrap}>{element}</TamaguiTheme>;
   }
 
   return element;

package/src/theme/PresetContext.ts

@@ -10,6 +10,11 @@ export interface PresetContextValue {
   presetName?: string;
   /** Id of the installed token scale; changes after a switch re-render every knob reader. */
   scaleId?: string;
+  /**
+   * The colour theme a user picked, when one was. It is the accent: it beats
+   * the preset's own `theme` and `tints`, and survives a nested named preset.
+   */
+  color?: ThemeName;
 }
 
 export const PresetContext = createContext<PresetContextValue | null>(null);

package/src/theme/boundaryFloor.spec.ts

@@ -33,6 +33,9 @@ describe("DF-06 / WCAG 1.4.11: control boundaries hold 3:1", () => {
       expect(theme.boundaryColor).toBeTruthy();
       const surfaces = [theme.background, theme.color3, theme.color5];
       const minimum = (ink: string) => Math.min(...surfaces.map((surface) => ratio(ink, surface)));
+      expect(minimum(theme.boundaryColor)).toBeGreaterThanOrEqual(minContrastRatio);
+      // FZ-7715's hue solids are built after getTheme: the floor is all they owe.
+      if (!inputThemes[name]) return;
       // Tint text is neutralized after getBaseTheme; selection uses the input ramp.
       const candidates = [8, 9, 10, 11, 12].map((step) => inputThemes[name][`color${step}`]);
       const firstHolding = candidates.find((ink) => minimum(ink) >= minContrastRatio);

package/src/theme/colorThemeAccent.spec.ts

@@ -0,0 +1,54 @@
+import { configWithoutAnimations } from "@tamagui/config";
+import { createTamagui } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { contrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
+import { createThemesBuilder, houseComponentThemes } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+
+const themes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes();
+const config = createTamagui({ ...configWithoutAnimations, themes });
+const hues = ["blue", "red", "green", "yellow", "orange", "pink", "purple", "gray"];
+const ratio = (a: string, b: string) =>
+  contrastRatio(relativeLuminance(normalizeToHex(a)!), relativeLuminance(normalizeToHex(b)!));
+
+describe("FZ-7715: a colour theme owns its accent", () => {
+  for (const scheme of ["light", "dark"]) {
+    for (const hue of hues) {
+      it(`${scheme} ${hue} uses its own ramp for accent tokens and selected controls`, () => {
+        const scope = themes[`${scheme}_${hue}`];
+        const ramp = Array.from({ length: 12 }, (_, i) => themes[scheme][`${hue}${i + 1}`]);
+        expect(ramp).toContain(scope.accentBackground);
+        expect(ramp).toContain(scope.accentColor);
+        expect(scope.accentBackground).not.toBe(themes[scheme].accentBackground);
+        expect(ratio(scope.accentBackground, scope.color1)).toBeGreaterThanOrEqual(3);
+        for (const surface of [scope.color1, scope.color2, scope.color3]) {
+          expect(ratio(scope.accentColor, surface)).toBeGreaterThanOrEqual(4.5);
+        }
+        const selected = config.themes[`${scheme}_${hue}_accent`] as unknown as Record<
+          string,
+          { val: string }
+        >;
+        expect(selected.color5.val).toBe(scope.color5);
+        expect(selected.background.val).toBe(scope.accentBackground);
+        expect(ratio(selected.background.val, selected.color.val)).toBeGreaterThanOrEqual(4.5);
+        expect(ratio(selected.background.val, selected.outlineColor.val)).toBeGreaterThanOrEqual(3);
+        for (const ink of ["color11", "color12", "textMuted", "accentBackground"]) {
+          expect(ratio(selected.background.val, selected[ink].val)).toBeGreaterThanOrEqual(4.5);
+        }
+        for (const component of Object.keys(houseComponentThemes)) {
+          const child = config.themes[`${scheme}_${hue}_${component}`] as unknown as Record<
+            string,
+            { val: string }
+          >;
+          expect(child.accentBackground.val).toBe(scope.accentBackground);
+        }
+      });
+    }
+  }
+});

package/src/theme/createDefaultThemeConfig.spec.ts

@@ -411,10 +411,12 @@ describe("the v5 theme matrix", () => {
     expect(Object.keys(custom).some((name) => /_[A-Z]/.test(name))).toBe(false);
   });
 
-  it("ships 462 themes and the heading-scope category fonts in under 260 KB of CSS (the v4 matrix and stock spread shipped 913 KB)", async () => {
+  // FZ-7715 added one accent solid per hue and scheme (16 themes) so
+  // `theme="accent"` follows a picked colour; the budget moved 260 -> 280 KB.
+  it("ships 478 themes and the heading-scope category fonts in under 280 KB of CSS (the v4 matrix and stock spread shipped 913 KB)", async () => {
     const { createTamagui: build } = await vi.importActual<typeof import("tamagui")>("tamagui");
     const css = build(config.tamagui).getCSS();
-    expect(Object.keys(themes)).toHaveLength(462);
-    expect(Buffer.byteLength(css, "utf8")).toBeLessThan(260_000);
+    expect(Object.keys(themes)).toHaveLength(478);
+    expect(Buffer.byteLength(css, "utf8")).toBeLessThan(280_000);
   });
 });

package/src/theme/createThemes.ts

@@ -4,8 +4,10 @@ import { defaultChildrenThemes, v5Templates } from "@tamagui/themes/v5";
 import {
   aaTextContrastRatio,
   contrastRatio,
+  holdInkFloor,
   minContrastRatio,
   normalizeToHex,
+  pickReadableForeground,
   relativeLuminance,
 } from "./colorRules";
 
@@ -329,33 +331,45 @@ function holdSwitchTrack(
   for (const scheme of ["light", "dark"] as const) {
     const base = themes[scheme];
     if (!base) continue;
-    const thumb = luminanceOf(base.switchThumb ?? "#ffffff");
-    const on = luminanceOf(base.accentBackground);
-    const surfaces = [base.background, base.color3].map(luminanceOf);
-    if (thumb === null || on === null || surfaces.some((lum) => lum === null)) continue;
-    const holds = (step: number, onPage: boolean) => {
-      const lum = luminanceOf(base[`gray${step}`]);
-      return (
-        lum !== null &&
-        contrastRatio(lum, thumb) >= minContrastRatio &&
-        contrastRatio(lum, on) >= switchStateContrastRatio &&
-        (!onPage || surfaces.every((surface) => contrastRatio(lum, surface!) >= minContrastRatio))
-      );
-    };
-    const off =
-      switchOffSteps.find((step) => holds(step, true)) ??
-      switchOffSteps.find((step) => holds(step, false));
-    if (off === undefined) continue;
-    const paint = {
-      switchTrackOff: base[`gray${off}`],
-      switchTrackOffHover: base[`gray${off - 1}`],
-      switchTrackOffPress: base[`gray${off + 1}`],
-    };
-    out[scheme] = { ...base, ...paint };
+    const paint = switchTrackPaint(base, base.accentBackground, [base.background, base.color3]);
+    if (paint) out[scheme] = { ...base, ...paint };
   }
   return out;
 }
 
+/**
+ * The off track for one on-fill: the first grey step in `steps` that holds
+ * under the thumb and apart from `onFill`, on the page too when one can.
+ * Hover is one step toward the page and press one away, clamped to the ramp.
+ */
+function switchTrackPaint(
+  base: Record<string, string>,
+  onFill: string | undefined,
+  pageSurfaces: (string | undefined)[],
+  steps: readonly number[] = switchOffSteps,
+): Record<string, string> | undefined {
+  const thumb = luminanceOf(base.switchThumb ?? "#ffffff");
+  const on = luminanceOf(onFill);
+  const surfaces = pageSurfaces.map(luminanceOf);
+  if (thumb === null || on === null || surfaces.some((lum) => lum === null)) return undefined;
+  const holds = (step: number, onPage: boolean) => {
+    const lum = luminanceOf(base[`gray${step}`]);
+    return (
+      lum !== null &&
+      contrastRatio(lum, thumb) >= minContrastRatio &&
+      contrastRatio(lum, on) >= switchStateContrastRatio &&
+      (!onPage || surfaces.every((surface) => contrastRatio(lum, surface!) >= minContrastRatio))
+    );
+  };
+  const off = steps.find((step) => holds(step, true)) ?? steps.find((step) => holds(step, false));
+  if (off === undefined) return undefined;
+  return {
+    switchTrackOff: base[`gray${off}`],
+    switchTrackOffHover: base[`gray${off - 1}`],
+    switchTrackOffPress: base[`gray${Math.min(off + 1, 12)}`],
+  };
+}
+
 /** The hues the code syntax palette paints (MPO-468). */
 const syntaxInkHues = ["purple", "green", "blue", "orange", "red"] as const;
 
@@ -441,6 +455,107 @@ function holdNamedInkFloor(
   return out;
 }
 
+/**
+ * FZ-7715. A colour theme is the accent. The house accent is the neutral
+ * inverse, and the hue sub-themes (light_green, dark_pink, ...) inherited it,
+ * so `theme="accent"` and `$accentBackground` stayed black under any colour a
+ * user or a preset picked. Each hue scope gets an accent fill from its own
+ * ramp, held to 3:1 on its page with a 4.5:1 label, accent ink held to 4.5:1
+ * on color1..color3, and a `<scheme>_<hue>_accent` solid that Tamagui resolves
+ * for `theme="accent"` (and every component under it) inside the hue.
+ */
+function holdColorThemeAccent(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const scheme of ["light", "dark"] as const) {
+    const base = themes[scheme];
+    if (!base) continue;
+    for (const hue of childrenHues) {
+      const scopeName = `${scheme}_${hue}`;
+      const scope = themes[scopeName];
+      const ramp = Array.from({ length: 12 }, (_, index) => base[`${hue}${index + 1}`]);
+      if (!scope || ramp.some((step) => !step)) continue;
+      const paper = luminanceOf(scope.color1);
+      const ink = luminanceOf(scope.color12);
+      const surfaces = [scope.color1, scope.color2, scope.color3].map(luminanceOf);
+      if (paper === null || ink === null || surfaces.some((lum) => lum === null)) continue;
+      const fill = nearestHoldingStep(
+        ramp[8],
+        ramp.slice(0, 11),
+        (lum) =>
+          Math.max(contrastRatio(lum, paper), contrastRatio(lum, ink)) >= aaTextContrastRatio &&
+          contrastRatio(lum, paper) >= minContrastRatio,
+      );
+      const accentInk = nearestHoldingStep(ramp[10], ramp, (lum) =>
+        surfaces.every((surface) => contrastRatio(lum, surface as number) >= aaTextContrastRatio),
+      );
+      const fillStep = ramp.indexOf(fill);
+      const fillHover = ramp[Math.min(fillStep + 1, ramp.length - 1)];
+      const onFill = holdInkFloor(fill, pickReadableForeground(fill, scope.color1, scope.color12));
+      const accent: Record<string, string> = { accentBackground: fill, accentColor: accentInk };
+      // A hue fill can sit on the root's off grey (light pink on gray10): walk
+      // outward from the root's step to the nearest one that holds again.
+      const rootOff = Number(
+        Object.keys(base)
+          .find((key) => /^gray\d+$/.test(key) && base[key] === base.switchTrackOff)
+          ?.slice(4),
+      );
+      const rootOn = luminanceOf(base.switchTrackOff);
+      const fillLum = luminanceOf(fill);
+      const rootHolds =
+        rootOn !== null &&
+        fillLum !== null &&
+        contrastRatio(rootOn, fillLum) >= switchStateContrastRatio;
+      const outward = Array.from({ length: 10 }, (_, index) => index + 3).sort(
+        (a, b) => Math.abs(a - rootOff) - Math.abs(b - rootOff) || b - a,
+      );
+      const track =
+        rootHolds || Number.isNaN(rootOff)
+          ? undefined
+          : switchTrackPaint(base, fill, [scope.background, scope.color3], outward);
+      for (const [name, theme] of Object.entries(themes)) {
+        if (name === scopeName) {
+          out[name] = { ...theme, ...accent, ...track };
+        } else if (name.startsWith(`${scopeName}_`)) {
+          const owned = Object.keys(accent).filter((key) => key in theme);
+          if (owned.length > 0) {
+            out[name] = { ...theme, ...Object.fromEntries(owned.map((key) => [key, accent[key]])) };
+          }
+        }
+      }
+      // Only what the solid changes: the rest resolves through the hue scope,
+      // which keeps the CSS sheet under its budget. Ink, focus ring and any
+      // nested accent mark take the fill's label so none vanishes into it.
+      out[`${scopeName}_accent`] = {
+        background: fill,
+        backgroundHover: fillHover,
+        backgroundPress: fillHover,
+        backgroundFocus: fillHover,
+        backgroundActive: fill,
+        borderColor: fill,
+        borderColorHover: fillHover,
+        borderColorFocus: fillHover,
+        borderColorPress: fillHover,
+        color: onFill,
+        colorHover: onFill,
+        colorPress: onFill,
+        colorFocus: onFill,
+        placeholderColor: onFill,
+        boundaryColor: onFill,
+        outlineColor: onFill,
+        color10: onFill,
+        color11: onFill,
+        color12: onFill,
+        textMuted: onFill,
+        accentBackground: onFill,
+        accentColor: onFill,
+      };
+    }
+  }
+  return out;
+}
+
 const defaultLightShadows: Shadows = {
   shadow1: "rgba(0,0,0,0.04)",
   shadow2: "rgba(0,0,0,0.08)",
@@ -539,10 +654,12 @@ export function createThemesBuilder(
   const initialTheme = tamaguiCreateThemes(
     createThemesProps as Parameters<typeof tamaguiCreateThemes>[0],
   );
-  const themes = holdSwitchTrack(
-    holdSyntaxFloor(
-      holdNamedInkFloor(
-        holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
+  const themes = holdColorThemeAccent(
+    holdSwitchTrack(
+      holdSyntaxFloor(
+        holdNamedInkFloor(
+          holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
+        ),
       ),
     ),
   );

package/src/theme/index.ts

@@ -58,3 +58,5 @@ export {
   type MotionStop,
 } from "./animations/css";
 export { animationConfig as nativeAnimationConfig } from "./animations/reactNative";
+
+export * from "./IconSlot";

package/src/theme/preset.spec.tsx

@@ -10,7 +10,7 @@ vi.mock("tamagui", () => ({
 
 import type { ThemeName } from "@tamagui/web";
 import { Preset } from "./Preset";
-import { type PresetContextValue, usePresetContext } from "./PresetContext";
+import { PresetContext, type PresetContextValue, usePresetContext } from "./PresetContext";
 import { defaultKnobs } from "./knobs";
 import type { Preset as PresetType } from "./preset.types";
 import { clearPresets, registerPreset } from "./shared";
@@ -177,6 +177,62 @@ describe("Preset component", () => {
     expect(html).toContain('data-tamagui-theme="blue"');
   });
 
+  it("uses an explicit colour for the preset metadata and every decorative tint", () => {
+    registerPreset("bold", boldPreset);
+    const capture = createPresetContextCapture();
+    renderToString(
+      <Preset preset="bold" theme={"green" as ThemeName}>
+        <capture.Capture />
+      </Preset>,
+    );
+    expect(capture.result?.preset.theme).toBe("green");
+    expect(capture.result?.preset.tints).toEqual(["green"]);
+    expect(capture.result?.preset.knobs).toEqual(boldPreset.knobs);
+  });
+
+  it("keeps the explicit colour through a nested named preset", () => {
+    registerPreset("bold", boldPreset);
+    const capture = createPresetContextCapture();
+    renderToString(
+      <Preset theme={"green" as ThemeName}>
+        <Preset preset="bold">
+          <capture.Capture />
+        </Preset>
+      </Preset>,
+    );
+    expect(capture.result?.preset.theme).toBe("green");
+  });
+
+  it("returns to the preset tint when the colour is reset to default", () => {
+    registerPreset("bold", boldPreset);
+    const capture = createPresetContextCapture();
+    const html = renderToString(
+      <Preset theme={"green" as ThemeName}>
+        <Preset preset="bold" theme={"" as ThemeName}>
+          <capture.Capture />
+        </Preset>
+      </Preset>,
+    );
+    expect(capture.result?.preset.theme).toBe("blue");
+    expect(capture.result?.preset.tints).toEqual(boldPreset.tints);
+    expect(html).toContain('data-tamagui-theme="blue"');
+  });
+
+  it("drops an inherited colour on an unnamed reset", () => {
+    registerPreset("bold", boldPreset);
+    const capture = createPresetContextCapture();
+    renderToString(
+      <PresetContext.Provider value={{ preset: boldPreset, presetName: "bold" }}>
+        <Preset theme={"green" as ThemeName}>
+          <Preset theme={"" as ThemeName}>
+            <capture.Capture />
+          </Preset>
+        </Preset>
+      </PresetContext.Provider>,
+    );
+    expect(capture.result?.preset.tints).toEqual(boldPreset.tints);
+  });
+
   it("does not wrap with Tamagui <Theme /> when theme prop is absent", () => {
     const capture = createPresetContextCapture();
 

package/src/theme/subsetThemes.spec.ts

@@ -79,7 +79,7 @@ describe("subsetThemes over the house matrix", () => {
       components: ["Button"],
       tints: ["accent", "active", "alt1", "alt2", "error", "success", "warning"],
     });
-    expect(Object.keys(built)).toHaveLength(462);
+    expect(Object.keys(built)).toHaveLength(478);
     expect(Object.keys(kept)).toHaveLength(44);
     for (const name of ["light", "dark", "light_accent", "light_Button", "dark_error_Button"]) {
       expect(kept).toHaveProperty(name);

package/src/theme/switchThumb.spec.ts

@@ -46,11 +46,13 @@ describe("switch thumb", () => {
       const theme = config.themes[name] as Record<string, { val: string }>;
       const scheme = name.split("_")[0] as "light" | "dark";
       const off = theme.switchTrackOff.val;
-      expect(off).toBe(theme[scheme === "light" ? "gray10" : "gray7"].val);
-      expect(theme.switchTrackOffHover.val).toBe(theme[scheme === "light" ? "gray9" : "gray6"].val);
-      expect(theme.switchTrackOffPress.val).toBe(
-        theme[scheme === "light" ? "gray11" : "gray8"].val,
-      );
+      // FZ-7715: a hue scope's own fill can move its off track off the root's step.
+      const step = Array.from({ length: 10 }, (_, i) => i + 3).find(
+        (n) => theme[`gray${n}`].val === off,
+      )!;
+      if (name === scheme) expect(step).toBe(scheme === "light" ? 10 : 7);
+      expect(theme.switchTrackOffHover.val).toBe(theme[`gray${step - 1}`].val);
+      expect(theme.switchTrackOffPress.val).toBe(theme[`gray${Math.min(step + 1, 12)}`].val);
       expect(ratio(off, theme.switchThumb.val)).toBeGreaterThanOrEqual(minContrastRatio);
       expect(ratio(off, theme.accentBackground.val)).toBeGreaterThanOrEqual(1.5);
       if (scheme === "light") {

package/types/theme/IconSlot.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType, type ReactNode } from "react";
+export type IconSlotValue = ReactNode | ComponentType<{
+    size?: number;
+    color?: string;
+}>;
+export declare function IconSlot({ icon, color, size, }: {
+    icon: IconSlotValue;
+    color?: string;
+    size?: number;
+}): ReactNode;
+//# sourceMappingURL=IconSlot.d.ts.map

package/types/theme/IconSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSlot.d.ts","sourceRoot":"","sources":["../../src/theme/IconSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEzF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,IAAI,GACL,EAAE;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,aA4BA"}

package/types/theme/Preset.d.ts

@@ -1,10 +1,21 @@
 import { type PropsWithChildren } from "react";
 import type { ThemeName } from "@tamagui/web";
 import { type Knobs } from "./knobs";
+import type { Preset as PresetType } from "./preset.types";
+/**
+ * FZ-7715. A preset owns shape, density, type and its default accent. A colour
+ * theme the user picks is the accent, so it replaces the preset's `theme` and
+ * every decorative tint; the preset's own colour shows only with no pick.
+ */
+export declare function applyColorTheme(preset: PresetType, color?: ThemeName | ""): PresetType;
 export interface PresetProps extends PropsWithChildren {
     /** Named preset to apply. Looked up from the preset registry. */
     preset?: string;
-    /** Tamagui theme name (e.g. "blue", "red"). Wraps children in <Theme />. */
+    /**
+     * Colour theme (e.g. "blue", "red"). Wraps children in <Theme /> and beats
+     * the preset's tint, through nested named presets too. `""` drops an
+     * inherited pick and returns to the preset's own colour.
+     */
     theme?: ThemeName;
     /** Partial knob overrides merged on top of the preset's knobs. */
     overrides?: Partial<Knobs>;

package/types/theme/Preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Preset.d.ts","sourceRoot":"","sources":["../../src/theme/Preset.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAgB,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAInD,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,SAAS,EACT,OAAc,GACf,EAAE,WAAW,2CAwEb"}
+{"version":3,"file":"Preset.d.ts","sourceRoot":"","sources":["../../src/theme/Preset.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAgB,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG3D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,SAAS,GAAG,EAAE,GAAG,UAAU,CAGtF;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,SAAS,EACT,OAAc,GACf,EAAE,WAAW,2CAmFb"}

package/types/theme/PresetContext.d.ts

@@ -8,6 +8,11 @@ export interface PresetContextValue {
     presetName?: string;
     /** Id of the installed token scale; changes after a switch re-render every knob reader. */
     scaleId?: string;
+    /**
+     * The colour theme a user picked, when one was. It is the accent: it beats
+     * the preset's own `theme` and `tints`, and survives a nested named preset.
+     */
+    color?: ThemeName;
 }
 export declare const PresetContext: import("react").Context<PresetContextValue | null>;
 /**

package/types/theme/PresetContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PresetContext.d.ts","sourceRoot":"","sources":["../../src/theme/PresetContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,SAAS,EAAE,CAG5C"}
+{"version":3,"file":"PresetContext.d.ts","sourceRoot":"","sources":["../../src/theme/PresetContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,SAAS,EAAE,CAG5C"}

package/types/theme/createThemes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThemes.d.ts","sourceRoot":"","sources":["../../src/theme/createThemes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAsC7E,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAevB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;;;;CAI3B,CAAC;AAEX,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB,CACrC,WAAW,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACvC,YAAY,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE;IAExC,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,0BAA0B,CACzC,WAAW,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACvC,YAAY,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACxC,WAAW,SAAS,OAAO,GAAG,OAAO,EACrC,YAAY,SAAS,OAAO,GAAG,OAAO,CACtC,SAAQ,sBAAsB,CAAC,WAAW,EAAE,YAAY,CAAC;IACzD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAC/E,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACzF;AA8BD,eAAO,MAAM,YAAY,aA6BvB,CAAC;AAsTH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,0BAA0B,EACrC,WAAW,EAAE,sBAAsB,EACnC,OAAO,CAAC,EAAE,0BAA0B;;aA6EzB,CAAC,SAAS,MAAM,QAAQ,CAAC,SAAS,sBAAsB,GAuB1D,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE;;+BAAkC;EAG7E"}
+{"version":3,"file":"createThemes.d.ts","sourceRoot":"","sources":["../../src/theme/createThemes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAwC7E,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAevB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;;;;CAI3B,CAAC;AAEX,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB,CACrC,WAAW,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACvC,YAAY,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE;IAExC,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,0BAA0B,CACzC,WAAW,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACvC,YAAY,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EACxC,WAAW,SAAS,OAAO,GAAG,OAAO,EACrC,YAAY,SAAS,OAAO,GAAG,OAAO,CACtC,SAAQ,sBAAsB,CAAC,WAAW,EAAE,YAAY,CAAC;IACzD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAC/E,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACzF;AA8BD,eAAO,MAAM,YAAY,aA6BvB,CAAC;AAuaH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,0BAA0B,EACrC,WAAW,EAAE,sBAAsB,EACnC,OAAO,CAAC,EAAE,0BAA0B;;aA+EzB,CAAC,SAAS,MAAM,QAAQ,CAAC,SAAS,sBAAsB,GAuB1D,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE;;+BAAkC;EAG7E"}

package/types/theme/index.d.ts

@@ -51,4 +51,5 @@ export * from "./overlaySurfaces";
 export * from "./motion";
 export { animationConfig as cssAnimationConfig, animationDurations, motionStops, type MotionStop, } from "./animations/css";
 export { animationConfig as nativeAnimationConfig } from "./animations/reactNative";
+export * from "./IconSlot";
 //# sourceMappingURL=index.d.ts.map

package/types/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}