@newtonedev/components 0.1.12 → 0.1.14

package/dist/index.js

@@ -1,782 +1,544 @@
-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, useFrameContext, useBreakpoint, useTypographyCalibrations, useLocalCalibration, enqueueObservation, computeTokens, _ThemeContext, FrameContext } from 'newtone-api';
+export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, DEFAULT_THEME_CONFIG, DEFAULT_THEME_MAPPINGS, ERROR_DEFAULTS, FrameContext, NewtoneProvider, PRIMARY_DEFAULTS, SECONDARY_DEFAULTS, SUCCESS_DEFAULTS, TERTIARY_DEFAULTS, WARNING_DEFAULTS, buildGoogleFontsUrl, computeColors, computeSwatches, computeTokens, enqueueObservation, measureAvgCharWidth, resolveTheme, useBreakpoint, useFrameContext, useLocalCalibration, useNewtoneTheme, useScheme, useTokens, useTypographyCalibrations } from 'newtone-api';
+import React16, { 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;
     }
-  };
-}
-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
+  }
+  if (height !== void 0) {
+    if (height === "fill") {
+      style.flexGrow = 1;
+      style.height = "100%";
+    } else if (typeof height === "number") {
+      style.height = height;
     }
-  };
-  return configs[size];
+  }
+  return style;
 }
-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)
-    };
+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 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"
-      };
+
+// src/primitives/Frame/Frame.styles.ts
+function getFrameStyles(input) {
+  const {
+    tokens,
+    frameElevation,
+    theme = "primary",
+    appearance = "main",
+    layout = "flex",
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    columns,
+    rows,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    opacity,
+    radius,
+    bordered = false,
+    disabled = false
+  } = input;
+  const container = {};
+  const appearanceTokens = tokens.colors[theme][appearance];
+  container.backgroundColor = appearanceTokens.background;
+  container.color = appearanceTokens.fontPrimary;
+  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;
+  }
+  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 (position) container.position = position;
+  if (top !== void 0) container.top = top;
+  if (right !== void 0) container.right = right;
+  if (bottom !== void 0) container.bottom = bottom;
+  if (left !== void 0) container.left = left;
+  if (zIndex !== void 0) container.zIndex = zIndex;
+  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: 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"
+  }
+  if (overflow) container.overflow = overflow;
+  if (bordered) {
+    container.borderWidth = 1;
+    container.borderColor = appearanceTokens.fontTertiary;
+  }
+  if (frameElevation === 2) {
+    container.shadowColor = "#000";
+    container.shadowOffset = { width: 0, height: 2 };
+    container.shadowOpacity = 0.12;
+    container.shadowRadius = 6;
+    container.elevation = 4;
+  }
+  if (opacity !== void 0) {
+    container.opacity = opacity;
+  } else if (disabled) {
+    container.opacity = 0.5;
+  }
+  const pressed = StyleSheet.create({
+    s: { backgroundColor: appearanceTokens.fontSecondary }
+  }).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
     };
   }
-  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)
-      };
+  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 React16.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return /* @__PURE__ */ React16.createElement(Text, { style: textStyle }, child);
+    }
+    return child;
+  });
+}
+var ELEVATION_MAP = {
+  0: "sunken",
+  1: "grounded",
+  2: "elevated"
+};
+function toElevationLevel(frameElevation) {
+  if (frameElevation <= -1) return 0;
+  if (frameElevation === 0) return 1;
+  return 2;
+}
+function Frame({
+  children,
+  // Elevation
+  elevation,
+  // Scheme
+  scheme,
+  // Theme / Appearance
+  theme,
+  appearance,
+  // Layout
+  layout,
+  direction,
+  wrap,
+  reverse,
+  columns,
+  rows,
+  // Alignment
+  align,
+  justify,
+  // Spacing
+  padding,
+  gap,
+  // Sizing
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  // Positioning
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  overflow,
+  pointerEvents,
+  opacity,
+  // Appearance
+  radius,
+  bordered,
+  // Interactivity
+  onPress,
+  href,
+  disabled = false,
+  // Accessibility
+  accessibilityLabel,
+  accessibilityHint,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref,
+  // Style override
+  style
+}) {
+  const themeCtx = useNewtoneTheme();
+  const { mode, gamut } = themeCtx;
+  const parentFrameCtx = useFrameContext();
+  const resolvedConfig = useMemo(() => {
+    if (scheme && themeCtx.schemes) {
+      const schemeConfig = themeCtx.schemes[scheme];
+      if (schemeConfig) return schemeConfig;
     }
+    return themeCtx.config;
+  }, [scheme, themeCtx.schemes, themeCtx.config]);
+  const isSchemeOverride = resolvedConfig !== themeCtx.config;
+  const resolvedTheme = theme ?? parentFrameCtx?.theme ?? "primary";
+  const resolvedAppearance = appearance ?? parentFrameCtx?.appearance ?? "main";
+  const resolvedFrameElevation = elevation ?? 0;
+  const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
+  const tokens = useMemo(() => {
+    return computeTokens(
+      resolvedConfig.colorSystem,
+      mode,
+      gamut,
+      ELEVATION_MAP[resolvedElevation],
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings,
+      resolvedConfig.swatchDefaults
+    );
+  }, [resolvedConfig, mode, gamut, resolvedElevation]);
+  const styles = useMemo(
+    () => getFrameStyles({
+      tokens,
+      frameElevation: resolvedFrameElevation,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance,
+      layout,
+      direction,
+      wrap,
+      reverse,
+      columns,
+      rows,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity,
+      radius,
+      bordered,
+      disabled
+    }),
+    [
+      tokens,
+      resolvedFrameElevation,
+      resolvedTheme,
+      resolvedAppearance,
+      layout,
+      direction,
+      wrap,
+      reverse,
+      columns,
+      rows,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity,
+      radius,
+      bordered,
+      disabled
+    ]
+  );
+  const resolvedScheme = scheme ?? parentFrameCtx?.scheme;
+  const contextValue = useMemo(
+    () => ({
+      elevation: resolvedElevation,
+      tokens,
+      scheme: resolvedScheme,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance
+    }),
+    [resolvedElevation, tokens, resolvedScheme, resolvedTheme, resolvedAppearance]
+  );
+  const schemeThemeCtx = useMemo(() => {
+    if (!isSchemeOverride) return null;
     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"
+      ...themeCtx,
+      config: resolvedConfig,
+      activeScheme: scheme ?? themeCtx.activeScheme
     };
+  }, [isSchemeOverride, themeCtx, resolvedConfig, scheme]);
+  const webOverrides = [];
+  if (styles.gridWebStyle) {
+    webOverrides.push(styles.gridWebStyle);
   }
-  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"
-      };
-    }
-    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 (styles.insetBoxShadow) {
+    webOverrides.push({ boxShadow: styles.insetBoxShadow });
   }
