@ark-ui/solid 4.10.1 → 5.0.0

package/dist/chunk/{WQQVH7YG.jsx → VLUE7XIS.jsx}

@@ -1,20 +1,23 @@
 import {
   ark
 } from "./UFYZ7HLU.jsx";
+import {
+  useEnvironmentContext
+} from "./BPYAMTER.jsx";
+import {
+  useLocaleContext
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
 
 // src/components/toast/create-toaster.tsx
-import { normalizeProps } from "@zag-js/solid";
 import * as toast from "@zag-js/toast";
 var createToaster = (props) => {
-  const machine = toast.group.machine({ id: "1", ...props });
-  const api = toast.group.connect(machine, machine.send, normalizeProps);
-  return { ...api, machine };
+  return toast.createStore(props);
 };
 
 // src/components/toast/toast-action-trigger.tsx
@@ -76,27 +79,39 @@ var ToastTitle = (props) => {
 import { anatomy } from "@zag-js/toast";
 
 // src/components/toast/toaster.tsx
-import { mergeProps as mergeProps6, normalizeProps as normalizeProps2, useActor, useMachine } from "@zag-js/solid";
+import { Key, mergeProps as mergeProps6, normalizeProps, useMachine } from "@zag-js/solid";
 import * as toast2 from "@zag-js/toast";
-import { For, createMemo, splitProps } from "solid-js";
+import { createMemo, createUniqueId, splitProps } from "solid-js";
 var Toaster = (props) => {
   const [toasterProps, localProps] = splitProps(props, ["toaster", "children"]);
-  const [state, send] = useMachine(toasterProps.toaster.machine);
-  const placement = state.context.placement;
-  const api = createMemo(() => toast2.group.connect(state, send, normalizeProps2));
-  const toasts = createMemo(() => api().getToastsByPlacement(placement));
-  const mergedProps = mergeProps6(api().getGroupProps({ placement }), localProps);
+  const locale = useLocaleContext();
+  const env = useEnvironmentContext();
+  const service = useMachine(toast2.group.machine, () => ({
+    store: toasterProps.toaster,
+    id: createUniqueId(),
+    dir: locale()?.dir,
+    getRootNode: () => env()?.getDocument()
+  }));
+  const api = createMemo(() => toast2.group.connect(service, normalizeProps));
+  const toasts = createMemo(() => api().getToasts());
+  const mergedProps = mergeProps6(api().getGroupProps(), localProps);
   return <ark.div {...mergedProps}>
-      <For each={toasts()}>
-        {(toast3) => <ToastActor value={toast3}>{(ctx) => toasterProps.children(ctx)}</ToastActor>}
-      </For>
+      <Key each={toasts()} by="id">
+        {(toast3, index) => <ToastActor value={toast3} index={index} parent={service}>
+            {(ctx) => toasterProps.children(ctx)}
+          </ToastActor>}
+      </Key>
     </ark.div>;
 };
 var ToastActor = (props) => {
-  const [state, send] = useActor(props.value);
-  const api = createMemo(() => toast2.connect(state, send, normalizeProps2));
-  const ctx = createMemo(() => state.context);
-  return <ToastProvider value={api}>{props.children(ctx)}</ToastProvider>;
+  const localProps = createMemo(() => ({
+    ...props.value(),
+    parent: props.parent,
+    index: props.index
+  }));
+  const service = useMachine(toast2.machine, localProps);
+  const api = createMemo(() => toast2.connect(service, normalizeProps));
+  return <ToastProvider value={api}>{props.children(props.value)}</ToastProvider>;
 };
 
 // src/components/toast/toast.ts

package/dist/chunk/{TC2QHQ47.jsx → WPEIDU6T.jsx}

@@ -6,24 +6,22 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./BPYAMTER.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
 
 // src/components/segment-group/use-segment-group-context.ts
-var [SegmentGroupProvider, useSegmentGroupContext] = createContext(
-  {
-    hookName: "useSegmentGroupContext",
-    providerName: "<SegmentGroupProvider />"
-  }
-);
+var [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  hookName: "useSegmentGroupContext",
+  providerName: "<SegmentGroupProvider />"
+});
 
 // src/components/segment-group/segment-group-context.tsx
 var SegmentGroupContext = (props) => props.children(useSegmentGroupContext());
@@ -39,11 +37,7 @@ var parts = segmentGroupAnatomy.build();
 // src/components/segment-group/segment-group-indicator.tsx
 var SegmentGroupIndicator = (props) => {
   const segmentGroup2 = useSegmentGroupContext();
-  const mergedProps = mergeProps(
-    () => segmentGroup2().getIndicatorProps(),
-    parts.indicator.attrs,
-    props
-  );
+  const mergedProps = mergeProps(() => segmentGroup2().getIndicatorProps(), parts.indicator.attrs, props);
   return <ark.div {...mergedProps} />;
 };
 
@@ -65,17 +59,9 @@ var [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createCon
 
 // src/components/segment-group/segment-group-item.tsx
 var SegmentGroupItem = (props) => {
-  const [itemProps, localProps] = createSplitProps()(props, [
-    "value",
-    "disabled",
-    "invalid"
-  ]);
+  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled", "invalid"]);
   const segmentGroup2 = useSegmentGroupContext();
-  const mergedProps = mergeProps2(
-    () => segmentGroup2().getItemProps(itemProps),
-    parts.item.attrs,
-    localProps
-  );
+  const mergedProps = mergeProps2(() => segmentGroup2().getItemProps(itemProps), parts.item.attrs, localProps);
   const itemState = createMemo(() => segmentGroup2().getItemState(itemProps));
   return <SegmentGroupItemPropsProvider value={itemProps}>
       <SegmentGroupItemProvider value={itemState}>
@@ -92,11 +78,7 @@ import { mergeProps as mergeProps3 } from "@zag-js/solid";
 var SegmentGroupItemControl = (props) => {
   const segmentGroup2 = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = mergeProps3(
-    () => segmentGroup2().getItemControlProps(itemProps),
-    parts.itemControl.attrs,
-    props
-  );
+  const mergedProps = mergeProps3(() => segmentGroup2().getItemControlProps(itemProps), parts.itemControl.attrs, props);
   return <ark.div {...mergedProps} />;
 };
 
@@ -114,11 +96,7 @@ import { mergeProps as mergeProps5 } from "@zag-js/solid";
 var SegmentGroupItemText = (props) => {
   const segmentGroup2 = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = mergeProps5(
-    () => segmentGroup2().getItemTextProps(itemProps),
-    parts.itemText.attrs,
-    props
-  );
+  const mergedProps = mergeProps5(() => segmentGroup2().getItemTextProps(itemProps), parts.itemText.attrs, props);
   return <ark.span {...mergedProps} />;
 };
 
@@ -138,18 +116,17 @@ import * as segmentGroup from "@zag-js/radio-group";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo as createMemo2, createUniqueId } from "solid-js";
 var useSegmentGroup = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
-  const context = createMemo2(() => ({
+  const machineProps = createMemo2(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
     ...props
   }));
-  const [state, send] = useMachine(segmentGroup.machine(context()), { context });
-  return createMemo2(() => segmentGroup.connect(state, send, normalizeProps));
+  const service = useMachine(segmentGroup.machine, machineProps);
+  return createMemo2(() => segmentGroup.connect(service, normalizeProps));
 };
 
 // src/components/segment-group/segment-group-root.tsx
@@ -176,9 +153,7 @@ var SegmentGroupRoot = (props) => {
 // src/components/segment-group/segment-group-root-provider.tsx
 import { mergeProps as mergeProps8 } from "@zag-js/solid";
 var SegmentGroupRootProvider = (props) => {
-  const [{ value: segmentGroup2 }, localProps] = createSplitProps()(props, [
-    "value"
-  ]);
+  const [{ value: segmentGroup2 }, localProps] = createSplitProps()(props, ["value"]);
   const mergedProps = mergeProps8(() => segmentGroup2().getRootProps(), parts.root.attrs, localProps);
   return <SegmentGroupProvider value={segmentGroup2}>
       <ark.div {...mergedProps} />

package/dist/chunk/{LCESUDZB.js → WRLQ7Y6E.js}

@@ -1,27 +1,19 @@
-import { splitRenderStrategyProps } from './L7OSYHVR.js';
+import { splitRenderStrategyProps } from './QFAL6GWC.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { createContext } from './I5UG2QUO.js';
+import { createContext } from './TROPIN4C.js';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { useMachine, normalizeProps, mergeProps } from '@zag-js/solid';
 import { createSignal, createMemo, createEffect, Show } from 'solid-js';
 import * as presence from '@zag-js/presence';
 
 // src/components/presence/split-presence-props.ts
-var splitPresenceProps = (props) => createSplitProps()(props, [
-  "immediate",
-  "lazyMount",
-  "onExitComplete",
-  "present",
-  "unmountOnExit"
-]);
+var splitPresenceProps = (props) => createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
 var usePresence = (props) => {
   const [renderStrategyProps, context] = splitRenderStrategyProps(props);
   const [wasEverPresent, setWasEverPresent] = createSignal(false);
-  const [state, send] = useMachine(presence.machine(context), {
-    context
-  });
-  const api = createMemo(() => presence.connect(state, send, normalizeProps));
+  const service = useMachine(presence.machine, props);
+  const api = createMemo(() => presence.connect(service, normalizeProps));
   createEffect(() => {
     const present = api().present;
     if (present) setWasEverPresent(true);

package/dist/chunk/{7KPVYYFT.js → WT3OTYHP.js}

@@ -1,16 +1,15 @@
-import { useControllableState } from './BSPFGETO.js';
-import { useFieldContext } from './632HFNZF.js';
+import { useFieldContext } from './KMFRZGLF.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './QODB3C3M.js';
-import { useLocaleContext } from './HPDOBQ3V.js';
-import { createContext } from './I5UG2QUO.js';
+import { useEnvironmentContext, runIfFn } from './6MQ6S5JP.js';
+import { useLocaleContext } from './QEMQBM6W.js';
+import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import * as checkbox from '@zag-js/checkbox';
 import { anatomy } from '@zag-js/checkbox';
-import { createMemo, createUniqueId } from 'solid-js';
+import { createMemo, createUniqueId, createSignal, untrack } from 'solid-js';
 
 // src/components/checkbox/use-checkbox-context.ts
 var [CheckboxProvider, useCheckboxContext] = createContext({
@@ -26,6 +25,24 @@ var CheckboxControl = (props) => {
   return createComponent(ark.div, mergedProps);
 };
 var checkboxAnatomy = anatomy.extendWith("group");
+function useControllableState(props) {
+  const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn(props.defaultValue));
+  const controlled = createMemo(() => props.value?.() !== void 0);
+  const currentValue = createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
+  const setValue = (next) => {
+    untrack(() => {
+      const nextValue = runIfFn(next, currentValue());
+      if (controlled()) {
+        return props.onChange?.(nextValue);
+      }
+      setUncontrolledValue(nextValue);
+      return props.onChange?.(nextValue);
+    });
+  };
+  return [currentValue, setValue];
+}
+
+// src/components/checkbox/use-checkbox-group.ts
 function useCheckboxGroup(props = {}) {
   const interactive = createMemo(() => !(props.disabled || props.readOnly));
   const [value, setValue] = useControllableState({
@@ -128,11 +145,11 @@ var useCheckbox = (ownProps = {}) => {
   const props = createMemo(() => {
     return mergeProps(ownProps, checkboxGroup?.().getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -144,11 +161,10 @@ var useCheckbox = (ownProps = {}) => {
     required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    checked: props().defaultChecked,
     ...props()
   }));
-  const [state, send] = useMachine(checkbox.machine(context()), { context });
-  return createMemo(() => checkbox.connect(state, send, normalizeProps));
+  const service = useMachine(checkbox.machine, machineProps);
+  return createMemo(() => checkbox.connect(service, normalizeProps));
 };
 
 // src/components/checkbox/checkbox-root.tsx

package/dist/chunk/{IOTZAUDA.jsx → WUTUKX4C.jsx}

@@ -1,6 +1,6 @@
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";

package/dist/chunk/{34JAVC2R.jsx → WZ7FNJXM.jsx}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./MSHQY44G.jsx";
+} from "./XHA6B6L2.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,13 +9,13 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./BPYAMTER.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -82,11 +82,7 @@ var [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
 
 // src/components/tags-input/tags-input-item.tsx
 var TagsInputItem = (props) => {
-  const [itemProps, localProps] = createSplitProps()(props, [
-    "disabled",
-    "index",
-    "value"
-  ]);
+  const [itemProps, localProps] = createSplitProps()(props, ["disabled", "index", "value"]);
   const api = useTagsInputContext();
   const mergedProps = mergeProps5(() => api().getItemProps(itemProps), localProps);
   const itemState = createMemo(() => api().getItemState(itemProps));
@@ -152,11 +148,11 @@ import { normalizeProps, useMachine } from "@zag-js/solid";
 import * as tagsInput from "@zag-js/tags-input";
 import { createMemo as createMemo2, createUniqueId } from "solid-js";
 var useTagsInput = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo2(() => ({
+  const machineProps = createMemo2(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -168,11 +164,10 @@ var useTagsInput = (props = {}) => {
     readOnly: field?.().readOnly,
     required: field?.().required,
     getRootNode: environment().getRootNode,
-    value: props.defaultValue,
     ...props
   }));
-  const [state, send] = useMachine(tagsInput.machine(context()), { context });
-  return createMemo2(() => tagsInput.connect(state, send, normalizeProps));
+  const service = useMachine(tagsInput.machine, machineProps);
+  return createMemo2(() => tagsInput.connect(service, normalizeProps));
 };
 
 // src/components/tags-input/tags-input-root.tsx
@@ -182,8 +177,9 @@ var TagsInputRoot = (props) => {
     "allowOverflow",
     "autoFocus",
     "blurBehavior",
-    "delimiter",
+    "defaultInputValue",
     "defaultValue",
+    "delimiter",
     "disabled",
     "editable",
     "form",

package/dist/chunk/X34KVQNW.js

@@ -1,5 +1,5 @@
 import { createSplitProps } from './ZMHI4GDJ.js';
-import { createComponent, spread, insert, template } from 'solid-js/web';
+import { createComponent, template, spread, insert } from 'solid-js/web';
 import { createMemo, For, Show } from 'solid-js';
 import { highlightWord } from '@zag-js/highlight-word';
 

package/dist/chunk/{MSHQY44G.jsx → XHA6B6L2.jsx}

@@ -1,6 +1,9 @@
 import {
   useFieldsetContext
-} from "./RZBYC7DR.jsx";
+} from "./SBLZHOW2.jsx";
+import {
+  composeRefs
+} from "./DOBZPYAN.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,7 +12,7 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -75,14 +78,7 @@ import { mergeProps as mergeProps7 } from "@zag-js/solid";
 
 // src/components/field/use-field.ts
 import { ariaAttr, dataAttr, getWindow } from "@zag-js/dom-query";
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  createUniqueId,
-  mergeProps as mergeProps6,
-  onCleanup
-} from "solid-js";
+import { createMemo, createSignal, createUniqueId, mergeProps as mergeProps6, onCleanup, onMount } from "solid-js";
 
 // src/components/field/field.anatomy.ts
 import { createAnatomy } from "@zag-js/anatomy";
@@ -108,13 +104,13 @@ var useField = (props) => {
   const [hasErrorText, setHasErrorText] = createSignal(false);
   const [hasHelperText, setHasHelperText] = createSignal(false);
   const id = fieldProps.id ?? createUniqueId();
-  let rootRef;
+  const [rootRef, setRootRef] = createSignal(void 0);
   const rootId = fieldProps.ids?.control ?? `field::${id}`;
   const errorTextId = fieldProps.ids?.errorText ?? `field::${id}::error-text`;
   const helperTextId = fieldProps.ids?.helperText ?? `field::${id}::helper-text`;
   const labelId = fieldProps.ids?.label ?? `field::${id}::label`;
-  createEffect(() => {
-    const rootNode = rootRef;
+  onMount(() => {
+    const rootNode = rootRef();
     if (!rootNode) return;
     const win = getWindow(rootNode);
     const doc = win.document;
@@ -143,11 +139,14 @@ var useField = (props) => {
     "data-readonly": dataAttr(fieldProps.readOnly),
     htmlFor: id
   });
-  const labelIds = [];
-  if (hasErrorText() && fieldProps.invalid) labelIds.push(errorTextId);
-  if (hasHelperText()) labelIds.push(helperTextId);
+  const labelIds = createMemo(() => {
+    const ids = [];
+    if (hasErrorText() && fieldProps.invalid) ids.push(errorTextId);
+    if (hasHelperText()) ids.push(helperTextId);
+    return ids;
+  });
   const getControlProps = () => ({
-    "aria-describedby": labelIds.join(" ") || void 0,
+    "aria-describedby": labelIds().join(" ") || void 0,
     "aria-invalid": ariaAttr(fieldProps.invalid),
     "data-invalid": dataAttr(fieldProps.invalid),
     "data-required": dataAttr(fieldProps.required),
@@ -171,7 +170,8 @@ var useField = (props) => {
   });
   const getHelperTextProps = () => ({
     id: helperTextId,
-    ...parts.helperText.attrs
+    ...parts.helperText.attrs,
+    "data-disabled": dataAttr(fieldProps.disabled)
   });
   const getErrorTextProps = () => ({
     id: errorTextId,
@@ -183,7 +183,7 @@ var useField = (props) => {
     ...parts.requiredIndicator.attrs
   });
   return createMemo(() => ({
-    ariaDescribedby: labelIds.join(" "),
+    ariaDescribedby: labelIds().join(" "),
     ids: {
       control: id,
       label: labelId,
@@ -191,7 +191,7 @@ var useField = (props) => {
       helperText: helperTextId
     },
     refs: {
-      rootRef
+      rootRef: setRootRef
     },
     disabled: fieldProps.disabled,
     invalid: fieldProps.invalid,
@@ -221,7 +221,7 @@ var FieldRoot = (props) => {
   const field = useField(useFieldProps);
   const mergedProps = mergeProps7(() => field().getRootProps(), localProps);
   return <FieldProvider value={field}>
-      <ark.div {...mergedProps} />
+      <ark.div {...mergedProps} ref={composeRefs(field().refs.rootRef, props.ref)} />
     </FieldProvider>;
 };
 
@@ -246,7 +246,7 @@ var FieldSelect = (props) => {
 // src/components/field/field-textarea.tsx
 import { autoresizeTextarea } from "@zag-js/auto-resize";
 import { mergeProps as mergeProps10 } from "@zag-js/solid";
-import { createEffect as createEffect2 } from "solid-js";
+import { createEffect } from "solid-js";
 var FieldTextarea = (props) => {
   const field = useFieldContext();
   let textareaRef;
@@ -256,7 +256,7 @@ var FieldTextarea = (props) => {
     () => ({ style: { resize: autoresize ? "none" : void 0 } }),
     textareaProps
   );
-  createEffect2(() => {
+  createEffect(() => {
     if (!autoresize) return;
     const cleanup = autoresizeTextarea(textareaRef);
     return cleanup;

package/dist/chunk/{CQN5S4C3.jsx → XNZ7GOP4.jsx}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./MSHQY44G.jsx";
+} from "./XHA6B6L2.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,13 +9,13 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./5O4RWSWO.jsx";
+} from "./BPYAMTER.jsx";
 import {
   useLocaleContext
-} from "./3QQZKR3F.jsx";
+} from "./RCXMZN3G.jsx";
 import {
   createContext
-} from "./NMGUCD2L.jsx";
+} from "./TVCIHLER.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";
@@ -24,12 +24,10 @@ import {
 import { mergeProps } from "@zag-js/solid";
 
 // src/components/signature-pad/use-signature-pad-context.ts
-var [SignaturePadProvider, useSignaturePadContext] = createContext(
-  {
-    hookName: "useSignaturePadContext",
-    providerName: "<SignaturePadProvider />"
-  }
-);
+var [SignaturePadProvider, useSignaturePadContext] = createContext({
+  hookName: "useSignaturePadContext",
+  providerName: "<SignaturePadProvider />"
+});
 
 // src/components/signature-pad/signature-pad-clear-trigger.tsx
 var SignaturePadClearTrigger = (props) => {
@@ -62,10 +60,7 @@ import { mergeProps as mergeProps4 } from "@zag-js/solid";
 var SignaturePadHiddenInput = (props) => {
   const [hiddenInputProps, localProps] = createSplitProps()(props, ["value"]);
   const signaturePad2 = useSignaturePadContext();
-  const mergedProps = mergeProps4(
-    () => signaturePad2().getHiddenInputProps(hiddenInputProps),
-    localProps
-  );
+  const mergedProps = mergeProps4(() => signaturePad2().getHiddenInputProps(hiddenInputProps), localProps);
   const field = useFieldContext();
   return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
 };
@@ -86,11 +81,11 @@ import * as signaturePad from "@zag-js/signature-pad";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { createMemo, createUniqueId } from "solid-js";
 var useSignaturePad = (props = {}) => {
+  const id = createUniqueId();
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
-  const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo(() => ({
+  const machineProps = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -103,8 +98,8 @@ var useSignaturePad = (props = {}) => {
     getRootNode: environment().getRootNode,
     ...props
   }));
-  const [state, send] = useMachine(signaturePad.machine(context()), { context });
-  return createMemo(() => signaturePad.connect(state, send, normalizeProps));
+  const service = useMachine(signaturePad.machine, machineProps);
+  return createMemo(() => signaturePad.connect(service, normalizeProps));
 };
 
 // src/components/signature-pad/signature-pad-root.tsx
@@ -132,9 +127,7 @@ var SignaturePadRoot = (props) => {
 // src/components/signature-pad/signature-pad-root-provider.tsx
 import { mergeProps as mergeProps7 } from "@zag-js/solid";
 var SignaturePadRootProvider = (props) => {
-  const [{ value: signaturePad2 }, localProps] = createSplitProps()(props, [
-    "value"
-  ]);
+  const [{ value: signaturePad2 }, localProps] = createSplitProps()(props, ["value"]);
   const mergedProps = mergeProps7(() => signaturePad2().getRootProps(), localProps);
   return <SignaturePadProvider value={signaturePad2}>
       <ark.div {...mergedProps} />
@@ -149,9 +142,7 @@ var SignaturePadSegment = (props) => {
   const mergedProps = mergeProps8(() => signaturePad2().getSegmentProps(), props);
   return <ark.svg {...mergedProps}>
       <title>Signature</title>
-      <For each={signaturePad2().paths}>
-        {(path) => <path {...signaturePad2().getSegmentPathProps({ path })} />}
-      </For>
+      <For each={signaturePad2().paths}>{(path) => <path {...signaturePad2().getSegmentPathProps({ path })} />}</For>
       <Show when={signaturePad2().currentPath}>
         {
     /* @ts-expect-error */

package/dist/chunk/{MYMGOYXH.js → XR4WJDUT.js}

@@ -1,6 +1,6 @@
-import { useLocaleContext } from './HPDOBQ3V.js';
+import { useLocaleContext } from './QEMQBM6W.js';
 import { __export } from './ESLJRKWD.js';
-import { formatBytes, formatNumber } from '@zag-js/i18n-utils';
+import { formatNumber, formatBytes } from '@zag-js/i18n-utils';
 import { splitProps, createMemo } from 'solid-js';
 
 var FormatByte = (props) => {