labellife-design-tool 2.1.5 → 2.1.7

package/dist/cjs/canvas/workspace.js

@@ -1708,7 +1708,7 @@ function parseDateFromFormat(dateStr, format) {
   return new Date();
 }
 
-// ── Default single-field dialog ──────────────────────────────────────
+// ── Default single-field dialog (full-page overlay) ──────────────────
 var SingleFieldDialog = function SingleFieldDialog(_ref) {
   var field = _ref.field,
     onSubmit = _ref.onSubmit,
@@ -1730,6 +1730,10 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   var promptText = custom.promptText || custom.placeholder || 'Please provide input';
   var dateFormat = custom.dateFormat || 'MM-DD-YYYY';
   var isRequired = custom.required === true;
+  var logoUrl = config.logoUrl || null;
+  var headerText = config.headerText || null;
+  var accentColor = config.accentColor || '#0d83cd';
+  var progressPct = Math.round((currentIndex + 1) / totalCount * 100);
   react.useEffect(function () {
     setValue('');
     setImagePreview(null);
@@ -1757,11 +1761,25 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
     }
   };
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter') {
-      handleSubmit();
-    }
+    if (e.key === 'Enter' && inputType !== 'image') handleSubmit();
   };
   var renderInput = function renderInput() {
+    var sharedSx = _objectSpread2({
+      mt: 1,
+      '& .MuiOutlinedInput-root': {
+        borderRadius: '8px',
+        fontSize: 22,
+        '& fieldset': {
+          borderColor: '#d0d5dd'
+        },
+        '&:hover fieldset': {
+          borderColor: accentColor
+        },
+        '&.Mui-focused fieldset': {
+          borderColor: accentColor
+        }
+      }
+    }, config.inputStyle);
     switch (inputType) {
       case 'date':
         return /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -1773,13 +1791,10 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
           },
           onKeyDown: handleKeyDown,
           autoFocus: true,
-          size: "small",
-          sx: _objectSpread2({
-            mt: 1
-          }, config.inputStyle),
           InputLabelProps: {
             shrink: true
-          }
+          },
+          sx: sharedSx
         });
       case 'integer':
         return /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -1788,20 +1803,15 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
           value: value,
           onChange: function onChange(e) {
             var v = e.target.value;
-            if (v === '' || /^-?\d*$/.test(v)) {
-              setValue(v);
-            }
+            if (v === '' || /^-?\d*$/.test(v)) setValue(v);
           },
           onKeyDown: handleKeyDown,
           autoFocus: true,
-          size: "small",
           placeholder: "0",
           inputProps: {
             step: 1
           },
-          sx: _objectSpread2({
-            mt: 1
-          }, config.inputStyle)
+          sx: sharedSx
         });
       case 'image':
         return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
@@ -1821,13 +1831,13 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
-              gap: 1.5
+              gap: 2
             },
             children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
               sx: {
                 width: '100%',
-                maxHeight: 220,
-                borderRadius: 1,
+                maxHeight: 260,
+                borderRadius: '10px',
                 overflow: 'hidden',
                 border: '1px solid #e0e0e0',
                 display: 'flex',
@@ -1840,20 +1850,21 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
                 alt: "Preview",
                 style: {
                   maxWidth: '100%',
-                  maxHeight: 220,
+                  maxHeight: 260,
                   objectFit: 'contain'
                 }
               })
             }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
               variant: "outlined",
-              size: "small",
               onClick: function onClick() {
                 var _fileInputRef$current;
                 return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
               },
               sx: {
                 textTransform: 'none',
-                fontSize: 12
+                fontSize: 13,
+                borderRadius: '8px',
+                borderColor: '#d0d5dd'
               },
               children: t('inputFieldsDialog.changeImage', 'Change Image')
             })]
@@ -1863,28 +1874,28 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
               return (_fileInputRef$current2 = fileInputRef.current) === null || _fileInputRef$current2 === void 0 ? void 0 : _fileInputRef$current2.click();
             },
             sx: {
-              border: '2px dashed #ccc',
-              borderRadius: '8px',
-              p: 3,
+              border: '2px dashed #d0d5dd',
+              borderRadius: '10px',
+              p: 4,
               textAlign: 'center',
               cursor: 'pointer',
               transition: 'all 0.2s ease',
               '&:hover': {
-                borderColor: '#0d83cd',
-                backgroundColor: 'rgba(13,131,205,0.04)'
+                borderColor: accentColor,
+                backgroundColor: 'rgba(13,131,205,0.03)'
               }
             },
             children: [/*#__PURE__*/jsxRuntime.jsx(CloudUploadIcon, {
               sx: {
-                fontSize: 36,
-                color: '#999',
-                mb: 1
+                fontSize: 40,
+                color: '#bbb',
+                mb: 1.5
               }
             }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
               variant: "body2",
               sx: {
-                color: '#666',
-                fontSize: 13
+                color: '#888',
+                fontSize: 14
               },
               children: t('inputFieldsDialog.uploadImage', 'Click to select an image')
             })]
@@ -1901,77 +1912,157 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
           },
           onKeyDown: handleKeyDown,
           autoFocus: true,
-          size: "small",
           placeholder: custom.placeholder || '',
