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

package/cjs/slider/root/SliderRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderRoot = SliderRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeList = require("../../composite/list/CompositeList");
 var _useFieldControlValidation = require("../../field/control/useFieldControlValidation");
@@ -25,7 +26,7 @@ var _getSliderValue = require("../utils/getSliderValue");
 var _validateMinimumDistance = require("../utils/validateMinimumDistance");
 var _SliderRootContext = require("./SliderRootContext");
 var _styleHooks = require("./styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<input>`);
 function areValuesEqual(newValue, oldValue) {
   if (typeof newValue === 'number' && typeof oldValue === 'number') {
     return newValue === oldValue;
@@ -260,53 +261,71 @@ function SliderRoot(componentProps) {
       }
     }, fieldControlValidation.getValidationProps, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SliderRootContext.SliderRootContext.Provider, {
+  return (0, _web.createComponent)(_SliderRootContext.SliderRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CompositeList.CompositeList, {
-      refs: {
-        elements: refs.thumbRefs
-      },
-      onMapChange: setThumbArray,
-      children: [element(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-        when: range(),
-        fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          ref: el => {
-            if (local.refs) {
-              local.refs.inputRef = el;
-            }
-            fieldControlValidation.refs.inputRef = el;
-          },
-          ...fieldControlValidation.getInputValidationProps({
-            disabled,
-            name: name(),
-            value: valueUnwrapped,
-            onFocus: handleHiddenInputFocus,
-            style: _visuallyHidden.visuallyHidden,
-            tabIndex: -1,
-            'aria-hidden': true
-          })
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.For, {
-          each: values(),
-          children: value => /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            ref: el => {
-              if (local.refs) {
-                local.refs.inputRef = el;
-              }
-              fieldControlValidation.refs.inputRef = el;
+    get children() {
+      return (0, _web.createComponent)(_CompositeList.CompositeList, {
+        get refs() {
+          return {
+            elements: refs.thumbRefs
+          };
+        },
+        onMapChange: setThumbArray,
+        get children() {
+          return [(0, _web.memo)(() => element()), (0, _web.createComponent)(_solidJs.Show, {
+            get when() {
+              return range();
+            },
+            get fallback() {
+              return (() => {
+                var _el$ = _tmpl$();
+                (0, _web.use)(el => {
+                  if (local.refs) {
+                    local.refs.inputRef = el;
+                  }
+                  fieldControlValidation.refs.inputRef = el;
+                }, _el$);
+                (0, _web.spread)(_el$, (0, _web.mergeProps)(() => fieldControlValidation.getInputValidationProps({
+                  disabled,
+                  name: name(),
+                  value: valueUnwrapped,
+                  onFocus: handleHiddenInputFocus,
+                  style: _visuallyHidden.visuallyHidden,
+                  tabIndex: -1,
+                  'aria-hidden': true
+                })), false, false);
+                return _el$;
+              })();
             },
-            ...fieldControlValidation.getInputValidationProps({
-              disabled: disabled(),
-              name: name(),
-              value,
-              onFocus: handleHiddenInputFocus,
-              style: _visuallyHidden.visuallyHidden,
-              tabIndex: -1,
-              'aria-hidden': true
-            })
-          })
-        })
-      })]
-    })
+            get children() {
+              return (0, _web.createComponent)(_solidJs.For, {
+                get each() {
+                  return values();
+                },
+                children: value => (() => {
+                  var _el$2 = _tmpl$();
+                  (0, _web.use)(el => {
+                    if (local.refs) {
+                      local.refs.inputRef = el;
+                    }
+                    fieldControlValidation.refs.inputRef = el;
+                  }, _el$2);
+                  (0, _web.spread)(_el$2, (0, _web.mergeProps)(() => fieldControlValidation.getInputValidationProps({
+                    disabled: disabled(),
+                    name: name(),
+                    value,
+                    onFocus: handleHiddenInputFocus,
+                    style: _visuallyHidden.visuallyHidden,
+                    tabIndex: -1,
+                    'aria-hidden': true
+                  })), false, false);
+                  return _el$2;
+                })()
+              });
+            }
+          })];
+        }
+      });
+    }
   });
 }

package/cjs/slider/thumb/SliderThumb.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderThumb = SliderThumb;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _composite = require("../../composite/composite");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
@@ -22,7 +23,7 @@ var _getSliderValue = require("../utils/getSliderValue");
 var _roundValueToStep = require("../utils/roundValueToStep");
 var _valueArrayToPercentages = require("../utils/valueArrayToPercentages");
 var _SliderThumbDataAttributes = require("./SliderThumbDataAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<input>`);
 const PAGE_UP = 'PageUp';
 const PAGE_DOWN = 'PageDown';
 const ALL_KEYS = new Set([_composite.ARROW_UP, _composite.ARROW_DOWN, _composite.ARROW_LEFT, _composite.ARROW_RIGHT, _composite.HOME, _composite.END, PAGE_UP, PAGE_DOWN]);
@@ -285,16 +286,12 @@ function SliderThumb(componentProps) {
     },
     props: thumbProps,
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: componentProps.render == null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [thumbProps.children ?? componentProps.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            ...inputProps
-          })]
-        }) : undefined
-      });
+      return (0, _web.memo)(() => (0, _web.memo)(() => componentProps.render == null)() ? [(0, _web.memo)(() => thumbProps.children ?? componentProps.children), (() => {
+        var _el$ = _tmpl$();
+        (0, _web.spread)(_el$, inputProps, false, false);
+        return _el$;
+      })()] : undefined);
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/slider/track/SliderTrack.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderTrack = SliderTrack;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _styleHooks = require("../root/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Contains the slider indicator and represents the entire range of the slider.
  * Renders a `<div>` element.
@@ -29,7 +29,5 @@ function SliderTrack(componentProps) {
     }, elementProps],
     customStyleHookMapping: _styleHooks.sliderStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/slider/value/SliderValue.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderValue = SliderValue;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _formatNumber = require("../../utils/formatNumber");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _styleHooks = require("../root/styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Displays the current value of the slider as text.
  * Renders an `<output>` element.
@@ -63,12 +63,8 @@ function SliderValue(componentProps) {
       }
     }, elementProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: componentProps.children?.(formattedValues(), values()) ?? defaultDisplayValue()
