@newtonedev/components 0.1.11 → 0.1.13

package/dist/index.js

@@ -1,825 +1,505 @@
-import React14, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef } from 'react';
-import { srgbToHex, getColor, DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE } from 'newtone';
-import { SEMANTIC_WEIGHT_MAP, ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, resolveResponsiveSize, estimateLineWidths, REFERENCE_LINE_HEIGHT_RATIO, buildFontFeatureSettings, getBreakpointForWidth, fontConfigToFamily, DEFAULT_ROLE_SCALES, DEFAULT_LINE_HEIGHTS, DEFAULT_FONT_SIZES, DEFAULT_FONT_SLOTS, buildGoogleFontsUrl } from '@newtonedev/fonts';
-export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, buildGoogleFontsUrl } from '@newtonedev/fonts';
-import { Text, View, useWindowDimensions, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
+import { useTokens, useNewtoneTheme, useBreakpoint, useTypographyCalibrations, useLocalCalibration, enqueueObservation, useFrameContext, computeTokens, FrameContext } from 'newtone-api';
+export { ACCENT_DEFAULTS, DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, DEFAULT_THEME_CONFIG, ERROR_DEFAULTS, FrameContext, NEUTRAL_DEFAULTS, NewtoneProvider, SUCCESS_DEFAULTS, WARNING_DEFAULTS, buildGoogleFontsUrl, computeTokens, enqueueObservation, isV2TokenOverrides, measureAvgCharWidth, migrateV1ToV2, useBreakpoint, useFrameContext, useLocalCalibration, useNewtoneTheme, useTokens, useTypographyCalibrations } from 'newtone-api';
+import React13, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef } from 'react';
+import { Text, View, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
+import { SEMANTIC_WEIGHT_MAP, ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, resolveResponsiveSize, estimateLineWidths, REFERENCE_LINE_HEIGHT_RATIO, buildFontFeatureSettings } from '@newtonedev/fonts';
+import { srgbToHex, gamutMapToSrgb } from 'newtone';
 
-// src/theme/NewtoneProvider.tsx
-var DEFAULT_THEME_CONFIG = {
-  colorSystem: {
-    dynamicRange: {
-      lightest: 1,
-      darkest: 1
-    },
-    palettes: [
-      { hue: DEFAULT_NEUTRAL_HUE, saturation: DEFAULT_NEUTRAL_SATURATION },
-      { hue: DEFAULT_ACCENT_HUE, saturation: DEFAULT_ACCENT_SATURATION },
-      { hue: DEFAULT_SUCCESS_HUE, saturation: DEFAULT_SUCCESS_SATURATION },
-      { hue: DEFAULT_WARNING_HUE, saturation: DEFAULT_WARNING_SATURATION },
-      { hue: DEFAULT_ERROR_HUE, saturation: DEFAULT_ERROR_SATURATION }
-    ]
-  },
-  spacing: {
-    "00": 0,
-    // base * 0
-    "02": 2,
-    // base * 0.25
-    "04": 4,
-    // base * 0.5
-    "06": 6,
-    // base * 0.75
-    "08": 8,
-    // base * 1 (Medium preset, 8px base)
-    "10": 10,
-    // base * 1.25
-    "12": 12,
-    // base * 1.5
-    "16": 16,
-    // base * 2
-    "20": 20,
-    // base * 2.5
-    "24": 24,
-    // base * 3
-    "32": 32,
-    // base * 4
-    "40": 40,
-    // base * 5
-    "48": 48
-    // base * 6
-  },
-  radius: {
-    none: 0,
-    sm: 4,
-    md: 6,
-    lg: 8,
-    xl: 12,
-    pill: 999
-  },
-  typography: {
-    fonts: DEFAULT_FONT_SLOTS,
-    fontSizes: DEFAULT_FONT_SIZES,
-    lineHeights: DEFAULT_LINE_HEIGHTS,
-    roles: DEFAULT_ROLE_SCALES
-  },
-  icons: {
-    variant: "rounded",
-    // Material Design 3 aesthetic
-    weight: 400,
-    // Normal weight
-    autoGrade: true
-    // Enable mode-aware grade
-  }
-};
-
-// src/fonts/GoogleFontLoader.tsx
-function GoogleFontLoader({ fonts }) {
-  const linkRef = useRef(null);
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const url = buildGoogleFontsUrl(fonts);
-    if (linkRef.current) {
-      linkRef.current.remove();
-      linkRef.current = null;
-    }
-    if (!url) return;
-    const links = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'));
-    if (links.some((el) => el.href === url)) return;
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = url;
-    document.head.appendChild(link);
-    linkRef.current = link;
-    return () => {
-      if (linkRef.current) {
-        linkRef.current.remove();
-        linkRef.current = null;
-      }
-    };
-  }, [
-    fonts.main.config.family,
-    fonts.main.config.type,
-    fonts.main.weights.regular,
-    fonts.main.weights.medium,
-    fonts.main.weights.bold,
-    fonts.display.config.family,
-    fonts.display.config.type,
-    fonts.display.weights.regular,
-    fonts.display.weights.medium,
-    fonts.display.weights.bold,
-    fonts.mono.config.family,
-    fonts.mono.config.type,
-    fonts.mono.weights.regular,
-    fonts.mono.weights.medium,
-    fonts.mono.weights.bold,
-    fonts.currency.config.family,
-    fonts.currency.config.type,
-    fonts.currency.weights.regular,
-    fonts.currency.weights.medium,
-    fonts.currency.weights.bold
+// src/index.ts
+var hadKeyboardEvent = false;
+var isListenerSetup = false;
+function setupModality() {
+  if (isListenerSetup || typeof document === "undefined") return;
+  isListenerSetup = true;
+  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+    "Tab",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Enter",
+    " ",
+    "Escape"
   ]);
-  return null;
-}
-function SelfHostedFontLoader({ fontFaceCss }) {
-  const styleRef = useRef(null);
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    if (styleRef.current) {
-      styleRef.current.remove();
-      styleRef.current = null;
+  document.addEventListener("keydown", (e) => {
+    if (NAVIGATION_KEYS.has(e.key)) {
+      hadKeyboardEvent = true;
     }
-    if (!fontFaceCss) return;
-    const style = document.createElement("style");
-    style.setAttribute("data-newtone-fonts", "self-hosted");
-    style.textContent = fontFaceCss;
-    document.head.appendChild(style);
-    styleRef.current = style;
-    return () => {
-      if (styleRef.current) {
-        styleRef.current.remove();
-        styleRef.current = null;
-      }
-    };
-  }, [fontFaceCss]);
-  return null;
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+  document.addEventListener("mousedown", () => {
+    hadKeyboardEvent = false;
+  }, true);
 }
-function IconFontLoader({ icons }) {
-  const linkRef = useRef(null);
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
   useEffect(() => {
-    if (typeof document === "undefined") return;
-    const variantName = icons.variant.charAt(0).toUpperCase() + icons.variant.slice(1);
-    const family = `Material+Symbols+${variantName}`;
-    const url = `https://fonts.googleapis.com/css2?family=${family}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block`;
-    if (linkRef.current) {
-      linkRef.current.remove();
-      linkRef.current = null;
+    setupModality();
+  }, []);
+  const onFocus = useCallback(() => {
+    if (hadKeyboardEvent) {
+      setIsFocusVisible(true);
     }
-    const links = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'));
-    if (links.some((el) => el.href === url)) return;
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = url;
-    document.head.appendChild(link);
-    linkRef.current = link;
-    return () => {
-      if (linkRef.current) {
-        linkRef.current.remove();
-        linkRef.current = null;
-      }
-    };
-  }, [icons.variant]);
-  return null;
+  }, []);
+  const onBlur = useCallback(() => {
+    setIsFocusVisible(false);
+  }, []);
+  const focusProps = { onFocus, onBlur };
+  return { isFocusVisible, focusProps };
 }
 
