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

package/dist/esm/index.js

@@ -0,0 +1,4084 @@
+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 { createContext as createContext$1, useContext, splitProps, Show, createMemo, createUniqueId, createSignal, createEffect, mergeProps as mergeProps$2, children, Index, onCleanup } from 'solid-js';
+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
+  } = options;
+  const Context = createContext$1(undefined);
+  function useContext$1() {
+    const context = useContext(Context);
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+      error.name = 'ContextError';
+      Error.captureStackTrace?.(error, useContext$1);
+      throw error;
+    }
+    return context;
+  }
+  return [Context.Provider, useContext$1, Context];
+}
+
+const [AccordionProvider, useAccordionContext] = createContext({
+  hookName: 'useAccordionContext',
+  providerName: '<AccordionProvider />'
+});
+
+const AccordionContext = props => props.children(useAccordionContext());
+
+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));
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const CollapsibleContext = props => props.children(useCollapsibleContext());
+
+const createSplitProps = () => (props, keys) => splitProps(props, keys);
+
+const [EnvironmentProvider, useEnvironmentContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false
+});
+
+var _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
+const Environment = props => {
+  // eslint-disable-next-line prefer-const
+  let 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$$c();
+        var _ref$ = spanRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
+        return _el$;
+      })())];
+    }
+  });
+};
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  hookName: 'useRenderStrategyContext',
+  providerName: '<RenderStrategyProvider />'
+});
+const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+
+const useCollapsible = props => {
+  const getRootNode = useEnvironmentContext();
+  const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, collapsibleProps);
+  const [state, send] = useMachine(collapsible$1.machine(context), {
+    context
+  });
+  const [wasVisible, setWasVisible] = createSignal(false);
+  createEffect(() => {
+    const isPresent = api().isVisible;
+    if (isPresent) setWasVisible(true);
+  });
+  const api = createMemo(() => collapsible$1.connect(state, send, normalizeProps));
+  return createMemo(() => ({
+    ...api(),
+    isUnmounted: !api().isVisible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()
+  }));
+};
+
+const CollapsibleRoot = props => {
+  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', '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 context = useAccordionContext();
+  const renderStrategyProps = useRenderStrategyContext();
+  const mergedProps = mergeProps$1(() => context().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => context().getItemState(itemProps));
+  const itemContentProps = context().getItemContentProps(itemProps);
+  return createComponent(AccordionItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(AccordionItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(CollapsibleRoot, mergeProps({
+            get open() {
+              return itemState().isOpen;
+            },
+            get ids() {
+              return {
+                content: itemContentProps.id
+              };
+            }
+          }, renderStrategyProps, mergedProps));
+        }
+      });
+    }
+  });
+};
+
+const AccordionItemContent = props => {
+  const context = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const itemContentProps = createMemo(() => {
+    const ownProps = context().getItemContentProps(itemProps);
+    delete ownProps.hidden;
+    return ownProps;
+  });
+  const mergedProps = mergeProps$1(itemContentProps, props);
+  return createComponent(CollapsibleContent, mergedProps);
+};
+
+const AccordionItemIndicator = props => {
+  const context = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const mergedProps = mergeProps$1(() => context().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const AccordionItemTrigger = props => {
+  const context = useAccordionContext();
+  const itemProps = useAccordionItemPropsContext();
+  const collapsible = useCollapsibleContext();
+  const mergedProps = mergeProps$1(() => context().getItemTriggerProps(itemProps), props);
+  const [ariaControls, buttonProps] = splitProps(mergedProps, ['aria-controls']);
+  return createComponent(ark.button, mergeProps(buttonProps, () => !collapsible().isUnmounted && ariaControls));
+};
+
+const useAccordion = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const api = useAccordion(useAccordionProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(AccordionProvider, {
+    value: api,
+    get children() {
+      return createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const AccordionItemContext = props => props.children(useAccordionItemContext());
+
+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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'getRootNode', '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$$b = /*#__PURE__*/template(`<input>`);
+const CheckboxControl = props => {
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$b();
+    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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', '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().isCopied
+  }), 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().isCopied;
+        },
+        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, ['getRootNode', 'id', 'ids', 'value', 'timeout', 'onCopyStatusChange']);
+  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 [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
+  hookName: 'useColorPickerAreaContext',
+  providerName: '<ColorPickerAreaProvider />'
+});
+
+const [ColorPickerProvider, useColorPickerContext] = createContext({
+  hookName: 'useColorPickerContext',
+  providerName: '<ColorPickerProvider />'
+});
+
+const ColorPickerArea = props => {
+  const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getAreaProps(channelProps), divprops);
+  return createComponent(ColorPickerAreaProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerAreaBackground = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerAreaThumb = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getAreaThumbProps(colorAreaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelInput = props => {
+  const [channelProps, inputProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getChannelInputProps(channelProps), inputProps);
+  return createComponent(ark.input, mergedProps);
+};
+
+const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext({
+  hookName: 'useColorPickerChannelSliderContext',
+  providerName: '<ColorPickerChannelSliderProvider />'
+});
+
+const ColorPickerChannelSlider = props => {
+  const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderProps(channelProps), localProps);
+  return createComponent(ColorPickerChannelSliderProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const ColorPickerChannelSliderThumb = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(sliderContext), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ColorPickerChannelSliderTrack = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(sliderContext), 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 isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+  });
+  return createMemo(() => ({
+    isUnmounted: !api().isPresent && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isPresent && wasEverPresent(),
+    isPresent: api().isPresent,
+    presenceProps: {
+      ref: api().setNode,
+      hidden: !api().isPresent,
+      '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().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useColorPicker = props => {
+  const [local, rest] = splitProps(props, ['value']);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1(() => ({
+    id: createUniqueId(),
+    getRootNode,
+    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$$a = /*#__PURE__*/template(`<input>`);
+const ColorPickerRoot = props => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker(useColorPickerProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return [createComponent(PresenceProvider, {
+        value: apiPresence,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      }), (() => {
+        var _el$ = _tmpl$$a();
+        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = 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(ColorPickerSwatchProvider, {
+    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 = useColorPickerSwatchContext();
+  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
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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().isUnmounted;
+    },
+    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']);
+  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 ComboboxItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps$1(() => combobox().getItemGroupProps(groupProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ComboboxItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps$1(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  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().isUnmounted;
+    },
+    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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode,
+    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', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const api = useCombobox(useComboboxProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  const mergedProps = mergeProps$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().isUnmounted;
+    },
+    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$$9 = /*#__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$$9();
+        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().isUnmounted;
+    },
+    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 getRootNode = useEnvironmentContext();
+  const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
+  const context = mergeProps$1(() => ({
+    id: createUniqueId(),
+    getRootNode,
+    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', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', '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().isOpen
+  })));
+  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$$8 = /*#__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$$8();
+        _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().isOpen
+  })));
+  const mergedProps = mergeProps$1(() => api().backdropProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useDialog = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, 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', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const api = useDialog(useDialogProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  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().isUnmounted && 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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const api = useEditable(useEditableProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  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$$7 = /*#__PURE__*/template(`<input>`);
+const FileUploadDropzone = props => {
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => api().dropzoneProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$7();
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
+  hookName: 'useFileUploadItemContext',
+  providerName: '<FileUploadItemProvider />'
+});
+
+const FileUploadItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['file']);
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  return createComponent(FileUploadItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.li, mergedProps);
+    }
+  });
+};
+
+const FileUploadItemDeleteTrigger = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemDeleteTriggerProps(item), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const FileUploadItemGroup = props => {
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => api().itemGroupProps, props);
+  return createComponent(ark.ul, mergedProps);
+};
+
+const FileUploadItemName = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemNameProps(item), props);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return props.children || item.file.name;
+    }
+  }));
+};
+
+const FileUploadItemPreview = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemPreviewProps(item), props);
+  if (!item.file.type.match(props.type ?? '.*')) return null;
+  return createComponent(ark.div, mergedProps);
+};
+
+const FileUploadItemPreviewImage = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const [url, setUrl] = createSignal('');
+  api().createFileUrl(item.file, url => setUrl(url));
+  const mergedProps = mergeProps$1(api().getItemPreviewImageProps({
+    ...item,
+    url: url()
+  }), props);
+  return createComponent(ark.img, mergedProps);
+};
+
+const FileUploadItemSizeText = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemSizeTextProps(item), props);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return props.children || api().getFileSize(item.file);
+    }
+  }));
+};
+
+const FileUploadLabel = props => {
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useFileUpload = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(fileUpload$1.machine(context), {
+    context
+  });
+  return createMemo(() => fileUpload$1.connect(state, send, normalizeProps));
+};
+
+const FileUploadRoot = props => {
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'dir', 'directory', 'disabled', 'getRootNode', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
+  const api = useFileUpload(fileUploadProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(FileUploadProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FileUploadTrigger = props => {
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => api().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 [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 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().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useHoverCard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, 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', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useHoverCard(useHoverCardProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  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 MenuContent = props => {
+  const context = useMenuContext();
+  const presenceContext = usePresenceContext();
+  const mergedProps = mergeProps$1(() => context().contentProps, () => presenceContext().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceContext().isUnmounted;
+    },
+    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 [MenuItemProvider, useMenuItemContext] = createContext({
+  hookName: 'useMenuItemContext',
+  providerName: '<MenuItemProvider />'
+});
+
+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);
+};
+
+createContext({
+  hookName: 'useMenuOptionItemContext',
+  providerName: '<MenuOptionItemProvider />'
+});
+const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
+  hookName: 'useMenuOptionItemPropsContext',
+  providerName: '<MenuOptionItemPropsProvider />'
+});
+
+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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useMenu = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, 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', 'dir', 'getRootNode', 'highlightedValue', 'id', 'ids', 'loop', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning']);
+  const parentApi = useMenuContext();
+  const parentMachine = useMenuMachineContext();
+  const menu = useMenu(useMenuProps);
+  const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
+    present: menu.api().isOpen
+  })));
+  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().isUnmounted && null
+  }), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const MenuTriggerItem = props => {
+  const getTriggerItemProps = useMenuTriggerItemContext();
+  const mergedProps = mergeProps$1(() => getTriggerItemProps?.(), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+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 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);
+    }
+  });
+};
+
+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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const api = useNumberInput(useNumberInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'getRootNode', '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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(pinInput$1.machine(context), {
+    context
+  });
+  return createMemo(() => pinInput$1.connect(state, send, normalizeProps));
+};
+
+var _tmpl$$6 = /*#__PURE__*/template(`<input>`);
+const PinInputRoot = props => {
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const api = usePinInput(usePinInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(PinInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergedProps), (() => {
+        var _el$ = _tmpl$$6();
+        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().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const usePopover = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, 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', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const api = usePopover(usePopoverProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  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().isUnmounted && 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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'getRootNode', 'id', '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 RadioGroupIndicator = props => {
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => api().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 api = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => api().getItemState(itemProps));
+  return createComponent(RadioGroupItemProvider, {
+    value: itemState,
+    get children() {
+      return createComponent(RadioGroupItemPropsProvider, {
+        value: itemProps,
+        get children() {
+          return createComponent(ark.label, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+var _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+const RadioGroupItemControl = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$5();
+    spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const RadioGroupItemText = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const RadioGroupLabel = props => {
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useRadioGroup = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(RadioGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var radioGroup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel,
+  Root: RadioGroupRoot
+});
+
+const [RatingGroupProvider, useRatingGroupContext] = createContext({
+  hookName: 'useRatingGroupContext',
+  providerName: '<RatingGroupProvider />'
+});
+
+const RatingGroupContext = props => props.children(useRatingGroupContext());
+
+var _tmpl$$4 = /*#__PURE__*/template(`<input>`);
+const RatingGroupControl = props => {
+  const api = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$4();
+    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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(useRatingProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(RatingGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+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 api = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => api().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 api = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
+  const itemState = createMemo(() => api().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$$3 = /*#__PURE__*/template(`<input>`);
+const SegmentGroupItemControl = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$$3();
+    spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+const SegmentGroupItemText = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SegmentGroupLabel = props => {
+  const api = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const useSegmentGroup = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+  return createComponent(SegmentGroupProvider, {
+    value: api,
+    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
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const [SelectProvider, useSelectContext] = createContext({
+  hookName: 'useSelectContext',
+  providerName: '<SelectProvider />'
+});
+
+const SelectClearTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const SelectContent = props => {
+  const api = useSelectContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var _tmpl$$2 = /*#__PURE__*/template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/template(`<select>`),
+  _tmpl$3 = /*#__PURE__*/template(`<option>`);
+const SelectControl = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  const isValueEmpty = createMemo(() => api().value.length === 0);
+  return [createComponent(ark.div, mergedProps), (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, mergeProps(() => api().hiddenSelectProps), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isValueEmpty();
+      },
+      get children() {
+        return _tmpl$$2();
+      }
+    }), null);
+    insert(_el$, createComponent(Index, {
+      get each() {
+        return api().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 api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().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 api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => api().getItemState(itemProps));
+  return createComponent(SelectItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(SelectItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const SelectItemGroup = props => {
+  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['for']);
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().getItemGroupLabelProps({
+    htmlFor: labelProps.for
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemIndicator = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const SelectItemText = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemPropsContext();
+  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const SelectLabel = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const SelectPositioner = props => {
+  const api = useSelectContext();
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  return createComponent(Show, {
+    get when() {
+      return !presenceApi().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useSelect = props => {
+  const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
+  const collection = () => select$1.collection(collectionOptions);
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode,
+    collection: collection()
+  }, 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', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectOnBlur', 'value']);
+  const api = useSelect(useSelectProps);
+  const presenceApi = usePresence(mergeProps$1(() => ({
+    present: api().isOpen
+  }), presenceProps));
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(SelectProvider, {
+    value: api,
+    get children() {
+      return createComponent(PresenceProvider, {
+        value: presenceApi,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const SelectTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const SelectValueText = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps$1(() => selectAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
+    get children() {
+      return api().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+const SelectContext = props => props.children(useSelectContext());
+
+const SelectItemContext = props => props.children(useSelectItemContext());
+
+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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  const api = useSlider(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.div, 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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'getRootNode', '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$$1 = /*#__PURE__*/template(`<input>`);
+const SwitchControl = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().controlProps, props);
+  return [createComponent(ark.span, mergedProps), (() => {
+    var _el$ = _tmpl$$1();
+    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const SwitchLabel = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const useSwitch = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', '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().isUnmounted;
+        },
+        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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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', 'dir', 'getRootNode', 'id', 'ids', 'loop', '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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(tagsInput$1.machine(context), {
+    context
+  });
+  return createMemo(() => tagsInput$1.connect(state, send, normalizeProps));
+};
+
+var _tmpl$ = /*#__PURE__*/template(`<input>`);
+const TagsInputRoot = props => {
+  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const api = useTagsInput(useTagsInputProps);
+  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  return createComponent(TagsInputProvider, {
+    value: api,
+    get children() {
+      return [createComponent(ark.div, mergedProps), (() => {
+        var _el$ = _tmpl$();
+        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 ToastGroup = props => {
+  return createComponent(ark.ol, props);
+};
+
+const [ToastProvider, useToastContext] = createContext({
+  hookName: 'useToastContext',
+  providerName: '<ToastProvider />'
+});
+
+const createToaster = props => {
+  const service = toast$1.group.machine({
+    id: '1',
+    ...props
+  }).start();
+  const [state, send] = useActor(service);
+  const api = createMemo(() => toast$1.group.connect(state, send, normalizeProps));
+  const subscribe = fn => {
+    // @ts-expect-error FIX LATER IT EXISTS
+    return service.subscribe(state => fn(state.context.toasts));
+  };
+  const Toaster = toasterProps => {
+    const getRootNode = useEnvironmentContext();
+    createEffect(() => {
+      service.setContext({
+        getRootNode
+      });
+      onCleanup(() => service.stop());
+    });
+    const mergedProps = mergeProps$1(() => api().getGroupProps({
+      placement: props.placement
+    }), toasterProps);
+    return createComponent(ToastGroup, mergeProps(mergedProps, {
+      get children() {
+        return createComponent(Index, {
+          get each() {
+            return api().toastsByPlacement[props.placement];
+          },
+          children: toast => createComponent(ToastProviderFactory, {
+            get service() {
+              return toast();
+            }
+          })
+        });
+      }
+    }));
+  };
+  return [Toaster, createMemo(() => Object.assign(api(), {
+    subscribe
+  }))];
+};
+const ToastProviderFactory = props => {
+  const [state, send] = useActor(props.service);
+  const api = createMemo(() => toast$1.connect(state, send, normalizeProps));
+  return createComponent(ToastProvider, {
+    value: api,
+    get children() {
+      return state.context.render?.(api);
+    }
+  });
+};
+
+const ToastCloseTrigger = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$1(() => api().closeTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+const ToastContext = props => props.children(useToastContext());
+
+const ToastDescription = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ToastRoot = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$1(() => api().rootProps, props);
+  return createComponent(ark.li, mergedProps);
+};
+
+const ToastTitle = props => {
+  const api = useToastContext();
+  const mergedProps = mergeProps$1(() => api().titleProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var toast = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  CloseTrigger: ToastCloseTrigger,
+  Context: ToastContext,
+  Description: ToastDescription,
+  Group: ToastGroup,
+  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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'loop', '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().isUnmounted;
+    },
+    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().isUnmounted;
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useTooltip = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    getRootNode
+  }, 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', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
+  const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
+    present: api().isOpen
+  })));
+  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', 'id']);
+  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 TreeViewItem = props => {
+  const [_itemProps, localProps] = createSplitProps()(props, ['id', 'disabled']);
+  const api = useTreeViewContext();
+  const depth = useTreeViewDepthContext();
+  const itemProps = mergeProps$1(_itemProps, {
+    depth
+  });
+  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
+  return createComponent(TreeViewItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.li, mergedProps);
+    }
+  });
+};
+
+const TreeViewItemIndicator = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const TreeViewItemText = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemContext();
+  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 getRootNode = useEnvironmentContext();
+  const context = mergeProps$1({
+    id: createUniqueId(),
+    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, ['dir', 'expandedIds', 'focusedId', 'getRootNode', 'id', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedIds', 'selectionMode']);
+  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,
+  ItemIndicator: TreeViewItemIndicator,
+  ItemText: TreeViewItemText,
+  Label: TreeViewLabel,
+  Root: TreeViewRoot,
+  Tree: TreeViewTree
+});
+
+export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, 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, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, 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, RadioGroupIndicator, RadioGroupItem, 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, SelectControl, SelectIndicator, SelectItem, 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, ToastCloseTrigger, ToastContext, ToastDescription, ToastGroup, ToastRoot, ToastTitle, 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, 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 };
+//# sourceMappingURL=index.js.map