@newtonedev/components 0.1.18 → 0.1.19

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useTokens, useNewtoneTheme, useFrameContext, useBreakpoint, useTypographyCalibrations, useLocalCalibration, enqueueObservation, computeTokens, _ThemeContext, FrameContext } from 'newtone-api';
 export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, DEFAULT_THEME_CONFIG, DEFAULT_THEME_MAPPINGS, ERROR_DEFAULTS, FrameContext, NON_PRIMARY_RELATIVE_DEFAULTS, NewtoneProvider, PRIMARY_DEFAULTS, SECONDARY_DEFAULTS, SUCCESS_DEFAULTS, TERTIARY_DEFAULTS, WARNING_DEFAULTS, buildGoogleFontsUrl, computeColors, computeSwatches, computeTokens, enqueueObservation, measureAvgCharWidth, resolveTheme, useBreakpoint, useFrameContext, useLocalCalibration, useNewtoneTheme, useScheme, useTokens, useTypographyCalibrations } from 'newtone-api';
-import React16, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef } from 'react';
-import { Text, View, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
+import React19, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef } from 'react';
+import { StyleSheet, Platform, Text, View, ScrollView, Pressable, TextInput as TextInput$1, PanResponder, Animated } from 'react-native';
 import { SEMANTIC_WEIGHT_MAP, ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, resolveResponsiveSize, estimateLineWidths, REFERENCE_LINE_HEIGHT_RATIO, buildFontFeatureSettings } from '@newtonedev/fonts';
 import { srgbToHex, gamutMapToSrgb } from 'newtone';
 
@@ -181,10 +181,7 @@ function getFrameStyles(input) {
     left,
     zIndex,
     overflow,
-    opacity,
-    radius,
-    bordered = false,
-    disabled = false
+    radius
   } = input;
   const container = {};
   const appearanceTokens = tokens.colors[theme][appearance];
@@ -237,10 +234,6 @@ function getFrameStyles(input) {
     }
   }
   if (overflow) container.overflow = overflow;
