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

package/cjs/number-field/increment/NumberFieldIncrement.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberFieldIncrement = NumberFieldIncrement;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useButton = require("../../use-button");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _useNumberFieldButton = require("../root/useNumberFieldButton");
 var _styleHooks = require("../utils/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A stepper button that increases the field value when clicked.
  * Renders an `<button>` element.
@@ -70,7 +70,5 @@ function NumberFieldIncrement(componentProps) {
     props: [props, elementProps, getButtonProps],
     customStyleHookMapping: _styleHooks.styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/number-field/input/NumberFieldInput.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberFieldInput = NumberFieldInput;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useFieldControlValidation = require("../../field/control/useFieldControlValidation");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
@@ -19,7 +20,6 @@ var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _constants2 = require("../utils/constants");
 var _parse = require("../utils/parse");
 var _styleHooks = require("../utils/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._constants.fieldValidityMapping,
   ..._styleHooks.styleHookMapping
@@ -314,7 +314,5 @@ function NumberFieldInput(componentProps) {
     props: [inputProps, props => (0, _mergeProps.mergeProps)(props, getInputValidationProps()), props => (0, _mergeProps.mergeProps)(props, getValidationProps()), elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/number-field/root/NumberFieldRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberFieldRoot = NumberFieldRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _solidHelpers = require("../../solid-helpers");
@@ -20,7 +21,7 @@ var _parse = require("../utils/parse");
 var _styleHooks = require("../utils/styleHooks");
 var _validate = require("../utils/validate");
 var _NumberFieldRootContext = require("./NumberFieldRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<input type=hidden>`);
 /**
  * Groups all parts of the number field and manages its state.
  * Renders a `<div>` element.
@@ -324,23 +325,38 @@ function NumberFieldRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NumberFieldRootContext.NumberFieldRootContext.Provider, {
+  return (0, _web.createComponent)(_NumberFieldRootContext.NumberFieldRootContext.Provider, {
     value: contextValue,
-    children: [element(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: name(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        type: "hidden",
-        name: name(),
-        ref: el => {
-          if (local.refs) {
-            local.refs.inputRef = el;
-          }
+    get children() {
+      return [(0, _web.memo)(() => element()), (0, _web.createComponent)(_solidJs.Show, {
+        get when() {
+          return name();
         },
-        value: value() ?? '',
-        disabled: disabled(),
-        required: required()
-      })
-    })]
+        get children() {
+          var _el$ = _tmpl$();
+          (0, _web.use)(el => {
+            if (local.refs) {
+              local.refs.inputRef = el;
+            }
+          }, _el$);
+          (0, _web.effect)(_p$ => {
+            var _v$ = name(),
+              _v$2 = disabled(),
+              _v$3 = required();
+            _v$ !== _p$.e && (0, _web.setAttribute)(_el$, "name", _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$.disabled = _p$.t = _v$2);
+            _v$3 !== _p$.a && (_el$.required = _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          (0, _web.effect)(() => _el$.value = value() ?? '');
+          return _el$;
+        }
+      })];
+    }
   });
 }
 function getControlledInputValue(value, locale, format) {

package/cjs/number-field/scrub-area/NumberFieldScrubArea.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberFieldScrubArea = NumberFieldScrubArea;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _detectBrowser = require("../../utils/detectBrowser");
@@ -15,7 +16,6 @@ var _getViewportRect = require("../utils/getViewportRect");
 var _styleHooks = require("../utils/styleHooks");
 var _subscribeToVisualViewportResize = require("../utils/subscribeToVisualViewportResize");
 var _NumberFieldScrubAreaContext = require("./NumberFieldScrubAreaContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An interactive area where the user can click and drag to change the field value.
  * Renders a `<span>` element.
@@ -224,8 +224,10 @@ function NumberFieldScrubArea(componentProps) {
     props: [defaultProps, elementProps],
     customStyleHookMapping: _styleHooks.styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberFieldScrubAreaContext.NumberFieldScrubAreaContext.Provider, {
+  return (0, _web.createComponent)(_NumberFieldScrubAreaContext.NumberFieldScrubAreaContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberFieldScrubAreaCursor = NumberFieldScrubAreaCursor;
-var _solidJs = require("solid-js");
 var _web = require("solid-js/web");
+var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _detectBrowser = require("../../utils/detectBrowser");
 var _owner = require("../../utils/owner");
@@ -13,7 +13,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _NumberFieldScrubAreaContext = require("../scrub-area/NumberFieldScrubAreaContext");
 var _styleHooks = require("../utils/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -54,8 +53,12 @@ function NumberFieldScrubAreaCursor(componentProps) {
     }, elementProps],
     customStyleHookMapping: _styleHooks.styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Portal, {
-    mount: (0, _owner.ownerDocument)(domElement()).body,
-    children: element()
+  return (0, _web.createComponent)(_web.Portal, {
+    get mount() {
+      return (0, _owner.ownerDocument)(domElement()).body;
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/popover/arrow/PopoverArrow.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverArrow = PopoverArrow;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _PopoverPositionerContext = require("../positioner/PopoverPositionerContext");
 var _PopoverRootContext = require("../root/PopoverRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays an element positioned against the popover anchor.
  * Renders a `<div>` element.
@@ -53,7 +53,5 @@ function PopoverArrow(componentProps) {
       'aria-hidden': true
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/popover/backdrop/PopoverBackdrop.js

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

package/cjs/popover/close/PopoverClose.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverClose = PopoverClose;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _PopoverRootContext = require("../root/PopoverRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that closes the popover.
  * Renders a `<button>` element.
@@ -26,7 +26,5 @@ function PopoverClose(props) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/popover/description/PopoverDescription.js

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

package/cjs/popover/popup/PopoverPopup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverPopup = PopoverPopup;
+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 _PopoverPositionerContext = require("../positioner/PopoverPositionerContext");
 var _PopoverRootContext = require("../root/PopoverRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -101,12 +101,24 @@ function PopoverPopup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingFocusManager, {
-    context: positioner.context,
-    modal: modal() === 'trap-focus',
-    disabled: !mounted() || openReason() === 'trigger-hover',
-    initialFocus: resolvedInitialFocus(),
-    returnFocus: local.finalFocus,
-    children: element()
+  return (0, _web.createComponent)(_floatingUiSolid.FloatingFocusManager, {
+    get context() {
+      return positioner.context;
+    },
+    get modal() {
+      return modal() === 'trap-focus';
+    },
+    get disabled() {
+      return !mounted() || openReason() === 'trigger-hover';
+    },
+    get initialFocus() {
+      return resolvedInitialFocus();
+    },
+    get returnFocus() {
+      return local.finalFocus;
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/popover/portal/PopoverPortal.js

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

package/cjs/popover/positioner/PopoverPositioner.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverPositioner = PopoverPositioner;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
@@ -16,7 +17,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _PopoverPortalContext = require("../portal/PopoverPortalContext");
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _PopoverPositionerContext = require("./PopoverPositionerContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the popover against the trigger.
  * Renders a `<div>` element.
@@ -106,18 +106,32 @@ function PopoverPositioner(componentProps) {
     props: [positioner.props, elementProps],
     customStyleHookMapping: _popupStateMapping.popupStateMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopoverPositionerContext.PopoverPositionerContext.Provider, {
+  return (0, _web.createComponent)(_PopoverPositionerContext.PopoverPositionerContext.Provider, {
     value: positioner,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-      when: mounted() && modal() === true && openReason() !== 'trigger-hover' && openMethod() !== 'touch',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
-        managed: true,
-        inert: (0, _inertValue.inertValue)(!open()),
-        cutout: triggerElement()
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingNode, {
-      id: nodeId(),
-      children: element()
-    })]
+    get children() {
+      return [(0, _web.createComponent)(_solidJs.Show, {
+        get when() {
+          return (0, _web.memo)(() => !!(mounted() && modal() === true && openReason() !== 'trigger-hover'))() && openMethod() !== 'touch';
+        },
+        get children() {
+          return (0, _web.createComponent)(_InternalBackdrop.InternalBackdrop, {
+            managed: true,
+            get inert() {
+              return (0, _inertValue.inertValue)(!open());
+            },
+            get cutout() {
+              return triggerElement();
+            }
+          });
+        }
+      }), (0, _web.createComponent)(_floatingUiSolid.FloatingNode, {
+        get id() {
+          return nodeId();
+        },
+        get children() {
+          return element();
+        }
+      })];
+    }
   });
 }

package/cjs/popover/root/PopoverRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverRoot = PopoverRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _floatingUiSolid = require("../../floating-ui-solid");
@@ -18,7 +19,6 @@ var _useTimeout = require("../../utils/useTimeout");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _constants2 = require("../utils/constants");
 var _PopoverRootContext = require("./PopoverRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 function PopoverRootComponent(props) {
   const defaultOpen = () => props.defaultOpen ?? false;
   const delay = () => props.delay ?? _constants2.OPEN_DELAY;
@@ -188,9 +188,11 @@ function PopoverRootComponent(props) {
     codependentRefs,
     setCodependentRefs
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopoverRootContext.PopoverRootContext.Provider, {
+  return (0, _web.createComponent)(_PopoverRootContext.PopoverRootContext.Provider, {
     value: popoverContext,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }
 
@@ -201,15 +203,19 @@ function PopoverRootComponent(props) {
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 function PopoverRoot(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: (0, _PopoverRootContext.usePopoverRootContext)(true),
-    fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingTree, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverRootComponent, {
-        ...props
-      })
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverRootComponent, {
-      ...props
-    })
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return (0, _PopoverRootContext.usePopoverRootContext)(true);
+    },
+    get fallback() {
+      return (0, _web.createComponent)(_floatingUiSolid.FloatingTree, {
+        get children() {
+          return (0, _web.createComponent)(PopoverRootComponent, props);
+        }
+      });
+    },
+    get children() {
+      return (0, _web.createComponent)(PopoverRootComponent, props);
+    }
   });
 }

package/cjs/popover/title/PopoverTitle.js

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

package/cjs/popover/trigger/PopoverTrigger.js

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

package/cjs/preview-card/arrow/PreviewCardArrow.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PreviewCardArrow = PreviewCardArrow;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
 var _PreviewCardContext = require("../root/PreviewCardContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays an element positioned against the preview card anchor.
  * Renders a `<div>` element.
@@ -53,7 +53,5 @@ function PreviewCardArrow(componentProps) {
       'aria-hidden': true
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/preview-card/backdrop/PreviewCardBackdrop.js

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

package/cjs/preview-card/popup/PreviewCardPopup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PreviewCardPopup = PreviewCardPopup;
+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 _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
 var _PreviewCardContext = require("../root/PreviewCardContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -72,7 +72,5 @@ function PreviewCardPopup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }