@semcore/feedback-form 6.43.0-prerelease.1 → 6.43.0-prerelease.5

package/lib/esm/component/checkbox-button/CheckboxButton.mjs

@@ -2,57 +2,69 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
-import React from "react";
-import { Box } from "@semcore/flex-box";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import Checkbox from "@semcore/checkbox";
+import React from "react";
 var _excluded = ["styles", "id", "label", "type", "focused"];
 /*!__reshadow-styles__:"../../style/checkbox-button.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SCheckboxButton_1jr0a_gg_{margin-top:var(--intergalactic-spacing-2x, 8px);border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-rounded-medium, 6px)}@supports (color:color(display-p3 0 0 0)){.___SCheckboxButton_1jr0a_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SCheckboxButton_1jr0a_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SCheckboxButton_1jr0a_gg_ label{width:100%;padding:var(--intergalactic-spacing-3x, 12px);box-sizing:border-box}.___SCheckboxButton_1jr0a_gg_.__checked_1jr0a_gg_{cursor:pointer;border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));background-color:rgba(0,143,248,.1)}@supports (color:color(display-p3 0 0 0)){.___SCheckboxButton_1jr0a_gg_.__checked_1jr0a_gg_{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SCheckboxButton_1jr0a_gg_.__checked_1jr0a_gg_{border-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08333 0.73488 / 0.386))}}}@media (hover:hover){.___SCheckboxButton_1jr0a_gg_:hover{cursor:pointer;border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));background-color:rgba(0,143,248,.1)}@supports (color:color(display-p3 0 0 0)){.___SCheckboxButton_1jr0a_gg_:hover{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SCheckboxButton_1jr0a_gg_:hover{border-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08333 0.73488 / 0.386))}}}.___SCheckboxButton_1jr0a_gg_.__checked_1jr0a_gg_:hover{background-color:rgba(0,143,248,.2)}}",
+    ".___SCheckboxButton_1fi8v_gg_{margin-top:var(--intergalactic-spacing-2x, 8px);border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-rounded-medium, 6px)}@supports (color:color(display-p3 0 0 0%)){.___SCheckboxButton_1fi8v_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SCheckboxButton_1fi8v_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SCheckboxButton_1fi8v_gg_ label{width:100%;padding:var(--intergalactic-spacing-3x, 12px);box-sizing:border-box}.___SCheckboxButton_1fi8v_gg_.__checked_1fi8v_gg_{cursor:pointer;border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));background-color:rgba(0,143,248,.1)}@media (hover:hover){.___SCheckboxButton_1fi8v_gg_:hover{cursor:pointer;border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));background-color:rgba(0,143,248,.1)}.___SCheckboxButton_1fi8v_gg_.__checked_1fi8v_gg_:hover{background-color:rgba(0,143,248,.2)}}",
     /*__inner_css_end__*/
-    "1jr0a_gg_"
+    "1fi8v_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SCheckboxButton": "___SCheckboxButton_1jr0a_gg_",
-    "_checked": "__checked_1jr0a_gg_"
+    "__SCheckboxButton": "___SCheckboxButton_1fi8v_gg_",
+    "_checked": "__checked_1fi8v_gg_"
   })
 );
