@semcore/feedback-form 6.40.0 → 16.0.0-prerelease.11

package/lib/esm/component/feedback-rating/FeedbackRating.mjs

@@ -1,310 +1,354 @@
-import x from "@babel/runtime/helpers/esm/objectSpread2";
-import Z from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import I from "@babel/runtime/helpers/esm/extends";
-import ee from "@babel/runtime/helpers/esm/classCallCheck";
-import te from "@babel/runtime/helpers/esm/createClass";
-import f from "@babel/runtime/helpers/esm/assertThisInitialized";
-import re from "@babel/runtime/helpers/esm/inherits";
-import ne from "@babel/runtime/helpers/esm/createSuper";
-import s from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as ae } from "@semcore/utils/lib/core/index";
-import ie, { sstyled as B, assignProps as z, Component as oe } from "@semcore/core";
-import e from "react";
-import { Field as H, Form as le } from "react-final-form";
-import se from "final-form-focus";
-import me from "@semcore/spin-container";
-import ce from "@semcore/utils/lib/enhances/i18nEnhance";
-import ue from "@semcore/utils/lib/uniqueID";
-import u from "@semcore/notice";
-import de from "@semcore/icon/Check/m";
-import pe from "@semcore/icon/Warning/m";
-import { Text as P } from "@semcore/typography";
-import fe from "@semcore/illustration/Feedback";
-import he from "@semcore/link";
-import W from "../slider-rating/SliderRating.mjs";
-import ge from "@semcore/modal";
-import be from "@semcore/textarea";
-import { Flex as k, Box as N } from "@semcore/flex-box";
-import { FeedbackItem as ve } from "../feedback-item/FeedbackItem.mjs";
-import { SubmitButton as ke } from "../submit-button/SubmitButton.mjs";
-import ye from "../checkbox-button/CheckboxButton.mjs";
-import j from "@semcore/input";
-import { localizedMessages as A } from "../../translations/__intergalactic-dynamic-locales.mjs";
-import { NoticeBubbleManager as Ce, NoticeBubbleContainer as Ee } from "@semcore/notice-bubble";
-var xe = ["header", "submitText", "formConfig", "notificationText", "notificationTitle", "learnMoreLink", "Children", "styles", "forwardRef", "status", "theme", "background", "rating", "visible", "onVisibleChange", "notificationVisible", "onNotificationClose", "getI18nText", "errorFeedbackEmail", "modalWidth"], _e = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Field, Form } from "react-final-form";
+import createFocusDecorator from "final-form-focus";
+import SpinContainer from "@semcore/spin-container";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import Notice from "@semcore/notice";
+import CheckM from "@semcore/icon/Check/m";
+import WarnM from "@semcore/icon/Warning/m";
+import { Text } from "@semcore/typography";
+import FeedbackIllustration from "@semcore/illustration/Feedback";
+import Link from "@semcore/link";
+import SliderRating from "../slider-rating/SliderRating.mjs";
+import Modal from "@semcore/modal";
+import Textarea from "@semcore/textarea";
+import { Flex, Box } from "@semcore/flex-box";
+import { FeedbackItem } from "../feedback-item/FeedbackItem.mjs";
+import { SubmitButton } from "../submit-button/SubmitButton.mjs";
+import CheckboxButton from "../checkbox-button/CheckboxButton.mjs";
+import Input from "@semcore/input";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import { NoticeBubbleManager, NoticeBubbleContainer } from "@semcore/notice-bubble";
+var _excluded = ["header", "submitText", "formConfig", "notificationText", "notificationTitle", "learnMoreLink", "Children", "styles", "forwardRef", "status", "theme", "background", "rating", "visible", "onVisibleChange", "notificationVisible", "onNotificationClose", "getI18nText", "errorFeedbackEmail", "modalWidth"];
+var style = (
   /*__reshadow_css_start__*/
-  (ae.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SFeedbackRating_ztp5p_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_ztp5p_gg_ li{list-style:none}",
-    "ztp5p_gg_"
+    ".___SFeedbackRating_kmztw_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_kmztw_gg_ li{list-style:none}",
+    "kmztw_gg_"
   ), {
-    __SFeedbackRating: "___SFeedbackRating_ztp5p_gg_"
+    "__SFeedbackRating": "___SFeedbackRating_kmztw_gg_"
   })
