@pyck/react 0.0.5 → 0.0.7

package/dist/components/input-group/index.js

@@ -1,7 +1,9 @@
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { inputGroup } from "@pyck/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Show } from "@pyck/react/show";
 
 //#region src/components/input-group/input-group.tsx
@@ -9,20 +11,83 @@ const { withProvider, withContext } = createStyleContext(inputGroup);
 const Root = withProvider(ark.div, "root");
 const Element = withContext(ark.div, "element");
 const InputGroup = forwardRef(function InputGroup(props, ref) {
-	const { startElement, endElement, children, ...rest } = props;
-	return <Root ref={ref} {...rest}>
-        <Show when={startElement}>
-          <Element insetInlineStart="0" top="0">
-            {startElement}
-          </Element>
-        </Show>
-        {children}
-        <Show when={endElement}>
-          <Element insetInlineEnd="0" top="0">
-            {endElement}
-          </Element>
-        </Show>
-      </Root>;
+	const $ = c(21);
+	let children;
+	let endElement;
+	let rest;
+	let startElement;
+	if ($[0] !== props) {
+		({startElement, endElement, children, ...rest} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = endElement;
+		$[3] = rest;
+		$[4] = startElement;
+	} else {
+		children = $[1];
+		endElement = $[2];
+		rest = $[3];
+		startElement = $[4];
+	}
+	let t0;
+	if ($[5] !== startElement) {
+		t0 = /* @__PURE__ */ jsx(Element, {
+			insetInlineStart: "0",
+			top: "0",
+			children: startElement
+		});
+		$[5] = startElement;
+		$[6] = t0;
+	} else t0 = $[6];
+	let t1;
+	if ($[7] !== startElement || $[8] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Show, {
+			when: startElement,
+			children: t0
+		});
+		$[7] = startElement;
+		$[8] = t0;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== endElement) {
+		t2 = /* @__PURE__ */ jsx(Element, {
+			insetInlineEnd: "0",
+			top: "0",
+			children: endElement
+		});
+		$[10] = endElement;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== endElement || $[13] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Show, {
+			when: endElement,
+			children: t2
+		});
+		$[12] = endElement;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== children || $[16] !== ref || $[17] !== rest || $[18] !== t1 || $[19] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			ref,
+			...rest,
+			children: [
+				t1,
+				children,
+				t3
+			]
+		});
+		$[15] = children;
+		$[16] = ref;
+		$[17] = rest;
+		$[18] = t1;
+		$[19] = t3;
+		$[20] = t4;
+	} else t4 = $[20];
+	return t4;
 });
 
 //#endregion

package/dist/components/json-form-builder/index.d.ts

@@ -1,8 +1,8 @@
 import { ZodTypeAny, z } from "zod";
 import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { FieldValues, UseFormReturn } from "react-hook-form";
 import { CollectionItem } from "@ark-ui/react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/json-form-builder/types.d.ts
 interface LayoutNode {

package/dist/components/json-form-builder/index.js

@@ -1,11 +1,13 @@
 import { P, match } from "ts-pattern";
 import { z } from "zod";
+import { c } from "react/compiler-runtime";
 import { Fragment } from "react";
 import { Box, HStack, Stack } from "@pyck/styled-system/jsx";
-import { capitalize } from "@pyck/react/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxField } from "@pyck/react/checkbox";
 import { Field } from "@pyck/react/field";
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form";
+import { capitalize } from "@pyck/react/utils";
 import { Portal } from "@ark-ui/react/portal";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form } from "@pyck/react/form";
@@ -18,68 +20,184 @@ import { SelectField } from "@pyck/react/select";
 import { TagsInput } from "@pyck/react/tags-input";
 
 //#region src/components/json-form-builder/components/combobox-from-items.tsx
