@newtonedev/components 0.1.13 → 0.1.14

package/dist/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var newtoneApi = require('newtone-api');
-var React13 = require('react');
+var React16 = require('react');
 var reactNative = require('react-native');
 var fonts = require('@newtonedev/fonts');
 var newtone = require('newtone');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React13__default = /*#__PURE__*/_interopDefault(React13);
+var React16__default = /*#__PURE__*/_interopDefault(React16);
 
 // src/index.ts
 var hadKeyboardEvent = false;
@@ -39,16 +39,16 @@ function setupModality() {
   }, true);
 }
 function useFocusVisible() {
-  const [isFocusVisible, setIsFocusVisible] = React13.useState(false);
-  React13.useEffect(() => {
+  const [isFocusVisible, setIsFocusVisible] = React16.useState(false);
+  React16.useEffect(() => {
     setupModality();
   }, []);
-  const onFocus = React13.useCallback(() => {
+  const onFocus = React16.useCallback(() => {
     if (hadKeyboardEvent) {
       setIsFocusVisible(true);
     }
   }, []);
-  const onBlur = React13.useCallback(() => {
+  const onBlur = React16.useCallback(() => {
     setIsFocusVisible(false);
   }, []);
   const focusProps = { onFocus, onBlur };
@@ -160,8 +160,9 @@ function resolveFlexDirection(direction, reverse) {
 function getFrameStyles(input) {
   const {
     tokens,
-    gamut,
     frameElevation,
+    theme = "primary",
+    appearance = "main",
     layout = "flex",
     direction = "vertical",
     wrap = false,
@@ -178,13 +179,22 @@ function getFrameStyles(input) {
     maxWidth,
     minHeight,
     maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    opacity,
     radius,
     bordered = false,
     disabled = false
   } = input;
   const container = {};
-  container.backgroundColor = tokens.background[gamut];
-  container.color = tokens.textPrimary[gamut];
+  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);
@@ -215,6 +225,12 @@ function getFrameStyles(input) {
   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;
@@ -225,9 +241,10 @@ function getFrameStyles(input) {
       container.overflow = "hidden";
     }
   }
+  if (overflow) container.overflow = overflow;
   if (bordered) {
     container.borderWidth = 1;
-    container.borderColor = tokens.border[gamut];
+    container.borderColor = appearanceTokens.fontTertiary;
   }
   if (frameElevation === 2) {
     container.shadowColor = "#000";
@@ -236,11 +253,13 @@ function getFrameStyles(input) {
     container.shadowRadius = 6;
     container.elevation = 4;
   }
-  if (disabled) {
+  if (opacity !== void 0) {
+    container.opacity = opacity;
+  } else if (disabled) {
     container.opacity = 0.5;
   }
   const pressed = reactNative.StyleSheet.create({
-    s: { backgroundColor: tokens.backgroundSunken[gamut] }
+    s: { backgroundColor: appearanceTokens.fontSecondary }
   }).s;
   let gridWebStyle = null;
   if (layout === "grid") {
@@ -264,13 +283,18 @@ function getFrameStyles(input) {
 
 // src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
-  return React13__default.default.Children.map(children, (child) => {
+  return React16__default.default.Children.map(children, (child) => {
     if (typeof child === "string" || typeof child === "number") {
-      return /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: textStyle }, child);
+      return /* @__PURE__ */ React16__default.default.createElement(reactNative.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;
@@ -280,6 +304,11 @@ function Frame({
   children,
   // Elevation
   elevation,
+  // Scheme
+  scheme,
+  // Theme / Appearance
+  theme,
+  appearance,
   // Layout
   layout,
   direction,
@@ -300,6 +329,16 @@ function Frame({
   maxWidth,
   minHeight,
   maxHeight,
+  // Positioning
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  overflow,
+  pointerEvents,
+  opacity,
   // Appearance
   radius,
   bordered,
@@ -317,27 +356,41 @@ function Frame({
   // Style override
   style
 }) {
-  const { config, mode, gamut } = newtoneApi.useNewtoneTheme();
+  const themeCtx = newtoneApi.useNewtoneTheme();
+  const { mode, gamut } = themeCtx;
   const parentFrameCtx = newtoneApi.useFrameContext();
+  const resolvedConfig = React16.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 = React13.useMemo(() => {
+  const tokens = React16.useMemo(() => {
     return newtoneApi.computeTokens(
-      config.colorSystem,
+      resolvedConfig.colorSystem,
       mode,
-      resolvedElevation,
-      config.spacing,
-      config.radius,
-      config.typography,
-      config.icons,
-      config.tokenOverrides
+      gamut,
+      ELEVATION_MAP[resolvedElevation],
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings,
+      resolvedConfig.swatchDefaults
     );
-  }, [config, mode, resolvedElevation]);
-  const styles = React13.useMemo(
+  }, [resolvedConfig, mode, gamut, resolvedElevation]);
+  const styles = React16.useMemo(
     () => getFrameStyles({
       tokens,
-      gamut,
       frameElevation: resolvedFrameElevation,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance,
       layout,
       direction,
       wrap,
@@ -354,14 +407,23 @@ function Frame({
       maxWidth,
       minHeight,
       maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity,
       radius,
       bordered,
       disabled
     }),
     [
       tokens,
-      gamut,
       resolvedFrameElevation,
+      resolvedTheme,
+      resolvedAppearance,
       layout,
       direction,
       wrap,
@@ -378,15 +440,38 @@ function Frame({
       maxWidth,
       minHeight,
       maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity,
       radius,
       bordered,
       disabled
     ]
   );
-  const contextValue = React13.useMemo(
-    () => ({ elevation: resolvedElevation, tokens }),
-    [resolvedElevation, tokens]
+  const resolvedScheme = scheme ?? parentFrameCtx?.scheme;
+  const contextValue = React16.useMemo(
+    () => ({
+      elevation: resolvedElevation,
+      tokens,
+      scheme: resolvedScheme,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance
+    }),
+    [resolvedElevation, tokens, resolvedScheme, resolvedTheme, resolvedAppearance]
   );
+  const schemeThemeCtx = React16.useMemo(() => {
+    if (!isSchemeOverride) return null;
+    return {
+      ...themeCtx,
+      config: resolvedConfig,
+      activeScheme: scheme ?? themeCtx.activeScheme
+    };
+  }, [isSchemeOverride, themeCtx, resolvedConfig, scheme]);
   const webOverrides = [];
   if (styles.gridWebStyle) {
     webOverrides.push(styles.gridWebStyle);
@@ -400,68 +485,65 @@ function Frame({
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: "solid",
-    outlineColor: tokens.accent.fill[gamut],
+    outlineColor: tokens.colors[resolvedTheme].emphasis.background,
     outlineOffset: 2
   } : void 0;
   const webFocusProps = isInteractive ? focusProps : {};
-  const textStyle = React13.useMemo(
+  const textStyle = React16.useMemo(
     () => ({
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary,
       fontSize: tokens.typography.fontSizes["05"],
       fontFamily: tokens.typography.fonts.main.family,
       lineHeight: tokens.typography.lineHeights["06"]
     }),
-    [tokens]
+    [tokens, resolvedTheme, resolvedAppearance]
   );
-  const wrappedChildren = React13.useMemo(
+  const wrappedChildren = React16.useMemo(
     () => wrapTextChildren(children, textStyle),
     [children, textStyle]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(newtoneApi.FrameContext.Provider, { value: contextValue }, isInteractive ? (
-    // Pressable handles taps. When href is set, react-native-web renders
-    // it as an <a> tag so it works like a regular link on the web.
-    /* @__PURE__ */ React13__default.default.createElement(
-      reactNative.Pressable,
-      {
-        ref,
-        testID,
-        nativeID,
-        accessibilityLabel,
-        accessibilityHint,
-        accessibilityState: disabled ? { disabled: true } : void 0,
-        onPress,
-        disabled,
-        ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
-        ...webFocusProps,
-        style: ({ pressed }) => [
-          styles.container,
-          pressed && !disabled && styles.pressed,
-          focusRingStyle,
-          ...webOverrides,
-          ...userStyles
-        ]
-      },
-      wrappedChildren
-    )
-  ) : (
-    // Non-interactive Frame: just a plain View with no tap handling.
-    /* @__PURE__ */ React13__default.default.createElement(
-      reactNative.View,
-      {
-        ref,
-        testID,
-        nativeID,
-        accessibilityLabel,
-        accessibilityHint,
-        style: [styles.container, ...webOverrides, ...userStyles]
-      },
-      wrappedChildren
-    )
-  ));
+  const content = isInteractive ? /* @__PURE__ */ React16__default.default.createElement(
+    reactNative.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__default.default.createElement(
+    reactNative.View,
+    {
+      ref,
+      testID,
+      nativeID,
+      pointerEvents,
+      accessibilityLabel,
+      accessibilityHint,
+      style: [styles.container, ...webOverrides, ...userStyles]
+    },
+    wrappedChildren
+  );
+  const wrappedContent = schemeThemeCtx ? /* @__PURE__ */ React16__default.default.createElement(newtoneApi._ThemeContext.Provider, { value: schemeThemeCtx }, content) : content;
+  return /* @__PURE__ */ React16__default.default.createElement(newtoneApi.FrameContext.Provider, { value: contextValue }, wrappedContent);
 }
 function Icon({
-  name,
-  size,
+  name = "add",
+  size = 24,
   opticalSize,
   fill = 0,
   color,
@@ -474,7 +556,10 @@ function Icon({
   ref
 }) {
   const tokens = newtoneApi.useTokens();
-  const iconStyle = React13.useMemo(() => {
+  const frameCtx = newtoneApi.useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? "primary";
+  const resolvedAppearance = frameCtx?.appearance ?? "main";
+  const iconStyle = React16.useMemo(() => {
     const fontSize = size ?? tokens.typography.fontSizes["05"];
     const getOpticalSize = (size2) => {
       if (size2 <= 22) return 20;
@@ -483,7 +568,7 @@ function Icon({
       return 48;
     };
     const opsz = opticalSize ?? getOpticalSize(fontSize);
-    const iconColor = color ?? tokens.textPrimary[tokens.gamut];
+    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}`;
@@ -503,8 +588,8 @@ function Icon({
       // web-only: controls the variable font axes listed above
       ...style
     };
-  }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React13__default.default.createElement(
+  }, [tokens, size, opticalSize, fill, color, style, resolvedTheme, resolvedAppearance]);
+  return /* @__PURE__ */ React16__default.default.createElement(
     reactNative.Text,
     {
       ref,
@@ -532,7 +617,15 @@ function getWrapperStyles(input) {
     minWidth,
     maxWidth,
     minHeight,
-    maxHeight
+    maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    opacity
   } = input;
   const container = {};
   container.flexDirection = resolveFlexDirection(direction, reverse);
@@ -556,6 +649,14 @@ function getWrapperStyles(input) {
   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 reactNative.StyleSheet.create({ c: container }).c;
 }
 function Wrapper({
@@ -573,14 +674,24 @@ function Wrapper({
   maxWidth,
   minHeight,
   maxHeight,
+  // Positioning
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  overflow,
+  pointerEvents,
+  opacity,
   style,
   // Testing & platform
   testID,
   nativeID,
   ref
 }) {
-  const tokens = newtoneApi.useTokens(1);
-  const containerStyle = React13.useMemo(
+  const tokens = newtoneApi.useTokens();
+  const containerStyle = React16.useMemo(
     () => getWrapperStyles({
       tokens,
       direction,
@@ -595,7 +706,15 @@ function Wrapper({
       minWidth,
       maxWidth,
       minHeight,
-      maxHeight
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity
     }),
     [
       tokens,
@@ -611,42 +730,45 @@ function Wrapper({
       minWidth,
       maxWidth,
       minHeight,
-      maxHeight
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow,
+      opacity
     ]
   );
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(
     reactNative.View,
     {
       ref,
       testID,
       nativeID,
+      pointerEvents,
       accessibilityRole: "none",
       style: [containerStyle, ...userStyles]
     },
     children
   );
 }
-var TextScopeContext = React13.createContext(null);
-function resolveTextColor(color, tokens) {
-  const { gamut } = tokens;
+var TextScopeContext = React16.createContext(null);
+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 tokens.textPrimary[gamut];
+      return tokens.colors[theme][appearance].fontPrimary;
     case "secondary":
-      return tokens.textSecondary[gamut];
+      return tokens.colors[theme][appearance].fontSecondary;
     case "tertiary":
-      return tokens.textTertiary[gamut];
+      return tokens.colors[theme][appearance].fontTertiary;
     case "disabled":
-      return tokens.textDisabled[gamut];
+      return tokens.colors[theme][appearance].fontDisabled;
     case "accent":
-      return tokens.accent.fill[gamut];
-    case "success":
-      return tokens.success.fill[gamut];
-    case "warning":
-      return tokens.warning.fill[gamut];
-    case "error":
-      return tokens.error.fill[gamut];
+      return tokens.colors[theme][appearance][LARGE_TEXT_ROLES.has(role) ? "accentLarge" : "accentSmall"];
   }
 }
 var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
@@ -676,7 +798,7 @@ function TextBase({
   weight: weightOverride,
   align,
   numberOfLines,
-  elevation = 1,
+  elevation,
   style,
   accessibilityRole: accessibilityRoleOverride,
   testID,
@@ -688,6 +810,9 @@ function TextBase({
 }) {
   const tokens = newtoneApi.useTokens(elevation);
   const { config, reportingEndpoint } = newtoneApi.useNewtoneTheme();
+  const frameCtx = newtoneApi.useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? "primary";
+  const resolvedAppearance = frameCtx?.appearance ?? "main";
   const size = sizeOverride ?? "md";
   const fontSlot = tokens.typography.fonts[scope];
   const resolvedFontWeight = weightOverride ? fonts.SEMANTIC_WEIGHT_MAP[weightOverride] : config.typography.roleWeights?.[role] ?? fonts.ROLE_DEFAULT_WEIGHTS[role];
@@ -704,9 +829,9 @@ function TextBase({
     calibrations[fontSlot.family]
   );
   const isAdaptive = ADAPTIVE_ROLES.has(role);
-  const [containerWidth, setContainerWidth] = React13.useState(null);
-  const characterCount = React13.useMemo(() => extractCharacterCount(children), [children]);
-  const resolvedStep = React13.useMemo(
+  const [containerWidth, setContainerWidth] = React16.useState(null);
+  const characterCount = React16.useMemo(() => extractCharacterCount(children), [children]);
+  const resolvedStep = React16.useMemo(
     () => fonts.resolveResponsiveSize(
       {
         role,
@@ -723,7 +848,7 @@ function TextBase({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [role, size, responsive, isAdaptive, fontSlot.family, step.fontSize, config.typography.roles, containerWidth, characterCount, localRatio]
   );
-  React13.useEffect(() => {
+  React16.useEffect(() => {
     if (!reportingEndpoint || !responsive || !isAdaptive || containerWidth == null) return;
     const lineWidths = fonts.estimateLineWidths(characterCount, containerWidth, resolvedStep.fontSize, localRatio);
     const lastLine = lineWidths[lineWidths.length - 1];
@@ -739,7 +864,7 @@ function TextBase({
       lastLineRatio: containerWidth > 0 ? lastLine / containerWidth : 1
     });
   }, [reportingEndpoint, resolvedStep.fontSize, containerWidth]);
-  const resolvedStyle = React13.useMemo(() => {
+  const resolvedStyle = React16.useMemo(() => {
     const activeStep = responsive && isAdaptive ? resolvedStep : step;
     const currentMetrics = config.typography.fontMetrics?.[fontSlot.family];
     const correctedLineHeight = currentMetrics ? Math.round(activeStep.lineHeight * currentMetrics.naturalLineHeightRatio / fonts.REFERENCE_LINE_HEIGHT_RATIO / 4) * 4 : activeStep.lineHeight;
@@ -750,18 +875,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 = React13.useMemo(() => ({ weights: fonts.SEMANTIC_WEIGHT_MAP }), []);
-  const textNode = /* @__PURE__ */ React13__default.default.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React13__default.default.createElement(
+  const scopeCtx = React16.useMemo(() => ({ weights: fonts.SEMANTIC_WEIGHT_MAP }), []);
+  const textNode = /* @__PURE__ */ React16__default.default.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React16__default.default.createElement(
     reactNative.Text,
     {
       ref,
@@ -775,7 +900,7 @@ function TextBase({
     children
   ));
   if (responsive && isAdaptive) {
-    return /* @__PURE__ */ React13__default.default.createElement(
+    return /* @__PURE__ */ React16__default.default.createElement(
       reactNative.View,
       {
         onLayout: (e) => {
@@ -790,37 +915,40 @@ function TextBase({
   return textNode;
 }
 function TextSpan({ children, color, weight, italic, underline, highlight, style }) {
-  const tokens = newtoneApi.useTokens(1);
-  const scopeCtx = React13.useContext(TextScopeContext);
-  const spanStyle = React13.useMemo(() => {
+  const tokens = newtoneApi.useTokens();
+  const scopeCtx = React16.useContext(TextScopeContext);
+  const frameCtx = newtoneApi.useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? "primary";
+  const resolvedAppearance = frameCtx?.appearance ?? "main";
+  const spanStyle = React16.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 React13__default.default.createElement(
+  }, [tokens, scopeCtx, color, weight, italic, underline, highlight, resolvedTheme, resolvedAppearance]);
+  return React16__default.default.createElement(
     reactNative.Text,
     { style: style ? [spanStyle, ...Array.isArray(style) ? style : [style]] : spanStyle },
     children
   );
 }
 function TextBold(props) {
-  return React13__default.default.createElement(TextSpan, { ...props, weight: "bold" });
+  return React16__default.default.createElement(TextSpan, { ...props, weight: "bold" });
 }
 function TextMedium(props) {
-  return React13__default.default.createElement(TextSpan, { ...props, weight: "medium" });
+  return React16__default.default.createElement(TextSpan, { ...props, weight: "medium" });
 }
 function TextItalic(props) {
-  return React13__default.default.createElement(TextSpan, { ...props, italic: true });
+  return React16__default.default.createElement(TextSpan, { ...props, italic: true });
 }
 function TextUnderline(props) {
-  return React13__default.default.createElement(TextSpan, { ...props, underline: true });
+  return React16__default.default.createElement(TextSpan, { ...props, underline: true });
 }
 function TextHighlight(props) {
-  return React13__default.default.createElement(TextSpan, props);
+  return React16__default.default.createElement(TextSpan, props);
 }
 
 // src/primitives/Text/index.ts
@@ -882,19 +1010,9 @@ function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
     paddingBottom: base
   };
 }
-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 semanticToTheme(semantic) {
+  if (semantic === "accent") return "primary";
+  return semantic;
 }
 function getButtonConfig(variant, semantic, size, disabled, tokens) {
   const sizeConfig = getSizeConfig(size, tokens);
@@ -942,40 +1060,38 @@ function getSizeConfig(size, tokens) {
 function getVariantColors(variant, semantic, disabled, tokens) {
   if (disabled) {
     const baseColors = getVariantColorsForState(variant, semantic, tokens);
-    const { gamut } = tokens;
-    const disabledBg = tokens.backgroundSunken[gamut];
+    const disabledBg = tokens.colors.primary.main.fontSecondary;
     return {
       ...baseColors,
       bg: disabledBg,
       hoveredBg: disabledBg,
       pressedBg: disabledBg,
-      textColor: tokens.textSecondary[gamut],
-      iconColor: tokens.textSecondary[gamut]
+      textColor: tokens.colors.primary.main.fontTertiary,
+      iconColor: tokens.colors.primary.main.fontTertiary
     };
   }
   return getVariantColorsForState(variant, semantic, tokens);
 }
 function getVariantColorsForState(variant, semantic, tokens) {
-  const { gamut } = tokens;
-  const paletteTokens = getPaletteTokens(semantic, tokens);
   if (variant === "primary") {
     if (semantic === "neutral") {
       return {
-        bg: tokens.backgroundInteractive[gamut],
-        hoveredBg: tokens.backgroundInteractiveHover[gamut],
-        pressedBg: tokens.backgroundInteractiveActive[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
+        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: paletteTokens.fill[gamut],
-      hoveredBg: paletteTokens.fillHover[gamut],
-      pressedBg: paletteTokens.fillActive[gamut],
-      textColor: paletteTokens.onFill[gamut],
-      iconColor: paletteTokens.onFill[gamut],
+      bg: t.emphasis.background,
+      hoveredBg: t.emphasis.fontPrimary,
+      pressedBg: t.emphasis.fontSecondary,
+      textColor: t.main.background,
+      iconColor: t.main.background,
       borderWidth: 1,
       borderColor: "transparent"
     };
@@ -984,20 +1100,21 @@ function getVariantColorsForState(variant, semantic, tokens) {
     if (semantic === "neutral") {
       return {
         bg: "transparent",
-        hoveredBg: tokens.backgroundInteractive[gamut],
-        pressedBg: tokens.backgroundInteractiveHover[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
+        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.border[gamut]
+        borderColor: tokens.colors.primary.main.fontSecondary
       };
     }
+    const t = tokens.colors[semanticToTheme(semantic)];
     return {
-      bg: paletteTokens.background[gamut],
-      hoveredBg: paletteTokens.backgroundInteractive[gamut],
-      pressedBg: paletteTokens.backgroundInteractiveHover[gamut],
-      textColor: paletteTokens.fill[gamut],
-      iconColor: paletteTokens.fill[gamut],
+      bg: t.tinted.background,
+      hoveredBg: t.tinted.fontPrimary,
+      pressedBg: t.tinted.fontSecondary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
       borderWidth: 1,
       borderColor: "transparent"
     };
@@ -1006,30 +1123,54 @@ function getVariantColorsForState(variant, semantic, tokens) {
     if (semantic === "neutral") {
       return {
         bg: "transparent",
-        hoveredBg: tokens.backgroundInteractive[gamut],
-        pressedBg: tokens.backgroundInteractiveHover[gamut],
-        textColor: tokens.textPrimary[gamut],
-        iconColor: tokens.textPrimary[gamut],
+        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: paletteTokens.background[gamut],
-      pressedBg: paletteTokens.backgroundInteractive[gamut],
-      textColor: paletteTokens.fill[gamut],
-      iconColor: paletteTokens.fill[gamut],
+      hoveredBg: t.tinted.background,
+      pressedBg: t.tinted.fontPrimary,
+      textColor: t.emphasis.divider,
+      iconColor: t.emphasis.divider,
       borderWidth: 1,
       borderColor: "transparent"
     };
   }
+  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.textPrimary[gamut],
-    iconColor: tokens.textPrimary[gamut],
+    textColor: tokens.colors.primary.main.divider,
+    iconColor: tokens.colors.primary.main.divider,
     borderWidth: 0
   };
 }
@@ -1041,22 +1182,25 @@ function Button({
   semantic = "neutral",
   size = "md",
   disabled = false,
+  loading = false,
+  fullWidth = false,
   style,
   textStyle,
   ...pressableProps
 }) {
   const tokens = newtoneApi.useTokens();
-  const { variantColors, sizeTokens } = React13__default.default.useMemo(
-    () => getButtonConfig(variant, semantic, size, disabled, tokens),
-    [variant, semantic, size, disabled, tokens]
+  const isDisabled = disabled || loading;
+  const { variantColors, sizeTokens } = React16__default.default.useMemo(
+    () => getButtonConfig(variant, semantic, size, isDisabled, tokens),
+    [variant, semantic, size, isDisabled, tokens]
   );
-  const padding = React13__default.default.useMemo(
-    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
-    [size, icon, children, iconPosition]
+  const padding = React16__default.default.useMemo(
+    () => variant === "link" ? { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 } : computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition, variant]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => (
     // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React16__default.default.createElement(
       Wrapper,
       {
         direction: "horizontal",
@@ -1067,41 +1211,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__ */ React13__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+      icon && iconPosition === "left" && /* @__PURE__ */ React16__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
       children && // Text primitive with semantic props + color style override
-      /* @__PURE__ */ React13__default.default.createElement(
+      /* @__PURE__ */ React16__default.default.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__ */ React13__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+      icon && iconPosition === "right" && /* @__PURE__ */ React16__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
     )
   ));
 }
-function getCardStyles(tokens, gamut, disabled) {
+function getCardStyles(tokens, disabled, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   return reactNative.StyleSheet.create({
     container: {
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.lg,
       padding: tokens.spacing["16"],
       opacity: disabled ? 0.5 : 1
@@ -1117,13 +1265,286 @@ function Card({
   disabled = false
 }) {
   const tokens = newtoneApi.useTokens(elevation);
-  const styles = React13__default.default.useMemo(
-    () => getCardStyles(tokens, tokens.gamut, disabled),
-    [tokens, disabled]
+  const frameCtx = newtoneApi.useFrameContext();
+  const styles = React16__default.default.useMemo(
+    () => getCardStyles(tokens, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+}
+
+// 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 getTextInputStyles(tokens, gamut, disabled) {
+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 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 (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
+    };
+  }
+  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 (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"
+    };
+  }
+  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 t = tokens.colors[semanticToTheme2(semantic)];
+  return {
+    bg: "transparent",
+    hoveredBg: t.tinted.background,
+    pressedBg: t.tinted.fontPrimary,
+    textColor: t.emphasis.divider,
+    iconColor: t.emphasis.divider,
+    borderWidth: 1,
+    borderColor: t.tinted.fontSecondary
+  };
+}
+function getChipConfig(variant, semantic, size, selected, disabled, tokens) {
+  return {
+    colors: getVariantColors2(variant, semantic, selected, disabled, tokens),
+    sizeTokens: getSizeConfig2(size)
+  };
+}
+function Chip({
+  children,
+  variant = "tinted",
+  size = "md",
+  semantic = "neutral",
+  selected = false,
+  onPress,
+  disabled = false,
+  icon,
+  style
+}) {
+  const tokens = newtoneApi.useTokens();
+  const { colors, sizeTokens } = React16__default.default.useMemo(
+    () => getChipConfig(variant, semantic, size, selected, disabled, tokens),
+    [variant, semantic, size, selected, disabled, tokens]
+  );
+  const content = (state) => /* @__PURE__ */ React16__default.default.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__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: colors.iconColor }),
+    /* @__PURE__ */ React16__default.default.createElement(
+      Text3,
+      {
+        role: sizeTokens.textRole,
+        weight: selected ? "bold" : "medium",
+        style: { color: colors.textColor }
+      },
+      children
+    )
+  );
+  if (onPress) {
+    return /* @__PURE__ */ React16__default.default.createElement(reactNative.Pressable, { onPress, disabled }, ({ pressed, hovered }) => content({ pressed, hovered }));
+  }
+  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 }
+    };
+  }
+  return {
+    height: 1,
+    width: "100%",
+    backgroundColor: color,
+    ...spacing != null && { marginTop: spacing, marginBottom: spacing }
+  };
+}
+function Divider({
+  orientation = "horizontal",
+  spacing,
+  style
+}) {
+  const tokens = newtoneApi.useTokens();
+  const dividerStyle = React16__default.default.useMemo(
+    () => getDividerStyles(orientation, spacing, tokens),
+    [orientation, spacing, tokens]
+  );
+  return /* @__PURE__ */ React16__default.default.createElement(
+    reactNative.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 = newtoneApi.useTokens();
+  const isInteractive = !!(href || onPress);
+  const variantStyles = React16__default.default.useMemo(
+    () => getContentCardStyles(variant, isInteractive, tokens),
+    [variant, isInteractive, tokens]
+  );
+  return /* @__PURE__ */ React16__default.default.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
+  );
+}
+function getTextInputStyles(tokens, disabled, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   return reactNative.StyleSheet.create({
     container: {
       gap: tokens.spacing["04"]
@@ -1132,18 +1553,18 @@ function getTextInputStyles(tokens, gamut, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut]
+      color: at.fontTertiary
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: tokens.backgroundSunken[gamut],
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing["08"],
       paddingHorizontal: tokens.spacing["12"],
       fontSize: tokens.typography.fontSizes["05"],
-      color: disabled ? tokens.textSecondary[gamut] : tokens.textPrimary[gamut],
+      color: disabled ? at.fontTertiary : at.divider,
       opacity: disabled ? 0.5 : 1
     }
   });
@@ -1157,21 +1578,25 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = newtoneApi.useTokens(1);
-  const styles = React13__default.default.useMemo(
-    () => getTextInputStyles(tokens, tokens.gamut, disabled),
-    [tokens, disabled]
+  const frameCtx = newtoneApi.useFrameContext();
+  const theme = frameCtx?.theme ?? "primary";
+  const appearance = frameCtx?.appearance ?? "main";
+  const styles = React16__default.default.useMemo(
+    () => getTextInputStyles(tokens, disabled, theme, appearance),
+    [tokens, disabled, theme, appearance]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React16__default.default.createElement(
     reactNative.TextInput,
     {
       style: styles.input,
       editable: !disabled,
-      placeholderTextColor: tokens.textSecondary[tokens.gamut],
+      placeholderTextColor: tokens.colors[theme][appearance].fontTertiary,
       ...textInputProps
     }
   ));
 }
-function getPopoverStyles(tokens, gamut, 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 reactNative.StyleSheet.create({
     container: {
@@ -1182,9 +1607,9 @@ function getPopoverStyles(tokens, gamut, triggerHeight, offset, maxHeight, width
       position: "absolute",
       top: triggerHeight + offset,
       ...widthStyle,
-      backgroundColor: tokens.backgroundElevated[gamut],
+      backgroundColor: at.fontPrimary,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       maxHeight,
       zIndex: 1e3,
@@ -1213,15 +1638,16 @@ function Popover({
   contentStyle
 }) {
   const tokens = newtoneApi.useTokens(1);
-  const containerRef = React13.useRef(null);
-  const [triggerHeight, setTriggerHeight] = React13.useState(0);
-  const onTriggerLayout = React13.useCallback(
+  const frameCtx = newtoneApi.useFrameContext();
+  const containerRef = React16.useRef(null);
+  const [triggerHeight, setTriggerHeight] = React16.useState(0);
+  const onTriggerLayout = React16.useCallback(
     (e) => {
       setTriggerHeight(e.nativeEvent.layout.height);
     },
     []
   );
-  React13.useEffect(() => {
+  React16.useEffect(() => {
     if (!isOpen) return;
     openPopovers.forEach((closeFn) => closeFn());
     openPopovers.clear();
@@ -1230,7 +1656,7 @@ function Popover({
       openPopovers.delete(onClose);
     };
   }, [isOpen, onClose]);
-  React13.useEffect(() => {
+  React16.useEffect(() => {
     if (!isOpen) return;
     if (typeof document === "undefined") return;
     const handleMouseDown = (e) => {
@@ -1242,7 +1668,7 @@ function Popover({
     document.addEventListener("mousedown", handleMouseDown, true);
     return () => document.removeEventListener("mousedown", handleMouseDown, true);
   }, [isOpen, onClose]);
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React16.useCallback(
     (e) => {
       if (closeOnEscape && e.key === "Escape") {
         e.stopPropagation();
@@ -1251,41 +1677,41 @@ function Popover({
     },
     [closeOnEscape, onClose]
   );
-  const styles = React13.useMemo(
-    () => getPopoverStyles(tokens, tokens.gamut, triggerHeight, offset, maxHeight, width, isOpen),
-    [tokens, triggerHeight, offset, maxHeight, width, isOpen]
+  const styles = React16.useMemo(
+    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance]
   );
-  const containerStyles = React13.useMemo(
+  const containerStyles = React16.useMemo(
     () => [styles.container, ...Array.isArray(style) ? style : style ? [style] : []],
     [styles.container, style]
   );
-  const mergedContentStyles = React13.useMemo(
+  const mergedContentStyles = React16.useMemo(
     () => [styles.content, ...Array.isArray(contentStyle) ? contentStyle : contentStyle ? [contentStyle] : []],
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(
     reactNative.View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
-  const [isOpen, setIsOpen] = React13.useState(options?.initialOpen ?? false);
-  const open = React13.useCallback(() => {
+  const [isOpen, setIsOpen] = React16.useState(options?.initialOpen ?? false);
+  const open = React16.useCallback(() => {
     setIsOpen(true);
     options?.onOpenChange?.(true);
   }, [options]);
-  const close = React13.useCallback(() => {
+  const close = React16.useCallback(() => {
     setIsOpen(false);
     options?.onOpenChange?.(false);
   }, [options]);
-  const toggle = React13.useCallback(() => {
+  const toggle = React16.useCallback(() => {
     setIsOpen((prev) => {
       const next = !prev;
       options?.onOpenChange?.(next);
@@ -1299,7 +1725,8 @@ function usePopover(options) {
 function isOptionGroup(item) {
   return "options" in item;
 }
-function getSelectStyles(tokens, gamut, 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;
@@ -1315,14 +1742,14 @@ function getSelectStyles(tokens, gamut, disabled, size, isOpen) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut]
+      color: at.fontTertiary
     },
     trigger: {
       flexDirection: "row",
       alignItems: "center",
-      backgroundColor: tokens.backgroundSunken[gamut],
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
@@ -1333,7 +1760,7 @@ function getSelectStyles(tokens, gamut, disabled, size, isOpen) {
       flex: 1,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize,
-      color: disabled ? tokens.textSecondary[gamut] : tokens.textPrimary[gamut]
+      color: disabled ? at.fontTertiary : at.divider
     },
     iconWrapper: {
       position: "absolute",
@@ -1346,7 +1773,7 @@ function getSelectStyles(tokens, gamut, disabled, size, isOpen) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["01"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut],
+      color: at.fontTertiary,
       textTransform: "uppercase",
       letterSpacing: 0.5,
       paddingVertical: tokens.spacing["04"],
@@ -1372,10 +1799,10 @@ function useSelect({
   onClose,
   onOpen
 }) {
-  const [focusedIndex, setFocusedIndex] = React13.useState(-1);
-  const typeAheadRef = React13.useRef("");
-  const typeAheadTimerRef = React13.useRef();
-  React13.useEffect(() => {
+  const [focusedIndex, setFocusedIndex] = React16.useState(-1);
+  const typeAheadRef = React16.useRef("");
+  const typeAheadTimerRef = React16.useRef();
+  React16.useEffect(() => {
     if (isOpen) {
       const selectedIdx = flatOptions.findIndex((o) => o.value === value);
       if (selectedIdx >= 0 && !flatOptions[selectedIdx].disabled) {
@@ -1388,7 +1815,7 @@ function useSelect({
       setFocusedIndex(-1);
     }
   }, [isOpen, flatOptions, value]);
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React16.useCallback(
     (e) => {
       const key = e.key;
       if (!isOpen) {
@@ -1465,11 +1892,14 @@ function SelectOptionRow({
   size
 }) {
   const tokens = newtoneApi.useTokens(1);
+  const frameCtx = newtoneApi.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__ */ React13__default.default.createElement(
+    return /* @__PURE__ */ React16__default.default.createElement(
       reactNative.Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -1480,7 +1910,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(
     reactNative.Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -1496,10 +1926,10 @@ function SelectOptionRow({
           paddingHorizontal
         },
         isSelected && {
-          backgroundColor: tokens.backgroundSunken[tokens.gamut]
+          backgroundColor: at.fontSecondary
         },
         isFocused && !isSelected && {
-          backgroundColor: `${tokens.border[tokens.gamut]}20`
+          backgroundColor: `${at.fontSecondary}20`
         },
         option.disabled && {
           opacity: 0.5
@@ -1509,7 +1939,7 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React16__default.default.createElement(
       reactNative.Text,
       {
         style: [
@@ -1517,26 +1947,26 @@ function SelectOptionRow({
             flex: 1,
             fontFamily: tokens.typography.fonts.main.family,
             fontSize,
-            color: tokens.textPrimary[tokens.gamut]
+            color: at.divider
           },
           isSelected && {
             fontWeight: tokens.typography.fonts.main.weights.medium,
-            color: tokens.accent.fill[tokens.gamut]
+            color: emphasisAt.divider
           },
           option.disabled && {
-            color: tokens.textSecondary[tokens.gamut]
+            color: at.fontTertiary
           }
         ],
         numberOfLines: 1
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React13__default.default.createElement(
+    isSelected && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React16__default.default.createElement(
       Icon,
       {
         name: "check",
         size: fontSize,
-        color: tokens.accent.fill[tokens.gamut]
+        color: emphasisAt.divider
       }
     ))
   );
@@ -1567,8 +1997,9 @@ function Select({
   style
 }) {
   const tokens = newtoneApi.useTokens(1);
+  const frameCtx = newtoneApi.useFrameContext();
   const { isOpen, open, close, toggle } = usePopover();
-  const flatOptions = React13.useMemo(() => flattenOptions(options), [options]);
+  const flatOptions = React16.useMemo(() => flattenOptions(options), [options]);
   const { focusedIndex, handleKeyDown } = useSelect({
     flatOptions,
     value,
@@ -1580,15 +2011,18 @@ function Select({
     onClose: close,
     onOpen: open
   });
-  const styles = React13.useMemo(
-    () => getSelectStyles(tokens, tokens.gamut, disabled, size, isOpen),
-    [tokens, disabled, size, isOpen]
+  const inheritedTheme = frameCtx?.theme;
+  const inheritedAppearance = frameCtx?.appearance;
+  const styles = React16.useMemo(
+    () => 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 ? tokens.textSecondary[tokens.gamut] : tokens.textPrimary[tokens.gamut];
+  const at = tokens.colors[inheritedTheme ?? "primary"][inheritedAppearance ?? "main"];
+  const iconColor = disabled ? at.fontTertiary : at.divider;
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React13__default.default.createElement(
+  const trigger = /* @__PURE__ */ React16__default.default.createElement(
     reactNative.Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -1598,8 +2032,8 @@ function Select({
       ...triggerWebProps,
       style: styles.trigger
     },
-    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React13__default.default.createElement(
+    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React16__default.default.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
@@ -1608,14 +2042,14 @@ function Select({
       }
     ))
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React16__default.default.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React16__default.default.createElement(
       reactNative.ScrollView,
       {
         bounces: false,
@@ -1624,7 +2058,7 @@ function Select({
       },
       options.map((item) => {
         if (isOptionGroup(item)) {
-          return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { key: item.label }, /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React13__default.default.createElement(
+          return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { key: item.label }, /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React16__default.default.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -1640,7 +2074,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React13__default.default.createElement(
+        return /* @__PURE__ */ React16__default.default.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -1663,7 +2097,9 @@ var TRACK_WIDTH = 40;
 var TRACK_HEIGHT = 22;
 var THUMB_SIZE = 18;
 var THUMB_OFFSET = 2;
-function getToggleStyles(tokens, gamut, value, disabled) {
+function getToggleStyles(tokens, value, disabled, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
+  const emphasisAt = tokens.colors[theme].emphasis;
   return reactNative.StyleSheet.create({
     container: {
       flexDirection: "row",
@@ -1675,13 +2111,13 @@ function getToggleStyles(tokens, gamut, value, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut]
+      color: at.fontTertiary
     },
     track: {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: value ? tokens.accent.fill[gamut] : tokens.border[gamut],
+      backgroundColor: value ? emphasisAt.divider : at.fontSecondary,
       justifyContent: "center",
       paddingHorizontal: THUMB_OFFSET
     },
@@ -1689,7 +2125,7 @@ function getToggleStyles(tokens, gamut, value, disabled) {
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       alignSelf: value ? "flex-end" : "flex-start"
     }
   });
@@ -1704,16 +2140,17 @@ function Toggle({
   style
 }) {
   const tokens = newtoneApi.useTokens(1);
-  const styles = React13__default.default.useMemo(
-    () => getToggleStyles(tokens, tokens.gamut, value, disabled),
-    [tokens, value, disabled]
+  const frameCtx = newtoneApi.useFrameContext();
+  const styles = React16__default.default.useMemo(
+    () => getToggleStyles(tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
-  const handlePress = React13__default.default.useCallback(() => {
+  const handlePress = React16__default.default.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React16__default.default.createElement(
     reactNative.Pressable,
     {
       onPress: handlePress,
@@ -1721,12 +2158,12 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.track }, /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.thumb }))
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.track }, /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
 var THUMB_SIZE2 = 16;
-function getSliderStyles(tokens, gamut, disabled) {
+function getSliderStyles(tokens, disabled) {
   return reactNative.StyleSheet.create({
     container: {
       gap: tokens.spacing["04"],
@@ -1741,23 +2178,23 @@ function getSliderStyles(tokens, gamut, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut]
+      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: tokens.textPrimary[gamut]
+      color: tokens.colors.primary.main.divider
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: "transparent",
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
@@ -1774,21 +2211,21 @@ function getSliderStyles(tokens, gamut, disabled) {
       right: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: tokens.border[gamut]
+      backgroundColor: tokens.colors.primary.main.fontSecondary
     },
     trackFill: {
       position: "absolute",
       left: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: tokens.accent.fill[gamut]
+      backgroundColor: tokens.colors.primary.emphasis.divider
     },
     thumb: {
       position: "absolute",
       width: THUMB_SIZE2,
       height: THUMB_SIZE2,
       borderRadius: THUMB_SIZE2 / 2,
-      backgroundColor: tokens.accent.fill[gamut]
+      backgroundColor: tokens.colors.primary.emphasis.divider
     }
   });
 }
@@ -1807,42 +2244,42 @@ function Slider({
   style
 }) {
   const tokens = newtoneApi.useTokens(1);
-  const styles = React13__default.default.useMemo(
-    () => getSliderStyles(tokens, tokens.gamut, disabled),
+  const styles = React16__default.default.useMemo(
+    () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React13__default.default.useRef(null);
-  const trackWidth = React13__default.default.useRef(0);
-  const trackPageX = React13__default.default.useRef(0);
-  const [layoutWidth, setLayoutWidth] = React13__default.default.useState(0);
-  const onValueChangeRef = React13__default.default.useRef(onValueChange);
-  const minRef = React13__default.default.useRef(min);
-  const maxRef = React13__default.default.useRef(max);
-  const stepRef = React13__default.default.useRef(step);
-  const disabledRef = React13__default.default.useRef(disabled);
-  React13__default.default.useEffect(() => {
+  const trackRef = React16__default.default.useRef(null);
+  const trackWidth = React16__default.default.useRef(0);
+  const trackPageX = React16__default.default.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React16__default.default.useState(0);
+  const onValueChangeRef = React16__default.default.useRef(onValueChange);
+  const minRef = React16__default.default.useRef(min);
+  const maxRef = React16__default.default.useRef(max);
+  const stepRef = React16__default.default.useRef(step);
+  const disabledRef = React16__default.default.useRef(disabled);
+  React16__default.default.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React13__default.default.useCallback((pageX) => {
+  const computeValue = React16__default.default.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 = React13__default.default.useRef(
+  const panResponder = React16__default.default.useRef(
     reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -1870,7 +2307,7 @@ function Slider({
     fillLeft = 0;
     fillWidth = thumbLeft + THUMB_SIZE2 / 2;
   }
-  const handleValueTextSubmit = React13__default.default.useCallback(
+  const handleValueTextSubmit = React16__default.default.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -1879,12 +2316,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React13__default.default.useState(String(value));
-  React13__default.default.useEffect(() => {
+  const [editText, setEditText] = React16__default.default.useState(String(value));
+  React16__default.default.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.labelRow }, label && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.labelRow }, label && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React16__default.default.createElement(
     reactNative.TextInput,
     {
       style: styles.valueInput,
@@ -1896,7 +2333,7 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.value }, value)), /* @__PURE__ */ React13__default.default.createElement(
+  ) : showValue && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.value }, value)), /* @__PURE__ */ React16__default.default.createElement(
     reactNative.View,
     {
       ref: trackRef,
@@ -1911,9 +2348,9 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.trackRail }),
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.trackRail }),
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
@@ -1931,7 +2368,7 @@ function buildHueSegments(min, max) {
     return hueToHex(hue);
   });
 }
-function getHueSliderStyles(tokens, gamut, disabled) {
+function getHueSliderStyles(tokens, disabled) {
   return reactNative.StyleSheet.create({
     container: {
       gap: tokens.spacing["04"],
@@ -1946,23 +2383,23 @@ function getHueSliderStyles(tokens, gamut, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut]
+      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: tokens.textPrimary[gamut]
+      color: tokens.colors.primary.main.divider
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: "transparent",
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
@@ -1992,7 +2429,7 @@ function getHueSliderStyles(tokens, gamut, disabled) {
       borderRadius: THUMB_SIZE3 / 2,
       backgroundColor: "#ffffff",
       borderWidth: 2,
-      borderColor: tokens.border[gamut]
+      borderColor: tokens.colors.primary.main.fontSecondary
     }
   });
 }
@@ -2010,42 +2447,42 @@ function HueSlider({
   style
 }) {
   const tokens = newtoneApi.useTokens(1);
-  const styles = React13__default.default.useMemo(
-    () => getHueSliderStyles(tokens, tokens.gamut, disabled),
+  const styles = React16__default.default.useMemo(
+    () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React13__default.default.useMemo(
+  const segments = React16__default.default.useMemo(
     () => buildHueSegments(min, max),
     [min, max]
   );
-  const trackRef = React13__default.default.useRef(null);
-  const trackWidth = React13__default.default.useRef(0);
-  const trackPageX = React13__default.default.useRef(0);
-  const [layoutWidth, setLayoutWidth] = React13__default.default.useState(0);
-  const onValueChangeRef = React13__default.default.useRef(onValueChange);
-  const minRef = React13__default.default.useRef(min);
-  const maxRef = React13__default.default.useRef(max);
-  const disabledRef = React13__default.default.useRef(disabled);
-  React13__default.default.useEffect(() => {
+  const trackRef = React16__default.default.useRef(null);
+  const trackWidth = React16__default.default.useRef(0);
+  const trackPageX = React16__default.default.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React16__default.default.useState(0);
+  const onValueChangeRef = React16__default.default.useRef(onValueChange);
+  const minRef = React16__default.default.useRef(min);
+  const maxRef = React16__default.default.useRef(max);
+  const disabledRef = React16__default.default.useRef(disabled);
+  React16__default.default.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React13__default.default.useCallback((pageX) => {
+  const computeHue = React16__default.default.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 = React13__default.default.useRef(
+  const panResponder = React16__default.default.useRef(
     reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2061,7 +2498,7 @@ function HueSlider({
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
-  const handleValueTextSubmit = React13__default.default.useCallback(
+  const handleValueTextSubmit = React16__default.default.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2070,12 +2507,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React13__default.default.useState(String(value));
-  React13__default.default.useEffect(() => {
+  const [editText, setEditText] = React16__default.default.useState(String(value));
+  React16__default.default.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.labelRow }, label && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.labelRow }, label && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React16__default.default.createElement(
     reactNative.TextInput,
     {
       style: styles.valueInput,
@@ -2087,7 +2524,7 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React13__default.default.createElement(
+  ) : showValue && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React16__default.default.createElement(
     reactNative.View,
     {
       ref: trackRef,
@@ -2102,8 +2539,8 @@ function HueSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 
@@ -2164,7 +2601,7 @@ function oklchToP3Css(color) {
 }
 var TRACK_HEIGHT4 = 22;
 var THUMB_SIZE4 = 18;
-function getColorScaleSliderStyles(tokens, gamut, disabled) {
+function getColorScaleSliderStyles(tokens, disabled) {
   return reactNative.StyleSheet.create({
     container: {
       gap: tokens.spacing["04"],
@@ -2179,7 +2616,7 @@ function getColorScaleSliderStyles(tokens, gamut, disabled) {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: tokens.textSecondary[gamut]
+      color: tokens.colors.primary.main.fontTertiary
     },
     trackContainer: {
       height: TRACK_HEIGHT4 + THUMB_SIZE4,
@@ -2205,13 +2642,13 @@ function getColorScaleSliderStyles(tokens, gamut, disabled) {
       borderRadius: THUMB_SIZE4 / 2,
       backgroundColor: "#ffffff",
       borderWidth: 2,
-      borderColor: tokens.border[gamut]
+      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: tokens.error.fill[gamut]
+      color: tokens.colors.error.emphasis.divider
     }
   });
 }
@@ -2231,37 +2668,38 @@ function ColorScaleSlider({
   style
 }) {
   const tokens = newtoneApi.useTokens(1);
-  const styles = React13__default.default.useMemo(
-    () => getColorScaleSliderStyles(tokens, tokens.gamut, disabled),
+  const { gamut } = newtoneApi.useNewtoneTheme();
+  const styles = React16__default.default.useMemo(
+    () => getColorScaleSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React13__default.default.useRef(null);
-  const trackWidth = React13__default.default.useRef(0);
-  const trackPageX = React13__default.default.useRef(0);
-  const isDragging = React13__default.default.useRef(false);
-  const thumbAnim = React13__default.default.useRef(new reactNative.Animated.Value(0)).current;
-  const [layoutWidth, setLayoutWidth] = React13__default.default.useState(0);
-  const onValueChangeRef = React13__default.default.useRef(onValueChange);
-  const disabledRef = React13__default.default.useRef(disabled);
-  const colorsLengthRef = React13__default.default.useRef(colors.length);
-  const trimEndsRef = React13__default.default.useRef(trimEnds);
-  const snapRef = React13__default.default.useRef(snap);
-  React13__default.default.useEffect(() => {
+  const trackRef = React16__default.default.useRef(null);
+  const trackWidth = React16__default.default.useRef(0);
+  const trackPageX = React16__default.default.useRef(0);
+  const isDragging = React16__default.default.useRef(false);
+  const thumbAnim = React16__default.default.useRef(new reactNative.Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React16__default.default.useState(0);
+  const onValueChangeRef = React16__default.default.useRef(onValueChange);
+  const disabledRef = React16__default.default.useRef(disabled);
+  const colorsLengthRef = React16__default.default.useRef(colors.length);
+  const trimEndsRef = React16__default.default.useRef(trimEnds);
+  const snapRef = React16__default.default.useRef(snap);
+  React16__default.default.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     colorsLengthRef.current = colors.length;
   }, [colors.length]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     trimEndsRef.current = trimEnds;
   }, [trimEnds]);
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     snapRef.current = snap;
   }, [snap]);
-  const computeNv = React13__default.default.useCallback((pageX) => {
+  const computeNv = React16__default.default.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const totalSteps2 = colorsLengthRef.current - 1;
@@ -2276,7 +2714,7 @@ function ColorScaleSlider({
     }
     return nv;
   }, []);
-  const panResponder = React13__default.default.useRef(
+  const panResponder = React16__default.default.useRef(
     reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2304,7 +2742,7 @@ function ColorScaleSlider({
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
-  React13__default.default.useEffect(() => {
+  React16__default.default.useEffect(() => {
     if (isDragging.current || !animateValue) {
       thumbAnim.setValue(thumbLeft);
     } else {
@@ -2315,7 +2753,7 @@ function ColorScaleSlider({
       }).start();
     }
   }, [thumbLeft, animateValue, thumbAnim]);
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.labelRow }, /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.label }, label)), /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.labelRow }, /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.label }, label)), /* @__PURE__ */ React16__default.default.createElement(
     reactNative.View,
     {
       ref: trackRef,
@@ -2330,17 +2768,18 @@ function ColorScaleSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { key: i, style: [styles.segment, { backgroundColor: tokens.gamut === "p3" ? oklchToP3Css(color.oklch) : newtone.srgbToHex(color.srgb) }] }))),
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
-  ), warning && /* @__PURE__ */ React13__default.default.createElement(reactNative.Text, { style: styles.warning }, warning));
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { key: i, style: [styles.segment, { backgroundColor: gamut === "p3" ? oklchToP3Css(color.oklch) : newtone.srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React16__default.default.createElement(reactNative.Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React16__default.default.createElement(reactNative.Text, { style: styles.warning }, warning));
 }
-function getAppShellStyles(tokens, gamut) {
+function getAppShellStyles(tokens, theme = "primary", appearance = "main") {
+  const at = tokens.colors[theme][appearance];
   return reactNative.StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: "row",
       overflow: "hidden",
-      backgroundColor: tokens.background[gamut]
+      backgroundColor: at.background
     },
     main: {
       flex: 1,
@@ -2354,17 +2793,22 @@ function getAppShellStyles(tokens, gamut) {
 // src/composites/layout/AppShell/AppShell.tsx
 function AppShell({ sidebar, children }) {
   const tokens = newtoneApi.useTokens();
-  const styles = React13__default.default.useMemo(() => getAppShellStyles(tokens, tokens.gamut), [tokens]);
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.container }, sidebar, /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.main }, children));
+  const frameCtx = newtoneApi.useFrameContext();
+  const styles = React16__default.default.useMemo(
+    () => getAppShellStyles(tokens, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, frameCtx?.theme, frameCtx?.appearance]
+  );
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.container }, sidebar, /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.main }, children));
 }
-function getSidebarStyles({ tokens, gamut, width, bordered }) {
-  const borderColor = tokens.border[gamut];
+function getSidebarStyles({ tokens, width, bordered, theme = "primary", appearance = "main" }) {
+  const at = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
   return reactNative.StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: "column",
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       borderRightWidth: bordered ? 1 : 0,
       borderRightColor: borderColor
     },
@@ -2393,14 +2837,16 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = newtoneApi.useTokens();
-  const styles = React13__default.default.useMemo(
-    () => getSidebarStyles({ tokens, gamut: tokens.gamut, width, bordered }),
-    [tokens, width, bordered]
+  const frameCtx = newtoneApi.useFrameContext();
+  const styles = React16__default.default.useMemo(
+    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.container }, header && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.header }, header), /* @__PURE__ */ React13__default.default.createElement(reactNative.ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.footer }, footer));
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.container }, header && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.header }, header), /* @__PURE__ */ React16__default.default.createElement(reactNative.ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.footer }, footer));
 }
-function getNavbarStyles({ tokens, gamut, height, bordered }) {
-  const borderColor = tokens.border[gamut];
+function getNavbarStyles({ tokens, height, bordered, theme = "primary", appearance = "main" }) {
+  const at = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
   return reactNative.StyleSheet.create({
     container: {
       flexDirection: "row",
@@ -2408,7 +2854,7 @@ function getNavbarStyles({ tokens, gamut, height, bordered }) {
       height,
       flexShrink: 0,
       paddingHorizontal: 24,
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       borderBottomWidth: bordered ? 1 : 0,
       borderBottomColor: borderColor
     },
@@ -2435,11 +2881,51 @@ function Navbar({
   bordered = true
 }) {
   const tokens = newtoneApi.useTokens();
-  const styles = React13__default.default.useMemo(
-    () => getNavbarStyles({ tokens, gamut: tokens.gamut, height, bordered }),
-    [tokens, height, bordered]
+  const frameCtx = newtoneApi.useFrameContext();
+  const styles = React16__default.default.useMemo(
+    () => getNavbarStyles({ tokens, height, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, height, bordered, frameCtx?.theme, frameCtx?.appearance]
+  );
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.container }, children ? children : /* @__PURE__ */ React16__default.default.createElement(React16__default.default.Fragment, null, /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.left }, left), /* @__PURE__ */ React16__default.default.createElement(reactNative.View, { style: styles.right }, right)));
+}
+function LogoMonogram({ colorValue = 0, size = 32 }) {
+  const fg = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
+  return /* @__PURE__ */ React16__default.default.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 168 168",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React16__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.createElement(
+    "svg",
+    {
+      height: 32,
+      viewBox: "0 0 504 168",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React16__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__ */ React13__default.default.createElement(reactNative.View, { style: styles.container }, children ? children : /* @__PURE__ */ React13__default.default.createElement(React13__default.default.Fragment, null, /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.left }, left), /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: styles.right }, right)));
 }
 
 // src/registry/registry.ts
@@ -3387,10 +3873,6 @@ var ICON_CATALOG = [
   }
 ];
 
-Object.defineProperty(exports, "ACCENT_DEFAULTS", {
-  enumerable: true,
-  get: function () { return newtoneApi.ACCENT_DEFAULTS; }
-});
 Object.defineProperty(exports, "DEFAULT_FONT_SIZES", {
   enumerable: true,
   get: function () { return newtoneApi.DEFAULT_FONT_SIZES; }
@@ -3407,6 +3889,10 @@ Object.defineProperty(exports, "DEFAULT_THEME_CONFIG", {
   enumerable: true,
   get: function () { return newtoneApi.DEFAULT_THEME_CONFIG; }
 });
+Object.defineProperty(exports, "DEFAULT_THEME_MAPPINGS", {
+  enumerable: true,
+  get: function () { return newtoneApi.DEFAULT_THEME_MAPPINGS; }
+});
 Object.defineProperty(exports, "ERROR_DEFAULTS", {
   enumerable: true,
   get: function () { return newtoneApi.ERROR_DEFAULTS; }
@@ -3415,18 +3901,26 @@ Object.defineProperty(exports, "FrameContext", {
   enumerable: true,
   get: function () { return newtoneApi.FrameContext; }
 });
-Object.defineProperty(exports, "NEUTRAL_DEFAULTS", {
-  enumerable: true,
-  get: function () { return newtoneApi.NEUTRAL_DEFAULTS; }
-});
 Object.defineProperty(exports, "NewtoneProvider", {
   enumerable: true,
   get: function () { return newtoneApi.NewtoneProvider; }
 });
+Object.defineProperty(exports, "PRIMARY_DEFAULTS", {
+  enumerable: true,
+  get: function () { return newtoneApi.PRIMARY_DEFAULTS; }
+});
+Object.defineProperty(exports, "SECONDARY_DEFAULTS", {
+  enumerable: true,
+  get: function () { return newtoneApi.SECONDARY_DEFAULTS; }
+});
 Object.defineProperty(exports, "SUCCESS_DEFAULTS", {
   enumerable: true,
   get: function () { return newtoneApi.SUCCESS_DEFAULTS; }
 });
+Object.defineProperty(exports, "TERTIARY_DEFAULTS", {
+  enumerable: true,
+  get: function () { return newtoneApi.TERTIARY_DEFAULTS; }
+});
 Object.defineProperty(exports, "WARNING_DEFAULTS", {
   enumerable: true,
   get: function () { return newtoneApi.WARNING_DEFAULTS; }
@@ -3435,6 +3929,14 @@ Object.defineProperty(exports, "buildGoogleFontsUrl", {
   enumerable: true,
   get: function () { return newtoneApi.buildGoogleFontsUrl; }
 });
+Object.defineProperty(exports, "computeColors", {
+  enumerable: true,
+  get: function () { return newtoneApi.computeColors; }
+});
+Object.defineProperty(exports, "computeSwatches", {
+  enumerable: true,
+  get: function () { return newtoneApi.computeSwatches; }
+});
 Object.defineProperty(exports, "computeTokens", {
   enumerable: true,
   get: function () { return newtoneApi.computeTokens; }
@@ -3443,17 +3945,13 @@ Object.defineProperty(exports, "enqueueObservation", {
   enumerable: true,
   get: function () { return newtoneApi.enqueueObservation; }
 });
-Object.defineProperty(exports, "isV2TokenOverrides", {
-  enumerable: true,
-  get: function () { return newtoneApi.isV2TokenOverrides; }
-});
 Object.defineProperty(exports, "measureAvgCharWidth", {
   enumerable: true,
   get: function () { return newtoneApi.measureAvgCharWidth; }
 });
-Object.defineProperty(exports, "migrateV1ToV2", {
+Object.defineProperty(exports, "resolveTheme", {
   enumerable: true,
-  get: function () { return newtoneApi.migrateV1ToV2; }
+  get: function () { return newtoneApi.resolveTheme; }
 });
 Object.defineProperty(exports, "useBreakpoint", {
   enumerable: true,
@@ -3471,6 +3969,10 @@ Object.defineProperty(exports, "useNewtoneTheme", {
   enumerable: true,
   get: function () { return newtoneApi.useNewtoneTheme; }
 });
+Object.defineProperty(exports, "useScheme", {
+  enumerable: true,
+  get: function () { return newtoneApi.useScheme; }
+});
 Object.defineProperty(exports, "useTokens", {
   enumerable: true,
   get: function () { return newtoneApi.useTokens; }
@@ -3484,11 +3986,16 @@ exports.Button = Button;
 exports.CATEGORIES = CATEGORIES;
 exports.COMPONENTS = COMPONENTS;
 exports.Card = Card;
+exports.Chip = Chip;
 exports.ColorScaleSlider = ColorScaleSlider;
+exports.ContentCard = ContentCard;
+exports.Divider = Divider;
 exports.Frame = Frame;
 exports.HueSlider = HueSlider;
 exports.ICON_CATALOG = ICON_CATALOG;
 exports.Icon = Icon;
+exports.LogoMonogram = LogoMonogram;
+exports.LogoWordmark = LogoWordmark;
 exports.Navbar = Navbar;
 exports.Popover = Popover;
 exports.Select = Select;