@streamplace/components 0.7.26 → 0.7.29

package/dist/components/ui/primitives/modal.js

@@ -7,7 +7,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const { width: screenWidth, height: screenHeight } = react_native_1.Dimensions.get("window");
 // Modal root primitive - handles the native Modal component
-exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, children, onRequestClose, animationType = "fade", presentationStyle = react_native_1.Platform.OS === "ios" ? "pageSheet" : "fullScreen", transparent = true, statusBarTranslucent = react_native_1.Platform.OS === "android", ...props }, ref) => {
+exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, children, onRequestClose, animationType = "fade", presentationStyle = react_native_1.Platform.OS === "ios" ? "pageSheet" : "fullScreen", statusBarTranslucent = react_native_1.Platform.OS === "android", ...props }, ref) => {
     const handleRequestClose = react_1.default.useCallback((e) => {
         if (onOpenChange) {
             onOpenChange(false);
@@ -16,7 +16,7 @@ exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, child
             onRequestClose(e);
         }
     }, [onOpenChange, onRequestClose]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, onRequestClose: handleRequestClose, animationType: animationType, presentationStyle: presentationStyle, transparent: transparent, statusBarTranslucent: statusBarTranslucent, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: primitiveStyles.container, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, onRequestClose: handleRequestClose, animationType: animationType, presentationStyle: presentationStyle, statusBarTranslucent: statusBarTranslucent, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: primitiveStyles.container, children: children }) }));
 });
 exports.ModalRoot.displayName = "ModalRoot";
 exports.ModalOverlay = (0, react_1.forwardRef)(({ dismissible = true, onDismiss, onPress, style, children, activeOpacity = 1, ...props }, ref) => {

package/dist/components/ui/primitives/text.js

@@ -24,6 +24,17 @@ const sizeMap = {
     "3xl": 30,
     "4xl": 36,
 };
+// Size-specific line height mapping (provides better default line heights for each size)
+const sizeLineHeightMap = {
+    xs: 16, // 12px * 1.33 = tight but readable
+    sm: 20, // 14px * 1.43 = good for small text
+    base: 24, // 16px * 1.5 = standard body text
+    lg: 28, // 18px * 1.56 = comfortable for larger text
+    xl: 30, // 20px * 1.5 = balanced
+    "2xl": 32, // 24px * 1.33 = tighter for headings
+    "3xl": 36, // 30px * 1.2 = tight for large headings
+    "4xl": 40, // 36px * 1.11 = very tight for display text
+};
 // Weight mapping
 const weightMap = {
     thin: "100",
@@ -85,12 +96,12 @@ const getVariantStyles = () => {
     }
     else if (typographicPlatform === "android") {
         return {
-            h1: platformTypography.headline1,
-            h2: platformTypography.headline2,
-            h3: platformTypography.headline3,
-            h4: platformTypography.headline4,
-            h5: platformTypography.headline5,
-            h6: platformTypography.headline6,
+            h1: platformTypography.headline4, // 34px instead of 96px
+            h2: platformTypography.headline5, // 24px instead of 60px
+            h3: platformTypography.headline6, // 20px instead of 48px
+            h4: platformTypography.subtitle1, // 16px instead of 34px
+            h5: platformTypography.subtitle2, // 14px instead of 24px
+            h6: platformTypography.subtitle2, // 14px - consistent with h5
             subtitle1: platformTypography.subtitle1,
             subtitle2: platformTypography.subtitle2,
             body1: platformTypography.body1,
@@ -143,9 +154,15 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
         // Apply variant styles (these may override inherited)
         ...(variant && variantStyles[variant]),
         // Apply explicit prop styles (these should override inherited and variant)
-        // Apply size
+        // Apply size (with corresponding line height if not explicitly set)
         ...(size && {
             fontSize: typeof size === "number" ? size : sizeMap[size],
+            // Apply size-specific line height only if leading is not explicitly set
+            ...(leading === undefined && {
+                lineHeight: typeof size === "number"
+                    ? size // Auto line height for numeric sizes
+                    : sizeLineHeightMap[size],
+            }),
         }),
         // Apply weight
         ...(weight && {
@@ -204,6 +221,22 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
     };
     finalStyles.color = finalStyles.color;
     // Create context value for children
+    // Process custom styles to auto-add line height for fontSize
+    const processedStyle = Array.isArray(style)
+        ? style
+        : [style].filter(Boolean);
+    const enhancedStyles = processedStyle.map((styleObj) => {
+        if (styleObj && typeof styleObj === "object" && "fontSize" in styleObj) {
+            const fontSize = styleObj.fontSize;
+            if (typeof fontSize === "number" && !styleObj.lineHeight && !leading) {
+                return {
+                    ...styleObj,
+                    lineHeight: fontSize * 1.2,
+                };
+            }
+        }
+        return styleObj;
+    });
     const contextValue = {
         fontSize: typeof finalStyles.fontSize === "number"
             ? finalStyles.fontSize
@@ -223,7 +256,7 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
         fontStyle: finalStyles.fontStyle,
         opacity: finalStyles.opacity,
     };
-    return ((0, jsx_runtime_1.jsx)(exports.TextContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [finalStyles, style], ...props, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.TextContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [finalStyles, ...enhancedStyles], ...props, children: children }) }));
 });
 exports.TextRoot.displayName = "TextRoot";
 // Text span primitive (inherits from parent but doesn't create new context)
@@ -248,6 +281,13 @@ function createTextStyle(props) {
     if (props.size) {
         style.fontSize =
             typeof props.size === "number" ? props.size : sizeMap[props.size];
+        // Apply size-specific line height only if leading is not explicitly set
+        if (props.leading === undefined) {
+            style.lineHeight =
+                typeof props.size === "number"
+                    ? props.size * 1.2 // Auto line height for numeric sizes
+                    : sizeLineHeightMap[props.size];
+        }
     }
     if (props.weight) {
         style.fontWeight = weightMap[props.weight];

package/dist/components/ui/text.js

@@ -5,8 +5,9 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
 const react_1 = tslib_1.__importStar(require("react"));
-const react_native_1 = require("react-native");
-const atoms_1 = require("../../lib/theme/atoms");
+const theme_1 = require("../../lib/theme/theme");
+const tokens_1 = require("../../lib/theme/tokens");
+const zero = tslib_1.__importStar(require("../../ui"));
 const text_1 = require("./primitives/text");
 Object.defineProperty(exports, "TextPrimitive", { enumerable: true, get: function () { return text_1.TextPrimitive; } });
 // Text variants using class-variance-authority pattern
@@ -65,8 +66,7 @@ const textVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.textVariants = textVariants;
 exports.Text = (0, react_1.forwardRef)(({ variant = undefined, size = undefined, weight = undefined, color = undefined, muted = false, bold = false, italic = false, underline = false, strikethrough = false, uppercase = false, lowercase = false, capitalize = false, center = false, right = false, justify = false, customColor, style, children, ...props }, ref) => {
-    // Create dynamic styles based on atoms
-    const styles = react_1.default.useMemo(() => createStyles(), []);
+    const { zero: zt } = (0, theme_1.useTheme)();
     // Override props based on convenience props
     const finalColor = customColor ? customColor : muted ? "muted" : color;
     const finalTransform = uppercase
@@ -90,8 +90,31 @@ exports.Text = (0, react_1.forwardRef)(({ variant = undefined, size = undefined,
             : justify
                 ? "justify"
                 : "left";
-    // Get variant-specific styles
-    const variantStyle = styles[`${variant}Style`] || {};
+    // Get variant-specific styles using theme.zero
+    const variantStyle = react_1.default.useMemo(() => {
+        switch (variant) {
+            case "h1":
+                return zero.my[6];
+            case "h2":
+            case "h3":
+                return zero.my[4];
+            case "h4":
+            case "h5":
+            case "h6":
+            case "subtitle1":
+                return zero.my[2];
+            case "subtitle2":
+            case "caption":
+            case "overline":
+                return zero.my[1];
+            case "body1":
+                return zero.my[4];
+            case "body2":
+                return zero.my[2];
+            default:
+                return {};
+        }
+    }, [variant, zt]);
     const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter((s) => s !== undefined);
     return ((0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { ref: ref, variant: variant || "body1", size: size || "base", color: finalColor || "default", align: finalAlign, transform: finalTransform, decoration: finalDecoration, italic: italic, style: [variantStyle, ...styleArr], ...props, children: children }));
 });
@@ -108,70 +131,18 @@ exports.Caption.displayName = "Caption";
 exports.Label = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: "subtitle1", weight: "medium", ...props })));
 exports.Label.displayName = "Label";
 exports.Code = (0, react_1.forwardRef)(({ style, ...props }, ref) => {
-    const styles = react_1.default.useMemo(() => createStyles(), []);
+    const { zero: zt } = (0, theme_1.useTheme)();
+    const codeStyle = react_1.default.useMemo(() => [
+        {
+            borderRadius: zero.borderRadius.sm,
+            fontFamily: tokens_1.fontFamilies.monoRegular,
+        },
+    ], [zt]);
     // if style is not an array, convert it to an array
     const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter((s) => s !== undefined);
-    return (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, style: [styles.codeStyle, ...styleArr], ...props });
+    return (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, style: [...codeStyle, ...styleArr], ...props });
 });
 exports.Code.displayName = "Code";
 // Span component for inline text styling (inherits from parent)
 exports.Span = (0, react_1.forwardRef)(({ children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Span, { ref: ref, ...props, children: children })));
 exports.Span.displayName = "Span";
