@ark-ui/solid 1.3.0 → 2.0.1

package/esm/index.js

@@ -1,395 +1,90 @@
-import { spread as spread$1, createComponent, Dynamic, mergeProps as mergeProps$1, memo, use, template, insert, effect } from 'solid-js/web';
-import { useMachine, normalizeProps, mergeProps as mergeProps$2, useActor } from '@zag-js/solid';
-import { splitProps, createMemo, mergeProps, children, createEffect, createSignal, Show, createContext as createContext$1, useContext, createUniqueId, Index, onCleanup } from 'solid-js';
+import { createComponent, Dynamic, mergeProps, memo, use, template, spread, insert, effect } from 'solid-js/web';
+import { createContext as createContext$1, useContext, splitProps, createSignal, createMemo, createEffect, Show, createUniqueId, Index, children, onCleanup } from 'solid-js';
+import { useMachine, normalizeProps, mergeProps as mergeProps$1, useActor } from '@zag-js/solid';
 import * as presence from '@zag-js/presence';
-import * as accordion from '@zag-js/accordion';
-import * as avatar from '@zag-js/avatar';
-import * as carousel from '@zag-js/carousel';
-import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
-import * as checkbox from '@zag-js/checkbox';
-import * as colorPicker from '@zag-js/color-picker';
-import * as combobox from '@zag-js/combobox';
-import * as datePicker from '@zag-js/date-picker';
-import * as dialog from '@zag-js/dialog';
-import * as editable from '@zag-js/editable';
-import * as fileUpload from '@zag-js/file-upload';
-import * as hoverCard from '@zag-js/hover-card';
-import * as menu from '@zag-js/menu';
-import * as numberInput from '@zag-js/number-input';
-import * as pagination from '@zag-js/pagination';
-import * as pinInput from '@zag-js/pin-input';
-import * as popover from '@zag-js/popover';
-import * as progress from '@zag-js/progress';
+import * as accordion$1 from '@zag-js/accordion';
+import * as avatar$1 from '@zag-js/avatar';
+import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy, treeViewAnatomy } from '@ark-ui/anatomy';
+import * as carousel$1 from '@zag-js/carousel';
+import * as checkbox$1 from '@zag-js/checkbox';
+import * as colorPicker$1 from '@zag-js/color-picker';
+import * as combobox$1 from '@zag-js/combobox';
+import * as datePicker$1 from '@zag-js/date-picker';
+import * as dialog$1 from '@zag-js/dialog';
+import * as editable$1 from '@zag-js/editable';
+import * as fileUpload$1 from '@zag-js/file-upload';
+import * as hoverCard$1 from '@zag-js/hover-card';
+import * as menu$1 from '@zag-js/menu';
+import * as numberInput$1 from '@zag-js/number-input';
+import * as pagination$1 from '@zag-js/pagination';
+import * as pinInput$1 from '@zag-js/pin-input';
+import * as popover$1 from '@zag-js/popover';
+import * as progress$1 from '@zag-js/progress';
 import * as radio from '@zag-js/radio-group';
 import * as rating from '@zag-js/rating-group';
-import * as select from '@zag-js/select';
-import * as slider from '@zag-js/slider';
-import * as splitter from '@zag-js/splitter';
+import * as select$1 from '@zag-js/select';
+import * as slider$1 from '@zag-js/slider';
+import * as splitter$1 from '@zag-js/splitter';
 import * as zagSwitch from '@zag-js/switch';
-import * as tabs from '@zag-js/tabs';
-import * as tagsInput from '@zag-js/tags-input';
-import * as toggleGroup from '@zag-js/toggle-group';
-import * as tooltip from '@zag-js/tooltip';
-import * as toast from '@zag-js/toast';
+import * as tabs$1 from '@zag-js/tabs';
+import * as tagsInput$1 from '@zag-js/tags-input';
+import * as toast$1 from '@zag-js/toast';
+import * as toggleGroup$1 from '@zag-js/toggle-group';
+import * as tooltip$1 from '@zag-js/tooltip';
+import * as treeView$1 from '@zag-js/tree-view';
 
