@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/Footer/Footer.js

@@ -13,6 +13,7 @@ import { APP_FOOTER_ID, DATA_IGNORED } from "./constants";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Footer = ({
   children
 }) => {
@@ -53,12 +54,14 @@ const Footer = ({
       observer.disconnect();
     };
   }, [performFooterUpdate]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.footer, 'engage__footer')
-  }, /*#__PURE__*/React.createElement("div", {
-    id: APP_FOOTER_ID,
-    ref: footerRef
-  }, children));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(classes.footer, 'engage__footer'),
+    children: /*#__PURE__*/_jsx("div", {
+      id: APP_FOOTER_ID,
+      ref: footerRef,
+      children: children
+    })
+  });
 };
 Footer.defaultProps = {
   children: null

package/components/Form/Builder/Builder.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _camelCase from "lodash/camelCase";
 var _Builder;
 import React, { Component, Fragment } from 'react';
@@ -26,6 +27,7 @@ import { sanitizePortalName } from "./helpers/common";
  * Optional select element
  * @type {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const emptySelectOption = {
   '': ''
 };
@@ -34,13 +36,14 @@ const emptySelectOption = {
  * Takes a form configuration and handles rendering and updates of the form fields.
  * Note: Only one country and one province element is supported per FormBuilder instance.
  */
-class Builder extends Component {
+let Builder = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Builder(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
 
     // Prepare internal state
     /**
@@ -48,7 +51,7 @@ class Builder extends Component {
      * @param {string} type The type value of the element to return.
      * @returns {*|ElementText|ElementSelect|ElementCheckbox|ElementRadio|null}
      */
-    this.getFormElementComponent = type => this.props.elements[type] || Builder.defaultElements[type] || null;
+    _this.getFormElementComponent = type => _this.props.elements[type] || Builder.defaultElements[type] || null;
     /**
      * Sorts the elements by "sortOrder" property
      *
@@ -59,7 +62,7 @@ class Builder extends Component {
      * @param {FormElement} element2 Second element
      * @returns {number}
      */
-    this.elementSortFunc = (element1, element2) => {
+    _this.elementSortFunc = (element1, element2) => {
       // Keep current sort order when no specific sort order was set for both
       if (element1.sortOrder === undefined || element2.sortOrder === undefined) {
         return 0;
@@ -74,18 +77,18 @@ class Builder extends Component {
      * @param {string} elementId Element to create the handler for
      * @param {string} value Element value
      */
-    this.elementChangeHandler = (elementId, value) => {
+    _this.elementChangeHandler = (elementId, value) => {
       // "newState" is the state changes before any form actions have been applied
       const newState = {
-        ...this.state,
+        ..._this.state,
         formData: {
-          ...this.state.formData,
+          ..._this.state.formData,
           [elementId]: value
         }
       };
 
       // Handle context sensitive functionality by via "action" listener and use the "new" state
-      const updatedNewState = this.actionListener.notify(elementId, this.state, newState);
+      const updatedNewState = _this.actionListener.notify(elementId, _this.state, newState);
 
       // Form actions can append validation errors by adding that field to the new state
       // Split out validation errors from final state and
@@ -98,7 +101,7 @@ class Builder extends Component {
       let hasErrors = Object.keys(validationErrors).length > 0;
 
       // Check "required" fields for all visible elements and enable rendering on changes
-      this.formElements.forEach(formElement => {
+      _this.formElements.forEach(formElement => {
         if (!finalState.elementVisibility[formElement.id] || !formElement.required) {
           return;
         }
@@ -108,11 +111,11 @@ class Builder extends Component {
       });
 
       // Handle state internally and send an "onChange" event to parent if this finished
-      this.setState(finalState);
+      _this.setState(finalState);
 
       // Transform to external structure (unavailable ones will be set undefined)
       const updateData = {};
-      this.formElements.forEach(el => {
+      _this.formElements.forEach(el => {
         if (el.custom) {
           if (updateData.customAttributes === undefined) {
             updateData.customAttributes = {};
@@ -124,7 +127,7 @@ class Builder extends Component {
       });
 
       // Trigger the given update action of the parent and provide all new validation errors to it
-      this.props.handleUpdate(updateData, hasErrors,
+      _this.props.handleUpdate(updateData, hasErrors,
       // Output validation errors in the same structure (array) as the component takes them
       hasErrors ? Object.keys(validationErrors).map(k => ({
         path: k,
@@ -139,16 +142,16 @@ class Builder extends Component {
      * @param {string} elementErrorText The error text to be shown for this specific element
      * @returns {JSX.Element}
      */
-    this.renderElement = (formName, element, elementErrorText) => {
+    _this.renderElement = (formName, element, elementErrorText) => {
       const {
         formData
-      } = this.state;
-      const elementName = `${this.props.name}_${element.id}`;
+      } = _this.state;
+      const elementName = `${_this.props.name}_${element.id}`;
       const elementValue = formData[element.id];
-      const elementVisible = this.state.elementVisibility[element.id] || false;
+      const elementVisible = _this.state.elementVisibility[element.id] || false;
 
       // Take a dynamic REACT element based on its type
-      const Element = this.getFormElementComponent(element.type);
+      const Element = _this.getFormElementComponent(element.type);
       if (!Element) {
         logger.error(`Unknown form element type: ${element.type}`);
         return null;
@@ -159,13 +162,13 @@ class Builder extends Component {
       switch (element.type) {
         case ELEMENT_TYPE_COUNTRY:
           {
-            elementData.options = element.options || this.countryList;
+            elementData.options = element.options || _this.countryList;
             break;
           }
         case ELEMENT_TYPE_PROVINCE:
           {
             // Province selection only makes sense with a country being selected, or from custom options
-            const countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+            const countryElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
             elementData.options = countryElement && formData[countryElement.id] ? buildProvinceList(formData[countryElement.id],
             // Auto-select with "empty" when not required
             element.required ? null : emptySelectOption) : {};
@@ -174,7 +177,7 @@ class Builder extends Component {
         default:
           break;
       }
-      return /*#__PURE__*/React.createElement(Element, {
+      return /*#__PURE__*/_jsx(Element, {
         name: elementName,
         element: elementData,
         errorText: elementErrorText,
@@ -183,55 +186,58 @@ class Builder extends Component {
         formName: formName
       });
     };
-    this.state = {
+    _this.state = {
       elementVisibility: {},
       formData: {}
     };
 
     // Reorganize form elements into a structure that can be easily rendered
-    const formElements = buildFormElements(props.config, this.elementChangeHandler);
+    const formElements = buildFormElements(props.config, _this.elementChangeHandler);
     // Compute defaults
     const formDefaults = buildFormDefaults(formElements, props.defaults);
     // Assign defaults to state
-    this.state.formData = formDefaults;
+    _this.state.formData = formDefaults;
 
     // Handle fixed visibilities
     formElements.forEach(element => {
       // Assume as visible except it's explicitly set to "false"
-      this.state.elementVisibility[element.id] = element.visible !== false;
+      _this.state.elementVisibility[element.id] = element.visible !== false;
     });
-    this.actionListener = new ActionListener(buildProvinceList, formDefaults);
-    this.actionListener.attachAll(formElements);
+    _this.actionListener = new ActionListener(buildProvinceList, formDefaults);
+    _this.actionListener.attachAll(formElements);
 
     // Sort the elements after attaching action listeners to keep action hierarchy same as creation
-    this.formElements = formElements.sort(this.elementSortFunc);
+    _this.formElements = formElements.sort(_this.elementSortFunc);
 
     // Assemble combined country/province list based on the config element
-    const _countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+    const _countryElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
     if (_countryElement) {
-      this.countryList = buildCountryList(_countryElement, emptySelectOption);
-      const provinceElement = this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
+      _this.countryList = buildCountryList(_countryElement, emptySelectOption);
+      const provinceElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
       if (provinceElement && provinceElement.required && !!formDefaults[_countryElement.id] && !formDefaults[provinceElement.id]) {
         // Set default for province field for given country
         const [first] = Object.keys(buildProvinceList(formDefaults[_countryElement.id]));
         if (first) {
-          this.state.formData[provinceElement.id] = first;
+          _this.state.formData[provinceElement.id] = first;
         }
       }
     }
 
     // Final form initialization, by triggering actionListeners and enable rendering for elements
-    let _newState = this.state;
-    this.formElements.forEach(element => {
-      _newState = this.actionListener.notify(element.id, this.state, _newState);
+    let _newState = _this.state;
+    _this.formElements.forEach(element => {
+      _newState = _this.actionListener.notify(element.id, _this.state, _newState);
     });
-    this.state = _newState;
+    _this.state = _newState;
+    return _this;
   }
+  _inheritsLoose(Builder, _Component);
+  var _proto = Builder.prototype;
   /**
    * Renders the component based on the given config
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       name,
       className,
@@ -240,44 +246,49 @@ class Builder extends Component {
     // Convert validation errors for easier handling
     const validationErrors = buildValidationErrorList(this.props.validationErrors);
     const validationErrorsAmount = Object.entries(validationErrors).length;
-    return /*#__PURE__*/React.createElement(Form, {
+    return /*#__PURE__*/_jsxs(Form, {
       className: _camelCase(name),
-      onSubmit: onSubmit
-    }, validationErrorsAmount > 0 && /*#__PURE__*/React.createElement("div", {
-      className: "sr-only"
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: "login.errorAmount",
-      params: {
-        amount: validationErrorsAmount
-      }
-    })), /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, this.formElements.map(element => /*#__PURE__*/React.createElement(Fragment, {
-      key: `${name}_${element.id}`
-    }, /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${BEFORE}`,
-      props: {
-        formName: name,
-        errorText: validationErrors[element.id] || '',
-        element
-      }
-    }), /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}`,
-      props: {
-        formName: name,
-        errorText: validationErrors[element.id] || '',
-        element
-      }
-    }, this.renderElement(name, element, validationErrors[element.id] || '')), /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${AFTER}`,
-      props: {
-        formName: name,
-        errorText: validationErrors[element.id] || '',
-        element
-      }
-    })))));
-  }
-}
+      onSubmit: onSubmit,
+      children: [validationErrorsAmount > 0 && /*#__PURE__*/_jsx("div", {
+        className: "sr-only",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "login.errorAmount",
+          params: {
+            amount: validationErrorsAmount
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: className,
+        children: this.formElements.map(element => /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(Portal, {
+            name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${BEFORE}`,
+            props: {
+              formName: name,
+              errorText: validationErrors[element.id] || '',
+              element
+            }
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}`,
+            props: {
+              formName: name,
+              errorText: validationErrors[element.id] || '',
+              element
+            },
+            children: this.renderElement(name, element, validationErrors[element.id] || '')
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${AFTER}`,
+            props: {
+              formName: name,
+              errorText: validationErrors[element.id] || '',
+              element
+            }
+          })]
+        }, `${name}_${element.id}`))
+      })]
+    });
+  };
+  return Builder;
+}(Component);
 _Builder = Builder;
 Builder.defaultElements = {
   [ELEMENT_TYPE_EMAIL]: ElementText,

package/components/Form/Builder/ElementCheckbox.js

@@ -11,6 +11,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementCheckbox = props => {
   const {
     element,
@@ -23,25 +24,26 @@ const ElementCheckbox = props => {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames('container-checkbox', _camelCase(name), 'engage__form-checkbox', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    name: name,
-    errorText: errorText,
-    checked: !!value,
-    label: element.label,
-    onChange: element.handleChange,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: element.disabled
-  }), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(Checkbox, {
+      name: name,
+      errorText: errorText,
+      checked: !!value,
+      label: element.label,
+      onChange: element.handleChange,
+      translateErrorText: false,
+      showErrorText: false,
+      disabled: element.disabled
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementCheckbox.defaultProps = {
   value: false,

package/components/Form/Builder/ElementMultiSelect.js

@@ -13,6 +13,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementMultiSelect = props => {
   const {
     element,
@@ -26,46 +27,49 @@ const ElementMultiSelect = props => {
     return null;
   }
   const values = [].concat(value).filter(Boolean);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(_camelCase(name), 'engage__form-multi-select', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "xs"
-  }, /*#__PURE__*/React.createElement(Select, {
-    name: name,
-    required: element?.required,
-    label: element.label,
-    placeholder: element.placeholder,
-    value: values,
-    options: element.options,
-    onChange: element.handleChange,
-    errorText: errorText,
-    isControlled: true,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: element.disabled,
-    multiple: true,
-    "aria-invalid": !!errorText,
-    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
-  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(SelectContextChoices, {
-    label: element.label,
-    placeholder: element.placeholder,
-    value: values,
-    options: element.options,
-    onChange: element.handleChange,
-    errorText: errorText,
-    showErrorText: false
-  })), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+      appAlways: true,
+      breakpoint: "xs",
+      children: /*#__PURE__*/_jsx(Select, {
+        name: name,
+        required: element?.required,
+        label: element.label,
+        placeholder: element.placeholder,
+        value: values,
+        options: element.options,
+        onChange: element.handleChange,
+        errorText: errorText,
+        isControlled: true,
+        translateErrorText: false,
+        showErrorText: false,
+        disabled: element.disabled,
+        multiple: true,
+        "aria-invalid": !!errorText,
+        "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
+      })
+    }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: /*#__PURE__*/_jsx(SelectContextChoices, {
+        label: element.label,
+        placeholder: element.placeholder,
+        value: values,
+        options: element.options,
+        onChange: element.handleChange,
+        errorText: errorText,
+        showErrorText: false
+      })
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementMultiSelect.defaultProps = {
   value: '',

package/components/Form/Builder/ElementPhoneNumber.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _isEqual from "lodash/isEqual";
 import _upperCase from "lodash/upperCase";
 import _camelCase from "lodash/camelCase";
@@ -21,6 +20,7 @@ import { css } from 'glamor';
 import { themeConfig } from '@shopgate/engage';
 import Label from '@shopgate/pwa-ui-shared/TextField/components/Label';
 import FormHelper from "./FormHelper";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables,
   colors
@@ -167,13 +167,13 @@ const UnwrappedElementPhoneNumber = /*#__PURE__*/React.memo(props => {
      * of the counties array.
      */
     const sanitizedCountrySortOrder = countrySortOrder.filter(countryCode => countries.includes(countryCode));
-    const countryListsEqual = _isEqual([...countries].sort(), [...sanitizedCountrySortOrder].sort());
+    const countryListsEqual = _isEqual([].concat(countries).sort(), [].concat(sanitizedCountrySortOrder).sort());
     /**
      * When list with supported countries has the same entries as the country sort order, we don't
      * need to add a separator to the countryOptionsOrder array since the country picker lists
      * will not show a section with unordered countries.
      */
-    return sanitizedCountrySortOrder.length ? [...sanitizedCountrySortOrder, ...(countryListsEqual ? [] : ['|'])] : [];
+    return sanitizedCountrySortOrder.length ? [].concat(sanitizedCountrySortOrder, countryListsEqual ? [] : ['|']) : [];
   }, [countries, countrySortOrder]);
   const hasCountrySelect = React.useMemo(() => countries.length > 1, [countries.length]);
   const handleChangeWrapped = React.useCallback(phoneValue => {
@@ -197,41 +197,44 @@ const UnwrappedElementPhoneNumber = /*#__PURE__*/React.memo(props => {
     return null;
   }
   const Component = hasCountrySelect ? PhoneInputCountrySelect : PhoneInput;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classnames('formBuilderField', 'engage__form-phone-number', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: phoneClasses
-  }, /*#__PURE__*/React.createElement(Label, {
-    label: label,
-    isFocused: isFocused,
-    isFloating: isFocused || !!value
-  }), /*#__PURE__*/React.createElement(Component, _extends({
-    defaultCountry: defaultCountry,
-    name: name,
-    value: value || '',
-    onChange: handleChangeWrapped,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    disabled: disabled,
-    required: required,
-    "aria-invalid": !!errorText,
-    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
-  }, hasCountrySelect ? {
-    countryOptionsOrder,
-    addInternationalOption: false,
-    flags,
-    countries,
-    labels
-  } : {
-    className: 'PhoneInputInput'
-  }))), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: phoneClasses,
+      children: [/*#__PURE__*/_jsx(Label, {
+        label: label,
+        isFocused: isFocused,
+        isFloating: isFocused || !!value
+      }), /*#__PURE__*/_jsx(Component, {
+        defaultCountry: defaultCountry,
+        name: name,
+        value: value || '',
+        onChange: handleChangeWrapped,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        disabled: disabled,
+        required: required,
+        "aria-invalid": !!errorText,
+        "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null,
+        ...(hasCountrySelect ? {
+          countryOptionsOrder,
+          addInternationalOption: false,
+          flags,
+          countries,
+          labels
+        } : {
+          className: 'PhoneInputInput'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 });
 UnwrappedElementPhoneNumber.defaultProps = {
   value: '',

package/components/Form/Builder/ElementRadio.js

@@ -12,6 +12,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementRadio = props => {
   const {
     element,
@@ -24,31 +25,32 @@ const ElementRadio = props => {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(_camelCase(name), 'engage__form-radio', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
-    name: name,
-    label: element.label,
-    value: value,
-    onChange: element.handleChange,
-    errorText: errorText,
-    isControlled: true,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: element.disabled
-  }, Object.keys(element.options).map(itemName => /*#__PURE__*/React.createElement(RadioItem, {
-    key: `${name}_${itemName}`,
-    id: `${name}_${_camelCase(itemName)}`,
-    name: itemName,
-    label: element.options[itemName]
-  }))), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(RadioGroup, {
+      name: name,
+      label: element.label,
+      value: value,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false,
+      showErrorText: false,
+      disabled: element.disabled,
+      children: Object.keys(element.options).map(itemName => /*#__PURE__*/_jsx(RadioItem, {
+        id: `${name}_${_camelCase(itemName)}`,
+        name: itemName,
+        label: element.options[itemName]
+      }, `${name}_${itemName}`))
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementRadio.defaultProps = {
   value: '',