@pareto-engineering/design-system 5.0.5 → 5.1.1

package/dist/es/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -1,20 +1,30 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { formatTime, formatDate, DATE_FORMATS } from "../../../../utils";
+import { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'custom-tooltip-content';
 const CustomTooltipContent = ({
   id,
   className: userClassName,
-  xLabel,
   dateFormat,
   isTimeFormat,
+  isDateValue,
   active,
   payload,
   label
 }) => {
+  const formatLabelValue = value => {
+    if (isTimeFormat) {
+      return formatTime(value);
+    }
+    if (typeof value === 'number') {
+      if (Number.isInteger(value)) return value;
+      return value.toFixed(2);
+    }
+    return value;
+  };
   if (active && payload && payload.length) {
     const newPayload = payload.filter(item => item.name !== 'bounds');
     return /*#__PURE__*/React.createElement("div", {
@@ -22,14 +32,14 @@ const CustomTooltipContent = ({
       className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
     }, /*#__PURE__*/React.createElement("p", {
       className: "label"
-    }, `${xLabel}: ${formatDate(label, dateFormat)}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+    }, isDateValue ? formatDate(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
       className: "label",
       key: `${entry.name}`,
       style: {
         color: entry.color,
         textTransform: 'capitalize'
       }
-    }, `${entry.name}: ${isTimeFormat ? formatTime(entry.value) : entry.value}`)));
+    }, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`)));
   }
   return null;
 };
@@ -42,10 +52,6 @@ CustomTooltipContent.propTypes = {
    * Additional class names for the dropdown component.
    */
   className: PropTypes.string,
-  /**
-   * The label for the x-axis.
-   */
-  xLabel: PropTypes.string,
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -54,6 +60,10 @@ CustomTooltipContent.propTypes = {
    * The type of format for the datetime value
    */
   dateFormat: PropTypes.oneOf(Object.values(DATE_FORMATS)),
+  /**
+   * Flag on whether the label is a date value or not
+   */
+  isDateValue: PropTypes.bool,
   /**
    * If set true, the tooltip is displayed.
    * If set false, the tooltip is hidden, usually calculated internally.
@@ -71,6 +81,7 @@ CustomTooltipContent.propTypes = {
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
+  isDateValue: true,
   dateFormat: DATE_FORMATS.HUMAN_READABLE
 };
 export default CustomTooltipContent;

package/dist/es/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -2,10 +2,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
-
-// Local Definitions
-
 const baseClassName = styleNames.base;
 const componentClassName = 'y-labels-dropdown';
 const YLabelsDropDown = ({
@@ -46,7 +44,7 @@ const YLabelsDropDown = ({
     style: {
       backgroundColor: item.color
     }
-  }), item.label, selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
+  }), snakeCaseToTitleCase(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
     className: "icon checkmark"
   }, "I")))));
 };
@@ -83,6 +81,6 @@ YLabelsDropDown.propTypes = {
   }))
 };
 YLabelsDropDown.defaultProps = {
-  placeholder: 'Submission status'
+  placeholder: 'Select Item'
 };
 export default YLabelsDropDown;

package/dist/es/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -1,7 +1,8 @@
 @use "@pareto-engineering/bem";
 
 $default-margin: 1rem;
-$default-border-radius: .25rem;
+$default-border: var(--theme-default-input-border);
+$default-border-radius: var(--theme-default-input-border-radius);
 $default-padding: 1rem;
 $default-width: 15rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
@@ -16,9 +17,9 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
     .dropdown-button {
       align-items: center;
-      background-color: var(--soft-background-inputs);
-      border: none;
-      border-radius: $default-border-radius;
+      background-color: var(--background-far);
+      border: $default-border;
+      border-radius: calc($default-border-radius / 2);
       color: var(--hard-paragraph);
       cursor: pointer;
       display: flex;
@@ -53,8 +54,8 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
       .dropdown-item {
         align-items: center;
-        border-radius: $default-border-radius;
-        color: var(--hard-paragraph);
+        border-radius: calc($default-border-radius / 2);
+        color: var(--paragraph);
         cursor: pointer;
         display: flex;
         margin: calc($default-margin * .125);

package/dist/es/a/Charts/PieChart/PieChart.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import styleNames from '@pareto-engineering/bem/exports';
+import { CustomLegend, CustomTooltipContent } from "../Common";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'pie-chart';
+const PieChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  valueKey,
+  labelKey,
+  colors,
+  height,
+  width,
+  innerRadius,
+  outerRadius
+}) => {
+  const total = data.reduce((sum, item) => sum + item[valueKey], 0);
+  const formattedData = data.map(item => ({
+    ...item,
+    label: item[labelKey],
+    color: colors[data.indexOf(item)],
+    percentage: (item[valueKey] / total * 100).toFixed(0)
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-header"
+  }, /*#__PURE__*/React.createElement("h3", null, title)), /*#__PURE__*/React.createElement("div", {
+    className: "chart-content"
+  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(RechartsPieChart, null, /*#__PURE__*/React.createElement(Pie, {
+    data: formattedData,
+    dataKey: valueKey,
+    nameKey: labelKey,
+    cx: "50%",
+    cy: "50%",
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    label: false,
+    paddingAngle: 0
+  }, formattedData.map((entry, index) => /*#__PURE__*/React.createElement(Cell, {
+    key: entry[labelKey],
+    fill: colors[index],
+    strokeWidth: 0
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
+      isDateValue: false
+    })
+  }))), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: formattedData,
+    capitalizedLegend: true,
+    orientation: "vertical",
+    getLegendItemTitle: entry => entry[labelKey],
+    getLegendItemSubtitle: entry => entry[valueKey]
+  })));
+};
+PieChart.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })).isRequired,
+  title: PropTypes.string.isRequired,
+  valueKey: PropTypes.string.isRequired,
+  labelKey: PropTypes.string.isRequired,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  outerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+PieChart.defaultProps = {
+  id: undefined,
+  className: undefined,
+  width: '100%',
+  height: 300,
+  innerRadius: '0%',
+  outerRadius: '100%'
+};
+export default PieChart;

