@ark-ui/solid 3.0.0-0 → 3.0.0-2

package/dist/esm/index.js

@@ -0,0 +1,4207 @@
+import { createContext as createContext$1, useContext, splitProps, Show, createMemo, createSignal, createEffect, onCleanup, createUniqueId, mergeProps as mergeProps$2, children, Index, For } from 'solid-js';
+import { memo, createComponent, Dynamic, mergeProps, use, template, spread, insert, effect } from 'solid-js/web';
+import { mergeProps as mergeProps$1, useMachine, normalizeProps, useActor } from '@zag-js/solid';
+import * as collapsible$1 from '@zag-js/collapsible';
+import * as accordion$1 from '@zag-js/accordion';
+import * as avatar$1 from '@zag-js/avatar';
+import { carouselAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
+import * as carousel$1 from '@zag-js/carousel';
+import * as checkbox$1 from '@zag-js/checkbox';
+import * as clipboard$1 from '@zag-js/clipboard';
+import * as presence from '@zag-js/presence';
+import * as colorPicker$1 from '@zag-js/color-picker';
+import * as combobox$1 from '@zag-js/combobox';
+import * as datePicker$1 from '@zag-js/date-picker';
+import * as dialog$1 from '@zag-js/dialog';
+import * as editable$1 from '@zag-js/editable';
+import * as fileUpload$1 from '@zag-js/file-upload';
+import { trackLocale, isRTL, formatBytes, formatNumber } from '@zag-js/i18n-utils';
+import * as hoverCard$1 from '@zag-js/hover-card';
+import * as menu$1 from '@zag-js/menu';
+import * as numberInput$1 from '@zag-js/number-input';
+import * as pagination$1 from '@zag-js/pagination';
+import * as pinInput$1 from '@zag-js/pin-input';
+import * as popover$1 from '@zag-js/popover';
+import * as progress$1 from '@zag-js/progress';
+import * as radio from '@zag-js/radio-group';
+import * as rating from '@zag-js/rating-group';
+import * as select$1 from '@zag-js/select';
+import * as slider$1 from '@zag-js/slider';
+import * as splitter$1 from '@zag-js/splitter';
+import * as zagSwitch from '@zag-js/switch';
+import * as tabs$1 from '@zag-js/tabs';
+import * as tagsInput$1 from '@zag-js/tags-input';
+import * as toast$1 from '@zag-js/toast';
+import * as toggleGroup$1 from '@zag-js/toggle-group';
+import * as tooltip$1 from '@zag-js/tooltip';
+import * as treeView$1 from '@zag-js/tree-view';
+
+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,
+    defaultValue
+  } = options;
+  const Context = createContext$1(defaultValue);
+  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 AccordionContext = props => props.children(useAccordionContext());
+
+const createSplitProps = () => (props, keys) => splitProps(props, keys);
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  hookName: 'useRenderStrategyContext',
+  providerName: '<RenderStrategyProvider />'
+});
+const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+
+const withAsProp = Component => {
+  const ArkComponent = props => {
+    const [localProps, otherProps] = splitProps(props, ['asChild']);
+    if (localProps.asChild) {
+      if (typeof otherProps.children !== 'function') {
+        throw new Error('Children must be a function');
+      }
+
+      // @ts-expect-error TODO improve
+      const fn = userProps => {
+        const [, restProps] = splitProps(otherProps, ['children', 'ref']);
+        return {
+          ref: otherProps.ref,
+          ...mergeProps$1(restProps, userProps)
+        };
+      };
+      return memo(() => otherProps.children(fn));
+    }
+
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    return createComponent(Dynamic, mergeProps({
+      component: Component
+    }, otherProps));
+  };
+  return ArkComponent;
+};
+function jsxFactory() {
+  const cache = new Map();
+  return new Proxy(withAsProp, {
+    apply(_target, _thisArg, argArray) {
+      return withAsProp(argArray[0]);
+    },
+    get(_, element) {
+      const asElement = element;
+      if (!cache.has(asElement)) {
+        cache.set(asElement, withAsProp(asElement));
+      }
+      return cache.get(asElement);
+    }
+  });
+}
+const ark = jsxFactory();
+
+const [CollapsibleProvider, useCollapsibleContext] = createContext({
+  hookName: 'useCollapsibleContext',
+  providerName: '<CollapsibleProvider />'
+});
+
+const CollapsibleContent = props => {
+  const api = useCollapsibleContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !api().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const CollapsibleContext = props => props.children(useCollapsibleContext());
+
+const [EnvironmentProvider, useEnvironmentContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false
+});
+
+var _tmpl$$d = /*#__PURE__*/template(`<span hidden>`);
+const Environment = props => {
+  const spanRef = undefined;
+
+  // @ts-expect-error TODO fix
+  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)() && (() => {
+        var _el$ = _tmpl$$d();
+        use(spanRef, _el$);
+        return _el$;
+      })())];
+    }
+  });
+};
+
+const [LocaleContextProvider, useLocaleContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false,
+  defaultValue: () => ({
+    dir: 'ltr',
+    locale: 'en-US'
+  })
+});
+
+const LocaleProvider = props => {
+  const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+  const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+  const getRootNode = useEnvironmentContext();
+  createEffect(() => {
+    const cleanup = trackLocale({
+      locale: localeProps.locale,
+      getRootNode,
+      onLocaleChange(locale) {
+        setLocale(locale.locale);
+      }
+    });
+    onCleanup(cleanup);
+  });
+  const context = createMemo(() => ({
+    locale: locale(),
+    dir: isRTL(locale()) ? 'rtl' : 'ltr'
+  }));
+  return createComponent(LocaleContextProvider, {
+    value: context,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
+
+const useCollapsible = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
+  }, collapsibleProps);
+  const [state, send] = useMachine(collapsible$1.machine(context), {
+    context
+  });
+  const [wasVisible, setWasVisible] = createSignal(false);
+  createEffect(() => {
+    const isPresent = api().visible;
+    if (isPresent) setWasVisible(true);
+  });
+  const api = createMemo(() => collapsible$1.connect(state, send, normalizeProps));
+  return createMemo(() => ({
+    ...api(),
+    unmounted: !api().visible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().visible && wasVisible()
+  }));
+};
+
+const CollapsibleRoot = props => {
+  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
+  const api = useCollapsible(useCollapsibleProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(CollapsibleProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const CollapsibleTrigger = props => {
+  const api = useCollapsibleContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var collapsible = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: CollapsibleContent,
+  Context: CollapsibleContext,
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger
+});
+
+const [AccordionItemProvider, useAccordionItemContext] = createContext({
+  hookName: 'useAccordionItemContext',
+  providerName: '<AccordionItemProvider />'
+});
+
+const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({
+  hookName: 'useAccordionItemPropsContext',
+  providerName: '<AccordionItemPropsProvider />'
+});
+
+const AccordionItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
+  const accordion = useAccordionContext();
+  const renderStrategyProps = useRenderStrategyContext();
+  const mergedProps = mergeProps$1(() => accordion().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => accordion().getItemState(itemProps));
+  const itemContentProps = accordion().getItemContentProps(itemProps);
+  return createComponent(AccordionItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(AccordionItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(CollapsibleRoot, mergeProps({
+            get open() {
+              return itemState().expanded;
+            },
+            get ids() {
+              return {
+                content: itemContentProps.id
+              };
+            }
+          }, renderStrategyProps, mergedProps));
+        }
+      });
+    }
+  });
+};
+
+const AccordionItemContent = props => {
+  const accordion = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const itemContentProps = createMemo(() => {
+    const ownProps = accordion().getItemContentProps(itemProps);
+    ownProps.hidden = undefined;
+    return ownProps;
+  });
+  const mergedProps = mergeProps$1(itemContentProps, props);
+  return createComponent(CollapsibleContent, mergedProps);
+};
+
+const AccordionItemContext = props => props.children(useAccordionItemContext());
+
+const AccordionItemIndicator = props => {
+  const accordion = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const mergedProps = mergeProps$1(() => accordion().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const AccordionItemTrigger = props => {
+  const accordion = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const collapsible = useCollapsibleContext();
+  const mergedProps = mergeProps$1(() => accordion().getItemTriggerProps(itemProps), props);
+  const [ariaControls, buttonProps] = splitProps(mergedProps, ['aria-controls']);
+  return createComponent(ark.button, mergeProps(buttonProps, () => !collapsible().unmounted && ariaControls));
+};
+
+const useAccordion = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(accordion$1.machine(context), {
+    context
+  });
+  return createMemo(() => accordion$1.connect(state, send, normalizeProps));
+};
+
+const AccordionRoot = props => {
+  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'disabled', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const api = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(AccordionProvider, {
+    value: api,
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+var accordion = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: AccordionContext,
+  Item: AccordionItem,
+  ItemContent: AccordionItemContent,
+  ItemContext: AccordionItemContext,
+  ItemIndicator: AccordionItemIndicator,
+  ItemTrigger: AccordionItemTrigger,
+  Root: AccordionRoot
+});
+
+const [AvatarProvider, useAvatarContext] = createContext({
+  hookName: 'useAvatarContext',
+  providerName: '<AvatarProvider />'
+});
+
+const AvatarContext = props => props.children(useAvatarContext());
+
+const AvatarFallback = props => {
+  const context = useAvatarContext();
+  const mergedProps = mergeProps$1(() => context().fallbackProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const AvatarImage = props => {
+  const context = useAvatarContext();
+  const mergedProps = mergeProps$1(() => context().imageProps, props);
+  return createComponent(ark.img, mergedProps);
+};
+
+const useAvatar = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(avatar$1.machine(context), {
+    context
+  });
+  return createMemo(() => avatar$1.connect(state, send, normalizeProps));
+};
+
+const AvatarRoot = props => {
+  const [useAvatarProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange']);
+  const context = useAvatar(useAvatarProps);
+  const mergedProps = mergeProps$1(() => context().rootProps, localProps);
+  return createComponent(AvatarProvider, {
+    value: context,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var avatar = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: AvatarContext,
+  Fallback: AvatarFallback,
+  Image: AvatarImage,
+  Root: AvatarRoot
+});
+
+const [CarouselProvider, useCarouselContext] = createContext({
+  hookName: 'useCarouselContext',
+  providerName: '<CarouselProvider />'
+});
+
+const CarouselContext = props => props.children(useCarouselContext());
+
+const CarouselControl = props => {
+  const mergedProps = mergeProps$1(() => carouselAnatomy.build().control.attrs, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps()(props, ['index', 'readOnly']);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().getIndicatorProps(indicatorProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const CarouselIndicatorGroup = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().indicatorGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['index']);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselItemGroup = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().itemGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CarouselNextTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const CarouselPrevTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const useCarousel = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(carousel$1.machine(context), {
+    context
+  });
+  return createMemo(() => carousel$1.connect(state, send, normalizeProps));
+};
+
+const CarouselRoot = props => {
+  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
+  const api = useCarousel(useCarouselProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(CarouselProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const CarouselViewport = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps$1(() => api().viewportProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var carousel = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: CarouselContext,
+  Control: CarouselControl,
+  Indicator: CarouselIndicator,
+  IndicatorGroup: CarouselIndicatorGroup,
+  Item: CarouselItem,
+  ItemGroup: CarouselItemGroup,
+  NextTrigger: CarouselNextTrigger,
+  PrevTrigger: CarouselPrevTrigger,
+  Root: CarouselRoot,
+  Viewport: CarouselViewport
+});
+
+const [CheckboxProvider, useCheckboxContext] = createContext({
+  hookName: 'useCheckboxContext',
+  providerName: '<CheckboxProvider />'
+});
+
+const CheckboxContext = props => props.children(useCheckboxContext());
+
+var _tmpl$$c = /*#__PURE__*/template(`<input>`);
+const CheckboxControl = props => {
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$c();
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const CheckboxIndicator = props => {
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CheckboxLabel = props => {
+  const checkbox = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => checkbox().labelProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const useCheckbox = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(checkbox$1.machine(context), {
+    context
+  });
+  return createMemo(() => checkbox$1.connect(state, send, normalizeProps));
+};
+
+const CheckboxRoot = props => {
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
+  const api = useCheckbox(useCheckboxProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, labelprops);
+  return createComponent(CheckboxProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+var checkbox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: CheckboxContext,
+  Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
+  Label: CheckboxLabel,
+  Root: CheckboxRoot
+});
+
+const [ClipboardProvider, useClipboardContext] = createContext({
+  hookName: 'useClipboardContext',
+  providerName: '<ClipboardProvider />'
+});
+
+const ClipboardContext = props => props.children(useClipboardContext());
+
+const ClipboardControl = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ClipboardIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(api().getIndicatorProps({
+    copied: api().copied
+  }), localProps);
+  // @ts-expect-error TODO fix
+  const getChildren = children(() => localProps.children);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return api().copied;
+        },
+        get fallback() {
+          return getChildren();
+        },
+        get children() {
+          return indicatorProps.copied;
+        }
+      });
+    }
+  }));
+};
+
+const ClipboardInput = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const ClipboardLabel = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useClipboard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(clipboard$1.machine(context), {
+    context
+  });
+  return createMemo(() => clipboard$1.connect(state, send, normalizeProps));
+};
+
+const ClipboardRoot = props => {
+  const [useClipboardProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange', 'timeout', 'value']);
+  const api = useClipboard(useClipboardProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(ClipboardProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ClipboardTrigger = props => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var clipboard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: ClipboardContext,
+  Control: ClipboardControl,
+  Indicator: ClipboardIndicator,
+  Input: ClipboardInput,
+  Label: ClipboardLabel,
+  Root: ClipboardRoot,
+  Trigger: ClipboardTrigger
+});
+
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext({
+  hookName: 'useColorPickerAreaContext',
+  providerName: '<ColorPickerAreaProvider />'
+});
+
+const [ColorPickerProvider, useColorPickerContext] = createContext({
+  hookName: 'useColorPickerContext',
+  providerName: '<ColorPickerProvider />'
+});
+
+const ColorPickerArea = props => {
+  const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getAreaProps(channelProps), divprops);
+  return createComponent(ColorPickerAreaPropsProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerAreaBackground = props => {
+  const api = useColorPickerContext();
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = mergeProps$1(() => api().getAreaBackgroundProps(areaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerAreaThumb = props => {
+  const api = useColorPickerContext();
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = mergeProps$1(() => api().getAreaThumbProps(areaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelInput = props => {
+  const [channelProps, inputProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getChannelInputProps(channelProps), inputProps);
+  return createComponent(ark.input, mergedProps);
+};
+
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext({
+  hookName: 'useColorPickerChannelSliderContext',
+  providerName: '<ColorPickerChannelSliderProvider />'
+});
+
+const ColorPickerChannelSlider = props => {
+  const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderProps(channelProps), localProps);
+  return createComponent(ColorPickerChannelPropsProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerChannelSliderThumb = props => {
+  const api = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(channelProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelSliderTrack = props => {
+  const api = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(channelProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const splitPresenceProps = props => createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+
+const usePresence = props => {
+  const [renderStrategyProps, context] = splitRenderStrategyProps(props);
+  const [wasEverPresent, setWasEverPresent] = createSignal(false);
+  const [state, send] = useMachine(presence.machine(context), {
+    context
+  });
+  const api = createMemo(() => presence.connect(state, send, normalizeProps));
+  createEffect(() => {
+    const present = api().present;
+    if (present) setWasEverPresent(true);
+  });
+  return createMemo(() => ({
+    unmounted: !api().present && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().present && wasEverPresent(),
+    present: api().present,
+    presenceProps: {
+      ref: api().setNode,
+      hidden: !api().present,
+      'data-state': context.present ? 'open' : 'closed'
+    }
+  }));
+};
+
+const Presence = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = usePresence(presenceProps);
+  const mergedProps = mergeProps$1(() => api().presenceProps, localProps);
+  return createComponent(Show, {
+    get when() {
+      return !api().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        "data-scope": "presence",
+        "data-part": "root"
+      }));
+    }
+  });
+};
+
+const [PresenceProvider, usePresenceContext] = createContext({
+  hookName: 'usePresenceContext',
+  providerName: '<PresenceProvider />'
+});
+
+const ColorPickerContent = props => {
+  const api = useColorPickerContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerContext = props => props.children(useColorPickerContext());
+
+const ColorPickerControl = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerEyeDropperTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().eyeDropperTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerFormatSelect = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().formatSelectProps, props);
+  return createComponent(ark.select, mergeProps(mergedProps, {
+    get children() {
+      return createComponent(Index, {
+        each: ['rgba', 'hsla', 'hsba'],
+        children: format => createComponent(ark.option, {
+          get value() {
+            return format();
+          },
+          get children() {
+            return format();
+          }
+        })
+      });
+    }
+  }));
+};
+
+const ColorPickerFormatTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().formatTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerLabel = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const ColorPickerPositioner = props => {
+  const api = useColorPickerContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useColorPicker = props => {
+  const [local, rest] = splitProps(props, ['value']);
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1(() => ({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined,
+    value: local.value ? colorPicker$1.parse(local.value) : undefined
+  }), rest);
+  const [state, send] = useMachine(colorPicker$1.machine(context), {
+    context
+  });
+  return createMemo(() => colorPicker$1.connect(state, send, normalizeProps));
+};
+
+var _tmpl$$b = /*#__PURE__*/template(`<input>`);
+const ColorPickerRoot = props => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker(useColorPickerProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return [createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      }), (() => {
+        var _el$ = _tmpl$$b();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
+  hookName: 'useColorPickerSwatchContext',
+  providerName: '<ColorPickerSwatchProvider />'
+});
+
+const ColorPickerSwatch = props => {
+  const [swatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getSwatchProps(swatchProps), localProps);
+  return createComponent(ColorPickerSwatchPropsProvider, {
+    value: swatchProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerSwatchGroup = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().swatchGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatchIndicator = props => {
+  const api = useColorPickerContext();
+  const swatchProps = useColorPickerSwatchPropsContext();
+  const mergedProps = mergeProps$1(() => api().getSwatchIndicatorProps(swatchProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerSwatchTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getSwatchTriggerProps(triggerProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerTransparencyGrid = props => {
+  const [gridProps, localProps] = createSplitProps()(props, ['size']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getTransparencyGridProps(gridProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ColorPickerValueText = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
+    get children() {
+      return api().valueAsString || props.children;
+    }
+  }));
+};
+
+const ColorPickerView = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().view.attrs, props);
+
+  // TODO @segunadebayo
+  return createComponent(Show, {
+    get when() {
+      return api().format === props.format;
+    },
+    get children() {
+      return createComponent(ark.div, mergeProps({
+        get ["data-format"]() {
+          return props.format;
+        }
+      }, mergedProps));
+    }
+  });
+};
+
+var colorPicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Area: ColorPickerArea,
+  AreaBackground: ColorPickerAreaBackground,
+  AreaThumb: ColorPickerAreaThumb,
+  ChannelInput: ColorPickerChannelInput,
+  ChannelSlider: ColorPickerChannelSlider,
+  ChannelSliderThumb: ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: ColorPickerChannelSliderTrack,
+  Content: ColorPickerContent,
+  Context: ColorPickerContext,
+  Control: ColorPickerControl,
+  EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  FormatSelect: ColorPickerFormatSelect,
+  FormatTrigger: ColorPickerFormatTrigger,
+  Label: ColorPickerLabel,
+  Positioner: ColorPickerPositioner,
+  Root: ColorPickerRoot,
+  Swatch: ColorPickerSwatch,
+  SwatchGroup: ColorPickerSwatchGroup,
+  SwatchIndicator: ColorPickerSwatchIndicator,
+  SwatchTrigger: ColorPickerSwatchTrigger,
+  TransparencyGrid: ColorPickerTransparencyGrid,
+  Trigger: ColorPickerTrigger,
+  ValueText: ColorPickerValueText,
+  View: ColorPickerView
+});
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const [ComboboxProvider, useComboboxContext] = createContext({
+  hookName: 'useComboboxContext',
+  providerName: '<ComboboxProvider />'
+});
+
+const ComboboxClearTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ComboboxContent = props => {
+  const api = useComboboxContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ComboboxContext = props => props.children(useComboboxContext());
+
+const ComboboxControl = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxInput = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const [ComboboxItemProvider, useComboboxItemContext] = createContext({
+  hookName: 'useComboboxItemContext',
+  providerName: '<ComboboxItemProvider />'
+});
+
+const [ComboboxItemPropsProvider, useComboboxItemPropsContext] = createContext({
+  hookName: 'useComboboxItemPropsContext',
+  providerName: '<ComboboxItemPropsProvider />'
+});
+
+const ComboboxItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item', 'persistFocus']);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => api().getItemState(itemProps));
+  return createComponent(ComboboxItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ComboboxItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const ComboboxItemContext = props => props.children(useComboboxItemContext());
+
+const [ComboboxItemGroupPropsProvider, useComboboxItemGroupPropsContext] = createContext({
+  hookName: 'useComboboxItemGroupPropsContext',
+  providerName: '<ComboboxItemGroupPropsProvider />'
+});
+
+const ComboboxItemGroup = props => {
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const combobox = useComboboxContext();
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, _itemGroupProps);
+  const mergedProps = mergeProps$1(() => combobox().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(ComboboxItemGroupPropsProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ComboboxItemGroupLabel = props => {
+  const combobox = useComboboxContext();
+  const itemGroupProps = useComboboxItemGroupPropsContext();
+  const mergedProps = mergeProps$1(() => combobox().getItemGroupLabelProps({
+    htmlFor: itemGroupProps.id
+  }), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemIndicator = props => {
+  const combobox = useComboboxContext();
+  const itemProps = useComboboxItemPropsContext();
+  const mergedProps = mergeProps$1(() => combobox().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemText = props => {
+  const api = useComboboxContext();
+  const itemProps = useComboboxItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const ComboboxLabel = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const ComboboxPositioner = props => {
+  const api = useComboboxContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useCombobox = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => combobox$1.collection(collectionOptions);
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined,
+    collection: collection()
+  }, rest);
+  const [state, send] = useMachine(combobox$1.machine(context), {
+    context
+  });
+  return createMemo(() => combobox$1.connect(state, send, normalizeProps));
+};
+
+const ComboboxRoot = props => {
+  const [presenceProps, comboboxProps] = splitPresenceProps(props);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'disabled', 'dismissable', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'popup', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
+  const api = useCombobox(useComboboxProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(ComboboxProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const ComboboxTrigger = props => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var combobox = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: ComboboxClearTrigger,
+  Content: ComboboxContent,
+  Context: ComboboxContext,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  ItemContext: ComboboxItemContext,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  ItemIndicator: ComboboxItemIndicator,
+  ItemText: ComboboxItemText,
+  Label: ComboboxLabel,
+  Positioner: ComboboxPositioner,
+  Root: ComboboxRoot,
+  Trigger: ComboboxTrigger
+});
+
+const [DatePickerProvider, useDatePickerContext] = createContext({
+  hookName: 'useDatePickerContext',
+  providerName: '<DatePickerProvider />'
+});
+
+const DatePickerClearTrigger = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerContent = props => {
+  const api = useDatePickerContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const DatePickerContext = props => props.children(useDatePickerContext());
+
+const DatePickerControl = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DatePickerInput = props => {
+  const [inputProps, localProps] = createSplitProps()(props, ['index']);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().getInputProps(inputProps), localProps);
+  return createComponent(ark.input, mergedProps);
+};
+
+const DatePickerLabel = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+var _tmpl$$a = /*#__PURE__*/template(`<option>`);
+const DatePickerMonthSelect = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().monthSelectProps, props);
+  return createComponent(ark.select, mergeProps(mergedProps, {
+    get children() {
+      return api().getMonths().map(month => (() => {
+        var _el$ = _tmpl$$a();
+        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$1(() => api().getNextTriggerProps(viewProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerPositioner = props => {
+  const api = useDatePickerContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const DatePickerPresetTrigger = props => {
+  const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerPrevTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = mergeProps$1(() => api().getPrevTriggerProps(viewProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerRangeText = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().rangeTextProps, props);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return api().visibleRangeText.start;
+    }
+  }));
+};
+
+const useDatePicker = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
+  const context = mergeProps$1(() => ({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined,
+    focusedValue: localProps.focusedValue ? datePicker$1.parse(localProps.focusedValue) : undefined,
+    value: localProps.value ? datePicker$1.parse(localProps.value) : undefined,
+    max: localProps.max ? datePicker$1.parse(localProps.max) : undefined,
+    min: localProps.min ? datePicker$1.parse(localProps.min) : undefined
+  }), restProps);
+  const [state, send] = useMachine(datePicker$1.machine(context), {
+    context
+  });
+  return createMemo(() => datePicker$1.connect(state, send, normalizeProps));
+};
+
+const DatePickerRoot = props => {
+  const [presenceProps, datePickerProps] = splitPresenceProps(props);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
+  const api = useDatePicker(useDatePickerProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(DatePickerProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+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$1(() => 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$1(() => 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$1(() => 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$1(() => triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerTableHead = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$1(() => api().getTableHeadProps(tableProps), props);
+  return createComponent(ark.thead, mergedProps);
+};
+
+const DatePickerTableHeader = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$1(() => api().getTableHeaderProps(tableProps), props);
+  return createComponent(ark.th, mergedProps);
+};
+
+const DatePickerTableRow = props => {
+  const api = useDatePickerContext();
+  const tableProps = useDatePickerTableContext();
+  const mergedProps = mergeProps$1(() => api().getTableRowProps(tableProps), props);
+  return createComponent(ark.tr, mergedProps);
+};
+
+const DatePickerTrigger = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DatePickerView = props => {
+  const [viewProps, localProps] = createSplitProps()(props, ['view']);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => datePickerAnatomy.build().view.attrs, localProps);
+  return createComponent(DatePickerViewProvider, {
+    value: viewProps,
+    get children() {
+      return createComponent(ark.div, mergeProps(mergedProps, {
+        get hidden() {
+          return api().view !== viewProps.view;
+        }
+      }));
+    }
+  });
+};
+
+const DatePickerViewControl = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = mergeProps$1(() => api().getViewControlProps(viewProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DatePickerViewTrigger = props => {
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const mergedProps = mergeProps$1(() => api().getViewTriggerProps(viewProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var _tmpl$$9 = /*#__PURE__*/template(`<option>`);
+const DatePickerYearSelect = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps$1(() => api().yearSelectProps, props);
+  return createComponent(ark.select, mergeProps(mergedProps, {
+    get children() {
+      return getYearsRange({
+        from: 1_000,
+        to: 4_000
+      }).map(year => (() => {
+        var _el$ = _tmpl$$9();
+        _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;
+}
+
+var datePicker = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: DatePickerClearTrigger,
+  Content: DatePickerContent,
+  Context: DatePickerContext,
+  Control: DatePickerControl,
+  Input: DatePickerInput,
+  Label: DatePickerLabel,
+  MonthSelect: DatePickerMonthSelect,
+  NextTrigger: DatePickerNextTrigger,
+  Positioner: DatePickerPositioner,
+  PresetTrigger: DatePickerPresetTrigger,
+  PrevTrigger: DatePickerPrevTrigger,
+  RangeText: DatePickerRangeText,
+  Root: DatePickerRoot,
+  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 DialogBackdrop = props => {
+  const api = useDialogContext();
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence(mergeProps$1(renderStrategyProps, () => ({
+    present: api().open
+  })));
+  const mergedProps = mergeProps$1(() => api().backdropProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const DialogCloseTrigger = props => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps$1(() => dialog().closeTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const DialogContent = props => {
+  const api = useDialogContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const DialogContext = props => props.children(useDialogContext());
+
+const DialogDescription = props => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps$1(() => dialog().descriptionProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const DialogPositioner = props => {
+  const api = useDialogContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useDialog = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
+  }, props);
+  const [state, send] = useMachine(dialog$1.machine(context), {
+    context
+  });
+  return createMemo(() => dialog$1.connect(state, send, normalizeProps));
+};
+
+const DialogRoot = props => {
+  const [presenceProps, dialogProps] = splitPresenceProps(props);
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscape', 'closeOnInteractOutside', 'finalFocusEl', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const api = useDialog(useDialogProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  return createComponent(DialogProvider, {
+    value: api,
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(PresenceProvider, {
+            value: apiPresence,
+            get children() {
+              return localProps.children;
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
+const DialogTitle = props => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps$1(() => dialog().titleProps, props);
+  return createComponent(ark.h2, mergedProps);
+};
+
+const DialogTrigger = props => {
+  const api = useDialogContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+    'aria-controls': presenceApi().unmounted && null
+  }), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var dialog = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Backdrop: DialogBackdrop,
+  CloseTrigger: DialogCloseTrigger,
+  Content: DialogContent,
+  Context: DialogContext,
+  Description: DialogDescription,
+  Positioner: DialogPositioner,
+  Root: DialogRoot,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+});
+
+const [EditableProvider, useEditableContext] = createContext({
+  hookName: 'useEditableContext',
+  providerName: '<EditableProvider />'
+});
+
+const EditableArea = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().areaProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const EditableCancelTrigger = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().cancelTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const EditableContext = props => props.children(useEditableContext());
+
+const EditableControl = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const EditableEditTrigger = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().editTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const EditableInput = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const EditableLabel = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const EditablePreview = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().previewProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const useEditable = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(editable$1.machine(context), {
+    context
+  });
+  return createMemo(() => editable$1.connect(state, send, normalizeProps));
+};
+
+const EditableRoot = props => {
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const api = useEditable(useEditableProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(EditableProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const EditableSubmitTrigger = props => {
+  const api = useEditableContext();
+  const mergedProps = mergeProps$1(() => api().submitTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var editable = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Area: EditableArea,
+  CancelTrigger: EditableCancelTrigger,
+  Context: EditableContext,
+  Control: EditableControl,
+  EditTrigger: EditableEditTrigger,
+  Input: EditableInput,
+  Label: EditableLabel,
+  Preview: EditablePreview,
+  Root: EditableRoot,
+  SubmitTrigger: EditableSubmitTrigger
+});
+
+const [FileUploadProvider, useFileUploadContext] = createContext({
+  hookName: 'useFileUploadContext',
+  providerName: '<FileUploadProvider />'
+});
+
+const FileUploadContext = props => props.children(useFileUploadContext());
+
+var _tmpl$$8 = /*#__PURE__*/template(`<input>`);
+const FileUploadDropzone = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().dropzoneProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$8();
+    spread(_el$, mergeProps(() => fileUpload().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
+  hookName: 'useFileUploadItemPropsContext',
+  providerName: '<FileUploadItemPropsProvider />'
+});
+
+const FileUploadItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['file']);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemProps(itemProps), localProps);
+  return createComponent(FileUploadItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.li, mergedProps);
+    }
+  });
+};
+
+const FileUploadItemDeleteTrigger = props => {
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemDeleteTriggerProps(itemProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const FileUploadItemGroup = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().itemGroupProps, props);
+  return createComponent(ark.ul, mergedProps);
+};
+
+const FileUploadItemName = props => {
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemNameProps(itemProps), props);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return props.children || itemProps.file.name;
+    }
+  }));
+};
+
+const FileUploadItemPreview = props => {
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemPreviewProps(itemProps), props);
+  if (!itemProps.file.type.match(props.type ?? '.*')) return null;
+  return createComponent(ark.div, mergedProps);
+};
+
+const FileUploadItemPreviewImage = props => {
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const [url, setUrl] = createSignal('');
+  fileUpload().createFileUrl(itemProps.file, url => setUrl(url));
+  const mergedProps = mergeProps$1(fileUpload().getItemPreviewImageProps({
+    ...itemProps,
+    url: url()
+  }), props);
+  return createComponent(ark.img, mergedProps);
+};
+
+const FileUploadItemSizeText = props => {
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemSizeTextProps(itemProps), props);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return props.children || fileUpload().getFileSize(itemProps.file);
+    }
+  }));
+};
+
+const FileUploadLabel = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useFileUpload = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(fileUpload$1.machine(context), {
+    context
+  });
+  return createMemo(() => fileUpload$1.connect(state, send, normalizeProps));
+};
+
+const FileUploadRoot = props => {
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
+  const fileUpload = useFileUpload(fileUploadProps);
+  const mergedProps = mergeProps$1(() => fileUpload().rootProps, localProps);
+  return createComponent(FileUploadProvider, {
+    value: fileUpload,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FileUploadTrigger = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var fileUpload = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: FileUploadContext,
+  Dropzone: FileUploadDropzone,
+  Item: FileUploadItem,
+  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+  ItemGroup: FileUploadItemGroup,
+  ItemName: FileUploadItemName,
+  ItemPreview: FileUploadItemPreview,
+  ItemPreviewImage: FileUploadItemPreviewImage,
+  ItemSizeText: FileUploadItemSizeText,
+  Label: FileUploadLabel,
+  Root: FileUploadRoot,
+  Trigger: FileUploadTrigger
+});
+
+const FormatByte = props => {
+  const [valueProps, intlProps] = splitProps(props, ['value']);
+  const ctx = useLocaleContext();
+  const text = createMemo(() => formatBytes(valueProps.value, ctx().locale, intlProps));
+  return text;
+};
+
+const FormatNumber = props => {
+  const [valueProps, intlProps] = splitProps(props, ['value']);
+  const ctx = useLocaleContext();
+  const text = createMemo(() => formatNumber(valueProps.value, ctx().locale, intlProps));
+  return text;
+};
+
+var format = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Byte: FormatByte,
+  Number: FormatNumber
+});
+
+const [HoverCardProvider, useHoverCardContext] = createContext({
+  hookName: 'useHoverCardContext',
+  providerName: '<HoverCardProvider />'
+});
+
+const HoverCardArrow = props => {
+  const hoverCard = useHoverCardContext();
+  const mergedProps = mergeProps$1(() => hoverCard().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const HoverCardArrowTip = props => {
+  const hoverCard = useHoverCardContext();
+  const mergedProps = mergeProps$1(() => hoverCard().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const HoverCardContent = props => {
+  const api = useHoverCardContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const HoverCardContext = props => props.children(useHoverCardContext());
+
+const HoverCardPositioner = props => {
+  const api = useHoverCardContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useHoverCard = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
+  }, props);
+  const [state, send] = useMachine(hoverCard$1.machine(context), {
+    context
+  });
+  return createMemo(() => hoverCard$1.connect(state, send, normalizeProps));
+};
+
+const HoverCardRoot = props => {
+  const [presenceProps, hoverCardProps] = splitPresenceProps(props);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useHoverCard(useHoverCardProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  return createComponent(HoverCardProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return localProps.children;
+        }
+      });
+    }
+  });
+};
+
+const HoverCardTrigger = props => {
+  const hoverCard = useHoverCardContext();
+  const mergedProps = mergeProps$1(() => hoverCard().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var hoverCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: HoverCardArrow,
+  ArrowTip: HoverCardArrowTip,
+  Content: HoverCardContent,
+  Context: HoverCardContext,
+  Positioner: HoverCardPositioner,
+  Root: HoverCardRoot,
+  Trigger: HoverCardTrigger
+});
+
+const [MenuProvider, useMenuContext] = createContext({
+  hookName: 'useMenuContext',
+  providerName: '<MenuProvider />',
+  strict: false
+});
+
+const MenuArrow = props => {
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const MenuArrowTip = props => {
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const [MenuItemProvider, useMenuItemContext] = createContext({
+  hookName: 'useMenuItemContext',
+  providerName: '<MenuItemProvider />'
+});
+
+const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
+  hookName: 'useMenuOptionItemPropsContext',
+  providerName: '<MenuOptionItemPropsProvider />'
+});
+
+const MenuCheckboxItem = props => {
+  const [partialOptionItemProps, localProps] = createSplitProps()(props, ['checked', 'closeOnSelect', 'disabled', 'onCheckedChange', 'value', 'valueText']);
+  const optionItemProps = mergeProps$1(partialOptionItemProps, {
+    type: 'checkbox'
+  });
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
+  const itemState = createMemo(() => context().getItemState(optionItemProps));
+  return createComponent(MenuOptionItemPropsProvider, {
+    value: optionItemProps,
+    get children() {
+      return createComponent(MenuItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const MenuContent = props => {
+  const context = useMenuContext();
+  const presenceContext = usePresenceContext();
+  const mergedProps = mergeProps$1(() => context().contentProps, () => presenceContext().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceContext().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const MenuContext = props => props.children(useMenuContext());
+
+const MenuContextTrigger = props => {
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().contextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const MenuIndicator = props => {
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const MenuItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => context().getItemState(itemProps));
+  return createComponent(MenuItemProvider, {
+    value: itemState,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const MenuItemContext = props => props.children(useMenuItemContext());
+
+const [MenuItemGroupProvider, useMenuItemGroupContext] = createContext({
+  hookName: 'useMenuItemGroupContext',
+  providerName: '<MenuItemGroupProvider />'
+});
+
+const MenuItemGroup = props => {
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, optionalItemGroupProps);
+  const menu = useMenuContext();
+  const mergedProps = mergeProps$1(() => menu().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(MenuItemGroupProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const MenuItemGroupLabel = props => {
+  const context = useMenuContext();
+  const itemGroupContext = useMenuItemGroupContext();
+  const mergedProps = mergeProps$1(context().getItemGroupLabelProps({
+    htmlFor: itemGroupContext.id
+  }), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const MenuItemIndicator = props => {
+  const context = useMenuContext();
+  const optionItemProps = useMenuOptionItemPropsContext();
+  const mergedProps = mergeProps$1(() => context().getItemIndicatorProps(optionItemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const MenuItemText = props => {
+  const context = useMenuContext();
+  const optionItemProps = useMenuOptionItemPropsContext();
+  const mergedProps = mergeProps$1(() => context().getItemTextProps(optionItemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const MenuPositioner = props => {
+  const context = useMenuContext();
+  const presence = usePresenceContext();
+  const mergedProps = mergeProps$1(() => context().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presence().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const MenuRadioItem = props => {
+  const [partialItemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
+  const context = useMenuContext();
+  const itemGroup = useMenuItemGroupContext();
+  const optionItemProps = mergeProps$1(partialItemProps, () => ({
+    type: 'radio',
+    checked: itemGroup.value === partialItemProps.value,
+    onCheckedChange: () => itemGroup.onValueChange?.({
+      value: partialItemProps.value
+    })
+  }));
+  const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
+  const itemState = createMemo(() => context().getItemState(optionItemProps));
+  return createComponent(MenuOptionItemPropsProvider, {
+    value: optionItemProps,
+    get children() {
+      return createComponent(MenuItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const MenuRadioItemGroup = props => {
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id', 'onValueChange', 'value']);
+  const context = useMenuContext();
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, optionalItemGroupProps);
+  const mergedProps = mergeProps$1(() => context().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(MenuItemGroupProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useMenu = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
+  }, props);
+  const [state, send, machine] = useMachine(menu$1.machine(context), {
+    context
+  });
+  const api = createMemo(() => menu$1.connect(state, send, normalizeProps));
+  return {
+    api,
+    machine
+  };
+};
+
+const [MenuMachineProvider, useMenuMachineContext] = createContext({
+  hookName: 'useMenuMachineContext',
+  providerName: '<MenuMachineProvider />',
+  strict: false
+});
+
+const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
+  hookName: 'useMenuMachineContext',
+  providerName: '<MenuMachineProvider />',
+  strict: false
+});
+
+const MenuRoot = props => {
+  const [presenceProps, menuProps] = splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'highlightedValue', 'id', 'ids', 'loopFocus', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning', 'typeahead']);
+  const parentApi = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const menu = useMenu(useMenuProps);
+  const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
+    present: menu.api().open
+  })));
+  createEffect(() => {
+    if (!parentMachine) return;
+    parentApi?.().setChild(menu.machine);
+    menu.api().setParent(parentMachine);
+  });
+  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu.api());
+  return createComponent(MenuTriggerItemProvider, {
+    value: triggerItemContext,
+    get children() {
+      return createComponent(MenuMachineProvider, {
+        get value() {
+          return menu.machine;
+        },
+        get children() {
+          return createComponent(MenuProvider, {
+            get value() {
+              return menu.api;
+            },
+            get children() {
+              return createComponent(PresenceProvider, {
+                value: presenceApi,
+                get children() {
+                  return localProps.children;
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+};
+
+const MenuSeparator = props => {
+  const menu = useMenuContext();
+  const mergedProps = mergeProps$1(() => menu().separatorProps, props);
+  return createComponent(ark.hr, mergedProps);
+};
+
+const MenuTrigger = props => {
+  const api = useMenuContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+    'aria-controls': presenceApi().unmounted && null
+  }), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const MenuTriggerItem = props => {
+  const getTriggerItemProps = useMenuTriggerItemContext();
+  const mergedProps = mergeProps$1(() => getTriggerItemProps?.(), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var menu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: MenuArrow,
+  ArrowTip: MenuArrowTip,
+  CheckboxItem: MenuCheckboxItem,
+  Content: MenuContent,
+  Context: MenuContext,
+  ContextTrigger: MenuContextTrigger,
+  Indicator: MenuIndicator,
+  Item: MenuItem,
+  ItemContext: MenuItemContext,
+  ItemGroup: MenuItemGroup,
+  ItemGroupLabel: MenuItemGroupLabel,
+  ItemIndicator: MenuItemIndicator,
+  ItemText: MenuItemText,
+  Positioner: MenuPositioner,
+  RadioItem: MenuRadioItem,
+  RadioItemGroup: MenuRadioItemGroup,
+  Root: MenuRoot,
+  Separator: MenuSeparator,
+  Trigger: MenuTrigger,
+  TriggerItem: MenuTriggerItem
+});
+
+const [NumberInputProvider, useNumberInputContext] = createContext({
+  hookName: 'useNumberInputContext',
+  providerName: '<NumberInputProvider />'
+});
+
+const NumberInputContext = props => props.children(useNumberInputContext());
+
+const NumberInputControl = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const NumberInputDecrementTrigger = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().decrementTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const NumberInputIncrementTrigger = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().incrementTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const NumberInputInput = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const NumberInputLabel = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useNumberInput = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(numberInput$1.machine(context), {
+    context
+  });
+  return createMemo(() => numberInput$1.connect(state, send, normalizeProps));
+};
+
+const NumberInputRoot = props => {
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const api = useNumberInput(useNumberInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(NumberInputProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const NumberInputScrubber = props => {
+  const api = useNumberInputContext();
+  const mergedProps = mergeProps$1(() => api().scrubberProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var numberInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: NumberInputContext,
+  Control: NumberInputControl,
+  DecrementTrigger: NumberInputDecrementTrigger,
+  IncrementTrigger: NumberInputIncrementTrigger,
+  Input: NumberInputInput,
+  Label: NumberInputLabel,
+  Root: NumberInputRoot,
+  Scrubber: NumberInputScrubber
+});
+
+const [PaginationProvider, usePaginationContext] = createContext({
+  hookName: 'usePaginationContext',
+  providerName: '<PaginationProvider />'
+});
+
+const PaginationContext = props => props.children(usePaginationContext());
+
+const PaginationEllipsis = props => {
+  const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$1(() => api().getEllipsisProps(ellipsisProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PaginationItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PaginationNextTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$1(() => api().nextTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PaginationPrevTrigger = props => {
+  const api = usePaginationContext();
+  const mergedProps = mergeProps$1(() => api().prevTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const usePagination = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(pagination$1.machine(context), {
+    context
+  });
+  return createMemo(() => pagination$1.connect(state, send, normalizeProps));
+};
+
+const PaginationRoot = props => {
+  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const api = usePagination(usePaginationProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(PaginationProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.nav, mergedProps);
+    }
+  });
+};
+
+var pagination = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: PaginationContext,
+  Ellipsis: PaginationEllipsis,
+  Item: PaginationItem,
+  NextTrigger: PaginationNextTrigger,
+  PrevTrigger: PaginationPrevTrigger,
+  Root: PaginationRoot
+});
+
+const [PinInputProvider, usePinInputContext] = createContext({
+  hookName: 'usePinInputContext',
+  providerName: '<PinInputProvider />'
+});
+
+const PinInputContext = props => props.children(usePinInputContext());
+
+const PinInputControl = props => {
+  const api = usePinInputContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PinInputInput = props => {
+  const [inputProps, localProps] = createSplitProps()(props, ['index']);
+  const api = usePinInputContext();
+  const mergedProps = mergeProps$1(() => api().getInputProps(inputProps), localProps);
+  return createComponent(ark.input, mergedProps);
+};
+
+const PinInputLabel = props => {
+  const api = usePinInputContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const usePinInput = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(pinInput$1.machine(context), {
+    context
+  });
+  return createMemo(() => pinInput$1.connect(state, send, normalizeProps));
+};
+
+var _tmpl$$7 = /*#__PURE__*/template(`<input>`);
+const PinInputRoot = props => {
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const api = usePinInput(usePinInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(PinInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergedProps), (() => {
+        var _el$ = _tmpl$$7();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+var pinInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: PinInputContext,
+  Control: PinInputControl,
+  Input: PinInputInput,
+  Label: PinInputLabel,
+  Root: PinInputRoot
+});
+
+const [PopoverProvider, usePopoverContext] = createContext({
+  hookName: 'usePopoverContext',
+  providerName: '<PopoverProvider />'
+});
+
+const PopoverAnchor = props => {
+  const api = usePopoverContext();
+  const mergedProps = mergeProps$1(() => api().anchorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverArrow = props => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps$1(() => popover().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverArrowTip = props => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps$1(() => popover().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverCloseTrigger = props => {
+  const api = usePopoverContext();
+  const mergedProps = mergeProps$1(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const PopoverContent = props => {
+  const api = usePopoverContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const PopoverContext = props => props.children(usePopoverContext());
+
+const PopoverDescription = props => {
+  const api = usePopoverContext();
+  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverIndicator = props => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps$1(() => popover().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverPositioner = props => {
+  const api = usePopoverContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const usePopover = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
+  }, props);
+  const [state, send] = useMachine(popover$1.machine(context), {
+    context
+  });
+  return createMemo(() => popover$1.connect(state, send, normalizeProps));
+};
+
+const PopoverRoot = props => {
+  const [presenceProps, popoverProps] = splitPresenceProps(props);
+  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const api = usePopover(usePopoverProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  return createComponent(PopoverProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return localProps.children;
+        }
+      });
+    }
+  });
+};
+
+const PopoverTitle = props => {
+  const api = usePopoverContext();
+  const mergedProps = mergeProps$1(() => api().titleProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const PopoverTrigger = props => {
+  const api = usePopoverContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
+    'aria-controls': presenceApi().unmounted && null
+  }), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Anchor: PopoverAnchor,
+  Arrow: PopoverArrow,
+  ArrowTip: PopoverArrowTip,
+  CloseTrigger: PopoverCloseTrigger,
+  Content: PopoverContent,
+  Context: PopoverContext,
+  Description: PopoverDescription,
+  Indicator: PopoverIndicator,
+  Positioner: PopoverPositioner,
+  Root: PopoverRoot,
+  Title: PopoverTitle,
+  Trigger: PopoverTrigger
+});
+
+const [ProgressProvider, useProgressContext] = createContext({
+  hookName: 'useProgressContext',
+  providerName: '<ProgressProvider />'
+});
+
+const ProgressCircle = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().circleProps, props);
+  return createComponent(ark.svg, mergedProps);
+};
+
+const ProgressCircleRange = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().circleRangeProps, props);
+  return createComponent(ark.circle, mergedProps);
+};
+
+const ProgressCircleTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().circleTrackProps, props);
+  return createComponent(ark.circle, mergedProps);
+};
+
+const ProgressContext = props => props.children(useProgressContext());
+
+const ProgressLabel = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const ProgressRange = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().rangeProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const useProgress = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(progress$1.machine(context), {
+    context
+  });
+  return createMemo(() => progress$1.connect(state, send, normalizeProps));
+};
+
+const ProgressRoot = props => {
+  const [progressProps, localProps] = createSplitProps()(props, ['id', 'ids', 'max', 'min', 'orientation', 'translations', 'value']);
+  const api = useProgress(progressProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(ProgressProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ProgressTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().trackProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ProgressValueText = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().valueTextProps, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
+    get children() {
+      return props.children || api().valueAsString;
+    }
+  }));
+};
+
+const ProgressView = props => {
+  const [state, localProps] = createSplitProps()(props, ['state']);
+  const api = useProgressContext();
+  const mergedProps = mergeProps$1(() => api().getViewProps(state), localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+var progress = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Circle: ProgressCircle,
+  CircleRange: ProgressCircleRange,
+  CircleTrack: ProgressCircleTrack,
+  Context: ProgressContext,
+  Label: ProgressLabel,
+  Range: ProgressRange,
+  Root: ProgressRoot,
+  Track: ProgressTrack,
+  ValueText: ProgressValueText,
+  View: ProgressView
+});
+
+const [RadioGroupProvider, useRadioGroupContext] = createContext({
+  hookName: 'useRadioGroupContext',
+  providerName: '<RadioGroupProvider />'
+});
+
+const RadioGroupContext = props => props.children(useRadioGroupContext());
+
+const RadioGroupIndicator = props => {
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => radioGroup().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
+  hookName: 'useRadioGroupItemContext',
+  providerName: '<RadioGroupItemProvider />'
+});
+
+const [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createContext({
+  hookName: 'useRadioGroupItemPropsContext',
+  providerName: '<RadioGroupItemPropsProvider />'
+});
+
+const RadioGroupItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => radioGroup().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => radioGroup().getItemState(itemProps));
+  return createComponent(RadioGroupItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(RadioGroupItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.label, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const RadioGroupItemContext = props => props.children(useRadioGroupItemContext());
+
+var _tmpl$$6 = /*#__PURE__*/template(`<input>`);
+const RadioGroupItemControl = props => {
+  const radioGroup = useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => radioGroup().getItemControlProps(itemProps), props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$6();
+    spread(_el$, mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const RadioGroupItemText = props => {
+  const radioGroup = useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => radioGroup().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const RadioGroupLabel = props => {
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => radioGroup().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useRadioGroup = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(radio.machine(context), {
+    context
+  });
+  return createMemo(() => radio.connect(state, send, normalizeProps));
+};
+
+const RadioGroupRoot = props => {
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  const radioGroup = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps$1(() => radioGroup().rootProps, localProps);
+  return createComponent(RadioGroupProvider, {
+    value: radioGroup,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var radioGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: RadioGroupContext,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemContext: RadioGroupItemContext,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel,
+  Root: RadioGroupRoot
+});
+
+const [RatingGroupProvider, useRatingGroupContext] = createContext({
+  hookName: 'useRatingGroupContext',
+  providerName: '<RatingGroupProvider />'
+});
+
+const RatingGroupContext = props => props.children(useRatingGroupContext());
+
+var _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+const RatingGroupControl = props => {
+  const api = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$5();
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
+  hookName: 'useRatingGroupItemContext',
+  providerName: '<RatingGroupItemProvider />'
+});
+
+const RatingGroupItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['index']);
+  const api = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => api().getItemState(itemProps));
+  return createComponent(RatingGroupItemProvider, {
+    value: itemState,
+    get children() {
+      return createComponent(ark.span, mergedProps);
+    }
+  });
+};
+
+const RatingGroupItemContext = props => props.children(useRatingGroupItemContext());
+
+const RatingGroupLabel = props => {
+  const api = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useRatingGroup = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(rating.machine(context), {
+    context
+  });
+  return createMemo(() => rating.connect(state, send, normalizeProps));
+};
+
+const RatingGroupRoot = props => {
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(useRatingProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(RatingGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var ratingGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: RatingGroupContext,
+  Control: RatingGroupControl,
+  Item: RatingGroupItem,
+  ItemContext: RatingGroupItemContext,
+  Label: RatingGroupLabel,
+  Root: RatingGroupRoot
+});
+
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  hookName: 'useSegmentGroupContext',
+  providerName: '<SegmentGroupProvider />'
+});
+
+const SegmentGroupContext = props => props.children(useSegmentGroupContext());
+
+const SegmentGroupIndicator = props => {
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
+  hookName: 'useSegmentGroupItemContext',
+  providerName: '<SegmentGroupItemProvider />'
+});
+
+const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createContext({
+  hookName: 'useSegmentGroupItemPropsContext',
+  providerName: '<SegmentGroupItemPropsProvider />'
+});
+
+const SegmentGroupItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
+  const itemState = createMemo(() => segmentGroup().getItemState(itemProps));
+  return createComponent(SegmentGroupItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(SegmentGroupItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.label, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const SegmentGroupItemContext = props => props.children(useSegmentGroupItemContext());
+
+var _tmpl$$4 = /*#__PURE__*/template(`<input>`);
+const SegmentGroupItemControl = props => {
+  const segmentGroup = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$4();
+    spread(_el$, mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const SegmentGroupItemText = props => {
+  const segmentGroup = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SegmentGroupLabel = props => {
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useSegmentGroup = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(radio.machine(context), {
+    context
+  });
+  return createMemo(() => radio.connect(state, send, normalizeProps));
+};
+
+const SegmentGroupRoot = props => {
+  const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  const segmentGroup = useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = mergeProps$1(() => segmentGroup().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+  return createComponent(SegmentGroupProvider, {
+    value: segmentGroup,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var segmentGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: SegmentGroupContext,
+  Indicator: SegmentGroupIndicator,
+  Item: SegmentGroupItem,
+  ItemContext: SegmentGroupItemContext,
+  ItemControl: SegmentGroupItemControl,
+  ItemText: SegmentGroupItemText,
+  Label: SegmentGroupLabel,
+  Root: SegmentGroupRoot
+});
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const [SelectProvider, useSelectContext] = createContext({
+  hookName: 'useSelectContext',
+  providerName: '<SelectProvider />'
+});
+
+const SelectClearTrigger = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const SelectContent = props => {
+  const select = useSelectContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => select().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SelectContext = props => props.children(useSelectContext());
+
+var _tmpl$$3 = /*#__PURE__*/template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/template(`<select>`),
+  _tmpl$3 = /*#__PURE__*/template(`<option>`);
+const SelectControl = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().controlProps, props);
+  const isValueEmpty = createMemo(() => select().value.length === 0);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, mergeProps(() => select().hiddenSelectProps), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isValueEmpty();
+      },
+      get children() {
+        return _tmpl$$3();
+      }
+    }), null);
+    insert(_el$, createComponent(Index, {
+      get each() {
+        return select().collection.toArray();
+      },
+      children: option => (() => {
+        var _el$3 = _tmpl$3();
+        insert(_el$3, () => option().label);
+        effect(() => _el$3.value = option().value);
+        return _el$3;
+      })()
+    }), null);
+    return _el$;
+  })()];
+};
+
+const SelectIndicator = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const [SelectItemProvider, useSelectItemContext] = createContext({
+  hookName: 'useSelectItemContext',
+  providerName: '<SelectItemProvider />'
+});
+
+const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
+  hookName: 'useSelectItemPropsContext',
+  providerName: '<SelectItemPropsProvider />'
+});
+
+const SelectItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => select().getItemState(itemProps));
+  return createComponent(SelectItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(SelectItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const SelectItemContext = props => props.children(useSelectItemContext());
+
+const [SelectItemGroupPropsProvider, useSelectItemGroupPropsContext] = createContext({
+  hookName: 'useSelectItemGroupPropsContext',
+  providerName: '<SelectItemGroupPropsProvider />'
+});
+
+const SelectItemGroup = props => {
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const select = useSelectContext();
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, _itemGroupProps);
+  const mergedProps = mergeProps$1(() => select().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(SelectItemGroupPropsProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SelectItemGroupLabel = props => {
+  const select = useSelectContext();
+  const itemGroupProps = useSelectItemGroupPropsContext();
+  const mergedProps = mergeProps$1(() => select().getItemGroupLabelProps({
+    htmlFor: itemGroupProps.id
+  }), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemIndicator = props => {
+  const select = useSelectContext();
+  const itemProps = useSelectItemPropsContext();
+  const mergedProps = mergeProps$1(() => select().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemText = props => {
+  const select = useSelectContext();
+  const itemProps = useSelectItemPropsContext();
+  const mergedProps = mergeProps$1(() => select().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SelectLabel = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const SelectPositioner = props => {
+  const select = useSelectContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => select().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useSelect = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => select$1.collection(collectionOptions);
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    collection: collection(),
+    'open.controlled': props.open !== undefined
+  }, rest);
+  const [state, send] = useMachine(select$1.machine(context), {
+    context
+  });
+  return createMemo(() => select$1.connect(state, send, normalizeProps));
+};
+
+const SelectRoot = props => {
+  const [presenceProps, selectProps] = splitPresenceProps(props);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
+  const select = useSelect(useSelectProps);
+  const presenceApi = usePresence(mergeProps$1(() => ({
+    present: select().open
+  }), presenceProps));
+  const mergedProps = mergeProps$1(() => select().rootProps, localProps);
+  return createComponent(SelectProvider, {
+    value: select,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presenceApi,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const SelectTrigger = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const SelectValueText = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => selectAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
+    get children() {
+      return select().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+var select = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: SelectClearTrigger,
+  Content: SelectContent,
+  Context: SelectContext,
+  Control: SelectControl,
+  Indicator: SelectIndicator,
+  Item: SelectItem,
+  ItemContext: SelectItemContext,
+  ItemGroup: SelectItemGroup,
+  ItemGroupLabel: SelectItemGroupLabel,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: SelectItemText,
+  Label: SelectLabel,
+  Positioner: SelectPositioner,
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  ValueText: SelectValueText
+});
+
+const [SliderProvider, useSliderContext] = createContext({
+  hookName: 'useSliderContext',
+  providerName: '<SliderProvider />'
+});
+
+const SliderContext = props => props.children(useSliderContext());
+
+const SliderControl = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderLabel = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const SliderMarker = props => {
+  const [markerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().getMarkerProps(markerProps), localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SliderMarkerGroup = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().markerGroupProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderRange = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().rangeProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const useSlider = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(slider$1.machine(context), {
+    context
+  });
+  return createMemo(() => slider$1.connect(state, send, normalizeProps));
+};
+
+const SliderRoot = props => {
+  const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'disabled', 'form', 'getAriaValueText', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  const api = useSlider(useSliderProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(SliderProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SliderThumb = props => {
+  const [thumbProps, localProps] = createSplitProps()(props, ['index', 'name']);
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().getThumbProps(thumbProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderTrack = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().trackProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SliderValueText = props => {
+  const api = useSliderContext();
+  const mergedProps = mergeProps$1(() => api().valueTextProps, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
+    get children() {
+      return props.children || api().value.join(',');
+    }
+  }));
+};
+
+var slider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: SliderContext,
+  Control: SliderControl,
+  Label: SliderLabel,
+  Marker: SliderMarker,
+  MarkerGroup: SliderMarkerGroup,
+  Range: SliderRange,
+  Root: SliderRoot,
+  Thumb: SliderThumb,
+  Track: SliderTrack,
+  ValueText: SliderValueText
+});
+
+const [SplitterProvider, useSplitterContext] = createContext({
+  hookName: 'useSplitterContext',
+  providerName: '<SplitterProvider />'
+});
+
+const SplitterContext = props => props.children(useSplitterContext());
+
+const SplitterPanel = props => {
+  const [panelProps, restProps] = createSplitProps()(props, ['id', 'snapSize']);
+  const api = useSplitterContext();
+  const mergedProps = mergeProps$1(() => api().getPanelProps(panelProps), restProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SplitterResizeTrigger = props => {
+  const [resizeTriggerProps, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
+  const api = useSplitterContext();
+  const mergedProps = mergeProps$1(() => api().getResizeTriggerProps(resizeTriggerProps), restProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const useSplitter = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(splitter$1.machine(context), {
+    context
+  });
+  return createMemo(() => splitter$1.connect(state, send, normalizeProps));
+};
+
+const SplitterRoot = props => {
+  const [useSplitterProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
+  const api = useSplitter(useSplitterProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(SplitterProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var splitter = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: SplitterContext,
+  Panel: SplitterPanel,
+  ResizeTrigger: SplitterResizeTrigger,
+  Root: SplitterRoot
+});
+
+const [SwitchProvider, useSwitchContext] = createContext({
+  hookName: 'useSwitchContext',
+  providerName: '<SwitchProvider />'
+});
+
+const SwitchContext = props => props.children(useSwitchContext());
+
+var _tmpl$$2 = /*#__PURE__*/template(`<input>`);
+const SwitchControl = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.span, mergedProps), (() => {
+    var _el$ = _tmpl$$2();
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const SwitchLabel = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const useSwitch = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(zagSwitch.machine(context), {
+    context
+  });
+  return createMemo(() => zagSwitch.connect(state, send, normalizeProps));
+};
+
+const SwitchRoot = props => {
+  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
+  const api = useSwitch(switchProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(SwitchProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+const SwitchThumb = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().thumbProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+var _switch = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: SwitchContext,
+  Control: SwitchControl,
+  Label: SwitchLabel,
+  Root: SwitchRoot,
+  Thumb: SwitchThumb
+});
+
+const [TabsProvider, useTabsContext] = createContext({
+  hookName: 'useTabsContext',
+  providerName: '<TabsProvider />'
+});
+
+const TabContent = props => {
+  const [contentProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useTabsContext();
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence(mergeProps$1(renderStrategyProps, () => ({
+    present: api().value === contentProps.value
+  })));
+  const mergedProps = mergeProps$1(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
+  return createComponent(PresenceProvider, {
+    value: presenceApi,
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return !presenceApi().unmounted;
+        },
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const TabIndicator = props => {
+  const api = useTabsContext();
+  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TabList = props => {
+  const api = useTabsContext();
+  const mergedProps = mergeProps$1(() => api().listProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TabTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
+  const api = useTabsContext();
+  const mergedProps = mergeProps$1(() => api().getTriggerProps(triggerProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const TabsContext = props => props.children(useTabsContext());
+
+const useTabs = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tabs$1.machine(context), {
+    context
+  });
+  return createMemo(() => tabs$1.connect(state, send, normalizeProps));
+};
+
+const TabsRoot = props => {
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
+  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'id', 'ids', 'loopFocus', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
+  const api = useTabs(useTabsProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
+  return createComponent(TabsProvider, {
+    value: api,
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+var tabs = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: TabContent,
+  Context: TabsContext,
+  Indicator: TabIndicator,
+  List: TabList,
+  Root: TabsRoot,
+  Trigger: TabTrigger
+});
+
+const [TagsInputProvider, useTagsInputContext] = createContext({
+  hookName: 'useTagsInputContext',
+  providerName: '<TagsInputProvider />'
+});
+
+const TagsInputClearTrigger = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const TagsInputContext = props => props.children(useTagsInputContext());
+
+const TagsInputControl = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TagsInputInput = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => api().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
+  hookName: 'useTagsInputItemContext',
+  providerName: '<TagsInputItemProvider />'
+});
+
+const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
+  hookName: 'useTagsInputItemPropsContext',
+  providerName: '<TagsInputItemPropsProvider />'
+});
+
+const TagsInputItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'index', 'value']);
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => api().getItemState(itemProps));
+  return createComponent(TagsInputItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(TagsInputItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const TagsInputItemContext = props => props.children(useTagsInputItemContext());
+
+const TagsInputItemDeleteTrigger = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemDeleteTriggerProps(itemProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const TagsInputItemInput = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemInputProps(itemProps), props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const TagsInputItemPreview = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemPreviewProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TagsInputItemText = props => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const TagsInputLabel = props => {
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useTagsInput = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tagsInput$1.machine(context), {
+    context
+  });
+  return createMemo(() => tagsInput$1.connect(state, send, normalizeProps));
+};
+
+var _tmpl$$1 = /*#__PURE__*/template(`<input>`);
+const TagsInputRoot = props => {
+  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput(useTagsInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(TagsInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergedProps), (() => {
+        var _el$ = _tmpl$$1();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+var tagsInput = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: TagsInputClearTrigger,
+  Context: TagsInputContext,
+  Control: TagsInputControl,
+  Input: TagsInputInput,
+  Item: TagsInputItem,
+  ItemContext: TagsInputItemContext,
+  ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+  ItemInput: TagsInputItemInput,
+  ItemPreview: TagsInputItemPreview,
+  ItemText: TagsInputItemText,
+  Label: TagsInputLabel,
+  Root: TagsInputRoot
+});
+
+const createToaster = props => {
+  const machine = toast$1.group.machine({
+    id: '1',
+    ...props
+  });
+  const api = toast$1.group.connect(machine, machine.send, normalizeProps);
+  return {
+    ...api,
+    machine
+  };
+};
+
+const [ToastProvider, useToastContext] = createContext({
+  hookName: 'useToastContext',
+  providerName: '<ToastProvider />'
+});
+
+const ToastActionTrigger = props => {
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().actionTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ToastCloseTrigger = props => {
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().closeTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ToastContext = props => props.children(useToastContext());
+
+const ToastDescription = props => {
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().descriptionProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var _tmpl$ = /*#__PURE__*/template(`<div><div></div><div>`);
+const ToastRoot = props => {
+  const toast = useToastContext();
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps(() => toast().rootProps), false, true);
+    spread(_el$2, mergeProps(() => toast().ghostBeforeProps), false, false);
+    insert(_el$, () => props.children, _el$3);
+    spread(_el$3, mergeProps(() => toast().ghostAfterProps), false, false);
+    return _el$;
+  })();
+};
+
+const ToastTitle = props => {
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().titleProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const Toaster = props => {
+  const [toasterProps, localProps] = splitProps(props, ['toaster', 'children']);
+  const [state, send] = useMachine(toasterProps.toaster.machine);
+  const placement = state.context.placement;
+  const api = createMemo(() => toast$1.group.connect(state, send, normalizeProps));
+  const toasts = createMemo(() => api().getToastsByPlacement(placement));
+  const mergedProps = mergeProps$1(api().getGroupProps({
+    placement
+  }), localProps);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return toasts();
+        },
+        children: toast => createComponent(ToastActor, {
+          value: toast,
+          children: ctx => toasterProps.children(ctx)
+        })
+      });
+    }
+  }));
+};
+const ToastActor = props => {
+  const [state, send] = useActor(props.value);
+  const api = createMemo(() => toast$1.connect(state, send, normalizeProps));
+  const ctx = createMemo(() => state.context);
+  return createComponent(ToastProvider, {
+    value: api,
+    get children() {
+      return props.children(ctx);
+    }
+  });
+};
+
+var toast = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ActionTrigger: ToastActionTrigger,
+  CloseTrigger: ToastCloseTrigger,
+  Context: ToastContext,
+  Description: ToastDescription,
+  Root: ToastRoot,
+  Title: ToastTitle
+});
+
+const [ToggleGroupProvider, useToggleGroupContext] = createContext({
+  hookName: 'useToggleGroupContext',
+  providerName: '<ToggleGroupProvider />'
+});
+
+const ToggleGroupContext = props => props.children(useToggleGroupContext());
+
+const ToggleGroupItem = props => {
+  const [toggleProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+  const api = useToggleGroupContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(toggleProps), restProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+const useToggleGroup = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(toggleGroup$1.machine(context), {
+    context
+  });
+  return createMemo(() => toggleGroup$1.connect(state, send, normalizeProps));
+};
+
+const ToggleGroupRoot = props => {
+  const [useToggleGroupProps, restProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'loopFocus', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
+  const api = useToggleGroup(useToggleGroupProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, restProps);
+  return createComponent(ToggleGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var toggleGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: ToggleGroupContext,
+  Item: ToggleGroupItem,
+  Root: ToggleGroupRoot
+});
+
+const [TooltipProvider, useTooltipContext] = createContext({
+  hookName: 'useTooltipContext',
+  providerName: '<TooltipProvider />'
+});
+
+const TooltipArrow = props => {
+  const tooltip = useTooltipContext();
+  const mergedProps = mergeProps$1(() => tooltip().arrowProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TooltipArrowTip = props => {
+  const api = useTooltipContext();
+  const mergedProps = mergeProps$1(() => api().arrowTipProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TooltipContent = props => {
+  const api = useTooltipContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const TooltipContext = props => props.children(useTooltipContext());
+
+const TooltipPositioner = props => {
+  const api = useTooltipContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().unmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useTooltip = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
+  }, props);
+  const [state, send] = useMachine(tooltip$1.machine(context), {
+    context
+  });
+  return createMemo(() => tooltip$1.connect(state, send, normalizeProps));
+};
+
+const TooltipRoot = props => {
+  const [presenceProps, tooltipProps] = splitPresenceProps(props);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().open
+  })));
+  return createComponent(TooltipProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return localProps.children;
+        }
+      });
+    }
+  });
+};
+
+const TooltipTrigger = props => {
+  const api = useTooltipContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+var tooltip = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: TooltipArrow,
+  ArrowTip: TooltipArrowTip,
+  Content: TooltipContent,
+  Context: TooltipContext,
+  Positioner: TooltipPositioner,
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger
+});
+
+const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext({
+  hookName: 'useTreeViewBranchContext',
+  providerName: '<TreeViewBranchProvider />'
+});
+
+const [TreeViewProvider, useTreeViewContext] = createContext({
+  hookName: 'useTreeViewContext',
+  providerName: '<TreeViewProvider />'
+});
+
+const [TreeViewDepthProvider, useTreeViewDepthContext] = createContext({
+  hookName: 'useTreeViewDepthContext',
+  providerName: '<TreeViewDepthProvider />'
+});
+
+const TreeViewBranch = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
+  const api = useTreeViewContext();
+  const depth = useTreeViewDepthContext();
+  const branchProps = mergeProps$1(itemProps, {
+    depth
+  });
+  const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), localProps);
+  return createComponent(TreeViewDepthProvider, {
+    value: depth + 1,
+    get children() {
+      return createComponent(TreeViewBranchProvider, {
+        value: branchProps,
+        get children() {
+          return createComponent(ark.li, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const TreeViewBranchContent = props => {
+  const api = useTreeViewContext();
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchContentProps(branchProps), props);
+  return createComponent(ark.ul, mergedProps);
+};
+
+const TreeViewBranchControl = props => {
+  const api = useTreeViewContext();
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchControlProps(branchProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewBranchIndicator = props => {
+  const api = useTreeViewContext();
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchIndicatorProps(branchProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewBranchText = props => {
+  const api = useTreeViewContext();
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchTextProps(branchProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const TreeViewBranchTrigger = props => {
+  const api = useTreeViewContext();
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = mergeProps$1(() => api().getBranchTriggerProps(branchProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewContext = props => props.children(useTreeViewContext());
+
+const [TreeViewItemProvider, useTreeViewItemContext] = createContext({
+  hookName: 'useTreeViewItemContext',
+  providerName: '<TreeViewItemProvider />'
+});
+
+const [TreeViewItemPropsProvider, useTreeViewItemPropsContext] = createContext({
+  hookName: 'useTreeViewItemPropsContext',
+  providerName: '<TreeViewItemProvider />'
+});
+
+const TreeViewItem = props => {
+  const [_itemProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
+  const api = useTreeViewContext();
+  const depth = useTreeViewDepthContext();
+  const itemProps = mergeProps$1(_itemProps, {
+    depth
+  });
+  const itemState = createMemo(() => api().getItemState(itemProps));
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  return createComponent(TreeViewItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(TreeViewItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.li, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const TreeViewItemContext = props => props.children(useTreeViewItemContext());
+
+const TreeViewItemIndicator = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewItemText = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const TreeViewLabel = props => {
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useTreeView = props => {
+  const locale = useLocaleContext();
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    dir: locale().dir,
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(treeView$1.machine(context), {
+    context
+  });
+  return createMemo(() => treeView$1.connect(state, send, normalizeProps));
+};
+
+const TreeViewRoot = props => {
+  const [useTreeViewProps, localProps] = createSplitProps()(props, ['expandedValue', 'focusedValue', 'id', 'ids', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedValue', 'selectionMode', 'typeahead']);
+  const api = useTreeView(useTreeViewProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(TreeViewProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const TreeViewTree = props => {
+  const api = useTreeViewContext();
+  const mergedProps = mergeProps$1(() => api().treeProps, props);
+  return createComponent(TreeViewDepthProvider, {
+    value: 1,
+    get children() {
+      return createComponent(ark.ul, mergedProps);
+    }
+  });
+};
+
+var treeView = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Branch: TreeViewBranch,
+  BranchContent: TreeViewBranchContent,
+  BranchControl: TreeViewBranchControl,
+  BranchIndicator: TreeViewBranchIndicator,
+  BranchText: TreeViewBranchText,
+  BranchTrigger: TreeViewBranchTrigger,
+  Context: TreeViewContext,
+  Item: TreeViewItem,
+  ItemContext: TreeViewItemContext,
+  ItemIndicator: TreeViewItemIndicator,
+  ItemText: TreeViewItemText,
+  Label: TreeViewLabel,
+  Root: TreeViewRoot,
+  Tree: TreeViewTree
+});
+
+export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputContext, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectIndicator, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderContext, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchContext, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemContext, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useClipboardContext, useCollapsibleContext, useColorPickerContext, useComboboxContext, useComboboxItemContext, useDatePickerContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useLocaleContext, useMenuContext, useMenuItemContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, useTreeViewItemContext };
+//# sourceMappingURL=index.js.map