-      });
+      return (0, _web.memo)(() => componentProps.children?.(formattedValues(), values()) ?? defaultDisplayValue());
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/switch/root/SwitchRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchRoot = SwitchRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useFieldControlValidation = require("../../field/control/useFieldControlValidation");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
@@ -18,7 +19,8 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _visuallyHidden = require("../../utils/visuallyHidden");
 var _styleHooks = require("../styleHooks");
 var _SwitchRootContext = require("./SwitchRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<input>`),
+  _tmpl$2 = /*#__PURE__*/(0, _web.template)(`<input type=hidden value=off>`);
 /**
  * Represents the switch itself.
  * Renders a `<button>` element and a hidden `<input>` beside.
@@ -210,14 +212,18 @@ function SwitchRoot(componentProps) {
     props: [rootProps, getValidationProps, elementProps, getButtonProps],
     customStyleHookMapping: _styleHooks.styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SwitchRootContext.SwitchRootContext.Provider, {
+  return (0, _web.createComponent)(_SwitchRootContext.SwitchRootContext.Provider, {
     value: context,
-    children: [element(), !checked() && elementProps.name && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: "hidden",
-      name: elementProps.name,
-      value: "off"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
-    })]
+    get children() {
+      return [(0, _web.memo)(() => element()), (0, _web.memo)(() => (0, _web.memo)(() => !!(!checked() && elementProps.name))() && (() => {
+        var _el$2 = _tmpl$2();
+        (0, _web.effect)(() => (0, _web.setAttribute)(_el$2, "name", elementProps.name));
+        return _el$2;
+      })()), (() => {
+        var _el$ = _tmpl$();
+        (0, _web.spread)(_el$, inputProps, false, false);
+        return _el$;
+      })()];
+    }
   });
 }

package/cjs/switch/thumb/SwitchThumb.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchThumb = SwitchThumb;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SwitchRootContext = require("../root/SwitchRootContext");
 var _styleHooks = require("../styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
  * Renders a `<span>`.
@@ -42,7 +42,5 @@ function SwitchThumb(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.styleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/tabs/indicator/TabsIndicator.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsIndicator = TabsIndicator;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _solidHelpers = require("../../solid-helpers");
@@ -14,8 +15,7 @@ var _styleHooks = require("../root/styleHooks");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _prehydrationScript = require("./prehydrationScript.min");
 var _TabsIndicatorCssVars = require("./TabsIndicatorCssVars");
-var _jsxRuntime = require("react/jsx-runtime");
-var _script;
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<script suppresshydrationwarnings>`);
 const customStyleHookMapping = {
   ..._styleHooks.tabsStyleHookMapping,
   selectedTabPosition: () => null,
@@ -145,14 +145,16 @@ function TabsIndicator(componentProps) {
     }],
     customStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_solidJs.Show, {
-    when: activeTabValue() != null,
-    children: [element(), !isMounted() && renderBeforeHydration() && (_script || (_script = /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
-      // eslint-disable-next-line solid/no-innerhtml
-      innerHTML: _prehydrationScript.script
-      // @ts-expect-error - suppressHydrationWarnings is not a valid attribute for Solid
-      ,
-      suppressHydrationWarnings: true
-    })))]
+  return (0, _web.createComponent)(_solidJs.Show, {
+    get when() {
+      return activeTabValue() != null;
+    },
+    get children() {
+      return [(0, _web.memo)(() => element()), (0, _web.memo)(() => (0, _web.memo)(() => !!(!isMounted() && renderBeforeHydration()))() && (() => {
+        var _el$ = _tmpl$();
+        _el$.innerHTML = _prehydrationScript.script;
+        return _el$;
+      })())];
+    }
   });
 }

package/cjs/tabs/list/TabsList.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsList = TabsList;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeRoot = require("../../composite/root/CompositeRoot");
 var _solidHelpers = require("../../solid-helpers");
@@ -11,7 +12,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _styleHooks = require("../root/styleHooks");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _TabsListContext = require("./TabsListContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_ARRAY = [];
 
 /**
@@ -74,18 +74,26 @@ function TabsList(componentProps) {
     }, elementProps],
     customStyleHookMapping: _styleHooks.tabsStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsListContext.TabsListContext.Provider, {
+  return (0, _web.createComponent)(_TabsListContext.TabsListContext.Provider, {
     value: tabsListContextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
-      highlightedIndex: highlightedTabIndex(),
-      enableHomeAndEndKeys: true,
-      loop: loop(),
-      orientation: orientation(),
-      onHighlightedIndexChange: setHighlightedTabIndex,
-      onMapChange: setTabArray,
-      disabledIndices: EMPTY_ARRAY,
-      render: element
-    })
+    get children() {
+      return (0, _web.createComponent)(_CompositeRoot.CompositeRoot, {
+        get highlightedIndex() {
+          return highlightedTabIndex();
+        },
+        enableHomeAndEndKeys: true,
+        get loop() {
+          return loop();
+        },
+        get orientation() {
+          return orientation();
+        },
+        onHighlightedIndexChange: setHighlightedTabIndex,
+        onMapChange: setTabArray,
+        disabledIndices: EMPTY_ARRAY,
+        render: element
+      });
+    }
   });
 }
 function getInset(tab, tabsList) {

package/cjs/tabs/panel/TabsPanel.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsPanel = TabsPanel;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _solidHelpers = require("../../solid-helpers");
@@ -12,7 +13,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _styleHooks = require("../root/styleHooks");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _TabsPanelDataAttributes = require("./TabsPanelDataAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A panel displayed when the corresponding tab is active.
  * Renders a `<div>` element.
@@ -78,12 +78,8 @@ function TabsPanel(componentProps) {
     }, elementProps],
     customStyleHookMapping: _styleHooks.tabsStyleHookMapping,
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: hidden() && !keepMounted() ? undefined : componentProps.children
-      });
+      return (0, _web.memo)(() => (0, _web.memo)(() => !!(hidden() && !keepMounted()))() ? undefined : componentProps.children);
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/tabs/root/TabsRoot.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsRoot = TabsRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _CompositeList = require("../../composite/list/CompositeList");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
@@ -12,7 +13,6 @@ var _useControlled = require("../../utils/useControlled");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TabsRootContext = require("./TabsRootContext");
 var _styleHooks = require("./styleHooks");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups the tabs and the corresponding panels.
  * Renders a `<div>` element.
@@ -122,14 +122,18 @@ function TabsRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: _styleHooks.tabsStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsRootContext.TabsRootContext.Provider, {
+  return (0, _web.createComponent)(_TabsRootContext.TabsRootContext.Provider, {
     value: tabsContextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-      refs: {
-        elements: tabPanelRefs
-      },
-      onMapChange: setTabPanelArray,
-      children: element()
-    })
+    get children() {
+      return (0, _web.createComponent)(_CompositeList.CompositeList, {
+        refs: {
+          elements: tabPanelRefs
+        },
+        onMapChange: setTabPanelArray,
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/cjs/tabs/tab/TabsTab.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsTab = TabsTab;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _constants = require("../../composite/constants");
 var _useCompositeItem = require("../../composite/item/useCompositeItem");
@@ -14,7 +15,6 @@ var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TabsListContext = require("../list/TabsListContext");
 var _TabsRootContext = require("../root/TabsRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual interactive tab button that toggles the corresponding panel.
  * Renders a `<button>` element.
@@ -167,7 +167,5 @@ function TabsTab(componentProps) {
       }
     }, elementProps, getButtonProps, compositeItemProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/toast/action/ToastAction.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastAction = ToastAction;
+var _web = require("solid-js/web");
 var _mergeProps = require("../../merge-props");
 var _solidHelpers = require("../../solid-helpers");
 var _useButton = require("../../use-button/useButton");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToastRootContext = require("../root/ToastRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Performs an action when clicked.
  * Renders a `<button>` element.
@@ -40,12 +40,8 @@ function ToastAction(componentProps) {
     ref: buttonRef,
     props: [elementProps, props => (0, _mergeProps.mergeProps)(props, toast().actionProps), getButtonProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: toast().actionProps?.children ?? componentProps.children
-      });
+      return (0, _web.memo)(() => toast().actionProps?.children ?? componentProps.children);
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/toast/close/ToastClose.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastClose = ToastClose;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useButton = require("../../use-button/useButton");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _ToastRootContext = require("../root/ToastRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Closes the toast when clicked.
  * Renders a `<button>` element.
@@ -46,7 +46,5 @@ function ToastClose(componentProps) {
       }
     }, elementProps, getButtonProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/toast/description/ToastDescription.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastDescription = ToastDescription;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useId = require("../../utils/useId");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ToastRootContext = require("../root/ToastRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A description that describes the toast.
  * Can be used as the default message for the toast when no title is provided.
@@ -51,12 +51,8 @@ function ToastDescription(componentProps) {
       }
     }, elementProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: componentProps.children ?? toast().description
-      });
+      return (0, _web.memo)(() => componentProps.children ?? toast().description);
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/toast/portal/ToastPortal.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastPortal = ToastPortal;
+var _web = require("solid-js/web");
 var _FloatingPortalLite = require("../../utils/FloatingPortalLite");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A portal element that moves the viewport to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -13,8 +13,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
 function ToastPortal(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingPortalLite.FloatingPortalLite, {
-    root: props.container,
-    children: props.children
+  return (0, _web.createComponent)(_FloatingPortalLite.FloatingPortalLite, {
+    get root() {
+      return props.container;
+    },
+    get children() {
+      return props.children;
+    }
   });
 }

package/cjs/toast/provider/ToastProvider.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastProvider = ToastProvider;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _utils = require("../../floating-ui-solid/utils");
@@ -13,7 +14,6 @@ var _useTimeout = require("../../utils/useTimeout");
 var _focusVisible = require("../utils/focusVisible");
 var _resolvePromiseOptions = require("../utils/resolvePromiseOptions");
 var _ToastProviderContext = require("./ToastProviderContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a context for creating and managing toasts.
  *
@@ -305,8 +305,10 @@ function ToastProvider(props) {
     hasDifferingHeights,
     refs
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastProviderContext.ToastContext.Provider, {
+  return (0, _web.createComponent)(_ToastProviderContext.ToastContext.Provider, {
     value: contextValue,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }