labellife-design-tool 2.2.7 → 2.2.9

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, memo, Fragment as Fragment$1 } from 'react';
-import { ButtonBase, Box, Typography, Button, IconButton, TextField, InputAdornment, ClickAwayListener, Paper, ListItem, ListItemIcon, ListItemText, List, Switch, Slider, CircularProgress, FormControlLabel, Checkbox, FormControl, InputLabel, Select, MenuItem, Divider, Alert, Chip, Autocomplete, Tooltip, ToggleButtonGroup, ToggleButton, Menu, Popover } from '@mui/material';
+import { ButtonBase, Box, Typography, Button, IconButton, TextField, InputAdornment, ClickAwayListener, Paper, ListItem, ListItemIcon, ListItemText, List, Switch, Slider, CircularProgress, FormControlLabel, Checkbox, FormControl, InputLabel, Select, MenuItem, Divider, Alert, Chip, Autocomplete, Tooltip, ToggleButtonGroup, ToggleButton, Menu, Popover, FormGroup, RadioGroup, Radio } from '@mui/material';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { types, getParent, getRoot, getSnapshot, applySnapshot, destroy } from 'mobx-state-tree';
 import { v4 } from 'uuid';
@@ -28,6 +28,9 @@ import CloseIcon from '@mui/icons-material/Close';
 import InputIcon from '@mui/icons-material/Input';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import NumbersIcon from '@mui/icons-material/Numbers';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import AddIcon from '@mui/icons-material/Add';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import UndoIcon from '@mui/icons-material/Undo';
@@ -6897,7 +6900,7 @@ function ImagesGrid(_ref) {
   });
 }
 
-var _excluded$2 = ["inputField", "promptText", "inputType", "required", "placeholder"];
+var _excluded$2 = ["inputField", "promptText", "inputType", "required", "placeholder", "options", "minSelections", "maxSelections"];
 var IMAGE_PLACEHOLDER_SRC = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" viewBox=\"0 0 400 400\">\n    <rect width=\"400\" height=\"400\" fill=\"#f0f2f5\" rx=\"12\"/>\n    <rect x=\"110\" y=\"90\" width=\"180\" height=\"145\" rx=\"10\" fill=\"#dde1e7\"/>\n    <circle cx=\"158\" cy=\"135\" r=\"22\" fill=\"#f0f2f5\"/>\n    <polygon points=\"110,235 168,163 210,205 250,163 290,235\" fill=\"#c8cdd6\"/>\n    <rect x=\"140\" y=\"268\" width=\"120\" height=\"14\" rx=\"7\" fill=\"#c8cdd6\"/>\n    <rect x=\"160\" y=\"292\" width=\"80\" height=\"10\" rx=\"5\" fill=\"#dde1e7\"/>\n  </svg>"));
 
 // ── Date formatting helpers ──────────────────────────────────────────
@@ -6939,12 +6942,84 @@ function formatDate$1(date, format) {
   }
 }
 
+// ── Options list editor ──────────────────────────────────────────────
+var OptionsEditor = function OptionsEditor(_ref) {
+  var options = _ref.options,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      ml: 6.5,
+      mr: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 0.75
+    },
+    children: [options.map(function (opt, i) {
+      return /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: 'flex',
+          gap: 0.5,
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/jsx(TextField, {
+          size: "small",
+          value: opt,
+          onChange: function onChange(e) {
+            var next = _toConsumableArray(options);
+            next[i] = e.target.value;
+            _onChange(next);
+          },
+          placeholder: "Option ".concat(i + 1),
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        }), /*#__PURE__*/jsx(IconButton, {
+          size: "small",
+          onClick: function onClick() {
+            return _onChange(options.filter(function (_, j) {
+              return j !== i;
+            }));
+          },
+          disabled: options.length <= 1,
+          sx: {
+            color: '#bbb',
+            '&:hover': {
+              color: '#e57373'
+            }
+          },
+          children: /*#__PURE__*/jsx(DeleteIcon, {
+            fontSize: "small"
+          })
+        })]
+      }, i);
+    }), /*#__PURE__*/jsx(Button, {
+      size: "small",
+      startIcon: /*#__PURE__*/jsx(AddIcon, {}),
+      onClick: function onClick() {
+        return _onChange([].concat(_toConsumableArray(options), ['']));
+      },
+      sx: {
+        alignSelf: 'flex-start',
+        fontSize: 11,
+        textTransform: 'none',
+        color: '#0d83cd',
+        p: 0.5
+      },
+      children: "Add option"
+    })]
+  });
+};
+
 // ── Card component ───────────────────────────────────────────────────
-var InputFieldCard = function InputFieldCard(_ref) {
-  var icon = _ref.icon,
-    label = _ref.label,
-    description = _ref.description,
-    onClick = _ref.onClick;
+var InputFieldCard = function InputFieldCard(_ref2) {
+  var icon = _ref2.icon,
+    label = _ref2.label,
+    description = _ref2.description,
+    onClick = _ref2.onClick;
   return /*#__PURE__*/jsxs(Box, {
     onClick: onClick,
     sx: {
@@ -7000,8 +7075,8 @@ var InputFieldCard = function InputFieldCard(_ref) {
 };
 
 // ── Panel content ────────────────────────────────────────────────────
-var InputFieldsPanelContent = observer(function (_ref2) {
-  var store = _ref2.store;
+var InputFieldsPanelContent = observer(function (_ref3) {
+  var store = _ref3.store;
   var _useState = useState('MM-DD-YYYY'),
     _useState2 = _slicedToArray(_useState, 2),
     dateFormat = _useState2[0],
@@ -7038,6 +7113,34 @@ var InputFieldsPanelContent = observer(function (_ref2) {
     _useState16 = _slicedToArray(_useState15, 2),
     imageRequired = _useState16[0],
     setImageRequired = _useState16[1];
+  var _useState17 = useState(''),
+    _useState18 = _slicedToArray(_useState17, 2),
+    radioPrompt = _useState18[0],
+    setRadioPrompt = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    radioRequired = _useState20[0],
+    setRadioRequired = _useState20[1];
+  var _useState21 = useState(['Option 1', 'Option 2']),
+    _useState22 = _slicedToArray(_useState21, 2),
+    radioOptions = _useState22[0],
+    setRadioOptions = _useState22[1];
+  var _useState23 = useState(''),
+    _useState24 = _slicedToArray(_useState23, 2),
+    listPrompt = _useState24[0],
+    setListPrompt = _useState24[1];
+  var _useState25 = useState(0),
+    _useState26 = _slicedToArray(_useState25, 2),
+    listMinSelections = _useState26[0],
+    setListMinSelections = _useState26[1];
+  var _useState27 = useState(2),
+    _useState28 = _slicedToArray(_useState27, 2),
+    listMaxSelections = _useState28[0],
+    setListMaxSelections = _useState28[1];
+  var _useState29 = useState(['Option 1', 'Option 2']),
+    _useState30 = _slicedToArray(_useState29, 2),
+    listOptions = _useState30[0],
+    setListOptions = _useState30[1];
   var addInputElement = function addInputElement(inputType) {
     var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var page = store.activePage;
@@ -7080,6 +7183,16 @@ var InputFieldsPanelContent = observer(function (_ref2) {
           placeholder = t('sidePanel.inputFields.integerPlaceholder', 'Enter number');
           defaultPrompt = t('sidePanel.inputFields.defaultIntegerPrompt', 'Please enter a number');
           break;
+        case 'radio':
+          dummyText = (extra.options || []).filter(Boolean)[0] || 'Option 1';
+          placeholder = t('sidePanel.inputFields.radioPlaceholder', 'Select an option');
+          defaultPrompt = t('sidePanel.inputFields.defaultRadioPrompt', 'Please select an option');
+          break;
+        case 'list':
+          dummyText = (extra.options || []).filter(Boolean).slice(0, 2).join(', ') || 'Option 1, Option 2';
+          placeholder = t('sidePanel.inputFields.listPlaceholder', 'Select options');
+          defaultPrompt = t('sidePanel.inputFields.defaultListPrompt', 'Please select options');
+          break;
         default:
           dummyText = 'Input';
           placeholder = 'Input';
@@ -7098,7 +7211,7 @@ var InputFieldsPanelContent = observer(function (_ref2) {
         fontFamily: 'Roboto',
         align: 'center',
         fill: '#333333',
-        custom: _objectSpread2({
+        custom: _objectSpread2(_objectSpread2(_objectSpread2({
           inputField: true,
           inputType: inputType,
           placeholder: placeholder,
@@ -7106,6 +7219,11 @@ var InputFieldsPanelContent = observer(function (_ref2) {
           required: extra.required || false
         }, inputType === 'date' ? {
           dateFormat: extra.dateFormat || 'MM-DD-YYYY'
+        } : {}), ['radio', 'list'].includes(inputType) ? {
+          options: (extra.options || []).filter(Boolean)
+        } : {}), inputType === 'list' ? {
+          minSelections: extra.minSelections || 0,
+          maxSelections: extra.maxSelections || 0
         } : {})
       });
     }
@@ -7347,6 +7465,138 @@ var InputFieldsPanelContent = observer(function (_ref2) {
         sx: {
           ml: 5.5
         }
+      }), /*#__PURE__*/jsx(InputFieldCard, {
+        icon: /*#__PURE__*/jsx(RadioButtonCheckedIcon, {
+          fontSize: "small"
+        }),
+        label: t('sidePanel.inputFields.radioInput', 'Radio Input'),
+        description: t('sidePanel.inputFields.radioInputDesc', 'Single option selection'),
+        onClick: function onClick() {
+          return addInputElement('radio', {
+            promptText: radioPrompt,
+            required: radioRequired,
+            options: radioOptions
+          });
+        }
+      }), /*#__PURE__*/jsx(TextField, {
+        size: "small",
+        placeholder: t('sidePanel.inputFields.promptTextHint', 'Prompt text shown to user...'),
+        value: radioPrompt,
+        onChange: function onChange(e) {
+          return setRadioPrompt(e.target.value);
+        },
+        sx: {
+          ml: 6.5,
+          mr: 1,
+          '& .MuiInputBase-input': {
+            fontSize: 12,
+            py: 0.75
+          }
+        }
+      }), /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: radioRequired,
+          onChange: function onChange(e) {
+            return setRadioRequired(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.required', 'Required')
+        }),
+        sx: {
+          ml: 5.5
+        }
+      }), /*#__PURE__*/jsx(OptionsEditor, {
+        options: radioOptions,
+        onChange: setRadioOptions
+      }), /*#__PURE__*/jsx(InputFieldCard, {
+        icon: /*#__PURE__*/jsx(FormatListBulletedIcon, {
+          fontSize: "small"
+        }),
+        label: t('sidePanel.inputFields.listInput', 'List Input'),
+        description: t('sidePanel.inputFields.listInputDesc', 'Multiple option selection'),
+        onClick: function onClick() {
+          return addInputElement('list', {
+            promptText: listPrompt,
+            minSelections: listMinSelections,
+            maxSelections: listMaxSelections,
+            options: listOptions
+          });
+        }
+      }), /*#__PURE__*/jsx(TextField, {
+        size: "small",
+        placeholder: t('sidePanel.inputFields.promptTextHint', 'Prompt text shown to user...'),
+        value: listPrompt,
+        onChange: function onChange(e) {
+          return setListPrompt(e.target.value);
+        },
+        sx: {
+          ml: 6.5,
+          mr: 1,
+          '& .MuiInputBase-input': {
+            fontSize: 12,
+            py: 0.75
+          }
+        }
+      }), /*#__PURE__*/jsx(OptionsEditor, {
+        options: listOptions,
+        onChange: setListOptions
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: 'flex',
+          gap: 1,
+          ml: 6.5,
+          mr: 1
+        },
+        children: [/*#__PURE__*/jsx(TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.minSelections', 'Min select'),
+          value: listMinSelections,
+          onChange: function onChange(e) {
+            return setListMinSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        }), /*#__PURE__*/jsx(TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.maxSelections', 'Max select'),
+          value: listMaxSelections,
+          onChange: function onChange(e) {
+            return setListMaxSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        })]
+      }), /*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          ml: 6.5,
+          color: '#999',
+          fontSize: 10
+        },
+        children: listMinSelections > 0 ? "Required \xB7 min ".concat(listMinSelections).concat(listMaxSelections > 0 ? ", max ".concat(listMaxSelections) : ', no max') : "Optional \xB7 max ".concat(listMaxSelections > 0 ? listMaxSelections : '∞')
       })]
     }), /*#__PURE__*/jsx(Divider, {
       sx: {
@@ -7376,21 +7626,33 @@ var InputFieldsPanelContent = observer(function (_ref2) {
 });
 
 // ── Mark-as-variable sub-form ─────────────────────────────────────────
-var MarkAsVariableForm = observer(function (_ref3) {
+var MarkAsVariableForm = observer(function (_ref4) {
   var _selectedElement$cust;
-  var store = _ref3.store;
-  var _useState17 = useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    markLabel = _useState18[0],
-    setMarkLabel = _useState18[1];
-  var _useState19 = useState(false),
-    _useState20 = _slicedToArray(_useState19, 2),
-    markRequired = _useState20[0],
-    setMarkRequired = _useState20[1];
-  var _useState21 = useState('text'),
-    _useState22 = _slicedToArray(_useState21, 2),
-    markInputType = _useState22[0],
-    setMarkInputType = _useState22[1];
+  var store = _ref4.store;
+  var _useState31 = useState(''),
+    _useState32 = _slicedToArray(_useState31, 2),
+    markLabel = _useState32[0],
+    setMarkLabel = _useState32[1];
+  var _useState33 = useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    markRequired = _useState34[0],
+    setMarkRequired = _useState34[1];
+  var _useState35 = useState('text'),
+    _useState36 = _slicedToArray(_useState35, 2),
+    markInputType = _useState36[0],
+    setMarkInputType = _useState36[1];
+  var _useState37 = useState(['Option 1', 'Option 2']),
+    _useState38 = _slicedToArray(_useState37, 2),
+    markOptions = _useState38[0],
+    setMarkOptions = _useState38[1];
+  var _useState39 = useState(0),
+    _useState40 = _slicedToArray(_useState39, 2),
+    markMinSelections = _useState40[0],
+    setMarkMinSelections = _useState40[1];
+  var _useState41 = useState(2),
+    _useState42 = _slicedToArray(_useState41, 2),
+    markMaxSelections = _useState42[0],
+    setMarkMaxSelections = _useState42[1];
   var selectedIds = store.selectedElementsIds || [];
   var selectedElement = selectedIds.length === 1 ? store.getElementById(selectedIds[0]) : null;
   var isImageElement = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === 'image';
@@ -7399,37 +7661,52 @@ var MarkAsVariableForm = observer(function (_ref3) {
   var isAlreadyVariable = !!(selectedElement !== null && selectedElement !== void 0 && (_selectedElement$cust = selectedElement.custom) !== null && _selectedElement$cust !== void 0 && _selectedElement$cust.inputField);
   useEffect(function () {
     if (selectedElement && isSupportedElement) {
-      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4;
+      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4, _selectedElement$cust5, _selectedElement$cust6, _selectedElement$cust7;
       setMarkLabel(((_selectedElement$cust2 = selectedElement.custom) === null || _selectedElement$cust2 === void 0 ? void 0 : _selectedElement$cust2.promptText) || '');
       setMarkRequired(!!((_selectedElement$cust3 = selectedElement.custom) !== null && _selectedElement$cust3 !== void 0 && _selectedElement$cust3.required));
       setMarkInputType(isImageElement ? 'image' : ((_selectedElement$cust4 = selectedElement.custom) === null || _selectedElement$cust4 === void 0 ? void 0 : _selectedElement$cust4.inputType) || 'text');
+      setMarkOptions(((_selectedElement$cust5 = selectedElement.custom) === null || _selectedElement$cust5 === void 0 ? void 0 : _selectedElement$cust5.options) || ['Option 1', 'Option 2']);
+      setMarkMinSelections(((_selectedElement$cust6 = selectedElement.custom) === null || _selectedElement$cust6 === void 0 ? void 0 : _selectedElement$cust6.minSelections) || 0);
+      setMarkMaxSelections(((_selectedElement$cust7 = selectedElement.custom) === null || _selectedElement$cust7 === void 0 ? void 0 : _selectedElement$cust7.maxSelections) || 2);
     } else {
       setMarkLabel('');
       setMarkRequired(false);
       setMarkInputType('text');
+      setMarkOptions(['Option 1', 'Option 2']);
+      setMarkMinSelections(0);
+      setMarkMaxSelections(2);
     }
   }, [selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id]);
   var handleMark = function handleMark() {
     if (!selectedElement || !markLabel.trim()) return;
+    var effectiveType = isImageElement ? 'image' : markInputType;
     selectedElement.set({
-      custom: _objectSpread2(_objectSpread2({}, selectedElement.custom), {}, {
+      custom: _objectSpread2(_objectSpread2(_objectSpread2({}, selectedElement.custom), {}, {
         inputField: true,
         promptText: markLabel.trim(),
-        inputType: isImageElement ? 'image' : markInputType,
+        inputType: effectiveType,
         required: markRequired
-      })
+      }, ['radio', 'list'].includes(effectiveType) ? {
+        options: markOptions.filter(Boolean)
+      } : {}), effectiveType === 'list' ? {
+        minSelections: markMinSelections,
+        maxSelections: markMaxSelections
+      } : {})
     });
     store.history.addUndoState();
   };
   var handleUnmark = function handleUnmark() {
     if (!selectedElement) return;
-    var _ref4 = selectedElement.custom || {};
-      _ref4.inputField;
-      _ref4.promptText;
-      _ref4.inputType;
-      _ref4.required;
-      _ref4.placeholder;
-      var rest = _objectWithoutProperties(_ref4, _excluded$2);
+    var _ref5 = selectedElement.custom || {};
+      _ref5.inputField;
+      _ref5.promptText;
+      _ref5.inputType;
+      _ref5.required;
+      _ref5.placeholder;
+      _ref5.options;
+      _ref5.minSelections;
+      _ref5.maxSelections;
+      var rest = _objectWithoutProperties(_ref5, _excluded$2);
     selectedElement.set({
       custom: rest
     });
@@ -7554,9 +7831,84 @@ var MarkAsVariableForm = observer(function (_ref3) {
             fontSize: 12
           },
           children: t('sidePanel.inputFields.dateInput', 'Date Input')
+        }), /*#__PURE__*/jsx(MenuItem, {
+          value: "radio",
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.radioInput', 'Radio Input')
+        }), /*#__PURE__*/jsx(MenuItem, {
+          value: "list",
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.listInput', 'List Input')
         })]
       })]
-    }), /*#__PURE__*/jsx(FormControlLabel, {
+    }), isTextElement && (markInputType === 'radio' || markInputType === 'list') && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          color: '#888',
+          fontSize: 11
+        },
+        children: "Options"
+      }), /*#__PURE__*/jsx(OptionsEditor, {
+        options: markOptions,
+        onChange: setMarkOptions
+      })]
+    }), isTextElement && markInputType === 'list' && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: 'flex',
+          gap: 1
+        },
+        children: [/*#__PURE__*/jsx(TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.minSelections', 'Min select'),
+          value: markMinSelections,
+          onChange: function onChange(e) {
+            return setMarkMinSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        }), /*#__PURE__*/jsx(TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.maxSelections', 'Max select'),
+          value: markMaxSelections,
+          onChange: function onChange(e) {
+            return setMarkMaxSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        })]
+      }), /*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          color: '#999',
+          fontSize: 10
+        },
+        children: markMinSelections > 0 ? "Required \xB7 min ".concat(markMinSelections).concat(markMaxSelections > 0 ? ", max ".concat(markMaxSelections) : ', no max') : "Optional \xB7 max ".concat(markMaxSelections > 0 ? markMaxSelections : '∞')
+      })]
+    }), (!isTextElement || markInputType !== 'list') && /*#__PURE__*/jsx(FormControlLabel, {
       control: /*#__PURE__*/jsx(Checkbox, {
         size: "small",
         checked: markRequired,
@@ -9597,8 +9949,10 @@ var TextElementComponent = observer(function (_ref) {
     var scaleY = absScale.y;
     var cssFontStyle = element.fontStyle === 'italic' ? 'italic' : 'normal';
     var cssFontWeight = String(element.fontWeight || 'normal');
+    var originalText = element.text;
     var textarea = document.createElement('textarea');
-    textarea.value = element.text;
+    textarea.value = '';
+    textarea.placeholder = originalText;
     textarea.style.position = 'absolute';
     textarea.style.top = "".concat(textPosition.y, "px");
     textarea.style.left = "".concat(textPosition.x, "px");
@@ -9631,15 +9985,21 @@ var TextElementComponent = observer(function (_ref) {
     textarea.style.wordBreak = 'break-word';
     textarea.style.minHeight = '0';
     textarea.style.minWidth = '0';
+
+    // Placeholder inherits the element's text color at 40% opacity
+    var placeholderStyle = document.createElement('style');
+    placeholderStyle.textContent = "\n      textarea:placeholder-shown { opacity: 1; }\n      textarea::placeholder { color: ".concat(element.fill, "; opacity: 0.4; }\n    ");
+    stageContainer.appendChild(placeholderStyle);
     stageContainer.appendChild(textarea);
     textarea.focus();
-    textarea.select();
     var removed = false;
     var removeTextarea = function removeTextarea() {
+      var cancel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (removed) return;
       removed = true;
+      var newText = !cancel && textarea.value.length > 0 ? textarea.value : originalText;
       element.set({
-        text: textarea.value
+        text: newText
       });
       element.toggleEditMode(false);
       if (grp) grp.show();
@@ -9647,12 +10007,15 @@ var TextElementComponent = observer(function (_ref) {
       if (textarea.parentNode) {
         textarea.parentNode.removeChild(textarea);
       }
+      if (placeholderStyle.parentNode) {
+        placeholderStyle.parentNode.removeChild(placeholderStyle);
+      }
     };
-    textarea.addEventListener('blur', removeTextarea);
+    textarea.addEventListener('blur', function () {
+      return removeTextarea(false);
+    });
     textarea.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        removeTextarea();
-      }
+      if (e.key === 'Escape') removeTextarea(true);
     });
   };
 
@@ -10310,12 +10673,20 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
     imagePreview = _useState4[0],
     setImagePreview = _useState4[1];
   var fileInputRef = useRef(null);
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedItems = _useState6[0],
+    setSelectedItems = _useState6[1];
   var config = getInputFieldsConfig();
   var custom = field.custom || {};
   var inputType = custom.inputType || 'text';
   var promptText = custom.promptText || custom.placeholder || 'Please provide input';
   var dateFormat = custom.dateFormat || 'MM-DD-YYYY';
   var isRequired = custom.required === true;
+  var options = custom.options || [];
+  var minSelections = custom.minSelections || 0;
+  var maxSelections = custom.maxSelections || options.length;
+  var isSubmitDisabled = inputType === 'list' ? selectedItems.length < minSelections : isRequired && !value;
   var logoUrl = config.logoUrl || null;
   var headerText = config.headerText || null;
   var accentColor = config.accentColor || '#0d83cd';
@@ -10323,6 +10694,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   useEffect(function () {
     setValue('');
     setImagePreview(null);
+    setSelectedItems([]);
   }, [field.id]);
   var handleImageSelect = function handleImageSelect(e) {
     var _e$target$files;
@@ -10342,12 +10714,14 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
       var dateObj = parseDateFromFormat(value);
       var formatted = formatDate(dateObj, dateFormat);
       onSubmit(field.id, formatted);
+    } else if (inputType === 'list') {
+      onSubmit(field.id, selectedItems.join(', '));
     } else {
       onSubmit(field.id, value);
     }
   };
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter' && inputType !== 'image') handleSubmit();
+    if (e.key === 'Enter' && inputType !== 'image' && inputType !== 'list' && inputType !== 'radio') handleSubmit();
   };
   var renderInput = function renderInput() {
     var sharedSx = _objectSpread2({
@@ -10487,6 +10861,119 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
             })]
           })]
         });
+      case 'radio':
+        return /*#__PURE__*/jsx(RadioGroup, {
+          value: value,
+          onChange: function onChange(e) {
+            return setValue(e.target.value);
+          },
+          sx: {
+            mt: 1,
+            gap: 1
+          },
+          children: options.map(function (opt) {
+            return /*#__PURE__*/jsx(FormControlLabel, {
+              value: opt,
+              control: /*#__PURE__*/jsx(Radio, {
+                sx: {
+                  color: '#d0d5dd',
+                  '&.Mui-checked': {
+                    color: accentColor
+                  }
+                }
+              }),
+              label: /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: 18
+                },
+                children: opt
+              }),
+              sx: {
+                m: 0,
+                border: '1px solid',
+                borderColor: value === opt ? accentColor : '#d0d5dd',
+                borderRadius: '8px',
+                px: 2,
+                py: 0.75,
+                transition: 'all 0.15s ease',
+                backgroundColor: value === opt ? 'rgba(13,131,205,0.04)' : 'transparent',
+                '&:hover': {
+                  borderColor: accentColor,
+                  backgroundColor: 'rgba(13,131,205,0.03)'
+                }
+              }
+            }, opt);
+          })
+        });
+      case 'list':
+        {
+          var isAtMax = maxSelections > 0 && selectedItems.length >= maxSelections;
+          return /*#__PURE__*/jsxs(Box, {
+            sx: {
+              mt: 1
+            },
+            children: [/*#__PURE__*/jsx(FormGroup, {
+              sx: {
+                gap: 1
+              },
+              children: options.map(function (opt) {
+                var checked = selectedItems.includes(opt);
+                var disabled = !checked && isAtMax;
+                return /*#__PURE__*/jsx(FormControlLabel, {
+                  control: /*#__PURE__*/jsx(Checkbox, {
+                    checked: checked,
+                    disabled: disabled,
+                    onChange: function onChange(e) {
+                      if (e.target.checked) {
+                        setSelectedItems(function (prev) {
+                          return [].concat(_toConsumableArray(prev), [opt]);
+                        });
+                      } else {
+                        setSelectedItems(function (prev) {
+                          return prev.filter(function (i) {
+                            return i !== opt;
+                          });
+                        });
+                      }
+                    },
+                    sx: {
+                      color: '#d0d5dd',
+                      '&.Mui-checked': {
+                        color: accentColor
+                      }
+                    }
+                  }),
+                  label: /*#__PURE__*/jsx(Typography, {
+                    sx: {
+                      fontSize: 18,
+                      opacity: disabled ? 0.45 : 1
+                    },
+                    children: opt
+                  }),
+                  sx: {
+                    m: 0,
+                    border: '1px solid',
+                    borderColor: checked ? accentColor : '#d0d5dd',
+                    borderRadius: '8px',
+                    px: 2,
+                    py: 0.75,
+                    opacity: disabled ? 0.6 : 1,
+                    transition: 'all 0.15s ease',
+                    backgroundColor: checked ? 'rgba(13,131,205,0.04)' : 'transparent'
+                  }
+                }, opt);
+              })
+            }), /*#__PURE__*/jsxs(Typography, {
+              variant: "caption",
+              sx: {
+                color: '#999',
+                display: 'block',
+                mt: 1.5
+              },
+              children: [selectedItems.length, maxSelections > 0 ? "/".concat(maxSelections) : '', " selected", minSelections > 0 && " \xB7 min ".concat(minSelections, " required")]
+            })]
+          });
+        }
       case 'text':
       default:
         return /*#__PURE__*/jsx(TextField, {
@@ -10629,7 +11116,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
           }), /*#__PURE__*/jsx(Button, {
             variant: "contained",
             onClick: handleSubmit,
-            disabled: isRequired && !value,
+            disabled: isSubmitDisabled,
             sx: _objectSpread2({
               textTransform: 'none',
               fontWeight: 600,
@@ -10645,7 +11132,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
               }
             }, config.submitButtonStyle),
             children: config.submitButtonText || t('inputFieldsDialog.submit', 'Continue')
-          }), !isRequired && /*#__PURE__*/jsx(Button, {
+          }), (inputType === 'list' ? minSelections === 0 : !isRequired) && /*#__PURE__*/jsx(Button, {
             variant: "outlined",
             onClick: function onClick() {
               return onSkip(field.id);
@@ -10682,10 +11169,10 @@ var InputFieldsDialog = observer(function (_ref2) {
     backTrigger = _ref2$backTrigger === void 0 ? 0 : _ref2$backTrigger;
   // displayIndex counts how many fields have been answered (for step indicator only).
   // Navigation always uses fields[0] — the first remaining pending field.
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    displayIndex = _useState6[0],
-    setDisplayIndex = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    displayIndex = _useState8[0],
+    setDisplayIndex = _useState8[1];
   var initialTotalRef = useRef(0);
   var completedHistoryRef = useRef([]);
   var isGoingBackRef = useRef(false);
@@ -10830,7 +11317,9 @@ var InputFieldsDialog = observer(function (_ref2) {
     text: config.CustomTextDialog,
     date: config.CustomDateDialog,
     integer: config.CustomIntegerDialog,
-    image: config.CustomImageDialog
+    image: config.CustomImageDialog,
+    radio: config.CustomRadioDialog,
+    list: config.CustomListDialog
   };
   var fieldType = currentField.custom && currentField.custom.inputType || 'text';
   var PerTypeDialog = TYPE_DIALOG_MAP[fieldType];