@tipp/ui 2.3.22 → 2.3.24

package/dist/molecules/dynamic-form-response-item.cjs

@@ -23,56 +23,90 @@ __export(dynamic_form_response_item_exports, {
   DynamicFormResponseItem: () => DynamicFormResponseItem
 });
 module.exports = __toCommonJS(dynamic_form_response_item_exports);
+
+// src/utils/get-dynamic-form-display-value.ts
+function isEmptyDisplayValue(value) {
+  return value === void 0 || value === null || value === "";
+}
+function findOptionLabel(options, value) {
+  const valueString = String(value);
+  const found = options.find(
+    (option) => String(option.value) === valueString
+  );
+  return found == null ? void 0 : found.label;
+}
+function joinLabelsOrValues(options, values) {
+  const labels = values.map((v) => {
+    const label = findOptionLabel(options, v);
+    return label != null ? label : String(v);
+  });
+  return labels.join(", ");
+}
+function getDynamicFormDisplayValue(field, value) {
+  if (isEmptyDisplayValue(value)) return "";
+  switch (field.type) {
+    case "dropdown":
+    case "choice":
+    case "radio_cards": {
+      const label = findOptionLabel(field.options, value);
+      return label != null ? label : String(value);
+    }
+    case "image_radio_card": {
+      const label = findOptionLabel(field.options, value);
+      return label != null ? label : String(value);
+    }
+    case "choices": {
+      if (Array.isArray(value)) {
+        return joinLabelsOrValues(field.options, value);
+      }
+      const label = findOptionLabel(field.options, value);
+      return label != null ? label : String(value);
+    }
+    case "yes_no": {
+      if (value === true || value === "true" || value === "yes") return "\uB3D9\uC758";
+      if (value === false || value === "false" || value === "no") return "\uBE44\uB3D9\uC758";
+      return String(value);
+    }
+    case "short_text":
+    case "long_text":
+    case "number":
+    case "email":
+    default:
+      return String(value);
+  }
+}
+
+// src/molecules/dynamic-form-response-item.tsx
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
 function DynamicFormResponseItem({
   payload,
   questionType,
   config
 }) {
-  if (!payload || typeof payload !== "object") {
-    return String(payload || "\uC751\uB2F5 \uC5C6\uC74C");
-  }
-  const payloadObj = payload;
-  const value = payloadObj.value;
+  const value = isRecord(payload) && "value" in payload ? payload.value : payload;
   if (value === void 0 || value === null || value === "") {
     return "\uC751\uB2F5 \uC5C6\uC74C";
   }
-  const getOptions = (fieldConfig) => {
-    if (!fieldConfig || typeof fieldConfig !== "object") return void 0;
-    if ("options" in fieldConfig && Array.isArray(fieldConfig.options)) {
-      return fieldConfig.options;
-    }
-    return void 0;
-  };
-  const options = getOptions(config);
+  if (config) {
+    const displayValue = getDynamicFormDisplayValue(config, value);
+    return displayValue === "" ? "\uC751\uB2F5 \uC5C6\uC74C" : displayValue;
+  }
   switch (questionType) {
     case "text":
     case "textarea":
       return String(value);
     case "radio":
     case "select":
-    case "choice":
-      if (options) {
-        const option = options.find((opt) => opt.value === value);
-        return option ? option.label : String(value);
-      }
       return String(value);
     case "checkbox":
     case "choices":
       if (Array.isArray(value)) {
-        if (options) {
-          return value.map((val) => {
-            const option = options.find((opt) => opt.value === val);
-            return option ? option.label : String(val);
-          }).join(", ");
-        }
-        return value.join(", ");
+        return value.map((v) => String(v)).join(", ");
       }
       return String(value);
     case "rating":
-      if (options) {
-        const option = options.find((opt) => opt.value === value);
-        return option ? option.label : String(value);
-      }
       return String(value);
     case "number":
       return String(value);

package/dist/molecules/dynamic-form-response-item.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/dynamic-form-response-item.tsx"],"sourcesContent":["import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\ninterface DynamicFormResponseItemProps {\n  payload: unknown;\n  questionType: string;\n  config?: DynamicFormFieldSchema;\n}\n\nexport function DynamicFormResponseItem({\n  payload,\n  questionType,\n  config,\n}: DynamicFormResponseItemProps): string {\n  if (!payload || typeof payload !== 'object') {\n    return String(payload || '응답 없음');\n  }\n\n  const payloadObj = payload as { value?: unknown };\n  const value = payloadObj.value;\n\n  // value가 없거나 빈 값인 경우\n  if (value === undefined || value === null || value === '') {\n    return '응답 없음';\n  }\n\n  // options가 있는 필드 타입들 확인\n  const getOptions = (\n    fieldConfig?: DynamicFormFieldSchema\n  ): { label: string; value: string | number }[] | undefined => {\n    if (!fieldConfig || typeof fieldConfig !== 'object') return undefined;\n    if ('options' in fieldConfig && Array.isArray(fieldConfig.options)) {\n      return fieldConfig.options as {\n        label: string;\n        value: string | number;\n      }[];\n    }\n    return undefined;\n  };\n\n  const options = getOptions(config);\n\n  switch (questionType) {\n    case 'text':\n    case 'textarea':\n      return String(value);\n    case 'radio':\n    case 'select':\n    case 'choice':\n      if (options) {\n        const option = options.find((opt) => opt.value === value);\n        return option ? option.label : String(value);\n      }\n      return String(value);\n    case 'checkbox':\n    case 'choices': \n      if (Array.isArray(value)) {\n        if (options) {\n          return value\n            .map((val) => {\n              const option = options.find((opt) => opt.value === val);\n              return option ? option.label : String(val);\n            })\n            .join(', ');\n        }\n        return value.join(', ');\n      }\n      return String(value);\n    case 'rating':\n      if (options) {\n        const option = options.find((opt) => opt.value === value);\n        return option ? option.label : String(value);\n      }\n      return String(value);\n    case 'number':\n      return String(value);\n    case 'yes_no':\n      if (value === true || value === 'true' || value === 'yes') {\n        return '동의';\n      }\n      if (value === false || value === 'false' || value === 'no') {\n        return '비동의';\n      }\n      return String(value);\n    default:\n      return String(value);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,MAAI,CAAC,WAAW,OAAO,YAAY,UAAU;AAC3C,WAAO,OAAO,WAAW,2BAAO;AAAA,EAClC;AAEA,QAAM,aAAa;AACnB,QAAM,QAAQ,WAAW;AAGzB,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,WAAO;AAAA,EACT;AAGA,QAAM,aAAa,CACjB,gBAC4D;AAC5D,QAAI,CAAC,eAAe,OAAO,gBAAgB,SAAU,QAAO;AAC5D,QAAI,aAAa,eAAe,MAAM,QAAQ,YAAY,OAAO,GAAG;AAClE,aAAO,YAAY;AAAA,IAIrB;AACA,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AAEjC,UAAQ,cAAc;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,UAAI,SAAS;AACX,cAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,UAAU,KAAK;AACxD,eAAO,SAAS,OAAO,QAAQ,OAAO,KAAK;AAAA,MAC7C;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AACH,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,YAAI,SAAS;AACX,iBAAO,MACJ,IAAI,CAAC,QAAQ;AACZ,kBAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,UAAU,GAAG;AACtD,mBAAO,SAAS,OAAO,QAAQ,OAAO,GAAG;AAAA,UAC3C,CAAC,EACA,KAAK,IAAI;AAAA,QACd;AACA,eAAO,MAAM,KAAK,IAAI;AAAA,MACxB;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,UAAI,SAAS;AACX,cAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,UAAU,KAAK;AACxD,eAAO,SAAS,OAAO,QAAQ,OAAO,KAAK;AAAA,MAC7C;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,UAAI,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO;AACzD,eAAO;AAAA,MACT;AACA,UAAI,UAAU,SAAS,UAAU,WAAW,UAAU,MAAM;AAC1D,eAAO;AAAA,MACT;AACA,aAAO,OAAO,KAAK;AAAA,IACrB;AACE,aAAO,OAAO,KAAK;AAAA,EACvB;AACF;","names":[]}
+{"version":3,"sources":["../../src/molecules/dynamic-form-response-item.tsx","../../src/utils/get-dynamic-form-display-value.ts"],"sourcesContent":["import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\nimport { getDynamicFormDisplayValue } from '@/utils/get-dynamic-form-display-value';\n\ninterface DynamicFormResponseItemProps {\n  payload: unknown;\n  questionType: string;\n  config?: DynamicFormFieldSchema;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);\n}\n\nexport function DynamicFormResponseItem({\n  payload,\n  questionType,\n  config,\n}: DynamicFormResponseItemProps): string {\n  const value: unknown =\n    isRecord(payload) && 'value' in payload ? payload.value : payload;\n\n  // value가 없거나 빈 값인 경우\n  if (value === undefined || value === null || value === '') {\n    return '응답 없음';\n  }\n\n  if (config) {\n    const displayValue: string = getDynamicFormDisplayValue(config, value);\n    return displayValue === '' ? '응답 없음' : displayValue;\n  }\n\n  switch (questionType) {\n    case 'text':\n    case 'textarea':\n      return String(value);\n    case 'radio':\n    case 'select':\n      return String(value);\n    case 'checkbox':\n    case 'choices':\n      if (Array.isArray(value)) {\n        return value.map((v) => String(v)).join(', ');\n      }\n      return String(value);\n    case 'rating':\n      return String(value);\n    case 'number':\n      return String(value);\n    case 'yes_no':\n      if (value === true || value === 'true' || value === 'yes') {\n        return '동의';\n      }\n      if (value === false || value === 'false' || value === 'no') {\n        return '비동의';\n      }\n      return String(value);\n    default:\n      return String(value);\n  }\n}\n","import type {\n  DynamicFormFieldSchema,\n  FieldOption,\n  ImageFieldOption,\n} from '@/types/dynamic-form-schema-generated';\n\nfunction isEmptyDisplayValue(value: unknown): boolean {\n  return value === undefined || value === null || value === '';\n}\n\nfunction findOptionLabel(\n  options: FieldOption[] | ImageFieldOption[],\n  value: unknown\n): string | undefined {\n  const valueString = String(value);\n  const found: FieldOption | ImageFieldOption | undefined = options.find(\n    (option: FieldOption | ImageFieldOption) =>\n      String(option.value) === valueString\n  );\n  return found?.label;\n}\n\nfunction joinLabelsOrValues(\n  options: FieldOption[],\n  values: unknown[]\n): string {\n  const labels: string[] = values.map((v: unknown) => {\n    const label: string | undefined = findOptionLabel(options, v);\n    return label ?? String(v);\n  });\n  return labels.join(', ');\n}\n\nexport function getDynamicFormDisplayValue(\n  field: DynamicFormFieldSchema,\n  value: unknown\n): string {\n  if (isEmptyDisplayValue(value)) return '';\n\n  switch (field.type) {\n    case 'dropdown':\n    case 'choice':\n    case 'radio_cards': {\n      const label: string | undefined = findOptionLabel(field.options, value);\n      return label ?? String(value);\n    }\n\n    case 'image_radio_card': {\n      const label: string | undefined = findOptionLabel(field.options, value);\n      return label ?? String(value);\n    }\n\n    case 'choices': {\n      if (Array.isArray(value)) {\n        return joinLabelsOrValues(field.options, value);\n      }\n      const label: string | undefined = findOptionLabel(field.options, value);\n      return label ?? String(value);\n    }\n\n    case 'yes_no': {\n      if (value === true || value === 'true' || value === 'yes') return '동의';\n      if (value === false || value === 'false' || value === 'no') return '비동의';\n      return String(value);\n    }\n\n    case 'short_text':\n    case 'long_text':\n    case 'number':\n    case 'email':\n    default:\n      return String(value);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,SAAS,oBAAoB,OAAyB;AACpD,SAAO,UAAU,UAAa,UAAU,QAAQ,UAAU;AAC5D;AAEA,SAAS,gBACP,SACA,OACoB;AACpB,QAAM,cAAc,OAAO,KAAK;AAChC,QAAM,QAAoD,QAAQ;AAAA,IAChE,CAAC,WACC,OAAO,OAAO,KAAK,MAAM;AAAA,EAC7B;AACA,SAAO,+BAAO;AAChB;AAEA,SAAS,mBACP,SACA,QACQ;AACR,QAAM,SAAmB,OAAO,IAAI,CAAC,MAAe;AAClD,UAAM,QAA4B,gBAAgB,SAAS,CAAC;AAC5D,WAAO,wBAAS,OAAO,CAAC;AAAA,EAC1B,CAAC;AACD,SAAO,OAAO,KAAK,IAAI;AACzB;AAEO,SAAS,2BACd,OACA,OACQ;AACR,MAAI,oBAAoB,KAAK,EAAG,QAAO;AAEvC,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,eAAe;AAClB,YAAM,QAA4B,gBAAgB,MAAM,SAAS,KAAK;AACtE,aAAO,wBAAS,OAAO,KAAK;AAAA,IAC9B;AAAA,IAEA,KAAK,oBAAoB;AACvB,YAAM,QAA4B,gBAAgB,MAAM,SAAS,KAAK;AACtE,aAAO,wBAAS,OAAO,KAAK;AAAA,IAC9B;AAAA,IAEA,KAAK,WAAW;AACd,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,mBAAmB,MAAM,SAAS,KAAK;AAAA,MAChD;AACA,YAAM,QAA4B,gBAAgB,MAAM,SAAS,KAAK;AACtE,aAAO,wBAAS,OAAO,KAAK;AAAA,IAC9B;AAAA,IAEA,KAAK,UAAU;AACb,UAAI,UAAU,QAAQ,UAAU,UAAU,UAAU,MAAO,QAAO;AAClE,UAAI,UAAU,SAAS,UAAU,WAAW,UAAU,KAAM,QAAO;AACnE,aAAO,OAAO,KAAK;AAAA,IACrB;AAAA,IAEA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,OAAO,KAAK;AAAA,EACvB;AACF;;;ADhEA,SAAS,SAAS,OAAkD;AAClE,SAAO,QAAQ,KAAK,KAAK,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,QACJ,SAAS,OAAO,KAAK,WAAW,UAAU,QAAQ,QAAQ;AAG5D,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ;AACV,UAAM,eAAuB,2BAA2B,QAAQ,KAAK;AACrE,WAAO,iBAAiB,KAAK,8BAAU;AAAA,EACzC;AAEA,UAAQ,cAAc;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AACH,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,MAAM,IAAI,CAAC,MAAM,OAAO,CAAC,CAAC,EAAE,KAAK,IAAI;AAAA,MAC9C;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,UAAI,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO;AACzD,eAAO;AAAA,MACT;AACA,UAAI,UAAU,SAAS,UAAU,WAAW,UAAU,MAAM;AAC1D,eAAO;AAAA,MACT;AACA,aAAO,OAAO,KAAK;AAAA,IACrB;AACE,aAAO,OAAO,KAAK;AAAA,EACvB;AACF;","names":[]}

package/dist/molecules/dynamic-form-response-item.js

@@ -1,6 +1,7 @@
 import {
   DynamicFormResponseItem
-} from "../chunk-QTQKJ4A2.js";
+} from "../chunk-77H5BUYO.js";
+import "../chunk-K7LTEKQS.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   DynamicFormResponseItem

package/dist/molecules/dynamic-form.cjs

@@ -86,7 +86,7 @@ module.exports = __toCommonJS(dynamic_form_exports);
 var import_react10 = require("react");
 var import_formik = require("formik");
 var Yup = __toESM(require("yup"), 1);
-var import_themes11 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
 var import_themes = require("@radix-ui/themes");
@@ -499,8 +499,57 @@ var Checkbox = (0, import_react9.forwardRef)(
 );
 Checkbox.displayName = "Checkbox";
 
+// src/atoms/radio-cards.tsx
+var import_themes11 = require("@radix-ui/themes");
+
+// src/atoms/grid.tsx
+var import_themes12 = require("@radix-ui/themes");
+
+// src/atoms/inset.tsx
+var import_themes13 = require("@radix-ui/themes");
+
 // src/molecules/dynamic-field.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldOption(value) {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return typeof label === "string" && (typeof optionValue === "string" || typeof optionValue === "number");
+}
+function isImageFieldOption(value) {
+  if (!isRecord(value)) return false;
+  if (!isFieldOption(value)) return false;
+  const imageSrc = value.imageSrc;
+  const alt = value.alt;
+  return typeof imageSrc === "string" && (alt === void 0 || typeof alt === "string");
+}
+function getStringProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "string" ? value : fallback;
+}
+function getNumberProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "number" ? value : fallback;
+}
+function getOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isFieldOption)) return null;
+  return options;
+}
+function getImageOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isImageFieldOption)) return null;
+  return options;
+}
 function DynamicFormField({
   field
 }) {
@@ -513,7 +562,7 @@ function DynamicFormField({
     handleBlur,
     readonly
   } = useDynamicForm();
-  const { name, type } = field;
+  const name = field.name;
   const value = getFieldValue(name);
   const error = getFieldError(name);
   const touched = getFieldTouched(name);
@@ -526,14 +575,22 @@ function DynamicFormField({
     error: hasError,
     disabled: readonly
   };
-  switch (type) {
+  const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  switch (field.type) {
     case "short_text":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "text"
+        })
+      );
     case "email":
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
-          type: type === "short_text" ? "text" : type
+          type: "email"
         })
       );
     case "number":