package/dist/es/a/Charts/PieChart/index.js

@@ -0,0 +1 @@
+export { default as PieChart } from "./PieChart";

package/dist/es/a/Charts/PieChart/styles.scss

@@ -0,0 +1,48 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  &.pie-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    .chart-header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      h3 {
+        color: var(--subtitle);
+        margin: calc($default-margin / 5);
+        text-align: left;
+      }
+    }
+
+    .chart-content {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/dist/es/a/Charts/index.js

@@ -1,2 +1,3 @@
 export { AreaChart } from "./AreaChart";
-export { BarChart } from "./BarChart";
+export { BarChart } from "./BarChart";
+export { PieChart } from "./PieChart";

package/dist/es/a/Notification/styles.scss

@@ -4,6 +4,7 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-border: 1px solid var(--x);
 $default-padding: 1rem;
 $default-margin: 1rem;
 $default-border-radius: 1.5rem;
@@ -12,10 +13,11 @@ $default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
-  background-color: var(--x);
+  background-color: var(--background-far);
+  border: $default-border;
   border-radius: $default-border-radius;
   bottom: 0;
-  color: var(--on-x);
+  color: var(--paragraph);
   display: flex;
   justify-content: space-between;
   margin-bottom: $default-margin;
@@ -31,8 +33,16 @@ $default-height: var(--notification-height, 5rem);
   > .message-container {
     align-items: center;
     display: flex;
+    gap: $default-padding;
     overflow: auto;
 
+    > .icon {
+      background-color: var(--x);
+      border-radius: 50%;
+      color: var(--white);
+      padding: calc($default-padding / 2);
+    }
+
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
@@ -44,12 +54,14 @@ $default-height: var(--notification-height, 5rem);
   }
 
   .#{bem.$base}.button {
+    background-color: transparent;
+    color: var(--paragraph);
     padding: calc($default-padding / 2);
 
-    &:focus {
+    &:focus,
+    &:hover {
       background-color: transparent;
+      color: var(--hard-paragraph);
     }
   }
 }
-
-

package/dist/es/a/index.js

@@ -28,4 +28,4 @@ export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
 export { DatePicker } from "./DatePicker";
 export { Tooltip } from "./Tooltip";
-export { AreaChart, BarChart } from "./Charts";
+export { AreaChart, BarChart, PieChart } from "./Charts";

package/dist/es/f/FormInput/FormInput.js

