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

package/cjs/toast/root/ToastRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastRoot = ToastRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _utils = require("../../floating-ui-solid/utils");
@@ -18,7 +19,7 @@ var _visuallyHidden = require("../../utils/visuallyHidden");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _ToastRootContext = require("./ToastRootContext");
 var _ToastRootCssVars = require("./ToastRootCssVars");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<div>`);
 const customStyleHookMapping = {
   ..._styleHookMapping.transitionStatusMapping,
   swipeDirection(value) {
@@ -541,29 +542,36 @@ function ToastRoot(componentProps) {
     props: [props, elementProps],
     customStyleHookMapping,
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [componentProps.children, !focused() && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: _visuallyHidden.visuallyHidden,
-          ...(local.toast.priority === 'high' ? {
-            role: 'alert',
-            'aria-atomic': true
-          } : {
-            role: 'status',
-            'aria-live': 'polite'
-          }),
-          children: toastRoot.renderScreenReaderContent() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [local.toast.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: local.toast.title
-            }), local.toast.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: local.toast.description
-            })]
-          })
-        })]
-      });
+      return [(0, _web.memo)(() => componentProps.children), (0, _web.memo)(() => (0, _web.memo)(() => !!!focused())() && (() => {
+        var _el$ = _tmpl$();
+        (0, _web.spread)(_el$, (0, _web.mergeProps)(() => local.toast.priority === 'high' ? {
+          role: 'alert',
+          'aria-atomic': true
+        } : {
+          role: 'status',
+          'aria-live': 'polite'
+        }), false, true);
+        (0, _web.insert)(_el$, (() => {
+          var _c$ = (0, _web.memo)(() => !!toastRoot.renderScreenReaderContent());
+          return () => _c$() && [(0, _web.memo)(() => (0, _web.memo)(() => !!local.toast.title)() && (() => {
+            var _el$2 = _tmpl$();
+            (0, _web.insert)(_el$2, () => local.toast.title);
+            return _el$2;
+          })()), (0, _web.memo)(() => (0, _web.memo)(() => !!local.toast.description)() && (() => {
+            var _el$3 = _tmpl$();
+            (0, _web.insert)(_el$3, () => local.toast.description);
+            return _el$3;
+          })())];
+        })());
+        (0, _web.effect)(_$p => (0, _web.style)(_el$, _visuallyHidden.visuallyHidden, _$p));
+        return _el$;
+      })())];
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastRootContext.ToastRootContext.Provider, {
+  return (0, _web.createComponent)(_ToastRootContext.ToastRootContext.Provider, {
     value: toastRoot,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/toast/title/ToastTitle.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastTitle = ToastTitle;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useId = require("../../utils/useId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToastRootContext = require("../root/ToastRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A title that labels the toast.
  * Renders an `<h2>` element.
@@ -50,12 +50,8 @@ function ToastTitle(componentProps) {
       }
     }, elementProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: componentProps.children ?? toast().title
-      });
+      return (0, _web.memo)(() => componentProps.children ?? toast().title);
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/toast/utils/test-utils.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Button = Button;
 exports.List = List;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _index = require("../index");
-var _jsxRuntime = require("react/jsx-runtime");
-var _Toast$Title, _Toast$Description, _Toast$Close, _Toast$Action;
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<button type=button>add`);
 /**
  * @internal
  */