-const ComboboxFromItems = ({ name, label, helperText, items, required }) => {
-	const { contains } = useFilter({ sensitivity: "base" });
-	const { collection, filter } = useListCollection$1({
-		initialItems: items,
-		filter: contains
-	});
+const ComboboxFromItems = (t0) => {
+	const $ = c(14);
+	const { name, label, helperText, items, required } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { sensitivity: "base" };
+		$[0] = t1;
+	} else t1 = $[0];
+	const { contains } = useFilter(t1);
+	let t2;
+	if ($[1] !== contains || $[2] !== items) {
+		t2 = {
+			initialItems: items,
+			filter: contains
+		};
+		$[1] = contains;
+		$[2] = items;
+		$[3] = t2;
+	} else t2 = $[3];
+	const { collection, filter } = useListCollection$1(t2);
 	const { control } = useFormContext();
-	return <Controller name={name} control={control} render={({ field, fieldState }) => <Field label={label} helperText={helperText} invalid={!!fieldState.error} errorText={fieldState.error?.message} required={required}>
-          <Combobox.Root name={field.name} multiple collection={collection} onInputValueChange={(e) => filter(e.inputValue)} value={field.value ?? []} onValueChange={(e) => field.onChange(e.value)} disabled={field.disabled} invalid={!!fieldState.error}>
-            <Combobox.Control>
-              <Combobox.Input placeholder="Search..." onBlur={field.onBlur} />
-              <Combobox.IndicatorGroup>
-                <Combobox.ClearTrigger />
-                <Combobox.Trigger />
-              </Combobox.IndicatorGroup>
-            </Combobox.Control>
-
-            <Portal>
-              <Combobox.Positioner>
-                <Combobox.Content>
-                  {	/** todo: translation needed? */}
-                  <Combobox.Empty>No results found</Combobox.Empty>
-                  {collection.items.map((item) => <Combobox.Item key={item.value} item={item}>
-                      <Combobox.ItemText>{item.label}</Combobox.ItemText>
-                      <Combobox.ItemIndicator />
-                    </Combobox.Item>)}
-                </Combobox.Content>
-              </Combobox.Positioner>
-            </Portal>
-          </Combobox.Root>
-        </Field>} />;
- };
+	let t3;
+	if ($[4] !== collection || $[5] !== filter || $[6] !== helperText || $[7] !== label || $[8] !== required) {
+		t3 = (t4) => {
+			const { field, fieldState } = t4;
+			return /* @__PURE__ */ jsx(Field, {
+				label,
+				helperText,
+				invalid: !!fieldState.error,
+				errorText: fieldState.error?.message,
+				required,
+				children: /* @__PURE__ */ jsxs(Combobox.Root, {
+					name: field.name,
+					multiple: true,
+					collection,
+					onInputValueChange: (e) => filter(e.inputValue),
+					value: field.value ?? [],
+					onValueChange: (e_0) => field.onChange(e_0.value),
+					disabled: field.disabled,
+					invalid: !!fieldState.error,
+					children: [/* @__PURE__ */ jsxs(Combobox.Control, { children: [/* @__PURE__ */ jsx(Combobox.Input, {
+						placeholder: "Search...",
+						onBlur: field.onBlur
+					}), /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [/* @__PURE__ */ jsx(Combobox.ClearTrigger, {}), /* @__PURE__ */ jsx(Combobox.Trigger, {})] })] }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: "No results found" }), collection.items.map(_temp$2)] }) }) })]
+				})
+			});
+		};
+		$[4] = collection;
+		$[5] = filter;
+		$[6] = helperText;
+		$[7] = label;
+		$[8] = required;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== control || $[11] !== name || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control,
+			render: t3
+		});
+		$[10] = control;
+		$[11] = name;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+};
+function _temp$2(item) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		item,
+		children: [/* @__PURE__ */ jsx(Combobox.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {})]
+	}, item.value);
+}
 
 //#endregion
 //#region src/components/json-form-builder/components/select-field-from-items.tsx
-const SelectFieldFromItems = ({ name, label, helperText, placeholder, items, required }) => {
-	const { collection } = useListCollection({ initialItems: items });
+const SelectFieldFromItems = (t0) => {
+	const $ = c(12);
+	const { name, label, helperText, placeholder, items, required } = t0;
+	let t1;
+	if ($[0] !== items) {
+		t1 = { initialItems: items };
+		$[0] = items;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { collection } = useListCollection(t1);
 	if (items.length === 0) return null;
-	return <SelectField.Root name={name} label={label} helperText={helperText} placeholder={placeholder ?? `Select ${label}`} collection={collection} multiple={false} required={required}>
-      {items.map((item) => <SelectField.Item key={item.value} item={item}>
-          {item.label}
-          <SelectField.ItemIndicator />
-        </SelectField.Item>)}
-    </SelectField.Root>;
+	const t2 = placeholder ?? `Select ${label}`;
+	let t3;
+	if ($[2] !== items) {
+		t3 = items.map(_temp$1);
+		$[2] = items;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== collection || $[5] !== helperText || $[6] !== label || $[7] !== name || $[8] !== required || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(SelectField.Root, {
+			name,
+			label,
+			helperText,
+			placeholder: t2,
+			collection,
+			multiple: false,
+			required,
+			children: t3
+		});
+		$[4] = collection;
+		$[5] = helperText;
+		$[6] = label;
+		$[7] = name;
+		$[8] = required;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
+function _temp$1(item) {
+	return /* @__PURE__ */ jsxs(SelectField.Item, {
+		item,
+		children: [item.label, /* @__PURE__ */ jsx(SelectField.ItemIndicator, {})]
+	}, item.value);
+}
 
 //#endregion
 //#region src/components/json-form-builder/components/tags-input-field.tsx
-const TagsInputField = ({ name, label, helperText, placeholder, required, disabled }) => {
+const TagsInputField = (t0) => {
+	const $ = c(10);
+	const { name, label, helperText, placeholder, required, disabled } = t0;
 	const { control } = useFormContext();
-	return <Controller name={name} control={control} render={({ field, fieldState }) => <Field label={label} helperText={helperText} invalid={!!fieldState.error} errorText={fieldState.error?.message} required={required} disabled={field.disabled || disabled}>
-          <TagsInput.Root name={field.name} value={field.value ?? []} onValueChange={(e) => {
-		field.onChange(e.value);
-		field.onBlur();
-	}} disabled={field.disabled || disabled} invalid={!!fieldState.error}>
-            <TagsInput.Control>
-              <TagsInput.Items />
-              <TagsInput.Input placeholder={placeholder ?? "Add tag..."} onBlur={field.onBlur} />
-            </TagsInput.Control>
-            <TagsInput.HiddenInput />
-          </TagsInput.Root>
-        </Field>} />;
+	let t1;
+	if ($[0] !== disabled || $[1] !== helperText || $[2] !== label || $[3] !== placeholder || $[4] !== required) {
+		t1 = (t2) => {
+			const { field, fieldState } = t2;
+			return /* @__PURE__ */ jsx(Field, {
+				label,
+				helperText,
+				invalid: !!fieldState.error,
+				errorText: fieldState.error?.message,
+				required,
+				disabled: field.disabled || disabled,
+				children: /* @__PURE__ */ jsxs(TagsInput.Root, {
+					name: field.name,
+					value: field.value ?? [],
+					onValueChange: (e) => {
+						field.onChange(e.value);
+						field.onBlur();
+					},
+					disabled: field.disabled || disabled,
+					invalid: !!fieldState.error,
+					children: [/* @__PURE__ */ jsxs(TagsInput.Control, { children: [/* @__PURE__ */ jsx(TagsInput.Items, {}), /* @__PURE__ */ jsx(TagsInput.Input, {
+						placeholder: placeholder ?? "Add tag...",
+						onBlur: field.onBlur
+					})] }), /* @__PURE__ */ jsx(TagsInput.HiddenInput, {})]
+				})
+			});
+		};
+		$[0] = disabled;
+		$[1] = helperText;
+		$[2] = label;
+		$[3] = placeholder;
+		$[4] = required;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== control || $[7] !== name || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control,
+			render: t1
+		});
+		$[6] = control;
+		$[7] = name;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
 };
 
 //#endregion
@@ -100,28 +218,68 @@ const renderField = (schema, key, options) => {
 		type: "string",
 		enum: P.select(P.array(P.string))
 	}, (enumValues) => {
-		const helperText = schema.description ?? "";
-		return <SelectFieldFromItems key={key} name={key} label={label} helperText={helperText} items={toSelectItems(enumValues)} required={required} />;
+		return /* @__PURE__ */ jsx(SelectFieldFromItems, {
+			name: key,
+			label,
+			helperText: schema.description ?? "",
+			items: toSelectItems(enumValues),
+			required
+		}, key);
 	}).with({
 		type: "string",
 		oneOf: P.array({ const: P.string })
-	}, (s) => <SelectFieldFromItems key={key} name={key} label={label} helperText={helperText} items={toSelectItems(s.oneOf.map((e) => e.const))} required={required} />).with({
+	}, (s) => /* @__PURE__ */ jsx(SelectFieldFromItems, {
+		name: key,
+		label,
+		helperText,
+		items: toSelectItems(s.oneOf.map((e) => e.const)),
+		required
+	}, key)).with({
 		type: "string",
 		format: P.optional(P.string),
 		maxLength: P.optional(P.number)
-	}, (s) => <InputField key={key} name={key} label={label} helperText={helperText} type={s.format === "email" || s.format === "date" ? s.format : "text"} maxLength={s.maxLength} required={required} />).with({
+	}, (s) => /* @__PURE__ */ jsx(InputField, {
+		name: key,
+		label,
+		helperText,
+		type: s.format === "email" || s.format === "date" ? s.format : "text",
+		maxLength: s.maxLength,
+		required
+	}, key)).with({
 		type: P.union("number", "integer"),
 		minimum: P.optional(P.number),
 		maximum: P.optional(P.number)
-	}, (s) => <NumberInputField key={key} name={key} label={label} helperText={helperText} min={s.minimum} max={s.maximum} required={required} />).with({ type: "boolean" }, () => <CheckboxField key={key} name={key} label={label} helperText={helperText} required={required} />).with({
+	}, (s) => /* @__PURE__ */ jsx(NumberInputField, {
+		name: key,
+		label,
+		helperText,
+		min: s.minimum,
+		max: s.maximum,
+		required
+	}, key)).with({ type: "boolean" }, () => /* @__PURE__ */ jsx(CheckboxField, {
+		name: key,
+		label,
+		helperText,
+		required
+	}, key)).with({
 		type: "array",
 		items: { enum: P.select(P.array(P.string)) }
 	}, (enumValues) => {
-		return <ComboboxFromItems key={key} name={key} label={label} items={toSelectItems(enumValues)} required={required} />;
+		return /* @__PURE__ */ jsx(ComboboxFromItems, {
+			name: key,
+			label,
+			items: toSelectItems(enumValues),
+			required
+		}, key);
 	}).with({
 		type: "array",
 		items: { type: "string" }
-	}, () => <TagsInputField key={key} name={key} label={label} helperText={helperText} required={required} />).otherwise(() => null);
+	}, () => /* @__PURE__ */ jsx(TagsInputField, {
+		name: key,
+		label,
+		helperText,
+		required
+	}, key)).otherwise(() => null);
 };
 
 //#endregion
@@ -240,13 +398,51 @@ const buildZodForProperty = (prop) => {
 * <Builder /> renders fields in the order they appear in the schema without layout control.
 * It is intentionally minimal. Use <UiSchemaForm /> if you need structured layouts.
 */
-const Builder = ({ jsonSchema }) => {
-	const form = useForm({ resolver: zodResolver(createZodSchemaFromJson(jsonSchema)) });
-	return <Form value={form}>
-      {	/** Render each root-level property as a field component. */}
-      {Object.entries(jsonSchema.properties).map(([key, schema]) => renderField(schema, key))}
-    </Form>;
- };
+const Builder = (t0) => {
+	const $ = c(10);
+	const { jsonSchema } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== jsonSchema) {
+		const zodSchema = createZodSchemaFromJson(jsonSchema);
+		t2 = useForm;
+		t1 = zodResolver(zodSchema);
+		$[0] = jsonSchema;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] !== t1) {
+		t3 = { resolver: t1 };
+		$[3] = t1;
+		$[4] = t3;
+	} else t3 = $[4];
+	const form = t2(t3);
+	let t4;
+	if ($[5] !== jsonSchema.properties) {
+		t4 = Object.entries(jsonSchema.properties).map(_temp);
+		$[5] = jsonSchema.properties;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== form || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Form, {
+			value: form,
+			children: t4
+		});
+		$[7] = form;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+};
+function _temp(t0) {
+	const [key, schema] = t0;
+	return renderField(schema, key);
+}
 
 //#endregion
 //#region src/components/json-form-builder/utils/scope-resolver.ts
