@ark-ui/solid 1.2.0 → 2.0.0

package/cjs/index.js

@@ -6,8 +6,8 @@ var solidJs = require('solid-js');
 var presence = require('@zag-js/presence');
 var accordion = require('@zag-js/accordion');
 var avatar = require('@zag-js/avatar');
-var carousel = require('@zag-js/carousel');
 var anatomy = require('@ark-ui/anatomy');
+var carousel = require('@zag-js/carousel');
 var checkbox = require('@zag-js/checkbox');
 var colorPicker = require('@zag-js/color-picker');
 var combobox = require('@zag-js/combobox');
@@ -21,6 +21,7 @@ var numberInput = require('@zag-js/number-input');
 var pagination = require('@zag-js/pagination');
 var pinInput = require('@zag-js/pin-input');
 var popover = require('@zag-js/popover');
+var progress = require('@zag-js/progress');
 var radio = require('@zag-js/radio-group');
 var rating = require('@zag-js/rating-group');
 var select = require('@zag-js/select');
@@ -31,6 +32,7 @@ var tabs = require('@zag-js/tabs');
 var tagsInput = require('@zag-js/tags-input');
 var toggleGroup = require('@zag-js/toggle-group');
 var tooltip = require('@zag-js/tooltip');
+var treeView = require('@zag-js/tree-view');
 var toast = require('@zag-js/toast');
 
 function _interopNamespaceDefault(e) {
@@ -67,6 +69,7 @@ var numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
 var pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
 var pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 var popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
+var progress__namespace = /*#__PURE__*/_interopNamespaceDefault(progress);
 var radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
@@ -77,365 +80,61 @@ var tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs);
 var tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput);
 var toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup);
 var tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip);
+var treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView);
 var toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
 
-const createSplitProps = () => (props, keys) => solidJs.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 childProps = solidJs.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.className, value].filter(Boolean).join(' ');
-    }
-
-    // don't override existing child attributes
-    if (node.hasAttribute(key)) return;
-    return value;
-  }));
-  web.spread(node, solidJs.mergeProps(childProps));
-};
-
-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 = solidJs.createContext(undefined);
+  function useContext() {
+    const context = solidJs.useContext(Context);
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+      error.name = 'ContextError';
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+    return context;
   }
+  return [Context.Provider, useContext, 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) => solidJs.splitProps(props, keys);
 
-function withAsChild(Component) {
-  return function jsx(props) {
-    const [localProps, restProps] = solidJs.splitProps(props, ['asChild', 'children']);
-    if (!localProps.asChild) {
-      return web.createComponent(web.Dynamic, web.mergeProps({
-        component: Component
-      }, restProps, {
-        get children() {
-          return localProps.children;
-        }
-      }));
-    }
-    const getChildren = solidJs.children(() => ssrSpread(localProps.children, restProps));
-    solidJs.createEffect(() => {
-      const children = getChildren();
-      if (children instanceof HTMLElement) {
-        spread(children, restProps);
+const withAsProp = Component => {
+  const ArkComponent = props => {
+    const [localProps, otherProps] = solidJs.splitProps(props, ['as']);
+    return web.createComponent(web.Dynamic, web.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);
     }
@@ -469,7 +168,7 @@ const usePresence = props => {
   }));
 };
 
-const Presence$1 = props => {
+const Presence = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePresence(presenceProps);
   const mergedProps = solid.mergeProps(() => api().presenceProps, localProps);
@@ -486,30 +185,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 = solidJs.createContext(undefined);
-  function useContext() {
-    const context = solidJs.useContext(Context);
-    if (!context && strict) {
-      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
-      error.name = 'ContextError';
-      Error.captureStackTrace?.(error, useContext);
-      throw error;
-    }
-    return context;
-  }
-  return [Context.Provider, useContext, Context];
-}
-
 const [PresenceProvider, usePresenceContext] = createContext({
   hookName: 'usePresenceContext',
   providerName: '<PresenceProvider />'
@@ -520,75 +195,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__*/web.template(`<span hidden>`);
-const Environment$1 = props => {
-  // eslint-disable-next-line prefer-const
-  let spanRef = undefined;
-  const currentEnv = solidJs.createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
-  return web.createComponent(EnvironmentProvider, {
-    get value() {
-      return currentEnv();
-    },
-    get children() {
-      return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$c();
-        const _ref$ = spanRef;
-        typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
-        return _el$;
-      })())];
-    }
-  });
-};
-
-const Environment = Object.assign(Environment$1, {
-  Root: Environment$1
-});
-
-const useAccordion = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(accordion__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => accordion__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, localProps);
-  return web.createComponent(AccordionProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(PresencePropsProvider, {
-        value: presenceProps,
-        get children() {
-          return web.createComponent(ark.div, mergedProps);
-        }
-      });
-    }
-  });
-};
-
 const isFunction = value => typeof value === 'function';
 const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
@@ -652,48 +258,78 @@ const AccordionItemTrigger = props => {
   const mergedProps = solid.mergeProps(() => 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 web.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__*/web.template(`<span hidden>`);
+const Environment = props => {
+  // eslint-disable-next-line prefer-const
+  let spanRef = undefined;
+  const currentEnv = solidJs.createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+  return web.createComponent(EnvironmentProvider, {
+    get value() {
+      return currentEnv();
+    },
+    get children() {
+      return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
+        const _el$ = _tmpl$$c();
+        const _ref$ = spanRef;
+        typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
+        return _el$;
+      })())];
+    }
+  });
+};
 
-const useAvatar = props => {
+const useAccordion = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
+  const [state, send] = solid.useMachine(accordion__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => avatar__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => accordion__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const Avatar$1 = props => {
-  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
-  const api = useAvatar(params);
+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 = solid.mergeProps(() => api().rootProps, localProps);
-  return web.createComponent(AvatarProvider, {
+  return web.createComponent(AccordionProvider, {
     value: api,
     get children() {
-      return web.createComponent(ark.div, mergedProps);
+      return web.createComponent(PresencePropsProvider, {
+        value: presenceProps,
+        get children() {
+          return web.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 = solid.mergeProps(() => avatar().fallbackProps, props);
@@ -706,46 +342,41 @@ const AvatarImage = props => {
   return web.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 = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
+  const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => carousel__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => avatar__namespace.connect(state, send, solid.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 AvatarRoot = props => {
+  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  const api = useAvatar(params);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(CarouselProvider, {
+  return web.createComponent(AvatarProvider, {
     value: api,
     get children() {
-      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
+      return web.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 = solid.mergeProps(() => anatomy.carouselAnatomy.build().control.attrs, props);
   return web.createComponent(ark.div, mergedProps);
@@ -754,26 +385,14 @@ const CarouselControl = props => {
 const CarouselIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['index', 'readOnly']);
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().getIndicatorProps(indicatorProps), localProps);
-  return web.createComponent(ark.button, mergedProps);
-};
-
-const CarouselIndicatorGroup = props => {
-  const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorGroupProps, props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const CarouselNextTrigger = props => {
-  const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().nextTriggerProps, props);
+  const mergedProps = solid.mergeProps(() => api().getIndicatorProps(indicatorProps), localProps);
   return web.createComponent(ark.button, mergedProps);
 };
 
-const CarouselPrevTrigger = props => {
+const CarouselIndicatorGroup = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().prevTriggerProps, props);
-  return web.createComponent(ark.button, mergedProps);
+  const mergedProps = solid.mergeProps(() => api().indicatorGroupProps, props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const CarouselItem = props => {
@@ -789,50 +408,39 @@ const CarouselItemGroup = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const CarouselViewport = props => {
+const CarouselNextTrigger = props => {
   const api = useCarouselContext();
-  const mergedProps = solid.mergeProps(() => api().viewportProps, props);
-  return web.createComponent(ark.div, mergedProps);
+  const mergedProps = solid.mergeProps(() => api().nextTriggerProps, props);
+  return web.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 = solid.mergeProps(() => api().prevTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
 
-const useCheckbox = props => {
+const useCarousel = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
+  const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => checkbox__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => carousel__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, labelprops);
-  const getChildren = () => runIfFn(props.children, api);
-  return web.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 = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(CarouselProvider, {
     value: api,
     get children() {
-      return web.createComponent(ark.label, web.mergeProps(mergedProps, {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -841,6 +449,29 @@ const Checkbox$1 = props => {
   });
 };
 
+const CarouselViewport = props => {
+  const api = useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().viewportProps, props);
+  return web.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__*/web.template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
@@ -864,68 +495,52 @@ const CheckboxLabel = props => {
   return web.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] = solidJs.splitProps(props, ['value']);
+const useCheckbox = props => {
   const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps(() => ({
+  const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    value: local.value ? colorPicker__namespace.parse(local.value) : undefined
-  }), rest);
-  const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => checkbox__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$a = /*#__PURE__*/web.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(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.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 = solid.mergeProps(() => api().rootProps, labelprops);
+  const getChildren = () => runIfFn(props.children, api);
+  return web.createComponent(CheckboxProvider, {
     value: api,
     get children() {
-      return [web.createComponent(PresenceProvider, {
-        value: apiPresence,
+      return web.createComponent(ark.label, web.mergeProps(mergedProps, {
         get children() {
-          return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-            get children() {
-              return getChildren();
-            }
-          }));
+          return getChildren();
         }
-      }), (() => {
-        const _el$ = _tmpl$$a();
-        web.spread(_el$, web.mergeProps(() => 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();
@@ -1062,6 +677,51 @@ const ColorPickerPositioner = props => {
   });
 };
 
+const useColorPicker = props => {
+  const [local, rest] = solidJs.splitProps(props, ['value']);
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps(() => ({
+    id: solidJs.createUniqueId(),
+    getRootNode,
+    value: local.value ? colorPicker__namespace.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const _tmpl$$a = /*#__PURE__*/web.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(solid.mergeProps(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return [web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      }), (() => {
+        const _el$ = _tmpl$$a();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
 const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
@@ -1141,8 +801,8 @@ const ColorPickerView = props => {
   });
 };
 
-const ColorPicker = Object.assign(ColorPicker$1, {
-  Root: ColorPicker$1,
+const ColorPicker = {
+  Root: ColorPickerRoot,
   Area: ColorPickerArea,
   AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
@@ -1165,7 +825,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({
@@ -1173,47 +833,6 @@ const [ComboboxProvider, useComboboxContext] = createContext({
   providerName: '<ComboboxProvider />'
 });
 
-const useCombobox = props => {
-  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = combobox__namespace.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode,
-    collection
-  }, rest);
-  const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(ComboboxProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-            get children() {
-              return getChildren();
-            }
-          }));
-        }
-      });
-    }
-  });
-};
-
 const ComboboxClearTrigger = props => {
   const combobox = useComboboxContext();
   const mergedProps = solid.mergeProps(() => combobox().clearTriggerProps, props);
@@ -1300,76 +919,49 @@ const ComboboxItemText = props => {
 
 const ComboboxLabel = props => {
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().labelProps, props);
-  return web.createComponent(ark.label, mergedProps);
-};
-
-const ComboboxPositioner = props => {
-  const api = useComboboxContext();
-  const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
-  return web.createComponent(solidJs.Show, {
-    get when() {
-      return !presenceApi().isUnmounted;
-    },
-    get children() {
-      return web.createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
-const ComboboxTrigger = props => {
-  const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().triggerProps, props);
-  return web.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 mergedProps = solid.mergeProps(() => combobox().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
 
-const [DatePickerProvider, useDatePickerContext] = createContext({
-  hookName: 'useDatePickerContext',
-  providerName: '<DatePickerProvider />'
-});
+const ComboboxPositioner = props => {
+  const api = useComboboxContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
 
-const useDatePicker = props => {
-  const [local, rest] = solidJs.splitProps(props, ['value', 'focusedValue']);
+const useCombobox = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => combobox__namespace.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps(() => ({
+  const context = () => solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode,
-    focusedValue: local.focusedValue ? datePicker__namespace.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker__namespace.parse(local.value) : undefined
-  }), rest);
-  const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
+    collection: collection()
+  }, rest);
+  const [state, send] = solid.useMachine(combobox__namespace.machine(context()), {
     context
   });
-  return solidJs.createMemo(() => datePicker__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.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 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(solid.mergeProps(presenceProps, () => ({
     present: api().isOpen
   })));
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(DatePickerProvider, {
+  return web.createComponent(ComboboxProvider, {
     value: api,
     get children() {
       return web.createComponent(PresenceProvider, {
@@ -1386,6 +978,33 @@ const DatePicker$1 = props => {
   });
 };
 
+const ComboboxTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().triggerProps, props);
+  return web.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 = solid.mergeProps(() => api().clearTriggerProps, props);
@@ -1483,6 +1102,47 @@ const DatePickerRangeText = props => {
   }));
 };
 
+const useDatePicker = props => {
+  const [local, rest] = solidJs.splitProps(props, ['value', 'focusedValue']);
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps(() => ({
+    id: solidJs.createUniqueId(),
+    getRootNode,
+    focusedValue: local.focusedValue ? datePicker__namespace.parse(local.focusedValue) : undefined,
+    value: local.value ? datePicker__namespace.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => datePicker__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(DatePickerProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
+    }
+  });
+};
+
 const [DatePickerTableProvider, useDatePickerTableContext] = createContext({
   hookName: 'useDatePickerTableContext',
   providerName: '<DatePickerTableProvider />'
@@ -1640,8 +1300,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,
@@ -1664,51 +1324,13 @@ 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 = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => dialog__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(DialogProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(PresencePropsProvider, {
-        value: presenceProps,
-        get children() {
-          return web.createComponent(PresenceProvider, {
-            value: apiPresence,
-            get children() {
-              return getChildren();
-            }
-          });
-        }
-      });
-    }
-  });
-};
-
 const DialogBackdrop = props => {
   const api = useDialogContext();
   const presenceProps = usePresencePropsContext();
@@ -1766,6 +1388,44 @@ const DialogPositioner = props => {
   });
 };
 
+const useDialog = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => dialog__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const DialogRoot = props => {
+  const [presenceProps, dialogProps] = splitPresenceProps(props);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const api = useDialog(useDialogProps);
+  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(DialogProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(PresencePropsProvider, {
+        value: presenceProps,
+        get children() {
+          return web.createComponent(PresenceProvider, {
+            value: apiPresence,
+            get children() {
+              return getChildren();
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const DialogTitle = props => {
   const dialog = useDialogContext();
   const mergedProps = solid.mergeProps(() => dialog().titleProps, props);
@@ -1778,56 +1438,25 @@ const DialogTrigger = props => {
   const mergedProps = solid.mergeProps(() => 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 web.createComponent(ark.button, mergedProps);
 };
 
-const Dialog = Object.assign(Dialog$1, {
-  Root: Dialog$1,
+const Dialog = {
+  Root: DialogRoot,
   Backdrop: DialogBackdrop,
   CloseTrigger: DialogCloseTrigger,
-  Positioner: DialogPositioner,
   Content: DialogContent,
   Description: DialogDescription,
+  Positioner: DialogPositioner,
   Title: DialogTitle,
   Trigger: DialogTrigger
-});
+};
 
 const [EditableProvider, useEditableContext] = createContext({
   hookName: 'useEditableContext',
   providerName: '<EditableProvider />'
 });
 
-const useEditable = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(editable__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => editable__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(EditableProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
-
 const EditableArea = props => {
   const api = useEditableContext();
   const mergedProps = solid.mergeProps(() => api().areaProps, props);
@@ -1870,47 +1499,24 @@ const EditablePreview = props => {
   return web.createComponent(ark.span, mergedProps);
 };
 
-const EditableSubmitTrigger = props => {
-  const api = useEditableContext();
-  const mergedProps = solid.mergeProps(() => api().submitTriggerProps, props);
-  return web.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 = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
+  const [state, send] = solid.useMachine(editable__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => fileUpload__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => editable__namespace.connect(state, send, solid.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 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 = solid.mergeProps(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(FileUploadProvider, {
+  return web.createComponent(EditableProvider, {
     value: api,
     get children() {
       return web.createComponent(ark.div, web.mergeProps(mergedProps, {
@@ -1922,6 +1528,29 @@ const FileUpload$1 = props => {
   });
 };
 
+const EditableSubmitTrigger = props => {
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().submitTriggerProps, props);
+  return web.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__*/web.template(`<input>`);
 const FileUploadDropzone = props => {
   const api = useFileUploadContext();
@@ -2023,14 +1652,43 @@ const FileUploadLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
+const useFileUpload = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => fileUpload__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(FileUploadProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const FileUploadTrigger = props => {
   const api = useFileUploadContext();
   const mergedProps = solid.mergeProps(() => api().triggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
-const FileUpload = Object.assign(FileUpload$1, {
-  Root: FileUpload$1,
+const FileUpload = {
+  Root: FileUploadRoot,
   Dropzone: FileUploadDropzone,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
@@ -2041,46 +1699,13 @@ 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 = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => hoverCard__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(HoverCardProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
-    }
-  });
-};
-
 const HoverCardArrow = props => {
   const hoverCard = useHoverCardContext();
   const mergedProps = solid.mergeProps(() => hoverCard().arrowProps, props);
@@ -2121,20 +1746,53 @@ const HoverCardPositioner = props => {
   });
 };
 
+const useHoverCard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => hoverCard__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(HoverCardProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
+};
+
 const HoverCardTrigger = props => {
   const hoverCard = useHoverCardContext();
   const mergedProps = solid.mergeProps(() => hoverCard().triggerProps, props);
   return web.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',
@@ -2152,63 +1810,6 @@ const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
   strict: false
 });
 
-const useMenu = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => ({
-    api: () => menu__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
-    present: menu().api().isOpen
-  })));
-  solidJs.createEffect(() => {
-    if (!parentMachine) return;
-    parentMenu?.().setChild(menu().machine);
-    menu().api().setParent(parentMachine());
-  });
-  const triggerItemContext = solidJs.createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
-  const machineContext = () => menu().machine;
-  const getChildren = () => runIfFn(localProps.children, menu().api);
-  return web.createComponent(MenuTriggerItemProvider, {
-    value: triggerItemContext,
-    get children() {
-      return web.createComponent(MenuMachineProvider, {
-        value: machineContext,
-        get children() {
-          return web.createComponent(MenuProvider, {
-            get value() {
-              return menu().api;
-            },
-            get children() {
-              return web.createComponent(PresenceProvider, {
-                value: apiPresence,
-                get children() {
-                  return getChildren();
-                }
-              });
-            }
-          });
-        }
-      });
-    }
-  });
-};
-
 const MenuArrow = props => {
   const menu = useMenuContext();
   const mergedProps = solid.mergeProps(() => menu?.().arrowProps, props);
@@ -2291,6 +1892,63 @@ const MenuPositioner = props => {
   });
 };
 
+const useMenu = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => ({
+    api: () => menu__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
+    present: menu().api().isOpen
+  })));
+  solidJs.createEffect(() => {
+    if (!parentMachine) return;
+    parentMenu?.().setChild(menu().machine);
+    menu().api().setParent(parentMachine());
+  });
+  const triggerItemContext = solidJs.createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+  const machineContext = () => menu().machine;
+  const getChildren = () => runIfFn(localProps.children, menu().api);
+  return web.createComponent(MenuTriggerItemProvider, {
+    value: triggerItemContext,
+    get children() {
+      return web.createComponent(MenuMachineProvider, {
+        value: machineContext,
+        get children() {
+          return web.createComponent(MenuProvider, {
+            get value() {
+              return menu().api;
+            },
+            get children() {
+              return web.createComponent(PresenceProvider, {
+                value: apiPresence,
+                get children() {
+                  return getChildren();
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
 const MenuSeparator = props => {
   const menu = useMenuContext();
   const mergedProps = solid.mergeProps(() => menu?.().separatorProps, props);
@@ -2303,8 +1961,6 @@ const MenuTrigger = props => {
   const mergedProps = solid.mergeProps(() => 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 web.createComponent(ark.button, mergedProps);
 };
 
@@ -2314,8 +1970,8 @@ const MenuTriggerItem = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const Menu = Object.assign(Menu$1, {
-  Root: Menu$1,
+const Menu = {
+  Root: MenuRoot,
   Arrow: MenuArrow,
   ArrowTip: MenuArrowTip,
   Content: MenuContent,
@@ -2326,44 +1982,15 @@ const Menu = Object.assign(Menu$1, {
   OptionItem: MenuOptionItem,
   Positioner: MenuPositioner,
   Separator: MenuSeparator,
-  Trigger: MenuTrigger,
-  TriggerItem: MenuTriggerItem
-});
-
-const [NumberInputProvider, useNumberInputContext] = createContext({
-  hookName: 'useNumberInputContext',
-  providerName: '<NumberInputProvider />'
-});
-
-const useNumberInput = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(numberInput__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => numberInput__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(NumberInputProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
+  Trigger: MenuTrigger,
+  TriggerItem: MenuTriggerItem
 };
 
+const [NumberInputProvider, useNumberInputContext] = createContext({
+  hookName: 'useNumberInputContext',
+  providerName: '<NumberInputProvider />'
+});
+
 const NumberInputControl = props => {
   const api = useNumberInputContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
@@ -2394,48 +2021,27 @@ const NumberInputLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const NumberInputScrubber = props => {
-  const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().scrubberProps, props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const NumberInput = Object.assign(NumberInput$1, {
-  Root: NumberInput$1,
-  Control: NumberInputControl,
-  DecrementTrigger: NumberInputDecrementTrigger,
-  Input: NumberInputInput,
-  IncrementTrigger: NumberInputIncrementTrigger,
-  Label: NumberInputLabel,
-  Scrubber: NumberInputScrubber
-});
-
-const [PaginationProvider, usePaginationContext] = createContext({
-  hookName: 'usePaginationContext',
-  providerName: '<PaginationProvider />'
-});
-
-const usePagination = props => {
+const useNumberInput = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
+  const [state, send] = solid.useMachine(numberInput__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => pagination__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => numberInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const Pagination$1 = props => {
-  const [paginationParams, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
-  const api = usePagination(paginationParams);
+const 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 = solid.mergeProps(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(PaginationProvider, {
+  return web.createComponent(NumberInputProvider, {
     value: api,
     get children() {
-      return web.createComponent(ark.nav, web.mergeProps(mergedProps, {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
@@ -2444,6 +2050,27 @@ const Pagination$1 = props => {
   });
 };
 
+const NumberInputScrubber = props => {
+  const api = useNumberInputContext();
+  const mergedProps = solid.mergeProps(() => api().scrubberProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+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();
@@ -2470,48 +2097,48 @@ const PaginationPrevTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Pagination = Object.assign(Pagination$1, {
-  Root: Pagination$1,
-  Ellipsis: PaginationEllipsis,
-  Item: PaginationItem,
-  NextTrigger: PaginationNextTrigger,
-  PrevTrigger: PaginationPrevTrigger
-});
-
-const [PinInputProvider, usePinInputContext] = createContext({
-  hookName: 'usePinInputContext',
-  providerName: '<PinInputProvider />'
-});
-
-const usePinInput = props => {
+const usePagination = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
+  const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => pagination__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
-const PinInput$1 = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
-  const api = usePinInput(usePinInputProps);
+const PaginationRoot = props => {
+  const [paginationParams, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const api = usePagination(paginationParams);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  return web.createComponent(PinInputProvider, {
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(PaginationProvider, {
     value: api,
     get children() {
-      return [web.createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$6();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return web.createComponent(ark.nav, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
 
+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 = solid.mergeProps(() => api().controlProps, props);
@@ -2531,51 +2158,47 @@ const PinInputLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const PinInput = Object.assign(PinInput$1, {
-  Root: PinInput$1,
-  Control: PinInputControl,
-  Input: PinInputInput,
-  Label: PinInputLabel
-});
-
-const [PopoverProvider, usePopoverContext] = createContext({
-  hookName: 'usePopoverContext',
-  providerName: '<PopoverProvider />'
-});
-
-const usePopover = props => {
+const usePinInput = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(popover__namespace.machine(context), {
+  const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => popover__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(PopoverProvider, {
+const _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
+const PinInputRoot = props => {
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const api = usePinInput(usePinInputProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(PinInputProvider, {
     value: api,
     get children() {
-      return web.createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
+      return [web.createComponent(ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$$6();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };
 
+const PinInput = {
+  Root: PinInputRoot,
+  Control: PinInputControl,
+  Input: PinInputInput,
+  Label: PinInputLabel
+};
+
+const [PopoverProvider, usePopoverContext] = createContext({
+  hookName: 'usePopoverContext',
+  providerName: '<PopoverProvider />'
+});
+
 const PopoverAnchor = props => {
   const api = usePopoverContext();
   const mergedProps = solid.mergeProps(() => api().anchorProps, props);
@@ -2617,7 +2240,7 @@ const PopoverContent = props => {
 const PopoverDescription = props => {
   const api = usePopoverContext();
   const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
-  return web.createComponent(ark.div, mergedProps);
+  return web.createComponent(ark.p, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2640,6 +2263,39 @@ const PopoverPositioner = props => {
   });
 };
 
+const usePopover = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(popover__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => popover__namespace.connect(state, send, solid.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(solid.mergeProps(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(PopoverProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
+};
+
 const PopoverTitle = props => {
   const api = usePopoverContext();
   const mergedProps = solid.mergeProps(() => api().titleProps, props);
@@ -2652,13 +2308,11 @@ const PopoverTrigger = props => {
   const mergedProps = solid.mergeProps(() => 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 web.createComponent(ark.button, mergedProps);
 };
 
-const Popover = Object.assign(Popover$1, {
-  Root: Popover$1,
+const Popover = {
+  Root: PopoverRoot,
   Anchor: PopoverAnchor,
   Arrow: PopoverArrow,
   ArrowTip: PopoverArrowTip,
@@ -2669,37 +2323,113 @@ const Popover = Object.assign(Popover$1, {
   Positioner: PopoverPositioner,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
-});
+};
 
-const [RadioGroupProvider, useRadioGroupContext] = createContext({
-  hookName: 'useRadioGroupContext',
-  providerName: '<RadioGroupProvider />'
+const [ProgressProvider, useProgressContext] = createContext({
+  hookName: 'useProgressContext',
+  providerName: '<ProgressProvider />'
 });
 
-const useRadioGroup = props => {
+const ProgressCircle = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().circleProps, props);
+  return web.createComponent(ark.svg, mergedProps);
+};
+
+const ProgressCircleRange = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().circleRangeProps, props);
+  return web.createComponent(ark.circle, mergedProps);
+};
+
+const ProgressCircleTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().circleTrackProps, props);
+  return web.createComponent(ark.circle, mergedProps);
+};
+
+const ProgressLabel = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const ProgressRange = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().rangeProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const useProgress = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
+  const [state, send] = solid.useMachine(progress__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => radio__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => progress__namespace.connect(state, send, solid.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 ProgressRoot = props => {
+  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
+  const api = useProgress(progressProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  return web.createComponent(RadioGroupProvider, {
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(ProgressProvider, {
     value: api,
     get children() {
-      return web.createComponent(ark.div, mergedProps);
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
 
+const ProgressTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().trackProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ProgressValueText = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().valueTextProps, props);
+  const getChildren = () => runIfFn(props.children, () => api().valueAsString);
+  return web.createComponent(ark.span, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren() || api().valueAsString;
+    }
+  }));
+};
+
+const ProgressView = props => {
+  const [state, localProps] = createSplitProps()(props, ['state']);
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().getViewProps(state), localProps);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const Progress = {
+  Root: ProgressRoot,
+  Label: ProgressLabel,
+  Track: ProgressTrack,
+  Range: ProgressRange,
+  ValueText: ProgressValueText,
+  View: ProgressView,
+  Circle: ProgressCircle,
+  CircleTrack: ProgressCircleTrack,
+  CircleRange: ProgressCircleRange
+};
+
+const [RadioGroupProvider, useRadioGroupContext] = createContext({
+  hookName: 'useRadioGroupContext',
+  providerName: '<RadioGroupProvider />'
+});
+
 const RadioGroupIndicator = props => {
   const api = useRadioGroupContext();
   const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
@@ -2752,39 +2482,25 @@ const RadioGroupLabel = props => {
   const api = useRadioGroupContext();
   const mergedProps = solid.mergeProps(() => api().labelProps, props);
   return web.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 = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(rating__namespace.machine(context), {
+  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => rating__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => radio__namespace.connect(state, send, solid.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 RadioGroupRoot = props => {
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useRadioGroup(useRadioGroupProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  return web.createComponent(RatingGroupProvider, {
+  return web.createComponent(RadioGroupProvider, {
     value: api,
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -2792,6 +2508,20 @@ 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__*/web.template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
@@ -2837,35 +2567,23 @@ const RatingGroupLabel = props => {
   return web.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 = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);
-  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
+  const [state, send] = solid.useMachine(rating__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => radio__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => rating__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
-  return web.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 = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(RatingGroupProvider, {
     value: api,
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -2873,6 +2591,18 @@ 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 = solid.mergeProps(() => api().indicatorProps, anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
@@ -2927,62 +2657,45 @@ const SegmentGroupLabel = props => {
   return web.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__namespace.collection(collectionOptions);
+const useSegmentGroup = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    collection
-  }, rest);
-  const [state, send] = solid.useMachine(select__namespace.machine(context), {
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
     context
   });
-  return solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => radio__namespace.connect(state, send, solid.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(solid.mergeProps(() => ({
-    present: api().isOpen
-  }), presenceProps));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.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 = solid.mergeProps(() => api().rootProps, anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  return web.createComponent(SegmentGroupProvider, {
     value: api,
     get children() {
-      return web.createComponent(PresenceProvider, {
-        value: presenceApi,
-        get children() {
-          return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-            get children() {
-              return getChildren();
-            }
-          }));
-        }
-      });
+      return web.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 = solid.mergeProps(() => api().clearTriggerProps, props);
@@ -3104,6 +2817,47 @@ const SelectPositioner = props => {
   });
 };
 
+const useSelect = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => select__namespace.collection(collectionOptions);
+  const getRootNode = useEnvironmentContext();
+  const context = () => solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode,
+    collection: collection()
+  }, rest);
+  const [state, send] = solid.useMachine(select__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => select__namespace.connect(state, send, solid.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(solid.mergeProps(() => ({
+    present: api().isOpen
+  }), presenceProps));
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(SelectProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: presenceApi,
+        get children() {
+          return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
+    }
+  });
+};
+
 const SelectTrigger = props => {
   const api = useSelectContext();
   const mergedProps = solid.mergeProps(() => api().triggerProps, props);
@@ -3120,8 +2874,8 @@ const SelectValueText = props => {
   }));
 };
 
-const Select = Object.assign(Select$1, {
-  Root: Select$1,
+const Select = {
+  Root: SelectRoot,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
@@ -3135,42 +2889,13 @@ 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 = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(slider__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => slider__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, restProps);
-  const getChildren = () => runIfFn(restProps.children, api);
-  return web.createComponent(SliderProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      }));
-    }
-  });
-};
-
 const SliderControl = props => {
   const api = useSliderContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
@@ -3202,6 +2927,35 @@ const SliderRange = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const useSlider = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(slider__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => slider__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return web.createComponent(SliderProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
 const SliderThumb = props => {
   const [thumbProps, localProps] = createSplitProps()(props, ['index']);
   const api = useSliderContext();
@@ -3226,8 +2980,8 @@ const SliderValueText = props => {
   }));
 };
 
-const Slider = Object.assign(Slider$1, {
-  Root: Slider$1,
+const Slider = {
+  Root: SliderRoot,
   Control: SliderControl,
   Label: SliderLabel,
   Marker: SliderMarker,
@@ -3236,13 +2990,27 @@ 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 = solid.mergeProps(() => api().getPanelProps(panelParams), restProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SplitterResizeTrigger = props => {
+  const api = useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
+  const mergedProps = solid.mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
 const useSplitter = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
@@ -3255,7 +3023,7 @@ const useSplitter = props => {
   return solidJs.createMemo(() => splitter__namespace.connect(state, send, solid.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);
@@ -3272,31 +3040,34 @@ const Splitter$1 = props => {
   });
 };
 
-const SplitterPanel = props => {
-  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
-  const api = useSplitterContext();
-  const mergedProps = solid.mergeProps(() => api().getPanelProps(panelParams), restProps);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const SplitterResizeTrigger = props => {
-  const api = useSplitterContext();
-  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
-  const mergedProps = solid.mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
-  return web.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__*/web.template(`<input>`);
+const SwitchControl = props => {
+  const api = useSwitchContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return [web.createComponent(ark.span, mergedProps), (() => {
+    const _el$ = _tmpl$$1();
+    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const SwitchLabel = props => {
+  const api = useSwitchContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
 const useSwitch = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
@@ -3309,7 +3080,7 @@ const useSwitch = props => {
   return solidJs.createMemo(() => zagSwitch__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, localProps);
@@ -3326,35 +3097,18 @@ const Switch$1 = props => {
   });
 };
 
-const _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
-const SwitchControl = props => {
-  const api = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.span, mergedProps), (() => {
-    const _el$ = _tmpl$$1();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
-};
-
-const SwitchLabel = props => {
-  const api = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
-  return web.createComponent(ark.span, mergedProps);
-};
-
 const SwitchThumb = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().thumbProps, props);
   return web.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',
@@ -3415,7 +3169,7 @@ const useTabs = props => {
   return solidJs.createMemo(() => tabs__namespace.connect(state, send, solid.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);
@@ -3433,53 +3187,19 @@ 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 = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(tagsInput__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
-};
-
-const _tmpl$ = /*#__PURE__*/web.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 = solid.mergeProps(() => api().rootProps, restProps);
-  const getChildren = () => runIfFn(restProps.children, api);
-  return web.createComponent(TagsInputProvider, {
-    value: api,
-    get children() {
-      return [web.createComponent(ark.div, web.mergeProps(mergedProps, {
-        get children() {
-          return getChildren();
-        }
-      })), (() => {
-        const _el$ = _tmpl$();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
-    }
-  });
-};
-
 const TagsInputClearTrigger = props => {
   const api = useTagsInputContext();
   const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
@@ -3534,6 +3254,13 @@ const TagsInputItemInput = props => {
   return web.createComponent(ark.input, mergedProps);
 };
 
+const TagsInputItemPreview = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemPreviewProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
 const TagsInputItemText = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemContext();
@@ -3547,17 +3274,52 @@ const TagsInputLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const TagsInput = Object.assign(TagsInput$1, {
-  Root: TagsInput$1,
+const useTagsInput = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(tagsInput__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const _tmpl$ = /*#__PURE__*/web.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 = solid.mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return web.createComponent(TagsInputProvider, {
+    value: api,
+    get children() {
+      return [web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$();
+        web.spread(_el$, web.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',
@@ -3614,12 +3376,6 @@ const ToastProviderFactory = props => {
   });
 };
 
-const Toast$1 = props => {
-  const api = useToastContext();
-  const mergedProps = solid.mergeProps(() => api().rootProps, props);
-  return web.createComponent(ark.li, mergedProps);
-};
-
 const ToastCloseTrigger = props => {
   const api = useToastContext();
   const mergedProps = solid.mergeProps(() => api().closeTriggerProps, props);
@@ -3632,25 +3388,38 @@ const ToastDescription = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const ToastRoot = props => {
+  const api = useToastContext();
+  const mergedProps = solid.mergeProps(() => api().rootProps, props);
+  return web.createComponent(ark.li, mergedProps);
+};
+
 const ToastTitle = props => {
   const api = useToastContext();
   const mergedProps = solid.mergeProps(() => api().titleProps, props);
   return web.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 = solid.mergeProps(() => api().getItemProps(toggleProps), restProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
 const useToggleGroup = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
@@ -3663,7 +3432,7 @@ const useToggleGroup = props => {
   return solidJs.createMemo(() => toggleGroup__namespace.connect(state, send, solid.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 = solid.mergeProps(() => api().rootProps, restProps);
@@ -3675,56 +3444,16 @@ const ToggleGroup$1 = props => {
   });
 };
 
-const ToggleGroupItem = props => {
-  const [toggleProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
-  const api = useToggleGroupContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(toggleProps), restProps);
-  return web.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 useTooltip = props => {
-  const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
-    id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
-  const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
-    context
-  });
-  return solidJs.createMemo(() => tooltip__namespace.connect(state, send, solid.normalizeProps));
-};
-
-const Tooltip$1 = props => {
-  const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
-  const api = useTooltip(useTooltipProps);
-  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
-  })));
-  const getChildren = () => runIfFn(localProps.children, api);
-  return web.createComponent(TooltipProvider, {
-    value: api,
-    get children() {
-      return web.createComponent(PresenceProvider, {
-        value: apiPresence,
-        get children() {
-          return getChildren();
-        }
-      });
-    }
-  });
-};
-
 const TooltipArrow = props => {
   const tooltip = useTooltipContext();
   const mergedProps = solid.mergeProps(() => tooltip().arrowProps, props);
@@ -3765,29 +3494,192 @@ const TooltipPositioner = props => {
   });
 };
 
+const useTooltip = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => tooltip__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const TooltipRoot = props => {
+  const [presenceProps, tooltipProps] = splitPresenceProps(props);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
+  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(TooltipProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return getChildren();
+        }
+      });
+    }
+  });
+};
+
 const TooltipTrigger = props => {
   const api = useTooltipContext();
   const mergedProps = solid.mergeProps(() => api().triggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
-const Tooltip = Object.assign(Tooltip$1, {
-  Root: Tooltip$1,
+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 = solid.mergeProps(() => api().getBranchProps(branchProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
+  return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const TreeViewBranchContent = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchContentProps(branchProps), localProps);
+  return web.createComponent(ark.ul, mergedProps);
+};
+
+const TreeViewBranchControl = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchControlProps(branchProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const TreeViewBranchIndicator = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps), anatomy.treeViewAnatomy.build().branchIndicator.attrs, localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const TreeViewBranchText = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchTextProps(branchProps), localProps);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const TreeViewBranchTrigger = props => {
+  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchTriggerProps(branchProps), localProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const TreeViewItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const TreeViewItemText = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.treeViewAnatomy.build().itemText.attrs, localProps);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const TreeViewLabel = props => {
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const useTreeView = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(treeView__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => treeView__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const TreeViewRoot = props => {
+  const [useTreeViewProps, localProps] = createSplitProps()(props, ['dir', 'expandedIds', 'focusedId', 'getRootNode', 'id', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedIds', 'selectionMode']);
+  const api = useTreeView(useTreeViewProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(TreeViewProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const TreeViewTree = props => {
+  const api = useTreeViewContext();
+  const mergedProps = solid.mergeProps(() => api().treeProps, props);
+  return web.createComponent(ark.ul, mergedProps);
+};
+
+const TreeView = {
+  Root: TreeViewRoot,
+  Label: TreeViewLabel,
+  Tree: TreeViewTree,
+  Branch: TreeViewBranch,
+  Item: TreeViewItem,
+  ItemText: TreeViewItemText,
+  BranchContent: TreeViewBranchContent,
+  BranchControl: TreeViewBranchControl,
+  BranchTrigger: TreeViewBranchTrigger,
+  BranchIndicator: TreeViewBranchIndicator,
+  BranchText: TreeViewBranchText
+};
+
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;
 exports.AccordionItemIndicator = AccordionItemIndicator;
 exports.AccordionItemTrigger = AccordionItemTrigger;
+exports.AccordionRoot = AccordionRoot;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
+exports.AvatarRoot = AvatarRoot;
 exports.Carousel = Carousel;
 exports.CarouselControl = CarouselControl;
 exports.CarouselIndicator = CarouselIndicator;
@@ -3796,11 +3688,13 @@ exports.CarouselItem = CarouselItem;
 exports.CarouselItemGroup = CarouselItemGroup;
 exports.CarouselNextTrigger = CarouselNextTrigger;
 exports.CarouselPrevTrigger = CarouselPrevTrigger;
+exports.CarouselRoot = CarouselRoot;
 exports.CarouselViewport = CarouselViewport;
 exports.Checkbox = Checkbox;
 exports.CheckboxControl = CheckboxControl;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
+exports.CheckboxRoot = CheckboxRoot;
 exports.ColorPicker = ColorPicker;
 exports.ColorPickerArea = ColorPickerArea;
 exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
@@ -3816,6 +3710,7 @@ exports.ColorPickerFormatSelect = ColorPickerFormatSelect;
 exports.ColorPickerFormatTrigger = ColorPickerFormatTrigger;
 exports.ColorPickerLabel = ColorPickerLabel;
 exports.ColorPickerPositioner = ColorPickerPositioner;
+exports.ColorPickerRoot = ColorPickerRoot;
 exports.ColorPickerSwatch = ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;
 exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;
@@ -3836,6 +3731,7 @@ exports.ComboboxItemIndicator = ComboboxItemIndicator;
 exports.ComboboxItemText = ComboboxItemText;
 exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxPositioner = ComboboxPositioner;
+exports.ComboboxRoot = ComboboxRoot;
 exports.ComboboxTrigger = ComboboxTrigger;
 exports.DatePicker = DatePicker;
 exports.DatePickerClearTrigger = DatePickerClearTrigger;
@@ -3848,6 +3744,7 @@ exports.DatePickerNextTrigger = DatePickerNextTrigger;
 exports.DatePickerPositioner = DatePickerPositioner;
 exports.DatePickerPrevTrigger = DatePickerPrevTrigger;
 exports.DatePickerRangeText = DatePickerRangeText;
+exports.DatePickerRoot = DatePickerRoot;
 exports.DatePickerTable = DatePickerTable;
 exports.DatePickerTableBody = DatePickerTableBody;
 exports.DatePickerTableCell = DatePickerTableCell;
@@ -3866,6 +3763,7 @@ exports.DialogCloseTrigger = DialogCloseTrigger;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogPositioner = DialogPositioner;
+exports.DialogRoot = DialogRoot;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.Editable = Editable;
@@ -3876,6 +3774,7 @@ exports.EditableEditTrigger = EditableEditTrigger;
 exports.EditableInput = EditableInput;
 exports.EditableLabel = EditableLabel;
 exports.EditablePreview = EditablePreview;
+exports.EditableRoot = EditableRoot;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
 exports.Environment = Environment;
 exports.FileUpload = FileUpload;
@@ -3887,12 +3786,14 @@ exports.FileUploadItemName = FileUploadItemName;
 exports.FileUploadItemPreviewImage = FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = FileUploadItemSizeText;
 exports.FileUploadLabel = FileUploadLabel;
+exports.FileUploadRoot = FileUploadRoot;
 exports.FileUploadTrigger = FileUploadTrigger;
 exports.HoverCard = HoverCard;
 exports.HoverCardArrow = HoverCardArrow;
 exports.HoverCardArrowTip = HoverCardArrowTip;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardPositioner = HoverCardPositioner;
+exports.HoverCardRoot = HoverCardRoot;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Menu = Menu;
 exports.MenuArrow = MenuArrow;
@@ -3904,6 +3805,7 @@ exports.MenuItemGroup = MenuItemGroup;
 exports.MenuItemGroupLabel = MenuItemGroupLabel;
 exports.MenuOptionItem = MenuOptionItem;
 exports.MenuPositioner = MenuPositioner;
+exports.MenuRoot = MenuRoot;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuTrigger = MenuTrigger;
 exports.MenuTriggerItem = MenuTriggerItem;
@@ -3913,16 +3815,19 @@ exports.NumberInputDecrementTrigger = NumberInputDecrementTrigger;
 exports.NumberInputIncrementTrigger = NumberInputIncrementTrigger;
 exports.NumberInputInput = NumberInputInput;
 exports.NumberInputLabel = NumberInputLabel;
+exports.NumberInputRoot = NumberInputRoot;
 exports.NumberInputScrubber = NumberInputScrubber;
 exports.Pagination = Pagination;
 exports.PaginationEllipsis = PaginationEllipsis;
 exports.PaginationItem = PaginationItem;
 exports.PaginationNextTrigger = PaginationNextTrigger;
 exports.PaginationPrevTrigger = PaginationPrevTrigger;
+exports.PaginationRoot = PaginationRoot;
 exports.PinInput = PinInput;
 exports.PinInputControl = PinInputControl;
 exports.PinInputInput = PinInputInput;
 exports.PinInputLabel = PinInputLabel;
+exports.PinInputRoot = PinInputRoot;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;
@@ -3932,26 +3837,40 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverDescription = PopoverDescription;
 exports.PopoverIndicator = PopoverIndicator;
 exports.PopoverPositioner = PopoverPositioner;
+exports.PopoverRoot = PopoverRoot;
 exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
 exports.Presence = Presence;
 exports.PresencePropsProvider = PresencePropsProvider;
 exports.PresenceProvider = PresenceProvider;
+exports.Progress = Progress;
+exports.ProgressCircle = ProgressCircle;
+exports.ProgressCircleRange = ProgressCircleRange;
+exports.ProgressCircleTrack = ProgressCircleTrack;
+exports.ProgressLabel = ProgressLabel;
+exports.ProgressRange = ProgressRange;
+exports.ProgressRoot = ProgressRoot;
+exports.ProgressTrack = ProgressTrack;
+exports.ProgressValueText = ProgressValueText;
+exports.ProgressView = ProgressView;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RadioGroupItemControl = RadioGroupItemControl;
 exports.RadioGroupItemText = RadioGroupItemText;
 exports.RadioGroupLabel = RadioGroupLabel;
+exports.RadioGroupRoot = RadioGroupRoot;
 exports.RatingGroup = RatingGroup;
 exports.RatingGroupControl = RatingGroupControl;
 exports.RatingGroupItem = RatingGroupItem;
 exports.RatingGroupLabel = RatingGroupLabel;
+exports.RatingGroupRoot = RatingGroupRoot;
 exports.SegmentGroup = SegmentGroup;
 exports.SegmentGroupIndicator = SegmentGroupIndicator;
 exports.SegmentGroupItem = SegmentGroupItem;
 exports.SegmentGroupItemControl = SegmentGroupItemControl;
 exports.SegmentGroupItemText = SegmentGroupItemText;
 exports.SegmentGroupLabel = SegmentGroupLabel;
+exports.SegmentGroupRoot = SegmentGroupRoot;
 exports.Select = Select;
 exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;
@@ -3964,6 +3883,7 @@ exports.SelectItemIndicator = SelectItemIndicator;
 exports.SelectItemText = SelectItemText;
 exports.SelectLabel = SelectLabel;
 exports.SelectPositioner = SelectPositioner;
+exports.SelectRoot = SelectRoot;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValueText = SelectValueText;
 exports.Slider = Slider;
@@ -3972,21 +3892,25 @@ exports.SliderLabel = SliderLabel;
 exports.SliderMarker = SliderMarker;
 exports.SliderMarkerGroup = SliderMarkerGroup;
 exports.SliderRange = SliderRange;
+exports.SliderRoot = SliderRoot;
 exports.SliderThumb = SliderThumb;
 exports.SliderTrack = SliderTrack;
 exports.SliderValueText = SliderValueText;
 exports.Splitter = Splitter;
 exports.SplitterPanel = SplitterPanel;
 exports.SplitterResizeTrigger = SplitterResizeTrigger;
+exports.SplitterRoot = SplitterRoot;
 exports.Switch = Switch;
 exports.SwitchControl = SwitchControl;
 exports.SwitchLabel = SwitchLabel;
+exports.SwitchRoot = SwitchRoot;
 exports.SwitchThumb = SwitchThumb;
 exports.TabContent = TabContent;
 exports.TabIndicator = TabIndicator;
 exports.TabList = TabList;
 exports.TabTrigger = TabTrigger;
 exports.Tabs = Tabs;
+exports.TabsRoot = TabsRoot;
 exports.TagsInput = TagsInput;
 exports.TagsInputClearTrigger = TagsInputClearTrigger;
 exports.TagsInputControl = TagsInputControl;
@@ -3994,21 +3918,38 @@ exports.TagsInputInput = TagsInputInput;
 exports.TagsInputItem = TagsInputItem;
 exports.TagsInputItemDeleteTrigger = TagsInputItemDeleteTrigger;
 exports.TagsInputItemInput = TagsInputItemInput;
+exports.TagsInputItemPreview = TagsInputItemPreview;
 exports.TagsInputItemText = TagsInputItemText;
 exports.TagsInputLabel = TagsInputLabel;
+exports.TagsInputRoot = TagsInputRoot;
 exports.Toast = Toast;
 exports.ToastCloseTrigger = ToastCloseTrigger;
 exports.ToastDescription = ToastDescription;
 exports.ToastGroup = ToastGroup;
+exports.ToastRoot = ToastRoot;
 exports.ToastTitle = ToastTitle;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
+exports.ToggleGroupRoot = ToggleGroupRoot;
 exports.Tooltip = Tooltip;
 exports.TooltipArrow = TooltipArrow;
 exports.TooltipArrowTip = TooltipArrowTip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipPositioner = TooltipPositioner;
+exports.TooltipRoot = TooltipRoot;
 exports.TooltipTrigger = TooltipTrigger;
+exports.TreeView = TreeView;
+exports.TreeViewBranch = TreeViewBranch;
+exports.TreeViewBranchContent = TreeViewBranchContent;
+exports.TreeViewBranchControl = TreeViewBranchControl;
+exports.TreeViewBranchIndicator = TreeViewBranchIndicator;
+exports.TreeViewBranchText = TreeViewBranchText;
+exports.TreeViewBranchTrigger = TreeViewBranchTrigger;
+exports.TreeViewItem = TreeViewItem;
+exports.TreeViewItemText = TreeViewItemText;
+exports.TreeViewLabel = TreeViewLabel;
+exports.TreeViewRoot = TreeViewRoot;
+exports.TreeViewTree = TreeViewTree;
 exports.ark = ark;
 exports.createToaster = createToaster;
 exports.splitPresenceProps = splitPresenceProps;
@@ -4038,6 +3979,7 @@ exports.usePopoverContext = usePopoverContext;
 exports.usePresence = usePresence;
 exports.usePresenceContext = usePresenceContext;
 exports.usePresencePropsContext = usePresencePropsContext;
+exports.useProgressContext = useProgressContext;
 exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext;
 exports.useRatingGroupContext = useRatingGroupContext;
@@ -4054,4 +3996,6 @@ exports.useTagsInputContext = useTagsInputContext;
 exports.useTagsInputItemContext = useTagsInputItemContext;
 exports.useToggleGroupContext = useToggleGroupContext;
 exports.useTooltipContext = useTooltipContext;
+exports.useTreeViewContext = useTreeViewContext;
+exports.withAsProp = withAsProp;
 //# sourceMappingURL=index.js.map