@@ -556,9 +613,20 @@ function DynamicFormField({
           onValueChange: readonly ? void 0 : (newValue) => {
             void setFieldValue(name, newValue);
           },
-          value,
+          value: selectedValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select.Trigger, { placeholder: field.placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Select.Trigger,
+              {
+                placeholder: field.placeholder,
+                style: {
+                  alignSelf: "flex-start",
+                  width: "fit-content",
+                  minWidth: "180px",
+                  maxWidth: "100%"
+                }
+              }
+            ),
             /* @__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)) })
           ]
         }
@@ -576,6 +644,21 @@ function DynamicFormField({
           children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.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,
+        {
+          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))
+        }
+      );
+    }
     case "choices":
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         CheckboxGroup.Root,
@@ -603,6 +686,65 @@ function DynamicFormField({
         ),
         field.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
       ] });
+    case "image_radio_card": {
+      const options = getImageOptions(field);
+      if (!options) return null;
+      const gridColumnsCount = Math.max(1, getNumberProp(field, "gridColumnsCount", 4));
+      const gridColumns = getStringProp(
+        field,
+        "gridColumns",
+        `repeat(${gridColumnsCount}, 1fr)`
+      );
+      const gridItemHeight = getStringProp(field, "gridItemHeight", "100px");
+      const gridRows = getStringProp(field, "gridRows", gridItemHeight);
+      const gridGap = getStringProp(field, "gridGap", "2");
+      const imageFitRaw = getStringProp(field, "imageFit", "cover");
+      const imageFit = imageFitRaw === "contain" ? "contain" : "cover";
+      const handleValueChange = (newValue) => {
+        if (readonly) return;
+        const selectedOption = options.find(
+          (option) => String(option.value) === newValue
+        );
+        if (!selectedOption) return;
+        void setFieldValue(name, selectedOption.value);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_themes11.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) => {
+            const optionValue = String(option.value);
+            const altText = option.alt || option.label;
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_themes11.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)(
+                  "img",
+                  {
+                    alt: altText,
+                    src: option.imageSrc,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "block",
+                      objectFit: imageFit,
+                      opacity: readonly ? 0.7 : 1
+                    }
+                  }
+                ) })
+              },
+              optionValue
+            );
+          }) })
+        }
+      );
+    }
     default:
       return null;
   }
@@ -716,7 +858,7 @@ function DynamicFormFieldList({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.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_themes11.Box,
+      import_themes14.Box,
       {
         "data-error-field": errorMessage ? field.name : void 0,
         "data-field-name": field.name,