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

package/cjs/select/group-label/SelectGroupLabel.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectGroupLabel = SelectGroupLabel;
+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 _SelectGroupContext = require("../group/SelectGroupContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
@@ -32,7 +32,5 @@ function SelectGroupLabel(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/select/icon/SelectIcon.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectIcon = SelectIcon;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An icon that indicates that the trigger button opens a select menu.
  * Renders a `<span>` element.
@@ -20,12 +20,8 @@ function SelectIcon(componentProps) {
       'aria-hidden': true
     }, elementProps],
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: componentProps.children ?? '▼'
-      });
+      return (0, _web.memo)(() => componentProps.children ?? '▼');
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/select/item/SelectItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectItem = SelectItem;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _mergeProps = require("../../merge-props/mergeProps");
@@ -13,7 +14,6 @@ var _isMouseWithinBounds = require("../../utils/isMouseWithinBounds");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectItemContext = require("./SelectItemContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual option in the select menu.
  * Renders a `<div>` element.
@@ -200,8 +200,10 @@ function SelectItem(componentProps) {
     },
     props: [props => (0, _mergeProps.mergeProps)(props, rootProps()), defaultProps, elementProps, getButtonProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemContext.SelectItemContext.Provider, {
+  return (0, _web.createComponent)(_SelectItemContext.SelectItemContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/cjs/select/item-indicator/SelectItemIndicator.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectItemIndicator = SelectItemIndicator;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _styleHookMapping = require("../../utils/styleHookMapping");
@@ -11,7 +12,6 @@ var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _SelectItemContext = require("../item/SelectItemContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the select item is selected.
  * Renders a `<span>` element.
@@ -62,8 +62,12 @@ function SelectItemIndicator(componentProps) {
     }, elementProps],
     children: () => componentProps.children ?? '✔️'
   });
-  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/select/item-text/SelectItemText.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectItemText = SelectItemText;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SelectItemContext = require("../item/SelectItemContext");
 var _SelectRootContext = require("../root/SelectRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A text label of the select item.
  * Renders a `<div>` element.
@@ -39,7 +39,5 @@ function SelectItemText(componentProps) {
     },
     props: elementProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/select/popup/SelectPopup.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectPopup = SelectPopup;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _solidHelpers = require("../../solid-helpers");
@@ -19,7 +20,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._styleHookMapping.transitionStatusMapping
@@ -315,13 +315,15 @@ function SelectPopup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [_styles.styleDisableScrollbar.element, /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingFocusManager, {
-      context: context,
-      modal: false,
-      disabled: !store.mounted,
-      restoreFocus: true,
-      children: element()
-    })]
-  });
+  return [(0, _web.memo)(() => _styles.styleDisableScrollbar.element), (0, _web.createComponent)(_floatingUiSolid.FloatingFocusManager, {
+    context: context,
+    modal: false,
+    get disabled() {
+      return !store.mounted;
+    },
+    restoreFocus: true,
+    get children() {
+      return element();
+    }
+  })];
 }

