tamagui 1.82.1 → 1.82.2

package/dist/native.js

@@ -3409,7 +3409,7 @@ var require_getSplitStyles_native = __commonJS({
       }), console.groupEnd());
       for (let keyOg in props) {
         let keyInit = keyOg, valInit = props[keyOg];
-        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !isHOC)
+        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
           continue;
         let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
         if (styleState.curProps[keyInit] = valInit, !import_constants4.isAndroid && keyInit === "elevationAndroid")
@@ -3956,7 +3956,7 @@ var require_ThemeManager_native = __commonJS({
     module2.exports = __toCommonJS2(ThemeManager_exports);
     var import_constants4 = require_index_native(), import_config = require_config_native(), import_constants22 = require_constants_native2(), emptyState = { name: "" };
     function getHasThemeUpdatingProps(props) {
-      return props.name || props.componentName || props.inverse || props.reset;
+      return !!(props.name || props.componentName || props.inverse || props.reset);
     }
     var uid = 0, ThemeManager = class {
       constructor(props = {}, parentManager) {
@@ -4026,7 +4026,7 @@ var require_ThemeManager_native = __commonJS({
       let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
       isDirectParentAComponentTheme && allComponentThemes.shift();
       let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
-      process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
+      process.env.NODE_ENV !== "production" && props.debug && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
@@ -4036,16 +4036,18 @@ var require_ThemeManager_native = __commonJS({
           lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
         }
         if (componentName && !props.reset) {
-          let componentPotentials = [];
-          if (nextName) {
-            let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants22.THEME_NAME_SEPARATOR));
+          let baseLen = base.length, componentPotentials = [];
+          if (nextName && baseLen > 1) {
+            let beforeSeparator = base[0];
             componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
           }
           if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
-            if (prefixLessOne) {
-              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
-              componentPotentials.unshift(lessSpecific);
+            if (i > baseLen) {
+              let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
+              if (prefixLessOne) {
+                let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+                componentPotentials.unshift(lessSpecific);
+              }
             }
             let moreSpecific = `${prefix}_${nextName}_${componentName}`;
             componentPotentials.unshift(moreSpecific);
@@ -4054,6 +4056,7 @@ var require_ThemeManager_native = __commonJS({
         }
         let found = potentials.find((t) => t in themes);
         if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" getState ", {
+          props,
           found,
           potentials,
           baseManager,
@@ -4302,7 +4305,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         }
         let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
         state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
-        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed ? !1 : null, response = {
+        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed != null ? !1 : null, response = {
           themeManager: themeManager2,
           isNewTheme: isNewTheme2,
           mounted: mounted2,
@@ -4381,40 +4384,40 @@ var require_Theme_native = __commonJS({
     )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Theme_exports = {};
     __export2(Theme_exports, {
       Theme: () => Theme2,
-      useThemedChildren: () => useThemedChildren
+      getThemedChildren: () => getThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_constants4 = require_index_native(), import_react2 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), Theme2 = (0, import_react2.forwardRef)(function(props, ref) {
+    var import_constants4 = require_index_native(), import_react2 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), Theme2 = (0, import_react2.forwardRef)(function({ children, ...props }, ref) {
       if (props.disable)
-        return props.children;
-      let isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), children = (0, import_react2.useMemo)(() => {
-        let children2 = disableDirectChildTheme ? import_react2.Children.map(
-          props.children,
-          (child) => (0, import_react2.cloneElement)(child, { "data-disable-theme": !0 })
-        ) : props.children;
-        if (ref)
-          try {
-            import_react2.default.Children.only(children2), children2 = (0, import_react2.cloneElement)(children2, { ref });
-          } catch {
-          }
-        return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
-      }, [props.children, disableDirectChildTheme]);
-      return useThemedChildren(themeState, children, props, isRoot);
+        return children;
+      let isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), finalChildren = props["disable-child-theme"] ? import_react2.Children.map(
+        children,
+        (child) => (0, import_react2.cloneElement)(child, { "data-disable-theme": !0 })
+      ) : children;
+      if (ref)
+        try {
+          import_react2.default.Children.only(finalChildren), finalChildren = (0, import_react2.cloneElement)(finalChildren, { ref });
+        } catch {
+        }
+      return process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: finalChildren })), getThemedChildren(themeState, finalChildren, props, isRoot);
     });
     Theme2.displayName = "Theme";
     Theme2.avoidForwardRef = !0;
-    function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
-      let { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1);
-      if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
+    function getThemedChildren(themeState, children, props, isRoot = !1) {
+      let { themeManager, isNewTheme } = themeState;
+      if (!themeManager)
+        throw "\u274C";
+      let { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
+      if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
         return children;
       let next = children;
-      shallow && themeManager && (next = import_react2.Children.toArray(children).map((child) => (0, import_react2.isValidElement)(child) ? (0, import_react2.cloneElement)(
+      shallow && (next = import_react2.Children.toArray(children).map((child) => (0, import_react2.isValidElement)(child) ? (0, import_react2.cloneElement)(
         child,
         void 0,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Theme2, { name: themeManager.state.parentName, children: child.props.children })
       ) : child));
-      let elementsWithContext = themeManager ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
-      return forceClassName === !1 ? elementsWithContext : import_constants4.isWeb && !avoidWrap ? wrapThemeElements({
+      let elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next });
+      return forceClassName === !1 ? elementsWithContext : import_constants4.isWeb ? wrapThemeElements({
         children: elementsWithContext,
         themeState,
         forceClassName,
@@ -4430,18 +4433,18 @@ var require_Theme_native = __commonJS({
       var _a;
       if (isRoot && forceClassName === !1)
         return children;
-      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
-      if (!themeState.isNewTheme && !requiresExtraWrapper)
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "_dsp_contents is_Theme", children });
-      let { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
+      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
       if (requiresExtraWrapper) {
         let name = ((_a = themeState.state) == null ? void 0 : _a.name) || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
         themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${inverse ? inverseClassName : ""} _dsp_contents`, children: themedChildren });
       }
       return themedChildren;
     }
+    var emptyObj = {};
     function getThemeClassNameAndStyle(themeState, isRoot = !1) {
       var _a, _b;
+      if (!themeState.isNewTheme)
+        return { className: "", style: emptyObj };
       let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
         color: themeColor
       } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
@@ -4467,7 +4470,10 @@ var require_themeable_native = __commonJS({
       themeable: () => themeable3
     });
     module2.exports = __toCommonJS2(themeable_exports);
-    var import_react2 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime6 = require("react/jsx-runtime");
+    var import_react2 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime6 = (
+      // @ts-expect-error its ok
+      require("react/jsx-runtime")
+    );
     function themeable3(Component, staticConfig) {
       let withTheme = (0, import_react2.forwardRef)(function(props, ref) {
         let { themeInverse, theme, componentName, themeReset, ...rest } = props, element = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ref, ...rest, "data-disable-theme": !0 });
@@ -4745,7 +4751,7 @@ var require_createComponent_native = __commonJS({
             isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
           }
         }
-        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = !1, disableTheme = disableThemeProp && !willBeAnimated || isHOC;
+        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableTheme = isHOC;
         process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
@@ -5038,7 +5044,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               subscribe: groupState.subscribe
             };
         }, [groupName]);
-        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
+        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
           let contextProps = staticConfig.context.props;
           for (let key in contextProps)
             (key in style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = style[key] ?? viewProps[key]);
@@ -15526,7 +15532,7 @@ var require_Popover_native = __commonJS({
           context,
           children: props.children
         }
-      )), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal2.Portal, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core13.Theme, { name: themeName, children: [
+      )), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal2.Portal, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core13.Theme, { forceClassName: !0, name: themeName, children: [
         !!context.open && !context.breakpointActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_stacks3.YStack,
           {
@@ -18011,107 +18017,112 @@ var require_createSwitch_native = __commonJS({
             ref: forwardedRef
           }
         );
-      }), SwitchComponent = Frame.styleable(function(propsIn, forwardedRef) {
-        let styledContext = React2.useContext(import_SwitchContext.SwitchContext), props = (0, import_core13.useProps)(propsIn, {
-          noNormalize: !0,
-          noExpand: !0,
-          resolveValues: "none",
-          forComponent: Frame
-        }), {
-          labeledBy: ariaLabelledby,
-          name,
-          checked: checkedProp,
-          defaultChecked,
-          required,
-          disabled,
-          value = "on",
-          onCheckedChange,
-          size: size2 = styledContext.size ?? "$true",
-          unstyled = styledContext.unstyled ?? !1,
-          native: nativeProp,
-          nativeProps,
-          children,
-          ...switchProps
-        } = props, native = Array.isArray(nativeProp) ? nativeProp : [nativeProp], shouldRenderMobileNative = !import_constants4.isWeb && nativeProp === !0 || !import_constants4.isWeb && native.includes("mobile") || native.includes("android") && import_react_native4.Platform.OS === "android" || native.includes("ios") && import_react_native4.Platform.OS === "ios", [button, setButton] = React2.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setButton), labelId = (0, import_label.useLabelContext)(button), labelledBy = ariaLabelledby || labelId, hasConsumerStoppedPropagationRef = React2.useRef(!1), isFormControl = import_constants4.isWeb ? button ? !!button.closest("form") : !0 : !1, [frameWidth, setFrameWidth] = React2.useState(0), [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
-          prop: checkedProp,
-          defaultProp: defaultChecked || !1,
-          onChange: onCheckedChange,
-          transition: !0
-        });
-        if (shouldRenderMobileNative)
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_react_native4.Switch,
-            {
-              value: checkedProp,
-              onValueChange: onCheckedChange,
-              ...nativeProps
-            }
-          );
-        import_constants4.isWeb || React2.useEffect(() => {
-          if (props.id)
-            return (0, import_focusable2.registerFocusable)(props.id, {
-              focus: () => {
-                setChecked((x) => !x);
+      }), SwitchComponent = Frame.styleable(
+        function(propsIn, forwardedRef) {
+          let styledContext = React2.useContext(import_SwitchContext.SwitchContext), props = (0, import_core13.useProps)(propsIn, {
+            noNormalize: !0,
+            noExpand: !0,
+            resolveValues: "none",
+            forComponent: Frame
+          }), {
+            labeledBy: ariaLabelledby,
+            name,
+            checked: checkedProp,
+            defaultChecked,
+            required,
+            disabled,
+            value = "on",
+            onCheckedChange,
+            size: size2 = styledContext.size ?? "$true",
+            unstyled = styledContext.unstyled ?? !1,
+            native: nativeProp,
+            nativeProps,
+            children,
+            ...switchProps
+          } = props, native = Array.isArray(nativeProp) ? nativeProp : [nativeProp], shouldRenderMobileNative = !import_constants4.isWeb && nativeProp === !0 || !import_constants4.isWeb && native.includes("mobile") || native.includes("android") && import_react_native4.Platform.OS === "android" || native.includes("ios") && import_react_native4.Platform.OS === "ios", [button, setButton] = React2.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setButton), labelId = (0, import_label.useLabelContext)(button), labelledBy = ariaLabelledby || labelId, hasConsumerStoppedPropagationRef = React2.useRef(!1), isFormControl = import_constants4.isWeb ? button ? !!button.closest("form") : !0 : !1, [frameWidth, setFrameWidth] = React2.useState(0), [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
+            prop: checkedProp,
+            defaultProp: defaultChecked || !1,
+            onChange: onCheckedChange,
+            transition: !0
+          });
+          if (shouldRenderMobileNative)
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native4.Switch,
+              {
+                value: checkedProp,
+                onValueChange: onCheckedChange,
+                ...nativeProps
               }
-            });
-        }, [props.id, setChecked]);
-        let isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Frame,
-            {
-              tag: isInsideButton ? "span" : "button",
-              unstyled,
-              size: size2,
-              checked,
-              disabled,
-              frameWidth,
-              themeShallow: !0,
-              ...!disableActiveTheme && {
-                theme: checked ? "active" : null,
-                themeShallow: !0
-              },
-              role: "switch",
-              "aria-checked": checked,
-              "aria-labelledby": labelledBy,
-              "aria-required": required,
-              "data-state": getState(checked),
-              "data-disabled": disabled ? "" : void 0,
-              tabIndex: disabled ? void 0 : 0,
-              value,
-              ...switchProps,
-              ref: composedRefs,
-              onPress: (0, import_helpers.composeEventHandlers)(props.onPress, (event) => {
-                setChecked((prevChecked) => !prevChecked), import_constants4.isWeb && isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_stacks3.YStack,
-                {
-                  alignSelf: "stretch",
-                  flex: 1,
-                  onLayout: (e) => {
-                    setFrameWidth(e.nativeEvent.layout.width);
-                  },
-                  children: typeof children == "function" ? children(checked) : children
+            );
+          import_constants4.isWeb || React2.useEffect(() => {
+            if (props.id)
+              return (0, import_focusable2.registerFocusable)(props.id, {
+                focus: () => {
+                  setChecked((x) => !x);
                 }
-              )
-            }
-          ) }),
-          import_constants4.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            BubbleInput,
-            {
-              control: button,
-              bubbles: !hasConsumerStoppedPropagationRef.current,
-              name,
-              value,
-              checked,
-              required,
-              disabled,
-              style: { transform: "translateX(-100%)" }
-            }
-          )
-        ] });
-      }), BubbleInput = (props) => {
+              });
+          }, [props.id, setChecked]);
+          let isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext);
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Frame,
+              {
+                tag: isInsideButton ? "span" : "button",
+                unstyled,
+                size: size2,
+                checked,
+                disabled,
+                frameWidth,
+                themeShallow: !0,
+                ...!disableActiveTheme && {
+                  theme: checked ? "active" : null,
+                  themeShallow: !0
+                },
+                role: "switch",
+                "aria-checked": checked,
+                "aria-labelledby": labelledBy,
+                "aria-required": required,
+                "data-state": getState(checked),
+                "data-disabled": disabled ? "" : void 0,
+                tabIndex: disabled ? void 0 : 0,
+                value,
+                ...switchProps,
+                ref: composedRefs,
+                onPress: (0, import_helpers.composeEventHandlers)(props.onPress, (event) => {
+                  setChecked((prevChecked) => !prevChecked), import_constants4.isWeb && isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_stacks3.YStack,
+                  {
+                    alignSelf: "stretch",
+                    flex: 1,
+                    onLayout: (e) => {
+                      setFrameWidth(e.nativeEvent.layout.width);
+                    },
+                    children: typeof children == "function" ? children(checked) : children
+                  }
+                )
+              }
+            ) }),
+            import_constants4.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              BubbleInput,
+              {
+                control: button,
+                bubbles: !hasConsumerStoppedPropagationRef.current,
+                name,
+                value,
+                checked,
+                required,
+                disabled,
+                style: { transform: "translateX(-100%)" }
+              }
+            )
+          ] });
+        },
+        {
+          disableTheme: !0
+        }
+      ), BubbleInput = (props) => {
         let { control, checked, bubbles = !0, ...inputProps } = props, ref = React2.useRef(null), prevChecked = (0, import_use_previous.usePrevious)(checked);
         return React2.useEffect(() => {
           let input = ref.current, inputProto = window.HTMLInputElement.prototype, setChecked = Object.getOwnPropertyDescriptor(