-), y = /* @__PURE__ */ function(b) {
-  re(o, b);
-  var p = ne(o);
-  function o() {
-    var n;
-    ee(this, o);
-    for (var i = arguments.length, v = new Array(i), a = 0; a < i; a++)
-      v[a] = arguments[a];
-    return n = p.call.apply(p, [this].concat(v)), s(f(n), "state", {
-      error: !1
-    }), s(f(n), "manager", new Ce()), s(f(n), "focusDecorator", se()), s(f(n), "handleChangeRating", function(t) {
-      n.asProps.onVisibleChange(!0, t);
-    }), s(f(n), "handelCloseModal", function() {
-      n.asProps.onVisibleChange(!1, n.asProps.rating);
-    }), s(f(n), "handleChange", function(t) {
-      return function(r, m) {
-        t(m);
+);
+var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(FeedbackRatingRoot2, _Component);
+  var _super = _createSuper(FeedbackRatingRoot2);
+  function FeedbackRatingRoot2() {
+    var _this;
+    _classCallCheck(this, FeedbackRatingRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      error: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "manager", new NoticeBubbleManager());
+    _defineProperty(_assertThisInitialized(_this), "focusDecorator", createFocusDecorator());
+    _defineProperty(_assertThisInitialized(_this), "handleChangeRating", function(rating) {
+      _this.asProps.onVisibleChange(true, rating);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handelCloseModal", function() {
+      _this.asProps.onVisibleChange(false, _this.asProps.rating);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function(fn) {
+      return function(value, e) {
+        fn(e);
       };
-    }), s(f(n), "renderCheckbox", function(t, r) {
-      var m = n.props.initialValues[t.key];
-      return /* @__PURE__ */ e.createElement(H, {
-        name: t.key,
-        initialValue: m,
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderCheckbox", function(config, index) {
+      var initialValue = _this.props.initialValues[config.key];
+      return /* @__PURE__ */ React.createElement(Field, {
+        name: config.key,
+        initialValue,
         type: "checkbox",
-        key: t.key
-      }, function(h) {
-        var g = h.input;
-        return /* @__PURE__ */ e.createElement(E.Checkbox, I({}, g, {
-          id: t.key,
-          label: t.label,
-          onChange: function(l, F) {
-            return g.onChange(F);
+        key: config.key
+      }, function(_ref7) {
+        var input = _ref7.input;
+        return /* @__PURE__ */ React.createElement(FeedbackRating.Checkbox, _extends({}, input, {
+          id: config.key,
+          label: config.label,
+          onChange: function onChange(_checked, e) {
+            return input.onChange(e);
           },
-          focused: r === 0
+          focused: index === 0
         }));
       });
-    }), s(f(n), "renderTextField", function(t) {
-      var r, m = n.props.initialValues[t.key], h = typeof t.label == "string" ? /* @__PURE__ */ e.createElement(P, {
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderTextField", function(config) {
+      var _config$description;
+      var initialValue = _this.props.initialValues[config.key];
+      var label = typeof config.label === "string" ? /* @__PURE__ */ React.createElement(Text, {
         mb: 2,
         size: 200
-      }, t.label) : t.label, g = ((r = t.description) === null || r === void 0 ? void 0 : r.type) === e.Fragment;
-      return /* @__PURE__ */ e.createElement(k, {
+      }, config.label) : config.label;
+      var isDescriptionReactFragment = ((_config$description = config.description) === null || _config$description === void 0 ? void 0 : _config$description.type) === React.Fragment;
+      return /* @__PURE__ */ React.createElement(Flex, {
         direction: "column"
-      }, /* @__PURE__ */ e.createElement(k, {
+      }, /* @__PURE__ */ React.createElement(Flex, {
         tag: "label",
         mt: 4,
-        htmlFor: t.key,
-        key: t.key
-      }, h), /* @__PURE__ */ e.createElement(E.Item, {
-        name: t.key,
-        validate: t.validate,
-        initialValue: m,
+        htmlFor: config.key,
+        key: config.key
+      }, label), /* @__PURE__ */ React.createElement(FeedbackRating.Item, {
+        name: config.key,
+        validate: config.validate,
+        initialValue,
         placement: "left-start",
         flip: {
           fallbackPlacements: ["right-start", "bottom"]
         },
-        "aria-describedby": t.description ? t.key + "-description" : void 0
-      }, function(_) {
-        var l = _.input;
-        return t.type === "textarea" ? /* @__PURE__ */ e.createElement(be, I({}, l, {
-          h: 80,
-          onChange: n.handleChange(l.onChange),
-          id: t.key
-        })) : t.type === "input" || t.type === "email" ? (t.type === "email" && (l.autoComplete = "email", l.type = "email"), /* @__PURE__ */ e.createElement(j, {
-          state: l.state
-        }, /* @__PURE__ */ e.createElement(j.Value, I({}, l, {
-          onChange: n.handleChange(l.onChange),
-          id: t.key
-        })))) : null;
-      }), t.description && /* @__PURE__ */ e.createElement(N, {
+        "aria-describedby": config.description ? config.key + "-description" : void 0
+      }, function(_ref8) {
+        var input = _ref8.input;
+        if (config.type === "textarea") {
+          return /* @__PURE__ */ React.createElement(Textarea, _extends({}, input, {
+            h: 80,
+            onChange: _this.handleChange(input.onChange),
+            id: config.key
+          }));
+        }
+        if (config.type === "input" || config.type === "email") {
+          if (config.type === "email") {
+            input.autoComplete = "email";
+            input.type = "email";
+          }
+          return /* @__PURE__ */ React.createElement(Input, {
+            state: input.state
+          }, /* @__PURE__ */ React.createElement(Input.Value, _extends({}, input, {
+            onChange: _this.handleChange(input.onChange),
+            id: config.key
+          })));
+        }
+        return null;
+      }), config.description && /* @__PURE__ */ React.createElement(Box, {
         mt: 2
-      }, typeof t.description == "string" || g ? /* @__PURE__ */ e.createElement(P, {
+      }, typeof config.description === "string" || isDescriptionReactFragment ? /* @__PURE__ */ React.createElement(Text, {
         size: 200,
         color: "text-secondary",
-        id: t.key + "-description"
-      }, t.description) : t.description));
-    }), n;
+        id: config.key + "-description"
+      }, config.description) : config.description));
+    });
+    return _this;
   }
-  return te(o, [{
+  _createClass(FeedbackRatingRoot2, [{
     key: "headerId",
-    get: function() {
-      var i = this.asProps.uid;
-      return "".concat(i, "-feedback-rating-header");
+    get: function get() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-feedback-rating-header");
     }
   }, {
     key: "getHeaderProps",
-    value: function() {
+    value: function getHeaderProps() {
       return {
         id: this.headerId
       };
     }
   }, {
     key: "getItemProps",
-    value: function() {
-      var i = this.asProps.validateOnBlur;
+    value: function getItemProps() {
+      var validateOnBlur = this.asProps.validateOnBlur;
       return {
-        validateOnBlur: i
+        validateOnBlur
       };
     }
   }, {
     key: "getNoticeTextId",
-    value: function() {
-      var i = this.asProps.uid;
-      return "".concat(i, "-feedback-rating-notice");
+    value: function getNoticeTextId() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-feedback-rating-notice");
     }
   }, {
     key: "componentDidUpdate",
-    value: function(i) {
-      var v = this, a = this.asProps, t = a.status, r = a.getI18nText;
-      i.status !== t && (this.setState({
-        error: !1
-      }), t === "success" ? setTimeout(function() {
-        v.manager.add({
-          icon: /* @__PURE__ */ e.createElement(de, {
-            color: "green-400"
-          }),
-          children: r("successMessage"),
-          initialAnimation: !0,
-          duration: 5e3
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+      var _this$asProps = this.asProps, status = _this$asProps.status, getI18nText = _this$asProps.getI18nText;
+      if (prevProps.status !== status) {
+        this.setState({
+          error: false
         });
-      }, 300) : t === "error" && this.setState({
-        error: !0
-      }));
+        if (status === "success") {
+          setTimeout(function() {
+            _this2.manager.add({
+              icon: /* @__PURE__ */ React.createElement(CheckM, {
+                color: "green-400"
+              }),
+              children: getI18nText("successMessage"),
+              initialAnimation: true,
+              duration: 5e3
+            });
+          }, 300);
+        } else if (status === "error") {
+          this.setState({
+            error: true
+          });
+        }
+      }
     }
   }, {
     key: "render",
-    value: function() {
-      var i = this.asProps, v = this.asProps, a, t = this, r = this.asProps, m = r.header, h = r.submitText, g = r.formConfig, _ = r.notificationText, l = r.notificationTitle, F = r.learnMoreLink;
-      r.Children;
-      var w = r.styles, $ = r.forwardRef, T = r.status, O = r.theme, U = r.background, R = r.rating, q = r.visible;
-      r.onVisibleChange;
-      var G = r.notificationVisible, J = r.onNotificationClose, S = r.getI18nText, K = r.errorFeedbackEmail, M = r.modalWidth, L = Z(r, xe), Q = ge, X = g.filter(function(d) {
-        return d.type === "checkbox";
-      }), Y = g.filter(function(d) {
-        return d.type === "textarea" || d.type === "input" || d.type === "email";
-      }), D = this.getNoticeTextId();
-      return a = B(w), /* @__PURE__ */ e.createElement(N, z({}, v), /* @__PURE__ */ e.createElement(u, a.cn("Notice", {
-        visible: G,
-        "aria-label": S("leaveFeedback"),
-        tag: k,
-        alignItems: l ? "flex-start" : "center"
-      }), /* @__PURE__ */ e.createElement(u.Label, {
-        mr: 3,
-        "aria-hidden": !0
-      }, /* @__PURE__ */ e.createElement(fe, a.cn("FeedbackIllustration", {}))), /* @__PURE__ */ e.createElement(u.Content, null, l ? /* @__PURE__ */ e.createElement(u.Title, null, l) : null, /* @__PURE__ */ e.createElement(u.Text, {
-        tag: k,
-        alignItems: l ? "flex-start" : "center"
-      }, /* @__PURE__ */ e.createElement(P, a.cn("Text", {
+    value: function render() {
+      var _ref = this.asProps, _ref2 = this.asProps, _ref4, _this3 = this;
+      var _this$asProps2 = this.asProps, header = _this$asProps2.header, submitText = _this$asProps2.submitText, formConfig = _this$asProps2.formConfig, notificationText = _this$asProps2.notificationText, notificationTitle = _this$asProps2.notificationTitle, learnMoreLink = _this$asProps2.learnMoreLink;
+      _this$asProps2.Children;
+      var styles = _this$asProps2.styles, forwardRef = _this$asProps2.forwardRef, status = _this$asProps2.status, theme = _this$asProps2.theme, background = _this$asProps2.background, rating = _this$asProps2.rating, visible = _this$asProps2.visible;
+      _this$asProps2.onVisibleChange;
+      var notificationVisible = _this$asProps2.notificationVisible, onNotificationClose = _this$asProps2.onNotificationClose, getI18nText = _this$asProps2.getI18nText, errorFeedbackEmail = _this$asProps2.errorFeedbackEmail, modalWidth = _this$asProps2.modalWidth, other = _objectWithoutProperties(_this$asProps2, _excluded);
+      var SFeedbackRating = Modal;
+      var checkboxFields = formConfig.filter(function(item) {
+        return item.type === "checkbox";
+      });
+      var textFields = formConfig.filter(function(item) {
+        return item.type === "textarea" || item.type === "input" || item.type === "email";
+      });
+      var notificationId = this.getNoticeTextId();
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(Box, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Notice, _ref4.cn("Notice", {
+        "visible": notificationVisible,
+        "aria-label": getI18nText("leaveFeedback"),
+        "tag": Flex,
+        "alignItems": notificationTitle ? "flex-start" : "center"
+      }), /* @__PURE__ */ React.createElement(Notice.Label, {
         mr: 3,
-        id: D
-      }), _), /* @__PURE__ */ e.createElement(u.Actions, {
+        "aria-hidden": true
+      }, /* @__PURE__ */ React.createElement(FeedbackIllustration, _ref4.cn("FeedbackIllustration", {}))), /* @__PURE__ */ React.createElement(Notice.Content, null, notificationTitle ? /* @__PURE__ */ React.createElement(Notice.Title, null, notificationTitle) : null, /* @__PURE__ */ React.createElement(Notice.Text, {
+        tag: Flex,
+        alignItems: notificationTitle ? "flex-start" : "center"
+      }, /* @__PURE__ */ React.createElement(Text, _ref4.cn("Text", {
+        "mr": 3,
+        "id": notificationId
+      }), notificationText), /* @__PURE__ */ React.createElement(Notice.Actions, {
         mt: 0
-      }, /* @__PURE__ */ e.createElement(W, a.cn("SliderRating", {
-        value: R,
-        onChange: this.handleChangeRating,
-        "aria-labelledby": D
-      }))), F && /* @__PURE__ */ e.createElement(he, a.cn("Link", {
-        ml: 3,
-        href: F
-      }), S("learnMore")))), /* @__PURE__ */ e.createElement(u.Close, {
-        onClick: J
-      })), /* @__PURE__ */ e.createElement(Q, a.cn("SFeedbackRating", x({}, z({
-        visible: q,
-        onClose: this.handelCloseModal,
-        p: 0,
-        "use:w": M ?? 440,
+      }, /* @__PURE__ */ React.createElement(SliderRating, _ref4.cn("SliderRating", {
+        "value": rating,
+        "onChange": this.handleChangeRating,
+        "aria-labelledby": notificationId
+      }))), learnMoreLink && /* @__PURE__ */ React.createElement(Link, _ref4.cn("Link", {
+        "ml": 3,
+        "href": learnMoreLink
+      }), getI18nText("learnMore")))), /* @__PURE__ */ React.createElement(Notice.Close, {
+        onClick: onNotificationClose
+      })), /* @__PURE__ */ React.createElement(SFeedbackRating, _ref4.cn("SFeedbackRating", _objectSpread({}, assignProps({
+        "visible": visible,
+        "onClose": this.handelCloseModal,
+        "p": 0,
+        "use:w": modalWidth !== null && modalWidth !== void 0 ? modalWidth : 440,
         "aria-labelledby": this.headerId
-      }, i))), /* @__PURE__ */ e.createElement(le, a.cn("Form", x({
-        decorators: [this.focusDecorator]
-      }, L)), function(d) {
-        var c;
-        return c = B(w), /* @__PURE__ */ e.createElement(me, c.cn("SpinContainer", {
-          background: U,
-          theme: O,
-          size: "xl",
-          loading: T !== "loading" ? d.submitting : T === "loading",
-          p: 1,
-          m: 9
-        }), /* @__PURE__ */ e.createElement(k, c.cn("Flex", {
-          justifyContent: "center"
-        }), /* @__PURE__ */ e.createElement(W, c.cn("SliderRating", {
-          value: R,
-          readonly: !0
-        }))), (m == null ? void 0 : m.type) === E.Header ? m : /* @__PURE__ */ e.createElement(E.Header, null, m), /* @__PURE__ */ e.createElement(N, c.cn("Box", x(x({
-          tag: "form",
-          noValidate: !0,
-          method: "POST",
-          ref: $
-        }, L), {}, {
-          onSubmit: d.handleSubmit
-        })), /* @__PURE__ */ e.createElement(H, c.cn("Field", {
-          name: "rating",
-          initialValue: R
-        }), function(C) {
-          var V = C.input;
-          return /* @__PURE__ */ e.createElement("input", I({}, V, {
+      }, _ref))), /* @__PURE__ */ React.createElement(Form, _ref4.cn("Form", _objectSpread({
+        "decorators": [this.focusDecorator]
+      }, other)), function(api) {
+        var _ref5;
+        return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SpinContainer, _ref5.cn("SpinContainer", {
+          "background": background,
+          "theme": theme,
+          "size": "xl",
+          "loading": status !== "loading" ? api.submitting : status === "loading",
+          "p": 1,
+          "m": 9
+        }), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
+          "justifyContent": "center"
+        }), /* @__PURE__ */ React.createElement(SliderRating, _ref5.cn("SliderRating", {
+          "value": rating,
+          "readonly": true
+        }))), (header === null || header === void 0 ? void 0 : header.type) === FeedbackRating.Header ? header : /* @__PURE__ */ React.createElement(FeedbackRating.Header, null, header), /* @__PURE__ */ React.createElement(Box, _ref5.cn("Box", _objectSpread(_objectSpread({
+          "tag": "form",
+          "noValidate": true,
+          "method": "POST",
+          "ref": forwardRef
+        }, other), {}, {
+          "onSubmit": api.handleSubmit
+        })), /* @__PURE__ */ React.createElement(Field, _ref5.cn("Field", {
+          "name": "rating",
+          "initialValue": rating
+        }), function(_ref9) {
+          var input = _ref9.input;
+          return /* @__PURE__ */ React.createElement("input", _extends({}, input, {
             type: "hidden"
           }));
-        }), /* @__PURE__ */ e.createElement("div", c.cn("div", {
-          role: "group",
-          "aria-labelledby": t.headerId
-        }), X.map(function(C, V) {
-          return t.renderCheckbox(C, V);
-        })), Y.map(function(C) {
-          return t.renderTextField(C);
-        }), t.state.error && /* @__PURE__ */ e.createElement(u, c.cn("Notice", {
-          theme: "warning",
-          mt: 4,
-          mb: 4
-        }), /* @__PURE__ */ e.createElement(u.Label, null, /* @__PURE__ */ e.createElement(pe, c.cn("WarnM", {}))), /* @__PURE__ */ e.createElement(u.Content, null, S("errorMessage", {
-          email: K
-        }))), /* @__PURE__ */ e.createElement(k, c.cn("Flex", {
-          mt: 4,
-          justifyContent: "center"
-        }), /* @__PURE__ */ e.createElement(E.Submit, {
-          loading: T !== "loading" ? d.submitting : T === "loading",
+        }), /* @__PURE__ */ React.createElement("div", _ref5.cn("div", {
+          "role": "group",
+          "aria-labelledby": _this3.headerId
+        }), checkboxFields.map(function(formConfigItem, index) {
+          return _this3.renderCheckbox(formConfigItem, index);
+        })), textFields.map(function(formConfigItem) {
+          return _this3.renderTextField(formConfigItem);
+        }), _this3.state.error && /* @__PURE__ */ React.createElement(Notice, _ref5.cn("Notice", {
+          "theme": "warning",
+          "mt": 4,
+          "mb": 4
+        }), /* @__PURE__ */ React.createElement(Notice.Label, null, /* @__PURE__ */ React.createElement(WarnM, _ref5.cn("WarnM", {}))), /* @__PURE__ */ React.createElement(Notice.Content, null, getI18nText("errorMessage", {
+          email: errorFeedbackEmail
+        }))), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
+          "mt": 4,
+          "justifyContent": "center"
+        }), /* @__PURE__ */ React.createElement(FeedbackRating.Submit, {
+          loading: status !== "loading" ? api.submitting : status === "loading",
           size: "l"
-        }, h ?? S("submitButton")))));
-      })), /* @__PURE__ */ e.createElement(Ee, a.cn("NoticeBubbleContainer", {
-        manager: this.manager
+        }, submitText !== null && submitText !== void 0 ? submitText : getI18nText("submitButton")))));
+      })), /* @__PURE__ */ React.createElement(NoticeBubbleContainer, _ref4.cn("NoticeBubbleContainer", {
+        "manager": this.manager
       })));
     }
-  }]), o;
-}(oe);
-s(y, "displayName", "FeedbackRatingForm");
-s(y, "style", _e);
-s(y, "enhance", [ce(A), ue()]);
-s(y, "defaultProps", {
-  onSubmit: function() {
+  }]);
+  return FeedbackRatingRoot2;
+}(Component);
+_defineProperty(FeedbackRatingRoot, "displayName", "FeedbackRatingForm");
+_defineProperty(FeedbackRatingRoot, "style", style);
+_defineProperty(FeedbackRatingRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
+_defineProperty(FeedbackRatingRoot, "defaultProps", {
+  onSubmit: function onSubmit() {
   },
-  i18n: A,
+  i18n: localizedMessages,
   locale: "en"
 });
-s(y, "validate", {
-  description: function(p) {
+_defineProperty(FeedbackRatingRoot, "validate", {
+  description: function description(error) {
     return function() {
-      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", n = o.split(/\s+/), i = n.join(" ");
-      if (o && (i.length < 10 || n.length < 3))
-        return p;
+      var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
+      var words = value.split(/\s+/);
+      var symbols = words.join(" ");
+      if (Boolean(value) && (symbols.length < 10 || words.length < 3)) {
+        return error;
+      }
     };
   },
-  email: function(p) {
+  email: function email(error) {
     return function() {
-      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-      if (o && !/.+@.+\..+/i.test(String(o).toLowerCase()))
-        return p;
+      var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
+      if (Boolean(value) && !/.+@.+\..+/i.test(String(value).toLowerCase())) {
+        return error;
+      }
     };
   }
 });
-function Fe(b) {
-  var p = arguments[0], o, n = b.styles, i = P;
-  return o = B(n), /* @__PURE__ */ e.createElement(i, o.cn("SHeader", x({}, z({
-    size: 300,
-    tag: "h2",
-    mb: 4,
-    mt: 4,
-    textAlign: "center"
-  }, p))));
+function Header(props) {
+  var _ref3 = arguments[0], _ref6;
+  var styles = props.styles;
+  var SHeader = Text;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref6.cn("SHeader", _objectSpread({}, assignProps({
+    "size": 300,
+    "tag": "h2",
+    "mb": 4,
+    "mt": 4,
+    "textAlign": "center"
+  }, _ref3))));
 }
-var E = ie(y, {
-  Header: Fe,
-  Item: ve,
-  Checkbox: ye,
-  Submit: ke
+var FeedbackRating = createComponent(FeedbackRatingRoot, {
+  Header,
+  Item: FeedbackItem,
+  Checkbox: CheckboxButton,
+  Submit: SubmitButton
 });
 export {
-  E as default
+  FeedbackRating as default
 };