-const createSplitProps = () => (props, keys) => splitProps(props, keys);
-
-const mergeStyle = (a, b) => styleObjectToString({
-  ...getStyleObject(a),
-  ...getStyleObject(b)
-});
-const getStyleObject = style => typeof style === 'object' ? style : stringStyleToObject(style);
-const stringStyleToObject = style => {
-  const object = {};
-  if (!style) return object;
-  const extractCSSregex = /([^:; ]*):\s*([^;]*)/g;
-  let match;
-  while (match = extractCSSregex.exec(style)) {
-    object[match[1]] = match[2];
-  }
-  return object;
-};
-const styleObjectToString = value => {
-  if (!value) return '';
-  let result = '';
-  const k = Object.keys(value);
-  for (let i = 0; i < k.length; i++) {
-    const s = k[i];
-    // @ts-expect-error - we know this is a string
-    const v = value[s];
-    if (v != undefined) {
-      if (i) result += ';';
-      result += `${s}:${v}`;
-    }
-  }
-  return result;
-};
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const getEventKey = key => `$$${key.toLowerCase().slice(2)}`;
-const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
-function mapProps(props, mapper) {
-  return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, mapper(key, value)]));
-}
-const spread = (node, props) => {
-  const nodeEvents = Object.fromEntries(Object.keys(node).filter(prop => prop.startsWith('$$'))
-  // @ts-expect-error - fix later
-  .map(prop => [prop, node[prop]]));
-  const isSVG = node instanceof SVGElement;
-  const childProps = createMemo(() => mapProps(props, (key, value) => {
-    const eventKey = getEventKey(key);
-
-    // event composition
-    if (hasOwn(nodeEvents, eventKey)) {
-      return function next(...args) {
-        if (typeof value === 'function') value(...args);
-        nodeEvents[eventKey](...args);
-      };
-    }
-
-    // style composition
-    if (key === 'style') {
-      return mergeStyle(node.style.cssText, value);
-    }
-
-    // class composition
-    if (key === 'class') {
-      return [node.classList.toString(), value].filter(Boolean).join(' ');
-    }
-
-    // don't override existing child attributes
-    if (node.hasAttribute(key)) return;
-    return value;
-  }));
-  spread$1(node, mergeProps(childProps), isSVG);
-};
-
-const booleans = ['allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'disabled', 'formnovalidate', 'hidden', 'indeterminate', 'ismap', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'seamless', 'selected'];
-const BooleanAttributes = new Set(booleans);
-
-const isEmpty = value => value == null || value == undefined || typeof value === 'object' && Object.keys(value).length === 0 || typeof value === 'string' && value.trim().length === 0;
-
-const isFunction$1 = value => typeof value === 'function';
-
-const filterObject = (obj, fn) => Object.fromEntries(Object.entries(obj).filter(fn));
-const filterEmptyValues = obj => filterObject(obj, ([, v]) => !isEmpty(v));
-const filterFunctionValues = obj => filterObject(obj, ([, v]) => !isFunction$1(v));
-const filterBooleanAttributeValues = obj => filterObject(obj, ([k, v]) => !(BooleanAttributes.has(k) && !v));
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Forked from https://github.com/natemoo-re/ultrahtml.git under MIT license
-
-const DOCUMENT_NODE = 0;
-const ELEMENT_NODE = 1;
-const TEXT_NODE = 2;
-const COMMENT_NODE = 3;
-const DOCTYPE_NODE = 4;
-const Fragment = Symbol('Fragment');
-const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
-const RAW_TAGS = new Set(['script', 'style']);
-const SPLIT_ATTRS_RE = /([@.a-z0-9_:-]*)\s*?=?\s*?(['"]?)([\s\S]*?)\2\s+/gim;
-const DOM_PARSER_RE = /(?:<(\/?)([a-zA-Z][a-zA-Z0-9:-]*)(?:\s([^>]*?))?((?:\s*\/)?)>|(<!--)([\s\S]*?)(-->)|(<!)([\s\S]*?)(>))/gm;
-function splitAttrs(str) {
-  const obj = {};
-  let token;
-  if (str) {
-    SPLIT_ATTRS_RE.lastIndex = 0;
-    str = ' ' + (str || '') + ' ';
-    while (token = SPLIT_ATTRS_RE.exec(str)) {
-      if (token[0] === ' ') continue;
-      obj[token[1]] = token[3];
-    }
-  }
-  return obj;
-}
-function parse(str) {
-  let doc, parent, token, text, i, bStart, bText, bEnd, tag;
-  const tags = [];
-  DOM_PARSER_RE.lastIndex = 0;
-  parent = doc = {
-    type: DOCUMENT_NODE,
-    children: []
-  };
-  let lastIndex = 0;
-  function commitTextNode() {
-    text = str.substring(lastIndex, DOM_PARSER_RE.lastIndex - token[0].length);
-    if (text) {
-      parent.children.push({
-        type: TEXT_NODE,
-        value: text,
-        parent
-      });
-    }
-  }
-  while (token = DOM_PARSER_RE.exec(str)) {
-    bStart = token[5] || token[8];
-    bText = token[6] || token[9];
-    bEnd = token[7] || token[10];
-    if (RAW_TAGS.has(parent.name) && token[2] !== parent.name) {
-      i = DOM_PARSER_RE.lastIndex - token[0].length;
-      if (parent.children.length > 0) {
-        parent.children[0].value += token[0];
-      }
-      continue;
-    } else if (bStart === '<!--') {
-      i = DOM_PARSER_RE.lastIndex - token[0].length;
-      if (RAW_TAGS.has(parent.name)) {
-        continue;
-      }
-      tag = {
-        type: COMMENT_NODE,
-        value: bText,
-        parent: parent,
-        loc: [{
-          start: i,
-          end: i + bStart.length
-        }, {
-          start: DOM_PARSER_RE.lastIndex - bEnd.length,
-          end: DOM_PARSER_RE.lastIndex
-        }]
-      };
-      tags.push(tag);
-      tag.parent.children.push(tag);
-    } else if (bStart === '<!') {
-      i = DOM_PARSER_RE.lastIndex - token[0].length;
-      tag = {
-        type: DOCTYPE_NODE,
-        value: bText,
-        parent: parent,
-        loc: [{
-          start: i,
-          end: i + bStart.length
-        }, {
-          start: DOM_PARSER_RE.lastIndex - bEnd.length,
-          end: DOM_PARSER_RE.lastIndex
-        }]
-      };
-      // commitTextNode();
-      tags.push(tag);
-      tag.parent.children.push(tag);
-    } else if (token[1] !== '/') {
-      commitTextNode();
-      if (RAW_TAGS.has(parent.name)) {
-        lastIndex = DOM_PARSER_RE.lastIndex;
-        commitTextNode();
-        continue;
-      } else {
-        tag = {
-          type: ELEMENT_NODE,
-          name: token[2] + '',
-          attributes: splitAttrs(token[3]),
-          parent,
-          children: [],
-          loc: [{
-            start: DOM_PARSER_RE.lastIndex - token[0].length,
-            end: DOM_PARSER_RE.lastIndex
-          }]
-        };
-        tags.push(tag);
-        tag.parent.children.push(tag);
-        if (token[4] && token[4].indexOf('/') > -1 || VOID_TAGS.has(tag.name)) {
-          tag.loc[1] = tag.loc[0];
-          tag.isSelfClosingTag = true;
-        } else {
-          parent = tag;
-        }
-      }
-    } else {
-      commitTextNode();
-      // Close parent node if end-tag matches
-      if (token[2] + '' === parent.name) {
-        tag = parent;
-        parent = tag.parent;
-        tag.loc.push({
-          start: DOM_PARSER_RE.lastIndex - token[0].length,
-          end: DOM_PARSER_RE.lastIndex
-        });
-        text = str.substring(tag.loc[0].end, tag.loc[1].start);
-        if (tag.children.length === 0) {
-          tag.children.push({
-            type: TEXT_NODE,
-            value: text,
-            parent
-          });
-        }
-      }
-      // account for abuse of self-closing tags when an end-tag is also provided:
-      else if (token[2] + '' === tags[tags.length - 1].name && tags[tags.length - 1].isSelfClosingTag === true) {
-        tag = tags[tags.length - 1];
-        tag.loc.push({
-          start: DOM_PARSER_RE.lastIndex - token[0].length,
-          end: DOM_PARSER_RE.lastIndex
-        });
-      }
-    }
-    lastIndex = DOM_PARSER_RE.lastIndex;
-  }
-  text = str.slice(lastIndex);
-  parent.children.push({
-    type: TEXT_NODE,
-    value: text,
-    parent
-  });
-  return doc;
-}
-const HTMLString = Symbol('HTMLString');
-const AttrString = Symbol('AttrString');
-const RenderFn = Symbol('RenderFn');
-function mark(str, tags = [HTMLString]) {
-  const v = {
-    value: str
-  };
-  for (const tag of tags) {
-    Object.defineProperty(v, tag, {
-      value: true,
-      enumerable: false,
-      writable: false
-    });
-  }
-  return v;
-}
-const ESCAPE_CHARS = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;'
-};
-function escapeHTML(str) {
-  return str.replace(/[&<>]/g, c => ESCAPE_CHARS[c] || c);
-}
-function attrs(attributes) {
-  let attrStr = '';
-  for (const [key, value] of Object.entries(attributes)) {
-    attrStr += ` ${key}="${value}"`;
-  }
-  return mark(attrStr, [HTMLString, AttrString]);
+function getErrorMessage(hook, provider) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
-function renderElement(node) {
+function createContext(options = {}) {
   const {
-    name,
-    attributes = {}
-  } = node;
-  const children = node.children.map(child => render(child)).join('');
-  if (RenderFn in node) {
-    const value = node[RenderFn](attributes, mark(children));
-    if (value && value[HTMLString]) return value.value;
-    return escapeHTML(String(value));
-  }
-  if (name === Fragment) return children;
-  if (VOID_TAGS.has(name)) {
-    return `<${node.name}${attrs(attributes).value}>`;
-  }
-  return `<${node.name}${attrs(attributes).value}>${children}</${node.name}>`;
-}
-function render(node) {
-  switch (node.type) {
-    case DOCUMENT_NODE:
-      return node.children.map(child => render(child)).join('');
-    case ELEMENT_NODE:
-      return renderElement(node);
-    case TEXT_NODE:
-      return `${node.value}`;
-    case COMMENT_NODE:
-      return `<!--${node.value}-->`;
-    case DOCTYPE_NODE:
-      return `<!${node.value}>`;
+    strict = true,
+    hookName = 'useContext',
+    providerName = 'Provider',
+    errorMessage
+  } = options;
+  const Context = createContext$1(undefined);
+  function useContext$1() {
+    const context = useContext(Context);
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+      error.name = 'ContextError';
+      Error.captureStackTrace?.(error, useContext$1);
+      throw error;
+    }
+    return context;
   }
+  return [Context.Provider, useContext$1, Context];
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-const pipe = (arg, firstFn, ...fns) => fns.reduce((acc, fn) => fn(acc), firstFn(arg));
+const [AccordionProvider, useAccordionContext] = createContext({
+  hookName: 'useAccordionContext',
+  providerName: '<AccordionProvider />'
+});
 
-const ssrSpread = (children, attributes) => {
-  if (isJSXElement(children)) return children;
-  const {
-    t
-  } = children;
-  const ast = parse(t);
-  const [node] = ast.children;
-  const mergedAttributes = Object.assign({}, attributes, {
-    class: [attributes?.class, node.attributes.class].filter(Boolean).join(' '),
-    style: mergeStyle(attributes.style, node.attributes.style)
-  });
-  const ssrAttributes = pipe(mergedAttributes, filterEmptyValues, filterFunctionValues, filterBooleanAttributeValues);
-  Object.assign(node.attributes, ssrAttributes);
-  return {
-    t: render(ast)
-  };
-};
-const isJSXElement = children => !Object.hasOwnProperty.call(children, 't');
+const createSplitProps = () => (props, keys) => splitProps(props, keys);
 
-function withAsChild(Component) {
-  return function jsx(props) {
-    const [localProps, restProps] = splitProps(props, ['asChild', 'children']);
-    if (!localProps.asChild) {
-      return createComponent(Dynamic, mergeProps$1({
-        component: Component
-      }, restProps, {
-        get children() {
-          return localProps.children;
-        }
-      }));
-    }
-    const getChildren = children(() => ssrSpread(localProps.children, restProps));
-    createEffect(() => {
-      const children = getChildren();
-      if (children instanceof HTMLElement || children instanceof SVGElement) {
-        spread(children, restProps);
+const withAsProp = Component => {
+  const ArkComponent = props => {
+    const [localProps, otherProps] = splitProps(props, ['as']);
+    return createComponent(Dynamic, mergeProps({
+      get component() {
+        return localProps.as || Component;
       }
-    });
-    return getChildren;
+    }, otherProps));
   };
-}
+  return ArkComponent;
+};
 function jsxFactory() {
   const cache = new Map();
-  return new Proxy(withAsChild, {
+  return new Proxy(withAsProp, {
     apply(target, thisArg, argArray) {
-      return withAsChild(argArray[0]);
+      return withAsProp(argArray[0]);
     },
     get(_, element) {
       const asElement = element;
       if (!cache.has(asElement)) {
-        cache.set(asElement, withAsChild(asElement));
+        cache.set(asElement, withAsProp(asElement));
       }
       return cache.get(asElement);
     }
@@ -423,16 +118,16 @@ const usePresence = props => {
   }));
 };
 
-const Presence$1 = props => {
+const Presence = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePresence(presenceProps);
-  const mergedProps = mergeProps$2(() => api().presenceProps, localProps);
+  const mergedProps = mergeProps$1(() => api().presenceProps, localProps);
   return createComponent(Show, {
     get when() {
       return !api().isUnmounted;
     },
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         "data-scope": "presence",
         "data-part": "root"
       }));
@@ -440,30 +135,6 @@ const Presence$1 = props => {
   });
 };
 
-function getErrorMessage(hook, provider) {
-  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
-}
-function createContext(options = {}) {
-  const {
-    strict = true,
-    hookName = 'useContext',
-    providerName = 'Provider',
-    errorMessage
-  } = options;
-  const Context = createContext$1(undefined);
-  function useContext$1() {
-    const context = useContext(Context);
-    if (!context && strict) {
-      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
-      error.name = 'ContextError';
-      Error.captureStackTrace?.(error, useContext$1);
-      throw error;
-    }
-    return context;
-  }
-  return [Context.Provider, useContext$1, Context];
-}
-
 const [PresenceProvider, usePresenceContext] = createContext({
   hookName: 'usePresenceContext',
   providerName: '<PresenceProvider />'
@@ -474,75 +145,6 @@ const [PresencePropsProvider, usePresencePropsContext] = createContext({
   providerName: '<PresencePropsProvider />'
 });
 
-const Presence = Object.assign(Presence$1, {
-  Root: Presence$1
-});
-
-const [AccordionProvider, useAccordionContext] = createContext({
-  hookName: 'useAccordionContext',
-  providerName: '<AccordionProvider />'
-});
-
-const [EnvironmentProvider, useEnvironmentContext] = createContext({
-  hookName: 'useEnvironmentContext',
-  providerName: '<EnvironmentProvider />',
-  strict: false
-});
-
-const _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
-const Environment$1 = props => {
-  // eslint-disable-next-line prefer-const
-  let spanRef = undefined;
-  const currentEnv = createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
-  return createComponent(EnvironmentProvider, {
-    get value() {
-      return currentEnv();
-    },
-    get children() {
-      return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$c();
-        const _ref$ = spanRef;
-        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
-        return _el$;
-      })())];
-    }
-  });
-};
-
-const Environment = Object.assign(Environment$1, {
-  Root: Environment$1
-});
-
-const useAccordion = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(accordion.machine(context), {
-    context
-  });
-  return createMemo(() => accordion.connect(state, send, normalizeProps));
-};
-
-const Accordion$1 = props => {
-  const [presenceProps, accordionProps] = splitPresenceProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
-  const api = useAccordion(useAccordionProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  return createComponent(AccordionProvider, {
-    value: api,
-    get children() {
-      return createComponent(PresencePropsProvider, {
-        value: presenceProps,
-        get children() {
-          return createComponent(ark.div, mergedProps);
-        }
-      });
-    }
-  });
-};
-
 const isFunction = value => typeof value === 'function';
 const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
@@ -555,10 +157,10 @@ const AccordionItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
   const api = useAccordionContext();
   const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({
+  const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().getItemState(itemProps).isOpen
   })));
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
   return createComponent(AccordionItemProvider, {
     value: itemProps,
@@ -566,7 +168,7 @@ const AccordionItem = props => {
       return createComponent(PresenceProvider, {
         value: presenceApi,
         get children() {
-          return createComponent(ark.div, mergeProps$1(mergedProps, {
+          return createComponent(ark.div, mergeProps(mergedProps, {
             get children() {
               return getChildren();
             }
@@ -581,7 +183,7 @@ const AccordionItemContent = props => {
   const api = useAccordionContext();
   const accordionItem = useAccordionItemContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().getItemContentProps(accordionItem), () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().getItemContentProps(accordionItem), () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -595,7 +197,7 @@ const AccordionItemContent = props => {
 const AccordionItemIndicator = props => {
   const api = useAccordionContext();
   const itemParams = useAccordionItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemIndicatorProps(itemParams), props);
+  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemParams), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -603,190 +205,194 @@ const AccordionItemTrigger = props => {
   const api = useAccordionContext();
   const item = useAccordionItemContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().getItemTriggerProps(item), () => ({
+  const mergedProps = mergeProps$1(() => api().getItemTriggerProps(item), () => ({
     'aria-controls': presenceApi().isUnmounted && null
   }), props);
-
-  // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
   return createComponent(ark.button, mergedProps);
 };
 
-const Accordion = Object.assign(Accordion$1, {
-  Root: Accordion$1,
-  Item: AccordionItem,
-  ItemContent: AccordionItemContent,
-  ItemIndicator: AccordionItemIndicator,
-  ItemTrigger: AccordionItemTrigger
+const [EnvironmentProvider, useEnvironmentContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false
 });
 
-const [AvatarProvider, useAvatarContext] = createContext({
-  hookName: 'useAvatarContext',
-  providerName: '<AvatarProvider />'
-});
+const _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
+const Environment = props => {
+  // eslint-disable-next-line prefer-const
+  let spanRef = undefined;
+  const currentEnv = createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+  return createComponent(EnvironmentProvider, {
+    get value() {
+      return currentEnv();
+    },
+    get children() {
+      return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
+        const _el$ = _tmpl$$c();
+        const _ref$ = spanRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
+        return _el$;
+      })())];
+    }
+  });
+};
 
-const useAvatar = props => {
+const useAccordion = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(avatar.machine(context), {
+  const [state, send] = useMachine(accordion$1.machine(context), {
     context
   });
-  return createMemo(() => avatar.connect(state, send, normalizeProps));
+  return createMemo(() => accordion$1.connect(state, send, normalizeProps));
 };
 
-const Avatar$1 = props => {
-  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
-  const api = useAvatar(params);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  return createComponent(AvatarProvider, {
+const AccordionRoot = props => {
+  const [presenceProps, accordionProps] = splitPresenceProps(props);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const api = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(AccordionProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergedProps);
+      return createComponent(PresencePropsProvider, {
+        value: presenceProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
     }
   });
 };
 
+var accordion = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Item: AccordionItem,
+  ItemContent: AccordionItemContent,
+  ItemIndicator: AccordionItemIndicator,
+  ItemTrigger: AccordionItemTrigger,
+  Root: AccordionRoot
+});
+
+const [AvatarProvider, useAvatarContext] = createContext({
+  hookName: 'useAvatarContext',
+  providerName: '<AvatarProvider />'
+});
+
 const AvatarFallback = props => {
   const avatar = useAvatarContext();
-  const mergedProps = mergeProps$2(() => avatar().fallbackProps, props);
+  const mergedProps = mergeProps$1(() => avatar().fallbackProps, props);
   return createComponent(ark.span, mergedProps);
 };
 
 const AvatarImage = props => {
   const avatar = useAvatarContext();
-  const mergedProps = mergeProps$2(() => avatar().imageProps, props);
+  const mergedProps = mergeProps$1(() => avatar().imageProps, props);
   return createComponent(ark.img, mergedProps);
 };
 
-const Avatar = Object.assign(Avatar$1, {
-  Root: Avatar$1,
-  Fallback: AvatarFallback,
-  Image: AvatarImage
-});
-
-const [CarouselProvider, useCarouselContext] = createContext({
-  hookName: 'useCarouselContext',
-  providerName: '<CarouselProvider />'
-});
-
-const useCarousel = props => {
+const useAvatar = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(carousel.machine(context), {
+  const [state, send] = useMachine(avatar$1.machine(context), {
     context
   });
-  return createMemo(() => carousel.connect(state, send, normalizeProps));
+  return createMemo(() => avatar$1.connect(state, send, normalizeProps));
 };
 
-const Carousel$1 = props => {
-  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
-  const api = useCarousel(useCarouselProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(CarouselProvider, {
+const AvatarRoot = props => {
+  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  const api = useAvatar(params);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(AvatarProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
 
+var avatar = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Fallback: AvatarFallback,
+  Image: AvatarImage,
+  Root: AvatarRoot
+});
+
+const [CarouselProvider, useCarouselContext] = createContext({
+  hookName: 'useCarouselContext',
+  providerName: '<CarouselProvider />'
+});
+
 const CarouselControl = props => {
-  const mergedProps = mergeProps$2(() => carouselAnatomy.build().control.attrs, props);
+  const mergedProps = mergeProps$1(() => carouselAnatomy.build().control.attrs, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const CarouselIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['index', 'readOnly']);
   const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().getIndicatorProps(indicatorProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getIndicatorProps(indicatorProps), localProps);
   return createComponent(ark.button, mergedProps);
 };
 
 const CarouselIndicatorGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().indicatorGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().indicatorGroupProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
-const CarouselNextTrigger = props => {
-  const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().nextTriggerProps, props);
-  return createComponent(ark.button, mergedProps);
-};
-
-const CarouselPrevTrigger = props => {
-  const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().prevTriggerProps, props);
-  return createComponent(ark.button, mergedProps);
-};
-
 const CarouselItem = props => {
   const [slideParams, localProps] = createSplitProps()(props, ['index']);
   const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(slideParams), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(slideParams), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const CarouselItemGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().itemGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().itemGroupProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
-const CarouselViewport = props => {
+const CarouselNextTrigger = props => {
   const api = useCarouselContext();
-  const mergedProps = mergeProps$2(() => api().viewportProps, props);
-  return createComponent(ark.div, mergedProps);
+  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
-const Carousel = Object.assign(Carousel$1, {
-  Root: Carousel$1,
-  Control: CarouselControl,
-  Indicator: CarouselIndicator,
-  IndicatorGroup: CarouselIndicatorGroup,
-  NextTrigger: CarouselNextTrigger,
-  PrevTrigger: CarouselPrevTrigger,
-  Item: CarouselItem,
-  ItemGroup: CarouselItemGroup,
-  Viewport: CarouselViewport
-});
-
-const [CheckboxProvider, useCheckboxContext] = createContext({
-  hookName: 'useCheckboxContext',
-  providerName: '<CheckboxProvider />'
-});
+const CarouselPrevTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
 
-const useCheckbox = props => {
+const useCarousel = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(checkbox.machine(context), {
+  const [state, send] = useMachine(carousel$1.machine(context), {
     context
   });
-  return createMemo(() => checkbox.connect(state, send, normalizeProps));
+  return createMemo(() => carousel$1.connect(state, send, normalizeProps));
 };
 
-const Checkbox$1 = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
-  const api = useCheckbox(useCheckboxProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, labelprops);
-  const getChildren = () => runIfFn(props.children, api);
-  return createComponent(CheckboxProvider, {
+const CarouselRoot = props => {
+  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
+  const api = useCarousel(useCarouselProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(CarouselProvider, {
     value: api,
     get children() {
-      return createComponent(ark.label, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -795,95 +401,104 @@ const Checkbox$1 = props => {
   });
 };
 
+const CarouselViewport = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().viewportProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var carousel = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: CarouselControl,
+  Indicator: CarouselIndicator,
+  IndicatorGroup: CarouselIndicatorGroup,
+  Item: CarouselItem,
+  ItemGroup: CarouselItemGroup,
+  NextTrigger: CarouselNextTrigger,
+  PrevTrigger: CarouselPrevTrigger,
+  Root: CarouselRoot,
+  Viewport: CarouselViewport
+});
+
+const [CheckboxProvider, useCheckboxContext] = createContext({
+  hookName: 'useCheckboxContext',
+  providerName: '<CheckboxProvider />'
+});
+
 const _tmpl$$b = /*#__PURE__*/template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
     const _el$ = _tmpl$$b();
-    spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
 };
 
 const CheckboxIndicator = props => {
   const api = useCheckboxContext();
-  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const CheckboxLabel = props => {
   const checkbox = useCheckboxContext();
-  const mergedProps = mergeProps$2(() => checkbox().labelProps, props);
+  const mergedProps = mergeProps$1(() => checkbox().labelProps, props);
   return createComponent(ark.span, mergedProps);
 };
 
-const Checkbox = Object.assign(Checkbox$1, {
-  Root: Checkbox$1,
-  Control: CheckboxControl,
-  Label: CheckboxLabel,
-  Indicator: CheckboxIndicator
-});
-
-const [ColorPickerProvider, useColorPickerContext] = createContext({
-  hookName: 'useColorPickerContext',
-  providerName: '<ColorPickerProvider />'
-});
-
-const useColorPicker = props => {
-  const [local, rest] = splitProps(props, ['value']);
+const useCheckbox = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2(() => ({
+  const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode,
-    value: local.value ? colorPicker.parse(local.value) : undefined
-  }), rest);
-  const [state, send] = useMachine(colorPicker.machine(context), {
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(checkbox$1.machine(context), {
     context
   });
-  return createMemo(() => colorPicker.connect(state, send, normalizeProps));
+  return createMemo(() => checkbox$1.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$a = /*#__PURE__*/template(`<input>`);
-const ColorPicker$1 = props => {
-  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
-  const api = useColorPicker(useColorPickerProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(ColorPickerProvider, {
+const CheckboxRoot = props => {
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
+  const api = useCheckbox(useCheckboxProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, labelprops);
+  const getChildren = () => runIfFn(props.children, api);
+  return createComponent(CheckboxProvider, {
     value: api,
     get children() {
-      return [createComponent(PresenceProvider, {
-        value: apiPresence,
+      return createComponent(ark.label, mergeProps(mergedProps, {
         get children() {
-          return createComponent(ark.div, mergeProps$1(mergedProps, {
-            get children() {
-              return getChildren();
-            }
-          }));
+          return getChildren();
         }
-      }), (() => {
-        const _el$ = _tmpl$$a();
-        spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      }));
     }
   });
 };
 
+var checkbox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
+  Label: CheckboxLabel,
+  Root: CheckboxRoot
+});
+
 const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
 });
 
+const [ColorPickerProvider, useColorPickerContext] = createContext({
+  hookName: 'useColorPickerContext',
+  providerName: '<ColorPickerProvider />'
+});
+
 const ColorPickerArea = props => {
   const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getAreaProps(channelProps), divprops);
+  const mergedProps = mergeProps$1(() => api().getAreaProps(channelProps), divprops);
   return createComponent(ColorPickerAreaProvider, {
     value: channelProps,
     get children() {
@@ -895,21 +510,21 @@ const ColorPickerArea = props => {
 const ColorPickerAreaBackground = props => {
   const colorAreaProps = useColorPickerAreaContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  const mergedProps = mergeProps$1(() => api().getAreaBackgroundProps(colorAreaProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerAreaThumb = props => {
   const colorAreaProps = useColorPickerAreaContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getAreaThumbProps(colorAreaProps), props);
+  const mergedProps = mergeProps$1(() => api().getAreaThumbProps(colorAreaProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelInput = props => {
   const [channelProps, inputProps] = createSplitProps()(props, ['channel', 'orientation']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getChannelInputProps(channelProps), inputProps);
+  const mergedProps = mergeProps$1(() => api().getChannelInputProps(channelProps), inputProps);
   return createComponent(ark.input, mergedProps);
 };
 
@@ -921,7 +536,7 @@ const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = c
 const ColorPickerChannelSlider = props => {
   const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getChannelSliderProps(channelProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getChannelSliderProps(channelProps), localProps);
   return createComponent(ColorPickerChannelSliderProvider, {
     value: channelProps,
     get children() {
@@ -933,21 +548,21 @@ const ColorPickerChannelSlider = props => {
 const ColorPickerChannelSliderThumb = props => {
   const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getChannelSliderThumbProps(sliderContext), props);
+  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(sliderContext), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelSliderTrack = props => {
   const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getChannelSliderTrackProps(sliderContext), props);
+  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(sliderContext), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerContent = props => {
   const api = useColorPickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -960,20 +575,20 @@ const ColorPickerContent = props => {
 
 const ColorPickerControl = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerEyeDropperTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().eyeDropperTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().eyeDropperTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerFormatSelect = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().formatSelectProps, props);
-  return createComponent(ark.select, mergeProps$1(mergedProps, {
+  const mergedProps = mergeProps$1(() => api().formatSelectProps, props);
+  return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return createComponent(Index, {
         each: ['rgba', 'hsla', 'hsba'],
@@ -992,20 +607,20 @@ const ColorPickerFormatSelect = props => {
 
 const ColorPickerFormatTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().formatTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().formatTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const ColorPickerPositioner = props => {
   const api = useColorPickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1016,6 +631,51 @@ const ColorPickerPositioner = props => {
   });
 };
 
+const useColorPicker = props => {
+  const [local, rest] = splitProps(props, ['value']);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1(() => ({
+    id: createUniqueId(),
+    getRootNode,
+    value: local.value ? colorPicker$1.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(colorPicker$1.machine(context), {
+    context
+  });
+  return createMemo(() => colorPicker$1.connect(state, send, normalizeProps));
+};
+
+const _tmpl$$a = /*#__PURE__*/template(`<input>`);
+const ColorPickerRoot = props => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker(useColorPickerProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return [createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      }), (() => {
+        const _el$ = _tmpl$$a();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
 const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
@@ -1024,7 +684,7 @@ const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
 const ColorPickerSwatch = props => {
   const [swatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getSwatchProps(swatchProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getSwatchProps(swatchProps), localProps);
   return createComponent(ColorPickerSwatchProvider, {
     value: swatchProps,
     get children() {
@@ -1035,41 +695,41 @@ const ColorPickerSwatch = props => {
 
 const ColorPickerSwatchGroup = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().swatchGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().swatchGroupProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerSwatchIndicator = props => {
   const api = useColorPickerContext();
   const swatchProps = useColorPickerSwatchContext();
-  const mergedProps = mergeProps$2(() => api().getSwatchIndicatorProps(swatchProps), props);
+  const mergedProps = mergeProps$1(() => api().getSwatchIndicatorProps(swatchProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerSwatchTrigger = props => {
   const [triggerProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getSwatchTriggerProps(triggerProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getSwatchTriggerProps(triggerProps), localProps);
   return createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerTransparencyGrid = props => {
   const [gridProps, localProps] = createSplitProps()(props, ['size']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().getTransparencyGridProps(gridProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getTransparencyGridProps(gridProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerTrigger = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ColorPickerValueText = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().valueText.attrs, props);
-  return createComponent(ark.span, mergeProps$1(mergedProps, {
+  const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
       return api().valueAsString || props.children;
     }
@@ -1078,7 +738,7 @@ const ColorPickerValueText = props => {
 
 const ColorPickerView = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().view.attrs, props);
+  const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().view.attrs, props);
 
   // TODO @segunadebayo
   return createComponent(Show, {
@@ -1086,7 +746,7 @@ const ColorPickerView = props => {
       return api().format === props.format;
     },
     get children() {
-      return createComponent(ark.div, mergeProps$1({
+      return createComponent(ark.div, mergeProps({
         get ["data-format"]() {
           return props.format;
         }
@@ -1095,8 +755,8 @@ const ColorPickerView = props => {
   });
 };
 
-const ColorPicker = Object.assign(ColorPicker$1, {
-  Root: ColorPicker$1,
+var colorPicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Area: ColorPickerArea,
   AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
@@ -1107,10 +767,11 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   Content: ColorPickerContent,
   Control: ColorPickerControl,
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
-  FormatTrigger: ColorPickerFormatTrigger,
   FormatSelect: ColorPickerFormatSelect,
+  FormatTrigger: ColorPickerFormatTrigger,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
+  Root: ColorPickerRoot,
   Swatch: ColorPickerSwatch,
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchIndicator: ColorPickerSwatchIndicator,
@@ -1127,57 +788,16 @@ const [ComboboxProvider, useComboboxContext] = createContext({
   providerName: '<ComboboxProvider />'
 });
 
-const useCombobox = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => combobox.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
-  const context = () => mergeProps$2({
-    id: createUniqueId(),
-    getRootNode,
-    collection: collection()
-  }, rest);
-  const [state, send] = useMachine(combobox.machine(context()), {
-    context
-  });
-  return createMemo(() => combobox.connect(state, send, normalizeProps));
-};
-
-const Combobox$1 = props => {
-  const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
-  const api = useCombobox(useComboboxProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(ComboboxProvider, {
-    value: api,
-    get children() {
-      return createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return createComponent(ark.div, mergeProps$1(mergedProps, {
-            get children() {
-              return getChildren();
-            }
-          }));
-        }
-      });
-    }
-  });
-};
-
 const ComboboxClearTrigger = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => combobox().clearTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ComboboxContent = props => {
   const api = useComboboxContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1190,13 +810,13 @@ const ComboboxContent = props => {
 
 const ComboboxControl = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().controlProps, props);
+  const mergedProps = mergeProps$1(() => combobox().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().inputProps, props);
+  const mergedProps = mergeProps$1(() => combobox().inputProps, props);
   return createComponent(ark.input, mergedProps);
 };
 
@@ -1208,12 +828,12 @@ const [ComboboxItemProvider, useComboboxItemContext] = createContext({
 const ComboboxItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['item']);
   const api = useComboboxContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
   return createComponent(ComboboxItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -1225,14 +845,14 @@ const ComboboxItem = props => {
 const ComboboxItemGroup = props => {
   const [groupProps, localProps] = createSplitProps()(props, ['id']);
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().getItemGroupProps(groupProps), localProps);
+  const mergedProps = mergeProps$1(() => combobox().getItemGroupProps(groupProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const ComboboxItemGroupLabel = props => {
   const [labelProps, localProps] = createSplitProps()(props, ['for']);
   const api = useComboboxContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+  const mergedProps = mergeProps$1(() => api().getItemGroupLabelProps({
     htmlFor: labelProps.for
   }), localProps);
   return createComponent(ark.div, mergedProps);
@@ -1241,27 +861,27 @@ const ComboboxItemGroupLabel = props => {
 const ComboboxItemIndicator = props => {
   const combobox = useComboboxContext();
   const itemProps = useComboboxItemContext();
-  const mergedProps = mergeProps$2(() => combobox().getItemIndicatorProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => combobox().getItemIndicatorProps(itemProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ComboboxItemText = props => {
   const api = useComboboxContext();
   const itemProps = useComboboxItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const ComboboxLabel = props => {
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().labelProps, props);
+  const mergedProps = mergeProps$1(() => combobox().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const ComboboxPositioner = props => {
   const api = useComboboxContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1272,64 +892,37 @@ const ComboboxPositioner = props => {
   });
 };
 
-const ComboboxTrigger = props => {
-  const combobox = useComboboxContext();
-  const mergedProps = mergeProps$2(() => combobox().triggerProps, props);
-  return createComponent(ark.button, mergedProps);
-};
-
-const Combobox = Object.assign(Combobox$1, {
-  Root: Combobox$1,
-  ClearTrigger: ComboboxClearTrigger,
-  Content: ComboboxContent,
-  Control: ComboboxControl,
-  Input: ComboboxInput,
-  Item: ComboboxItem,
-  ItemGroup: ComboboxItemGroup,
-  ItemGroupLabel: ComboboxItemGroupLabel,
-  ItemIndicator: ComboboxItemIndicator,
-  ItemText: ComboboxItemText,
-  Label: ComboboxLabel,
-  Positioner: ComboboxPositioner,
-  Trigger: ComboboxTrigger
-});
-
-const [DatePickerProvider, useDatePickerContext] = createContext({
-  hookName: 'useDatePickerContext',
-  providerName: '<DatePickerProvider />'
-});
-
-const useDatePicker = props => {
-  const [local, rest] = splitProps(props, ['value', 'focusedValue']);
+const useCombobox = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => combobox$1.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2(() => ({
+  const context = () => mergeProps$1({
     id: createUniqueId(),
     getRootNode,
-    focusedValue: local.focusedValue ? datePicker.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker.parse(local.value) : undefined
-  }), rest);
-  const [state, send] = useMachine(datePicker.machine(context), {
+    collection: collection()
+  }, rest);
+  const [state, send] = useMachine(combobox$1.machine(context()), {
     context
   });
-  return createMemo(() => datePicker.connect(state, send, normalizeProps));
+  return createMemo(() => combobox$1.connect(state, send, normalizeProps));
 };
 
-const DatePicker$1 = props => {
-  const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
-  const api = useDatePicker(useDatePickerProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
+const ComboboxRoot = props => {
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const api = useCombobox(useComboboxProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().isOpen
   })));
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(DatePickerProvider, {
+  return createComponent(ComboboxProvider, {
     value: api,
     get children() {
       return createComponent(PresenceProvider, {
         value: apiPresence,
         get children() {
-          return createComponent(ark.div, mergeProps$1(mergedProps, {
+          return createComponent(ark.div, mergeProps(mergedProps, {
             get children() {
               return getChildren();
             }
@@ -1340,16 +933,44 @@ const DatePicker$1 = props => {
   });
 };
 
+const ComboboxTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var combobox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: ComboboxClearTrigger,
+  Content: ComboboxContent,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  ItemIndicator: ComboboxItemIndicator,
+  ItemText: ComboboxItemText,
+  Label: ComboboxLabel,
+  Positioner: ComboboxPositioner,
+  Root: ComboboxRoot,
+  Trigger: ComboboxTrigger
+});
+
+const [DatePickerProvider, useDatePickerContext] = createContext({
+  hookName: 'useDatePickerContext',
+  providerName: '<DatePickerProvider />'
+});
+
 const DatePickerClearTrigger = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DatePickerContent = props => {
   const api = useDatePickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1362,27 +983,27 @@ const DatePickerContent = props => {
 
 const DatePickerControl = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const DatePickerInput = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
   return createComponent(ark.input, mergedProps);
 };
 
 const DatePickerLabel = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const _tmpl$$9 = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().monthSelectProps, props);
-  return createComponent(ark.select, mergeProps$1(mergedProps, {
+  const mergedProps = mergeProps$1(() => api().monthSelectProps, props);
+  return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
         const _el$ = _tmpl$$9();
@@ -1402,14 +1023,14 @@ const [DatePickerViewProvider, useDatePickerViewContext] = createContext({
 const DatePickerNextTrigger = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
-  const mergedProps = mergeProps$2(() => api().getNextTriggerProps(viewProps), props);
+  const mergedProps = mergeProps$1(() => api().getNextTriggerProps(viewProps), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DatePickerPositioner = props => {
   const api = useDatePickerContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1423,20 +1044,61 @@ const DatePickerPositioner = props => {
 const DatePickerPrevTrigger = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
-  const mergedProps = mergeProps$2(() => api().getPrevTriggerProps(viewProps), props);
+  const mergedProps = mergeProps$1(() => api().getPrevTriggerProps(viewProps), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DatePickerRangeText = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().rangeTextProps, props);
-  return createComponent(ark.div, mergeProps$1(mergedProps, {
+  const mergedProps = mergeProps$1(() => api().rangeTextProps, props);
+  return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return api().visibleRangeText.start;
     }
   }));
 };
 
+const useDatePicker = props => {
+  const [local, rest] = splitProps(props, ['value', 'focusedValue']);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1(() => ({
+    id: createUniqueId(),
+    getRootNode,
+    focusedValue: local.focusedValue ? datePicker$1.parse(local.focusedValue) : undefined,
+    value: local.value ? datePicker$1.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(datePicker$1.machine(context), {
+    context
+  });
+  return createMemo(() => datePicker$1.connect(state, send, normalizeProps));
+};
+
+const DatePickerRoot = props => {
+  const [presenceProps, datePickerProps] = splitPresenceProps(props);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
+  const api = useDatePicker(useDatePickerProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(DatePickerProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
+    }
+  });
+};
+
 const [DatePickerTableProvider, useDatePickerTableContext] = createContext({
   hookName: 'useDatePickerTableContext',
   providerName: '<DatePickerTableProvider />'
@@ -1453,7 +1115,7 @@ const DatePickerTable = props => {
     id: createUniqueId(),
     ...viewProps
   };
-  const mergedProps = mergeProps$2(() => api().getTableProps(tableProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getTableProps(tableProps), localProps);
   return createComponent(DatePickerTableProvider, {
     value: tableProps,
     get children() {
@@ -1465,7 +1127,7 @@ const DatePickerTable = props => {
 const DatePickerTableBody = props => {
   const api = useDatePickerContext();
   const tableProps = useDatePickerTableContext();
-  const mergedProps = mergeProps$2(() => api().getTableBodyProps(tableProps), props);
+  const mergedProps = mergeProps$1(() => api().getTableBodyProps(tableProps), props);
   return createComponent(ark.tbody, mergedProps);
 };
 
@@ -1484,7 +1146,7 @@ const DatePickerTableCell = props => {
     year: api().getYearTableCellProps
     // @ts-expect-error use filter guard
   }[viewProps.view](cellProps);
-  const mergedProps = mergeProps$2(() => tableCellProps, localProps);
+  const mergedProps = mergeProps$1(() => tableCellProps, localProps);
   return createComponent(DatePickerTableCellProvider, {
     value: cellProps,
     get children() {
@@ -1503,34 +1165,34 @@ const DatePickerTableCellTrigger = props => {
     year: api().getYearTableCellTriggerProps
     // @ts-expect-error value is number filter
   }[viewProps.view](cellProps);
-  const mergedProps = mergeProps$2(() => triggerProps, props);
+  const mergedProps = mergeProps$1(() => triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DatePickerTableHead = props => {
   const api = useDatePickerContext();
   const tableProps = useDatePickerTableContext();
-  const mergedProps = mergeProps$2(() => api().getTableHeadProps(tableProps), props);
+  const mergedProps = mergeProps$1(() => api().getTableHeadProps(tableProps), props);
   return createComponent(ark.thead, mergedProps);
 };
 
 const DatePickerTableHeader = props => {
   const api = useDatePickerContext();
   const tableProps = useDatePickerTableContext();
-  const mergedProps = mergeProps$2(() => api().getTableHeaderProps(tableProps), props);
+  const mergedProps = mergeProps$1(() => api().getTableHeaderProps(tableProps), props);
   return createComponent(ark.th, mergedProps);
 };
 
 const DatePickerTableRow = props => {
   const api = useDatePickerContext();
   const tableProps = useDatePickerTableContext();
-  const mergedProps = mergeProps$2(() => api().getTableRowProps(tableProps), props);
+  const mergedProps = mergeProps$1(() => api().getTableRowProps(tableProps), props);
   return createComponent(ark.tr, mergedProps);
 };
 
 const DatePickerTrigger = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
@@ -1538,11 +1200,11 @@ const DatePickerView = props => {
   const [viewProps, localProps] = createSplitProps()(props, ['view']);
   const api = useDatePickerContext();
   const getChildren = () => runIfFn(localProps.children, api);
-  const mergedProps = mergeProps$2(() => datePickerAnatomy.build().view.attrs, localProps);
+  const mergedProps = mergeProps$1(() => datePickerAnatomy.build().view.attrs, localProps);
   return createComponent(DatePickerViewProvider, {
     value: viewProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get hidden() {
           return api().view !== viewProps.view;
         },
@@ -1557,22 +1219,22 @@ const DatePickerView = props => {
 const DatePickerViewControl = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
-  const mergedProps = mergeProps$2(() => api().getViewControlProps(viewProps), props);
+  const mergedProps = mergeProps$1(() => api().getViewControlProps(viewProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const DatePickerViewTrigger = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
-  const mergedProps = mergeProps$2(() => api().getViewTriggerProps(viewProps), props);
+  const mergedProps = mergeProps$1(() => api().getViewTriggerProps(viewProps), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const _tmpl$$8 = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
-  const mergedProps = mergeProps$2(() => api().yearSelectProps, props);
-  return createComponent(ark.select, mergeProps$1(mergedProps, {
+  const mergedProps = mergeProps$1(() => api().yearSelectProps, props);
+  return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return getYearsRange({
         from: 1_000,
@@ -1594,8 +1256,8 @@ function getYearsRange(range) {
   return years;
 }
 
-const DatePicker = Object.assign(DatePicker$1, {
-  Root: DatePicker$1,
+var datePicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: DatePickerClearTrigger,
   Content: DatePickerContent,
   Control: DatePickerControl,
@@ -1606,6 +1268,7 @@ const DatePicker = Object.assign(DatePicker$1, {
   Positioner: DatePickerPositioner,
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
+  Root: DatePickerRoot,
   Table: DatePickerTable,
   TableBody: DatePickerTableBody,
   TableCell: DatePickerTableCell,
@@ -1625,51 +1288,13 @@ const [DialogProvider, useDialogContext] = createContext({
   providerName: '<DialogProvider />'
 });
 
-const useDialog = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(dialog.machine(context), {
-    context
-  });
-  return createMemo(() => dialog.connect(state, send, normalizeProps));
-};
-
-const Dialog$1 = props => {
-  const [presenceProps, dialogProps] = splitPresenceProps(props);
-  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
-  const api = useDialog(useDialogProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(DialogProvider, {
-    value: api,
-    get children() {
-      return createComponent(PresencePropsProvider, {
-        value: presenceProps,
-        get children() {
-          return createComponent(PresenceProvider, {
-            value: apiPresence,
-            get children() {
-              return getChildren();
-            }
-          });
-        }
-      });
-    }
-  });
-};
-
 const DialogBackdrop = props => {
   const api = useDialogContext();
   const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({
+  const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().isOpen
   })));
-  const mergedProps = mergeProps$2(() => api().backdropProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().backdropProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1682,14 +1307,14 @@ const DialogBackdrop = props => {
 
 const DialogCloseTrigger = props => {
   const dialog = useDialogContext();
-  const mergedProps = mergeProps$2(() => dialog().closeTriggerProps, props);
+  const mergedProps = mergeProps$1(() => dialog().closeTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const DialogContent = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1702,14 +1327,14 @@ const DialogContent = props => {
 
 const DialogDescription = props => {
   const dialog = useDialogContext();
-  const mergedProps = mergeProps$2(() => dialog().descriptionProps, props);
+  const mergedProps = mergeProps$1(() => dialog().descriptionProps, props);
   return createComponent(ark.p, mergedProps);
 };
 
 const DialogPositioner = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -1720,30 +1345,67 @@ const DialogPositioner = props => {
   });
 };
 
+const useDialog = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(dialog$1.machine(context), {
+    context
+  });
+  return createMemo(() => dialog$1.connect(state, send, normalizeProps));
+};
+
+const DialogRoot = props => {
+  const [presenceProps, dialogProps] = splitPresenceProps(props);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const api = useDialog(useDialogProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(DialogProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresencePropsProvider, {
+        value: presenceProps,
+        get children() {
+          return createComponent(PresenceProvider, {
+            value: apiPresence,
+            get children() {
+              return getChildren();
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const DialogTitle = props => {
   const dialog = useDialogContext();
-  const mergedProps = mergeProps$2(() => dialog().titleProps, props);
+  const mergedProps = mergeProps$1(() => dialog().titleProps, props);
   return createComponent(ark.h2, mergedProps);
 };
 
 const DialogTrigger = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, () => ({
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
     'aria-controls': presenceApi().isUnmounted && null
   }), props);
-
-  // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
   return createComponent(ark.button, mergedProps);
 };
 
-const Dialog = Object.assign(Dialog$1, {
-  Root: Dialog$1,
+var dialog = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Backdrop: DialogBackdrop,
   CloseTrigger: DialogCloseTrigger,
-  Positioner: DialogPositioner,
   Content: DialogContent,
   Description: DialogDescription,
+  Positioner: DialogPositioner,
+  Root: DialogRoot,
   Title: DialogTitle,
   Trigger: DialogTrigger
 });
@@ -1753,85 +1415,85 @@ const [EditableProvider, useEditableContext] = createContext({
   providerName: '<EditableProvider />'
 });
 
-const useEditable = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(editable.machine(context), {
-    context
-  });
-  return createMemo(() => editable.connect(state, send, normalizeProps));
-};
-
-const Editable$1 = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
-  const api = useEditable(useEditableProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(EditableProvider, {
-    value: api,
-    get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
-
 const EditableArea = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().areaProps, props);
+  const mergedProps = mergeProps$1(() => api().areaProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const EditableCancelTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().cancelTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().cancelTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const EditableControl = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const EditableEditTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().editTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().editTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const EditableInput = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
   return createComponent(ark.input, mergedProps);
 };
 
 const EditableLabel = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const EditablePreview = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().previewProps, props);
+  const mergedProps = mergeProps$1(() => api().previewProps, props);
   return createComponent(ark.span, mergedProps);
 };
 
+const useEditable = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(editable$1.machine(context), {
+    context
+  });
+  return createMemo(() => editable$1.connect(state, send, normalizeProps));
+};
+
+const EditableRoot = props => {
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const api = useEditable(useEditableProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(EditableProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const EditableSubmitTrigger = props => {
   const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().submitTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().submitTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-const Editable = Object.assign(Editable$1, {
-  Root: Editable$1,
+var editable = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Area: EditableArea,
   CancelTrigger: EditableCancelTrigger,
   Control: EditableControl,
@@ -1839,6 +1501,7 @@ const Editable = Object.assign(Editable$1, {
   Input: EditableInput,
   Label: EditableLabel,
   Preview: EditablePreview,
+  Root: EditableRoot,
   SubmitTrigger: EditableSubmitTrigger
 });
 
@@ -1847,42 +1510,13 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
   providerName: '<FileUploadProvider />'
 });
 
-const useFileUpload = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(fileUpload.machine(context), {
-    context
-  });
-  return createMemo(() => fileUpload.connect(state, send, normalizeProps));
-};
-
-const FileUpload$1 = props => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'dir', 'disabled', 'files', 'getRootNode', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileReject', 'onFilesChange', 'translations', 'validate']);
-  const api = useFileUpload(fileUploadProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(FileUploadProvider, {
-    value: api,
-    get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
-
 const _tmpl$$7 = /*#__PURE__*/template(`<input>`);
 const FileUploadDropzone = props => {
   const api = useFileUploadContext();
-  const mergedProps = mergeProps$2(() => api().dropzoneProps, props);
+  const mergedProps = mergeProps$1(() => api().dropzoneProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
     const _el$ = _tmpl$$7();
-    spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
 };
@@ -1895,12 +1529,12 @@ const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
 const FileUploadItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['file']);
   const api = useFileUploadContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children);
   return createComponent(FileUploadItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.li, mergeProps$1(mergedProps, {
+      return createComponent(ark.li, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -1912,15 +1546,15 @@ const FileUploadItem = props => {
 const FileUploadItemDeleteTrigger = props => {
   const api = useFileUploadContext();
   const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemDeleteTriggerProps(item), props);
+  const mergedProps = mergeProps$1(() => api().getItemDeleteTriggerProps(item), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const FileUploadItemGroup = props => {
   const api = useFileUploadContext();
-  const mergedProps = mergeProps$2(() => api().itemGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().itemGroupProps, props);
   const getChildren = () => runIfFn(props.children, () => api().files);
-  return createComponent(ark.ul, mergeProps$1(mergedProps, {
+  return createComponent(ark.ul, mergeProps(mergedProps, {
     get children() {
       return getChildren();
     }
@@ -1930,9 +1564,9 @@ const FileUploadItemGroup = props => {
 const FileUploadItemName = props => {
   const api = useFileUploadContext();
   const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemNameProps(item), props);
+  const mergedProps = mergeProps$1(() => api().getItemNameProps(item), props);
   const getChildren = children(() => props.children);
-  return createComponent(ark.div, mergeProps$1(mergedProps, {
+  return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return getChildren() || item.file.name;
     }
@@ -1942,7 +1576,7 @@ const FileUploadItemName = props => {
 const FileUploadItemPreview = props => {
   const api = useFileUploadContext();
   const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemPreviewProps(item), props);
+  const mergedProps = mergeProps$1(() => api().getItemPreviewProps(item), props);
   if (!item.file.type.match(props.type ?? '.*')) return null;
   return createComponent(ark.div, mergedProps);
 };
@@ -1952,7 +1586,7 @@ const FileUploadItemPreviewImage = props => {
   const item = useFileUploadItemContext();
   const [url, setUrl] = createSignal('');
   api().createFileUrl(item.file, url => setUrl(url));
-  const mergedProps = mergeProps$2(api().getItemPreviewImageProps({
+  const mergedProps = mergeProps$1(api().getItemPreviewImageProps({
     ...item,
     url: url()
   }), props);
@@ -1962,9 +1596,9 @@ const FileUploadItemPreviewImage = props => {
 const FileUploadItemSizeText = props => {
   const api = useFileUploadContext();
   const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemSizeTextProps(item), props);
+  const mergedProps = mergeProps$1(() => api().getItemSizeTextProps(item), props);
   const getChildren = children(() => props.children);
-  return createComponent(ark.div, mergeProps$1(mergedProps, {
+  return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return getChildren() || api().getFileSize(item.file);
     }
@@ -1973,18 +1607,47 @@ const FileUploadItemSizeText = props => {
 
 const FileUploadLabel = props => {
   const api = useFileUploadContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
+const useFileUpload = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(fileUpload$1.machine(context), {
+    context
+  });
+  return createMemo(() => fileUpload$1.connect(state, send, normalizeProps));
+};
+
+const FileUploadRoot = props => {
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'dir', 'disabled', 'files', 'getRootNode', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileReject', 'onFilesChange', 'translations', 'validate']);
+  const api = useFileUpload(fileUploadProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(FileUploadProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const FileUploadTrigger = props => {
   const api = useFileUploadContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-const FileUpload = Object.assign(FileUpload$1, {
-  Root: FileUpload$1,
+var fileUpload = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Dropzone: FileUploadDropzone,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
@@ -1994,6 +1657,7 @@ const FileUpload = Object.assign(FileUpload$1, {
   ItemPreviewImage: FileUploadItemPreviewImage,
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
+  Root: FileUploadRoot,
   Trigger: FileUploadTrigger
 });
 
@@ -2002,55 +1666,22 @@ const [HoverCardProvider, useHoverCardContext] = createContext({
   providerName: '<HoverCardProvider />'
 });
 
-const useHoverCard = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(hoverCard.machine(context), {
-    context
-  });
-  return createMemo(() => hoverCard.connect(state, send, normalizeProps));
-};
-
-const HoverCard$1 = props => {
-  const [presenceProps, hoverCardProps] = splitPresenceProps(props);
-  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
-  const api = useHoverCard(useHoverCardProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(HoverCardProvider, {
-    value: api,
-    get children() {
-      return createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
-    }
-  });
-};
-
 const HoverCardArrow = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = mergeProps$2(() => hoverCard().arrowProps, props);
+  const mergedProps = mergeProps$1(() => hoverCard().arrowProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const HoverCardArrowTip = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = mergeProps$2(() => hoverCard().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => hoverCard().arrowTipProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const HoverCardContent = props => {
   const api = useHoverCardContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -2064,7 +1695,7 @@ const HoverCardContent = props => {
 const HoverCardPositioner = props => {
   const api = useHoverCardContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -2075,18 +1706,52 @@ const HoverCardPositioner = props => {
   });
 };
 
+const useHoverCard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(hoverCard$1.machine(context), {
+    context
+  });
+  return createMemo(() => hoverCard$1.connect(state, send, normalizeProps));
+};
+
+const HoverCardRoot = props => {
+  const [presenceProps, hoverCardProps] = splitPresenceProps(props);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useHoverCard(useHoverCardProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(HoverCardProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
+};
+
 const HoverCardTrigger = props => {
   const hoverCard = useHoverCardContext();
-  const mergedProps = mergeProps$2(() => hoverCard().triggerProps, props);
+  const mergedProps = mergeProps$1(() => hoverCard().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-const HoverCard = Object.assign(HoverCard$1, {
-  Root: HoverCard$1,
+var hoverCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: HoverCardArrow,
   ArrowTip: HoverCardArrowTip,
   Content: HoverCardContent,
   Positioner: HoverCardPositioner,
+  Root: HoverCardRoot,
   Trigger: HoverCardTrigger
 });
 
@@ -2106,79 +1771,22 @@ const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
   strict: false
 });
 
-const useMenu = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send, machine] = useMachine(menu.machine(context), {
-    context
-  });
-  return createMemo(() => ({
-    api: () => menu.connect(state, send, normalizeProps),
-    machine: machine
-  }));
-};
-
-const Menu$1 = props => {
-  const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'onValueChange', 'open', 'positioning', 'value']);
-  const parentMenu = useMenuContext();
-  const parentMachine = useMenuMachineContext();
-  const menu = useMenu(useMenuProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: menu().api().isOpen
-  })));
-  createEffect(() => {
-    if (!parentMachine) return;
-    parentMenu?.().setChild(menu().machine);
-    menu().api().setParent(parentMachine());
-  });
-  const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
-  const machineContext = () => menu().machine;
-  const getChildren = () => runIfFn(localProps.children, menu().api);
-  return createComponent(MenuTriggerItemProvider, {
-    value: triggerItemContext,
-    get children() {
-      return createComponent(MenuMachineProvider, {
-        value: machineContext,
-        get children() {
-          return createComponent(MenuProvider, {
-            get value() {
-              return menu().api;
-            },
-            get children() {
-              return createComponent(PresenceProvider, {
-                value: apiPresence,
-                get children() {
-                  return getChildren();
-                }
-              });
-            }
-          });
-        }
-      });
-    }
-  });
-};
-
 const MenuArrow = props => {
   const menu = useMenuContext();
-  const mergedProps = mergeProps$2(() => menu?.().arrowProps, props);
+  const mergedProps = mergeProps$1(() => menu?.().arrowProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const MenuArrowTip = props => {
   const menu = useMenuContext();
-  const mergedProps = mergeProps$2(() => menu?.().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => menu?.().arrowTipProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const MenuContent = props => {
   const api = useMenuContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -2191,28 +1799,28 @@ const MenuContent = props => {
 
 const MenuContextTrigger = props => {
   const menu = useMenuContext();
-  const mergedProps = mergeProps$2(() => menu?.().contextTriggerProps, props);
+  const mergedProps = mergeProps$1(() => menu?.().contextTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const MenuItem = props => {
   const menu = useMenuContext();
   const [itemParams, restProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
-  const mergedProps = mergeProps$2(() => menu?.().getItemProps(itemParams), restProps);
+  const mergedProps = mergeProps$1(() => menu?.().getItemProps(itemParams), restProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const MenuItemGroup = props => {
   const menu = useMenuContext();
   const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
-  const mergedProps = mergeProps$2(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+  const mergedProps = mergeProps$1(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const MenuItemGroupLabel = props => {
   const menu = useMenuContext();
   const [labelProps, localProps] = createSplitProps()(props, ['for']);
-  const mergedProps = mergeProps$2(() => menu?.().getItemGroupLabelProps({
+  const mergedProps = mergeProps$1(() => menu?.().getItemGroupLabelProps({
     htmlFor: labelProps.for
   }), localProps);
   return createComponent(ark.div, mergedProps);
@@ -2221,55 +1829,110 @@ const MenuItemGroupLabel = props => {
 const MenuOptionItem = props => {
   const menu = useMenuContext();
   const [optionProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
-  const mergedProps = mergeProps$2(() => menu().getOptionItemProps(optionProps), localProps);
+  const mergedProps = mergeProps$1(() => menu().getOptionItemProps(optionProps), localProps);
   const itemState = createMemo(() => menu().getOptionItemState(optionProps));
   const getChildren = () => runIfFn(localProps.children, itemState);
-  return createComponent(ark.div, mergeProps$1(mergedProps, {
+  return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return getChildren();
     }
   }));
 };
 
-const MenuPositioner = props => {
-  const api = useMenuContext();
-  const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(Show, {
-    get when() {
-      return !presenceApi().isUnmounted;
-    },
+const MenuPositioner = props => {
+  const api = useMenuContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useMenu = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send, machine] = useMachine(menu$1.machine(context), {
+    context
+  });
+  return createMemo(() => ({
+    api: () => menu$1.connect(state, send, normalizeProps),
+    machine: machine
+  }));
+};
+
+const MenuRoot = props => {
+  const [presenceProps, menuProps] = splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'onValueChange', 'open', 'positioning', 'value']);
+  const parentMenu = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const menu = useMenu(useMenuProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: menu().api().isOpen
+  })));
+  createEffect(() => {
+    if (!parentMachine) return;
+    parentMenu?.().setChild(menu().machine);
+    menu().api().setParent(parentMachine());
+  });
+  const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+  const machineContext = () => menu().machine;
+  const getChildren = () => runIfFn(localProps.children, menu().api);
+  return createComponent(MenuTriggerItemProvider, {
+    value: triggerItemContext,
     get children() {
-      return createComponent(ark.div, mergedProps);
+      return createComponent(MenuMachineProvider, {
+        value: machineContext,
+        get children() {
+          return createComponent(MenuProvider, {
+            get value() {
+              return menu().api;
+            },
+            get children() {
+              return createComponent(PresenceProvider, {
+                value: apiPresence,
+                get children() {
+                  return getChildren();
+                }
+              });
+            }
+          });
+        }
+      });
     }
   });
 };
 
 const MenuSeparator = props => {
   const menu = useMenuContext();
-  const mergedProps = mergeProps$2(() => menu?.().separatorProps, props);
+  const mergedProps = mergeProps$1(() => menu?.().separatorProps, props);
   return createComponent(ark.hr, mergedProps);
 };
 
 const MenuTrigger = props => {
   const api = useMenuContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, () => ({
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
     'aria-controls': presenceApi().isUnmounted && null
   }), props);
-
-  // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
   return createComponent(ark.button, mergedProps);
 };
 
 const MenuTriggerItem = props => {
   const getTriggerItemProps = useMenuTriggerItemContext();
-  const mergedProps = mergeProps$2(() => getTriggerItemProps?.(), props);
+  const mergedProps = mergeProps$1(() => getTriggerItemProps?.(), props);
   return createComponent(ark.div, mergedProps);
 };
 
-const Menu = Object.assign(Menu$1, {
-  Root: Menu$1,
+var menu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: MenuArrow,
   ArrowTip: MenuArrowTip,
   Content: MenuContent,
@@ -2279,6 +1942,7 @@ const Menu = Object.assign(Menu$1, {
   ItemGroupLabel: MenuItemGroupLabel,
   OptionItem: MenuOptionItem,
   Positioner: MenuPositioner,
+  Root: MenuRoot,
   Separator: MenuSeparator,
   Trigger: MenuTrigger,
   TriggerItem: MenuTriggerItem
@@ -2289,107 +1953,57 @@ const [NumberInputProvider, useNumberInputContext] = createContext({
   providerName: '<NumberInputProvider />'
 });
 
-const useNumberInput = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(numberInput.machine(context), {
-    context
-  });
-  return createMemo(() => numberInput.connect(state, send, normalizeProps));
-};
-
-const NumberInput$1 = props => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
-  const api = useNumberInput(useNumberInputProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(NumberInputProvider, {
-    value: api,
-    get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
-
 const NumberInputControl = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const NumberInputDecrementTrigger = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().decrementTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().decrementTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const NumberInputIncrementTrigger = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().incrementTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().incrementTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const NumberInputInput = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
   return createComponent(ark.input, mergedProps);
 };
 
 const NumberInputLabel = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
-const NumberInputScrubber = props => {
-  const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().scrubberProps, props);
-  return createComponent(ark.div, mergedProps);
-};
-
-const NumberInput = Object.assign(NumberInput$1, {
-  Root: NumberInput$1,
-  Control: NumberInputControl,
-  DecrementTrigger: NumberInputDecrementTrigger,
-  Input: NumberInputInput,
-  IncrementTrigger: NumberInputIncrementTrigger,
-  Label: NumberInputLabel,
-  Scrubber: NumberInputScrubber
-});
-
-const [PaginationProvider, usePaginationContext] = createContext({
-  hookName: 'usePaginationContext',
-  providerName: '<PaginationProvider />'
-});
-
-const usePagination = props => {
+const useNumberInput = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(pagination.machine(context), {
+  const [state, send] = useMachine(numberInput$1.machine(context), {
     context
   });
-  return createMemo(() => pagination.connect(state, send, normalizeProps));
+  return createMemo(() => numberInput$1.connect(state, send, normalizeProps));
 };
 
-const Pagination$1 = props => {
-  const [paginationParams, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
-  const api = usePagination(paginationParams);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+const NumberInputRoot = props => {
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const api = useNumberInput(useNumberInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(PaginationProvider, {
+  return createComponent(NumberInputProvider, {
     value: api,
     get children() {
-      return createComponent(ark.nav, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2398,166 +2012,186 @@ const Pagination$1 = props => {
   });
 };
 
+const NumberInputScrubber = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().scrubberProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var numberInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: NumberInputControl,
+  DecrementTrigger: NumberInputDecrementTrigger,
+  IncrementTrigger: NumberInputIncrementTrigger,
+  Input: NumberInputInput,
+  Label: NumberInputLabel,
+  Root: NumberInputRoot,
+  Scrubber: NumberInputScrubber
+});
+
+const [PaginationProvider, usePaginationContext] = createContext({
+  hookName: 'usePaginationContext',
+  providerName: '<PaginationProvider />'
+});
+
 const PaginationEllipsis = props => {
   const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
   const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => api().getEllipsisProps(ellipsisProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getEllipsisProps(ellipsisProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const PaginationItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
   const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   return createComponent(ark.button, mergedProps);
 };
 
 const PaginationNextTrigger = props => {
   const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => api().nextTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const PaginationPrevTrigger = props => {
   const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => api().prevTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-const Pagination = Object.assign(Pagination$1, {
-  Root: Pagination$1,
-  Ellipsis: PaginationEllipsis,
-  Item: PaginationItem,
-  NextTrigger: PaginationNextTrigger,
-  PrevTrigger: PaginationPrevTrigger
-});
-
-const [PinInputProvider, usePinInputContext] = createContext({
-  hookName: 'usePinInputContext',
-  providerName: '<PinInputProvider />'
-});
-
-const usePinInput = props => {
+const usePagination = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(pinInput.machine(context), {
+  const [state, send] = useMachine(pagination$1.machine(context), {
     context
   });
-  return createMemo(() => pinInput.connect(state, send, normalizeProps));
+  return createMemo(() => pagination$1.connect(state, send, normalizeProps));
 };
 
-const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
-const PinInput$1 = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
-  const api = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  return createComponent(PinInputProvider, {
+const PaginationRoot = props => {
+  const [paginationParams, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const api = usePagination(paginationParams);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(PaginationProvider, {
     value: api,
     get children() {
-      return [createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$6();
-        spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return createComponent(ark.nav, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
 
+var pagination = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Ellipsis: PaginationEllipsis,
+  Item: PaginationItem,
+  NextTrigger: PaginationNextTrigger,
+  PrevTrigger: PaginationPrevTrigger,
+  Root: PaginationRoot
+});
+
+const [PinInputProvider, usePinInputContext] = createContext({
+  hookName: 'usePinInputContext',
+  providerName: '<PinInputProvider />'
+});
+
 const PinInputControl = props => {
   const api = usePinInputContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PinInputInput = props => {
   const [inputParams, localProps] = splitProps(props, ['index']);
   const api = usePinInputContext();
-  const mergedProps = mergeProps$2(() => api().getInputProps(inputParams), localProps);
+  const mergedProps = mergeProps$1(() => api().getInputProps(inputParams), localProps);
   return createComponent(ark.input, mergedProps);
 };
 
 const PinInputLabel = props => {
   const api = usePinInputContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
-const PinInput = Object.assign(PinInput$1, {
-  Root: PinInput$1,
-  Control: PinInputControl,
-  Input: PinInputInput,
-  Label: PinInputLabel
-});
-
-const [PopoverProvider, usePopoverContext] = createContext({
-  hookName: 'usePopoverContext',
-  providerName: '<PopoverProvider />'
-});
-
-const usePopover = props => {
+const usePinInput = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(popover.machine(context), {
+  const [state, send] = useMachine(pinInput$1.machine(context), {
     context
   });
-  return createMemo(() => popover.connect(state, send, normalizeProps));
+  return createMemo(() => pinInput$1.connect(state, send, normalizeProps));
 };
 
-const Popover$1 = props => {
-  const [presenceProps, popoverProps] = splitPresenceProps(props);
-  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
-  const api = usePopover(usePopoverProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(PopoverProvider, {
+const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
+const PinInputRoot = props => {
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const api = usePinInput(usePinInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(PinInputProvider, {
     value: api,
     get children() {
-      return createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
+      return [createComponent(ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$$6();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };
 
+var pinInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: PinInputControl,
+  Input: PinInputInput,
+  Label: PinInputLabel,
+  Root: PinInputRoot
+});
+
+const [PopoverProvider, usePopoverContext] = createContext({
+  hookName: 'usePopoverContext',
+  providerName: '<PopoverProvider />'
+});
+
 const PopoverAnchor = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$2(() => api().anchorProps, props);
+  const mergedProps = mergeProps$1(() => api().anchorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrow = props => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps$2(() => popover().arrowProps, props);
+  const mergedProps = mergeProps$1(() => popover().arrowProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverArrowTip = props => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps$2(() => popover().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => popover().arrowTipProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverCloseTrigger = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$2(() => api().closeTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().closeTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const PopoverContent = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -2570,20 +2204,20 @@ const PopoverContent = props => {
 
 const PopoverDescription = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$2(() => api().descriptionProps, props);
+  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
   return createComponent(ark.p, mergedProps);
 };
 
 const PopoverIndicator = props => {
   const popover = usePopoverContext();
-  const mergedProps = mergeProps$2(() => popover().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => popover().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverPositioner = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -2594,25 +2228,56 @@ const PopoverPositioner = props => {
   });
 };
 
+const usePopover = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(popover$1.machine(context), {
+    context
+  });
+  return createMemo(() => popover$1.connect(state, send, normalizeProps));
+};
+
+const PopoverRoot = props => {
+  const [presenceProps, popoverProps] = splitPresenceProps(props);
+  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const api = usePopover(usePopoverProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(PopoverProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
+};
+
 const PopoverTitle = props => {
   const api = usePopoverContext();
-  const mergedProps = mergeProps$2(() => api().titleProps, props);
+  const mergedProps = mergeProps$1(() => api().titleProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const PopoverTrigger = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, () => ({
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
     'aria-controls': presenceApi().isUnmounted && null
   }), props);
-
-  // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
   return createComponent(ark.button, mergedProps);
 };
 
-const Popover = Object.assign(Popover$1, {
-  Root: Popover$1,
+var popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Anchor: PopoverAnchor,
   Arrow: PopoverArrow,
   ArrowTip: PopoverArrowTip,
@@ -2620,109 +2285,111 @@ const Popover = Object.assign(Popover$1, {
   Content: PopoverContent,
   Description: PopoverDescription,
   Indicator: PopoverIndicator,
-  Positioner: PopoverPositioner,
-  Title: PopoverTitle,
-  Trigger: PopoverTrigger
-});
-
-const [ProgressProvider, useProgressContext] = createContext({
-  hookName: 'useProgressContext',
-  providerName: '<ProgressProvider />'
-});
-
-const useProgress = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(progress.machine(context), {
-    context
-  });
-  return createMemo(() => progress.connect(state, send, normalizeProps));
-};
-
-const Progress$1 = props => {
-  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
-  const api = useProgress(progressProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(ProgressProvider, {
-    value: api,
-    get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
+  Positioner: PopoverPositioner,
+  Root: PopoverRoot,
+  Title: PopoverTitle,
+  Trigger: PopoverTrigger
+});
+
+const [ProgressProvider, useProgressContext] = createContext({
+  hookName: 'useProgressContext',
+  providerName: '<ProgressProvider />'
+});
 
 const ProgressCircle = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().circleProps, props);
+  const mergedProps = mergeProps$1(() => api().circleProps, props);
   return createComponent(ark.svg, mergedProps);
 };
 
 const ProgressCircleRange = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().circleRangeProps, props);
+  const mergedProps = mergeProps$1(() => api().circleRangeProps, props);
   return createComponent(ark.circle, mergedProps);
 };
 
 const ProgressCircleTrack = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().circleTrackProps, props);
+  const mergedProps = mergeProps$1(() => api().circleTrackProps, props);
   return createComponent(ark.circle, mergedProps);
 };
 
-const ProgressIndicator = props => {
-  const [state, localProps] = createSplitProps()(props, ['state']);
-  const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().getIndicatorProps(state), localProps);
-  return createComponent(ark.span, mergedProps);
-};
-
 const ProgressLabel = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const ProgressRange = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().rangeProps, props);
+  const mergedProps = mergeProps$1(() => api().rangeProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
+const useProgress = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(progress$1.machine(context), {
+    context
+  });
+  return createMemo(() => progress$1.connect(state, send, normalizeProps));
+};
+
+const ProgressRoot = props => {
+  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
+  const api = useProgress(progressProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(ProgressProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const ProgressTrack = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().trackProps, props);
+  const mergedProps = mergeProps$1(() => api().trackProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ProgressValueText = props => {
   const api = useProgressContext();
-  const mergedProps = mergeProps$2(() => api().valueTextProps, props);
+  const mergedProps = mergeProps$1(() => api().valueTextProps, props);
   const getChildren = () => runIfFn(props.children, () => api().valueAsString);
-  return createComponent(ark.span, mergeProps$1(mergedProps, {
+  return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
       return getChildren() || api().valueAsString;
     }
   }));
 };
 
-const Progress = Object.assign(Progress$1, {
-  Root: Progress$1,
+const ProgressView = props => {
+  const [state, localProps] = createSplitProps()(props, ['state']);
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().getViewProps(state), localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+var progress = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Circle: ProgressCircle,
+  CircleRange: ProgressCircleRange,
+  CircleTrack: ProgressCircleTrack,
   Label: ProgressLabel,
-  Track: ProgressTrack,
   Range: ProgressRange,
+  Root: ProgressRoot,
+  Track: ProgressTrack,
   ValueText: ProgressValueText,
-  Indicator: ProgressIndicator,
-  Circle: ProgressCircle,
-  CircleTrack: ProgressCircleTrack,
-  CircleRange: ProgressCircleRange
+  View: ProgressView
 });
 
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
@@ -2730,33 +2397,9 @@ const [RadioGroupProvider, useRadioGroupContext] = createContext({
   providerName: '<RadioGroupProvider />'
 });
 
-const useRadioGroup = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(radio.machine(context), {
-    context
-  });
-  return createMemo(() => radio.connect(state, send, normalizeProps));
-};
-
-const RadioGroup$1 = props => {
-  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
-  const api = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  return createComponent(RadioGroupProvider, {
-    value: api,
-    get children() {
-      return createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
 const RadioGroupIndicator = props => {
   const api = useRadioGroupContext();
-  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2768,13 +2411,13 @@ const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
 const RadioGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const api = useRadioGroupContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const itemState = api().getItemState(itemProps);
   const getChildren = () => runIfFn(localProps.children, itemState);
   return createComponent(RadioGroupItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.label, mergeProps$1(mergedProps, {
+      return createComponent(ark.label, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2787,10 +2430,10 @@ const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
 const RadioGroupItemControl = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), props);
   return [createComponent(ark.div, mergedProps), (() => {
     const _el$ = _tmpl$$5();
-    spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
 };
@@ -2798,47 +2441,33 @@ const RadioGroupItemControl = props => {
 const RadioGroupItemText = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const RadioGroupLabel = props => {
   const api = useRadioGroupContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
-const RadioGroup = Object.assign(RadioGroup$1, {
-  Root: RadioGroup$1,
-  Indicator: RadioGroupIndicator,
-  Item: RadioGroupItem,
-  ItemControl: RadioGroupItemControl,
-  ItemText: RadioGroupItemText,
-  Label: RadioGroupLabel
-});
-
-const [RatingGroupProvider, useRatingGroupContext] = createContext({
-  hookName: 'useRatingGroupContext',
-  providerName: '<RatingGroupProvider />'
-});
-
-const useRatingGroup = props => {
+const useRadioGroup = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(rating.machine(context), {
+  const [state, send] = useMachine(radio.machine(context), {
     context
   });
-  return createMemo(() => rating.connect(state, send, normalizeProps));
+  return createMemo(() => radio.connect(state, send, normalizeProps));
 };
 
-const RatingGroup$1 = props => {
-  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
-  const api = useRatingGroup(useRatingProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  return createComponent(RatingGroupProvider, {
+const RadioGroupRoot = props => {
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(RadioGroupProvider, {
     value: api,
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -2846,18 +2475,33 @@ const RatingGroup$1 = props => {
   });
 };
 
+var radioGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel,
+  Root: RadioGroupRoot
+});
+
+const [RatingGroupProvider, useRatingGroupContext] = createContext({
+  hookName: 'useRatingGroupContext',
+  providerName: '<RatingGroupProvider />'
+});
+
 const _tmpl$$4 = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   const getChildren = () => runIfFn(props.children, api);
-  return [createComponent(ark.div, mergeProps$1(mergedProps, {
+  return [createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return getChildren();
     }
   })), (() => {
     const _el$ = _tmpl$$4();
-    spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
 };
@@ -2870,13 +2514,13 @@ const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
 const RatingGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['index']);
   const api = useRatingGroupContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const itemState = createMemo(() => api().getItemState(itemProps));
   const getChildren = () => runIfFn(localProps.children, itemState);
   return createComponent(RatingGroupItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.span, mergeProps$1(mergedProps, {
+      return createComponent(ark.span, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2887,39 +2531,27 @@ const RatingGroupItem = props => {
 
 const RatingGroupLabel = props => {
   const api = useRatingGroupContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
-const RatingGroup = Object.assign(RatingGroup$1, {
-  Root: RatingGroup$1,
-  Control: RatingGroupControl,
-  Label: RatingGroupLabel,
-  Item: RatingGroupItem
-});
-
-const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
-  hookName: 'useSegmentGroupContext',
-  providerName: '<SegmentGroupProvider />'
-});
-
-const useSegmentGroup = props => {
+const useRatingGroup = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(radio.machine(context), {
+  const [state, send] = useMachine(rating.machine(context), {
     context
   });
-  return createMemo(() => radio.connect(state, send, normalizeProps));
+  return createMemo(() => rating.connect(state, send, normalizeProps));
 };
 
-const SegmentGroup$1 = props => {
-  const [groupParams, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
-  const api = useSegmentGroup(groupParams);
-  const mergedProps = mergeProps$2(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
-  return createComponent(SegmentGroupProvider, {
+const RatingGroupRoot = props => {
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(useRatingProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(RatingGroupProvider, {
     value: api,
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -2927,9 +2559,22 @@ const SegmentGroup$1 = props => {
   });
 };
 
+var ratingGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: RatingGroupControl,
+  Item: RatingGroupItem,
+  Label: RatingGroupLabel,
+  Root: RatingGroupRoot
+});
+
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  hookName: 'useSegmentGroupContext',
+  providerName: '<SegmentGroupProvider />'
+});
+
 const SegmentGroupIndicator = props => {
   const api = useSegmentGroupContext();
-  const mergedProps = mergeProps$2(() => api().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+  const mergedProps = mergeProps$1(() => api().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2941,13 +2586,13 @@ const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
 const SegmentGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const api = useSegmentGroupContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
   const itemState = api().getItemState(itemProps);
   const getChildren = () => runIfFn(localProps.children, itemState);
   return createComponent(SegmentGroupItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.label, mergeProps$1(mergedProps, {
+      return createComponent(ark.label, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2960,10 +2605,10 @@ const _tmpl$$3 = /*#__PURE__*/template(`<input>`);
 const SegmentGroupItemControl = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
   return [createComponent(ark.div, mergedProps), (() => {
     const _el$ = _tmpl$$3();
-    spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
 };
@@ -2971,82 +2616,66 @@ const SegmentGroupItemControl = props => {
 const SegmentGroupItemText = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
   return createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
   const api = useSegmentGroupContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
   return createComponent(ark.label, mergedProps);
 };
 
-const SegmentGroup = Object.assign(SegmentGroup$1, {
-  Root: SegmentGroup$1,
-  Indicator: SegmentGroupIndicator,
-  Item: SegmentGroupItem,
-  ItemControl: SegmentGroupItemControl,
-  ItemText: SegmentGroupItemText,
-  Label: SegmentGroupLabel
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const [SelectProvider, useSelectContext] = createContext({
-  hookName: 'useSelectContext',
-  providerName: '<SelectProvider />'
-});
-
-const useSelect = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select.collection(collectionOptions);
+const useSegmentGroup = props => {
   const getRootNode = useEnvironmentContext();
-  const context = () => mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode,
-    collection: collection()
-  }, rest);
-  const [state, send] = useMachine(select.machine(context()), {
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(radio.machine(context), {
     context
   });
-  return createMemo(() => select.connect(state, send, normalizeProps));
+  return createMemo(() => radio.connect(state, send, normalizeProps));
 };
 
-const Select$1 = props => {
-  const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
-  const api = useSelect(useSelectProps);
-  const presenceApi = usePresence(mergeProps$2(() => ({
-    present: api().isOpen
-  }), presenceProps));
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(SelectProvider, {
+const SegmentGroupRoot = props => {
+  const [groupParams, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useSegmentGroup(groupParams);
+  const mergedProps = mergeProps$1(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+  return createComponent(SegmentGroupProvider, {
     value: api,
     get children() {
-      return createComponent(PresenceProvider, {
-        value: presenceApi,
-        get children() {
-          return createComponent(ark.div, mergeProps$1(mergedProps, {
-            get children() {
-              return getChildren();
-            }
-          }));
-        }
-      });
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
 
+var segmentGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Indicator: SegmentGroupIndicator,
+  Item: SegmentGroupItem,
+  ItemControl: SegmentGroupItemControl,
+  ItemText: SegmentGroupItemText,
+  Label: SegmentGroupLabel,
+  Root: SegmentGroupRoot
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const [SelectProvider, useSelectContext] = createContext({
+  hookName: 'useSelectContext',
+  providerName: '<SelectProvider />'
+});
+
 const SelectClearTrigger = props => {
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const SelectContent = props => {
   const api = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -3061,10 +2690,10 @@ const _tmpl$$2 = /*#__PURE__*/template(`<select>`),
   _tmpl$2 = /*#__PURE__*/template(`<option>`);
 const SelectControl = props => {
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return [createComponent(ark.div, mergedProps), (() => {
     const _el$ = _tmpl$$2();
-    spread$1(_el$, mergeProps$1(() => api().hiddenSelectProps), false, true);
+    spread(_el$, mergeProps(() => api().hiddenSelectProps), false, true);
     insert(_el$, createComponent(Index, {
       get each() {
         return api().collection.toArray();
@@ -3082,7 +2711,7 @@ const SelectControl = props => {
 
 const SelectIndicator = props => {
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3094,12 +2723,12 @@ const [SelectItemProvider, useSelectItemContext] = createContext({
 const SelectItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['item']);
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
   return createComponent(SelectItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -3111,14 +2740,14 @@ const SelectItem = props => {
 const SelectItemGroup = props => {
   const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupProps(itemGroupProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemGroupProps(itemGroupProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const SelectItemGroupLabel = props => {
   const [labelProps, localProps] = createSplitProps()(props, ['for']);
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+  const mergedProps = mergeProps$1(() => api().getItemGroupLabelProps({
     htmlFor: labelProps.for
   }), localProps);
   return createComponent(ark.div, mergedProps);
@@ -3127,27 +2756,27 @@ const SelectItemGroupLabel = props => {
 const SelectItemIndicator = props => {
   const api = useSelectContext();
   const itemProps = useSelectItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemIndicatorProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SelectItemText = props => {
   const api = useSelectContext();
   const itemProps = useSelectItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const SelectLabel = props => {
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const SelectPositioner = props => {
   const api = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -3158,24 +2787,65 @@ const SelectPositioner = props => {
   });
 };
 
+const useSelect = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => select$1.collection(collectionOptions);
+  const getRootNode = useEnvironmentContext();
+  const context = () => mergeProps$1({
+    id: createUniqueId(),
+    getRootNode,
+    collection: collection()
+  }, rest);
+  const [state, send] = useMachine(select$1.machine(context()), {
+    context
+  });
+  return createMemo(() => select$1.connect(state, send, normalizeProps));
+};
+
+const SelectRoot = props => {
+  const [presenceProps, selectProps] = splitPresenceProps(props);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
+  const api = useSelect(useSelectProps);
+  const presenceApi = usePresence(mergeProps$1(() => ({
+    present: api().isOpen
+  }), presenceProps));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(SelectProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presenceApi,
+        get children() {
+          return createComponent(ark.div, mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
+    }
+  });
+};
+
 const SelectTrigger = props => {
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const SelectValueText = props => {
   const api = useSelectContext();
-  const mergedProps = mergeProps$2(() => selectAnatomy.build().valueText.attrs, props);
-  return createComponent(ark.span, mergeProps$1(mergedProps, {
+  const mergedProps = mergeProps$1(() => selectAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
       return api().valueAsString || props.placeholder;
     }
   }));
 };
 
-const Select = Object.assign(Select$1, {
-  Root: Select$1,
+var select = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
@@ -3187,6 +2857,7 @@ const Select = Object.assign(Select$1, {
   ItemText: SelectItemText,
   Label: SelectLabel,
   Positioner: SelectPositioner,
+  Root: SelectRoot,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
 });
@@ -3196,97 +2867,98 @@ const [SliderProvider, useSliderContext] = createContext({
   providerName: '<SliderProvider />'
 });
 
-const useSlider = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(slider.machine(context), {
-    context
-  });
-  return createMemo(() => slider.connect(state, send, normalizeProps));
-};
-
-const Slider$1 = props => {
-  const [sliderParams, restProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
-  const api = useSlider(sliderParams);
-  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
-  const getChildren = () => runIfFn(restProps.children, api);
-  return createComponent(SliderProvider, {
-    value: api,
-    get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
-
 const SliderControl = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SliderLabel = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const SliderMarker = props => {
   const [markerProps, localProps] = createSplitProps()(props, ['value']);
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().getMarkerProps(markerProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getMarkerProps(markerProps), localProps);
   return createComponent(ark.span, mergedProps);
 };
 
 const SliderMarkerGroup = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().markerGroupProps, props);
+  const mergedProps = mergeProps$1(() => api().markerGroupProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SliderRange = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().rangeProps, props);
+  const mergedProps = mergeProps$1(() => api().rangeProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
+const useSlider = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(slider$1.machine(context), {
+    context
+  });
+  return createMemo(() => slider$1.connect(state, send, normalizeProps));
+};
+
+const SliderRoot = props => {
+  const [sliderParams, restProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  const api = useSlider(sliderParams);
+  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return createComponent(SliderProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const SliderThumb = props => {
   const [thumbProps, localProps] = createSplitProps()(props, ['index']);
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().getThumbProps(thumbProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getThumbProps(thumbProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
 const SliderTrack = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().trackProps, props);
+  const mergedProps = mergeProps$1(() => api().trackProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SliderValueText = props => {
   const api = useSliderContext();
-  const mergedProps = mergeProps$2(() => api().valueTextProps, props);
+  const mergedProps = mergeProps$1(() => api().valueTextProps, props);
   const getChildren = children(() => props.children);
-  return createComponent(ark.div, mergeProps$1(mergedProps, {
+  return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
       return getChildren() || api().value.join(',');
     }
   }));
 };
 
-const Slider = Object.assign(Slider$1, {
-  Root: Slider$1,
+var slider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: SliderControl,
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
   Range: SliderRange,
+  Root: SliderRoot,
   Thumb: SliderThumb,
   Track: SliderTrack,
   ValueText: SliderValueText
@@ -3297,27 +2969,41 @@ const [SplitterProvider, useSplitterContext] = createContext({
   providerName: '<SplitterProvider />'
 });
 
+const SplitterPanel = props => {
+  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
+  const api = useSplitterContext();
+  const mergedProps = mergeProps$1(() => api().getPanelProps(panelParams), restProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SplitterResizeTrigger = props => {
+  const api = useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
+  const mergedProps = mergeProps$1(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return createComponent(ark.button, mergedProps);
+};
+
 const useSplitter = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(splitter.machine(context), {
+  const [state, send] = useMachine(splitter$1.machine(context), {
     context
   });
-  return createMemo(() => splitter.connect(state, send, normalizeProps));
+  return createMemo(() => splitter$1.connect(state, send, normalizeProps));
 };
 
-const Splitter$1 = props => {
+const SplitterRoot = props => {
   const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'onSizeChangeStart', 'orientation', 'size']);
   const api = useSplitter(splitterParams);
   const getChildren = () => runIfFn(localProps.children, api);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SplitterProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -3326,24 +3012,11 @@ const Splitter$1 = props => {
   });
 };
 
-const SplitterPanel = props => {
-  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
-  const api = useSplitterContext();
-  const mergedProps = mergeProps$2(() => api().getPanelProps(panelParams), restProps);
-  return createComponent(ark.div, mergedProps);
-};
-
-const SplitterResizeTrigger = props => {
-  const api = useSplitterContext();
-  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
-  const mergedProps = mergeProps$2(() => api().getResizeTriggerProps(triggerParams), restProps);
-  return createComponent(ark.button, mergedProps);
-};
-
-const Splitter = Object.assign(Splitter$1, {
-  Root: Splitter$1,
+var splitter = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Panel: SplitterPanel,
-  ResizeTrigger: SplitterResizeTrigger
+  ResizeTrigger: SplitterResizeTrigger,
+  Root: SplitterRoot
 });
 
 const [SwitchProvider, useSwitchContext] = createContext({
@@ -3351,9 +3024,26 @@ const [SwitchProvider, useSwitchContext] = createContext({
   providerName: '<SwitchProvider />'
 });
 
+const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
+const SwitchControl = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.span, mergedProps), (() => {
+    const _el$ = _tmpl$$1();
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const SwitchLabel = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
 const useSwitch = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
@@ -3363,15 +3053,15 @@ const useSwitch = props => {
   return createMemo(() => zagSwitch.connect(state, send, normalizeProps));
 };
 
-const Switch$1 = props => {
+const SwitchRoot = props => {
   const [switchProps, localProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
   const api = useSwitch(switchProps);
-  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(props.children, api);
   return createComponent(SwitchProvider, {
     value: api,
     get children() {
-      return createComponent(ark.label, mergeProps$1(mergedProps, {
+      return createComponent(ark.label, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -3380,33 +3070,17 @@ const Switch$1 = props => {
   });
 };
 
-const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
-const SwitchControl = props => {
-  const api = useSwitchContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
-  return [createComponent(ark.span, mergedProps), (() => {
-    const _el$ = _tmpl$$1();
-    spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
-};
-
-const SwitchLabel = props => {
-  const api = useSwitchContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
-  return createComponent(ark.span, mergedProps);
-};
-
 const SwitchThumb = props => {
   const api = useSwitchContext();
-  const mergedProps = mergeProps$2(() => api().thumbProps, props);
+  const mergedProps = mergeProps$1(() => api().thumbProps, props);
   return createComponent(ark.span, mergedProps);
 };
 
-const Switch = Object.assign(Switch$1, {
-  Root: Switch$1,
+var _switch = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Control: SwitchControl,
   Label: SwitchLabel,
+  Root: SwitchRoot,
   Thumb: SwitchThumb
 });
 
@@ -3419,10 +3093,10 @@ const TabContent = props => {
   const [contentProps, localProps] = createSplitProps()(props, ['value']);
   const api = useTabsContext();
   const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({
+  const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().value === contentProps.value
   })));
-  const mergedProps = mergeProps$2(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
+  const mergedProps = mergeProps$1(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
   return createComponent(PresenceProvider, {
     value: presenceApi,
     get children() {
@@ -3440,40 +3114,40 @@ const TabContent = props => {
 
 const TabIndicator = props => {
   const api = useTabsContext();
-  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TabList = props => {
   const api = useTabsContext();
-  const mergedProps = mergeProps$2(() => api().tablistProps, props);
+  const mergedProps = mergeProps$1(() => api().tablistProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TabTrigger = props => {
   const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
   const api = useTabsContext();
-  const mergedProps = mergeProps$2(() => api().getTriggerProps(tabParams), restProps);
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(tabParams), restProps);
   return createComponent(ark.button, mergedProps);
 };
 
 const useTabs = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(tabs.machine(context), {
+  const [state, send] = useMachine(tabs$1.machine(context), {
     context
   });
-  return createMemo(() => tabs.connect(state, send, normalizeProps));
+  return createMemo(() => tabs$1.connect(state, send, normalizeProps));
 };
 
-const Tabs$1 = props => {
+const TabsRoot = props => {
   const [presenceProps, tabsProps] = splitPresenceProps(props);
   const [tabsParams, restProps] = createSplitProps()(tabsProps, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(tabsParams);
-  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
   return createComponent(TabsProvider, {
     value: api,
     get children() {
@@ -3487,11 +3161,12 @@ const Tabs$1 = props => {
   });
 };
 
-const Tabs = Object.assign(Tabs$1, {
-  Root: Tabs$1,
+var tabs = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Content: TabContent,
   Indicator: TabIndicator,
   List: TabList,
+  Root: TabsRoot,
   Trigger: TabTrigger
 });
 
@@ -3500,55 +3175,21 @@ const [TagsInputProvider, useTagsInputContext] = createContext({
   providerName: '<TagsInputProvider />'
 });
 
-const useTagsInput = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(tagsInput.machine(context), {
-    context
-  });
-  return createMemo(() => tagsInput.connect(state, send, normalizeProps));
-};
-
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
-const TagsInput$1 = props => {
-  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
-  const api = useTagsInput(tagsInputParams);
-  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
-  const getChildren = () => runIfFn(restProps.children, api);
-  return createComponent(TagsInputProvider, {
-    value: api,
-    get children() {
-      return [createComponent(ark.div, mergeProps$1(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      })), (() => {
-        const _el$ = _tmpl$();
-        spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
-    }
-  });
-};
-
 const TagsInputClearTrigger = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$2(() => api().clearTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const TagsInputControl = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TagsInputInput = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
   return createComponent(ark.input, mergedProps);
 };
 
@@ -3560,12 +3201,12 @@ const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
 const TagsInputItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'index', 'value']);
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
   return createComponent(TagsInputItemProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -3577,40 +3218,83 @@ const TagsInputItem = props => {
 const TagsInputItemDeleteTrigger = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemDeleteTriggerProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemDeleteTriggerProps(itemProps), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const TagsInputItemInput = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemInputProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemInputProps(itemProps), props);
   return createComponent(ark.input, mergedProps);
 };
 
+const TagsInputItemPreview = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemPreviewProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
 const TagsInputItemText = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemContext();
-  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const TagsInputLabel = props => {
   const api = useTagsInputContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
-const TagsInput = Object.assign(TagsInput$1, {
-  Root: TagsInput$1,
+const useTagsInput = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tagsInput$1.machine(context), {
+    context
+  });
+  return createMemo(() => tagsInput$1.connect(state, send, normalizeProps));
+};
+
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
+const TagsInputRoot = props => {
+  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput(tagsInputParams);
+  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return createComponent(TagsInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+var tagsInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   ClearTrigger: TagsInputClearTrigger,
   Control: TagsInputControl,
   Input: TagsInputInput,
   Item: TagsInputItem,
   ItemDeleteTrigger: TagsInputItemDeleteTrigger,
   ItemInput: TagsInputItemInput,
+  ItemPreview: TagsInputItemPreview,
   ItemText: TagsInputItemText,
-  Label: TagsInputLabel
+  Label: TagsInputLabel,
+  Root: TagsInputRoot
 });
 
 const [ToastProvider, useToastContext] = createContext({
@@ -3623,12 +3307,12 @@ const ToastGroup = props => {
 };
 
 const createToaster = props => {
-  const service = toast.group.machine({
+  const service = toast$1.group.machine({
     id: '1',
     ...props
   }).start();
   const [state, send] = useActor(service);
-  const api = createMemo(() => toast.group.connect(state, send, normalizeProps));
+  const api = createMemo(() => toast$1.group.connect(state, send, normalizeProps));
   const Toaster = toasterProps => {
     const getRootNode = useEnvironmentContext();
     createEffect(() => {
@@ -3637,10 +3321,10 @@ const createToaster = props => {
       });
       onCleanup(() => service.stop());
     });
-    const mergedProps = mergeProps$2(() => api().getGroupProps({
+    const mergedProps = mergeProps$1(() => api().getGroupProps({
       placement: props.placement
     }), toasterProps);
-    return createComponent(ToastGroup, mergeProps$1(mergedProps, {
+    return createComponent(ToastGroup, mergeProps(mergedProps, {
       get children() {
         return createComponent(Index, {
           get each() {
@@ -3659,7 +3343,7 @@ const createToaster = props => {
 };
 const ToastProviderFactory = props => {
   const [state, send] = useActor(props.service);
-  const api = createMemo(() => toast.connect(state, send, normalizeProps));
+  const api = createMemo(() => toast$1.connect(state, send, normalizeProps));
   return createComponent(ToastProvider, {
     value: api,
     get children() {
@@ -3668,35 +3352,36 @@ const ToastProviderFactory = props => {
   });
 };
 
-const Toast$1 = props => {
-  const api = useToastContext();
-  const mergedProps = mergeProps$2(() => api().rootProps, props);
-  return createComponent(ark.li, mergedProps);
-};
-
 const ToastCloseTrigger = props => {
   const api = useToastContext();
-  const mergedProps = mergeProps$2(() => api().closeTriggerProps, props);
+  const mergedProps = mergeProps$1(() => api().closeTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ToastDescription = props => {
   const api = useToastContext();
-  const mergedProps = mergeProps$2(() => api().descriptionProps, props);
+  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
+const ToastRoot = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$1(() => api().rootProps, props);
+  return createComponent(ark.li, mergedProps);
+};
+
 const ToastTitle = props => {
   const api = useToastContext();
-  const mergedProps = mergeProps$2(() => api().titleProps, props);
+  const mergedProps = mergeProps$1(() => api().titleProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
-const Toast = Object.assign(Toast$1, {
-  Root: Toast$1,
+var toast = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   CloseTrigger: ToastCloseTrigger,
   Description: ToastDescription,
   Group: ToastGroup,
+  Root: ToastRoot,
   Title: ToastTitle
 });
 
@@ -3705,22 +3390,29 @@ const [ToggleGroupProvider, useToggleGroupContext] = createContext({
   providerName: '<ToggleGroupProvider />'
 });
 
+const ToggleGroupItem = props => {
+  const [toggleProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+  const api = useToggleGroupContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(toggleProps), restProps);
+  return createComponent(ark.button, mergedProps);
+};
+
 const useToggleGroup = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(toggleGroup.machine(context), {
+  const [state, send] = useMachine(toggleGroup$1.machine(context), {
     context
   });
-  return createMemo(() => toggleGroup.connect(state, send, normalizeProps));
+  return createMemo(() => toggleGroup$1.connect(state, send, normalizeProps));
 };
 
-const ToggleGroup$1 = props => {
+const ToggleGroupRoot = props => {
   const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'loop', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
   const api = useToggleGroup(groupParams);
-  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
   return createComponent(ToggleGroupProvider, {
     value: api,
     get children() {
@@ -3729,16 +3421,10 @@ const ToggleGroup$1 = props => {
   });
 };
 
-const ToggleGroupItem = props => {
-  const [toggleProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
-  const api = useToggleGroupContext();
-  const mergedProps = mergeProps$2(() => api().getItemProps(toggleProps), restProps);
-  return createComponent(ark.button, mergedProps);
-};
-
-const ToggleGroup = Object.assign(ToggleGroup$1, {
-  Root: ToggleGroup$1,
-  Item: ToggleGroupItem
+var toggleGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Item: ToggleGroupItem,
+  Root: ToggleGroupRoot
 });
 
 const [TooltipProvider, useTooltipContext] = createContext({
@@ -3746,55 +3432,22 @@ const [TooltipProvider, useTooltipContext] = createContext({
   providerName: '<TooltipProvider />'
 });
 
-const useTooltip = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(tooltip.machine(context), {
-    context
-  });
-  return createMemo(() => tooltip.connect(state, send, normalizeProps));
-};
-
-const Tooltip$1 = props => {
-  const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
-  const api = useTooltip(useTooltipProps);
-  const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return createComponent(TooltipProvider, {
-    value: api,
-    get children() {
-      return createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
-    }
-  });
-};
-
 const TooltipArrow = props => {
   const tooltip = useTooltipContext();
-  const mergedProps = mergeProps$2(() => tooltip().arrowProps, props);
+  const mergedProps = mergeProps$1(() => tooltip().arrowProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TooltipArrowTip = props => {
   const api = useTooltipContext();
-  const mergedProps = mergeProps$2(() => api().arrowTipProps, props);
+  const mergedProps = mergeProps$1(() => api().arrowTipProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TooltipContent = props => {
   const api = useTooltipContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -3808,7 +3461,7 @@ const TooltipContent = props => {
 const TooltipPositioner = props => {
   const api = useTooltipContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
       return !presenceApi().isUnmounted;
@@ -3819,20 +3472,183 @@ const TooltipPositioner = props => {
   });
 };
 
+const useTooltip = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tooltip$1.machine(context), {
+    context
+  });
+  return createMemo(() => tooltip$1.connect(state, send, normalizeProps));
+};
+
+const TooltipRoot = props => {
+  const [presenceProps, tooltipProps] = splitPresenceProps(props);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(TooltipProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
+};
+
 const TooltipTrigger = props => {
   const api = useTooltipContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-const Tooltip = Object.assign(Tooltip$1, {
-  Root: Tooltip$1,
+var tooltip = /*#__PURE__*/Object.freeze({
+  __proto__: null,
   Arrow: TooltipArrow,
   ArrowTip: TooltipArrowTip,
   Content: TooltipContent,
   Positioner: TooltipPositioner,
+  Root: TooltipRoot,
   Trigger: TooltipTrigger
 });
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
+// TODO: remove after zag release
+
+const [TreeViewProvider, useTreeViewContext] = createContext({
+  hookName: 'useTreeViewContext',
+  providerName: '<TreeViewProvider />'
+});
+
+const TreeViewBranch = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
+  return createComponent(ark.li, mergeProps(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const TreeViewBranchContent = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getBranchContentProps(branchProps), localProps);
+  return createComponent(ark.ul, mergedProps);
+};
+
+const TreeViewBranchControl = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getBranchControlProps(branchProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewBranchIndicator = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), treeViewAnatomy.build().branchIndicator.attrs, localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewBranchText = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getBranchTextProps(branchProps), localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+const TreeViewBranchTrigger = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getBranchTriggerProps(branchProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const TreeViewItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(ark.li, mergeProps(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const TreeViewItemText = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), treeViewAnatomy.build().itemText.attrs, localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+const TreeViewLabel = props => {
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useTreeView = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(treeView$1.machine(context), {
+    context
+  });
+  return createMemo(() => treeView$1.connect(state, send, normalizeProps));
+};
+
+const TreeViewRoot = props => {
+  const [useTreeViewProps, localProps] = createSplitProps()(props, ['dir', 'expandedIds', 'focusedId', 'getRootNode', 'id', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedIds', 'selectionMode']);
+  const api = useTreeView(useTreeViewProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(TreeViewProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const TreeViewTree = props => {
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().treeProps, props);
+  return createComponent(ark.ul, mergedProps);
+};
+
+var treeView = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Branch: TreeViewBranch,
+  BranchContent: TreeViewBranchContent,
+  BranchControl: TreeViewBranchControl,
+  BranchIndicator: TreeViewBranchIndicator,
+  BranchText: TreeViewBranchText,
+  BranchTrigger: TreeViewBranchTrigger,
+  Item: TreeViewItem,
+  ItemText: TreeViewItemText,
+  Label: TreeViewLabel,
+  Root: TreeViewRoot,
+  Tree: TreeViewTree
+});
+
+export { accordion as Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, menu as Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, toggleGroup as ToggleGroup, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, withAsProp };
 //# sourceMappingURL=index.js.map