-// src/theme/NewtoneProvider.tsx
-var ThemeContext = createContext(null);
-function NewtoneProvider({
-  config = DEFAULT_THEME_CONFIG,
-  initialMode = "light",
-  children,
-  reportingEndpoint,
-  fontFaceCss
-}) {
-  const [mode, setMode] = useState(initialMode);
-  const value = useMemo(
-    () => ({
-      config,
-      mode,
-      setMode,
-      reportingEndpoint
-    }),
-    [config, mode, reportingEndpoint]
-  );
-  return /* @__PURE__ */ React14.createElement(ThemeContext.Provider, { value }, fontFaceCss ? /* @__PURE__ */ React14.createElement(SelfHostedFontLoader, { fontFaceCss }) : /* @__PURE__ */ React14.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React14.createElement(IconFontLoader, { icons: config.icons }), children);
+// src/primitives/Frame/Frame.utils.ts
+function resolveSpacing(value, tokens) {
+  if (typeof value === "number") return value;
+  return tokens.spacing[value];
 }
-function useNewtoneTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useNewtoneTheme must be used within NewtoneProvider");
-  }
-  return context;
-}
-var FrameContext = createContext(null);
-function useFrameContext() {
-  return useContext(FrameContext);
-}
-var NEUTRAL_DEFAULTS = {
-  light: {
-    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
-    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  },
-  dark: {
-    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
-    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  }
-};
-var ACCENT_DEFAULTS = {
-  light: {
-    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
-    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  },
-  dark: {
-    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
-    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  }
-};
-var SUCCESS_DEFAULTS = {
-  light: {
-    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
-    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  },
-  dark: {
-    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
-    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  }
-};
-var WARNING_DEFAULTS = {
-  light: {
-    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
-    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  },
-  dark: {
-    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
-    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+function resolvePadding(prop, tokens) {
+  if (typeof prop === "string" || typeof prop === "number") {
+    const px = resolveSpacing(prop, tokens);
+    return { top: px, right: px, bottom: px, left: px };
   }
-};
-var ERROR_DEFAULTS = {
-  light: {
-    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
-    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
-  },
-  dark: {
-    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
-    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
-    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
-    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  if ("x" in prop || "y" in prop) {
+    const axes = prop;
+    const x = axes.x !== void 0 ? resolveSpacing(axes.x, tokens) : 0;
+    const y = axes.y !== void 0 ? resolveSpacing(axes.y, tokens) : 0;
+    return { top: y, right: x, bottom: y, left: x };
   }
-};
-var clamp = (n) => Math.max(0, Math.min(1, n));
-function computePaletteTokens(palette, defaults, mode, elevation, dynamicRange, elevationDelta, effectiveTextMode, autoAccentNv, neutralTextPrimary, neutralBgElevated) {
-  const modeDefaults = defaults[mode];
-  const toEngineNv = (nv) => mode === "light" ? 1 - nv : nv;
-  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
-  const colorAt = (engineNv) => getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(engineNv),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const resolveKeyNv = (p) => mode === "dark" ? p.keyNormalizedValueDark : p.keyNormalizedValue;
-  const keyNv = resolveKeyNv(palette);
-  const fillBaseNv = keyNv ?? autoAccentNv;
-  const fillNv = clamp(fillBaseNv + elevationDelta);
-  const fill = colorAt(fillNv);
-  const hoverDir = effectiveTextMode === "light" ? -modeDefaults.action.hovered : modeDefaults.action.hovered;
-  const activeDir = effectiveTextMode === "light" ? -modeDefaults.action.pressed : modeDefaults.action.pressed;
-  const fillHover = colorAt(clamp(fillNv + hoverDir));
-  const fillActive = colorAt(clamp(fillNv + activeDir));
-  const onFill = fill.oklch.L > 0.6 ? neutralTextPrimary : neutralBgElevated;
-  const bgNormalized = elevation === 2 ? modeDefaults.background.elevated : elevation === 1 ? modeDefaults.background.ground : modeDefaults.background.sunken;
-  const bgNv = clamp(toEngineNv(bgNormalized));
-  const background = colorAt(bgNv);
-  const backgroundElevated = colorAt(clamp(toEngineNv(modeDefaults.background.elevated)));
-  const backgroundSunken = colorAt(clamp(toEngineNv(modeDefaults.background.sunken)));
-  const interactiveOffset = modeDefaults.action.enabled;
-  const interactiveNv = clamp(bgNv + (effectiveTextMode === "light" ? -interactiveOffset : interactiveOffset));
-  const backgroundInteractive = colorAt(interactiveNv);
-  const hoverShift = modeDefaults.action.hovered;
-  const activeShift = modeDefaults.action.pressed;
-  const backgroundInteractiveHover = colorAt(clamp(interactiveNv + (effectiveTextMode === "light" ? -hoverShift : hoverShift)));
-  const backgroundInteractiveActive = colorAt(clamp(interactiveNv + (effectiveTextMode === "light" ? -activeShift : activeShift)));
-  const textPrimary = colorAt(clamp(textToEngineNv(modeDefaults.text.primary) + elevationDelta));
-  const textSecondary = colorAt(clamp(textToEngineNv(modeDefaults.text.secondary) + elevationDelta));
-  const textTertiary = colorAt(clamp(textToEngineNv(modeDefaults.text.tertiary) + elevationDelta));
-  const textDisabled = colorAt(clamp(textToEngineNv(modeDefaults.text.disabled) + elevationDelta));
-  const borderOffset = modeDefaults.border.enabled;
-  const borderNv = effectiveTextMode === "light" ? bgNv - borderOffset : bgNv + borderOffset;
-  const border = colorAt(clamp(borderNv));
+  const sides = prop;
   return {
-    fill,
-    fillHover,
-    fillActive,
-    onFill,
-    background,
-    backgroundElevated,
-    backgroundSunken,
-    backgroundInteractive,
-    backgroundInteractiveHover,
-    backgroundInteractiveActive,
-    textPrimary,
-    textSecondary,
-    textTertiary,
-    textDisabled,
-    border
+    top: sides.top !== void 0 ? resolveSpacing(sides.top, tokens) : 0,
+    right: sides.right !== void 0 ? resolveSpacing(sides.right, tokens) : 0,
+    bottom: sides.bottom !== void 0 ? resolveSpacing(sides.bottom, tokens) : 0,
+    left: sides.left !== void 0 ? resolveSpacing(sides.left, tokens) : 0
   };
 }
-function computeTokens(config, mode, elevation, spacing, radius, typography, icons, tokenOverrides) {
-  const { dynamicRange, palettes } = config;
-  const palette = palettes[0];
-  if (!palette) {
-    throw new Error("Neutral palette (index 0) not found");
-  }
-  const neutralDefaults = NEUTRAL_DEFAULTS[mode];
-  const toEngineNv = (nv) => mode === "light" ? 1 - nv : nv;
-  const bgElevatedNorm = mode === "light" ? tokenOverrides?.backgroundElevated : tokenOverrides?.backgroundElevatedDark;
-  const bgDefaultNorm = mode === "light" ? tokenOverrides?.backgroundDefault : tokenOverrides?.backgroundDefaultDark;
-  const bgSunkenNorm = mode === "light" ? tokenOverrides?.backgroundSunken : tokenOverrides?.backgroundSunkenDark;
-  const textPrimaryNorm = mode === "light" ? tokenOverrides?.textPrimaryNormalized : tokenOverrides?.textPrimaryNormalizedDark;
-  const textSecondaryNorm = mode === "light" ? tokenOverrides?.textSecondaryNormalized : tokenOverrides?.textSecondaryNormalizedDark;
-  const textTertiaryNorm = mode === "light" ? tokenOverrides?.textTertiaryNormalized : tokenOverrides?.textTertiaryNormalizedDark;
-  const textDisabledNorm = mode === "light" ? tokenOverrides?.textDisabledNormalized : tokenOverrides?.textDisabledNormalizedDark;
-  const bgNormalized = elevation === 2 ? bgElevatedNorm ?? neutralDefaults.background.elevated : elevation === 1 ? bgDefaultNorm ?? neutralDefaults.background.ground : bgSunkenNorm ?? neutralDefaults.background.sunken;
-  const backgroundNv = clamp(toEngineNv(bgNormalized));
-  const elevatedNv = clamp(toEngineNv(bgElevatedNorm ?? neutralDefaults.background.elevated));
-  const sunkenNv = clamp(toEngineNv(bgSunkenNorm ?? neutralDefaults.background.sunken));
-  const elevationDelta = backgroundNv - elevatedNv;
-  const effectiveTextMode = backgroundNv >= 0.5 ? "light" : "dark";
-  const background = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    backgroundNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const backgroundElevated = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    elevatedNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const backgroundSunken = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    sunkenNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const INTERACTIVE_COMPONENT_OFFSET = mode === "light" ? tokenOverrides?.interactiveComponentOffset ?? neutralDefaults.action.enabled : tokenOverrides?.interactiveComponentOffsetDark ?? neutralDefaults.action.enabled;
-  const HOVER_SHIFT = mode === "light" ? tokenOverrides?.hoverShift ?? neutralDefaults.action.hovered : tokenOverrides?.hoverShiftDark ?? neutralDefaults.action.hovered;
-  const ACTIVE_SHIFT = mode === "light" ? tokenOverrides?.activeShift ?? neutralDefaults.action.pressed : tokenOverrides?.activeShiftDark ?? neutralDefaults.action.pressed;
-  const BORDER_OFFSET = mode === "light" ? tokenOverrides?.borderOffset ?? neutralDefaults.border.enabled : tokenOverrides?.borderOffsetDark ?? neutralDefaults.border.enabled;
-  const interactiveComponentNv = clamp(backgroundNv + (effectiveTextMode === "light" ? -INTERACTIVE_COMPONENT_OFFSET : INTERACTIVE_COMPONENT_OFFSET));
-  const backgroundInteractive = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    interactiveComponentNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const neutralHoverNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -HOVER_SHIFT : HOVER_SHIFT));
-  const backgroundInteractiveHover = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    neutralHoverNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const neutralActiveNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -ACTIVE_SHIFT : ACTIVE_SHIFT));
-  const backgroundInteractiveActive = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    neutralActiveNv,
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
-  const textPrimary = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary) + elevationDelta),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const textSecondary = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(textToEngineNv(textSecondaryNorm ?? neutralDefaults.text.secondary) + elevationDelta),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const textTertiary = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(textToEngineNv(textTertiaryNorm ?? neutralDefaults.text.tertiary) + elevationDelta),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const textDisabled = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(textToEngineNv(textDisabledNorm ?? neutralDefaults.text.disabled) + elevationDelta),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const borderNv = effectiveTextMode === "light" ? backgroundNv - BORDER_OFFSET : backgroundNv + BORDER_OFFSET;
-  const border = getColor(
-    palette.hue,
-    palette.saturation,
-    dynamicRange,
-    clamp(borderNv),
-    palette.desaturation,
-    palette.paletteHueGrading
-  );
-  const autoAccentNv = clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary));
-  const accentPalette = palettes[1];
-  if (!accentPalette) {
-    throw new Error("Accent palette (index 1) not found");
+function resolveGap(prop, tokens) {
+  if (typeof prop === "string" || typeof prop === "number") {
+    const px = resolveSpacing(prop, tokens);
+    return { rowGap: px, columnGap: px };
   }
-  const accent = computePaletteTokens(
-    accentPalette,
-    ACCENT_DEFAULTS,
-    mode,
-    elevation,
-    dynamicRange,
-    elevationDelta,
-    effectiveTextMode,
-    autoAccentNv,
-    textPrimary,
-    backgroundElevated
-  );
-  const successPalette = palettes[2];
-  const warningPalette = palettes[3];
-  const errorPalette = palettes[4];
-  const success = successPalette ? computePaletteTokens(
-    successPalette,
-    SUCCESS_DEFAULTS,
-    mode,
-    elevation,
-    dynamicRange,
-    elevationDelta,
-    effectiveTextMode,
-    autoAccentNv,
-    textPrimary,
-    backgroundElevated
-  ) : accent;
-  const warning = warningPalette ? computePaletteTokens(
-    warningPalette,
-    WARNING_DEFAULTS,
-    mode,
-    elevation,
-    dynamicRange,
-    elevationDelta,
-    effectiveTextMode,
-    autoAccentNv,
-    textPrimary,
-    backgroundElevated
-  ) : accent;
-  const error = errorPalette ? computePaletteTokens(
-    errorPalette,
-    ERROR_DEFAULTS,
-    mode,
-    elevation,
-    dynamicRange,
-    elevationDelta,
-    effectiveTextMode,
-    autoAccentNv,
-    textPrimary,
-    backgroundElevated
-  ) : accent;
   return {
-    background,
-    backgroundElevated,
-    backgroundSunken,
-    backgroundInteractive,
-    backgroundInteractiveHover,
-    backgroundInteractiveActive,
-    textPrimary,
-    textSecondary,
-    textTertiary,
-    textDisabled,
-    border,
-    accent,
-    success,
-    warning,
-    error,
-    spacing,
-    radius,
-    typography: {
-      fonts: {
-        main: {
-          family: fontConfigToFamily(typography.fonts.main.config),
-          weights: typography.fonts.main.weights
-        },
-        display: {
-          family: fontConfigToFamily(typography.fonts.display.config),
-          weights: typography.fonts.display.weights
-        },
-        mono: {
-          family: fontConfigToFamily(typography.fonts.mono.config),
-          weights: typography.fonts.mono.weights
-        },
-        currency: {
-          family: fontConfigToFamily(typography.fonts.currency.config),
-          weights: typography.fonts.currency.weights
-        }
-      },
-      fontSizes: typography.fontSizes,
-      lineHeights: typography.lineHeights
-    },
-    icons: {
-      variant: icons.variant,
-      weight: icons.weight,
-      grade: icons.autoGrade ? mode === "light" ? -25 : 200 : 0
-    }
+    rowGap: prop.row !== void 0 ? resolveSpacing(prop.row, tokens) : 0,
+    columnGap: prop.column !== void 0 ? resolveSpacing(prop.column, tokens) : 0
   };
 }
-
-// src/tokens/useTokens.ts
-function useTokens(elevation) {
-  const { config, mode } = useNewtoneTheme();
-  const frameCtx = useFrameContext();
-  const resolvedElevation = elevation ?? frameCtx?.elevation ?? 1;
-  const canReuse = frameCtx !== null && elevation === void 0 && frameCtx.elevation === resolvedElevation;
-  return useMemo(() => {
-    if (canReuse) {
-      return { ...frameCtx.tokens, elevation: resolvedElevation };
-    }
-    const tokens = computeTokens(
-      config.colorSystem,
-      mode,
-      resolvedElevation,
-      config.spacing,
-      config.radius,
-      config.typography,
-      config.icons,
-      config.tokenOverrides
-    );
-    return { ...tokens, elevation: resolvedElevation };
-  }, [config, mode, resolvedElevation, canReuse, frameCtx?.tokens]);
+function resolveRadius(value, tokens) {
+  if (typeof value === "number") return value;
+  return tokens.radius[value];
 }
-function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
-  const basePadding = {
-    sm: 8,
-    md: 12,
-    lg: 16
-  };
-  const base = basePadding[size];
-  const textExtra = 8;
-  if (!hasText && hasIcon) {
-    return {
-      paddingLeft: base,
-      paddingRight: base,
-      paddingTop: base,
-      paddingBottom: base
-    };
-  }
-  if (hasText && !hasIcon) {
-    return {
-      paddingLeft: base + textExtra,
-      paddingRight: base + textExtra,
-      paddingTop: base,
-      paddingBottom: base
-    };
-  }
-  if (hasText && hasIcon) {
-    if (iconPosition === "left") {
-      return {
-        paddingLeft: base,
-        paddingRight: base + textExtra,
-        paddingTop: base,
-        paddingBottom: base
-      };
-    } else {
-      return {
-        paddingLeft: base + textExtra,
-        paddingRight: base,
-        paddingTop: base,
-        paddingBottom: base
-      };
-    }
+function resolveRadiusCorners(prop, tokens) {
+  if (typeof prop === "string" || typeof prop === "number") {
+    const px = resolveRadius(prop, tokens);
+    return { topLeft: px, topRight: px, bottomLeft: px, bottomRight: px };
   }
   return {
-    paddingLeft: base,
-    paddingRight: base,
-    paddingTop: base,
-    paddingBottom: base
+    topLeft: prop.topLeft !== void 0 ? resolveRadius(prop.topLeft, tokens) : 0,
+    topRight: prop.topRight !== void 0 ? resolveRadius(prop.topRight, tokens) : 0,
+    bottomLeft: prop.bottomLeft !== void 0 ? resolveRadius(prop.bottomLeft, tokens) : 0,
+    bottomRight: prop.bottomRight !== void 0 ? resolveRadius(prop.bottomRight, tokens) : 0
   };
 }
-function getPaletteTokens(semantic, tokens) {
-  switch (semantic) {
-    case "accent":
-      return tokens.accent;
-    case "success":
-      return tokens.success;
-    case "error":
-      return tokens.error;
-    case "warning":
-      return tokens.warning;
-    default:
-      return void 0;
-  }
+function hasPositiveRadius(corners) {
+  return corners.topLeft > 0 || corners.topRight > 0 || corners.bottomLeft > 0 || corners.bottomRight > 0;
 }
-function getButtonConfig(variant, semantic, size, disabled, tokens) {
-  const sizeConfig = getSizeConfig(size, tokens);
-  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
-  return {
-    variantColors,
-    sizeTokens: {
-      padding: sizeConfig.padding,
-      gap: sizeConfig.gap,
-      borderRadius: sizeConfig.borderRadius,
-      textSize: sizeConfig.textSize,
-      iconSize: sizeConfig.iconSize
+function resolveSizing(width, height) {
+  const style = {};
+  if (width !== void 0) {
+    if (width === "fill") {
+      style.flexGrow = 1;
+      style.width = "100%";
+    } else if (typeof width === "number") {
+      style.width = width;
     }
-  };
+  }
+  if (height !== void 0) {
+    if (height === "fill") {
+      style.flexGrow = 1;
+      style.height = "100%";
+    } else if (typeof height === "number") {
+      style.height = height;
+    }
+  }
+  return style;
 }
-function getSizeConfig(size, tokens) {
-  const configs = {
-    sm: {
-      padding: 8,
-      gap: tokens.spacing["08"],
-      borderRadius: 8,
-      textSize: "md",
-      // 16px
-      iconSize: 24
-    },
-    md: {
-      padding: 12,
-      gap: tokens.spacing["08"],
-      borderRadius: 12,
-      textSize: "md",
-      // 16px
-      iconSize: 24
-    },
-    lg: {
-      padding: 16,
-      gap: tokens.spacing["08"],
-      borderRadius: 16,
-      textSize: "md",
-      // 16px
-      iconSize: 24
-    }
-  };
-  return configs[size];
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+function resolveAlignment(align) {
+  return ALIGN_MAP[align];
 }
-function getVariantColors(variant, semantic, disabled, tokens) {
-  if (disabled) {
-    const baseColors = getVariantColorsForState(variant, semantic, tokens);
-    const disabledBg = srgbToHex(tokens.backgroundSunken.srgb);
-    return {
-      ...baseColors,
-      bg: disabledBg,
-      hoveredBg: disabledBg,
-      pressedBg: disabledBg,
-      textColor: srgbToHex(tokens.textSecondary.srgb),
-      iconColor: srgbToHex(tokens.textSecondary.srgb)
-    };
+function resolveJustification(justify) {
+  return JUSTIFY_MAP[justify];
+}
+function resolveFlexDirection(direction, reverse) {
+  if (direction === "horizontal") {
+    return reverse ? "row-reverse" : "row";
   }
-  return getVariantColorsForState(variant, semantic, tokens);
+  return reverse ? "column-reverse" : "column";
 }
-function getVariantColorsForState(variant, semantic, tokens) {
-  const paletteTokens = getPaletteTokens(semantic, tokens);
-  if (variant === "primary") {
-    if (semantic === "neutral") {
-      return {
-        bg: srgbToHex(tokens.backgroundInteractive.srgb),
-        hoveredBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
-        pressedBg: srgbToHex(tokens.backgroundInteractiveActive.srgb),
-        textColor: srgbToHex(tokens.textPrimary.srgb),
-        iconColor: srgbToHex(tokens.textPrimary.srgb),
-        borderWidth: 1,
-        borderColor: "transparent"
-      };
-    }
-    return {
-      bg: srgbToHex(paletteTokens.fill.srgb),
-      hoveredBg: srgbToHex(paletteTokens.fillHover.srgb),
-      pressedBg: srgbToHex(paletteTokens.fillActive.srgb),
-      textColor: srgbToHex(paletteTokens.onFill.srgb),
-      iconColor: srgbToHex(paletteTokens.onFill.srgb),
-      borderWidth: 1,
-      borderColor: "transparent"
-    };
+
+// src/primitives/Frame/Frame.styles.ts
+function getFrameStyles(input) {
+  const {
+    tokens,
+    gamut,
+    frameElevation,
+    layout = "flex",
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    columns,
+    rows,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    radius,
+    bordered = false,
+    disabled = false
+  } = input;
+  const container = {};
+  container.backgroundColor = tokens.background[gamut];
+  container.color = tokens.textPrimary[gamut];
+  if (layout === "flex") {
+    container.display = "flex";
+    container.flexDirection = resolveFlexDirection(direction, reverse);
+    if (wrap) container.flexWrap = "wrap";
   }
-  if (variant === "secondary") {
-    if (semantic === "neutral") {
-      return {
-        bg: "transparent",
-        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
-        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
-        textColor: srgbToHex(tokens.textPrimary.srgb),
-        iconColor: srgbToHex(tokens.textPrimary.srgb),
-        borderWidth: 1,
-        borderColor: srgbToHex(tokens.border.srgb)
-      };
-    }
-    return {
-      bg: srgbToHex(paletteTokens.background.srgb),
-      hoveredBg: srgbToHex(paletteTokens.backgroundInteractive.srgb),
-      pressedBg: srgbToHex(paletteTokens.backgroundInteractiveHover.srgb),
-      textColor: srgbToHex(paletteTokens.fill.srgb),
-      iconColor: srgbToHex(paletteTokens.fill.srgb),
-      borderWidth: 1,
-      borderColor: "transparent"
-    };
+  if (layout === "grid") {
+    container.display = "flex";
+    container.flexDirection = "row";
+    container.flexWrap = "wrap";
   }
-  if (variant === "tertiary") {
-    if (semantic === "neutral") {
-      return {
-        bg: "transparent",
-        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
-        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
-        textColor: srgbToHex(tokens.textPrimary.srgb),
-        iconColor: srgbToHex(tokens.textPrimary.srgb),
-        borderWidth: 1,
-        borderColor: "transparent"
-      };
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  const sizing = resolveSizing(width, height);
+  Object.assign(container, sizing);
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  if (radius !== void 0) {
+    const corners = resolveRadiusCorners(radius, tokens);
+    container.borderTopLeftRadius = corners.topLeft;
+    container.borderTopRightRadius = corners.topRight;
+    container.borderBottomLeftRadius = corners.bottomLeft;
+    container.borderBottomRightRadius = corners.bottomRight;
+    if (hasPositiveRadius(corners)) {
+      container.overflow = "hidden";
     }
-    return {
-      bg: "transparent",
-      hoveredBg: srgbToHex(paletteTokens.background.srgb),
-      pressedBg: srgbToHex(paletteTokens.backgroundInteractive.srgb),
-      textColor: srgbToHex(paletteTokens.fill.srgb),
-      iconColor: srgbToHex(paletteTokens.fill.srgb),
-      borderWidth: 1,
-      borderColor: "transparent"
+  }
+  if (bordered) {
+    container.borderWidth = 1;
+    container.borderColor = tokens.border[gamut];
+  }
+  if (frameElevation === 2) {
+    container.shadowColor = "#000";
+    container.shadowOffset = { width: 0, height: 2 };
+    container.shadowOpacity = 0.12;
+    container.shadowRadius = 6;
+    container.elevation = 4;
+  }
+  if (disabled) {
+    container.opacity = 0.5;
+  }
+  const pressed = StyleSheet.create({
+    s: { backgroundColor: tokens.backgroundSunken[gamut] }
+  }).s;
+  let gridWebStyle = null;
+  if (layout === "grid") {
+    gridWebStyle = {
+      display: "grid",
+      // Divide into equal-width columns (e.g. 3 columns → "repeat(3, 1fr)").
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : void 0,
+      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0
     };
   }
+  const insetBoxShadow = frameElevation === -2 ? "inset 0 2px 4px rgba(0,0,0,0.12)" : null;
   return {
-    bg: "transparent",
-    hoveredBg: "transparent",
-    pressedBg: "transparent",
-    textColor: srgbToHex(tokens.textPrimary.srgb),
-    iconColor: srgbToHex(tokens.textPrimary.srgb),
-    borderWidth: 0
+    // Validate and optimize the container styles through StyleSheet.create(),
+    // then extract the single style object with `.c`.
+    container: StyleSheet.create({ c: container }).c,
+    pressed,
+    gridWebStyle,
+    insetBoxShadow
   };
 }
-function Icon({
-  name,
-  size,
-  opticalSize,
-  fill = 0,
-  color,
-  style,
+
+// src/primitives/Frame/Frame.tsx
+function wrapTextChildren(children, textStyle) {
+  return React13.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return /* @__PURE__ */ React13.createElement(Text, { style: textStyle }, child);
+    }
+    return child;
+  });
+}
+function toElevationLevel(frameElevation) {
+  if (frameElevation <= -1) return 0;
+  if (frameElevation === 0) return 1;
+  return 2;
+}
+function Frame({
+  children,
+  // Elevation
+  elevation,
+  // Layout
+  layout,
+  direction,
+  wrap,
+  reverse,
+  columns,
+  rows,
+  // Alignment
+  align,
+  justify,
+  // Spacing
+  padding,
+  gap,
+  // Sizing
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  // Appearance
+  radius,
+  bordered,
+  // Interactivity
+  onPress,
+  href,
+  disabled = false,
   // Accessibility
   accessibilityLabel,
+  accessibilityHint,
   // Testing & platform
   testID,
   nativeID,
-  ref
+  ref,
+  // Style override
+  style
 }) {
-  const tokens = useTokens();
-  const iconStyle = useMemo(() => {
-    const fontSize = size ?? tokens.typography.fontSizes["05"];
-    const getOpticalSize = (size2) => {
-      if (size2 <= 22) return 20;
-      if (size2 <= 32) return 24;
-      if (size2 <= 44) return 40;
-      return 48;
-    };
-    const opsz = opticalSize ?? getOpticalSize(fontSize);
-    const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
-    const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
-    const fillValue = typeof fill === "boolean" ? fill ? 1 : 0 : fill;
-    const fontVariationSettings = `'FILL' ${fillValue}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
-    return {
-      fontFamily,
-      fontSize,
-      width: fontSize,
-      // Explicit width ensures square rendering
-      height: fontSize,
-      // Explicit height ensures square rendering
-      lineHeight: fontSize,
-      // Prevent text line-height from affecting total height
-      color: iconColor,
-      userSelect: "none",
+  const { config, mode, gamut } = useNewtoneTheme();
+  const parentFrameCtx = useFrameContext();
+  const resolvedFrameElevation = elevation ?? 0;
+  const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
+  const tokens = useMemo(() => {
+    return computeTokens(
+      config.colorSystem,
+      mode,
+      resolvedElevation,
+      config.spacing,
+      config.radius,
+      config.typography,
+      config.icons,
+      config.tokenOverrides
+    );
+  }, [config, mode, resolvedElevation]);
+  const styles = useMemo(
+    () => getFrameStyles({
+      tokens,
+      gamut,
+      frameElevation: resolvedFrameElevation,
+      layout,
+      direction,
+      wrap,
+      reverse,
+      columns,
+      rows,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      radius,
+      bordered,
+      disabled
+    }),
+    [
+      tokens,
+      gamut,
+      resolvedFrameElevation,
+      layout,
+      direction,
+      wrap,
+      reverse,
+      columns,
+      rows,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      radius,
+      bordered,
+      disabled
+    ]
+  );
+  const contextValue = useMemo(
+    () => ({ elevation: resolvedElevation, tokens }),
+    [resolvedElevation, tokens]
+  );
+  const webOverrides = [];
+  if (styles.gridWebStyle) {
+    webOverrides.push(styles.gridWebStyle);
+  }
+  if (styles.insetBoxShadow) {
+    webOverrides.push({ boxShadow: styles.insetBoxShadow });
+  }
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  const isInteractive = onPress !== void 0 || href !== void 0;
+  const { isFocusVisible, focusProps } = useFocusVisible();
+  const focusRingStyle = isFocusVisible && !disabled ? {
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: tokens.accent.fill[gamut],
+    outlineOffset: 2
+  } : void 0;
+  const webFocusProps = isInteractive ? focusProps : {};
+  const textStyle = useMemo(
+    () => ({
+      color: tokens.textPrimary[gamut],
+      fontSize: tokens.typography.fontSizes["05"],
+      fontFamily: tokens.typography.fonts.main.family,
+      lineHeight: tokens.typography.lineHeights["06"]
+    }),
+    [tokens]
+  );
+  const wrappedChildren = useMemo(
+    () => wrapTextChildren(children, textStyle),
+    [children, textStyle]
+  );
+  return /* @__PURE__ */ React13.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
+    // Pressable handles taps. When href is set, react-native-web renders
+    // it as an <a> tag so it works like a regular link on the web.
+    /* @__PURE__ */ React13.createElement(
+      Pressable,
+      {
+        ref,
+        testID,
+        nativeID,
+        accessibilityLabel,
+        accessibilityHint,
+        accessibilityState: disabled ? { disabled: true } : void 0,
+        onPress,
+        disabled,
+        ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
+        ...webFocusProps,
+        style: ({ pressed }) => [
+          styles.container,
+          pressed && !disabled && styles.pressed,
+          focusRingStyle,
+          ...webOverrides,
+          ...userStyles
+        ]
+      },
+      wrappedChildren
+    )
+  ) : (
+    // Non-interactive Frame: just a plain View with no tap handling.
+    /* @__PURE__ */ React13.createElement(
+      View,
+      {
+        ref,
+        testID,
+        nativeID,
+        accessibilityLabel,
+        accessibilityHint,
+        style: [styles.container, ...webOverrides, ...userStyles]
+      },
+      wrappedChildren
+    )
+  ));
+}
+function Icon({
+  name,
+  size,
+  opticalSize,
+  fill = 0,
+  color,
+  style,
+  // Accessibility
+  accessibilityLabel,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens();
+  const iconStyle = useMemo(() => {
+    const fontSize = size ?? tokens.typography.fontSizes["05"];
+    const getOpticalSize = (size2) => {
+      if (size2 <= 22) return 20;
+      if (size2 <= 32) return 24;
+      if (size2 <= 44) return 40;
+      return 48;
+    };
+    const opsz = opticalSize ?? getOpticalSize(fontSize);
+    const iconColor = color ?? tokens.textPrimary[tokens.gamut];
+    const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
+    const fillValue = typeof fill === "boolean" ? fill ? 1 : 0 : fill;
+    const fontVariationSettings = `'FILL' ${fillValue}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+    return {
+      fontFamily,
+      fontSize,
+      width: fontSize,
+      // Explicit width ensures square rendering
+      height: fontSize,
+      // Explicit height ensures square rendering
+      lineHeight: fontSize,
+      // Prevent text line-height from affecting total height
+      color: iconColor,
+      userSelect: "none",
       // web-only: prevents users from selecting the icon as text
       fontVariationSettings,
       // web-only: controls the variable font axes listed above
       ...style
     };
   }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Text,
     {
       ref,
@@ -832,154 +512,144 @@ function Icon({
     name
   );
 }
-
-// src/fonts/measureFont.ts
-var REF_STRING = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";
-function withTimeout(promise, ms, fallback) {
-  return Promise.race([
-    promise,
-    new Promise((resolve) => setTimeout(() => resolve(fallback), ms))
-  ]);
-}
-async function measureAvgCharWidth(fontFamily, fontWeight, fallback, fontSize = 16) {
-  if (typeof document === "undefined") return 0.55;
-  try {
-    await withTimeout(
-      document.fonts.load(`${fontWeight} ${fontSize}px "${fontFamily}"`),
-      3e3,
-      []
-    );
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return 0.55;
-    ctx.font = `${fontWeight} ${fontSize}px "${fontFamily}", ${fallback}`;
-    const ratio = ctx.measureText(REF_STRING).width / REF_STRING.length / fontSize;
-    return Math.round(ratio * 1e3) / 1e3;
-  } catch {
-    return 0.55;
-  }
-}
-
-// src/fonts/useLocalCalibration.ts
-var STORAGE_KEY = "newtone:font-metrics:v1";
-var TTL_MS = 7 * 24 * 60 * 60 * 1e3;
-function readCache() {
-  if (typeof localStorage === "undefined") return {};
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? JSON.parse(raw) : {};
-  } catch {
-    return {};
-  }
-}
-function writeCache(cache) {
-  if (typeof localStorage === "undefined") return;
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
-  } catch {
-  }
-}
-function cacheKey(fontFamily, fontWeight) {
-  return `${fontFamily}:${fontWeight}`;
-}
-function useLocalCalibration(fontFamily, fontWeight, fallback, baseCalibration) {
-  const key = cacheKey(fontFamily, fontWeight);
-  const [ratio, setRatio] = useState(() => {
-    const cache = readCache();
-    const entry = cache[key];
-    if (entry && Date.now() - entry.measuredAt < TTL_MS) {
-      return entry.ratio;
-    }
-    return baseCalibration ?? 0.55;
-  });
-  useEffect(() => {
-    const cache = readCache();
-    const entry = cache[key];
-    if (entry && Date.now() - entry.measuredAt < TTL_MS) {
-      if (entry.ratio !== ratio) setRatio(entry.ratio);
-      return;
-    }
-    let cancelled = false;
-    measureAvgCharWidth(fontFamily, fontWeight, fallback).then((measured) => {
-      if (cancelled) return;
-      const updated = { ...readCache(), [key]: { ratio: measured, measuredAt: Date.now() } };
-      writeCache(updated);
-      setRatio(measured);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [key, fontFamily, fontWeight, fallback]);
-  return ratio;
-}
-
-// src/fonts/useTypographyCalibrations.ts
-function useTypographyCalibrations() {
-  const { config } = useNewtoneTheme();
-  return config.typography.calibrations ?? {};
-}
-
-// src/fonts/reportQueue.ts
-var queue = [];
-var flushTimer;
-function flush() {
-  if (queue.length === 0) return;
-  const byEndpoint = /* @__PURE__ */ new Map();
-  for (const item of queue) {
-    const group = byEndpoint.get(item.endpoint) ?? [];
-    group.push(item.payload);
-    byEndpoint.set(item.endpoint, group);
-  }
-  queue.length = 0;
-  for (const [endpoint, observations] of byEndpoint) {
-    fetch(endpoint, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ observations }),
-      // keepalive: true allows the request to outlive the page
-      keepalive: true
-    }).catch(() => {
-    });
+function getWrapperStyles(input) {
+  const {
+    tokens,
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  } = input;
+  const container = {};
+  container.flexDirection = resolveFlexDirection(direction, reverse);
+  if (wrap) container.flexWrap = "wrap";
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
   }
-}
-function enqueueObservation(endpoint, payload) {
-  queue.push({ endpoint, payload });
-  if (flushTimer !== void 0) clearTimeout(flushTimer);
-  flushTimer = setTimeout(flush, 2e3);
-}
-function useBreakpoint() {
-  const { width } = useWindowDimensions();
-  return getBreakpointForWidth(width);
-}
-
-// src/primitives/Text/Text.tsx
-var TextScopeContext = createContext(null);
-function resolveTextColor(color, tokens) {
-  switch (color) {
-    case "primary":
-      return srgbToHex(tokens.textPrimary.srgb);
-    case "secondary":
-      return srgbToHex(tokens.textSecondary.srgb);
-    case "tertiary":
-      return srgbToHex(tokens.textTertiary.srgb);
-    case "disabled":
-      return srgbToHex(tokens.textDisabled.srgb);
-    case "accent":
-      return srgbToHex(tokens.accent.fill.srgb);
-    case "success":
-      return srgbToHex(tokens.success.fill.srgb);
-    case "warning":
-      return srgbToHex(tokens.warning.fill.srgb);
-    case "error":
-      return srgbToHex(tokens.error.fill.srgb);
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
   }
+  Object.assign(container, resolveSizing(width, height));
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  return StyleSheet.create({ c: container }).c;
 }
-var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
-var ROLE_HEADING_LEVEL = {
-  headline: 1,
-  title: 2,
-  heading: 3
-};
+function Wrapper({
+  children,
+  direction,
+  wrap,
+  reverse,
+  align,
+  justify,
+  padding,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  style,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens(1);
+  const containerStyle = useMemo(
+    () => getWrapperStyles({
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    }),
+    [
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    ]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React13.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
+}
+var TextScopeContext = createContext(null);
+function resolveTextColor(color, tokens) {
+  const { gamut } = tokens;
+  switch (color) {
+    case "primary":
+      return tokens.textPrimary[gamut];
+    case "secondary":
+      return tokens.textSecondary[gamut];
+    case "tertiary":
+      return tokens.textTertiary[gamut];
+    case "disabled":
+      return tokens.textDisabled[gamut];
+    case "accent":
+      return tokens.accent.fill[gamut];
+    case "success":
+      return tokens.success.fill[gamut];
+    case "warning":
+      return tokens.warning.fill[gamut];
+    case "error":
+      return tokens.error.fill[gamut];
+  }
+}
+var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
+var ROLE_HEADING_LEVEL = {
+  headline: 1,
+  title: 2,
+  heading: 3
+};
 function extractCharacterCount(node) {
   if (typeof node === "string") return node.length;
   if (typeof node === "number") return String(node).length;
@@ -1086,7 +756,7 @@ function TextBase({
   const effectiveA11yRole = accessibilityRoleOverride ?? inferredA11yRole;
   const ariaLevel = effectiveA11yRole === "header" ? ROLE_HEADING_LEVEL[role] : void 0;
   const scopeCtx = useMemo(() => ({ weights: SEMANTIC_WEIGHT_MAP }), []);
-  const textNode = /* @__PURE__ */ React14.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React14.createElement(
+  const textNode = /* @__PURE__ */ React13.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React13.createElement(
     Text,
     {
       ref,
@@ -1100,7 +770,7 @@ function TextBase({
     children
   ));
   if (responsive && isAdaptive) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React13.createElement(
       View,
       {
         onLayout: (e) => {
@@ -1126,30 +796,30 @@ function TextSpan({ children, color, weight, italic, underline, highlight, style
     if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens);
     return s;
   }, [tokens, scopeCtx, color, weight, italic, underline, highlight]);
-  return React14.createElement(
+  return React13.createElement(
     Text,
     { style: style ? [spanStyle, ...Array.isArray(style) ? style : [style]] : spanStyle },
     children
   );
 }
 function TextBold(props) {
-  return React14.createElement(TextSpan, { ...props, weight: "bold" });
+  return React13.createElement(TextSpan, { ...props, weight: "bold" });
 }
 function TextMedium(props) {
-  return React14.createElement(TextSpan, { ...props, weight: "medium" });
+  return React13.createElement(TextSpan, { ...props, weight: "medium" });
 }
 function TextItalic(props) {
-  return React14.createElement(TextSpan, { ...props, italic: true });
+  return React13.createElement(TextSpan, { ...props, italic: true });
 }
 function TextUnderline(props) {
-  return React14.createElement(TextSpan, { ...props, underline: true });
+  return React13.createElement(TextSpan, { ...props, underline: true });
 }
 function TextHighlight(props) {
-  return React14.createElement(TextSpan, props);
+  return React13.createElement(TextSpan, props);
 }
 
 // src/primitives/Text/index.ts
-var Text2 = Object.assign(TextBase, {
+var Text3 = Object.assign(TextBase, {
   Span: TextSpan,
   Bold: TextBold,
   Medium: TextMedium,
@@ -1158,655 +828,297 @@ var Text2 = Object.assign(TextBase, {
   Highlight: TextHighlight
 });
 
-// src/primitives/Frame/Frame.utils.ts
-function resolveSpacing(value, tokens) {
-  if (typeof value === "number") return value;
-  return tokens.spacing[value];
-}
-function resolvePadding(prop, tokens) {
-  if (typeof prop === "string" || typeof prop === "number") {
-    const px = resolveSpacing(prop, tokens);
-    return { top: px, right: px, bottom: px, left: px };
+// src/composites/actions/Button/Button.styles.ts
+function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
+  const basePadding = {
+    sm: 8,
+    md: 12,
+    lg: 16
+  };
+  const base = basePadding[size];
+  const textExtra = 8;
+  if (!hasText && hasIcon) {
+    return {
+      paddingLeft: base,
+      paddingRight: base,
+      paddingTop: base,
+      paddingBottom: base
+    };
   }
-  if ("x" in prop || "y" in prop) {
-    const axes = prop;
-    const x = axes.x !== void 0 ? resolveSpacing(axes.x, tokens) : 0;
-    const y = axes.y !== void 0 ? resolveSpacing(axes.y, tokens) : 0;
-    return { top: y, right: x, bottom: y, left: x };
+  if (hasText && !hasIcon) {
+    return {
+      paddingLeft: base + textExtra,
+      paddingRight: base + textExtra,
+      paddingTop: base,
+      paddingBottom: base
+    };
+  }
+  if (hasText && hasIcon) {
+    if (iconPosition === "left") {
+      return {
+        paddingLeft: base,
+        paddingRight: base + textExtra,
+        paddingTop: base,
+        paddingBottom: base
+      };
+    } else {
+      return {
+        paddingLeft: base + textExtra,
+        paddingRight: base,
+        paddingTop: base,
+        paddingBottom: base
+      };
+    }
   }
-  const sides = prop;
   return {
-    top: sides.top !== void 0 ? resolveSpacing(sides.top, tokens) : 0,
-    right: sides.right !== void 0 ? resolveSpacing(sides.right, tokens) : 0,
-    bottom: sides.bottom !== void 0 ? resolveSpacing(sides.bottom, tokens) : 0,
-    left: sides.left !== void 0 ? resolveSpacing(sides.left, tokens) : 0
+    paddingLeft: base,
+    paddingRight: base,
+    paddingTop: base,
+    paddingBottom: base
   };
 }
-function resolveGap(prop, tokens) {
-  if (typeof prop === "string" || typeof prop === "number") {
-    const px = resolveSpacing(prop, tokens);
-    return { rowGap: px, columnGap: px };
+function getPaletteTokens(semantic, tokens) {
+  switch (semantic) {
+    case "accent":
+      return tokens.accent;
+    case "success":
+      return tokens.success;
+    case "error":
+      return tokens.error;
+    case "warning":
+      return tokens.warning;
+    default:
+      return void 0;
   }
+}
+function getButtonConfig(variant, semantic, size, disabled, tokens) {
+  const sizeConfig = getSizeConfig(size, tokens);
+  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
   return {
-    rowGap: prop.row !== void 0 ? resolveSpacing(prop.row, tokens) : 0,
-    columnGap: prop.column !== void 0 ? resolveSpacing(prop.column, tokens) : 0
+    variantColors,
+    sizeTokens: {
+      padding: sizeConfig.padding,
+      gap: sizeConfig.gap,
+      borderRadius: sizeConfig.borderRadius,
+      textSize: sizeConfig.textSize,
+      iconSize: sizeConfig.iconSize
+    }
   };
 }
-function resolveRadius(value, tokens) {
-  if (typeof value === "number") return value;
-  return tokens.radius[value];
-}
-function resolveRadiusCorners(prop, tokens) {
-  if (typeof prop === "string" || typeof prop === "number") {
-    const px = resolveRadius(prop, tokens);
-    return { topLeft: px, topRight: px, bottomLeft: px, bottomRight: px };
-  }
-  return {
-    topLeft: prop.topLeft !== void 0 ? resolveRadius(prop.topLeft, tokens) : 0,
-    topRight: prop.topRight !== void 0 ? resolveRadius(prop.topRight, tokens) : 0,
-    bottomLeft: prop.bottomLeft !== void 0 ? resolveRadius(prop.bottomLeft, tokens) : 0,
-    bottomRight: prop.bottomRight !== void 0 ? resolveRadius(prop.bottomRight, tokens) : 0
+function getSizeConfig(size, tokens) {
+  const configs = {
+    sm: {
+      padding: 8,
+      gap: tokens.spacing["08"],
+      borderRadius: 8,
+      textSize: "md",
+      // 16px
+      iconSize: 24
+    },
+    md: {
+      padding: 12,
+      gap: tokens.spacing["08"],
+      borderRadius: 12,
+      textSize: "md",
+      // 16px
+      iconSize: 24
+    },
+    lg: {
+      padding: 16,
+      gap: tokens.spacing["08"],
+      borderRadius: 16,
+      textSize: "md",
+      // 16px
+      iconSize: 24
+    }
   };
+  return configs[size];
 }
-function hasPositiveRadius(corners) {
-  return corners.topLeft > 0 || corners.topRight > 0 || corners.bottomLeft > 0 || corners.bottomRight > 0;
+function getVariantColors(variant, semantic, disabled, tokens) {
+  if (disabled) {
+    const baseColors = getVariantColorsForState(variant, semantic, tokens);
+    const { gamut } = tokens;
+    const disabledBg = tokens.backgroundSunken[gamut];
+    return {
+      ...baseColors,
+      bg: disabledBg,
+      hoveredBg: disabledBg,
+      pressedBg: disabledBg,
+      textColor: tokens.textSecondary[gamut],
+      iconColor: tokens.textSecondary[gamut]
+    };
+  }
+  return getVariantColorsForState(variant, semantic, tokens);
 }
-function resolveSizing(width, height) {
-  const style = {};
-  if (width !== void 0) {
-    if (width === "fill") {
-      style.flexGrow = 1;
-      style.width = "100%";
-    } else if (typeof width === "number") {
-      style.width = width;
+function getVariantColorsForState(variant, semantic, tokens) {
+  const { gamut } = tokens;
+  const paletteTokens = getPaletteTokens(semantic, tokens);
+  if (variant === "primary") {
+    if (semantic === "neutral") {
+      return {
+        bg: tokens.backgroundInteractive[gamut],
+        hoveredBg: tokens.backgroundInteractiveHover[gamut],
+        pressedBg: tokens.backgroundInteractiveActive[gamut],
+        textColor: tokens.textPrimary[gamut],
+        iconColor: tokens.textPrimary[gamut],
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
     }
+    return {
+      bg: paletteTokens.fill[gamut],
+      hoveredBg: paletteTokens.fillHover[gamut],
+      pressedBg: paletteTokens.fillActive[gamut],
+      textColor: paletteTokens.onFill[gamut],
+      iconColor: paletteTokens.onFill[gamut],
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
   }
-  if (height !== void 0) {
-    if (height === "fill") {
-      style.flexGrow = 1;
-      style.height = "100%";
-    } else if (typeof height === "number") {
-      style.height = height;
+  if (variant === "secondary") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: tokens.backgroundInteractive[gamut],
+        pressedBg: tokens.backgroundInteractiveHover[gamut],
+        textColor: tokens.textPrimary[gamut],
+        iconColor: tokens.textPrimary[gamut],
+        borderWidth: 1,
+        borderColor: tokens.border[gamut]
+      };
     }
-  }
-  return style;
-}
-var ALIGN_MAP = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
-  baseline: "baseline"
-};
-var JUSTIFY_MAP = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  between: "space-between",
-  around: "space-around",
-  evenly: "space-evenly"
-};
-function resolveAlignment(align) {
-  return ALIGN_MAP[align];
-}
-function resolveJustification(justify) {
-  return JUSTIFY_MAP[justify];
-}
-function resolveFlexDirection(direction, reverse) {
-  if (direction === "horizontal") {
-    return reverse ? "row-reverse" : "row";
-  }
-  return reverse ? "column-reverse" : "column";
-}
-
-// src/primitives/Wrapper/Wrapper.styles.ts
-function getWrapperStyles(input) {
-  const {
-    tokens,
-    direction = "vertical",
-    wrap = false,
-    reverse = false,
-    align,
-    justify,
-    padding,
-    gap,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
-  } = input;
-  const container = {};
-  container.flexDirection = resolveFlexDirection(direction, reverse);
-  if (wrap) container.flexWrap = "wrap";
-  if (align) container.alignItems = resolveAlignment(align);
-  if (justify) container.justifyContent = resolveJustification(justify);
-  if (padding !== void 0) {
-    const p = resolvePadding(padding, tokens);
-    container.paddingTop = p.top;
-    container.paddingRight = p.right;
-    container.paddingBottom = p.bottom;
-    container.paddingLeft = p.left;
-  }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
-  }
-  Object.assign(container, resolveSizing(width, height));
-  if (minWidth !== void 0) container.minWidth = minWidth;
-  if (maxWidth !== void 0) container.maxWidth = maxWidth;
-  if (minHeight !== void 0) container.minHeight = minHeight;
-  if (maxHeight !== void 0) container.maxHeight = maxHeight;
-  return StyleSheet.create({ c: container }).c;
-}
-
-// src/primitives/Wrapper/Wrapper.tsx
-function Wrapper({
-  children,
-  direction,
-  wrap,
-  reverse,
-  align,
-  justify,
-  padding,
-  gap,
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  style,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref
-}) {
-  const tokens = useTokens(1);
-  const containerStyle = useMemo(
-    () => getWrapperStyles({
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    }),
-    [
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    ]
-  );
-  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React14.createElement(
-    View,
-    {
-      ref,
-      testID,
-      nativeID,
-      accessibilityRole: "none",
-      style: [containerStyle, ...userStyles]
-    },
-    children
-  );
-}
-
-// src/composites/actions/Button/Button.tsx
-function Button({
-  children,
-  icon,
-  iconPosition = "left",
-  variant = "primary",
-  semantic = "neutral",
-  size = "md",
-  disabled = false,
-  style,
-  textStyle,
-  ...pressableProps
-}) {
-  const tokens = useTokens();
-  const { variantColors, sizeTokens } = React14.useMemo(
-    () => getButtonConfig(variant, semantic, size, disabled, tokens),
-    [variant, semantic, size, disabled, tokens]
-  );
-  const padding = React14.useMemo(
-    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
-    [size, icon, children, iconPosition]
-  );
-  return /* @__PURE__ */ React14.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
-    // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React14.createElement(
-      Wrapper,
-      {
-        direction: "horizontal",
-        align: "center",
-        justify: "center",
-        gap: sizeTokens.gap,
-        style: [
-          {
-            ...padding,
-            // Asymmetric horizontal padding for text optical balance
-            backgroundColor: pressed && !disabled ? variantColors.pressedBg : hovered && !disabled ? variantColors.hoveredBg : variantColors.bg,
-            borderRadius: sizeTokens.borderRadius,
-            borderWidth: variantColors.borderWidth,
-            // Always 1 for consistent sizing
-            borderColor: variantColors.borderColor || "transparent",
-            opacity: disabled ? 0.4 : 1
-          },
-          ...Array.isArray(style) ? style : style ? [style] : []
-        ]
-      },
-      icon && iconPosition === "left" && /* @__PURE__ */ React14.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
-      children && // Text primitive with semantic props + color style override
-      /* @__PURE__ */ React14.createElement(
-        Text2,
-        {
-          role: "label",
-          size: sizeTokens.textSize,
-          centerVertically: true,
-          style: [
-            { color: variantColors.textColor },
-            ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
-          ]
-        },
-        children
-      ),
-      icon && iconPosition === "right" && /* @__PURE__ */ React14.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
-    )
-  ));
-}
-function getCardStyles(tokens, disabled) {
-  return StyleSheet.create({
-    container: {
-      backgroundColor: srgbToHex(tokens.background.srgb),
+    return {
+      bg: paletteTokens.background[gamut],
+      hoveredBg: paletteTokens.backgroundInteractive[gamut],
+      pressedBg: paletteTokens.backgroundInteractiveHover[gamut],
+      textColor: paletteTokens.fill[gamut],
+      iconColor: paletteTokens.fill[gamut],
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: tokens.radius.lg,
-      padding: tokens.spacing["16"],
-      opacity: disabled ? 0.5 : 1
-    }
-  });
-}
-
-// src/composites/layout/Card/Card.tsx
-function Card({
-  children,
-  elevation = 1,
-  style,
-  disabled = false
-}) {
-  const tokens = useTokens(elevation);
-  const styles = React14.useMemo(
-    () => getCardStyles(tokens, disabled),
-    [tokens, disabled]
-  );
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
-}
-var hadKeyboardEvent = false;
-var isListenerSetup = false;
-function setupModality() {
-  if (isListenerSetup || typeof document === "undefined") return;
-  isListenerSetup = true;
-  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
-    "Tab",
-    "ArrowUp",
-    "ArrowDown",
-    "ArrowLeft",
-    "ArrowRight",
-    "Enter",
-    " ",
-    "Escape"
-  ]);
-  document.addEventListener("keydown", (e) => {
-    if (NAVIGATION_KEYS.has(e.key)) {
-      hadKeyboardEvent = true;
-    }
-  }, true);
-  document.addEventListener("pointerdown", () => {
-    hadKeyboardEvent = false;
-  }, true);
-  document.addEventListener("mousedown", () => {
-    hadKeyboardEvent = false;
-  }, true);
-}
-function useFocusVisible() {
-  const [isFocusVisible, setIsFocusVisible] = useState(false);
-  useEffect(() => {
-    setupModality();
-  }, []);
-  const onFocus = useCallback(() => {
-    if (hadKeyboardEvent) {
-      setIsFocusVisible(true);
-    }
-  }, []);
-  const onBlur = useCallback(() => {
-    setIsFocusVisible(false);
-  }, []);
-  const focusProps = { onFocus, onBlur };
-  return { isFocusVisible, focusProps };
-}
-function getFrameStyles(input) {
-  const {
-    tokens,
-    frameElevation,
-    layout = "flex",
-    direction = "vertical",
-    wrap = false,
-    reverse = false,
-    columns,
-    rows,
-    align,
-    justify,
-    padding,
-    gap,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    radius,
-    bordered = false,
-    disabled = false
-  } = input;
-  const container = {};
-  container.backgroundColor = srgbToHex(tokens.background.srgb);
-  container.color = srgbToHex(tokens.textPrimary.srgb);
-  if (layout === "flex") {
-    container.display = "flex";
-    container.flexDirection = resolveFlexDirection(direction, reverse);
-    if (wrap) container.flexWrap = "wrap";
-  }
-  if (layout === "grid") {
-    container.display = "flex";
-    container.flexDirection = "row";
-    container.flexWrap = "wrap";
-  }
-  if (align) container.alignItems = resolveAlignment(align);
-  if (justify) container.justifyContent = resolveJustification(justify);
-  if (padding !== void 0) {
-    const p = resolvePadding(padding, tokens);
-    container.paddingTop = p.top;
-    container.paddingRight = p.right;
-    container.paddingBottom = p.bottom;
-    container.paddingLeft = p.left;
-  }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
+      borderColor: "transparent"
+    };
   }
-  const sizing = resolveSizing(width, height);
-  Object.assign(container, sizing);
-  if (minWidth !== void 0) container.minWidth = minWidth;
-  if (maxWidth !== void 0) container.maxWidth = maxWidth;
-  if (minHeight !== void 0) container.minHeight = minHeight;
-  if (maxHeight !== void 0) container.maxHeight = maxHeight;
-  if (radius !== void 0) {
-    const corners = resolveRadiusCorners(radius, tokens);
-    container.borderTopLeftRadius = corners.topLeft;
-    container.borderTopRightRadius = corners.topRight;
-    container.borderBottomLeftRadius = corners.bottomLeft;
-    container.borderBottomRightRadius = corners.bottomRight;
-    if (hasPositiveRadius(corners)) {
-      container.overflow = "hidden";
+  if (variant === "tertiary") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: tokens.backgroundInteractive[gamut],
+        pressedBg: tokens.backgroundInteractiveHover[gamut],
+        textColor: tokens.textPrimary[gamut],
+        iconColor: tokens.textPrimary[gamut],
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
     }
-  }
-  if (bordered) {
-    container.borderWidth = 1;
-    container.borderColor = srgbToHex(tokens.border.srgb);
-  }
-  if (frameElevation === 2) {
-    container.shadowColor = "#000";
-    container.shadowOffset = { width: 0, height: 2 };
-    container.shadowOpacity = 0.12;
-    container.shadowRadius = 6;
-    container.elevation = 4;
-  }
-  if (disabled) {
-    container.opacity = 0.5;
-  }
-  const pressed = StyleSheet.create({
-    s: { backgroundColor: srgbToHex(tokens.backgroundSunken.srgb) }
-  }).s;
-  let gridWebStyle = null;
-  if (layout === "grid") {
-    gridWebStyle = {
-      display: "grid",
-      // Divide into equal-width columns (e.g. 3 columns → "repeat(3, 1fr)").
-      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : void 0,
-      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0
+    return {
+      bg: "transparent",
+      hoveredBg: paletteTokens.background[gamut],
+      pressedBg: paletteTokens.backgroundInteractive[gamut],
+      textColor: paletteTokens.fill[gamut],
+      iconColor: paletteTokens.fill[gamut],
+      borderWidth: 1,
+      borderColor: "transparent"
     };
   }
-  const insetBoxShadow = frameElevation === -2 ? "inset 0 2px 4px rgba(0,0,0,0.12)" : null;
-  return {
-    // Validate and optimize the container styles through StyleSheet.create(),
-    // then extract the single style object with `.c`.
-    container: StyleSheet.create({ c: container }).c,
-    pressed,
-    gridWebStyle,
-    insetBoxShadow
-  };
-}
-
-// src/primitives/Frame/Frame.tsx
-function wrapTextChildren(children, textStyle) {
-  return React14.Children.map(children, (child) => {
-    if (typeof child === "string" || typeof child === "number") {
-      return /* @__PURE__ */ React14.createElement(Text, { style: textStyle }, child);
-    }
-    return child;
-  });
-}
-function toElevationLevel(frameElevation) {
-  if (frameElevation <= -1) return 0;
-  if (frameElevation === 0) return 1;
-  return 2;
+  return {
+    bg: "transparent",
+    hoveredBg: "transparent",
+    pressedBg: "transparent",
+    textColor: tokens.textPrimary[gamut],
+    iconColor: tokens.textPrimary[gamut],
+    borderWidth: 0
+  };
 }
-function Frame({
+function Button({
   children,
-  // Elevation
-  elevation,
-  // Layout
-  layout,
-  direction,
-  wrap,
-  reverse,
-  columns,
-  rows,
-  // Alignment
-  align,
-  justify,
-  // Spacing
-  padding,
-  gap,
-  // Sizing
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  // Appearance
-  radius,
-  bordered,
-  // Interactivity
-  onPress,
-  href,
+  icon,
+  iconPosition = "left",
+  variant = "primary",
+  semantic = "neutral",
+  size = "md",
   disabled = false,
-  // Accessibility
-  accessibilityLabel,
-  accessibilityHint,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref,
-  // Style override
-  style
+  style,
+  textStyle,
+  ...pressableProps
 }) {
-  const { config, mode } = useNewtoneTheme();
-  const parentFrameCtx = useFrameContext();
-  const resolvedFrameElevation = elevation ?? 0;
-  const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
-  const tokens = useMemo(() => {
-    return computeTokens(
-      config.colorSystem,
-      mode,
-      resolvedElevation,
-      config.spacing,
-      config.radius,
-      config.typography,
-      config.icons,
-      config.tokenOverrides
-    );
-  }, [config, mode, resolvedElevation]);
-  const styles = useMemo(
-    () => getFrameStyles({
-      tokens,
-      frameElevation: resolvedFrameElevation,
-      layout,
-      direction,
-      wrap,
-      reverse,
-      columns,
-      rows,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight,
-      radius,
-      bordered,
-      disabled
-    }),
-    [
-      tokens,
-      resolvedFrameElevation,
-      layout,
-      direction,
-      wrap,
-      reverse,
-      columns,
-      rows,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight,
-      radius,
-      bordered,
-      disabled
-    ]
-  );
-  const contextValue = useMemo(
-    () => ({ elevation: resolvedElevation, tokens }),
-    [resolvedElevation, tokens]
-  );
-  const webOverrides = [];
-  if (styles.gridWebStyle) {
-    webOverrides.push(styles.gridWebStyle);
-  }
-  if (styles.insetBoxShadow) {
-    webOverrides.push({ boxShadow: styles.insetBoxShadow });
-  }
-  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  const isInteractive = onPress !== void 0 || href !== void 0;
-  const { isFocusVisible, focusProps } = useFocusVisible();
-  const focusRingStyle = isFocusVisible && !disabled ? {
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineColor: srgbToHex(tokens.accent.fill.srgb),
-    outlineOffset: 2
-  } : void 0;
-  const webFocusProps = isInteractive ? focusProps : {};
-  const textStyle = useMemo(
-    () => ({
-      color: srgbToHex(tokens.textPrimary.srgb),
-      fontSize: tokens.typography.fontSizes["05"],
-      fontFamily: tokens.typography.fonts.main.family,
-      lineHeight: tokens.typography.lineHeights["06"]
-    }),
-    [tokens]
+  const tokens = useTokens();
+  const { variantColors, sizeTokens } = React13.useMemo(
+    () => getButtonConfig(variant, semantic, size, disabled, tokens),
+    [variant, semantic, size, disabled, tokens]
   );
-  const wrappedChildren = useMemo(
-    () => wrapTextChildren(children, textStyle),
-    [children, textStyle]
+  const padding = React13.useMemo(
+    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition]
   );
-  return /* @__PURE__ */ React14.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
-    // Pressable handles taps. When href is set, react-native-web renders
-    // it as an <a> tag so it works like a regular link on the web.
-    /* @__PURE__ */ React14.createElement(
-      Pressable,
+  return /* @__PURE__ */ React13.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
+    // Wrapper handles layout: direction, gap, alignment (padding via style)
+    /* @__PURE__ */ React13.createElement(
+      Wrapper,
       {
-        ref,
-        testID,
-        nativeID,
-        accessibilityLabel,
-        accessibilityHint,
-        accessibilityState: disabled ? { disabled: true } : void 0,
-        onPress,
-        disabled,
-        ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
-        ...webFocusProps,
-        style: ({ pressed }) => [
-          styles.container,
-          pressed && !disabled && styles.pressed,
-          focusRingStyle,
-          ...webOverrides,
-          ...userStyles
+        direction: "horizontal",
+        align: "center",
+        justify: "center",
+        gap: sizeTokens.gap,
+        style: [
+          {
+            ...padding,
+            // Asymmetric horizontal padding for text optical balance
+            backgroundColor: pressed && !disabled ? variantColors.pressedBg : hovered && !disabled ? variantColors.hoveredBg : variantColors.bg,
+            borderRadius: sizeTokens.borderRadius,
+            borderWidth: variantColors.borderWidth,
+            // Always 1 for consistent sizing
+            borderColor: variantColors.borderColor || "transparent",
+            opacity: disabled ? 0.4 : 1
+          },
+          ...Array.isArray(style) ? style : style ? [style] : []
         ]
       },
-      wrappedChildren
-    )
-  ) : (
-    // Non-interactive Frame: just a plain View with no tap handling.
-    /* @__PURE__ */ React14.createElement(
-      View,
-      {
-        ref,
-        testID,
-        nativeID,
-        accessibilityLabel,
-        accessibilityHint,
-        style: [styles.container, ...webOverrides, ...userStyles]
-      },
-      wrappedChildren
+      icon && iconPosition === "left" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+      children && // Text primitive with semantic props + color style override
+      /* @__PURE__ */ React13.createElement(
+        Text3,
+        {
+          role: "label",
+          size: sizeTokens.textSize,
+          centerVertically: true,
+          style: [
+            { color: variantColors.textColor },
+            ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
+          ]
+        },
+        children
+      ),
+      icon && iconPosition === "right" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
     )
   ));
 }
-function getTextInputStyles(tokens, disabled) {
+function getCardStyles(tokens, gamut, disabled) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: tokens.background[gamut],
+      borderWidth: 1,
+      borderColor: tokens.border[gamut],
+      borderRadius: tokens.radius.lg,
+      padding: tokens.spacing["16"],
+      opacity: disabled ? 0.5 : 1
+    }
+  });
+}
+
+// src/composites/layout/Card/Card.tsx
+function Card({
+  children,
+  elevation = 1,
+  style,
+  disabled = false
+}) {
+  const tokens = useTokens(elevation);
+  const styles = React13.useMemo(
+    () => getCardStyles(tokens, tokens.gamut, disabled),
+    [tokens, disabled]
+  );
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+}
+function getTextInputStyles(tokens, gamut, disabled) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing["04"]
@@ -1815,22 +1127,24 @@ function getTextInputStyles(tokens, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb)
+      color: tokens.textSecondary[gamut]
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      backgroundColor: tokens.backgroundSunken[gamut],
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing["08"],
       paddingHorizontal: tokens.spacing["12"],
       fontSize: tokens.typography.fontSizes["05"],
-      color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb),
+      color: disabled ? tokens.textSecondary[gamut] : tokens.textPrimary[gamut],
       opacity: disabled ? 0.5 : 1
     }
   });
 }
+
+// src/composites/form-controls/TextInput/TextInput.tsx
 function TextInput({
   label,
   disabled = false,
@@ -1838,21 +1152,21 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getTextInputStyles(tokens, disabled),
+  const styles = React13.useMemo(
+    () => getTextInputStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
     TextInput$1,
     {
       style: styles.input,
       editable: !disabled,
-      placeholderTextColor: srgbToHex(tokens.textSecondary.srgb),
+      placeholderTextColor: tokens.textSecondary[tokens.gamut],
       ...textInputProps
     }
   ));
 }
-function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen) {
+function getPopoverStyles(tokens, gamut, triggerHeight, offset, maxHeight, width, isOpen) {
   const widthStyle = width === "trigger" ? { left: 0, right: 0 } : typeof width === "number" ? { width, left: 0 } : { left: 0 };
   return StyleSheet.create({
     container: {
@@ -1863,9 +1177,9 @@ function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpe
       position: "absolute",
       top: triggerHeight + offset,
       ...widthStyle,
-      backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+      backgroundColor: tokens.backgroundElevated[gamut],
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: tokens.radius.md,
       maxHeight,
       zIndex: 1e3,
@@ -1933,7 +1247,7 @@ function Popover({
     [closeOnEscape, onClose]
   );
   const styles = useMemo(
-    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
+    () => getPopoverStyles(tokens, tokens.gamut, triggerHeight, offset, maxHeight, width, isOpen),
     [tokens, triggerHeight, offset, maxHeight, width, isOpen]
   );
   const containerStyles = useMemo(
@@ -1945,15 +1259,15 @@ function Popover({
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React14.createElement(View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React14.createElement(View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React13.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React13.createElement(View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
@@ -1980,7 +1294,7 @@ function usePopover(options) {
 function isOptionGroup(item) {
   return "options" in item;
 }
-function getSelectStyles(tokens, disabled, size, isOpen) {
+function getSelectStyles(tokens, gamut, disabled, size, isOpen) {
   const isSm = size === "sm";
   const fontSize = isSm ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   const iconSize = fontSize + 2;
@@ -1996,14 +1310,14 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb)
+      color: tokens.textSecondary[gamut]
     },
     trigger: {
       flexDirection: "row",
       alignItems: "center",
-      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      backgroundColor: tokens.backgroundSunken[gamut],
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
@@ -2014,7 +1328,7 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       flex: 1,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize,
-      color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb)
+      color: disabled ? tokens.textSecondary[gamut] : tokens.textPrimary[gamut]
     },
     iconWrapper: {
       position: "absolute",
@@ -2027,7 +1341,7 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["01"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb),
+      color: tokens.textSecondary[gamut],
       textTransform: "uppercase",
       letterSpacing: 0.5,
       paddingVertical: tokens.spacing["04"],
@@ -2150,7 +1464,7 @@ function SelectOptionRow({
   const paddingHorizontal = size === "sm" ? tokens.spacing["08"] : tokens.spacing["12"];
   const fontSize = size === "sm" ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   if (renderOption) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React13.createElement(
       Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -2161,7 +1475,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -2177,10 +1491,10 @@ function SelectOptionRow({
           paddingHorizontal
         },
         isSelected && {
-          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb)
+          backgroundColor: tokens.backgroundSunken[tokens.gamut]
         },
         isFocused && !isSelected && {
-          backgroundColor: `${srgbToHex(tokens.border.srgb)}20`
+          backgroundColor: `${tokens.border[tokens.gamut]}20`
         },
         option.disabled && {
           opacity: 0.5
@@ -2190,7 +1504,7 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React13.createElement(
       Text,
       {
         style: [
@@ -2198,30 +1512,32 @@ function SelectOptionRow({
             flex: 1,
             fontFamily: tokens.typography.fonts.main.family,
             fontSize,
-            color: srgbToHex(tokens.textPrimary.srgb)
+            color: tokens.textPrimary[tokens.gamut]
           },
           isSelected && {
             fontWeight: tokens.typography.fonts.main.weights.medium,
-            color: srgbToHex(tokens.accent.fill.srgb)
+            color: tokens.accent.fill[tokens.gamut]
           },
           option.disabled && {
-            color: srgbToHex(tokens.textSecondary.srgb)
+            color: tokens.textSecondary[tokens.gamut]
           }
         ],
         numberOfLines: 1
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React14.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React14.createElement(
+    isSelected && /* @__PURE__ */ React13.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React13.createElement(
       Icon,
       {
         name: "check",
         size: fontSize,
-        color: srgbToHex(tokens.accent.fill.srgb)
+        color: tokens.accent.fill[tokens.gamut]
       }
     ))
   );
 }
+
+// src/composites/form-controls/Select/Select.tsx
 function flattenOptions(items) {
   const result = [];
   for (const item of items) {
@@ -2260,14 +1576,14 @@ function Select({
     onOpen: open
   });
   const styles = useMemo(
-    () => getSelectStyles(tokens, disabled, size, isOpen),
+    () => getSelectStyles(tokens, tokens.gamut, disabled, size, isOpen),
     [tokens, disabled, size, isOpen]
   );
   const selectedOption = flatOptions.find((o) => o.value === value);
   const displayLabel = selectedOption?.label ?? placeholder ?? value;
-  const iconColor = disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb);
+  const iconColor = disabled ? tokens.textSecondary[tokens.gamut] : tokens.textPrimary[tokens.gamut];
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React14.createElement(
+  const trigger = /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -2277,8 +1593,8 @@ function Select({
       ...triggerWebProps,
       style: styles.trigger
     },
-    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React14.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
-    /* @__PURE__ */ React14.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React14.createElement(
+    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React13.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React13.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React13.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
@@ -2287,14 +1603,14 @@ function Select({
       }
     ))
   );
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React13.createElement(
       ScrollView,
       {
         bounces: false,
@@ -2303,7 +1619,7 @@ function Select({
       },
       options.map((item) => {
         if (isOptionGroup(item)) {
-          return /* @__PURE__ */ React14.createElement(View, { key: item.label }, /* @__PURE__ */ React14.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React14.createElement(
+          return /* @__PURE__ */ React13.createElement(View, { key: item.label }, /* @__PURE__ */ React13.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React13.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -2319,7 +1635,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React14.createElement(
+        return /* @__PURE__ */ React13.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -2342,7 +1658,7 @@ var TRACK_WIDTH = 40;
 var TRACK_HEIGHT = 22;
 var THUMB_SIZE = 18;
 var THUMB_OFFSET = 2;
-function getToggleStyles(tokens, value, disabled) {
+function getToggleStyles(tokens, gamut, value, disabled) {
   return StyleSheet.create({
     container: {
       flexDirection: "row",
@@ -2354,13 +1670,13 @@ function getToggleStyles(tokens, value, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb)
+      color: tokens.textSecondary[gamut]
     },
     track: {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
+      backgroundColor: value ? tokens.accent.fill[gamut] : tokens.border[gamut],
       justifyContent: "center",
       paddingHorizontal: THUMB_OFFSET
     },
@@ -2368,7 +1684,7 @@ function getToggleStyles(tokens, value, disabled) {
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
       alignSelf: value ? "flex-end" : "flex-start"
     }
   });
@@ -2383,16 +1699,16 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getToggleStyles(tokens, value, disabled),
+  const styles = React13.useMemo(
+    () => getToggleStyles(tokens, tokens.gamut, value, disabled),
     [tokens, value, disabled]
   );
-  const handlePress = React14.useCallback(() => {
+  const handlePress = React13.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: handlePress,
@@ -2400,12 +1716,12 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React14.createElement(View, { style: styles.track }, /* @__PURE__ */ React14.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React13.createElement(View, { style: styles.track }, /* @__PURE__ */ React13.createElement(View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
 var THUMB_SIZE2 = 16;
-function getSliderStyles(tokens, disabled) {
+function getSliderStyles(tokens, gamut, disabled) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing["04"],
@@ -2420,23 +1736,23 @@ function getSliderStyles(tokens, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb)
+      color: tokens.textSecondary[gamut]
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textPrimary.srgb)
+      color: tokens.textPrimary[gamut]
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: 4,
       backgroundColor: "transparent",
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.textPrimary[gamut],
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
@@ -2453,21 +1769,21 @@ function getSliderStyles(tokens, disabled) {
       right: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: srgbToHex(tokens.border.srgb)
+      backgroundColor: tokens.border[gamut]
     },
     trackFill: {
       position: "absolute",
       left: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
+      backgroundColor: tokens.accent.fill[gamut]
     },
     thumb: {
       position: "absolute",
       width: THUMB_SIZE2,
       height: THUMB_SIZE2,
       borderRadius: THUMB_SIZE2 / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
+      backgroundColor: tokens.accent.fill[gamut]
     }
   });
 }
@@ -2486,42 +1802,42 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getSliderStyles(tokens, disabled),
+  const styles = React13.useMemo(
+    () => getSliderStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
-  const trackRef = React14.useRef(null);
-  const trackWidth = React14.useRef(0);
-  const trackPageX = React14.useRef(0);
-  const [layoutWidth, setLayoutWidth] = React14.useState(0);
-  const onValueChangeRef = React14.useRef(onValueChange);
-  const minRef = React14.useRef(min);
-  const maxRef = React14.useRef(max);
-  const stepRef = React14.useRef(step);
-  const disabledRef = React14.useRef(disabled);
-  React14.useEffect(() => {
+  const trackRef = React13.useRef(null);
+  const trackWidth = React13.useRef(0);
+  const trackPageX = React13.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React13.useState(0);
+  const onValueChangeRef = React13.useRef(onValueChange);
+  const minRef = React13.useRef(min);
+  const maxRef = React13.useRef(max);
+  const stepRef = React13.useRef(step);
+  const disabledRef = React13.useRef(disabled);
+  React13.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React14.useCallback((pageX) => {
+  const computeValue = React13.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const raw = minRef.current + ratio2 * (maxRef.current - minRef.current);
     const stepped = Math.round(raw / stepRef.current) * stepRef.current;
     return Math.min(maxRef.current, Math.max(minRef.current, stepped));
   }, []);
-  const panResponder = React14.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2536,8 +1852,20 @@ function Slider({
   const ratio = max > min ? (value - min) / (max - min) : 0;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
-  const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
-  const handleValueTextSubmit = React14.useCallback(
+  const isCenterOrigin = min < 0 && max > 0;
+  let fillLeft;
+  let fillWidth;
+  if (isCenterOrigin) {
+    const centerRatio = (0 - min) / (max - min);
+    const centerX = centerRatio * usableWidth + THUMB_SIZE2 / 2;
+    const thumbCenterX = thumbLeft + THUMB_SIZE2 / 2;
+    fillLeft = Math.min(centerX, thumbCenterX);
+    fillWidth = Math.abs(thumbCenterX - centerX);
+  } else {
+    fillLeft = 0;
+    fillWidth = thumbLeft + THUMB_SIZE2 / 2;
+  }
+  const handleValueTextSubmit = React13.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2546,12 +1874,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React14.useState(String(value));
-  React14.useEffect(() => {
+  const [editText, setEditText] = React13.useState(String(value));
+  React13.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React14.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2563,7 +1891,7 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React14.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React14.createElement(
+  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -2578,45 +1906,19 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React14.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React14.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
-    /* @__PURE__ */ React14.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React13.createElement(View, { style: styles.trackRail }),
+    /* @__PURE__ */ React13.createElement(View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
+    /* @__PURE__ */ React13.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
 var THUMB_SIZE3 = 18;
 var SEGMENT_COUNT = 48;
-function hueToHex(hue) {
-  const h = (hue % 360 + 360) % 360;
-  const x = 1 - Math.abs(h / 60 % 2 - 1);
-  let r, g, b;
-  if (h < 60) {
-    r = 1;
-    g = x;
-    b = 0;
-  } else if (h < 120) {
-    r = x;
-    g = 1;
-    b = 0;
-  } else if (h < 180) {
-    r = 0;
-    g = 1;
-    b = x;
-  } else if (h < 240) {
-    r = 0;
-    g = x;
-    b = 1;
-  } else if (h < 300) {
-    r = x;
-    g = 0;
-    b = 1;
-  } else {
-    r = 1;
-    g = 0;
-    b = x;
-  }
-  const toHex = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+var OKLCH_L = 0.7;
+var OKLCH_C = 0.4;
+function hueToHex(oklchHue) {
+  const { color } = gamutMapToSrgb({ L: OKLCH_L, C: OKLCH_C, h: oklchHue });
+  return srgbToHex(color);
 }
 function buildHueSegments(min, max) {
   return Array.from({ length: SEGMENT_COUNT }, (_, i) => {
@@ -2624,7 +1926,7 @@ function buildHueSegments(min, max) {
     return hueToHex(hue);
   });
 }
-function getHueSliderStyles(tokens, disabled) {
+function getHueSliderStyles(tokens, gamut, disabled) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing["04"],
@@ -2639,23 +1941,23 @@ function getHueSliderStyles(tokens, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb)
+      color: tokens.textSecondary[gamut]
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textPrimary.srgb)
+      color: tokens.textPrimary[gamut]
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: 4,
       backgroundColor: "transparent",
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.textPrimary[gamut],
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
@@ -2685,7 +1987,7 @@ function getHueSliderStyles(tokens, disabled) {
       borderRadius: THUMB_SIZE3 / 2,
       backgroundColor: "#ffffff",
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb)
+      borderColor: tokens.border[gamut]
     }
   });
 }
@@ -2695,7 +1997,7 @@ function HueSlider({
   value,
   onValueChange,
   min = 0,
-  max = 359,
+  max = 360,
   label,
   showValue = false,
   editableValue = false,
@@ -2703,42 +2005,42 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getHueSliderStyles(tokens, disabled),
+  const styles = React13.useMemo(
+    () => getHueSliderStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
-  const segments = React14.useMemo(
+  const segments = React13.useMemo(
     () => buildHueSegments(min, max),
     [min, max]
   );
-  const trackRef = React14.useRef(null);
-  const trackWidth = React14.useRef(0);
-  const trackPageX = React14.useRef(0);
-  const [layoutWidth, setLayoutWidth] = React14.useState(0);
-  const onValueChangeRef = React14.useRef(onValueChange);
-  const minRef = React14.useRef(min);
-  const maxRef = React14.useRef(max);
-  const disabledRef = React14.useRef(disabled);
-  React14.useEffect(() => {
+  const trackRef = React13.useRef(null);
+  const trackWidth = React13.useRef(0);
+  const trackPageX = React13.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React13.useState(0);
+  const onValueChangeRef = React13.useRef(onValueChange);
+  const minRef = React13.useRef(min);
+  const maxRef = React13.useRef(max);
+  const disabledRef = React13.useRef(disabled);
+  React13.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React14.useCallback((pageX) => {
+  const computeHue = React13.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const raw = minRef.current + ratio2 * (maxRef.current - minRef.current);
     const stepped = Math.round(raw);
     return (stepped % 360 + 360) % 360;
   }, []);
-  const panResponder = React14.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2750,11 +2052,11 @@ function HueSlider({
       }
     })
   ).current;
-  const sliderValue = max > 359 && value < min ? value + 360 : value;
+  const sliderValue = max > 360 && value < min ? value + 360 : value;
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
-  const handleValueTextSubmit = React14.useCallback(
+  const handleValueTextSubmit = React13.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2763,12 +2065,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React14.useState(String(value));
-  React14.useEffect(() => {
+  const [editText, setEditText] = React13.useState(String(value));
+  React13.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React14.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2780,7 +2082,7 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React14.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React14.createElement(
+  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -2795,13 +2097,69 @@ function HueSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React14.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React14.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
-    /* @__PURE__ */ React14.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React13.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React13.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React13.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
+
+// node_modules/@newtonedev/colors/dist/index.js
+var SRGB_GAMMA_THRESHOLD_LINEAR = 31308e-7;
+var SRGB_GAMMA_SLOPE = 12.92;
+var SRGB_GAMMA_EXPONENT = 2.4;
+var SRGB_GAMMA_OFFSET = 0.055;
+var SRGB_GAMMA_SCALE = 1.055;
+var OKLAB_TO_LMS_PRIME = [
+  [1, 0.3963377774, 0.2158037573],
+  [1, -0.1055613458, -0.0638541728],
+  [1, -0.0894841775, -1.291485548]
+];
+var LMS_TO_LINEAR_P3 = [
+  [3.127769439, -2.2570600176, 0.1291828502],
+  [-1.0910091977, 2.4133065499, -0.3222615148],
+  [-0.0260108068, -0.5080402362, 1.5340494942]
+];
+var DEG_TO_RAD = Math.PI / 180;
+function oklchToOklab(lch) {
+  const hRad = lch.h * DEG_TO_RAD;
+  return {
+    L: lch.L,
+    a: lch.C * Math.cos(hRad),
+    b: lch.C * Math.sin(hRad)
+  };
+}
+function oklabToLinearP3(color) {
+  const lp = OKLAB_TO_LMS_PRIME[0][0] * color.L + OKLAB_TO_LMS_PRIME[0][1] * color.a + OKLAB_TO_LMS_PRIME[0][2] * color.b;
+  const mp = OKLAB_TO_LMS_PRIME[1][0] * color.L + OKLAB_TO_LMS_PRIME[1][1] * color.a + OKLAB_TO_LMS_PRIME[1][2] * color.b;
+  const sp = OKLAB_TO_LMS_PRIME[2][0] * color.L + OKLAB_TO_LMS_PRIME[2][1] * color.a + OKLAB_TO_LMS_PRIME[2][2] * color.b;
+  const l = lp * lp * lp;
+  const m = mp * mp * mp;
+  const s = sp * sp * sp;
+  return {
+    r: LMS_TO_LINEAR_P3[0][0] * l + LMS_TO_LINEAR_P3[0][1] * m + LMS_TO_LINEAR_P3[0][2] * s,
+    g: LMS_TO_LINEAR_P3[1][0] * l + LMS_TO_LINEAR_P3[1][1] * m + LMS_TO_LINEAR_P3[1][2] * s,
+    b: LMS_TO_LINEAR_P3[2][0] * l + LMS_TO_LINEAR_P3[2][1] * m + LMS_TO_LINEAR_P3[2][2] * s
+  };
+}
+function linearChannelToSrgb(value) {
+  return value <= SRGB_GAMMA_THRESHOLD_LINEAR ? value * SRGB_GAMMA_SLOPE : SRGB_GAMMA_SCALE * value ** (1 / SRGB_GAMMA_EXPONENT) - SRGB_GAMMA_OFFSET;
+}
+function linearSrgbToSrgb(color) {
+  return {
+    r: linearChannelToSrgb(color.r),
+    g: linearChannelToSrgb(color.g),
+    b: linearChannelToSrgb(color.b)
+  };
+}
+function oklchToP3(color) {
+  return linearSrgbToSrgb(oklabToLinearP3(oklchToOklab(color)));
+}
+function oklchToP3Css(color) {
+  const { r, g, b } = oklchToP3(color);
+  return `color(display-p3 ${r} ${g} ${b})`;
+}
 var TRACK_HEIGHT4 = 22;
 var THUMB_SIZE4 = 18;
-function getColorScaleSliderStyles(tokens, disabled) {
+function getColorScaleSliderStyles(tokens, gamut, disabled) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing["04"],
@@ -2816,7 +2174,7 @@ function getColorScaleSliderStyles(tokens, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.textSecondary.srgb)
+      color: tokens.textSecondary[gamut]
     },
     trackContainer: {
       height: TRACK_HEIGHT4 + THUMB_SIZE4,
@@ -2842,13 +2200,13 @@ function getColorScaleSliderStyles(tokens, disabled) {
       borderRadius: THUMB_SIZE4 / 2,
       backgroundColor: "#ffffff",
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb)
+      borderColor: tokens.border[gamut]
     },
     warning: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["01"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: srgbToHex(tokens.error.fill.srgb)
+      color: tokens.error.fill[gamut]
     }
   });
 }
@@ -2864,40 +2222,41 @@ function ColorScaleSlider({
   snap = false,
   disabled = false,
   animateValue = false,
+  useP3: _useP3,
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getColorScaleSliderStyles(tokens, disabled),
+  const styles = React13.useMemo(
+    () => getColorScaleSliderStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
-  const trackRef = React14.useRef(null);
-  const trackWidth = React14.useRef(0);
-  const trackPageX = React14.useRef(0);
-  const isDragging = React14.useRef(false);
-  const thumbAnim = React14.useRef(new Animated.Value(0)).current;
-  const [layoutWidth, setLayoutWidth] = React14.useState(0);
-  const onValueChangeRef = React14.useRef(onValueChange);
-  const disabledRef = React14.useRef(disabled);
-  const colorsLengthRef = React14.useRef(colors.length);
-  const trimEndsRef = React14.useRef(trimEnds);
-  const snapRef = React14.useRef(snap);
-  React14.useEffect(() => {
+  const trackRef = React13.useRef(null);
+  const trackWidth = React13.useRef(0);
+  const trackPageX = React13.useRef(0);
+  const isDragging = React13.useRef(false);
+  const thumbAnim = React13.useRef(new Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React13.useState(0);
+  const onValueChangeRef = React13.useRef(onValueChange);
+  const disabledRef = React13.useRef(disabled);
+  const colorsLengthRef = React13.useRef(colors.length);
+  const trimEndsRef = React13.useRef(trimEnds);
+  const snapRef = React13.useRef(snap);
+  React13.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     colorsLengthRef.current = colors.length;
   }, [colors.length]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     trimEndsRef.current = trimEnds;
   }, [trimEnds]);
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     snapRef.current = snap;
   }, [snap]);
-  const computeNv = React14.useCallback((pageX) => {
+  const computeNv = React13.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const totalSteps2 = colorsLengthRef.current - 1;
@@ -2912,7 +2271,7 @@ function ColorScaleSlider({
     }
     return nv;
   }, []);
-  const panResponder = React14.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2940,7 +2299,7 @@ function ColorScaleSlider({
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     if (isDragging.current || !animateValue) {
       thumbAnim.setValue(thumbLeft);
     } else {
@@ -2951,7 +2310,7 @@ function ColorScaleSlider({
       }).start();
     }
   }, [thumbLeft, animateValue, thumbAnim]);
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -2966,17 +2325,17 @@ function ColorScaleSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React14.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React14.createElement(View, { key: i, style: [styles.segment, { backgroundColor: srgbToHex(color.srgb) }] }))),
-    /* @__PURE__ */ React14.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
-  ), warning && /* @__PURE__ */ React14.createElement(Text, { style: styles.warning }, warning));
+    /* @__PURE__ */ React13.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React13.createElement(View, { key: i, style: [styles.segment, { backgroundColor: tokens.gamut === "p3" ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React13.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React13.createElement(Text, { style: styles.warning }, warning));
 }
-function getAppShellStyles(tokens) {
+function getAppShellStyles(tokens, gamut) {
   return StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: "row",
       overflow: "hidden",
-      backgroundColor: srgbToHex(tokens.background.srgb)
+      backgroundColor: tokens.background[gamut]
     },
     main: {
       flex: 1,
@@ -2990,17 +2349,17 @@ function getAppShellStyles(tokens) {
 // src/composites/layout/AppShell/AppShell.tsx
 function AppShell({ sidebar, children }) {
   const tokens = useTokens();
-  const styles = React14.useMemo(() => getAppShellStyles(tokens), [tokens]);
-  return /* @__PURE__ */ React14.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React14.createElement(View, { style: styles.main }, children));
+  const styles = React13.useMemo(() => getAppShellStyles(tokens, tokens.gamut), [tokens]);
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React13.createElement(View, { style: styles.main }, children));
 }
-function getSidebarStyles({ tokens, width, bordered }) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+function getSidebarStyles({ tokens, gamut, width, bordered }) {
+  const borderColor = tokens.border[gamut];
   return StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: "column",
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
       borderRightWidth: bordered ? 1 : 0,
       borderRightColor: borderColor
     },
@@ -3029,14 +2388,14 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React14.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered }),
+  const styles = React13.useMemo(
+    () => getSidebarStyles({ tokens, gamut: tokens.gamut, width, bordered }),
     [tokens, width, bordered]
   );
-  return /* @__PURE__ */ React14.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React14.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React14.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React14.createElement(View, { style: styles.footer }, footer));
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React13.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React13.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React13.createElement(View, { style: styles.footer }, footer));
 }
-function getNavbarStyles({ tokens, height, bordered }) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+function getNavbarStyles({ tokens, gamut, height, bordered }) {
+  const borderColor = tokens.border[gamut];
   return StyleSheet.create({
     container: {
       flexDirection: "row",
@@ -3044,7 +2403,7 @@ function getNavbarStyles({ tokens, height, bordered }) {
       height,
       flexShrink: 0,
       paddingHorizontal: 24,
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
       borderBottomWidth: bordered ? 1 : 0,
       borderBottomColor: borderColor
     },
@@ -3071,11 +2430,11 @@ function Navbar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React14.useMemo(
-    () => getNavbarStyles({ tokens, height, bordered }),
+  const styles = React13.useMemo(
+    () => getNavbarStyles({ tokens, gamut: tokens.gamut, height, bordered }),
     [tokens, height, bordered]
   );
-  return /* @__PURE__ */ React14.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React14.createElement(View, { style: styles.right }, right)));
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React13.createElement(View, { style: styles.right }, right)));
 }
 
 // src/registry/registry.ts
@@ -4023,6 +3382,6 @@ var ICON_CATALOG = [
   }
 ];
 
-export { ACCENT_DEFAULTS, AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, ERROR_DEFAULTS, Frame, HueSlider, ICON_CATALOG, Icon, NEUTRAL_DEFAULTS, Navbar, NewtoneProvider, Popover, SUCCESS_DEFAULTS, Select, Sidebar, Slider, Text2 as Text, TextInput, Toggle, WARNING_DEFAULTS, Wrapper, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, measureAvgCharWidth, useFocusVisible, useFrameContext, useLocalCalibration, useNewtoneTheme, usePopover, useTokens, useTypographyCalibrations };
+export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, Frame, HueSlider, ICON_CATALOG, Icon, Navbar, Popover, Select, Sidebar, Slider, Text3 as Text, TextInput, Toggle, Wrapper, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, usePopover };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map