package/cjs/select/portal/SelectPortal.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectPortal = SelectPortal;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _floatingUiSolid = require("../../floating-ui-solid");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectPortalContext = require("./SelectPortalContext");
-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>`.
@@ -20,14 +20,24 @@ function SelectPortal(props) {
     store
   } = (0, _SelectRootContext.useSelectRootContext)();
   const shouldRender = () => store.mounted || store.forceMount;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectPortalContext.SelectPortalContext.Provider, {
-      value: true,
-      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)(_SelectPortalContext.SelectPortalContext.Provider, {
+        value: true,
+        get children() {
+          return (0, _web.createComponent)(_floatingUiSolid.FloatingPortal, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/cjs/select/positioner/SelectPositioner.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectPositioner = SelectPositioner;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _store = require("solid-js/store");
 var _CompositeList = require("../../composite/list/CompositeList");
@@ -18,7 +19,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _utils2 = require("../popup/utils");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectPositionerContext = require("./SelectPositionerContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const FIXED = {
   position: 'fixed'
 };
@@ -160,19 +160,29 @@ function SelectPositioner(componentProps) {
     customStyleHookMapping: _popupStateMapping.popupStateMapping,
     props: [defaultProps, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-    refs: {
-      elements: refs.listRef,
-      labels: refs.labelsRef
+  return (0, _web.createComponent)(_CompositeList.CompositeList, {
+    get refs() {
+      return {
+        elements: refs.listRef,
+        labels: refs.labelsRef
+      };
     },
     onMapChange: onMapChange,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectPositionerContext.SelectPositionerContext.Provider, {
-      value: contextValue,
-      children: [store.mounted && store.modal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
-        managed: true,
-        inert: (0, _inertValue.inertValue)(!store.open),
-        cutout: store.triggerElement
-      }), element()]
-    })
+    get children() {
+      return (0, _web.createComponent)(_SelectPositionerContext.SelectPositionerContext.Provider, {
+        value: contextValue,
+        get children() {
+          return [(0, _web.memo)(() => (0, _web.memo)(() => !!(store.mounted && store.modal))() && (0, _web.createComponent)(_InternalBackdrop.InternalBackdrop, {
+            managed: true,
+            get inert() {
+              return (0, _inertValue.inertValue)(!store.open);
+            },
+            get cutout() {
+              return store.triggerElement;
+            }
+          })), (0, _web.memo)(() => element())];
+        }
+      });
+    }
   });
 }

package/cjs/select/root/SelectRoot.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectRoot = SelectRoot;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _visuallyHidden = require("../../utils/visuallyHidden");
 var _serialize = require("../utils/serialize");
 var _SelectRootContext = require("./SelectRootContext");
 var _useSelectRoot = require("./useSelectRoot");
-var _jsxRuntime = require("react/jsx-runtime");
+var _tmpl$ = /*#__PURE__*/(0, _web.template)(`<input>`);
 /**
  * Groups all parts of the select.
  * Doesn’t render its own HTML element.
@@ -55,53 +56,59 @@ function SelectRoot(props) {
     controlId
   } = (0, _FieldRootContext.useFieldRootContext)();
   const serializedValue = (0, _solidJs.createMemo)(() => (0, _serialize.serializeValue)(value()));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectRootContext.SelectRootContext.Provider, {
+  return (0, _web.createComponent)(_SelectRootContext.SelectRootContext.Provider, {
     value: rootContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectRootContext.SelectFloatingContext.Provider, {
-      value: floatingContext,
-      children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        ...rootContext.fieldControlValidation.getInputValidationProps({
-          onFocus() {
-            // Move focus to the trigger element when the hidden input is focused.
-            rootContext.store.triggerElement?.focus();
-          },
-          // Handle browser autofill.
-          onInput(event) {
-            // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.defaultPrevented) {
-              return;
-            }
-            const nextValue = event.target.value;
-            rootContext.setStore('forceMount', true);
-            const resolvedValue = value();
-            queueMicrotask(() => {
-              const exactValue = rootContext.refs.valuesRef.find(v => v === nextValue || typeof resolvedValue === 'string' && nextValue.toLowerCase() === v.toLowerCase());
-              if (exactValue != null) {
-                setDirty(exactValue !== validityData.initialValue);
-                rootContext.setValue?.(exactValue, event);
-                if (validationMode() === 'onChange') {
-                  rootContext.fieldControlValidation.commitValidation(exactValue);
+    get children() {
+      return (0, _web.createComponent)(_SelectRootContext.SelectFloatingContext.Provider, {
+        value: floatingContext,
+        get children() {
+          return [(0, _web.memo)(() => props.children), (() => {
+            var _el$ = _tmpl$();
+            (0, _web.spread)(_el$, (0, _web.mergeProps)(() => rootContext.fieldControlValidation.getInputValidationProps({
+              onFocus() {
+                // Move focus to the trigger element when the hidden input is focused.
+                rootContext.store.triggerElement?.focus();
+              },
+              // Handle browser autofill.
+              onInput(event) {
+                // Workaround for https://github.com/facebook/react/issues/9023
+                if (event.defaultPrevented) {
+                  return;
                 }
-              }
-            });
-          },
-          ref: el => {
-            if (props.refs) {
-              props.refs.inputRef = el;
-            }
-            rootContext.fieldControlValidation.refs.inputRef = el;
-          },
-          id: props.id || controlId() || undefined,
-          name: rootContext.name(),
-          disabled: rootContext.disabled(),
-          required: rootContext.required(),
-          readOnly: rootContext.readOnly(),
-          value: serializedValue(),
-          style: _visuallyHidden.visuallyHidden,
-          tabIndex: -1,
-          'aria-hidden': true
-        })
-      })]
-    })
+                const nextValue = event.target.value;
+                rootContext.setStore('forceMount', true);
+                const resolvedValue = value();
+                queueMicrotask(() => {
+                  const exactValue = rootContext.refs.valuesRef.find(v => v === nextValue || typeof resolvedValue === 'string' && nextValue.toLowerCase() === v.toLowerCase());
+                  if (exactValue != null) {
+                    setDirty(exactValue !== validityData.initialValue);
+                    rootContext.setValue?.(exactValue, event);
+                    if (validationMode() === 'onChange') {
+                      rootContext.fieldControlValidation.commitValidation(exactValue);
+                    }
+                  }
+                });
+              },
+              ref: el => {
+                if (props.refs) {
+                  props.refs.inputRef = el;
+                }
+                rootContext.fieldControlValidation.refs.inputRef = el;
+              },
+              id: props.id || controlId() || undefined,
+              name: rootContext.name(),
+              disabled: rootContext.disabled(),
+              required: rootContext.required(),
+              readOnly: rootContext.readOnly(),
+              value: serializedValue(),
+              style: _visuallyHidden.visuallyHidden,
+              tabIndex: -1,
+              'aria-hidden': true
+            })), false, false);
+            return _el$;
+          })()];
+        }
+      });
+    }
   });
 }

package/cjs/select/scroll-arrow/SelectScrollArrow.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectScrollArrow = SelectScrollArrow;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
@@ -12,7 +13,6 @@ var _useTimeout = require("../../utils/useTimeout");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _SelectRootContext = require("../root/SelectRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
  */
@@ -65,9 +65,7 @@ function SelectScrollArrow(componentProps) {
     },
     'aria-hidden': true,
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: local.direction === 'up' ? '▲' : '▼'
-      });
+      return (0, _web.memo)(() => local.direction === 'up' ? '▲' : '▼');
     },
     style: {
       position: 'absolute'
@@ -154,8 +152,12 @@ function SelectScrollArrow(componentProps) {
     },
     props: [defaultProps, elementProps]
   });
-  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/select/scroll-down-arrow/SelectScrollDownArrow.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectScrollDownArrow = SelectScrollDownArrow;
+var _web = require("solid-js/web");
 var _SelectScrollArrow = require("../scroll-arrow/SelectScrollArrow");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An element that scrolls the select menu down when hovered.
  * Renders a `<div>` element.
@@ -13,9 +13,11 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 function SelectScrollDownArrow(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectScrollArrow.SelectScrollArrow, {
-    ...props,
-    ref: props.ref,
+  return (0, _web.createComponent)(_SelectScrollArrow.SelectScrollArrow, (0, _web.mergeProps)(props, {
+    ref(r$) {
+      var _ref$ = props.ref;
+      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+    },
     direction: "down"
-  });
+  }));
 }

package/cjs/select/scroll-up-arrow/SelectScrollUpArrow.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectScrollUpArrow = SelectScrollUpArrow;
+var _web = require("solid-js/web");
 var _SelectScrollArrow = require("../scroll-arrow/SelectScrollArrow");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An element that scrolls the select menu up when hovered.
  * Renders a `<div>` element.
@@ -13,9 +13,11 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 function SelectScrollUpArrow(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectScrollArrow.SelectScrollArrow, {
-    ...props,
-    ref: props.ref,
+  return (0, _web.createComponent)(_SelectScrollArrow.SelectScrollArrow, (0, _web.mergeProps)(props, {
+    ref(r$) {
+      var _ref$ = props.ref;
+      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+    },
     direction: "up"
-  });
+  }));
 }

package/cjs/select/trigger/SelectTrigger.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectTrigger = SelectTrigger;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _constants = require("../../field/utils/constants");
@@ -17,7 +18,6 @@ var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useTimeout = require("../../utils/useTimeout");
 var _SelectRootContext = require("../root/SelectRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const BOUNDARY_OFFSET = 2;
 const customStyleHookMapping = {
   ..._popupStateMapping.pressableTriggerOpenStateMapping,
@@ -200,7 +200,5 @@ function SelectTrigger(componentProps) {
     }],
     customStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/select/value/SelectValue.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectValue = SelectValue;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SelectRootContext = require("../root/SelectRootContext");
-var _jsxRuntime = require("react/jsx-runtime");
 const customStyleHookMapping = {
   value: () => null
 };
@@ -47,12 +47,8 @@ function SelectValue(componentProps) {
     props: elementProps,
     customStyleHookMapping,
     get children() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: typeof componentProps.children === 'function' ? componentProps.children?.(store.value) : componentProps.children ?? labelFromItems() ?? store.value
-      });
+      return (0, _web.memo)(() => (0, _web.memo)(() => typeof componentProps.children === 'function')() ? componentProps.children?.(store.value) : componentProps.children ?? labelFromItems() ?? store.value);
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/separator/Separator.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Separator = Separator;
+var _web = require("solid-js/web");
 var _solidHelpers = require("../solid-helpers");
 var _useRenderElement = require("../utils/useRenderElement");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A separator element accessible to screen readers.
  * Renders a `<div>` element.
@@ -30,7 +30,5 @@ function Separator(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/slider/control/SliderControl.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderControl = SliderControl;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _utils = require("../../floating-ui-solid/utils");
@@ -17,7 +18,6 @@ var _styleHooks = require("../root/styleHooks");
 var _replaceArrayItemAtIndex = require("../utils/replaceArrayItemAtIndex");
 var _roundValueToStep = require("../utils/roundValueToStep");
 var _validateMinimumDistance = require("../utils/validateMinimumDistance");
-var _jsxRuntime = require("react/jsx-runtime");
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 function getClosestThumbIndex(values, currentValue, max) {
   let closestIndex;
@@ -335,7 +335,5 @@ function SliderControl(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }

package/cjs/slider/indicator/SliderIndicator.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderIndicator = SliderIndicator;
+var _web = require("solid-js/web");
 var _solidJs = require("solid-js");
 var _solidHelpers = require("../../solid-helpers");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _styleHooks = require("../root/styleHooks");
 var _valueArrayToPercentages = require("../utils/valueArrayToPercentages");
-var _jsxRuntime = require("react/jsx-runtime");
 function getRangeStyles(orientation, offset, leap) {
   if (orientation === 'vertical') {
     return {
@@ -75,7 +75,5 @@ function SliderIndicator(componentProps) {
     }, elementProps],
     customStyleHookMapping: _styleHooks.sliderStyleHookMapping
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: element()
-  });
+  return (0, _web.memo)(element);
 }