intergalactic 15.87.0 → 15.88.0

package/feedback-form/lib/cjs/component/feedback-rating/FeedbackRating.js

@@ -0,0 +1,360 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _index = require("intergalactic/utils/lib/core/index");
+var _core = _interopRequireWildcard(require("intergalactic/core"));
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
+var _spinContainer = _interopRequireDefault(require("intergalactic/spin-container"));
+var _i18nEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/i18nEnhance"));
+var _uniqueID = _interopRequireDefault(require("intergalactic/utils/lib/uniqueID"));
+var _notice = _interopRequireDefault(require("intergalactic/notice"));
+var _m = _interopRequireDefault(require("intergalactic/icon/Close/m"));
+var _m2 = _interopRequireDefault(require("intergalactic/icon/Check/m"));
+var _m3 = _interopRequireDefault(require("intergalactic/icon/Warning/m"));
+var _typography = require("intergalactic/typography");
+var _Feedback = _interopRequireDefault(require("intergalactic/illustration/Feedback"));
+var _link = _interopRequireDefault(require("intergalactic/link"));
+var _SliderRating = _interopRequireDefault(require("../slider-rating/SliderRating"));
+var _modal = _interopRequireDefault(require("intergalactic/modal"));
+var _textarea = _interopRequireDefault(require("intergalactic/textarea"));
+var _flexBox = require("intergalactic/flex-box");
+var _FeedbackItem = require("../feedback-item/FeedbackItem");
+var _SubmitButton = require("../submit-button/SubmitButton");
+var _CheckboxButton = _interopRequireDefault(require("../checkbox-button/CheckboxButton"));
+var _input = _interopRequireDefault(require("intergalactic/input"));
+var _intergalacticDynamicLocales = require("../../translations/__intergalactic-dynamic-locales");
+var _noticeBubble = require("intergalactic/notice-bubble");
+var _excluded = ["header", "submitText", "formConfig", "notificationText", "learnMoreLink", "Children", "styles", "forwardRef", "status", "theme", "background", "rating", "visible", "onVisibleChange", "notificationVisible", "onNotificationClose", "getI18nText", "errorFeedbackEmail"];
+/*__reshadow-styles__:"../../style/feedback-rating.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SFeedbackRating_1pju1_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_1pju1_gg_ li{list-style:none}" /*__inner_css_end__*/, "1pju1_gg_") /*__reshadow_css_end__*/, {
+  "__SFeedbackRating": "___SFeedbackRating_1pju1_gg_"
+});
+var FeedbackRatingRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(FeedbackRatingRoot, _Component);
+  var _super = (0, _createSuper2["default"])(FeedbackRatingRoot);
+  function FeedbackRatingRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, FeedbackRatingRoot);
+    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));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      error: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "manager", new _noticeBubble.NoticeBubbleManager());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusDecorator", (0, _finalFormFocus["default"])());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChangeRating", function (rating) {
+      _this.asProps.onVisibleChange(true, rating);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handelCloseModal", function () {
+      _this.asProps.onVisibleChange(false, _this.asProps.rating);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (fn) {
+      return function (value, e) {
+        fn(e);
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderCheckbox", function (config) {
+      var initialValue = _this.props.initialValues[config.key];
+      return /*#__PURE__*/_react["default"].createElement(FeedbackRating.Item, {
+        name: config.key,
+        initialValue: initialValue,
+        type: 'checkbox',
+        key: config.key,
+        tag: 'li'
+      }, function (_ref7) {
+        var input = _ref7.input;
+        return /*#__PURE__*/_react["default"].createElement(FeedbackRating.Checkbox, (0, _extends2["default"])({}, input, {
+          id: config.key,
+          name: config.key,
+          label: config.label,
+          onChange: _this.handleChange(input.onChange)
+        }));
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderTextField", function (config) {
+      var initialValue = _this.props.initialValues[config.key];
+      var label = typeof config.label === 'string' ? /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+        mb: 2,
+        size: 200
+      }, config.label) : config.label;
+      return /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
+        tag: "label",
+        mt: 4,
+        direction: "column",
+        htmlFor: config.key,
+        key: config.key
+      }, label, /*#__PURE__*/_react["default"].createElement(FeedbackRating.Item, {
+        name: config.key,
+        validate: config.validate,
+        initialValue: initialValue,
+        placement: "left-start",
+        flip: {
+          fallbackPlacements: ['right-start', 'bottom']
+        }
+      }, function (_ref8) {
+        var input = _ref8.input;
+        if (config.type === 'textarea') {
+          return /*#__PURE__*/_react["default"].createElement(_textarea["default"], (0, _extends2["default"])({}, input, {
+            autoFocus: true,
+            h: 80,
+            onChange: _this.handleChange(input.onChange),
+            id: config.key
+          }));
+        }
+        if (config.type === 'input') {
+          return /*#__PURE__*/_react["default"].createElement(_input["default"], {
+            state: input.state
+          }, /*#__PURE__*/_react["default"].createElement(_input["default"].Value, (0, _extends2["default"])({}, input, {
+            onChange: _this.handleChange(input.onChange),
+            id: config.key
+          })));
+        }
+        return null;
+      }), config.description && /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
+        mt: 2
+      }, typeof config.description === 'string' ? /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+        lineHeight: "18px",
+        size: 200,
+        color: "#6c6e79"
+      }, config.description) : config.description));
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(FeedbackRatingRoot, [{
+    key: "headerId",
+    get: function get() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-feedback-rating-header");
+    }
+  }, {
+    key: "getHeaderProps",
+    value: function getHeaderProps() {
+      return {
+        id: this.headerId
+      };
+    }
+  }, {
+    key: "getItemProps",
+    value: function getItemProps() {
+      var validateOnBlur = this.asProps.validateOnBlur;
+      return {
+        validateOnBlur: validateOnBlur
+      };
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$asProps = this.asProps,
+        status = _this$asProps.status,
+        getI18nText = _this$asProps.getI18nText;
+      if (prevProps.status !== status) {
+        this.setState({
+          error: false
+        });
+        if (status === 'success') {
+          this.manager.add({
+            icon: /*#__PURE__*/_react["default"].createElement(_m2["default"], {
+              color: "green-400"
+            }),
+            children: getI18nText('successMessage'),
+            initialAnimation: true,
+            duration: 5000
+          });
+        } else if (status === 'error') {
+          this.setState({
+            error: true
+          });
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2 = this.asProps,
+        _ref4,
+        _this2 = this;
+      var _this$asProps2 = this.asProps,
+        header = _this$asProps2.header,
+        submitText = _this$asProps2.submitText,
+        formConfig = _this$asProps2.formConfig,
+        notificationText = _this$asProps2.notificationText,
+        learnMoreLink = _this$asProps2.learnMoreLink,
+        Children = _this$asProps2.Children,
+        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,
+        onVisibleChange = _this$asProps2.onVisibleChange,
+        notificationVisible = _this$asProps2.notificationVisible,
+        onNotificationClose = _this$asProps2.onNotificationClose,
+        getI18nText = _this$asProps2.getI18nText,
+        errorFeedbackEmail = _this$asProps2.errorFeedbackEmail,
+        other = (0, _objectWithoutProperties2["default"])(_this$asProps2, _excluded);
+      var SFeedbackRating = _modal["default"];
+      var checkboxFields = formConfig.filter(function (item) {
+        return item.type === 'checkbox';
+      });
+      var textFields = formConfig.filter(function (item) {
+        return item.type === 'textarea' || item.type === 'input';
+      });
+      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_flexBox.Box, (0, _core.assignProps)({}, _ref2), /*#__PURE__*/_react["default"].createElement(_notice["default"], _ref4.cn("Notice", {
+        "visible": notificationVisible,
+        "aria-label": 'Leave feedback'
+      }), /*#__PURE__*/_react["default"].createElement(_notice["default"].Label, {
+        mt: 1,
+        mr: 2,
+        "aria-hidden": true
+      }, /*#__PURE__*/_react["default"].createElement(_Feedback["default"], _ref4.cn("FeedbackIllustration", {}))), /*#__PURE__*/_react["default"].createElement(_notice["default"].Content, {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_typography.Text, _ref4.cn("Text", {
+        "mr": 3
+      }), notificationText), /*#__PURE__*/_react["default"].createElement(_notice["default"].Actions, {
+        mt: 0
+      }, /*#__PURE__*/_react["default"].createElement(_SliderRating["default"], _ref4.cn("SliderRating", {
+        "value": rating,
+        "onChange": this.handleChangeRating,
+        "aria-label": notificationText
+      }))), learnMoreLink && /*#__PURE__*/_react["default"].createElement(_link["default"], _ref4.cn("Link", {
+        "ml": 3,
+        "href": learnMoreLink
+      }), getI18nText('learnMore'))), /*#__PURE__*/_react["default"].createElement(_notice["default"].CloseIcon, {
+        interactive: true,
+        onClick: onNotificationClose
+      }, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref4.cn("CloseAltM", {})))), /*#__PURE__*/_react["default"].createElement(SFeedbackRating, _ref4.cn("SFeedbackRating", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "visible": visible,
+        "onClose": this.handelCloseModal,
+        "p": 0
+      }, _ref))), /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Form, _ref4.cn("Form", (0, _objectSpread2["default"])({
+        "decorators": [this.focusDecorator]
+      }, other)), function (api) {
+        var _ref5;
+        return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_spinContainer["default"], _ref5.cn("SpinContainer", {
+          "background": background,
+          "theme": theme,
+          "size": 'xl',
+          "loading": status !== 'loading' ? api.submitting : status === 'loading',
+          "p": 10
+        }), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref5.cn("Flex", {
+          "justifyContent": 'center'
+        }), /*#__PURE__*/_react["default"].createElement(_SliderRating["default"], _ref5.cn("SliderRating", {
+          "value": rating,
+          "readonly": true
+        }))), header, /*#__PURE__*/_react["default"].createElement(_flexBox.Box, _ref5.cn("Box", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          "tag": 'form',
+          "noValidate": true,
+          "method": 'POST',
+          "ref": forwardRef
+        }, other), {}, {
+          "onSubmit": api.handleSubmit,
+          "title": getI18nText('formTitle'),
+          "wMax": 320
+        })), /*#__PURE__*/_react["default"].createElement(FeedbackRating.Item, {
+          name: 'rating',
+          initialValue: rating
+        }, function (_ref9) {
+          var input = _ref9.input;
+          return /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, input, {
+            type: "hidden"
+          }));
+        }), /*#__PURE__*/_react["default"].createElement("div", _ref5.cn("div", {
+          "role": 'group',
+          "aria-labelledby": _this2.headerId
+        }), /*#__PURE__*/_react["default"].createElement("ul", _ref5.cn("ul", {}), checkboxFields.map(function (formConfigItem) {
+          return _this2.renderCheckbox(formConfigItem);
+        }))), textFields.map(function (formConfigItem) {
+          return _this2.renderTextField(formConfigItem);
+        }), _this2.state.error && /*#__PURE__*/_react["default"].createElement(_notice["default"], _ref5.cn("Notice", {
+          "theme": 'warning',
+          "mt": 4,
+          "mb": 4
+        }), /*#__PURE__*/_react["default"].createElement(_notice["default"].Label, null, /*#__PURE__*/_react["default"].createElement(_m3["default"], _ref5.cn("WarnM", {}))), /*#__PURE__*/_react["default"].createElement(_notice["default"].Content, null, getI18nText('errorMessage', {
+          email: errorFeedbackEmail
+        }))), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref5.cn("Flex", {
+          "mt": 4,
+          "justifyContent": 'center'
+        }), /*#__PURE__*/_react["default"].createElement(FeedbackRating.Submit, {
+          loading: status !== 'loading' ? api.submitting : status === 'loading',
+          size: 'l'
+        }, submitText !== null && submitText !== void 0 ? submitText : getI18nText('submitButton')))));
+      })), /*#__PURE__*/_react["default"].createElement(_noticeBubble.NoticeBubbleContainer, _ref4.cn("NoticeBubbleContainer", {
+        "manager": this.manager
+      })));
+    }
+  }]);
+  return FeedbackRatingRoot;
+}(_core.Component);
+(0, _defineProperty2["default"])(FeedbackRatingRoot, "displayName", 'FiveStarForm');
+(0, _defineProperty2["default"])(FeedbackRatingRoot, "style", style);
+(0, _defineProperty2["default"])(FeedbackRatingRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(FeedbackRatingRoot, "defaultProps", {
+  onSubmit: function onSubmit() {},
+  i18n: _intergalacticDynamicLocales.localizedMessages,
+  locale: 'en'
+});
+(0, _defineProperty2["default"])(FeedbackRatingRoot, "validate", {
+  description: function description(error) {
+    return function () {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var words = value.split(/\s+/);
+      var symbols = words.join(' ');
+      if (Boolean(value) && (symbols.length < 10 || words.length < 3)) {
+        return error;
+      }
+    };
+  },
+  email: function email(error) {
+    return function () {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      if (Boolean(value) && !/.+@.+\..+/i.test(String(value).toLowerCase())) {
+        return error;
+      }
+    };
+  }
+});
+function Header(props) {
+  var _ref3 = arguments[0],
+    _ref6;
+  var styles = props.styles;
+  var SHeader = _typography.Text;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref6.cn("SHeader", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "size": 300,
+    "tag": 'h2',
+    "mb": 4,
+    "mt": 4,
+    "textAlign": 'center'
+  }, _ref3))));
+}
+var FeedbackRating = (0, _core["default"])(FeedbackRatingRoot, {
+  Header: Header,
+  Item: _FeedbackItem.FeedbackItem,
+  Checkbox: _CheckboxButton["default"],
+  Submit: _SubmitButton.SubmitButton
+});
+var _default = FeedbackRating;
+exports["default"] = _default;
+//# sourceMappingURL=FeedbackRating.js.map

package/feedback-form/lib/cjs/component/feedback-rating/FeedbackRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackRating.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_reactFinalForm","_finalFormFocus","_spinContainer","_i18nEnhance","_uniqueID","_notice","_m","_m2","_m3","_typography","_Feedback","_link","_SliderRating","_modal","_textarea","_flexBox","_FeedbackItem","_SubmitButton","_CheckboxButton","_input","_intergalacticDynamicLocales","_noticeBubble","_excluded","style","_index","sstyled","insert","FeedbackRatingRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","error","NoticeBubbleManager","createFocusDecorator","rating","asProps","onVisibleChange","fn","value","e","config","initialValue","props","initialValues","key","createElement","FeedbackRating","Item","name","type","tag","_ref7","input","Checkbox","_extends2","id","label","onChange","handleChange","Text","mb","size","Flex","mt","direction","htmlFor","validate","placement","flip","fallbackPlacements","_ref8","autoFocus","h","state","Value","description","Box","lineHeight","color","_createClass2","get","uid","getHeaderProps","headerId","getItemProps","validateOnBlur","componentDidUpdate","prevProps","_this$asProps","status","getI18nText","setState","manager","add","icon","children","initialAnimation","duration","render","_ref","_ref2","_ref4","_this2","_this$asProps2","header","submitText","formConfig","notificationText","learnMoreLink","Children","styles","forwardRef","theme","background","visible","notificationVisible","onNotificationClose","errorFeedbackEmail","other","_objectWithoutProperties2","SFeedbackRating","Modal","checkboxFields","filter","item","textFields","assignProps","cn","Label","mr","Content","display","alignItems","Actions","handleChangeRating","CloseIcon","interactive","onClick","_objectSpread2","handelCloseModal","Form","focusDecorator","api","_ref5","submitting","handleSubmit","_ref9","map","formConfigItem","renderCheckbox","renderTextField","email","Submit","loading","NoticeBubbleContainer","Component","i18nEnhance","localizedMessages","uniqueIDEnhancement","onSubmit","i18n","locale","undefined","words","split","symbols","join","Boolean","test","String","toLowerCase","Header","_ref3","arguments[0]","_ref6","SHeader","createComponent","FeedbackItem","CheckboxButton","SubmitButton","_default","exports"],"sources":["../../../../src/component/feedback-rating/FeedbackRating.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Form } from 'react-final-form';\nimport createFocusDecorator from 'final-form-focus';\nimport SpinContainer from '@semcore/spin-container';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { useI18n } from '@semcore/utils/lib/enhances/WithI18n';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport Notice from '@semcore/notice';\nimport CloseAltM from '@semcore/icon/Close/m';\nimport CheckM from '@semcore/icon/Check/m';\nimport WarnM from '@semcore/icon/Warning/m';\nimport { Text } from '@semcore/typography';\nimport FeedbackIllustration from '@semcore/illustration/Feedback';\nimport Link from '@semcore/link';\nimport SliderRating from '../slider-rating/SliderRating';\nimport Modal from '@semcore/modal';\nimport Textarea from '@semcore/textarea';\nimport { Box, Flex } from '@semcore/flex-box';\nimport { FeedbackItem } from '../feedback-item/FeedbackItem';\nimport { SubmitButton } from '../submit-button/SubmitButton';\nimport { FeedbackRatingProps, FeedbackRatingType, FormConfigItem } from './FeedbackRating.type';\nimport CheckboxButton from '../checkbox-button/CheckboxButton';\nimport Input from '@semcore/input';\nimport { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';\nimport { NoticeBubbleContainer, NoticeBubbleManager } from '@semcore/notice-bubble';\nimport style from '../../style/feedback-rating.shadow.css';\n\ntype Enhances = {\n  getI18nText: ReturnType<typeof useI18n>;\n  uid: ReturnType<typeof uniqueIDEnhancement>;\n};\n\ntype State = {\n  error: boolean;\n};\n\nclass FeedbackRatingRoot extends Component<FeedbackRatingProps, {}, State, Enhances> {\n  static displayName = 'FiveStarForm';\n  static style = style;\n\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n\n  static defaultProps = {\n    onSubmit: () => {},\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  static validate = {\n    description: (error: Error | string) => (value = '') => {\n      const words = value.split(/\\s+/);\n      const symbols = words.join(' ');\n      if (Boolean(value) && (symbols.length < 10 || words.length < 3)) {\n        return error;\n      }\n    },\n    email: (error: Error | string) => (value = '') => {\n      if (Boolean(value) && !/.+@.+\\..+/i.test(String(value).toLowerCase())) {\n        return error;\n      }\n    },\n  };\n\n  state: State = {\n    error: false,\n  };\n\n  manager = new NoticeBubbleManager();\n\n  private focusDecorator = createFocusDecorator<Record<string, any>>();\n\n  get headerId() {\n    const { uid } = this.asProps;\n\n    return `${uid}-feedback-rating-header`;\n  }\n\n  getHeaderProps() {\n    return {\n      id: this.headerId,\n    };\n  }\n\n  getItemProps() {\n    const { validateOnBlur } = this.asProps;\n\n    return {\n      validateOnBlur,\n    };\n  }\n\n  handleChangeRating = (rating: number) => {\n    this.asProps.onVisibleChange(true, rating);\n  };\n\n  handelCloseModal = () => {\n    this.asProps.onVisibleChange(false, this.asProps.rating);\n  };\n\n  handleChange =\n    (fn: (e: React.SyntheticEvent) => void) => (value: any, e: React.SyntheticEvent) => {\n      fn(e);\n    };\n\n  componentDidUpdate(prevProps: Readonly<FeedbackRatingProps>) {\n    const { status, getI18nText } = this.asProps;\n\n    if (prevProps.status !== status) {\n      this.setState({ error: false });\n\n      if (status === 'success') {\n        this.manager.add({\n          icon: <CheckM color='green-400' />,\n          children: getI18nText('successMessage'),\n          initialAnimation: true,\n          duration: 5000,\n        });\n      } else if (status === 'error') {\n        this.setState({ error: true });\n      }\n    }\n  }\n\n  renderCheckbox = (config: FormConfigItem) => {\n    const initialValue = this.props.initialValues[config.key];\n\n    return (\n      <FeedbackRating.Item\n        name={config.key}\n        initialValue={initialValue}\n        type={'checkbox'}\n        key={config.key}\n        tag={'li'}\n      >\n        {({ input }) => (\n          <FeedbackRating.Checkbox\n            {...input}\n            id={config.key}\n            name={config.key}\n            label={config.label}\n            onChange={this.handleChange(input.onChange)}\n          />\n        )}\n      </FeedbackRating.Item>\n    );\n  };\n\n  renderTextField = (config: FormConfigItem) => {\n    const initialValue = this.props.initialValues[config.key];\n\n    const label =\n      typeof config.label === 'string' ? (\n        <Text mb={2} size={200}>\n          {config.label}\n        </Text>\n      ) : (\n        (config.label as unknown as JSX.Element)\n      );\n\n    return (\n      <Flex tag='label' mt={4} direction='column' htmlFor={config.key} key={config.key}>\n        {label}\n\n        <FeedbackRating.Item\n          name={config.key}\n          validate={config.validate}\n          initialValue={initialValue}\n          placement='left-start'\n          flip={{\n            fallbackPlacements: ['right-start', 'bottom'],\n          }}\n        >\n          {({ input }) => {\n            if (config.type === 'textarea') {\n              return (\n                <Textarea\n                  {...input}\n                  autoFocus\n                  h={80}\n                  onChange={this.handleChange(input.onChange)}\n                  id={config.key}\n                />\n              );\n            }\n            if (config.type === 'input') {\n              return (\n                <Input state={input.state}>\n                  <Input.Value\n                    {...input}\n                    onChange={this.handleChange(input.onChange)}\n                    id={config.key}\n                  />\n                </Input>\n              );\n            }\n            return null;\n          }}\n        </FeedbackRating.Item>\n        {config.description && (\n          <Box mt={2}>\n            {typeof config.description === 'string' ? (\n              <Text lineHeight='18px' size={200} color='#6c6e79'>\n                {config.description}\n              </Text>\n            ) : (\n              config.description\n            )}\n          </Box>\n        )}\n      </Flex>\n    );\n  };\n\n  render() {\n    const {\n      header,\n      submitText,\n      formConfig,\n      notificationText,\n      learnMoreLink,\n      Children,\n      styles,\n      forwardRef,\n      status,\n      theme,\n      background,\n      rating,\n      visible,\n      onVisibleChange,\n      notificationVisible,\n      onNotificationClose,\n      getI18nText,\n      errorFeedbackEmail,\n      ...other\n    } = this.asProps;\n\n    const SFeedbackRating = Root;\n    const checkboxFields = formConfig.filter((item) => item.type === 'checkbox');\n    const textFields = formConfig.filter(\n      (item) => item.type === 'textarea' || item.type === 'input',\n    );\n\n    return sstyled(styles)(\n      <Root render={Box}>\n        <Notice visible={notificationVisible} aria-label={'Leave feedback'}>\n          <Notice.Label mt={1} mr={2} aria-hidden={true}>\n            <FeedbackIllustration />\n          </Notice.Label>\n          <Notice.Content style={{ display: 'flex', alignItems: 'center' }}>\n            <Text mr={3}>{notificationText}</Text>\n            <Notice.Actions mt={0}>\n              <SliderRating\n                value={rating}\n                onChange={this.handleChangeRating}\n                aria-label={notificationText}\n              />\n            </Notice.Actions>\n            {learnMoreLink && (\n              <Link ml={3} href={learnMoreLink}>\n                {getI18nText('learnMore')}\n              </Link>\n            )}\n          </Notice.Content>\n          <Notice.CloseIcon interactive onClick={onNotificationClose}>\n            <CloseAltM />\n          </Notice.CloseIcon>\n        </Notice>\n\n        <SFeedbackRating render={Modal} visible={visible} onClose={this.handelCloseModal} p={0}>\n          <Form decorators={[this.focusDecorator]} {...other}>\n            {(api) =>\n              sstyled(styles)(\n                <SpinContainer\n                  background={background}\n                  theme={theme}\n                  size='xl'\n                  loading={status !== 'loading' ? api.submitting : status === 'loading'}\n                  p={10}\n                >\n                  <Flex justifyContent='center'>\n                    <SliderRating value={rating} readonly={true} />\n                  </Flex>\n\n                  {header as any}\n\n                  <Box\n                    tag='form'\n                    noValidate\n                    method='POST'\n                    ref={forwardRef}\n                    {...other}\n                    onSubmit={api.handleSubmit}\n                    title={getI18nText('formTitle')}\n                    wMax={320}\n                  >\n                    <FeedbackRating.Item name={'rating'} initialValue={rating}>\n                      {({ input }) => {\n                        return <input {...input} type='hidden' />;\n                      }}\n                    </FeedbackRating.Item>\n\n                    <div role={'group'} aria-labelledby={this.headerId}>\n                      <ul>\n                        {checkboxFields.map((formConfigItem) =>\n                          this.renderCheckbox(formConfigItem),\n                        )}\n                      </ul>\n                    </div>\n\n                    {textFields.map((formConfigItem) => this.renderTextField(formConfigItem))}\n\n                    {this.state.error && (\n                      <Notice theme={'warning'} mt={4} mb={4}>\n                        <Notice.Label>\n                          <WarnM />\n                        </Notice.Label>\n                        <Notice.Content>\n                          {getI18nText('errorMessage', { email: errorFeedbackEmail })}\n                        </Notice.Content>\n                      </Notice>\n                    )}\n\n                    <Flex mt={4} justifyContent={'center'}>\n                      <FeedbackRating.Submit\n                        loading={status !== 'loading' ? api.submitting : status === 'loading'}\n                        size={'l'}\n                      >\n                        {submitText ?? getI18nText('submitButton')}\n                      </FeedbackRating.Submit>\n                    </Flex>\n                  </Box>\n                </SpinContainer>,\n              )\n            }\n          </Form>\n        </SFeedbackRating>\n\n        <NoticeBubbleContainer manager={this.manager} />\n      </Root>,\n    );\n  }\n}\n\nfunction Header(props: any) {\n  const { styles } = props;\n  const SHeader = Root;\n  return sstyled(styles)(\n    <SHeader render={Text} size={300} tag='h2' mb={4} mt={4} textAlign={'center'} />,\n  );\n}\n\nconst FeedbackRating: typeof FeedbackRatingType & { validate: typeof FeedbackRatingRoot.validate } =\n  createComponent(FeedbackRatingRoot, {\n    Header,\n    Item: FeedbackItem,\n    Checkbox: CheckboxButton,\n    Submit: SubmitButton,\n  });\n\nexport default FeedbackRating;\n"],"mappings":"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"}

package/feedback-form/lib/cjs/component/feedback-rating/FeedbackRating.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=FeedbackRating.type.js.map

package/feedback-form/lib/cjs/component/feedback-rating/FeedbackRating.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackRating.type.js","names":[],"sources":["../../../../src/component/feedback-rating/FeedbackRating.type.ts"],"sourcesContent":["import React from 'react';\nimport { FeedbackFormProps } from '../../index';\nimport { FieldProps } from 'react-final-form';\n\nimport { Intergalactic } from '@semcore/core';\nimport Button from '@semcore/button';\nimport { Text } from '@semcore/typography';\nimport Checkbox from '@semcore/checkbox';\n\nexport type FormConfigItem = {\n  key: string;\n  label: React.ReactNode;\n  type: 'input' | 'checkbox' | 'textarea';\n  description?: React.ReactNode;\n  validate?: (value: any) => Error | string | undefined;\n};\n\nexport type FeedbackRatingProps = Intergalactic.InternalTypings.EfficientOmit<\n  FeedbackFormProps,\n  'initialValues' | 'loading'\n> & {\n  /** status of form */\n  status: 'default' | 'success' | 'error' | 'loading';\n\n  /** flag for show/hide notification */\n  notificationVisible: boolean;\n  /** */\n  onNotificationClose: () => void;\n  /** text in notification panel */\n  notificationText: string;\n  /** optional link in notification panel */\n  learnMoreLink?: string;\n  /** rating value */\n  rating: number;\n  /** visible modal form flag */\n  visible: boolean;\n\n  onVisibleChange: (visible: boolean, rating: number) => void;\n\n  /** header of modal with form */\n  header: React.ReactNode;\n  /** text for submit button of form */\n  submitText?: string;\n  /** config for form fields */\n  formConfig: FormConfigItem[];\n\n  initialValues: Record<string, any> & { rating: number };\n\n  errorFeedbackEmail: string;\n\n  locale?: string;\n};\n\nexport type FeedbackRatingItemProps = FieldProps<any, any> & {\n  /**\n   * Allows to override which passed props will be passed to the Tooltip component.\n   */\n  tooltipProps?: string[];\n};\n\ndeclare const FeedbackRatingType: Intergalactic.Component<'form', FeedbackRatingProps> & {\n  Item: Intergalactic.Component<'div', FeedbackRatingItemProps>;\n  Submit: typeof Button;\n  Checkbox: typeof Checkbox;\n  Header: typeof Text;\n};\n\nexport { FeedbackRatingType };\n"],"mappings":""}

package/feedback-form/lib/cjs/component/slider-rating/SliderRating.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _index = require("intergalactic/utils/lib/core/index");
+var _core = _interopRequireWildcard(require("intergalactic/core"));
+var _react = _interopRequireDefault(require("react"));
+var _flexBox = require("intergalactic/flex-box");
+var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/keyboardFocusEnhance"));
+/*__reshadow-styles__:"../../style/slider-rating.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SSliderRating_mkvmh_gg_ .___SStar_mkvmh_gg_{transition:all calc(var(--intergalactic-duration-control, 200)*1ms) ease-out}@media (hover:hover){.___SSliderRating_mkvmh_gg_ .___SStar_mkvmh_gg_:hover{cursor:pointer;transform:scale(1.3)}}.___SSliderRating_mkvmh_gg_.__keyboardFocused_mkvmh_gg_{outline:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}@media (hover:hover){.___SSliderRating_mkvmh_gg_.__readonly_mkvmh_gg_ .___SStar_mkvmh_gg_:hover{cursor:default;transform:none;transition:none}}.___SStar_mkvmh_gg_.__filled_mkvmh_gg_:active{animation:wobble .8s ease-in-out}.___SStar_mkvmh_gg_ path{fill:transparent;stroke:var(--intergalactic-slider-rating-normal, #a9abb6);stroke-width:2}.___SStar_mkvmh_gg_.__filled_mkvmh_gg_ path{stroke-width:0;fill:var(--intergalactic-slider-rating-hover-active, #fdc23c)}" /*__inner_css_end__*/, "mkvmh_gg_") /*__reshadow_css_end__*/, {
+  "__SSliderRating": "___SSliderRating_mkvmh_gg_",
+  "__SStar": "___SStar_mkvmh_gg_",
+  "_keyboardFocused": "__keyboardFocused_mkvmh_gg_",
+  "_readonly": "__readonly_mkvmh_gg_",
+  "_filled": "__filled_mkvmh_gg_"
+});
+var MIN = 1;
+var MAX = 5;
+var SliderRatingRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(SliderRatingRoot, _Component);
+  var _super = (0, _createSuper2["default"])(SliderRatingRoot);
+  function SliderRatingRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, SliderRatingRoot);
+    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));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      hoveredIndex: -1,
+      clickedIndex: -1
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (newValue) {
+      return function (e) {
+        var readonly = _this.asProps.readonly;
+        if (!readonly) {
+          _this.setValue(newValue);
+        }
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnder", function (index) {
+      return function () {
+        _this.setState({
+          hoveredIndex: index
+        });
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        hoveredIndex: -1
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setValue", function (newValue) {
+      var _this$asProps = _this.asProps,
+        onChange = _this$asProps.onChange,
+        value = _this$asProps.value;
+      if (onChange) {
+        onChange(newValue);
+      }
+      if (newValue <= value) {
+        _this.setState({
+          clickedIndex: newValue
+        });
+      } else {
+        _this.setState({
+          clickedIndex: -1
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+      if (!['ArrowLeft', 'ArrowRight', 'Enter'].includes(event.key)) return;
+      event.preventDefault();
+      if (event.key === 'Enter') {
+        var hoveredIndex = _this.state.hoveredIndex;
+        _this.setValue(hoveredIndex + 1);
+      } else {
+        var _value = _this.asProps.value;
+        var _hoveredIndex = _this.state.hoveredIndex;
+        var direction = event.key === 'ArrowLeft' ? -1 : 1;
+        var newValue = _hoveredIndex === -1 ? _value + direction : _hoveredIndex + 1 + direction;
+        if (newValue > MAX) newValue = MAX;
+        if (newValue < MIN) newValue = MIN;
+        _this.setState({
+          hoveredIndex: newValue - 1
+        });
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(SliderRatingRoot, [{
+    key: "getStarProps",
+    value: function getStarProps(_, index) {
+      var _this$asProps2 = this.asProps,
+        value = _this$asProps2.value,
+        readonly = _this$asProps2.readonly;
+      var hoveredIndex = this.state.hoveredIndex;
+      return {
+        filled: value ? index + 1 <= value || index <= hoveredIndex : index <= hoveredIndex,
+        onClick: this.handleClick(index + 1),
+        onMouseEnter: readonly ? undefined : this.handleMouseEnder(index)
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref3;
+      var _this$asProps3 = this.asProps,
+        styles = _this$asProps3.styles,
+        value = _this$asProps3.value;
+      var hoveredIndex = this.state.hoveredIndex;
+      var SSliderRating = _flexBox.Flex;
+      var label = value ? value : hoveredIndex === -1 ? 'Not set' : hoveredIndex + 1;
+      return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSliderRating, _ref3.cn("SSliderRating", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "gap": 1,
+        "onMouseLeave": this.handleMouseLeave,
+        "onKeyDown": this.handleKeyDown,
+        "role": 'slider',
+        "aria-orientation": 'horizontal',
+        "aria-valuemin": MIN,
+        "aria-valuemax": MAX,
+        "aria-valuetext": label,
+        "aria-valuenow": hoveredIndex + 1
+      }, _ref))), new Array(MAX).fill(null).map(function (_, index) {
+        return /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
+          key: index,
+          position: 'relative'
+        }, /*#__PURE__*/_react["default"].createElement(SliderRating.Star, null));
+      }));
+    }
+  }]);
+  return SliderRatingRoot;
+}(_core.Component);
+(0, _defineProperty2["default"])(SliderRatingRoot, "displayName", 'SliderRating');
+(0, _defineProperty2["default"])(SliderRatingRoot, "style", style);
+(0, _defineProperty2["default"])(SliderRatingRoot, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
+function Star(props) {
+  var _ref2 = arguments[0],
+    _ref4;
+  var SStar = _flexBox.Box;
+  return _ref4 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SStar, _ref4.cn("SStar", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "tag": 'svg',
+    "width": '22',
+    "height": '21',
+    "viewBox": '0 0 22 21',
+    "fill": 'none',
+    "xmlns": 'http://www.w3.org/2000/svg'
+  }, _ref2))), props.filled ? /*#__PURE__*/_react["default"].createElement("path", _ref4.cn("path", {
+    "d": 'M10.6463 0.213566C10.7963 -0.0711885 11.2037 -0.071189 11.3537 0.213566L14.6682 6.50744L21.668 7.72084C21.9847 7.77572 22.1105 8.16305 21.8867 8.39378L16.9353 13.4978L17.9465 20.5422C17.9922 20.8607 17.6626 21.1002 17.3741 20.9581L11 17.8181L4.62585 20.9581C4.33738 21.1002 4.00781 20.8607 4.05353 20.5422L5.0647 13.4978L0.113338 8.39378C-0.110493 8.16305 0.0153421 7.77572 0.331965 7.72084L7.33178 6.50744L10.6463 0.213566Z'
+  })) : /*#__PURE__*/_react["default"].createElement("path", _ref4.cn("path", {
+    "d": 'M13.7834 6.9734L14.0127 7.40871L14.4974 7.49274L20.3785 8.51222L16.2175 12.8015L15.8757 13.1539L15.9454 13.6399L16.7949 19.558L11.4419 16.921L11 16.7033L10.5581 16.921L5.20505 19.558L6.05456 13.6399L6.12432 13.1539L5.78246 12.8015L1.62146 8.51222L7.50258 7.49274L7.98734 7.40871L8.21659 6.9734L11 1.68803L13.7834 6.9734ZM21.4972 8.70614C21.4969 8.70608 21.4965 8.70602 21.4961 8.70595L21.4972 8.70614ZM0.502765 8.70614L0.503758 8.70597C0.503427 8.70603 0.503095 8.70609 0.502764 8.70614L0.400352 8.11535L0.502765 8.70614Z'
+  })));
+}
+Star.displayName = 'Star';
+var SliderRating = (0, _core["default"])(SliderRatingRoot, {
+  Star: Star
+});
+var _default = SliderRating;
+exports["default"] = _default;
+//# sourceMappingURL=SliderRating.js.map

package/feedback-form/lib/cjs/component/slider-rating/SliderRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRating.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_keyboardFocusEnhance","style","_index","sstyled","insert","MIN","MAX","SliderRatingRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","hoveredIndex","clickedIndex","newValue","e","readonly","asProps","setValue","index","setState","_this$asProps","onChange","value","event","includes","key","preventDefault","state","direction","_createClass2","getStarProps","_","_this$asProps2","filled","onClick","handleClick","onMouseEnter","undefined","handleMouseEnder","render","_ref","_ref3","_this$asProps3","styles","SSliderRating","Flex","label","createElement","cn","_objectSpread2","assignProps","handleMouseLeave","handleKeyDown","fill","map","Box","position","SliderRating","Star","Component","keyboardFocusEnhance","props","_ref2","arguments[0]","_ref4","SStar","displayName","createComponent","_default","exports"],"sources":["../../../../src/component/slider-rating/SliderRating.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, Intergalactic } from '@semcore/core';\nimport { Flex, Box, BoxProps } from '@semcore/flex-box';\nimport style from '../../style/slider-rating.shadow.css';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\ntype SliderRatingProps = {\n  value: number;\n  onChange?: (value: number) => void;\n  readonly?: boolean;\n};\n\ntype State = {\n  hoveredIndex: number;\n  clickedIndex: number;\n};\n\ntype StarProps = BoxProps & {\n  filled?: boolean;\n};\n\nconst MIN = 1;\nconst MAX = 5;\n\nclass SliderRatingRoot extends Component<SliderRatingProps, State> {\n  static displayName = 'SliderRating';\n  static style = style;\n\n  static enhance = [keyboardFocusEnhance()];\n\n  state: State = {\n    hoveredIndex: -1,\n    clickedIndex: -1,\n  };\n\n  handleClick = (newValue: number) => (e: React.SyntheticEvent<SVGElement>) => {\n    const { readonly } = this.asProps;\n\n    if (!readonly) {\n      this.setValue(newValue);\n    }\n  };\n\n  handleMouseEnder = (index: number) => () => {\n    this.setState({ hoveredIndex: index });\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hoveredIndex: -1 });\n  };\n\n  getStarProps(_: any, index: number) {\n    const { value, readonly } = this.asProps;\n    const { hoveredIndex } = this.state;\n\n    return {\n      filled: value ? index + 1 <= value || index <= hoveredIndex : index <= hoveredIndex,\n      onClick: this.handleClick(index + 1),\n      onMouseEnter: readonly ? undefined : this.handleMouseEnder(index),\n    };\n  }\n\n  setValue = (newValue: number) => {\n    const { onChange, value } = this.asProps;\n\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    if (newValue <= value) {\n      this.setState({ clickedIndex: newValue });\n    } else {\n      this.setState({ clickedIndex: -1 });\n    }\n  };\n\n  handleKeyDown = (event: React.KeyboardEvent) => {\n    if (!['ArrowLeft', 'ArrowRight', 'Enter'].includes(event.key)) return;\n    event.preventDefault();\n\n    if (event.key === 'Enter') {\n      const { hoveredIndex } = this.state;\n\n      this.setValue(hoveredIndex + 1);\n    } else {\n      const { value } = this.asProps;\n      const { hoveredIndex } = this.state;\n\n      const direction = event.key === 'ArrowLeft' ? -1 : 1;\n      let newValue = hoveredIndex === -1 ? value + direction : hoveredIndex + 1 + direction;\n\n      if (newValue > MAX) newValue = MAX;\n      if (newValue < MIN) newValue = MIN;\n\n      this.setState({ hoveredIndex: newValue - 1 });\n    }\n  };\n\n  render() {\n    const { styles, value } = this.asProps;\n    const { hoveredIndex } = this.state;\n    const SSliderRating = Root;\n\n    const label = value ? value : hoveredIndex === -1 ? 'Not set' : hoveredIndex + 1;\n\n    return sstyled(styles)(\n      <SSliderRating\n        render={Flex}\n        gap={1}\n        onMouseLeave={this.handleMouseLeave}\n        onKeyDown={this.handleKeyDown}\n        role='slider'\n        aria-orientation='horizontal'\n        aria-valuemin={MIN}\n        aria-valuemax={MAX}\n        aria-valuetext={label}\n        aria-valuenow={hoveredIndex + 1}\n      >\n        {new Array(MAX).fill(null).map((_, index) => {\n          return (\n            <Box key={index} position={'relative'}>\n              <SliderRating.Star />\n            </Box>\n          );\n        })}\n      </SSliderRating>,\n    );\n  }\n}\n\nfunction Star(props: StarProps) {\n  const SStar = Root;\n  return sstyled(props.styles)(\n    <SStar\n      render={Box}\n      tag={'svg'}\n      width='22'\n      height='21'\n      viewBox='0 0 22 21'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      {props.filled ? (\n        <path\n          d='M10.6463 0.213566C10.7963 -0.0711885 11.2037 -0.071189 11.3537 0.213566L14.6682 6.50744L21.668 7.72084C21.9847 7.77572 22.1105 8.16305 21.8867 8.39378L16.9353 13.4978L17.9465 20.5422C17.9922 20.8607 17.6626 21.1002 17.3741 20.9581L11 17.8181L4.62585 20.9581C4.33738 21.1002 4.00781 20.8607 4.05353 20.5422L5.0647 13.4978L0.113338 8.39378C-0.110493 8.16305 0.0153421 7.77572 0.331965 7.72084L7.33178 6.50744L10.6463 0.213566Z'\n          // fill='#FDC23C'\n        />\n      ) : (\n        <path\n          d='M13.7834 6.9734L14.0127 7.40871L14.4974 7.49274L20.3785 8.51222L16.2175 12.8015L15.8757 13.1539L15.9454 13.6399L16.7949 19.558L11.4419 16.921L11 16.7033L10.5581 16.921L5.20505 19.558L6.05456 13.6399L6.12432 13.1539L5.78246 12.8015L1.62146 8.51222L7.50258 7.49274L7.98734 7.40871L8.21659 6.9734L11 1.68803L13.7834 6.9734ZM21.4972 8.70614C21.4969 8.70608 21.4965 8.70602 21.4961 8.70595L21.4972 8.70614ZM0.502765 8.70614L0.503758 8.70597C0.503427 8.70603 0.503095 8.70609 0.502764 8.70614L0.400352 8.11535L0.502765 8.70614Z'\n          // stroke='#A9ABB6'\n          // strokeWidth='2'\n        />\n      )}\n    </SStar>,\n  );\n}\nStar.displayName = 'Star';\n\nconst SliderRating = createComponent(SliderRatingRoot, {\n  Star,\n}) as Intergalactic.Component<typeof Flex, SliderRatingProps> & {\n  Star: Intergalactic.Component<typeof Box, StarProps>;\n};\n\nexport default SliderRating;\n"],"mappings":"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"}