@@ -297,14 +493,18 @@ const renderNode = (jsonSchema, node) => {
 };
 const renderLayoutNode = (jsonSchema, node) => {
 	const children = node.nodes.map((child, index) => {
-		return <Fragment key={`layout-${child.type}-${index}`}>{renderNode(jsonSchema, child)}</Fragment>;
+		return /* @__PURE__ */ jsx(Fragment, { children: renderNode(jsonSchema, child) }, `layout-${child.type}-${index}`);
+	});
+	if (node.format === "horizontal") return /* @__PURE__ */ jsx(HStack, {
+		gap: "3",
+		"data-testid": "layout-horizontal",
+		children
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		gap: "5",
+		"data-testid": "layout-vertical",
+		children
 	});
-	if (node.format === "horizontal") return <HStack gap="3" data-testid="layout-horizontal">
-        {children}
-      </HStack>;
-	return <Stack gap="5" data-testid="layout-vertical">
-      {children}
-    </Stack>;
 };
 const renderFieldNode = (jsonSchema, node) => {
 	const resolved = resolveScope(jsonSchema, node.scope);
@@ -315,32 +515,116 @@ const renderFieldNode = (jsonSchema, node) => {
 	const required = jsonSchema.required?.includes(resolved.key) ?? false;
 	return renderField(resolved.schema, resolved.key, { required });
 };
-const UiSchemaForm = ({ id, value, onSubmit, jsonSchema, uiFieldset, form: providedForm, footer, error }) => {
+const UiSchemaForm = (t0) => {
+	const $ = c(36);
+	const { id, value, onSubmit, jsonSchema, uiFieldset, form: providedForm, footer, error } = t0;
 	const form = providedForm || value;
-	return <Box id={id}>
-      <Form value={form} onSubmit={form.handleSubmit(onSubmit)}>
-        <FormProvider {...form}>
-          <Fieldset.Root>
-            <Fieldset.Header>
-              <Fieldset.Legend>{uiFieldset.legend}</Fieldset.Legend>
-              {uiFieldset.description && <Fieldset.Description>{uiFieldset.description}</Fieldset.Description>}
-            </Fieldset.Header>
-
-            <Fieldset.Body>
-              <Stack gap="4">
-                {uiFieldset.nodes.map((node, index) => <Fragment key={`fieldset-${node.type}-${index}`}>
-                    {renderNode(jsonSchema, node)}
-                  </Fragment>)}
-              </Stack>
-            </Fieldset.Body>
-            <Fieldset.Footer>
-              {error && <Fieldset.ErrorText>{error}</Fieldset.ErrorText>}
-              {footer}
-            </Fieldset.Footer>
-          </Fieldset.Root>
-        </FormProvider>
-      </Form>
-    </Box>;
+	let t1;
+	if ($[0] !== form || $[1] !== onSubmit) {
+		t1 = form.handleSubmit(onSubmit);
+		$[0] = form;
+		$[1] = onSubmit;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== uiFieldset.legend) {
+		t2 = /* @__PURE__ */ jsx(Fieldset.Legend, { children: uiFieldset.legend });
+		$[3] = uiFieldset.legend;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== uiFieldset.description) {
+		t3 = uiFieldset.description && /* @__PURE__ */ jsx(Fieldset.Description, { children: uiFieldset.description });
+		$[5] = uiFieldset.description;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fieldset.Header, { children: [t2, t3] });
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== jsonSchema || $[11] !== uiFieldset.nodes) {
+		let t6;
+		if ($[13] !== jsonSchema) {
+			t6 = (node, index) => /* @__PURE__ */ jsx(Fragment, { children: renderNode(jsonSchema, node) }, `fieldset-${node.type}-${index}`);
+			$[13] = jsonSchema;
+			$[14] = t6;
+		} else t6 = $[14];
+		t5 = uiFieldset.nodes.map(t6);
+		$[10] = jsonSchema;
+		$[11] = uiFieldset.nodes;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[15] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Fieldset.Body, { children: /* @__PURE__ */ jsx(Stack, {
+			gap: "4",
+			children: t5
+		}) });
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== error) {
+		t7 = error && /* @__PURE__ */ jsx(Fieldset.ErrorText, { children: error });
+		$[17] = error;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== footer || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Fieldset.Footer, { children: [t7, footer] });
+		$[19] = footer;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t4 || $[23] !== t6 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fieldset.Root, { children: [
+			t4,
+			t6,
+			t8
+		] });
+		$[22] = t4;
+		$[23] = t6;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== form || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsx(FormProvider, {
+			...form,
+			children: t9
+		});
+		$[26] = form;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[29] !== form || $[30] !== t1 || $[31] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Form, {
+			value: form,
+			onSubmit: t1,
+			children: t10
+		});
+		$[29] = form;
+		$[30] = t1;
+		$[31] = t10;
+		$[32] = t11;
+	} else t11 = $[32];
+	let t12;
+	if ($[33] !== id || $[34] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Box, {
+			id,
+			children: t11
+		});
+		$[33] = id;
+		$[34] = t11;
+		$[35] = t12;
+	} else t12 = $[35];
+	return t12;
 };
 
 //#endregion