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

package/cjs/accordion/header/AccordionHeader.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AccordionHeader = AccordionHeader;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AccordionItemContext = require("../item/AccordionItemContext");
 var _styleHooks = require("../item/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A heading that labels the corresponding panel.
  * Renders an `<h3>` element.
@@ -25,7 +25,5 @@ function AccordionHeader(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.accordionStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/accordion/item/AccordionItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AccordionItem = AccordionItem;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _CollapsibleRootContext = require("../../collapsible/root/CollapsibleRootContext");
@@ -15,7 +16,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _AccordionRootContext = require("../root/AccordionRootContext");
 var _AccordionItemContext = require("./AccordionItemContext");
 var _styleHooks = require("./styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups an accordion header with the corresponding panel.
  * Renders a `<div>` element.
@@ -110,11 +110,15 @@ function AccordionItem(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.accordionStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleRootContext.CollapsibleRootContext.Provider, {
+  return (0, _web.createComponent)(_CollapsibleRootContext.CollapsibleRootContext.Provider, {
     value: collapsibleContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionItemContext.AccordionItemContext.Provider, {
-      value: accordionItemContext,
-      children: element()
-    })
+    get children() {
+      return (0, _web.createComponent)(_AccordionItemContext.AccordionItemContext.Provider, {
+        value: accordionItemContext,
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/cjs/accordion/panel/AccordionPanel.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AccordionPanel = AccordionPanel;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useCollapsiblePanel = require("../../collapsible/panel/useCollapsiblePanel");
 var _CollapsibleRootContext = require("../../collapsible/root/CollapsibleRootContext");
@@ -15,7 +16,6 @@ var _AccordionItemContext = require("../item/AccordionItemContext");
 var _styleHooks = require("../item/styleHooks");
 var _AccordionRootContext = require("../root/AccordionRootContext");
 var _AccordionPanelCssVars = require("./AccordionPanelCssVars");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A collapsible panel with the accordion item contents.
  * Renders a `<div>` element.
@@ -131,8 +131,12 @@ function AccordionPanel(componentProps) {
     customStyleHookMapping: _styleHooks.accordionStyleHookMapping
   });
   const shouldRender = () => keepMounted() || hiddenUntilFound() || !keepMounted() && mounted();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: shouldRender(),
-    children: element()
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/accordion/root/AccordionRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AccordionRoot = AccordionRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _composite = require("../../composite/composite");
 var _CompositeList = require("../../composite/list/CompositeList");
@@ -14,7 +15,6 @@ var _useControlled = require("../../utils/useControlled");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _warn = require("../../utils/warn");
 var _AccordionRootContext = require("./AccordionRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const SUPPORTED_KEYS = new Set([_composite.ARROW_DOWN, _composite.ARROW_UP, _composite.ARROW_RIGHT, _composite.ARROW_LEFT, _composite.HOME, _composite.END]);
 const rootStyleHookMapping = {
   value: () => null
@@ -187,13 +187,17 @@ function AccordionRoot(componentProps) {
     }, elementProps],
     customStyleHookMapping: rootStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionRootContext.AccordionRootContext.Provider, {
+  return (0, _web.createComponent)(_AccordionRootContext.AccordionRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-      refs: {
-        elements: accordionItemElements
-      },
-      children: element()
-    })
+    get children() {
+      return (0, _web.createComponent)(_CompositeList.CompositeList, {
+        refs: {
+          elements: accordionItemElements
+        },
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/cjs/accordion/trigger/AccordionTrigger.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AccordionTrigger = AccordionTrigger;
+var _web = require("solid-js/web");
 var _CollapsibleRootContext = require("../../collapsible/root/CollapsibleRootContext");
 var _solidHelpers = require("../../solid-helpers");
 var _useButton = require("../../use-button");
 var _collapsibleOpenStateMapping = require("../../utils/collapsibleOpenStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AccordionItemContext = require("../item/AccordionItemContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that opens and closes the corresponding panel.
  * Renders a `<button>` element.
@@ -63,7 +63,5 @@ function AccordionTrigger(componentProps) {
     props: [props, elementProps, getButtonProps],
     customStyleHookMapping: _collapsibleOpenStateMapping.triggerOpenStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogBackdrop = AlertDialogBackdrop;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _styleHookMapping = require("../../utils/styleHookMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -56,7 +56,5 @@ function AlertDialogBackdrop(componentProps) {
     customStyleHookMapping,
     enabled: () => !nested()
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogClose = AlertDialogClose;
+var _web = require("solid-js/web");
 var _useDialogClose = require("../../dialog/close/useDialogClose");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that closes the alert dialog.
  * Renders a `<button>` element.
@@ -42,7 +42,5 @@ function AlertDialogClose(componentProps) {
     ref: dialogCloseRef,
     props: [elementProps, getRootProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogDescription = AlertDialogDescription;
+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 _AlertDialogRootContext = require("../root/AlertDialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A paragraph with additional information about the alert dialog.
  * Renders a `<p>` element.
@@ -40,7 +40,5 @@ function AlertDialogDescription(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogPopup = AlertDialogPopup;
+var _web = require("solid-js/web");
 var _useDialogPopup = require("../../dialog/popup/useDialogPopup");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
@@ -16,7 +17,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
 var _AlertDialogPopupCssVars = require("./AlertDialogPopupCssVars");
 var _AlertDialogPopupDataAttributes = require("./AlertDialogPopupDataAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping,
@@ -106,19 +106,27 @@ function AlertDialogPopup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [mounted() && modal() === true && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
-      managed: true,
-      inert: (0, _inertValue.inertValue)(!open()),
-      ref: el => {
-        refs.internalBackdropRef = el;
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingFocusManager, {
-      context: floatingRootContext,
-      disabled: !mounted(),
-      initialFocus: resolvedInitialFocus(),
-      returnFocus: local.finalFocus,
-      children: element()
-    })]
-  });
+  return [(0, _web.memo)(() => (0, _web.memo)(() => !!(mounted() && modal() === true))() && (0, _web.createComponent)(_InternalBackdrop.InternalBackdrop, {
+    managed: true,
+    get inert() {
+      return (0, _inertValue.inertValue)(!open());
+    },
+    ref: el => {
+      refs.internalBackdropRef = el;
+    }
+  })), (0, _web.createComponent)(_floatingUiSolid.FloatingFocusManager, {
+    context: floatingRootContext,
+    get disabled() {
+      return !mounted();
+    },
+    get initialFocus() {
+      return resolvedInitialFocus();
+    },
+    get returnFocus() {
+      return local.finalFocus;
+    },
+    get children() {
+      return element();
+    }
+  })];
 }

package/cjs/alert-dialog/portal/AlertDialogPortal.js

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

package/cjs/alert-dialog/root/AlertDialogRoot.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogRoot = AlertDialogRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useDialogRoot = require("../../dialog/root/useDialogRoot");
 var _AlertDialogRootContext = require("./AlertDialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the alert dialog.
  * Doesn’t render its own HTML element.
@@ -36,8 +36,10 @@ function AlertDialogRoot(props) {
     // eslint-disable-next-line solid/reactivity
     onOpenChangeComplete: props.onOpenChangeComplete
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AlertDialogRootContext.AlertDialogRootContext.Provider, {
+  return (0, _web.createComponent)(_AlertDialogRootContext.AlertDialogRootContext.Provider, {
     value: contextValue,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/alert-dialog/title/AlertDialogTitle.js

@@ -9,7 +9,6 @@ var _solidHelpers = require("../../solid-helpers");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A heading that labels the dialog.
  * Renders an `<h2>` element.
@@ -40,7 +39,5 @@ function AlertDialogTitle(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element
-  });
+  return element;
 }

package/cjs/alert-dialog/trigger/AlertDialogTrigger.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogTrigger = AlertDialogTrigger;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useButton = require("../../use-button/useButton");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that opens the alert dialog.
  * Renders a `<button>` element.
@@ -49,7 +49,5 @@ function AlertDialogTrigger(componentProps) {
     props: [triggerProps, elementProps, getButtonProps],
     customStyleHookMapping: _popupStateMapping.triggerOpenStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/avatar/fallback/AvatarFallback.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarFallback = AvatarFallback;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTimeout = require("../../utils/useTimeout");
 var _AvatarRootContext = require("../root/AvatarRootContext");
 var _styleHooks = require("../root/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Rendered when the image fails to load or when no image is provided.
  * Renders a `<span>` element.
@@ -43,7 +43,5 @@ function AvatarFallback(componentProps) {
     customStyleHookMapping: _styleHooks.avatarStyleHookMapping,
     enabled: () => imageLoadingStatus() !== 'loaded' && delayPassed()
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/avatar/image/AvatarImage.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarImage = AvatarImage;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AvatarRootContext = require("../root/AvatarRootContext");
 var _styleHooks = require("../root/styleHooks");
 var _useImageLoadingStatus = require("./useImageLoadingStatus");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The image to be displayed in the avatar.
  * Renders an `<img>` element.
@@ -47,7 +47,5 @@ function AvatarImage(componentProps) {
     customStyleHookMapping: _styleHooks.avatarStyleHookMapping,
     enabled: () => imageLoadingStatus() === 'loaded'
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/avatar/root/AvatarRoot.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarRoot = AvatarRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AvatarRootContext = require("./AvatarRootContext");
 var _styleHooks = require("./styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays a user's profile picture, initials, or fallback icon.
  * Renders a `<span>` element.
@@ -33,8 +33,10 @@ function AvatarRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.avatarStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarRootContext.AvatarRootContext.Provider, {
+  return (0, _web.createComponent)(_AvatarRootContext.AvatarRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/checkbox/indicator/CheckboxIndicator.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxIndicator = CheckboxIndicator;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _constants = require("../../field/utils/constants");
 var _styleHookMapping = require("../../utils/styleHookMapping");
@@ -12,7 +13,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _CheckboxRootContext = require("../root/CheckboxRootContext");
 var _useCustomStyleHookMapping = require("../utils/useCustomStyleHookMapping");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the checkbox is ticked.
  * Renders a `<span>` element.
@@ -59,8 +59,12 @@ function CheckboxIndicator(componentProps) {
     props: elementProps,
     enabled: shouldRender
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: shouldRender(),
-    children: element()
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/checkbox/root/CheckboxRoot.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CheckboxRoot = CheckboxRoot;
 exports.PARENT_CHECKBOX = void 0;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CheckboxGroupContext = require("../../checkbox-group/CheckboxGroupContext");
 var _useFieldControlValidation = require("../../field/control/useFieldControlValidation");
@@ -20,7 +21,8 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _visuallyHidden = require("../../utils/visuallyHidden");
 var _useCustomStyleHookMapping = require("../utils/useCustomStyleHookMapping");
 var _CheckboxRootContext = require("./CheckboxRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<input>`),
+  _tmpl$2 = /*#__PURE__*/(0, _web.template)(`<input type=hidden value=off>`);
 const PARENT_CHECKBOX = exports.PARENT_CHECKBOX = 'data-parent';
 
 /**
@@ -282,14 +284,18 @@ function CheckboxRoot(componentProps) {
       onClick
     }, props => fieldControlValidation().getValidationProps(props), elementProps, props => (0, _mergeProps.mergeProps)(props, groupProps().other), getButtonProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CheckboxRootContext.CheckboxRootContext.Provider, {
+  return (0, _web.createComponent)(_CheckboxRootContext.CheckboxRootContext.Provider, {
     value: state,
-    children: [element(), !checked() && !groupContext && local.name && !parent() && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: "hidden",
-      name: local.name,
-      value: "off"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps()
-    })]
+    get children() {
+      return [(0, _web.memo)(() => element()), (0, _web.memo)(() => (0, _web.memo)(() => !!(!checked() && !groupContext && local.name && !parent()))() && (() => {
+        var _el$2 = _tmpl$2();
+        (0, _web.effect)(() => (0, _web.setAttribute)(_el$2, "name", local.name));
+        return _el$2;
+      })()), (() => {
+        var _el$ = _tmpl$();
+        (0, _web.spread)(_el$, (0, _web.mergeProps)(() => inputProps()), false, false);
+        return _el$;
+      })()];
+    }
   });
 }

package/cjs/checkbox-group/CheckboxGroup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxGroup = CheckboxGroup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CheckboxRoot = require("../checkbox/root/CheckboxRoot");
 var _useFieldControlValidation = require("../field/control/useFieldControlValidation");
@@ -16,7 +17,6 @@ var _useControlled = require("../utils/useControlled");
 var _useRenderElement = require("../utils/useRenderElement");
 var _CheckboxGroupContext = require("./CheckboxGroupContext");
 var _useCheckboxGroupParent = require("./useCheckboxGroupParent");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a shared state to a series of checkboxes.
  *
@@ -94,8 +94,10 @@ function CheckboxGroup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxGroupContext.CheckboxGroupContext.Provider, {
+  return (0, _web.createComponent)(_CheckboxGroupContext.CheckboxGroupContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/collapsible/panel/CollapsiblePanel.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CollapsiblePanel = CollapsiblePanel;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
@@ -13,7 +14,6 @@ var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
 var _styleHooks = require("../root/styleHooks");
 var _CollapsiblePanelCssVars = require("./CollapsiblePanelCssVars");
 var _useCollapsiblePanel = require("./useCollapsiblePanel");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -110,8 +110,12 @@ function CollapsiblePanel(componentProps) {
     }, elementProps],
     customStyleHookMapping: _styleHooks.collapsibleStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: shouldRender(),
-    children: element()
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return element();
+    }
   });
 }