@pareto-engineering/design-system 4.10.2 → 4.12.0

package/dist/cjs/a/AreaChart/AreaChart.js

@@ -111,21 +111,29 @@ const AreaChart = _ref => {
       value: xLabel,
       position: 'insideBottom',
       offset: -5
-    } // Adjusted offset for padding
-    ,
+    },
     axisLine: false,
     tickLine: false,
     tickCount: 3
   }), /*#__PURE__*/React.createElement(_recharts.YAxis, {
     domain: yAxisBounds,
+    scale: "linear",
+    interval: "equidistantPreserveStart",
     label: {
       value: yLabel,
       angle: -90,
-      position: 'insideLeft',
-      offset: 15
+      position: 'left',
+      offset: 1,
+      style: {
+        textAnchor: 'middle'
+      }
+    },
+    padding: {
+      top: 10,
+      bottom: 10
     },
     axisLine: false,
-    tickLine: false,
+    tickLine: true,
     tickFormatter: value => value.toFixed(2)
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)

package/dist/cjs/d/index.js

@@ -1 +1,2 @@
+// export {  Divider } from './Divider'
 "use strict";

package/dist/cjs/g/FormBuilder/FormBuilder.js

@@ -40,7 +40,8 @@ const FormBuilder = _ref => {
     initialBuilderValues,
     fileUploadStatus,
     handleFileDelete,
-    taskData
+    taskData,
+    customInputMap
     // ...otherProps
   } = _ref;
   const formattedJson = JSON.stringify(taskData, null, 2);
@@ -56,7 +57,8 @@ const FormBuilder = _ref => {
     formBuilderId: formBuilderId,
     onSave: onBuilderFormSave,
     onError: onBuilderError,
-    validate: onBuilderValidate
+    validate: onBuilderValidate,
+    customInputMap: customInputMap
   }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
     formData: formData,
     onSave: onRendererFormSave,
@@ -64,7 +66,8 @@ const FormBuilder = _ref => {
     shouldSubmit: shouldSubmit,
     fileUploadStatus: fileUploadStatus,
     handleFileDelete: handleFileDelete,
-    onFileUpload: onFileUpload
+    onFileUpload: onFileUpload,
+    customInputMap: customInputMap
   }));
 };
 FormBuilder.propTypes = {

package/dist/cjs/g/FormBuilder/common/Builder/Builder.js

@@ -42,6 +42,7 @@ const Builder = _ref => {
     onError,
     validate,
     formBuilderId,
+    customInputMap,
     initialValues = {}
     // ...otherProps
   } = _ref;
@@ -120,7 +121,8 @@ const Builder = _ref => {
           remove,
           values,
           setFieldValue
-        })
+        }),
+        customInputMap: customInputMap
       })), /*#__PURE__*/React.createElement("div", {
         className: "section-footer"
       }, /*#__PURE__*/React.createElement("button", {

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -36,8 +36,8 @@ const InputBuilder = _ref => {
     style,
     sectionIndex,
     inputIndex,
-    onDelete
-    // onCopy,
+    onDelete,
+    customInputMap
     // ...otherProps
   } = _ref;
   const {
@@ -49,13 +49,6 @@ const InputBuilder = _ref => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
   const [hasDescription, setHasDescription] = (0, _react.useState)(false);
-
-  // TODO: handle nav logic
-  // const handleToggleConditionalNavigation = () => {
-  //   setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
-  // !input?.conditionalNavigation)
-  // }
-
   const availableSections = values?.sections?.map((section, idx) => ({
     value: idx,
     label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
@@ -71,6 +64,7 @@ const InputBuilder = _ref => {
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
+  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -110,7 +104,10 @@ const InputBuilder = _ref => {
     }, {
       value: 'file',
       label: 'File upload'
-    }]
+    }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
+      value: customInputKey,
+      label: customInputMap[customInputKey].label
+    })))]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
   }, /*#__PURE__*/React.createElement("button", {

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -33,7 +33,8 @@ const Section = _ref => {
     className: userClassName,
     style,
     index,
-    handleDeleteSection
+    handleDeleteSection,
+    customInputMap
     // ...otherProps
   } = _ref;
   const {
@@ -65,7 +66,8 @@ const Section = _ref => {
         sectionIndex: index,
         inputIndex: indx,
         onDelete: handleDeleteInput,
-        onCopy: handleCopyInput
+        onCopy: handleCopyInput,
+        customInputMap: customInputMap
       }),
       identifier: input.name
     }));

