@ark-ui/solid 1.0.0-beta.1 → 1.0.0-beta.3

package/esm/index.js

@@ -0,0 +1,3375 @@
+import { spread as spread$1, createComponent, Dynamic, mergeProps as mergeProps$1, memo, use, template, insert, effect } from 'solid-js/web';
+import { mergeProps as mergeProps$2, useMachine, normalizeProps, useActor } from '@zag-js/solid';
+import { splitProps, createMemo, mergeProps, children, createEffect, createContext as createContext$1, useContext, createUniqueId, createSignal, Index, onCleanup } from 'solid-js';
+import * as accordion from '@zag-js/accordion';
+import * as presence from '@zag-js/presence';
+import * as avatar from '@zag-js/avatar';
+import * as carousel from '@zag-js/carousel';
+import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
+import * as checkbox from '@zag-js/checkbox';
+import * as colorPicker from '@zag-js/color-picker';
+import * as combobox from '@zag-js/combobox';
+import * as datePicker from '@zag-js/date-picker';
+import * as dialog from '@zag-js/dialog';
+import * as editable from '@zag-js/editable';
+import * as hoverCard from '@zag-js/hover-card';
+import * as menu from '@zag-js/menu';
+import * as numberInput from '@zag-js/number-input';
+import * as pagination from '@zag-js/pagination';
+import * as pinInput from '@zag-js/pin-input';
+import * as popover from '@zag-js/popover';
+import * as radio from '@zag-js/radio-group';
+import * as rating from '@zag-js/rating-group';
+import * as select from '@zag-js/select';
+import * as slider from '@zag-js/slider';
+import * as splitter from '@zag-js/splitter';
+import * as zagSwitch from '@zag-js/switch';
+import * as tabs from '@zag-js/tabs';
+import * as tagsInput from '@zag-js/tags-input';
+import * as toggleGroup from '@zag-js/toggle-group';
+import * as tooltip from '@zag-js/tooltip';
+import * as toast from '@zag-js/toast';
+
+const createSplitProps = () => (props, keys) => splitProps(props, keys);
+
+const mergeStyle = (a, b) => styleObjectToString({
+  ...getStyleObject(a),
+  ...getStyleObject(b)
+});
+const getStyleObject = style => typeof style === 'object' ? style : stringStyleToObject(style);
+const stringStyleToObject = style => {
+  const object = {};
+  if (!style) return object;
+  const extractCSSregex = /([^:; ]*):\s*([^;]*)/g;
+  let match;
+  while (match = extractCSSregex.exec(style)) {
+    object[match[1]] = match[2];
+  }
+  return object;
+};
+const styleObjectToString = value => {
+  if (!value) return '';
+  let result = '';
+  const k = Object.keys(value);
+  for (let i = 0; i < k.length; i++) {
+    const s = k[i];
+    // @ts-expect-error - we know this is a string
+    const v = value[s];
+    if (v != undefined) {
+      if (i) result += ';';
+      result += `${s}:${v}`;
+    }
+  }
+  return result;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const getEventKey = key => `$$${key.toLowerCase().slice(2)}`;
+const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+function mapProps(props, mapper) {
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, mapper(key, value)]));
+}
+const spread = (node, props) => {
+  const nodeEvents = Object.fromEntries(Object.keys(node).filter(prop => prop.startsWith('$$'))
+  // @ts-expect-error - fix later
+  .map(prop => [prop, node[prop]]));
+  const childProps = createMemo(() => mapProps(props, (key, value) => {
+    const eventKey = getEventKey(key);
+
+    // event composition
+    if (hasOwn(nodeEvents, eventKey)) {
+      return function next(...args) {
+        if (typeof value === 'function') value(...args);
+        nodeEvents[eventKey](...args);
+      };
+    }
+
+    // style composition
+    if (key === 'style') {
+      return mergeStyle(node.style.cssText, value);
+    }
+
+    // class composition
+    if (key === 'class') {
+      return [node.className, value].filter(Boolean).join(' ');
+    }
+
+    // don't override existing child attributes
+    if (node.hasAttribute(key)) return;
+    return value;
+  }));
+  spread$1(node, 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] = splitProps(props, ['asChild', 'children']);
+    if (!localProps.asChild) {
+      return createComponent(Dynamic, mergeProps$1({
+        component: Component
+      }, restProps, {
+        get children() {
+          return localProps.children;
+        }
+      }));
+    }
+    const getChildren = children(() => ssrSpread(localProps.children, restProps));
+    createEffect(() => {
+      const children = getChildren();
+      if (children instanceof HTMLElement) {
+        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 = createContext$1(undefined);
+  function useContext$1() {
+    const context = useContext(Context);
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+      error.name = 'ContextError';
+      Error.captureStackTrace?.(error, useContext$1);
+      throw error;
+    }
+    return context;
+  }
+  return [Context.Provider, useContext$1, Context];
+}
+
+const [AccordionProvider, useAccordionContext] = createContext({
+  hookName: 'useAccordionContext',
+  providerName: '<AccordionProvider />'
+});
+
+const [EnvironmentProvider, useEnvironmentContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false
+});
+
+const _tmpl$$m = /*#__PURE__*/template(`<span hidden>`);
+const Environment$1 = props => {
+  // eslint-disable-next-line prefer-const
+  let spanRef = undefined;
+  const currentEnv = createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+  return createComponent(EnvironmentProvider, {
+    get value() {
+      return currentEnv();
+    },
+    get children() {
+      return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
+        const _el$ = _tmpl$$m();
+        const _ref$ = spanRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
+        return _el$;
+      })())];
+    }
+  });
+};
+
+const Environment = Object.assign(Environment$1, {
+  Root: Environment$1
+});
+
+const useAccordion = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(accordion.machine(context), {
+    context
+  });
+  return createMemo(() => accordion.connect(state, send, normalizeProps));
+};
+
+const Accordion$1 = props => {
+  const [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const api = useAccordion(params);
+  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(AccordionProvider, {
+    value: api,
+    get children() {
+      return 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 = mergeProps$2(() => api().getItemProps(itemProps), restProps);
+  const accordionItem = mergeProps$2(() => api().getItemState(itemProps), itemProps);
+  const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemProps));
+  return createComponent(AccordionItemProvider, {
+    value: accordionItem,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const usePresence = props => {
+  const [state, send] = useMachine(presence.machine(props), {
+    context: props
+  });
+  return createMemo(() => presence.connect(state, send, normalizeProps));
+};
+
+const Presence$1 = props => {
+  const [presenceProps, localProps] = createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = createSignal(false);
+  const getChildren = children(() => props.children);
+  createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      spread$1(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return memo((() => {
+    const _c$ = memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? localProps.fallback : getChildren();
+  })());
+};
+
+function splitPresenceProps(props) {
+  return createSplitProps()(props, ['fallback', 'lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+}
+
+const Presence = Object.assign(Presence$1, {
+  Root: Presence$1
+});
+
+const _tmpl$$l = /*#__PURE__*/template(`<div>`);
+const AccordionItemContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useAccordionContext();
+  const accordionItem = useAccordionItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemContentProps(accordionItem), localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return accordionItem.isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$l();
+        spread$1(_el$, mergeProps$1(() => api().getItemContentProps(accordionItem)), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const AccordionItemIndicator = props => {
+  const api = useAccordionContext();
+  const itemParams = useAccordionItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemIndicatorProps(itemParams), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const AccordionItemTrigger = props => {
+  const api = useAccordionContext();
+  const item = useAccordionItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemTriggerProps(item), props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(avatar.machine(context), {
+    context
+  });
+  return createMemo(() => avatar.connect(state, send, normalizeProps));
+};
+
+const Avatar$1 = props => {
+  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  const api = useAvatar(params);
+  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(AvatarProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const AvatarFallback = props => {
+  const avatar = useAvatarContext();
+  const fallbackProps = mergeProps$2(() => avatar().fallbackProps, props);
+  return createComponent(ark.span, fallbackProps);
+};
+
+const AvatarImage = props => {
+  const avatar = useAvatarContext();
+  const imageProps = mergeProps$2(() => avatar().imageProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(carousel.machine(context), {
+    context
+  });
+  return createMemo(() => carousel.connect(state, send, normalizeProps));
+};
+
+const Carousel$1 = props => {
+  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
+  const carousel = useCarousel(useCarouselProps);
+  const rootProps = mergeProps$2(() => carousel().rootProps, localProps);
+  return createComponent(CarouselProvider, {
+    value: carousel,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const CarouselControl = props => {
+  const mergedProps = mergeProps$2(() => carouselAnatomy.build().control.attrs, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps()(props, ['index', 'readOnly']);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().getIndicatorProps(indicatorProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const CarouselIndicatorGroup = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().indicatorGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselNextTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().nextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const CarouselPrevTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().prevTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const CarouselItem = props => {
+  const [slideParams, localProps] = createSplitProps()(props, ['index']);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().getItemProps(slideParams), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselItemGroup = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().itemGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselViewport = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$2(() => api().viewportProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(checkbox.machine(context), {
+    context
+  });
+  return createMemo(() => checkbox.connect(state, send, normalizeProps));
+};
+
+const Checkbox$1 = props => {
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
+  const api = useCheckbox(useCheckboxProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, labelprops);
+  const getChildren = () => runIfFn(props.children, api);
+  return createComponent(CheckboxProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.label, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const _tmpl$$k = /*#__PURE__*/template(`<input>`);
+const CheckboxControl = props => {
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$k();
+    spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const CheckboxIndicator = props => {
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CheckboxLabel = props => {
+  const checkbox = useCheckboxContext();
+  const labelProps = mergeProps$2(() => checkbox().labelProps, props);
+  return 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] = splitProps(props, ['value']);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2(() => ({
+    id: createUniqueId(),
+    getRootNode,
+    value: local.value ? colorPicker.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(colorPicker.machine(context), {
+    context
+  });
+  return createMemo(() => colorPicker.connect(state, send, normalizeProps));
+};
+
+const _tmpl$$j = /*#__PURE__*/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 = mergeProps$2(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$$j();
+        spread$1(_el$, mergeProps$1(() => 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 = mergeProps$2(() => api().getAreaProps(channelProps), divprops);
+  return createComponent(ColorPickerAreaProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerAreaBackground = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerAreaThumb = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getAreaThumbProps(colorAreaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelInput = props => {
+  const [channelProps, inputProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getChannelInputProps(channelProps), inputProps);
+  return 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 = mergeProps$2(() => api().getChannelSliderProps(channelProps), localProps);
+  return createComponent(ColorPickerChannelSliderProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerChannelSliderThumb = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getChannelSliderThumbProps(sliderContext), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelSliderTrack = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getChannelSliderTrackProps(sliderContext), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const _tmpl$$i = /*#__PURE__*/template(`<div>`);
+const ColorPickerContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$i();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const ColorPickerControl = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerEyeDropperTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().eyeDropperTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerLabel = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const ColorPickerPositioner = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatch = props => {
+  const [colorSwatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getSwatchProps(colorSwatchProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatchGroup = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().swatchGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatchTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getSwatchTriggerProps(triggerProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerTransparencyGrid = props => {
+  const [gridProps, localProps] = createSplitProps()(props, ['size']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().getTransparencyGridProps(gridProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerValueText = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    get children() {
+      return api().valueAsString || props.children;
+    }
+  }));
+};
+
+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,
+  ValueText: ColorPickerValueText
+});
+
+// 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.collection(collectionOptions);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode,
+    collection
+  }, rest);
+  const [state, send] = useMachine(combobox.machine(context), {
+    context
+  });
+  return createMemo(() => combobox.connect(state, send, 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 = mergeProps$2(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(ComboboxProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ComboboxClearTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const _tmpl$$h = /*#__PURE__*/template(`<div>`);
+const ComboboxContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$h();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const ComboboxControl = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxInput = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().inputProps, props);
+  return 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 = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(ComboboxItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ComboboxItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().getItemGroupProps(groupProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemIndicator = props => {
+  const combobox = useComboboxContext();
+  const itemProps = useComboboxItemContext();
+  const mergedProps = mergeProps$2(() => combobox().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemText = props => {
+  const api = useComboboxContext();
+  const itemProps = useComboboxItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const ComboboxLabel = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const ComboboxPositioner = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$2(() => combobox().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const Combobox = Object.assign(Combobox$1, {
+  Root: Combobox$1,
+  ClearTrigger: ComboboxClearTrigger,
+  Content: ComboboxContent,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  ItemIndicator: ComboboxItemIndicator,
+  ItemText: ComboboxItemText,
+  Label: ComboboxLabel,
+  Positioner: ComboboxPositioner,
+  Trigger: ComboboxTrigger
+});
+
+const [DatePickerProvider, useDatePickerContext] = createContext({
+  hookName: 'useDatePickerContext',
+  providerName: '<DatePickerProvider />'
+});
+
+const useDatePicker = props => {
+  const [local, rest] = splitProps(props, ['value', 'focusedValue']);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2(() => ({
+    id: createUniqueId(),
+    getRootNode,
+    focusedValue: local.focusedValue ? datePicker.parse(local.focusedValue) : undefined,
+    value: local.value ? datePicker.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(datePicker.machine(context), {
+    context
+  });
+  return createMemo(() => datePicker.connect(state, send, normalizeProps));
+};
+
+const DatePicker$1 = props => {
+  const [datePickerProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', '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 = mergeProps$2(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(DatePickerProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const DatePickerClearTrigger = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const _tmpl$$g = /*#__PURE__*/template(`<div>`);
+const DatePickerContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$g();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const DatePickerControl = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DatePickerInput = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const DatePickerLabel = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const _tmpl$$f = /*#__PURE__*/template(`<option>`);
+const DatePickerMonthSelect = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().monthSelectProps, props);
+  return createComponent(ark.select, mergeProps$1(mergedProps, {
+    get children() {
+      return api().getMonths().map(month => (() => {
+        const _el$ = _tmpl$$f();
+        insert(_el$, () => month.label);
+        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 = mergeProps$2(() => api().getNextTriggerProps(viewProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerPositioner = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DatePickerPrevTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = mergeProps$2(() => api().getPrevTriggerProps(viewProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerRangeText = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().rangeTextProps, props);
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
+    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: createUniqueId(),
+    ...viewProps
+  };
+  const mergedProps = mergeProps$2(() => api().getTableProps(tableProps), localProps);
+  return createComponent(DatePickerTableProvider, {
+    value: tableProps,
+    get children() {
+      return createComponent(ark.table, mergedProps);
+    }
+  });
+};
+
+const DatePickerTableBody = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$2(() => api().getTableBodyProps(tableProps), props);
+  return 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 = mergeProps$2(() => tableCellProps, localProps);
+  return createComponent(DatePickerTableCellProvider, {
+    value: cellProps,
+    get children() {
+      return 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 = mergeProps$2(() => triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerTableHead = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$2(() => api().getTableHeadProps(tableProps), props);
+  return createComponent(ark.thead, mergedProps);
+};
+
+const DatePickerTableHeader = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$2(() => api().getTableHeaderProps(tableProps), props);
+  return createComponent(ark.th, mergedProps);
+};
+
+const DatePickerTableRow = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$2(() => api().getTableRowProps(tableProps), props);
+  return createComponent(ark.tr, mergedProps);
+};
+
+const DatePickerTrigger = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerView = props => {
+  const [viewProps, localProps] = createSplitProps()(props, ['view']);
+  const api = useDatePickerContext();
+  const getChildren = () => runIfFn(localProps.children, api);
+  const mergedProps = mergeProps$2(() => datePickerAnatomy.build().view.attrs, localProps);
+  return createComponent(DatePickerViewProvider, {
+    value: viewProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get hidden() {
+          return api().view !== viewProps.view;
+        },
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const DatePickerViewControl = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = mergeProps$2(() => api().getViewControlProps(viewProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DatePickerViewTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = mergeProps$2(() => api().getViewTriggerProps(viewProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const _tmpl$$e = /*#__PURE__*/template(`<option>`);
+const DatePickerYearSelect = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$2(() => api().yearSelectProps, props);
+  return createComponent(ark.select, mergeProps$1(mergedProps, {
+    get children() {
+      return getYearsRange({
+        from: 1_000,
+        to: 4_000
+      }).map(year => (() => {
+        const _el$ = _tmpl$$e();
+        _el$.value = year;
+        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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(dialog.machine(context), {
+    context
+  });
+  return createMemo(() => dialog.connect(state, send, normalizeProps));
+};
+
+const Dialog$1 = props => {
+  const [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 createComponent(DialogProvider, {
+    value: api,
+    get children() {
+      return getChildren();
+    }
+  });
+};
+
+const _tmpl$$d = /*#__PURE__*/template(`<div>`);
+const DialogBackdrop = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps$2(() => api().backdropProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$d();
+        spread$1(_el$, mergeProps$1(() => api().backdropProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const DialogCloseTrigger = props => {
+  const dialog = useDialogContext();
+  const triggerProps = mergeProps$2(() => dialog().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const _tmpl$$c = /*#__PURE__*/template(`<div>`);
+const DialogContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$c();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const DialogDescription = props => {
+  const dialog = useDialogContext();
+  const descriptionProps = mergeProps$2(() => dialog().descriptionProps, props);
+  return createComponent(ark.p, descriptionProps);
+};
+
+const DialogPositioner = props => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps$2(() => dialog().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DialogTitle = props => {
+  const dialog = useDialogContext();
+  const titleProps = mergeProps$2(() => dialog().titleProps, props);
+  return createComponent(ark.h2, titleProps);
+};
+
+const DialogTrigger = props => {
+  const dialog = useDialogContext();
+  const triggerProps = mergeProps$2(() => dialog().triggerProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(editable.machine(context), {
+    context
+  });
+  return createMemo(() => editable.connect(state, send, normalizeProps));
+};
+
+const Editable$1 = props => {
+  const [useEditableProps, 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] = splitProps(restProps, ['children']);
+  const rootProps = mergeProps$2(() => editable().rootProps, localProps);
+  const getChildren = () => runIfFn(childrenProps.children, editable);
+  return createComponent(EditableProvider, {
+    value: editable,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const EditableArea = props => {
+  const editable = useEditableContext();
+  const areaProps = mergeProps$2(() => editable().areaProps, props);
+  return createComponent(ark.div, areaProps);
+};
+
+const EditableCancelTrigger = props => {
+  const editable = useEditableContext();
+  const triggerProps = mergeProps$2(() => editable().cancelTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const EditableControl = props => {
+  const editable = useEditableContext();
+  const controlProps = mergeProps$2(() => editable().controlProps, props);
+  return createComponent(ark.div, controlProps);
+};
+
+const EditableEditTrigger = props => {
+  const editable = useEditableContext();
+  const triggerProps = mergeProps$2(() => editable().editTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const EditableInput = props => {
+  const editable = useEditableContext();
+  const inputProps = mergeProps$2(() => editable().inputProps, props);
+  return createComponent(ark.input, inputProps);
+};
+
+const EditableLabel = props => {
+  const editable = useEditableContext();
+  const labelProps = mergeProps$2(() => editable().labelProps, props);
+  return createComponent(ark.label, labelProps);
+};
+
+const EditablePreview = props => {
+  const editable = useEditableContext();
+  const previewProps = mergeProps$2(() => editable().previewProps, props);
+  return createComponent(ark.span, previewProps);
+};
+
+const EditableSubmitTrigger = props => {
+  const dialog = useEditableContext();
+  const triggerProps = mergeProps$2(() => dialog().submitTriggerProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(hoverCard.machine(context), {
+    context
+  });
+  return createMemo(() => hoverCard.connect(state, send, normalizeProps));
+};
+
+const HoverCard$1 = props => {
+  const [hoverCardProps, localProps] = createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useHoverCard(hoverCardProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(HoverCardProvider, {
+    value: api,
+    get children() {
+      return getChildren();
+    }
+  });
+};
+
+const HoverCardArrow = props => {
+  const hoverCard = useHoverCardContext();
+  const arrowProps = mergeProps$2(() => hoverCard().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
+};
+
+const HoverCardArrowTip = props => {
+  const hoverCard = useHoverCardContext();
+  const tipProps = mergeProps$2(() => hoverCard().arrowTipProps, props);
+  return createComponent(ark.div, tipProps);
+};
+
+const _tmpl$$b = /*#__PURE__*/template(`<div>`);
+const HoverCardContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useHoverCardContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$b();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const HoverCardPositioner = props => {
+  const hoverCard = useHoverCardContext();
+  const positionerProps = mergeProps$2(() => hoverCard().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
+};
+
+const HoverCardTrigger = props => {
+  const hoverCard = useHoverCardContext();
+  const triggerProps = mergeProps$2(() => hoverCard().triggerProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send, machine] = useMachine(menu.machine(context), {
+    context
+  });
+  return createMemo(() => ({
+    api: () => menu.connect(state, send, normalizeProps),
+    machine: machine
+  }));
+};
+
+const Menu$1 = props => {
+  const [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);
+  createEffect(() => {
+    if (!parentMachine) return;
+    parentMenu?.().setChild(menu().machine);
+    menu().api().setParent(parentMachine());
+  });
+  createEffect(() => {
+    if (!restProps.isOpen) return;
+    restProps.isOpen?.() ? menu().api().open() : menu().api().close();
+  });
+  const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+  const machineContext = () => menu().machine;
+  const getChildren = () => runIfFn(restProps.children, () => ({
+    isOpen: menu?.().api().isOpen,
+    onClose: menu?.().api().close
+  }));
+  return createComponent(MenuTriggerItemProvider, {
+    value: triggerItemContext,
+    get children() {
+      return createComponent(MenuMachineProvider, {
+        value: machineContext,
+        get children() {
+          return createComponent(MenuProvider, {
+            get value() {
+              return menu().api;
+            },
+            get children() {
+              return getChildren();
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
+const MenuArrow = props => {
+  const menu = useMenuContext();
+  const arrowProps = mergeProps$2(() => menu?.().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
+};
+
+const MenuArrowTip = props => {
+  const menu = useMenuContext();
+  const arrowTipProps = mergeProps$2(() => menu?.().arrowTipProps, props);
+  return createComponent(ark.div, arrowTipProps);
+};
+
+const _tmpl$$a = /*#__PURE__*/template(`<div>`);
+const MenuContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useMenuContext();
+  const mergedProps = mergeProps$2(() => api?.().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api?.().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$a();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const MenuContextTrigger = props => {
+  const menu = useMenuContext();
+  const triggerProps = mergeProps$2(() => menu?.().contextTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const MenuItem = props => {
+  const menu = useMenuContext();
+  const [itemParams, restProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect']);
+  const itemProps = mergeProps$2(() => menu?.().getItemProps(itemParams), restProps);
+  return createComponent(ark.div, itemProps);
+};
+
+const MenuItemGroup = props => {
+  const menu = useMenuContext();
+  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const groupProps = mergeProps$2(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(ark.div, groupProps);
+};
+
+const MenuItemGroupLabel = props => {
+  const menu = useMenuContext();
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const mergedProps = mergeProps$2(() => menu?.().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const MenuOptionItem = props => {
+  const menu = useMenuContext();
+  const [optionProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'valueText', 'closeOnSelect', 'name', 'type', 'value', 'onCheckedChange']);
+  const itemProps = mergeProps$2(() => menu().getOptionItemProps(optionProps), localProps);
+  const itemState = createMemo(() => menu().getOptionItemState(optionProps));
+  const getChildren = () => runIfFn(localProps.children, itemState);
+  return createComponent(ark.div, mergeProps$1(itemProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const MenuPositioner = props => {
+  const menu = useMenuContext();
+  const positionerProps = mergeProps$2(() => menu?.().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
+};
+
+const MenuSeparator = props => {
+  const menu = useMenuContext();
+  const separatorProps = mergeProps$2(() => menu?.().separatorProps, props);
+  return createComponent(ark.hr, separatorProps);
+};
+
+const MenuTrigger = props => {
+  const menu = useMenuContext();
+  const triggerProps = mergeProps$2(() => menu?.().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const MenuTriggerItem = props => {
+  const getTriggerItemProps = useMenuTriggerItemContext();
+  const triggerProps = mergeProps$2(() => getTriggerItemProps?.(), props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(numberInput.machine(context), {
+    context
+  });
+  return createMemo(() => numberInput.connect(state, send, normalizeProps));
+};
+
+const NumberInput$1 = props => {
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const api = useNumberInput(useNumberInputProps);
+  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(NumberInputProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const NumberInputControl = props => {
+  const api = useNumberInputContext();
+  const controlProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, controlProps);
+};
+
+const NumberInputDecrementTrigger = props => {
+  const api = useNumberInputContext();
+  const triggerProps = mergeProps$2(() => api().decrementTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const NumberInputInput = props => {
+  const api = useNumberInputContext();
+  const inputProps = mergeProps$2(() => api().inputProps, props);
+  return createComponent(ark.input, inputProps);
+};
+
+const NumberInputIncrementTrigger = props => {
+  const api = useNumberInputContext();
+  const triggerProps = mergeProps$2(() => api().incrementTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const NumberInputLabel = props => {
+  const api = useNumberInputContext();
+  const labelProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, labelProps);
+};
+
+const NumberInputScrubber = props => {
+  const api = useNumberInputContext();
+  const scrubberProps = mergeProps$2(() => api().scrubberProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(pagination.machine(context), {
+    context
+  });
+  return createMemo(() => pagination.connect(state, send, normalizeProps));
+};
+
+const Pagination$1 = props => {
+  const [paginationParams, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [childrenProps, localProps] = splitProps(restProps, ['children']);
+  const api = usePagination(paginationParams);
+  const getChildren = () => runIfFn(childrenProps.children, api);
+  const rootProps = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(PaginationProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.nav, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const PaginationEllipsis = props => {
+  const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$2(() => api().getEllipsisProps(ellipsisProps), restProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PaginationItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PaginationNextTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$2(() => api().nextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PaginationPrevTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$2(() => api().prevTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const Pagination = Object.assign(Pagination$1, {
+  Root: Pagination$1,
+  Ellipsis: PaginationEllipsis,
+  Item: PaginationItem,
+  NextTrigger: PaginationNextTrigger,
+  PrevTrigger: PaginationPrevTrigger
+});
+
+const [PinInputProvider, usePinInputContext] = createContext({
+  hookName: 'usePinInputContext',
+  providerName: '<PinInputProvider />'
+});
+
+const usePinInput = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(pinInput.machine(context), {
+    context
+  });
+  return createMemo(() => pinInput.connect(state, send, normalizeProps));
+};
+
+const _tmpl$$9 = /*#__PURE__*/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 = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(PinInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$$9();
+        spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+const PinInputControl = props => {
+  const api = usePinInputContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PinInputInput = props => {
+  const [inputParams, localProps] = splitProps(props, ['index']);
+  const api = usePinInputContext();
+  const inputProps = mergeProps$2(() => api().getInputProps(inputParams), localProps);
+  return createComponent(ark.input, inputProps);
+};
+
+const PinInputLabel = props => {
+  const api = usePinInputContext();
+  const labelProps = mergeProps$2(() => api().labelProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(popover.machine(context), {
+    context
+  });
+  return createMemo(() => popover.connect(state, send, normalizeProps));
+};
+
+const Popover$1 = props => {
+  const [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 createComponent(PopoverProvider, {
+    value: api,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
+
+const PopoverAnchor = props => {
+  const api = usePopoverContext();
+  const anchorProps = mergeProps$2(() => api().anchorProps, props);
+  return createComponent(ark.div, anchorProps);
+};
+
+const PopoverArrow = props => {
+  const popover = usePopoverContext();
+  const arrowProps = mergeProps$2(() => popover().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
+};
+
+const PopoverArrowTip = props => {
+  const popover = usePopoverContext();
+  const arrowTipProps = mergeProps$2(() => popover().arrowTipProps, props);
+  return createComponent(ark.div, arrowTipProps);
+};
+
+const PopoverCloseTrigger = props => {
+  const api = usePopoverContext();
+  const triggerProps = mergeProps$2(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const _tmpl$$8 = /*#__PURE__*/template(`<div>`);
+const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = usePopoverContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$8();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const PopoverDescription = props => {
+  const api = usePopoverContext();
+  const descriptionProps = mergeProps$2(() => api().descriptionProps, props);
+  return createComponent(ark.div, descriptionProps);
+};
+
+const PopoverIndicator = props => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps$2(() => popover().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverPositioner = props => {
+  const api = usePopoverContext();
+  const positionerProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
+};
+
+const PopoverTitle = props => {
+  const api = usePopoverContext();
+  const titleProps = mergeProps$2(() => api().titleProps, props);
+  return createComponent(ark.div, titleProps);
+};
+
+const PopoverTrigger = props => {
+  const api = usePopoverContext();
+  const triggerProps = mergeProps$2(() => api().triggerProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(radio.machine(context), {
+    context
+  });
+  return createMemo(() => radio.connect(state, send, normalizeProps));
+};
+
+const RadioGroup$1 = props => {
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(RadioGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const RadioGroupIndicator = props => {
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps$2(() => api().indicatorProps, props);
+  return 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 = mergeProps$2(() => api().getItemProps(itemProps), restProps);
+  return createComponent(RadioProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const _tmpl$$7 = /*#__PURE__*/template(`<input>`);
+const RadioGroupItemControl = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$7();
+    spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const RadioGroupItemText = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const RadioGroupLabel = props => {
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const RadioGroup = Object.assign(RadioGroup$1, {
+  Root: RadioGroup$1,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel
+});
+
+const [RatingGroupProvider, useRatingGroupContext] = createContext({
+  hookName: 'useRatingGroupContext',
+  providerName: '<RatingGroupProvider />'
+});
+
+const useRatingGroup = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(rating.machine(context), {
+    context
+  });
+  return createMemo(() => rating.connect(state, send, 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 = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(RatingGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
+const RatingGroupControl = props => {
+  const api = useRatingGroupContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return [createComponent(ark.div, mergeProps$1(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  })), (() => {
+    const _el$ = _tmpl$$6();
+    spread$1(_el$, mergeProps$1(() => 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 = mergeProps$2(() => api().getItemProps(ratingParams), restProps);
+  const getChildren = () => runIfFn(restProps.children, itemState);
+  return createComponent(RatingGroupItemProvider, {
+    value: itemState,
+    get children() {
+      return createComponent(ark.span, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const RatingGroupLabel = props => {
+  const api = useRatingGroupContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const RatingGroup = Object.assign(RatingGroup$1, {
+  Root: RatingGroup$1,
+  Control: RatingGroupControl,
+  Label: RatingGroupLabel,
+  Item: RatingGroupItem
+});
+
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  hookName: 'useSegmentGroupContext',
+  providerName: '<SegmentGroupProvider />'
+});
+
+const useSegmentGroup = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(radio.machine(context), {
+    context
+  });
+  return createMemo(() => radio.connect(state, send, normalizeProps));
+};
+
+const SegmentGroup$1 = props => {
+  const [groupParams, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useSegmentGroup(groupParams);
+  const mergedProps = mergeProps$2(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+  return createComponent(SegmentGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SegmentGroupIndicator = props => {
+  const api = useSegmentGroupContext();
+  const mergedProps = mergeProps$2(() => api().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+  return 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 = mergeProps$2(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, restProps);
+  return createComponent(SegmentProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+const SegmentGroupItemControl = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$5();
+    spread$1(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const SegmentGroupItemText = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SegmentGroupLabel = props => {
+  const api = useSegmentGroupContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const SegmentGroup = Object.assign(SegmentGroup$1, {
+  Root: SegmentGroup$1,
+  Indicator: SegmentGroupIndicator,
+  Item: SegmentGroupItem,
+  ItemControl: SegmentGroupItemControl,
+  ItemText: SegmentGroupItemText,
+  Label: SegmentGroupLabel
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const [SelectProvider, useSelectContext] = createContext({
+  hookName: 'useSelectContext',
+  providerName: '<SelectProvider />'
+});
+
+const useSelect = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = select.collection(collectionOptions);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode,
+    collection
+  }, rest);
+  const [state, send] = useMachine(select.machine(context), {
+    context
+  });
+  return createMemo(() => select.connect(state, send, 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 = mergeProps$2(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(SelectProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SelectClearTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const _tmpl$$4 = /*#__PURE__*/template(`<div>`);
+const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$$4();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
+};
+
+const _tmpl$$3 = /*#__PURE__*/template(`<select>`),
+  _tmpl$2 = /*#__PURE__*/template(`<option>`);
+const SelectControl = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$3();
+    spread$1(_el$, mergeProps$1(() => api().hiddenSelectProps), false, true);
+    insert(_el$, createComponent(Index, {
+      get each() {
+        return api().collection.toArray();
+      },
+      children: option => (() => {
+        const _el$2 = _tmpl$2();
+        insert(_el$2, () => option().label);
+        effect(() => _el$2.value = option().value);
+        return _el$2;
+      })()
+    }));
+    return _el$;
+  })()];
+};
+
+const SelectIndicator = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return 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 = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(SelectItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SelectItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().getItemGroupProps(groupProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemIndicator = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemText = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SelectLabel = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const SelectPositioner = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const SelectValueText = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$2(() => selectAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(slider.machine(context), {
+    context
+  });
+  return createMemo(() => slider.connect(state, send, normalizeProps));
+};
+
+const Slider$1 = props => {
+  const [sliderParams, restProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  const api = useSlider(sliderParams);
+  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return createComponent(SliderProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SliderControl = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderLabel = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const SliderMarker = props => {
+  const [markerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().getMarkerProps(markerProps), localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SliderMarkerGroup = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().markerGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderRange = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().rangeProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderThumb = props => {
+  const [thumbProps, localProps] = createSplitProps()(props, ['index']);
+  const api = useSliderContext();
+  const mergePdrops = mergeProps$2(() => api().getThumbProps(thumbProps), localProps);
+  return createComponent(ark.div, mergePdrops);
+};
+
+const SliderTrack = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$2(() => api().trackProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderValueText = props => {
+  const api = useSliderContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const mergedProps = mergeProps$2(() => api().valueTextProps, props);
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const Slider = Object.assign(Slider$1, {
+  Root: Slider$1,
+  Control: SliderControl,
+  Label: SliderLabel,
+  Marker: SliderMarker,
+  MarkerGroup: SliderMarkerGroup,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+  Track: SliderTrack,
+  ValueText: SliderValueText
+});
+
+const [SplitterProvider, useSplitterContext] = createContext({
+  hookName: 'useSplitterContext',
+  providerName: '<SplitterProvider />'
+});
+
+const useSplitter = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(splitter.machine(context), {
+    context
+  });
+  return createMemo(() => splitter.connect(state, send, 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 = mergeProps$2(() => api().rootProps, localProps);
+  return createComponent(SplitterProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const SplitterPanel = props => {
+  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
+  const api = useSplitterContext();
+  const panelProps = mergeProps$2(() => api().getPanelProps(panelParams), restProps);
+  return createComponent(ark.div, panelProps);
+};
+
+const SplitterResizeTrigger = props => {
+  const api = useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
+  const triggerProps = mergeProps$2(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(zagSwitch.machine(context), {
+    context
+  });
+  return createMemo(() => zagSwitch.connect(state, send, 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 = mergeProps$2(() => api().rootProps, labelProps);
+  const getChildren = () => runIfFn(props.children, api);
+  return createComponent(SwitchProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.label, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const _tmpl$$2 = /*#__PURE__*/template(`<input>`);
+const SwitchControl = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return [createComponent(ark.span, mergedProps), (() => {
+    const _el$ = _tmpl$$2();
+    spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const SwitchLabel = props => {
+  const checkbox = useSwitchContext();
+  const labelProps = mergeProps$2(() => checkbox().labelProps, props);
+  return createComponent(ark.span, labelProps);
+};
+
+const SwitchThumb = props => {
+  const checkbox = useSwitchContext();
+  const thumbProps = mergeProps$2(() => checkbox().thumbProps, props);
+  return 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 createComponent(Presence, mergeProps$1({
+    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 = mergeProps$2(() => api().getContentProps(getContentProps), restProps);
+  return createComponent(TabPresence, mergeProps$1(presenceProps, getContentProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
+};
+
+const TabIndicator = props => {
+  const api = useTabsContext();
+  const indicatorProps = mergeProps$2(() => api().indicatorProps, props);
+  return createComponent(ark.div, indicatorProps);
+};
+
+const TabList = props => {
+  const api = useTabsContext();
+  const tablistProps = mergeProps$2(() => api().tablistProps, props);
+  return createComponent(ark.div, tablistProps);
+};
+
+const TabTrigger = props => {
+  const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
+  const api = useTabsContext();
+  const triggerProps = mergeProps$2(() => api().getTriggerProps(tabParams), restProps);
+  return createComponent(ark.button, triggerProps);
+};
+
+const useTabs = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tabs.machine(context), {
+    context
+  });
+  return createMemo(() => tabs.connect(state, send, 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 = mergeProps$2(() => api().rootProps, restProps);
+  return createComponent(TabsProvider, {
+    value: api,
+    get children() {
+      return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tagsInput.machine(context), {
+    context
+  });
+  return createMemo(() => tagsInput.connect(state, send, normalizeProps));
+};
+
+const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
+const TagsInput$1 = props => {
+  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput(tagsInputParams);
+  const mergedProps = mergeProps$2(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return createComponent(TagsInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$$1();
+        spread$1(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+const TagsInputClearTrigger = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$2(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const TagsInputControl = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$2(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TagsInputInput = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$2(() => api().inputProps, props);
+  return 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 = mergeProps$2(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(TagsInputItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const TagsInputItemDeleteTrigger = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemDeleteTriggerProps(itemProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const TagsInputItemInput = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemInputProps(itemProps), props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const TagsInputItemText = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = mergeProps$2(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const TagsInputLabel = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return 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 />'
+});
+
+const createToaster = props => {
+  const {
+    placement,
+    ...rest
+  } = props;
+  const service = toast.group.machine({
+    id: '1',
+    placement,
+    ...rest
+  }).start();
+  const [state, send] = useActor(service);
+  const api = createMemo(() => toast.group.connect(state, send, normalizeProps));
+  const Toaster = props => {
+    const getRootNode = useEnvironmentContext();
+    createEffect(() => {
+      service.setContext({
+        getRootNode
+      });
+      onCleanup(() => service.stop());
+    });
+    const mergedProps = mergeProps$2(() => api().getGroupProps({
+      placement
+    }), props);
+    return createComponent(ark.ol, mergeProps$1(mergedProps, {
+      get children() {
+        return createComponent(Index, {
+          get each() {
+            return api().toastsByPlacement[placement];
+          },
+          children: toast => createComponent(ToastProviderFactory, {
+            get service() {
+              return toast();
+            }
+          })
+        });
+      }
+    }));
+  };
+  return [Toaster, api];
+};
+const ToastProviderFactory = props => {
+  const [state, send] = useActor(props.service);
+  const api = toast.connect(state, send, normalizeProps);
+  return createComponent(ToastProvider, {
+    get value() {
+      return createMemo(() => api);
+    },
+    get children() {
+      return state.context.render?.(api);
+    }
+  });
+};
+
+const Toast$1 = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$2(() => api().rootProps, props);
+  return createComponent(ark.li, mergedProps);
+};
+
+const ToastCloseTrigger = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$2(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ToastDescription = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$2(() => api().descriptionProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ToastTitle = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$2(() => api().titleProps, props);
+  return 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 = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(toggleGroup.machine(context), {
+    context
+  });
+  return createMemo(() => toggleGroup.connect(state, send, 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 = mergeProps$2(() => api().rootProps, restProps);
+  return createComponent(ToggleGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+const ToggleGroupItem = props => {
+  const [toggleProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+  const api = useToggleGroupContext();
+  const mergedProps = mergeProps$2(() => api().getItemProps(toggleProps), restProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ToggleGroup = Object.assign(ToggleGroup$1, {
+  Root: ToggleGroup$1,
+  Item: ToggleGroupItem
+});
+
+const [TooltipProvider, useTooltipContext] = createContext({
+  hookName: 'useTooltipContext',
+  providerName: '<TooltipProvider />'
+});
+
+const useTooltip = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tooltip.machine(context), {
+    context
+  });
+  return createMemo(() => tooltip.connect(state, send, normalizeProps));
+};
+
+const Tooltip$1 = props => {
+  const [useTooltipProps, restProps] = createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
+  return createComponent(TooltipProvider, mergeProps$1({
+    value: api
+  }, restProps));
+};
+
+const TooltipArrow = props => {
+  const tooltip = useTooltipContext();
+  const arrowProps = mergeProps$2(() => tooltip().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
+};
+
+const TooltipArrowTip = props => {
+  const api = useTooltipContext();
+  const arrowTipProps = mergeProps$2(() => api().arrowTipProps, props);
+  return createComponent(ark.div, arrowTipProps);
+};
+
+const _tmpl$ = /*#__PURE__*/template(`<div>`);
+const TooltipContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useTooltipContext();
+  const contentProps = mergeProps$2(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get fallback() {
+      return (() => {
+        const _el$ = _tmpl$();
+        spread$1(_el$, mergeProps$1(() => api().contentProps), false, false);
+        return _el$;
+      })();
+    },
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
+};
+
+const TooltipPositioner = props => {
+  const api = useTooltipContext();
+  const positionerProps = mergeProps$2(() => api().positionerProps, props);
+  return createComponent(ark.div, positionerProps);
+};
+
+const TooltipTrigger = props => {
+  const api = useTooltipContext();
+  const triggerProps = mergeProps$2(() => api().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+const Tooltip = Object.assign(Tooltip$1, {
+  Root: Tooltip$1,
+  Arrow: TooltipArrow,
+  ArrowTip: TooltipArrowTip,
+  Content: TooltipContent,
+  Positioner: TooltipPositioner,
+  Trigger: TooltipTrigger
+});
+
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
+//# sourceMappingURL=index.js.map