@@ -16,9 +16,9 @@ function Button() {
   const {
     add
   } = _index.Toast.useToastManager();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    onClick: () => {
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = () => {
       add({
         title: 'title',
         description: 'description',
@@ -27,9 +27,9 @@ function Button() {
           children: 'action'
         }
       });
-    },
-    children: "add"
-  });
+    };
+    return _el$;
+  })();
 }
 
 /**
@@ -39,20 +39,25 @@ function List() {
   const {
     toasts
   } = _index.Toast.useToastManager();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.For, {
-    each: toasts(),
-    children: toastItem => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Toast.Root, {
+  return (0, _web.createComponent)(_solidJs.For, {
+    get each() {
+      return toasts();
+    },
+    children: toastItem => (0, _web.createComponent)(_index.Toast.Root, {
       toast: toastItem,
       "data-testid": "root",
-      children: [_Toast$Title || (_Toast$Title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Toast.Title, {
-        "data-testid": "title"
-      })), _Toast$Description || (_Toast$Description = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Toast.Description, {
-        "data-testid": "description"
-      })), _Toast$Close || (_Toast$Close = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Toast.Close, {
-        "aria-label": "close-press"
-      })), _Toast$Action || (_Toast$Action = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Toast.Action, {
-        "data-testid": "action"
-      }))]
+      get children() {
+        return [(0, _web.createComponent)(_index.Toast.Title, {
+          "data-testid": "title"
+        }), (0, _web.createComponent)(_index.Toast.Description, {
+          "data-testid": "description"
+        }), (0, _web.createComponent)(_index.Toast.Close, {
+          "aria-label": "close-press"
+        }), (0, _web.createComponent)(_index.Toast.Action, {
+          "data-testid": "action"
+        })];
+      }
     })
   });
-}
+}
+(0, _web.delegateEvents)(["click"]);

package/cjs/toast/viewport/ToastViewport.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastViewport = ToastViewport;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _utils = require("../../floating-ui-solid/utils");
 var _solidHelpers = require("../../solid-helpers");
-var _FocusGuard3 = require("../../utils/FocusGuard");
+var _FocusGuard = require("../../utils/FocusGuard");
 var _owner = require("../../utils/owner");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _focusVisible = require("../utils/focusVisible");
 var _ToastViewportContext = require("./ToastViewportContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A container viewport for toasts.
  * Renders a `<div>` element.
@@ -21,7 +21,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
 function ToastViewport(componentProps) {
-  var _FocusGuard, _FocusGuard2;
   const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
   const {
     toasts,
@@ -196,19 +195,19 @@ function ToastViewport(componentProps) {
     },
     props: [props, elementProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [numToasts() > 0 && prevFocusElement() && (_FocusGuard || (_FocusGuard = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard3.FocusGuard, {
-          onFocus: handleFocusGuard
-        }))), componentProps.children, numToasts() > 0 && prevFocusElement() && (_FocusGuard2 || (_FocusGuard2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard3.FocusGuard, {
-          onFocus: handleFocusGuard
-        })))]
-      });
+      return [(0, _web.memo)(() => (0, _web.memo)(() => !!(numToasts() > 0 && prevFocusElement()))() && (0, _web.createComponent)(_FocusGuard.FocusGuard, {
+        onFocus: handleFocusGuard
+      })), (0, _web.memo)(() => componentProps.children), (0, _web.memo)(() => (0, _web.memo)(() => !!(numToasts() > 0 && prevFocusElement()))() && (0, _web.createComponent)(_FocusGuard.FocusGuard, {
+        onFocus: handleFocusGuard
+      }))];
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ToastViewportContext.ToastViewportContext.Provider, {
+  return (0, _web.createComponent)(_ToastViewportContext.ToastViewportContext.Provider, {
     value: contextValue,
-    children: [numToasts() > 0 && prevFocusElement() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard3.FocusGuard, {
-      onFocus: handleFocusGuard
-    }), element()]
+    get children() {
+      return [(0, _web.memo)(() => (0, _web.memo)(() => !!(numToasts() > 0 && prevFocusElement()))() && (0, _web.createComponent)(_FocusGuard.FocusGuard, {
+        onFocus: handleFocusGuard
+      })), (0, _web.memo)(() => element())];
+    }
   });
 }

package/cjs/toggle/Toggle.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Toggle = Toggle;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeItem = require("../composite/item/CompositeItem");
 var _solidHelpers = require("../solid-helpers");
@@ -11,7 +12,6 @@ var _ToggleGroupContext = require("../toggle-group/ToggleGroupContext");
 var _useButton = require("../use-button/useButton");
 var _useControlled = require("../utils/useControlled");
 var _useRenderElement = require("../utils/useRenderElement");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A two-state button that can be on or off.
  * Renders a `<button>` element.
@@ -71,11 +71,15 @@ function Toggle(componentProps) {
       }
     }, elementProps, getButtonProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
+  return (0, _web.createComponent)(_solidJs.Show, {
     when: groupContext,
-    fallback: element(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
-      render: element
-    })
+    get fallback() {
+      return element();
+    },
+    get children() {
+      return (0, _web.createComponent)(_CompositeItem.CompositeItem, {
+        render: element
+      });
+    }
   });
 }

package/cjs/toggle-group/ToggleGroup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroup = ToggleGroup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeRoot = require("../composite/root/CompositeRoot");
 var _solidHelpers = require("../solid-helpers");
@@ -12,7 +13,6 @@ var _useControlled = require("../utils/useControlled");
 var _useRenderElement = require("../utils/useRenderElement");
 var _ToggleGroupContext = require("./ToggleGroupContext");
 var _ToggleGroupDataAttributes = require("./ToggleGroupDataAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   multiple(value) {
     if ((0, _solidHelpers.access)(value)) {
@@ -92,16 +92,24 @@ function ToggleGroup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleGroupContext.ToggleGroupContext.Provider, {
+  return (0, _web.createComponent)(_ToggleGroupContext.ToggleGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: toolbarContext,
-      fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
-        stopEventPropagation: true,
-        loop: loop(),
-        render: element
-      }),
-      children: element()
-    })
+    get children() {
+      return (0, _web.createComponent)(_solidJs.Show, {
+        when: toolbarContext,
+        get fallback() {
+          return (0, _web.createComponent)(_CompositeRoot.CompositeRoot, {
+            stopEventPropagation: true,
+            get loop() {
+              return loop();
+            },
+            render: element
+          });
+        },
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/cjs/toolbar/button/ToolbarButton.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarButton = ToolbarButton;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeItem = require("../../composite/item/CompositeItem");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _useButton = require("../../use-button");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToolbarGroupContext = require("../group/ToolbarGroupContext");
 var _ToolbarRootContext = require("../root/ToolbarRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that can be used as-is or as a trigger for other components.
  * Renders a `<button>` element.
@@ -64,7 +64,7 @@ function ToolbarButton(componentProps) {
       }
     }, getButtonProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+  return (0, _web.createComponent)(_CompositeItem.CompositeItem, {
     metadata: itemMetadata,
     render: element
   });

package/cjs/toolbar/group/ToolbarGroup.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarGroup = ToolbarGroup;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToolbarRootContext = require("../root/ToolbarRootContext");
 var _ToolbarGroupContext = require("./ToolbarGroupContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups several toolbar items or toggles.
  * Renders a `<div>` element.
@@ -40,8 +40,10 @@ function ToolbarGroup(componentProps) {
       role: 'group'
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarGroupContext.ToolbarGroupContext.Provider, {
+  return (0, _web.createComponent)(_ToolbarGroupContext.ToolbarGroupContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/toolbar/input/ToolbarInput.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarInput = ToolbarInput;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _composite = require("../../composite/composite");
 var _CompositeItem = require("../../composite/item/CompositeItem");
@@ -13,7 +14,6 @@ var _useFocusableWhenDisabled = require("../../utils/useFocusableWhenDisabled");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToolbarGroupContext = require("../group/ToolbarGroupContext");
 var _ToolbarRootContext = require("../root/ToolbarRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A native input element that integrates with Toolbar keyboard navigation.
  * Renders an `<input>` element.
@@ -72,7 +72,7 @@ function ToolbarInput(componentProps) {
       }
     }, elementProps, props => (0, _mergeProps.mergeProps)(props, focusableWhenDisabledProps())]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+  return (0, _web.createComponent)(_CompositeItem.CompositeItem, {
     metadata: itemMetadata,
     render: element
   });

package/cjs/toolbar/link/ToolbarLink.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarLink = ToolbarLink;
+var _web = require("solid-js/web");
 var _CompositeItem = require("../../composite/item/CompositeItem");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToolbarRootContext = require("../root/ToolbarRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const TOOLBAR_LINK_METADATA = {
   // links cannot be disabled, this metadata is only used for deriving `disabledIndices``
   // TODO: better name
@@ -35,7 +35,7 @@ function ToolbarLink(componentProps) {
     state,
     props: elementProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+  return (0, _web.createComponent)(_CompositeItem.CompositeItem, {
     metadata: TOOLBAR_LINK_METADATA,
     render: element
   });

package/cjs/toolbar/root/ToolbarRoot.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarRoot = ToolbarRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeRoot = require("../../composite/root/CompositeRoot");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToolbarRootContext = require("./ToolbarRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups, or menus.
  * Renders a `<div>` element.
@@ -57,15 +57,25 @@ function ToolbarRoot(componentProps) {
       role: 'toolbar'
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarRootContext.ToolbarRootContext.Provider, {
+  return (0, _web.createComponent)(_ToolbarRootContext.ToolbarRootContext.Provider, {
     value: toolbarRootContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
-      cols: cols(),
-      disabledIndices: disabledIndices(),
-      loop: loop(),
-      onMapChange: setItemArray,
-      orientation: orientation(),
-      render: element
-    })
+    get children() {
+      return (0, _web.createComponent)(_CompositeRoot.CompositeRoot, {
+        get cols() {
+          return cols();
+        },
+        get disabledIndices() {
+          return disabledIndices();
+        },
+        get loop() {
+          return loop();
+        },
+        onMapChange: setItemArray,
+        get orientation() {
+          return orientation();
+        },
+        render: element
+      });
+    }
   });
 }

package/cjs/toolbar/separator/ToolbarSeparator.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarSeparator = ToolbarSeparator;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _separator = require("../../separator");
 var _ToolbarRootContext = require("../root/ToolbarRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A separator element accessible to screen readers.
  * Renders a `<div>` element.
@@ -20,9 +20,14 @@ function ToolbarSeparator(props) {
     vertical: 'horizontal',
     horizontal: 'vertical'
   })[context.orientation()]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_separator.Separator, {
-    orientation: orientation(),
-    ...props,
-    ref: props.ref
-  });
+  return (0, _web.createComponent)(_separator.Separator, (0, _web.mergeProps)({
+    get orientation() {
+      return orientation();
+    }
+  }, props, {
+    ref(r$) {
+      var _ref$ = props.ref;
+      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+    }
+  }));
 }

package/cjs/tooltip/arrow/TooltipArrow.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipArrow = TooltipArrow;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays an element positioned against the tooltip anchor.
  * Renders a `<div>` element.
@@ -50,7 +50,5 @@ function TooltipArrow(componentProps) {
     }, elementProps],
     customStyleHookMapping: _popupStateMapping.popupStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/tooltip/popup/TooltipPopup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipPopup = TooltipPopup;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _constants = require("../../utils/constants");
 var _popupStateMapping = require("../../utils/popupStateMapping");
@@ -12,7 +13,6 @@ var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
 var _TooltipRootContext = require("../root/TooltipRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -76,7 +76,5 @@ function TooltipPopup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/tooltip/portal/TooltipPortal.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipPortal = TooltipPortal;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _FloatingPortalLite = require("../../utils/FloatingPortalLite");
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _TooltipPortalContext = require("./TooltipPortalContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -21,14 +21,24 @@ function TooltipPortal(props) {
     mounted
   } = (0, _TooltipRootContext.useTooltipRootContext)();
   const shouldRender = () => mounted() || keepMounted();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipPortalContext.TooltipPortalContext.Provider, {
-      value: keepMounted,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingPortalLite.FloatingPortalLite, {
-        root: props.container,
-        children: props.children
-      })
-    })
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return (0, _web.createComponent)(_TooltipPortalContext.TooltipPortalContext.Provider, {
+        value: keepMounted,
+        get children() {
+          return (0, _web.createComponent)(_FloatingPortalLite.FloatingPortalLite, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/cjs/tooltip/positioner/TooltipPositioner.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipPositioner = TooltipPositioner;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _constants = require("../../utils/constants");
@@ -13,7 +14,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _TooltipPortalContext = require("../portal/TooltipPortalContext");
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _TooltipPositionerContext = require("./TooltipPositionerContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the tooltip against the trigger.
  * Renders a `<div>` element.
@@ -110,8 +110,10 @@ function TooltipPositioner(componentProps) {
     props: [positioner.props, elementProps],
     customStyleHookMapping: _popupStateMapping.popupStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipPositionerContext.TooltipPositionerContext.Provider, {
+  return (0, _web.createComponent)(_TooltipPositionerContext.TooltipPositionerContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }