@kbach/react 0.6.51 → 1.0.0-beta.0

package/dist/jsx-dev-runtime.js

@@ -1,4 +1,3 @@
-'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -31,731 +30,490 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/jsx-dev-runtime.tsx
 var jsx_dev_runtime_exports = {};
 __export(jsx_dev_runtime_exports, {
-  Fragment: () => import_react4.Fragment,
+  Fragment: () => import_react.Fragment,
   jsxDEV: () => jsxDEV
 });
 module.exports = __toCommonJS(jsx_dev_runtime_exports);
 
 // src/jsx-runtime.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react4 = require("react");
-var import_core6 = require("./core");
+var import_react = require("react");
 
-// src/InteractiveWrapper.tsx
-var import_react2 = __toESM(require("react"));
-var import_core4 = require("./core");
-
-// src/useGlobalDarkMode.ts
-var import_core = require("./core");
-
-// src/useSyncExternalStoreShim.ts
-var import_react = __toESM(require("react"));
-var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, getServerSnapshot) {
-  const isServer = typeof window === "undefined";
-  const [, forceUpdate] = import_react.default.useReducer((n) => n + 1, 0);
-  const value = isServer && getServerSnapshot ? getServerSnapshot() : getSnapshot();
-  import_react.default.useEffect(() => {
-    if (getSnapshot() !== value) forceUpdate();
-    return subscribe(forceUpdate);
-  }, [subscribe]);
-  return value;
-};
-
-// src/useGlobalDarkMode.ts
-var NOOP_SUB = (_) => () => {
-};
-var FALSE_SNAP = () => false;
-function useConditionalGlobalDarkMode(active) {
-  return useSyncExternalStore(
-    active ? import_core.subscribeGlobalDarkMode : NOOP_SUB,
-    active ? import_core.getGlobalDarkMode : FALSE_SNAP,
-    FALSE_SNAP
-  );
+// src/wasmLoader.ts
+var import_core_engine = __toESM(require("@kbach/core-engine"));
+var ready = false;
+function generateCss(classString, themeJson) {
+  if (!ready) {
+    throw new Error(
+      "[kbach] generateCss() was called before initKbach() resolved. Call `await initKbach()` once at startup (e.g. before rendering your app) before using kb()."
+    );
+  }
+  return (0, import_core_engine.generate_css)(classString, themeJson);
 }
 
-// src/useGlobalWidth.ts
-var import_core2 = require("./core");
-var NOOP_SUB2 = (_) => () => {
+// src/generatedPalette.ts
+var PALETTE = {
+  "amber-1": "#fffbeb",
+  "amber-10": "#78350f",
+  "amber-11": "#451a03",
+  "amber-12": "#291002",
+  "amber-2": "#fef3c7",
+  "amber-3": "#fde68a",
+  "amber-4": "#fcd34d",
+  "amber-5": "#fbbf24",
+  "amber-6": "#f59e0b",
+  "amber-7": "#d97706",
+  "amber-8": "#b45309",
+  "amber-9": "#92400e",
+  "black": "#000000",
+  "blue-1": "#eff6ff",
+  "blue-10": "#1e3a8a",
+  "blue-11": "#172554",
+  "blue-12": "#0d1633",
+  "blue-2": "#dbeafe",
+  "blue-3": "#bfdbfe",
+  "blue-4": "#93c5fd",
+  "blue-5": "#60a5fa",
+  "blue-6": "#3b82f6",
+  "blue-7": "#2563eb",
+  "blue-8": "#1d4ed8",
+  "blue-9": "#1e40af",
+  "bronze": "#cd7f32",
+  "coal": "#1c1c1c",
+  "copper": "#b87333",
+  "current": "currentColor",
+  "cyan-1": "#ecfeff",
+  "cyan-10": "#164e63",
+  "cyan-11": "#083344",
+  "cyan-12": "#041e28",
+  "cyan-2": "#cffafe",
+  "cyan-3": "#a5f3fc",
+  "cyan-4": "#67e8f9",
+  "cyan-5": "#22d3ee",
+  "cyan-6": "#06b6d4",
+  "cyan-7": "#0891b2",
+  "cyan-8": "#0e7490",
+  "cyan-9": "#155e75",
+  "emerald-1": "#ecfdf5",
+  "emerald-10": "#064e3b",
+  "emerald-11": "#022c22",
+  "emerald-12": "#011a14",
+  "emerald-2": "#d1fae5",
+  "emerald-3": "#a7f3d0",
+  "emerald-4": "#6ee7b7",
+  "emerald-5": "#34d399",
+  "emerald-6": "#10b981",
+  "emerald-7": "#059669",
+  "emerald-8": "#047857",
+  "emerald-9": "#065f46",
+  "fuchsia-1": "#fdf4ff",
+  "fuchsia-10": "#701a75",
+  "fuchsia-11": "#4a044e",
+  "fuchsia-12": "#2d022f",
+  "fuchsia-2": "#fae8ff",
+  "fuchsia-3": "#f5d0fe",
+  "fuchsia-4": "#f0abfc",
+  "fuchsia-5": "#e879f9",
+  "fuchsia-6": "#d946ef",
+  "fuchsia-7": "#c026d3",
+  "fuchsia-8": "#a21caf",
+  "fuchsia-9": "#86198f",
+  "gold": "#d4af37",
+  "gray-1": "#f9fafb",
+  "gray-10": "#111827",
+  "gray-11": "#030712",
+  "gray-12": "#020409",
+  "gray-2": "#f3f4f6",
+  "gray-3": "#e5e7eb",
+  "gray-4": "#d1d5db",
+  "gray-5": "#9ca3af",
+  "gray-6": "#6b7280",
+  "gray-7": "#4b5563",
+  "gray-8": "#374151",
+  "gray-9": "#1f2937",
+  "green-1": "#f0fdf4",
+  "green-10": "#14532d",
+  "green-11": "#052e16",
+  "green-12": "#031b0d",
+  "green-2": "#dcfce7",
+  "green-3": "#bbf7d0",
+  "green-4": "#86efac",
+  "green-5": "#4ade80",
+  "green-6": "#22c55e",
+  "green-7": "#16a34a",
+  "green-8": "#15803d",
+  "green-9": "#166534",
+  "indigo-1": "#eef2ff",
+  "indigo-10": "#312e81",
+  "indigo-11": "#1e1b4b",
+  "indigo-12": "#12102d",
+  "indigo-2": "#e0e7ff",
+  "indigo-3": "#c7d2fe",
+  "indigo-4": "#a5b4fc",
+  "indigo-5": "#818cf8",
+  "indigo-6": "#6366f1",
+  "indigo-7": "#4f46e5",
+  "indigo-8": "#4338ca",
+  "indigo-9": "#3730a3",
+  "lime-1": "#f7fee7",
+  "lime-10": "#365314",
+  "lime-11": "#1a2e05",
+  "lime-12": "#0f1b03",
+  "lime-2": "#ecfccb",
+  "lime-3": "#d9f99d",
+  "lime-4": "#bef264",
+  "lime-5": "#a3e635",
+  "lime-6": "#84cc16",
+  "lime-7": "#65a30d",
+  "lime-8": "#4d7c0f",
+  "lime-9": "#3f6212",
+  "neutral-1": "#fafafa",
+  "neutral-10": "#171717",
+  "neutral-11": "#0a0a0a",
+  "neutral-12": "#050505",
+  "neutral-2": "#f5f5f5",
+  "neutral-3": "#e5e5e5",
+  "neutral-4": "#d4d4d4",
+  "neutral-5": "#a3a3a3",
+  "neutral-6": "#737373",
+  "neutral-7": "#525252",
+  "neutral-8": "#404040",
+  "neutral-9": "#262626",
+  "orange-1": "#fff7ed",
+  "orange-10": "#7c2d12",
+  "orange-11": "#431407",
+  "orange-12": "#270c04",
+  "orange-2": "#ffedd5",
+  "orange-3": "#fed7aa",
+  "orange-4": "#fdba74",
+  "orange-5": "#fb923c",
+  "orange-6": "#f97316",
+  "orange-7": "#ea580c",
+  "orange-8": "#c2410c",
+  "orange-9": "#9a3412",
+  "pink-1": "#fdf2f8",
+  "pink-10": "#831843",
+  "pink-11": "#500724",
+  "pink-12": "#300415",
+  "pink-2": "#fce7f3",
+  "pink-3": "#fbcfe8",
+  "pink-4": "#f9a8d4",
+  "pink-5": "#f472b6",
+  "pink-6": "#ec4899",
+  "pink-7": "#db2777",
+  "pink-8": "#be185d",
+  "pink-9": "#9d174d",
+  "purple-1": "#faf5ff",
+  "purple-10": "#581c87",
+  "purple-11": "#3b0764",
+  "purple-12": "#23043c",
+  "purple-2": "#f3e8ff",
+  "purple-3": "#e9d5ff",
+  "purple-4": "#d8b4fe",
+  "purple-5": "#c084fc",
+  "purple-6": "#a855f7",
+  "purple-7": "#9333ea",
+  "purple-8": "#7e22ce",
+  "purple-9": "#6b21a8",
+  "red-1": "#fef2f2",
+  "red-10": "#7f1d1d",
+  "red-11": "#450a0a",
+  "red-12": "#280606",
+  "red-2": "#fee2e2",
+  "red-3": "#fecaca",
+  "red-4": "#fca5a5",
+  "red-5": "#f87171",
+  "red-6": "#ef4444",
+  "red-7": "#dc2626",
+  "red-8": "#b91c1c",
+  "red-9": "#991b1b",
+  "rose-1": "#fff1f2",
+  "rose-10": "#881337",
+  "rose-11": "#4c0519",
+  "rose-12": "#2d030e",
+  "rose-2": "#ffe4e6",
+  "rose-3": "#fecdd3",
+  "rose-4": "#fda4af",
+  "rose-5": "#fb7185",
+  "rose-6": "#f43f5e",
+  "rose-7": "#e11d48",
+  "rose-8": "#be123c",
+  "rose-9": "#9f1239",
+  "silver": "#c0c0c0",
+  "sky-1": "#f0f9ff",
+  "sky-10": "#0c4a6e",
+  "sky-11": "#082f49",
+  "sky-12": "#041b2b",
+  "sky-2": "#e0f2fe",
+  "sky-3": "#bae6fd",
+  "sky-4": "#7dd3fc",
+  "sky-5": "#38bdf8",
+  "sky-6": "#0ea5e9",
+  "sky-7": "#0284c7",
+  "sky-8": "#0369a1",
+  "sky-9": "#075985",
+  "slate-1": "#f8fafc",
+  "slate-10": "#0f172a",
+  "slate-11": "#020617",
+  "slate-12": "#01020a",
+  "slate-2": "#f1f5f9",
+  "slate-3": "#e2e8f0",
+  "slate-4": "#cbd5e1",
+  "slate-5": "#94a3b8",
+  "slate-6": "#64748b",
+  "slate-7": "#475569",
+  "slate-8": "#334155",
+  "slate-9": "#1e293b",
+  "stone-1": "#fafaf9",
+  "stone-10": "#1c1917",
+  "stone-11": "#0c0a09",
+  "stone-12": "#070605",
+  "stone-2": "#f5f5f4",
+  "stone-3": "#e7e5e4",
+  "stone-4": "#d6d3d1",
+  "stone-5": "#a8a29e",
+  "stone-6": "#78716c",
+  "stone-7": "#57534e",
+  "stone-8": "#44403c",
+  "stone-9": "#292524",
+  "teal-1": "#f0fdfa",
+  "teal-10": "#134e4a",
+  "teal-11": "#042f2e",
+  "teal-12": "#021c1b",
+  "teal-2": "#ccfbf1",
+  "teal-3": "#99f6e4",
+  "teal-4": "#5eead4",
+  "teal-5": "#2dd4bf",
+  "teal-6": "#14b8a6",
+  "teal-7": "#0d9488",
+  "teal-8": "#0f766e",
+  "teal-9": "#115e59",
+  "transparent": "transparent",
+  "violet-1": "#f5f3ff",
+  "violet-10": "#4c1d95",
+  "violet-11": "#2e1065",
+  "violet-12": "#1c0a3d",
+  "violet-2": "#ede9fe",
+  "violet-3": "#ddd6fe",
+  "violet-4": "#c4b5fd",
+  "violet-5": "#a78bfa",
+  "violet-6": "#8b5cf6",
+  "violet-7": "#7c3aed",
+  "violet-8": "#6d28d9",
+  "violet-9": "#5b21b6",
+  "white": "#ffffff",
+  "yellow-1": "#fefce8",
+  "yellow-10": "#713f12",
+  "yellow-11": "#422006",
+  "yellow-12": "#271304",
+  "yellow-2": "#fef9c3",
+  "yellow-3": "#fef08a",
+  "yellow-4": "#fde047",
+  "yellow-5": "#facc15",
+  "yellow-6": "#eab308",
+  "yellow-7": "#ca8a04",
+  "yellow-8": "#a16207",
+  "yellow-9": "#854d0e",
+  "zinc-1": "#fafafa",
+  "zinc-10": "#18181b",
+  "zinc-11": "#09090b",
+  "zinc-12": "#050506",
+  "zinc-2": "#f4f4f5",
+  "zinc-3": "#e4e4e7",
+  "zinc-4": "#d4d4d8",
+  "zinc-5": "#a1a1aa",
+  "zinc-6": "#71717a",
+  "zinc-7": "#52525b",
+  "zinc-8": "#3f3f46",
+  "zinc-9": "#27272a"
 };
-var ZERO_SNAP = () => 0;
-var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
-var _webListeners = null;
-var _webRaf = 0;
-function _webResizeHandler() {
-  cancelAnimationFrame(_webRaf);
-  _webRaf = requestAnimationFrame(() => {
-    if (_webListeners) for (const cb of _webListeners) cb();
-  });
-}
-function subscribeWebWidth(cb) {
-  if (typeof window === "undefined") return () => {
-  };
-  if (!_webListeners) {
-    _webListeners = /* @__PURE__ */ new Set();
-    window.addEventListener("resize", _webResizeHandler);
-  }
-  _webListeners.add(cb);
-  return () => {
-    _webListeners.delete(cb);
-    if (_webListeners.size === 0) {
-      window.removeEventListener("resize", _webResizeHandler);
-      cancelAnimationFrame(_webRaf);
-      _webListeners = null;
-    }
-  };
-}
-function getWebWidth() {
-  return typeof window !== "undefined" ? window.innerWidth : 0;
-}
-function useConditionalWidth(active) {
-  return useSyncExternalStore(
-    active ? import_core2.isWeb ? subscribeWebWidth : import_core2.subscribeGlobalWidth : NOOP_SUB2,
-    active ? import_core2.isWeb ? getWebWidth : import_core2.getGlobalWidth : ZERO_SNAP,
-    ZERO_SNAP
-  );
-}
 
-// src/shared-utils.ts
-var import_core3 = require("./core");
-function hasResponsiveBuckets(resolved) {
-  const responsiveMods = (0, import_core3.getResponsiveModifiers)();
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (responsiveMods.has(mod)) return true;
-    }
-  }
-  return false;
-}
-function chain(original, extra) {
-  return (...args) => {
-    original?.(...args);
-    extra();
-  };
-}
-function stripInternalMarkers(s) {
-  delete s.__divideX;
-  delete s.__divideY;
-  delete s.__divideColor;
-  delete s.__divideStyle;
-  delete s.__keyframe;
-}
-function stripWebOnlyProps(s) {
-  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-  delete s.gridTemplateColumns;
-  delete s.gridTemplateRows;
-  delete s.gridColumn;
-  delete s.gridRow;
-  delete s.gridArea;
-  delete s.gridColumnStart;
-  delete s.gridColumnEnd;
-  delete s.gridRowStart;
-  delete s.gridRowEnd;
-  delete s.gridAutoFlow;
-  delete s.gridAutoColumns;
-  delete s.gridAutoRows;
-  delete s.placeItems;
-  delete s.placeContent;
-  delete s.justifyItems;
-  delete s.placeSelf;
-  delete s.justifySelf;
-  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-    delete s.position;
-  }
-}
-function composeNativeStyle(computed, userStyle) {
-  if (!userStyle) return computed;
-  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
+// src/theme.ts
+var defaultTheme = {
+  colors: {
+    ...PALETTE,
+    surface: { light: "#f9fafb", dark: "#111827" }
+  },
+  spacing: {
+    // "0" is always a hardcoded zero in real Tailwind's own scale too,
+    // regardless of the base spacing unit — needed for `p-0`/`m-0`/
+    // `top-0`/`inset-0`/etc., and specifically for `sticky top-0` (a
+    // sticky element needs an explicit offset to have any stick point at
+    // all; without one it behaves just like `relative`, no different from
+    // omitting `top-0` outright). Confirmed missing by hand: this
+    // sandbox's own header used `sticky top-0`, which silently never
+    // resolved (no "0" spacing key existed) until this was added.
+    "0": 0,
+    "1": 4,
+    "2": 8,
+    "4": 16,
+    "6": 24,
+    "8": 32
+  },
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
+  darkMode: "attribute"
+};
+var activeThemeJson = JSON.stringify(defaultTheme);
+function getThemeJson() {
+  return activeThemeJson;
 }
 
-// src/InteractiveWrapper.tsx
-var InteractiveWrapper = (0, import_react2.forwardRef)(
-  function InteractiveWrapper2({
-    Component,
-    resolvedStyle,
-    className,
-    style: styleProp,
-    onPressIn,
-    onPressOut,
-    onPointerDown,
-    onPointerUp,
-    onPointerLeave,
-    onPointerCancel,
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    ...rest
-  }, ref) {
-    const isWebPlatform = (0, import_core4.getEffectiveIsWeb)();
-    const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
-    const needsWidth = hasResponsiveBuckets(resolvedStyle);
-    const width = useConditionalWidth(needsWidth && !isWebPlatform);
-    const breakpoints = needsWidth ? (0, import_core4.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
-    const screens = (0, import_core4.getGlobalScreens)();
-    const [pressed, setPressed] = (0, import_react2.useState)(false);
-    const [hovered, setHovered] = (0, import_react2.useState)(false);
-    const [focused, setFocused] = (0, import_react2.useState)(false);
-    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => {
-      if (!isWebPlatform) setPressed(true);
-    }), [onPressIn, isWebPlatform]);
-    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => {
-      if (!isWebPlatform) setPressed(false);
-    }), [onPressOut, isWebPlatform]);
-    const handlePointerDown = (0, import_react2.useCallback)(chain(onPointerDown, () => {
-      if (!isWebPlatform) setPressed(true);
-    }), [onPointerDown, isWebPlatform]);
-    const handlePointerUp = (0, import_react2.useCallback)(chain(onPointerUp, () => {
-      if (!isWebPlatform) setPressed(false);
-    }), [onPointerUp, isWebPlatform]);
-    const handlePointerLeave = (0, import_react2.useCallback)(chain(onPointerLeave, () => {
-      if (!isWebPlatform) setPressed(false);
-    }), [onPointerLeave, isWebPlatform]);
-    const handlePointerCancel = (0, import_react2.useCallback)(chain(onPointerCancel, () => {
-      if (!isWebPlatform) setPressed(false);
-    }), [onPointerCancel, isWebPlatform]);
-    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => {
-      if (!isWebPlatform) setHovered(true);
-    }), [onMouseEnter, isWebPlatform]);
-    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => {
-      if (!isWebPlatform) setHovered(false);
-    }), [onMouseLeave, isWebPlatform]);
-    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => {
-      if (!isWebPlatform) setFocused(true);
-    }), [onFocus, isWebPlatform]);
-    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => {
-      if (!isWebPlatform) setFocused(false);
-    }), [onBlur, isWebPlatform]);
-    const { children, disabled, checked, ...restForComponent } = rest;
-    const isNonStringComponent = typeof Component !== "string";
-    const computedStyle = (0, import_react2.useMemo)(
-      () => {
-        if (isWebPlatform) return {};
-        const s = (0, import_core4.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
-        stripInternalMarkers(s);
-        if (isNonStringComponent) stripWebOnlyProps(s);
-        return s;
-      },
-      [resolvedStyle, isDark, pressed, hovered, focused, width, screens, disabled, checked, isNonStringComponent]
-    );
-    const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
-    const componentProps = {
-      ref,
-      ...restForComponent,
-      ...disabled !== void 0 ? { disabled } : {},
-      ...checked !== void 0 ? { checked } : {},
-      style: finalStyle,
-      ...!import_core4.isNative && className ? { className } : {},
-      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
-      // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
-      // Component isn't a literal HTML tag string. A non-string Component on web is just as
-      // likely to be an ordinary web component (React Router's <Link>, Next.js's <Link>, any
-      // custom wrapper) as an actual react-native-web primitive — "not a string" alone was never
-      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
-      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
-      // component got an interactive modifier (hover:, active:, …), which is the common case,
-      // not the exception. (A real react-native-web primitive would additionally have this pair
-      // of props silently vanish after hydration anyway, once the browser-only web-substitution
-      // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
-      // only have traded one prop-mismatch warning for another.) Genuinely native code paths
-      // still get them via the isNative branch below.
-      ...!import_core4.isNative ? {
-        onPointerDown: handlePointerDown,
-        onPointerUp: handlePointerUp,
-        onPointerLeave: handlePointerLeave,
-        onPointerCancel: handlePointerCancel
-      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    };
-    return Array.isArray(children) ? import_react2.default.createElement(Component, componentProps, ...children) : import_react2.default.createElement(Component, componentProps, children);
-  }
-);
-InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
-
-// src/DarkWrapper.tsx
-var import_react3 = __toESM(require("react"));
-var import_core5 = require("./core");
-var DarkWrapper = import_react3.default.forwardRef(
-  function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
-    const isWebPlatform = (0, import_core5.getEffectiveIsWeb)();
-    const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
-    const needsWidth = hasResponsiveBuckets(resolvedStyle);
-    const width = useConditionalWidth(needsWidth && !isWebPlatform);
-    const breakpoints = needsWidth ? (0, import_core5.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
-    const screens = (0, import_core5.getGlobalScreens)();
-    const isNonStringComponent = typeof Component !== "string";
-    const computedStyle = (0, import_react3.useMemo)(() => {
-      if (isWebPlatform) return {};
-      const s = (0, import_core5.flatten)(resolvedStyle, isDark, {}, breakpoints);
-      stripInternalMarkers(s);
-      if (isNonStringComponent) stripWebOnlyProps(s);
-      return s;
-    }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
-    const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
-    const props = { ref, ...rest, style: finalStyle };
-    return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
-  }
-);
-DarkWrapper.displayName = "Kbach.DarkWrapper";
+// src/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
+var RESET_RULES = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  { css: "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }" },
+  { css: "body { margin: 0; padding: 0; }" },
+  { css: "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }", tags: ["h1", "h2", "h3", "h4", "h5", "h6"] },
+  { css: "p { margin: 0; }", tags: ["p"] },
+  { css: "a { color: inherit; text-decoration: none; }", tags: ["a"] },
+  { css: "ul, ol { margin: 0; padding: 0; list-style: none; }", tags: ["ul", "ol"] },
+  // svg here only covers a literal <svg> tag in JSX — an icon imported as
+  // a component (e.g. `<ArrowIcon />`) never appears as the text "svg" in
+  // source, so this rule won't be pulled in by that usage alone. Same
+  // caveat applies to every tag-gated rule below: detection is a literal
+  // source-text scan (see vite-plugin/scan.ts's scanUsedTags), not a real
+  // DOM/type check.
+  { css: "img, video, svg { display: block; max-width: 100%; }", tags: ["img", "video", "svg"] },
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  {
+    css: "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+    tags: ["input", "textarea"]
+  },
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch. Wrapped in :where() for the exact
+  // same reason as the input:not(...) exclusions above — a bare
+  // `input[type='range']` attribute selector has specificity (0,1,1),
+  // MORE than any single utility class (0,1,0), so an `accent-*` utility
+  // (Phase 23) applied directly to a checkbox/radio/range would resolve and
+  // inject correctly but silently never paint, losing the cascade to this
+  // reset regardless of source order — confirmed by hand via
+  // getComputedStyle on a real `accent-red-6` range input, which reported
+  // `currentColor`'s inherited value instead. `:where()` zeroes this
+  // selector's specificity contribution entirely, so any `accent-*`
+  // utility trivially wins once applied.
+  {
+    css: ":where(input[type='checkbox'], input[type='radio'], input[type='range']) { margin: 0; font: inherit; accent-color: currentColor; }",
+    tags: ["input"]
+  },
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  { css: "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }", tags: ["select"] },
+  { css: "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }", tags: ["button"] },
+  // Also covers any element opted into the button role (`role="button"` on
+  // a <div>/<span>) — but only when a literal <button> tag is ALSO
+  // somewhere in the scanned source, since detection here is purely
+  // tag-name-based; a project using role="button" exclusively, with no
+  // real <button> anywhere, won't pull this rule in. Acceptable tradeoff
+  // for this project's scope (rare pattern) — cheap enough that scanning
+  // for it separately isn't worth the added complexity.
+  { css: "button, [role='button'] { cursor: pointer; }", tags: ["button"] },
+  { css: ":disabled { cursor: default; }", tags: ["button", "input", "select", "textarea"] },
+  { css: "textarea { resize: vertical; }", tags: ["textarea"] },
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  { css: "::placeholder { opacity: 1; }", tags: ["input", "textarea"] },
+  { css: "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }", tags: ["input"] },
+  { css: "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }", tags: ["input"] },
+  { css: "fieldset { padding: 0; margin: 0; }", tags: ["fieldset"] },
+  { css: "table { border-collapse: collapse; border-spacing: 0; }", tags: ["table"] }
+];
+var BASE_RESET = RESET_RULES.map((r) => r.css).join("\n");
 
-// src/web-substitute.ts
-var _rnToHtml = {
-  View: "div",
-  SafeAreaView: "div",
-  KeyboardAvoidingView: "div",
-  ScrollView: "div",
-  VirtualizedList: "div",
-  FlatList: "div",
-  SectionList: "div",
-  Text: "span",
-  TextInput: "input",
-  Image: "img",
-  ImageBackground: "div",
-  Pressable: "div",
-  TouchableOpacity: "div",
-  TouchableHighlight: "div",
-  TouchableWithoutFeedback: "div",
-  TouchableNativeFeedback: "div"
-};
-var _userMap = /* @__PURE__ */ new Map();
-var _cache = /* @__PURE__ */ new WeakMap();
-var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
-  /* @__PURE__ */ Symbol.for("react.forward_ref"),
-  /* @__PURE__ */ Symbol.for("react.memo")
-]);
-function looksLikeRealRNPrimitive(type) {
-  const t = type.$$typeof;
-  if (t !== void 0) return _forwardRefOrMemoType.has(t);
-  return !!type.prototype?.isReactComponent;
+// src/kb.ts
+var runtimeCSSDisabled = false;
+var styleEl = null;
+var sheetKeys = [];
+var ruleOrderByKey = /* @__PURE__ */ new Map();
+function getStyleEl() {
+  if (styleEl) return styleEl;
+  styleEl = document.createElement("style");
+  styleEl.setAttribute("data-kbach", "");
+  document.head.appendChild(styleEl);
+  return styleEl;
 }
-function getWebTag(type, props) {
-  if (typeof type === "string") return null;
-  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
-  const obj = type;
-  if (_userMap.has(obj)) return _userMap.get(obj);
-  if (!looksLikeRealRNPrimitive(obj)) return null;
-  const name = obj.displayName ?? obj.name;
-  if (!name) {
-    _cache.set(obj, null);
-    return null;
-  }
-  if (name === "TextInput") {
-    const multiline = !!props && (props.multiline === true || Number(props.numberOfLines) > 1);
-    return multiline ? "textarea" : "input";
+function findInsertionIndex(order) {
+  let lo = 0;
+  let hi = sheetKeys.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (ruleOrderByKey.get(sheetKeys[mid]) > order) hi = mid;
+    else lo = mid + 1;
   }
-  if (_cache.has(obj)) return _cache.get(obj);
-  const tag = _rnToHtml[name] ?? null;
-  _cache.set(obj, tag);
-  return tag;
+  return lo;
 }
-function getImpliedRNClasses(webTag, resolvedBase) {
-  if (!webTag || !resolvedBase) return void 0;
-  const classes = [];
-  if (resolvedBase.position === void 0) classes.push("relative");
-  const explicitDisplay = resolvedBase.display;
-  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
-  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
-    classes.push("flex-col");
+function injectRule(rule, order) {
+  if (ruleOrderByKey.has(rule)) return;
+  const sheet = getStyleEl().sheet;
+  if (!sheet) return;
+  const idx = findInsertionIndex(order);
+  try {
+    sheet.insertRule(rule, idx);
+  } catch {
+    return;
   }
-  return classes.length > 0 ? classes.join(" ") : void 0;
+  sheetKeys.splice(idx, 0, rule);
+  ruleOrderByKey.set(rule, order);
 }
-var _rnOnlyProps = /* @__PURE__ */ new Set([
-  // Interaction
-  "onLongPress",
-  "delayLongPress",
-  "activeOpacity",
-  "underlayColor",
-  "hitSlop",
-  "pressRetentionOffset",
-  "android_ripple",
-  "android_disableSound",
-  "onHoverIn",
-  "onHoverOut",
-  "onHoverStart",
-  "onHoverEnd",
-  // Layout event
-  "onLayout",
-  // Accessibility
-  "accessible",
-  "accessibilityState",
-  "accessibilityLiveRegion",
-  "importantForAccessibility",
-  // Platform
-  "nativeID",
-  "collapsable",
-  "needsOffscreenAlphaCompositing",
-  "renderToHardwareTextureAndroid",
-  "shouldRasterizeIOS",
-  "focusable",
-  "hasTVPreferredFocus",
-  // 'pointerEvents' is handled in transformToWebProps (mapped to CSS style)
-  // Text
-  "selectable",
-  "allowFontScaling",
-  "adjustsFontSizeToFit",
-  "minimumFontScale",
-  "ellipsizeMode",
-  "numberOfLines",
-  "onTextLayout",
-  "textBreakStrategy",
-  "lineBreakStrategyIOS",
-  // TextInput
-  "multiline",
-  // NOTE: 'resizeMode' (Image's prop, not TextInput's) deliberately does NOT
-  // go here — it's handled below in the isImage branch (mapped to CSS
-  // object-fit). Blacklisting it here would make that branch unreachable.
-  "blurOnSubmit",
-  "clearButtonMode",
-  "clearTextOnFocus",
-  "enablesReturnKeyAutomatically",
-  "returnKeyType",
-  "spellCheck",
-  // ScrollView
-  "scrollEnabled",
-  "showsVerticalScrollIndicator",
-  "showsHorizontalScrollIndicator",
-  "contentContainerStyle",
-  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
-  "keyboardShouldPersistTaps",
-  "keyboardDismissMode",
-  "pagingEnabled",
-  "scrollEventThrottle",
-  "decelerationRate",
-  "bounces",
-  "alwaysBounceHorizontal",
-  "alwaysBounceVertical",
-  "snapToAlignment",
-  "snapToInterval",
-  "snapToOffsets",
-  "removeClippedSubviews",
-  "overScrollMode",
-  "stickyHeaderIndices",
-  "invertStickyHeaders",
-  "onScrollBeginDrag",
-  "onScrollEndDrag",
-  "onMomentumScrollBegin",
-  "onMomentumScrollEnd",
-  "contentInset",
-  "contentInsetAdjustmentBehavior",
-  "automaticallyAdjustContentInsets",
-  "automaticallyAdjustsScrollIndicatorInsets",
-  // expo-image
-  "contentPosition",
-  "cachePolicy",
-  "recyclingKey",
-  "blurRadius",
-  "fadeDuration",
-  "responsivePolicy",
-  "tintColor",
-  "allowDownscaling",
-  "placeholderContentFit",
-  // FlatList / SectionList
-  "data",
-  "renderItem",
-  "keyExtractor",
-  "getItemLayout",
-  "initialScrollIndex",
-  "initialNumToRender",
-  "maxToRenderPerBatch",
-  "windowSize",
-  "updateCellsBatchingPeriod",
-  "onEndReached",
-  "onEndReachedThreshold",
-  "ListHeaderComponent",
-  "ListFooterComponent",
-  "ListEmptyComponent",
-  "ListHeaderComponentStyle",
-  "ListFooterComponentStyle",
-  "ItemSeparatorComponent",
-  "SectionSeparatorComponent",
-  "inverted",
-  "getItem",
-  "getItemCount"
-]);
-var _pressableNames = /* @__PURE__ */ new Set([
-  "Pressable",
-  "TouchableOpacity",
-  "TouchableHighlight",
-  "TouchableWithoutFeedback",
-  "TouchableNativeFeedback"
-]);
-var _keyboardTypeMap = {
-  "numeric": "number",
-  "number-pad": "number",
-  "decimal-pad": "decimal",
-  "email-address": "email",
-  "phone-pad": "tel",
-  "url": "url"
-};
-var _resizeModeMap = {
-  "contain": "contain",
-  "cover": "cover",
-  "stretch": "fill",
-  "center": "none",
-  "repeat": "none"
-};
-var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
-var _placeholderRuleInjected = false;
-function ensurePlaceholderColorRuleInjected() {
-  if (_placeholderRuleInjected || typeof document === "undefined") return;
-  _placeholderRuleInjected = true;
-  const style = document.createElement("style");
-  style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
-  document.head.appendChild(style);
+var resetChecked = false;
+function ensureResetInjected() {
+  if (resetChecked) return;
+  resetChecked = true;
+  if (document.getElementById(RESET_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = RESET_STYLE_ID;
+  el.textContent = BASE_RESET;
+  document.head.insertBefore(el, document.head.firstChild);
 }
-function transformToWebProps(originalName, tag, props) {
-  const out = {};
-  const isPressable = _pressableNames.has(originalName);
-  const isTextInput = originalName === "TextInput";
-  const isImage = originalName === "Image" || originalName === "ImageBackground";
-  const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
-  let pendingStyle = null;
-  for (const [k, v] of Object.entries(props)) {
-    if (_rnOnlyProps.has(k)) continue;
-    if (k === "onPress") {
-      if (!("onClick" in props)) out.onClick = v;
-      continue;
-    }
-    if (k === "accessibilityLabel") {
-      if (out["aria-label"] == null) out["aria-label"] = v;
-      continue;
-    }
-    if (k === "accessibilityRole") {
-      if (out.role == null) out.role = v;
-      continue;
-    }
-    if (k === "testID") {
-      if (out["data-testid"] == null) out["data-testid"] = v;
-      continue;
-    }
-    if (isTextInput) {
-      if (k === "onChangeText") {
-        if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
-        continue;
-      }
-      if (k === "onSubmitEditing") {
-        if (!("onKeyDown" in props)) {
-          out.onKeyDown = (e) => {
-            if (e.key === "Enter") v();
-          };
-        }
-        continue;
-      }
-      if (k === "placeholderTextColor") {
-        if (v) {
-          ensurePlaceholderColorRuleInjected();
-          out[PLACEHOLDER_RULE_ATTR] = "";
-          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
-        }
-        continue;
-      }
-      if (k === "secureTextEntry") {
-        if (v && !("type" in props)) out.type = "password";
-        continue;
-      }
-      if (k === "keyboardType") {
-        if (!("type" in props) && !props.secureTextEntry) {
-          const mapped = _keyboardTypeMap[v];
-          if (mapped) out.type = mapped;
-        }
-        continue;
-      }
-      if (k === "editable") {
-        if (v === false) out.readOnly = true;
-        continue;
-      }
-      if (k === "maxLength") {
-        out.maxLength = v;
-        continue;
-      }
-    }
-    if (isScrollable && k === "horizontal") {
-      if (v) pendingStyle = { ...pendingStyle ?? {}, display: "flex", flexDirection: "row", overflowX: "auto" };
-      continue;
+function kb(classString) {
+  const json = generateCss(classString, getThemeJson());
+  const { className, rules } = JSON.parse(json);
+  if (!runtimeCSSDisabled) {
+    ensureResetInjected();
+    for (const { rule, order } of rules) {
+      injectRule(rule, order);
     }
-    if (k === "pointerEvents") {
-      if (v === "none" || v === "auto") pendingStyle = { ...pendingStyle ?? {}, pointerEvents: v };
-      continue;
-    }
-    if (isImage) {
-      if (k === "source") {
-        if (typeof v === "string") {
-          out.src = v;
-        } else if (v && typeof v === "object" && "uri" in v) {
-          out.src = v.uri;
-          if (v.headers) out["crossOrigin"] = "anonymous";
-        }
-        continue;
-      }
-      if (k === "resizeMode") {
-        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
-        continue;
-      }
-      if (k === "contentFit") {
-        pendingStyle = { ...pendingStyle ?? {}, objectFit: v };
-        continue;
-      }
-      if (k === "defaultSource") continue;
-    }
-    if (k === "style") {
-      if (Array.isArray(v)) {
-        out.style = Object.assign({}, ...v.filter(Boolean));
-      } else if (v != null) {
-        out.style = v;
-      }
-      continue;
-    }
-    out[k] = v;
-  }
-  if (pendingStyle) {
-    out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (isPressable && !out.role) out.role = "button";
-  if (isImage && tag === "img" && out.alt == null) out.alt = "";
-  return out;
+  return className;
 }
 
 // src/jsx-runtime.tsx
-var _cachedDefaultFont = void 0;
-var _defaultFontVersion = 0;
-var _lastFontVersion = -1;
-function _invalidateDefaultFontCache() {
-  _defaultFontVersion++;
-}
-{
-  const _KEY = "__kbach_font_cache_unsub__";
-  const g = globalThis;
-  if (g[_KEY]) g[_KEY]();
-  g[_KEY] = (0, import_core6.onConfigChange)(_invalidateDefaultFontCache);
-}
-function getCachedDefaultFont() {
-  if (_lastFontVersion !== _defaultFontVersion) {
-    _cachedDefaultFont = (0, import_core6.getDefaultFontFamily)();
-    _lastFontVersion = _defaultFontVersion;
-  }
-  return _cachedDefaultFont;
-}
-var _bucketModsCache = /* @__PURE__ */ new WeakMap();
-function bucketMods(resolved) {
-  const cached = _bucketModsCache.get(resolved);
-  if (cached) return cached;
-  const interactiveMods = (0, import_core6.getInteractiveModifiers)();
-  const modeMods = (0, import_core6.getModeModifiers)();
-  const responsiveMods = (0, import_core6.getResponsiveModifiers)();
-  let interactive = false;
-  let modeOrResponsive = false;
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (!interactive && interactiveMods.has(mod)) interactive = true;
-      if (!modeOrResponsive && (modeMods.has(mod) || responsiveMods.has(mod))) modeOrResponsive = true;
-    }
-    if (interactive && modeOrResponsive) break;
-  }
-  const result = { interactive, modeOrResponsive };
-  _bucketModsCache.set(resolved, result);
-  return result;
-}
-var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
-function omitConsumed(props) {
-  const out = {};
-  for (const key of Object.keys(props)) {
-    if (!CONSUMED_PROPS.has(key)) out[key] = props[key];
-  }
-  return out;
-}
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
 function processElement(type, rawProps, key, isStaticChildren) {
-  if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  const webTag = (0, import_core6.getEffectiveIsWeb)() ? getWebTag(type, rawProps ?? void 0) : null;
-  const effectiveType = webTag ?? type;
-  const originalName = webTag ? type?.displayName ?? type?.name : void 0;
-  if (!rawProps) return (0, import_jsx_runtime.jsx)(effectiveType, null, key);
-  const workingProps = webTag && originalName ? transformToWebProps(originalName, webTag, rawProps) : rawProps;
-  const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
-  const classStrRaw = className ?? kbProp ?? __kbachClasses;
-  if (classStrRaw !== void 0 && typeof classStrRaw !== "string") {
-    return makeElement(isStaticChildren, effectiveType, workingProps, key);
-  }
-  const classStr = classStrRaw;
-  const config = (0, import_core6.getConfig)();
-  let expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
-  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
-    const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
-    return makeElement(isStaticChildren, effectiveType, {
-      ...passProps2,
-      className: (0, import_core6.normalizeClassString)(expandedClassStr),
-      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
-    }, key);
-  }
-  if (classStr && !__kbachStyles && /^(__[A-Za-z0-9_]+\s*)+$/.test(classStr.trim())) {
-    const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
-    return makeElement(isStaticChildren, effectiveType, {
-      ...passProps2,
-      className: classStr,
-      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
-    }, key);
-  }
-  if (!classStr && !__kbachStyles) {
-    if ((0, import_core6.getEffectiveIsWeb)()) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
-    const defaultFont = getCachedDefaultFont();
-    if (!defaultFont || getWebTag(type) !== "span") {
-      return makeElement(isStaticChildren, effectiveType, workingProps, key);
-    }
-    const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
-    const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
-    return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
-  }
-  let resolved = import_core6.isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
-  const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
-  if (impliedClasses) {
-    expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
-    resolved = (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode);
-  }
-  const { style: userStyle, ...passProps } = omitConsumed(workingProps);
-  const { interactive, modeOrResponsive } = bucketMods(resolved);
-  if (interactive) {
-    return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
-      Component: effectiveType,
-      resolvedStyle: resolved,
-      ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {},
-      style: userStyle,
-      ...passProps
-    }, key);
-  }
-  if (modeOrResponsive) {
-    return (0, import_jsx_runtime.jsx)(DarkWrapper, {
-      Component: effectiveType,
-      resolvedStyle: resolved,
-      ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {},
-      style: userStyle,
-      ...passProps
-    }, key);
+  if (type === null || typeof type === "symbol" || !rawProps) {
+    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   }
-  const skipComputedInline = (0, import_core6.getEffectiveIsWeb)();
-  let finalStyle;
-  if (!skipComputedInline) {
-    const computedStyle = (0, import_core6.flatten)(resolved, false);
-    stripInternalMarkers(computedStyle);
-    if (typeof effectiveType !== "string") stripWebOnlyProps(computedStyle);
-    finalStyle = composeNativeStyle(computedStyle, userStyle);
-  } else {
-    finalStyle = userStyle ?? void 0;
+  const { className: classStrRaw, ...rest } = rawProps;
+  if (typeof classStrRaw !== "string") {
+    return makeElement(isStaticChildren, type, rawProps, key);
   }
-  return makeElement(isStaticChildren, effectiveType, {
-    ...passProps,
-    ...finalStyle !== void 0 ? { style: finalStyle } : {},
-    ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {}
-  }, key);
+  return makeElement(isStaticChildren, type, { ...rest, className: kb(classStrRaw) }, key);
 }
 function jsx(type, props, key) {
   return processElement(type, props, key, false);