app-studio 0.7.18 → 0.8.0

package/dist/native/index.js

@@ -0,0 +1,3268 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/native/components.tsx
+import React3 from "react";
+import {
+  Image as RNImage,
+  ImageBackground as RNImageBackground,
+  Pressable,
+  SafeAreaView,
+  ScrollView as RNScrollView,
+  Text as RNText,
+  TextInput,
+  View as RNView
+} from "react-native";
+
+// src/native/style.ts
+import { useMemo as useMemo3 } from "react";
+import {
+  StyleSheet,
+  useWindowDimensions
+} from "react-native";
+
+// src/native/providers/Responsive.tsx
+import React, { createContext, useContext, useMemo } from "react";
+import { useWindowDimensions as useRNWindowDimensions } from "react-native";
+var defaultBreakpointsConfig = {
+  xs: 0,
+  sm: 340,
+  md: 560,
+  lg: 1080,
+  xl: 1300
+};
+var defaultDeviceConfig = {
+  mobile: ["xs", "sm"],
+  tablet: ["md", "lg"],
+  desktop: ["lg", "xl"]
+};
+function getMediaQueries(breakpoints) {
+  const sorted = Object.keys(breakpoints).map((breakpoint) => ({
+    breakpoint,
+    min: breakpoints[breakpoint],
+    max: void 0
+  })).sort((a, b) => a.min - b.min);
+  for (let i = 0; i < sorted.length - 1; i++) {
+    sorted[i].max = sorted[i + 1].min - 1;
+  }
+  return sorted.reduce((queries, item) => {
+    queries[item.breakpoint] = `only screen${item.min > 0 ? ` and (min-width: ${item.min}px)` : ""}${item.max !== void 0 ? ` and (max-width: ${item.max}px)` : ""}`;
+    return queries;
+  }, {});
+}
+function getBreakpointFromWidth(width, breakpoints) {
+  const sorted = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
+  const match = sorted.find(([, min]) => width >= min);
+  return match?.[0] || sorted[sorted.length - 1]?.[0] || "xs";
+}
+function getDeviceFromBreakpoint(breakpoint, devices) {
+  const device = Object.keys(devices).find(
+    (key) => devices[key].includes(breakpoint)
+  );
+  return device || "desktop";
+}
+var defaultBreakpointConfig = {
+  breakpoints: defaultBreakpointsConfig,
+  devices: defaultDeviceConfig,
+  mediaQueries: getMediaQueries(defaultBreakpointsConfig),
+  currentBreakpoint: "xs",
+  currentDevice: "mobile",
+  orientation: "portrait"
+};
+var defaultWindowDimensions = {
+  width: 0,
+  height: 0
+};
+var BreakpointContext = createContext(
+  defaultBreakpointConfig
+);
+var WindowDimensionsContext = createContext(
+  defaultWindowDimensions
+);
+var ResponsiveContext = createContext({
+  ...defaultBreakpointConfig,
+  currentWidth: 0,
+  currentHeight: 0
+});
+var useBreakpointContext = () => useContext(BreakpointContext);
+var useWindowDimensionsContext = () => useContext(WindowDimensionsContext);
+var useResponsiveContext = () => useContext(ResponsiveContext);
+var ResponsiveProvider = ({
+  breakpoints = defaultBreakpointsConfig,
+  devices = defaultDeviceConfig,
+  children
+}) => {
+  const dimensions = useRNWindowDimensions();
+  const width = dimensions.width || 0;
+  const height = dimensions.height || 0;
+  const currentBreakpoint = getBreakpointFromWidth(width, breakpoints);
+  const currentDevice = getDeviceFromBreakpoint(currentBreakpoint, devices);
+  const orientation = width >= height ? "landscape" : "portrait";
+  const breakpointValue = useMemo(
+    () => ({
+      breakpoints,
+      devices,
+      mediaQueries: getMediaQueries(breakpoints),
+      currentBreakpoint,
+      currentDevice,
+      orientation
+    }),
+    [breakpoints, devices, currentBreakpoint, currentDevice, orientation]
+  );
+  const windowValue = useMemo(
+    () => ({ width, height }),
+    [width, height]
+  );
+  const responsiveValue = useMemo(
+    () => ({
+      ...breakpointValue,
+      currentWidth: width,
+      currentHeight: height
+    }),
+    [breakpointValue, width, height]
+  );
+  return /* @__PURE__ */ React.createElement(BreakpointContext.Provider, { value: breakpointValue }, /* @__PURE__ */ React.createElement(WindowDimensionsContext.Provider, { value: windowValue }, /* @__PURE__ */ React.createElement(ResponsiveContext.Provider, { value: responsiveValue }, children)));
+};
+
+// src/native/providers/Theme.tsx
+import React2, {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useState
+} from "react";
+
+// src/utils/colors.ts
+var defaultLightPalette = {
+  white: {
+    50: "rgba(255, 255, 255, 0.04)",
+    100: "rgba(255, 255, 255, 0.08)",
+    200: "rgba(255, 255, 255, 0.16)",
+    300: "rgba(255, 255, 255, 0.24)",
+    400: "rgba(255, 255, 255, 0.36)",
+    500: "rgba(255, 255, 255, 0.48)",
+    600: "rgba(255, 255, 255, 0.64)",
+    700: "rgba(255, 255, 255, 0.80)",
+    800: "rgba(255, 255, 255, 0.92)",
+    900: "rgba(255, 255, 255, 1)"
+  },
+  black: {
+    50: "rgba(0, 0, 0, 0.04)",
+    100: "rgba(0, 0, 0, 0.08)",
+    200: "rgba(0, 0, 0, 0.16)",
+    300: "rgba(0, 0, 0, 0.24)",
+    400: "rgba(0, 0, 0, 0.36)",
+    500: "rgba(0, 0, 0, 0.48)",
+    600: "rgba(0, 0, 0, 0.64)",
+    700: "rgba(0, 0, 0, 0.80)",
+    800: "rgba(0, 0, 0, 0.92)",
+    900: "rgba(0, 0, 0, 1)"
+  },
+  rose: {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337"
+  },
+  pink: {
+    50: "#fdf2f8",
+    100: "#fce7f3",
+    200: "#fbcfe8",
+    300: "#f9a8d4",
+    400: "#f472b6",
+    500: "#ec4899",
+    600: "#db2777",
+    700: "#be185d",
+    800: "#9d174d",
+    900: "#831843"
+  },
+  fuchsia: {
+    50: "#fdf4ff",
+    100: "#fae8ff",
+    200: "#f5d0fe",
+    300: "#f0abfc",
+    400: "#e879f9",
+    500: "#d946ef",
+    600: "#c026d3",
+    700: "#a21caf",
+    800: "#86198f",
+    900: "#701a75"
+  },
+  purple: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87"
+  },
+  violet: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95"
+  },
+  indigo: {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81"
+  },
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a"
+  },
+  lightBlue: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e"
+  },
+  cyan: {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+    800: "#155e75",
+    900: "#164e63"
+  },
+  teal: {
+    50: "#f0fdfa",
+    100: "#ccfbf1",
+    200: "#99f6e4",
+    300: "#5eead4",
+    400: "#2dd4bf",
+    500: "#14b8a6",
+    600: "#0d9488",
+    700: "#0f766e",
+    800: "#115e59",
+    900: "#134e4a"
+  },
+  emerald: {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b"
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d"
+  },
+  lime: {
+    50: "#f7fee7",
+    100: "#ecfccb",
+    200: "#d9f99d",
+    300: "#bef264",
+    400: "#a3e635",
+    500: "#84cc16",
+    600: "#65a30d",
+    700: "#4d7c0f",
+    800: "#3f6212",
+    900: "#365314"
+  },
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12"
+  },
+  amber: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f"
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12"
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d"
+  },
+  warmGray: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917"
+  },
+  trueGray: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717"
+  },
+  gray: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b"
+  },
+  dark: {
+    50: "#18181b",
+    100: "#27272a",
+    200: "#3f3f46",
+    300: "#52525b",
+    400: "#71717a",
+    500: "#a1a1aa",
+    600: "#d4d4d8",
+    700: "#e4e4e7",
+    800: "#f4f4f5",
+    900: "#fafafa"
+  },
+  light: {
+    50: "#f8f9fa",
+    100: "#f1f3f5",
+    200: "#e9ecef",
+    300: "#dee2e6",
+    400: "#ced4da",
+    500: "#adb5bd",
+    600: "#868e96",
+    700: "#495057",
+    800: "#343a40",
+    900: "#212529"
+  },
+  coolGray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827"
+  },
+  blueGray: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a"
+  },
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a"
+  },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717"
+  },
+  stone: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917"
+  }
+};
+var defaultDarkPalette = {
+  white: {
+    50: "rgba(0, 0, 0, 0.04)",
+    100: "rgba(0, 0, 0, 0.08)",
+    200: "rgba(0, 0, 0, 0.16)",
+    300: "rgba(0, 0, 0, 0.24)",
+    400: "rgba(0, 0, 0, 0.36)",
+    500: "rgba(0, 0, 0, 0.48)",
+    600: "rgba(0, 0, 0, 0.64)",
+    700: "rgba(0, 0, 0, 0.80)",
+    800: "rgba(0, 0, 0, 0.92)",
+    900: "rgba(0, 0, 0, 1)"
+  },
+  black: {
+    50: "rgba(255, 255, 255, 0.04)",
+    100: "rgba(255, 255, 255, 0.08)",
+    200: "rgba(255, 255, 255, 0.16)",
+    300: "rgba(255, 255, 255, 0.24)",
+    400: "rgba(255, 255, 255, 0.36)",
+    500: "rgba(255, 255, 255, 0.48)",
+    600: "rgba(255, 255, 255, 0.64)",
+    700: "rgba(255, 255, 255, 0.80)",
+    800: "rgba(255, 255, 255, 0.92)",
+    900: "rgba(255, 255, 255, 1)"
+  },
+  rose: {
+    50: "#330517",
+    100: "#4a031e",
+    200: "#6b112f",
+    300: "#9f1239",
+    400: "#c81e5b",
+    500: "#e11d48",
+    600: "#be123c",
+    700: "#9f1239",
+    800: "#7f1235",
+    900: "#581c87"
+  },
+  pink: {
+    50: "#fce7f3",
+    100: "#fbcfe8",
+    200: "#f9a8d4",
+    300: "#f472b6",
+    400: "#ec4899",
+    500: "#db2777",
+    600: "#be185d",
+    700: "#9d174d",
+    800: "#831843",
+    900: "#581c87"
+  },
+  fuchsia: {
+    50: "#c026d3",
+    100: "#a21caf",
+    200: "#86198f",
+    300: "#701a75",
+    400: "#9333ea",
+    500: "#d946ef",
+    600: "#e879f9",
+    700: "#f0abfc",
+    800: "#f5d0fe",
+    900: "#fae8ff"
+  },
+  purple: {
+    50: "#6b21a8",
+    100: "#7e22ce",
+    200: "#9333ea",
+    300: "#a855f7",
+    400: "#c084fc",
+    500: "#d8b4fe",
+    600: "#e9d5ff",
+    700: "#f3e8ff",
+    800: "#faf5ff",
+    900: "#fef4ff"
+  },
+  violet: {
+    50: "#4c1d95",
+    100: "#701a75",
+    200: "#86198f",
+    300: "#a21caf",
+    400: "#c026d3",
+    500: "#d946ef",
+    600: "#e879f9",
+    700: "#f0abfc",
+    800: "#f5d0fe",
+    900: "#fae8ff"
+  },
+  indigo: {
+    50: "#312e81",
+    100: "#3730a3",
+    200: "#1e40af",
+    300: "#1d4ed8",
+    400: "#2563eb",
+    500: "#3b82f6",
+    600: "#60a5fa",
+    700: "#93c5fd",
+    800: "#bfdbfe",
+    900: "#dbeafe"
+  },
+  blue: {
+    50: "#1e3a8a",
+    100: "#1e40af",
+    200: "#1d4ed8",
+    300: "#2563eb",
+    400: "#3b82f6",
+    500: "#60a5fa",
+    600: "#93c5fd",
+    700: "#bfdbfe",
+    800: "#dbeafe",
+    900: "#eff6ff"
+  },
+  lightBlue: {
+    50: "#0c4a6e",
+    100: "#075985",
+    200: "#0369a1",
+    300: "#0284c7",
+    400: "#0ea5e9",
+    500: "#38bdf8",
+    600: "#7dd3fc",
+    700: "#bae6fd",
+    800: "#e0f2fe",
+    900: "#f0f9ff"
+  },
+  cyan: {
+    50: "#164e63",
+    100: "#155e75",
+    200: "#0e7490",
+    300: "#0891b2",
+    400: "#22d3ee",
+    500: "#67e8f9",
+    600: "#a5f3fc",
+    700: "#cffafe",
+    800: "#ecfeff",
+    900: "#f0fefe"
+  },
+  teal: {
+    50: "#134e4a",
+    100: "#166534",
+    200: "#15803d",
+    300: "#16a34a",
+    400: "#22c55e",
+    500: "#4ade80",
+    600: "#5eead4",
+    700: "#99f6e4",
+    800: "#ccfbf1",
+    900: "#f0fdfa"
+  },
+  emerald: {
+    50: "#064e3b",
+    100: "#065f46",
+    200: "#047857",
+    300: "#059669",
+    400: "#10b981",
+    500: "#34d399",
+    600: "#6ee7b7",
+    700: "#a7f3d0",
+    800: "#d1fae5",
+    900: "#ecfdf5"
+  },
+  green: {
+    50: "#14532d",
+    100: "#166534",
+    200: "#15803d",
+    300: "#16a34a",
+    400: "#22c55e",
+    500: "#4ade80",
+    600: "#86efac",
+    700: "#bbf7d0",
+    800: "#dcfce7",
+    900: "#f0fdf4"
+  },
+  lime: {
+    50: "#365314",
+    100: "#3f6212",
+    200: "#4d7c0f",
+    300: "#65a30d",
+    400: "#84cc16",
+    500: "#a3e635",
+    600: "#bef264",
+    700: "#d9f99d",
+    800: "#ecfccb",
+    900: "#f7fee7"
+  },
+  yellow: {
+    50: "#713f12",
+    100: "#854d0e",
+    200: "#a16207",
+    300: "#ca8a04",
+    400: "#eab308",
+    500: "#facc15",
+    600: "#fde047",
+    700: "#fef08a",
+    800: "#fef9c3",
+    900: "#fefce8"
+  },
+  amber: {
+    50: "#78350f",
+    100: "#92400e",
+    200: "#b45309",
+    300: "#d97706",
+    400: "#f59e0b",
+    500: "#fbbf24",
+    600: "#fcd34d",
+    700: "#fde68a",
+    800: "#fef3c7",
+    900: "#fffbeb"
+  },
+  orange: {
+    50: "#7c2d12",
+    100: "#9a3412",
+    200: "#c2410c",
+    300: "#ea580c",
+    400: "#f97316",
+    500: "#fb923c",
+    600: "#fdba74",
+    700: "#fed7aa",
+    800: "#ffedd5",
+    900: "#fff7ed"
+  },
+  red: {
+    50: "#7f1d1d",
+    100: "#991b1b",
+    200: "#b91c1c",
+    300: "#dc2626",
+    400: "#ef4444",
+    500: "#f87171",
+    600: "#fca5a5",
+    700: "#fecaca",
+    800: "#fee2e2",
+    900: "#fef2f2"
+  },
+  warmGray: {
+    50: "#1c1917",
+    100: "#292524",
+    200: "#44403c",
+    300: "#57534e",
+    400: "#78716c",
+    500: "#a8a29e",
+    600: "#d6d3d1",
+    700: "#e7e5e4",
+    800: "#f5f5f4",
+    900: "#fafaf9"
+  },
+  trueGray: {
+    50: "#171717",
+    100: "#262626",
+    200: "#404040",
+    300: "#525252",
+    400: "#737373",
+    500: "#a3a3a3",
+    600: "#d4d4d4",
+    700: "#e5e5e5",
+    800: "#f5f5f5",
+    900: "#fafafa"
+  },
+  gray: {
+    50: "#18181b",
+    100: "#27272a",
+    200: "#3f3f46",
+    300: "#52525b",
+    400: "#71717a",
+    500: "#a1a1aa",
+    600: "#d4d4d8",
+    700: "#e4e4e7",
+    800: "#f4f4f5",
+    900: "#fafafa"
+  },
+  dark: {
+    50: "#212529",
+    100: "#343a40",
+    200: "#495057",
+    300: "#868e96",
+    400: "#adb5bd",
+    500: "#ced4da",
+    600: "#dee2e6",
+    700: "#f1f3f5",
+    800: "#f8f9fa",
+    900: "#ffffff"
+  },
+  light: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b"
+  },
+  coolGray: {
+    50: "#111827",
+    100: "#1f2937",
+    200: "#374151",
+    300: "#4b5563",
+    400: "#6b7280",
+    500: "#9ca3af",
+    600: "#d1d5db",
+    700: "#e5e7eb",
+    800: "#f3f4f6",
+    900: "#f9fafb"
+  },
+  blueGray: {
+    50: "#0f172a",
+    100: "#1e293b",
+    200: "#334155",
+    300: "#475569",
+    400: "#64748b",
+    500: "#94a3b8",
+    600: "#cbd5e1",
+    700: "#e2e8f0",
+    800: "#f1f5f9",
+    900: "#f8fafc"
+  },
+  slate: {
+    50: "#0f172a",
+    100: "#1e293b",
+    200: "#334155",
+    300: "#475569",
+    400: "#64748b",
+    500: "#94a3b8",
+    600: "#cbd5e1",
+    700: "#e2e8f0",
+    800: "#f1f5f9",
+    900: "#f8fafc"
+  },
+  zinc: {
+    50: "#18181b",
+    100: "#27272a",
+    200: "#3f3f46",
+    300: "#52525b",
+    400: "#71717a",
+    500: "#a1a1aa",
+    600: "#d4d4d8",
+    700: "#e4e4e7",
+    800: "#f4f4f5",
+    900: "#fafafa"
+  },
+  neutral: {
+    50: "#171717",
+    100: "#262626",
+    200: "#404040",
+    300: "#525252",
+    400: "#737373",
+    500: "#a3a3a3",
+    600: "#d4d4d4",
+    700: "#e5e5e5",
+    800: "#f5f5f5",
+    900: "#fafafa"
+  },
+  stone: {
+    50: "#1c1917",
+    100: "#292524",
+    200: "#44403c",
+    300: "#57534e",
+    400: "#78716c",
+    500: "#a8a29e",
+    600: "#d6d3d1",
+    700: "#e7e5e4",
+    800: "#f5f5f4",
+    900: "#fafaf9"
+  }
+};
+var defaultColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  red: "#FF0000",
+  green: "#00FF00",
+  blue: "#0000FF",
+  yellow: "#FFFF00",
+  cyan: "#00FFFF",
+  magenta: "#FF00FF",
+  grey: "#808080",
+  orange: "#FFA500",
+  brown: "#A52A2A",
+  purple: "#800080",
+  pink: "#FFC0CB"
+};
+var defaultLightColors = { ...defaultColors };
+var defaultDarkColors = {
+  ...defaultColors,
+  white: "#000000",
+  black: "#FFFFFF"
+};
+var COLOR_TOKEN_REGEX = /(color-[a-zA-Z0-9-]+|theme-[a-zA-Z0-9-]+)/g;
+var hasColorToken = (value) => {
+  return value.includes("color-") || value.includes("theme-");
+};
+var replaceColorTokens = (value, resolver) => {
+  if (!hasColorToken(value)) {
+    return value;
+  }
+  return value.replace(COLOR_TOKEN_REGEX, (token) => {
+    return resolver(token);
+  });
+};
+
+// src/shared/theme.ts
+var COLOR_PREFIX = "color-";
+var THEME_PREFIX = "theme-";
+var LIGHT_PREFIX = "light-";
+var DARK_PREFIX = "dark-";
+var TRANSPARENT = "transparent";
+var defaultThemeMain = {
+  primary: "color-black",
+  secondary: "color-blue",
+  success: "color-green-500",
+  error: "color-red-500",
+  warning: "color-orange-500",
+  disabled: "color-gray-500",
+  loading: "color-dark-500"
+};
+var defaultThemeColors = {
+  light: {
+    main: defaultLightColors,
+    palette: defaultLightPalette
+  },
+  dark: {
+    main: defaultDarkColors,
+    palette: defaultDarkPalette
+  }
+};
+function deepMerge(target, source) {
+  if (!source) return target;
+  const output = { ...target };
+  Object.keys(source).forEach((key) => {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      output[key] = deepMerge(targetValue, sourceValue);
+    } else if (sourceValue !== void 0) {
+      output[key] = sourceValue;
+    }
+  });
+  return output;
+}
+function applyAlpha(color, alpha) {
+  const normalized = Math.max(0, Math.min(1e3, alpha)) / 1e3;
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length >= 6) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${normalized})`;
+    }
+  }
+  if (color.startsWith("rgb")) {
+    const rgbMatch = color.match(/rgba?\(([^)]+)\)/);
+    if (rgbMatch) {
+      const values = rgbMatch[1].split(",").map((value) => value.trim());
+      return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${normalized})`;
+    }
+  }
+  return color;
+}
+function resolveThemeColor(token, options, depth = 0) {
+  if (!token || typeof token !== "string") return String(token);
+  if (token === TRANSPARENT) return token;
+  if (depth > 25) return token;
+  if (token.startsWith(THEME_PREFIX)) {
+    const parts = token.substring(THEME_PREFIX.length).split("-");
+    const lastPart = parts[parts.length - 1];
+    const maybeAlpha = parseInt(lastPart, 10);
+    const hasAlpha = parts.length >= 2 && !isNaN(maybeAlpha) && maybeAlpha >= 0 && maybeAlpha <= 1e3;
+    const themeKey = hasAlpha ? parts.slice(0, -1).join("-") : parts.join("-");
+    const themeValue = options.theme[themeKey];
+    if (typeof themeValue !== "string") return token;
+    const resolved = resolveThemeColor(themeValue, options, depth + 1);
+    return hasAlpha ? applyAlpha(resolved, maybeAlpha) : resolved;
+  }
+  if (token.startsWith(COLOR_PREFIX)) {
+    const parts = token.substring(COLOR_PREFIX.length).split("-");
+    const colors = options.colors[options.themeMode];
+    if (parts.length >= 3) {
+      const maybeAlpha = parseInt(parts[parts.length - 1], 10);
+      if (!isNaN(maybeAlpha) && maybeAlpha >= 0 && maybeAlpha <= 1e3) {
+        const colorName = parts[0];
+        const shade = Number(parts[1]);
+        const value = colors.palette[colorName]?.[shade];
+        return typeof value === "string" ? applyAlpha(value, maybeAlpha) : token;
+      }
+    }
+    if (parts.length === 2) {
+      const value = colors.palette[parts[0]]?.[Number(parts[1])];
+      return typeof value === "string" ? value : token;
+    }
+    if (parts.length === 1) {
+      const value = colors.main[parts[0]];
+      return typeof value === "string" ? value : token;
+    }
+    return token;
+  }
+  if (token.startsWith(LIGHT_PREFIX) || token.startsWith(DARK_PREFIX)) {
+    const themeMode = token.startsWith(LIGHT_PREFIX) ? "light" : "dark";
+    const prefix = token.startsWith(LIGHT_PREFIX) ? LIGHT_PREFIX : DARK_PREFIX;
+    return resolveThemeColor(
+      `${COLOR_PREFIX}${token.substring(prefix.length)}`,
+      { ...options, themeMode },
+      depth + 1
+    );
+  }
+  return token;
+}
+function normalizeHex(color) {
+  if (!color || typeof color !== "string") return String(color);
+  if (color === TRANSPARENT) return "#00000000";
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      return `#${hex.split("").map((char) => char + char).join("")}`.toLowerCase();
+    }
+    return color.toLowerCase();
+  }
+  const rgbMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (!rgbMatch) return color;
+  const values = rgbMatch[1].split(",").map((value) => Number(value.trim()));
+  if (values.length < 3 || values.some((value) => Number.isNaN(value))) {
+    return color;
+  }
+  const [r, g, b] = values;
+  return `#${[r, g, b].map(
+    (value) => Math.max(0, Math.min(255, Math.round(value))).toString(16).padStart(2, "0")
+  ).join("")}`;
+}
+
+// src/native/providers/Theme.tsx
+var defaultContext = {
+  getColor: (name) => name,
+  getColorHex: (name) => name,
+  getColorRGBA: (name) => name,
+  getColorScheme: () => void 0,
+  getContrastColor: () => "black",
+  theme: defaultThemeMain,
+  colors: defaultThemeColors.light,
+  themeMode: "light",
+  setThemeMode: () => {
+  }
+};
+var ThemeContext = createContext2(defaultContext);
+var useTheme = () => useContext2(ThemeContext);
+function toRgba(color, alpha) {
+  if (typeof alpha !== "number") return color;
+  const normalized = Math.max(0, Math.min(1e3, alpha)) / 1e3;
+  const hex = normalizeHex(color);
+  if (!hex.startsWith("#") || hex.length < 7) return color;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${normalized})`;
+}
+function contrastColor(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized.startsWith("#") || normalized.length < 7) return "black";
+  const r = parseInt(normalized.slice(1, 3), 16);
+  const g = parseInt(normalized.slice(3, 5), 16);
+  const b = parseInt(normalized.slice(5, 7), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.58 ? "black" : "white";
+}
+var ThemeProvider = ({
+  colors,
+  lightColors,
+  darkColors,
+  theme,
+  initialMode = "light",
+  children
+}) => {
+  const [themeMode, setThemeMode] = useState(initialMode);
+  const mergedTheme = useMemo2(
+    () => deepMerge(defaultThemeMain, theme),
+    [theme]
+  );
+  const mergedColors = useMemo2(
+    () => ({
+      light: deepMerge(
+        defaultThemeColors.light,
+        deepMerge(colors || {}, lightColors || {})
+      ),
+      dark: deepMerge(
+        defaultThemeColors.dark,
+        deepMerge(colors || {}, darkColors || {})
+      )
+    }),
+    [colors, lightColors, darkColors]
+  );
+  const getColor = useCallback(
+    (name) => resolveThemeColor(name, {
+      colors: mergedColors,
+      theme: mergedTheme,
+      themeMode
+    }),
+    [mergedColors, mergedTheme, themeMode]
+  );
+  const getColorHex = useCallback(
+    (name) => normalizeHex(getColor(name)),
+    [getColor]
+  );
+  const getColorRGBA = useCallback(
+    (name, alpha) => toRgba(getColor(name), alpha),
+    [getColor]
+  );
+  const getColorScheme = useCallback((name) => {
+    if (name.startsWith("theme-")) return name.slice("theme-".length);
+    if (name.startsWith("color-")) return name.split("-")[1];
+    return void 0;
+  }, []);
+  const getContrastColor = useCallback(
+    (name) => contrastColor(getColorHex(name)),
+    [getColorHex]
+  );
+  const value = useMemo2(
+    () => ({
+      getColor,
+      getColorHex,
+      getColorRGBA,
+      getColorScheme,
+      getContrastColor,
+      theme: mergedTheme,
+      colors: mergedColors[themeMode],
+      themeMode,
+      setThemeMode
+    }),
+    [
+      getColor,
+      getColorHex,
+      getColorRGBA,
+      getColorScheme,
+      getContrastColor,
+      mergedTheme,
+      mergedColors,
+      themeMode
+    ]
+  );
+  return /* @__PURE__ */ React2.createElement(ThemeContext.Provider, { value }, children);
+};
+
+// src/native/style.ts
+var stylePropNames = /* @__PURE__ */ new Set([
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "aspectRatio",
+  "backfaceVisibility",
+  "backgroundColor",
+  "borderBottomColor",
+  "borderBottomEndRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderBottomStartRadius",
+  "borderBottomWidth",
+  "borderColor",
+  "borderCurve",
+  "borderEndColor",
+  "borderEndWidth",
+  "borderLeftColor",
+  "borderLeftWidth",
+  "borderRadius",
+  "borderRightColor",
+  "borderRightWidth",
+  "borderStartColor",
+  "borderStartWidth",
+  "borderStyle",
+  "borderTopColor",
+  "borderTopEndRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderTopStartRadius",
+  "borderTopWidth",
+  "borderWidth",
+  "bottom",
+  "boxShadow",
+  "color",
+  "columnGap",
+  "direction",
+  "display",
+  "elevation",
+  "end",
+  "flex",
+  "flexBasis",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "gap",
+  "height",
+  "includeFontPadding",
+  "justifyContent",
+  "left",
+  "letterSpacing",
+  "lineHeight",
+  "margin",
+  "marginBottom",
+  "marginEnd",
+  "marginHorizontal",
+  "marginLeft",
+  "marginRight",
+  "marginStart",
+  "marginTop",
+  "marginVertical",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "objectFit",
+  "opacity",
+  "overflow",
+  "overlayColor",
+  "padding",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  "position",
+  "resizeMode",
+  "right",
+  "rowGap",
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "start",
+  "textAlign",
+  "textAlignVertical",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  "textTransform",
+  "tintColor",
+  "top",
+  "transform",
+  "transformOrigin",
+  "verticalAlign",
+  "width",
+  "writingDirection",
+  "zIndex"
+]);
+var controlProps = /* @__PURE__ */ new Set([
+  "children",
+  "style",
+  "css",
+  "media",
+  "on",
+  "onPress",
+  "onClick",
+  "className",
+  "as",
+  "animate",
+  "animateIn",
+  "animateOut",
+  "animateOn",
+  "blend",
+  "before",
+  "after",
+  "theme",
+  "widthHeight",
+  "shadow"
+]);
+var webOnlyProps = /* @__PURE__ */ new Set([
+  "_hover",
+  "_active",
+  "_focus",
+  "_visited",
+  "_disabled",
+  "_enabled",
+  "_checked",
+  "_unchecked",
+  "_invalid",
+  "_valid",
+  "_required",
+  "_optional",
+  "_selected",
+  "_target",
+  "_firstChild",
+  "_lastChild",
+  "_onlyChild",
+  "_firstOfType",
+  "_lastOfType",
+  "_empty",
+  "_focusVisible",
+  "_focusWithin",
+  "_placeholder",
+  "_groupHover",
+  "_groupFocus",
+  "_groupActive",
+  "_groupDisabled",
+  "_peerHover",
+  "_peerFocus",
+  "_peerActive",
+  "_peerDisabled",
+  "_peerChecked",
+  "_before",
+  "_after",
+  "_firstLetter",
+  "_firstLine",
+  "_selection",
+  "_backdrop",
+  "_marker"
+]);
+function isColorStyle(property) {
+  return property === "color" || property.toLowerCase().includes("color");
+}
+function normalizeValue(property, value, getColor) {
+  if (typeof value === "string" && isColorStyle(property)) {
+    return getColor(value);
+  }
+  return value;
+}
+function applyShadow(style, value) {
+  if (!value) return;
+  const opacity = typeof value === "number" ? value : 0.2;
+  style.shadowColor = "#000000";
+  style.shadowOpacity = opacity;
+  style.shadowRadius = 4;
+  style.shadowOffset = { width: 0, height: 1 };
+  style.elevation = Math.max(1, Math.round(opacity * 25));
+}
+function appendStyleProps(input, output, getColor) {
+  if (!input) return;
+  Object.keys(input).forEach((property) => {
+    const value = input[property];
+    if (value === void 0 || value === null || value === "") return;
+    if (property === "widthHeight") {
+      output.width = value;
+      output.height = value;
+      return;
+    }
+    if (property === "shadow") {
+      applyShadow(output, value);
+      return;
+    }
+    if (stylePropNames.has(property)) {
+      output[property] = normalizeValue(property, value, getColor);
+    }
+  });
+}
+function matchesMedia(target, width, breakpoints, devices) {
+  const ordered = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
+  const breakpoint = ordered.find(([, min]) => width >= min)?.[0] || "xs";
+  if (target === breakpoint) return true;
+  if (devices[target]?.includes(breakpoint)) return true;
+  return false;
+}
+function splitNativeProps(props) {
+  const nativeProps = {};
+  Object.keys(props).forEach((key) => {
+    if (controlProps.has(key) || stylePropNames.has(key) || webOnlyProps.has(key)) {
+      return;
+    }
+    if (key === "data-testid") {
+      nativeProps.testID = props[key];
+      return;
+    }
+    if (key === "aria-label") {
+      nativeProps.accessibilityLabel = props[key];
+      return;
+    }
+    nativeProps[key] = props[key];
+  });
+  return nativeProps;
+}
+function useNativeStyle(props) {
+  const { getColor, theme } = useTheme();
+  const responsive = useResponsiveContext();
+  const dimensions = useWindowDimensions();
+  const scopedGetColor = useMemo3(() => {
+    if (!props.theme) return getColor;
+    return (token) => {
+      if (!token.startsWith("theme-")) return getColor(token);
+      const themeKey = token.slice("theme-".length).split("-")[0];
+      const override = props.theme?.[themeKey];
+      return override ? getColor(override) : getColor(token);
+    };
+  }, [getColor, props.theme]);
+  const style = useMemo3(() => {
+    const next = {};
+    appendStyleProps(props, next, scopedGetColor);
+    if (props.media) {
+      Object.keys(props.media).forEach((target) => {
+        if (matchesMedia(
+          target,
+          dimensions.width || responsive.currentWidth,
+          responsive.breakpoints,
+          responsive.devices
+        )) {
+          appendStyleProps(props.media?.[target], next, scopedGetColor);
+        }
+      });
+    }
+    if (props.css && typeof props.css === "object") {
+      appendStyleProps(props.css, next, scopedGetColor);
+    }
+    const flattened = StyleSheet.flatten(props.style) || {};
+    return { ...next, ...flattened };
+  }, [
+    props,
+    scopedGetColor,
+    dimensions.width,
+    responsive.currentWidth,
+    responsive.breakpoints,
+    responsive.devices,
+    theme
+  ]);
+  return style;
+}
+
+// src/native/components.tsx
+function renderChildren(children, textProps) {
+  if (!textProps?.toUpperCase) return children;
+  return React3.Children.map(
+    children,
+    (child) => typeof child === "string" ? child.toUpperCase() : child
+  );
+}
+function sourceFromProps({ source, src }) {
+  if (source) return source;
+  if (src) return { uri: src };
+  return void 0;
+}
+var Element = React3.forwardRef((props, ref) => {
+  const style = useNativeStyle(props);
+  const nativeProps = splitNativeProps(props);
+  const onPress = props.onPress || props.onClick;
+  const Component = onPress ? Pressable : RNView;
+  return /* @__PURE__ */ React3.createElement(Component, { ...nativeProps, ref, onPress, style }, props.before, props.children, props.after);
+});
+Element.displayName = "Element";
+var View = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(Element, { ...props, ref }));
+View.displayName = "View";
+var Horizontal = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(Element, { flexDirection: "row", ...props, ref }));
+Horizontal.displayName = "Horizontal";
+var Vertical = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(Element, { flexDirection: "column", ...props, ref }));
+Vertical.displayName = "Vertical";
+var Center = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(Element, { justifyContent: "center", alignItems: "center", ...props, ref }));
+Center.displayName = "Center";
+var HorizontalResponsive = React3.forwardRef(
+  ({ media = {}, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+    Horizontal,
+    {
+      media: {
+        ...media,
+        mobile: {
+          ...media.mobile,
+          flexDirection: "column"
+        }
+      },
+      ...props,
+      ref
+    }
+  )
+);
+HorizontalResponsive.displayName = "HorizontalResponsive";
+var VerticalResponsive = React3.forwardRef(
+  ({ media = {}, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+    Vertical,
+    {
+      media: {
+        ...media,
+        mobile: {
+          ...media.mobile,
+          flexDirection: "row"
+        }
+      },
+      ...props,
+      ref
+    }
+  )
+);
+VerticalResponsive.displayName = "VerticalResponsive";
+var Scroll = React3.forwardRef((props, ref) => {
+  const style = useNativeStyle(props);
+  const nativeProps = splitNativeProps(props);
+  return /* @__PURE__ */ React3.createElement(RNScrollView, { ...nativeProps, ref, style }, props.children);
+});
+Scroll.displayName = "Scroll";
+var SafeArea = React3.forwardRef((props, ref) => {
+  const style = useNativeStyle(props);
+  const nativeProps = splitNativeProps(props);
+  return /* @__PURE__ */ React3.createElement(SafeAreaView, { ...nativeProps, ref, style }, props.children);
+});
+SafeArea.displayName = "SafeArea";
+var Div = View;
+var Span = View;
+var Text = React3.forwardRef(
+  ({
+    children,
+    toUpperCase,
+    isItalic,
+    isStriked,
+    isUnderlined,
+    isSub,
+    isSup,
+    maxLines,
+    ...props
+  }, ref) => {
+    const style = useNativeStyle({
+      ...props,
+      fontStyle: isItalic ? "italic" : props.fontStyle,
+      textDecorationLine: isStriked ? "line-through" : isUnderlined ? "underline" : props.textDecorationLine,
+      fontSize: isSub || isSup ? props.fontSize || 12 : props.fontSize
+    });
+    const nativeProps = splitNativeProps(props);
+    return /* @__PURE__ */ React3.createElement(RNText, { ...nativeProps, ref, numberOfLines: maxLines, style }, renderChildren(children, { toUpperCase }));
+  }
+);
+Text.displayName = "Text";
+var Image = React3.forwardRef((props, ref) => {
+  const style = useNativeStyle(props);
+  const nativeProps = splitNativeProps(props);
+  return /* @__PURE__ */ React3.createElement(
+    RNImage,
+    {
+      ...nativeProps,
+      ref,
+      source: sourceFromProps(props),
+      accessibilityLabel: props.alt || nativeProps.accessibilityLabel,
+      style
+    }
+  );
+});
+Image.displayName = "Image";
+var ImageBackground = React3.forwardRef(
+  (props, ref) => {
+    const style = useNativeStyle(props);
+    const nativeProps = splitNativeProps(props);
+    return /* @__PURE__ */ React3.createElement(
+      RNImageBackground,
+      {
+        ...nativeProps,
+        ref,
+        source: sourceFromProps(props),
+        accessibilityLabel: props.alt || nativeProps.accessibilityLabel,
+        style
+      },
+      props.children
+    );
+  }
+);
+ImageBackground.displayName = "ImageBackground";
+var Form = View;
+var Input = React3.forwardRef((props, ref) => {
+  const style = useNativeStyle(props);
+  const nativeProps = splitNativeProps(props);
+  return /* @__PURE__ */ React3.createElement(TextInput, { ...nativeProps, ref, style });
+});
+Input.displayName = "Input";
+var Button = React3.forwardRef(
+  ({ children, disabled, ...props }, ref) => {
+    const style = useNativeStyle(props);
+    const nativeProps = splitNativeProps(props);
+    const onPress = disabled ? void 0 : props.onPress || props.onClick;
+    return /* @__PURE__ */ React3.createElement(
+      Pressable,
+      {
+        ...nativeProps,
+        ref,
+        accessibilityRole: "button",
+        disabled,
+        onPress,
+        style
+      },
+      typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ React3.createElement(RNText, null, children) : children
+    );
+  }
+);
+Button.displayName = "Button";
+var Skeleton = React3.forwardRef(
+  ({ backgroundColor = "color-gray-200", ...props }, ref) => /* @__PURE__ */ React3.createElement(
+    View,
+    {
+      accessibilityRole: "progressbar",
+      backgroundColor,
+      ...props,
+      ref
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+// src/native/providers/WindowSize.tsx
+import React4, { createContext as createContext3 } from "react";
+import { useWindowDimensions as useRNWindowDimensions2 } from "react-native";
+var WindowSizeContext = createContext3({ width: 0, height: 0 });
+var WindowSizeProvider = ({ children }) => {
+  const { width, height } = useRNWindowDimensions2();
+  return /* @__PURE__ */ React4.createElement(WindowSizeContext.Provider, { value: { width, height } }, children);
+};
+
+// src/native/providers/StyleRegistry.tsx
+import React5 from "react";
+var useStyleRegistry = () => ({ manager: void 0 });
+var StyleRegistry = ({ children }) => /* @__PURE__ */ React5.createElement(React5.Fragment, null, children);
+var createStyleRegistry = () => void 0;
+var useServerInsertedHTML = () => () => null;
+
+// src/providers/Analytics.tsx
+import React6, { createContext as createContext4, useContext as useContext3, useMemo as useMemo4 } from "react";
+var AnalyticsContext = createContext4({});
+var useAnalytics = () => useContext3(AnalyticsContext);
+var AnalyticsProvider = ({
+  trackEvent,
+  children
+}) => {
+  const value = useMemo4(() => ({ trackEvent }), [trackEvent]);
+  return /* @__PURE__ */ React6.createElement(AnalyticsContext.Provider, { value }, children);
+};
+
+// src/native/hooks.ts
+import {
+  useCallback as useCallback2,
+  useContext as useContext4,
+  useEffect,
+  useMemo as useMemo5,
+  useRef,
+  useState as useState2
+} from "react";
+var useWindowSize = () => useContext4(WindowSizeContext);
+var useBreakpoint = () => {
+  const context = useBreakpointContext();
+  const { currentBreakpoint: screen, devices, orientation } = context;
+  const on = useCallback2(
+    (target) => devices[target] ? devices[target].includes(screen) : target === screen,
+    [devices, screen]
+  );
+  return useMemo5(
+    () => ({ ...context, screen, orientation, on, is: on }),
+    [context, screen, orientation, on]
+  );
+};
+var useWindowDimensions2 = () => useWindowDimensionsContext();
+var useResponsive = () => {
+  const context = useResponsiveContext();
+  const { currentBreakpoint: screen, devices, orientation } = context;
+  const on = useCallback2(
+    (target) => devices[target] ? devices[target].includes(screen) : target === screen,
+    [devices, screen]
+  );
+  return useMemo5(
+    () => ({ ...context, screen, orientation, on, is: on }),
+    [context, screen, orientation, on]
+  );
+};
+var useMount = (callback) => {
+  useEffect(() => {
+    callback();
+  }, [callback]);
+};
+var useHover = () => {
+  const [isHovered] = useState2(false);
+  return { isHovered, hoverProps: {} };
+};
+var useActive = () => {
+  const [isActive] = useState2(false);
+  return { isActive, activeProps: {} };
+};
+var useFocus = () => {
+  const [isFocused] = useState2(false);
+  return { isFocused, focusProps: {} };
+};
+var useClickOutside = () => ({ ref: useRef(null), isOutside: false });
+var useElementPosition = () => ({ ref: useRef(null), position: null });
+var useKeyPress = () => false;
+var useOnScreen = () => ({ ref: useRef(null), isOnScreen: true });
+var useInView = () => ({ ref: useRef(null), inView: true });
+var useIframeStyles = () => ({ iframeRef: useRef(null) });
+var useScroll = () => ({
+  scrollY: 0,
+  scrollX: 0,
+  scrollDirection: null,
+  scrollTo: () => {
+  },
+  scrollToTop: () => {
+  },
+  scrollToBottom: () => {
+  }
+});
+
+// src/element/Animation.tsx
+var Animation_exports = {};
+__export(Animation_exports, {
+  backInDown: () => backInDown,
+  backOutUp: () => backOutUp,
+  blinkCursor: () => blinkCursor,
+  bounce: () => bounce,
+  bounceIn: () => bounceIn,
+  bounceOut: () => bounceOut,
+  ctaCollapseScroll: () => ctaCollapseScroll,
+  fadeBlurScroll: () => fadeBlurScroll,
+  fadeIn: () => fadeIn,
+  fadeInDown: () => fadeInDown,
+  fadeInScroll: () => fadeInScroll,
+  fadeInUp: () => fadeInUp,
+  fadeOut: () => fadeOut,
+  fillTextScroll: () => fillTextScroll,
+  flash: () => flash,
+  flip: () => flip,
+  flipInX: () => flipInX,
+  flipInY: () => flipInY,
+  handWaveScroll: () => handWaveScroll,
+  headShake: () => headShake,
+  heartBeat: () => heartBeat,
+  hinge: () => hinge,
+  jackInTheBox: () => jackInTheBox,
+  jello: () => jello,
+  lightSpeedIn: () => lightSpeedIn,
+  lightSpeedOut: () => lightSpeedOut,
+  listItemScaleScroll: () => listItemScaleScroll,
+  progress: () => progress,
+  pulse: () => pulse,
+  rollIn: () => rollIn,
+  rollOut: () => rollOut,
+  rotate: () => rotate,
+  rubberBand: () => rubberBand,
+  scale: () => scale,
+  scaleDownArticleScroll: () => scaleDownArticleScroll,
+  scaleDownScroll: () => scaleDownScroll,
+  shake: () => shake,
+  shimmer: () => shimmer,
+  slideInDown: () => slideInDown,
+  slideInLeft: () => slideInLeft,
+  slideInLeftScroll: () => slideInLeftScroll,
+  slideInRight: () => slideInRight,
+  slideInUp: () => slideInUp,
+  slideOutLeft: () => slideOutLeft,
+  slideOutRight: () => slideOutRight,
+  swing: () => swing,
+  tada: () => tada,
+  typewriter: () => typewriter,
+  unclipScroll: () => unclipScroll,
+  wobble: () => wobble,
+  zoomIn: () => zoomIn,
+  zoomInDown: () => zoomInDown,
+  zoomOut: () => zoomOut,
+  zoomOutUp: () => zoomOutUp
+});
+var fadeIn = ({ duration = "1s", timingFunction = "ease", ...props } = {
+  duration: "1s",
+  timingFunction: "ease"
+}) => ({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+  duration,
+  timingFunction,
+  ...props
+});
+var fadeOut = ({ duration = "1s", timingFunction = "ease", ...props } = {
+  duration: "1s",
+  timingFunction: "ease"
+}) => ({
+  from: { opacity: 1 },
+  to: { opacity: 0 },
+  duration,
+  timingFunction,
+  ...props
+});
+var slideInLeft = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out"
+}) => ({
+  from: { transform: "translateX(-100%)" },
+  to: { transform: "translateX(0)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var slideInRight = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out"
+}) => ({
+  from: { transform: "translateX(100%)" },
+  to: { transform: "translateX(0)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var slideInDown = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out"
+}) => ({
+  from: { transform: "translateY(-100%)" },
+  to: { transform: "translateY(0)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var slideInUp = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out"
+}) => ({
+  from: { transform: "translateY(100%)" },
+  to: { transform: "translateY(0)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var bounce = ({
+  duration = "2s",
+  timingFunction = "ease",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "2s",
+  timingFunction: "ease",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "translateY(0)" },
+  "20%": { transform: "translateY(-30px)" },
+  "40%": { transform: "translateY(0)" },
+  "60%": { transform: "translateY(-15px)" },
+  "80%": { transform: "translateY(0)" },
+  to: { transform: "translateY(0)" },
+  duration,
+  timingFunction,
+  iterationCount,
+  ...props
+});
+var rotate = ({
+  duration = "1s",
+  timingFunction = "linear",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "linear",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+  duration,
+  timingFunction,
+  iterationCount,
+  ...props
+});
+var pulse = ({
+  duration = "1s",
+  timingFunction = "ease-in-out",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "ease-in-out",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "scale(1)" },
+  "50%": { transform: "scale(1.05)" },
+  to: { transform: "scale(1)" },
+  duration,
+  timingFunction,
+  iterationCount,
+  ...props
+});
+var zoomIn = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out"
+}) => ({
+  from: { transform: "scale(0)" },
+  to: { transform: "scale(1)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var zoomOut = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out"
+}) => ({
+  from: { transform: "scale(1)" },
+  to: { transform: "scale(0)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var flash = ({ duration = "1s", iterationCount = "infinite", ...props } = {
+  duration: "1s",
+  iterationCount: "infinite"
+}) => ({
+  from: { opacity: 1 },
+  "50%": { opacity: 0 },
+  to: { opacity: 1 },
+  duration,
+  iterationCount,
+  ...props
+});
+var scale = ({
+  duration = "1s",
+  timingFunction = "ease-in-out",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "ease-in-out",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "scale(1)" },
+  "50%": { transform: "scale(1.05)" },
+  to: { transform: "scale(1)" },
+  duration,
+  timingFunction,
+  iterationCount,
+  ...props
+});
+var shake = ({
+  duration = "0.5s",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "0.5s",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "translateX(0)" },
+  "10%": { transform: "translateX(-10px)" },
+  "20%": { transform: "translateX(10px)" },
+  "30%": { transform: "translateX(-10px)" },
+  "40%": { transform: "translateX(10px)" },
+  "50%": { transform: "translateX(-10px)" },
+  "60%": { transform: "translateX(10px)" },
+  "70%": { transform: "translateX(-10px)" },
+  "80%": { transform: "translateX(10px)" },
+  "90%": { transform: "translateX(-10px)" },
+  to: { transform: "translateX(0)" },
+  duration,
+  iterationCount,
+  ...props
+});
+var swing = ({ duration = "1s", iterationCount = "infinite", ...props } = {
+  duration: "1s",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "rotate(0deg)" },
+  "20%": { transform: "rotate(15deg)" },
+  "40%": { transform: "rotate(-10deg)" },
+  "60%": { transform: "rotate(5deg)" },
+  "80%": { transform: "rotate(-5deg)" },
+  to: { transform: "rotate(0deg)" },
+  duration,
+  iterationCount,
+  ...props
+});
+var rubberBand = ({
+  duration = "1s",
+  timingFunction = "ease-in-out",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "ease-in-out"
+}) => ({
+  from: { transform: "scale3d(1, 1, 1)" },
+  "30%": { transform: "scale3d(1.25, 0.75, 1)" },
+  "40%": { transform: "scale3d(0.75, 1.25, 1)" },
+  "50%": { transform: "scale3d(1.15, 0.85, 1)" },
+  "65%": { transform: "scale3d(0.95, 1.05, 1)" },
+  "75%": { transform: "scale3d(1.05, 0.95, 1)" },
+  to: { transform: "scale3d(1, 1, 1)" },
+  duration,
+  timingFunction,
+  ...props
+});
+var wobble = ({ duration = "1s", ...props } = {
+  duration: "1s"
+}) => ({
+  from: { transform: "translateX(0%)" },
+  "15%": { transform: "translateX(-25%) rotate(-5deg)" },
+  "30%": { transform: "translateX(20%) rotate(3deg)" },
+  "45%": { transform: "translateX(-15%) rotate(-3deg)" },
+  "60%": { transform: "translateX(10%) rotate(2deg)" },
+  "75%": { transform: "translateX(-5%) rotate(-1deg)" },
+  to: { transform: "translateX(0%)" },
+  duration,
+  ...props
+});
+var flip = ({ duration = "1s", ...props } = {
+  duration: "1s"
+}) => ({
+  from: {
+    transform: "perspective(400px) rotateY(0deg)"
+  },
+  "40%": {
+    transform: "perspective(400px) rotateY(-180deg)"
+  },
+  to: {
+    transform: "perspective(400px) rotateY(-360deg)"
+  },
+  duration,
+  ...props
+});
+var heartBeat = ({
+  duration = "1.3s",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "1.3s",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "scale(1)" },
+  "14%": { transform: "scale(1.3)" },
+  "28%": { transform: "scale(1)" },
+  "42%": { transform: "scale(1.3)" },
+  "70%": { transform: "scale(1)" },
+  to: { transform: "scale(1)" },
+  duration,
+  iterationCount,
+  ...props
+});
+var rollIn = ({ duration = "1s", ...props } = {
+  duration: "1s"
+}) => ({
+  from: {
+    opacity: 0,
+    transform: "translateX(-100%) rotate(-120deg)"
+  },
+  to: {
+    opacity: 1,
+    transform: "translateX(0px) rotate(0deg)"
+  },
+  duration,
+  ...props
+});
+var rollOut = ({ duration = "1s", ...props } = {
+  duration: "1s"
+}) => ({
+  from: {
+    opacity: 1,
+    transform: "translateX(0px) rotate(0deg)"
+  },
+  to: {
+    opacity: 0,
+    transform: "translateX(100%) rotate(120deg)"
+  },
+  duration,
+  ...props
+});
+var lightSpeedIn = ({ duration = "1s", timingFunction = "ease-out", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-out"
+}) => ({
+  from: {
+    transform: "translateX(100%) skewX(-30deg)",
+    opacity: 0
+  },
+  "60%": {
+    transform: "skewX(20deg)",
+    opacity: 1
+  },
+  "80%": {
+    transform: "skewX(-5deg)"
+  },
+  to: {
+    transform: "translateX(0)",
+    opacity: 1
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var lightSpeedOut = ({ duration = "1s", timingFunction = "ease-in", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    opacity: 1
+  },
+  "20%": {
+    opacity: 1,
+    transform: "translateX(-20%) skewX(20deg)"
+  },
+  to: {
+    opacity: 0,
+    transform: "translateX(-100%) skewX(30deg)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var hinge = ({
+  duration = "2s",
+  timingFunction = "ease-in-out",
+  ...props
+} = {
+  duration: "2s",
+  timingFunction: "ease-in-out"
+}) => ({
+  from: {
+    transform: "rotate(0deg)",
+    transformOrigin: "top left",
+    opacity: 1
+  },
+  "20%": {
+    transform: "rotate(80deg)",
+    opacity: 1
+  },
+  "40%": {
+    transform: "rotate(60deg)",
+    opacity: 1
+  },
+  "60%": {
+    transform: "rotate(80deg)",
+    opacity: 1
+  },
+  "80%": {
+    transform: "rotate(60deg)",
+    opacity: 1
+  },
+  to: {
+    transform: "translateY(700px)",
+    opacity: 0
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var jackInTheBox = ({ duration = "1s", timingFunction = "ease", ...props } = {
+  duration: "1s",
+  timingFunction: "ease"
+}) => ({
+  from: {
+    opacity: 0,
+    transform: "scale(0.1) rotate(30deg)",
+    transformOrigin: "center bottom"
+  },
+  "50%": {
+    transform: "rotate(-10deg)"
+  },
+  "70%": {
+    transform: "rotate(3deg)"
+  },
+  to: {
+    opacity: 1,
+    transform: "scale(1) rotate(0deg)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var flipInX = ({ duration = "1s", timingFunction = "ease-in", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    transform: "perspective(400px) rotateX(90deg)",
+    opacity: 0
+  },
+  "40%": {
+    transform: "perspective(400px) rotateX(-10deg)",
+    opacity: 1
+  },
+  to: {
+    transform: "perspective(400px) rotateX(0deg)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var flipInY = ({ duration = "1s", timingFunction = "ease-in", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    transform: "perspective(400px) rotateY(90deg)",
+    opacity: 0
+  },
+  "40%": {
+    transform: "perspective(400px) rotateY(-10deg)",
+    opacity: 1
+  },
+  to: {
+    transform: "perspective(400px) rotateY(0deg)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var headShake = ({ duration = "1s", iterationCount = "infinite", ...props } = {
+  duration: "1s",
+  iterationCount: "infinite"
+}) => ({
+  from: {
+    transform: "translateX(0)"
+  },
+  "6.5%": {
+    transform: "translateX(-6px) rotateY(-9deg)"
+  },
+  "18.5%": {
+    transform: "translateX(5px) rotateY(7deg)"
+  },
+  "31.5%": {
+    transform: "translateX(-3px) rotateY(-5deg)"
+  },
+  "43.5%": {
+    transform: "translateX(2px) rotateY(3deg)"
+  },
+  "50%": {
+    transform: "translateX(0)"
+  },
+  duration,
+  iterationCount,
+  ...props
+});
+var tada = ({ duration = "1s", iterationCount = "infinite", ...props } = {
+  duration: "1s",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "scale3d(1, 1, 1)", opacity: 1 },
+  "10%, 20%": {
+    transform: "scale3d(0.9, 0.9, 0.9) rotate(-3deg)"
+  },
+  "30%, 50%, 70%, 90%": {
+    transform: "scale3d(1.1, 1.1, 1.1) rotate(3deg)"
+  },
+  "40%, 60%, 80%": {
+    transform: "scale3d(1.1, 1.1, 1.1) rotate(-3deg)"
+  },
+  to: { transform: "scale3d(1, 1, 1)", opacity: 1 },
+  duration,
+  iterationCount,
+  ...props
+});
+var jello = ({ duration = "1s", iterationCount = "infinite", ...props } = {
+  duration: "1s",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "none" },
+  "11.1%": { transform: "skewX(-12.5deg) skewY(-12.5deg)" },
+  "22.2%": { transform: "skewX(6.25deg) skewY(6.25deg)" },
+  "33.3%": { transform: "skewX(-3.125deg) skewY(-3.125deg)" },
+  "44.4%": { transform: "skewX(1.5625deg) skewY(1.5625deg)" },
+  "55.5%": { transform: "skewX(-0.78125deg) skewY(-0.78125deg)" },
+  "66.6%": { transform: "skewX(0.390625deg) skewY(0.390625deg)" },
+  "77.7%": { transform: "skewX(-0.1953125deg) skewY(-0.1953125deg)" },
+  "88.8%": { transform: "skewX(0.09765625deg) skewY(0.09765625deg)" },
+  to: { transform: "none" },
+  duration,
+  iterationCount,
+  ...props
+});
+var fadeInDown = ({ duration = "1s", timingFunction = "ease-out", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-out"
+}) => ({
+  from: {
+    opacity: 0,
+    transform: "translateY(-100%)"
+  },
+  to: {
+    opacity: 1,
+    transform: "translateY(0)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var fadeInUp = ({ duration = "1s", timingFunction = "ease-out", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-out"
+}) => ({
+  from: {
+    opacity: 0,
+    transform: "translateY(100%)"
+  },
+  to: {
+    opacity: 1,
+    transform: "translateY(0)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var bounceIn = ({
+  duration = "0.75s",
+  timingFunction = "ease-in",
+  ...props
+} = {
+  duration: "0.75s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    opacity: 0,
+    transform: "scale(0.3)"
+  },
+  "50%": {
+    opacity: 1,
+    transform: "scale(1.05)"
+  },
+  "70%": {
+    transform: "scale(0.9)"
+  },
+  to: {
+    transform: "scale(1)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var bounceOut = ({
+  duration = "0.75s",
+  timingFunction = "ease-out",
+  ...props
+} = {
+  duration: "0.75s",
+  timingFunction: "ease-out"
+}) => ({
+  from: {
+    transform: "scale(1)"
+  },
+  "20%": {
+    transform: "scale(0.9)"
+  },
+  "50%, 55%": {
+    opacity: 1,
+    transform: "scale(1.1)"
+  },
+  to: {
+    opacity: 0,
+    transform: "scale(0.3)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var slideOutLeft = ({
+  duration = "0.5s",
+  timingFunction = "ease-in",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    transform: "translateX(0)"
+  },
+  to: {
+    transform: "translateX(-100%)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var slideOutRight = ({
+  duration = "0.5s",
+  timingFunction = "ease-in",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    transform: "translateX(0)"
+  },
+  to: {
+    transform: "translateX(100%)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var zoomInDown = ({ duration = "1s", timingFunction = "ease-out", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-out"
+}) => ({
+  from: {
+    opacity: 0,
+    transform: "scale(0.1) translateY(-1000px)"
+  },
+  "60%": {
+    opacity: 1,
+    transform: "scale(0.475) translateY(60px)"
+  },
+  to: {
+    transform: "scale(1) translateY(0)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var zoomOutUp = ({ duration = "1s", timingFunction = "ease-in", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    opacity: 1,
+    transform: "scale(1) translateY(0)"
+  },
+  "40%": {
+    opacity: 1,
+    transform: "scale(0.475) translateY(-60px)"
+  },
+  to: {
+    opacity: 0,
+    transform: "scale(0.1) translateY(-1000px)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var backInDown = ({ duration = "1s", timingFunction = "ease-in", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    opacity: 0.7,
+    transform: "translateY(-2000px) scaleY(2.5) scaleX(0.2)"
+  },
+  to: {
+    opacity: 1,
+    transform: "translateY(0) scaleY(1) scaleX(1)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var backOutUp = ({ duration = "1s", timingFunction = "ease-in", ...props } = {
+  duration: "1s",
+  timingFunction: "ease-in"
+}) => ({
+  from: {
+    opacity: 1,
+    transform: "translateY(0)"
+  },
+  "80%": {
+    opacity: 0.7,
+    transform: "translateY(-20px)"
+  },
+  to: {
+    opacity: 0,
+    transform: "translateY(-2000px)"
+  },
+  duration,
+  timingFunction,
+  ...props
+});
+var shimmer = ({
+  duration = "2s",
+  timingFunction = "linear",
+  iterationCount = "infinite",
+  ...props
+} = {
+  duration: "2s",
+  timingFunction: "linear",
+  iterationCount: "infinite"
+}) => ({
+  from: { transform: "translateX(-100%)" },
+  "50%": { transform: "translateX(100%)" },
+  to: { transform: "translateX(100%)" },
+  duration,
+  timingFunction,
+  iterationCount,
+  ...props
+});
+var progress = ({
+  duration = "2s",
+  timingFunction = "linear",
+  direction = "forwards",
+  from = { width: "0%" },
+  to = { width: "100%" },
+  ...props
+} = {
+  duration: "2s",
+  timingFunction: "linear",
+  direction: "forwards",
+  from: { width: "0%" },
+  to: { width: "100%" }
+}) => ({
+  from,
+  to,
+  duration,
+  timingFunction,
+  direction,
+  ...props
+});
+var typewriter = ({
+  duration = "10s",
+  steps = 10,
+  iterationCount = 1,
+  width = 0,
+  ...props
+} = {
+  duration: "10s",
+  steps: 10,
+  iterationCount: 1,
+  width: 0
+}) => ({
+  from: { width: "0px" },
+  to: { width: `${width}px` },
+  timingFunction: `steps(${steps})`,
+  duration,
+  iterationCount,
+  ...props
+});
+var blinkCursor = ({
+  duration = "0.75s",
+  timingFunction = "step-end",
+  iterationCount = "infinite",
+  color = "black",
+  ...props
+} = {
+  duration: "0.75s",
+  timingFunction: "step-end",
+  iterationCount: "infinite",
+  color: "black"
+}) => ({
+  from: { color },
+  to: { color },
+  "0%": { color },
+  "50%": { color: "transparent" },
+  "100%": { color },
+  duration,
+  timingFunction,
+  iterationCount,
+  ...props
+});
+var fadeInScroll = ({
+  duration = "0.5s",
+  timingFunction = "ease",
+  timeline = "scroll()",
+  range = "cover",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease",
+  timeline: "scroll()",
+  range: "cover"
+}) => ({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var slideInLeftScroll = ({
+  duration = "0.5s",
+  timingFunction = "ease-out",
+  timeline = "scroll()",
+  range = "cover",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease-out",
+  timeline: "scroll()",
+  range: "cover"
+}) => ({
+  from: { transform: "translateX(-200%)" },
+  to: { transform: "translateX(0)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var scaleDownScroll = ({
+  duration = "0.8s",
+  timingFunction = "ease",
+  timeline = "scroll()",
+  range = "cover",
+  ...props
+} = {
+  duration: "0.8s",
+  timingFunction: "ease",
+  timeline: "scroll()",
+  range: "cover"
+}) => ({
+  from: { transform: "scale(3)" },
+  to: { transform: "scale(1)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var fillTextScroll = ({
+  duration = "1s",
+  timingFunction = "linear",
+  timeline = "--section",
+  range = "entry 100% cover 50%, cover 50% exit 0%",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "linear",
+  timeline: "--section",
+  range: "entry 100% cover 50%, cover 50% exit 0%"
+}) => ({
+  from: {
+    "--fill": 0,
+    color: "transparent",
+    backgroundPositionX: "calc(var(--underline-block-width) * -1), calc(var(--underline-block-width) * -1), 0"
+  },
+  "50%": { "--fill": 0.5 },
+  to: {
+    "--fill": 1,
+    backgroundPositionX: "0, 0, 0",
+    color: "var(--finish-fill)"
+  },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var ctaCollapseScroll = ({
+  duration = "1s",
+  timingFunction = "linear",
+  timeline = "scroll()",
+  range = "0 400px",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "linear",
+  timeline: "scroll()",
+  range: "0 400px"
+}) => ({
+  from: { width: "calc(48px + 120px)" },
+  to: { width: "48px" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var handWaveScroll = ({
+  duration = "2s",
+  timingFunction = "linear",
+  timeline = "scroll()",
+  range = "10vh 60vh",
+  ...props
+} = {
+  duration: "2s",
+  timingFunction: "linear",
+  timeline: "scroll()",
+  range: "10vh 60vh"
+}) => ({
+  from: { transform: "rotate(0deg)" },
+  "50%": { transform: "rotate(20deg)" },
+  to: { transform: "rotate(0deg)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var fadeBlurScroll = ({
+  duration = "1s",
+  timingFunction = "linear",
+  timeline = "view()",
+  range = "cover 40% cover 85%",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "linear",
+  timeline: "view()",
+  range: "cover 40% cover 85%"
+}) => ({
+  to: { opacity: 0, filter: "blur(2rem)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var unclipScroll = ({
+  duration = "1s",
+  timingFunction = "linear",
+  timeline = "--article",
+  range = "entry",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "linear",
+  timeline: "--article",
+  range: "entry"
+}) => ({
+  to: { clipPath: "ellipse(220% 200% at 50% 175%)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var scaleDownArticleScroll = ({
+  duration = "1s",
+  timingFunction = "linear",
+  timeline = "--article",
+  range = "entry",
+  ...props
+} = {
+  duration: "1s",
+  timingFunction: "linear",
+  timeline: "--article",
+  range: "entry"
+}) => ({
+  "0%": { transform: "scale(5)" },
+  to: { transform: "scale(1)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+var listItemScaleScroll = ({
+  duration = "0.5s",
+  timingFunction = "ease",
+  timeline = "--i",
+  range = "cover 40% cover 60%",
+  ...props
+} = {
+  duration: "0.5s",
+  timingFunction: "ease",
+  timeline: "--i",
+  range: "cover 40% cover 60%"
+}) => ({
+  from: { transform: "scale(0.8)" },
+  "50%": { transform: "scale(1)" },
+  duration,
+  timingFunction,
+  timeline,
+  range,
+  ...props
+});
+
+// src/utils/typography.ts
+var Typography = {
+  letterSpacings: {
+    tighter: -0.08,
+    tight: -0.4,
+    normal: 0,
+    wide: 0.4,
+    wider: 0.8,
+    widest: 1.6
+  },
+  lineHeights: {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 16,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+    "5xl": 48,
+    "6xl": 64
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700,
+    extraBold: 800,
+    black: 900
+  },
+  fontSizes: {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 16,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+    "5xl": 48,
+    "6xl": 64
+  }
+};
+
+// src/utils/shadow.ts
+var Shadows = {
+  0: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 1,
+      height: 2
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1
+  },
+  1: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 2,
+      height: 2
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41
+  },
+  2: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 3,
+      height: 3
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22
+  },
+  3: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 4,
+      height: 4
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62
+  },
+  4: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 5,
+      height: 5
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84
+  },
+  5: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 6,
+      height: 6
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65
+  },
+  6: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 7,
+      height: 7
+    },
+    shadowOpacity: 0.29,
+    shadowRadius: 4.65
+  },
+  7: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 8,
+      height: 8
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65
+  },
+  8: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 9,
+      height: 9
+    },
+    shadowOpacity: 0.32,
+    shadowRadius: 5.46
+  },
+  9: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 10,
+      height: 10
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27
+  }
+};
+
+// src/utils/env.ts
+var isBrowser = () => typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var getWindowInitialProps = () => isBrowser() ? window.g_initialProps : void 0;
+var isSSR = !isBrowser();
+function isDev() {
+  let dev = false;
+  if (isBrowser()) {
+    dev = !(window.location.hostname.indexOf("localhost") === -1);
+  }
+  return dev;
+}
+function isProd() {
+  if (isBrowser()) {
+    if (window && window.location && window.location.hostname) {
+      return window.location.hostname.includes("localhost") || window.location.hostname.includes("develop");
+    }
+  }
+  return false;
+}
+function isMobile() {
+  return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
+}
+
+// src/utils/viewAnimation.ts
+var createViewAnimation = (config) => {
+  const { keyframes, timing = {}, range = "entry" } = config;
+  return {
+    ...keyframes,
+    duration: timing.duration || "0.6s",
+    timingFunction: timing.timingFunction || "ease",
+    fillMode: timing.fillMode || "both",
+    delay: timing.delay,
+    timeline: "view()",
+    // CSS view() timeline - pure CSS, no JS!
+    range
+  };
+};
+var animateOnView = (config) => {
+  return createViewAnimation(config);
+};
+var fadeInOnView = (options = {}) => animateOnView({
+  keyframes: { from: { opacity: 0 }, to: { opacity: 1 } },
+  timing: {
+    duration: options.duration || "0.5s",
+    timingFunction: options.timingFunction || "ease",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var fadeOutOnView = (options = {}) => animateOnView({
+  keyframes: { from: { opacity: 1 }, to: { opacity: 0 } },
+  timing: {
+    duration: options.duration || "0.5s",
+    timingFunction: options.timingFunction || "ease",
+    delay: options.delay
+  },
+  range: options.range || "exit"
+});
+var slideUpOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: `translateY(${options.distance || "30px"})`
+    },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var slideDownOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: `translateY(-${options.distance || "30px"})`
+    },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var slideLeftOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: `translateX(-${options.distance || "50px"})`
+    },
+    to: { opacity: 1, transform: "translateX(0)" }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var slideRightOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: `translateX(${options.distance || "50px"})`
+    },
+    to: { opacity: 1, transform: "translateX(0)" }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var scaleUpOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: { opacity: 0, transform: `scale(${options.scale || 0.9})` },
+    to: { opacity: 1, transform: "scale(1)" }
+  },
+  timing: {
+    duration: options.duration || "0.5s",
+    timingFunction: options.timingFunction || "ease",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var scaleDownOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: { opacity: 0, transform: `scale(${options.scale || 1.1})` },
+    to: { opacity: 1, transform: "scale(1)" }
+  },
+  timing: {
+    duration: options.duration || "0.5s",
+    timingFunction: options.timingFunction || "ease",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var blurInOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: { opacity: 0, filter: `blur(${options.blur || "10px"})` },
+    to: { opacity: 1, filter: "blur(0)" }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var blurOutOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: { opacity: 1, filter: "blur(0)" },
+    to: { opacity: 0, filter: `blur(${options.blur || "10px"})` }
+  },
+  timing: {
+    duration: options.duration || "0.5s",
+    timingFunction: options.timingFunction || "ease-in",
+    delay: options.delay
+  },
+  range: options.range || "exit"
+});
+var rotateInOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: `rotate(${options.angle || "-10deg"}) scale(0.9)`
+    },
+    to: { opacity: 1, transform: "rotate(0) scale(1)" }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var revealOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: { clipPath: "inset(100% 0 0 0)" },
+    to: { clipPath: "inset(0 0 0 0)" }
+  },
+  timing: {
+    duration: options.duration || "0.7s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry 0% entry 80%"
+});
+var flipXOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: "perspective(400px) rotateX(90deg)"
+    },
+    to: {
+      opacity: 1,
+      transform: "perspective(400px) rotateX(0)"
+    }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var flipYOnView = (options = {}) => animateOnView({
+  keyframes: {
+    from: {
+      opacity: 0,
+      transform: "perspective(400px) rotateY(90deg)"
+    },
+    to: {
+      opacity: 1,
+      transform: "perspective(400px) rotateY(0)"
+    }
+  },
+  timing: {
+    duration: options.duration || "0.6s",
+    timingFunction: options.timingFunction || "ease-out",
+    delay: options.delay
+  },
+  range: options.range || "entry"
+});
+var viewAnimationPresets = {
+  fadeIn: {
+    keyframes: { from: { opacity: 0 }, to: { opacity: 1 } },
+    timing: { duration: "0.5s", timingFunction: "ease" },
+    range: "entry"
+  },
+  fadeOut: {
+    keyframes: { from: { opacity: 1 }, to: { opacity: 0 } },
+    timing: { duration: "0.5s", timingFunction: "ease" },
+    range: "exit"
+  },
+  slideUp: {
+    keyframes: {
+      from: { opacity: 0, transform: "translateY(30px)" },
+      to: { opacity: 1, transform: "translateY(0)" }
+    },
+    timing: { duration: "0.6s", timingFunction: "ease-out" },
+    range: "entry"
+  },
+  slideDown: {
+    keyframes: {
+      from: { opacity: 0, transform: "translateY(-30px)" },
+      to: { opacity: 1, transform: "translateY(0)" }
+    },
+    timing: { duration: "0.6s", timingFunction: "ease-out" },
+    range: "entry"
+  },
+  scaleUp: {
+    keyframes: {
+      from: { opacity: 0, transform: "scale(0.9)" },
+      to: { opacity: 1, transform: "scale(1)" }
+    },
+    timing: { duration: "0.5s", timingFunction: "ease" },
+    range: "entry"
+  },
+  blurIn: {
+    keyframes: {
+      from: { opacity: 0, filter: "blur(10px)" },
+      to: { opacity: 1, filter: "blur(0)" }
+    },
+    timing: { duration: "0.6s", timingFunction: "ease-out" },
+    range: "entry"
+  },
+  reveal: {
+    keyframes: {
+      from: { clipPath: "inset(100% 0 0 0)" },
+      to: { clipPath: "inset(0 0 0 0)" }
+    },
+    timing: { duration: "0.7s", timingFunction: "ease-out" },
+    range: "entry 0% entry 80%"
+  }
+};
+export {
+  AnalyticsContext,
+  AnalyticsProvider,
+  Animation_exports as Animation,
+  BreakpointContext,
+  Button,
+  Center,
+  Div,
+  Element,
+  Form,
+  Horizontal,
+  HorizontalResponsive,
+  Image,
+  ImageBackground,
+  Input,
+  ResponsiveContext,
+  ResponsiveProvider,
+  SafeArea,
+  Scroll,
+  Shadows,
+  Skeleton,
+  Span,
+  StyleRegistry,
+  Text,
+  ThemeContext,
+  ThemeProvider,
+  Typography,
+  Vertical,
+  VerticalResponsive,
+  View,
+  WindowDimensionsContext,
+  WindowSizeContext,
+  WindowSizeProvider,
+  animateOnView,
+  blurInOnView,
+  blurOutOnView,
+  createStyleRegistry,
+  createViewAnimation,
+  defaultColors,
+  defaultDarkColors,
+  defaultDarkPalette,
+  defaultLightColors,
+  defaultLightPalette,
+  fadeInOnView,
+  fadeOutOnView,
+  flipXOnView,
+  flipYOnView,
+  getBreakpointFromWidth,
+  getDeviceFromBreakpoint,
+  getWindowInitialProps,
+  hasColorToken,
+  isBrowser,
+  isDev,
+  isMobile,
+  isProd,
+  isSSR,
+  replaceColorTokens,
+  revealOnView,
+  rotateInOnView,
+  scaleDownOnView,
+  scaleUpOnView,
+  slideDownOnView,
+  slideLeftOnView,
+  slideRightOnView,
+  slideUpOnView,
+  useActive,
+  useAnalytics,
+  useBreakpoint,
+  useBreakpointContext,
+  useClickOutside,
+  useElementPosition,
+  useFocus,
+  useHover,
+  useIframeStyles,
+  useInView,
+  useKeyPress,
+  useMount,
+  useOnScreen,
+  useResponsive,
+  useResponsiveContext,
+  useScroll,
+  useServerInsertedHTML,
+  useStyleRegistry,
+  useTheme,
+  useWindowDimensions2 as useWindowDimensions,
+  useWindowDimensionsContext,
+  useWindowSize,
+  viewAnimationPresets
+};
+//# sourceMappingURL=index.js.map