package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js

@@ -71,7 +71,8 @@ const Renderer = _ref => {
     fileUploadStatus,
     handleFileDelete,
     onFileUpload,
-    shouldUpdateInputStateInRealTime = true
+    shouldUpdateInputStateInRealTime = true,
+    customInputMap
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
@@ -149,7 +150,8 @@ const Renderer = _ref => {
       fileUploadStatus: fileUploadStatus,
       handleFileDelete: handleFileDelete,
       onFileUpload: onFileUpload,
-      sectionIndex: sectionIndex
+      sectionIndex: sectionIndex,
+      customInputMap: customInputMap
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {

package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -39,9 +39,11 @@ const Section = _ref => {
     fileUploadStatus,
     handleFileDelete,
     onFileUpload,
-    sectionIndex
+    sectionIndex,
+    customInputMap
     // ...otherProps
   } = _ref;
+  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -53,7 +55,9 @@ const Section = _ref => {
     name: "instructions"
   }), inputs?.map((input, inputIndex) => {
     const isFileInput = input.type === 'file';
-    return /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+    const isCustomInput = customInputTypes.includes(input.type);
+    const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
+    return !isCustomInput ? /*#__PURE__*/React.createElement(_f.FormInput, _extends({
       key: input.name
     }, input, {
       disabled: readOnly
@@ -72,6 +76,10 @@ const Section = _ref => {
         }));
         onFileUpload(filesToUpload);
       }
+    })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
+      key: input.name
+    }, input, {
+      disabled: readOnly
     }));
   }));
 };

package/dist/es/a/AreaChart/AreaChart.js

@@ -98,21 +98,29 @@ const AreaChart = ({
       value: xLabel,
       position: 'insideBottom',
       offset: -5
-    } // Adjusted offset for padding
-    ,
+    },
     axisLine: false,
     tickLine: false,
     tickCount: 3
   }), /*#__PURE__*/React.createElement(YAxis, {
     domain: yAxisBounds,
+    scale: "linear",
+    interval: "equidistantPreserveStart",
     label: {
       value: yLabel,
       angle: -90,
-      position: 'insideLeft',
-      offset: 15
+      position: 'left',
+      offset: 1,
+      style: {
+        textAnchor: 'middle'
+      }
+    },
+    padding: {
+      top: 10,
+      bottom: 10
     },
     axisLine: false,
-    tickLine: false,
+    tickLine: true,
     tickFormatter: value => value.toFixed(2)
   }), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)

package/dist/es/d/index.js

@@ -0,0 +1 @@
+// export {  Divider } from './Divider'

package/dist/es/g/FormBuilder/FormBuilder.js