-var CheckboxButtonRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(CheckboxButtonRoot2, _Component);
-  var _super = _createSuper(CheckboxButtonRoot2);
+var CheckboxButtonRoot = /* @__PURE__ */ (function(_Component) {
   function CheckboxButtonRoot2() {
+    var _this;
     _classCallCheck(this, CheckboxButtonRoot2);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, CheckboxButtonRoot2, [].concat(args));
+    _defineProperty(_this, "checkboxRef", /* @__PURE__ */ React.createRef());
+    return _this;
   }
-  _createClass(CheckboxButtonRoot2, [{
+  _inherits(CheckboxButtonRoot2, _Component);
+  return _createClass(CheckboxButtonRoot2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var focused = this.asProps.focused;
+      if (focused) {
+        setTimeout(function() {
+          var _this2$checkboxRef$cu;
+          (_this2$checkboxRef$cu = _this2.checkboxRef.current) === null || _this2$checkboxRef$cu === void 0 || _this2$checkboxRef$cu.focus();
+        }, 20);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps, _ref2;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, id = _this$asProps.id, label = _this$asProps.label;
-      _this$asProps.type;
-      var focused = _this$asProps.focused, other = _objectWithoutProperties(_this$asProps, _excluded);
-      var autoFocus = focused ? 20 : false;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, id = _this$asProps.id, label = _this$asProps.label, _type = _this$asProps.type, focused = _this$asProps.focused, other = _objectWithoutProperties(_this$asProps, _excluded);
       var SCheckboxButton = Box;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCheckboxButton, _ref2.cn("SCheckboxButton", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SCheckboxButton, _ref2.cn("SCheckboxButton", _objectSpread({}, assignProps({
         "__excludeProps": ["onChange", "id", "type"]
       }, _ref))), /* @__PURE__ */ React.createElement(Checkbox, _ref2.cn("Checkbox", _objectSpread({}, other)), /* @__PURE__ */ React.createElement(Checkbox.Value, {
-        autoFocus,
+        ref: this.checkboxRef,
         "aria-labelledby": id
       }), /* @__PURE__ */ React.createElement(Checkbox.Text, {
         id
       }, label)));
     }
   }]);
-  return CheckboxButtonRoot2;
-}(Component);
+})(Component);
 _defineProperty(CheckboxButtonRoot, "style", style);
 var CheckboxButton = createComponent(CheckboxButtonRoot);
 export {

package/lib/esm/component/feedback-item/FeedbackItem.mjs

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { assignProps } from "@semcore/core";
+import pick from "@semcore/core/lib/utils/pick";
+import propsForElement from "@semcore/core/lib/utils/propsForElement";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import Tooltip from "@semcore/tooltip";
 import React from "react";
 import { Field } from "react-final-form";
-import Tooltip from "@semcore/tooltip";
-import pick from "@semcore/utils/lib/pick";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import { assignProps } from "@semcore/utils/lib/core";
-import propsForElement from "@semcore/utils/lib/propsForElement";
 var _excluded = ["Children", "tag", "uid", "tooltipProps"], _excluded2 = ["input", "meta"];
 var deafultTooltipPropsList = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate"];
 function FeedbackItem(_ref) {
@@ -23,7 +23,7 @@ function FeedbackItem(_ref) {
     var popperId = "".concat(uid, "-error-description");
     var ariaDescribedBy = props["aria-describedby"];
     var inputProps = assignProps(_objectSpread(_objectSpread({}, propsForElement(other)), {}, {
-      state: errorState ? "invalid" : "normal",
+      "state": errorState ? "invalid" : "normal",
       "aria-invalid": errorState ? true : false,
       "aria-describedby": meta.active ? errorState ? popperId : ariaDescribedBy : void 0
     }), input);

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

@@ -3,77 +3,74 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, 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/utils/lib/enhances/i18nEnhance";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import Notice from "@semcore/notice";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Flex, Box } from "@semcore/base-components";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 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 Input from "@semcore/input";
 import Link from "@semcore/link";
-import SliderRating from "../slider-rating/SliderRating.mjs";
 import Modal from "@semcore/modal";
+import SemcoreNotice from "@semcore/notice";
+import { NoticeBubbleManager, NoticeBubbleContainer } from "@semcore/notice-bubble";
+import SpinContainer from "@semcore/spin-container";
 import Textarea from "@semcore/textarea";
-import { Flex, Box } from "@semcore/flex-box";
+import { Text } from "@semcore/typography";
+import createFocusDecorator from "final-form-focus";
+import React from "react";
+import { Field, Form } from "react-final-form";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import CheckboxButton from "../checkbox-button/CheckboxButton.mjs";
 import { FeedbackItem } from "../feedback-item/FeedbackItem.mjs";
+import SliderRating from "../slider-rating/SliderRating.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 _excluded = ["header", "submitText", "formConfig", "notificationText", "notificationTitle", "learnMoreLink", "Children", "styles", "forwardRef", "status", "theme", "background", "rating", "visible", "onVisibleChange", "notificationVisible", "onNotificationClose", "getI18nText", "errorFeedbackEmail", "modalWidth", "Illustration", "Notice"];
 /*!__reshadow-styles__:"../../style/feedback-rating.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SFeedbackRating_edx4s_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_edx4s_gg_ li{list-style:none}",
+    ".___SFeedbackRating_13l9c_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_13l9c_gg_ li{list-style:none}.___SFeedbackRating_13l9c_gg_ .___SHeader_13l9c_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin:var(--intergalactic-spacing-4x, 16px)0;text-align:center}",
     /*__inner_css_end__*/
-    "edx4s_gg_"
+    "13l9c_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SFeedbackRating": "___SFeedbackRating_edx4s_gg_"
+    "__SFeedbackRating": "___SFeedbackRating_13l9c_gg_",
+    "__SHeader": "___SHeader_13l9c_gg_"
   })
 );
