@ark-ui/solid 3.3.0 → 3.4.1

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { mergeProps as mergeProps$1, useMachine, normalizeProps, useActor } from
 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, checkboxAnatomy, colorPickerAnatomy, datePickerAnatomy, segmentGroupAnatomy, selectAnatomy } from '@ark-ui/anatomy';
+import { carouselAnatomy, checkboxAnatomy, fieldAnatomy, 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';
@@ -14,6 +14,7 @@ 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 { getDocument, getWindow } from '@zag-js/dom-query';
 import * as fileUpload$1 from '@zag-js/file-upload';
 import { isRTL, formatBytes, formatNumber } from '@zag-js/i18n-utils';
 import * as hoverCard$1 from '@zag-js/hover-card';
@@ -27,8 +28,7 @@ import * as qrCode$1 from '@zag-js/qr-code';
 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 { getDocument, getWindow, isIos, nextTick, raf, createScope, query, getDataUrl, dataAttr, getEventTarget } from '@zag-js/dom-query';
-import { createProps } from '@zag-js/types';
+import * as signaturePad$1 from '@zag-js/signature-pad';
 import * as slider$1 from '@zag-js/slider';
 import * as splitter$1 from '@zag-js/splitter';
 import * as zagSwitch from '@zag-js/switch';
@@ -134,8 +134,8 @@ const CollapsibleContent = props => {
 
 const CollapsibleContext = props => props.children(useCollapsibleContext());
 
-const isFunction$1 = value => typeof value === 'function';
-const runIfFn$1 = (valueOrFn, ...args) => isFunction$1(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+const isFunction = value => typeof value === 'function';
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
 const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
@@ -151,7 +151,7 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
 var _tmpl$$5 = /*#__PURE__*/template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = createSignal();
-  const getRootNode = () => runIfFn$1(props.value) ?? spanRef()?.ownerDocument ?? document;
+  const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
   const environment = createMemo(() => ({
     getRootNode,
     getDocument: () => getDocument(getRootNode()),
@@ -597,12 +597,12 @@ const CheckboxControl = props => {
 };
 
 function useControllableState(props) {
-  const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn$1(props.defaultValue));
+  const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn(props.defaultValue));
   const controlled = createMemo(() => props.value?.() !== undefined);
   const currentValue = createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
   const setValue = next => {
     untrack(() => {
-      const nextValue = runIfFn$1(next, currentValue());
+      const nextValue = runIfFn(next, currentValue());
       if (controlled()) {
         return props.onChange?.(nextValue);
       }
@@ -644,6 +644,7 @@ function useCheckboxGroup(props = {}) {
             toggleValue(itemProps.value);
           }
         },
+        name: props.name,
         disabled: props.disabled,
         readOnly: props.readOnly
       };
@@ -651,6 +652,7 @@ function useCheckboxGroup(props = {}) {
     return {
       isChecked,
       value,
+      name: props.name,
       disabled: props.disabled,
       readOnly: props.readOnly,
       setValue,
@@ -668,20 +670,210 @@ const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
 });
 
 const CheckboxGroup = props => {
-  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly']);
+  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly', 'name']);
   const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
   return createComponent(CheckboxGroupContextProvider, {
     value: checkboxGroup,
     get children() {
-      return createComponent(ark.div, mergeProps(localProps, () => checkboxAnatomy.build().group.attrs));
+      return createComponent(ark.div, mergeProps({
+        role: "group"
+      }, localProps, () => checkboxAnatomy.build().group.attrs));
+    }
+  });
+};
+
+const [FieldProvider, useFieldContext] = createContext({
+  hookName: 'useFieldContext',
+  providerName: '<FieldProvider />',
+  strict: false
+});
+
+const FieldContext = props => props.children(useFieldContext());
+
+const FieldErrorText = props => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps$1(() => field().getErrorTextProps(), props);
+  return createComponent(Show, {
+    get when() {
+      return field?.().invalid;
+    },
+    get children() {
+      return createComponent(ark.span, mergedProps);
+    }
+  });
+};
+
+const FieldHelperText = props => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps$1(() => field().getHelperTextProps(), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+const FieldInput = props => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps$1(() => field?.().getInputProps(), props);
+  return createComponent(ark.input, mergedProps);
+};
+
+const FieldLabel = props => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps$1(() => field?.().getLabelProps(), props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const FieldSelect = props => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps$1(() => field?.().getSelectProps(), props);
+  return createComponent(ark.select, mergedProps);
+};
+
+const parts = fieldAnatomy.build();
+const useField = props => {
+  const {
+    required = false,
+    disabled = false,
+    invalid = false,
+    readOnly = false
+  } = props;
+  const [hasErrorText, setHasErrorText] = createSignal(false);
+  const [hasHelperText, setHasHelperText] = createSignal(false);
+  const id = props.id ?? `field-${Math.random().toString(36).substr(2, 9)}`;
+  let rootRef;
+  const errorTextId = `field::${id}::error-text`;
+  const helperTextId = `field::${id}::helper-text`;
+  const labelId = `field::${id}::label`;
+  createEffect(() => {
+    return;
+  });
+  const getRootProps = () => ({
+    ...parts.root.attrs,
+    role: 'group',
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid),
+    'data-readonly': dataAttr(readOnly)
+  });
+  const getLabelProps = () => ({
+    ...parts.label.attrs,
+    id: labelId,
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid),
+    'data-readonly': dataAttr(readOnly),
+    htmlFor: id
+  });
+  const labelIds = [];
+  if (hasErrorText() && invalid) labelIds.push(errorTextId);
+  if (hasHelperText()) labelIds.push(helperTextId);
+  const getControlProps = () => ({
+    'aria-describedby': labelIds.join(' ') || undefined,
+    'aria-invalid': ariaAttr(invalid),
+    'aria-required': ariaAttr(required),
+    'aria-readonly': ariaAttr(readOnly),
+    id,
+    required,
+    disabled,
+    readOnly
+  });
+  const getInputProps = () => ({
+    ...getControlProps(),
+    ...parts.input.attrs
+  });
+  const getTextareaProps = () => ({
+    ...getControlProps(),
+    ...parts.textarea.attrs
+  });
+  const getSelectProps = () => ({
+    ...getControlProps(),
+    ...parts.select.attrs
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...parts.errorText.attrs,
+    'aria-live': 'polite'
+  });
+  return createMemo(() => ({
+    ariaDescribedby: labelIds.join(' '),
+    ids: {
+      control: id,
+      label: labelId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
+    refs: {
+      rootRef
+    },
+    disabled,
+    invalid,
+    readOnly,
+    required,
+    getLabelProps,
+    getRootProps,
+    getInputProps,
+    getTextareaProps,
+    getSelectProps,
+    getHelperTextProps,
+    getErrorTextProps
+  }));
+};
+const dataAttr = condition => condition ? '' : undefined;
+const ariaAttr = condition => condition ? true : undefined;
+
+const FieldRoot = props => {
+  const [useFieldProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'invalid', 'readOnly', 'required']);
+  const field = useField(useFieldProps);
+  const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
+  return createComponent(FieldProvider, {
+    value: field,
+    get children() {
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
 
+const FieldRootProvider = props => {
+  const [{
+    value: field
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
+  return createComponent(FieldProvider, {
+    value: field,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FieldTextarea = props => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps$1(() => field?.().getTextareaProps(), props);
+  return createComponent(ark.textarea, mergedProps);
+};
+
+var field = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: FieldContext,
+  ErrorText: FieldErrorText,
+  HelperText: FieldHelperText,
+  Input: FieldInput,
+  Label: FieldLabel,
+  Root: FieldRoot,
+  RootProvider: FieldRootProvider,
+  Select: FieldSelect,
+  Textarea: FieldTextarea
+});
+
 const CheckboxHiddenInput = props => {
   const checkbox = useCheckboxContext();
   const mergedProps = mergeProps$1(() => checkbox().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const CheckboxIndicator = props => {
@@ -711,8 +903,17 @@ const useCheckbox = ownProps => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    invalid: field?.().invalid,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     checked: props().defaultChecked,
@@ -915,10 +1116,18 @@ const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = cre
   providerName: '<ColorPickerChannelSliderProvider />'
 });
 
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext({
+  hookName: 'useColorPickerFormatPropsContext',
+  providerName: '<ColorPickerFormatPropsProvider />',
+  strict: false
+});
+
 const ColorPickerChannelSlider = props => {
   const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().getChannelSliderProps(channelProps), localProps);
+  const formatProps = useColorPickerFormatPropsContext();
+  const channelSliderProps = mergeProps$1(channelProps, formatProps);
+  const mergedProps = mergeProps$1(() => api().getChannelSliderProps(channelSliderProps), localProps);
   return createComponent(ColorPickerChannelPropsProvider, {
     value: channelProps,
     get children() {
@@ -927,20 +1136,43 @@ const ColorPickerChannelSlider = props => {
   });
 };
 
+const ColorPickerChannelSliderLabel = props => {
+  const colorPicker = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps$1(() => colorPicker().getChannelSliderLabelProps(channelProps), props);
+  return createComponent(ark.label, mergedProps);
+};
+
 const ColorPickerChannelSliderThumb = props => {
   const api = useColorPickerContext();
+  const formatProps = useColorPickerFormatPropsContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(channelProps), props);
+  const channelSliderProps = mergeProps$1(channelProps, formatProps);
+  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(channelSliderProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelSliderTrack = props => {
   const api = useColorPickerContext();
+  const formatProps = useColorPickerFormatPropsContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(channelProps), props);
+  const channelSliderProps = mergeProps$1(channelProps, formatProps);
+  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(channelSliderProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
+const ColorPickerChannelSliderValueText = props => {
+  const colorPicker = useColorPickerContext();
+  const localeContext = useLocaleContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps$1(() => colorPicker().getChannelSliderValueTextProps(channelProps), props);
+  return createComponent(ark.span, mergeProps(mergedProps, {
+    get children() {
+      return props.children || colorPicker().getChannelValueText(channelProps.channel, localeContext().locale);
+    }
+  }));
+};
+
 const splitPresenceProps = props => createSplitProps()(props, ['immediate', 'lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
 
 const usePresence = props => {
@@ -1044,7 +1276,12 @@ const ColorPickerFormatTrigger = props => {
 const ColorPickerHiddenInput = props => {
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps$1(() => colorPicker().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const ColorPickerLabel = props => {
@@ -1070,10 +1307,18 @@ const ColorPickerPositioner = props => {
 const useColorPicker = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
+  const field = useFieldContext();
   const id = createUniqueId();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     open: props.defaultOpen,
     'open.controlled': props.open !== undefined,
@@ -1088,7 +1333,7 @@ const useColorPicker = props => {
 
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'defaultOpen', 'defaultValue', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'defaultOpen', 'defaultValue', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'required', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -1179,6 +1424,26 @@ const ColorPickerTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerValueSwatch = props => {
+  const [{
+    respectAlpha
+  }, localProps] = createSplitProps()(props, ['respectAlpha']);
+  const colorPicker = useColorPickerContext();
+  const swatchProps = createMemo(() => ({
+    respectAlpha,
+    value: colorPicker().value
+  }));
+  const mergedProps = mergeProps$1(() => colorPicker().getSwatchProps(swatchProps()), localProps);
+  return createComponent(ColorPickerSwatchPropsProvider, {
+    get value() {
+      return swatchProps();
+    },
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ColorPickerValueText = props => {
   const api = useColorPickerContext();
   const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().valueText.attrs, props);
@@ -1191,17 +1456,23 @@ const ColorPickerValueText = props => {
 
 const ColorPickerView = props => {
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().view.attrs, props);
-  return createComponent(Show, {
-    get when() {
-      return api().format === props.format;
-    },
+  const [formatProps, localProps] = createSplitProps()(props, ['format']);
+  const mergedProps = mergeProps$1(() => colorPickerAnatomy.build().view.attrs, localProps);
+  return createComponent(ColorPickerFormatPropsProvider, {
+    value: formatProps,
     get children() {
-      return createComponent(ark.div, mergeProps({
-        get ["data-format"]() {
-          return props.format;
+      return createComponent(Show, {
+        get when() {
+          return api().format === props.format;
+        },
+        get children() {
+          return createComponent(ark.div, mergeProps({
+            get ["data-format"]() {
+              return props.format;
+            }
+          }, mergedProps));
         }
-      }, mergedProps));
+      });
     }
   });
 };
@@ -1213,8 +1484,10 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   AreaThumb: ColorPickerAreaThumb,
   ChannelInput: ColorPickerChannelInput,
   ChannelSlider: ColorPickerChannelSlider,
+  ChannelSliderLabel: ColorPickerChannelSliderLabel,
   ChannelSliderThumb: ColorPickerChannelSliderThumb,
   ChannelSliderTrack: ColorPickerChannelSliderTrack,
+  ChannelSliderValueText: ColorPickerChannelSliderValueText,
   Content: ColorPickerContent,
   Context: ColorPickerContext,
   Control: ColorPickerControl,
@@ -1225,12 +1498,14 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Root: ColorPickerRoot,
+  RootProvider: ColorPickerRootProvider,
   Swatch: ColorPickerSwatch,
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchIndicator: ColorPickerSwatchIndicator,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
   Trigger: ColorPickerTrigger,
+  ValueSwatch: ColorPickerValueSwatch,
   ValueText: ColorPickerValueText,
   View: ColorPickerView
 });
@@ -1272,7 +1547,12 @@ const ComboboxControl = props => {
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
   const mergedProps = mergeProps$1(() => combobox().getInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [ComboboxItemProvider, useComboboxItemContext] = createContext({
@@ -1376,12 +1656,23 @@ const ComboboxPositioner = props => {
 
 const useCombobox = props => {
   const [collectionOptions, comboboxProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => combobox$1.collection(collectionOptions);
+  const collection = () => combobox$1.collection({
+    ...collectionOptions
+  });
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
     collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
@@ -1398,7 +1689,7 @@ const useCombobox = props => {
 
 const ComboboxRoot = props => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -1519,12 +1810,17 @@ const DatePickerMonthSelect = props => {
   const mergedProps = mergeProps$1(() => api().getMonthSelectProps(), props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
-      return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$4();
-        insert(_el$, () => month.label);
-        effect(() => _el$.value = month.value);
-        return _el$;
-      })());
+      return createComponent(For, {
+        get each() {
+          return api().getMonths();
+        },
+        children: month => (() => {
+          var _el$ = _tmpl$$4();
+          insert(_el$, () => month.label);
+          effect(() => _el$.value = month.value);
+          return _el$;
+        })()
+      });
     }
   }));
 };
@@ -1791,15 +2087,20 @@ const DatePickerYearSelect = props => {
   const mergedProps = mergeProps$1(() => api().getYearSelectProps(), props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
-      return getYearsRange({
-        from: 1_000,
-        to: 4_000
-      }).map(year => (() => {
-        var _el$ = _tmpl$$3();
-        _el$.value = year;
-        insert(_el$, year);
-        return _el$;
-      })());
+      return createComponent(For, {
+        get each() {
+          return getYearsRange({
+            from: 1_000,
+            to: 4_000
+          });
+        },
+        children: year => (() => {
+          var _el$ = _tmpl$$3();
+          _el$.value = year;
+          insert(_el$, year);
+          return _el$;
+        })()
+      });
     }
   }));
 };
@@ -2038,7 +2339,12 @@ const EditableEditTrigger = props => {
 const EditableInput = props => {
   const api = useEditableContext();
   const mergedProps = mergeProps$1(() => api().getInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const EditableLabel = props => {
@@ -2057,9 +2363,18 @@ const useEditable = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    invalid: field?.().invalid,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
     ...props
@@ -2071,7 +2386,7 @@ const useEditable = props => {
 };
 
 const EditableRoot = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultValue', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultValue', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'required', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const api = useEditable(useEditableProps);
   const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(EditableProvider, {
@@ -2132,7 +2447,12 @@ const FileUploadDropzone = props => {
 const FileUploadHiddenInput = props => {
   const fileUpload = useFileUploadContext();
   const mergedProps = mergeProps$1(() => fileUpload().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
@@ -2217,9 +2537,16 @@ const useFileUpload = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     ...props
   }));
@@ -2230,7 +2557,7 @@ const useFileUpload = props => {
 };
 
 const FileUploadRoot = props => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'required', 'translations', 'validate']);
   const fileUpload = useFileUpload(fileUploadProps);
   const mergedProps = mergeProps$1(() => fileUpload().getRootProps(), localProps);
   return createComponent(FileUploadProvider, {
@@ -2456,12 +2783,12 @@ const MenuCheckboxItem = props => {
   });
   const context = useMenuContext();
   const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = createMemo(() => context().getItemState(optionItemProps));
+  const optionItemState = createMemo(() => context().getItemState(optionItemProps));
   return createComponent(MenuOptionItemPropsProvider, {
     value: optionItemProps,
     get children() {
       return createComponent(MenuItemProvider, {
-        value: itemState,
+        value: optionItemState,
         get children() {
           return createComponent(ark.div, mergedProps);
         }
@@ -2582,12 +2909,12 @@ const MenuRadioItem = props => {
     })
   }));
   const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = createMemo(() => context().getItemState(optionItemProps));
+  const optionItemState = createMemo(() => context().getOptionItemState(optionItemProps));
   return createComponent(MenuOptionItemPropsProvider, {
     value: optionItemProps,
     get children() {
       return createComponent(MenuItemProvider, {
-        value: itemState,
+        value: optionItemState,
         get children() {
           return createComponent(ark.div, mergedProps);
         }
@@ -2801,7 +3128,12 @@ const NumberInputIncrementTrigger = props => {
 const NumberInputInput = props => {
   const api = useNumberInputContext();
   const mergedProps = mergeProps$1(() => api().getInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const NumberInputLabel = props => {
@@ -2814,8 +3146,17 @@ const useNumberInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
@@ -2828,7 +3169,7 @@ const useNumberInput = props => {
 };
 
 const NumberInputRoot = props => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'defaultValue', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'defaultValue', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'required', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
   const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(NumberInputProvider, {
@@ -2867,6 +3208,7 @@ var numberInput = /*#__PURE__*/Object.freeze({
   Input: NumberInputInput,
   Label: NumberInputLabel,
   Root: NumberInputRoot,
+  RootProvider: NumberInputRootProvider,
   Scrubber: NumberInputScrubber
 });
 
@@ -2972,7 +3314,12 @@ const PinInputControl = props => {
 const PinInputHiddenInput = props => {
   const pinInput = usePinInputContext();
   const mergedProps = mergeProps$1(() => pinInput().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const PinInputInput = props => {
@@ -2992,8 +3339,17 @@ const usePinInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
@@ -3006,7 +3362,7 @@ const usePinInput = props => {
 };
 
 const PinInputRoot = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'readOnly', 'required', 'selectOnFocus', 'translations', 'type', 'value']);
   const pinInput = usePinInput(usePinInputProps);
   const mergedProps = mergeProps$1(() => pinInput().getRootProps(), localProps);
   return createComponent(PinInputProvider, {
@@ -3536,7 +3892,12 @@ const RatingGroupControl = props => {
 const RatingGroupHiddenInput = props => {
   const ratingGroup = useRatingGroupContext();
   const mergedProps = mergeProps$1(() => ratingGroup().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
@@ -3569,8 +3930,16 @@ const useRatingGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
@@ -3583,7 +3952,7 @@ const useRatingGroup = props => {
 };
 
 const RatingGroupRoot = props => {
-  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'required', 'translations', 'value']);
   const api = useRatingGroup(useRatingProps);
   const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(RatingGroupProvider, {
@@ -3615,7 +3984,8 @@ var ratingGroup = /*#__PURE__*/Object.freeze({
   Item: RatingGroupItem,
   ItemContext: RatingGroupItemContext,
   Label: RatingGroupLabel,
-  Root: RatingGroupRoot
+  Root: RatingGroupRoot,
+  RootProvider: RatingGroupRootProvider
 });
 
 const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
@@ -3740,7 +4110,8 @@ var segmentGroup = /*#__PURE__*/Object.freeze({
   ItemHiddenInput: SegmentGroupItemHiddenInput,
   ItemText: SegmentGroupItemText,
   Label: SegmentGroupLabel,
-  Root: SegmentGroupRoot
+  Root: SegmentGroupRoot,
+  RootProvider: SegmentGroupRootProvider
 });
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -3781,9 +4152,14 @@ var _tmpl$$2 = /*#__PURE__*/template(`<option value="">`),
   _tmpl$2$1 = /*#__PURE__*/template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
-  const mergedProps = mergeProps$1(() => select().getControlProps(), props);
+  const mergedProps = mergeProps$1(() => select().getHiddenSelectProps(), props);
   const isValueEmpty = createMemo(() => select().value.length === 0);
-  return createComponent(ark.select, mergeProps(mergedProps, {
+  const field = useFieldContext();
+  return createComponent(ark.select, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps, {
     get children() {
       return [createComponent(Show, {
         get when() {
@@ -3914,12 +4290,23 @@ const SelectPositioner = props => {
 
 const useSelect = props => {
   const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select$1.collection(collectionOptions);
+  const collection = () => select$1.collection({
+    ...collectionOptions
+  });
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenSelect: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    invalid: field?.().invalid,
+    required: field?.().required,
     collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
@@ -3936,7 +4323,7 @@ const useSelect = props => {
 
 const SelectRoot = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'value']);
   const select = useSelect(useSelectProps);
   const presenceApi = usePresence(mergeProps$1(() => ({
     present: select().open
@@ -4032,9 +4419,7 @@ const SignaturePadContext = props => props.children(useSignaturePadContext());
 const SignaturePadControl = props => {
   const signaturePad = useSignaturePadContext();
   const mergedProps = mergeProps$1(() => signaturePad().getControlProps(), props);
-  return createComponent(ark.div, mergeProps({
-    role: "application"
-  }, mergedProps));
+  return createComponent(ark.div, mergedProps);
 };
 
 const SignaturePadGuide = props => {
@@ -4049,1675 +4434,44 @@ const SignaturePadLabel = props => {
   return createComponent(ark.label, mergedProps);
 };
 
-// src/create-anatomy.ts
-var createAnatomy = (name, parts = []) => ({
-  parts: (...values) => {
-    if (isEmpty(parts)) {
-      return createAnatomy(name, values);
-    }
-    throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
-  },
-  extendWith: (...values) => createAnatomy(name, [...parts, ...values]),
-  rename: (newName) => createAnatomy(newName, parts),
-  keys: () => parts,
-  build: () => [...new Set(parts)].reduce(
-    (prev, part) => Object.assign(prev, {
-      [part]: {
-        selector: [
-          `&[data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`,
-          `& [data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`
-        ].join(", "),
-        attrs: { "data-scope": toKebabCase(name), "data-part": toKebabCase(part) }
-      }
-    }),
-    {}
-  )
-});
-var toKebabCase = (value) => value.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
-var isEmpty = (v) => v.length === 0;
-
-// src/index.ts
-var state = "default";
-var userSelect = "";
-var elementMap = /* @__PURE__ */ new WeakMap();
-function disableTextSelectionImpl(options = {}) {
-  const { target, doc } = options;
-  const docNode = doc ?? document;
-  const rootEl = docNode.documentElement;
-  if (isIos()) {
-    if (state === "default") {
-      userSelect = rootEl.style.webkitUserSelect;
-      rootEl.style.webkitUserSelect = "none";
-    }
-    state = "disabled";
-  } else if (target) {
-    elementMap.set(target, target.style.userSelect);
-    target.style.userSelect = "none";
-  }
-  return () => restoreTextSelection({ target, doc: docNode });
-}
-function restoreTextSelection(options = {}) {
-  const { target, doc } = options;
-  const docNode = doc ?? document;
-  const rootEl = docNode.documentElement;
-  if (isIos()) {
-    if (state !== "disabled") return;
-    state = "restoring";
-    setTimeout(() => {
-      nextTick(() => {
-        if (state === "restoring") {
-          if (rootEl.style.webkitUserSelect === "none") {
-            rootEl.style.webkitUserSelect = userSelect || "";
-          }
-          userSelect = "";
-          state = "default";
-        }
-      });
-    }, 300);
-  } else {
-    if (target && elementMap.has(target)) {
-      const prevUserSelect = elementMap.get(target);
-      if (target.style.userSelect === "none") {
-        target.style.userSelect = prevUserSelect ?? "";
-      }
-      if (target.getAttribute("style") === "") {
-        target.removeAttribute("style");
-      }
-      elementMap.delete(target);
-    }
-  }
-}
-function disableTextSelection(options = {}) {
-  const { defer, target, ...restOptions } = options;
-  const func = defer ? raf : (v) => v();
-  const cleanups = [];
-  cleanups.push(
-    func(() => {
-      const node = typeof target === "function" ? target() : target;
-      cleanups.push(disableTextSelectionImpl({ ...restOptions, target: node }));
-    })
-  );
-  return () => {
-    cleanups.forEach((fn) => fn?.());
-  };
-}
-
-// src/add-dom-event.ts
-var addDomEvent = (target, eventName, handler, options) => {
-  const node = typeof target === "function" ? target() : target;
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-};
-var isLeftClick = (e) => e.button === 0;
-var isModifierKey = (e) => e.ctrlKey || e.altKey || e.metaKey;
-
-// src/get-event-point.ts
-function pointFromTouch(e, type = "client") {
-  const point = e.touches[0] || e.changedTouches[0];
-  return { x: point[`${type}X`], y: point[`${type}Y`] };
-}
-function pointFromMouse(point, type = "client") {
-  return { x: point[`${type}X`], y: point[`${type}Y`] };
-}
-var isTouchEvent = (event) => "touches" in event && event.touches.length > 0;
-function getEventPoint(event, type = "client") {
-  return isTouchEvent(event) ? pointFromTouch(event, type) : pointFromMouse(event, type);
-}
-
-// src/get-point-value.ts
-function clamp(value) {
-  return Math.max(0, Math.min(1, value));
-}
-function getRelativePoint(point, element) {
-  const { left, top, width, height } = element.getBoundingClientRect();
-  const offset = { x: point.x - left, y: point.y - top };
-  const percent = { x: clamp(offset.x / width), y: clamp(offset.y / height) };
-  function getPercentValue(options = {}) {
-    const { dir = "ltr", orientation = "horizontal", inverted } = options;
-    const invertX = typeof inverted === "object" ? inverted.x : inverted;
-    const invertY = typeof inverted === "object" ? inverted.y : inverted;
-    if (orientation === "horizontal") {
-      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
-    }
-    return invertY ? 1 - percent.y : percent.y;
-  }
-  return { offset, percent, getPercentValue };
-}
-function trackPointerMove(doc, handlers) {
-  const { onPointerMove, onPointerUp } = handlers;
-  const history = [];
-  const handleMove = (event) => {
-    const point = getEventPoint(event);
-    history.push({ ...point, timestamp: performance.now() });
-    const distance = Math.sqrt(point.x ** 2 + point.y ** 2);
-    const moveBuffer = event.pointerType === "touch" ? 10 : 5;
-    if (distance < moveBuffer) return;
-    if (event.pointerType === "mouse" && event.button === 0) {
-      onPointerUp();
-      return;
-    }
-    onPointerMove({ point, event, velocity: getVelocity(history, 0.1) });
-  };
-  const cleanups = [
-    addDomEvent(doc, "pointermove", handleMove, false),
-    addDomEvent(doc, "pointerup", onPointerUp, false),
-    addDomEvent(doc, "pointercancel", onPointerUp, false),
-    addDomEvent(doc, "contextmenu", onPointerUp, false),
-    disableTextSelection({ doc })
-  ];
-  return () => {
-    cleanups.forEach((cleanup) => cleanup());
-    history.length = 0;
-  };
-}
-function lastDevicePoint(history) {
-  return history[history.length - 1];
-}
-function ms(seconds) {
-  return seconds * 1e3;
-}
-function sec(milliseconds) {
-  return milliseconds / 1e3;
-}
-function getVelocity(history, timeDelta) {
-  if (history.length < 2) return { x: 0, y: 0 };
-  let i = history.length - 1;
-  let timestampedPoint = null;
-  const lastPoint = lastDevicePoint(history);
-  while (i >= 0) {
-    timestampedPoint = history[i];
-    if (lastPoint.timestamp - timestampedPoint.timestamp > ms(timeDelta)) {
-      break;
-    }
-    i--;
-  }
-  if (!timestampedPoint) return { x: 0, y: 0 };
-  const time = sec(lastPoint.timestamp - timestampedPoint.timestamp);
-  if (time === 0) return { x: 0, y: 0 };
-  const currentVelocity = {
-    x: (lastPoint.x - timestampedPoint.x) / time,
-    y: (lastPoint.y - timestampedPoint.y) / time
-  };
-  if (currentVelocity.x === Infinity) currentVelocity.x = 0;
-  if (currentVelocity.y === Infinity) currentVelocity.y = 0;
-  return {
-    x: Math.abs(currentVelocity.x),
-    y: Math.abs(currentVelocity.y)
-  };
-}
-
-/* eslint @typescript-eslint/no-explicit-any: off */
-// symbols
-const GET_ORIGINAL_SYMBOL = Symbol();
-// get object prototype
-const getProto = Object.getPrototypeOf;
-const objectsToTrack = new WeakMap();
-// check if obj is a plain object or an array
-const isObjectToTrack = obj => obj && (objectsToTrack.has(obj) ? objectsToTrack.get(obj) : getProto(obj) === Object.prototype || getProto(obj) === Array.prototype);
-/**
- * Unwrap proxy to get the original object.
- *
- * Used to retrieve the original object used to create the proxy instance with `createProxy`.
- *
- * @param {Proxy<object>} obj -  The proxy wrapper of the originial object.
- * @returns {object | null} - Return either the unwrapped object if exists.
- *
- * @example
- * import { createProxy, getUntracked } from 'proxy-compare';
- *
- * const original = { a: "1", c: "2", d: { e: "3" } };
- * const affected = new WeakMap();
- *
- * const proxy = createProxy(original, affected);
- * const originalFromProxy = getUntracked(proxy)
- *
- * Object.is(original, originalFromProxy) // true
- * isChanged(original, originalFromProxy, affected) // false
- */
-const getUntracked = obj => {
-  if (isObjectToTrack(obj)) {
-    return obj[GET_ORIGINAL_SYMBOL] || null;
-  }
-  return null;
-};
-/**
- * Mark object to be tracked.
- *
- * This function marks an object that will be passed into `createProxy`
- * as marked to track or not. By default only Array and Object are marked to track,
- * so this is useful for example to mark a class instance to track or to mark a object
- * to be untracked when creating your proxy.
- *
- * @param obj - Object to mark as tracked or not.
- * @param mark - Boolean indicating whether you want to track this object or not.
- * @returns - No return.
- *
- * @example
- * import { createProxy, markToTrack, isChanged } from 'proxy-compare';
- *
- * const nested = { e: "3" }
- *
- * markToTrack(nested, false)
- *
- * const original = { a: "1", c: "2", d: nested };
- * const affected = new WeakMap();
- *
- * const proxy = createProxy(original, affected);
- *
- * proxy.d.e
- *
- * isChanged(original, { d: { e: "3" } }, affected) // true
- */
-const markToTrack = (obj, mark = true) => {
-  objectsToTrack.set(obj, mark);
-};
-
-// src/global.ts
-function getGlobal() {
-  if (typeof globalThis !== "undefined") return globalThis;
-  if (typeof self !== "undefined") return self;
-  if (typeof window !== "undefined") return window;
-  if (typeof global !== "undefined") return global;
-}
-function makeGlobal(key, value) {
-  const g = getGlobal();
-  if (!g) return value();
-  g[key] || (g[key] = value());
-  return g[key];
-}
-var isDev$1 = process.env.NODE_ENV !== "production";
-var isObject$1 = (x) => typeof x === "object" && x !== null;
-var proxyStateMap = makeGlobal("__zag__proxyStateMap", () => /* @__PURE__ */ new WeakMap());
-var refSet = makeGlobal("__zag__refSet", () => /* @__PURE__ */ new WeakSet());
-var buildProxyFunction = (objectIs = Object.is, newProxy = (target, handler) => new Proxy(target, handler), canProxy = (x) => isObject$1(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer), defaultHandlePromise = (promise) => {
-  switch (promise.status) {
-    case "fulfilled":
-      return promise.value;
-    case "rejected":
-      throw promise.reason;
-    default:
-      throw promise;
-  }
-}, snapCache = /* @__PURE__ */ new WeakMap(), createSnapshot = (target, version, handlePromise = defaultHandlePromise) => {
-  const cache = snapCache.get(target);
-  if (cache?.[0] === version) {
-    return cache[1];
-  }
-  const snap = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
-  markToTrack(snap, true);
-  snapCache.set(target, [version, snap]);
-  Reflect.ownKeys(target).forEach((key) => {
-    const value = Reflect.get(target, key);
-    if (refSet.has(value)) {
-      markToTrack(value, false);
-      snap[key] = value;
-    } else if (value instanceof Promise) {
-      Object.defineProperty(snap, key, {
-        get() {
-          return handlePromise(value);
-        }
-      });
-    } else if (proxyStateMap.has(value)) {
-      snap[key] = snapshot(value, handlePromise);
-    } else {
-      snap[key] = value;
-    }
-  });
-  return Object.freeze(snap);
-}, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1, 1], proxyFunction2 = (initialObject) => {
-  if (!isObject$1(initialObject)) {
-    throw new Error("object required");
-  }
-  const found = proxyCache.get(initialObject);
-  if (found) {
-    return found;
-  }
-  let version = versionHolder[0];
-  const listeners = /* @__PURE__ */ new Set();
-  const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => {
-    if (version !== nextVersion) {
-      version = nextVersion;
-      listeners.forEach((listener) => listener(op, nextVersion));
-    }
-  };
-  let checkVersion = versionHolder[1];
-  const ensureVersion = (nextCheckVersion = ++versionHolder[1]) => {
-    if (checkVersion !== nextCheckVersion && !listeners.size) {
-      checkVersion = nextCheckVersion;
-      propProxyStates.forEach(([propProxyState]) => {
-        const propVersion = propProxyState[1](nextCheckVersion);
-        if (propVersion > version) {
-          version = propVersion;
-        }
-      });
-    }
-    return version;
-  };
-  const createPropListener = (prop) => (op, nextVersion) => {
-    const newOp = [...op];
-    newOp[1] = [prop, ...newOp[1]];
-    notifyUpdate(newOp, nextVersion);
-  };
-  const propProxyStates = /* @__PURE__ */ new Map();
-  const addPropListener = (prop, propProxyState) => {
-    if (isDev$1 && propProxyStates.has(prop)) {
-      throw new Error("prop listener already exists");
-    }
-    if (listeners.size) {
-      const remove = propProxyState[3](createPropListener(prop));
-      propProxyStates.set(prop, [propProxyState, remove]);
-    } else {
-      propProxyStates.set(prop, [propProxyState]);
-    }
-  };
-  const removePropListener = (prop) => {
-    const entry = propProxyStates.get(prop);
-    if (entry) {
-      propProxyStates.delete(prop);
-      entry[1]?.();
-    }
-  };
-  const addListener = (listener) => {
-    listeners.add(listener);
-    if (listeners.size === 1) {
-      propProxyStates.forEach(([propProxyState, prevRemove], prop) => {
-        if (isDev$1 && prevRemove) {
-          throw new Error("remove already exists");
-        }
-        const remove = propProxyState[3](createPropListener(prop));
-        propProxyStates.set(prop, [propProxyState, remove]);
-      });
-    }
-    const removeListener = () => {
-      listeners.delete(listener);
-      if (listeners.size === 0) {
-        propProxyStates.forEach(([propProxyState, remove], prop) => {
-          if (remove) {
-            remove();
-            propProxyStates.set(prop, [propProxyState]);
-          }
-        });
-      }
-    };
-    return removeListener;
-  };
-  const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
-  const handler = {
-    deleteProperty(target, prop) {
-      const prevValue = Reflect.get(target, prop);
-      removePropListener(prop);
-      const deleted = Reflect.deleteProperty(target, prop);
-      if (deleted) {
-        notifyUpdate(["delete", [prop], prevValue]);
-      }
-      return deleted;
-    },
-    set(target, prop, value, receiver) {
-      const hasPrevValue = Reflect.has(target, prop);
-      const prevValue = Reflect.get(target, prop, receiver);
-      if (hasPrevValue && (objectIs(prevValue, value) || proxyCache.has(value) && objectIs(prevValue, proxyCache.get(value)))) {
-        return true;
-      }
-      removePropListener(prop);
-      if (isObject$1(value)) {
-        value = getUntracked(value) || value;
-      }
-      let nextValue = value;
-      if (Object.getOwnPropertyDescriptor(target, prop)?.set) ; else if (value instanceof Promise) {
-        value.then((v) => {
-          Object.assign(value, { status: "fulfilled", value: v });
-          notifyUpdate(["resolve", [prop], v]);
-        }).catch((e) => {
-          Object.assign(value, { status: "rejected", reason: e });
-          notifyUpdate(["reject", [prop], e]);
-        });
-      } else {
-        if (!proxyStateMap.has(value) && canProxy(value)) {
-          nextValue = proxy(value);
-        }
-        const childProxyState = !refSet.has(nextValue) && proxyStateMap.get(nextValue);
-        if (childProxyState) {
-          addPropListener(prop, childProxyState);
-        }
-      }
-      Reflect.set(target, prop, nextValue, receiver);
-      notifyUpdate(["set", [prop], value, prevValue]);
-      return true;
-    }
-  };
-  const proxyObject = newProxy(baseObject, handler);
-  proxyCache.set(initialObject, proxyObject);
-  const proxyState = [baseObject, ensureVersion, createSnapshot, addListener];
-  proxyStateMap.set(proxyObject, proxyState);
-  Reflect.ownKeys(initialObject).forEach((key) => {
-    const desc = Object.getOwnPropertyDescriptor(initialObject, key);
-    if (desc.get || desc.set) {
-      Object.defineProperty(baseObject, key, desc);
-    } else {
-      proxyObject[key] = initialObject[key];
-    }
-  });
-  return proxyObject;
-}) => [
-  // public functions
-  proxyFunction2,
-  // shared state
-  proxyStateMap,
-  refSet,
-  // internal things
-  objectIs,
-  newProxy,
-  canProxy,
-  defaultHandlePromise,
-  snapCache,
-  createSnapshot,
-  proxyCache,
-  versionHolder
-];
-var [proxyFunction] = buildProxyFunction();
-function proxy(initialObject = {}) {
-  return proxyFunction(initialObject);
-}
-function subscribe(proxyObject, callback, notifyInSync) {
-  const proxyState = proxyStateMap.get(proxyObject);
-  if (isDev$1 && !proxyState) {
-    console.warn("Please use proxy object");
-  }
-  let promise;
-  const ops = [];
-  const addListener = proxyState[3];
-  let isListenerActive = false;
-  const listener = (op) => {
-    ops.push(op);
-    if (notifyInSync) {
-      callback(ops.splice(0));
-      return;
-    }
-    if (!promise) {
-      promise = Promise.resolve().then(() => {
-        promise = void 0;
-        if (isListenerActive) {
-          callback(ops.splice(0));
-        }
-      });
-    }
-  };
-  const removeListener = addListener(listener);
-  isListenerActive = true;
-  return () => {
-    isListenerActive = false;
-    removeListener();
-  };
-}
-function snapshot(proxyObject, handlePromise) {
-  const proxyState = proxyStateMap.get(proxyObject);
-  if (isDev$1 && !proxyState) {
-    console.warn("Please use proxy object");
-  }
-  const [target, ensureVersion, createSnapshot] = proxyState;
-  return createSnapshot(target, ensureVersion(), handlePromise);
-}
-function ref(obj) {
-  refSet.add(obj);
-  return obj;
-}
-
-// src/proxy-computed.ts
-function proxyWithComputed(initialObject, computedFns) {
-  const keys = Object.keys(computedFns);
-  keys.forEach((key) => {
-    if (Object.getOwnPropertyDescriptor(initialObject, key)) {
-      throw new Error("object property already defined");
-    }
-    const computedFn = computedFns[key];
-    const { get, set } = typeof computedFn === "function" ? { get: computedFn } : computedFn;
-    const desc = {};
-    desc.get = () => get(snapshot(proxyObject));
-    if (set) {
-      desc.set = (newValue) => set(proxyObject, newValue);
-    }
-    Object.defineProperty(initialObject, key, desc);
-  });
-  const proxyObject = proxy(initialObject);
-  return proxyObject;
-}
-
-function set(obj, key, val) {
-	if (typeof val.value === 'object') val.value = klona(val.value);
-	if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
-		Object.defineProperty(obj, key, val);
-	} else obj[key] = val.value;
-}
-
-function klona(x) {
-	if (typeof x !== 'object') return x;
-
-	var i=0, k, list, tmp, str=Object.prototype.toString.call(x);
-
-	if (str === '[object Object]') {
-		tmp = Object.create(x.__proto__ || null);
-	} else if (str === '[object Array]') {
-		tmp = Array(x.length);
-	} else if (str === '[object Set]') {
-		tmp = new Set;
-		x.forEach(function (val) {
-			tmp.add(klona(val));
-		});
-	} else if (str === '[object Map]') {
-		tmp = new Map;
-		x.forEach(function (val, key) {
-			tmp.set(klona(key), klona(val));
-		});
-	} else if (str === '[object Date]') {
-		tmp = new Date(+x);
-	} else if (str === '[object RegExp]') {
-		tmp = new RegExp(x.source, x.flags);
-	} else if (str === '[object DataView]') {
-		tmp = new x.constructor( klona(x.buffer) );
-	} else if (str === '[object ArrayBuffer]') {
-		tmp = x.slice(0);
-	} else if (str.slice(-6) === 'Array]') {
-		// ArrayBuffer.isView(x)
-		// ~> `new` bcuz `Buffer.slice` => ref
-		tmp = new x.constructor(x);
-	}
-
-	if (tmp) {
-		for (list=Object.getOwnPropertySymbols(x); i < list.length; i++) {
-			set(tmp, list[i], Object.getOwnPropertyDescriptor(x, list[i]));
-		}
-
-		for (i=0, list=Object.getOwnPropertyNames(x); i < list.length; i++) {
-			if (Object.hasOwnProperty.call(tmp, k=list[i]) && tmp[k] === x[k]) continue;
-			set(tmp, k, Object.getOwnPropertyDescriptor(x, k));
-		}
-	}
-
-	return tmp || x;
-}
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-// ../utilities/core/src/array.ts
-function clear(v) {
-  while (v.length > 0) v.pop();
-  return v;
-}
-
-// ../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var cast = (v) => v;
-var noop = () => {
-};
-var uuid = /* @__PURE__ */ (() => {
-  let id = 0;
-  return () => {
-    id++;
-    return id.toString(36);
-  };
-})();
-
-// ../utilities/core/src/guard.ts
-var isDev = () => process.env.NODE_ENV !== "production";
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
-var isString = (v) => typeof v === "string";
-var isFunction = (v) => typeof v === "function";
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../utilities/core/src/object.ts
-function compact$1(obj) {
-  if (!isPlainObject$1(obj) || obj === void 0) {
-    return obj;
-  }
-  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
-  const filtered = {};
-  for (const key of keys) {
-    const value = obj[key];
-    if (value !== void 0) {
-      filtered[key] = compact$1(value);
-    }
-  }
-  return filtered;
-}
-var isPlainObject$1 = (value) => {
-  return value && typeof value === "object" && value.constructor === Object;
-};
-
-// ../utilities/core/src/warning.ts
-function warn(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    console.warn(m);
-  }
-}
-function invariant(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    throw new Error(m);
-  }
-}
-
-// src/deep-merge.ts
-function deepMerge(source, ...objects) {
-  for (const obj of objects) {
-    const target = compact$1(obj);
-    for (const key in target) {
-      if (isObject(obj[key])) {
-        if (!source[key]) {
-          source[key] = {};
-        }
-        deepMerge(source[key], obj[key]);
-      } else {
-        source[key] = obj[key];
-      }
-    }
-  }
-  return source;
-}
-function structuredClone(v) {
-  return klona(v);
-}
-function toEvent(event) {
-  const obj = isString(event) ? { type: event } : event;
-  return obj;
-}
-function toArray(value) {
-  if (!value) return [];
-  return isArray(value) ? value.slice() : [value];
-}
-function isGuardHelper(value) {
-  return isObject(value) && value.predicate != null;
-}
-
-// src/guard-utils.ts
-var Truthy = () => true;
-function determineGuardFn(guard, guardMap) {
-  guard = guard ?? Truthy;
-  return (context, event, meta) => {
-    if (isString(guard)) {
-      const value = guardMap[guard];
-      return isFunction(value) ? value(context, event, meta) : value;
-    }
-    if (isGuardHelper(guard)) {
-      return guard.predicate(guardMap)(context, event, meta);
-    }
-    return guard?.(context, event, meta);
-  };
-}
-function determineActionsFn(values, guardMap) {
-  return (context, event, meta) => {
-    if (isGuardHelper(values)) {
-      return values.predicate(guardMap)(context, event, meta);
-    }
-    return values;
-  };
-}
-function createProxy(config) {
-  const computedContext = config.computed ?? cast({});
-  const initialContext = config.context ?? cast({});
-  const initialTags = config.initial ? config.states?.[config.initial]?.tags : [];
-  const state = proxy({
-    value: config.initial ?? "",
-    previousValue: "",
-    event: cast({}),
-    previousEvent: cast({}),
-    context: proxyWithComputed(initialContext, computedContext),
-    done: false,
-    tags: initialTags ?? [],
-    hasTag(tag) {
-      return this.tags.includes(tag);
-    },
-    matches(...value) {
-      return value.includes(this.value);
-    },
-    can(event) {
-      return cast(this).nextEvents.includes(event);
-    },
-    get nextEvents() {
-      const stateEvents = config.states?.[this.value]?.["on"] ?? {};
-      const globalEvents = config?.on ?? {};
-      return Object.keys({ ...stateEvents, ...globalEvents });
-    },
-    get changed() {
-      if (this.event.value === "machine.init" /* Init */ || !this.previousValue) return false;
-      return this.value !== this.previousValue;
-    }
-  });
-  return cast(state);
-}
-
-// src/delay-utils.ts
-function determineDelayFn(delay, delaysMap) {
-  return (context, event) => {
-    if (isNumber(delay)) return delay;
-    if (isFunction(delay)) {
-      return delay(context, event);
-    }
-    if (isString(delay)) {
-      const value = Number.parseFloat(delay);
-      if (!Number.isNaN(value)) {
-        return value;
-      }
-      if (delaysMap) {
-        const valueOrFn = delaysMap?.[delay];
-        invariant(
-          valueOrFn == null,
-          `[@zag-js/core > determine-delay] Cannot determine delay for \`${delay}\`. It doesn't exist in \`options.delays\``
-        );
-        return isFunction(valueOrFn) ? valueOrFn(context, event) : valueOrFn;
-      }
+const SignaturePadHiddenInput = props => {
+  const [hiddenInputProps, localProps] = createSplitProps()(props, ['value']);
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = mergeProps$1(() => signaturePad().getHiddenInputProps(hiddenInputProps), localProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
     }
-  };
-}
-
-// src/transition-utils.ts
-function toTarget(target) {
-  return isString(target) ? { target } : target;
-}
-function determineTransitionFn(transitions, guardMap) {
-  return (context, event, meta) => {
-    return toArray(transitions).map(toTarget).find((transition) => {
-      const determineGuard = determineGuardFn(transition.guard, guardMap);
-      const guard = determineGuard(context, event, meta);
-      return guard ?? transition.target ?? transition.actions;
-    });
-  };
-}
-
-// src/machine.ts
-var Machine = class {
-  // Let's get started!
-  constructor(config, options) {
-    __publicField(this, "status", "Not Started" /* NotStarted */);
-    __publicField(this, "state");
-    __publicField(this, "initialState");
-    __publicField(this, "initialContext");
-    __publicField(this, "id");
-    __publicField(this, "type", "machine" /* Machine */);
-    // Cleanup function map (per state)
-    __publicField(this, "activityEvents", /* @__PURE__ */ new Map());
-    __publicField(this, "delayedEvents", /* @__PURE__ */ new Map());
-    // state update listeners the user can opt-in for
-    __publicField(this, "stateListeners", /* @__PURE__ */ new Set());
-    __publicField(this, "doneListeners", /* @__PURE__ */ new Set());
-    __publicField(this, "contextWatchers", /* @__PURE__ */ new Set());
-    // Cleanup functions (for `subscribe`)
-    __publicField(this, "removeStateListener", noop);
-    // For Parent <==> Spawned Actor relationship
-    __publicField(this, "parent");
-    __publicField(this, "children", /* @__PURE__ */ new Map());
-    // A map of guard, action, delay implementations
-    __publicField(this, "guardMap");
-    __publicField(this, "actionMap");
-    __publicField(this, "delayMap");
-    __publicField(this, "activityMap");
-    __publicField(this, "sync");
-    __publicField(this, "options");
-    __publicField(this, "config");
-    __publicField(this, "_created", () => {
-      const event = toEvent("machine.created" /* Created */);
-      this.executeActions(this.config?.created, event);
-    });
-    // Starts the interpreted machine.
-    __publicField(this, "start", (init) => {
-      this.state.value = "";
-      this.state.tags = [];
-      if (this.status === "Running" /* Running */) {
-        return this;
-      }
-      this.status = "Running" /* Running */;
-      this.removeStateListener = subscribe(
-        this.state,
-        () => {
-          this.stateListeners.forEach((listener) => {
-            listener(this.stateSnapshot);
-          });
-        },
-        this.sync
-      );
-      this.setupContextWatchers();
-      this.executeActivities(toEvent("machine.start" /* Start */), toArray(this.config.activities), "machine.start" /* Start */);
-      this.executeActions(this.config.entry, toEvent("machine.start" /* Start */));
-      const event = toEvent("machine.init" /* Init */);
-      const target = isObject(init) ? init.value : init;
-      const context = isObject(init) ? init.context : void 0;
-      if (context) {
-        this.setContext(context);
-      }
-      const transition = {
-        target: target ?? this.config.initial
-      };
-      const next = this.getNextStateInfo(transition, event);
-      this.initialState = next;
-      this.performStateChangeEffects(this.state.value, next, event);
-      return this;
-    });
-    __publicField(this, "setupContextWatchers", () => {
-      const { watch } = this.config;
-      if (!watch) return;
-      let prev = snapshot(this.state.context);
-      const cleanup = subscribe(this.state.context, () => {
-        const next = snapshot(this.state.context);
-        for (const [key, fn] of Object.entries(watch)) {
-          const isEqual = this.options.compareFns?.[key] ?? Object.is;
-          if (isEqual(prev[key], next[key])) continue;
-          this.executeActions(fn, this.state.event);
-        }
-        prev = next;
-      });
-      this.contextWatchers.add(cleanup);
-    });
-    // Stops the interpreted machine
-    __publicField(this, "stop", () => {
-      if (this.status === "Stopped" /* Stopped */) return;
-      this.performExitEffects(this.state.value, toEvent("machine.stop" /* Stop */));
-      this.executeActions(this.config.exit, toEvent("machine.stop" /* Stop */));
-      this.setState("");
-      this.setEvent("machine.stop" /* Stop */);
-      this.stopStateListeners();
-      this.stopChildren();
-      this.stopActivities();
-      this.stopDelayedEvents();
-      this.stopContextWatchers();
-      this.status = "Stopped" /* Stopped */;
-      return this;
-    });
-    __publicField(this, "stopStateListeners", () => {
-      this.removeStateListener();
-      this.stateListeners.clear();
-    });
-    __publicField(this, "stopContextWatchers", () => {
-      this.contextWatchers.forEach((fn) => fn());
-      this.contextWatchers.clear();
-    });
-    __publicField(this, "stopDelayedEvents", () => {
-      this.delayedEvents.forEach((state) => {
-        state.forEach((stop) => stop());
-      });
-      this.delayedEvents.clear();
-    });
-    // Cleanup running activities (e.g `setInterval`, invoked callbacks, promises)
-    __publicField(this, "stopActivities", (state) => {
-      if (state) {
-        this.activityEvents.get(state)?.forEach((stop) => stop());
-        this.activityEvents.get(state)?.clear();
-        this.activityEvents.delete(state);
-      } else {
-        this.activityEvents.forEach((state2) => {
-          state2.forEach((stop) => stop());
-          state2.clear();
-        });
-        this.activityEvents.clear();
-      }
-    });
-    /**
-     * Function to send event to spawned child machine or actor
-     */
-    __publicField(this, "sendChild", (evt, to) => {
-      const event = toEvent(evt);
-      const id = runIfFn(to, this.contextSnapshot);
-      const child = this.children.get(id);
-      if (!child) {
-        invariant(`[@zag-js/core] Cannot send '${event.type}' event to unknown child`);
-      }
-      child.send(event);
-    });
-    /**
-     * Function to stop a running child machine or actor
-     */
-    __publicField(this, "stopChild", (id) => {
-      if (!this.children.has(id)) {
-        invariant(`[@zag-js/core > stop-child] Cannot stop unknown child ${id}`);
-      }
-      this.children.get(id).stop();
-      this.children.delete(id);
-    });
-    __publicField(this, "removeChild", (id) => {
-      this.children.delete(id);
-    });
-    // Stop and delete spawned actors
-    __publicField(this, "stopChildren", () => {
-      this.children.forEach((child) => child.stop());
-      this.children.clear();
-    });
-    __publicField(this, "setParent", (parent) => {
-      this.parent = parent;
-    });
-    __publicField(this, "spawn", (src, id) => {
-      const actor = runIfFn(src);
-      if (id) actor.id = id;
-      actor.type = "machine.actor" /* Actor */;
-      actor.setParent(this);
-      this.children.set(actor.id, cast(actor));
-      actor.onDone(() => {
-        this.removeChild(actor.id);
-      }).start();
-      return cast(ref(actor));
-    });
-    __publicField(this, "stopActivity", (key) => {
-      if (!this.state.value) return;
-      const cleanups = this.activityEvents.get(this.state.value);
-      cleanups?.get(key)?.();
-      cleanups?.delete(key);
-    });
-    __publicField(this, "addActivityCleanup", (state, key, cleanup) => {
-      if (!state) return;
-      if (!this.activityEvents.has(state)) {
-        this.activityEvents.set(state, /* @__PURE__ */ new Map([[key, cleanup]]));
-      } else {
-        this.activityEvents.get(state)?.set(key, cleanup);
-      }
-    });
-    __publicField(this, "setState", (target) => {
-      this.state.previousValue = this.state.value;
-      this.state.value = target;
-      const stateNode = this.getStateNode(target);
-      if (target == null) {
-        clear(this.state.tags);
-      } else {
-        this.state.tags = toArray(stateNode?.tags);
-      }
-    });
-    /**
-     * To used within side effects for React or Vue to update context
-     */
-    __publicField(this, "setContext", (context) => {
-      if (!context) return;
-      deepMerge(this.state.context, compact$1(context));
-    });
-    __publicField(this, "setOptions", (options) => {
-      const opts = compact$1(options);
-      this.actionMap = { ...this.actionMap, ...opts.actions };
-      this.delayMap = { ...this.delayMap, ...opts.delays };
-      this.activityMap = { ...this.activityMap, ...opts.activities };
-      this.guardMap = { ...this.guardMap, ...opts.guards };
-    });
-    __publicField(this, "getStateNode", (state) => {
-      if (!state) return;
-      return this.config.states?.[state];
-    });
-    __publicField(this, "getNextStateInfo", (transitions, event) => {
-      const transition = this.determineTransition(transitions, event);
-      const isTargetless = !transition?.target;
-      const target = transition?.target ?? this.state.value;
-      const changed = this.state.value !== target;
-      const stateNode = this.getStateNode(target);
-      const reenter = !isTargetless && !changed && !transition?.internal;
-      const info = {
-        reenter,
-        transition,
-        stateNode,
-        target,
-        changed
-      };
-      this.log("NextState:", `[${event.type}]`, this.state.value, "---->", info.target);
-      return info;
-    });
-    __publicField(this, "getAfterActions", (transition, delay) => {
-      let id;
-      return {
-        entry: () => {
-          id = globalThis.setTimeout(() => {
-            const next = this.getNextStateInfo(transition, this.state.event);
-            this.performStateChangeEffects(this.state.value, next, this.state.event);
-          }, delay);
-        },
-        exit: () => {
-          globalThis.clearTimeout(id);
-        }
-      };
-    });
-    /**
-     * All `after` events leverage `setTimeout` and `clearTimeout`,
-     * we invoke the `clearTimeout` on exit and `setTimeout` on entry.
-     *
-     * To achieve this, we split the `after` defintion into `entry` and `exit`
-     *  functions and append them to the state's `entry` and `exit` actions
-     */
-    __publicField(this, "getDelayedEventActions", (state) => {
-      const stateNode = this.getStateNode(state);
-      const event = this.state.event;
-      if (!stateNode || !stateNode.after) return;
-      const entries = [];
-      const exits = [];
-      if (isArray(stateNode.after)) {
-        const transition = this.determineTransition(stateNode.after, event);
-        if (!transition) return;
-        if (!hasProp(transition, "delay")) {
-          throw new Error(`[@zag-js/core > after] Delay is required for after transition: ${JSON.stringify(transition)}`);
-        }
-        const determineDelay = determineDelayFn(transition.delay, this.delayMap);
-        const __delay = determineDelay(this.contextSnapshot, event);
-        const actions = this.getAfterActions(transition, __delay);
-        entries.push(actions.entry);
-        exits.push(actions.exit);
-        return { entries, exits };
-      }
-      if (isObject(stateNode.after)) {
-        for (const delay in stateNode.after) {
-          const transition = stateNode.after[delay];
-          const determineDelay = determineDelayFn(delay, this.delayMap);
-          const __delay = determineDelay(this.contextSnapshot, event);
-          const actions = this.getAfterActions(transition, __delay);
-          entries.push(actions.entry);
-          exits.push(actions.exit);
-        }
-      }
-      return { entries, exits };
-    });
-    /**
-     * Function to executes defined actions. It can accept actions as string
-     * (referencing `options.actions`) or actual functions.
-     */
-    __publicField(this, "executeActions", (actions, event) => {
-      const pickedActions = determineActionsFn(actions, this.guardMap)(this.contextSnapshot, event, this.guardMeta);
-      for (const action of toArray(pickedActions)) {
-        const fn = isString(action) ? this.actionMap?.[action] : action;
-        warn(
-          isString(action) && !fn,
-          `[@zag-js/core > execute-actions] No implementation found for action: \`${action}\``
-        );
-        fn?.(this.state.context, event, this.meta);
-      }
-    });
-    /**
-     * Function to execute running activities and registers
-     * their cleanup function internally (to be called later on when we exit the state)
-     */
-    __publicField(this, "executeActivities", (event, activities, state) => {
-      for (const activity of activities) {
-        const fn = isString(activity) ? this.activityMap?.[activity] : activity;
-        if (!fn) {
-          warn(`[@zag-js/core > execute-activity] No implementation found for activity: \`${activity}\``);
-          continue;
-        }
-        const cleanup = fn(this.state.context, event, this.meta);
-        if (cleanup) {
-          const key = isString(activity) ? activity : activity.name || uuid();
-          this.addActivityCleanup(state ?? this.state.value, key, cleanup);
-        }
-      }
-    });
-    /**
-     * Normalizes the `every` definition to transition. `every` can be:
-     * - An array of possible actions to run (we need to pick the first match based on guard)
-     * - An object of intervals and actions
-     */
-    __publicField(this, "createEveryActivities", (every, callbackfn) => {
-      if (!every) return;
-      if (isArray(every)) {
-        const picked = toArray(every).find((transition) => {
-          const delayOrFn = transition.delay;
-          const determineDelay2 = determineDelayFn(delayOrFn, this.delayMap);
-          const delay2 = determineDelay2(this.contextSnapshot, this.state.event);
-          const determineGuard = determineGuardFn(transition.guard, this.guardMap);
-          const guard = determineGuard(this.contextSnapshot, this.state.event, this.guardMeta);
-          return guard ?? delay2 != null;
-        });
-        if (!picked) return;
-        const determineDelay = determineDelayFn(picked.delay, this.delayMap);
-        const delay = determineDelay(this.contextSnapshot, this.state.event);
-        const activity = () => {
-          const id = globalThis.setInterval(() => {
-            this.executeActions(picked.actions, this.state.event);
-          }, delay);
-          return () => {
-            globalThis.clearInterval(id);
-          };
-        };
-        callbackfn(activity);
-      } else {
-        for (const interval in every) {
-          const actions = every?.[interval];
-          const determineDelay = determineDelayFn(interval, this.delayMap);
-          const delay = determineDelay(this.contextSnapshot, this.state.event);
-          const activity = () => {
-            const id = globalThis.setInterval(() => {
-              this.executeActions(actions, this.state.event);
-            }, delay);
-            return () => {
-              globalThis.clearInterval(id);
-            };
-          };
-          callbackfn(activity);
-        }
-      }
-    });
-    __publicField(this, "setEvent", (event) => {
-      this.state.previousEvent = this.state.event;
-      this.state.event = ref(toEvent(event));
-    });
-    __publicField(this, "performExitEffects", (current, event) => {
-      const currentState = this.state.value;
-      if (currentState === "") return;
-      const stateNode = current ? this.getStateNode(current) : void 0;
-      this.stopActivities(currentState);
-      const _exit = determineActionsFn(stateNode?.exit, this.guardMap)(this.contextSnapshot, event, this.guardMeta);
-      const exitActions = toArray(_exit);
-      const afterExitActions = this.delayedEvents.get(currentState);
-      if (afterExitActions) {
-        exitActions.push(...afterExitActions);
-      }
-      this.executeActions(exitActions, event);
-    });
-    __publicField(this, "performEntryEffects", (next, event) => {
-      const stateNode = this.getStateNode(next);
-      const activities = toArray(stateNode?.activities);
-      this.createEveryActivities(stateNode?.every, (activity) => {
-        activities.unshift(activity);
-      });
-      if (activities.length > 0) {
-        this.executeActivities(event, activities);
-      }
-      const pickedActions = determineActionsFn(stateNode?.entry, this.guardMap)(
-        this.contextSnapshot,
-        event,
-        this.guardMeta
-      );
-      const entryActions = toArray(pickedActions);
-      const afterActions = this.getDelayedEventActions(next);
-      if (stateNode?.after && afterActions) {
-        this.delayedEvents.set(next, afterActions?.exits);
-        entryActions.push(...afterActions.entries);
-      }
-      this.executeActions(entryActions, event);
-      if (stateNode?.type === "final") {
-        this.state.done = true;
-        this.doneListeners.forEach((listener) => {
-          listener(this.stateSnapshot);
-        });
-        this.stop();
-      }
-    });
-    __publicField(this, "performTransitionEffects", (transitions, event) => {
-      const transition = this.determineTransition(transitions, event);
-      this.executeActions(transition?.actions, event);
-    });
-    /**
-     * Performs all the requires side-effects or reactions when
-     * we move from state A => state B.
-     *
-     * The Effect order:
-     * Exit actions (current state) => Transition actions  => Go to state => Entry actions (next state)
-     */
-    __publicField(this, "performStateChangeEffects", (current, next, event) => {
-      this.setEvent(event);
-      const changed = next.changed || next.reenter;
-      if (changed) {
-        this.performExitEffects(current, event);
-      }
-      this.performTransitionEffects(next.transition, event);
-      this.setState(next.target);
-      if (changed) {
-        this.performEntryEffects(next.target, event);
-      }
-    });
-    __publicField(this, "determineTransition", (transition, event) => {
-      const fn = determineTransitionFn(transition, this.guardMap);
-      return fn?.(this.contextSnapshot, event, this.guardMeta);
-    });
-    /**
-     * Function to send event to parent machine from spawned child
-     */
-    __publicField(this, "sendParent", (evt) => {
-      if (!this.parent) {
-        invariant("[@zag-js/core > send-parent] Cannot send event to an unknown parent");
-      }
-      const event = toEvent(evt);
-      this.parent?.send(event);
-    });
-    __publicField(this, "log", (...args) => {
-      if (isDev() && this.options.debug) {
-        console.log(...args);
-      }
-    });
-    /**
-     * Function to send an event to current machine
-     */
-    __publicField(this, "send", (evt) => {
-      const event = toEvent(evt);
-      this.transition(this.state.value, event);
-    });
-    __publicField(this, "transition", (state, evt) => {
-      const stateNode = isString(state) ? this.getStateNode(state) : state?.stateNode;
-      const event = toEvent(evt);
-      if (!stateNode && !this.config.on) {
-        const msg = this.status === "Stopped" /* Stopped */ ? "[@zag-js/core > transition] Cannot transition a stopped machine" : `[@zag-js/core > transition] State does not have a definition for \`state\`: ${state}, \`event\`: ${event.type}`;
-        warn(msg);
-        return;
-      }
-      const transitions = stateNode?.on?.[event.type] ?? this.config.on?.[event.type];
-      const next = this.getNextStateInfo(transitions, event);
-      this.performStateChangeEffects(this.state.value, next, event);
-      return next.stateNode;
-    });
-    __publicField(this, "subscribe", (listener) => {
-      this.stateListeners.add(listener);
-      if (this.status === "Running" /* Running */) {
-        listener(this.stateSnapshot);
-      }
-      return () => {
-        this.stateListeners.delete(listener);
-      };
-    });
-    __publicField(this, "onDone", (listener) => {
-      this.doneListeners.add(listener);
-      return this;
-    });
-    __publicField(this, "onTransition", (listener) => {
-      this.stateListeners.add(listener);
-      if (this.status === "Running" /* Running */) {
-        listener(this.stateSnapshot);
-      }
-      return this;
-    });
-    this.config = structuredClone(config);
-    this.options = structuredClone(options ?? {});
-    this.id = this.config.id ?? `machine-${uuid()}`;
-    this.guardMap = this.options?.guards ?? {};
-    this.actionMap = this.options?.actions ?? {};
-    this.delayMap = this.options?.delays ?? {};
-    this.activityMap = this.options?.activities ?? {};
-    this.sync = this.options?.sync ?? false;
-    this.state = createProxy(this.config);
-    this.initialContext = snapshot(this.state.context);
-  }
-  // immutable state value
-  get stateSnapshot() {
-    return cast(snapshot(this.state));
-  }
-  getState() {
-    return this.stateSnapshot;
-  }
-  // immutable context value
-  get contextSnapshot() {
-    return this.stateSnapshot.context;
-  }
-  /**
-   * A reference to the instance methods of the machine.
-   * Useful when spawning child machines and managing the communication between them.
-   */
-  get self() {
-    const self = this;
-    return {
-      id: this.id,
-      send: this.send.bind(this),
-      sendParent: this.sendParent.bind(this),
-      sendChild: this.sendChild.bind(this),
-      stop: this.stop.bind(this),
-      stopChild: this.stopChild.bind(this),
-      spawn: this.spawn.bind(this),
-      stopActivity: this.stopActivity.bind(this),
-      get state() {
-        return self.stateSnapshot;
-      },
-      get initialContext() {
-        return self.initialContext;
-      },
-      get initialState() {
-        return self.initialState?.target ?? "";
-      }
-    };
-  }
-  get meta() {
-    return {
-      state: this.stateSnapshot,
-      guards: this.guardMap,
-      send: this.send.bind(this),
-      self: this.self,
-      initialContext: this.initialContext,
-      initialState: this.initialState?.target ?? "",
-      getState: () => this.stateSnapshot,
-      getAction: (key) => this.actionMap[key],
-      getGuard: (key) => this.guardMap[key]
-    };
-  }
-  get guardMeta() {
-    return {
-      state: this.stateSnapshot
-    };
-  }
-  get [Symbol.toStringTag]() {
-    return "Machine";
-  }
+  }, mergedProps));
 };
-var createMachine = (config, options) => new Machine(config, options);
-
-// src/array.ts
-
-// src/object.ts
-function compact(obj) {
-  if (!isPlainObject(obj) || obj === void 0) {
-    return obj;
-  }
-  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
-  const filtered = {};
-  for (const key of keys) {
-    const value = obj[key];
-    if (value !== void 0) {
-      filtered[key] = compact(value);
-    }
-  }
-  return filtered;
-}
-var isPlainObject = (value) => {
-  return value && typeof value === "object" && value.constructor === Object;
-};
-
-function $(e,t,u,x=h=>h){return e*x(.5-t*(.5-u))}function se(e){return [-e[0],-e[1]]}function l(e,t){return [e[0]+t[0],e[1]+t[1]]}function a(e,t){return [e[0]-t[0],e[1]-t[1]]}function b(e,t){return [e[0]*t,e[1]*t]}function he(e,t){return [e[0]/t,e[1]/t]}function R(e){return [e[1],-e[0]]}function B(e,t){return e[0]*t[0]+e[1]*t[1]}function ue(e,t){return e[0]===t[0]&&e[1]===t[1]}function ge(e){return Math.hypot(e[0],e[1])}function de(e){return e[0]*e[0]+e[1]*e[1]}function A(e,t){return de(a(e,t))}function G(e){return he(e,ge(e))}function ie(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function L(e,t,u){let x=Math.sin(u),h=Math.cos(u),y=e[0]-t[0],n=e[1]-t[1],f=y*h-n*x,d=y*x+n*h;return [f+t[0],d+t[1]]}function K(e,t,u){return l(e,b(a(t,e),u))}function ee(e,t,u){return l(e,b(t,u))}var{min:C,PI:xe}=Math,pe=.275,V=xe+1e-4;function ce(e,t={}){let{size:u=16,smoothing:x=.5,thinning:h=.5,simulatePressure:y=!0,easing:n=r=>r,start:f={},end:d={},last:D=!1}=t,{cap:S=!0,easing:j=r=>r*(2-r)}=f,{cap:q=!0,easing:c=r=>--r*r*r+1}=d;if(e.length===0||u<=0)return [];let p=e[e.length-1].runningLength,g=f.taper===!1?0:f.taper===!0?Math.max(u,p):f.taper,T=d.taper===!1?0:d.taper===!0?Math.max(u,p):d.taper,te=Math.pow(u*x,2),_=[],M=[],H=e.slice(0,10).reduce((r,i)=>{let o=i.pressure;if(y){let s=C(1,i.distance/u),W=C(1,1-s);o=C(1,r+(W-r)*(s*pe));}return (r+o)/2},e[0].pressure),m=$(u,h,e[e.length-1].pressure,n),U,X=e[0].vector,z=e[0].point,F=z,O=z,E=F,J=!1;for(let r=0;r<e.length;r++){let{pressure:i}=e[r],{point:o,vector:s,distance:W,runningLength:I}=e[r];if(r<e.length-1&&p-I<3)continue;if(h){if(y){let v=C(1,W/u),Z=C(1,1-v);i=C(1,H+(Z-H)*(v*pe));}m=$(u,h,i,n);}else m=u/2;U===void 0&&(U=m);let le=I<g?j(I/g):1,fe=p-I<T?c((p-I)/T):1;m=Math.max(.01,m*Math.min(le,fe));let re=(r<e.length-1?e[r+1]:e[r]).vector,Y=r<e.length-1?B(s,re):1,be=B(s,X)<0&&!J,ne=Y!==null&&Y<0;if(be||ne){let v=b(R(X),m);for(let Z=1/13,w=0;w<=1;w+=Z)O=L(a(o,v),o,V*w),_.push(O),E=L(l(o,v),o,V*-w),M.push(E);z=O,F=E,ne&&(J=!0);continue}if(J=!1,r===e.length-1){let v=b(R(s),m);_.push(a(o,v)),M.push(l(o,v));continue}let oe=b(R(K(re,s,Y)),m);O=a(o,oe),(r<=1||A(z,O)>te)&&(_.push(O),z=O),E=l(o,oe),(r<=1||A(F,E)>te)&&(M.push(E),F=E),H=i,X=s;}let P=e[0].point.slice(0,2),k=e.length>1?e[e.length-1].point.slice(0,2):l(e[0].point,[1,1]),Q=[],N=[];if(e.length===1){if(!(g||T)||D){let r=ee(P,G(R(a(P,k))),-(U||m)),i=[];for(let o=1/13,s=o;s<=1;s+=o)i.push(L(r,P,V*2*s));return i}}else {if(!(g||T&&e.length===1))if(S)for(let i=1/13,o=i;o<=1;o+=i){let s=L(M[0],P,V*o);Q.push(s);}else {let i=a(_[0],M[0]),o=b(i,.5),s=b(i,.51);Q.push(a(P,o),a(P,s),l(P,s),l(P,o));}let r=R(se(e[e.length-1].vector));if(T||g&&e.length===1)N.push(k);else if(q){let i=ee(k,r,m);for(let o=1/29,s=o;s<1;s+=o)N.push(L(i,k,V*3*s));}else N.push(l(k,b(r,m)),l(k,b(r,m*.99)),a(k,b(r,m*.99)),a(k,b(r,m)));}return _.concat(N,M.reverse(),Q)}function me(e,t={}){var q;let{streamline:u=.5,size:x=16,last:h=!1}=t;if(e.length===0)return [];let y=.15+(1-u)*.85,n=Array.isArray(e[0])?e:e.map(({x:c,y:p,pressure:g=.5})=>[c,p,g]);if(n.length===2){let c=n[1];n=n.slice(0,-1);for(let p=1;p<5;p++)n.push(K(n[0],c,p/4));}n.length===1&&(n=[...n,[...l(n[0],[1,1]),...n[0].slice(2)]]);let f=[{point:[n[0][0],n[0][1]],pressure:n[0][2]>=0?n[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],d=!1,D=0,S=f[0],j=n.length-1;for(let c=1;c<n.length;c++){let p=h&&c===j?n[c].slice(0,2):K(S.point,n[c],y);if(ue(S.point,p))continue;let g=ie(p,S.point);if(D+=g,c<j&&!d){if(D<x)continue;d=!0;}S={point:p,pressure:n[c][2]>=0?n[c][2]:.5,vector:G(a(S.point,p)),distance:g,runningLength:D},f.push(S);}return f[0].vector=((q=f[1])==null?void 0:q.vector)||[0,0],f}function ae(e,t={}){return ce(me(e,t),t)}var _e=ae;
-
-// src/signature-pad.anatomy.ts
-var anatomy = createAnatomy("signature-pad").parts(
-  "root",
-  "control",
-  "segment",
-  "segmentPath",
-  "guide",
-  "clearTrigger",
-  "label"
-);
-var parts = anatomy.build();
-var dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `signature-${ctx.id}`,
-  getControlId: (ctx) => ctx.ids?.control ?? `signature-control-${ctx.id}`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `signature-input-${ctx.id}`,
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getSegmentEl: (ctx) => query(dom.getControlEl(ctx), "[data-part=segment]"),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
-  getDataUrl: (ctx, options) => {
-    if (ctx.isEmpty) return Promise.resolve("");
-    return getDataUrl(dom.getSegmentEl(ctx), options);
-  }
-});
-
-// src/signature-pad.connect.ts
-function connect(state, send, normalize) {
-  const drawing = state.matches("drawing");
-  const empty = state.context.isEmpty;
-  const interactive = state.context.isInteractive;
-  const disabled = !!state.context.disabled;
-  return {
-    empty,
-    drawing,
-    currentPath: state.context.currentPath,
-    paths: state.context.paths,
-    clear() {
-      send({ type: "CLEAR" });
-    },
-    getDataUrl(type, quality) {
-      return dom.getDataUrl(state.context, { type, quality });
-    },
-    getLabelProps() {
-      return normalize.element({
-        ...parts.label.attrs,
-        "data-disabled": dataAttr(disabled),
-        htmlFor: dom.getControlId(state.context)
-      });
-    },
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        "data-disabled": dataAttr(disabled),
-        id: dom.getRootId(state.context)
-      });
-    },
-    getControlProps() {
-      return normalize.element({
-        ...parts.control.attrs,
-        tabIndex: disabled ? void 0 : 0,
-        id: dom.getControlId(state.context),
-        "aria-label": "Signature Pad",
-        "aria-roledescription": "signature pad",
-        "aria-disabled": disabled,
-        "data-disabled": dataAttr(disabled),
-        onPointerDown(event) {
-          if (!isLeftClick(event)) return;
-          if (isModifierKey(event)) return;
-          if (!interactive) return;
-          const target = getEventTarget(event);
-          if (target?.closest("[data-part=clear-trigger]")) return;
-          event.currentTarget.setPointerCapture(event.pointerId);
-          const point = { x: event.clientX, y: event.clientY };
-          const { offset } = getRelativePoint(point, dom.getControlEl(state.context));
-          send({ type: "POINTER_DOWN", point: offset, pressure: event.pressure });
-        },
-        onPointerUp(event) {
-          if (!interactive) return;
-          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-            event.currentTarget.releasePointerCapture(event.pointerId);
-          }
-        },
-        style: {
-          position: "relative",
-          touchAction: "none",
-          userSelect: "none"
-        }
-      });
-    },
-    getSegmentProps() {
-      return normalize.svg({
-        ...parts.segment.attrs,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          pointerEvents: "none",
-          fill: state.context.drawing.fill
-        }
-      });
-    },
-    getSegmentPathProps(props2) {
-      return normalize.path({
-        ...parts.segmentPath.attrs,
-        d: props2.path
-      });
-    },
-    getGuideProps() {
-      return normalize.element({
-        ...parts.guide.attrs,
-        "data-disabled": dataAttr(disabled)
-      });
-    },
-    getClearTriggerProps() {
-      return normalize.button({
-        ...parts.clearTrigger.attrs,
-        type: "button",
-        "aria-label": "Clear Signature",
-        hidden: !state.context.paths.length || drawing,
-        disabled,
-        onClick() {
-          send({ type: "CLEAR" });
-        }
-      });
-    },
-    getHiddenInputProps(props2) {
-      return normalize.input({
-        type: "text",
-        hidden: true,
-        disabled,
-        name: state.context.name,
-        value: props2.value
-      });
-    }
-  };
-}
-
-// src/get-svg-path.ts
-var average = (a, b) => (a + b) / 2;
-function getSvgPathFromStroke(points, closed = true) {
-  const len = points.length;
-  if (len < 4) {
-    return "";
-  }
-  let a = points[0];
-  let b = points[1];
-  const c = points[2];
-  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
-    b[1],
-    c[1]
-  ).toFixed(2)} T`;
-  for (let i = 2, max = len - 1; i < max; i++) {
-    a = points[i];
-    b = points[i + 1];
-    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
-  }
-  if (closed) {
-    result += "Z";
-  }
-  return result;
-}
-
-// src/signature-pad.machine.ts
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "signature-pad",
-      initial: "idle",
-      context: {
-        readOnly: false,
-        disabled: false,
-        ...ctx,
-        paths: [],
-        currentPoints: [],
-        currentPath: null,
-        drawing: {
-          size: 2,
-          simulatePressure: false,
-          thinning: 0.7,
-          smoothing: 0.4,
-          streamline: 0.6,
-          ...ctx.drawing
-        }
-      },
-      computed: {
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
-        isEmpty: (ctx2) => ctx2.paths.length === 0
-      },
-      on: {
-        CLEAR: {
-          actions: ["clearPoints", "invokeOnDrawEnd", "focusCanvasEl"]
-        }
-      },
-      states: {
-        idle: {
-          on: {
-            POINTER_DOWN: {
-              target: "drawing",
-              actions: ["addPoint"]
-            }
-          }
-        },
-        drawing: {
-          activities: ["trackPointerMove"],
-          on: {
-            POINTER_MOVE: {
-              actions: ["addPoint", "invokeOnDraw"]
-            },
-            POINTER_UP: {
-              target: "idle",
-              actions: ["endStroke", "invokeOnDrawEnd"]
-            }
-          }
-        }
-      }
-    },
-    {
-      activities: {
-        trackPointerMove(ctx2, _evt, { send }) {
-          const doc = dom.getDoc(ctx2);
-          return trackPointerMove(doc, {
-            onPointerMove({ event, point }) {
-              const { offset } = getRelativePoint(point, dom.getControlEl(ctx2));
-              send({ type: "POINTER_MOVE", point: offset, pressure: event.pressure });
-            },
-            onPointerUp() {
-              send({ type: "POINTER_UP" });
-            }
-          });
-        }
-      },
-      actions: {
-        addPoint(ctx2, evt) {
-          ctx2.currentPoints.push(evt.point);
-          const stroke = _e(ctx2.currentPoints, ctx2.drawing);
-          ctx2.currentPath = getSvgPathFromStroke(stroke);
-        },
-        endStroke(ctx2) {
-          ctx2.paths.push(ctx2.currentPath);
-          ctx2.currentPoints = [];
-          ctx2.currentPath = null;
-        },
-        clearPoints(ctx2) {
-          ctx2.currentPoints = [];
-          ctx2.paths = [];
-        },
-        focusCanvasEl(ctx2) {
-          queueMicrotask(() => {
-            dom.getControlEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        invokeOnDraw(ctx2) {
-          ctx2.onDraw?.({
-            paths: [...ctx2.paths, ctx2.currentPath]
-          });
-        },
-        invokeOnDrawEnd(ctx2) {
-          ctx2.onDrawEnd?.({
-            paths: [...ctx2.paths],
-            getDataUrl(type, quality = 0.92) {
-              return dom.getDataUrl(ctx2, { type, quality });
-            }
-          });
-        }
-      }
-    }
-  );
-}
-createProps()([
-  "dir",
-  "disabled",
-  "getRootNode",
-  "id",
-  "ids",
-  "onDraw",
-  "onDrawEnd",
-  "readOnly",
-  "drawing",
-  "name"
-]);
 
 const useSignaturePad = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     ...props
   }));
-  const [state, send] = useMachine(machine(context()), {
+  const [state, send] = useMachine(signaturePad$1.machine(context()), {
     context
   });
-  return createMemo(() => connect(state, send, normalizeProps));
+  return createMemo(() => signaturePad$1.connect(state, send, normalizeProps));
 };
 
 const SignaturePadRoot = props => {
-  const [useSignaturePadProps, localProps] = createSplitProps()(props, ['id', 'ids', 'drawing', 'disabled', 'readOnly', 'name', 'onDraw', 'onDrawEnd']);
+  const [useSignaturePadProps, localProps] = createSplitProps()(props, ['id', 'ids', 'drawing', 'disabled', 'readOnly', 'name', 'onDraw', 'onDrawEnd', 'readOnly', 'required', 'translations']);
   const signaturePad = useSignaturePad(useSignaturePadProps);
   const mergedProps = mergeProps$1(() => signaturePad().getRootProps(), localProps);
   return createComponent(SignaturePadProvider, {
@@ -5781,6 +4535,7 @@ var signaturePad = /*#__PURE__*/Object.freeze({
   Context: SignaturePadContext,
   Control: SignaturePadControl,
   Guide: SignaturePadGuide,
+  HiddenInput: SignaturePadHiddenInput,
   Label: SignaturePadLabel,
   Root: SignaturePadRoot,
   RootProvider: SignaturePadRootProvider,
@@ -6011,7 +4766,12 @@ const SwitchControl = props => {
 const SwitchHiddenInput = props => {
   const api = useSwitchContext();
   const mergedProps = mergeProps$1(() => api().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const SwitchLabel = props => {
@@ -6024,8 +4784,17 @@ const useSwitch = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    invalid: field?.().invalid,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     checked: props.defaultChecked,
@@ -6216,7 +4985,12 @@ const TagsInputControl = props => {
 const TagsInputHiddenInput = props => {
   const tagsInput = useTagsInputContext();
   const mergedProps = mergeProps$1(() => tagsInput().getHiddenInputProps(), props);
-  return createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return createComponent(ark.input, mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const TagsInputInput = props => {
@@ -6293,9 +5067,18 @@ const useTagsInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
+  const field = useFieldContext();
   const context = createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    invalid: field?.().invalid,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
     ...props
@@ -6307,7 +5090,7 @@ const useTagsInput = props => {
 };
 
 const TagsInputRoot = props => {
-  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'defaultValue', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'defaultValue', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'required', 'translations', 'validate', 'value']);
   const api = useTagsInput(useTagsInputProps);
   const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
   return createComponent(TagsInputProvider, {
@@ -6513,7 +5296,8 @@ var toggleGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: ToggleGroupContext,
   Item: ToggleGroupItem,
-  Root: ToggleGroupRoot
+  Root: ToggleGroupRoot,
+  RootProvider: ToggleGroupRootProvider
 });
 
 const [TooltipProvider, useTooltipContext] = createContext({
@@ -6583,7 +5367,7 @@ const useTooltip = props => {
 
 const TooltipRoot = props => {
   const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEscape', 'closeOnPointerDown', 'defaultOpen', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEscape', 'closeOnPointerDown', 'closeOnScroll', 'defaultOpen', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useTooltip(useTooltipProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
     present: api().open
@@ -6839,5 +5623,5 @@ var treeView = /*#__PURE__*/Object.freeze({
   Tree: TreeViewTree
 });
 
-export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, AccordionRootProvider, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, AvatarRootProvider, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselRootProvider, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, CheckboxRootProvider, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardRootProvider, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxList, ComboboxPositioner, ComboboxRoot, ComboboxRootProvider, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerRootProvider, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogRootProvider, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableRootProvider, EditableSubmitTrigger, EnvironmentProvider, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadRootProvider, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardRootProvider, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuRootProvider, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputRootProvider, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, PaginationRootProvider, pinInput as PinInput, PinInputContext, PinInputControl, PinInputHiddenInput, PinInputInput, PinInputLabel, PinInputRoot, PinInputRootProvider, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressRootProvider, ProgressTrack, ProgressValueText, ProgressView, qrCode as QrCode, QrCodeContext, QrCodeFrame, QrCodeOverlay, QrCodePattern, QrCodeRoot, QrCodeRootProvider, radioGroup as RadioGroup, RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RadioGroupRootProvider, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupHiddenInput, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, RatingGroupRootProvider, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemHiddenInput, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, SegmentGroupRootProvider, select as Select, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPositioner, SelectRoot, SelectRootProvider, SelectTrigger, SelectValueText, signaturePad as SignaturePad, SignaturePadClearTrigger, SignaturePadContext, SignaturePadControl, SignaturePadGuide, SignaturePadLabel, SignaturePadRoot, SignaturePadRootProvider, SignaturePadSegment, slider as Slider, SliderContext, SliderControl, SliderHiddenInput, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderRootProvider, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, SplitterRootProvider, _switch as Switch, SwitchContext, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchRootProvider, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, TabsRootProvider, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputHiddenInput, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, TagsInputRootProvider, toast as Toast, ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, ToggleGroupRootProvider, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipRootProvider, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemContext, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewRootProvider, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordion, useAccordionContext, useAccordionItemContext, useAvatar, useAvatarContext, useCarousel, useCarouselContext, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext, useClipboard, useClipboardContext, useCollapsible, useCollapsibleContext, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useComboboxItemContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useEditable, useEditableContext, useEnvironmentContext, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useLocaleContext, useMenu, useMenuContext, useMenuItemContext, useNumberInput, useNumberInputContext, usePagination, usePaginationContext, usePinInput, usePinInputContext, usePopover, usePopoverContext, usePresence, usePresenceContext, useProgress, useProgressContext, useQrCode, useQrCodeContext, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext, useSelect, useSelectContext, useSelectItemContext, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwitch, useSwitchContext, useTabs, useTabsContext, useTagsInput, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTreeView, useTreeViewContext, useTreeViewItemContext };
+export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, AccordionRootProvider, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, AvatarRootProvider, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselRootProvider, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, CheckboxRootProvider, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardRootProvider, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderLabel, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerChannelSliderValueText, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueSwatch, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxList, ComboboxPositioner, ComboboxRoot, ComboboxRootProvider, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerRootProvider, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogRootProvider, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableRootProvider, EditableSubmitTrigger, EnvironmentProvider, field as Field, FieldContext, FieldErrorText, FieldHelperText, FieldInput, FieldLabel, FieldRoot, FieldRootProvider, FieldSelect, FieldTextarea, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadRootProvider, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardRootProvider, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuRootProvider, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputRootProvider, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, PaginationRootProvider, pinInput as PinInput, PinInputContext, PinInputControl, PinInputHiddenInput, PinInputInput, PinInputLabel, PinInputRoot, PinInputRootProvider, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressRootProvider, ProgressTrack, ProgressValueText, ProgressView, qrCode as QrCode, QrCodeContext, QrCodeFrame, QrCodeOverlay, QrCodePattern, QrCodeRoot, QrCodeRootProvider, radioGroup as RadioGroup, RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RadioGroupRootProvider, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupHiddenInput, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, RatingGroupRootProvider, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemHiddenInput, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, SegmentGroupRootProvider, select as Select, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPositioner, SelectRoot, SelectRootProvider, SelectTrigger, SelectValueText, signaturePad as SignaturePad, SignaturePadClearTrigger, SignaturePadContext, SignaturePadControl, SignaturePadGuide, SignaturePadHiddenInput, SignaturePadLabel, SignaturePadRoot, SignaturePadRootProvider, SignaturePadSegment, slider as Slider, SliderContext, SliderControl, SliderHiddenInput, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderRootProvider, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, SplitterRootProvider, _switch as Switch, SwitchContext, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchRootProvider, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, TabsRootProvider, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputHiddenInput, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, TagsInputRootProvider, toast as Toast, ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, ToggleGroupRootProvider, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipRootProvider, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemContext, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewRootProvider, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordion, useAccordionContext, useAccordionItemContext, useAvatar, useAvatarContext, useCarousel, useCarouselContext, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext, useClipboard, useClipboardContext, useCollapsible, useCollapsibleContext, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useComboboxItemContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useEditable, useEditableContext, useEnvironmentContext, useFieldContext, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useLocaleContext, useMenu, useMenuContext, useMenuItemContext, useNumberInput, useNumberInputContext, usePagination, usePaginationContext, usePinInput, usePinInputContext, usePopover, usePopoverContext, usePresence, usePresenceContext, useProgress, useProgressContext, useQrCode, useQrCodeContext, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext, useSelect, useSelectContext, useSelectItemContext, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwitch, useSwitchContext, useTabs, useTabsContext, useTagsInput, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTreeView, useTreeViewContext, useTreeViewItemContext };
 //# sourceMappingURL=index.js.map