@@ -30,7 +30,8 @@ const FormBuilder = ({
   initialBuilderValues,
   fileUploadStatus,
   handleFileDelete,
-  taskData
+  taskData,
+  customInputMap
   // ...otherProps
 }) => {
   const formattedJson = JSON.stringify(taskData, null, 2);
@@ -46,7 +47,8 @@ const FormBuilder = ({
     formBuilderId: formBuilderId,
     onSave: onBuilderFormSave,
     onError: onBuilderError,
-    validate: onBuilderValidate
+    validate: onBuilderValidate,
+    customInputMap: customInputMap
   }), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
     formData: formData,
     onSave: onRendererFormSave,
@@ -54,7 +56,8 @@ const FormBuilder = ({
     shouldSubmit: shouldSubmit,
     fileUploadStatus: fileUploadStatus,
     handleFileDelete: handleFileDelete,
-    onFileUpload: onFileUpload
+    onFileUpload: onFileUpload,
+    customInputMap: customInputMap
   }));
 };
 FormBuilder.propTypes = {

package/dist/es/g/FormBuilder/common/Builder/Builder.js

@@ -32,6 +32,7 @@ const Builder = ({
   onError,
   validate,
   formBuilderId,
+  customInputMap,
   initialValues = {}
   // ...otherProps
 }) => {
@@ -106,7 +107,8 @@ const Builder = ({
         remove,
         values,
         setFieldValue
-      })
+      }),
+      customInputMap: customInputMap
     })), /*#__PURE__*/React.createElement("div", {
       className: "section-footer"
     }, /*#__PURE__*/React.createElement("button", {

package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -26,8 +26,8 @@ const InputBuilder = ({
   style,
   sectionIndex,
   inputIndex,
-  onDelete
-  // onCopy,
+  onDelete,
+  customInputMap
   // ...otherProps
 }) => {
   const {
@@ -39,13 +39,6 @@ const InputBuilder = ({
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
   const [hasDescription, setHasDescription] = useState(false);
-
-  // TODO: handle nav logic
-  // const handleToggleConditionalNavigation = () => {
-  //   setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
-  // !input?.conditionalNavigation)
-  // }
-
   const availableSections = values?.sections?.map((section, idx) => ({
     value: idx,
     label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
@@ -61,6 +54,7 @@ const InputBuilder = ({
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
+  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -100,7 +94,10 @@ const InputBuilder = ({
     }, {
       value: 'file',
       label: 'File upload'
-    }]
+    }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
+      value: customInputKey,
+      label: customInputMap[customInputKey].label
+    })))]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
   }, /*#__PURE__*/React.createElement("button", {

package/dist/es/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -23,7 +23,8 @@ const Section = ({
   className: userClassName,
   style,
   index,
-  handleDeleteSection
+  handleDeleteSection,
+  customInputMap
   // ...otherProps
 }) => {
   const {
@@ -55,7 +56,8 @@ const Section = ({
         sectionIndex: index,
         inputIndex: indx,
         onDelete: handleDeleteInput,
-        onCopy: handleCopyInput
+        onCopy: handleCopyInput,
+        customInputMap: customInputMap
       }),
       identifier: input.name
     }));

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -65,7 +65,8 @@ const Renderer = ({
   fileUploadStatus,
   handleFileDelete,
   onFileUpload,
-  shouldUpdateInputStateInRealTime = true
+  shouldUpdateInputStateInRealTime = true,
+  customInputMap
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
@@ -142,7 +143,8 @@ const Renderer = ({
       fileUploadStatus: fileUploadStatus,
       handleFileDelete: handleFileDelete,
       onFileUpload: onFileUpload,
-      sectionIndex: sectionIndex
+      sectionIndex: sectionIndex,
+      customInputMap: customInputMap
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -34,40 +34,50 @@ const Section = ({
   fileUploadStatus,
   handleFileDelete,
   onFileUpload,
-  sectionIndex
+  sectionIndex,
+  customInputMap
   // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement("p", {
-  className: "h3"
-}, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
-  nodes: description,
-  name: "instructions"
-}), inputs?.map((input, inputIndex) => {
-  const isFileInput = input.type === 'file';
-  return /*#__PURE__*/React.createElement(FormInput, _extends({
-    key: input.name
-  }, input, {
-    disabled: readOnly
-  }, isFileInput && {
-    uploadStatus: fileUploadStatus,
-    handleFileDelete,
-    onChange: files => {
-      const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
-        file,
-        name: file.name,
-        mimeType: file.type,
-        type: fileTypeMapper[getFileType(file)] || 'Generic',
-        title: file.name,
-        sectionIndex,
-        inputIndex
-      }));
-      onFileUpload(filesToUpload);
-    }
+}) => {
+  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h3"
+  }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
+    nodes: description,
+    name: "instructions"
+  }), inputs?.map((input, inputIndex) => {
+    const isFileInput = input.type === 'file';
+    const isCustomInput = customInputTypes.includes(input.type);
+    const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
+    return !isCustomInput ? /*#__PURE__*/React.createElement(FormInput, _extends({
+      key: input.name
+    }, input, {
+      disabled: readOnly
+    }, isFileInput && {
+      uploadStatus: fileUploadStatus,
+      handleFileDelete,
+      onChange: files => {
+        const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
+          file,
+          name: file.name,
+          mimeType: file.type,
+          type: fileTypeMapper[getFileType(file)] || 'Generic',
+          title: file.name,
+          sectionIndex,
+          inputIndex
+        }));
+        onFileUpload(filesToUpload);
+      }
+    })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
+      key: input.name
+    }, input, {
+      disabled: readOnly
+    }));
   }));
-}));
+};
 Section.propTypes = {
   /**
    * The HTML id for this element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.10.2",
+  "version": "4.12.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -83,5 +83,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "16454ca942b81e079a85117fa2be6e914edf062b"
+  "gitHead": "f253e58e673c428639cc64dbb83a5fdfe9931dee"
 }

package/src/ui/a/AreaChart/AreaChart.jsx

@@ -107,18 +107,25 @@ const AreaChart = ({
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey={xKey}
-            label={{ value: xLabel, position: 'insideBottom', offset: -5 }} // Adjusted offset for padding
+            label={{ value: xLabel, position: 'insideBottom', offset: -5 }}
             axisLine={false}
             tickLine={false}
             tickCount={3}
           />
           <YAxis
             domain={yAxisBounds}
+            scale="linear"
+            interval="equidistantPreserveStart"
             label={{
-              value:yLabel, angle:-90, position:'insideLeft', offset:15,
+              value   :yLabel,
+              angle   :-90,
+              position:'left',
+              offset  :1,
+              style   :{ textAnchor: 'middle' },
             }}
+            padding={{ top: 10, bottom: 10 }}
             axisLine={false}
-            tickLine={false}
+            tickLine
             tickFormatter={(value) => value.toFixed(2)}
           />
           <Tooltip content={<CustomTooltipContent />} />

package/src/ui/d/index.js

@@ -0,0 +1 @@
+// export {  Divider } from './Divider'

package/src/ui/g/FormBuilder/FormBuilder.jsx

@@ -36,6 +36,7 @@ const FormBuilder = ({
   fileUploadStatus,
   handleFileDelete,
   taskData,
+  customInputMap,
   // ...otherProps
 }) => {
   const formattedJson = JSON.stringify(taskData, null, 2)
@@ -67,6 +68,7 @@ const FormBuilder = ({
           onSave={onBuilderFormSave}
           onError={onBuilderError}
           validate={onBuilderValidate}
+          customInputMap={customInputMap}
         />
       )}
       {mode === 'render' && (
@@ -78,6 +80,7 @@ const FormBuilder = ({
           fileUploadStatus={fileUploadStatus}
           handleFileDelete={handleFileDelete}
           onFileUpload={onFileUpload}
+          customInputMap={customInputMap}
         />
       )}
     </div>

package/src/ui/g/FormBuilder/common/Builder/Builder.jsx

@@ -43,6 +43,7 @@ const Builder = ({
   onError,
   validate,
   formBuilderId,
+  customInputMap,
   initialValues = {},
   // ...otherProps
 }) => {
@@ -125,6 +126,7 @@ const Builder = ({
                         handleDeleteSection={() => handleDeleteSection({
                           index, remove, values, setFieldValue,
                         })}
+                        customInputMap={customInputMap}
                       />
                     ))}
                     <div className="section-footer">

package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx

@@ -41,7 +41,7 @@ const InputBuilder = ({
   sectionIndex,
   inputIndex,
   onDelete,
-  // onCopy,
+  customInputMap,
   // ...otherProps
 }) => {
   const { values, setFieldValue } = useFormikContext()
@@ -53,12 +53,6 @@ const InputBuilder = ({
 
   const [hasDescription, setHasDescription] = useState(false)
 
-  // TODO: handle nav logic
-  // const handleToggleConditionalNavigation = () => {
-  //   setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
-  // !input?.conditionalNavigation)
-  // }
-
   const availableSections = values?.sections?.map((section, idx) => ({
     value:idx,
     label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
@@ -77,6 +71,8 @@ const InputBuilder = ({
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes)
   }
 
+  const customInputTypes = customInputMap ? Object.keys(customInputMap) : []
+
   return (
     <div
       id={id}
@@ -134,13 +130,13 @@ const InputBuilder = ({
                 value:'file',
                 label:'File upload',
               },
+              ...(customInputTypes && customInputTypes.map((customInputKey) => ({
+                value:customInputKey,
+                label:customInputMap[customInputKey].label,
+              }))),
             ]}
           />
           <div className="controls">
-            {/* TODO */}
-            {/* <button type="button" onClick={() => onCopy(inputIndex)}>
-              <span className="ai-icon x-ui-icons c-x">I</span>
-            </button> */}
             <button type="button" onClick={() => onDelete(inputIndex)}>
               <span className="icon x-ui-icons c-x">D</span>
             </button>
