@pareto-engineering/design-system 4.2.0 → 4.2.1-alpha.0

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -70,18 +70,16 @@ const EditorInput = _ref2 => {
     showDebugger,
     stopPropagationKeys,
     setEditorState
-    // handleOnChange,
     // ...otherProps
   } = _ref2;
+  const [field,,] = (0, _formik.useField)(name);
   const {
-    values,
     setFieldValue
   } = (0, _formik.useFormikContext)();
   const setInitialValue = () => {
-    const value = values[name];
     try {
-      JSON.parse(value);
-      return value;
+      JSON.parse(field.value);
+      return field.value;
     } catch {
       const defaultValue = {
         root: {
@@ -108,7 +106,7 @@ const EditorInput = _ref2 => {
           version: 1
         }
       };
-      defaultValue.root.children[0].children[0].text = value;
+      defaultValue.root.children[0].children[0].text = field.value;
       return JSON.stringify(defaultValue);
     }
   };

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

@@ -29,9 +29,15 @@ const FormBuilder = _ref => {
     style,
     mode,
     formData,
+    readOnly,
+    shouldSubmit,
     formBuilderId,
     onBuilderFormSave,
-    onRendererFormSave
+    onBuilderError,
+    onRendererError,
+    onRendererFormSave,
+    onBuilderValidate,
+    initialBuilderValues
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -40,11 +46,17 @@ const FormBuilder = _ref => {
     style: style
     // {...otherProps}
   }, mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
+    initialValues: initialBuilderValues,
     formBuilderId: formBuilderId,
-    onSave: onBuilderFormSave
+    onSave: onBuilderFormSave,
+    onError: onBuilderError,
+    validate: onBuilderValidate
   }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
     formData: formData,
-    onSave: onRendererFormSave
+    onSave: onRendererFormSave,
+    readOnly: readOnly,
+    shouldSubmit: shouldSubmit,
+    onError: onRendererError
   }));
 };
 FormBuilder.propTypes = {
@@ -67,10 +79,31 @@ FormBuilder.propTypes = {
   /**
    * This is the ID of the form element in the <Builder /> component
    */
-  formBuilderId: _propTypes.default.string.isRequired
+  formBuilderId: _propTypes.default.string.isRequired,
+  /**
+   *  The form data to be used to construct the form builder in renderer mode
+   */
+  formData: _propTypes.default.shape({
+    sections: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.any))
+  }),
+  /**
+   *  The initial values to instatiate form builder in builder mode
+   */
+  initialBuilderValues: _propTypes.default.shape({
+    sections: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.any))
+  }),
+  /**
+   * Whether the whole Form in renderer mode should be readOnly
+   */
+  readOnly: _propTypes.default.bool,
+  /**
+   * Whether the form builder in renderer mode should submit the form values itself
+   */
+  shouldSubmit: _propTypes.default.bool
 };
 FormBuilder.defaultProps = {
-  mode: 'build'
+  mode: 'build',
+  readOnly: false
 };
 FormBuilder.Builder = _common.Builder;
 FormBuilder.Renderer = _common.Renderer;

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _formik = require("formik");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
@@ -38,12 +39,42 @@ const Builder = _ref => {
     className: userClassName,
     style,
     onSave,
-    formBuilderId
+    onError,
+    validate,
+    formBuilderId,
+    initialValues = {}
     // ...otherProps
   } = _ref;
   const handleSubmit = values => {
     const reOrderedValues = reorderInputs(values);
-    onSave(reOrderedValues);
+    onSave?.(reOrderedValues);
+  };
+  const initialFormState = initialValues?.sections ? initialValues : {
+    sections: [{
+      title: '',
+      description: '',
+      key: 'section-0',
+      inputs: [],
+      orderedInputDragIds: [],
+      navigation: {
+        nextSection: 'next'
+      }
+    }]
+  };
+  const handleDeleteSection = _ref2 => {
+    let {
+      index,
+      remove,
+      values
+    } = _ref2;
+    remove(index);
+    values.sections.splice(index, 1);
+    values.sections.forEach((section, sectionIndex) => {
+      section.inputs.forEach((input, inputIndex) => {
+        // eslint-disable-next-line no-param-reassign
+        input.name = `section_${sectionIndex}_input_${inputIndex}`;
+      });
+    });
   };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -52,24 +83,23 @@ const Builder = _ref => {
   }, /*#__PURE__*/React.createElement("p", {
     className: "h3"
   }, "Form Builder"), /*#__PURE__*/React.createElement(_formik.Formik, {
-    initialValues: {
-      sections: [{
-        title: '',
-        description: '',
-        key: 'section-0',
-        inputs: [],
-        orderedInputDragIds: [],
-        navigation: {
-          nextSection: 'next'
-        }
-      }]
-    },
-    onSubmit: handleSubmit
-  }, _ref2 => {
+    initialValues: initialFormState,
+    onSubmit: handleSubmit,
+    validate: validate
+  }, _ref3 => {
     let {
-      values
-    } = _ref2;
-    const availableSections = values.sections.map((section, idx) => ({
+      values,
+      errors,
+      setFieldValue
+    } = _ref3;
+    (0, _react.useEffect)(() => {
+      const reOrderedValues = reorderInputs(values);
+      onSave?.(reOrderedValues);
+    }, [values]);
+    (0, _react.useEffect)(() => {
+      onError?.(errors);
+    }, [errors, values]);
+    const availableSections = values?.sections?.map((section, idx) => ({
       value: idx,
       label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
     }));
@@ -77,13 +107,20 @@ const Builder = _ref => {
       id: formBuilderId
     }, /*#__PURE__*/React.createElement(_formik.FieldArray, {
       name: "sections"
-    }, _ref3 => {
+    }, _ref4 => {
       let {
-        push
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, values.sections.map((section, index) => /*#__PURE__*/React.createElement(_common.Section, {
+        push,
+        remove
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, values?.sections?.map((section, index) => /*#__PURE__*/React.createElement(_common.Section, {
         key: section.key,
-        index: index
+        index: index,
+        handleDeleteSection: () => handleDeleteSection({
+          index,
+          remove,
+          values,
+          setFieldValue
+        })
       })), /*#__PURE__*/React.createElement("div", {
         className: "section-footer"
       }, /*#__PURE__*/React.createElement("button", {

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+var _utils = require("../../../../../../utils");
+var _a = require("../../../../../../a");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'actions-container';
+
+/**
+ * This is the component description.
+ */
+const ActionsContainer = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    preferredPopoverOrder,
+    children
+    // ...otherProps
+  } = _ref;
+  const parentRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style,
+    ref: parentRef
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => setIsOpen(!isOpen)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "!")), /*#__PURE__*/React.createElement(_a.Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef,
+    preferredPrimaryOrder: preferredPopoverOrder
+  }, children));
+};
+ActionsContainer.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The preferred order for the popover
+   */
+  preferredPopoverOrder: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The children of the actions container
+   */
+  children: _propTypes.default.node
+};
+ActionsContainer.defaultProps = {
+  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+};
+var _default = exports.default = ActionsContainer;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionsContainer", {
+  enumerable: true,
+  get: function () {
+    return _ActionsContainer.default;
+  }
+});
+var _ActionsContainer = _interopRequireDefault(require("./ActionsContainer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/FormBuilder/common/Builder/common/ActionsContainer/styles.scss

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-list-width: var(--action-button-width, 18rem);
+
+.#{bem.$base}.actions-container {
+  position: relative;
+
+  > button {
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+
+  > .#{bem.$base}.popover {
+    background-color: var(--background-cards);
+    border: var(--theme-default-border-style) var(--main2);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    cursor: default;
+    padding: $default-padding;
+    width: $default-list-width;
+
+    > p {
+      margin: 0;
+    }
+
+    > ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      white-space: nowrap;
+
+      > .option {
+        cursor: pointer;
+        padding-block: calc($default-padding / 4);
+
+        &:not(.with-check-mark) {
+          padding-inline: $default-padding;
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > button {
+          background: transparent;
+          border: 0;
+          color: var(--paragraph);
+          cursor: pointer;
+          font-size: calc(var(--s0) * .875rem);
+          text-align: left;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+

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

@@ -11,8 +11,8 @@ var _formik = require("formik");
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _f = require("../../../../../../f");
 var _a = require("../../../../../../a");
-var _utils = require("../../../../../../utils");
 require("./styles.scss");
+var _ActionsContainer = require("../ActionsContainer");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,32 +33,32 @@ const InputBuilder = _ref => {
     style,
     sectionIndex,
     inputIndex,
-    onDelete,
+    onDelete
     // onCopy,
-    preferredPopoverOrder
     // ...otherProps
   } = _ref;
   const {
     values,
     setFieldValue
   } = (0, _formik.useFormikContext)();
-  const input = values.sections[sectionIndex].inputs[inputIndex];
+  const input = values.sections[sectionIndex]?.inputs[inputIndex];
   const handleToggleRequired = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input.required);
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
   const toggleSwitchStyles = {
     ...(!input?.required ? {
       '--slider-background-color': 'var(--disabled)'
     } : {})
   };
-  const parentRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
   const [hasDescription, setHasDescription] = (0, _react.useState)(false);
-  const handleToggleConditionalNavigation = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`, !input.conditionalNavigation);
-  };
-  const availableSections = values.sections.map((section, idx) => ({
+
+  // 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}`}`
   }));
@@ -96,9 +96,6 @@ const InputBuilder = _ref => {
     }, {
       value: 'select',
       label: 'Dropdown select'
-    }, {
-      value: 'editor',
-      label: 'Editor input'
     }, {
       value: 'multiple',
       label: 'Checkboxes'
@@ -122,33 +119,14 @@ const InputBuilder = _ref => {
     checked: input?.required,
     style: toggleSwitchStyles,
     inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "actions",
-    ref: parentRef
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, "!")), /*#__PURE__*/React.createElement(_a.Popover, {
-    isOpen: isOpen,
-    parentRef: parentRef,
-    preferredPrimaryOrder: preferredPopoverOrder
-  }, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+  })), /*#__PURE__*/React.createElement(_ActionsContainer.ActionsContainer, null, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
     className: `option ${hasDescription ? 'with-check-mark' : ''}`
   }, hasDescription && /*#__PURE__*/React.createElement("span", {
     className: "x-ui-icons c-x icon"
   }, "I"), /*#__PURE__*/React.createElement("button", {
     onClick: () => setHasDescription(!hasDescription),
     type: "button"
-  }, "Description")), /*#__PURE__*/React.createElement("li", {
-    className: `option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`
-  }, input?.conditionalNavigation && /*#__PURE__*/React.createElement("span", {
-    className: "x-ui-icons c-x icon"
-  }, "I"), /*#__PURE__*/React.createElement("button", {
-    onClick: handleToggleConditionalNavigation,
-    type: "button"
-  }, "Go to section based on answer"))))))), /*#__PURE__*/React.createElement("div", {
+  }, "Description")))))), /*#__PURE__*/React.createElement("div", {
     className: "input-name-description"
   }, /*#__PURE__*/React.createElement(_f.TextInput, {
     label: "Input name",
@@ -170,8 +148,8 @@ const InputBuilder = _ref => {
     }, /*#__PURE__*/React.createElement("p", null, "Options"), input?.options.map((option, optionIndex) => /*#__PURE__*/React.createElement("div", {
       key: option.key,
       className: "option-container"
-    }, input.type !== 'select' && /*#__PURE__*/React.createElement("div", {
-      className: `input-icon-sample ${input.type}`
+    }, input?.type !== 'select' && /*#__PURE__*/React.createElement("div", {
+      className: `input-icon-sample ${input?.type}`
     }), /*#__PURE__*/React.createElement(_f.TextInput, {
       name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`,
       placeholder: `Option ${optionIndex + 1}`,
@@ -191,7 +169,7 @@ const InputBuilder = _ref => {
       className: "add-option-cta",
       type: "button",
       onClick: () => push({
-        key: `sections-${sectionIndex}-inputs-${inputIndex}-options-${input.options.length - 1}`,
+        key: `sections-${sectionIndex}-inputs-${inputIndex}-options-${input?.options.length - 1}`,
         value: '',
         label: '',
         nextSection: ''
@@ -217,13 +195,9 @@ InputBuilder.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The preferred primary order of the popover
-   */
-  preferredPopoverOrder: _propTypes.default.arrayOf(_propTypes.default.string)
+  style: _propTypes.default.objectOf(_propTypes.default.string)
 };
 InputBuilder.defaultProps = {
-  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+  // some properties
 };
 var _default = exports.default = InputBuilder;

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -54,55 +54,6 @@ $default-list-width: var(--action-button-width, 18rem);
             font-size: calc(var(--s1) * 1rem);
           }
         }
-
-        > .actions {
-          position: relative;
-
-          > button {
-            background-color: transparent;
-            border: 0;
-            cursor: pointer;
-          }
-
-          > .#{bem.$base}.popover {
-            background-color: var(--background-cards);
-            border: var(--theme-default-border-style) var(--main2);
-            border-radius: calc(var(--theme-default-border-radius) / 2);
-            cursor: default;
-            padding: $default-padding;
-            width: $default-list-width;
-
-            > p {
-              margin: 0;
-            }
-
-            > ul {
-              list-style: none;
-              margin: 0;
-              padding: 0;
-              white-space: nowrap;
-
-              > .option {
-                cursor: pointer;
-                padding-block: calc($default-padding / 4);
-
-                &:not(.with-check-mark) {
-                  padding-inline: $default-padding;
-                }
-
-                > button {
-                  background: transparent;
-                  border: 0;
-                  color: var(--paragraph);
-                  cursor: pointer;
-                  font-size: calc(var(--s0) * .875rem);
-                  text-align: left;
-                  width: 100%;
-                }
-              }
-            }
-          }
-        }
       }
     }
 

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

@@ -12,6 +12,8 @@ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports")
 var _f = require("../../../../../../f");
 var _ = require("../../../../..");
 var _InputBuilder = require("../InputBuilder");
+var _ActionsContainer = require("../ActionsContainer");
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -20,7 +22,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // Local Definitions
 
 const baseClassName = _exports.default.base;
-const componentClassName = 'section';
+const componentClassName = 'builder-section';
 
 /**
  * This is the component description.
@@ -30,7 +32,8 @@ const Section = _ref => {
     id,
     className: userClassName,
     style,
-    index
+    index,
+    handleDeleteSection
     // ...otherProps
   } = _ref;
   const {
@@ -72,9 +75,17 @@ const Section = _ref => {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "section-header"
   }, /*#__PURE__*/React.createElement("p", {
     className: "h4"
-  }, index === 0 ? 'Form title' : `Section ${index + 1}`), /*#__PURE__*/React.createElement(_f.TextInput, {
+  }, index === 0 ? 'Form title' : `Section ${index + 1}`), index !== 0 && /*#__PURE__*/React.createElement(_ActionsContainer.ActionsContainer, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+    className: "option"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "remove-section-cta",
+    onClick: handleDeleteSection
+  }, "Delete Section"))))), /*#__PURE__*/React.createElement(_f.TextInput, {
     name: `sections.${index}.title`,
     placeholder: `Title of the ${index === 0 ? 'form' : 'section'}`
   }), /*#__PURE__*/React.createElement(_f.EditorInput, {

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/styles.scss

@@ -0,0 +1,61 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.builder-section {
+  border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
+
+
+  > .section-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  > .#{bem.$base}.editor-input {
+    margin-top: $default-margin;
+  }
+
+  > form {
+    /* stylelint-disable selector-max-compound-selectors -- required */
+    > .add-question-cta {
+      align-items: center;
+      background-color: transparent;
+      border: 0;
+      color: var(--hard-interactive);
+      cursor: pointer;
+      display: flex;
+      gap: var(--gap);
+      margin-block: calc($default-margin * 1.5);
+      margin-left: auto;
+      padding: 0;
+      transition: all .2s;
+
+      &:hover {
+        color: var(--interactive);
+
+        > .icon-container {
+          background-color: var(--interactive);
+        }
+      }
+
+      > .icon-container {
+        align-items: center;
+        background-color: var(--hard-interactive);
+        border-radius: 50%;
+        display: flex;
+        height: 1.6rem;
+        justify-content: center;
+        width: 1.6rem;
+
+        > .icon {
+          color: var(--on-interactive);
+        }
+      }
+    }
+  }
+}
+
+