-var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(FeedbackRatingRoot2, _Component);
-  var _super = _createSuper(FeedbackRatingRoot2);
+var FeedbackRatingRoot = /* @__PURE__ */ (function(_Component) {
   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", {
+    _this = _callSuper(this, FeedbackRatingRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
       error: false
     });
-    _defineProperty(_assertThisInitialized(_this), "manager", new NoticeBubbleManager());
-    _defineProperty(_assertThisInitialized(_this), "focusDecorator", createFocusDecorator());
-    _defineProperty(_assertThisInitialized(_this), "handleChangeRating", function(rating) {
+    _defineProperty(_this, "manager", new NoticeBubbleManager());
+    _defineProperty(_this, "focusDecorator", createFocusDecorator());
+    _defineProperty(_this, "handleChangeRating", function(rating) {
       if (rating > 0) {
         _this.asProps.onVisibleChange(true, rating);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handelCloseModal", function() {
+    _defineProperty(_this, "handelCloseModal", function() {
       _this.asProps.onVisibleChange(false, _this.asProps.rating);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function(fn) {
-      return function(value, e) {
+    _defineProperty(_this, "handleChange", function(fn) {
+      return function(_value, e) {
         fn(e);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "renderCheckbox", function(config, index) {
+    _defineProperty(_this, "renderCheckbox", function(config, index) {
       var initialValue = _this.props.initialValues[config.key];
       return /* @__PURE__ */ React.createElement(Field, {
         name: config.key,
@@ -92,7 +89,7 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
         }));
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "renderTextField", function(config) {
+    _defineProperty(_this, "renderTextField", function(config) {
       var _config$description;
       var initialValue = _this.props.initialValues[config.key];
       var label = typeof config.label === "string" ? /* @__PURE__ */ React.createElement(Text, {
@@ -101,12 +98,12 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
       }, 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, {
+        key: config.key,
         direction: "column"
       }, /* @__PURE__ */ React.createElement(Flex, {
         tag: "label",
         mt: 4,
-        htmlFor: config.key,
-        key: config.key
+        htmlFor: config.key
       }, label), /* @__PURE__ */ React.createElement(FeedbackRating.Item, {
         name: config.key,
         validate: config.validate,
@@ -148,7 +145,8 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(FeedbackRatingRoot2, [{
+  _inherits(FeedbackRatingRoot2, _Component);
+  return _createClass(FeedbackRatingRoot2, [{
     key: "headerId",
     get: function get() {
       var uid = this.asProps.uid;
@@ -206,11 +204,7 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
     key: "render",
     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 _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, _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, modalWidth = _this$asProps2.modalWidth, Illustration = _this$asProps2.Illustration, NoticeComponent = _this$asProps2.Notice, other = _objectWithoutProperties(_this$asProps2, _excluded);
       var SFeedbackRating = Modal;
       var checkboxFields = formConfig.filter(function(item) {
         return item.type === "checkbox";
@@ -219,30 +213,29 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
         return item.type === "textarea" || item.type === "input" || item.type === "email";
       });
       var notificationId = this.getNoticeTextId();
-      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Box, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Notice, _ref4.cn("Notice", {
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(Box, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(NoticeComponent, _ref4.cn("NoticeComponent", {
         "visible": notificationVisible,
         "aria-label": getI18nText("leaveFeedback"),
         "tag": Flex,
         "alignItems": notificationTitle ? "flex-start" : "center"
-      }), /* @__PURE__ */ React.createElement(Notice.Label, {
+      }), /* @__PURE__ */ React.createElement(NoticeComponent.Label, {
         mr: 3,
         "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, {
+      }, /* @__PURE__ */ React.createElement(Illustration, _ref4.cn("Illustration", {}))), /* @__PURE__ */ React.createElement(NoticeComponent.Content, null, notificationTitle ? /* @__PURE__ */ React.createElement(NoticeComponent.Title, null, notificationTitle) : null, /* @__PURE__ */ React.createElement(NoticeComponent.Text, {
+        gap: 3,
         tag: Flex,
         alignItems: notificationTitle ? "flex-start" : "center"
       }, /* @__PURE__ */ React.createElement(Text, _ref4.cn("Text", {
-        "mr": 3,
         "id": notificationId
-      }), notificationText), /* @__PURE__ */ React.createElement(Notice.Actions, {
+      }), notificationText), /* @__PURE__ */ React.createElement(NoticeComponent.Actions, {
         mt: 0
       }, /* @__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, {
+      }), getI18nText("learnMore")))), /* @__PURE__ */ React.createElement(NoticeComponent.Close, {
         onClick: onNotificationClose
       })), /* @__PURE__ */ React.createElement(SFeedbackRating, _ref4.cn("SFeedbackRating", _objectSpread({}, assignProps({
         "visible": visible,
@@ -254,7 +247,7 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
         "decorators": [this.focusDecorator]
       }, other)), function(api) {
         var _ref5;
-        return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SpinContainer, _ref5.cn("SpinContainer", {
+        return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SpinContainer, _ref5.cn("SpinContainer", {
           "background": background,
           "theme": theme,
           "size": "xl",
@@ -288,11 +281,11 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
           return _this3.renderCheckbox(formConfigItem, index);
         })), textFields.map(function(formConfigItem) {
           return _this3.renderTextField(formConfigItem);
-        }), _this3.state.error && /* @__PURE__ */ React.createElement(Notice, _ref5.cn("Notice", {
+        }), _this3.state.error && /* @__PURE__ */ React.createElement(SemcoreNotice, _ref5.cn("SemcoreNotice", {
           "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", {
+        }), /* @__PURE__ */ React.createElement(SemcoreNotice.Label, null, /* @__PURE__ */ React.createElement(WarnM, _ref5.cn("WarnM", {}))), /* @__PURE__ */ React.createElement(SemcoreNotice.Content, null, getI18nText("errorMessage", {
           // todo: Brauer Ilia - think how to fix type
           // @ts-ignore
           email: /* @__PURE__ */ React.createElement(Link, _ref5.cn("Link", {
@@ -310,8 +303,7 @@ var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
       })));
     }
   }]);
-  return FeedbackRatingRoot2;
-}(Component);
+})(Component);
 _defineProperty(FeedbackRatingRoot, "displayName", "FeedbackRatingForm");
 _defineProperty(FeedbackRatingRoot, "style", style);
 _defineProperty(FeedbackRatingRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
@@ -319,7 +311,9 @@ _defineProperty(FeedbackRatingRoot, "defaultProps", {
   onSubmit: function onSubmit() {
   },
   i18n: localizedMessages,
-  locale: "en"
+  locale: "en",
+  Illustration: FeedbackIllustration,
+  Notice: SemcoreNotice
 });
 _defineProperty(FeedbackRatingRoot, "validate", {
   description: function description(error) {
@@ -344,14 +338,8 @@ _defineProperty(FeedbackRatingRoot, "validate", {
 function Header(props) {
   var _ref3 = arguments[0], _ref6;
   var styles = props.styles;
-  var SHeader = Text;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHeader, _ref6.cn("SHeader", _objectSpread({}, assignProps({
-    "size": 300,
-    "tag": "h2",
-    "mb": 4,
-    "mt": 4,
-    "textAlign": "center"
-  }, _ref3))));
+  var SHeader = Modal.Title;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref6.cn("SHeader", _objectSpread({}, assignProps({}, _ref3))));
 }
 var FeedbackRating = createComponent(FeedbackRatingRoot, {
   Header,

package/lib/esm/component/slider-rating/SliderRating.mjs

@@ -1,73 +1,67 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { assignProps, sstyled as sstyled$1, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Flex, Box } from "@semcore/base-components";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React from "react";
-import { Box, Flex } from "@semcore/flex-box";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"../../style/slider-rating.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SSliderRating_afqw6_gg_ .___SStar_afqw6_gg_{transition:all calc(var(--intergalactic-duration-control, 200)*1ms) ease-out}.___SSliderRating_afqw6_gg_.__keyboardFocused_afqw6_gg_ .___SStar_afqw6_gg_.__hovered_afqw6_gg_{cursor:pointer;transform:scale(1.3)}@media (hover:hover){.___SSliderRating_afqw6_gg_ .___SStar_afqw6_gg_:hover{cursor:pointer;transform:scale(1.3)}}.___SSliderRating_afqw6_gg_.__keyboardFocused_afqw6_gg_{outline:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}@media (hover:hover){.___SSliderRating_afqw6_gg_.__readonly_afqw6_gg_ .___SStar_afqw6_gg_:hover{cursor:default;transform:none;transition:none}}.___SStar_afqw6_gg_.__filled_afqw6_gg_:active{animation:wobble .8s ease-in-out}.___SStar_afqw6_gg_ path{fill:var(--intergalactic-slider-rating-normal, rgb(157, 159, 158))}.___SStar_afqw6_gg_.__filled_afqw6_gg_ path{stroke-width:0;fill:var(--intergalactic-slider-rating-hover-active, rgb(168, 106, 254))}",
+    ".___SSliderRating_d9wy7_gg_ .___SStar_d9wy7_gg_{transition:all calc(var(--intergalactic-duration-control, 200)*1ms) ease-out}.___SSliderRating_d9wy7_gg_:focus-visible .___SStar_d9wy7_gg_.__hovered_d9wy7_gg_{cursor:pointer;transform:scale(1.3)}@media (hover:hover){.___SSliderRating_d9wy7_gg_ .___SStar_d9wy7_gg_:hover{cursor:pointer;transform:scale(1.3)}.___SSliderRating_d9wy7_gg_.__readonly_d9wy7_gg_ .___SStar_d9wy7_gg_:hover{cursor:default;transform:none;transition:none}}.___SStar_d9wy7_gg_.__filled_d9wy7_gg_:active{animation:wobble .8s ease-in-out}.___SStar_d9wy7_gg_ path{fill:var(--intergalactic-slider-rating-normal, rgb(157, 159, 158))}.___SStar_d9wy7_gg_.__filled_d9wy7_gg_ path{stroke-width:0;fill:var(--intergalactic-slider-rating-hover-active, rgb(168, 106, 254))}",
     /*__inner_css_end__*/
-    "afqw6_gg_"
+    "d9wy7_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SSliderRating": "___SSliderRating_afqw6_gg_",
-    "__SStar": "___SStar_afqw6_gg_",
-    "_keyboardFocused": "__keyboardFocused_afqw6_gg_",
-    "_hovered": "__hovered_afqw6_gg_",
-    "_readonly": "__readonly_afqw6_gg_",
-    "_filled": "__filled_afqw6_gg_"
+    "__SSliderRating": "___SSliderRating_d9wy7_gg_",
+    "__SStar": "___SStar_d9wy7_gg_",
+    "_hovered": "__hovered_d9wy7_gg_",
+    "_readonly": "__readonly_d9wy7_gg_",
+    "_filled": "__filled_d9wy7_gg_"
   })
 );
 var MIN = 1;
 var MAX = 5;
-var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(SliderRatingRoot2, _Component);
-  var _super = _createSuper(SliderRatingRoot2);
+var SliderRatingRoot = /* @__PURE__ */ (function(_Component) {
   function SliderRatingRoot2() {
     var _this;
     _classCallCheck(this, SliderRatingRoot2);
     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", {
+    _this = _callSuper(this, SliderRatingRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
       hoveredIndex: -1,
       clickedIndex: -1
     });
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function(newValue) {
-      return function(e) {
+    _defineProperty(_this, "handleClick", function(newValue) {
+      return function(_e) {
         var readonly = _this.asProps.readonly;
         if (!readonly) {
           _this.setValue(newValue);
         }
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnder", function(index) {
+    _defineProperty(_this, "handleMouseEnder", function(index) {
       return function() {
         _this.setState({
           hoveredIndex: index
         });
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function() {
+    _defineProperty(_this, "handleMouseLeave", function() {
       _this.setState({
         hoveredIndex: -1
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "setValue", function(newValue) {
+    _defineProperty(_this, "setValue", function(newValue) {
       var _this$asProps = _this.asProps, onChange = _this$asProps.onChange, value = _this$asProps.value;
       if (onChange) {
         onChange(newValue);
@@ -84,17 +78,17 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(event) {
+    _defineProperty(_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 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;
+        var newValue = _hoveredIndex === -1 ? value + direction : _hoveredIndex + 1 + direction;
         if (newValue > MAX) newValue = MAX;
         if (newValue < MIN) newValue = MIN;
         _this.setState({
@@ -104,7 +98,8 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(SliderRatingRoot2, [{
+  _inherits(SliderRatingRoot2, _Component);
+  return _createClass(SliderRatingRoot2, [{
     key: "getStarProps",
     value: function getStarProps(_, index) {
       var _this$asProps2 = this.asProps, value = _this$asProps2.value, readonly = _this$asProps2.readonly;
@@ -151,19 +146,18 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
         return /* @__PURE__ */ React.createElement(SSliderRating, assignProps({
           "gap": 1,
           "role": "img",
-          "aria-label": label,
-          "use:tabIndex": -1
+          "aria-label": label
         }, _ref), new Array(MAX).fill(null).map(function(_, index) {
-          return /* @__PURE__ */ React.createElement(Box, {
-            key: index,
-            position: "relative"
-          }, /* @__PURE__ */ React.createElement(SliderRating.Star, null));
+          return /* @__PURE__ */ React.createElement(SliderRating.Star, {
+            key: index
+          });
         }));
       }
       var hoverValue = hoveredIndex + 1;
       var editModeLabel = hoverValue > 0 || value ? "".concat(label, ". ").concat(getI18nText("FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber"), ".") : label;
-      return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSliderRating, _ref3.cn("SSliderRating", _objectSpread({}, assignProps({
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SSliderRating, _ref3.cn("SSliderRating", _objectSpread({}, assignProps({
         "gap": 1,
+        "tabIndex": 0,
         "onMouseLeave": this.handleMouseLeave,
         "onKeyDown": this.handleKeyDown,
         "role": "slider",
@@ -173,18 +167,16 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
         "aria-valuetext": editModeLabel,
         "aria-valuenow": hoverValue
       }, _ref))), new Array(MAX).fill(null).map(function(_, index) {
-        return /* @__PURE__ */ React.createElement(Box, {
-          key: index,
-          position: "relative"
-        }, /* @__PURE__ */ React.createElement(SliderRating.Star, null));
+        return /* @__PURE__ */ React.createElement(SliderRating.Star, {
+          key: index
+        });
       }));
     }
   }]);
-  return SliderRatingRoot2;
-}(Component);
+})(Component);
 _defineProperty(SliderRatingRoot, "displayName", "SliderRating");
 _defineProperty(SliderRatingRoot, "style", style);
-_defineProperty(SliderRatingRoot, "enhance", [keyboardFocusEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+_defineProperty(SliderRatingRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
 _defineProperty(SliderRatingRoot, "defaultProps", {
   i18n: localizedMessages,
   locale: "en"
@@ -192,7 +184,7 @@ _defineProperty(SliderRatingRoot, "defaultProps", {
 function Star(props) {
   var _ref2 = arguments[0], _ref4;
   var SStar = Box;
-  return _ref4 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SStar, _ref4.cn("SStar", _objectSpread({}, assignProps({
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SStar, _ref4.cn("SStar", _objectSpread({}, assignProps({
     "tag": "svg",
     "role": "none",
     "width": "24",

package/lib/esm/style/checkbox-button.shadow.css

@@ -12,7 +12,7 @@ SCheckboxButton {
 
 SCheckboxButton:hover, SCheckboxButton[checked] {
   cursor: pointer;
-  border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
+  border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
   background-color: rgba(0, 143, 248, 0.10);
 }
 

package/lib/esm/style/feedback-form.shadow.css

@@ -28,7 +28,7 @@ SSuccess {
 
 SEmail {
   margin-bottom: calc(
-    var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)
+    var(--intergalactic-spacing-4x, 16px)
   );
   width: 80px;
   height: 80px;

package/lib/esm/style/feedback-rating.shadow.css

@@ -6,4 +6,12 @@ SFeedbackRating {
   ul, li {
     list-style: none;
   }
+
+  SHeader {
+    font-size: var(--intergalactic-fs-300, 16px);
+    line-height: var(--intergalactic-lh-300, 150%);
+    font-weight: var(--intergalactic-bold, 700);
+    margin: var(--intergalactic-spacing-4x, 16px) 0;
+    text-align: center;
+  }
 }

package/lib/esm/style/slider-rating.shadow.css

@@ -2,17 +2,12 @@ SSliderRating SStar {
   transition: all calc(var(--intergalactic-duration-control, 200) * 1ms) ease-out;
 }
 
-SSliderRating[keyboardFocused] SStar[hovered],
+SSliderRating:focus-visible SStar[hovered],
 SSliderRating SStar:hover {
   cursor: pointer;
   transform: scale(1.3);
 }
 
-SSliderRating[keyboardFocused] {
-  outline: none;
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
-}
-
 SSliderRating[readonly] SStar:hover {
   cursor: default;
   transform: none;

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
 import ja from "./ja.json.mjs";
 import ko from "./ko.json.mjs";
 import nl from "./nl.json.mjs";
+import pl from "./pl.json.mjs";
 import pt from "./pt.json.mjs";
+import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
-import pl from "./pl.json.mjs";
-import sv from "./sv.json.mjs";
 var localizedMessages = {
   de,
   en,