@@ -22,7 +22,7 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
-  const newClassName = [className, componentClassName].filter(Boolean).join(' ');
+  const newClassName = [className, componentClassName, otherProps.hasCharacterLimit && otherProps.maxLength && `limit-character-count-${otherProps.maxLength}`].filter(Boolean).join(' ');
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(TextareaInput, _extends({
       className: newClassName,

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

@@ -25,7 +25,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 // Local Definitions
 
 import { FormLabel, FormDescription } from "../../common";
-import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin } from "./common";
+import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin, ExposePlainTextPlugin } from "./common";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'editor-input';
@@ -56,7 +56,8 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
-  setEditorState
+  setEditorState,
+  setPlainTextKey
   // ...otherProps
 }) => {
   const [field,,] = useField(name);
@@ -128,7 +129,7 @@ const EditorInput = ({
       '--resize': resize,
       '--rows': `${rows}em`
     }
-  }, /*#__PURE__*/React.createElement(FormLabel, {
+  }, label && /*#__PURE__*/React.createElement(FormLabel, {
     name: name,
     color: labelColor,
     optional: optional
@@ -147,7 +148,10 @@ const EditorInput = ({
     className: "s-1",
     description: description,
     name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null)));
+  }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null), setPlainTextKey && /*#__PURE__*/React.createElement(ExposePlainTextPlugin, {
+    setFieldValue: setFieldValue,
+    setPlainTextKey: setPlainTextKey
+  })));
 };
 EditorInput.propTypes = {
   /**

package/dist/es/f/fields/EditorInput/common/ExposePlainTextPlugin.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot } from 'lexical';
+import PropTypes from 'prop-types';
+
+/**
+ * This is the component description
+ */
+const ExposePlainTextPlugin = ({
+  setFieldValue,
+  setPlainTextKey
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => editor.registerUpdateListener(({
+    editorState
+  }) => {
+    editorState.read(() => {
+      const root = $getRoot();
+      const textContent = root.getTextContent();
+      setFieldValue(setPlainTextKey, textContent);
+    });
+  }), [editor]);
+  return null;
+};
+ExposePlainTextPlugin.propTypes = {
+  setFieldValue: PropTypes.func.isRequired,
+  setPlainTextKey: PropTypes.string.isRequired
+};
+ExposePlainTextPlugin.defaultProps = {
+  //
+};
+export default ExposePlainTextPlugin;

package/dist/es/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.js

@@ -168,7 +168,7 @@ const ToolbarPlugin = ({
   }, [applyStyleText]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor} b-x`].filter(e => e).join(' '),
     style: inlineStyles
   }, /*#__PURE__*/React.createElement("div", {
     className: "group"

package/dist/es/f/fields/EditorInput/common/index.js

@@ -3,4 +3,5 @@ export { default as TreeViewPlugin } from "./TreeViewPlugin";
 export { default as StopPropagationPlugin } from "./StopPropagationPlugin";
 export { ToolbarPlugin } from "./ToolbarPlugin";
 export { ColorPicker } from "./ColorPicker";
-export { FontSizeDropDown } from "./FontSizeDropDown";
+export { FontSizeDropDown } from "./FontSizeDropDown";
+export { default as ExposePlainTextPlugin } from "./ExposePlainTextPlugin";

package/dist/es/f/fields/LatexPreviewInput/LatexPreviewInput.js

@@ -34,7 +34,7 @@ const LatexPreviewInput = ({
   const LatexPreview = useMemo(() => convertLatexToHtml(values[name]), [values[name]]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, 'form-input'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, className, userClassName, 'form-input'].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(TextareaInput, _extends({
     className: "preview-child",

package/dist/es/f/fields/LatexPreviewInput/styles.scss

@@ -11,6 +11,7 @@ $default-margin: 1em;
 
   > .preview-child {
     flex: 1;
+    position: relative;
   }
 
   > .latex-container {

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -31,7 +31,8 @@ const TextareaInput = ({
   disabled,
   placeholder,
   autoComplete,
-  resize
+  resize,
+  maxLength
   // ...otherProps
 }) => {
   const [field] = useField({
@@ -56,7 +57,8 @@ const TextareaInput = ({
     placeholder: placeholder,
     rows: rows,
     disabled: disabled,
-    autoComplete: autoComplete
+    autoComplete: autoComplete,
+    maxLength: maxLength
   })), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,

package/dist/es/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -27,7 +27,8 @@ const ExpandableLexicalPreview = ({
   pageTitle,
   onBlock,
   onOpen,
-  header
+  header,
+  rows
   // ...otherProps
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -68,7 +69,8 @@ const ExpandableLexicalPreview = ({
     name: name,
     resize: resize,
     disabled: true,
-    id: "the-bad-ass-input"
+    id: `${id}-editor-input`,
+    rows: rows
   }), /*#__PURE__*/React.createElement(Button, {
     id: id,
     className: "expand-button ai-icon",

package/dist/es/g/ExpandableLexicalPreview/styles.scss

@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
 
-
   &.collapsed {
     flex-direction: row;
   }

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

@@ -53,6 +53,7 @@ const InputBuilder = ({
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
+  const textChoices = ['text', 'number', 'textarea', 'latex-preview-input'];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -129,7 +130,32 @@ const InputBuilder = ({
     label: "Description (optional)",
     name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
     placeholder: "Describe details for the question"
-  })), shouldRenderOptions && /*#__PURE__*/React.createElement(FieldArray, {
+  })), textChoices.includes(input?.type) && /*#__PURE__*/React.createElement("div", {
+    className: "character-limit-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "is-required"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Limit number of characters permitted for this input"), /*#__PURE__*/React.createElement(ToggleSwitch, {
+    handleOnChange: () => {
+      setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.hasCharacterLimit`, !input?.hasCharacterLimit);
+      if (!input?.hasCharacterLimit) {
+        setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`, '');
+      }
+    },
+    checked: input?.hasCharacterLimit,
+    style: getToggleSwitchStyles(!input?.hasCharacterLimit),
+    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_character_limit_toggle`
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "character-limit-input"
+  }, input?.hasCharacterLimit && /*#__PURE__*/React.createElement(TextInput, {
+    label: "Enter the maximum number of characters permitted.",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxLength`,
+    placeholder: "",
+    type: "number",
+    validate: integerAndGreaterThanZero,
+    value: input?.maxLength
+  }))), shouldRenderOptions && /*#__PURE__*/React.createElement(FieldArray, {
     name: `sections.${sectionIndex}.inputs.${inputIndex}.options`
   }, ({
     push,

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

@@ -64,6 +64,21 @@ $default-list-width: var(--action-button-width, 18rem);
       margin-bottom: $default-margin;
     }
 
+    > .character-limit-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+
+      > .is-required {
+        display: flex;
+        flex-direction: row;
+      }
+
+      > .character-limit-input {
+        flex-direction: column;
+      }
+    }
+
     > .input-options {
       display: flex;
       flex-direction: column;

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

@@ -49,7 +49,10 @@ const Section = ({
     inputs
   } = section;
   useEffect(() => {
-    const items = inputs.map((input, indx) => ({
+    const orderMap = new Map();
+    section.orderedInputDragIds.forEach((identifier, indx) => orderMap.set(identifier, indx));
+    const orderedInputs = inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name));
+    const items = orderedInputs.map((input, indx) => ({
       Content: /*#__PURE__*/React.createElement(InputBuilder, {
         key: input.name,
         sectionIndex: index,
@@ -61,6 +64,7 @@ const Section = ({
     }));
     setDraggableInputs(items);
   }, [inputs.length, index]);
+  const dragAndDropKey = draggableInputs.map(e => e.identifier).join(',');
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -92,7 +96,7 @@ const Section = ({
       const ids = reOrderedItems.map(e => e.identifier);
       setFieldValue(`sections.${index}.orderedInputDragIds`, ids);
     },
-    key: draggableInputs.length
+    key: dragAndDropKey
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "add-question-cta",

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

@@ -10,6 +10,7 @@ import "./styles.scss";
 
 // Local Definitions
 
+import { applyCharacterLimit } from "../../../../utils";
 import { Section } from "./common";
 const baseClassName = styleNames.base;
 const componentClassName = 'renderer';
@@ -134,6 +135,11 @@ const Renderer = ({
         onSave?.(formDataWithValues);
       }
     }, [values]);
+    useEffect(() => {
+      applyCharacterLimit({
+        setMaxLength: false
+      });
+    }, [values]);
     const hasErrors = Object.keys(errors).length > 0;
     return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
       key: `${section.title}`