@msviderok/base-ui-solid 1.0.0-beta.1 → 1.0.0-beta.3

package/cjs/tooltip/provider/TooltipProvider.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipProvider = TooltipProvider;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _TooltipProviderContext = require("./TooltipProviderContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a shared delay for multiple tooltips. The grouping logic ensures that
  * once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
@@ -24,12 +24,20 @@ function TooltipProvider(props) {
     open: props.delay,
     close: props.closeDelay
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipProviderContext.TooltipProviderContext.Provider, {
+  return (0, _web.createComponent)(_TooltipProviderContext.TooltipProviderContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingDelayGroup, {
-      delay: delayValue(),
-      timeoutMs: timeout(),
-      children: props.children
-    })
+    get children() {
+      return (0, _web.createComponent)(_floatingUiSolid.FloatingDelayGroup, {
+        get delay() {
+          return delayValue();
+        },
+        get timeoutMs() {
+          return timeout();
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    }
   });
 }

package/cjs/tooltip/root/TooltipRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipRoot = TooltipRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _mergeProps = require("../../merge-props/mergeProps");
@@ -14,7 +15,6 @@ var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _TooltipProviderContext = require("../provider/TooltipProviderContext");
 var _constants = require("../utils/constants");
 var _TooltipRootContext = require("./TooltipRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the tooltip.
  * Doesn’t render its own HTML element.
@@ -186,8 +186,10 @@ function TooltipRoot(props) {
     trackCursorAxis,
     hoverable
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipRootContext.TooltipRootContext.Provider, {
+  return (0, _web.createComponent)(_TooltipRootContext.TooltipRootContext.Provider, {
     value: contextValue,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/tooltip/trigger/TooltipTrigger.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipTrigger = TooltipTrigger;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TooltipRootContext = require("../root/TooltipRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An element to attach the tooltip to.
  * Renders a `<button>` element.
@@ -33,7 +33,5 @@ function TooltipTrigger(componentProps) {
     props: [triggerProps, elementProps],
     customStyleHookMapping: _popupStateMapping.triggerOpenStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/unstable-no-ssr/NoSsr.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoSsr = NoSsr;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
  *
@@ -23,9 +23,15 @@ function NoSsr(props) {
   (0, _solidJs.onMount)(() => {
     setMountedState(true);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: mountedState(),
-    fallback: props.fallback ?? null,
-    children: props.children
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return mountedState();
+    },
+    get fallback() {
+      return props.fallback ?? null;
+    },
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/utils/FloatingPortalLite.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingPortalLite = FloatingPortalLite;
 var _web = require("solid-js/web");
 var _floatingUiSolid = require("../floating-ui-solid");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * `FloatingPortal` includes tabbable logic handling for focus management.
  * For components that don't need tabbable logic, use `FloatingPortalLite`.
@@ -19,9 +18,13 @@ function FloatingPortalLite(props) {
   } = (0, _floatingUiSolid.useFloatingPortalNode)({
     root: () => props.root
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Portal, {
-    mount: portalMount(),
+  return (0, _web.createComponent)(_web.Portal, {
+    get mount() {
+      return portalMount();
+    },
     ref: portalRef,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/utils/FocusGuard.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusGuard = FocusGuard;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _detectBrowser = require("./detectBrowser");
 var _visuallyHidden = require("./visuallyHidden");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<span>`);
 /**
  * @internal
  */
@@ -21,13 +22,21 @@ function FocusGuard(props) {
       setRole('button');
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    ...props,
-    ref: props.ref,
-    tabIndex: 0,
-    role: role(),
-    "aria-hidden": role() ? undefined : true,
-    style: _visuallyHidden.visuallyHidden,
-    "data-base-ui-focus-guard": ""
-  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? (0, _web.use)(_ref$, _el$) : props.ref = _el$;
+    (0, _web.spread)(_el$, (0, _web.mergeProps)(props, {
+      "tabIndex": 0,
+      get role() {
+        return role();
+      },
+      get ["aria-hidden"]() {
+        return role() ? undefined : true;
+      },
+      "style": _visuallyHidden.visuallyHidden,
+      "data-base-ui-focus-guard": ""
+    }), false, false);
+    return _el$;
+  })();
 }

package/cjs/utils/InternalBackdrop.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InternalBackdrop = InternalBackdrop;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _createAttribute = require("../floating-ui-solid/utils/createAttribute");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<div role=presentation data-base-ui-inert>`);
 /**
  * @internal
  */
@@ -33,21 +34,21 @@ function InternalBackdrop(props) {
   const ownerProps = () => local.managed ? {
     [(0, _createAttribute.createAttribute)('managed')]: local.managed
   } : {};
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: props.ref,
-    role: "presentation"
-    // Ensures Floating UI's outside press detection runs, as it considers
-    // it an element that existed when the popup rendered.
-    ,
-    "data-base-ui-inert": "",
-    ...otherProps,
-    ...ownerProps(),
-    style: {
-      position: 'fixed',
-      inset: 0,
-      'user-select': 'none',
-      '-webkit-user-select': 'none',
-      'clip-path': clipPath()
-    }
-  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? (0, _web.use)(_ref$, _el$) : props.ref = _el$;
+    (0, _web.spread)(_el$, (0, _web.mergeProps)(otherProps, ownerProps, {
+      get style() {
+        return {
+          position: 'fixed',
+          inset: 0,
+          'user-select': 'none',
+          '-webkit-user-select': 'none',
+          'clip-path': clipPath()
+        };
+      }
+    }), false, false);
+    return _el$;
+  })();
 }

package/cjs/utils/styles.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.styleDisableScrollbar = exports.STYLE_TAG_ID = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
+var _web = require("solid-js/web");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<style id=disable-scrollbar>.base-ui-disable-scrollbar\{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar\{display:none}`);
 const STYLE_TAG_ID = exports.STYLE_TAG_ID = 'disable-scrollbar';
 const styleDisableScrollbar = exports.styleDisableScrollbar = {
   class: 'base-ui-disable-scrollbar',
-  element: /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
-    id: STYLE_TAG_ID,
-    children: `.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}`
-  })
+  element: _tmpl$()
 };

package/cjs/utils/useRenderElement.js

@@ -5,41 +5,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RenderElement = void 0;
 exports.useRenderElement = useRenderElement;
-var _solidJs = require("solid-js");
 var _web = require("solid-js/web");
+var _solidJs = require("solid-js");
 var _mergeProps = require("../merge-props/mergeProps");
 var _solidHelpers = require("../solid-helpers");
 var _constants = require("./constants");
 var _getStyleHookProps = require("./getStyleHookProps");
 var _resolveClassName = require("./resolveClassName");
-var _jsxRuntime = require("react/jsx-runtime");
 function useRenderElement(element, componentProps, params) {
   const Component = props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: (0, _solidHelpers.access)(params.enabled) ?? true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Dynamic, {
-        component: p => {
-          if (typeof componentProps.render === 'function') {
-            return componentProps.render(p, params.state ?? _constants.EMPTY_OBJECT);
-          }
-          if (componentProps.render && typeof componentProps.render === 'object' && 'component' in componentProps.render) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Dynamic, {
-              ...p,
-              component: componentProps.render.component
-            });
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Dynamic, {
-            component: typeof componentProps.render === 'string' ? componentProps.render : (0, _solidHelpers.access)(element),
-            ...((0, _solidHelpers.access)(element) === 'button' ? {
+    return (0, _web.createComponent)(_solidJs.Show, {
+      get when() {
+        return (0, _solidHelpers.access)(params.enabled) ?? true;
+      },
+      get children() {
+        return (0, _web.createComponent)(_web.Dynamic, (0, _web.mergeProps)({
+          component: p => {
+            if (typeof componentProps.render === 'function') {
+              return componentProps.render(p, params.state ?? _constants.EMPTY_OBJECT);
+            }
+            if (componentProps.render && typeof componentProps.render === 'object' && 'component' in componentProps.render) {
+              return (0, _web.createComponent)(_web.Dynamic, (0, _web.mergeProps)(p, {
+                get component() {
+                  return componentProps.render.component;
+                }
+              }));
+            }
+            return (0, _web.createComponent)(_web.Dynamic, (0, _web.mergeProps)({
+              get component() {
+                return (0, _web.memo)(() => typeof componentProps.render === 'string')() ? componentProps.render : (0, _solidHelpers.access)(element);
+              }
+            }, () => (0, _solidHelpers.access)(element) === 'button' ? {
               type: 'button'
-            } : {}),
-            ...((0, _solidHelpers.access)(element) === 'img' ? {
+            } : {}, () => (0, _solidHelpers.access)(element) === 'img' ? {
               alt: ''
-            } : {}),
-            ...p
-          });
-        },
-        ...(0, _mergeProps.mergeProps)([props, {
+            } : {}, p));
+          }
+        }, () => (0, _mergeProps.mergeProps)([props, {
           ref: el => {
             if (typeof componentProps.ref === 'function') {
               componentProps.ref(el);
@@ -57,16 +59,17 @@ function useRenderElement(element, componentProps, params) {
           get class() {
             return (0, _resolveClassName.resolveClassName)(componentProps.class, params.state);
           }
-        }]),
-        children: params.children ?? componentProps.children
-      })
+        }]), {
+          get children() {
+            return params.children ?? componentProps.children;
+          }
+        }));
+      }
     });
   };
   if (process.env.NODE_ENV !== "production") Component.displayName = "Component";
   return (renderFnProps = {}) => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
-      ...renderFnProps
-    });
+    return (0, _web.createComponent)(Component, renderFnProps);
   };
 }
 let RenderElement = exports.RenderElement = void 0;

package/esm/accordion/header/AccordionHeader.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useAccordionItemContext } from "../item/AccordionItemContext.js";
@@ -9,7 +10,6 @@ import { accordionStyleHookMapping } from "../item/styleHooks.js";
  *
  * Documentation: [Base UI Accordion](https://base-ui.com/solid/components/accordion)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function AccordionHeader(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -20,7 +20,5 @@ export function AccordionHeader(componentProps) {
     props: elementProps,
     customStyleHookMapping: accordionStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/accordion/item/AccordionItem.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createEffect, createMemo, createSignal, on, mergeProps as solidMergeProps } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { CollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
@@ -16,7 +17,6 @@ import { accordionStyleHookMapping } from "./styleHooks.js";
  *
  * Documentation: [Base UI Accordion](https://base-ui.com/solid/components/accordion)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function AccordionItem(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'onOpenChange', 'value']);
   const {
@@ -105,11 +105,15 @@ export function AccordionItem(componentProps) {
     props: elementProps,
     customStyleHookMapping: accordionStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(CollapsibleRootContext.Provider, {
+  return _$createComponent(CollapsibleRootContext.Provider, {
     value: collapsibleContext,
-    children: /*#__PURE__*/_jsx(AccordionItemContext.Provider, {
-      value: accordionItemContext,
-      children: element()
-    })
+    get children() {
+      return _$createComponent(AccordionItemContext.Provider, {
+        value: accordionItemContext,
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/esm/accordion/panel/AccordionPanel.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, Show, mergeProps as solidMergeProps } from 'solid-js';
 import { useCollapsiblePanel } from "../../collapsible/panel/useCollapsiblePanel.js";
 import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
@@ -16,7 +17,6 @@ import { AccordionPanelCssVars } from "./AccordionPanelCssVars.js";
  *
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function AccordionPanel(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['hiddenUntilFound', 'keepMounted', 'id']);
   const {
@@ -126,8 +126,12 @@ export function AccordionPanel(componentProps) {
     customStyleHookMapping: accordionStyleHookMapping
   });
   const shouldRender = () => keepMounted() || hiddenUntilFound() || !keepMounted() && mounted();
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: element()
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/esm/accordion/root/AccordionRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, createMemo } from 'solid-js';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, HOME, stopEvent } from "../../composite/composite.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
@@ -8,7 +9,6 @@ import { useControlled } from "../../utils/useControlled.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { warn } from "../../utils/warn.js";
 import { AccordionRootContext } from "./AccordionRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const SUPPORTED_KEYS = new Set([ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END]);
 const rootStyleHookMapping = {
   value: () => null
@@ -181,13 +181,17 @@ export function AccordionRoot(componentProps) {
     }, elementProps],
     customStyleHookMapping: rootStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(AccordionRootContext.Provider, {
+  return _$createComponent(AccordionRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(CompositeList, {
-      refs: {
-        elements: accordionItemElements
-      },
-      children: element()
-    })
+    get children() {
+      return _$createComponent(CompositeList, {
+        refs: {
+          elements: accordionItemElements
+        },
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/esm/accordion/trigger/AccordionTrigger.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useButton } from "../../use-button/index.js";
@@ -11,7 +12,7 @@ import { useAccordionItemContext } from "../item/AccordionItemContext.js";
  *
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+
 export function AccordionTrigger(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'id', 'nativeButton']);
   const disabledProp = () => local.disabled ?? false;
@@ -57,7 +58,5 @@ export function AccordionTrigger(componentProps) {
     props: [props, elementProps, getButtonProps],
     customStyleHookMapping: triggerOpenStateMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/alert-dialog/backdrop/AlertDialogBackdrop.js

@@ -1,9 +1,9 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
 import { transitionStatusMapping } from "../../utils/styleHookMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useAlertDialogRootContext } from "../root/AlertDialogRootContext.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -50,7 +50,5 @@ export function AlertDialogBackdrop(componentProps) {
     customStyleHookMapping,
     enabled: () => !nested()
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/alert-dialog/close/AlertDialogClose.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { useDialogClose } from "../../dialog/close/useDialogClose.js";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -9,7 +10,6 @@ import { useAlertDialogRootContext } from "../root/AlertDialogRootContext.js";
  *
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function AlertDialogClose(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'nativeButton']);
   const disabled = () => local.disabled ?? false;
@@ -37,7 +37,5 @@ export function AlertDialogClose(componentProps) {
     ref: dialogCloseRef,
     props: [elementProps, getRootProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/alert-dialog/description/AlertDialogDescription.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { onMount } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -10,7 +11,6 @@ import { useAlertDialogRootContext } from "../root/AlertDialogRootContext.js";
  *
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function AlertDialogDescription(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -35,7 +35,5 @@ export function AlertDialogDescription(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/alert-dialog/popup/AlertDialogPopup.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { useDialogPopup } from "../../dialog/popup/useDialogPopup.js";
 import { FloatingFocusManager } from "../../floating-ui-solid/index.js";
 import { access, splitComponentProps } from "../../solid-helpers.js";
@@ -10,7 +12,6 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useAlertDialogRootContext } from "../root/AlertDialogRootContext.js";
 import { AlertDialogPopupCssVars } from "./AlertDialogPopupCssVars.js";
 import { AlertDialogPopupDataAttributes } from "./AlertDialogPopupDataAttributes.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping,
@@ -100,19 +101,27 @@ export function AlertDialogPopup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [mounted() && modal() === true && /*#__PURE__*/_jsx(InternalBackdrop, {
-      managed: true,
-      inert: inertValue(!open()),
-      ref: el => {
-        refs.internalBackdropRef = el;
-      }
-    }), /*#__PURE__*/_jsx(FloatingFocusManager, {
-      context: floatingRootContext,
-      disabled: !mounted(),
-      initialFocus: resolvedInitialFocus(),
-      returnFocus: local.finalFocus,
-      children: element()
-    })]
-  });
+  return [_$memo(() => _$memo(() => !!(mounted() && modal() === true))() && _$createComponent(InternalBackdrop, {
+    managed: true,
+    get inert() {
+      return inertValue(!open());
+    },
+    ref: el => {
+      refs.internalBackdropRef = el;
+    }
+  })), _$createComponent(FloatingFocusManager, {
+    context: floatingRootContext,
+    get disabled() {
+      return !mounted();
+    },
+    get initialFocus() {
+      return resolvedInitialFocus();
+    },
+    get returnFocus() {
+      return local.finalFocus;
+    },
+    get children() {
+      return element();
+    }
+  })];
 }