-// Create atom-based styles
-function createStyles() {
-    return react_native_1.StyleSheet.create({
-        // Variant-specific styles
-        h1Style: {
-            marginBottom: atoms_1.spacing[4],
-        },
-        h2Style: {
-            marginBottom: atoms_1.spacing[3],
-        },
-        h3Style: {
-            marginBottom: atoms_1.spacing[3],
-        },
-        h4Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        h5Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        h6Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        subtitle1Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        subtitle2Style: {
-            marginBottom: atoms_1.spacing[1],
-        },
-        body1Style: {
-            marginBottom: atoms_1.spacing[3],
-        },
-        body2Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        captionStyle: {
-            marginBottom: atoms_1.spacing[1],
-        },
-        overlineStyle: {
-            marginBottom: atoms_1.spacing[1],
-            textTransform: "uppercase",
-            letterSpacing: 1,
-        },
-        labelStyle: {
-            marginBottom: atoms_1.spacing[1],
-        },
-        buttonStyle: {
-            textAlign: "center",
-        },
-        codeStyle: {
-            fontFamily: "monospace",
-            backgroundColor: atoms_1.colors["muted"],
-            paddingHorizontal: atoms_1.spacing[1],
-            paddingVertical: 2,
-            borderRadius: atoms_1.borderRadius.sm,
-            fontSize: 14,
-        },
-    });
-}

