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

package/cjs/collapsible/root/CollapsibleRoot.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CollapsibleRoot = CollapsibleRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _CollapsibleRootContext = require("./CollapsibleRootContext");
 var _styleHooks = require("./styleHooks");
 var _useCollapsibleRoot = require("./useCollapsibleRoot");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the collapsible.
  * Renders a `<div>` element.
@@ -50,12 +50,20 @@ function CollapsibleRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.collapsibleStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleRootContext.CollapsibleRootContext.Provider, {
+  return (0, _web.createComponent)(_CollapsibleRootContext.CollapsibleRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: componentProps.render !== null,
-      fallback: componentProps.children,
-      children: element()
-    })
+    get children() {
+      return (0, _web.createComponent)(_solidJs.Show, {
+        get when() {
+          return componentProps.render !== null;
+        },
+        get fallback() {
+          return componentProps.children;
+        },
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/cjs/collapsible/trigger/CollapsibleTrigger.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CollapsibleTrigger = CollapsibleTrigger;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useButton = require("../../use-button");
 var _collapsibleOpenStateMapping = require("../../utils/collapsibleOpenStateMapping");
 var _styleHookMapping = require("../../utils/styleHookMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const styleHookMapping = {
   ..._collapsibleOpenStateMapping.triggerOpenStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -57,7 +57,5 @@ function CollapsibleTrigger(componentProps) {
     props: [props, elementProps, button.getButtonProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/composite/item/CompositeItem.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CompositeItem = CompositeItem;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useCompositeItem = require("./useCompositeItem");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
  */
@@ -25,7 +25,5 @@ function CompositeItem(componentProps) {
     },
     props: [compositeItem.props, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/composite/list/CompositeList.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CompositeList = CompositeList;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _solidHelpers = require("../../solid-helpers");
 var _CompositeListContext = require("./CompositeListContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides context for a list of items in a composite component.
  * @internal
@@ -75,18 +75,22 @@ function CompositeList(props) {
     props.onMapChange?.(newArray);
   }));
   (0, _solidJs.createEffect)((0, _solidJs.on)(sortedMap, sorted => listeners.forEach(l => l(sorted))));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeListContext.CompositeListContext.Provider, {
-    value: {
-      register,
-      unregister,
-      subscribeMapChange,
-      unsubscribeMapChange,
-      // eslint-disable-next-line solid/reactivity
-      refs: props.refs,
-      nextIndex,
-      setNextIndex
+  return (0, _web.createComponent)(_CompositeListContext.CompositeListContext.Provider, {
+    get value() {
+      return {
+        register,
+        unregister,
+        subscribeMapChange,
+        unsubscribeMapChange,
+        // eslint-disable-next-line solid/reactivity
+        refs: props.refs,
+        nextIndex,
+        setNextIndex
+      };
     },
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }
 function sortByDocumentPosition(a, b) {

package/cjs/composite/root/CompositeRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CompositeRoot = CompositeRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _CompositeList = require("../list/CompositeList");
 var _CompositeRootContext = require("./CompositeRootContext");
 var _useCompositeRoot = require("./useCompositeRoot");
-var _jsxRuntime = require("react/jsx-runtime");
 const COMPOSITE_ROOT_STATE = {};
 
 /**
@@ -37,12 +37,18 @@ function CompositeRoot(componentProps) {
     ref: compositeRoot.setRootRef,
     props: [compositeRoot.props, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRootContext.CompositeRootContext.Provider, {
+  return (0, _web.createComponent)(_CompositeRootContext.CompositeRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-      refs: compositeRoot.refs,
-      onMapChange: onMapChange,
-      children: element()
-    })
+    get children() {
+      return (0, _web.createComponent)(_CompositeList.CompositeList, {
+        get refs() {
+          return compositeRoot.refs;
+        },
+        onMapChange: onMapChange,
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/cjs/context-menu/root/ContextMenuRoot.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContextMenuRoot = ContextMenuRoot;
+var _web = require("solid-js/web");
 var _menu = require("../../menu");
 var _MenuRootContext = require("../../menu/root/MenuRootContext");
 var _useId = require("../../utils/useId");
 var _ContextMenuRootContext = require("./ContextMenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A component that creates a context menu activated by right clicking or long pressing.
  * Doesn’t render its own HTML element.
@@ -39,13 +39,15 @@ function ContextMenuRoot(props) {
     refs,
     rootId: id
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContextMenuRootContext.ContextMenuRootContext.Provider, {
+  return (0, _web.createComponent)(_ContextMenuRootContext.ContextMenuRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRootContext.MenuRootContext.Provider, {
-      value: undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_menu.Menu.Root, {
-        ...props
-      })
-    })
+    get children() {
+      return (0, _web.createComponent)(_MenuRootContext.MenuRootContext.Provider, {
+        value: undefined,
+        get children() {
+          return (0, _web.createComponent)(_menu.Menu.Root, props);
+        }
+      });
+    }
   });
 }

package/cjs/context-menu/trigger/ContextMenuTrigger.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContextMenuTrigger = ContextMenuTrigger;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _utils = require("../../floating-ui-solid/utils");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _owner = require("../../utils/owner");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTimeout = require("../../utils/useTimeout");
 var _ContextMenuRootContext = require("../root/ContextMenuRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const LONG_PRESS_DELAY = 500;
 
 /**
@@ -127,7 +127,5 @@ function ContextMenuTrigger(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/dialog/backdrop/DialogBackdrop.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogBackdrop = DialogBackdrop;
+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 _DialogRootContext = require("../root/DialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -56,7 +56,5 @@ function DialogBackdrop(componentProps) {
     }, elementProps],
     enabled: () => !nested()
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/dialog/close/DialogClose.js

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

package/cjs/dialog/description/DialogDescription.js

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

package/cjs/dialog/popup/DialogPopup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogPopup = DialogPopup;
+var _web = require("solid-js/web");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
 var _inertValue = require("../../utils/inertValue");
@@ -16,7 +17,6 @@ var _DialogRootContext = require("../root/DialogRootContext");
 var _DialogPopupCssVars = require("./DialogPopupCssVars");
 var _DialogPopupDataAttributes = require("./DialogPopupDataAttributes");
 var _useDialogPopup = require("./useDialogPopup");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping,
@@ -106,21 +106,33 @@ function DialogPopup(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(),
-      closeOnFocusOut: dismissible?.(),
-      initialFocus: resolvedInitialFocus(),
-      returnFocus: local.finalFocus,
-      modal: modal() !== false,
-      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 closeOnFocusOut() {
+      return dismissible?.();
+    },
+    get initialFocus() {
+      return resolvedInitialFocus();
+    },
+    get returnFocus() {
+      return local.finalFocus;
+    },
+    get modal() {
+      return modal() !== false;
+    },
+    get children() {
+      return element();
+    }
+  })];
 }

package/cjs/dialog/portal/DialogPortal.js

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

package/cjs/dialog/root/DialogRoot.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogRoot = DialogRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _DialogContext = require("../utils/DialogContext");
 var _DialogRootContext = require("./DialogRootContext");
 var _useDialogRoot = require("./useDialogRoot");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the dialog.
  * Doesn’t render its own HTML element.
@@ -42,11 +42,15 @@ function DialogRoot(props) {
   const dialogRootContextValue = {
     dismissible
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContext.DialogContext.Provider, {
+  return (0, _web.createComponent)(_DialogContext.DialogContext.Provider, {
     value: dialogContextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
-      value: dialogRootContextValue,
-      children: props.children
-    })
+    get children() {
+      return (0, _web.createComponent)(_DialogRootContext.DialogRootContext.Provider, {
+        value: dialogRootContextValue,
+        get children() {
+          return props.children;
+        }
+      });
+    }
   });
 }

package/cjs/dialog/title/DialogTitle.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogTitle = DialogTitle;
+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 _DialogRootContext = require("../root/DialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A heading that labels the dialog.
  * Renders an `<h2>` element.
@@ -40,7 +40,5 @@ function DialogTitle(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/dialog/trigger/DialogTrigger.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogTrigger = DialogTrigger;
+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 _DialogRootContext = require("../root/DialogRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that opens the dialog.
  * Renders a `<button>` element.
@@ -49,7 +49,5 @@ function DialogTrigger(componentProps) {
     props: [triggerProps, elementProps, getButtonProps],
     customStyleHookMapping: _popupStateMapping.triggerOpenStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/direction-provider/DirectionProvider.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DirectionProvider = DirectionProvider;
+var _web = require("solid-js/web");
 var _DirectionContext = require("./DirectionContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Enables RTL behavior for Base UI components.
  *
@@ -13,10 +13,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 function DirectionProvider(props) {
   const direction = () => props.direction ?? 'ltr';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DirectionContext.DirectionContext.Provider, {
+  return (0, _web.createComponent)(_DirectionContext.DirectionContext.Provider, {
     value: {
       direction
     },
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/field/control/FieldControl.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldControl = FieldControl;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _mergeProps = require("../../merge-props");
 var _solidHelpers = require("../../solid-helpers");
@@ -14,7 +15,6 @@ var _FieldRootContext = require("../root/FieldRootContext");
 var _useField = require("../useField");
 var _constants = require("../utils/constants");
 var _useFieldControlValidation = require("./useFieldControlValidation");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The form control to label and validate.
  * Renders an `<input>` element.
@@ -137,7 +137,5 @@ function FieldControl(componentProps) {
       }
     }, props => (0, _mergeProps.mergeProps)(props, getValidationProps()), props => (0, _mergeProps.mergeProps)(props, getInputValidationProps()), elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/field/description/FieldDescription.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldDescription = FieldDescription;
+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 _FieldRootContext = require("../root/FieldRootContext");
 var _constants = require("../utils/constants");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A paragraph with additional information about the field.
  * Renders a `<p>` element.
@@ -45,7 +45,5 @@ function FieldDescription(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/field/error/FieldError.js

@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldError = FieldError;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _FormContext = require("../../form/FormContext");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _FieldRootContext = require("../root/FieldRootContext");
 var _constants = require("../utils/constants");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<ul> <!> `),
+  _tmpl$2 = /*#__PURE__*/(0, _web.template)(`<li>`);
 /**
  * An error message displayed if the field control fails validation.
  * Renders a `<div>` element.
@@ -60,22 +62,25 @@ function FieldError(componentProps) {
         return id();
       },
       get children() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: componentProps.children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: formError() || (validityData.errors.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
-              children: [' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.For, {
-                each: validityData.errors,
-                children: message => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-                  children: message
-                })
-              }), ' ']
-            }) : validityData.error)
-          })
-        });
+        return (0, _web.memo)(() => componentProps.children ?? (0, _web.memo)(() => formError() || (validityData.errors.length > 1 ? (() => {
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild,
+            _el$4 = _el$2.nextSibling,
+            _el$3 = _el$4.nextSibling;
+          (0, _web.insert)(_el$, (0, _web.createComponent)(_solidJs.For, {
+            get each() {
+              return validityData.errors;
+            },
+            children: message => (() => {
+              var _el$5 = _tmpl$2();
+              (0, _web.insert)(_el$5, message);
+              return _el$5;
+            })()
+          }), _el$4);
+          return _el$;
+        })() : validityData.error)));
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }