@newtonedev/components 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import React11, { createContext, useState, useMemo, useContext, useRef, useCallback, useEffect } from 'react';
+import React11, { createContext, useState, useMemo, useContext, useEffect, useCallback, useRef } from 'react';
 import { DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE, getColor, getColorByContrast, srgbToHex } from 'newtone';
 import { Text, Pressable, View, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
 
@@ -28,12 +28,32 @@ var DEFAULT_THEME_CONFIG = {
     // [sunken, default, elevated]
   },
   spacing: {
-    xs: 4,
-    sm: 8,
-    md: 12,
-    lg: 16,
-    xl: 24,
-    xxl: 32
+    "00": 0,
+    // base * 0
+    "02": 2,
+    // base * 0.25
+    "04": 4,
+    // base * 0.5
+    "06": 6,
+    // base * 0.75
+    "08": 8,
+    // base * 1 (Medium preset, 8px base)
+    "10": 10,
+    // base * 1.25
+    "12": 12,
+    // base * 1.5
+    "16": 16,
+    // base * 2
+    "20": 20,
+    // base * 2.5
+    "24": 24,
+    // base * 3
+    "32": 32,
+    // base * 4
+    "40": 40,
+    // base * 5
+    "48": 48
+    // base * 6
   },
   radius: {
     none: 0,
@@ -421,27 +441,27 @@ function useTokens(elevation) {
 function getSizeConfig(tokens) {
   return {
     sm: {
-      paddingVertical: tokens.spacing.xs,
-      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing["04"],
+      paddingHorizontal: tokens.spacing["12"],
       fontSize: tokens.typography.size.sm,
       borderRadius: tokens.radius.sm,
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing["04"],
       iconSize: tokens.typography.size.sm
     },
     md: {
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.lg,
+      paddingVertical: tokens.spacing["08"],
+      paddingHorizontal: tokens.spacing["16"],
       fontSize: tokens.typography.size.base,
       borderRadius: tokens.radius.md,
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing["08"],
       iconSize: tokens.typography.size.base
     },
     lg: {
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.xl,
+      paddingVertical: tokens.spacing["12"],
+      paddingHorizontal: tokens.spacing["24"],
       fontSize: tokens.typography.size.base,
       borderRadius: tokens.radius.lg,
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing["08"],
       iconSize: tokens.typography.size.base
     }
   };
@@ -522,25 +542,41 @@ function Icon({
   color,
   elevation = 1,
   style,
-  onPress
+  onPress,
+  // Accessibility
+  accessibilityLabel,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
 }) {
   const tokens = useTokens(elevation);
-  const fontSize = size ?? tokens.typography.size.base;
-  const opsz = opticalSize ?? fontSize;
-  const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
-  const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
-  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+  const iconStyle = useMemo(() => {
+    const fontSize = size ?? tokens.typography.size.base;
+    const opsz = opticalSize ?? fontSize;
+    const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
+    const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
+    const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+    return {
+      fontFamily,
+      fontSize,
+      color: iconColor,
+      userSelect: "none",
+      // web-only: prevents users from selecting the icon as text
+      fontVariationSettings,
+      // web-only: controls the variable font axes listed above
+      ...style
+    };
+  }, [tokens, size, opticalSize, fill, color, style]);
   return /* @__PURE__ */ React11.createElement(
     Text,
     {
-      style: {
-        fontFamily,
-        fontSize,
-        color: iconColor,
-        userSelect: "none",
-        fontVariationSettings,
-        ...style
-      },
+      ref,
+      testID,
+      nativeID,
+      accessibilityLabel,
+      importantForAccessibility: accessibilityLabel ? "yes" : "no-hide-descendants",
+      style: iconStyle,
       onPress
     },
     name
@@ -599,7 +635,7 @@ function getCardStyles(tokens, disabled) {
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.lg,
-      padding: tokens.spacing.lg,
+      padding: tokens.spacing["16"],
       opacity: disabled ? 0.5 : 1
     }
   });
@@ -619,8 +655,51 @@ function Card({
   );
   return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
 }
+var hadKeyboardEvent = false;
+var isListenerSetup = false;
+function setupModality() {
+  if (isListenerSetup || typeof document === "undefined") return;
+  isListenerSetup = true;
+  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+    "Tab",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Enter",
+    " ",
+    "Escape"
+  ]);
+  document.addEventListener("keydown", (e) => {
+    if (NAVIGATION_KEYS.has(e.key)) {
+      hadKeyboardEvent = true;
+    }
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+  document.addEventListener("mousedown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+}
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
+  useEffect(() => {
+    setupModality();
+  }, []);
+  const onFocus = useCallback(() => {
+    if (hadKeyboardEvent) {
+      setIsFocusVisible(true);
+    }
+  }, []);
+  const onBlur = useCallback(() => {
+    setIsFocusVisible(false);
+  }, []);
+  const focusProps = { onFocus, onBlur };
+  return { isFocusVisible, focusProps };
+}
 
-// src/Frame/Frame.utils.ts
+// src/primitives/Frame/Frame.utils.ts
 function resolveSpacing(value, tokens) {
   if (typeof value === "number") return value;
   return tokens.spacing[value];
@@ -685,7 +764,7 @@ function resolveSizing(width, height) {
   }
   if (height !== void 0) {
     if (height === "fill") {
-      style.flexGrow = style.flexGrow === 1 ? 1 : 1;
+      style.flexGrow = 1;
       style.height = "100%";
     } else if (typeof height === "number") {
       style.height = height;
@@ -721,7 +800,7 @@ function resolveFlexDirection(direction, reverse) {
   return reverse ? "column-reverse" : "column";
 }
 
-// src/Frame/Frame.styles.ts
+// src/primitives/Frame/Frame.styles.ts
 function getFrameStyles(input) {
   const {
     tokens,
@@ -810,12 +889,15 @@ function getFrameStyles(input) {
   if (layout === "grid") {
     gridWebStyle = {
       display: "grid",
+      // Divide into equal-width columns (e.g. 3 columns → "repeat(3, 1fr)").
       gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : void 0,
       gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0
     };
   }
   const insetBoxShadow = frameElevation === -2 ? "inset 0 2px 4px rgba(0,0,0,0.12)" : null;
   return {
+    // 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,
@@ -823,7 +905,7 @@ function getFrameStyles(input) {
   };
 }
 
-// src/Frame/Frame.tsx
+// src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
   return React11.Children.map(children, (child) => {
     if (typeof child === "string" || typeof child === "number") {
@@ -869,6 +951,13 @@ function Frame({
   onPress,
   href,
   disabled = false,
+  // Accessibility
+  accessibilityLabel,
+  accessibilityHint,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref,
   // Style override
   style
 }) {
@@ -952,6 +1041,14 @@ function Frame({
   }
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
   const isInteractive = onPress !== void 0 || href !== void 0;
+  const { isFocusVisible, focusProps } = useFocusVisible();
+  const focusRingStyle = isFocusVisible && !disabled ? {
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: srgbToHex(tokens.interactive.srgb),
+    outlineOffset: 2
+  } : void 0;
+  const webFocusProps = isInteractive ? focusProps : {};
   const textStyle = useMemo(
     () => ({
       color: srgbToHex(tokens.textPrimary.srgb),
@@ -961,27 +1058,56 @@ function Frame({
     }),
     [tokens]
   );
-  const wrappedChildren = wrapTextChildren(children, textStyle);
-  return /* @__PURE__ */ React11.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? /* @__PURE__ */ React11.createElement(
-    Pressable,
-    {
-      onPress,
-      disabled,
-      ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
-      style: ({ pressed }) => [
-        styles.container,
-        pressed && !disabled && styles.pressed,
-        ...webOverrides,
-        ...userStyles
-      ]
-    },
-    wrappedChildren
-  ) : /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...webOverrides, ...userStyles] }, wrappedChildren));
+  const wrappedChildren = useMemo(
+    () => wrapTextChildren(children, textStyle),
+    [children, textStyle]
+  );
+  return /* @__PURE__ */ React11.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__ */ React11.createElement(
+      Pressable,
+      {
+        ref,
+        testID,
+        nativeID,
+        accessibilityLabel,
+        accessibilityHint,
+        accessibilityState: disabled ? { disabled: true } : void 0,
+        onPress,
+        disabled,
+        ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
+        ...webFocusProps,
+        style: ({ pressed }) => [
+          styles.container,
+          pressed && !disabled && styles.pressed,
+          focusRingStyle,
+          ...webOverrides,
+          ...userStyles
+        ]
+      },
+      wrappedChildren
+    )
+  ) : (
+    // Non-interactive Frame: just a plain View with no tap handling.
+    /* @__PURE__ */ React11.createElement(
+      View,
+      {
+        ref,
+        testID,
+        nativeID,
+        accessibilityLabel,
+        accessibilityHint,
+        style: [styles.container, ...webOverrides, ...userStyles]
+      },
+      wrappedChildren
+    )
+  ));
 }
 function getTextInputStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs
+      gap: tokens.spacing["04"]
     },
     label: {
       fontFamily: tokens.typography.fonts.default,
@@ -995,8 +1121,8 @@ function getTextInputStyles(tokens, disabled) {
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.md,
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing["08"],
+      paddingHorizontal: tokens.spacing["12"],
       fontSize: tokens.typography.size.base,
       color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb),
       opacity: disabled ? 0.5 : 1
@@ -1042,7 +1168,11 @@ function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpe
       maxHeight,
       zIndex: 1e3,
       overflow: "hidden",
-      ...{ boxShadow: "0 4px 12px rgba(0,0,0,0.15)" }
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.15,
+      shadowRadius: 12,
+      elevation: 8
     }
   });
 }
@@ -1081,6 +1211,7 @@ function Popover({
   }, [isOpen, onClose]);
   useEffect(() => {
     if (!isOpen) return;
+    if (typeof document === "undefined") return;
     const handleMouseDown = (e) => {
       const node = containerRef.current;
       if (node && !node.contains(e.target)) {
@@ -1151,12 +1282,12 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
   const isSm = size === "sm";
   const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
   const iconSize = fontSize + 2;
-  const iconSpace = iconSize + tokens.spacing.sm;
-  const paddingVertical = isSm ? tokens.spacing.xs : tokens.spacing.sm;
-  const paddingHorizontal = isSm ? tokens.spacing.sm : tokens.spacing.md;
+  const iconSpace = iconSize + tokens.spacing["08"];
+  const paddingVertical = isSm ? tokens.spacing["04"] : tokens.spacing["08"];
+  const paddingHorizontal = isSm ? tokens.spacing["08"] : tokens.spacing["12"];
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing["04"],
       zIndex: isOpen ? 999 : 0
     },
     label: {
@@ -1174,7 +1305,7 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
-      paddingRight: iconSpace + (isSm ? tokens.spacing.xs : tokens.spacing.sm),
+      paddingRight: iconSpace + (isSm ? tokens.spacing["04"] : tokens.spacing["08"]),
       opacity: disabled ? 0.5 : 1
     },
     triggerText: {
@@ -1185,7 +1316,7 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
     },
     iconWrapper: {
       position: "absolute",
-      right: isSm ? tokens.spacing.xs : tokens.spacing.sm,
+      right: isSm ? tokens.spacing["04"] : tokens.spacing["08"],
       top: 0,
       bottom: 0,
       justifyContent: "center"
@@ -1197,9 +1328,9 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       color: srgbToHex(tokens.textSecondary.srgb),
       textTransform: "uppercase",
       letterSpacing: 0.5,
-      paddingVertical: tokens.spacing.xs,
-      paddingHorizontal: isSm ? tokens.spacing.sm : tokens.spacing.md,
-      paddingTop: tokens.spacing.sm
+      paddingVertical: tokens.spacing["04"],
+      paddingHorizontal: isSm ? tokens.spacing["08"] : tokens.spacing["12"],
+      paddingTop: tokens.spacing["08"]
     }
   });
 }
@@ -1313,8 +1444,8 @@ function SelectOptionRow({
   size
 }) {
   const tokens = useTokens(1);
-  const paddingVertical = size === "sm" ? tokens.spacing.xs : tokens.spacing.sm;
-  const paddingHorizontal = size === "sm" ? tokens.spacing.sm : tokens.spacing.md;
+  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;
   if (renderOption) {
     return /* @__PURE__ */ React11.createElement(
@@ -1323,7 +1454,7 @@ function SelectOptionRow({
         onPress: option.disabled ? void 0 : onSelect,
         disabled: option.disabled,
         role: "option",
-        "aria-selected": isSelected
+        accessibilityState: { selected: isSelected }
       },
       renderOption(option, { isSelected, isFocused })
     );
@@ -1334,7 +1465,7 @@ function SelectOptionRow({
       onPress: option.disabled ? void 0 : onSelect,
       disabled: option.disabled,
       role: "option",
-      "aria-selected": isSelected,
+      accessibilityState: { selected: isSelected },
       style: ({ pressed }) => [
         {
           flexDirection: "row",
@@ -1379,7 +1510,7 @@ function SelectOptionRow({
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React11.createElement(View, { style: { marginLeft: tokens.spacing.sm } }, /* @__PURE__ */ React11.createElement(
+    isSelected && /* @__PURE__ */ React11.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React11.createElement(
       Icon,
       {
         name: "check",
@@ -1440,8 +1571,7 @@ function Select({
       onPress: disabled ? void 0 : toggle,
       disabled,
       role: "combobox",
-      "aria-expanded": isOpen,
-      "aria-haspopup": "listbox",
+      accessibilityState: { expanded: isOpen },
       ...triggerWebProps,
       style: styles.trigger
     },
@@ -1515,7 +1645,7 @@ function getToggleStyles(tokens, value, disabled) {
     container: {
       flexDirection: "row",
       alignItems: "center",
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing["08"],
       opacity: disabled ? 0.5 : 1
     },
     label: {
@@ -1576,7 +1706,7 @@ var THUMB_SIZE2 = 16;
 function getSliderStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing["04"],
       opacity: disabled ? 0.5 : 1
     },
     labelRow: {
@@ -1792,7 +1922,7 @@ function buildHueSegments(min, max) {
 function getHueSliderStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing["04"],
       opacity: disabled ? 0.5 : 1
     },
     labelRow: {
@@ -1966,7 +2096,7 @@ var THUMB_SIZE4 = 18;
 function getColorScaleSliderStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing["04"],
       opacity: disabled ? 0.5 : 1
     },
     labelRow: {
@@ -2131,6 +2261,170 @@ function ColorScaleSlider({
     /* @__PURE__ */ React11.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
   ), warning && /* @__PURE__ */ React11.createElement(Text, { style: styles.warning }, warning));
 }
+function getWrapperStyles(input) {
+  const {
+    tokens,
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  } = input;
+  const container = {};
+  container.flexDirection = resolveFlexDirection(direction, reverse);
+  if (wrap) container.flexWrap = "wrap";
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  Object.assign(container, resolveSizing(width, height));
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  return StyleSheet.create({ c: container }).c;
+}
+
+// src/primitives/Wrapper/Wrapper.tsx
+function Wrapper({
+  children,
+  direction,
+  wrap,
+  reverse,
+  align,
+  justify,
+  padding,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  style,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens(1);
+  const containerStyle = useMemo(
+    () => getWrapperStyles({
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    }),
+    [
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    ]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React11.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
+}
+var COLOR_MAP = {
+  primary: "textPrimary",
+  secondary: "textSecondary",
+  interactive: "interactive"
+};
+function Text11({
+  children,
+  size = "base",
+  weight = "regular",
+  color = "primary",
+  font = "default",
+  lineHeight = "normal",
+  align,
+  numberOfLines,
+  elevation = 1,
+  style,
+  // Accessibility
+  accessibilityRole,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens(elevation);
+  const resolvedStyle = useMemo(() => {
+    const fontSize = tokens.typography.size[size];
+    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').
+      color: srgbToHex(tokens[COLOR_MAP[color]].srgb),
+      // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
+      lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
+      textAlign: align
+    };
+  }, [tokens, size, weight, color, font, lineHeight, align]);
+  return /* @__PURE__ */ React11.createElement(
+    Text,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole,
+      style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
+      numberOfLines
+    },
+    children
+  );
+}
 function getAppShellStyles(tokens) {
   return StyleSheet.create({
     container: {
@@ -2793,6 +3087,6 @@ var SYSTEM_FONTS = [
   }
 ];
 
-export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, TextInput, Toggle, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFrameContext, useNewtoneTheme, usePopover, useTokens };
+export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, Text11 as Text, TextInput, Toggle, Wrapper, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, useFrameContext, useNewtoneTheme, usePopover, useTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map