-  if (bordered) {
-    container.borderWidth = 1;
-    container.borderColor = appearanceTokens.fontTertiary;
-  }
   if (frameElevation === 2) {
     container.shadowColor = "#000";
     container.shadowOffset = { width: 0, height: 2 };
@@ -248,14 +241,6 @@ function getFrameStyles(input) {
     container.shadowRadius = 6;
     container.elevation = 4;
   }
-  if (opacity !== void 0) {
-    container.opacity = opacity;
-  } else if (disabled) {
-    container.opacity = 0.5;
-  }
-  const pressed = StyleSheet.create({
-    s: { backgroundColor: appearanceTokens.fontSecondary }
-  }).s;
   let gridWebStyle = null;
   if (layout === "grid") {
     gridWebStyle = {
@@ -270,7 +255,6 @@ function getFrameStyles(input) {
     // Validate and optimize the container styles through StyleSheet.create(),
     // then extract the single style object with `.c`.
     container: StyleSheet.create({ c: container }).c,
-    pressed,
     gridWebStyle,
     insetBoxShadow
   };
@@ -278,9 +262,9 @@ function getFrameStyles(input) {
 
 // src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
-  return React16.Children.map(children, (child) => {
+  return React19.Children.map(children, (child) => {
     if (typeof child === "string" || typeof child === "number") {
-      return /* @__PURE__ */ React16.createElement(Text, { style: textStyle }, child);
+      return /* @__PURE__ */ React19.createElement(Text, { style: textStyle }, child);
     }
     return child;
   });
@@ -333,14 +317,8 @@ function Frame({
   zIndex,
   overflow,
   pointerEvents,
-  opacity,
   // Appearance
   radius,
-  bordered,
-  // Interactivity
-  onPress,
-  href,
-  disabled = false,
   // Accessibility
   accessibilityLabel,
   accessibilityHint,
@@ -381,7 +359,7 @@ function Frame({
       resolvedConfig.relativeSwatchDefaults
     );
   }, [resolvedConfig, mode, gamut, resolvedElevation]);
-  const styles = useMemo(
+  const styles3 = useMemo(
     () => getFrameStyles({
       tokens,
       frameElevation: resolvedFrameElevation,
@@ -410,10 +388,7 @@ function Frame({
       left,
       zIndex,
       overflow,
-      opacity,
-      radius,
-      bordered,
-      disabled
+      radius
     }),
     [
       tokens,
@@ -443,10 +418,7 @@ function Frame({
       left,
       zIndex,
       overflow,
-      opacity,
-      radius,
-      bordered,
-      disabled
+      radius
     ]
   );
   const resolvedScheme = scheme ?? parentFrameCtx?.scheme;
@@ -469,22 +441,13 @@ function Frame({
     };
   }, [isSchemeOverride, themeCtx, resolvedConfig, scheme]);
   const webOverrides = [];
-  if (styles.gridWebStyle) {
-    webOverrides.push(styles.gridWebStyle);
+  if (styles3.gridWebStyle) {
+    webOverrides.push(styles3.gridWebStyle);
   }
-  if (styles.insetBoxShadow) {
-    webOverrides.push({ boxShadow: styles.insetBoxShadow });
+  if (styles3.insetBoxShadow) {
+    webOverrides.push({ boxShadow: styles3.insetBoxShadow });
   }
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  const isInteractive = onPress !== void 0 || href !== void 0;
-  const { isFocusVisible, focusProps } = useFocusVisible();
-  const focusRingStyle = isFocusVisible && !disabled ? {
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineColor: tokens.colors[resolvedTheme].emphasis.background,
-    outlineOffset: 2
-  } : void 0;
-  const webFocusProps = isInteractive ? focusProps : {};
   const textStyle = useMemo(
     () => ({
       color: tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary,
@@ -498,30 +461,7 @@ function Frame({
     () => wrapTextChildren(children, textStyle),
     [children, textStyle]
   );
-  const content = isInteractive ? /* @__PURE__ */ React16.createElement(
-    Pressable,
-    {
-      ref,
-      testID,
-      nativeID,
-      pointerEvents,
-      accessibilityLabel,
-      accessibilityHint,
-      accessibilityState: disabled ? { disabled: true } : void 0,
-      onPress,
-      disabled,
-      ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
-      ...webFocusProps,
-      style: ({ pressed }) => [
-        styles.container,
-        pressed && !disabled && styles.pressed,
-        focusRingStyle,
-        ...webOverrides,
-        ...userStyles
-      ]
-    },
-    wrappedChildren
-  ) : /* @__PURE__ */ React16.createElement(
+  const content = /* @__PURE__ */ React19.createElement(
     View,
     {
       ref,
@@ -530,12 +470,12 @@ function Frame({
       pointerEvents,
       accessibilityLabel,
       accessibilityHint,
-      style: [styles.container, ...webOverrides, ...userStyles]
+      style: [styles3.container, ...webOverrides, ...userStyles]
     },
     wrappedChildren
   );
-  const wrappedContent = schemeThemeCtx ? /* @__PURE__ */ React16.createElement(_ThemeContext.Provider, { value: schemeThemeCtx }, content) : content;
-  return /* @__PURE__ */ React16.createElement(FrameContext.Provider, { value: contextValue }, wrappedContent);
+  const wrappedContent = schemeThemeCtx ? /* @__PURE__ */ React19.createElement(_ThemeContext.Provider, { value: schemeThemeCtx }, content) : content;
+  return /* @__PURE__ */ React19.createElement(FrameContext.Provider, { value: contextValue }, wrappedContent);
 }
 function Icon({
   name = "add",
@@ -585,7 +525,7 @@ function Icon({
       ...style
     };
   }, [tokens, size, opticalSize, fill, color, style, resolvedTheme, resolvedAppearance]);
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Text,
     {
       ref,
@@ -598,159 +538,6 @@ function Icon({
     name
   );
 }
-function getWrapperStyles(input) {
-  const {
-    tokens,
-    direction = "vertical",
-    wrap = false,
-    reverse = false,
-    align,
-    justify,
-    padding,
-    gap,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    position,
-    top,
-    right,
-    bottom,
-    left,
-    zIndex,
-    overflow,
-    opacity
-  } = input;
-  const container = {};
-  container.flexDirection = resolveFlexDirection(direction, reverse);
-  if (wrap) container.flexWrap = "wrap";
-  if (align) container.alignItems = resolveAlignment(align);
-  if (justify) container.justifyContent = resolveJustification(justify);
-  if (padding !== void 0) {
-    const p = resolvePadding(padding, tokens);
-    container.paddingTop = p.top;
-    container.paddingRight = p.right;
-    container.paddingBottom = p.bottom;
-    container.paddingLeft = p.left;
-  }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
-  }
-  Object.assign(container, resolveSizing(width, height));
-  if (minWidth !== void 0) container.minWidth = minWidth;
-  if (maxWidth !== void 0) container.maxWidth = maxWidth;
-  if (minHeight !== void 0) container.minHeight = minHeight;
-  if (maxHeight !== void 0) container.maxHeight = maxHeight;
-  if (position) container.position = position;
-  if (top !== void 0) container.top = top;
-  if (right !== void 0) container.right = right;
-  if (bottom !== void 0) container.bottom = bottom;
-  if (left !== void 0) container.left = left;
-  if (zIndex !== void 0) container.zIndex = zIndex;
-  if (overflow) container.overflow = overflow;
-  if (opacity !== void 0) container.opacity = opacity;
-  return StyleSheet.create({ c: container }).c;
-}
-function Wrapper({
-  children,
-  direction,
-  wrap,
-  reverse,
-  align,
-  justify,
-  padding,
-  gap,
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  // Positioning
-  position,
-  top,
-  right,
-  bottom,
-  left,
-  zIndex,
-  overflow,
-  pointerEvents,
-  opacity,
-  style,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref
-}) {
-  const tokens = useTokens();
-  const containerStyle = useMemo(
-    () => getWrapperStyles({
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight,
-      position,
-      top,
-      right,
-      bottom,
-      left,
-      zIndex,
-      overflow,
-      opacity
-    }),
-    [
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight,
-      position,
-      top,
-      right,
-      bottom,
-      left,
-      zIndex,
-      overflow,
-      opacity
-    ]
-  );
-  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React16.createElement(
-    View,
-    {
-      ref,
-      testID,
-      nativeID,
-      pointerEvents,
-      accessibilityRole: "none",
-      style: [containerStyle, ...userStyles]
-    },
-    children
-  );
-}
 var TextScopeContext = createContext(null);
 var LARGE_TEXT_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
 function resolveTextColor(color, tokens, theme = "primary", appearance = "main", role = "body") {
@@ -761,10 +548,10 @@ function resolveTextColor(color, tokens, theme = "primary", appearance = "main",
       return tokens.colors[theme][appearance].fontSecondary;
     case "tertiary":
       return tokens.colors[theme][appearance].fontTertiary;
-    case "disabled":
-      return tokens.colors[theme][appearance].fontDisabled;
     case "accent":
       return tokens.colors[theme][appearance][LARGE_TEXT_ROLES.has(role) ? "accentLarge" : "accentSmall"];
+    case "disabled":
+      return tokens.colors[theme][appearance].fontDisabled;
   }
 }
 var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
@@ -882,7 +669,7 @@ function TextBase({
   const effectiveA11yRole = accessibilityRoleOverride ?? inferredA11yRole;
   const ariaLevel = effectiveA11yRole === "header" ? ROLE_HEADING_LEVEL[role] : void 0;
   const scopeCtx = useMemo(() => ({ weights: SEMANTIC_WEIGHT_MAP }), []);
-  const textNode = /* @__PURE__ */ React16.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React16.createElement(
+  const textNode = /* @__PURE__ */ React19.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React19.createElement(
     Text,
     {
       ref,
@@ -896,7 +683,7 @@ function TextBase({
     children
   ));
   if (responsive && isAdaptive) {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React19.createElement(
       View,
       {
         onLayout: (e) => {
@@ -925,26 +712,26 @@ function TextSpan({ children, color, weight, italic, underline, highlight, style
     if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens, resolvedTheme, resolvedAppearance);
     return s;
   }, [tokens, scopeCtx, color, weight, italic, underline, highlight, resolvedTheme, resolvedAppearance]);
-  return React16.createElement(
+  return React19.createElement(
     Text,
     { style: style ? [spanStyle, ...Array.isArray(style) ? style : [style]] : spanStyle },
     children
   );
 }
 function TextBold(props) {
-  return React16.createElement(TextSpan, { ...props, weight: "bold" });
+  return React19.createElement(TextSpan, { ...props, weight: "bold" });
 }
 function TextMedium(props) {
-  return React16.createElement(TextSpan, { ...props, weight: "medium" });
+  return React19.createElement(TextSpan, { ...props, weight: "medium" });
 }
 function TextItalic(props) {
-  return React16.createElement(TextSpan, { ...props, italic: true });
+  return React19.createElement(TextSpan, { ...props, italic: true });
 }
 function TextUnderline(props) {
-  return React16.createElement(TextSpan, { ...props, underline: true });
+  return React19.createElement(TextSpan, { ...props, underline: true });
 }
 function TextHighlight(props) {
-  return React16.createElement(TextSpan, props);
+  return React19.createElement(TextSpan, props);
 }
 
 // src/primitives/Text/index.ts
@@ -956,49 +743,347 @@ var Text3 = Object.assign(TextBase, {
   Underline: TextUnderline,
   Highlight: TextHighlight
 });
-
-// src/composites/actions/Button/Button.styles.ts
-var BUTTON_HEIGHTS = {
-  sm: 40,
-  md: 48,
-  lg: 56,
-  xl: 64
-};
-function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
-  const basePadding = {
-    sm: 12,
-    md: 16,
-    lg: 20,
-    xl: 24
-  };
-  const base = basePadding[size];
-  const textExtra = 8;
-  if (!hasText && hasIcon) {
-    return { paddingLeft: base, paddingRight: base };
-  }
-  if (hasText && !hasIcon) {
-    return { paddingLeft: base + textExtra, paddingRight: base + textExtra };
+var styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: "column",
+    ...Platform.OS === "web" ? { minHeight: "100vh" } : {}
+  },
+  body: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  content: {
+    flex: 1
   }
-  if (hasText && hasIcon) {
-    if (iconPosition === "left") {
-      return { paddingLeft: base, paddingRight: base + textExtra };
-    } else {
-      return { paddingLeft: base + textExtra, paddingRight: base };
-    }
+});
+function Page({
+  children,
+  scheme,
+  navbar,
+  sidebar,
+  testID,
+  nativeID,
+  ref,
+  style
+}) {
+  const themeCtx = useNewtoneTheme();
+  const schemeThemeCtx = useMemo(() => {
+    if (!scheme || !themeCtx.schemes) return null;
+    const schemeConfig = themeCtx.schemes[scheme];
+    if (!schemeConfig || schemeConfig === themeCtx.config) return null;
+    return {
+      ...themeCtx,
+      config: schemeConfig,
+      activeScheme: scheme
+    };
+  }, [scheme, themeCtx]);
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  const content = /* @__PURE__ */ React19.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole: "none",
+      style: [styles.root, ...userStyles]
+    },
+    navbar,
+    sidebar ? /* @__PURE__ */ React19.createElement(View, { style: styles.body }, sidebar, /* @__PURE__ */ React19.createElement(View, { style: styles.content }, children)) : children
+  );
+  if (schemeThemeCtx) {
+    return /* @__PURE__ */ React19.createElement(_ThemeContext.Provider, { value: schemeThemeCtx }, content);
   }
-  return { paddingLeft: base, paddingRight: base };
+  return content;
 }
-function getButtonConfig(variant, size, disabled, tokens, theme) {
-  const sizeConfig = getSizeConfig(size, tokens);
-  const variantColors = getVariantColors(variant, disabled, tokens, theme);
-  return {
-    variantColors,
-    sizeTokens: {
-      height: sizeConfig.height,
-      padding: sizeConfig.padding,
-      gap: sizeConfig.gap,
-      borderRadius: sizeConfig.borderRadius,
-      textSize: sizeConfig.textSize,
+var styles2 = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  content: {
+    flexGrow: 1
+  }
+});
+function Viewport({
+  children,
+  testID,
+  nativeID,
+  ref,
+  style
+}) {
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React19.createElement(
+    ScrollView,
+    {
+      ref,
+      testID,
+      nativeID,
+      style: styles2.root,
+      contentContainerStyle: [styles2.content, ...userStyles]
+    },
+    children
+  );
+}
+function getWrapperStyles(input) {
+  const {
+    tokens,
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow
+  } = input;
+  const container = {};
+  container.flexDirection = resolveFlexDirection(direction, reverse);
+  if (wrap) container.flexWrap = "wrap";
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  Object.assign(container, resolveSizing(width, height));
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  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;
+  return StyleSheet.create({ c: container }).c;
+}
+function Wrapper({
+  children,
+  direction,
+  wrap,
+  reverse,
+  align,
+  justify,
+  padding,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  overflow,
+  pointerEvents,
+  style,
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens();
+  const containerStyle = useMemo(
+    () => getWrapperStyles({
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow
+    }),
+    [
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      position,
+      top,
+      right,
+      bottom,
+      left,
+      zIndex,
+      overflow
+    ]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React19.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      pointerEvents,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
+}
+var SIZE_PRESETS = {
+  xs: { maxWidth: 480, paddingHorizontal: 24 },
+  sm: { maxWidth: 640, paddingHorizontal: 24 },
+  md: { maxWidth: 768, paddingHorizontal: 24 },
+  lg: { maxWidth: 1024, paddingHorizontal: 32 },
+  xl: { maxWidth: 1280, paddingHorizontal: 40 },
+  full: { maxWidth: void 0, paddingHorizontal: 0 }
+};
+function getSectionStyles(input) {
+  const {
+    tokens,
+    size = "lg",
+    fill,
+    gap,
+    padding
+  } = input;
+  const preset = SIZE_PRESETS[size];
+  const container = {};
+  container.width = "100%";
+  container.flexDirection = "column";
+  if (fill) {
+    container.flex = 1;
+  }
+  if (preset.maxWidth !== void 0) {
+    container.maxWidth = preset.maxWidth;
+    container.marginLeft = "auto";
+    container.marginRight = "auto";
+  }
+  container.paddingLeft = preset.paddingHorizontal;
+  container.paddingRight = preset.paddingHorizontal;
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingBottom = p.bottom;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  return StyleSheet.create({ c: container }).c;
+}
+function Section({
+  children,
+  size,
+  fill,
+  gap,
+  padding,
+  testID,
+  nativeID,
+  ref,
+  style
+}) {
+  const tokens = useTokens();
+  const containerStyle = useMemo(
+    () => getSectionStyles({ tokens, size, fill, gap, padding }),
+    [tokens, size, fill, gap, padding]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React19.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
+}
+
+// src/composites/actions/Button/Button.styles.ts
+var BUTTON_HEIGHTS = {
+  sm: 40,
+  md: 48,
+  lg: 56,
+  xl: 64
+};
+function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
+  const basePadding = {
+    sm: 12,
+    md: 16,
+    lg: 20,
+    xl: 24
+  };
+  const base = basePadding[size];
+  const textExtra = 8;
+  if (!hasText && hasIcon) {
+    return { paddingLeft: base, paddingRight: base };
+  }
+  if (hasText && !hasIcon) {
+    return { paddingLeft: base + textExtra, paddingRight: base + textExtra };
+  }
+  if (hasText && hasIcon) {
+    if (iconPosition === "left") {
+      return { paddingLeft: base, paddingRight: base + textExtra };
+    } else {
+      return { paddingLeft: base + textExtra, paddingRight: base };
+    }
+  }
+  return { paddingLeft: base, paddingRight: base };
+}
+function getButtonConfig(variant, size, disabled, tokens, theme) {
+  const sizeConfig = getSizeConfig(size, tokens);
+  const variantColors = getVariantColors(variant, disabled, tokens, theme);
+  return {
+    variantColors,
+    sizeTokens: {
+      height: sizeConfig.height,
+      padding: sizeConfig.padding,
+      gap: sizeConfig.gap,
+      borderRadius: sizeConfig.borderRadius,
+      textSize: sizeConfig.textSize,
       iconSize: sizeConfig.iconSize
     }
   };
@@ -1041,19 +1126,8 @@ function getSizeConfig(size, tokens) {
   return configs[size];
 }
 function getVariantColors(variant, disabled, tokens, theme) {
-  const t = tokens.colors[theme];
   if (disabled) {
-    const baseColors = getVariantColorsForState(variant, tokens, theme);
-    return {
-      ...baseColors,
-      bg: "transparent",
-      hoveredBg: "transparent",
-      pressedBg: "transparent",
-      textColor: t.main.fontDisabled,
-      iconColor: t.main.fontDisabled,
-      borderWidth: 1,
-      borderColor: t.main.divider
-    };
+    return getDisabledVariantColors(variant, tokens, theme);
   }
   return getVariantColorsForState(variant, tokens, theme);
 }
@@ -1072,11 +1146,11 @@ function getVariantColorsForState(variant, tokens, theme) {
   }
   if (variant === "secondary") {
     return {
-      bg: t.main.actionEnabled,
-      hoveredBg: t.main.actionHovered,
-      pressedBg: t.main.actionPressed,
-      textColor: t.main.fontPrimary,
-      iconColor: t.main.fontPrimary,
+      bg: t.tinted.actionEnabled,
+      hoveredBg: t.tinted.actionHovered,
+      pressedBg: t.tinted.actionPressed,
+      textColor: t.tinted.fontPrimary,
+      iconColor: t.tinted.fontPrimary,
       borderWidth: 0,
       borderColor: "transparent"
     };
@@ -1088,6 +1162,41 @@ function getVariantColorsForState(variant, tokens, theme) {
     textColor: t.main.fontSecondary,
     iconColor: t.main.fontSecondary,
     borderWidth: 0,
+    borderColor: "transparent",
+    textDecoration: "underline"
+  };
+}
+function getDisabledVariantColors(variant, tokens, theme) {
+  const t = tokens.colors[theme];
+  if (variant === "primary") {
+    return {
+      bg: t.main.actionEnabled,
+      hoveredBg: t.main.actionEnabled,
+      pressedBg: t.main.actionEnabled,
+      textColor: t.main.fontDisabled,
+      iconColor: t.main.fontDisabled,
+      borderWidth: 0,
+      borderColor: "transparent"
+    };
+  }
+  if (variant === "secondary") {
+    return {
+      bg: "transparent",
+      hoveredBg: "transparent",
+      pressedBg: "transparent",
+      textColor: t.main.fontDisabled,
+      iconColor: t.main.fontDisabled,
+      borderWidth: 1,
+      borderColor: t.main.divider
+    };
+  }
+  return {
+    bg: "transparent",
+    hoveredBg: "transparent",
+    pressedBg: "transparent",
+    textColor: t.main.fontDisabled,
+    iconColor: t.main.fontDisabled,
+    borderWidth: 0,
     borderColor: "transparent"
   };
 }
@@ -1107,16 +1216,29 @@ function Button({
   const tokens = useTokens();
   const frameCtx = useFrameContext();
   const theme = frameCtx?.theme ?? "primary";
+  if (typeof window !== "undefined") {
+    console.log("[Button]", { theme, variant, frameCtxTheme: frameCtx?.theme, hasFrameCtx: !!frameCtx });
+    if (tokens.colors[theme]) {
+      const t = tokens.colors[theme];
+      console.log("[Button tokens]", {
+        "emphasis.actionEnabled": t.emphasis.actionEnabled,
+        "main.actionEnabled": t.main.actionEnabled,
+        "main.background": t.main.background
+      });
+    } else {
+      console.log("[Button] NO tokens for theme:", theme, "available themes:", Object.keys(tokens.colors));
+    }
+  }
   const isDisabled = disabled || loading;
-  const { variantColors, sizeTokens } = React16.useMemo(
+  const { variantColors, sizeTokens } = React19.useMemo(
     () => getButtonConfig(variant, size, isDisabled, tokens, theme),
     [variant, size, isDisabled, tokens, theme]
   );
-  const padding = React16.useMemo(
+  const padding = React19.useMemo(
     () => computeButtonPadding(size, !!icon, !!children, iconPosition),
     [size, icon, children, iconPosition]
   );
-  return /* @__PURE__ */ React16.createElement(Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => /* @__PURE__ */ React19.createElement(
     Wrapper,
     {
       direction: "horizontal",
@@ -1132,57 +1254,270 @@ function Button({
           borderRadius: sizeTokens.borderRadius,
           borderWidth: variantColors.borderWidth,
           borderColor: variantColors.borderColor || "transparent",
-          opacity: isDisabled ? loading ? 0.6 : 0.4 : 1,
+          opacity: loading ? 0.6 : 1,
           ...fullWidth && { width: "100%", alignSelf: "stretch" }
         },
         ...Array.isArray(style) ? style : style ? [style] : []
       ]
     },
-    icon && iconPosition === "left" && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
-    children && /* @__PURE__ */ React16.createElement(
+    icon && iconPosition === "left" && /* @__PURE__ */ React19.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+    children && /* @__PURE__ */ React19.createElement(
       Text3,
       {
         role: "label",
         size: sizeTokens.textSize,
         centerVertically: true,
         style: [
-          { color: variantColors.textColor },
+          { color: variantColors.textColor, textDecorationLine: variantColors.textDecoration },
           ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
         ]
       },
       children
     ),
-    icon && iconPosition === "right" && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+    icon && iconPosition === "right" && /* @__PURE__ */ React19.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
   ));
 }
-function getCardStyles(tokens, disabled, theme = "primary", appearance = "main") {
-  const at = tokens.colors[theme][appearance];
-  return StyleSheet.create({
-    container: {
-      backgroundColor: at.background,
-      borderWidth: 1,
-      borderColor: at.fontSecondary,
-      borderRadius: tokens.radius.lg,
-      padding: tokens.spacing["16"],
-      opacity: disabled ? 0.5 : 1
+function getCardStyles(input) {
+  const {
+    tokens,
+    theme,
+    appearance = "main",
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    radius,
+    disabled = false
+  } = input;
+  const container = {};
+  const appearanceTokens = tokens.colors[theme][appearance];
+  container.backgroundColor = appearanceTokens.background;
+  container.color = appearanceTokens.fontPrimary;
+  container.display = "flex";
+  container.flexDirection = resolveFlexDirection(direction, reverse);
+  if (wrap) container.flexWrap = "wrap";
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  Object.assign(container, resolveSizing(width, height));
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  if (radius !== void 0) {
+    const corners = resolveRadiusCorners(radius, tokens);
+    container.borderTopLeftRadius = corners.topLeft;
+    container.borderTopRightRadius = corners.topRight;
+    container.borderBottomLeftRadius = corners.bottomLeft;
+    container.borderBottomRightRadius = corners.bottomRight;
+    if (hasPositiveRadius(corners)) {
+      container.overflow = "hidden";
     }
-  });
+  }
+  container.borderWidth = 1;
+  container.borderColor = appearanceTokens.divider;
+  container.shadowColor = "#000";
+  container.shadowOffset = { width: 0, height: 2 };
+  container.shadowOpacity = 0.12;
+  container.shadowRadius = 6;
+  container.elevation = 4;
+  if (disabled) {
+    container.opacity = 0.5;
+  }
+  const pressed = StyleSheet.create({
+    s: { backgroundColor: appearanceTokens.fontSecondary }
+  }).s;
+  return {
+    container: StyleSheet.create({ c: container }).c,
+    pressed
+  };
 }
 
-// src/composites/layout/Card/Card.tsx
+// src/primitives/Card/Card.tsx
+function wrapTextChildren2(children, textStyle) {
+  return React19.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return /* @__PURE__ */ React19.createElement(Text, { style: textStyle }, child);
+    }
+    return child;
+  });
+}
+var CARD_ELEVATION = 2;
+var CARD_ELEVATION_NAME = "elevated";
 function Card({
   children,
-  elevation = 1,
-  style,
-  disabled = false
+  // Appearance
+  appearance,
+  radius,
+  // Layout
+  direction,
+  wrap,
+  reverse,
+  // Alignment
+  align,
+  justify,
+  // Spacing
+  padding,
+  gap,
+  // Sizing
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  // Positioning
+  pointerEvents,
+  // Interactivity
+  onPress,
+  href,
+  disabled = false,
+  // Accessibility
+  accessibilityLabel,
+  accessibilityHint,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref,
+  // Style override
+  style
 }) {
-  const tokens = useTokens(elevation);
-  const frameCtx = useFrameContext();
-  const styles = React16.useMemo(
-    () => getCardStyles(tokens, disabled, frameCtx?.theme, frameCtx?.appearance),
-    [tokens, disabled, frameCtx?.theme, frameCtx?.appearance]
+  const themeCtx = useNewtoneTheme();
+  const { mode, gamut } = themeCtx;
+  const parentFrameCtx = useFrameContext();
+  const resolvedTheme = parentFrameCtx?.theme ?? "primary";
+  const resolvedAppearance = appearance ?? parentFrameCtx?.appearance ?? "main";
+  const tokens = useMemo(() => {
+    return computeTokens(
+      themeCtx.config.colorSystem,
+      mode,
+      gamut,
+      CARD_ELEVATION_NAME,
+      themeCtx.config.spacing,
+      themeCtx.config.radius,
+      themeCtx.config.typography,
+      themeCtx.config.icons,
+      themeCtx.config.themeMappings,
+      themeCtx.config.swatchDefaults,
+      themeCtx.config.relativeSwatchDefaults
+    );
+  }, [themeCtx.config, mode, gamut]);
+  const styles3 = useMemo(
+    () => getCardStyles({
+      tokens,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      radius,
+      disabled
+    }),
+    [
+      tokens,
+      resolvedTheme,
+      resolvedAppearance,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      radius,
+      disabled
+    ]
+  );
+  const contextValue = useMemo(
+    () => ({
+      elevation: CARD_ELEVATION,
+      tokens,
+      scheme: parentFrameCtx?.scheme,
+      theme: resolvedTheme,
+      appearance: resolvedAppearance
+    }),
+    [tokens, parentFrameCtx?.scheme, resolvedTheme, resolvedAppearance]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  const { isFocusVisible, focusProps } = useFocusVisible();
+  const focusRingStyle = isFocusVisible && !disabled ? {
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: tokens.colors[resolvedTheme].emphasis.background,
+    outlineOffset: 2
+  } : void 0;
+  const textStyle = useMemo(
+    () => ({
+      color: tokens.colors[resolvedTheme][resolvedAppearance].fontPrimary,
+      fontSize: tokens.typography.fontSizes["05"],
+      fontFamily: tokens.typography.fonts.main.family,
+      lineHeight: tokens.typography.lineHeights["06"]
+    }),
+    [tokens, resolvedTheme, resolvedAppearance]
+  );
+  const wrappedChildren = useMemo(
+    () => wrapTextChildren2(children, textStyle),
+    [children, textStyle]
   );
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+  return /* @__PURE__ */ React19.createElement(FrameContext.Provider, { value: contextValue }, /* @__PURE__ */ React19.createElement(
+    Pressable,
+    {
+      ref,
+      testID,
+      nativeID,
+      pointerEvents,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityState: disabled ? { disabled: true } : void 0,
+      onPress,
+      disabled,
+      ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
+      ...focusProps,
+      style: ({ pressed }) => [
+        styles3.container,
+        pressed && !disabled && styles3.pressed,
+        focusRingStyle,
+        ...userStyles
+      ]
+    },
+    wrappedChildren
+  ));
 }
 
 // src/composites/display/Chip/Chip.styles.ts
@@ -1317,11 +1652,11 @@ function Chip({
   style
 }) {
   const tokens = useTokens();
-  const { colors, sizeTokens } = React16.useMemo(
+  const { colors, sizeTokens } = React19.useMemo(
     () => getChipConfig(variant, semantic, size, selected, disabled, tokens),
     [variant, semantic, size, selected, disabled, tokens]
   );
-  const content = (state) => /* @__PURE__ */ React16.createElement(
+  const content = (state) => /* @__PURE__ */ React19.createElement(
     Wrapper,
     {
       direction: "horizontal",
@@ -1342,8 +1677,8 @@ function Chip({
         ...Array.isArray(style) ? style : style ? [style] : []
       ]
     },
-    icon && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: colors.iconColor }),
-    /* @__PURE__ */ React16.createElement(
+    icon && /* @__PURE__ */ React19.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: colors.iconColor }),
+    /* @__PURE__ */ React19.createElement(
       Text3,
       {
         role: sizeTokens.textRole,
@@ -1354,7 +1689,7 @@ function Chip({
     )
   );
   if (onPress) {
-    return /* @__PURE__ */ React16.createElement(Pressable, { onPress, disabled }, ({ pressed, hovered }) => content({ pressed, hovered }));
+    return /* @__PURE__ */ React19.createElement(Pressable, { onPress, disabled }, ({ pressed, hovered }) => content({ pressed, hovered }));
   }
   return content();
 }
@@ -1383,11 +1718,11 @@ function Divider({
   style
 }) {
   const tokens = useTokens();
-  const dividerStyle = React16.useMemo(
+  const dividerStyle = React19.useMemo(
     () => getDividerStyles(orientation, spacing, tokens),
     [orientation, spacing, tokens]
   );
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     View,
     {
       style: [dividerStyle, ...Array.isArray(style) ? style : style ? [style] : []],
@@ -1433,11 +1768,11 @@ function ContentCard({
 }) {
   const tokens = useTokens();
   const isInteractive = !!(href || onPress);
-  const variantStyles = React16.useMemo(
+  const variantStyles = React19.useMemo(
     () => getContentCardStyles(variant, isInteractive, tokens),
     [variant, isInteractive, tokens]
   );
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Frame,
     {
       elevation: variant === "elevated" ? 2 : void 0,
@@ -1465,18 +1800,18 @@ function getTextInputStyles(tokens, disabled, theme = "primary", appearance = "m
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes["04"],
       fontWeight: tokens.typography.fonts.main.weights.medium,
-      color: at.fontTertiary
+      color: at.fontSecondary
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: at.fontSecondary,
+      backgroundColor: at.background,
       borderWidth: 1,
-      borderColor: at.fontSecondary,
+      borderColor: at.divider,
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing["08"],
       paddingHorizontal: tokens.spacing["12"],
       fontSize: tokens.typography.fontSizes["05"],
-      color: disabled ? at.fontTertiary : at.divider,
+      color: disabled ? at.fontDisabled : at.fontPrimary,
       opacity: disabled ? 0.5 : 1
     }
   });
@@ -1493,14 +1828,14 @@ function TextInput({
   const frameCtx = useFrameContext();
   const theme = frameCtx?.theme ?? "primary";
   const appearance = frameCtx?.appearance ?? "main";
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getTextInputStyles(tokens, disabled, theme, appearance),
     [tokens, disabled, theme, appearance]
   );
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(View, { style: [styles3.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React19.createElement(Text, { style: styles3.label }, label), /* @__PURE__ */ React19.createElement(
     TextInput$1,
     {
-      style: styles.input,
+      style: styles3.input,
       editable: !disabled,
       placeholderTextColor: tokens.colors[theme][appearance].fontTertiary,
       ...textInputProps
@@ -1589,28 +1924,28 @@ function Popover({
     },
     [closeOnEscape, onClose]
   );
-  const styles = useMemo(
+  const styles3 = useMemo(
     () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance),
     [tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance]
   );
   const containerStyles = useMemo(
-    () => [styles.container, ...Array.isArray(style) ? style : style ? [style] : []],
-    [styles.container, style]
+    () => [styles3.container, ...Array.isArray(style) ? style : style ? [style] : []],
+    [styles3.container, style]
   );
   const mergedContentStyles = useMemo(
-    () => [styles.content, ...Array.isArray(contentStyle) ? contentStyle : contentStyle ? [contentStyle] : []],
-    [styles.content, contentStyle]
+    () => [styles3.content, ...Array.isArray(contentStyle) ? contentStyle : contentStyle ? [contentStyle] : []],
+    [styles3.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React16.createElement(View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React16.createElement(View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React19.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React19.createElement(View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
@@ -1811,7 +2146,7 @@ function SelectOptionRow({
   const paddingHorizontal = size === "sm" ? tokens.spacing["08"] : tokens.spacing["12"];
   const fontSize = size === "sm" ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   if (renderOption) {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React19.createElement(
       Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -1822,7 +2157,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -1851,7 +2186,7 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React19.createElement(
       Text,
       {
         style: [
@@ -1873,7 +2208,7 @@ function SelectOptionRow({
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React16.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React16.createElement(
+    isSelected && /* @__PURE__ */ React19.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React19.createElement(
       Icon,
       {
         name: "check",
@@ -1925,7 +2260,7 @@ function Select({
   });
   const inheritedTheme = frameCtx?.theme;
   const inheritedAppearance = frameCtx?.appearance;
-  const styles = useMemo(
+  const styles3 = useMemo(
     () => getSelectStyles(tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance),
     [tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance]
   );
@@ -1934,7 +2269,7 @@ function Select({
   const at = tokens.colors[inheritedTheme ?? "primary"][inheritedAppearance ?? "main"];
   const iconColor = disabled ? at.fontTertiary : at.divider;
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React16.createElement(
+  const trigger = /* @__PURE__ */ React19.createElement(
     Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -1942,10 +2277,10 @@ function Select({
       role: "combobox",
       accessibilityState: { expanded: isOpen },
       ...triggerWebProps,
-      style: styles.trigger
+      style: styles3.trigger
     },
-    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React16.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
-    /* @__PURE__ */ React16.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React16.createElement(
+    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React19.createElement(Text, { style: styles3.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React19.createElement(View, { style: styles3.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React19.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
@@ -1954,14 +2289,14 @@ function Select({
       }
     ))
   );
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(View, { style: [styles3.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React19.createElement(Text, { style: styles3.label }, label), /* @__PURE__ */ React19.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React19.createElement(
       ScrollView,
       {
         bounces: false,
@@ -1970,7 +2305,7 @@ function Select({
       },
       options.map((item) => {
         if (isOptionGroup(item)) {
-          return /* @__PURE__ */ React16.createElement(View, { key: item.label }, /* @__PURE__ */ React16.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React16.createElement(
+          return /* @__PURE__ */ React19.createElement(View, { key: item.label }, /* @__PURE__ */ React19.createElement(Text, { style: styles3.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React19.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -1986,7 +2321,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React19.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -2053,16 +2388,16 @@ function Toggle({
 }) {
   const tokens = useTokens(1);
   const frameCtx = useFrameContext();
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getToggleStyles(tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance),
     [tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
-  const handlePress = React16.useCallback(() => {
+  const handlePress = React19.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(View, { style: [styles3.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React19.createElement(Text, { style: styles3.label }, label), /* @__PURE__ */ React19.createElement(
     Pressable,
     {
       onPress: handlePress,
@@ -2070,7 +2405,7 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React16.createElement(View, { style: styles.track }, /* @__PURE__ */ React16.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React19.createElement(View, { style: styles3.track }, /* @__PURE__ */ React19.createElement(View, { style: styles3.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
@@ -2156,42 +2491,42 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React16.useRef(null);
-  const trackWidth = React16.useRef(0);
-  const trackPageX = React16.useRef(0);
-  const [layoutWidth, setLayoutWidth] = React16.useState(0);
-  const onValueChangeRef = React16.useRef(onValueChange);
-  const minRef = React16.useRef(min);
-  const maxRef = React16.useRef(max);
-  const stepRef = React16.useRef(step);
-  const disabledRef = React16.useRef(disabled);
-  React16.useEffect(() => {
+  const trackRef = React19.useRef(null);
+  const trackWidth = React19.useRef(0);
+  const trackPageX = React19.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React19.useState(0);
+  const onValueChangeRef = React19.useRef(onValueChange);
+  const minRef = React19.useRef(min);
+  const maxRef = React19.useRef(max);
+  const stepRef = React19.useRef(step);
+  const disabledRef = React19.useRef(disabled);
+  React19.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React16.useCallback((pageX) => {
+  const computeValue = React19.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 = React16.useRef(
+  const panResponder = React19.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2219,7 +2554,7 @@ function Slider({
     fillLeft = 0;
     fillWidth = thumbLeft + THUMB_SIZE2 / 2;
   }
-  const handleValueTextSubmit = React16.useCallback(
+  const handleValueTextSubmit = React19.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2228,15 +2563,15 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React16.useState(String(value));
-  React16.useEffect(() => {
+  const [editText, setEditText] = React19.useState(String(value));
+  React19.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React16.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(View, { style: [styles3.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React19.createElement(View, { style: styles3.labelRow }, label && /* @__PURE__ */ React19.createElement(Text, { style: styles3.label }, label), editableValue ? /* @__PURE__ */ React19.createElement(
     TextInput$1,
     {
-      style: styles.valueInput,
+      style: styles3.valueInput,
       value: editText,
       keyboardType: "numeric",
       onChangeText: setEditText,
@@ -2245,11 +2580,11 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React16.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React16.createElement(
+  ) : showValue && /* @__PURE__ */ React19.createElement(Text, { style: styles3.value }, value)), /* @__PURE__ */ React19.createElement(
     View,
     {
       ref: trackRef,
-      style: styles.trackContainer,
+      style: styles3.trackContainer,
       onLayout: (e) => {
         const w = e.nativeEvent.layout.width;
         trackWidth.current = w;
@@ -2260,9 +2595,9 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React16.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React16.createElement(View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
-    /* @__PURE__ */ React16.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React19.createElement(View, { style: styles3.trackRail }),
+    /* @__PURE__ */ React19.createElement(View, { style: [styles3.trackFill, { left: fillLeft, width: fillWidth }] }),
+    /* @__PURE__ */ React19.createElement(View, { style: [styles3.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
@@ -2359,42 +2694,42 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React16.useMemo(
+  const segments = React19.useMemo(
     () => buildHueSegments(min, max),
     [min, max]
   );
-  const trackRef = React16.useRef(null);
-  const trackWidth = React16.useRef(0);
-  const trackPageX = React16.useRef(0);
-  const [layoutWidth, setLayoutWidth] = React16.useState(0);
-  const onValueChangeRef = React16.useRef(onValueChange);
-  const minRef = React16.useRef(min);
-  const maxRef = React16.useRef(max);
-  const disabledRef = React16.useRef(disabled);
-  React16.useEffect(() => {
+  const trackRef = React19.useRef(null);
+  const trackWidth = React19.useRef(0);
+  const trackPageX = React19.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React19.useState(0);
+  const onValueChangeRef = React19.useRef(onValueChange);
+  const minRef = React19.useRef(min);
+  const maxRef = React19.useRef(max);
+  const disabledRef = React19.useRef(disabled);
+  React19.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React16.useCallback((pageX) => {
+  const computeHue = React19.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 = React16.useRef(
+  const panResponder = React19.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2410,7 +2745,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 = React16.useCallback(
+  const handleValueTextSubmit = React19.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2419,15 +2754,15 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React16.useState(String(value));
-  React16.useEffect(() => {
+  const [editText, setEditText] = React19.useState(String(value));
+  React19.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React16.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(View, { style: [styles3.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React19.createElement(View, { style: styles3.labelRow }, label && /* @__PURE__ */ React19.createElement(Text, { style: styles3.label }, label), editableValue ? /* @__PURE__ */ React19.createElement(
     TextInput$1,
     {
-      style: styles.valueInput,
+      style: styles3.valueInput,
       value: editText,
       keyboardType: "numeric",
       onChangeText: setEditText,
@@ -2436,11 +2771,11 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React16.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React16.createElement(
+  ) : showValue && /* @__PURE__ */ React19.createElement(Text, { style: styles3.value }, value, "\xB0")), /* @__PURE__ */ React19.createElement(
     View,
     {
       ref: trackRef,
-      style: styles.trackContainer,
+      style: styles3.trackContainer,
       onLayout: (e) => {
         const w = e.nativeEvent.layout.width;
         trackWidth.current = w;
@@ -2451,12 +2786,12 @@ function HueSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React16.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React16.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
-    /* @__PURE__ */ React16.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React19.createElement(View, { style: styles3.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React19.createElement(View, { key: i, style: [styles3.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React19.createElement(View, { style: [styles3.thumb, { left: thumbLeft }] })
   ));
 }
 
-// node_modules/@newtonedev/colors/dist/index.js
+// ../../../newtone-colors/dist/index.js
 var SRGB_GAMMA_THRESHOLD_LINEAR = 31308e-7;
 var SRGB_GAMMA_SLOPE = 12.92;
 var SRGB_GAMMA_EXPONENT = 2.4;
@@ -2508,7 +2843,10 @@ function oklchToP3(color) {
   return linearSrgbToSrgb(oklabToLinearP3(oklchToOklab(color)));
 }
 function oklchToP3Css(color) {
-  const { r, g, b } = oklchToP3(color);
+  const p3 = oklchToP3(color);
+  const r = Math.max(0, Math.min(1, p3.r)).toFixed(4);
+  const g = Math.max(0, Math.min(1, p3.g)).toFixed(4);
+  const b = Math.max(0, Math.min(1, p3.b)).toFixed(4);
   return `color(display-p3 ${r} ${g} ${b})`;
 }
 var TRACK_HEIGHT4 = 22;
@@ -2581,37 +2919,37 @@ function ColorScaleSlider({
 }) {
   const tokens = useTokens(1);
   const { gamut } = useNewtoneTheme();
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getColorScaleSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React16.useRef(null);
-  const trackWidth = React16.useRef(0);
-  const trackPageX = React16.useRef(0);
-  const isDragging = React16.useRef(false);
-  const thumbAnim = React16.useRef(new Animated.Value(0)).current;
-  const [layoutWidth, setLayoutWidth] = React16.useState(0);
-  const onValueChangeRef = React16.useRef(onValueChange);
-  const disabledRef = React16.useRef(disabled);
-  const colorsLengthRef = React16.useRef(colors.length);
-  const trimEndsRef = React16.useRef(trimEnds);
-  const snapRef = React16.useRef(snap);
-  React16.useEffect(() => {
+  const trackRef = React19.useRef(null);
+  const trackWidth = React19.useRef(0);
+  const trackPageX = React19.useRef(0);
+  const isDragging = React19.useRef(false);
+  const thumbAnim = React19.useRef(new Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React19.useState(0);
+  const onValueChangeRef = React19.useRef(onValueChange);
+  const disabledRef = React19.useRef(disabled);
+  const colorsLengthRef = React19.useRef(colors.length);
+  const trimEndsRef = React19.useRef(trimEnds);
+  const snapRef = React19.useRef(snap);
+  React19.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     colorsLengthRef.current = colors.length;
   }, [colors.length]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     trimEndsRef.current = trimEnds;
   }, [trimEnds]);
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     snapRef.current = snap;
   }, [snap]);
-  const computeNv = React16.useCallback((pageX) => {
+  const computeNv = React19.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const totalSteps2 = colorsLengthRef.current - 1;
@@ -2626,7 +2964,7 @@ function ColorScaleSlider({
     }
     return nv;
   }, []);
-  const panResponder = React16.useRef(
+  const panResponder = React19.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2654,7 +2992,7 @@ function ColorScaleSlider({
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     if (isDragging.current || !animateValue) {
       thumbAnim.setValue(thumbLeft);
     } else {
@@ -2665,11 +3003,11 @@ function ColorScaleSlider({
       }).start();
     }
   }, [thumbLeft, animateValue, thumbAnim]);
-  return /* @__PURE__ */ React16.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React16.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React16.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(View, { style: [styles3.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React19.createElement(View, { style: styles3.labelRow }, /* @__PURE__ */ React19.createElement(Text, { style: styles3.label }, label)), /* @__PURE__ */ React19.createElement(
     View,
     {
       ref: trackRef,
-      style: styles.trackContainer,
+      style: styles3.trackContainer,
       onLayout: (e) => {
         const w = e.nativeEvent.layout.width;
         trackWidth.current = w;
@@ -2680,9 +3018,9 @@ function ColorScaleSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React16.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React16.createElement(View, { key: i, style: [styles.segment, { backgroundColor: gamut === "p3" ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }] }))),
-    /* @__PURE__ */ React16.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
-  ), warning && /* @__PURE__ */ React16.createElement(Text, { style: styles.warning }, warning));
+    /* @__PURE__ */ React19.createElement(View, { style: styles3.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React19.createElement(View, { key: i, style: [styles3.segment, { backgroundColor: gamut === "p3" ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React19.createElement(Animated.View, { style: [styles3.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React19.createElement(Text, { style: styles3.warning }, warning));
 }
 function getAppShellStyles(tokens, theme = "primary", appearance = "main") {
   const at = tokens.colors[theme][appearance];
@@ -2706,11 +3044,11 @@ function getAppShellStyles(tokens, theme = "primary", appearance = "main") {
 function AppShell({ sidebar, children }) {
   const tokens = useTokens();
   const frameCtx = useFrameContext();
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getAppShellStyles(tokens, frameCtx?.theme, frameCtx?.appearance),
     [tokens, frameCtx?.theme, frameCtx?.appearance]
   );
-  return /* @__PURE__ */ React16.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React16.createElement(View, { style: styles.main }, children));
+  return /* @__PURE__ */ React19.createElement(View, { style: styles3.container }, sidebar, /* @__PURE__ */ React19.createElement(View, { style: styles3.main }, children));
 }
 function getSidebarStyles({ tokens, width, bordered, theme = "primary", appearance = "main" }) {
   const at = tokens.colors[theme][appearance];
@@ -2750,11 +3088,11 @@ function Sidebar({
 }) {
   const tokens = useTokens();
   const frameCtx = useFrameContext();
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
     [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
-  return /* @__PURE__ */ React16.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React16.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React16.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React16.createElement(View, { style: styles.footer }, footer));
+  return /* @__PURE__ */ React19.createElement(View, { style: styles3.container }, header && /* @__PURE__ */ React19.createElement(View, { style: styles3.header }, header), /* @__PURE__ */ React19.createElement(ScrollView, { style: styles3.body }, children), footer && /* @__PURE__ */ React19.createElement(View, { style: styles3.footer }, footer));
 }
 function getNavbarStyles({ tokens, height, bordered, theme = "primary", appearance = "main" }) {
   const at = tokens.colors[theme][appearance];
@@ -2794,15 +3132,15 @@ function Navbar({
 }) {
   const tokens = useTokens();
   const frameCtx = useFrameContext();
-  const styles = React16.useMemo(
+  const styles3 = React19.useMemo(
     () => getNavbarStyles({ tokens, height, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
     [tokens, height, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
-  return /* @__PURE__ */ React16.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React16.createElement(View, { style: styles.right }, right)));
+  return /* @__PURE__ */ React19.createElement(View, { style: styles3.container }, children ? children : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(View, { style: styles3.left }, left), /* @__PURE__ */ React19.createElement(View, { style: styles3.right }, right)));
 }
 function LogoMonogram({ colorValue = 0, size = 32 }) {
   const fg = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "svg",
     {
       width: size,
@@ -2811,15 +3149,15 @@ function LogoMonogram({ colorValue = 0, size = 32 }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React16.createElement("path", { d: "M39.3574 70H12L20 84H36L30.2681 94.0309C28.8627 96.4903 28.8627 99.5096 30.2681 101.969L36 112L49.7319 87.9691C51.1373 85.5097 51.1373 82.4903 49.7319 80.0309L46.3034 74.0309C44.879 71.5383 42.2283 70 39.3574 70Z", fill: fg }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M84 112H36L41.6966 121.969C43.121 124.462 45.7717 126 48.6426 126H79.3574C82.2283 126 84.879 124.462 86.3034 121.969L93.7319 108.969C95.1373 106.51 95.1373 103.49 93.7319 101.031L84 84L76 98L84 112Z", fill: fg }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M76 70L84 84H64.6426C61.7717 84 59.121 82.4617 57.6966 79.9691L50.268 66.9691C48.8626 64.5097 48.8626 61.4903 50.268 59.0309L65.6966 32.0309C67.121 29.5383 69.7717 28 72.6426 28H84L60 70H76Z", fill: fg }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M95.3574 28H84L132 112L137.732 101.969C139.137 99.5097 139.137 96.4903 137.732 94.0309L102.303 32.0309C100.879 29.5383 98.2283 28 95.3574 28Z", fill: fg }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M104.643 112H132L126.303 121.969C124.879 124.462 122.228 126 119.357 126H108L116 140L108 154L94.268 129.969C92.8626 127.51 92.8626 124.49 94.268 122.031L97.6966 116.031C99.121 113.538 101.772 112 104.643 112Z", fill: fg })
+    /* @__PURE__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.createElement("path", { d: "M104.643 112H132L126.303 121.969C124.879 124.462 122.228 126 119.357 126H108L116 140L108 154L94.268 129.969C92.8626 127.51 92.8626 124.49 94.268 122.031L97.6966 116.031C99.121 113.538 101.772 112 104.643 112Z", fill: fg })
   );
 }
 function LogoWordmark({ fill = "black" }) {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "svg",
     {
       height: 32,
@@ -2827,16 +3165,16 @@ function LogoWordmark({ fill = "black" }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React16.createElement("path", { d: "M8 126H22V42H14.4C12.1598 42 11.0397 42 10.184 42.436C9.43139 42.8195 8.81947 43.4314 8.43597 44.184C8 45.0397 8 46.1598 8 48.4V126Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M76 108.5V42H90V119.6C90 121.84 90 122.96 89.564 123.816C89.1805 124.569 88.5686 125.181 87.816 125.564C86.9603 126 85.8402 126 83.6 126H77.4281C74.7227 126 73.37 126 72.1603 125.605C71.0899 125.256 70.1054 124.684 69.271 123.928C68.328 123.074 67.6569 121.9 66.3146 119.551L22 42H30.5719C33.2773 42 34.63 42 35.8397 42.3949C36.9101 42.7442 37.8946 43.3156 38.729 44.0716C39.672 44.926 40.3431 46.1005 41.6854 48.4494L76 108.5Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M152.208 68.2077C153.395 69.3951 153.989 69.9888 154.439 70.6738C154.838 71.2814 155.152 71.9406 155.374 72.6332C155.623 73.4139 155.711 74.2489 155.886 75.9189L156.884 85.3951C157.27 89.0678 157.464 90.9042 156.867 92.3245C156.343 93.5721 155.412 94.6057 154.226 95.2577C152.876 96 151.03 96 147.337 96H112V114H154V126H115.302C113.345 126 112.367 126 111.446 125.779C110.63 125.583 109.849 125.26 109.134 124.821C108.326 124.326 107.635 123.635 106.251 122.251L101.749 117.749C100.365 116.365 99.6736 115.674 99.1789 114.866C98.7402 114.151 98.417 113.37 98.221 112.554C98 111.633 98 110.655 98 108.698V75.3019C98 73.3452 98 72.3668 98.221 71.4461C98.417 70.6299 98.7402 69.8495 99.1789 69.1337C99.6736 68.3264 100.365 67.6346 101.749 66.251L106.251 61.749C107.635 60.3654 108.326 59.6736 109.134 59.1789C109.849 58.7402 110.63 58.417 111.446 58.221C112.367 58 113.345 58 115.302 58H136.698C138.655 58 139.633 58 140.554 58.221C141.37 58.417 142.151 58.7402 142.866 59.1789C143.674 59.6736 144.365 60.3654 145.749 61.749L152.208 68.2077ZM112 70V87.5332L144.492 86.4502L141.895 70H112Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M492.208 68.2077C493.395 69.3951 493.989 69.9888 494.439 70.6738C494.838 71.2814 495.152 71.9406 495.374 72.6332C495.623 73.4139 495.711 74.2489 495.886 75.9189L496.884 85.3951C497.27 89.0678 497.464 90.9042 496.867 92.3245C496.343 93.5721 495.412 94.6057 494.226 95.2577C492.876 96 491.03 96 487.337 96H452V114H494V126H455.302C453.345 126 452.367 126 451.446 125.779C450.63 125.583 449.849 125.26 449.134 124.821C448.326 124.326 447.635 123.635 446.251 122.251L441.749 117.749C440.365 116.365 439.674 115.674 439.179 114.866C438.74 114.151 438.417 113.37 438.221 112.554C438 111.633 438 110.655 438 108.698V75.3019C438 73.3452 438 72.3668 438.221 71.4461C438.417 70.6299 438.74 69.8495 439.179 69.1337C439.674 68.3264 440.365 67.6346 441.749 66.251L446.251 61.749C447.635 60.3654 448.326 59.6736 449.134 59.1789C449.849 58.7402 450.63 58.417 451.446 58.221C452.367 58 453.345 58 455.302 58H476.698C478.655 58 479.633 58 480.554 58.221C481.37 58.417 482.151 58.7402 482.866 59.1789C483.674 59.6736 484.365 60.3654 485.749 61.749L492.208 68.2077ZM452 70V87.5332L484.492 86.4502L481.895 70H452Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M168.794 117.797L160 58H174L184 126H178.291C175.35 126 173.88 126 172.695 125.46C171.651 124.984 170.765 124.219 170.142 123.255C169.435 122.161 169.222 120.706 168.794 117.797Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M192.794 66.2033L184 126H187.674C190.626 126 192.102 126 193.29 125.457C194.337 124.979 195.224 124.209 195.846 123.241C196.551 122.141 196.76 120.68 197.177 117.758L204 70L210.823 117.758C211.24 120.68 211.449 122.141 212.154 123.241C212.776 124.209 213.663 124.979 214.71 125.457C215.898 126 217.374 126 220.326 126H224L215.206 66.2033C214.778 63.2936 214.565 61.8387 213.858 60.7448C213.235 59.7808 212.349 59.0155 211.305 58.5398C210.12 58 208.65 58 205.709 58H202.291C199.35 58 197.88 58 196.695 58.5398C195.651 59.0155 194.765 59.7808 194.142 60.7448C193.435 61.8387 193.222 63.2936 192.794 66.2033Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M224 126H229.709C232.65 126 234.12 126 235.305 125.46C236.349 124.984 237.235 124.219 237.858 123.255C238.565 122.161 238.778 120.706 239.206 117.797L246.235 70H298V58H251.302C249.345 58 248.367 58 247.446 58.221C246.63 58.417 245.849 58.7402 245.134 59.1789C244.326 59.6736 243.635 60.3654 242.251 61.749L234.927 69.0727C233.815 70.1845 233.26 70.7405 232.829 71.3785C232.447 71.9446 232.139 72.5573 231.913 73.2016C231.658 73.9277 231.543 74.7056 231.315 76.2613L224 126Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M264.251 122.251L259.749 117.749C258.365 116.365 257.674 115.674 257.179 114.866C256.74 114.151 256.417 113.37 256.221 112.554C256 111.633 256 110.655 256 108.698V69.2L260 42H270V114H298V126H273.302C271.345 126 270.367 126 269.446 125.779C268.63 125.583 267.849 125.26 267.134 124.821C266.326 124.326 265.635 123.635 264.251 122.251Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M358.251 66.251C359.635 67.6346 360.326 68.3264 360.821 69.1337C361.26 69.8495 361.583 70.6299 361.779 71.4461C362 72.3668 362 73.3452 362 75.3019V108.698C362 110.655 362 111.633 361.779 112.554C361.583 113.37 361.26 114.151 360.821 114.866C360.326 115.674 359.635 116.365 358.251 117.749L353.749 122.251C352.365 123.635 351.674 124.326 350.866 124.821C350.151 125.26 349.37 125.583 348.554 125.779C347.633 126 346.655 126 344.698 126H319.302C317.345 126 316.367 126 315.446 125.779C314.63 125.583 313.849 125.26 313.134 124.821C312.326 124.326 311.635 123.635 310.251 122.251L305.749 117.749C304.365 116.365 303.674 115.674 303.179 114.866C302.74 114.151 302.417 113.37 302.221 112.554C302 111.633 302 110.655 302 108.698V75.3019C302 73.3452 302 72.3668 302.221 71.4461C302.417 70.6299 302.74 69.8495 303.179 69.1337C303.674 68.3264 304.365 67.6346 305.749 66.251L310.224 61.7757C311.606 60.3937 312.297 59.7027 313.104 59.2083C313.818 58.77 314.598 58.4468 315.413 58.2506C316.333 58.0292 317.31 58.0284 319.264 58.0267L344.692 58.0046C346.651 58.0029 347.63 58.0021 348.552 58.2228C349.369 58.4185 350.151 58.7417 350.867 59.1807C351.676 59.6757 352.368 60.3684 353.754 61.7536L358.251 66.251ZM316 70V114H348V70H316Z", fill }),
-    /* @__PURE__ */ React16.createElement("path", { d: "M370 64.4V126H384V70H416V126H430V75.3019C430 73.3452 430 72.3668 429.779 71.4461C429.583 70.6299 429.26 69.8495 428.821 69.1337C428.326 68.3264 427.635 67.6346 426.251 66.251L421.749 61.749C420.365 60.3654 419.674 59.6736 418.866 59.1789C418.151 58.7402 417.37 58.417 416.554 58.221C415.633 58 414.655 58 412.698 58H376.4C374.16 58 373.04 58 372.184 58.436C371.431 58.8195 370.819 59.4314 370.436 60.184C370 61.0397 370 62.1598 370 64.4Z", fill })
+    /* @__PURE__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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__ */ React19.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 })
   );
 }
 
@@ -3769,6 +4107,6 @@ var ICON_CATALOG = [
   }
 ];
 
-export { AppShell, Button, CATEGORIES, COMPONENTS, Card, Chip, ColorScaleSlider, ContentCard, Divider, Frame, HueSlider, ICON_CATALOG, Icon, LogoMonogram, LogoWordmark, Navbar, Popover, Select, Sidebar, Slider, Text3 as Text, TextInput, Toggle, Wrapper, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, usePopover };
+export { AppShell, Button, CATEGORIES, COMPONENTS, Card, Chip, ColorScaleSlider, ContentCard, Divider, Frame, HueSlider, ICON_CATALOG, Icon, LogoMonogram, LogoWordmark, Navbar, Page, Popover, Section, Select, Sidebar, Slider, Text3 as Text, TextInput, Toggle, Viewport, Wrapper, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, usePopover };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map