@ark-ui/solid 1.0.0-beta.0 → 1.0.0-beta.2

package/cjs/index.js

@@ -0,0 +1,3534 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solid = require('@zag-js/solid');
+var solidJs = require('solid-js');
+var accordion = require('@zag-js/accordion');
+var presence = require('@zag-js/presence');
+var avatar = require('@zag-js/avatar');
+var carousel = require('@zag-js/carousel');
+var anatomy = require('@ark-ui/anatomy');
+var checkbox = require('@zag-js/checkbox');
+var colorPicker = require('@zag-js/color-picker');
+var combobox = require('@zag-js/combobox');
+var datePicker = require('@zag-js/date-picker');
+var dialog = require('@zag-js/dialog');
+var editable = require('@zag-js/editable');
+var hoverCard = require('@zag-js/hover-card');
+var menu = require('@zag-js/menu');
+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 radio = require('@zag-js/radio-group');
+var rating = require('@zag-js/rating-group');
+var select = require('@zag-js/select');
+var slider = require('@zag-js/slider');
+var splitter = require('@zag-js/splitter');
+var zagSwitch = require('@zag-js/switch');
+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 toast = require('@zag-js/toast');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
+var presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
+var avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar);
+var carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel);
+var checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
+var colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
+var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
+var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker);
+var dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
+var editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
+var hoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(hoverCard);
+var menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
+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 radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
+var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
+var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
+var slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
+var splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
+var zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
+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 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 renderElement(node) {
+  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}>`;
+  }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const pipe = (arg, firstFn, ...fns) => fns.reduce((acc, fn) => fn(acc), firstFn(arg));
+
+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');
+
+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);
+      }
+    });
+    return getChildren;
+  };
+}
+function jsxFactory() {
+  const cache = new Map();
+  return new Proxy(withAsChild, {
+    apply(target, thisArg, argArray) {
+      return withAsChild(argArray[0]);
+    },
+    get(_, element) {
+      const asElement = element;
+      if (!cache.has(asElement)) {
+        cache.set(asElement, withAsChild(asElement));
+      }
+      return cache.get(asElement);
+    }
+  });
+}
+const ark = jsxFactory();
+
+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 [AccordionProvider, useAccordionContext] = createContext({
+  hookName: 'useAccordionContext',
+  providerName: '<AccordionProvider />'
+});
+
+const [EnvironmentProvider, useEnvironmentContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false
+});
+
+const _tmpl$$a = /*#__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$$a();
+        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 [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const api = useAccordion(params);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(AccordionProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const isFunction = value => typeof value === 'function';
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+
+const [AccordionItemProvider, useAccordionItemContext] = createContext({
+  hookName: 'useAccordionItemContext',
+  providerName: '<AccordionItemProvider />'
+});
+
+const AccordionItem = props => {
+  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+  const api = useAccordionContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), restProps);
+  const accordionItem = solid.mergeProps(() => api().getItemState(itemProps), itemProps);
+  const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(AccordionItemProvider, {
+    value: accordionItem,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const usePresence = props => {
+  const [state, send] = solid.useMachine(presence__namespace.machine(props), {
+    context: props
+  });
+  return solidJs.createMemo(() => presence__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Presence$1 = props => {
+  const [presenceProps, localProps] = createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = solidJs.createSignal(false);
+  const getChildren = solidJs.children(() => props.children);
+  solidJs.createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      web.spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return web.memo((() => {
+    const _c$ = web.memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+function splitPresenceProps(props) {
+  return createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+}
+
+const Presence = Object.assign(Presence$1, {
+  Root: Presence$1
+});
+
+const AccordionItemContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useAccordionContext();
+  const accordionItem = useAccordionItemContext();
+  const contentProps = solid.mergeProps(() => api().getItemContentProps(accordionItem), localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return accordionItem.isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, contentProps);
+    }
+  }));
+};
+
+const AccordionItemIndicator = props => {
+  const api = useAccordionContext();
+  const itemParams = useAccordionItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemParams), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const AccordionItemTrigger = props => {
+  const api = useAccordionContext();
+  const item = useAccordionItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTriggerProps(item), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const Accordion = Object.assign(Accordion$1, {
+  Root: Accordion$1,
+  Item: AccordionItem,
+  ItemContent: AccordionItemContent,
+  ItemIndicator: AccordionItemIndicator,
+  ItemTrigger: AccordionItemTrigger
+});
+
+const [AvatarProvider, useAvatarContext] = createContext({
+  hookName: 'useAvatarContext',
+  providerName: '<AvatarProvider />'
+});
+
+const useAvatar = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => avatar__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Avatar$1 = props => {
+  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  const api = useAvatar(params);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(AvatarProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const AvatarFallback = props => {
+  const avatar = useAvatarContext();
+  const fallbackProps = solid.mergeProps(() => avatar().fallbackProps, props);
+  return web.createComponent(ark.span, fallbackProps);
+};
+
+const AvatarImage = props => {
+  const avatar = useAvatarContext();
+  const imageProps = solid.mergeProps(() => avatar().imageProps, props);
+  return web.createComponent(ark.img, imageProps);
+};
+
+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 getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => carousel__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 carousel = useCarousel(useCarouselProps);
+  const rootProps = solid.mergeProps(() => carousel().rootProps, localProps);
+  return web.createComponent(CarouselProvider, {
+    value: carousel,
+    get children() {
+      return web.createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const CarouselControl = props => {
+  const mergedProps = solid.mergeProps(() => anatomy.carouselAnatomy.build().control.attrs, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+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);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const CarouselPrevTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().prevTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const CarouselItem = props => {
+  const [slideParams, localProps] = createSplitProps()(props, ['index']);
+  const api = useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(slideParams), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const CarouselItemGroup = props => {
+  const api = useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().itemGroupProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const CarouselViewport = props => {
+  const api = useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().viewportProps, props);
+  return web.createComponent(ark.div, 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 useCheckbox = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => checkbox__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, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.label, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const _tmpl$$9 = /*#__PURE__*/web.template(`<input>`);
+const CheckboxControl = props => {
+  const api = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return [web.createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$9();
+    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const CheckboxIndicator = props => {
+  const api = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const CheckboxLabel = props => {
+  const checkbox = useCheckboxContext();
+  const labelProps = solid.mergeProps(() => checkbox().labelProps, props);
+  return web.createComponent(ark.span, labelProps);
+};
+
+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 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$$8 = /*#__PURE__*/web.template(`<input>`);
+const ColorPicker$1 = props => {
+  const [colorPickerProps, localProps] = createSplitProps()(props, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker(colorPickerProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return [web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$$8();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
+  hookName: 'useColorPickerAreaContext',
+  providerName: '<ColorPickerAreaProvider />'
+});
+
+const ColorPickerArea = props => {
+  const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaProps(channelProps), divprops);
+  return web.createComponent(ColorPickerAreaProvider, {
+    value: channelProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerAreaBackground = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerAreaThumb = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaThumbProps(colorAreaProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelInput = props => {
+  const [channelProps, inputProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelInputProps(channelProps), inputProps);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext({
+  hookName: 'useColorPickerChannelSliderContext',
+  providerName: '<ColorPickerChannelSliderProvider />'
+});
+
+const ColorPickerChannelSlider = props => {
+  const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+  return web.createComponent(ColorPickerChannelSliderProvider, {
+    value: channelProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerChannelSliderThumb = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(sliderContext), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelSliderTrack = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(sliderContext), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerContent = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerControl = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerEyeDropperTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().eyeDropperTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerLabel = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const ColorPickerPositioner = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatch = props => {
+  const [colorSwatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatchGroup = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().swatchGroupProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatchTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerTransparencyGrid = props => {
+  const [gridProps, localProps] = createSplitProps()(props, ['size']);
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getTransparencyGridProps(gridProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const ColorPicker = Object.assign(ColorPicker$1, {
+  Root: ColorPicker$1,
+  Area: ColorPickerArea,
+  AreaBackground: ColorPickerAreaBackground,
+  AreaThumb: ColorPickerAreaThumb,
+  ChannelInput: ColorPickerChannelInput,
+  ChannelSlider: ColorPickerChannelSlider,
+  ChannelSliderThumb: ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: ColorPickerChannelSliderTrack,
+  Content: ColorPickerContent,
+  Control: ColorPickerControl,
+  EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  Label: ColorPickerLabel,
+  Positioner: ColorPickerPositioner,
+  Swatch: ColorPickerSwatch,
+  SwatchGroup: ColorPickerSwatchGroup,
+  SwatchTrigger: ColorPickerSwatchTrigger,
+  TransparencyGrid: ColorPickerTransparencyGrid,
+  Trigger: ColorPickerTrigger
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const [ComboboxProvider, useComboboxContext] = createContext({
+  hookName: 'useComboboxContext',
+  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 [selectProps, localProps] = createSplitProps()(props, ['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(selectProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(ComboboxProvider, {
+    value: api,
+    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);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const ComboboxContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const ComboboxControl = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ComboboxInput = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().inputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const [ComboboxItemProvider, useComboboxItemContext] = createContext({
+  hookName: 'useComboboxItemContext',
+  providerName: '<ComboboxItemProvider />'
+});
+
+const ComboboxItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const api = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(ComboboxItemProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ComboboxItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const combobox = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().getItemGroupProps(groupProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const api = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemIndicator = props => {
+  const combobox = useComboboxContext();
+  const itemProps = useComboboxItemContext();
+  const mergedProps = solid.mergeProps(() => combobox().getItemIndicatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemText = props => {
+  const api = useComboboxContext();
+  const itemProps = useComboboxItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const ComboboxLabel = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const ComboboxPositioner = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().positionerProps, props);
+  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 [DatePickerProvider, useDatePickerContext] = createContext({
+  hookName: 'useDatePickerContext',
+  providerName: '<DatePickerProvider />'
+});
+
+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 DatePicker$1 = props => {
+  const [datePickerProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
+  const api = useDatePicker(datePickerProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(DatePickerProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const DatePickerClearTrigger = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const DatePickerContent = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const DatePickerControl = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const DatePickerInput = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const DatePickerLabel = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const _tmpl$$7 = /*#__PURE__*/web.template(`<option>`);
+const DatePickerMonthSelect = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
+  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+    get children() {
+      return api().getMonths().map(month => (() => {
+        const _el$ = _tmpl$$7();
+        web.insert(_el$, () => month.label);
+        web.effect(() => _el$.value = month.value);
+        return _el$;
+      })());
+    }
+  }));
+};
+
+const [DatePickerViewProvider, useDatePickerViewContext] = createContext({
+  hookName: 'useDatePickerViewContext',
+  providerName: '<DatePickerViewProvider />'
+});
+
+const DatePickerNextTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = solid.mergeProps(() => api().getNextTriggerProps(viewProps), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const DatePickerPositioner = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const DatePickerPrevTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = solid.mergeProps(() => api().getPrevTriggerProps(viewProps), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const DatePickerRangeText = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().rangeTextProps, props);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return api().visibleRangeText.start;
+    }
+  }));
+};
+
+const [DatePickerTableProvider, useDatePickerTableContext] = createContext({
+  hookName: 'useDatePickerTableContext',
+  providerName: '<DatePickerTableProvider />'
+});
+
+const DatePickerTable = props => {
+  const [{
+    columns
+  }, localProps] = createSplitProps()(props, ['columns']);
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const tableProps = {
+    columns,
+    id: solidJs.createUniqueId(),
+    ...viewProps
+  };
+  const mergedProps = solid.mergeProps(() => api().getTableProps(tableProps), localProps);
+  return web.createComponent(DatePickerTableProvider, {
+    value: tableProps,
+    get children() {
+      return web.createComponent(ark.table, mergedProps);
+    }
+  });
+};
+
+const DatePickerTableBody = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = solid.mergeProps(() => api().getTableBodyProps(tableProps), props);
+  return web.createComponent(ark.tbody, mergedProps);
+};
+
+const [DatePickerTableCellProvider, useDatePickerTableCellContext] = createContext({
+  hookName: 'useDatePickerTableCellContext',
+  providerName: '<DatePickerTableCellProvider />'
+});
+
+const DatePickerTableCell = props => {
+  const [cellProps, localProps] = createSplitProps()(props, ['disabled', 'value', 'visibleRange', 'columns']);
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const tableCellProps = {
+    day: api().getDayTableCellProps,
+    month: api().getMonthTableCellProps,
+    year: api().getYearTableCellProps
+    // @ts-expect-error use filter guard
+  }[viewProps.view](cellProps);
+  const mergedProps = solid.mergeProps(() => tableCellProps, localProps);
+  return web.createComponent(DatePickerTableCellProvider, {
+    value: cellProps,
+    get children() {
+      return web.createComponent(ark.td, mergedProps);
+    }
+  });
+};
+
+const DatePickerTableCellTrigger = props => {
+  const api = useDatePickerContext();
+  const cellProps = useDatePickerTableCellContext();
+  const viewProps = useDatePickerViewContext();
+  const triggerProps = {
+    day: api().getDayTableCellTriggerProps,
+    month: api().getMonthTableCellTriggerProps,
+    year: api().getYearTableCellTriggerProps
+    // @ts-expect-error value is number filter
+  }[viewProps.view](cellProps);
+  const mergedProps = solid.mergeProps(() => triggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const DatePickerTableHead = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = solid.mergeProps(() => api().getTableHeadProps(tableProps), props);
+  return web.createComponent(ark.thead, mergedProps);
+};
+
+const DatePickerTableHeader = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = solid.mergeProps(() => api().getTableHeaderProps(tableProps), props);
+  return web.createComponent(ark.th, mergedProps);
+};
+
+const DatePickerTableRow = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = solid.mergeProps(() => api().getTableRowProps(tableProps), props);
+  return web.createComponent(ark.tr, mergedProps);
+};
+
+const DatePickerTrigger = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const DatePickerView = props => {
+  const [viewProps, localProps] = createSplitProps()(props, ['view']);
+  const api = useDatePickerContext();
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(DatePickerViewProvider, {
+    value: viewProps,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(localProps, {
+        get hidden() {
+          return api().view !== viewProps.view;
+        },
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const DatePickerViewControl = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = solid.mergeProps(() => api().getViewControlProps(viewProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const DatePickerViewTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = solid.mergeProps(() => api().getViewTriggerProps(viewProps), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const _tmpl$$6 = /*#__PURE__*/web.template(`<option>`);
+const DatePickerYearSelect = props => {
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
+  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+    get children() {
+      return getYearsRange({
+        from: 1_000,
+        to: 4_000
+      }).map(year => (() => {
+        const _el$ = _tmpl$$6();
+        _el$.value = year;
+        web.insert(_el$, year);
+        return _el$;
+      })());
+    }
+  }));
+};
+function getYearsRange(range) {
+  const years = [];
+  for (let year = range.from; year <= range.to; year += 1) {
+    years.push(year);
+  }
+  return years;
+}
+
+const DatePicker = Object.assign(DatePicker$1, {
+  Root: DatePicker$1,
+  ClearTrigger: DatePickerClearTrigger,
+  Content: DatePickerContent,
+  Control: DatePickerControl,
+  Input: DatePickerInput,
+  Label: DatePickerLabel,
+  MonthSelect: DatePickerMonthSelect,
+  NextTrigger: DatePickerNextTrigger,
+  Positioner: DatePickerPositioner,
+  PrevTrigger: DatePickerPrevTrigger,
+  RangeText: DatePickerRangeText,
+  Table: DatePickerTable,
+  TableBody: DatePickerTableBody,
+  TableCell: DatePickerTableCell,
+  TableCellTrigger: DatePickerTableCellTrigger,
+  TableHead: DatePickerTableHead,
+  TableHeader: DatePickerTableHeader,
+  TableRow: DatePickerTableRow,
+  Trigger: DatePickerTrigger,
+  View: DatePickerView,
+  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 [dialogParams, localProps] = createSplitProps()(props, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const api = useDialog(dialogParams);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(DialogProvider, {
+    value: api,
+    get children() {
+      return getChildren();
+    }
+  });
+};
+
+const DialogBackdrop = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = solid.mergeProps(() => api().backdropProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const DialogCloseTrigger = props => {
+  const dialog = useDialogContext();
+  const triggerProps = solid.mergeProps(() => dialog().triggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const DialogContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const DialogDescription = props => {
+  const dialog = useDialogContext();
+  const descriptionProps = solid.mergeProps(() => dialog().descriptionProps, props);
+  return web.createComponent(ark.p, descriptionProps);
+};
+
+const DialogPositioner = props => {
+  const dialog = useDialogContext();
+  const mergedProps = solid.mergeProps(() => dialog().positionerProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const DialogTitle = props => {
+  const dialog = useDialogContext();
+  const titleProps = solid.mergeProps(() => dialog().titleProps, props);
+  return web.createComponent(ark.h2, titleProps);
+};
+
+const DialogTrigger = props => {
+  const dialog = useDialogContext();
+  const triggerProps = solid.mergeProps(() => dialog().triggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const Dialog = Object.assign(Dialog$1, {
+  Root: Dialog$1,
+  Backdrop: DialogBackdrop,
+  CloseTrigger: DialogCloseTrigger,
+  Positioner: DialogPositioner,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+});
+
+const [EditableProvider, useEditableContext] = createContext({
+  hookName: 'useEditableContext',
+  providerName: '<EditableProvider />'
+});
+
+const useEditable = props => {
+  const 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, restProps] = 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 editable = useEditable(useEditableProps);
+  const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
+  const rootProps = solid.mergeProps(() => editable().rootProps, localProps);
+  const getChildren = () => runIfFn(childrenProps.children, editable);
+  return web.createComponent(EditableProvider, {
+    value: editable,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const EditableArea = props => {
+  const editable = useEditableContext();
+  const areaProps = solid.mergeProps(() => editable().areaProps, props);
+  return web.createComponent(ark.div, areaProps);
+};
+
+const EditableCancelTrigger = props => {
+  const editable = useEditableContext();
+  const triggerProps = solid.mergeProps(() => editable().cancelTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const EditableControl = props => {
+  const editable = useEditableContext();
+  const controlProps = solid.mergeProps(() => editable().controlProps, props);
+  return web.createComponent(ark.div, controlProps);
+};
+
+const EditableEditTrigger = props => {
+  const editable = useEditableContext();
+  const triggerProps = solid.mergeProps(() => editable().editTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const EditableInput = props => {
+  const editable = useEditableContext();
+  const inputProps = solid.mergeProps(() => editable().inputProps, props);
+  return web.createComponent(ark.input, inputProps);
+};
+
+const EditableLabel = props => {
+  const editable = useEditableContext();
+  const labelProps = solid.mergeProps(() => editable().labelProps, props);
+  return web.createComponent(ark.label, labelProps);
+};
+
+const EditablePreview = props => {
+  const editable = useEditableContext();
+  const previewProps = solid.mergeProps(() => editable().previewProps, props);
+  return web.createComponent(ark.span, previewProps);
+};
+
+const EditableSubmitTrigger = props => {
+  const dialog = useEditableContext();
+  const triggerProps = solid.mergeProps(() => dialog().submitTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+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 [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 [hoverCardProps, localProps] = createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useHoverCard(hoverCardProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(HoverCardProvider, {
+    value: api,
+    get children() {
+      return getChildren();
+    }
+  });
+};
+
+const HoverCardArrow = props => {
+  const hoverCard = useHoverCardContext();
+  const arrowProps = solid.mergeProps(() => hoverCard().arrowProps, props);
+  return web.createComponent(ark.div, arrowProps);
+};
+
+const HoverCardArrowTip = props => {
+  const hoverCard = useHoverCardContext();
+  const tipProps = solid.mergeProps(() => hoverCard().arrowTipProps, props);
+  return web.createComponent(ark.div, tipProps);
+};
+
+const HoverCardContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useHoverCardContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const HoverCardPositioner = props => {
+  const hoverCard = useHoverCardContext();
+  const positionerProps = solid.mergeProps(() => hoverCard().positionerProps, props);
+  return web.createComponent(ark.div, positionerProps);
+};
+
+const HoverCardTrigger = props => {
+  const hoverCard = useHoverCardContext();
+  const triggerProps = solid.mergeProps(() => hoverCard().triggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const HoverCard = Object.assign(HoverCard$1, {
+  Root: HoverCard$1,
+  Arrow: HoverCardArrow,
+  ArrowTip: HoverCardArrowTip,
+  Content: HoverCardContent,
+  Positioner: HoverCardPositioner,
+  Trigger: HoverCardTrigger
+});
+
+const [MenuProvider, useMenuContext] = createContext({
+  hookName: 'useMenuContext',
+  providerName: '<MenuProvider />',
+  strict: false
+});
+const [MenuMachineProvider, useMenuMachineContext] = createContext({
+  hookName: 'useMenuMachineContext',
+  providerName: '<MenuMachineProvider />',
+  strict: false
+});
+const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
+  hookName: 'useMenuMachineContext',
+  providerName: '<MenuMachineProvider />',
+  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 [menuParams, restProps] = createSplitProps()(props, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedId', 'id', 'ids', 'loop', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'onValueChange', 'positioning', 'value']);
+  const parentMenu = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const menu = useMenu(menuParams);
+  solidJs.createEffect(() => {
+    if (!parentMachine) return;
+    parentMenu?.().setChild(menu().machine);
+    menu().api().setParent(parentMachine());
+  });
+  solidJs.createEffect(() => {
+    if (!restProps.isOpen) return;
+    restProps.isOpen?.() ? menu().api().open() : menu().api().close();
+  });
+  const triggerItemContext = solidJs.createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+  const machineContext = () => menu().machine;
+  const getChildren = () => runIfFn(restProps.children, () => ({
+    isOpen: menu?.().api().isOpen,
+    onClose: menu?.().api().close
+  }));
+  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 getChildren();
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
+const MenuArrow = props => {
+  const menu = useMenuContext();
+  const arrowProps = solid.mergeProps(() => menu?.().arrowProps, props);
+  return web.createComponent(ark.div, arrowProps);
+};
+
+const MenuArrowTip = props => {
+  const menu = useMenuContext();
+  const arrowTipProps = solid.mergeProps(() => menu?.().arrowTipProps, props);
+  return web.createComponent(ark.div, arrowTipProps);
+};
+
+const MenuContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useMenuContext();
+  const mergedProps = solid.mergeProps(() => api?.().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api?.().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const MenuContextTrigger = props => {
+  const menu = useMenuContext();
+  const triggerProps = solid.mergeProps(() => menu?.().contextTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const MenuItem = props => {
+  const menu = useMenuContext();
+  const [itemParams, restProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
+  const itemProps = solid.mergeProps(() => menu?.().getItemProps(itemParams), restProps);
+  return web.createComponent(ark.div, itemProps);
+};
+
+const MenuItemGroup = props => {
+  const menu = useMenuContext();
+  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const groupProps = solid.mergeProps(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+  return web.createComponent(ark.div, groupProps);
+};
+
+const MenuItemGroupLabel = props => {
+  const menu = useMenuContext();
+  const [itemGroupLabelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const labelProps = solid.mergeProps(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
+  return web.createComponent(ark.label, labelProps);
+};
+
+const MenuOptionItem = props => {
+  const menu = useMenuContext();
+  const [optionProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
+  const itemProps = solid.mergeProps(() => menu().getOptionItemProps(optionProps), localProps);
+  const itemState = solidJs.createMemo(() => menu().getOptionItemState(optionProps));
+  const getChildren = () => runIfFn(localProps.children, itemState);
+  return web.createComponent(ark.div, web.mergeProps(itemProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const MenuPositioner = props => {
+  const menu = useMenuContext();
+  const positionerProps = solid.mergeProps(() => menu?.().positionerProps, props);
+  return web.createComponent(ark.div, positionerProps);
+};
+
+const MenuSeparator = props => {
+  const menu = useMenuContext();
+  const separatorProps = solid.mergeProps(() => menu?.().separatorProps, props);
+  return web.createComponent(ark.hr, separatorProps);
+};
+
+const MenuTrigger = props => {
+  const menu = useMenuContext();
+  const triggerProps = solid.mergeProps(() => menu?.().triggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const MenuTriggerItem = props => {
+  const getTriggerItemProps = useMenuTriggerItemContext();
+  const triggerProps = solid.mergeProps(() => getTriggerItemProps?.(), props);
+  return web.createComponent(ark.div, triggerProps);
+};
+
+const Menu = Object.assign(Menu$1, {
+  Root: Menu$1,
+  Arrow: MenuArrow,
+  ArrowTip: MenuArrowTip,
+  Content: MenuContent,
+  ContextTrigger: MenuContextTrigger,
+  Item: MenuItem,
+  ItemGroup: MenuItemGroup,
+  ItemGroupLabel: MenuItemGroupLabel,
+  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 rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(NumberInputProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const NumberInputControl = props => {
+  const api = useNumberInputContext();
+  const controlProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, controlProps);
+};
+
+const NumberInputDecrementTrigger = props => {
+  const api = useNumberInputContext();
+  const triggerProps = solid.mergeProps(() => api().decrementTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const NumberInputInput = props => {
+  const api = useNumberInputContext();
+  const inputProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(ark.input, inputProps);
+};
+
+const NumberInputIncrementTrigger = props => {
+  const api = useNumberInputContext();
+  const triggerProps = solid.mergeProps(() => api().incrementTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const NumberInputLabel = props => {
+  const api = useNumberInputContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, labelProps);
+};
+
+const NumberInputScrubber = props => {
+  const api = useNumberInputContext();
+  const scrubberProps = solid.mergeProps(() => api().scrubberProps, props);
+  return web.createComponent(ark.div, scrubberProps);
+};
+
+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 getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => pagination__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Pagination$1 = props => {
+  const [paginationParams, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
+  const api = usePagination(paginationParams);
+  const getChildren = () => runIfFn(childrenProps.children, api);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(PaginationProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.nav, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const PaginationEllipsis = props => {
+  const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
+  const api = usePaginationContext();
+  const mergedProps = solid.mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const PaginationItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
+  const api = usePaginationContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const PaginationNextTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = solid.mergeProps(() => api().nextTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const PaginationPrevTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = solid.mergeProps(() => api().prevTriggerProps, 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 getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
+const PinInput$1 = props => {
+  const [pinInputProps, 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(pinInputProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(PinInputProvider, {
+    value: api,
+    get children() {
+      return [web.createComponent(ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$$5();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+const PinInputControl = props => {
+  const api = usePinInputContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const PinInputInput = props => {
+  const [inputParams, localProps] = solidJs.splitProps(props, ['index']);
+  const api = usePinInputContext();
+  const inputProps = solid.mergeProps(() => api().getInputProps(inputParams), localProps);
+  return web.createComponent(ark.input, inputProps);
+};
+
+const PinInputLabel = props => {
+  const api = usePinInputContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, labelProps);
+};
+
+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 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 Popover$1 = props => {
+  const [usePopoverProps, restProps] = createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const api = usePopover(usePopoverProps);
+  return web.createComponent(PopoverProvider, {
+    value: api,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
+
+const PopoverAnchor = props => {
+  const api = usePopoverContext();
+  const anchorProps = solid.mergeProps(() => api().anchorProps, props);
+  return web.createComponent(ark.div, anchorProps);
+};
+
+const PopoverArrow = props => {
+  const popover = usePopoverContext();
+  const arrowProps = solid.mergeProps(() => popover().arrowProps, props);
+  return web.createComponent(ark.div, arrowProps);
+};
+
+const PopoverArrowTip = props => {
+  const popover = usePopoverContext();
+  const arrowTipProps = solid.mergeProps(() => popover().arrowTipProps, props);
+  return web.createComponent(ark.div, arrowTipProps);
+};
+
+const PopoverCloseTrigger = props => {
+  const api = usePopoverContext();
+  const triggerProps = solid.mergeProps(() => api().closeTriggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = usePopoverContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const PopoverDescription = props => {
+  const api = usePopoverContext();
+  const descriptionProps = solid.mergeProps(() => api().descriptionProps, props);
+  return web.createComponent(ark.div, descriptionProps);
+};
+
+const PopoverIndicator = props => {
+  const popover = usePopoverContext();
+  const mergedProps = solid.mergeProps(() => popover().indicatorProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const PopoverPositioner = props => {
+  const api = usePopoverContext();
+  const positionerProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(ark.div, positionerProps);
+};
+
+const PopoverTitle = props => {
+  const api = usePopoverContext();
+  const titleProps = solid.mergeProps(() => api().titleProps, props);
+  return web.createComponent(ark.div, titleProps);
+};
+
+const PopoverTrigger = props => {
+  const api = usePopoverContext();
+  const triggerProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const Popover = Object.assign(Popover$1, {
+  Root: Popover$1,
+  Anchor: PopoverAnchor,
+  Arrow: PopoverArrow,
+  ArrowTip: PopoverArrowTip,
+  CloseTrigger: PopoverCloseTrigger,
+  Content: PopoverContent,
+  Description: PopoverDescription,
+  Indicator: PopoverIndicator,
+  Positioner: PopoverPositioner,
+  Title: PopoverTitle,
+  Trigger: PopoverTrigger
+});
+
+const [RadioGroupProvider, useRadioGroupContext] = createContext({
+  hookName: 'useRadioGroupContext',
+  providerName: '<RadioGroupProvider />'
+});
+
+const useRadioGroup = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => radio__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 mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(RadioGroupProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const RadioGroupIndicator = props => {
+  const api = useRadioGroupContext();
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const [RadioProvider, useRadioGroupItemContext] = createContext({
+  hookName: 'useRadioGroupItemContext',
+  providerName: '<RadioProvider />'
+});
+
+const RadioGroupItem = props => {
+  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const api = useRadioGroupContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), restProps);
+  return web.createComponent(RadioProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
+const RadioGroupItemControl = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), props);
+  return [web.createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$4();
+    web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const RadioGroupItemText = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+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 getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(rating__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => rating__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const RatingGroup$1 = props => {
+  const [ratingParams, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(ratingParams);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(RatingGroupProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
+const RatingGroupControl = props => {
+  const api = useRatingGroupContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return [web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  })), (() => {
+    const _el$ = _tmpl$$3();
+    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
+  hookName: 'useRatingGroupItemContext',
+  providerName: '<RatingGroupItemProvider />'
+});
+
+const RatingGroupItem = props => {
+  const [ratingParams, restProps] = createSplitProps()(props, ['index']);
+  const api = useRatingGroupContext();
+  const itemState = api().getItemState(ratingParams);
+  const mergedProps = solid.mergeProps(() => api().getItemProps(ratingParams), restProps);
+  const getChildren = () => runIfFn(restProps.children, itemState);
+  return web.createComponent(RatingGroupItemProvider, {
+    value: itemState,
+    get children() {
+      return web.createComponent(ark.span, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const RatingGroupLabel = props => {
+  const api = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, 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 getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(radio__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => radio__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, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SegmentGroupIndicator = props => {
+  const api = useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const [SegmentProvider, useSegmentGroupItemContext] = createContext({
+  hookName: 'useSegmentGroupItemContext',
+  providerName: '<SegmentProvider />'
+});
+
+const SegmentGroupItem = props => {
+  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const api = useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, restProps);
+  return web.createComponent(SegmentProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const _tmpl$$2 = /*#__PURE__*/web.template(`<input>`);
+const SegmentGroupItemControl = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
+  return [web.createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$2();
+    web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const SegmentGroupItemText = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const SegmentGroupLabel = props => {
+  const api = useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, anatomy.segmentGroupAnatomy.build().label.attrs, 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 getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode,
+    collection
+  }, rest);
+  const [state, send] = solid.useMachine(select__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Select$1 = props => {
+  const [selectProps, localProps] = createSplitProps()(props, ['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(selectProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(SelectProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SelectClearTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const SelectControl = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SelectIndicator = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const [SelectItemProvider, useSelectItemContext] = createContext({
+  hookName: 'useSelectItemContext',
+  providerName: '<SelectItemProvider />'
+});
+
+const SelectItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(SelectItemProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SelectItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SelectItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SelectItemIndicator = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SelectItemText = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const SelectLabel = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const SelectPositioner = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SelectTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const SelectValueText = props => {
+  const api = useSelectContext();
+  const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
+  return web.createComponent(ark.span, web.mergeProps(mergedProps, {
+    get children() {
+      return api().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+const Select = Object.assign(Select$1, {
+  Root: Select$1,
+  ClearTrigger: SelectClearTrigger,
+  Content: SelectContent,
+  Control: SelectControl,
+  Indicator: SelectIndicator,
+  Item: SelectItem,
+  ItemGroup: SelectItemGroup,
+  ItemGroupLabel: SelectItemGroupLabel,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: SelectItemText,
+  Label: SelectLabel,
+  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);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SliderLabel = props => {
+  const api = useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const SliderMarker = props => {
+  const [markerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().getMarkerProps(markerProps), localProps);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const SliderMarkerGroup = props => {
+  const api = useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().markerGroupProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SliderOutput = props => {
+  const slider = useSliderContext();
+  const getChildren = () => runIfFn(props.children, slider);
+  const outputProps = solid.mergeProps(() => slider().outputProps, props);
+  return web.createComponent(ark.output, web.mergeProps(outputProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const SliderRange = props => {
+  const api = useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().rangeProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SliderThumb = props => {
+  const [thumbProps, localProps] = createSplitProps()(props, ['index']);
+  const api = useSliderContext();
+  const mergePdrops = solid.mergeProps(() => api().getThumbProps(thumbProps), localProps);
+  return web.createComponent(ark.div, mergePdrops);
+};
+
+const SliderTrack = props => {
+  const api = useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().trackProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const Slider = Object.assign(Slider$1, {
+  Root: Slider$1,
+  Control: SliderControl,
+  Label: SliderLabel,
+  Marker: SliderMarker,
+  MarkerGroup: SliderMarkerGroup,
+  Output: SliderOutput,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+  Track: SliderTrack
+});
+
+const [SplitterProvider, useSplitterContext] = createContext({
+  hookName: 'useSplitterContext',
+  providerName: '<SplitterProvider />'
+});
+
+const useSplitter = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(splitter__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => splitter__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Splitter$1 = props => {
+  const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'onSizeChangeStart', 'orientation', 'size']);
+  const api = useSplitter(splitterParams);
+  const getChildren = () => runIfFn(localProps.children, api);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(SplitterProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SplitterPanel = props => {
+  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
+  const api = useSplitterContext();
+  const panelProps = solid.mergeProps(() => api().getPanelProps(panelParams), restProps);
+  return web.createComponent(ark.div, panelProps);
+};
+
+const SplitterResizeTrigger = props => {
+  const api = useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
+  const triggerProps = solid.mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const Splitter = Object.assign(Splitter$1, {
+  Root: Splitter$1,
+  Panel: SplitterPanel,
+  ResizeTrigger: SplitterResizeTrigger
+});
+
+const [SwitchProvider, useSwitchContext] = createContext({
+  hookName: 'useSwitchContext',
+  providerName: '<SwitchProvider />'
+});
+
+const useSwitch = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => zagSwitch__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Switch$1 = props => {
+  const [switchProps, labelProps] = 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, labelProps);
+  const getChildren = () => runIfFn(props.children, api);
+  return web.createComponent(SwitchProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.label, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+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 checkbox = useSwitchContext();
+  const labelProps = solid.mergeProps(() => checkbox().labelProps, props);
+  return web.createComponent(ark.span, labelProps);
+};
+
+const SwitchThumb = props => {
+  const checkbox = useSwitchContext();
+  const thumbProps = solid.mergeProps(() => checkbox().thumbProps, props);
+  return web.createComponent(ark.span, thumbProps);
+};
+
+const Switch = Object.assign(Switch$1, {
+  Root: Switch$1,
+  Control: SwitchControl,
+  Label: SwitchLabel,
+  Thumb: SwitchThumb
+});
+
+const [TabsProvider, useTabsContext] = createContext({
+  hookName: 'useTabsContext',
+  providerName: '<TabsProvider />'
+});
+
+const TabPresence = props => {
+  const api = useTabsContext();
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().value === props.value;
+    }
+  }, props));
+};
+
+const TabContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const [getContentProps, restProps] = createSplitProps()(localProps, ['value']);
+  const api = useTabsContext();
+  const contentProps = solid.mergeProps(() => api().getContentProps(getContentProps), restProps);
+  return web.createComponent(TabPresence, web.mergeProps(presenceProps, getContentProps, {
+    get children() {
+      return web.createComponent(ark.div, contentProps);
+    }
+  }));
+};
+
+const TabIndicator = props => {
+  const api = useTabsContext();
+  const indicatorProps = solid.mergeProps(() => api().indicatorProps, props);
+  return web.createComponent(ark.div, indicatorProps);
+};
+
+const TabList = props => {
+  const api = useTabsContext();
+  const tablistProps = solid.mergeProps(() => api().tablistProps, props);
+  return web.createComponent(ark.div, tablistProps);
+};
+
+const TabTrigger = props => {
+  const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
+  const api = useTabsContext();
+  const triggerProps = solid.mergeProps(() => api().getTriggerProps(tabParams), restProps);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const useTabs = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(tabs__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => tabs__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Tabs$1 = props => {
+  const [tabsParams, restProps] = createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
+  const api = useTabs(tabsParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  return web.createComponent(TabsProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const Tabs = Object.assign(Tabs$1, {
+  Root: Tabs$1,
+  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);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const TagsInputControl = props => {
+  const api = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const TagsInputInput = props => {
+  const api = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
+  hookName: 'useTagsInputItemContext',
+  providerName: '<TagsInputItemProvider />'
+});
+
+const TagsInputItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'index', 'value']);
+  const api = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(TagsInputItemProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const TagsInputItemDeleteTrigger = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemDeleteTriggerProps(itemProps), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const TagsInputItemInput = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemInputProps(itemProps), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const TagsInputItemText = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const TagsInputLabel = props => {
+  const api = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const TagsInput = Object.assign(TagsInput$1, {
+  Root: TagsInput$1,
+  ClearTrigger: TagsInputClearTrigger,
+  Control: TagsInputControl,
+  Input: TagsInputInput,
+  Item: TagsInputItem,
+  ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+  ItemInput: TagsInputItemInput,
+  ItemText: TagsInputItemText,
+  Label: TagsInputLabel
+});
+
+const [ToastProvider, useToastContext] = createContext({
+  hookName: 'useToastContext',
+  providerName: '<ToastProvider />'
+});
+
+// TODO simplify types after next zag.js upgrade
+
+const createToaster = props => {
+  const {
+    placement,
+    ...rest
+  } = props;
+  const service = toast__namespace.group.machine({
+    id: '1',
+    placement,
+    ...rest
+  }).start();
+  const [state, send] = solid.useActor(service);
+  const api = solidJs.createMemo(() => toast__namespace.group.connect(state, send, solid.normalizeProps));
+  const Toaster = props => {
+    const getRootNode = useEnvironmentContext();
+    solidJs.createEffect(() => {
+      service.setContext({
+        getRootNode
+      });
+      solidJs.onCleanup(() => service.stop());
+    });
+    const mergedProps = solid.mergeProps(() => api().getGroupProps({
+      placement
+    }), props);
+    return web.createComponent(ark.ol, web.mergeProps(mergedProps, {
+      get children() {
+        return web.createComponent(solidJs.Index, {
+          get each() {
+            return api().toastsByPlacement[placement];
+          },
+          children: toast => web.createComponent(ToastProviderFactory, {
+            get service() {
+              return toast();
+            }
+          })
+        });
+      }
+    }));
+  };
+  return [Toaster, api];
+};
+const ToastProviderFactory = props => {
+  const [state, send] = solid.useActor(props.service);
+  const api = toast__namespace.connect(state, send, solid.normalizeProps);
+  return web.createComponent(ToastProvider, {
+    get value() {
+      return solidJs.createMemo(() => api);
+    },
+    get children() {
+      return state.context.render?.(api);
+    }
+  });
+};
+
+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);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const ToastDescription = props => {
+  const api = useToastContext();
+  const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
+  return web.createComponent(ark.div, 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,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  CloseTrigger: ToastCloseTrigger
+});
+
+const [ToggleGroupProvider, useToggleGroupContext] = createContext({
+  hookName: 'useToggleGroupContext',
+  providerName: '<ToggleGroupProvider />'
+});
+
+const useToggleGroup = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(toggleGroup__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => toggleGroup__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const ToggleGroup$1 = props => {
+  const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'loop', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
+  const api = useToggleGroup(groupParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  return web.createComponent(ToggleGroupProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+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,
+  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 [useTooltipProps, restProps] = createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
+  return web.createComponent(TooltipProvider, web.mergeProps({
+    value: api
+  }, restProps));
+};
+
+const TooltipArrow = props => {
+  const tooltip = useTooltipContext();
+  const arrowProps = solid.mergeProps(() => tooltip().arrowProps, props);
+  return web.createComponent(ark.div, arrowProps);
+};
+
+const TooltipArrowTip = props => {
+  const api = useTooltipContext();
+  const arrowTipProps = solid.mergeProps(() => api().arrowTipProps, props);
+  return web.createComponent(ark.div, arrowTipProps);
+};
+
+const TooltipContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useTooltipContext();
+  const contentProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(ark.div, contentProps);
+    }
+  }));
+};
+
+const TooltipPositioner = props => {
+  const api = useTooltipContext();
+  const positionerProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(ark.div, positionerProps);
+};
+
+const TooltipTrigger = props => {
+  const api = useTooltipContext();
+  const triggerProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, triggerProps);
+};
+
+const Tooltip = Object.assign(Tooltip$1, {
+  Root: Tooltip$1,
+  Arrow: TooltipArrow,
+  ArrowTip: TooltipArrowTip,
+  Content: TooltipContent,
+  Positioner: TooltipPositioner,
+  Trigger: TooltipTrigger
+});
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionItemContent = AccordionItemContent;
+exports.AccordionItemIndicator = AccordionItemIndicator;
+exports.AccordionItemTrigger = AccordionItemTrigger;
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+exports.Carousel = Carousel;
+exports.CarouselControl = CarouselControl;
+exports.CarouselIndicator = CarouselIndicator;
+exports.CarouselIndicatorGroup = CarouselIndicatorGroup;
+exports.CarouselItem = CarouselItem;
+exports.CarouselItemGroup = CarouselItemGroup;
+exports.CarouselNextTrigger = CarouselNextTrigger;
+exports.CarouselPrevTrigger = CarouselPrevTrigger;
+exports.CarouselViewport = CarouselViewport;
+exports.Checkbox = Checkbox;
+exports.CheckboxControl = CheckboxControl;
+exports.CheckboxIndicator = CheckboxIndicator;
+exports.CheckboxLabel = CheckboxLabel;
+exports.ColorPicker = ColorPicker;
+exports.ColorPickerArea = ColorPickerArea;
+exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
+exports.ColorPickerAreaThumb = ColorPickerAreaThumb;
+exports.ColorPickerChannelInput = ColorPickerChannelInput;
+exports.ColorPickerChannelSlider = ColorPickerChannelSlider;
+exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;
+exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;
+exports.ColorPickerContent = ColorPickerContent;
+exports.ColorPickerControl = ColorPickerControl;
+exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;
+exports.ColorPickerLabel = ColorPickerLabel;
+exports.ColorPickerPositioner = ColorPickerPositioner;
+exports.ColorPickerSwatch = ColorPickerSwatch;
+exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;
+exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;
+exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;
+exports.ColorPickerTrigger = ColorPickerTrigger;
+exports.Combobox = Combobox;
+exports.ComboboxClearTrigger = ComboboxClearTrigger;
+exports.ComboboxContent = ComboboxContent;
+exports.ComboboxControl = ComboboxControl;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxItem = ComboboxItem;
+exports.ComboboxItemGroup = ComboboxItemGroup;
+exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;
+exports.ComboboxItemIndicator = ComboboxItemIndicator;
+exports.ComboboxItemText = ComboboxItemText;
+exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxPositioner = ComboboxPositioner;
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.DatePicker = DatePicker;
+exports.DatePickerClearTrigger = DatePickerClearTrigger;
+exports.DatePickerContent = DatePickerContent;
+exports.DatePickerControl = DatePickerControl;
+exports.DatePickerInput = DatePickerInput;
+exports.DatePickerLabel = DatePickerLabel;
+exports.DatePickerMonthSelect = DatePickerMonthSelect;
+exports.DatePickerNextTrigger = DatePickerNextTrigger;
+exports.DatePickerPositioner = DatePickerPositioner;
+exports.DatePickerPrevTrigger = DatePickerPrevTrigger;
+exports.DatePickerRangeText = DatePickerRangeText;
+exports.DatePickerTable = DatePickerTable;
+exports.DatePickerTableBody = DatePickerTableBody;
+exports.DatePickerTableCell = DatePickerTableCell;
+exports.DatePickerTableCellTrigger = DatePickerTableCellTrigger;
+exports.DatePickerTableHead = DatePickerTableHead;
+exports.DatePickerTableHeader = DatePickerTableHeader;
+exports.DatePickerTableRow = DatePickerTableRow;
+exports.DatePickerTrigger = DatePickerTrigger;
+exports.DatePickerView = DatePickerView;
+exports.DatePickerViewControl = DatePickerViewControl;
+exports.DatePickerViewTrigger = DatePickerViewTrigger;
+exports.DatePickerYearSelect = DatePickerYearSelect;
+exports.Dialog = Dialog;
+exports.DialogBackdrop = DialogBackdrop;
+exports.DialogCloseTrigger = DialogCloseTrigger;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogPositioner = DialogPositioner;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.Editable = Editable;
+exports.EditableArea = EditableArea;
+exports.EditableCancelTrigger = EditableCancelTrigger;
+exports.EditableControl = EditableControl;
+exports.EditableEditTrigger = EditableEditTrigger;
+exports.EditableInput = EditableInput;
+exports.EditableLabel = EditableLabel;
+exports.EditablePreview = EditablePreview;
+exports.EditableSubmitTrigger = EditableSubmitTrigger;
+exports.Environment = Environment;
+exports.HoverCard = HoverCard;
+exports.HoverCardArrow = HoverCardArrow;
+exports.HoverCardArrowTip = HoverCardArrowTip;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardPositioner = HoverCardPositioner;
+exports.HoverCardTrigger = HoverCardTrigger;
+exports.Menu = Menu;
+exports.MenuArrow = MenuArrow;
+exports.MenuArrowTip = MenuArrowTip;
+exports.MenuContent = MenuContent;
+exports.MenuContextTrigger = MenuContextTrigger;
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuItemGroupLabel = MenuItemGroupLabel;
+exports.MenuOptionItem = MenuOptionItem;
+exports.MenuPositioner = MenuPositioner;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;
+exports.MenuTriggerItem = MenuTriggerItem;
+exports.NumberInput = NumberInput;
+exports.NumberInputControl = NumberInputControl;
+exports.NumberInputDecrementTrigger = NumberInputDecrementTrigger;
+exports.NumberInputIncrementTrigger = NumberInputIncrementTrigger;
+exports.NumberInputInput = NumberInputInput;
+exports.NumberInputLabel = NumberInputLabel;
+exports.NumberInputScrubber = NumberInputScrubber;
+exports.Pagination = Pagination;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationNextTrigger = PaginationNextTrigger;
+exports.PaginationPrevTrigger = PaginationPrevTrigger;
+exports.PinInput = PinInput;
+exports.PinInputControl = PinInputControl;
+exports.PinInputInput = PinInputInput;
+exports.PinInputLabel = PinInputLabel;
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverArrow = PopoverArrow;
+exports.PopoverArrowTip = PopoverArrowTip;
+exports.PopoverCloseTrigger = PopoverCloseTrigger;
+exports.PopoverContent = PopoverContent;
+exports.PopoverDescription = PopoverDescription;
+exports.PopoverIndicator = PopoverIndicator;
+exports.PopoverPositioner = PopoverPositioner;
+exports.PopoverTitle = PopoverTitle;
+exports.PopoverTrigger = PopoverTrigger;
+exports.Presence = Presence;
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupItem = RadioGroupItem;
+exports.RadioGroupItemControl = RadioGroupItemControl;
+exports.RadioGroupItemText = RadioGroupItemText;
+exports.RadioGroupLabel = RadioGroupLabel;
+exports.RatingGroup = RatingGroup;
+exports.RatingGroupControl = RatingGroupControl;
+exports.RatingGroupItem = RatingGroupItem;
+exports.RatingGroupLabel = RatingGroupLabel;
+exports.SegmentGroup = SegmentGroup;
+exports.SegmentGroupIndicator = SegmentGroupIndicator;
+exports.SegmentGroupItem = SegmentGroupItem;
+exports.SegmentGroupItemControl = SegmentGroupItemControl;
+exports.SegmentGroupItemText = SegmentGroupItemText;
+exports.SegmentGroupLabel = SegmentGroupLabel;
+exports.Select = Select;
+exports.SelectClearTrigger = SelectClearTrigger;
+exports.SelectContent = SelectContent;
+exports.SelectControl = SelectControl;
+exports.SelectIndicator = SelectIndicator;
+exports.SelectItem = SelectItem;
+exports.SelectItemGroup = SelectItemGroup;
+exports.SelectItemGroupLabel = SelectItemGroupLabel;
+exports.SelectItemIndicator = SelectItemIndicator;
+exports.SelectItemText = SelectItemText;
+exports.SelectLabel = SelectLabel;
+exports.SelectPositioner = SelectPositioner;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValueText = SelectValueText;
+exports.Slider = Slider;
+exports.SliderControl = SliderControl;
+exports.SliderLabel = SliderLabel;
+exports.SliderMarker = SliderMarker;
+exports.SliderMarkerGroup = SliderMarkerGroup;
+exports.SliderOutput = SliderOutput;
+exports.SliderRange = SliderRange;
+exports.SliderThumb = SliderThumb;
+exports.SliderTrack = SliderTrack;
+exports.Splitter = Splitter;
+exports.SplitterPanel = SplitterPanel;
+exports.SplitterResizeTrigger = SplitterResizeTrigger;
+exports.Switch = Switch;
+exports.SwitchControl = SwitchControl;
+exports.SwitchLabel = SwitchLabel;
+exports.SwitchThumb = SwitchThumb;
+exports.TabContent = TabContent;
+exports.TabIndicator = TabIndicator;
+exports.TabList = TabList;
+exports.TabTrigger = TabTrigger;
+exports.Tabs = Tabs;
+exports.TagsInput = TagsInput;
+exports.TagsInputClearTrigger = TagsInputClearTrigger;
+exports.TagsInputControl = TagsInputControl;
+exports.TagsInputInput = TagsInputInput;
+exports.TagsInputItem = TagsInputItem;
+exports.TagsInputItemDeleteTrigger = TagsInputItemDeleteTrigger;
+exports.TagsInputItemInput = TagsInputItemInput;
+exports.TagsInputItemText = TagsInputItemText;
+exports.TagsInputLabel = TagsInputLabel;
+exports.Toast = Toast;
+exports.ToastCloseTrigger = ToastCloseTrigger;
+exports.ToastDescription = ToastDescription;
+exports.ToastTitle = ToastTitle;
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipArrowTip = TooltipArrowTip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipPositioner = TooltipPositioner;
+exports.TooltipTrigger = TooltipTrigger;
+exports.ark = ark;
+exports.createToaster = createToaster;
+exports.splitPresenceProps = splitPresenceProps;
+exports.useAccordionContext = useAccordionContext;
+exports.useAccordionItemContext = useAccordionItemContext;
+exports.useAvatarContext = useAvatarContext;
+exports.useCarouselContext = useCarouselContext;
+exports.useCheckboxContext = useCheckboxContext;
+exports.useColorPickerAreaContext = useColorPickerAreaContext;
+exports.useColorPickerChannelSliderContext = useColorPickerChannelSliderContext;
+exports.useColorPickerContext = useColorPickerContext;
+exports.useComboboxContext = useComboboxContext;
+exports.useDatePickerContext = useDatePickerContext;
+exports.useDatePickerTableCellContext = useDatePickerTableCellContext;
+exports.useDatePickerTableContext = useDatePickerTableContext;
+exports.useDatePickerViewContext = useDatePickerViewContext;
+exports.useDialogContext = useDialogContext;
+exports.useEditableContext = useEditableContext;
+exports.useEnvironmentContext = useEnvironmentContext;
+exports.useHoverCardContext = useHoverCardContext;
+exports.useMenuContext = useMenuContext;
+exports.useNumberInputContext = useNumberInputContext;
+exports.usePaginationContext = usePaginationContext;
+exports.usePinInputContext = usePinInputContext;
+exports.usePopoverContext = usePopoverContext;
+exports.useRadioGroupContext = useRadioGroupContext;
+exports.useRadioGroupItemContext = useRadioGroupItemContext;
+exports.useRatingGroupContext = useRatingGroupContext;
+exports.useRatingGroupItemContext = useRatingGroupItemContext;
+exports.useSegmentGroupContext = useSegmentGroupContext;
+exports.useSegmentGroupItemContext = useSegmentGroupItemContext;
+exports.useSelectContext = useSelectContext;
+exports.useSelectItemContext = useSelectItemContext;
+exports.useSliderContext = useSliderContext;
+exports.useSplitterContext = useSplitterContext;
+exports.useSwitchContext = useSwitchContext;
+exports.useTabsContext = useTabsContext;
+exports.useTagsInputContext = useTagsInputContext;
+exports.useTagsInputItemContext = useTagsInputItemContext;
+exports.useToggleGroupContext = useToggleGroupContext;
+exports.useTooltipContext = useTooltipContext;
+//# sourceMappingURL=index.js.map