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

package/cjs/menu/group-label/MenuGroupLabel.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuGroupLabel = MenuGroupLabel;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuGroupContext = require("../group/MenuGroupContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
@@ -36,7 +36,5 @@ function MenuGroupLabel(componentProps) {
       role: 'presentation'
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/item/MenuItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuItem = MenuItem;
+var _web = require("solid-js/web");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useMenuItem = require("./useMenuItem");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual interactive item in the menu.
  * Renders a `<div>` element.
@@ -67,7 +67,5 @@ function MenuItem(componentProps) {
     },
     props: [itemProps, elementProps, getItemProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/popup/MenuPopup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuPopup = MenuPopup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
@@ -14,7 +15,6 @@ var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -108,13 +108,21 @@ function MenuPopup(componentProps) {
       }
     }]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingFocusManager, {
+  return (0, _web.createComponent)(_floatingUiSolid.FloatingFocusManager, {
     context: floatingContext,
     modal: false,
-    disabled: !mounted(),
-    returnFocus: local.finalFocus || returnFocus(),
-    initialFocus: parent().type === 'menu' ? -1 : 0,
+    get disabled() {
+      return !mounted();
+    },
+    get returnFocus() {
+      return local.finalFocus || returnFocus();
+    },
+    get initialFocus() {
+      return parent().type === 'menu' ? -1 : 0;
+    },
     restoreFocus: true,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/menu/portal/MenuPortal.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuPortal = MenuPortal;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _MenuPortalContext = require("./MenuPortalContext");
-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 MenuPortal(props) {
     mounted
   } = (0, _MenuRootContext.useMenuRootContext)();
   const shouldRender = () => mounted() || keepMounted();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuPortalContext.MenuPortalContext.Provider, {
-      value: keepMounted,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingPortal, {
-        root: props.container,
-        children: props.children
-      })
-    })
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return (0, _web.createComponent)(_MenuPortalContext.MenuPortalContext.Provider, {
+        value: keepMounted,
+        get children() {
+          return (0, _web.createComponent)(_floatingUiSolid.FloatingPortal, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/cjs/menu/positioner/MenuPositioner.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuPositioner = MenuPositioner;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeList = require("../../composite/list/CompositeList");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
@@ -18,7 +19,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuPortalContext = require("../portal/MenuPortalContext");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _MenuPositionerContext = require("./MenuPositionerContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the menu popup against the trigger.
  * Renders a `<div>` element.
@@ -198,27 +198,39 @@ function MenuPositioner(componentProps) {
     }
     return null;
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuPositionerContext.MenuPositionerContext.Provider, {
+  return (0, _web.createComponent)(_MenuPositionerContext.MenuPositionerContext.Provider, {
     value: contextValue,
-    children: [shouldRenderBackdrop() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
-      managed: true,
-      ref: el => {
-        const p = parent();
-        if (p.type === 'context-menu' || p.type === 'nested-context-menu') {
-          p.context.refs.internalBackdropRef = el;
+    get children() {
+      return [(0, _web.memo)(() => (0, _web.memo)(() => !!shouldRenderBackdrop())() && (0, _web.createComponent)(_InternalBackdrop.InternalBackdrop, {
+        managed: true,
+        ref: el => {
+          const p = parent();
+          if (p.type === 'context-menu' || p.type === 'nested-context-menu') {
+            p.context.refs.internalBackdropRef = el;
+          }
+        },
+        get inert() {
+          return (0, _inertValue.inertValue)(!open());
+        },
+        get cutout() {
+          return backdropCutout();
         }
-      },
-      inert: (0, _inertValue.inertValue)(!open()),
-      cutout: backdropCutout()
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingNode, {
-      id: nodeId(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-        refs: {
-          elements: itemDomElements,
-          labels: itemLabels
+      })), (0, _web.createComponent)(_floatingUiSolid.FloatingNode, {
+        get id() {
+          return nodeId();
         },
-        children: element()
-      })
-    })]
+        get children() {
+          return (0, _web.createComponent)(_CompositeList.CompositeList, {
+            refs: {
+              elements: itemDomElements,
+              labels: itemLabels
+            },
+            get children() {
+              return element();
+            }
+          });
+        }
+      })];
+    }
   });
 }

package/cjs/menu/radio-group/MenuRadioGroup.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuRadioGroup = MenuRadioGroup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useControlled = require("../../utils/useControlled");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MenuRadioGroupContext = require("./MenuRadioGroupContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups related radio items.
  * Renders a `<div>` element.
@@ -49,8 +49,10 @@ function MenuRadioGroup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioGroupContext.MenuRadioGroupContext.Provider, {
+  return (0, _web.createComponent)(_MenuRadioGroupContext.MenuRadioGroupContext.Provider, {
     value: context,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/menu/radio-item/MenuRadioItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuRadioItem = MenuRadioItem;
+var _web = require("solid-js/web");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
@@ -14,7 +15,6 @@ var _MenuRadioGroupContext = require("../radio-group/MenuRadioGroupContext");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _styleHookMapping = require("../utils/styleHookMapping");
 var _MenuRadioItemContext = require("./MenuRadioItemContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A menu item that works like a radio button in a given group.
  * Renders a `<div>` element.
@@ -102,8 +102,10 @@ function MenuRadioItem(componentProps) {
       }
     }, elementProps, getItemProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioItemContext.MenuRadioItemContext.Provider, {
+  return (0, _web.createComponent)(_MenuRadioItemContext.MenuRadioItemContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/menu/radio-item-indicator/MenuRadioItemIndicator.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuRadioItemIndicator = MenuRadioItemIndicator;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _MenuRadioItemContext = require("../radio-item/MenuRadioItemContext");
 var _styleHookMapping = require("../utils/styleHookMapping");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the radio item is selected.
  * Renders a `<div>` element.
@@ -60,7 +60,5 @@ function MenuRadioItemIndicator(componentProps) {
       'aria-hidden': true
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/root/MenuRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuRoot = MenuRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
@@ -21,7 +22,6 @@ var _useTimeout = require("../../utils/useTimeout");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
 var _MenuRootContext = require("./MenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_ARRAY = [];
 const EMPTY_REF = false;
 
@@ -413,17 +413,29 @@ function MenuRoot(props) {
     allowMouseEnter,
     setAllowMouseEnter
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: parent().type === undefined || parent().type === 'context-menu',
-    fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRootContext.MenuRootContext.Provider, {
-      value: context,
-      children: props.children
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingTree, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRootContext.MenuRootContext.Provider, {
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return parent().type === undefined || parent().type === 'context-menu';
+    },
+    get fallback() {
+      return (0, _web.createComponent)(_MenuRootContext.MenuRootContext.Provider, {
         value: context,
-        children: props.children
-      })
-    })
+        get children() {
+          return props.children;
+        }
+      });
+    },
+    get children() {
+      return (0, _web.createComponent)(_floatingUiSolid.FloatingTree, {
+        get children() {
+          return (0, _web.createComponent)(_MenuRootContext.MenuRootContext.Provider, {
+            value: context,
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/cjs/menu/submenu-root/MenuSubmenuRoot.js

@@ -10,9 +10,9 @@ Object.defineProperty(exports, "useMenuSubmenuRootContext", {
     return _MenuSubmenuRootContext.useMenuSubmenuRootContext;
   }
 });
+var _web = require("solid-js/web");
 var _MenuRoot = require("../root/MenuRoot");
 var _MenuSubmenuRootContext = require("./MenuSubmenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of a submenu.
  * Doesn’t render its own HTML element.
@@ -20,10 +20,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 function MenuSubmenuRoot(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuSubmenuRootContext.MenuSubmenuRootContext.Provider, {
+  return (0, _web.createComponent)(_MenuSubmenuRootContext.MenuSubmenuRootContext.Provider, {
     value: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRoot.MenuRoot, {
-      ...props
-    })
+    get children() {
+      return (0, _web.createComponent)(_MenuRoot.MenuRoot, props);
+    }
   });
 }

package/cjs/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuSubmenuTrigger = MenuSubmenuTrigger;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _floatingUiSolid = require("../../floating-ui-solid");
@@ -14,7 +15,6 @@ var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useMenuItem = require("../item/useMenuItem");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A menu item that opens a submenu.
  * Renders a `<div>` element.
@@ -95,7 +95,5 @@ function MenuSubmenuTrigger(componentProps) {
       }
     }]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/menu/trigger/MenuTrigger.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuTrigger = MenuTrigger;
+var _web = require("solid-js/web");
 var _dom = require("@floating-ui/utils/dom");
 var _solidJs = require("solid-js");
 var _CompositeItem = require("../../composite/item/CompositeItem");
@@ -18,7 +19,6 @@ var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTimeout = require("../../utils/useTimeout");
 var _MenuRootContext = require("../root/MenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const BOUNDARY_OFFSET = 2;
 
 /**
@@ -127,12 +127,18 @@ function MenuTrigger(componentProps) {
     customStyleHookMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
     props: [rootTriggerProps, elementProps, getTriggerProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: parent().type === 'menubar',
-    fallback: element(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
-      render: element
-    })
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return parent().type === 'menubar';
+    },
+    get fallback() {
+      return element();
+    },
+    get children() {
+      return (0, _web.createComponent)(_CompositeItem.CompositeItem, {
+        render: element
+      });
+    }
   });
 }
 function findRootOwnerId(node) {

package/cjs/menubar/Menubar.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Menubar = Menubar;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeRoot = require("../composite/root/CompositeRoot");
 var _floatingUiSolid = require("../floating-ui-solid");
@@ -13,7 +14,6 @@ var _useAnimationFrame = require("../utils/useAnimationFrame");
 var _useBaseUiId = require("../utils/useBaseUiId");
 var _useRenderElement = require("../utils/useRenderElement");
 var _MenubarContext = require("./MenubarContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The container for menus.
  *
@@ -63,18 +63,30 @@ function Menubar(props) {
       }
     }, otherProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenubarContext.MenubarContext.Provider, {
+  return (0, _web.createComponent)(_MenubarContext.MenubarContext.Provider, {
     value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingTree, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenubarContent, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
-          render: element,
-          orientation: orientation(),
-          loop: loop(),
-          highlightItemOnHover: hasSubmenuOpen()
-        })
-      })
-    })
+    get children() {
+      return (0, _web.createComponent)(_floatingUiSolid.FloatingTree, {
+        get children() {
+          return (0, _web.createComponent)(MenubarContent, {
+            get children() {
+              return (0, _web.createComponent)(_CompositeRoot.CompositeRoot, {
+                render: element,
+                get orientation() {
+                  return orientation();
+                },
+                get loop() {
+                  return loop();
+                },
+                get highlightItemOnHover() {
+                  return hasSubmenuOpen();
+                }
+              });
+            }
+          });
+        }
+      });
+    }
   });
 }
 function MenubarContent(props) {
@@ -112,8 +124,12 @@ function MenubarContent(props) {
       menuEvents.off('openchange', onSubmenuOpenChange);
     });
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingNode, {
-    id: nodeId(),
-    children: props.children
+  return (0, _web.createComponent)(_floatingUiSolid.FloatingNode, {
+    get id() {
+      return nodeId();
+    },
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/meter/indicator/MeterIndicator.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeterIndicator = MeterIndicator;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MeterRootContext = require("../root/MeterRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Visualizes the position of the value along the range.
  * Renders a `<div>` element.
@@ -30,7 +30,5 @@ function MeterIndicator(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/meter/label/MeterLabel.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeterLabel = MeterLabel;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MeterRootContext = require("../root/MeterRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An accessible label for the meter.
  * Renders a `<span>` element.
@@ -40,7 +40,5 @@ function MeterLabel(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/meter/root/MeterRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeterRoot = MeterRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _formatNumber = require("../../utils/formatNumber");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _valueToPercent = require("../../utils/valueToPercent");
 var _MeterRootContext = require("./MeterRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 function formatValue(value, locale, format) {
   if (!format) {
     return (0, _formatNumber.formatNumber)(value / 100, locale, {
@@ -82,8 +82,10 @@ function MeterRoot(componentProps) {
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     props: [defaultProps, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MeterRootContext.MeterRootContext.Provider, {
+  return (0, _web.createComponent)(_MeterRootContext.MeterRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/meter/track/MeterTrack.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeterTrack = MeterTrack;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Contains the meter indicator and represents the entire range of the meter.
  * Renders a `<div>` element.
@@ -18,7 +18,5 @@ function MeterTrack(componentProps) {
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     props: elementProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/meter/value/MeterValue.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeterValue = MeterValue;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _MeterRootContext = require("../root/MeterRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A text element displaying the current value.
  * Renders a `<span>` element.
@@ -25,12 +25,8 @@ function MeterValue(componentProps) {
       'aria-hidden': true
     }, elementProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: typeof componentProps.children === 'function' ? componentProps.children(formattedValue(), value()) : (formattedValue() || value()) ?? ''
-      });
+      return (0, _web.memo)(() => (0, _web.memo)(() => typeof componentProps.children === 'function')() ? componentProps.children(formattedValue(), value()) : (formattedValue() || value()) ?? '');
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }