@newtonedev/components 0.1.7 → 0.1.8

package/dist/index.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
-var React13 = require('react');
+var React14 = require('react');
 var newtone = require('newtone');
+var fonts = require('@newtonedev/fonts');
 var reactNative = require('react-native');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React13__default = /*#__PURE__*/_interopDefault(React13);
+var React14__default = /*#__PURE__*/_interopDefault(React14);
 
 // src/theme/NewtoneProvider.tsx
 var DEFAULT_THEME_CONFIG = {
@@ -60,40 +61,10 @@ var DEFAULT_THEME_CONFIG = {
     pill: 999
   },
   typography: {
-    fonts: {
-      mono: {
-        type: "system",
-        family: "ui-monospace",
-        fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
-      },
-      display: {
-        type: "system",
-        family: "system-ui",
-        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-      },
-      default: {
-        type: "system",
-        family: "system-ui",
-        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-      }
-    },
-    scale: {
-      xs: 10,
-      // 16 / 1.25^2
-      sm: 13,
-      // 16 / 1.25
-      base: 16,
-      md: 20,
-      // 16 * 1.25
-      lg: 25,
-      // 16 * 1.25^2
-      xl: 31,
-      // 16 * 1.25^3
-      xxl: 39
-      // 16 * 1.25^4
-    },
-    lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
-    fontWeight: { regular: 400, medium: 500, semibold: 600, bold: 700 }
+    fonts: fonts.DEFAULT_FONT_SLOTS,
+    fontSizes: fonts.DEFAULT_FONT_SIZES,
+    lineHeights: fonts.DEFAULT_LINE_HEIGHTS,
+    roles: fonts.DEFAULT_ROLE_SCALES
   },
   icons: {
     variant: "rounded",
@@ -105,26 +76,12 @@ var DEFAULT_THEME_CONFIG = {
   }
 };
 
-// src/fonts/buildGoogleFontsUrl.ts
-function buildGoogleFontsUrl(fonts) {
-  const googleFonts = [fonts.mono, fonts.display, fonts.default].filter(
-    (f) => f.type === "google"
-  );
-  if (googleFonts.length === 0) return null;
-  const unique = [...new Map(googleFonts.map((f) => [f.family, f])).values()];
-  const families = unique.map((f) => {
-    const encoded = f.family.replace(/ /g, "+");
-    return `family=${encoded}:wght@400;500;600;700`;
-  });
-  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
-}
-
 // src/fonts/GoogleFontLoader.tsx
-function GoogleFontLoader({ fonts }) {
-  const linkRef = React13.useRef(null);
-  React13.useEffect(() => {
+function GoogleFontLoader({ fonts: fonts$1 }) {
+  const linkRef = React14.useRef(null);
+  React14.useEffect(() => {
     if (typeof document === "undefined") return;
-    const url = buildGoogleFontsUrl(fonts);
+    const url = fonts.buildGoogleFontsUrl(fonts$1);
     if (linkRef.current) {
       linkRef.current.remove();
       linkRef.current = null;
@@ -144,18 +101,55 @@ function GoogleFontLoader({ fonts }) {
       }
     };
   }, [
-    fonts.mono.family,
-    fonts.mono.type,
-    fonts.display.family,
-    fonts.display.type,
-    fonts.default.family,
-    fonts.default.type
+    fonts$1.main.config.family,
+    fonts$1.main.config.type,
+    fonts$1.main.weights.regular,
+    fonts$1.main.weights.medium,
+    fonts$1.main.weights.bold,
+    fonts$1.display.config.family,
+    fonts$1.display.config.type,
+    fonts$1.display.weights.regular,
+    fonts$1.display.weights.medium,
+    fonts$1.display.weights.bold,
+    fonts$1.mono.config.family,
+    fonts$1.mono.config.type,
+    fonts$1.mono.weights.regular,
+    fonts$1.mono.weights.medium,
+    fonts$1.mono.weights.bold,
+    fonts$1.currency.config.family,
+    fonts$1.currency.config.type,
+    fonts$1.currency.weights.regular,
+    fonts$1.currency.weights.medium,
+    fonts$1.currency.weights.bold
   ]);
   return null;
 }
+function SelfHostedFontLoader({ fontFaceCss }) {
+  const styleRef = React14.useRef(null);
+  React14.useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (styleRef.current) {
+      styleRef.current.remove();
+      styleRef.current = null;
+    }
+    if (!fontFaceCss) return;
+    const style = document.createElement("style");
+    style.setAttribute("data-newtone-fonts", "self-hosted");
+    style.textContent = fontFaceCss;
+    document.head.appendChild(style);
+    styleRef.current = style;
+    return () => {
+      if (styleRef.current) {
+        styleRef.current.remove();
+        styleRef.current = null;
+      }
+    };
+  }, [fontFaceCss]);
+  return null;
+}
 function IconFontLoader({ icons }) {
-  const linkRef = React13.useRef(null);
-  React13.useEffect(() => {
+  const linkRef = React14.useRef(null);
+  React14.useEffect(() => {
     if (typeof document === "undefined") return;
     const variantName = icons.variant.charAt(0).toUpperCase() + icons.variant.slice(1);
     const family = `Material+Symbols+${variantName}`;
@@ -182,33 +176,36 @@ function IconFontLoader({ icons }) {
 }
 
 // src/theme/NewtoneProvider.tsx
-var ThemeContext = React13.createContext(null);
+var ThemeContext = React14.createContext(null);
 function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = "light",
-  children
+  children,
+  reportingEndpoint,
+  fontFaceCss
 }) {
-  const [mode, setMode] = React13.useState(initialMode);
-  const value = React13.useMemo(
+  const [mode, setMode] = React14.useState(initialMode);
+  const value = React14.useMemo(
     () => ({
       config,
       mode,
-      setMode
+      setMode,
+      reportingEndpoint
     }),
-    [config, mode]
+    [config, mode, reportingEndpoint]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React13__default.default.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React13__default.default.createElement(IconFontLoader, { icons: config.icons }), children);
+  return /* @__PURE__ */ React14__default.default.createElement(ThemeContext.Provider, { value }, fontFaceCss ? /* @__PURE__ */ React14__default.default.createElement(SelfHostedFontLoader, { fontFaceCss }) : /* @__PURE__ */ React14__default.default.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React14__default.default.createElement(IconFontLoader, { icons: config.icons }), children);
 }
 function useNewtoneTheme() {
-  const context = React13.useContext(ThemeContext);
+  const context = React14.useContext(ThemeContext);
   if (!context) {
     throw new Error("useNewtoneTheme must be used within NewtoneProvider");
   }
   return context;
 }
-var FrameContext = React13.createContext(null);
+var FrameContext = React14.createContext(null);
 function useFrameContext() {
-  return React13.useContext(FrameContext);
+  return React14.useContext(FrameContext);
 }
 var NEUTRAL_DEFAULTS = {
   light: {
@@ -280,10 +277,6 @@ var ERROR_DEFAULTS = {
     border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
   }
 };
-function fontConfigToFamily(font) {
-  const family = font.family.includes(" ") ? `"${font.family}"` : font.family;
-  return `${family}, ${font.fallback}`;
-}
 var clamp = (n) => Math.max(0, Math.min(1, n));
 function computePaletteTokens(palette, defaults, mode, elevation, dynamicRange, elevationDelta, effectiveTextMode, autoAccentNv, neutralTextPrimary, neutralBgElevated) {
   const modeDefaults = defaults[mode];
@@ -538,13 +531,25 @@ function computeTokens(config, mode, elevation, spacing, radius, typography, ico
     radius,
     typography: {
       fonts: {
-        mono: fontConfigToFamily(typography.fonts.mono),
-        display: fontConfigToFamily(typography.fonts.display),
-        default: fontConfigToFamily(typography.fonts.default)
+        main: {
+          family: fonts.fontConfigToFamily(typography.fonts.main.config),
+          weights: typography.fonts.main.weights
+        },
+        display: {
+          family: fonts.fontConfigToFamily(typography.fonts.display.config),
+          weights: typography.fonts.display.weights
+        },
+        mono: {
+          family: fonts.fontConfigToFamily(typography.fonts.mono.config),
+          weights: typography.fonts.mono.weights
+        },
+        currency: {
+          family: fonts.fontConfigToFamily(typography.fonts.currency.config),
+          weights: typography.fonts.currency.weights
+        }
       },
-      size: typography.scale,
-      lineHeight: typography.lineHeight,
-      weight: typography.fontWeight
+      fontSizes: typography.fontSizes,
+      lineHeights: typography.lineHeights
     },
     icons: {
       variant: icons.variant,
@@ -560,7 +565,7 @@ function useTokens(elevation) {
   const frameCtx = useFrameContext();
   const resolvedElevation = elevation ?? frameCtx?.elevation ?? 1;
   const canReuse = frameCtx !== null && elevation === void 0 && frameCtx.elevation === resolvedElevation;
-  return React13.useMemo(() => {
+  return React14.useMemo(() => {
     if (canReuse) {
       return { ...frameCtx.tokens, elevation: resolvedElevation };
     }
@@ -659,7 +664,7 @@ function getSizeConfig(size, tokens) {
       padding: 8,
       gap: tokens.spacing["08"],
       borderRadius: 8,
-      textSize: "base",
+      textSize: "md",
       // 16px
       iconSize: 24
     },
@@ -667,7 +672,7 @@ function getSizeConfig(size, tokens) {
       padding: 12,
       gap: tokens.spacing["08"],
       borderRadius: 12,
-      textSize: "base",
+      textSize: "md",
       // 16px
       iconSize: 24
     },
@@ -675,7 +680,7 @@ function getSizeConfig(size, tokens) {
       padding: 16,
       gap: tokens.spacing["08"],
       borderRadius: 16,
-      textSize: "base",
+      textSize: "md",
       // 16px
       iconSize: 24
     }
@@ -789,8 +794,8 @@ function Icon({
   ref
 }) {
   const tokens = useTokens();
-  const iconStyle = React13.useMemo(() => {
-    const fontSize = size ?? tokens.typography.size.base;
+  const iconStyle = React14.useMemo(() => {
+    const fontSize = size ?? tokens.typography.fontSizes["05"];
     const getOpticalSize = (size2) => {
       if (size2 <= 22) return 20;
       if (size2 <= 32) return 24;
@@ -819,7 +824,7 @@ function Icon({
       ...style
     };
   }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React14__default.default.createElement(
     reactNative.Text,
     {
       ref,
@@ -832,6 +837,118 @@ function Icon({
     name
   );
 }
+
+// src/fonts/measureFont.ts
+var REF_STRING = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";
+async function measureAvgCharWidth(fontFamily, fontWeight, fallback, fontSize = 16) {
+  if (typeof document === "undefined") return 0.55;
+  try {
+    await document.fonts.load(`${fontWeight} ${fontSize}px "${fontFamily}"`);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return 0.55;
+    ctx.font = `${fontWeight} ${fontSize}px "${fontFamily}", ${fallback}`;
+    const ratio = ctx.measureText(REF_STRING).width / REF_STRING.length / fontSize;
+    return Math.round(ratio * 1e3) / 1e3;
+  } catch {
+    return 0.55;
+  }
+}
+
+// src/fonts/useLocalCalibration.ts
+var STORAGE_KEY = "newtone:font-metrics:v1";
+var TTL_MS = 7 * 24 * 60 * 60 * 1e3;
+function readCache() {
+  if (typeof localStorage === "undefined") return {};
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+function writeCache(cache) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+  } catch {
+  }
+}
+function cacheKey(fontFamily, fontWeight) {
+  return `${fontFamily}:${fontWeight}`;
+}
+function useLocalCalibration(fontFamily, fontWeight, fallback, baseCalibration) {
+  const key = cacheKey(fontFamily, fontWeight);
+  const [ratio, setRatio] = React14.useState(() => {
+    const cache = readCache();
+    const entry = cache[key];
+    if (entry && Date.now() - entry.measuredAt < TTL_MS) {
+      return entry.ratio;
+    }
+    return baseCalibration ?? 0.55;
+  });
+  React14.useEffect(() => {
+    const cache = readCache();
+    const entry = cache[key];
+    if (entry && Date.now() - entry.measuredAt < TTL_MS) {
+      if (entry.ratio !== ratio) setRatio(entry.ratio);
+      return;
+    }
+    let cancelled = false;
+    measureAvgCharWidth(fontFamily, fontWeight, fallback).then((measured) => {
+      if (cancelled) return;
+      const updated = { ...readCache(), [key]: { ratio: measured, measuredAt: Date.now() } };
+      writeCache(updated);
+      setRatio(measured);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, fontFamily, fontWeight, fallback]);
+  return ratio;
+}
+
+// src/fonts/useTypographyCalibrations.ts
+function useTypographyCalibrations() {
+  const { config } = useNewtoneTheme();
+  return config.typography.calibrations ?? {};
+}
+
+// src/fonts/reportQueue.ts
+var queue = [];
+var flushTimer;
+function flush() {
+  if (queue.length === 0) return;
+  const byEndpoint = /* @__PURE__ */ new Map();
+  for (const item of queue) {
+    const group = byEndpoint.get(item.endpoint) ?? [];
+    group.push(item.payload);
+    byEndpoint.set(item.endpoint, group);
+  }
+  queue.length = 0;
+  for (const [endpoint, observations] of byEndpoint) {
+    fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ observations }),
+      // keepalive: true allows the request to outlive the page
+      keepalive: true
+    }).catch(() => {
+    });
+  }
+}
+function enqueueObservation(endpoint, payload) {
+  queue.push({ endpoint, payload });
+  if (flushTimer !== void 0) clearTimeout(flushTimer);
+  flushTimer = setTimeout(flush, 2e3);
+}
+function useBreakpoint() {
+  const { width } = reactNative.useWindowDimensions();
+  return fonts.getBreakpointForWidth(width);
+}
+
+// src/primitives/Text/Text.tsx
+var TextScopeContext = React14.createContext(null);
 function resolveTextColor(color, tokens) {
   switch (color) {
     case "primary":
@@ -852,53 +969,188 @@ function resolveTextColor(color, tokens) {
       return newtone.srgbToHex(tokens.error.fill.srgb);
   }
 }
-function Text2({
+var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
+var ROLE_HEADING_LEVEL = {
+  headline: 1,
+  title: 2,
+  heading: 3
+};
+function extractCharacterCount(node) {
+  if (typeof node === "string") return node.length;
+  if (typeof node === "number") return String(node).length;
+  if (!node) return 0;
+  if (Array.isArray(node)) {
+    return node.reduce((sum, child) => sum + extractCharacterCount(child), 0);
+  }
+  if (typeof node === "object" && "props" in node) {
+    return extractCharacterCount(node.props?.children);
+  }
+  return 0;
+}
+function TextBase({
   children,
-  size = "base",
-  weight = "regular",
+  scope = "main",
+  role = "body",
   color = "primary",
-  font = "default",
-  lineHeight = "normal",
+  size: sizeOverride,
   align,
   numberOfLines,
   elevation = 1,
   style,
-  // Accessibility
-  accessibilityRole,
-  // Testing & platform
+  accessibilityRole: accessibilityRoleOverride,
   testID,
   nativeID,
-  ref
+  ref,
+  responsive = false,
+  centerVertically = false,
+  features
 }) {
   const tokens = useTokens(elevation);
-  const resolvedStyle = React13.useMemo(() => {
-    const fontSize = tokens.typography.size[size];
+  const { config, reportingEndpoint } = useNewtoneTheme();
+  const size = sizeOverride ?? "md";
+  const fontSlot = tokens.typography.fonts[scope];
+  const resolvedFontWeight = config.typography.roleWeights?.[role] ?? fonts.ROLE_DEFAULT_WEIGHTS[role];
+  const breakpoint = useBreakpoint();
+  const baseStep = config.typography.roles[role][size];
+  const bpScale = fonts.BREAKPOINT_ROLE_SCALE[breakpoint][role];
+  const step = bpScale === 1 ? baseStep : fonts.scaleRoleStep(baseStep, bpScale);
+  const calibrations = useTypographyCalibrations();
+  const fontSlotFull = config.typography.fonts[scope];
+  const localRatio = useLocalCalibration(
+    fontSlot.family,
+    fonts.SEMANTIC_WEIGHT_MAP.regular,
+    fontSlotFull.config.fallback,
+    calibrations[fontSlot.family]
+  );
+  const isAdaptive = ADAPTIVE_ROLES.has(role);
+  const [containerWidth, setContainerWidth] = React14.useState(null);
+  const characterCount = React14.useMemo(() => extractCharacterCount(children), [children]);
+  const resolvedStep = React14.useMemo(
+    () => fonts.resolveResponsiveSize(
+      {
+        role,
+        size,
+        responsive: responsive && isAdaptive,
+        fontFamily: fontSlot.family,
+        maxFontSize: step.fontSize,
+        minFontSize: Math.max(8, Math.round(step.fontSize * 0.7))
+      },
+      config.typography.roles,
+      containerWidth != null ? { containerWidth, characterCount } : void 0,
+      { [fontSlot.family]: localRatio }
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [role, size, responsive, isAdaptive, fontSlot.family, step.fontSize, config.typography.roles, containerWidth, characterCount, localRatio]
+  );
+  React14.useEffect(() => {
+    if (!reportingEndpoint || !responsive || !isAdaptive || containerWidth == null) return;
+    const lineWidths = fonts.estimateLineWidths(characterCount, containerWidth, resolvedStep.fontSize, localRatio);
+    const lastLine = lineWidths[lineWidths.length - 1];
+    enqueueObservation(reportingEndpoint, {
+      fontFamily: fontSlot.family,
+      fontWeight: resolvedFontWeight,
+      role,
+      size,
+      fontSize: resolvedStep.fontSize,
+      containerWidth,
+      characterCount,
+      lineCount: lineWidths.length,
+      lastLineRatio: containerWidth > 0 ? lastLine / containerWidth : 1
+    });
+  }, [reportingEndpoint, resolvedStep.fontSize, containerWidth]);
+  const resolvedStyle = React14.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;
+    const vcOffset = centerVertically && currentMetrics ? Math.round(currentMetrics.verticalCenterOffset * activeStep.fontSize * 2) / 2 : 0;
+    const activeFeatures = features ? currentMetrics?.features ? features.filter((tag) => currentMetrics.features.includes(tag)) : [...features] : [];
+    const featureSettings = activeFeatures.length > 0 ? fonts.buildFontFeatureSettings(activeFeatures) : void 0;
     return {
-      // Font family from the theme (e.g. 'default' → 'Inter', 'mono' → 'JetBrains Mono').
-      fontFamily: tokens.typography.fonts[font],
-      fontSize,
-      // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
-      fontWeight: String(tokens.typography.weight[weight]),
-      // Convert the theme color from internal sRGB format to a hex string (e.g. '#1a1a1a').
+      fontFamily: fontSlot.family,
+      fontSize: activeStep.fontSize,
+      fontWeight: String(resolvedFontWeight),
       color: resolveTextColor(color, tokens),
-      // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
-      lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
-      textAlign: align
+      lineHeight: correctedLineHeight,
+      textAlign: align,
+      ...vcOffset !== 0 ? { transform: [{ translateY: vcOffset }] } : {},
+      ...featureSettings ? { fontFeatureSettings: featureSettings } : {}
     };
-  }, [tokens, size, weight, color, font, lineHeight, align]);
-  return /* @__PURE__ */ React13__default.default.createElement(
+  }, [tokens, fontSlot, step, resolvedStep, responsive, isAdaptive, resolvedFontWeight, color, align, config.typography.fontMetrics, centerVertically, features]);
+  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 = React14.useMemo(() => ({ weights: fonts.SEMANTIC_WEIGHT_MAP }), []);
+  const textNode = /* @__PURE__ */ React14__default.default.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React14__default.default.createElement(
     reactNative.Text,
     {
       ref,
       testID,
       nativeID,
-      accessibilityRole,
+      accessibilityRole: effectiveA11yRole,
+      "aria-level": ariaLevel,
       style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
       numberOfLines
     },
     children
+  ));
+  if (responsive && isAdaptive) {
+    return /* @__PURE__ */ React14__default.default.createElement(
+      reactNative.View,
+      {
+        onLayout: (e) => {
+          const w = e.nativeEvent.layout.width;
+          if (w > 0) setContainerWidth(w);
+        },
+        style: { width: "100%" }
+      },
+      textNode
+    );
+  }
+  return textNode;
+}
+function TextSpan({ children, color, weight, italic, underline, highlight, style }) {
+  const tokens = useTokens(1);
+  const scopeCtx = React14.useContext(TextScopeContext);
+  const spanStyle = React14.useMemo(() => {
+    const s = {};
+    if (color) s.color = resolveTextColor(color, tokens);
+    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);
+    return s;
+  }, [tokens, scopeCtx, color, weight, italic, underline, highlight]);
+  return React14__default.default.createElement(
+    reactNative.Text,
+    { style: style ? [spanStyle, ...Array.isArray(style) ? style : [style]] : spanStyle },
+    children
   );
 }
+function TextBold(props) {
+  return React14__default.default.createElement(TextSpan, { ...props, weight: "bold" });
+}
+function TextMedium(props) {
+  return React14__default.default.createElement(TextSpan, { ...props, weight: "medium" });
+}
+function TextItalic(props) {
+  return React14__default.default.createElement(TextSpan, { ...props, italic: true });
+}
+function TextUnderline(props) {
+  return React14__default.default.createElement(TextSpan, { ...props, underline: true });
+}
+function TextHighlight(props) {
+  return React14__default.default.createElement(TextSpan, props);
+}
+
+// src/primitives/Text/index.ts
+var Text2 = Object.assign(TextBase, {
+  Span: TextSpan,
+  Bold: TextBold,
+  Medium: TextMedium,
+  Italic: TextItalic,
+  Underline: TextUnderline,
+  Highlight: TextHighlight
+});
 
 // src/primitives/Frame/Frame.utils.ts
 function resolveSpacing(value, tokens) {
@@ -1067,7 +1319,7 @@ function Wrapper({
   ref
 }) {
   const tokens = useTokens(1);
-  const containerStyle = React13.useMemo(
+  const containerStyle = React14.useMemo(
     () => getWrapperStyles({
       tokens,
       direction,
@@ -1102,7 +1354,7 @@ function Wrapper({
     ]
   );
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React14__default.default.createElement(
     reactNative.View,
     {
       ref,
@@ -1129,17 +1381,17 @@ function Button({
   ...pressableProps
 }) {
   const tokens = useTokens();
-  const { variantColors, sizeTokens } = React13__default.default.useMemo(
+  const { variantColors, sizeTokens } = React14__default.default.useMemo(
     () => getButtonConfig(variant, semantic, size, disabled, tokens),
     [variant, semantic, size, disabled, tokens]
   );
-  const padding = React13__default.default.useMemo(
+  const padding = React14__default.default.useMemo(
     () => computeButtonPadding(size, !!icon, !!children, iconPosition),
     [size, icon, children, iconPosition]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
+  return /* @__PURE__ */ React14__default.default.createElement(reactNative.Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
     // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React14__default.default.createElement(
       Wrapper,
       {
         direction: "horizontal",
@@ -1160,13 +1412,14 @@ function Button({
           ...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__ */ React14__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__ */ React14__default.default.createElement(
         Text2,
         {
+          role: "label",
           size: sizeTokens.textSize,
-          weight: "semibold",
+          centerVertically: true,
           style: [
             { color: variantColors.textColor },
             ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
@@ -1174,7 +1427,7 @@ function Button({
         },
         children
       ),
-      icon && iconPosition === "right" && /* @__PURE__ */ React13__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+      icon && iconPosition === "right" && /* @__PURE__ */ React14__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
     )
   ));
 }
@@ -1199,11 +1452,11 @@ function Card({
   disabled = false
 }) {
   const tokens = useTokens(elevation);
-  const styles = React13__default.default.useMemo(
+  const styles = React14__default.default.useMemo(
     () => getCardStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+  return /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
 }
 var hadKeyboardEvent = false;
 var isListenerSetup = false;
@@ -1233,16 +1486,16 @@ function setupModality() {
   }, true);
 }
 function useFocusVisible() {
-  const [isFocusVisible, setIsFocusVisible] = React13.useState(false);
-  React13.useEffect(() => {
+  const [isFocusVisible, setIsFocusVisible] = React14.useState(false);
+  React14.useEffect(() => {
     setupModality();
   }, []);
-  const onFocus = React13.useCallback(() => {
+  const onFocus = React14.useCallback(() => {
     if (hadKeyboardEvent) {
       setIsFocusVisible(true);
     }
   }, []);
-  const onBlur = React13.useCallback(() => {
+  const onBlur = React14.useCallback(() => {
     setIsFocusVisible(false);
   }, []);
   const focusProps = { onFocus, onBlur };
@@ -1354,9 +1607,9 @@ function getFrameStyles(input) {
 
 // src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
-  return React13__default.default.Children.map(children, (child) => {
+  return React14__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__ */ React14__default.default.createElement(reactNative.Text, { style: textStyle }, child);
     }
     return child;
   });
@@ -1411,7 +1664,7 @@ function Frame({
   const parentFrameCtx = useFrameContext();
   const resolvedFrameElevation = elevation ?? 0;
   const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
-  const tokens = React13.useMemo(() => {
+  const tokens = React14.useMemo(() => {
     return computeTokens(
       config.colorSystem,
       mode,
@@ -1423,7 +1676,7 @@ function Frame({
       config.tokenOverrides
     );
   }, [config, mode, resolvedElevation]);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getFrameStyles({
       tokens,
       frameElevation: resolvedFrameElevation,
@@ -1471,7 +1724,7 @@ function Frame({
       disabled
     ]
   );
-  const contextValue = React13.useMemo(
+  const contextValue = React14.useMemo(
     () => ({ elevation: resolvedElevation, tokens }),
     [resolvedElevation, tokens]
   );
@@ -1492,23 +1745,23 @@ function Frame({
     outlineOffset: 2
   } : void 0;
   const webFocusProps = isInteractive ? focusProps : {};
-  const textStyle = React13.useMemo(
+  const textStyle = React14.useMemo(
     () => ({
       color: newtone.srgbToHex(tokens.textPrimary.srgb),
-      fontSize: tokens.typography.size.base,
-      fontFamily: tokens.typography.fonts.default,
-      lineHeight: tokens.typography.size.base * tokens.typography.lineHeight.normal
+      fontSize: tokens.typography.fontSizes["05"],
+      fontFamily: tokens.typography.fonts.main.family,
+      lineHeight: tokens.typography.lineHeights["06"]
     }),
     [tokens]
   );
-  const wrappedChildren = React13.useMemo(
+  const wrappedChildren = React14.useMemo(
     () => wrapTextChildren(children, textStyle),
     [children, textStyle]
   );
-  return /* @__PURE__ */ React13__default.default.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
+  return /* @__PURE__ */ React14__default.default.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
     // Pressable handles taps. When href is set, react-native-web renders
     // it as an <a> tag so it works like a regular link on the web.
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React14__default.default.createElement(
       reactNative.Pressable,
       {
         ref,
@@ -1533,7 +1786,7 @@ function Frame({
     )
   ) : (
     // Non-interactive Frame: just a plain View with no tap handling.
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React14__default.default.createElement(
       reactNative.View,
       {
         ref,
@@ -1553,20 +1806,20 @@ function getTextInputStyles(tokens, disabled) {
       gap: tokens.spacing["04"]
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb)
     },
     input: {
-      fontFamily: tokens.typography.fonts.default,
+      fontFamily: tokens.typography.fonts.main.family,
       backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: newtone.srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing["08"],
       paddingHorizontal: tokens.spacing["12"],
-      fontSize: tokens.typography.size.base,
+      fontSize: tokens.typography.fontSizes["05"],
       color: disabled ? newtone.srgbToHex(tokens.textSecondary.srgb) : newtone.srgbToHex(tokens.textPrimary.srgb),
       opacity: disabled ? 0.5 : 1
     }
@@ -1579,11 +1832,11 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React13__default.default.useMemo(
+  const styles = React14__default.default.useMemo(
     () => getTextInputStyles(tokens, disabled),
     [tokens, disabled]
   );
-  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__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React14__default.default.createElement(
     reactNative.TextInput,
     {
       style: styles.input,
@@ -1635,15 +1888,15 @@ function Popover({
   contentStyle
 }) {
   const tokens = useTokens(1);
-  const containerRef = React13.useRef(null);
-  const [triggerHeight, setTriggerHeight] = React13.useState(0);
-  const onTriggerLayout = React13.useCallback(
+  const containerRef = React14.useRef(null);
+  const [triggerHeight, setTriggerHeight] = React14.useState(0);
+  const onTriggerLayout = React14.useCallback(
     (e) => {
       setTriggerHeight(e.nativeEvent.layout.height);
     },
     []
   );
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (!isOpen) return;
     openPopovers.forEach((closeFn) => closeFn());
     openPopovers.clear();
@@ -1652,7 +1905,7 @@ function Popover({
       openPopovers.delete(onClose);
     };
   }, [isOpen, onClose]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (!isOpen) return;
     if (typeof document === "undefined") return;
     const handleMouseDown = (e) => {
@@ -1664,7 +1917,7 @@ function Popover({
     document.addEventListener("mousedown", handleMouseDown, true);
     return () => document.removeEventListener("mousedown", handleMouseDown, true);
   }, [isOpen, onClose]);
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React14.useCallback(
     (e) => {
       if (closeOnEscape && e.key === "Escape") {
         e.stopPropagation();
@@ -1673,41 +1926,41 @@ function Popover({
     },
     [closeOnEscape, onClose]
   );
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
     [tokens, triggerHeight, offset, maxHeight, width, isOpen]
   );
-  const containerStyles = React13.useMemo(
+  const containerStyles = React14.useMemo(
     () => [styles.container, ...Array.isArray(style) ? style : style ? [style] : []],
     [styles.container, style]
   );
-  const mergedContentStyles = React13.useMemo(
+  const mergedContentStyles = React14.useMemo(
     () => [styles.content, ...Array.isArray(contentStyle) ? contentStyle : contentStyle ? [contentStyle] : []],
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React14__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__ */ React14__default.default.createElement(reactNative.View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React14__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] = React14.useState(options?.initialOpen ?? false);
+  const open = React14.useCallback(() => {
     setIsOpen(true);
     options?.onOpenChange?.(true);
   }, [options]);
-  const close = React13.useCallback(() => {
+  const close = React14.useCallback(() => {
     setIsOpen(false);
     options?.onOpenChange?.(false);
   }, [options]);
-  const toggle = React13.useCallback(() => {
+  const toggle = React14.useCallback(() => {
     setIsOpen((prev) => {
       const next = !prev;
       options?.onOpenChange?.(next);
@@ -1723,7 +1976,7 @@ function isOptionGroup(item) {
 }
 function getSelectStyles(tokens, disabled, size, isOpen) {
   const isSm = size === "sm";
-  const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
+  const fontSize = isSm ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   const iconSize = fontSize + 2;
   const iconSpace = iconSize + tokens.spacing["08"];
   const paddingVertical = isSm ? tokens.spacing["04"] : tokens.spacing["08"];
@@ -1734,9 +1987,9 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       zIndex: isOpen ? 999 : 0
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb)
     },
     trigger: {
@@ -1753,7 +2006,7 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
     },
     triggerText: {
       flex: 1,
-      fontFamily: tokens.typography.fonts.default,
+      fontFamily: tokens.typography.fonts.main.family,
       fontSize,
       color: disabled ? newtone.srgbToHex(tokens.textSecondary.srgb) : newtone.srgbToHex(tokens.textPrimary.srgb)
     },
@@ -1765,9 +2018,9 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       justifyContent: "center"
     },
     groupLabel: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["01"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb),
       textTransform: "uppercase",
       letterSpacing: 0.5,
@@ -1794,10 +2047,10 @@ function useSelect({
   onClose,
   onOpen
 }) {
-  const [focusedIndex, setFocusedIndex] = React13.useState(-1);
-  const typeAheadRef = React13.useRef("");
-  const typeAheadTimerRef = React13.useRef();
-  React13.useEffect(() => {
+  const [focusedIndex, setFocusedIndex] = React14.useState(-1);
+  const typeAheadRef = React14.useRef("");
+  const typeAheadTimerRef = React14.useRef();
+  React14.useEffect(() => {
     if (isOpen) {
       const selectedIdx = flatOptions.findIndex((o) => o.value === value);
       if (selectedIdx >= 0 && !flatOptions[selectedIdx].disabled) {
@@ -1810,7 +2063,7 @@ function useSelect({
       setFocusedIndex(-1);
     }
   }, [isOpen, flatOptions, value]);
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React14.useCallback(
     (e) => {
       const key = e.key;
       if (!isOpen) {
@@ -1889,9 +2142,9 @@ function SelectOptionRow({
   const tokens = useTokens(1);
   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.size.sm : tokens.typography.size.base;
+  const fontSize = size === "sm" ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   if (renderOption) {
-    return /* @__PURE__ */ React13__default.default.createElement(
+    return /* @__PURE__ */ React14__default.default.createElement(
       reactNative.Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -1902,7 +2155,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React13__default.default.createElement(
+  return /* @__PURE__ */ React14__default.default.createElement(
     reactNative.Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -1931,18 +2184,18 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React14__default.default.createElement(
       reactNative.Text,
       {
         style: [
           {
             flex: 1,
-            fontFamily: tokens.typography.fonts.default,
+            fontFamily: tokens.typography.fonts.main.family,
             fontSize,
             color: newtone.srgbToHex(tokens.textPrimary.srgb)
           },
           isSelected && {
-            fontWeight: tokens.typography.weight.semibold,
+            fontWeight: tokens.typography.fonts.main.weights.medium,
             color: newtone.srgbToHex(tokens.accent.fill.srgb)
           },
           option.disabled && {
@@ -1953,7 +2206,7 @@ function SelectOptionRow({
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React13__default.default.createElement(
+    isSelected && /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React14__default.default.createElement(
       Icon,
       {
         name: "check",
@@ -1988,7 +2241,7 @@ function Select({
 }) {
   const tokens = useTokens(1);
   const { isOpen, open, close, toggle } = usePopover();
-  const flatOptions = React13.useMemo(() => flattenOptions(options), [options]);
+  const flatOptions = React14.useMemo(() => flattenOptions(options), [options]);
   const { focusedIndex, handleKeyDown } = useSelect({
     flatOptions,
     value,
@@ -2000,7 +2253,7 @@ function Select({
     onClose: close,
     onOpen: open
   });
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getSelectStyles(tokens, disabled, size, isOpen),
     [tokens, disabled, size, isOpen]
   );
@@ -2008,7 +2261,7 @@ function Select({
   const displayLabel = selectedOption?.label ?? placeholder ?? value;
   const iconColor = disabled ? newtone.srgbToHex(tokens.textSecondary.srgb) : newtone.srgbToHex(tokens.textPrimary.srgb);
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React13__default.default.createElement(
+  const trigger = /* @__PURE__ */ React14__default.default.createElement(
     reactNative.Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -2018,24 +2271,24 @@ 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__ */ React14__default.default.createElement(reactNative.Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React14__default.default.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
-        size: size === "sm" ? tokens.typography.size.sm + 2 : tokens.typography.size.base + 2,
+        size: size === "sm" ? tokens.typography.fontSizes["04"] + 2 : tokens.typography.fontSizes["05"] + 2,
         color: iconColor
       }
     ))
   );
-  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__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React14__default.default.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React13__default.default.createElement(
+    /* @__PURE__ */ React14__default.default.createElement(
       reactNative.ScrollView,
       {
         bounces: false,
@@ -2044,7 +2297,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__ */ React14__default.default.createElement(reactNative.View, { key: item.label }, /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React14__default.default.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -2060,7 +2313,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React13__default.default.createElement(
+        return /* @__PURE__ */ React14__default.default.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -2092,9 +2345,9 @@ function getToggleStyles(tokens, value, disabled) {
       opacity: disabled ? 0.5 : 1
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb)
     },
     track: {
@@ -2124,16 +2377,16 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13__default.default.useMemo(
+  const styles = React14__default.default.useMemo(
     () => getToggleStyles(tokens, value, disabled),
     [tokens, value, disabled]
   );
-  const handlePress = React13__default.default.useCallback(() => {
+  const handlePress = React14__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__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.label }, label), /* @__PURE__ */ React14__default.default.createElement(
     reactNative.Pressable,
     {
       onPress: handlePress,
@@ -2141,7 +2394,7 @@ 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__ */ React14__default.default.createElement(reactNative.View, { style: styles.track }, /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
@@ -2158,15 +2411,15 @@ function getSliderStyles(tokens, disabled) {
       alignItems: "center"
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb)
     },
     value: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textPrimary.srgb)
     },
     valueInput: {
@@ -2178,9 +2431,9 @@ function getSliderStyles(tokens, disabled) {
       borderRadius: 4,
       backgroundColor: "transparent",
       color: newtone.srgbToHex(tokens.textPrimary.srgb),
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       textAlign: "right"
     },
     trackContainer: {
@@ -2227,41 +2480,41 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13__default.default.useMemo(
+  const styles = React14__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 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 = React14__default.default.useRef(null);
+  const trackWidth = React14__default.default.useRef(0);
+  const trackPageX = React14__default.default.useRef(0);
+  const onValueChangeRef = React14__default.default.useRef(onValueChange);
+  const minRef = React14__default.default.useRef(min);
+  const maxRef = React14__default.default.useRef(max);
+  const stepRef = React14__default.default.useRef(step);
+  const disabledRef = React14__default.default.useRef(disabled);
+  React14__default.default.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React13__default.default.useCallback((pageX) => {
+  const computeValue = React14__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 = React14__default.default.useRef(
     reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2277,7 +2530,7 @@ function Slider({
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
-  const handleValueTextSubmit = React13__default.default.useCallback(
+  const handleValueTextSubmit = React14__default.default.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2286,12 +2539,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React13__default.default.useState(String(value));
-  React13__default.default.useEffect(() => {
+  const [editText, setEditText] = React14__default.default.useState(String(value));
+  React14__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__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.labelRow }, label && /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React14__default.default.createElement(
     reactNative.TextInput,
     {
       style: styles.valueInput,
@@ -2303,7 +2556,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__ */ React14__default.default.createElement(reactNative.Text, { style: styles.value }, value)), /* @__PURE__ */ React14__default.default.createElement(
     reactNative.View,
     {
       ref: trackRef,
@@ -2316,9 +2569,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, { width: fillWidth }] }),
-    /* @__PURE__ */ React13__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.trackRail }),
+    /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: [styles.trackFill, { width: fillWidth }] }),
+    /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
@@ -2374,15 +2627,15 @@ function getHueSliderStyles(tokens, disabled) {
       alignItems: "center"
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb)
     },
     value: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textPrimary.srgb)
     },
     valueInput: {
@@ -2394,9 +2647,9 @@ function getHueSliderStyles(tokens, disabled) {
       borderRadius: 4,
       backgroundColor: "transparent",
       color: newtone.srgbToHex(tokens.textPrimary.srgb),
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       textAlign: "right"
     },
     trackContainer: {
@@ -2441,41 +2694,41 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13__default.default.useMemo(
+  const styles = React14__default.default.useMemo(
     () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React13__default.default.useMemo(
+  const segments = React14__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 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 = React14__default.default.useRef(null);
+  const trackWidth = React14__default.default.useRef(0);
+  const trackPageX = React14__default.default.useRef(0);
+  const onValueChangeRef = React14__default.default.useRef(onValueChange);
+  const minRef = React14__default.default.useRef(min);
+  const maxRef = React14__default.default.useRef(max);
+  const disabledRef = React14__default.default.useRef(disabled);
+  React14__default.default.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React13__default.default.useCallback((pageX) => {
+  const computeHue = React14__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 = React14__default.default.useRef(
     reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2491,7 +2744,7 @@ function HueSlider({
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
-  const handleValueTextSubmit = React13__default.default.useCallback(
+  const handleValueTextSubmit = React14__default.default.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2500,12 +2753,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React13__default.default.useState(String(value));
-  React13__default.default.useEffect(() => {
+  const [editText, setEditText] = React14__default.default.useState(String(value));
+  React14__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__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.labelRow }, label && /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React14__default.default.createElement(
     reactNative.TextInput,
     {
       style: styles.valueInput,
@@ -2517,7 +2770,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__ */ React14__default.default.createElement(reactNative.Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React14__default.default.createElement(
     reactNative.View,
     {
       ref: trackRef,
@@ -2530,8 +2783,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__ */ React14__default.default.createElement(reactNative.View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT4 = 22;
@@ -2548,9 +2801,9 @@ function getColorScaleSliderStyles(tokens, disabled) {
       alignItems: "center"
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.textSecondary.srgb)
     },
     trackContainer: {
@@ -2580,9 +2833,9 @@ function getColorScaleSliderStyles(tokens, disabled) {
       borderColor: newtone.srgbToHex(tokens.border.srgb)
     },
     warning: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["01"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: newtone.srgbToHex(tokens.error.fill.srgb)
     }
   });
@@ -2602,36 +2855,36 @@ function ColorScaleSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13__default.default.useMemo(
+  const styles = React14__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 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 = React14__default.default.useRef(null);
+  const trackWidth = React14__default.default.useRef(0);
+  const trackPageX = React14__default.default.useRef(0);
+  const isDragging = React14__default.default.useRef(false);
+  const thumbAnim = React14__default.default.useRef(new reactNative.Animated.Value(0)).current;
+  const onValueChangeRef = React14__default.default.useRef(onValueChange);
+  const disabledRef = React14__default.default.useRef(disabled);
+  const colorsLengthRef = React14__default.default.useRef(colors.length);
+  const trimEndsRef = React14__default.default.useRef(trimEnds);
+  const snapRef = React14__default.default.useRef(snap);
+  React14__default.default.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     colorsLengthRef.current = colors.length;
   }, [colors.length]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     trimEndsRef.current = trimEnds;
   }, [trimEnds]);
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     snapRef.current = snap;
   }, [snap]);
-  const computeNv = React13__default.default.useCallback((pageX) => {
+  const computeNv = React14__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;
@@ -2646,7 +2899,7 @@ function ColorScaleSlider({
     }
     return nv;
   }, []);
-  const panResponder = React13__default.default.useRef(
+  const panResponder = React14__default.default.useRef(
     reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2674,7 +2927,7 @@ function ColorScaleSlider({
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
-  React13__default.default.useEffect(() => {
+  React14__default.default.useEffect(() => {
     if (isDragging.current || !animateValue) {
       thumbAnim.setValue(thumbLeft);
     } else {
@@ -2685,7 +2938,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__ */ React14__default.default.createElement(reactNative.View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.labelRow }, /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.label }, label)), /* @__PURE__ */ React14__default.default.createElement(
     reactNative.View,
     {
       ref: trackRef,
@@ -2700,9 +2953,9 @@ 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: 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__ */ React14__default.default.createElement(reactNative.View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { key: i, style: [styles.segment, { backgroundColor: newtone.srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React14__default.default.createElement(reactNative.Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React14__default.default.createElement(reactNative.Text, { style: styles.warning }, warning));
 }
 function getAppShellStyles(tokens) {
   return reactNative.StyleSheet.create({
@@ -2724,8 +2977,8 @@ function getAppShellStyles(tokens) {
 // src/composites/layout/AppShell/AppShell.tsx
 function AppShell({ sidebar, children }) {
   const tokens = useTokens();
-  const styles = React13__default.default.useMemo(() => getAppShellStyles(tokens), [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 styles = React14__default.default.useMemo(() => getAppShellStyles(tokens), [tokens]);
+  return /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.container }, sidebar, /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.main }, children));
 }
 function getSidebarStyles({ tokens, width, bordered }) {
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
@@ -2763,11 +3016,11 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React13__default.default.useMemo(
+  const styles = React14__default.default.useMemo(
     () => getSidebarStyles({ tokens, width, bordered }),
     [tokens, width, bordered]
   );
-  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__ */ React14__default.default.createElement(reactNative.View, { style: styles.container }, header && /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.header }, header), /* @__PURE__ */ React14__default.default.createElement(reactNative.ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.footer }, footer));
 }
 function getNavbarStyles({ tokens, height, bordered }) {
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
@@ -2805,28 +3058,27 @@ function Navbar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React13__default.default.useMemo(
+  const styles = React14__default.default.useMemo(
     () => getNavbarStyles({ tokens, height, bordered }),
     [tokens, height, bordered]
   );
-  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)));
+  return /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.container }, children ? children : /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.left }, left), /* @__PURE__ */ React14__default.default.createElement(reactNative.View, { style: styles.right }, right)));
 }
 
 // src/registry/registry.ts
 var CATEGORIES = [
-  { id: "primitives", name: "Design Primitives", description: "Core building blocks for theme-aware layouts and typography" },
-  { id: "actions", name: "Actions", description: "Interactive elements that trigger actions" },
-  { id: "form-controls", name: "Form Controls", description: "Input elements for user data entry" },
-  { id: "range-inputs", name: "Range Inputs", description: "Slider controls for numeric and continuous values" },
-  { id: "layout", name: "Layout", description: "Structural and container components" },
-  { id: "overlays", name: "Overlays", description: "Floating and portal-based UI elements" }
+  { id: "colors", name: "Colors", description: "Color palettes and token visualization", icon: "palette" },
+  { id: "typography", name: "Typography", description: "Text roles, scopes, and weight control", icon: "text_fields" },
+  { id: "symbols", name: "Symbols", description: "Material Symbols icon browser", icon: "grid_view" },
+  { id: "layout", name: "Layout", description: "Structural containers \u2014 Frame and Wrapper", icon: "grid_on" },
+  { id: "components", name: "Components", description: "Interactive UI components", icon: "widgets" }
 ];
 var COMPONENTS = [
   {
     id: "button",
     name: "Button",
     importName: "Button",
-    categoryId: "actions",
+    categoryId: "components",
     description: "Interactive button with multiple variants, sizes, and optional icon",
     hasChildren: true,
     variants: [
@@ -2908,7 +3160,7 @@ var COMPONENTS = [
     id: "text-input",
     name: "TextInput",
     importName: "TextInput",
-    categoryId: "form-controls",
+    categoryId: "components",
     description: "Text input field with label support",
     hasChildren: false,
     variants: [
@@ -2935,7 +3187,7 @@ var COMPONENTS = [
     id: "select",
     name: "Select",
     importName: "Select",
-    categoryId: "form-controls",
+    categoryId: "components",
     description: "Dropdown selector with options",
     hasChildren: false,
     variants: [
@@ -2982,7 +3234,7 @@ var COMPONENTS = [
     id: "toggle",
     name: "Toggle",
     importName: "Toggle",
-    categoryId: "form-controls",
+    categoryId: "components",
     description: "Binary switch component",
     hasChildren: false,
     variants: [
@@ -3009,7 +3261,7 @@ var COMPONENTS = [
     id: "slider",
     name: "Slider",
     importName: "Slider",
-    categoryId: "range-inputs",
+    categoryId: "components",
     description: "Numeric range slider",
     hasChildren: false,
     variants: [
@@ -3053,7 +3305,7 @@ var COMPONENTS = [
     id: "hue-slider",
     name: "HueSlider",
     importName: "HueSlider",
-    categoryId: "range-inputs",
+    categoryId: "components",
     description: "Specialized slider for hue selection (0-360\xB0)",
     hasChildren: false,
     variants: [
@@ -3189,7 +3441,7 @@ var COMPONENTS = [
     id: "card",
     name: "Card",
     importName: "Card",
-    categoryId: "layout",
+    categoryId: "components",
     description: "Surface container with elevation levels",
     hasChildren: true,
     variants: [
@@ -3222,45 +3474,59 @@ var COMPONENTS = [
     id: "text",
     name: "Text",
     importName: "Text",
-    categoryId: "primitives",
-    description: "Typography primitive with semantic size, weight, color, font, and lineHeight",
+    categoryId: "typography",
+    description: "Typography primitive with semantic scope (font family) and role (purpose)",
     hasChildren: true,
+    previewLayout: "list",
     variants: [
-      { id: "default", label: "Default", props: {} },
-      { id: "heading", label: "Heading", props: { size: "xl", weight: "bold" } },
-      { id: "subheading", label: "Subheading", props: { size: "lg", weight: "semibold" } },
-      { id: "body", label: "Body", props: { size: "base" } },
-      { id: "caption", label: "Caption", props: { size: "sm", color: "secondary" } },
-      { id: "accent", label: "Accent", props: { color: "accent", weight: "medium" } },
-      { id: "mono", label: "Monospace", props: { font: "mono", size: "sm" } }
+      { id: "body", label: "Body", props: { role: "body" } },
+      { id: "headline", label: "Headline", props: { role: "headline", scope: "display" } },
+      { id: "title", label: "Title", props: { role: "title", scope: "display" } },
+      { id: "heading", label: "Heading", props: { role: "heading" } },
+      { id: "subheading", label: "Subheading", props: { role: "subheading" } },
+      { id: "label", label: "Label", props: { role: "label" } },
+      { id: "caption", label: "Caption", props: { role: "caption", color: "secondary" } },
+      { id: "mono", label: "Monospace", props: { scope: "mono", role: "body" } },
+      { id: "currency", label: "Currency", props: { scope: "currency", role: "body" } }
     ],
     editableProps: [
       {
-        name: "size",
-        label: "Size",
+        name: "scope",
+        label: "Scope",
         control: "select",
         options: [
-          { label: "Extra Small", value: "xs" },
-          { label: "Small", value: "sm" },
-          { label: "Base", value: "base" },
-          { label: "Medium", value: "md" },
-          { label: "Large", value: "lg" },
-          { label: "Extra Large", value: "xl" },
-          { label: "XXL", value: "xxl" }
+          { label: "Main", value: "main" },
+          { label: "Display", value: "display" },
+          { label: "Mono", value: "mono" },
+          { label: "Currency", value: "currency" }
         ],
-        defaultValue: "base"
+        defaultValue: "main"
       },
       {
-        name: "weight",
-        label: "Weight",
+        name: "role",
+        label: "Role",
+        control: "select",
+        options: [
+          { label: "Headline", value: "headline" },
+          { label: "Title", value: "title" },
+          { label: "Heading", value: "heading" },
+          { label: "Subheading", value: "subheading" },
+          { label: "Body", value: "body" },
+          { label: "Label", value: "label" },
+          { label: "Caption", value: "caption" }
+        ],
+        defaultValue: "body"
+      },
+      {
+        name: "size",
+        label: "Size",
         control: "select",
         options: [
-          { label: "Regular", value: "regular" },
-          { label: "Medium", value: "medium" },
-          { label: "Semibold", value: "semibold" },
-          { label: "Bold", value: "bold" }
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
         ],
-        defaultValue: "regular"
+        defaultValue: "md"
       },
       {
         name: "color",
@@ -3277,17 +3543,6 @@ var COMPONENTS = [
           { label: "Error", value: "error" }
         ],
         defaultValue: "primary"
-      },
-      {
-        name: "font",
-        label: "Font",
-        control: "select",
-        options: [
-          { label: "Default", value: "default" },
-          { label: "Display", value: "display" },
-          { label: "Mono", value: "mono" }
-        ],
-        defaultValue: "default"
       }
     ]
   },
@@ -3295,7 +3550,7 @@ var COMPONENTS = [
     id: "icon",
     name: "Icon",
     importName: "Icon",
-    categoryId: "primitives",
+    categoryId: "symbols",
     description: "Material Symbols icon with size and fill",
     hasChildren: false,
     variants: [
@@ -3332,7 +3587,7 @@ var COMPONENTS = [
     id: "wrapper",
     name: "Wrapper",
     importName: "Wrapper",
-    categoryId: "primitives",
+    categoryId: "layout",
     description: "Lightweight layout container with direction, spacing, and alignment (no theming)",
     hasChildren: true,
     variants: [
@@ -3406,7 +3661,7 @@ var COMPONENTS = [
     id: "color-scale-slider",
     name: "ColorScaleSlider",
     importName: "ColorScaleSlider",
-    categoryId: "range-inputs",
+    categoryId: "components",
     description: "Interactive palette preview slider with color segments",
     hasChildren: false,
     variants: [
@@ -3449,6 +3704,7 @@ var HANDLER_PROPS = {
 };
 var CHILDREN_CONTENT = {
   button: "Button",
+  text: "The quick brown fox",
   card: "{/* content */}",
   frame: "{/* content */}"
 };
@@ -3754,72 +4010,22 @@ var ICON_CATALOG = [
   }
 ];
 
-// src/fonts/googleFonts.ts
-var GOOGLE_FONTS = [
-  // Sans-serif
-  { family: "Inter", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Roboto", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Open Sans", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Lato", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Montserrat", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Poppins", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Nunito", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Source Sans 3", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Work Sans", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Raleway", category: "sans-serif", fallback: "sans-serif" },
-  { family: "DM Sans", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Plus Jakarta Sans", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Outfit", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Space Grotesk", category: "sans-serif", fallback: "sans-serif" },
-  { family: "Manrope", category: "sans-serif", fallback: "sans-serif" },
-  // Serif
-  { family: "Playfair Display", category: "serif", fallback: "serif" },
-  { family: "Merriweather", category: "serif", fallback: "serif" },
-  { family: "Lora", category: "serif", fallback: "serif" },
-  { family: "Libre Baskerville", category: "serif", fallback: "serif" },
-  { family: "Source Serif 4", category: "serif", fallback: "serif" },
-  { family: "Bitter", category: "serif", fallback: "serif" },
-  { family: "Cormorant Garamond", category: "serif", fallback: "serif" },
-  { family: "EB Garamond", category: "serif", fallback: "serif" },
-  { family: "Crimson Text", category: "serif", fallback: "serif" },
-  { family: "Noto Serif", category: "serif", fallback: "serif" },
-  // Monospace
-  { family: "Fira Code", category: "monospace", fallback: "monospace" },
-  { family: "JetBrains Mono", category: "monospace", fallback: "monospace" },
-  { family: "Source Code Pro", category: "monospace", fallback: "monospace" },
-  { family: "IBM Plex Mono", category: "monospace", fallback: "monospace" },
-  { family: "Roboto Mono", category: "monospace", fallback: "monospace" },
-  { family: "Space Mono", category: "monospace", fallback: "monospace" },
-  { family: "Ubuntu Mono", category: "monospace", fallback: "monospace" },
-  { family: "Inconsolata", category: "monospace", fallback: "monospace" },
-  // Display
-  { family: "Abril Fatface", category: "display", fallback: "serif" },
-  { family: "Bebas Neue", category: "display", fallback: "sans-serif" },
-  { family: "Oswald", category: "display", fallback: "sans-serif" },
-  { family: "Righteous", category: "display", fallback: "sans-serif" },
-  { family: "Lobster", category: "display", fallback: "cursive" },
-  { family: "Pacifico", category: "display", fallback: "cursive" },
-  { family: "Comfortaa", category: "display", fallback: "sans-serif" },
-  { family: "Fredoka", category: "display", fallback: "sans-serif" }
-];
-var SYSTEM_FONTS = [
-  {
-    family: "system-ui",
-    category: "sans-serif",
-    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-  },
-  {
-    family: "ui-monospace",
-    category: "monospace",
-    fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
-  },
-  {
-    family: "ui-serif",
-    category: "serif",
-    fallback: 'Georgia, "Times New Roman", serif'
-  }
-];
-
+Object.defineProperty(exports, "DEFAULT_FONT_SIZES", {
+  enumerable: true,
+  get: function () { return fonts.DEFAULT_FONT_SIZES; }
+});
+Object.defineProperty(exports, "DEFAULT_LINE_HEIGHTS", {
+  enumerable: true,
+  get: function () { return fonts.DEFAULT_LINE_HEIGHTS; }
+});
+Object.defineProperty(exports, "DEFAULT_ROLE_SCALES", {
+  enumerable: true,
+  get: function () { return fonts.DEFAULT_ROLE_SCALES; }
+});
+Object.defineProperty(exports, "buildGoogleFontsUrl", {
+  enumerable: true,
+  get: function () { return fonts.buildGoogleFontsUrl; }
+});
 exports.ACCENT_DEFAULTS = ACCENT_DEFAULTS;
 exports.AppShell = AppShell;
 exports.Button = Button;
@@ -3830,7 +4036,6 @@ exports.ColorScaleSlider = ColorScaleSlider;
 exports.DEFAULT_THEME_CONFIG = DEFAULT_THEME_CONFIG;
 exports.ERROR_DEFAULTS = ERROR_DEFAULTS;
 exports.Frame = Frame;
-exports.GOOGLE_FONTS = GOOGLE_FONTS;
 exports.HueSlider = HueSlider;
 exports.ICON_CATALOG = ICON_CATALOG;
 exports.Icon = Icon;
@@ -3839,7 +4044,6 @@ exports.Navbar = Navbar;
 exports.NewtoneProvider = NewtoneProvider;
 exports.Popover = Popover;
 exports.SUCCESS_DEFAULTS = SUCCESS_DEFAULTS;
-exports.SYSTEM_FONTS = SYSTEM_FONTS;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Slider = Slider;
@@ -3848,17 +4052,19 @@ exports.TextInput = TextInput;
 exports.Toggle = Toggle;
 exports.WARNING_DEFAULTS = WARNING_DEFAULTS;
 exports.Wrapper = Wrapper;
-exports.buildGoogleFontsUrl = buildGoogleFontsUrl;
 exports.computeTokens = computeTokens;
 exports.generateComponentCode = generateComponentCode;
 exports.getCategory = getCategory;
 exports.getComponent = getComponent;
 exports.getComponentsByCategory = getComponentsByCategory;
 exports.isOptionGroup = isOptionGroup;
+exports.measureAvgCharWidth = measureAvgCharWidth;
 exports.useFocusVisible = useFocusVisible;
 exports.useFrameContext = useFrameContext;
+exports.useLocalCalibration = useLocalCalibration;
 exports.useNewtoneTheme = useNewtoneTheme;
 exports.usePopover = usePopover;
 exports.useTokens = useTokens;
+exports.useTypographyCalibrations = useTypographyCalibrations;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map