-  return {
-    bg: "transparent",
-    hoveredBg: "transparent",
-    pressedBg: "transparent",
-    textColor: srgbToHex(tokens.textPrimary.srgb),
-    iconColor: srgbToHex(tokens.textPrimary.srgb),
-    borderWidth: 0
-  };
+  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.colors[resolvedTheme].emphasis.background,
+    outlineOffset: 2
+  } : void 0;
+  const webFocusProps = isInteractive ? focusProps : {};
+  const textStyle = useMemo(
+    () => ({
+      color: tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary,
+      fontSize: tokens.typography.fontSizes["05"],
+      fontFamily: tokens.typography.fonts.main.family,
+      lineHeight: tokens.typography.lineHeights["06"]
+    }),
+    [tokens, resolvedTheme, resolvedAppearance]
+  );
+  const wrappedChildren = useMemo(
+    () => wrapTextChildren(children, textStyle),
+    [children, textStyle]
+  );
+  const content = isInteractive ? /* @__PURE__ */ React16.createElement(
+    Pressable,
+    {
+      ref,
+      testID,
+      nativeID,
+      pointerEvents,
+      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
+  ) : /* @__PURE__ */ React16.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      pointerEvents,
+      accessibilityLabel,
+      accessibilityHint,
+      style: [styles.container, ...webOverrides, ...userStyles]
+    },
+    wrappedChildren
+  );
+  const wrappedContent = schemeThemeCtx ? /* @__PURE__ */ React16.createElement(_ThemeContext.Provider, { value: schemeThemeCtx }, content) : content;
+  return /* @__PURE__ */ React16.createElement(FrameContext.Provider, { value: contextValue }, wrappedContent);
 }
 function Icon({
-  name,
-  size,
+  name = "add",
+  size = 24,
   opticalSize,
   fill = 0,
   color,
@@ -789,6 +551,9 @@ function Icon({
   ref
 }) {
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? "primary";
+  const resolvedAppearance = frameCtx?.appearance ?? "main";
   const iconStyle = useMemo(() => {
     const fontSize = size ?? tokens.typography.fontSizes["05"];
     const getOpticalSize = (size2) => {
@@ -798,7 +563,7 @@ function Icon({
       return 48;
     };
     const opsz = opticalSize ?? getOpticalSize(fontSize);
-    const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
+    const iconColor = color ?? tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary;
     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}`;
@@ -818,8 +583,8 @@ function Icon({
       // web-only: controls the variable font axes listed above
       ...style
     };
-  }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React14.createElement(
+  }, [tokens, size, opticalSize, fill, color, style, resolvedTheme, resolvedAppearance]);
+  return /* @__PURE__ */ React16.createElement(
     Text,
     {
       ref,
@@ -832,146 +597,173 @@ 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);
+function getWrapperStyles(input) {
+  const {
+    tokens,
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    opacity
+  } = 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;
   }
-  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(() => {
-    });
+  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;
+  if (position) container.position = position;
+  if (top !== void 0) container.top = top;
+  if (right !== void 0) container.right = right;
+  if (bottom !== void 0) container.bottom = bottom;
+  if (left !== void 0) container.left = left;
+  if (zIndex !== void 0) container.zIndex = zIndex;
+  if (overflow) container.overflow = overflow;
+  if (opacity !== void 0) container.opacity = opacity;
+  return StyleSheet.create({ c: container }).c;
 }
-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);
+function Wrapper({
+  children,
+  direction,
+  wrap,
+  reverse,
+  align,
+  justify,
+  padding,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  // Positioning
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  overflow,
+  pointerEvents,
+  opacity,
+  style,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens();
+  const containerStyle = useMemo(
+    () => getWrapperStyles({
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity
+    }),
+    [
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity
+    ]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React16.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      pointerEvents,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
 }
-
-// src/primitives/Text/Text.tsx
 var TextScopeContext = createContext(null);
-function resolveTextColor(color, tokens) {
+var LARGE_TEXT_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
+function resolveTextColor(color, tokens, theme = "primary", appearance = "main", role = "body") {
   switch (color) {
     case "primary":
-      return srgbToHex(tokens.textPrimary.srgb);
+      return tokens.colors[theme][appearance].fontPrimary;
     case "secondary":
-      return srgbToHex(tokens.textSecondary.srgb);
+      return tokens.colors[theme][appearance].fontSecondary;
     case "tertiary":
-      return srgbToHex(tokens.textTertiary.srgb);
+      return tokens.colors[theme][appearance].fontTertiary;
     case "disabled":
-      return srgbToHex(tokens.textDisabled.srgb);
+      return tokens.colors[theme][appearance].fontDisabled;
     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);
+      return tokens.colors[theme][appearance][LARGE_TEXT_ROLES.has(role) ? "accentLarge" : "accentSmall"];
   }
 }
 var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
@@ -1001,7 +793,7 @@ function TextBase({
   weight: weightOverride,
   align,
   numberOfLines,
-  elevation = 1,
+  elevation,
   style,
   accessibilityRole: accessibilityRoleOverride,
   testID,
@@ -1013,6 +805,9 @@ function TextBase({
 }) {
   const tokens = useTokens(elevation);
   const { config, reportingEndpoint } = useNewtoneTheme();
+  const frameCtx = useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? "primary";
+  const resolvedAppearance = frameCtx?.appearance ?? "main";
   const size = sizeOverride ?? "md";
   const fontSlot = tokens.typography.fonts[scope];
   const resolvedFontWeight = weightOverride ? SEMANTIC_WEIGHT_MAP[weightOverride] : config.typography.roleWeights?.[role] ?? ROLE_DEFAULT_WEIGHTS[role];
@@ -1075,18 +870,18 @@ function TextBase({
       fontFamily: fontSlot.family,
       fontSize: activeStep.fontSize,
       fontWeight: String(resolvedFontWeight),
-      color: resolveTextColor(color, tokens),
+      color: resolveTextColor(color, tokens, resolvedTheme, resolvedAppearance, role),
       lineHeight: correctedLineHeight,
       textAlign: align,
       ...vcOffset !== 0 ? { transform: [{ translateY: vcOffset }] } : {},
       ...featureSettings ? { fontFeatureSettings: featureSettings } : {}
     };
-  }, [tokens, fontSlot, step, resolvedStep, responsive, isAdaptive, resolvedFontWeight, color, align, config.typography.fontMetrics, centerVertically, features]);
+  }, [tokens, fontSlot, step, resolvedStep, responsive, isAdaptive, resolvedFontWeight, color, align, config.typography.fontMetrics, centerVertically, features, resolvedTheme, resolvedAppearance]);
   const inferredA11yRole = role === "headline" || role === "title" || role === "heading" ? "header" : void 0;
   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__ */ React16.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React16.createElement(
     Text,
     {
       ref,
@@ -1100,7 +895,7 @@ function TextBase({
     children
   ));
   if (responsive && isAdaptive) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React16.createElement(
       View,
       {
         onLayout: (e) => {
@@ -1115,41 +910,44 @@ function TextBase({
   return textNode;
 }
 function TextSpan({ children, color, weight, italic, underline, highlight, style }) {
-  const tokens = useTokens(1);
+  const tokens = useTokens();
   const scopeCtx = useContext(TextScopeContext);
+  const frameCtx = useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? "primary";
+  const resolvedAppearance = frameCtx?.appearance ?? "main";
   const spanStyle = useMemo(() => {
     const s = {};
-    if (color) s.color = resolveTextColor(color, tokens);
+    if (color) s.color = resolveTextColor(color, tokens, resolvedTheme, resolvedAppearance);
     if (weight && scopeCtx) s.fontWeight = String(scopeCtx.weights[weight]);
     if (italic) s.fontStyle = "italic";
     if (underline) s.textDecorationLine = "underline";
-    if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens);
+    if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens, resolvedTheme, resolvedAppearance);
     return s;
-  }, [tokens, scopeCtx, color, weight, italic, underline, highlight]);
-  return React14.createElement(
+  }, [tokens, scopeCtx, color, weight, italic, underline, highlight, resolvedTheme, resolvedAppearance]);
+  return React16.createElement(
     Text,
     { style: style ? [spanStyle, ...Array.isArray(style) ? style : [style]] : spanStyle },
     children
   );
 }
 function TextBold(props) {
-  return React14.createElement(TextSpan, { ...props, weight: "bold" });
+  return React16.createElement(TextSpan, { ...props, weight: "bold" });
 }
 function TextMedium(props) {
-  return React14.createElement(TextSpan, { ...props, weight: "medium" });
+  return React16.createElement(TextSpan, { ...props, weight: "medium" });
 }
 function TextItalic(props) {
-  return React14.createElement(TextSpan, { ...props, italic: true });
+  return React16.createElement(TextSpan, { ...props, italic: true });
 }
 function TextUnderline(props) {
-  return React14.createElement(TextSpan, { ...props, underline: true });
+  return React16.createElement(TextSpan, { ...props, underline: true });
 }
 function TextHighlight(props) {
-  return React14.createElement(TextSpan, props);
+  return React16.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,222 +956,219 @@ 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
+    };
   }
-  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
-  };
-}
-function resolveGap(prop, tokens) {
-  if (typeof prop === "string" || typeof prop === "number") {
-    const px = resolveSpacing(prop, tokens);
-    return { rowGap: px, columnGap: px };
+  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
+      };
+    }
   }
   return {
-    rowGap: prop.row !== void 0 ? resolveSpacing(prop.row, tokens) : 0,
-    columnGap: prop.column !== void 0 ? resolveSpacing(prop.column, tokens) : 0
+    paddingLeft: base,
+    paddingRight: base,
+    paddingTop: base,
+    paddingBottom: base
   };
 }
-function resolveRadius(value, tokens) {
-  if (typeof value === "number") return value;
-  return tokens.radius[value];
+function semanticToTheme(semantic) {
+  if (semantic === "accent") return "primary";
+  return semantic;
 }
-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 };
-  }
+function getButtonConfig(variant, semantic, size, disabled, tokens) {
+  const sizeConfig = getSizeConfig(size, tokens);
+  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
   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
+    variantColors,
+    sizeTokens: {
+      padding: sizeConfig.padding,
+      gap: sizeConfig.gap,
+      borderRadius: sizeConfig.borderRadius,
+      textSize: sizeConfig.textSize,
+      iconSize: sizeConfig.iconSize
+    }
   };
 }
-function hasPositiveRadius(corners) {
-  return corners.topLeft > 0 || corners.topRight > 0 || corners.bottomLeft > 0 || corners.bottomRight > 0;
-}
-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;
+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 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];
+  };
+  return configs[size];
 }
-function resolveFlexDirection(direction, reverse) {
-  if (direction === "horizontal") {
-    return reverse ? "row-reverse" : "row";
+function getVariantColors(variant, semantic, disabled, tokens) {
+  if (disabled) {
+    const baseColors = getVariantColorsForState(variant, semantic, tokens);
+    const disabledBg = tokens.colors.primary.main.fontSecondary;
+    return {
+      ...baseColors,
+      bg: disabledBg,
+      hoveredBg: disabledBg,
+      pressedBg: disabledBg,
+      textColor: tokens.colors.primary.main.fontTertiary,
+      iconColor: tokens.colors.primary.main.fontTertiary
+    };
   }
-  return reverse ? "column-reverse" : "column";
+  return getVariantColorsForState(variant, semantic, tokens);
 }
-
-// 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;
+function getVariantColorsForState(variant, semantic, tokens) {
+  if (variant === "primary") {
+    if (semantic === "neutral") {
+      return {
+        bg: tokens.colors.primary.main.fontPrimary,
+        hoveredBg: tokens.colors.primary.main.fontSecondary,
+        pressedBg: tokens.colors.primary.main.fontPrimary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: t.emphasis.background,
+      hoveredBg: t.emphasis.fontPrimary,
+      pressedBg: t.emphasis.fontSecondary,
+      textColor: t.main.background,
+      iconColor: t.main.background,
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
+  }
+  if (variant === "secondary") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: tokens.colors.primary.main.fontPrimary,
+        pressedBg: tokens.colors.primary.main.fontSecondary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
+        borderWidth: 1,
+        borderColor: tokens.colors.primary.main.fontSecondary
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: t.tinted.background,
+      hoveredBg: t.tinted.fontPrimary,
+      pressedBg: t.tinted.fontSecondary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
   }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
+  if (variant === "tertiary") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: tokens.colors.primary.main.fontPrimary,
+        pressedBg: tokens.colors.primary.main.fontSecondary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: "transparent",
+      hoveredBg: t.tinted.background,
+      pressedBg: t.tinted.fontPrimary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
   }
-  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
-  );
+  if (variant === "link") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: "transparent",
+        pressedBg: "transparent",
+        textColor: tokens.colors.primary.main.fontSecondary,
+        iconColor: tokens.colors.primary.main.fontSecondary,
+        borderWidth: 0,
+        borderColor: "transparent"
+      };
+    }
+    const t = tokens.colors[semanticToTheme(semantic)];
+    return {
+      bg: "transparent",
+      hoveredBg: "transparent",
+      pressedBg: "transparent",
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
+      borderWidth: 0,
+      borderColor: "transparent"
+    };
+  }
+  return {
+    bg: "transparent",
+    hoveredBg: "transparent",
+    pressedBg: "transparent",
+    textColor: tokens.colors.primary.main.divider,
+    iconColor: tokens.colors.primary.main.divider,
+    borderWidth: 0
+  };
 }
-
-// src/composites/actions/Button/Button.tsx
 function Button({
   children,
   icon,
@@ -1382,22 +1177,25 @@ function Button({
   semantic = "neutral",
   size = "md",
   disabled = false,
+  loading = false,
+  fullWidth = false,
   style,
   textStyle,
   ...pressableProps
 }) {
   const tokens = useTokens();
-  const { variantColors, sizeTokens } = React14.useMemo(
-    () => getButtonConfig(variant, semantic, size, disabled, tokens),
-    [variant, semantic, size, disabled, tokens]
+  const isDisabled = disabled || loading;
+  const { variantColors, sizeTokens } = React16.useMemo(
+    () => getButtonConfig(variant, semantic, size, isDisabled, tokens),
+    [variant, semantic, size, isDisabled, tokens]
   );
-  const padding = React14.useMemo(
-    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
-    [size, icon, children, iconPosition]
+  const padding = React16.useMemo(
+    () => variant === "link" ? { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 } : computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition, variant]
   );
-  return /* @__PURE__ */ React14.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
+  return /* @__PURE__ */ React16.createElement(Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => (
     // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement(
       Wrapper,
       {
         direction: "horizontal",
@@ -1408,41 +1206,45 @@ function Button({
           {
             ...padding,
             // Asymmetric horizontal padding for text optical balance
-            backgroundColor: pressed && !disabled ? variantColors.pressedBg : hovered && !disabled ? variantColors.hoveredBg : variantColors.bg,
-            borderRadius: sizeTokens.borderRadius,
+            backgroundColor: pressed && !isDisabled ? variantColors.pressedBg : hovered && !isDisabled ? variantColors.hoveredBg : variantColors.bg,
+            borderRadius: variant === "link" ? 0 : sizeTokens.borderRadius,
             borderWidth: variantColors.borderWidth,
-            // Always 1 for consistent sizing
             borderColor: variantColors.borderColor || "transparent",
-            opacity: disabled ? 0.4 : 1
+            opacity: isDisabled ? loading ? 0.6 : 0.4 : variant === "link" && pressed ? 0.7 : 1,
+            ...fullWidth && { width: "100%", alignSelf: "stretch" }
           },
           ...Array.isArray(style) ? style : style ? [style] : []
         ]
       },
-      icon && iconPosition === "left" && /* @__PURE__ */ React14.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+      icon && iconPosition === "left" && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
       children && // Text primitive with semantic props + color style override
-      /* @__PURE__ */ React14.createElement(
-        Text2,
+      /* @__PURE__ */ React16.createElement(
+        Text3,
         {
           role: "label",
           size: sizeTokens.textSize,
           centerVertically: true,
           style: [
-            { color: variantColors.textColor },
+            {
+              color: variantColors.textColor,
+              ...variant === "link" && hovered && { textDecorationLine: "underline" }
+            },
             ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
           ]
         },
         children
       ),
-      icon && iconPosition === "right" && /* @__PURE__ */ React14.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+      icon && iconPosition === "right" && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
     )
   ));
 }
-function getCardStyles(tokens, disabled) {
+function getCardStyles(tokens, disabled, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.lg,
       padding: tokens.spacing["16"],
       opacity: disabled ? 0.5 : 1
@@ -1458,355 +1260,286 @@ function Card({
   disabled = false
 }) {
   const tokens = useTokens(elevation);
-  const styles = React14.useMemo(
-    () => getCardStyles(tokens, disabled),
-    [tokens, disabled]
+  const frameCtx = useFrameContext();
+  const styles = React16.useMemo(
+    () => getCardStyles(tokens, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
-  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+  return /* @__PURE__ */ React16.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);
+
+// src/composites/display/Chip/Chip.styles.ts
+function semanticToTheme2(semantic) {
+  if (semantic === "accent") return "primary";
+  return semantic;
+}
+function getSizeConfig2(size) {
+  if (size === "sm") {
+    return { paddingX: 10, paddingY: 3, gap: 4, textRole: "caption", iconSize: 16 };
+  }
+  return { paddingX: 16, paddingY: 8, gap: 6, textRole: "label", iconSize: 20 };
 }
-function useFocusVisible() {
-  const [isFocusVisible, setIsFocusVisible] = useState(false);
-  useEffect(() => {
-    setupModality();
-  }, []);
-  const onFocus = useCallback(() => {
-    if (hadKeyboardEvent) {
-      setIsFocusVisible(true);
+function getVariantColors2(variant, semantic, selected, disabled, tokens) {
+  if (selected) {
+    if (semantic === "neutral") {
+      return {
+        bg: tokens.colors.primary.strong.background,
+        hoveredBg: tokens.colors.primary.strong.fontPrimary,
+        pressedBg: tokens.colors.primary.strong.background,
+        textColor: tokens.colors.primary.strong.fontPrimary,
+        iconColor: tokens.colors.primary.strong.fontPrimary,
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
     }
-  }, []);
-  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;
+    const t2 = tokens.colors[semanticToTheme2(semantic)];
+    return {
+      bg: t2.emphasis.background,
+      hoveredBg: t2.emphasis.fontPrimary,
+      pressedBg: t2.emphasis.background,
+      textColor: t2.main.background,
+      iconColor: t2.main.background,
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
   }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
+  if (disabled) {
+    return {
+      bg: "transparent",
+      hoveredBg: "transparent",
+      pressedBg: "transparent",
+      textColor: tokens.colors.primary.main.fontTertiary,
+      iconColor: tokens.colors.primary.main.fontTertiary,
+      borderWidth: 1,
+      borderColor: tokens.colors.primary.main.divider
+    };
   }
-  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 === "filled") {
+    if (semantic === "neutral") {
+      return {
+        bg: tokens.colors.primary.main.fontPrimary,
+        hoveredBg: tokens.colors.primary.main.fontSecondary,
+        pressedBg: tokens.colors.primary.main.fontPrimary,
+        textColor: tokens.colors.primary.main.divider,
+        iconColor: tokens.colors.primary.main.divider,
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
     }
+    const t2 = tokens.colors[semanticToTheme2(semantic)];
+    return {
+      bg: t2.emphasis.background,
+      hoveredBg: t2.emphasis.fontPrimary,
+      pressedBg: t2.emphasis.fontSecondary,
+      textColor: t2.main.background,
+      iconColor: t2.main.background,
+      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;
+  if (variant === "tinted") {
+    if (semantic === "neutral") {
+      return {
+        bg: tokens.colors.primary.tinted.background,
+        hoveredBg: tokens.colors.primary.tinted.fontPrimary,
+        pressedBg: tokens.colors.primary.tinted.fontSecondary,
+        textColor: tokens.colors.primary.main.fontPrimary,
+        iconColor: tokens.colors.primary.main.fontPrimary,
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
+    }
+    const t2 = tokens.colors[semanticToTheme2(semantic)];
+    return {
+      bg: t2.tinted.background,
+      hoveredBg: t2.tinted.fontPrimary,
+      pressedBg: t2.tinted.fontSecondary,
+      textColor: t2.emphasis.divider,
+      iconColor: t2.emphasis.divider,
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
   }
-  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
+  if (semantic === "neutral") {
+    return {
+      bg: "transparent",
+      hoveredBg: tokens.colors.primary.tinted.background,
+      pressedBg: tokens.colors.primary.tinted.fontPrimary,
+      textColor: tokens.colors.primary.main.fontPrimary,
+      iconColor: tokens.colors.primary.main.fontPrimary,
+      borderWidth: 1,
+      borderColor: tokens.colors.primary.main.divider
     };
   }
-  const insetBoxShadow = frameElevation === -2 ? "inset 0 2px 4px rgba(0,0,0,0.12)" : null;
+  const t = tokens.colors[semanticToTheme2(semantic)];
   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
+    bg: "transparent",
+    hoveredBg: t.tinted.background,
+    pressedBg: t.tinted.fontPrimary,
+    textColor: t.emphasis.divider,
+    iconColor: t.emphasis.divider,
+    borderWidth: 1,
+    borderColor: t.tinted.fontSecondary
   };
 }
-
-// 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;
+function getChipConfig(variant, semantic, size, selected, disabled, tokens) {
+  return {
+    colors: getVariantColors2(variant, semantic, selected, disabled, tokens),
+    sizeTokens: getSizeConfig2(size)
+  };
 }
-function Frame({
+function Chip({
   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
+  variant = "tinted",
+  size = "md",
+  semantic = "neutral",
+  selected = false,
   onPress,
-  href,
   disabled = false,
-  // Accessibility
-  accessibilityLabel,
-  accessibilityHint,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref,
-  // Style override
+  icon,
   style
 }) {
-  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 tokens = useTokens();
+  const { colors, sizeTokens } = React16.useMemo(
+    () => getChipConfig(variant, semantic, size, selected, disabled, tokens),
+    [variant, semantic, size, selected, disabled, tokens]
   );
-  const contextValue = useMemo(
-    () => ({ elevation: resolvedElevation, tokens }),
-    [resolvedElevation, tokens]
+  const content = (state) => /* @__PURE__ */ React16.createElement(
+    Wrapper,
+    {
+      direction: "horizontal",
+      align: "center",
+      gap: sizeTokens.gap,
+      style: [
+        {
+          paddingLeft: sizeTokens.paddingX,
+          paddingRight: sizeTokens.paddingX,
+          paddingTop: sizeTokens.paddingY,
+          paddingBottom: sizeTokens.paddingY,
+          backgroundColor: state?.pressed && !disabled ? colors.pressedBg : state?.hovered && !disabled ? colors.hoveredBg : colors.bg,
+          borderRadius: 99,
+          borderWidth: colors.borderWidth,
+          borderColor: colors.borderColor || "transparent",
+          opacity: disabled ? 0.4 : 1
+        },
+        ...Array.isArray(style) ? style : style ? [style] : []
+      ]
+    },
+    icon && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: colors.iconColor }),
+    /* @__PURE__ */ React16.createElement(
+      Text3,
+      {
+        role: sizeTokens.textRole,
+        weight: selected ? "bold" : "medium",
+        style: { color: colors.textColor }
+      },
+      children
+    )
   );
-  const webOverrides = [];
-  if (styles.gridWebStyle) {
-    webOverrides.push(styles.gridWebStyle);
+  if (onPress) {
+    return /* @__PURE__ */ React16.createElement(Pressable, { onPress, disabled }, ({ pressed, hovered }) => content({ pressed, hovered }));
   }
-  if (styles.insetBoxShadow) {
-    webOverrides.push({ boxShadow: styles.insetBoxShadow });
+  return content();
+}
+
+// src/composites/layout/Divider/Divider.styles.ts
+function getDividerStyles(orientation, spacing, tokens) {
+  const color = tokens.colors.primary.main.divider;
+  if (orientation === "vertical") {
+    return {
+      width: 1,
+      height: "100%",
+      backgroundColor: color,
+      ...spacing != null && { marginLeft: spacing, marginRight: spacing }
+    };
   }
-  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]
+  return {
+    height: 1,
+    width: "100%",
+    backgroundColor: color,
+    ...spacing != null && { marginTop: spacing, marginBottom: spacing }
+  };
+}
+function Divider({
+  orientation = "horizontal",
+  spacing,
+  style
+}) {
+  const tokens = useTokens();
+  const dividerStyle = React16.useMemo(
+    () => getDividerStyles(orientation, spacing, tokens),
+    [orientation, spacing, tokens]
   );
-  const wrappedChildren = useMemo(
-    () => wrapTextChildren(children, textStyle),
-    [children, textStyle]
+  return /* @__PURE__ */ React16.createElement(
+    View,
+    {
+      style: [dividerStyle, ...Array.isArray(style) ? style : style ? [style] : []],
+      accessibilityRole: "none"
+    }
+  );
+}
+
+// src/composites/layout/ContentCard/ContentCard.styles.ts
+function getContentCardStyles(variant, isInteractive, tokens) {
+  const dividerColor = tokens.colors.primary.main.divider;
+  const interactiveStyles = isInteractive ? { cursor: "pointer", textDecorationLine: "none" } : {};
+  if (variant === "elevated") {
+    return {
+      borderRadius: 12,
+      ...interactiveStyles
+    };
+  }
+  if (variant === "bordered") {
+    return {
+      borderWidth: 1,
+      borderColor: dividerColor,
+      borderStyle: "solid",
+      borderRadius: 12,
+      ...interactiveStyles
+    };
+  }
+  return {
+    borderBottomWidth: 1,
+    borderBottomColor: dividerColor,
+    ...interactiveStyles
+  };
+}
+function ContentCard({
+  children,
+  variant = "bordered",
+  href,
+  onPress,
+  padding = 20,
+  gap = 8,
+  disabled = false,
+  style
+}) {
+  const tokens = useTokens();
+  const isInteractive = !!(href || onPress);
+  const variantStyles = React16.useMemo(
+    () => getContentCardStyles(variant, isInteractive, tokens),
+    [variant, isInteractive, tokens]
+  );
+  return /* @__PURE__ */ React16.createElement(
+    Frame,
+    {
+      elevation: variant === "elevated" ? 2 : void 0,
+      appearance: variant === "elevated" ? "tinted" : void 0,
+      href,
+      onPress,
+      disabled,
+      padding,
+      gap,
+      style: [
+        variantStyles,
+        ...Array.isArray(style) ? style : style ? [style] : []
+      ]
+    },
+    children
   );
-  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,
-      {
-        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__ */ React14.createElement(
-      View,
-      {
-        ref,
-        testID,
-        nativeID,
-        accessibilityLabel,
-        accessibilityHint,
-        style: [styles.container, ...webOverrides, ...userStyles]
-      },
-      wrappedChildren
-    )
-  ));
 }
-function getTextInputStyles(tokens, disabled) {
+function getTextInputStyles(tokens, disabled, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
       gap: tokens.spacing["04"]
@@ -1815,22 +1548,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: at.fontTertiary
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       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 ? at.fontTertiary : at.divider,
       opacity: disabled ? 0.5 : 1
     }
   });
 }
+
+// src/composites/form-controls/TextInput/TextInput.tsx
 function TextInput({
   label,
   disabled = false,
@@ -1838,21 +1573,25 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getTextInputStyles(tokens, disabled),
-    [tokens, disabled]
+  const frameCtx = useFrameContext();
+  const theme = frameCtx?.theme ?? "primary";
+  const appearance = frameCtx?.appearance ?? "main";
+  const styles = React16.useMemo(
+    () => getTextInputStyles(tokens, disabled, theme, appearance),
+    [tokens, disabled, theme, appearance]
   );
-  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__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React16.createElement(
     TextInput$1,
     {
       style: styles.input,
       editable: !disabled,
-      placeholderTextColor: srgbToHex(tokens.textSecondary.srgb),
+      placeholderTextColor: tokens.colors[theme][appearance].fontTertiary,
       ...textInputProps
     }
   ));
 }
-function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen) {
+function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   const widthStyle = width === "trigger" ? { left: 0, right: 0 } : typeof width === "number" ? { width, left: 0 } : { left: 0 };
   return StyleSheet.create({
     container: {
@@ -1863,9 +1602,9 @@ function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpe
       position: "absolute",
       top: triggerHeight + offset,
       ...widthStyle,
-      backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+      backgroundColor: at.fontPrimary,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       maxHeight,
       zIndex: 1e3,
@@ -1894,6 +1633,7 @@ function Popover({
   contentStyle
 }) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
   const containerRef = useRef(null);
   const [triggerHeight, setTriggerHeight] = useState(0);
   const onTriggerLayout = useCallback(
@@ -1933,8 +1673,8 @@ function Popover({
     [closeOnEscape, onClose]
   );
   const styles = useMemo(
-    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
-    [tokens, triggerHeight, offset, maxHeight, width, isOpen]
+    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance]
   );
   const containerStyles = useMemo(
     () => [styles.container, ...Array.isArray(style) ? style : style ? [style] : []],
@@ -1945,15 +1685,15 @@ function Popover({
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React16.createElement(
     View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React14.createElement(View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React14.createElement(View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React16.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React16.createElement(View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
@@ -1980,7 +1720,8 @@ function usePopover(options) {
 function isOptionGroup(item) {
   return "options" in item;
 }
-function getSelectStyles(tokens, disabled, size, isOpen) {
+function getSelectStyles(tokens, disabled, size, isOpen, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   const isSm = size === "sm";
   const fontSize = isSm ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   const iconSize = fontSize + 2;
@@ -1996,14 +1737,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: at.fontTertiary
     },
     trigger: {
       flexDirection: "row",
       alignItems: "center",
-      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
@@ -2014,7 +1755,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 ? at.fontTertiary : at.divider
     },
     iconWrapper: {
       position: "absolute",
@@ -2027,7 +1768,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: at.fontTertiary,
       textTransform: "uppercase",
       letterSpacing: 0.5,
       paddingVertical: tokens.spacing["04"],
@@ -2146,11 +1887,14 @@ function SelectOptionRow({
   size
 }) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
+  const at = tokens.colors[frameCtx?.theme ?? "primary"][frameCtx?.appearance ?? "main"];
+  const emphasisAt = tokens.colors[frameCtx?.theme ?? "primary"].emphasis;
   const paddingVertical = size === "sm" ? tokens.spacing["04"] : tokens.spacing["08"];
   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__ */ React16.createElement(
       Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -2161,7 +1905,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React16.createElement(
     Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -2177,10 +1921,10 @@ function SelectOptionRow({
           paddingHorizontal
         },
         isSelected && {
-          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb)
+          backgroundColor: at.fontSecondary
         },
         isFocused && !isSelected && {
-          backgroundColor: `${srgbToHex(tokens.border.srgb)}20`
+          backgroundColor: `${at.fontSecondary}20`
         },
         option.disabled && {
           opacity: 0.5
@@ -2190,7 +1934,7 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement(
       Text,
       {
         style: [
@@ -2198,30 +1942,32 @@ function SelectOptionRow({
             flex: 1,
             fontFamily: tokens.typography.fonts.main.family,
             fontSize,
-            color: srgbToHex(tokens.textPrimary.srgb)
+            color: at.divider
           },
           isSelected && {
             fontWeight: tokens.typography.fonts.main.weights.medium,
-            color: srgbToHex(tokens.accent.fill.srgb)
+            color: emphasisAt.divider
           },
           option.disabled && {
-            color: srgbToHex(tokens.textSecondary.srgb)
+            color: at.fontTertiary
           }
         ],
         numberOfLines: 1
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React14.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React14.createElement(
+    isSelected && /* @__PURE__ */ React16.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React16.createElement(
       Icon,
       {
         name: "check",
         size: fontSize,
-        color: srgbToHex(tokens.accent.fill.srgb)
+        color: emphasisAt.divider
       }
     ))
   );
 }
+
+// src/composites/form-controls/Select/Select.tsx
 function flattenOptions(items) {
   const result = [];
   for (const item of items) {
@@ -2246,6 +1992,7 @@ function Select({
   style
 }) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
   const { isOpen, open, close, toggle } = usePopover();
   const flatOptions = useMemo(() => flattenOptions(options), [options]);
   const { focusedIndex, handleKeyDown } = useSelect({
@@ -2259,15 +2006,18 @@ function Select({
     onClose: close,
     onOpen: open
   });
+  const inheritedTheme = frameCtx?.theme;
+  const inheritedAppearance = frameCtx?.appearance;
   const styles = useMemo(
-    () => getSelectStyles(tokens, disabled, size, isOpen),
-    [tokens, disabled, size, isOpen]
+    () => getSelectStyles(tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance),
+    [tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance]
   );
   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 at = tokens.colors[inheritedTheme ?? "primary"][inheritedAppearance ?? "main"];
+  const iconColor = disabled ? at.fontTertiary : at.divider;
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React14.createElement(
+  const trigger = /* @__PURE__ */ React16.createElement(
     Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -2277,8 +2027,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__ */ React16.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React16.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React16.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
@@ -2287,14 +2037,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__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React16.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement(
       ScrollView,
       {
         bounces: false,
@@ -2303,7 +2053,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__ */ React16.createElement(View, { key: item.label }, /* @__PURE__ */ React16.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React16.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -2319,7 +2069,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React14.createElement(
+        return /* @__PURE__ */ React16.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -2342,7 +2092,9 @@ var TRACK_WIDTH = 40;
 var TRACK_HEIGHT = 22;
 var THUMB_SIZE = 18;
 var THUMB_OFFSET = 2;
-function getToggleStyles(tokens, value, disabled) {
+function getToggleStyles(tokens, value, disabled, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
+  const emphasisAt = tokens.colors[theme].emphasis;
   return StyleSheet.create({
     container: {
       flexDirection: "row",
@@ -2354,13 +2106,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: at.fontTertiary
     },
     track: {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
+      backgroundColor: value ? emphasisAt.divider : at.fontSecondary,
       justifyContent: "center",
       paddingHorizontal: THUMB_OFFSET
     },
@@ -2368,7 +2120,7 @@ function getToggleStyles(tokens, value, disabled) {
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       alignSelf: value ? "flex-end" : "flex-start"
     }
   });
@@ -2383,16 +2135,17 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
-    () => getToggleStyles(tokens, value, disabled),
-    [tokens, value, disabled]
+  const frameCtx = useFrameContext();
+  const styles = React16.useMemo(
+    () => getToggleStyles(tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
-  const handlePress = React14.useCallback(() => {
+  const handlePress = React16.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__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React16.createElement(
     Pressable,
     {
       onPress: handlePress,
@@ -2400,7 +2153,7 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React14.createElement(View, { style: styles.track }, /* @__PURE__ */ React14.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React16.createElement(View, { style: styles.track }, /* @__PURE__ */ React16.createElement(View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
@@ -2420,23 +2173,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.colors.primary.main.fontTertiary
     },
     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.colors.primary.main.divider
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: "transparent",
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
@@ -2453,21 +2206,21 @@ function getSliderStyles(tokens, disabled) {
       right: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: srgbToHex(tokens.border.srgb)
+      backgroundColor: tokens.colors.primary.main.fontSecondary
     },
     trackFill: {
       position: "absolute",
       left: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
+      backgroundColor: tokens.colors.primary.emphasis.divider
     },
     thumb: {
       position: "absolute",
       width: THUMB_SIZE2,
       height: THUMB_SIZE2,
       borderRadius: THUMB_SIZE2 / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
+      backgroundColor: tokens.colors.primary.emphasis.divider
     }
   });
 }
@@ -2486,42 +2239,42 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
+  const styles = React16.useMemo(
     () => getSliderStyles(tokens, 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 = React16.useRef(null);
+  const trackWidth = React16.useRef(0);
+  const trackPageX = React16.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React16.useState(0);
+  const onValueChangeRef = React16.useRef(onValueChange);
+  const minRef = React16.useRef(min);
+  const maxRef = React16.useRef(max);
+  const stepRef = React16.useRef(step);
+  const disabledRef = React16.useRef(disabled);
+  React16.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React14.useCallback((pageX) => {
+  const computeValue = React16.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 = React16.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2549,7 +2302,7 @@ function Slider({
     fillLeft = 0;
     fillWidth = thumbLeft + THUMB_SIZE2 / 2;
   }
-  const handleValueTextSubmit = React14.useCallback(
+  const handleValueTextSubmit = React16.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2558,12 +2311,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React14.useState(String(value));
-  React14.useEffect(() => {
+  const [editText, setEditText] = React16.useState(String(value));
+  React16.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__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React16.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React16.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2575,7 +2328,7 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React14.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React14.createElement(
+  ) : showValue && /* @__PURE__ */ React16.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React16.createElement(
     View,
     {
       ref: trackRef,
@@ -2590,45 +2343,19 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React14.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React14.createElement(View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
-    /* @__PURE__ */ React14.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React16.createElement(View, { style: styles.trackRail }),
+    /* @__PURE__ */ React16.createElement(View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
+    /* @__PURE__ */ React16.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) => {
@@ -2651,23 +2378,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.colors.primary.main.fontTertiary
     },
     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.colors.primary.main.divider
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: "transparent",
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
@@ -2697,7 +2424,7 @@ function getHueSliderStyles(tokens, disabled) {
       borderRadius: THUMB_SIZE3 / 2,
       backgroundColor: "#ffffff",
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb)
+      borderColor: tokens.colors.primary.main.fontSecondary
     }
   });
 }
@@ -2707,7 +2434,7 @@ function HueSlider({
   value,
   onValueChange,
   min = 0,
-  max = 359,
+  max = 360,
   label,
   showValue = false,
   editableValue = false,
@@ -2715,42 +2442,42 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
+  const styles = React16.useMemo(
     () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React14.useMemo(
+  const segments = React16.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 = React16.useRef(null);
+  const trackWidth = React16.useRef(0);
+  const trackPageX = React16.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React16.useState(0);
+  const onValueChangeRef = React16.useRef(onValueChange);
+  const minRef = React16.useRef(min);
+  const maxRef = React16.useRef(max);
+  const disabledRef = React16.useRef(disabled);
+  React16.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React14.useCallback((pageX) => {
+  const computeHue = React16.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 = React16.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2762,11 +2489,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 = React16.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2775,12 +2502,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React14.useState(String(value));
-  React14.useEffect(() => {
+  const [editText, setEditText] = React16.useState(String(value));
+  React16.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__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React16.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React16.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2792,7 +2519,7 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React14.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React14.createElement(
+  ) : showValue && /* @__PURE__ */ React16.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React16.createElement(
     View,
     {
       ref: trackRef,
@@ -2807,10 +2534,66 @@ 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__ */ React16.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React16.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React16.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) {
@@ -2828,7 +2611,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.colors.primary.main.fontTertiary
     },
     trackContainer: {
       height: TRACK_HEIGHT4 + THUMB_SIZE4,
@@ -2854,13 +2637,13 @@ function getColorScaleSliderStyles(tokens, disabled) {
       borderRadius: THUMB_SIZE4 / 2,
       backgroundColor: "#ffffff",
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb)
+      borderColor: tokens.colors.primary.main.fontSecondary
     },
     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.colors.error.emphasis.divider
     }
   });
 }
@@ -2876,40 +2659,42 @@ function ColorScaleSlider({
   snap = false,
   disabled = false,
   animateValue = false,
+  useP3: _useP3,
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React14.useMemo(
+  const { gamut } = useNewtoneTheme();
+  const styles = React16.useMemo(
     () => getColorScaleSliderStyles(tokens, 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 = React16.useRef(null);
+  const trackWidth = React16.useRef(0);
+  const trackPageX = React16.useRef(0);
+  const isDragging = React16.useRef(false);
+  const thumbAnim = React16.useRef(new Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React16.useState(0);
+  const onValueChangeRef = React16.useRef(onValueChange);
+  const disabledRef = React16.useRef(disabled);
+  const colorsLengthRef = React16.useRef(colors.length);
+  const trimEndsRef = React16.useRef(trimEnds);
+  const snapRef = React16.useRef(snap);
+  React16.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     colorsLengthRef.current = colors.length;
   }, [colors.length]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     trimEndsRef.current = trimEnds;
   }, [trimEnds]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     snapRef.current = snap;
   }, [snap]);
-  const computeNv = React14.useCallback((pageX) => {
+  const computeNv = React16.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const totalSteps2 = colorsLengthRef.current - 1;
@@ -2924,7 +2709,7 @@ function ColorScaleSlider({
     }
     return nv;
   }, []);
-  const panResponder = React14.useRef(
+  const panResponder = React16.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2952,7 +2737,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(() => {
+  React16.useEffect(() => {
     if (isDragging.current || !animateValue) {
       thumbAnim.setValue(thumbLeft);
     } else {
@@ -2963,7 +2748,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__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React16.createElement(
     View,
     {
       ref: trackRef,
@@ -2978,17 +2763,18 @@ 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__ */ React16.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React16.createElement(View, { key: i, style: [styles.segment, { backgroundColor: gamut === "p3" ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React16.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React16.createElement(Text, { style: styles.warning }, warning));
 }
-function getAppShellStyles(tokens) {
+function getAppShellStyles(tokens, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: "row",
       overflow: "hidden",
-      backgroundColor: srgbToHex(tokens.background.srgb)
+      backgroundColor: at.background
     },
     main: {
       flex: 1,
@@ -3002,17 +2788,22 @@ 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 frameCtx = useFrameContext();
+  const styles = React16.useMemo(
+    () => getAppShellStyles(tokens, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, frameCtx?.theme, frameCtx?.appearance]
+  );
+  return /* @__PURE__ */ React16.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React16.createElement(View, { style: styles.main }, children));
 }
-function getSidebarStyles({ tokens, width, bordered }) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+function getSidebarStyles({ tokens, width, bordered, theme = "primary", appearance = "main" }) {
+  const at = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
   return StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: "column",
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       borderRightWidth: bordered ? 1 : 0,
       borderRightColor: borderColor
     },
@@ -3041,14 +2832,16 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React14.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered }),
-    [tokens, width, bordered]
+  const frameCtx = useFrameContext();
+  const styles = React16.useMemo(
+    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
-  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__ */ React16.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React16.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React16.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React16.createElement(View, { style: styles.footer }, footer));
 }
-function getNavbarStyles({ tokens, height, bordered }) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+function getNavbarStyles({ tokens, height, bordered, theme = "primary", appearance = "main" }) {
+  const at = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
   return StyleSheet.create({
     container: {
       flexDirection: "row",
@@ -3056,7 +2849,7 @@ function getNavbarStyles({ tokens, height, bordered }) {
       height,
       flexShrink: 0,
       paddingHorizontal: 24,
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       borderBottomWidth: bordered ? 1 : 0,
       borderBottomColor: borderColor
     },
@@ -3083,11 +2876,51 @@ function Navbar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React14.useMemo(
-    () => getNavbarStyles({ tokens, height, bordered }),
-    [tokens, height, bordered]
+  const frameCtx = useFrameContext();
+  const styles = React16.useMemo(
+    () => getNavbarStyles({ tokens, height, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, height, bordered, frameCtx?.theme, frameCtx?.appearance]
+  );
+  return /* @__PURE__ */ React16.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React16.createElement(View, { style: styles.right }, right)));
+}
+function LogoMonogram({ colorValue = 0, size = 32 }) {
+  const fg = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
+  return /* @__PURE__ */ React16.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 168 168",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React16.createElement("path", { d: "M39.3574 70H12L20 84H36L30.2681 94.0309C28.8627 96.4903 28.8627 99.5096 30.2681 101.969L36 112L49.7319 87.9691C51.1373 85.5097 51.1373 82.4903 49.7319 80.0309L46.3034 74.0309C44.879 71.5383 42.2283 70 39.3574 70Z", fill: fg }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M84 112H36L41.6966 121.969C43.121 124.462 45.7717 126 48.6426 126H79.3574C82.2283 126 84.879 124.462 86.3034 121.969L93.7319 108.969C95.1373 106.51 95.1373 103.49 93.7319 101.031L84 84L76 98L84 112Z", fill: fg }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M76 70L84 84H64.6426C61.7717 84 59.121 82.4617 57.6966 79.9691L50.268 66.9691C48.8626 64.5097 48.8626 61.4903 50.268 59.0309L65.6966 32.0309C67.121 29.5383 69.7717 28 72.6426 28H84L60 70H76Z", fill: fg }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M95.3574 28H84L132 112L137.732 101.969C139.137 99.5097 139.137 96.4903 137.732 94.0309L102.303 32.0309C100.879 29.5383 98.2283 28 95.3574 28Z", fill: fg }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M104.643 112H132L126.303 121.969C124.879 124.462 122.228 126 119.357 126H108L116 140L108 154L94.268 129.969C92.8626 127.51 92.8626 124.49 94.268 122.031L97.6966 116.031C99.121 113.538 101.772 112 104.643 112Z", fill: fg })
+  );
+}
+function LogoWordmark({ fill = "black" }) {
+  return /* @__PURE__ */ React16.createElement(
+    "svg",
+    {
+      height: 32,
+      viewBox: "0 0 504 168",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React16.createElement("path", { d: "M8 126H22V42H14.4C12.1598 42 11.0397 42 10.184 42.436C9.43139 42.8195 8.81947 43.4314 8.43597 44.184C8 45.0397 8 46.1598 8 48.4V126Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M76 108.5V42H90V119.6C90 121.84 90 122.96 89.564 123.816C89.1805 124.569 88.5686 125.181 87.816 125.564C86.9603 126 85.8402 126 83.6 126H77.4281C74.7227 126 73.37 126 72.1603 125.605C71.0899 125.256 70.1054 124.684 69.271 123.928C68.328 123.074 67.6569 121.9 66.3146 119.551L22 42H30.5719C33.2773 42 34.63 42 35.8397 42.3949C36.9101 42.7442 37.8946 43.3156 38.729 44.0716C39.672 44.926 40.3431 46.1005 41.6854 48.4494L76 108.5Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M152.208 68.2077C153.395 69.3951 153.989 69.9888 154.439 70.6738C154.838 71.2814 155.152 71.9406 155.374 72.6332C155.623 73.4139 155.711 74.2489 155.886 75.9189L156.884 85.3951C157.27 89.0678 157.464 90.9042 156.867 92.3245C156.343 93.5721 155.412 94.6057 154.226 95.2577C152.876 96 151.03 96 147.337 96H112V114H154V126H115.302C113.345 126 112.367 126 111.446 125.779C110.63 125.583 109.849 125.26 109.134 124.821C108.326 124.326 107.635 123.635 106.251 122.251L101.749 117.749C100.365 116.365 99.6736 115.674 99.1789 114.866C98.7402 114.151 98.417 113.37 98.221 112.554C98 111.633 98 110.655 98 108.698V75.3019C98 73.3452 98 72.3668 98.221 71.4461C98.417 70.6299 98.7402 69.8495 99.1789 69.1337C99.6736 68.3264 100.365 67.6346 101.749 66.251L106.251 61.749C107.635 60.3654 108.326 59.6736 109.134 59.1789C109.849 58.7402 110.63 58.417 111.446 58.221C112.367 58 113.345 58 115.302 58H136.698C138.655 58 139.633 58 140.554 58.221C141.37 58.417 142.151 58.7402 142.866 59.1789C143.674 59.6736 144.365 60.3654 145.749 61.749L152.208 68.2077ZM112 70V87.5332L144.492 86.4502L141.895 70H112Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M492.208 68.2077C493.395 69.3951 493.989 69.9888 494.439 70.6738C494.838 71.2814 495.152 71.9406 495.374 72.6332C495.623 73.4139 495.711 74.2489 495.886 75.9189L496.884 85.3951C497.27 89.0678 497.464 90.9042 496.867 92.3245C496.343 93.5721 495.412 94.6057 494.226 95.2577C492.876 96 491.03 96 487.337 96H452V114H494V126H455.302C453.345 126 452.367 126 451.446 125.779C450.63 125.583 449.849 125.26 449.134 124.821C448.326 124.326 447.635 123.635 446.251 122.251L441.749 117.749C440.365 116.365 439.674 115.674 439.179 114.866C438.74 114.151 438.417 113.37 438.221 112.554C438 111.633 438 110.655 438 108.698V75.3019C438 73.3452 438 72.3668 438.221 71.4461C438.417 70.6299 438.74 69.8495 439.179 69.1337C439.674 68.3264 440.365 67.6346 441.749 66.251L446.251 61.749C447.635 60.3654 448.326 59.6736 449.134 59.1789C449.849 58.7402 450.63 58.417 451.446 58.221C452.367 58 453.345 58 455.302 58H476.698C478.655 58 479.633 58 480.554 58.221C481.37 58.417 482.151 58.7402 482.866 59.1789C483.674 59.6736 484.365 60.3654 485.749 61.749L492.208 68.2077ZM452 70V87.5332L484.492 86.4502L481.895 70H452Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M168.794 117.797L160 58H174L184 126H178.291C175.35 126 173.88 126 172.695 125.46C171.651 124.984 170.765 124.219 170.142 123.255C169.435 122.161 169.222 120.706 168.794 117.797Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M192.794 66.2033L184 126H187.674C190.626 126 192.102 126 193.29 125.457C194.337 124.979 195.224 124.209 195.846 123.241C196.551 122.141 196.76 120.68 197.177 117.758L204 70L210.823 117.758C211.24 120.68 211.449 122.141 212.154 123.241C212.776 124.209 213.663 124.979 214.71 125.457C215.898 126 217.374 126 220.326 126H224L215.206 66.2033C214.778 63.2936 214.565 61.8387 213.858 60.7448C213.235 59.7808 212.349 59.0155 211.305 58.5398C210.12 58 208.65 58 205.709 58H202.291C199.35 58 197.88 58 196.695 58.5398C195.651 59.0155 194.765 59.7808 194.142 60.7448C193.435 61.8387 193.222 63.2936 192.794 66.2033Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M224 126H229.709C232.65 126 234.12 126 235.305 125.46C236.349 124.984 237.235 124.219 237.858 123.255C238.565 122.161 238.778 120.706 239.206 117.797L246.235 70H298V58H251.302C249.345 58 248.367 58 247.446 58.221C246.63 58.417 245.849 58.7402 245.134 59.1789C244.326 59.6736 243.635 60.3654 242.251 61.749L234.927 69.0727C233.815 70.1845 233.26 70.7405 232.829 71.3785C232.447 71.9446 232.139 72.5573 231.913 73.2016C231.658 73.9277 231.543 74.7056 231.315 76.2613L224 126Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M264.251 122.251L259.749 117.749C258.365 116.365 257.674 115.674 257.179 114.866C256.74 114.151 256.417 113.37 256.221 112.554C256 111.633 256 110.655 256 108.698V69.2L260 42H270V114H298V126H273.302C271.345 126 270.367 126 269.446 125.779C268.63 125.583 267.849 125.26 267.134 124.821C266.326 124.326 265.635 123.635 264.251 122.251Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M358.251 66.251C359.635 67.6346 360.326 68.3264 360.821 69.1337C361.26 69.8495 361.583 70.6299 361.779 71.4461C362 72.3668 362 73.3452 362 75.3019V108.698C362 110.655 362 111.633 361.779 112.554C361.583 113.37 361.26 114.151 360.821 114.866C360.326 115.674 359.635 116.365 358.251 117.749L353.749 122.251C352.365 123.635 351.674 124.326 350.866 124.821C350.151 125.26 349.37 125.583 348.554 125.779C347.633 126 346.655 126 344.698 126H319.302C317.345 126 316.367 126 315.446 125.779C314.63 125.583 313.849 125.26 313.134 124.821C312.326 124.326 311.635 123.635 310.251 122.251L305.749 117.749C304.365 116.365 303.674 115.674 303.179 114.866C302.74 114.151 302.417 113.37 302.221 112.554C302 111.633 302 110.655 302 108.698V75.3019C302 73.3452 302 72.3668 302.221 71.4461C302.417 70.6299 302.74 69.8495 303.179 69.1337C303.674 68.3264 304.365 67.6346 305.749 66.251L310.224 61.7757C311.606 60.3937 312.297 59.7027 313.104 59.2083C313.818 58.77 314.598 58.4468 315.413 58.2506C316.333 58.0292 317.31 58.0284 319.264 58.0267L344.692 58.0046C346.651 58.0029 347.63 58.0021 348.552 58.2228C349.369 58.4185 350.151 58.7417 350.867 59.1807C351.676 59.6757 352.368 60.3684 353.754 61.7536L358.251 66.251ZM316 70V114H348V70H316Z", fill }),
+    /* @__PURE__ */ React16.createElement("path", { d: "M370 64.4V126H384V70H416V126H430V75.3019C430 73.3452 430 72.3668 429.779 71.4461C429.583 70.6299 429.26 69.8495 428.821 69.1337C428.326 68.3264 427.635 67.6346 426.251 66.251L421.749 61.749C420.365 60.3654 419.674 59.6736 418.866 59.1789C418.151 58.7402 417.37 58.417 416.554 58.221C415.633 58 414.655 58 412.698 58H376.4C374.16 58 373.04 58 372.184 58.436C371.431 58.8195 370.819 59.4314 370.436 60.184C370 61.0397 370 62.1598 370 64.4Z", fill })
   );
-  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)));
 }
 
 // src/registry/registry.ts
@@ -4035,6 +3868,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, Chip, ColorScaleSlider, ContentCard, Divider, Frame, HueSlider, ICON_CATALOG, Icon, LogoMonogram, LogoWordmark, 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