@ark-ui/solid 3.3.0 → 3.4.0

package/dist/cjs/index.js

@@ -6,7 +6,7 @@ var solid = require('@zag-js/solid');
 var collapsible$1 = require('@zag-js/collapsible');
 var accordion$1 = require('@zag-js/accordion');
 var avatar$1 = require('@zag-js/avatar');
-var anatomy$1 = require('@ark-ui/anatomy');
+var anatomy = require('@ark-ui/anatomy');
 var carousel$1 = require('@zag-js/carousel');
 var checkbox$1 = require('@zag-js/checkbox');
 var clipboard$1 = require('@zag-js/clipboard');
@@ -16,6 +16,7 @@ var combobox$1 = require('@zag-js/combobox');
 var datePicker$1 = require('@zag-js/date-picker');
 var dialog$1 = require('@zag-js/dialog');
 var editable$1 = require('@zag-js/editable');
+var domQuery = require('@zag-js/dom-query');
 var fileUpload$1 = require('@zag-js/file-upload');
 var i18nUtils = require('@zag-js/i18n-utils');
 var hoverCard$1 = require('@zag-js/hover-card');
@@ -29,8 +30,7 @@ var qrCode$1 = require('@zag-js/qr-code');
 var radio = require('@zag-js/radio-group');
 var rating = require('@zag-js/rating-group');
 var select$1 = require('@zag-js/select');
-var domQuery = require('@zag-js/dom-query');
-var types = require('@zag-js/types');
+var signaturePad$1 = require('@zag-js/signature-pad');
 var slider$1 = require('@zag-js/slider');
 var splitter$1 = require('@zag-js/splitter');
 var zagSwitch = require('@zag-js/switch');
@@ -82,6 +82,7 @@ var qrCode__namespace = /*#__PURE__*/_interopNamespaceDefault(qrCode$1);
 var radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select$1);
+var signaturePad__namespace = /*#__PURE__*/_interopNamespaceDefault(signaturePad$1);
 var slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider$1);
 var splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter$1);
 var zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
@@ -187,8 +188,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',
@@ -204,7 +205,7 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
 var _tmpl$$5 = /*#__PURE__*/web.template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
-  const getRootNode = () => runIfFn$1(props.value) ?? spanRef()?.ownerDocument ?? document;
+  const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
   const environment = solidJs.createMemo(() => ({
     getRootNode,
     getDocument: () => domQuery.getDocument(getRootNode()),
@@ -531,7 +532,7 @@ const [CarouselProvider, useCarouselContext] = createContext({
 const CarouselContext = props => props.children(useCarouselContext());
 
 const CarouselControl = props => {
-  const mergedProps = solid.mergeProps(() => anatomy$1.carouselAnatomy.build().control.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy.carouselAnatomy.build().control.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -650,12 +651,12 @@ const CheckboxControl = props => {
 };
 
 function useControllableState(props) {
-  const [uncontrolledValue, setUncontrolledValue] = solidJs.createSignal(runIfFn$1(props.defaultValue));
+  const [uncontrolledValue, setUncontrolledValue] = solidJs.createSignal(runIfFn(props.defaultValue));
   const controlled = solidJs.createMemo(() => props.value?.() !== undefined);
   const currentValue = solidJs.createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
   const setValue = next => {
     solidJs.untrack(() => {
-      const nextValue = runIfFn$1(next, currentValue());
+      const nextValue = runIfFn(next, currentValue());
       if (controlled()) {
         return props.onChange?.(nextValue);
       }
@@ -726,15 +727,205 @@ const CheckboxGroup = props => {
   return web.createComponent(CheckboxGroupContextProvider, {
     value: checkboxGroup,
     get children() {
-      return web.createComponent(ark.div, web.mergeProps(localProps, () => anatomy$1.checkboxAnatomy.build().group.attrs));
+      return web.createComponent(ark.div, web.mergeProps({
+        role: "group"
+      }, localProps, () => anatomy.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 = solid.mergeProps(() => field().getErrorTextProps(), props);
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return field?.().invalid;
+    },
+    get children() {
+      return web.createComponent(ark.span, mergedProps);
     }
   });
 };
 
+const FieldHelperText = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field().getHelperTextProps(), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const FieldInput = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getInputProps(), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const FieldLabel = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getLabelProps(), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const FieldSelect = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getSelectProps(), props);
+  return web.createComponent(ark.select, mergedProps);
+};
+
+const parts = anatomy.fieldAnatomy.build();
+const useField = props => {
+  const {
+    required = false,
+    disabled = false,
+    invalid = false,
+    readOnly = false
+  } = props;
+  const [hasErrorText, setHasErrorText] = solidJs.createSignal(false);
+  const [hasHelperText, setHasHelperText] = solidJs.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`;
+  solidJs.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 solidJs.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 = solid.mergeProps(() => field().getRootProps(), localProps);
+  return web.createComponent(FieldProvider, {
+    value: field,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FieldRootProvider = props => {
+  const [{
+    value: field
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => field().getRootProps(), localProps);
+  return web.createComponent(FieldProvider, {
+    value: field,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FieldTextarea = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getTextareaProps(), props);
+  return web.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 = solid.mergeProps(() => checkbox().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const CheckboxIndicator = props => {
@@ -764,8 +955,17 @@ const useCheckbox = ownProps => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -968,10 +1168,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 = solid.mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+  const formatProps = useColorPickerFormatPropsContext();
+  const channelSliderProps = solid.mergeProps(channelProps, formatProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderProps(channelSliderProps), localProps);
   return web.createComponent(ColorPickerChannelPropsProvider, {
     value: channelProps,
     get children() {
@@ -980,20 +1188,43 @@ const ColorPickerChannelSlider = props => {
   });
 };
 
+const ColorPickerChannelSliderLabel = props => {
+  const colorPicker = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().getChannelSliderLabelProps(channelProps), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
 const ColorPickerChannelSliderThumb = props => {
   const api = useColorPickerContext();
+  const formatProps = useColorPickerFormatPropsContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(channelProps), props);
+  const channelSliderProps = solid.mergeProps(channelProps, formatProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(channelSliderProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelSliderTrack = props => {
   const api = useColorPickerContext();
+  const formatProps = useColorPickerFormatPropsContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(channelProps), props);
+  const channelSliderProps = solid.mergeProps(channelProps, formatProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(channelSliderProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+const ColorPickerChannelSliderValueText = props => {
+  const colorPicker = useColorPickerContext();
+  const localeContext = useLocaleContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().getChannelSliderValueTextProps(channelProps), props);
+  return web.createComponent(ark.span, web.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 => {
@@ -1097,7 +1328,12 @@ const ColorPickerFormatTrigger = props => {
 const ColorPickerHiddenInput = props => {
   const colorPicker = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => colorPicker().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const ColorPickerLabel = props => {
@@ -1123,10 +1359,18 @@ const ColorPickerPositioner = props => {
 const useColorPicker = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
+  const field = useFieldContext();
   const id = solidJs.createUniqueId();
   const context = solidJs.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,
@@ -1141,7 +1385,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(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1232,9 +1476,29 @@ const ColorPickerTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerValueSwatch = props => {
+  const [{
+    respectAlpha
+  }, localProps] = createSplitProps()(props, ['respectAlpha']);
+  const colorPicker = useColorPickerContext();
+  const swatchProps = solidJs.createMemo(() => ({
+    respectAlpha,
+    value: colorPicker().value
+  }));
+  const mergedProps = solid.mergeProps(() => colorPicker().getSwatchProps(swatchProps()), localProps);
+  return web.createComponent(ColorPickerSwatchPropsProvider, {
+    get value() {
+      return swatchProps();
+    },
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ColorPickerValueText = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy$1.colorPickerAnatomy.build().valueText.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().valueText.attrs, props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return api().valueAsString || props.children;
@@ -1244,17 +1508,23 @@ const ColorPickerValueText = props => {
 
 const ColorPickerView = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy$1.colorPickerAnatomy.build().view.attrs, props);
-  return web.createComponent(solidJs.Show, {
-    get when() {
-      return api().format === props.format;
-    },
+  const [formatProps, localProps] = createSplitProps()(props, ['format']);
+  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().view.attrs, localProps);
+  return web.createComponent(ColorPickerFormatPropsProvider, {
+    value: formatProps,
     get children() {
-      return web.createComponent(ark.div, web.mergeProps({
-        get ["data-format"]() {
-          return props.format;
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return api().format === props.format;
+        },
+        get children() {
+          return web.createComponent(ark.div, web.mergeProps({
+            get ["data-format"]() {
+              return props.format;
+            }
+          }, mergedProps));
         }
-      }, mergedProps));
+      });
     }
   });
 };
@@ -1266,8 +1536,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,
@@ -1278,12 +1550,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
 });
@@ -1325,7 +1599,12 @@ const ComboboxControl = props => {
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
   const mergedProps = solid.mergeProps(() => combobox().getInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [ComboboxItemProvider, useComboboxItemContext] = createContext({
@@ -1433,8 +1712,17 @@ const useCombobox = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -1451,7 +1739,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(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1572,12 +1860,17 @@ const DatePickerMonthSelect = props => {
   const mergedProps = solid.mergeProps(() => api().getMonthSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
-      return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$4();
-        web.insert(_el$, () => month.label);
-        web.effect(() => _el$.value = month.value);
-        return _el$;
-      })());
+      return web.createComponent(solidJs.For, {
+        get each() {
+          return api().getMonths();
+        },
+        children: month => (() => {
+          var _el$ = _tmpl$$4();
+          web.insert(_el$, () => month.label);
+          web.effect(() => _el$.value = month.value);
+          return _el$;
+        })()
+      });
     }
   }));
 };
@@ -1811,7 +2104,7 @@ const DatePickerTrigger = props => {
 const DatePickerView = props => {
   const [viewProps, localProps] = createSplitProps()(props, ['view']);
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy$1.datePickerAnatomy.build().view.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => anatomy.datePickerAnatomy.build().view.attrs, localProps);
   return web.createComponent(DatePickerViewProvider, {
     value: viewProps,
     get children() {
@@ -1844,15 +2137,20 @@ const DatePickerYearSelect = props => {
   const mergedProps = solid.mergeProps(() => api().getYearSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
-      return getYearsRange({
-        from: 1_000,
-        to: 4_000
-      }).map(year => (() => {
-        var _el$ = _tmpl$$3();
-        _el$.value = year;
-        web.insert(_el$, year);
-        return _el$;
-      })());
+      return web.createComponent(solidJs.For, {
+        get each() {
+          return getYearsRange({
+            from: 1_000,
+            to: 4_000
+          });
+        },
+        children: year => (() => {
+          var _el$ = _tmpl$$3();
+          _el$.value = year;
+          web.insert(_el$, year);
+          return _el$;
+        })()
+      });
     }
   }));
 };
@@ -2091,7 +2389,12 @@ const EditableEditTrigger = props => {
 const EditableInput = props => {
   const api = useEditableContext();
   const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const EditableLabel = props => {
@@ -2110,9 +2413,18 @@ const useEditable = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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
@@ -2124,7 +2436,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 = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(EditableProvider, {
@@ -2185,7 +2497,12 @@ const FileUploadDropzone = props => {
 const FileUploadHiddenInput = props => {
   const fileUpload = useFileUploadContext();
   const mergedProps = solid.mergeProps(() => fileUpload().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
@@ -2270,9 +2587,16 @@ const useFileUpload = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     ...props
   }));
@@ -2283,7 +2607,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 = solid.mergeProps(() => fileUpload().getRootProps(), localProps);
   return web.createComponent(FileUploadProvider, {
@@ -2509,12 +2833,12 @@ const MenuCheckboxItem = props => {
   });
   const context = useMenuContext();
   const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
+  const optionItemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
   return web.createComponent(MenuOptionItemPropsProvider, {
     value: optionItemProps,
     get children() {
       return web.createComponent(MenuItemProvider, {
-        value: itemState,
+        value: optionItemState,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
@@ -2635,12 +2959,12 @@ const MenuRadioItem = props => {
     })
   }));
   const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
+  const optionItemState = solidJs.createMemo(() => context().getOptionItemState(optionItemProps));
   return web.createComponent(MenuOptionItemPropsProvider, {
     value: optionItemProps,
     get children() {
       return web.createComponent(MenuItemProvider, {
-        value: itemState,
+        value: optionItemState,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
@@ -2854,7 +3178,12 @@ const NumberInputIncrementTrigger = props => {
 const NumberInputInput = props => {
   const api = useNumberInputContext();
   const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const NumberInputLabel = props => {
@@ -2867,8 +3196,17 @@ const useNumberInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -2881,7 +3219,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 = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(NumberInputProvider, {
@@ -2920,6 +3258,7 @@ var numberInput = /*#__PURE__*/Object.freeze({
   Input: NumberInputInput,
   Label: NumberInputLabel,
   Root: NumberInputRoot,
+  RootProvider: NumberInputRootProvider,
   Scrubber: NumberInputScrubber
 });
 
@@ -3025,7 +3364,12 @@ const PinInputControl = props => {
 const PinInputHiddenInput = props => {
   const pinInput = usePinInputContext();
   const mergedProps = solid.mergeProps(() => pinInput().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const PinInputInput = props => {
@@ -3045,8 +3389,17 @@ const usePinInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -3059,7 +3412,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 = solid.mergeProps(() => pinInput().getRootProps(), localProps);
   return web.createComponent(PinInputProvider, {
@@ -3589,7 +3942,12 @@ const RatingGroupControl = props => {
 const RatingGroupHiddenInput = props => {
   const ratingGroup = useRatingGroupContext();
   const mergedProps = solid.mergeProps(() => ratingGroup().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
@@ -3622,8 +3980,16 @@ const useRatingGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -3636,7 +4002,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 = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(RatingGroupProvider, {
@@ -3668,7 +4034,8 @@ var ratingGroup = /*#__PURE__*/Object.freeze({
   Item: RatingGroupItem,
   ItemContext: RatingGroupItemContext,
   Label: RatingGroupLabel,
-  Root: RatingGroupRoot
+  Root: RatingGroupRoot,
+  RootProvider: RatingGroupRootProvider
 });
 
 const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
@@ -3680,7 +4047,7 @@ const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const SegmentGroupIndicator = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), anatomy$1.segmentGroupAnatomy.build().indicator.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3697,7 +4064,7 @@ const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createC
 const SegmentGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), anatomy$1.segmentGroupAnatomy.build().item.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, localProps);
   const itemState = solidJs.createMemo(() => segmentGroup().getItemState(itemProps));
   return web.createComponent(SegmentGroupItemPropsProvider, {
     value: itemProps,
@@ -3717,7 +4084,7 @@ const SegmentGroupItemContext = props => props.children(useSegmentGroupItemConte
 const SegmentGroupItemControl = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy$1.segmentGroupAnatomy.build().itemControl.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3731,13 +4098,13 @@ const SegmentGroupItemHiddenInput = props => {
 const SegmentGroupItemText = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), anatomy$1.segmentGroupAnatomy.build().itemText.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), anatomy$1.segmentGroupAnatomy.build().label.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), anatomy.segmentGroupAnatomy.build().label.attrs, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3761,7 +4128,7 @@ const useSegmentGroup = props => {
 const SegmentGroupRoot = props => {
   const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy$1.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -3774,7 +4141,7 @@ const SegmentGroupRootProvider = props => {
   const [{
     value: segmentGroup
   }, localProps] = createSplitProps()(props, ['value']);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy$1.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -3793,7 +4160,8 @@ var segmentGroup = /*#__PURE__*/Object.freeze({
   ItemHiddenInput: SegmentGroupItemHiddenInput,
   ItemText: SegmentGroupItemText,
   Label: SegmentGroupLabel,
-  Root: SegmentGroupRoot
+  Root: SegmentGroupRoot,
+  RootProvider: SegmentGroupRootProvider
 });
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -3834,9 +4202,14 @@ var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
   _tmpl$2$1 = /*#__PURE__*/web.template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().getControlProps(), props);
+  const mergedProps = solid.mergeProps(() => select().getHiddenSelectProps(), props);
   const isValueEmpty = solidJs.createMemo(() => select().value.length === 0);
-  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+  const field = useFieldContext();
+  return web.createComponent(ark.select, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps, {
     get children() {
       return [web.createComponent(solidJs.Show, {
         get when() {
@@ -3971,8 +4344,17 @@ const useSelect = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -3989,7 +4371,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(solid.mergeProps(() => ({
     present: select().open
@@ -4038,7 +4420,7 @@ const SelectTrigger = props => {
 
 const SelectValueText = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => anatomy$1.selectAnatomy.build().valueText.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return select().valueAsString || props.placeholder;
@@ -4085,9 +4467,7 @@ const SignaturePadContext = props => props.children(useSignaturePadContext());
 const SignaturePadControl = props => {
   const signaturePad = useSignaturePadContext();
   const mergedProps = solid.mergeProps(() => signaturePad().getControlProps(), props);
-  return web.createComponent(ark.div, web.mergeProps({
-    role: "application"
-  }, mergedProps));
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const SignaturePadGuide = props => {
@@ -4102,1675 +4482,44 @@ const SignaturePadLabel = props => {
   return web.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 (domQuery.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 (domQuery.isIos()) {
-    if (state !== "disabled") return;
-    state = "restoring";
-    setTimeout(() => {
-      domQuery.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 ? domQuery.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 = solid.mergeProps(() => signaturePad().getHiddenInputProps(hiddenInputProps), localProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.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 = domQuery.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) => domQuery.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 domQuery.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": domQuery.dataAttr(disabled),
-        htmlFor: dom.getControlId(state.context)
-      });
-    },
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        "data-disabled": domQuery.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": domQuery.dataAttr(disabled),
-        onPointerDown(event) {
-          if (!isLeftClick(event)) return;
-          if (isModifierKey(event)) return;
-          if (!interactive) return;
-          const target = domQuery.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": domQuery.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 });
-            }
-          });
-        }
-      }
-    }
-  );
-}
-types.createProps()([
-  "dir",
-  "disabled",
-  "getRootNode",
-  "id",
-  "ids",
-  "onDraw",
-  "onDrawEnd",
-  "readOnly",
-  "drawing",
-  "name"
-]);
 
 const useSignaturePad = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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] = solid.useMachine(machine(context()), {
+  const [state, send] = solid.useMachine(signaturePad__namespace.machine(context()), {
     context
   });
-  return solidJs.createMemo(() => connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => signaturePad__namespace.connect(state, send, solid.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 = solid.mergeProps(() => signaturePad().getRootProps(), localProps);
   return web.createComponent(SignaturePadProvider, {
@@ -5834,6 +4583,7 @@ var signaturePad = /*#__PURE__*/Object.freeze({
   Context: SignaturePadContext,
   Control: SignaturePadControl,
   Guide: SignaturePadGuide,
+  HiddenInput: SignaturePadHiddenInput,
   Label: SignaturePadLabel,
   Root: SignaturePadRoot,
   RootProvider: SignaturePadRootProvider,
@@ -6064,7 +4814,12 @@ const SwitchControl = props => {
 const SwitchHiddenInput = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const SwitchLabel = props => {
@@ -6077,8 +4832,17 @@ const useSwitch = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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,
@@ -6269,7 +5033,12 @@ const TagsInputControl = props => {
 const TagsInputHiddenInput = props => {
   const tagsInput = useTagsInputContext();
   const mergedProps = solid.mergeProps(() => tagsInput().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const TagsInputInput = props => {
@@ -6346,9 +5115,18 @@ const useTagsInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.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
@@ -6360,7 +5138,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 = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(TagsInputProvider, {
@@ -6566,7 +5344,8 @@ var toggleGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: ToggleGroupContext,
   Item: ToggleGroupItem,
-  Root: ToggleGroupRoot
+  Root: ToggleGroupRoot,
+  RootProvider: ToggleGroupRootProvider
 });
 
 const [TooltipProvider, useTooltipContext] = createContext({
@@ -6636,7 +5415,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(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -6949,8 +5728,10 @@ exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
 exports.ColorPickerAreaThumb = ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = ColorPickerChannelInput;
 exports.ColorPickerChannelSlider = ColorPickerChannelSlider;
+exports.ColorPickerChannelSliderLabel = ColorPickerChannelSliderLabel;
 exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;
+exports.ColorPickerChannelSliderValueText = ColorPickerChannelSliderValueText;
 exports.ColorPickerContent = ColorPickerContent;
 exports.ColorPickerContext = ColorPickerContext;
 exports.ColorPickerControl = ColorPickerControl;
@@ -6968,6 +5749,7 @@ exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;
 exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = ColorPickerTrigger;
+exports.ColorPickerValueSwatch = ColorPickerValueSwatch;
 exports.ColorPickerValueText = ColorPickerValueText;
 exports.ColorPickerView = ColorPickerView;
 exports.Combobox = combobox;
@@ -7039,6 +5821,16 @@ exports.EditableRoot = EditableRoot;
 exports.EditableRootProvider = EditableRootProvider;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
 exports.EnvironmentProvider = EnvironmentProvider;
+exports.Field = field;
+exports.FieldContext = FieldContext;
+exports.FieldErrorText = FieldErrorText;
+exports.FieldHelperText = FieldHelperText;
+exports.FieldInput = FieldInput;
+exports.FieldLabel = FieldLabel;
+exports.FieldRoot = FieldRoot;
+exports.FieldRootProvider = FieldRootProvider;
+exports.FieldSelect = FieldSelect;
+exports.FieldTextarea = FieldTextarea;
 exports.FileUpload = fileUpload;
 exports.FileUploadContext = FileUploadContext;
 exports.FileUploadDropzone = FileUploadDropzone;
@@ -7206,6 +5998,7 @@ exports.SignaturePadClearTrigger = SignaturePadClearTrigger;
 exports.SignaturePadContext = SignaturePadContext;
 exports.SignaturePadControl = SignaturePadControl;
 exports.SignaturePadGuide = SignaturePadGuide;
+exports.SignaturePadHiddenInput = SignaturePadHiddenInput;
 exports.SignaturePadLabel = SignaturePadLabel;
 exports.SignaturePadRoot = SignaturePadRoot;
 exports.SignaturePadRootProvider = SignaturePadRootProvider;
@@ -7328,6 +6121,7 @@ exports.useDialogContext = useDialogContext;
 exports.useEditable = useEditable;
 exports.useEditableContext = useEditableContext;
 exports.useEnvironmentContext = useEnvironmentContext;
+exports.useFieldContext = useFieldContext;
 exports.useFileUpload = useFileUpload;
 exports.useFileUploadContext = useFileUploadContext;
 exports.useHoverCard = useHoverCard;