package/dist/components/ui/toast.js

@@ -1,59 +1,97 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
 exports.useToast = useToast;
+exports.ToastProvider = ToastProvider;
 exports.Toast = Toast;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const portal_1 = require("@rn-primitives/portal");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const theme_1 = require("../../lib/theme/theme");
-const react_2 = require("react");
-/**
- * useToast - a hook to manage Toast state and provide a toastController.
- * Returns a ready-to-render ToastComponent.
- */
-function useToast(initial = {}) {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [title, setTitle] = (0, react_1.useState)(initial.title ?? "");
-    const [description, setDescription] = (0, react_1.useState)(initial.description ?? "");
-    const [duration, setDuration] = (0, react_1.useState)(initial.duration ?? 3);
-    const [actionLabel, setActionLabel] = (0, react_1.useState)(initial.actionLabel ?? "Action");
-    const [onAction, setOnAction] = (0, react_1.useState)(initial.onAction);
-    const show = (0, react_2.useCallback)((toastTitle, toastDescription, options) => {
-        setTitle(toastTitle);
-        setDescription(toastDescription ?? "");
-        setDuration(options?.duration ?? 3);
-        setActionLabel(options?.actionLabel ?? "Action");
-        setOnAction(options?.onAction);
-        setOpen(true);
-    }, []);
-    const hide = (0, react_2.useCallback)(() => {
-        setOpen(false);
+const ui_1 = require("../../ui");
+class ToastManager {
+    constructor() {
+        this.listeners = new Set();
+        this.currentToast = null;
+        this.timeoutId = null;
+    }
+    show(config) {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+        const toast = {
+            id: Math.random().toString(36).substr(2, 9),
+            open: true,
+            title: config.title,
+            description: config.description,
+            duration: config.duration ?? 3,
+            actionLabel: config.actionLabel,
+            onAction: config.onAction,
+        };
+        this.currentToast = toast;
+        this.notifyListeners();
+        if (toast.duration > 0) {
+            this.timeoutId = setTimeout(() => {
+                this.hide();
+            }, toast.duration * 1000);
+        }
+    }
+    hide() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        this.currentToast = null;
+        this.notifyListeners();
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notifyListeners() {
+        this.listeners.forEach((listener) => listener(this.currentToast));
+    }
+}
+const toastManager = new ToastManager();
+exports.toast = {
+    show: (title, description, options) => {
+        toastManager.show({
+            title,
+            description,
+            ...options,
+        });
+    },
+    hide: () => toastManager.hide(),
+};
+function useToast() {
+    const [toastState, setToastState] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        return toastManager.subscribe(setToastState);
     }, []);
-    // Ready-to-render Toast component
-    const ToastComponent = ((0, jsx_runtime_1.jsx)(Toast, { open: open, onOpenChange: setOpen, title: title, description: description, actionLabel: actionLabel, onAction: onAction, duration: duration }));
     return {
-        open,
-        title,
-        description,
-        actionLabel,
-        onAction,
-        duration,
-        setOpen,
-        setTitle,
-        setDescription,
-        setActionLabel,
-        setOnAction,
-        setDuration,
-        toastController: { show, hide },
-        ToastComponent,
+        toast: toastState,
+        ...exports.toast,
     };
 }
+function ToastProvider() {
+    const [toastState, setToastState] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        return toastManager.subscribe(setToastState);
+    }, []);
+    if (!toastState?.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Toast, { open: toastState.open, onOpenChange: (open) => {
+            if (!open)
+                toastManager.hide();
+        }, title: toastState.title, description: toastState.description, actionLabel: toastState.actionLabel, onAction: toastState.onAction, duration: toastState.duration }));
+}
 function Toast({ open, onOpenChange, title, description, actionLabel = "Action", onAction, duration = 3, }) {
     const [seconds, setSeconds] = (0, react_1.useState)(duration);
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const { theme } = (0, theme_1.useTheme)();
+    const { theme } = (0, ui_1.useTheme)();
     const [fadeAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
     const { width } = (0, react_native_1.useWindowDimensions)();
     const isWeb = react_native_1.Platform.OS === "web";

package/dist/components/ui/view.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.viewVariants = exports.Center = exports.Column = exports.Row = exports.Overlay = exports.Surface = exports.Container = exports.Card = exports.View = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const atoms_1 = require("../../lib/theme/atoms");
 const theme_1 = require("../../lib/theme/theme");
+const zero = tslib_1.__importStar(require("../../ui"));
 // View variants using class-variance-authority pattern
 const viewVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
@@ -72,69 +73,61 @@ const viewVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.viewVariants = viewVariants;
 exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none", margin = "none", direction = "column", align = "stretch", justify = "start", flex = "none", fullWidth = false, fullHeight = false, centered = false, backgroundColor, borderColor, borderWidth, borderRadius, shadow = false, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    // Map variant to styles
+    const { zero: zt } = (0, theme_1.useTheme)();
+    // Map variant to styles using theme.zero
     const variantStyles = (() => {
         switch (variant) {
             case "card":
                 return {
-                    backgroundColor: theme.colors.card,
-                    borderRadius: atoms_1.borderRadius.lg,
-                    shadowColor: "#000",
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 4,
-                    elevation: 3,
+                    ...zt.bg.card,
+                    borderRadius: zero.borderRadius.lg,
+                    ...zero.shadows.md,
                 };
             case "overlay":
-                return {
-                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                };
+                return zt.bg.overlay;
             case "surface":
-                return {
-                    backgroundColor: theme.colors.background,
-                };
+                return zt.bg.background;
             case "container":
                 return {
-                    backgroundColor: theme.colors.background,
-                    padding: atoms_1.spacing[4],
+                    ...zt.bg.background,
+                    ...zero.p[8],
                 };
             default:
                 return {};
         }
     })();
-    // Map padding to numeric values
+    // Map padding to zero tokens
     const paddingValue = (() => {
         switch (padding) {
             case "xs":
-                return atoms_1.spacing[1];
+                return zero.p[1];
             case "sm":
-                return atoms_1.spacing[2];
+                return zero.p[2];
             case "md":
-                return atoms_1.spacing[3];
+                return zero.p[4];
             case "lg":
-                return atoms_1.spacing[4];
+                return zero.p[6];
             case "xl":
-                return atoms_1.spacing[5];
+                return zero.p[8];
             default:
-                return undefined;
+                return {};
         }
     })();
-    // Map margin to numeric values
+    // Map margin to zero tokens
     const marginValue = (() => {
         switch (margin) {
             case "xs":
-                return atoms_1.spacing[1];
+                return zero.m[1];
             case "sm":
-                return atoms_1.spacing[2];
+                return zero.m[2];
             case "md":
-                return atoms_1.spacing[3];
+                return zero.m[4];
             case "lg":
-                return atoms_1.spacing[4];
+                return zero.m[6];
             case "xl":
-                return atoms_1.spacing[5];
+                return zero.m[8];
             default:
-                return undefined;
+                return {};
         }
     })();
     // Map flex direction
@@ -205,8 +198,8 @@ exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none",
     })();
     const computedStyle = {
         ...variantStyles,
-        ...(paddingValue !== undefined && { padding: paddingValue }),
-        ...(marginValue !== undefined && { margin: marginValue }),
+        ...paddingValue,
+        ...marginValue,
         flexDirection,
         alignItems,
         justifyContent,
@@ -221,13 +214,7 @@ exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none",
         ...(borderColor && { borderColor }),
         ...(borderWidth !== undefined && { borderWidth }),
         ...(borderRadius !== undefined && { borderRadius }),
-        ...(shadow && {
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 3,
-        }),
+        ...(shadow && zero.shadows.md),
     };
     const finalStyle = Array.isArray(style)
         ? [computedStyle, ...style]

