diff --git a/example/metro.config.js b/example/metro.config.js
index 5445e99..4ef6c72 100644
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -1,6 +1,6 @@
 const path = require("path");
 const { getDefaultConfig } = require("@expo/metro-config");
-const { withReactNativeCSS } = require("../dist/commonjs/metro");
+const { withReactNativeCSS } = require("react-native-css/metro");
 
 /**
  * Metro configuration
@@ -12,10 +12,6 @@ const config = getDefaultConfig(__dirname);
 
 config.resolver.unstable_enablePackageExports = true;
 
-config.resolver.extraNodeModules = {
-  "react-native-css": path.resolve(__dirname, "../"),
-};
-
 config.resolver.nodeModulesPaths = [
   path.resolve(__dirname, "node_modules"),
   path.resolve(__dirname, "../node_modules"),
diff --git a/example/package.json b/example/package.json
index 831b685..467a95c 100644
--- a/example/package.json
+++ b/example/package.json
@@ -20,6 +20,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.1",
+    "react-native-css": "link:../",
     "react-native-reanimated": "4.0.2",
     "react-native-web": "~0.21.1",
     "react-native-worklets": "0.4.1",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 10d1b74..0df9a9c 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -15,7 +15,7 @@ export default function App() {
           "--custom": "pink",
         }}
       >
-        <View className="bg-[var(--custom,purple)] w-10 h-10" />
+        <View className="bg-[var(--custom,green)] w-10 h-10" />
 
         <CustomView className="bg-[var(--custom,purple)] w-10 h-10" />
       </VariableContextProvider>
diff --git a/package.json b/package.json
index e167ce8..69e2306 100644
--- a/package.json
+++ b/package.json
@@ -14,31 +14,6 @@
         "default": "./dist/commonjs/index.js"
       }
     },
-    "./types": {
-      "types": "./types.d.ts"
-    },
-    "./style-collection": {
-      "source": "./src/runtime/native/style-collection/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/style-collection/index.d.ts",
-        "default": "./dist/module/style-collection/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/style-collection/index.d.ts",
-        "default": "./dist/commonjs/style-collection/index.js"
-      }
-    },
-    "./metro": {
-      "source": "./src/metro/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/metro/index.d.ts",
-        "default": "./dist/module/metro/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
-        "default": "./dist/commonjs/metro/index.js"
-      }
-    },
     "./compiler": {
       "source": "./src/compiler/index.ts",
       "import": {
@@ -50,18 +25,6 @@
         "default": "./dist/commonjs/compiler/index.js"
       }
     },
-    "./jest": {
-      "source": "./src/jest/index.ts",
-      "react-native": "./src/jest/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/jest/index.d.ts",
-        "default": "./dist/module/jest/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
-        "default": "./dist/commonjs/jest/index.js"
-      }
-    },
     "./babel": {
       "source": "./src/babel/index.ts",
       "import": {
@@ -97,14 +60,85 @@
         "default": "./dist/commonjs/components/*.js"
       }
     },
-    "./package.json": "./package.json"
+    "./jest": {
+      "source": "./src/jest/index.ts",
+      "react-native": "./src/jest/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/jest/index.d.ts",
+        "default": "./dist/module/jest/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
+        "default": "./dist/commonjs/jest/index.js"
+      }
+    },
+    "./metro": {
+      "source": "./src/metro/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/metro/index.d.ts",
+        "default": "./dist/module/metro/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
+        "default": "./dist/commonjs/metro/index.js"
+      }
+    },
+    "./native": {
+      "source": "./src/native/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/native/index.d.ts",
+        "default": "./dist/module/native/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/native/index.d.ts",
+        "default": "./dist/commonjs/native/index.js"
+      }
+    },
+    "./native-internal": {
+      "source": "./src/native-internal/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/native-internal/index.d.ts",
+        "default": "./dist/module/native-internal/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/native-internal/index.d.ts",
+        "default": "./dist/commonjs/native-internal/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./types": {
+      "types": "./types.d.ts"
+    },
+    "./utilities": {
+      "source": "./src/utilities/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/utilities/index.d.ts",
+        "default": "./dist/module/utilities/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/utilities/index.d.ts",
+        "default": "./dist/commonjs/utilities/index.js"
+      }
+    },
+    "./web": {
+      "source": "./src/web/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/web/index.d.ts",
+        "default": "./dist/module/web/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/web/index.d.ts",
+        "default": "./dist/commonjs/web/index.js"
+      }
+    }
   },
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "types": "./dist/typescript/commonjs/src/index.d.ts",
   "workspaces": [
     "example",
-    "configs"
+    "configs",
+    "."
   ],
   "scripts": {
     "build": "bob build",
diff --git a/src/__tests__/native/keywords.test.tsx b/src/__tests__/native/keywords.test.tsx
index 9205f3b..f1b3def 100644
--- a/src/__tests__/native/keywords.test.tsx
+++ b/src/__tests__/native/keywords.test.tsx
@@ -2,7 +2,7 @@ import { View } from "react-native";
 
 import { renderHook } from "@testing-library/react-native";
 import { registerCSS } from "react-native-css/jest";
-import { useNativeCss } from "react-native-css/runtime/native";
+import { useNativeCss } from "react-native-css/native";
 
 test("unset", () => {
   registerCSS(`.my-class { background-color: unset; }`);
diff --git a/src/__tests__/native/media-query.test.tsx b/src/__tests__/native/media-query.test.tsx
index 179dda3..020b4aa 100644
--- a/src/__tests__/native/media-query.test.tsx
+++ b/src/__tests__/native/media-query.test.tsx
@@ -5,7 +5,7 @@ import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
 import { colorScheme } from "react-native-css/runtime";
 
-import { dimensions } from "../../runtime/native/reactivity";
+import { dimensions } from "../../native/reactivity";
 
 jest.mock("react-native", () => {
   const RN = jest.requireActual("react-native");
diff --git a/src/__tests__/native/units.test.tsx b/src/__tests__/native/units.test.tsx
index fa0f583..91195fd 100644
--- a/src/__tests__/native/units.test.tsx
+++ b/src/__tests__/native/units.test.tsx
@@ -2,16 +2,10 @@ import { View } from "react-native";
 
 import { act, renderHook } from "@testing-library/react-native";
 import { registerCSS } from "react-native-css/jest";
-import { useNativeCss } from "react-native-css/runtime/native";
-import { VariableContext } from "react-native-css/style-collection";
-
-import {
-  dimensions,
-  VAR_SYMBOL,
-  vh,
-  vw,
-} from "../../runtime/native/reactivity";
-import { emVariableName } from "../../runtime/native/styles/constants";
+import { useNativeCss, VariableContext } from "react-native-css/native";
+
+import { dimensions, VAR_SYMBOL, vh, vw } from "../../native/reactivity";
+import { emVariableName } from "../../native/styles/constants";
 
 test("px", () => {
   registerCSS(`.my-class { width: 10px; }`);
diff --git a/src/compiler/compiler.types.ts b/src/compiler/compiler.types.ts
index f1cecb4..00e0878 100644
--- a/src/compiler/compiler.types.ts
+++ b/src/compiler/compiler.types.ts
@@ -5,7 +5,7 @@ import type {
   TokenOrValue,
 } from "lightningcss";
 
-import { VAR_SYMBOL } from "../runtime/native/reactivity";
+import { VAR_SYMBOL } from "../native/reactivity";
 
 export interface CompilerOptions {
   filename?: string;
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 2e20bd9..506cc2f 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -36,7 +36,7 @@ import type {
   UnresolvedColor,
 } from "lightningcss";
 
-import { isStyleFunction } from "../runtime/utils";
+import { isStyleFunction } from "../utilities";
 import type {
   StyleDescriptor,
   StyleFunction,
@@ -2593,16 +2593,17 @@ export function parseEnv(
         case "safe-area-inset-top":
         case "safe-area-inset-right":
         case "safe-area-inset-bottom":
-        case "safe-area-inset-left":
-          return [
-            {},
-            "var",
-            [
-              `--react-native-css-${value.name.value}`,
-              parseUnparsed(value.fallback, builder, value.name.value),
-            ],
-            1,
-          ];
+        case "safe-area-inset-left": {
+          const fallback = parseUnparsed(
+            value.fallback,
+            builder,
+            value.name.value,
+          );
+
+          return fallback
+            ? [{}, "var", [`react-native-css-${value.name.value}`, fallback], 1]
+            : [{}, "var", [`react-native-css-${value.name.value}`], 1];
+        }
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":
diff --git a/src/compiler/pseudo-elements.ts b/src/compiler/pseudo-elements.ts
index 3ee0867..d379da8 100644
--- a/src/compiler/pseudo-elements.ts
+++ b/src/compiler/pseudo-elements.ts
@@ -1,4 +1,4 @@
-import { isStyleFunction } from "../runtime/utils";
+import { isStyleFunction } from "../utilities";
 import type { StyleDeclaration, StyleRule } from "./compiler.types";
 
 export function modifyRuleForSelection(rule: StyleRule): StyleRule | undefined {
diff --git a/src/compiler/selector-builder.ts b/src/compiler/selector-builder.ts
index d29573e..0aca7ec 100644
--- a/src/compiler/selector-builder.ts
+++ b/src/compiler/selector-builder.ts
@@ -1,6 +1,6 @@
 import type { AttrOperation, Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,
diff --git a/src/compiler/selectors.ts b/src/compiler/selectors.ts
index 8d69a65..b862307 100644
--- a/src/compiler/selectors.ts
+++ b/src/compiler/selectors.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils/specificity";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,
diff --git a/src/compiler/stylesheet.ts b/src/compiler/stylesheet.ts
index 8d8d51e..ee72497 100644
--- a/src/compiler/stylesheet.ts
+++ b/src/compiler/stylesheet.ts
@@ -4,7 +4,7 @@ import {
   isStyleDescriptorArray,
   Specificity,
   specificityCompareFn,
-} from "../runtime/utils";
+} from "../utilities";
 import type {
   AnimationKeyframes,
   AnimationRecord,
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 1a672d8..596a8fd 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -4,7 +4,7 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css/native";
 
 const mapping = {
   className: "style",
diff --git a/src/components/View.tsx b/src/components/View.tsx
index e11718a..9d99c6d 100644
--- a/src/components/View.tsx
+++ b/src/components/View.tsx
@@ -4,7 +4,7 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css/native";
 
 const mapping = {
   className: "style",
diff --git a/src/components/react-native-safe-area-context.native.tsx b/src/components/react-native-safe-area-context.native.tsx
index 424e042..5370e80 100644
--- a/src/components/react-native-safe-area-context.native.tsx
+++ b/src/components/react-native-safe-area-context.native.tsx
@@ -1,6 +1,9 @@
 import { useContext, useMemo, type PropsWithChildren } from "react";
 
-import { VariableContext } from "react-native-css/style-collection";
+import {
+  VariableContext,
+  VariableContextProvider,
+} from "react-native-css/native-internal";
 import {
   SafeAreaProvider as OriginalSafeAreaProvider,
   useSafeAreaInsets,
@@ -35,5 +38,7 @@ function SafeAreaEnv({ children }: PropsWithChildren) {
     [parentVars, insets],
   );
 
-  return <VariableContext value={value}>{children}</VariableContext>;
+  return (
+    <VariableContextProvider value={value}>{children}</VariableContextProvider>
+  );
 }
diff --git a/src/jest/index.ts b/src/jest/index.ts
index 26beaf6..dd2022d 100644
--- a/src/jest/index.ts
+++ b/src/jest/index.ts
@@ -3,9 +3,9 @@ import { Appearance, Dimensions } from "react-native";
 import { inspect } from "node:util";
 
 import { compile, type CompilerOptions } from "react-native-css/compiler";
-import { StyleCollection } from "react-native-css/style-collection";
+import { StyleCollection } from "react-native-css/native";
 
-import { colorScheme, dimensions } from "../runtime/native/reactivity";
+import { colorScheme, dimensions } from "../native/reactivity";
 
 declare global {
   /* eslint-disable @typescript-eslint/no-namespace */
diff --git a/src/metro/index.ts b/src/metro/index.ts
index 47ca696..2426005 100644
--- a/src/metro/index.ts
+++ b/src/metro/index.ts
@@ -5,8 +5,11 @@ import { versions } from "node:process";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import type { CompilerOptions, ReactNativeCssStyleSheet } from "../compiler";
-import { compile } from "../compiler/compiler";
+import {
+  compile,
+  type CompilerOptions,
+  type ReactNativeCssStyleSheet,
+} from "../compiler";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
 import { setupTypeScript } from "./typescript";
@@ -97,9 +100,7 @@ export function withReactNativeCSS<
           >();
           const webCSSFiles = new Set<string>();
 
-          const nativeInjectionPath = require.resolve(
-            "../runtime/native/metro",
-          );
+          const nativeInjectionPath = require.resolve("../native/metro");
           const nativeInjectionFilepaths = [
             // CommonJS
             nativeInjectionPath,
@@ -114,7 +115,7 @@ export function withReactNativeCSS<
               .replace(".js", ".ts"),
           ];
 
-          const webInjectionPath = require.resolve("../runtime/web/metro");
+          const webInjectionPath = require.resolve("../web/metro");
           const webInjectionFilepaths = [
             // CommonJS
             webInjectionPath,
diff --git a/src/metro/injection-code.ts b/src/metro/injection-code.ts
index d263ece..61071c8 100644
--- a/src/metro/injection-code.ts
+++ b/src/metro/injection-code.ts
@@ -29,6 +29,6 @@ export function getNativeInjectionCode(
     .join("\n");
 
   return Buffer.from(
-    `import { StyleCollection } from "react-native-css/style-collection";\n${importStatements}\n${contents};export {};`,
+    `import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`,
   );
 }
diff --git a/src/native-internal/README.md b/src/native-internal/README.md
new file mode 100644
index 0000000..6d3c0ba
--- /dev/null
+++ b/src/native-internal/README.md
@@ -0,0 +1,11 @@
+# native-internal
+
+This package is separate from `native` to prevent a circular dependency.
+
+- The `native/index.ts` needs to import the `metro.ts`,
+- `metro.ts` import the `.css` files (as a work around for lazy bundles)
+- `.css` files import the `StyleCollection`
+
+To prevent multiple versions of `StyleCollection` and relative path issues, we created `native-internal` to break the dependency chain.
+
+This package should contain all the singular globals.
diff --git a/src/native-internal/index.ts b/src/native-internal/index.ts
new file mode 100644
index 0000000..e80c9bd
--- /dev/null
+++ b/src/native-internal/index.ts
@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./style-collection";
+export * from "./variables";
diff --git a/src/style-collection/root.ts b/src/native-internal/root.ts
similarity index 87%
rename from src/style-collection/root.ts
rename to src/native-internal/root.ts
index 3c59dd7..e45a7d1 100644
--- a/src/style-collection/root.ts
+++ b/src/native-internal/root.ts
@@ -2,12 +2,8 @@ import { Platform, PlatformColor } from "react-native";
 
 import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
 
-import { testMediaQuery } from "../runtime/native/conditions/media-query";
-import {
-  family,
-  observable,
-  type Observable,
-} from "../runtime/native/reactivity";
+import { testMediaQuery } from "../native/conditions/media-query";
+import { family, observable, type Observable } from "../native/reactivity";
 
 const rootVariableFamily = () => {
   return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
diff --git a/src/style-collection/index.ts b/src/native-internal/style-collection.ts
similarity index 89%
rename from src/style-collection/index.ts
rename to src/native-internal/style-collection.ts
index bfd73ac..eff3400 100644
--- a/src/style-collection/index.ts
+++ b/src/native-internal/style-collection.ts
@@ -1,4 +1,4 @@
-import { createContext, type Context } from "react";
+import { type Context } from "react";
 
 import type {
   Animation,
@@ -6,15 +6,14 @@ import type {
   StyleRuleSet,
 } from "react-native-css/compiler";
 
-import { DEFAULT_CONTAINER_NAME } from "../runtime/native/conditions/container-query";
+import { DEFAULT_CONTAINER_NAME } from "../native/conditions/container-query";
 import {
   family,
   observable,
   observableBatch,
-  VAR_SYMBOL,
   type Observable,
   type VariableContextValue,
-} from "../runtime/native/reactivity";
+} from "../native/reactivity";
 import { rootVariables, universalVariables } from "./root";
 
 export { rootVariables, universalVariables };
@@ -147,10 +146,3 @@ function isDeepEqual(a: unknown, b: unknown): boolean {
 
   return true;
 }
-
-globalThis.__react_native_css_variable_context ??=
-  createContext<VariableContextValue>({
-    [VAR_SYMBOL]: true,
-  });
-
-export const VariableContext = globalThis.__react_native_css_variable_context;
diff --git a/src/native-internal/variables.tsx b/src/native-internal/variables.tsx
new file mode 100644
index 0000000..8a0f81e
--- /dev/null
+++ b/src/native-internal/variables.tsx
@@ -0,0 +1,36 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type PropsWithChildren,
+} from "react";
+
+import type { StyleDescriptor } from "react-native-css/compiler";
+
+import { VAR_SYMBOL, type VariableContextValue } from "../native/reactivity";
+
+globalThis.__react_native_css_variable_context ??=
+  createContext<VariableContextValue>({
+    [VAR_SYMBOL]: true,
+  });
+
+export const VariableContext = globalThis.__react_native_css_variable_context;
+
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, StyleDescriptor> }>,
+) {
+  const inheritedVariables = useContext(VariableContext);
+
+  const value: VariableContextValue = useMemo(
+    () => ({
+      ...inheritedVariables,
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
+      ),
+      [VAR_SYMBOL]: true,
+    }),
+    [inheritedVariables, props.value],
+  );
+
+  return <VariableContext value={value}>{props.children}</VariableContext>;
+}
diff --git a/src/runtime/native/api.tsx b/src/native/api.tsx
similarity index 76%
rename from src/runtime/native/api.tsx
rename to src/native/api.tsx
index a9a7ac0..26b6998 100644
--- a/src/runtime/native/api.tsx
+++ b/src/native/api.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable  */
-import { useContext, useMemo, useState, type PropsWithChildren } from "react";
+import { useContext, useState } from "react";
 import { Appearance } from "react-native";
 