@@ -168,17 +164,6 @@ const InputBuilder = ({
                     Description
                   </button>
                 </li>
-                {/* TODO: implement logic */}
-                {/*
-                 <li className={`option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`}>
-                  {input?.conditionalNavigation && <span className="x-ui-icons c-x icon">I</span>}
-                  <button
-                    onClick={handleToggleConditionalNavigation}
-                    type="button"
-                  >
-                    Go to section based on answer
-                  </button>
-                </li> */}
               </ul>
             </ActionsContainer>
           </div>

package/src/ui/g/FormBuilder/common/Builder/common/Section/Section.jsx

@@ -36,6 +36,7 @@ const Section = ({
   style,
   index,
   handleDeleteSection,
+  customInputMap,
   // ...otherProps
 }) => {
   const { values, setFieldValue } = useFormikContext()
@@ -69,6 +70,7 @@ const Section = ({
         inputIndex={indx}
         onDelete={handleDeleteInput}
         onCopy={handleCopyInput}
+        customInputMap={customInputMap}
       />,
       identifier:input.name,
     }))

package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -78,6 +78,7 @@ const Renderer = ({
   handleFileDelete,
   onFileUpload,
   shouldUpdateInputStateInRealTime = true,
+  customInputMap,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
@@ -178,6 +179,7 @@ const Renderer = ({
                   handleFileDelete={handleFileDelete}
                   onFileUpload={onFileUpload}
                   sectionIndex={sectionIndex}
+                  customInputMap={customInputMap}
                 />
                 )
               ))}

package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx

@@ -40,57 +40,71 @@ const Section = ({
   handleFileDelete,
   onFileUpload,
   sectionIndex,
+  customInputMap,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-
-      baseClassName,
-
-      componentClassName,
-      userClassName,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    <p className="h3">{title}</p>
-    <ExpandableLexicalPreview
-      nodes={description}
-      name="instructions"
-    />
-    {inputs?.map((input, inputIndex) => {
-      const isFileInput = input.type === 'file'
-      return (
-        <FormInput
-          key={input.name}
-          {...input}
-          disabled={readOnly}
-          {...(isFileInput && {
-            uploadStatus:fileUploadStatus,
-            handleFileDelete,
-            onChange    :(files) => {
-              const filesToUpload = files
-                ?.filter((file) => file instanceof File)
-                .map((file) => ({
-                  file,
-                  name    :file.name,
-                  mimeType:file.type,
-                  type    :fileTypeMapper[getFileType(file)] || 'Generic',
-                  title   :file.name,
-                  sectionIndex,
-                  inputIndex,
-                }))
-
-              onFileUpload(filesToUpload)
-            },
-          })}
-        />
-      )
-    })}
-  </div>
-)
+}) => {
+  const customInputTypes = customInputMap ? Object.keys(customInputMap) : []
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <p className="h3">{title}</p>
+      <ExpandableLexicalPreview
+        nodes={description}
+        name="instructions"
+      />
+      {inputs?.map((input, inputIndex) => {
+        const isFileInput = input.type === 'file'
+        const isCustomInput = customInputTypes.includes(input.type)
+        const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null
+
+        return (
+          !isCustomInput ? (
+            <FormInput
+              key={input.name}
+              {...input}
+              disabled={readOnly}
+              {...(isFileInput && {
+                uploadStatus:fileUploadStatus,
+                handleFileDelete,
+                onChange    :(files) => {
+                  const filesToUpload = files
+                    ?.filter((file) => file instanceof File)
+                    .map((file) => ({
+                      file,
+                      name    :file.name,
+                      mimeType:file.type,
+                      type    :fileTypeMapper[getFileType(file)] || 'Generic',
+                      title   :file.name,
+                      sectionIndex,
+                      inputIndex,
+                    }))
+
+                  onFileUpload(filesToUpload)
+                },
+              })}
+            />
+          ) : (
+            <CustomInputComponent
+              key={input.name}
+              {...input}
+              disabled={readOnly}
+            />
+          )
+        )
+      })}
+    </div>
+  )
+}
 
 Section.propTypes = {
   /**