package/dist/crypto-polyfill.native.js

@@ -0,0 +1,24 @@
+// awkward use of require()? you betcha. but import() with Metro causes it to try and
+// resolve the package at compile-time even if not installed, so here we are.
+let rnqc = null;
+let expoCrypto = null;
+try {
+    rnqc = require("react-native-quick-crypto");
+}
+catch (err) { }
+try {
+    expoCrypto = require("expo-crypto");
+}
+catch (err) { }
+if (!rnqc && !expoCrypto) {
+    throw new Error("Livestreaming requires one of react-native-quick-crypto or expo-crypto");
+}
+else if (!rnqc && expoCrypto) {
+    // @atproto/crypto dependencies expect crypto.getRandomValues to be a function
+    if (typeof globalThis.crypto === "undefined") {
+        globalThis.crypto = {};
+    }
+    if (typeof globalThis.crypto.getRandomValues === "undefined") {
+        globalThis.crypto.getRandomValues = expoCrypto.getRandomValues;
+    }
+}

package/dist/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.storage = exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
 const tslib_1 = require("tslib");
 // barrel file :)
+require("./crypto-polyfill");
 tslib_1.__exportStar(require("./livestream-provider"), exports);
 tslib_1.__exportStar(require("./livestream-store"), exports);
 tslib_1.__exportStar(require("./player-store"), exports);

package/dist/lib/theme/index.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tokens = exports.atoms = exports.typographyAtoms = exports.layout = exports.iconSizes = exports.getPlatformTypography = exports.borders = exports.typography = exports.touchTargets = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.animations = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = void 0;
+exports.tokens = exports.atoms = exports.typographyAtoms = exports.layout = exports.iconSizes = exports.getPlatformTypography = exports.borders = exports.typography = exports.touchTargets = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.animations = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = void 0;
 const tslib_1 = require("tslib");
 // Main theme system exports
 var theme_1 = require("./theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
 Object.defineProperty(exports, "createThemeColors", { enumerable: true, get: function () { return theme_1.createThemeColors; } });
 Object.defineProperty(exports, "createThemeIcons", { enumerable: true, get: function () { return theme_1.createThemeIcons; } });
-Object.defineProperty(exports, "createThemeStyles", { enumerable: true, get: function () { return theme_1.createThemeStyles; } });
 Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_1.createThemedStyles; } });
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
 Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });