@tipp/ui 2.5.0 → 2.7.0

package/dist/molecules/dynamic-form-editor.js

@@ -1,28 +1,33 @@
 import {
   DynamicFormEditor
-} from "../chunk-TJKS6CLU.js";
-import "../chunk-D4JZHM4J.js";
-import "../chunk-PXPGCDNA.js";
-import "../chunk-KCCYHT23.js";
-import "../chunk-JZVK4NDF.js";
-import "../chunk-P4KO43AP.js";
-import "../chunk-7ITDAUWI.js";
+} from "../chunk-GREYLAMY.js";
+import "../chunk-MP5KZULQ.js";
+import "../chunk-2O7NVLVP.js";
+import "../chunk-7JW5Z2TL.js";
+import "../chunk-7PBLFV5L.js";
+import "../chunk-MCKWO7K4.js";
+import "../chunk-2I37QLRA.js";
 import "../chunk-Z7WNKARH.js";
+import "../chunk-E6GCU5IQ.js";
+import "../chunk-MMLVZWMD.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
-import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
-import "../chunk-X2GMDZ7M.js";
+import "../chunk-YXMB4MCM.js";
+import "../chunk-DX3DLP5Z.js";
+import "../chunk-SA7AYYQS.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-XK6VEVOK.js";
+import "../chunk-WG5OK3YN.js";
+import "../chunk-ZCGH6TJ3.js";
+import "../chunk-NLHVQJQ2.js";
+import "../chunk-7RJYF5L3.js";
 import "../chunk-HF6GNDPV.js";
+import "../chunk-GR4PG6HY.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-ZVDAEY5Q.js";
+import "../chunk-2LCH3PDF.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-RP2RGCAW.js";
-import "../chunk-W7X7KSJP.js";
-import "../chunk-VYCYVN3L.js";
 import "../chunk-VOME2TE7.js";
 import "../chunk-JVXATVAC.js";
 import "../chunk-B3VSXNTH.js";
@@ -40,11 +45,8 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-4U6DFH7Z.js";
-import "../chunk-QDC3LFHS.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
+import "../chunk-WYWM2HSZ.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   DynamicFormEditor

package/dist/molecules/dynamic-form.cjs

@@ -83,13 +83,14 @@ __export(dynamic_form_exports, {
   createYupValidation: () => createYupValidation
 });
 module.exports = __toCommonJS(dynamic_form_exports);
-var import_react10 = require("react");
+var import_react13 = require("react");
 var import_formik = require("formik");
 var Yup = __toESM(require("yup"), 1);
-var import_themes14 = require("@radix-ui/themes");
+var import_themes15 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
 
 // src/utils/map-with-responsive.ts
@@ -110,11 +111,38 @@ var mapWithResponsive = (args) => {
   return value;
 };
 
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
 // src/atoms/typo.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Typo = (0, import_react.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const _a = props, { size, variant, children, color, className } = _a, rest = __objRest(_a, ["size", "variant", "children", "color", "className"]);
