@tipp/ui 2.5.0 → 2.7.0

package/dist/molecules/dynamic-form-editor-preview-panel.cjs

@@ -122,6 +122,7 @@ var import_themes2 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
 var import_themes3 = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react2 = require("react");
 
 // src/utils/map-with-responsive.ts
@@ -142,11 +143,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_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 _a = props, { size, variant, children, color, className } = _a, rest = __objRest(_a, ["size", "variant", "children", "color", "className"]);
+    const { color: radixColor, className: colorClassName } = (0, import_react2.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
     const radixSize = (0, import_react2.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
@@ -165,16 +193,25 @@ var Typo = (0, import_react2.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_themes3.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";
 
 // src/molecules/dynamic-form.tsx
-var import_react11 = require("react");
+var import_react14 = require("react");
 var import_formik = require("formik");
 var Yup = __toESM(require("yup"), 1);
-var import_themes15 = require("@radix-ui/themes");
+var import_themes16 = require("@radix-ui/themes");
 
 // src/context/dynamic-form-context.tsx
 var import_react5 = require("react");
@@ -185,6 +222,7 @@ var import_react4 = require("react");
 
 // src/atoms/heading.tsx
 var import_themes4 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
 var import_react3 = require("react");
 var import_themes5 = require("@radix-ui/themes");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -205,14 +243,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_react3.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
   const radixSize = (0, import_react3.useMemo)(() => {
     return variant ? mapWithResponsive({
       value: variant,
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes4.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_themes4.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx2.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      children
+    })
+  );
 }
 
 // src/molecules/form/form.tsx
@@ -436,61 +486,93 @@ var TextArea = (0, import_react7.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // src/atoms/select.tsx
-var import_themes8 = require("@radix-ui/themes");
+var import_themes9 = require("@radix-ui/themes");
+var import_clsx4 = require("clsx");
+var import_react9 = require("react");
+
+// src/theme/theme-provider.tsx
 var import_react8 = require("react");
+var import_themes8 = require("@radix-ui/themes");
+var import_clsx3 = require("clsx");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var SelectContext = (0, import_react8.createContext)({
+var ThemeAccentContext = (0, import_react8.createContext)(void 0);
+
+// src/atoms/select.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SelectContext = (0, import_react9.createContext)({
   error: false
 });
-var Content = (0, import_react8.forwardRef)((props, ref) => {
-  const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
-  const { error } = (0, import_react8.useContext)(SelectContext);
-  const cls = (0, import_react8.useMemo)(() => {
+var Content = (0, import_react9.forwardRef)((props, ref) => {
+  const _a = props, { className, isNavigation, color } = _a, rest = __objRest(_a, ["className", "isNavigation", "color"]);
+  const { error, color: contextColor } = (0, import_react9.useContext)(SelectContext);
+  const themeAccent = (0, import_react9.useContext)(ThemeAccentContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react9.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_react9.useMemo)(() => {
     const etc = isNavigation ? "nav-select" : "";
     const errorCls = error ? "tipp-error" : "";
-    return [etc, errorCls, className].join(" ");
-  }, [className, error, isNavigation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_themes8.Select.Content,
+    return (0, import_clsx4.clsx)(etc, errorCls, colorClassName, className);
+  }, [className, colorClassName, error, isNavigation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_themes9.Select.Content,
     __spreadProps(__spreadValues({
       position: "popper"
     }, rest), {
       className: cls,
+      color: appliedColor,
       ref
     })
   );
 });
 Content.displayName = "Select.Content";
-var Trigger = (0, import_react8.forwardRef)(
-  (props, ref) => {
-    const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
-    const { error } = (0, import_react8.useContext)(SelectContext);
-    const cls = (0, import_react8.useMemo)(() => {
-      const errorCls = error ? "error" : "";
-      return [errorCls, className].join(" ");
-    }, [className, error]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
-  }
-);
+var Trigger = (0, import_react9.forwardRef)((props, ref) => {
+  const _a = props, { className, color } = _a, rest = __objRest(_a, ["className", "color"]);
+  const { error, color: contextColor } = (0, import_react9.useContext)(SelectContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react9.useMemo)(
+    () => resolveColor(color != null ? color : contextColor),
+    [color, contextColor]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  const cls = (0, import_react9.useMemo)(() => {
+    const errorCls = error ? "error" : "";
+    return (0, import_clsx4.clsx)(errorCls, colorClassName, className);
+  }, [className, colorClassName, error]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_themes9.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_runtime8.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.Select.Root, __spreadValues({}, rest)) });
+  const _a = props, { error, color } = _a, rest = __objRest(_a, ["error", "color"]);
+  const value = (0, import_react9.useMemo)(() => ({ error, color }), [error, color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.Select.Root, __spreadValues({}, rest)) });
 }
 Root4.displayName = "Select.Root";
-var Select = __spreadProps(__spreadValues({}, import_themes8.Select), {
+var Select = __spreadProps(__spreadValues({}, import_themes9.Select), {
   Root: Root4,
   Trigger,
   Content
 });
 
 // src/atoms/check-box-group.tsx
-var import_themes9 = require("@radix-ui/themes");
-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" } = _a, rest = __objRest(_a, ["children", "size"]);
-  const groupSize = (0, import_react9.useMemo)(() => {
+var import_themes10 = require("@radix-ui/themes");
+var import_clsx5 = require("clsx");
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Root5 = (0, import_react10.forwardRef)((props, ref) => {
+  const _a = props, { children, size = "medium", color, className } = _a, rest = __objRest(_a, ["children", "size", "color", "className"]);
+  const groupSize = (0, import_react10.useMemo)(() => {
     switch (size) {
       case "small":
         return "1";
@@ -501,25 +583,61 @@ var Root5 = (0, import_react9.forwardRef)((props, ref) => {
         return "2";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+  const { className: colorClassName } = (0, import_react10.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_themes10.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_themes9.CheckboxGroup.Item
+  Item: import_themes10.CheckboxGroup.Item
 };
 
 // src/atoms/radio-group.tsx
-var import_themes10 = require("@radix-ui/themes");
+var import_themes11 = require("@radix-ui/themes");
+var import_clsx6 = require("clsx");
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Root6 = (0, import_react11.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react11.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_themes11.RadioGroup.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx6.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root6.displayName = "RadioGroup.Root";
+var RadioGroup = __spreadProps(__spreadValues({}, import_themes11.RadioGroup), {
+  Root: Root6
+});
 
 // src/atoms/check-box.tsx
-var import_themes11 = require("@radix-ui/themes");
-var import_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Checkbox = (0, import_react10.forwardRef)(
+var import_themes12 = require("@radix-ui/themes");
+var import_clsx7 = require("clsx");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Checkbox = (0, import_react12.forwardRef)(
   (props, ref) => {
-    const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    const radixSize = (0, import_react10.useMemo)(() => {
+    const _a = props, { size = "medium", color, className } = _a, rest = __objRest(_a, ["size", "color", "className"]);
+    const radixSize = (0, import_react12.useMemo)(() => {
       switch (size) {
         case "small":
           return "1";
@@ -529,22 +647,54 @@ var Checkbox = (0, import_react10.forwardRef)(
           return "3";
       }
     }, [size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes11.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+    const { color: radixColor, className: colorClassName } = resolveColor(color);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_themes12.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_themes12 = require("@radix-ui/themes");
+var import_themes13 = require("@radix-ui/themes");
+var import_clsx8 = require("clsx");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Root7 = (0, import_react13.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react13.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_themes13.RadioCards.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx8.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root7.displayName = "RadioCards.Root";
+var RadioCards = __spreadProps(__spreadValues({}, import_themes13.RadioCards), {
+  Root: Root7
+});
 
 // src/atoms/grid.tsx
-var import_themes13 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 
 // src/atoms/inset.tsx
-var import_themes14 = require("@radix-ui/themes");
+var import_themes15 = require("@radix-ui/themes");
 
 // src/molecules/dynamic-field.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -613,7 +763,7 @@ function DynamicFormField({
   const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
   switch (field.type) {
     case "short_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -621,7 +771,7 @@ function DynamicFormField({
         })
       );
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -629,7 +779,7 @@ function DynamicFormField({
         })
       );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           inputMode: "numeric",
@@ -639,9 +789,9 @@ function DynamicFormField({
         })
       );
     case "long_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
     case "dropdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         Select.Root,
         {
           disabled: readonly,
@@ -650,7 +800,7 @@ function DynamicFormField({
           },
           value: selectedValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               Select.Trigger,
               {
                 placeholder: field.placeholder,
@@ -662,13 +812,13 @@ function DynamicFormField({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
       );
     case "choice":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_themes10.RadioGroup.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        RadioGroup.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : (newValue) => {
@@ -676,26 +826,26 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: String(value || ""),
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes10.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime11.jsx)(
-        import_themes12.RadioCards.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : (newValue) => {
             void setFieldValue(name, newValue);
           },
           value: selectedValue,
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes12.RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { children: option.label }) }, option.value))
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { children: option.label }) }, option.value))
         }
       );
     }
     case "choices":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         CheckboxGroup.Root,
         {
           disabled: readonly,
@@ -704,12 +854,12 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: Array.isArray(value) ? value.map(String) : [],
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "yes_no":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes2.Flex, { gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes2.Flex, { gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Checkbox,
           {
             checked: Boolean(value),
@@ -719,7 +869,7 @@ function DynamicFormField({
             }
           }
         ),
-        field.description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
       ] });
     case "image_radio_card": {
       const options = getImageOptions(field);
@@ -743,23 +893,23 @@ function DynamicFormField({
         if (!selectedOption) return;
         void setFieldValue(name, selectedOption.value);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_themes12.RadioCards.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : handleValueChange,
           value: selectedValue,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes13.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.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_runtime11.jsx)(
-              import_themes12.RadioCards.Item,
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              RadioCards.Item,
               {
                 style: {
                   padding: 0
                 },
                 value: optionValue,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes14.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes15.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "img",
                   {
                     alt: altText,
@@ -786,7 +936,7 @@ function DynamicFormField({
 }
 
 // src/molecules/dynamic-form.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function scrollToFirstError(errors, _fields) {
   const firstErrorFieldName = Object.keys(errors)[0];
   if (!firstErrorFieldName) return;
@@ -816,7 +966,7 @@ function DynamicFormRoot({
   readonly = false,
   formStyle
 }) {
-  const validationSchema = (0, import_react11.useMemo)(() => {
+  const validationSchema = (0, import_react14.useMemo)(() => {
     const schema = {};
     fields.forEach((field) => {
       if (field.validation) {
@@ -841,7 +991,7 @@ function DynamicFormRoot({
     });
     return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
   }, [fields]);
-  const handleSubmit = (0, import_react11.useCallback)(
+  const handleSubmit = (0, import_react14.useCallback)(
     (values) => __async(null, null, function* () {
       yield onSubmit(values);
     }),
@@ -863,7 +1013,7 @@ function DynamicFormRoot({
     validateOnChange: true,
     onSubmit: handleSubmit
   });
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
       const timeoutId = setTimeout(() => {
         scrollToFirstError(formik.errors, fields);
@@ -873,7 +1023,7 @@ function DynamicFormRoot({
       };
     }
   }, [formik.submitCount, formik.errors, fields]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     DynamicFormProvider,
     {
       fields,
@@ -890,15 +1040,15 @@ function DynamicFormFieldList({
 }) {
   const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
   const fields = fieldsProp || fieldsFromContext;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: fields.map((field) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.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_runtime12.jsx)(
-      import_themes15.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_themes16.Box,
       {
         "data-error-field": errorMessage ? field.name : void 0,
         "data-field-name": field.name,
         mb: "2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Form.FormItem,
           {
             errorMessage,
@@ -907,8 +1057,8 @@ function DynamicFormFieldList({
             name: field.name,
             required: field.required,
             children: [
-              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Typo, { variant: "caption", children: field.description }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicFormField, { field })
+              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { variant: "caption", children: field.description }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DynamicFormField, { field })
             ]
           }
         )
@@ -1005,13 +1155,13 @@ function createYupValidation(field, validation) {
 }
 
 // src/molecules/dynamic-form-editor-preview-panel.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function DynamicFormEditorPreviewPanel(props) {
   const { show, fields } = props;
   if (!show) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { style: { width: 420, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { variant: "body", children: "\uD504\uB9AC\uBDF0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DynamicForm.Root, { fields, onSubmit: () => void 0, readonly: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DynamicForm.FieldList, { labelVariant: "body" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Card, { style: { width: 420, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typo, { variant: "body", children: "\uD504\uB9AC\uBDF0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DynamicForm.Root, { fields, onSubmit: () => void 0, readonly: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DynamicForm.FieldList, { labelVariant: "body" }) })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: