@kbach/react 0.5.60 → 0.6.0

package/dist/index.js

@@ -33,7 +33,6 @@ __export(index_exports, {
   InteractiveWrapper: () => InteractiveWrapper,
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
-  ThemeToggle: () => ThemeToggle,
   buildConfig: () => buildConfig,
   cx: () => cx,
   defaultColors: () => defaultColors,
@@ -1326,10 +1325,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1344,10 +1345,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2248,9 +2251,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2467,10 +2470,17 @@ var RESOLVERS = {
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_RING_WIDTH = 3;
     const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
-    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     return {
-      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -3416,153 +3426,14 @@ function ThemeProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children });
 }
 
-// src/ThemeToggle.tsx
-var import_react4 = __toESM(require("react"));
-function getPrimitives() {
-  try {
-    const RN = require("react-native");
-    return {
-      View: RN.View,
-      Text: RN.Text,
-      Touchable: RN.TouchableOpacity,
-      Switch: RN.Switch
-    };
-  } catch {
-    const View = ({ style, ...rest }) => import_react4.default.createElement("div", { style, ...rest });
-    const Text = ({ style, ...rest }) => import_react4.default.createElement("span", { style, ...rest });
-    const Touchable = ({ onPress, style, ...rest }) => import_react4.default.createElement("button", { onClick: onPress, style, ...rest });
-    const Switch = ({
-      value,
-      onValueChange,
-      accessibilityLabel
-    }) => import_react4.default.createElement("input", {
-      type: "checkbox",
-      checked: value,
-      onChange: (e) => onValueChange?.(e.target.checked),
-      "aria-label": accessibilityLabel
-    });
-    return { View, Text, Touchable, Switch };
-  }
-}
-var { View: _View, Text: _Text, Touchable: _Touchable, Switch: _Switch } = getPrimitives();
-function ThemeToggle({
-  variant = "button",
-  label,
-  lightLabel = "Light",
-  darkLabel = "Dark",
-  includeSystem = false,
-  style,
-  labelStyle
-}) {
-  const { mode, isDark, setMode, toggle } = useTheme();
-  const View = _View, Text = _Text, Touchable = _Touchable, Switch = _Switch;
-  if (variant === "switch") {
-    return import_react4.default.createElement(
-      View,
-      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
-      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
-      import_react4.default.createElement(Switch, {
-        value: isDark,
-        onValueChange: (v) => setMode(v ? "dark" : "light"),
-        trackColor: { false: "#d1d5db", true: "#6366f1" },
-        thumbColor: isDark ? "#ffffff" : "#f3f4f6",
-        ios_backgroundColor: "#d1d5db",
-        accessibilityLabel: "Toggle dark mode"
-      }),
-      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
-    );
-  }
-  if (variant === "icon-button") {
-    const icon = isDark ? darkLabel : lightLabel;
-    return import_react4.default.createElement(
-      Touchable,
-      {
-        onPress: toggle,
-        style: {
-          padding: 8,
-          borderRadius: 8,
-          backgroundColor: isDark ? "#374151" : "#f3f4f6",
-          ...style
-        },
-        accessibilityRole: "button",
-        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-        accessibilityState: {}
-      },
-      import_react4.default.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
-    );
-  }
-  if (includeSystem) {
-    const modes = [
-      { key: "light", label: lightLabel },
-      { key: "dark", label: darkLabel },
-      { key: "system", label: "System" }
-    ];
-    return import_react4.default.createElement(
-      View,
-      { style: { flexDirection: "row", gap: 4, ...style } },
-      ...modes.map(
-        ({ key, label: mLabel }) => import_react4.default.createElement(
-          Touchable,
-          {
-            key,
-            onPress: () => setMode(key),
-            style: {
-              paddingHorizontal: 12,
-              paddingVertical: 6,
-              borderRadius: 6,
-              backgroundColor: mode === key ? isDark ? "#6366f1" : "#3b82f6" : isDark ? "#374151" : "#e5e7eb"
-            },
-            accessibilityRole: "button",
-            accessibilityLabel: `Set ${key} theme`,
-            accessibilityState: { selected: mode === key }
-          },
-          import_react4.default.createElement(Text, {
-            style: {
-              fontSize: 13,
-              fontWeight: "500",
-              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
-              ...labelStyle
-            }
-          }, mLabel)
-        )
-      )
-    );
-  }
-  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
-  return import_react4.default.createElement(
-    Touchable,
-    {
-      onPress: toggle,
-      style: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 8,
-        backgroundColor: isDark ? "#374151" : "#e5e7eb",
-        ...style
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-      accessibilityState: {}
-    },
-    import_react4.default.createElement(Text, {
-      style: {
-        fontSize: 14,
-        fontWeight: "500",
-        color: isDark ? "#f9fafb" : "#111827",
-        ...labelStyle
-      }
-    }, currentLabel)
-  );
-}
-
 // src/styled.tsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/useGlobalDarkMode.ts
-var import_react5 = __toESM(require("react"));
-var useSyncExternalStore = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
-  import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+var import_react4 = __toESM(require("react"));
+var useSyncExternalStore = import_react4.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react4.default.useReducer((n) => n + 1, 0);
+  import_react4.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
 function useGlobalDarkMode() {
@@ -3575,10 +3446,10 @@ function useGlobalDarkMode() {
 }
 
 // src/useGlobalWidth.ts
-var import_react6 = __toESM(require("react"));
-var useSyncExternalStore2 = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
-  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+var import_react5 = __toESM(require("react"));
+var useSyncExternalStore2 = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
+  import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
 var NOOP_SUB = (_) => () => {
@@ -3929,7 +3800,7 @@ function transformToWebProps(originalName, tag, props) {
 
 // src/styled.tsx
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react7.forwardRef)(
+  const Styled = (0, import_react6.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -3949,52 +3820,52 @@ function styled(Component, baseClasses = "") {
       const checked = !!props.checked;
       const { config } = useTheme();
       const isDark = useGlobalDarkMode();
-      const [pressed, setPressed] = (0, import_react7.useState)(false);
-      const [hovered, setHovered] = (0, import_react7.useState)(false);
-      const [focused, setFocused] = (0, import_react7.useState)(false);
-      const handlePressIn = (0, import_react7.useCallback)((e) => {
+      const [pressed, setPressed] = (0, import_react6.useState)(false);
+      const [hovered, setHovered] = (0, import_react6.useState)(false);
+      const [focused, setFocused] = (0, import_react6.useState)(false);
+      const handlePressIn = (0, import_react6.useCallback)((e) => {
         setPressed(true);
         onPressIn?.(e);
       }, [onPressIn]);
-      const handlePressOut = (0, import_react7.useCallback)((e) => {
+      const handlePressOut = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
-      const handlePointerDown = (0, import_react7.useCallback)((e) => {
+      const handlePointerDown = (0, import_react6.useCallback)((e) => {
         setPressed(true);
         onPointerDown?.(e);
       }, [onPointerDown]);
-      const handlePointerUp = (0, import_react7.useCallback)((e) => {
+      const handlePointerUp = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPointerUp?.(e);
       }, [onPointerUp]);
-      const handlePointerLeave = (0, import_react7.useCallback)((e) => {
+      const handlePointerLeave = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPointerLeave?.(e);
       }, [onPointerLeave]);
-      const handleMouseEnter = (0, import_react7.useCallback)((e) => {
+      const handleMouseEnter = (0, import_react6.useCallback)((e) => {
         setHovered(true);
         onMouseEnter?.(e);
       }, [onMouseEnter]);
-      const handleMouseLeave = (0, import_react7.useCallback)((e) => {
+      const handleMouseLeave = (0, import_react6.useCallback)((e) => {
         setHovered(false);
         onMouseLeave?.(e);
       }, [onMouseLeave]);
-      const handleFocus = (0, import_react7.useCallback)((e) => {
+      const handleFocus = (0, import_react6.useCallback)((e) => {
         setFocused(true);
         onFocus?.(e);
       }, [onFocus]);
-      const handleBlur = (0, import_react7.useCallback)((e) => {
+      const handleBlur = (0, import_react6.useCallback)((e) => {
         setFocused(false);
         onBlur?.(e);
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react7.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const hasInteractive = (0, import_react7.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
+      const resolved = (0, import_react6.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const computedStyle = (0, import_react7.useMemo)(
+      const computedStyle = (0, import_react6.useMemo)(
         () => isWeb ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
@@ -4005,7 +3876,7 @@ function styled(Component, baseClasses = "") {
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
-      return import_react7.default.createElement(effectiveComponent, {
+      return import_react6.default.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
@@ -4013,7 +3884,9 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPointerDown, onPointerUp, onPointerLeave } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // onPressIn/onPressOut are forwarded on web too (not just native) since
+        // react-native-web components rely on receiving them directly.
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -4027,12 +3900,12 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
     const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
@@ -4041,19 +3914,19 @@ function useStyles(classString, state = {}) {
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react8.useMemo)(
+  return (0, import_react7.useMemo)(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useBreakpoint.ts
-var import_react9 = require("react");
+var import_react8 = require("react");
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = (0, import_react9.useMemo)(
+  const sorted = (0, import_react8.useMemo)(
     () => Object.entries(screens).filter((entry) => typeof entry[1] === "number").sort(([, a], [, b]) => b - a),
     [screens]
   );
@@ -4066,7 +3939,7 @@ function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const result = {};
     for (const [name, minW] of Object.entries(screens)) {
       if (typeof minW === "number") result[name] = width >= minW;
@@ -4076,14 +3949,14 @@ function useResponsive() {
 }
 
 // src/InteractiveWrapper.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
-var InteractiveWrapper = (0, import_react10.forwardRef)(
+var InteractiveWrapper = (0, import_react9.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -4104,20 +3977,20 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    const [pressed, setPressed] = (0, import_react10.useState)(false);
-    const [hovered, setHovered] = (0, import_react10.useState)(false);
-    const [focused, setFocused] = (0, import_react10.useState)(false);
-    const handlePressIn = (0, import_react10.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react10.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react10.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react10.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react10.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handleMouseEnter = (0, import_react10.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react10.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react10.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react10.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const [pressed, setPressed] = (0, import_react9.useState)(false);
+    const [hovered, setHovered] = (0, import_react9.useState)(false);
+    const [focused, setFocused] = (0, import_react9.useState)(false);
+    const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react9.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react9.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react9.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+    const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const { children, disabled, checked, ...restForComponent } = rest;
-    const computedStyle = (0, import_react10.useMemo)(
+    const computedStyle = (0, import_react9.useMemo)(
       () => {
         if (isWeb) return {};
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
@@ -4162,15 +4035,16 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react10.default.createElement(Component, componentProps, ...children) : import_react10.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react9.default.createElement(Component, componentProps, ...children) : import_react9.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
@@ -4192,7 +4066,6 @@ function cx(...classes) {
   InteractiveWrapper,
   ThemeContext,
   ThemeProvider,
-  ThemeToggle,
   buildConfig,
   cx,
   defaultColors,