-          sx: _objectSpread2({
-            mt: 1
-          }, config.inputStyle)
+          sx: sharedSx
         });
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Dialog, {
-    open: true,
-    maxWidth: "sm",
-    fullWidth: true,
-    PaperProps: {
-      sx: _objectSpread2({
-        borderRadius: 2
-      }, config.dialogStyle)
-    },
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.DialogTitle, {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: _objectSpread2({
+      position: 'fixed',
+      inset: 0,
+      zIndex: 9999,
+      backgroundColor: '#f7f8fa',
+      display: 'flex',
+      flexDirection: 'column'
+    }, config.dialogStyle),
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        height: 4,
+        backgroundColor: '#e4e7ec',
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          height: '100%',
+          width: "".concat(progressPct, "%"),
+          backgroundColor: accentColor,
+          transition: 'width 0.4s ease'
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: _objectSpread2({
-        fontSize: 16,
-        fontWeight: 600,
-        pb: 0
+        backgroundColor: '#fff',
+        borderBottom: '1px solid #f0f0f0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        px: 4,
+        py: 1.75,
+        flexShrink: 0
       }, config.titleStyle),
-      children: [t('inputFieldsDialog.title', 'Input Required'), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-        variant: "caption",
+      children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
-          display: 'block',
-          color: '#999',
-          mt: 0.5
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5
         },
-        children: t('inputFieldsDialog.stepIndicator', 'Field {current} of {total}').replace('{current}', currentIndex + 1).replace('{total}', totalCount)
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(material.DialogContent, {
-      sx: {
-        pt: 2
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-        variant: "body1",
-        sx: _objectSpread2({
-          mb: 1,
-          fontWeight: 500
-        }, config.promptStyle),
-        children: promptText
-      }), renderInput()]
-    }), /*#__PURE__*/jsxRuntime.jsxs(material.DialogActions, {
+        children: [logoUrl && /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: logoUrl,
+          alt: "Logo",
+          style: {
+            maxHeight: 36,
+            maxWidth: 200,
+            objectFit: 'contain'
+          }
+        }), (headerText || !logoUrl) && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: 17,
+            color: '#1a1a1a',
+            letterSpacing: '-0.2px'
+          },
+          children: headerText || 'LabelLife'
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
-        px: 3,
-        pb: 2
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: {
+          xs: 3,
+          sm: 5
+        },
+        overflowY: 'auto'
       },
-      children: [!isRequired && /*#__PURE__*/jsxRuntime.jsx(material.Button, {
-        onClick: function onClick() {
-          return onSkip(field.id);
+      children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          width: '100%',
+          maxWidth: 750
         },
-        sx: _objectSpread2({
-          textTransform: 'none',
-          color: '#999'
-        }, config.skipButtonStyle),
-        children: config.skipButtonText || t('inputFieldsDialog.skip', 'Skip')
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
-        onClick: handleSubmit,
-        variant: "contained",
-        disabled: isRequired && !value,
-        sx: _objectSpread2({
-          textTransform: 'none',
-          backgroundColor: '#0d83cd',
-          '&:hover': {
-            backgroundColor: '#0a6eb3'
-          }
-        }, config.submitButtonStyle),
-        children: config.submitButtonText || t('inputFieldsDialog.submit', 'Confirm')
-      })]
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            display: 'block',
+            fontSize: 18,
+            color: '#999',
+            fontWeight: 500,
+            mb: 1.5,
+            letterSpacing: '0.2px'
+          },
+          children: t('inputFieldsDialog.stepIndicator', 'Field {current} of {total}').replace('{current}', currentIndex + 1).replace('{total}', totalCount)
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: _objectSpread2({
+            fontSize: {
+              xs: 33,
+              sm: 39
+            },
+            fontWeight: 700,
+            color: '#111827',
+            lineHeight: 1.3,
+            mb: 4.5
+          }, config.promptStyle),
+          children: promptText
+        }), renderInput(), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            mt: 4.5
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Button, {
+            variant: "contained",
+            onClick: handleSubmit,
+            disabled: isRequired && !value,
+            sx: _objectSpread2({
+              textTransform: 'none',
+              fontWeight: 600,
+              fontSize: 21,
+              px: 5,
+              py: 1.65,
+              borderRadius: '10px',
+              backgroundColor: accentColor,
+              boxShadow: 'none',
+              '&:hover': {
+                backgroundColor: '#0a6eb3',
+                boxShadow: 'none'
+              }
+            }, config.submitButtonStyle),
+            children: config.submitButtonText || t('inputFieldsDialog.submit', 'Continue')
+          }), !isRequired && /*#__PURE__*/jsxRuntime.jsx(material.Button, {
+            variant: "outlined",
+            onClick: function onClick() {
+              return onSkip(field.id);
+            },
+            sx: _objectSpread2({
+              textTransform: 'none',
+              fontWeight: 500,
+              fontSize: 21,
+              px: 4.5,
+              py: 1.65,
+              borderRadius: '10px',
+              color: '#555',
+              borderColor: '#d0d5dd',
+              '&:hover': {
+                borderColor: '#aaa',
+                backgroundColor: 'rgba(0,0,0,0.02)'
+              }
+            }, config.skipButtonStyle),
+            children: config.skipButtonText || t('inputFieldsDialog.skip', 'Do it later')
+          })]
+        })]
+      })
     })]
   });
 };