@tipp/ui 2.2.8 → 2.2.9

package/dist/molecules/dynamic-field.cjs

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/molecules/dynamic-field.tsx
@@ -53,13 +63,213 @@ __export(dynamic_field_exports, {
 });
 module.exports = __toCommonJS(dynamic_field_exports);
 
-// src/atoms/text-field.tsx
+// src/context/dynamic-form-context.tsx
+var import_react4 = require("react");
+
+// src/molecules/form/form.tsx
+var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
+var import_react3 = require("react");
+
+// src/atoms/heading.tsx
 var import_themes = require("@radix-ui/themes");
 var import_react = require("react");
+
+// src/utils/map-with-responsive.ts
+var mapWithResponsive = (args) => {
+  const { value, mapFn } = args;
+  if (typeof value === "string") {
+    return mapFn(value);
+  }
+  ;
+  if (typeof value === "object") {
+    const newObj = {};
+    let key;
+    for (key in value) {
+      newObj[key] = mapFn(value[key]);
+    }
+    return newObj;
+  }
+  return value;
+};
+
+// src/atoms/heading.tsx
+var import_themes2 = require("@radix-ui/themes");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Root = (0, import_react.forwardRef)((props, ref) => {
+var mapVariant = (variant) => {
+  switch (variant) {
+    case "heading1":
+      return "7";
+    case "heading2":
+      return "6";
+    case "heading3":
+      return "5";
+    case "heading4":
+      return "4";
+    case "heading5":
+      return "3";
+    default:
+      return void 0;
+  }
+};
+function Heading2(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react.useMemo)(() => {
+    return variant ? mapWithResponsive({
+      value: variant,
+      mapFn: mapVariant
+    }) : size;
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
+
+// src/atoms/typo.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Typo = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      if (size !== void 0) return size;
+      if (variant === void 0) return "2";
+      return mapWithResponsive({
+        value: variant,
+        mapFn: (variantValue) => {
+          switch (variantValue) {
+            case "caption":
+              return "1";
+            case "subtitle":
+              return "3";
+            case "body":
+            default:
+              return "2";
+          }
+        }
+      });
+    }, [size, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+  }
+);
+Typo.displayName = "Typo";
+
+// src/molecules/form/form.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Root2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Root,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormRoot ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Root2.displayName = "FORM_ROOT";
+var FieldContext = (0, import_react3.createContext)({
+  name: ""
+});
+var Field2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Field,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormField ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldContext.Provider, { value: rest, children })
+      })
+    );
+  }
+);
+Field2.displayName = "FORM_FIELD";
+function HeadingLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
+}
+function CaptionLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
+}
+var Label2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    const Comp = (0, import_react3.useMemo)(() => {
+      switch (variant) {
+        case "title":
+          return HeadingLabel;
+        case "caption":
+          return CaptionLabel;
+        case "body":
+        default:
+          return Typo;
+      }
+    }, [variant]);
+    const fieldProps = (0, import_react3.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Label,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormLabel ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Comp, { children: [
+          children,
+          fieldProps.required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, { as: "span", color: "tomato", children: ` *` }) : null
+        ] })
+      })
+    );
+  }
+);
+Label2.displayName = "FORM_Label";
+var Message2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Message,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormMessage ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, { color: "red", children })
+      })
+    );
+  }
+);
+Message2.displayName = "FORM_Message";
+var Control2 = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    const fieldProps = (0, import_react3.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      RadixForm.Control,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormControl ${className || ""}`,
+        ref,
+        required: fieldProps.required
+      })
+    );
+  }
+);
+Control2.displayName = "FORM_Control";
+
+// src/context/dynamic-form-context.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DynamicFormContext = (0, import_react4.createContext)(null);
+function useDynamicForm() {
+  const context = (0, import_react4.useContext)(DynamicFormContext);
+  if (!context) {
+    throw new Error("useDynamicForm must be used within a DynamicFormProvider");
+  }
+  return context;
+}
+
+// src/atoms/text-field.tsx
+var import_themes4 = require("@radix-ui/themes");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Root3 = (0, import_react5.forwardRef)((props, ref) => {
   const _a = props, { error, style, className } = _a, rest = __objRest(_a, ["error", "style", "className"]);
-  const fieldStyle = (0, import_react.useMemo)(() => {
+  const fieldStyle = (0, import_react5.useMemo)(() => {
     if (!error) return style;
     const errorStyle = {
       boxShadow: "inset 0 0 0 var(--text-field-border-width) var(--error-11)"
@@ -67,8 +277,8 @@ var Root = (0, import_react.forwardRef)((props, ref) => {
     return __spreadValues(__spreadValues({}, style || {}), errorStyle);
   }, [error, style]);
   const classNameStr = error ? `error ${className}` : className;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_themes.TextField.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_themes4.TextField.Root,
     __spreadValues({
       className: classNameStr,
       ref,
@@ -76,17 +286,17 @@ var Root = (0, import_react.forwardRef)((props, ref) => {
     }, rest)
   );
 });
-Root.displayName = "TextField.Root";
-var TextField = { Root, Slot: import_themes.TextField.Slot };
+Root3.displayName = "TextField.Root";
+var TextField = { Root: Root3, Slot: import_themes4.TextField.Slot };
 
 // src/atoms/text-area.tsx
-var import_themes2 = require("@radix-ui/themes");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var TextArea = (0, import_react2.forwardRef)(
+var import_themes5 = require("@radix-ui/themes");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TextArea = (0, import_react6.forwardRef)(
   (props, ref) => {
     const _a = props, { error, style, className } = _a, rest = __objRest(_a, ["error", "style", "className"]);
-    const fieldStyle = (0, import_react2.useMemo)(() => {
+    const fieldStyle = (0, import_react6.useMemo)(() => {
       if (!error) return style;
       const errorStyle = {
         boxShadow: "inset 0 0 0 var(--text-area-border-width) var(--error-11)"
@@ -94,8 +304,8 @@ var TextArea = (0, import_react2.forwardRef)(
       return __spreadValues(__spreadValues({}, style || {}), errorStyle);
     }, [error, style]);
     const classNameStr = error ? `error ${className}` : className;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_themes2.TextArea,
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_themes5.TextArea,
       __spreadProps(__spreadValues({}, rest), {
         className: classNameStr,
         ref,
@@ -107,22 +317,22 @@ var TextArea = (0, import_react2.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // src/atoms/select.tsx
-var import_themes3 = require("@radix-ui/themes");
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SelectContext = (0, import_react3.createContext)({
+var import_themes6 = require("@radix-ui/themes");
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SelectContext = (0, import_react7.createContext)({
   error: false
 });
-var Content = (0, import_react3.forwardRef)((props, ref) => {
+var Content = (0, import_react7.forwardRef)((props, ref) => {
   const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
-  const { error } = (0, import_react3.useContext)(SelectContext);
-  const cls = (0, import_react3.useMemo)(() => {
+  const { error } = (0, import_react7.useContext)(SelectContext);
+  const cls = (0, import_react7.useMemo)(() => {
     const etc = isNavigation ? "nav-select" : "";
     const errorCls = error ? "tipp-error" : "";
     return [etc, errorCls, className].join(" ");
   }, [className, error, isNavigation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_themes3.Select.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_themes6.Select.Content,
     __spreadProps(__spreadValues({
       position: "popper"
     }, rest), {
@@ -132,36 +342,36 @@ var Content = (0, import_react3.forwardRef)((props, ref) => {
   );
 });
 Content.displayName = "Select.Content";
-var Trigger = (0, import_react3.forwardRef)(
+var Trigger = (0, import_react7.forwardRef)(
   (props, ref) => {
     const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
-    const { error } = (0, import_react3.useContext)(SelectContext);
-    const cls = (0, import_react3.useMemo)(() => {
+    const { error } = (0, import_react7.useContext)(SelectContext);
+    const cls = (0, import_react7.useMemo)(() => {
       const errorCls = error ? "error" : "";
       return [errorCls, className].join(" ");
     }, [className, error]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes6.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
   }
 );
 Trigger.displayName = "Select.Trigger";
-function Root2(props) {
+function Root4(props) {
   const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Select.Root, __spreadValues({}, rest)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes6.Select.Root, __spreadValues({}, rest)) });
 }
-Root2.displayName = "Select.Root";
-var Select = __spreadProps(__spreadValues({}, import_themes3.Select), {
-  Root: Root2,
+Root4.displayName = "Select.Root";
+var Select = __spreadProps(__spreadValues({}, import_themes6.Select), {
+  Root: Root4,
   Trigger,
   Content
 });
 
 // src/atoms/check-box-group.tsx
-var import_themes4 = require("@radix-ui/themes");
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Root3 = (0, import_react4.forwardRef)((props, ref) => {
+var import_themes7 = require("@radix-ui/themes");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Root5 = (0, import_react8.forwardRef)((props, ref) => {
   const _a = props, { children, size = "medium" } = _a, rest = __objRest(_a, ["children", "size"]);
-  const groupSize = (0, import_react4.useMemo)(() => {
+  const groupSize = (0, import_react8.useMemo)(() => {
     switch (size) {
       case "small":
         return "1";
@@ -172,25 +382,25 @@ var Root3 = (0, import_react4.forwardRef)((props, ref) => {
         return "2";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
 });
-Root3.displayName = "CheckboxGroup.Root";
+Root5.displayName = "CheckboxGroup.Root";
 var CheckboxGroup = {
-  Root: Root3,
-  Item: import_themes4.CheckboxGroup.Item
+  Root: Root5,
+  Item: import_themes7.CheckboxGroup.Item
 };
 
 // src/atoms/radio-group.tsx
-var import_themes5 = require("@radix-ui/themes");
+var import_themes8 = require("@radix-ui/themes");
 
 // src/atoms/check-box.tsx
-var import_themes6 = require("@radix-ui/themes");
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Checkbox = (0, import_react5.forwardRef)(
+var import_themes9 = require("@radix-ui/themes");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Checkbox = (0, import_react9.forwardRef)(
   (props, ref) => {
     const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    const radixSize = (0, import_react5.useMemo)(() => {
+    const radixSize = (0, import_react9.useMemo)(() => {
       switch (size) {
         case "small":
           return "1";
@@ -200,94 +410,108 @@ var Checkbox = (0, import_react5.forwardRef)(
           return "3";
       }
     }, [size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes6.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/molecules/dynamic-field.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function DynamicFormField({
-  field,
-  formik
+  field
 }) {
-  const { name, type, placeholder, options, orientation = "vertical" } = field;
-  const { value, error, touched } = formik.getFieldMeta(name);
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur
+  } = useDynamicForm();
+  const { name, type } = field;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
   const hasError = Boolean(error && touched);
   const commonProps = {
     name,
     value: String(value || ""),
-    onChange: formik.handleChange,
-    onBlur: formik.handleBlur,
-    placeholder,
+    onChange: handleChange,
+    onBlur: handleBlur,
     error: hasError
   };
   switch (type) {
-    case "text":
+    case "short_text":
     case "email":
-    case "password":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextField.Root, __spreadProps(__spreadValues({}, commonProps), { type }));
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: type === "short_text" ? "text" : type
+        })
+      );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           inputMode: "numeric",
           pattern: "[0-9]*",
+          placeholder: field.placeholder,
           type: "number"
         })
       );
-    case "textarea":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextArea, __spreadProps(__spreadValues({}, commonProps), { rows: 4 }));
-    case "select":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    case "long_text":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextArea, __spreadProps(__spreadValues({}, commonProps), { placeholder: field.placeholder, rows: 4 }));
+    case "dropdown":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         Select.Root,
         {
           onValueChange: (newValue) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           },
           value,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Select.Trigger, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Select.Content, { children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select.Trigger, { placeholder: field.placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
       );
-    case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_themes5.RadioGroup.Root,
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_themes8.RadioGroup.Root,
         {
           onValueChange: (newValue) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           },
-          orientation,
+          orientation: field.orientation,
           value: String(value || ""),
-          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes5.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes8.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
-    case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    case "choices":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         CheckboxGroup.Root,
         {
           onValueChange: (newValue) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           },
-          orientation,
+          orientation: field.orientation,
           value: Array.isArray(value) ? value.map(String) : [],
-          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
-    case "single-checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    case "yes_no":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Checkbox,
           {
             checked: Boolean(value),
             onCheckedChange: (checked) => {
-              void formik.setFieldValue(name, checked);
+              void setFieldValue(name, checked);
             }
           }
         ),
-        field.description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
       ] });
     default:
       return null;