@ark-ui/solid 1.3.0 → 2.0.0

package/esm/index.js

@@ -1,11 +1,11 @@
-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 { useMachine, normalizeProps, mergeProps as mergeProps$1, useActor } from '@zag-js/solid';
+import { createContext as createContext$1, useContext, splitProps, createSignal, createMemo, createEffect, Show, createUniqueId, Index, children, onCleanup } from 'solid-js';
 import * as presence from '@zag-js/presence';
 import * as accordion from '@zag-js/accordion';
 import * as avatar from '@zag-js/avatar';
+import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy, treeViewAnatomy } from '@ark-ui/anatomy';
 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';
@@ -30,366 +30,61 @@ 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 treeView from '@zag-js/tree-view';
 import * as toast from '@zag-js/toast';
 
-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,192 @@ 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.machine(context), {
     context
   });
-  return createMemo(() => avatar.connect(state, send, normalizeProps));
+  return createMemo(() => accordion.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);
+        }
+      });
     }
   });
 };
 
+const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  ItemContent: AccordionItemContent,
+  ItemIndicator: AccordionItemIndicator,
+  ItemTrigger: AccordionItemTrigger
+};
+
+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.machine(context), {
     context
   });
-  return createMemo(() => carousel.connect(state, send, normalizeProps));
+  return createMemo(() => avatar.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);
     }
   });
 };
 
+const Avatar = {
+  Root: AvatarRoot,
+  Fallback: AvatarFallback,
+  Image: AvatarImage
+};
+
+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.machine(context), {
     context
   });
-  return createMemo(() => checkbox.connect(state, send, normalizeProps));
+  return createMemo(() => carousel.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 +399,102 @@ const Checkbox$1 = props => {
   });
 };
 
+const CarouselViewport = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().viewportProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const Carousel = {
+  Root: CarouselRoot,
+  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 _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.machine(context), {
     context
   });
-  return createMemo(() => colorPicker.connect(state, send, normalizeProps));
+  return createMemo(() => checkbox.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$;
-      })()];
+      }));
     }
   });
 };
 
+const Checkbox = {
+  Root: CheckboxRoot,
+  Control: CheckboxControl,
+  Label: CheckboxLabel,
+  Indicator: CheckboxIndicator
+};
+
 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 +506,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 +532,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 +544,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 +571,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 +603,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 +627,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.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(colorPicker.machine(context), {
+    context
+  });
+  return createMemo(() => colorPicker.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 +680,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 +691,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 +734,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 +742,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 +751,8 @@ const ColorPickerView = props => {
   });
 };
 
-const ColorPicker = Object.assign(ColorPicker$1, {
-  Root: ColorPicker$1,
+const ColorPicker = {
+  Root: ColorPickerRoot,
   Area: ColorPickerArea,
   AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
@@ -1119,7 +775,7 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   Trigger: ColorPickerTrigger,
   ValueText: ColorPickerValueText,
   View: ColorPickerView
-});
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const [ComboboxProvider, useComboboxContext] = createContext({
@@ -1127,57 +783,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 +805,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 +823,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 +840,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 +856,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 +887,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.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.machine(context()), {
     context
   });
-  return createMemo(() => datePicker.connect(state, send, normalizeProps));
+  return createMemo(() => combobox.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 +928,43 @@ const DatePicker$1 = props => {
   });
 };
 
+const ComboboxTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const Combobox = {
+  Root: ComboboxRoot,
+  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 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 +977,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 +1017,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 +1038,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.parse(local.focusedValue) : undefined,
+    value: local.value ? datePicker.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(datePicker.machine(context), {
+    context
+  });
+  return createMemo(() => datePicker.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 +1109,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 +1121,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 +1140,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 +1159,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 +1194,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 +1213,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 +1250,8 @@ function getYearsRange(range) {
   return years;
 }
 
-const DatePicker = Object.assign(DatePicker$1, {
-  Root: DatePicker$1,
+const DatePicker = {
+  Root: DatePickerRoot,
   ClearTrigger: DatePickerClearTrigger,
   Content: DatePickerContent,
   Control: DatePickerControl,
@@ -1618,58 +1274,20 @@ const DatePicker = Object.assign(DatePicker$1, {
   ViewControl: DatePickerViewControl,
   ViewTrigger: DatePickerViewTrigger,
   YearSelect: DatePickerYearSelect
-});
+};
 
 const [DialogProvider, useDialogContext] = createContext({
   hookName: 'useDialogContext',
   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 +1300,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 +1320,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,154 +1338,138 @@ const DialogPositioner = props => {
   });
 };
 
-const DialogTitle = props => {
-  const dialog = useDialogContext();
-  const mergedProps = mergeProps$2(() => dialog().titleProps, props);
-  return createComponent(ark.h2, mergedProps);
-};
-
-const DialogTrigger = props => {
-  const api = useDialogContext();
-  const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => 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,
-  Backdrop: DialogBackdrop,
-  CloseTrigger: DialogCloseTrigger,
-  Positioner: DialogPositioner,
-  Content: DialogContent,
-  Description: DialogDescription,
-  Title: DialogTitle,
-  Trigger: DialogTrigger
-});
-
-const [EditableProvider, useEditableContext] = createContext({
-  hookName: 'useEditableContext',
-  providerName: '<EditableProvider />'
-});
-
-const useEditable = props => {
+const useDialog = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(editable.machine(context), {
+  const [state, send] = useMachine(dialog.machine(context), {
     context
   });
-  return createMemo(() => editable.connect(state, send, normalizeProps));
+  return createMemo(() => dialog.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 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(EditableProvider, {
+  return createComponent(DialogProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(PresencePropsProvider, {
+        value: presenceProps,
         get children() {
-          return getChildren();
+          return createComponent(PresenceProvider, {
+            value: apiPresence,
+            get children() {
+              return getChildren();
+            }
+          });
         }
-      }));
+      });
     }
   });
 };
 
+const DialogTitle = props => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps$1(() => dialog().titleProps, props);
+  return createComponent(ark.h2, mergedProps);
+};
+
+const DialogTrigger = props => {
+  const api = useDialogContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+    'aria-controls': presenceApi().isUnmounted && null
+  }), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const Dialog = {
+  Root: DialogRoot,
+  Backdrop: DialogBackdrop,
+  CloseTrigger: DialogCloseTrigger,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Positioner: DialogPositioner,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+};
+
+const [EditableProvider, useEditableContext] = createContext({
+  hookName: 'useEditableContext',
+  providerName: '<EditableProvider />'
+});
+
 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 EditableSubmitTrigger = props => {
-  const api = useEditableContext();
-  const mergedProps = mergeProps$2(() => api().submitTriggerProps, props);
-  return createComponent(ark.button, mergedProps);
-};
-
-const Editable = Object.assign(Editable$1, {
-  Root: Editable$1,
-  Area: EditableArea,
-  CancelTrigger: EditableCancelTrigger,
-  Control: EditableControl,
-  EditTrigger: EditableEditTrigger,
-  Input: EditableInput,
-  Label: EditableLabel,
-  Preview: EditablePreview,
-  SubmitTrigger: EditableSubmitTrigger
-});
-
-const [FileUploadProvider, useFileUploadContext] = createContext({
-  hookName: 'useFileUploadContext',
-  providerName: '<FileUploadProvider />'
-});
-
-const useFileUpload = props => {
+const useEditable = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = useMachine(fileUpload.machine(context), {
+  const [state, send] = useMachine(editable.machine(context), {
     context
   });
-  return createMemo(() => fileUpload.connect(state, send, normalizeProps));
+  return createMemo(() => editable.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 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(FileUploadProvider, {
+  return createComponent(EditableProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(mergedProps, {
+      return createComponent(ark.div, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -1876,13 +1478,36 @@ const FileUpload$1 = props => {
   });
 };
 
+const EditableSubmitTrigger = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().submitTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const Editable = {
+  Root: EditableRoot,
+  Area: EditableArea,
+  CancelTrigger: EditableCancelTrigger,
+  Control: EditableControl,
+  EditTrigger: EditableEditTrigger,
+  Input: EditableInput,
+  Label: EditableLabel,
+  Preview: EditablePreview,
+  SubmitTrigger: EditableSubmitTrigger
+};
+
+const [FileUploadProvider, useFileUploadContext] = createContext({
+  hookName: 'useFileUploadContext',
+  providerName: '<FileUploadProvider />'
+});
+
 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 +1520,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 +1537,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 +1555,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 +1567,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 +1577,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 +1587,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 +1598,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.machine(context), {
+    context
+  });
+  return createMemo(() => fileUpload.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,
+const FileUpload = {
+  Root: FileUploadRoot,
   Dropzone: FileUploadDropzone,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
@@ -1995,62 +1649,29 @@ const FileUpload = Object.assign(FileUpload$1, {
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
   Trigger: FileUploadTrigger
-});
+};
 
 const [HoverCardProvider, useHoverCardContext] = createContext({
   hookName: 'useHoverCardContext',
   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 +1685,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,20 +1696,53 @@ const HoverCardPositioner = props => {
   });
 };
 
+const useHoverCard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(hoverCard.machine(context), {
+    context
+  });
+  return createMemo(() => hoverCard.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,
+const HoverCard = {
+  Root: HoverCardRoot,
   Arrow: HoverCardArrow,
   ArrowTip: HoverCardArrowTip,
   Content: HoverCardContent,
   Positioner: HoverCardPositioner,
   Trigger: HoverCardTrigger
-});
+};
 
 const [MenuProvider, useMenuContext] = createContext({
   hookName: 'useMenuContext',
@@ -2106,79 +1760,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 +1788,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,10 +1818,10 @@ 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();
     }
@@ -2234,7 +1831,7 @@ const MenuOptionItem = props => {
 const MenuPositioner = props => {
   const api = useMenuContext();
   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;
@@ -2245,31 +1842,86 @@ const MenuPositioner = props => {
   });
 };
 
+const useMenu = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send, machine] = useMachine(menu.machine(context), {
+    context
+  });
+  return createMemo(() => ({
+    api: () => menu.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(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,
+const Menu = {
+  Root: MenuRoot,
   Arrow: MenuArrow,
   ArrowTip: MenuArrowTip,
   Content: MenuContent,
@@ -2282,96 +1934,122 @@ const Menu = Object.assign(Menu$1, {
   Separator: MenuSeparator,
   Trigger: MenuTrigger,
   TriggerItem: MenuTriggerItem
-});
+};
 
 const [NumberInputProvider, useNumberInputContext] = createContext({
   hookName: 'useNumberInputContext',
   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 useNumberInput = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(numberInput.machine(context), {
+    context
+  });
+  return createMemo(() => numberInput.connect(state, send, normalizeProps));
+};
+
+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(NumberInputProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const NumberInputScrubber = props => {
   const api = useNumberInputContext();
-  const mergedProps = mergeProps$2(() => api().scrubberProps, props);
+  const mergedProps = mergeProps$1(() => api().scrubberProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
-const NumberInput = Object.assign(NumberInput$1, {
-  Root: NumberInput$1,
+const NumberInput = {
+  Root: NumberInputRoot,
   Control: NumberInputControl,
   DecrementTrigger: NumberInputDecrementTrigger,
   Input: NumberInputInput,
   IncrementTrigger: NumberInputIncrementTrigger,
   Label: NumberInputLabel,
   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$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$1(() => api().getItemProps(itemProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PaginationNextTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PaginationPrevTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
 const usePagination = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
@@ -2381,15 +2059,15 @@ const usePagination = props => {
   return createMemo(() => pagination.connect(state, send, normalizeProps));
 };
 
-const Pagination$1 = props => {
+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$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(PaginationProvider, {
     value: api,
     get children() {
-      return createComponent(ark.nav, mergeProps$1(mergedProps, {
+      return createComponent(ark.nav, mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2398,48 +2076,41 @@ const Pagination$1 = props => {
   });
 };
 
-const PaginationEllipsis = props => {
-  const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
-  const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => 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);
-  return createComponent(ark.button, mergedProps);
-};
-
-const PaginationNextTrigger = props => {
-  const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => api().nextTriggerProps, props);
-  return createComponent(ark.button, mergedProps);
-};
-
-const PaginationPrevTrigger = props => {
-  const api = usePaginationContext();
-  const mergedProps = mergeProps$2(() => api().prevTriggerProps, props);
-  return createComponent(ark.button, mergedProps);
-};
-
-const Pagination = Object.assign(Pagination$1, {
-  Root: Pagination$1,
+const Pagination = {
+  Root: PaginationRoot,
   Ellipsis: PaginationEllipsis,
   Item: PaginationItem,
   NextTrigger: PaginationNextTrigger,
   PrevTrigger: PaginationPrevTrigger
-});
+};
 
 const [PinInputProvider, usePinInputContext] = createContext({
   hookName: 'usePinInputContext',
   providerName: '<PinInputProvider />'
 });
 
+const PinInputControl = props => {
+  const api = usePinInputContext();
+  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$1(() => api().getInputProps(inputParams), localProps);
+  return createComponent(ark.input, mergedProps);
+};
+
+const PinInputLabel = props => {
+  const api = usePinInputContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
 const usePinInput = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
@@ -2450,114 +2121,62 @@ const usePinInput = props => {
 };
 
 const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
-const PinInput$1 = props => {
+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$2(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(PinInputProvider, {
     value: api,
     get children() {
       return [createComponent(ark.div, mergedProps), (() => {
         const _el$ = _tmpl$$6();
-        spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
     }
   });
 };
 
-const PinInputControl = props => {
-  const api = usePinInputContext();
-  const mergedProps = mergeProps$2(() => 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);
-  return createComponent(ark.input, mergedProps);
-};
-
-const PinInputLabel = props => {
-  const api = usePinInputContext();
-  const mergedProps = mergeProps$2(() => api().labelProps, props);
-  return createComponent(ark.label, mergedProps);
-};
-
-const PinInput = Object.assign(PinInput$1, {
-  Root: PinInput$1,
+const PinInput = {
+  Root: PinInputRoot,
   Control: PinInputControl,
   Input: PinInputInput,
   Label: PinInputLabel
-});
+};
 
 const [PopoverProvider, usePopoverContext] = createContext({
   hookName: 'usePopoverContext',
   providerName: '<PopoverProvider />'
 });
 
-const usePopover = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
-    id: createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = useMachine(popover.machine(context), {
-    context
-  });
-  return createMemo(() => popover.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, {
-    value: api,
-    get children() {
-      return createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
-    }
-  });
-};
-
 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 +2189,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 +2213,56 @@ const PopoverPositioner = props => {
   });
 };
 
+const usePopover = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(popover.machine(context), {
+    context
+  });
+  return createMemo(() => popover.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,
+const Popover = {
+  Root: PopoverRoot,
   Anchor: PopoverAnchor,
   Arrow: PopoverArrow,
   ArrowTip: PopoverArrowTip,
@@ -2623,140 +2273,116 @@ const Popover = Object.assign(Popover$1, {
   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();
-        }
-      }));
-    }
-  });
-};
-
 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.machine(context), {
+    context
+  });
+  return createMemo(() => progress.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);
+};
+
+const Progress = {
+  Root: ProgressRoot,
   Label: ProgressLabel,
   Track: ProgressTrack,
   Range: ProgressRange,
   ValueText: ProgressValueText,
-  Indicator: ProgressIndicator,
+  View: ProgressView,
   Circle: ProgressCircle,
   CircleTrack: ProgressCircleTrack,
   CircleRange: ProgressCircleRange
-});
+};
 
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
   hookName: 'useRadioGroupContext',
   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 +2394,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 +2413,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 +2424,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 +2458,32 @@ const RatingGroup$1 = props => {
   });
 };
 
+const RadioGroup = {
+  Root: RadioGroupRoot,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel
+};
+
+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 +2496,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 +2513,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 +2541,21 @@ const SegmentGroup$1 = props => {
   });
 };
 
+const RatingGroup = {
+  Root: RatingGroupRoot,
+  Control: RatingGroupControl,
+  Label: RatingGroupLabel,
+  Item: RatingGroupItem
+};
+
+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 +2567,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 +2586,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 +2597,65 @@ 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);
     }
   });
 };
 
+const SegmentGroup = {
+  Root: SegmentGroupRoot,
+  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 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 +2670,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 +2691,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 +2703,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 +2720,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 +2736,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 +2767,65 @@ const SelectPositioner = props => {
   });
 };
 
+const useSelect = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => select.collection(collectionOptions);
+  const getRootNode = useEnvironmentContext();
+  const context = () => mergeProps$1({
+    id: createUniqueId(),
+    getRootNode,
+    collection: collection()
+  }, rest);
+  const [state, send] = useMachine(select.machine(context()), {
+    context
+  });
+  return createMemo(() => select.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,
+const Select = {
+  Root: SelectRoot,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
@@ -3189,99 +2839,99 @@ const Select = Object.assign(Select$1, {
   Positioner: SelectPositioner,
   Trigger: SelectTrigger,
   ValueText: SelectValueText
-});
+};
 
 const [SliderProvider, useSliderContext] = createContext({
   hookName: 'useSliderContext',
   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.machine(context), {
+    context
+  });
+  return createMemo(() => slider.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,
+const Slider = {
+  Root: SliderRoot,
   Control: SliderControl,
   Label: SliderLabel,
   Marker: SliderMarker,
@@ -3290,16 +2940,30 @@ const Slider = Object.assign(Slider$1, {
   Thumb: SliderThumb,
   Track: SliderTrack,
   ValueText: SliderValueText
-});
+};
 
 const [SplitterProvider, useSplitterContext] = createContext({
   hookName: 'useSplitterContext',
   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);
@@ -3309,15 +2973,15 @@ const useSplitter = props => {
   return createMemo(() => splitter.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,34 +2990,37 @@ 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,
+const Splitter = {
+  Root: SplitterRoot,
   Panel: SplitterPanel,
   ResizeTrigger: SplitterResizeTrigger
-});
+};
 
 const [SwitchProvider, useSwitchContext] = createContext({
   hookName: 'useSwitchContext',
   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 +3030,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,35 +3047,18 @@ 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,
+const Switch = {
+  Root: SwitchRoot,
   Control: SwitchControl,
   Label: SwitchLabel,
   Thumb: SwitchThumb
-});
+};
 
 const [TabsProvider, useTabsContext] = createContext({
   hookName: 'useTabsContext',
@@ -3419,10 +3069,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,26 +3090,26 @@ 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);
@@ -3469,11 +3119,11 @@ const useTabs = props => {
   return createMemo(() => tabs.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,68 +3137,34 @@ const Tabs$1 = props => {
   });
 };
 
-const Tabs = Object.assign(Tabs$1, {
-  Root: Tabs$1,
+const Tabs = {
+  Root: TabsRoot,
   Content: TabContent,
   Indicator: TabIndicator,
   List: TabList,
   Trigger: TabTrigger
-});
+};
 
 const [TagsInputProvider, useTagsInputContext] = createContext({
   hookName: 'useTagsInputContext',
   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 +3176,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,41 +3193,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.machine(context), {
+    context
+  });
+  return createMemo(() => tagsInput.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$;
+      })()];
+    }
+  });
+};
+
+const TagsInput = {
+  Root: TagsInputRoot,
   ClearTrigger: TagsInputClearTrigger,
   Control: TagsInputControl,
   Input: TagsInputInput,
   Item: TagsInputItem,
+  ItemPreview: TagsInputItemPreview,
   ItemDeleteTrigger: TagsInputItemDeleteTrigger,
   ItemInput: TagsInputItemInput,
   ItemText: TagsInputItemText,
   Label: TagsInputLabel
-});
+};
 
 const [ToastProvider, useToastContext] = createContext({
   hookName: 'useToastContext',
@@ -3637,10 +3295,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() {
@@ -3668,46 +3326,53 @@ 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,
+const Toast = {
+  Root: ToastRoot,
   CloseTrigger: ToastCloseTrigger,
   Description: ToastDescription,
   Group: ToastGroup,
   Title: ToastTitle
-});
+};
 
 const [ToggleGroupProvider, useToggleGroupContext] = createContext({
   hookName: 'useToggleGroupContext',
   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);
@@ -3717,10 +3382,10 @@ const useToggleGroup = props => {
   return createMemo(() => toggleGroup.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,26 +3394,59 @@ 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,
+const ToggleGroup = {
+  Root: ToggleGroupRoot,
   Item: ToggleGroupItem
-});
+};
 
 const [TooltipProvider, useTooltipContext] = createContext({
   hookName: 'useTooltipContext',
   providerName: '<TooltipProvider />'
 });
 
+const TooltipArrow = props => {
+  const tooltip = useTooltipContext();
+  const mergedProps = mergeProps$1(() => tooltip().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TooltipArrowTip = props => {
+  const api = useTooltipContext();
+  const mergedProps = mergeProps$1(() => api().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TooltipContent = props => {
+  const api = useTooltipContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const TooltipPositioner = props => {
+  const api = useTooltipContext();
+  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 useTooltip = props => {
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = mergeProps$1({
     id: createUniqueId(),
     getRootNode
   }, props);
@@ -3758,11 +3456,11 @@ const useTooltip = props => {
   return createMemo(() => tooltip.connect(state, send, normalizeProps));
 };
 
-const Tooltip$1 = props => {
+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$2(presenceProps, () => ({
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().isOpen
   })));
   const getChildren = () => runIfFn(localProps.children, api);
@@ -3779,60 +3477,148 @@ const Tooltip$1 = props => {
   });
 };
 
-const TooltipArrow = props => {
-  const tooltip = useTooltipContext();
-  const mergedProps = mergeProps$2(() => tooltip().arrowProps, props);
+const TooltipTrigger = props => {
+  const api = useTooltipContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const Tooltip = {
+  Root: TooltipRoot,
+  Arrow: TooltipArrow,
+  ArrowTip: TooltipArrowTip,
+  Content: TooltipContent,
+  Positioner: TooltipPositioner,
+  Trigger: TooltipTrigger
+};
+
+// 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 TooltipArrowTip = props => {
-  const api = useTooltipContext();
-  const mergedProps = mergeProps$2(() => api().arrowTipProps, props);
+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 TooltipContent = props => {
-  const api = useTooltipContext();
-  const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().contentProps, () => presenceApi().presenceProps, props);
-  return createComponent(Show, {
-    get when() {
-      return !presenceApi().isUnmounted;
-    },
+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 createComponent(ark.div, mergedProps);
+      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.machine(context), {
+    context
   });
+  return createMemo(() => treeView.connect(state, send, normalizeProps));
 };
 
-const TooltipPositioner = props => {
-  const api = useTooltipContext();
-  const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$2(() => api().positionerProps, props);
-  return createComponent(Show, {
-    get when() {
-      return !presenceApi().isUnmounted;
-    },
+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, mergedProps);
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
 
-const TooltipTrigger = props => {
-  const api = useTooltipContext();
-  const mergedProps = mergeProps$2(() => api().triggerProps, props);
-  return createComponent(ark.button, mergedProps);
+const TreeViewTree = props => {
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().treeProps, props);
+  return createComponent(ark.ul, mergedProps);
 };
 
-const Tooltip = Object.assign(Tooltip$1, {
-  Root: Tooltip$1,
-  Arrow: TooltipArrow,
-  ArrowTip: TooltipArrowTip,
-  Content: TooltipContent,
-  Positioner: TooltipPositioner,
-  Trigger: TooltipTrigger
-});
+const TreeView = {
+  Root: TreeViewRoot,
+  Label: TreeViewLabel,
+  Tree: TreeViewTree,
+  Branch: TreeViewBranch,
+  Item: TreeViewItem,
+  ItemText: TreeViewItemText,
+  BranchContent: TreeViewBranchContent,
+  BranchControl: TreeViewBranchControl,
+  BranchTrigger: TreeViewBranchTrigger,
+  BranchIndicator: TreeViewBranchIndicator,
+  BranchText: TreeViewBranchText
+};
 
-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 };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Avatar, AvatarFallback, AvatarImage, AvatarRoot, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, 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, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, 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, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TabsRoot, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, ToggleGroup, ToggleGroupItem, ToggleGroupRoot, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, 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