-import { VariableContext } from "react-native-css/style-collection";
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { VariableContext } from "react-native-css/native-internal";
 
-import type { StyleDescriptor } from "../../compiler";
 import type {
   ColorScheme,
   Props,
+  ReactComponent,
   StyledConfiguration,
   StyledOptions,
 } from "../runtime.types";
-import type { ReactComponent } from "../utils";
 import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
 import { usePassthrough } from "./react/usePassthrough";
 import {
@@ -19,14 +19,14 @@ import {
   VAR_SYMBOL,
   type Effect,
   type Getter,
-  type VariableContextValue,
 } from "./reactivity";
 import { resolveValue } from "./styles/resolve";
 
 export {
   StyleCollection,
   VariableContext,
-} from "react-native-css/style-collection";
+  VariableContextProvider,
+} from "react-native-css/native-internal";
 
 export { useNativeCss };
 
@@ -118,22 +118,3 @@ export function vars(variables: Record<string, StyleDescriptor>) {
     ),
   );
 }
-
-export function VariableContextProvider(
-  props: PropsWithChildren<{ value: Record<`--${string}`, StyleDescriptor> }>,
-) {
-  const inheritedVariables = useContext(VariableContext);
-
-  const value: VariableContextValue = useMemo(
-    () => ({
-      ...inheritedVariables,
-      ...Object.fromEntries(
-        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
-      ),
-      [VAR_SYMBOL]: true,
-    }),
-    [inheritedVariables, props.value],
-  );
-
-  return <VariableContext value={value}>{props.children}</VariableContext>;
-}
diff --git a/src/runtime/native/conditions/attributes.ts b/src/native/conditions/attributes.ts
similarity index 72%
rename from src/runtime/native/conditions/attributes.ts
rename to src/native/conditions/attributes.ts
index de8e881..23b7280 100644
--- a/src/runtime/native/conditions/attributes.ts
+++ b/src/native/conditions/attributes.ts
@@ -1,10 +1,10 @@
-import type { AttributeQuery } from "../../../compiler";
-import type { Props } from "../../runtime.types";
+import type { AttributeQuery } from "react-native-css/compiler";
+
 import type { RenderGuard } from "./guards";
 
 export function testAttributes(
   queries: AttributeQuery[],
-  props: Props,
+  props: Record<string, unknown> | undefined | null,
   guards: RenderGuard[],
 ) {
   return queries.every((query) => testAttribute(query, props, guards));
@@ -12,16 +12,18 @@ export function testAttributes(
 
 function testAttribute(
   [type, prop, operator, testValue]: AttributeQuery,
-  props: Props,
+  props: Record<string, unknown> | undefined | null,
   guards: RenderGuard[],
 ) {
-  let value: unknown;
+  let value: unknown = undefined;
 
-  if (type === "a") {
-    value = props?.[prop];
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    value = props?.dataSet?.[prop];
+  if (props) {
+    if (type === "a") {
+      value = props[prop];
+    } else {
+      const dataSet = props.dataSet as Record<string, unknown> | undefined;
+      value = dataSet?.[prop];
+    }
   }
 
   guards.push([type, prop, value]);
diff --git a/src/runtime/native/conditions/container-query.ts b/src/native/conditions/container-query.ts
similarity index 99%
rename from src/runtime/native/conditions/container-query.ts
rename to src/native/conditions/container-query.ts
index f6bcaf2..ac546c9 100644
--- a/src/runtime/native/conditions/container-query.ts
+++ b/src/native/conditions/container-query.ts
@@ -1,12 +1,12 @@
 /* eslint-disable */
 import type { MediaFeatureNameFor_ContainerSizeFeatureId } from "lightningcss";
-
 import type {
   ContainerQuery,
   MediaCondition,
   PseudoClassesQuery,
   StyleDescriptor,
-} from "../../../compiler";
+} from "react-native-css/compiler";
+
 import {
   activeFamily,
   containerHeightFamily,
diff --git a/src/runtime/native/conditions/guards.ts b/src/native/conditions/guards.ts
similarity index 100%
rename from src/runtime/native/conditions/guards.ts
rename to src/native/conditions/guards.ts
diff --git a/src/runtime/native/conditions/index.ts b/src/native/conditions/index.ts
similarity index 94%
rename from src/runtime/native/conditions/index.ts
rename to src/native/conditions/index.ts
index eb6c98a..8886f68 100644
--- a/src/runtime/native/conditions/index.ts
+++ b/src/native/conditions/index.ts
@@ -1,4 +1,5 @@
-import type { PseudoClassesQuery, StyleRule } from "../../../compiler";
+import type { PseudoClassesQuery, StyleRule } from "react-native-css/compiler";
+
 import type { Props } from "../../runtime.types";
 import {
   activeFamily,
diff --git a/src/runtime/native/conditions/media-query.ts b/src/native/conditions/media-query.ts
similarity index 97%
rename from src/runtime/native/conditions/media-query.ts
rename to src/native/conditions/media-query.ts
index dd5dcb8..75cd900 100644
--- a/src/runtime/native/conditions/media-query.ts
+++ b/src/native/conditions/media-query.ts
@@ -1,7 +1,8 @@
 /* eslint-disable */
 import { I18nManager, PixelRatio, Platform } from "react-native";
 
-import type { MediaCondition } from "../../../compiler";
+import type { MediaCondition } from "react-native-css/compiler";
+
 import { colorScheme, vh, vw, type Getter } from "../reactivity";
 
 export function testMediaQuery(mediaQueries: MediaCondition[], get: Getter) {
diff --git a/src/runtime/native/index.ts b/src/native/index.ts
similarity index 100%
rename from src/runtime/native/index.ts
rename to src/native/index.ts
diff --git a/src/runtime/native/metro.ts b/src/native/metro.ts
similarity index 100%
rename from src/runtime/native/metro.ts
rename to src/native/metro.ts
diff --git a/src/runtime/utils/objects.ts b/src/native/objects.ts
similarity index 100%
rename from src/runtime/utils/objects.ts
rename to src/native/objects.ts
diff --git a/src/runtime/native/react/interaction.ts b/src/native/react/interaction.ts
similarity index 100%
rename from src/runtime/native/react/interaction.ts
rename to src/native/react/interaction.ts
diff --git a/src/runtime/native/react/rules.ts b/src/native/react/rules.ts
similarity index 98%
rename from src/runtime/native/react/rules.ts
rename to src/native/react/rules.ts
index 1ff6c1b..f85a66f 100644
--- a/src/runtime/native/react/rules.ts
+++ b/src/native/react/rules.ts
@@ -1,11 +1,11 @@
 /* eslint-disable */
-import { StyleCollection } from "react-native-css/style-collection";
+import type { InlineVariable, StyleRule } from "react-native-css/compiler";
+import { StyleCollection } from "react-native-css/native-internal";
 
-import type { InlineVariable, StyleRule } from "../../../compiler";
-import { getDeepPath } from "../../utils";
 import { testRule } from "../conditions";
 import { DEFAULT_CONTAINER_NAME } from "../conditions/container-query";
 import type { RenderGuard } from "../conditions/guards";
+import { getDeepPath } from "../objects";
 import {
   activeFamily,
   containerLayoutFamily,
@@ -75,7 +75,7 @@ export function updateRules(
           if (!item) {
             continue;
           }
-          
+
           if (VAR_SYMBOL in item) {
             inlineVariables.add(item);
           } else if (
diff --git a/src/runtime/native/react/useNativeCss.ts b/src/native/react/useNativeCss.ts
similarity index 98%
rename from src/runtime/native/react/useNativeCss.ts
rename to src/native/react/useNativeCss.ts
index 7d6e2f4..05341c3 100644
--- a/src/runtime/native/react/useNativeCss.ts
+++ b/src/native/react/useNativeCss.ts
@@ -9,7 +9,7 @@ import {
 } from "react";
 import { Pressable, View } from "react-native";
 
-import { VariableContext } from "react-native-css/style-collection";
+import { VariableContext } from "react-native-css/native-internal";
 
 import type { StyledConfiguration } from "../../runtime.types";
 import { testGuards, type RenderGuard } from "../conditions/guards";
diff --git a/src/runtime/native/react/usePassthrough.ts b/src/native/react/usePassthrough.ts
similarity index 100%
rename from src/runtime/native/react/usePassthrough.ts
rename to src/native/react/usePassthrough.ts
diff --git a/src/runtime/native/reactivity.ts b/src/native/reactivity.ts
similarity index 98%
rename from src/runtime/native/reactivity.ts
rename to src/native/reactivity.ts
index ccc11fc..0824ede 100644
--- a/src/runtime/native/reactivity.ts
+++ b/src/native/reactivity.ts
@@ -7,7 +7,7 @@ import {
   type LayoutRectangle,
 } from "react-native";
 
-import type { StyleDescriptor } from "../../compiler";
+import type { StyleDescriptor } from "react-native-css/compiler";
 
 export type Effect = {
   observers: Set<Effect>;
diff --git a/src/runtime/native/reanimated.ts b/src/native/reanimated.ts
similarity index 100%
rename from src/runtime/native/reanimated.ts
rename to src/native/reanimated.ts
diff --git a/src/runtime/native/styles/calculate-props.ts b/src/native/styles/calculate-props.ts
similarity index 97%
rename from src/runtime/native/styles/calculate-props.ts
rename to src/native/styles/calculate-props.ts
index a24bd77..c23b939 100644
--- a/src/runtime/native/styles/calculate-props.ts
+++ b/src/native/styles/calculate-props.ts
@@ -3,9 +3,11 @@ import type {
   InlineVariable,
   StyleDeclaration,
   StyleRule,
-} from "../../../compiler";
-import { applyValue, getDeepPath, Specificity as S } from "../../utils";
+} from "react-native-css/compiler";
+import { Specificity as S } from "react-native-css/utilities";
+
 import type { RenderGuard } from "../conditions/guards";
+import { applyValue, getDeepPath } from "../objects";
 import {
   VAR_SYMBOL,
   type Getter,
diff --git a/src/runtime/native/styles/constants.ts b/src/native/styles/constants.ts
similarity index 100%
rename from src/runtime/native/styles/constants.ts
rename to src/native/styles/constants.ts
diff --git a/src/runtime/native/styles/defaults.ts b/src/native/styles/defaults.ts
similarity index 100%
rename from src/runtime/native/styles/defaults.ts
rename to src/native/styles/defaults.ts
diff --git a/src/runtime/native/styles/functions/animation-timing.ts b/src/native/styles/functions/animation-timing.ts
similarity index 100%
rename from src/runtime/native/styles/functions/animation-timing.ts
rename to src/native/styles/functions/animation-timing.ts
diff --git a/src/runtime/native/styles/functions/calc.ts b/src/native/styles/functions/calc.ts
similarity index 100%
rename from src/runtime/native/styles/functions/calc.ts
rename to src/native/styles/functions/calc.ts
diff --git a/src/runtime/native/styles/functions/filters.ts b/src/native/styles/functions/filters.ts
similarity index 97%
rename from src/runtime/native/styles/functions/filters.ts
rename to src/native/styles/functions/filters.ts
index 672bc5e..17def28 100644
--- a/src/runtime/native/styles/functions/filters.ts
+++ b/src/native/styles/functions/filters.ts
@@ -1,4 +1,5 @@
-import { isStyleDescriptorArray } from "../../../utils";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "../shorthands/_handler";
 
diff --git a/src/runtime/native/styles/functions/index.ts b/src/native/styles/functions/index.ts
similarity index 100%
rename from src/runtime/native/styles/functions/index.ts
rename to src/native/styles/functions/index.ts
diff --git a/src/runtime/native/styles/functions/numeric-functions.ts b/src/native/styles/functions/numeric-functions.ts
similarity index 100%
rename from src/runtime/native/styles/functions/numeric-functions.ts
rename to src/native/styles/functions/numeric-functions.ts
diff --git a/src/runtime/native/styles/functions/platform-functions.ts b/src/native/styles/functions/platform-functions.ts
similarity index 100%
rename from src/runtime/native/styles/functions/platform-functions.ts
rename to src/native/styles/functions/platform-functions.ts
diff --git a/src/runtime/native/styles/functions/string-functions.ts b/src/native/styles/functions/string-functions.ts
similarity index 100%
rename from src/runtime/native/styles/functions/string-functions.ts
rename to src/native/styles/functions/string-functions.ts
diff --git a/src/runtime/native/styles/functions/transform-functions.ts b/src/native/styles/functions/transform-functions.ts
similarity index 97%
rename from src/runtime/native/styles/functions/transform-functions.ts
rename to src/native/styles/functions/transform-functions.ts
index 3ae1f12..c9826db 100644
--- a/src/runtime/native/styles/functions/transform-functions.ts
+++ b/src/native/styles/functions/transform-functions.ts
@@ -1,4 +1,5 @@
-import { isStyleDescriptorArray } from "../../../utils";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
 import type { StyleFunctionResolver } from "../resolve";
 
 export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
diff --git a/src/runtime/native/styles/index.ts b/src/native/styles/index.ts
similarity index 97%
rename from src/runtime/native/styles/index.ts
rename to src/native/styles/index.ts
index 0a2f553..1ee9b24 100644
--- a/src/runtime/native/styles/index.ts
+++ b/src/native/styles/index.ts
@@ -1,6 +1,7 @@
 /* eslint-disable */
-import type { InlineVariable, StyleRule } from "../../../compiler";
-import { specificityCompareFn } from "../../utils";
+import type { InlineVariable, StyleRule } from "react-native-css/compiler";
+import { specificityCompareFn } from "react-native-css/utilities";
+
 import { getInteractionHandler } from "../react/interaction";
 import type { ComponentState, Config } from "../react/useNativeCss";
 import {
diff --git a/src/runtime/native/styles/line-height.ts b/src/native/styles/line-height.ts
similarity index 100%
rename from src/runtime/native/styles/line-height.ts
rename to src/native/styles/line-height.ts
diff --git a/src/runtime/native/styles/resolve.ts b/src/native/styles/resolve.ts
similarity index 99%
rename from src/runtime/native/styles/resolve.ts
rename to src/native/styles/resolve.ts
index 03ea005..c536d0c 100644
--- a/src/runtime/native/styles/resolve.ts
+++ b/src/native/styles/resolve.ts
@@ -4,7 +4,8 @@ import type {
   InlineVariable,
   StyleDescriptor,
   StyleFunction,
-} from "../../../compiler";
+} from "react-native-css/compiler";
+
 import type { RenderGuard } from "../conditions/guards";
 import { type Getter, type VariableContextValue } from "../reactivity";
 import type { calculateProps } from "./calculate-props";
diff --git a/src/runtime/native/styles/shorthands/_handler.ts b/src/native/styles/shorthands/_handler.ts
similarity index 96%
rename from src/runtime/native/styles/shorthands/_handler.ts
rename to src/native/styles/shorthands/_handler.ts
index 48debf3..1bc71a1 100644
--- a/src/runtime/native/styles/shorthands/_handler.ts
+++ b/src/native/styles/shorthands/_handler.ts
@@ -1,6 +1,7 @@
 /* eslint-disable */
-import { setDeepPath } from "../../../utils/objects";
-import { isStyleDescriptorArray } from "../../../utils/style-value";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import { setDeepPath } from "../../objects";
 import { ShortHandSymbol } from "../constants";
 import { defaultValues } from "../defaults";
 import type { StyleResolver } from "../resolve";
diff --git a/src/runtime/native/styles/shorthands/animation.ts b/src/native/styles/shorthands/animation.ts
similarity index 95%
rename from src/runtime/native/styles/shorthands/animation.ts
rename to src/native/styles/shorthands/animation.ts
index 72cc114..0d7eddb 100644
--- a/src/runtime/native/styles/shorthands/animation.ts
+++ b/src/native/styles/shorthands/animation.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
-import { StyleCollection } from "react-native-css/style-collection";
+import { StyleCollection } from "react-native-css/native-internal";
 
-import { applyShorthand } from "../../../utils";
+import { applyShorthand } from "../../objects";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
 
diff --git a/src/runtime/native/styles/shorthands/border.ts b/src/native/styles/shorthands/border.ts
similarity index 100%
rename from src/runtime/native/styles/shorthands/border.ts
rename to src/native/styles/shorthands/border.ts
diff --git a/src/runtime/native/styles/shorthands/box-shadow.ts b/src/native/styles/shorthands/box-shadow.ts
similarity index 92%
rename from src/runtime/native/styles/shorthands/box-shadow.ts
rename to src/native/styles/shorthands/box-shadow.ts
index f3f814b..f65a937 100644
--- a/src/runtime/native/styles/shorthands/box-shadow.ts
+++ b/src/native/styles/shorthands/box-shadow.ts
@@ -1,5 +1,6 @@
-import type { StyleDescriptor } from "../../../../compiler";
-import { isStyleDescriptorArray } from "../../../utils";
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
 
diff --git a/src/runtime/native/styles/shorthands/index.ts b/src/native/styles/shorthands/index.ts
similarity index 100%
rename from src/runtime/native/styles/shorthands/index.ts
rename to src/native/styles/shorthands/index.ts
diff --git a/src/runtime/native/styles/shorthands/text-shadow.ts b/src/native/styles/shorthands/text-shadow.ts
similarity index 100%
rename from src/runtime/native/styles/shorthands/text-shadow.ts
rename to src/native/styles/shorthands/text-shadow.ts
diff --git a/src/runtime/native/styles/shorthands/transform.ts b/src/native/styles/shorthands/transform.ts
similarity index 100%
rename from src/runtime/native/styles/shorthands/transform.ts
rename to src/native/styles/shorthands/transform.ts
diff --git a/src/runtime/native/styles/units.ts b/src/native/styles/units.ts
similarity index 100%
rename from src/runtime/native/styles/units.ts
rename to src/native/styles/units.ts
diff --git a/src/runtime/native/styles/variables.ts b/src/native/styles/variables.ts
similarity index 91%
rename from src/runtime/native/styles/variables.ts
rename to src/native/styles/variables.ts
index ecbe447..af3d6ee 100644
--- a/src/runtime/native/styles/variables.ts
+++ b/src/native/styles/variables.ts
@@ -1,10 +1,10 @@
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
 import {
   rootVariables,
   universalVariables,
-} from "react-native-css/style-collection";
+} from "react-native-css/native-internal";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
 
-import type { StyleDescriptor, StyleFunction } from "../../../compiler";
-import { isStyleDescriptorArray } from "../../utils";
 import { VAR_SYMBOL, type Getter } from "../reactivity";
 import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
 
diff --git a/src/runtime/runtime.native.ts b/src/runtime.native.ts
similarity index 100%
rename from src/runtime/runtime.native.ts
rename to src/runtime.native.ts
diff --git a/src/runtime/runtime.ts b/src/runtime.ts
similarity index 100%
rename from src/runtime/runtime.ts
rename to src/runtime.ts
diff --git a/src/runtime/runtime.types.ts b/src/runtime.types.ts
similarity index 76%
rename from src/runtime/runtime.types.ts
rename to src/runtime.types.ts
index 08214b4..6e8f9ad 100644
--- a/src/runtime/runtime.types.ts
+++ b/src/runtime.types.ts
@@ -1,5 +1,13 @@
-/* eslint-disable */
-import type { ComponentProps, ComponentType, ReactElement } from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  ClassicComponentClass,
+  ComponentClass,
+  ComponentProps,
+  ComponentType,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  ReactElement,
+} from "react";
 import type {
   ColorSchemeName,
   ImageStyle,
@@ -7,8 +15,7 @@ import type {
   ViewStyle,
 } from "react-native";
 
-import type { ComponentPropsDotNotation, ReactComponent } from "./utils";
-import type { DotNotation, ResolveDotPath } from "./utils/dot-notation.types";
+import type { DotNotation, ResolveDotPath } from "react-native-css/utilities";
 
 /********************************     API      ********************************/
 
@@ -38,7 +45,7 @@ export type StyledProps<P, M extends StyledConfiguration<any>> = P & {
 };
 
 export type Styled = <
-  const C extends ReactComponent<any>,
+  const C extends ReactComponent,
   const M extends StyledConfiguration<C>,
 >(
   component: C,
@@ -47,7 +54,7 @@ export type Styled = <
 ) => StyledComponent<C, M>;
 
 type StyledComponent<
-  C extends ReactComponent<any>,
+  C extends ReactComponent,
   M extends StyledConfiguration<C>,
 > = ComponentType<
   ComponentProps<C> & {
@@ -62,7 +69,7 @@ type StyledComponent<
 >;
 
 export type StyledConfiguration<
-  C extends ReactComponent<any>,
+  C extends ReactComponent,
   K extends string = string,
 > = Record<
   K,
@@ -71,10 +78,10 @@ export type StyledConfiguration<
   | StyledConfigurationObject<C, ComponentPropsDotNotation<C> | false>
 >;
 
-type StyledConfigurationObject<
-  C extends ReactComponent<any>,
+interface StyledConfigurationObject<
+  C extends ReactComponent,
   T extends ComponentPropsDotNotation<C> | false,
-> = {
+> {
   target: T;
   nativeStyleMapping?: T extends false
     ? NativeStyleMapping<string, ComponentProps<C>>
@@ -87,7 +94,7 @@ type StyledConfigurationObject<
     ResolveDotPath<T, ComponentProps<C>>,
     ComponentProps<C>
   >;
-};
+}
 
 type NativeStyleMapping<T, S> = T extends object
   ? {
@@ -98,9 +105,22 @@ type NativeStyleMapping<T, S> = T extends object
     }
   : Record<string, true | DotNotation<S>>;
 
-export type StyledOptions = {
+export interface StyledOptions {
   passThrough?: boolean;
-};
+}
+
+/***************************     React Helpers      ***************************/
+
+export type ReactComponent<P = any> =
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  | ClassicComponentClass<P>
+  | ComponentClass<P>
+  | FunctionComponent<P>
+  | ForwardRefExoticComponent<P>;
+
+export type ComponentPropsDotNotation<C extends ReactComponent> = DotNotation<
+  ComponentProps<C>
+>;
 
 /********************************    Styles    ********************************/
 
@@ -124,7 +144,7 @@ export type RNStyle = ViewStyle & TextStyle & ImageStyle;
 
 /********************************    Globals    ********************************/
 
-export type ColorScheme = {
+export interface ColorScheme {
   get: () => ColorSchemeName;
   set: (value: ColorSchemeName) => void;
-};
+}
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
deleted file mode 100644
index 97a8d1e..0000000
--- a/src/runtime/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * An opinionated runtime for React Native CSS.
- * @module
- */
-
-export * from "./runtime";
-export type * from "./runtime.types";
diff --git a/src/runtime/native/injection.ts b/src/runtime/native/injection.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/runtime/utils/components.ts b/src/runtime/utils/components.ts
deleted file mode 100644
index 5fbb444..0000000
--- a/src/runtime/utils/components.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-disable */
-const ForwardRefSymbol = Symbol.for("react.forward_ref");
-export function getComponentType(component: any) {
-  switch (typeof component) {
-    case "function":
-    case "object":
-      return "$$typeof" in component && component.$$typeof === ForwardRefSymbol
-        ? "forwardRef"
-        : component.prototype?.isReactComponent
-          ? "class"
-          : typeof component;
-    default:
-      return "unknown";
-  }
-}
diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
deleted file mode 100644
index 755eb3d..0000000
--- a/src/runtime/utils/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./objects";
-export * from "./components";
-export * from "./specificity";
-export * from "./style-value";
-export * from "./utils.types";
diff --git a/src/runtime/utils/utils.types.ts b/src/runtime/utils/utils.types.ts
deleted file mode 100644
index 9a54a7e..0000000
--- a/src/runtime/utils/utils.types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable */
-import type {
-  ClassicComponentClass,
-  ComponentClass,
-  ComponentProps,
-  ForwardRefExoticComponent,
-  FunctionComponent,
-} from "react";
-
-import type { DotNotation } from "./dot-notation.types";
-
-export type ReactComponent<P = any> =
-  | ClassicComponentClass<P>
-  | ComponentClass<P>
-  | FunctionComponent<P>
-  | ForwardRefExoticComponent<P>;
-
-export type ComponentPropsDotNotation<C extends ReactComponent<any>> =
-  DotNotation<ComponentProps<C>>;
diff --git a/src/runtime/utils/dot-notation.types.ts b/src/utilities/dot-notation.types.ts
similarity index 100%
rename from src/runtime/utils/dot-notation.types.ts
rename to src/utilities/dot-notation.types.ts
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
new file mode 100644
index 0000000..0c95da6
--- /dev/null
+++ b/src/utilities/index.ts
@@ -0,0 +1,3 @@
+export * from "./specificity";
+export * from "./style-descriptor";
+export * from "./dot-notation.types";
diff --git a/src/runtime/utils/specificity.ts b/src/utilities/specificity.ts
similarity index 95%
rename from src/runtime/utils/specificity.ts
rename to src/utilities/specificity.ts
index 760f643..342f0a3 100644
--- a/src/runtime/utils/specificity.ts
+++ b/src/utilities/specificity.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { SpecificityArray, StyleRule } from "../../compiler";
+import type { SpecificityArray, StyleRule } from "../compiler";
 import type { InlineStyleRecord } from "../runtime.types";
 
 export const Specificity = {
diff --git a/src/runtime/utils/style-value.ts b/src/utilities/style-descriptor.ts
similarity index 87%
rename from src/runtime/utils/style-value.ts
rename to src/utilities/style-descriptor.ts
index 2daca9e..1310d62 100644
--- a/src/runtime/utils/style-value.ts
+++ b/src/utilities/style-descriptor.ts
@@ -1,4 +1,4 @@
-import type { StyleDescriptor, StyleFunction } from "../../compiler";
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
 
 export function isStyleDescriptorArray(
   value: unknown,
diff --git a/src/runtime/web/api.tsx b/src/web/api.tsx
similarity index 96%
rename from src/runtime/web/api.tsx
rename to src/web/api.tsx
index 189c249..d0ff6e2 100644
--- a/src/runtime/web/api.tsx
+++ b/src/web/api.tsx
@@ -12,8 +12,9 @@ import type {
   StyledConfiguration,
   StyledOptions,
   StyledProps,
-} from "../runtime.types";
-import type { ReactComponent } from "../utils";
+} from "react-native-css";
+
+import type { ReactComponent } from "../runtime.types";
 import { assignStyle } from "./assign-style";
 
 export const styled = <
@@ -88,7 +89,7 @@ export function vars(variables: Record<string, string | number>) {
 }
 
 export function VariableContextProvider(
-  props: PropsWithChildren<{ value: Record<`--${string}`, string> }>,
+  props: PropsWithChildren<{ value: Record<`--${string}`, string | number> }>,
 ) {
   const style = useMemo(() => {
     return {
diff --git a/src/runtime/web/assign-style.ts b/src/web/assign-style.ts
similarity index 100%
rename from src/runtime/web/assign-style.ts
rename to src/web/assign-style.ts
diff --git a/src/runtime/web/index.ts b/src/web/index.ts
similarity index 100%
rename from src/runtime/web/index.ts
rename to src/web/index.ts
diff --git a/src/runtime/web/metro.ts b/src/web/metro.ts
similarity index 100%
rename from src/runtime/web/metro.ts
rename to src/web/metro.ts
diff --git a/yarn.lock b/yarn.lock
index 8092387..2a525ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2284,7 +2284,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/metro-config@npm:0.21.11, @expo/metro-config@npm:~0.21.11, @expo/metro-config@npm:~0.21.8":
+"@expo/metro-config@npm:0.21.11, @expo/metro-config@npm:~0.21.11":
   version: 0.21.11
   resolution: "@expo/metro-config@npm:0.21.11"
   dependencies:
@@ -2352,6 +2352,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/metro-config@npm:~0.21.8":
+  version: 0.21.10
+  resolution: "@expo/metro-config@npm:0.21.10"
+  dependencies:
+    "@babel/code-frame": "npm:^7.20.0"
+    "@babel/core": "npm:^7.20.0"
+    "@babel/generator": "npm:^7.20.5"
+    "@expo/config": "npm:~12.0.7"
+    "@expo/env": "npm:~2.0.6"
+    "@expo/json-file": "npm:~10.0.6"
+    "@expo/metro": "npm:~0.1.1"
+    "@expo/spawn-async": "npm:^1.7.2"
+    browserslist: "npm:^4.25.0"
+    chalk: "npm:^4.1.0"
+    debug: "npm:^4.3.2"
+    dotenv: "npm:~16.4.5"
+    dotenv-expand: "npm:~11.0.6"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^10.4.2"
+    hermes-parser: "npm:^0.29.1"
+    jsc-safe-url: "npm:^0.2.4"
+    lightningcss: "npm:~1.27.0"
+    minimatch: "npm:^9.0.0"
+    postcss: "npm:~8.4.32"
+    resolve-from: "npm:^5.0.0"
+  peerDependencies:
+    expo: "*"
+  peerDependenciesMeta:
+    expo:
+      optional: true
+  checksum: 10c0/a95ccadb674a5185a11ca3cf8ee9c3a4e414f3ee979307a422d5a38f727988194e30450463e502cb3c00050530202c5f46b58273db257b6ee0a46f8f9d047ba9
+  languageName: node
+  linkType: hard
+
 "@expo/metro-runtime@npm:~6.1.1":
   version: 6.1.1
   resolution: "@expo/metro-runtime@npm:6.1.1"
@@ -6540,7 +6574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo-file-system@npm:~19.0.10, expo-file-system@npm:~19.0.8":
+"expo-file-system@npm:~19.0.10":
   version: 19.0.10
   resolution: "expo-file-system@npm:19.0.10"
   peerDependencies:
@@ -6550,6 +6584,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-file-system@npm:~19.0.8":
+  version: 19.0.9
+  resolution: "expo-file-system@npm:19.0.9"
+  peerDependencies:
+    expo: "*"
+    react-native: "*"
+  checksum: 10c0/bb49e603a116e163765d35a8c13a2cd86667dc2e3899add964e8ce2e18f78a6405fb353fafb45a8010990b07da6cfe2bbfcf933978423fed2fcd948e8ce7e909
+  languageName: node
+  linkType: hard
+
 "expo-font@npm:~14.0.7":
   version: 14.0.7
   resolution: "expo-font@npm:14.0.7"
@@ -11132,6 +11176,7 @@ __metadata:
     react-dom: "npm:19.1.0"
     react-native: "npm:0.81.1"
     react-native-builder-bob: "npm:^0.40.13"
+    react-native-css: "link:../"
     react-native-monorepo-config: "npm:^0.1.9"
     react-native-reanimated: "npm:4.0.2"
     react-native-web: "npm:~0.21.1"
@@ -11140,6 +11185,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"react-native-css@link:../::locator=react-native-css-example%40workspace%3Aexample":
+  version: 0.0.0-use.local
+  resolution: "react-native-css@link:../::locator=react-native-css-example%40workspace%3Aexample"
+  languageName: node
+  linkType: soft
+
 "react-native-css@workspace:.":
   version: 0.0.0-use.local
   resolution: "react-native-css@workspace:."