+    const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
     const radixSize = (0, import_react.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
@@ -133,7 +161,16 @@ var Typo = (0, import_react.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";
@@ -147,6 +184,7 @@ var import_react3 = require("react");
 
 // src/atoms/heading.tsx
 var import_themes2 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
 var import_react2 = require("react");
 var import_themes3 = require("@radix-ui/themes");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -167,14 +205,26 @@ var mapVariant = (variant) => {
   }
 };
 function Heading2(props) {
-  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const _a = props, { size, children, variant, color, className } = _a, rest = __objRest(_a, ["size", "children", "variant", "color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react2.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
   const radixSize = (0, import_react2.useMemo)(() => {
     return variant ? mapWithResponsive({
       value: variant,
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_themes2.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx2.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      children
+    })
+  );
 }
 
 // src/molecules/form/form.tsx
@@ -401,61 +451,93 @@ var TextArea = (0, import_react6.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // src/atoms/select.tsx
-var import_themes7 = require("@radix-ui/themes");
+var import_themes8 = require("@radix-ui/themes");
+var import_clsx4 = require("clsx");
+var import_react8 = require("react");
+
+// src/theme/theme-provider.tsx
 var import_react7 = require("react");
+var import_themes7 = require("@radix-ui/themes");
+var import_clsx3 = require("clsx");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var SelectContext = (0, import_react7.createContext)({
+var ThemeAccentContext = (0, import_react7.createContext)(void 0);
+
+// src/atoms/select.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SelectContext = (0, import_react8.createContext)({
   error: false
 });
-var Content = (0, import_react7.forwardRef)((props, ref) => {
-  const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
-  const { error } = (0, import_react7.useContext)(SelectContext);
-  const cls = (0, import_react7.useMemo)(() => {
+var Content = (0, import_react8.forwardRef)((props, ref) => {
+  const _a = props, { className, isNavigation, color } = _a, rest = __objRest(_a, ["className", "isNavigation", "color"]);
+  const { error, color: contextColor } = (0, import_react8.useContext)(SelectContext);
+  const themeAccent = (0, import_react8.useContext)(ThemeAccentContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react8.useMemo)(
+    () => {
+      var _a2;
+      return resolveColor((_a2 = color != null ? color : contextColor) != null ? _a2 : themeAccent);
+    },
+    [color, contextColor, themeAccent]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  const cls = (0, import_react8.useMemo)(() => {
     const etc = isNavigation ? "nav-select" : "";
     const errorCls = error ? "tipp-error" : "";
-    return [etc, errorCls, className].join(" ");
-  }, [className, error, isNavigation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_themes7.Select.Content,
+    return (0, import_clsx4.clsx)(etc, errorCls, colorClassName, className);
+  }, [className, colorClassName, error, isNavigation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_themes8.Select.Content,
     __spreadProps(__spreadValues({
       position: "popper"
     }, rest), {
       className: cls,
+      color: appliedColor,
       ref
     })
   );
 });
 Content.displayName = "Select.Content";
-var Trigger = (0, import_react7.forwardRef)(
-  (props, ref) => {
-    const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
-    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_runtime7.jsx)(import_themes7.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
-  }
-);
+var Trigger = (0, import_react8.forwardRef)((props, ref) => {
+  const _a = props, { className, color } = _a, rest = __objRest(_a, ["className", "color"]);
+  const { error, color: contextColor } = (0, import_react8.useContext)(SelectContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react8.useMemo)(
+    () => resolveColor(color != null ? color : contextColor),
+    [color, contextColor]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  const cls = (0, import_react8.useMemo)(() => {
+    const errorCls = error ? "error" : "";
+    return (0, import_clsx4.clsx)(errorCls, colorClassName, className);
+  }, [className, colorClassName, error]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_themes8.Select.Trigger,
+    __spreadProps(__spreadValues({}, rest), {
+      className: cls,
+      color: appliedColor,
+      ref
+    })
+  );
+});
 Trigger.displayName = "Select.Trigger";
 function Root4(props) {
-  const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes7.Select.Root, __spreadValues({}, rest)) });
+  const _a = props, { error, color } = _a, rest = __objRest(_a, ["error", "color"]);
+  const value = (0, import_react8.useMemo)(() => ({ error, color }), [error, color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.Select.Root, __spreadValues({}, rest)) });
 }
 Root4.displayName = "Select.Root";
-var Select = __spreadProps(__spreadValues({}, import_themes7.Select), {
+var Select = __spreadProps(__spreadValues({}, import_themes8.Select), {
   Root: Root4,
   Trigger,
   Content
 });
 
 // src/atoms/check-box-group.tsx
-var import_themes8 = 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_react8.useMemo)(() => {
+var import_themes9 = require("@radix-ui/themes");
+var import_clsx5 = require("clsx");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Root5 = (0, import_react9.forwardRef)((props, ref) => {
+  const _a = props, { children, size = "medium", color, className } = _a, rest = __objRest(_a, ["children", "size", "color", "className"]);
+  const groupSize = (0, import_react9.useMemo)(() => {
     switch (size) {
       case "small":
         return "1";
@@ -466,25 +548,61 @@ var Root5 = (0, import_react8.forwardRef)((props, ref) => {
         return "2";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+  const { className: colorClassName } = (0, import_react9.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_themes9.CheckboxGroup.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx5.clsx)(colorClassName, className),
+      ref,
+      size: groupSize,
+      children
+    })
+  );
 });
 Root5.displayName = "CheckboxGroup.Root";
 var CheckboxGroup = {
   Root: Root5,
-  Item: import_themes8.CheckboxGroup.Item
+  Item: import_themes9.CheckboxGroup.Item
 };
 
 // src/atoms/radio-group.tsx
-var import_themes9 = require("@radix-ui/themes");
+var import_themes10 = require("@radix-ui/themes");
+var import_clsx6 = require("clsx");
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Root6 = (0, import_react10.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react10.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_themes10.RadioGroup.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx6.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root6.displayName = "RadioGroup.Root";
+var RadioGroup = __spreadProps(__spreadValues({}, import_themes10.RadioGroup), {
+  Root: Root6
+});
 
 // src/atoms/check-box.tsx
-var import_themes10 = require("@radix-ui/themes");
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Checkbox = (0, import_react9.forwardRef)(
+var import_themes11 = require("@radix-ui/themes");
+var import_clsx7 = require("clsx");
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Checkbox = (0, import_react11.forwardRef)(
   (props, ref) => {
-    const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    const radixSize = (0, import_react9.useMemo)(() => {
+    const _a = props, { size = "medium", color, className } = _a, rest = __objRest(_a, ["size", "color", "className"]);
+    const radixSize = (0, import_react11.useMemo)(() => {
       switch (size) {
         case "small":
           return "1";
@@ -494,22 +612,54 @@ var Checkbox = (0, import_react9.forwardRef)(
           return "3";
       }
     }, [size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes10.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+    const { color: radixColor, className: colorClassName } = resolveColor(color);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_themes11.Checkbox,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx7.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize
+      })
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/atoms/radio-cards.tsx
-var import_themes11 = require("@radix-ui/themes");
+var import_themes12 = require("@radix-ui/themes");
+var import_clsx8 = require("clsx");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Root7 = (0, import_react12.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react12.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_themes12.RadioCards.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx8.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root7.displayName = "RadioCards.Root";
+var RadioCards = __spreadProps(__spreadValues({}, import_themes12.RadioCards), {
+  Root: Root7
+});
 
 // src/atoms/grid.tsx
-var import_themes12 = require("@radix-ui/themes");
+var import_themes13 = require("@radix-ui/themes");
 
 // src/atoms/inset.tsx
-var import_themes13 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 
 // src/molecules/dynamic-field.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -578,7 +728,7 @@ function DynamicFormField({
   const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
   switch (field.type) {
     case "short_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -586,7 +736,7 @@ function DynamicFormField({
         })
       );
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -594,7 +744,7 @@ function DynamicFormField({
         })
       );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           inputMode: "numeric",
@@ -604,9 +754,9 @@ function DynamicFormField({
         })
       );
     case "long_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
     case "dropdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         Select.Root,
         {
           disabled: readonly,
@@ -615,7 +765,7 @@ function DynamicFormField({
           },
           value: selectedValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Select.Trigger,
               {
                 placeholder: field.placeholder,
@@ -627,13 +777,13 @@ function DynamicFormField({
                 }
               }
             ),
-            /* @__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)) })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
       );
     case "choice":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_themes9.RadioGroup.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        RadioGroup.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : (newValue) => {
@@ -641,26 +791,26 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: String(value || ""),
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "radio_cards": {
       const options = getOptions(field);
       if (!options) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_themes11.RadioCards.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : (newValue) => {
             void setFieldValue(name, newValue);
           },
           value: selectedValue,
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes11.RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typo, { children: option.label }) }, option.value))
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { children: option.label }) }, option.value))
         }
       );
     }
     case "choices":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         CheckboxGroup.Root,
         {
           disabled: readonly,
@@ -669,12 +819,12 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: Array.isArray(value) ? value.map(String) : [],
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "yes_no":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes4.Flex, { gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes4.Flex, { gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Checkbox,
           {
             checked: Boolean(value),
@@ -684,7 +834,7 @@ function DynamicFormField({
             }
           }
         ),
-        field.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
       ] });
     case "image_radio_card": {
       const options = getImageOptions(field);
@@ -708,23 +858,23 @@ function DynamicFormField({
         if (!selectedOption) return;
         void setFieldValue(name, selectedOption.value);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_themes11.RadioCards.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : handleValueChange,
           value: selectedValue,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes12.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
             const optionValue = String(option.value);
             const altText = option.alt || option.label;
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_themes11.RadioCards.Item,
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              RadioCards.Item,
               {
                 style: {
                   padding: 0
                 },
                 value: optionValue,
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes13.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes14.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "img",
                   {
                     alt: altText,
@@ -751,7 +901,7 @@ function DynamicFormField({
 }
 
 // src/molecules/dynamic-form.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function scrollToFirstError(errors, _fields) {
   const firstErrorFieldName = Object.keys(errors)[0];
   if (!firstErrorFieldName) return;
@@ -781,7 +931,7 @@ function DynamicFormRoot({
   readonly = false,
   formStyle
 }) {
-  const validationSchema = (0, import_react10.useMemo)(() => {
+  const validationSchema = (0, import_react13.useMemo)(() => {
     const schema = {};
     fields.forEach((field) => {
       if (field.validation) {
@@ -806,7 +956,7 @@ function DynamicFormRoot({
     });
     return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
   }, [fields]);
-  const handleSubmit = (0, import_react10.useCallback)(
+  const handleSubmit = (0, import_react13.useCallback)(
     (values) => __async(null, null, function* () {
       yield onSubmit(values);
     }),
@@ -828,7 +978,7 @@ function DynamicFormRoot({
     validateOnChange: true,
     onSubmit: handleSubmit
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
       const timeoutId = setTimeout(() => {
         scrollToFirstError(formik.errors, fields);
@@ -838,7 +988,7 @@ function DynamicFormRoot({
       };
     }
   }, [formik.submitCount, formik.errors, fields]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     DynamicFormProvider,
     {
       fields,
@@ -855,15 +1005,15 @@ function DynamicFormFieldList({
 }) {
   const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
   const fields = fieldsProp || fieldsFromContext;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fields.map((field) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: fields.map((field) => {
     const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_themes14.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_themes15.Box,
       {
         "data-error-field": errorMessage ? field.name : void 0,
         "data-field-name": field.name,
         mb: "2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           Form.FormItem,
           {
             errorMessage,
@@ -872,8 +1022,8 @@ function DynamicFormFieldList({
             name: field.name,
             required: field.required,
             children: [
-              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { variant: "caption", children: field.description }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DynamicFormField, { field })
+              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { variant: "caption", children: field.description }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicFormField, { field })
             ]
           }
         )