@semcore/feature-highlight 16.3.0 → 17.0.0-prerelease.17

package/lib/esm/components/radio/Radio.mjs

@@ -1,89 +1,78 @@
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component, CONTEXT_COMPONENT } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps, CONTEXT_COMPONENT } from "@semcore/core";
 import Radio, { RadioGroup } from "@semcore/radio";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
 /*!__reshadow-styles__:"./radio.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedRadio_is7ms_gg_{position:relative}.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) [data-ui-name="Value.RadioMark"]{border-radius:50%;background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff))}.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) [data-ui-name="Value.RadioMark"]::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:50%;border-width:0;pointer-events:none;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:margin calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) [data-ui-name="Value.RadioMark"]::after{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff);top:50%;left:50%;width:calc(100% - 2px);height:calc(100% - 2px);transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) input[data-ui-name="RadioFH.Value"]:focus-visible+[data-ui-name="Value.RadioMark"]::before{margin:-4px;opacity:1;transform:scale(1);transition:inherit}@supports not (-webkit-mask-composite:xor){.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) input[data-ui-name="RadioFH.Value"]:focus-visible+[data-ui-name="Value.RadioMark"]{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) input[data-ui-name="RadioFH.Value"]:focus-visible+[data-ui-name="Value.RadioMark"]::before{display:none}.___SHighlightedRadio_is7ms_gg_:not(._state_invalid_is7ms_gg_) input[data-ui-name="RadioFH.Value"]:checked:focus-visible+[data-ui-name="Value.RadioMark"]::before{display:none}}',
+    '.___SHighlightedRadio_lds44_gg_{position:relative}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) [data-ui-name="Value.RadioMark"]{border-radius:50%;background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff))}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) [data-ui-name="Value.RadioMark"]::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:50%;border-width:0;pointer-events:none;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:margin calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) [data-ui-name="Value.RadioMark"]::after{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff);top:50%;left:50%;width:calc(100% - 2px);height:calc(100% - 2px);transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name="RadioFH.Value"]:focus-visible+[data-ui-name="Value.RadioMark"]::before{margin:-4px;opacity:1;transform:scale(1);transition:inherit}@supports not (-webkit-mask-composite:xor){.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name="RadioFH.Value"]:focus-visible+[data-ui-name="Value.RadioMark"]{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name="RadioFH.Value"]:focus-visible+[data-ui-name="Value.RadioMark"]::before{display:none}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name="RadioFH.Value"]:checked:focus-visible+[data-ui-name="Value.RadioMark"]::before{display:none}}',
     /*__inner_css_end__*/
-    "is7ms_gg_"
+    "lds44_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedRadio": "___SHighlightedRadio_is7ms_gg_",
-    "_state_invalid": "_state_invalid_is7ms_gg_"
+    "__SHighlightedRadio": "___SHighlightedRadio_lds44_gg_",
+    "_state_invalid": "_state_invalid_lds44_gg_"
   })
 );
-var RadioFHRoot = /* @__PURE__ */ (function(_Component) {
-  function RadioFHRoot2() {
-    var _this;
-    _classCallCheck(this, RadioFHRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, RadioFHRoot2, [].concat(args));
-    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "state", {
+class RadioFHRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "state", {
       checked: false
     });
-    _defineProperty(_this, "setChecked", function() {
-      _this.setState({
+    _defineProperty(this, "setChecked", () => {
+      this.setState({
         checked: false
       });
-      setTimeout(function() {
-        var _this$inputRef$curren;
-        _this.setState({
-          checked: (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked
+      setTimeout(() => {
+        var _a;
+        this.setState({
+          checked: (_a = this.inputRef.current) == null ? void 0 : _a.checked
         });
       });
     });
-    return _this;
   }
-  _inherits(RadioFHRoot2, _Component);
-  return _createClass(RadioFHRoot2, [{
-    key: "getValueProps",
-    value: function getValueProps() {
-      return {
-        ref: this.inputRef,
-        onChange: this.setChecked,
-        // for click by label / programmatically changed
-        onClick: this.setChecked
-        // for click by radio
-      };
-    }
-  }, {
-    key: "getAnimatedSparklesProps",
-    value: function getAnimatedSparklesProps() {
-      var size = this.context.size;
-      var checked = this.state.checked;
-      return {
-        show: checked,
-        top: size === "l" ? "7px" : "5px",
-        left: size === "l" ? "5px" : "3px"
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SHighlightedRadio = Radio;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, hasChildren = _this$asProps.children;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedRadio, _ref2.cn("SHighlightedRadio", _objectSpread({}, assignProps({}, _ref))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RadioFH.Value, null), /* @__PURE__ */ React.createElement(RadioFH.Text, null)));
-    }
-  }]);
-})(Component);
+  getValueProps() {
+    return {
+      ref: this.inputRef,
+      onChange: this.setChecked,
+      // for click by label / programmatically changed
+      onClick: this.setChecked
+      // for click by radio
+    };
+  }
+  getAnimatedSparklesProps() {
+    const {
+      size
+    } = this.context;
+    const checked = this.state.checked;
+    return {
+      show: checked,
+      top: size === "l" ? "7px" : "5px",
+      left: size === "l" ? "5px" : "3px"
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SHighlightedRadio = Radio;
+    const {
+      styles,
+      Children,
+      children: hasChildren
+    } = this.asProps;
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedRadio, _ref2.cn("SHighlightedRadio", {
+      ...assignProps({}, _ref)
+    }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RadioFH.Value, null), /* @__PURE__ */ React.createElement(RadioFH.Text, null)));
+  }
+}
 _defineProperty(RadioFHRoot, "displayName", "RadioFH");
 _defineProperty(RadioFHRoot, "style", style);
 _defineProperty(RadioFHRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
-var RadioFH = createComponent(RadioFHRoot, {
+const RadioFH = createComponent(RadioFHRoot, {
   Text: Radio.Text,
   Value: Radio.Value,
   AnimatedSparkles

package/lib/esm/components/select/Select.mjs

@@ -1,35 +1,26 @@
-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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, assignProps } from "@semcore/core";
 import Select from "@semcore/select";
 import React from "react";
 import { ButtonTriggerFH } from "../../inner-components/button-trigger/ButtonTrigger.mjs";
-var SelectFHRoot = /* @__PURE__ */ (function(_Component) {
-  function SelectFHRoot2() {
-    _classCallCheck(this, SelectFHRoot2);
-    return _callSuper(this, SelectFHRoot2, arguments);
+class SelectFHRoot extends Component {
+  render() {
+    var _ref = this.asProps;
+    return /* @__PURE__ */ React.createElement(Select, assignProps({}, _ref));
   }
-  _inherits(SelectFHRoot2, _Component);
-  return _createClass(SelectFHRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      return /* @__PURE__ */ React.createElement(Select, assignProps({}, _ref));
-    }
-  }]);
-})(Component);
+}
 _defineProperty(SelectFHRoot, "displayName", "SelectFH");
 function Trigger(props) {
   var _ref2 = arguments[0];
-  var Children = props.Children, hasChildren = props.children;
+  const {
+    Children,
+    children: hasChildren
+  } = props;
   return /* @__PURE__ */ React.createElement(Select.Trigger, assignProps({
     "tag": ButtonTriggerFH
   }, _ref2), hasChildren ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectFH.Trigger.Addon, null), /* @__PURE__ */ React.createElement(SelectFH.Trigger.Text, null)));
 }
-var SelectFH = createComponent(SelectFHRoot, {
+const SelectFH = createComponent(SelectFHRoot, {
   Trigger: [Trigger, {
     Text: ButtonTriggerFH.Text,
     Addon: ButtonTriggerFH.Addon

package/lib/esm/components/switch/Switch.mjs

@@ -1,87 +1,73 @@
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
 import Switch from "@semcore/switch";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
 /*!__reshadow-styles__:"./switch.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SToggle_188ar_gg_{position:relative}.___SToggle_188ar_gg_::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:inherit;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SToggle_188ar_gg_.__checked_188ar_gg_{color:var(--intergalactic-control-primary-info, #008ff8);background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8))}.___SToggle_188ar_gg_:has(.___SInput_188ar_gg_:focus-visible){box-shadow:none;outline:0}.___SToggle_188ar_gg_:has(.___SInput_188ar_gg_:focus-visible)::before{margin:-4px;opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SToggle_188ar_gg_:has(.___SInput_188ar_gg_:focus-visible){outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SToggle_188ar_gg_:has(.___SInput_188ar_gg_:focus-visible)::before{display:none}}',
+    '.___SToggle_12wh3_gg_{position:relative}.___SToggle_12wh3_gg_::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:inherit;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SToggle_12wh3_gg_.__checked_12wh3_gg_{color:var(--intergalactic-control-primary-info, #008ff8);background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8))}.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible){box-shadow:none;outline:0}.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible)::before{margin:-4px;opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible){outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible)::before{display:none}}',
     /*__inner_css_end__*/
-    "188ar_gg_"
+    "12wh3_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SToggle": "___SToggle_188ar_gg_",
-    "_checked": "__checked_188ar_gg_",
-    "__SInput": "___SInput_188ar_gg_"
+    "__SToggle": "___SToggle_12wh3_gg_",
+    "_checked": "__checked_12wh3_gg_",
+    "__SInput": "___SInput_12wh3_gg_"
   })
 );
-var SwitchFHRoot = /* @__PURE__ */ (function(_Component) {
-  function SwitchFHRoot2() {
-    var _this;
-    _classCallCheck(this, SwitchFHRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, SwitchFHRoot2, [].concat(args));
-    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
-    return _this;
+class SwitchFHRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "inputRef", /* @__PURE__ */ React.createRef());
   }
-  _inherits(SwitchFHRoot2, _Component);
-  return _createClass(SwitchFHRoot2, [{
-    key: "getValueProps",
-    value: function getValueProps() {
-      var _this2 = this;
-      return {
-        ref: this.inputRef,
-        onChange: function onChange() {
-          setTimeout(function() {
-            _this2.forceUpdate();
-          });
-        }
-      };
-    }
-  }, {
-    key: "getAnimatedSparklesProps",
-    value: function getAnimatedSparklesProps() {
-      var _this$inputRef$curren;
-      var size = this.asProps.size;
-      var checked = (_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked;
-      var left = "4px";
-      if (size === "l") left = "12px";
-      if (size === "xl") left = "14px";
-      return {
-        show: checked,
-        curve: size === "l" || size === "xl" ? 9 : void 0,
-        left
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref3;
-      var SInput = Switch;
-      return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SInput, _ref3.cn("SInput", _objectSpread({}, assignProps({}, _ref))));
-    }
-  }]);
-})(Component);
+  getValueProps() {
+    return {
+      ref: this.inputRef,
+      onChange: () => {
+        setTimeout(() => {
+          this.forceUpdate();
+        });
+      }
+    };
+  }
+  getAnimatedSparklesProps() {
+    var _a;
+    const {
+      size
+    } = this.asProps;
+    const checked = (_a = this.inputRef.current) == null ? void 0 : _a.checked;
+    let left = "4px";
+    if (size === "l") left = "12px";
+    if (size === "xl") left = "14px";
+    return {
+      show: checked,
+      curve: size === "l" || size === "xl" ? 9 : void 0,
+      left
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref3;
+    const SInput = Switch;
+    return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SInput, _ref3.cn("SInput", {
+      ...assignProps({}, _ref)
+    }));
+  }
+}
 _defineProperty(SwitchFHRoot, "displayName", "SwitchFH");
 _defineProperty(SwitchFHRoot, "style", style);
 function Value(props) {
   var _ref2 = arguments[0], _ref4;
-  var SToggle = Switch.Value;
-  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SToggle, _ref4.cn("SToggle", _objectSpread({}, assignProps({
-    "onChange": props.onChange
-  }, _ref2))));
+  const SToggle = Switch.Value;
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SToggle, _ref4.cn("SToggle", {
+    ...assignProps({
+      "onChange": props.onChange
+    }, _ref2)
+  }));
 }
-var SwitchFH = createComponent(SwitchFHRoot, {
+const SwitchFH = createComponent(SwitchFHRoot, {
   Addon: Switch.Addon,
   Value,
   AnimatedSparkles

package/lib/esm/components/tab-line/TabLine.mjs

@@ -1,97 +1,78 @@
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, assignProps, Component, sstyled } from "@semcore/core";
+import { createComponent, Component, assignProps, sstyled } from "@semcore/core";
 import SummaryAI from "@semcore/icon/SummaryAI/m";
 import TabLine from "@semcore/tab-line";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
 /*!__reshadow-styles__:"./tabLine.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedItem_7mtik_gg_:focus-visible{outline:0}.___SHighlightedItem_7mtik_gg_:focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedItem_7mtik_gg_::after{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_7mtik_gg_.__selected_7mtik_gg_::after{opacity:1}@media (hover:hover){.___SHighlightedItem_7mtik_gg_:hover:not(:focus-visible)::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}}.___SHighlightedItem_7mtik_gg_::before{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;height:auto;width:calc(100% + 4px);margin:-4px;padding:2px;box-sizing:content-box;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedCaret_7mtik_gg_,.___SHighlightedItem_7mtik_gg_.__selected_7mtik_gg_::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}',
+    '.___SHighlightedItem_1tazm_gg_:focus-visible{outline:0}.___SHighlightedItem_1tazm_gg_:focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedItem_1tazm_gg_::after{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_1tazm_gg_.__selected_1tazm_gg_::after{opacity:1}@media (hover:hover){.___SHighlightedItem_1tazm_gg_:hover:not(:focus-visible)::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}}.___SHighlightedItem_1tazm_gg_::before{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;height:auto;width:calc(100% + 4px);margin:-4px;padding:2px;box-sizing:content-box;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedCaret_1tazm_gg_,.___SHighlightedItem_1tazm_gg_.__selected_1tazm_gg_::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}',
     /*__inner_css_end__*/
-    "7mtik_gg_"
+    "1tazm_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedCaret": "___SHighlightedCaret_7mtik_gg_",
-    "__SHighlightedItem": "___SHighlightedItem_7mtik_gg_",
-    "_selected": "__selected_7mtik_gg_"
+    "__SHighlightedCaret": "___SHighlightedCaret_1tazm_gg_",
+    "__SHighlightedItem": "___SHighlightedItem_1tazm_gg_",
+    "_selected": "__selected_1tazm_gg_"
   })
 );
-var TabLineFHRoot = /* @__PURE__ */ (function(_Component) {
-  function TabLineFHRoot2() {
-    _classCallCheck(this, TabLineFHRoot2);
-    return _callSuper(this, TabLineFHRoot2, arguments);
+class TabLineFHRoot extends Component {
+  render() {
+    var _ref = this.asProps;
+    return /* @__PURE__ */ React.createElement(TabLine, assignProps({}, _ref));
   }
-  _inherits(TabLineFHRoot2, _Component);
-  return _createClass(TabLineFHRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      return /* @__PURE__ */ React.createElement(TabLine, assignProps({}, _ref));
-    }
-  }]);
-})(Component);
+}
 _defineProperty(TabLineFHRoot, "displayName", "TabLineFH");
 _defineProperty(TabLineFHRoot, "style", style);
-var HighlightedItemRoot = /* @__PURE__ */ (function(_Component2) {
-  function HighlightedItemRoot2() {
-    var _this;
-    _classCallCheck(this, HighlightedItemRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, HighlightedItemRoot2, [].concat(args));
-    _defineProperty(_this, "state", {
+class HighlightedItemRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       clicked: false
     });
-    return _this;
   }
-  _inherits(HighlightedItemRoot2, _Component2);
-  return _createClass(HighlightedItemRoot2, [{
-    key: "handleClick",
-    value: function handleClick(e) {
-      var _this2 = this;
-      var onClick = this.asProps.onClick;
-      onClick === null || onClick === void 0 || onClick(e);
+  handleClick(e) {
+    const {
+      onClick
+    } = this.asProps;
+    onClick == null ? void 0 : onClick(e);
+    this.setState({
+      clicked: false
+    });
+    setTimeout(() => {
       this.setState({
-        clicked: false
+        clicked: true
       });
-      setTimeout(function() {
-        _this2.setState({
-          clicked: true
-        });
-      });
-    }
-  }, {
-    key: "getAddonProps",
-    value: function getAddonProps() {
-      return {
-        clicked: this.state.clicked
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps, _ref4;
-      var SHighlightedItem = TabLine.Item;
-      return _ref4 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedItem, _ref4.cn("SHighlightedItem", _objectSpread({}, assignProps({
+    });
+  }
+  getAddonProps() {
+    return {
+      clicked: this.state.clicked
+    };
+  }
+  render() {
+    var _ref2 = this.asProps, _ref4;
+    const SHighlightedItem = TabLine.Item;
+    return _ref4 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedItem, _ref4.cn("SHighlightedItem", {
+      ...assignProps({
         "onClick": this.handleClick.bind(this)
-      }, _ref2))));
-    }
-  }]);
-})(Component);
+      }, _ref2)
+    }));
+  }
+}
 _defineProperty(HighlightedItemRoot, "displayName", "HighlightedItem");
 _defineProperty(HighlightedItemRoot, "style", style);
 function HighlightedAddon(props) {
   var _ref3 = arguments[0];
-  var clicked = props.clicked, animatedSparkleCount = props.animatedSparkleCount, Children = props.Children, hasChildren = props.children;
+  const {
+    clicked,
+    animatedSparkleCount,
+    Children,
+    children: hasChildren
+  } = props;
   return /* @__PURE__ */ React.createElement(TabLine.Item.Addon, assignProps({}, _ref3), hasChildren ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SummaryAI, {
     color: "--intergalactic-icon-primary-feature-highlight"
   }), /* @__PURE__ */ React.createElement(AnimatedSparkles, {
@@ -99,7 +80,7 @@ function HighlightedAddon(props) {
     count: animatedSparkleCount
   })));
 }
-var TabLineFH = createComponent(TabLineFHRoot, {
+const TabLineFH = createComponent(TabLineFHRoot, {
   Item: [TabLine.Item, {
     Text: TabLine.Item.Text,
     Addon: TabLine.Item.Addon

package/lib/esm/inner-components/button-trigger/ButtonTrigger.mjs

@@ -1,59 +1,55 @@
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
 import { ButtonTrigger } from "@semcore/base-trigger";
 import SummaryAI from "@semcore/icon/SummaryAI/m";
 import React from "react";
 /*!__reshadow-styles__:"./buttonTrigger.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_){border:1px solid transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;background-origin:border-box;background-clip:padding-box,border-box;position:relative;z-index:1}.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_)::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@media (hover:hover){.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box}}.___SHighlightedButtonTrigger_1vitv_gg_.__active_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_),.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_):active{background:linear-gradient(white,white) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_):focus-visible{outline:0;border-color:transparent}.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_):focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedButtonTrigger_1vitv_gg_._neighborLocation_left_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_)::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_1vitv_gg_._neighborLocation_right_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_)::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_1vitv_gg_._neighborLocation_both_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_)::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_):focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButtonTrigger_1vitv_gg_:not(._state_invalid_1vitv_gg_):not(._state_valid_1vitv_gg_):focus-visible::before{display:none}}',
+    '.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_){border:1px solid transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;background-origin:border-box;background-clip:padding-box,border-box;position:relative;z-index:1}.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_)::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@media (hover:hover){.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box}}.___SHighlightedButtonTrigger_1q2s6_gg_.__active_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_),.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_):active{background:linear-gradient(white,white) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_):focus-visible{outline:0;border-color:transparent}.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_):focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedButtonTrigger_1q2s6_gg_._neighborLocation_left_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_)::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_1q2s6_gg_._neighborLocation_right_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_)::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_1q2s6_gg_._neighborLocation_both_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_)::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_):focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButtonTrigger_1q2s6_gg_:not(._state_invalid_1q2s6_gg_):not(._state_valid_1q2s6_gg_):focus-visible::before{display:none}}',
     /*__inner_css_end__*/
-    "1vitv_gg_"
+    "1q2s6_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_1vitv_gg_",
-    "_state_invalid": "_state_invalid_1vitv_gg_",
-    "_state_valid": "_state_valid_1vitv_gg_",
-    "_active": "__active_1vitv_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1vitv_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_1vitv_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_1vitv_gg_"
+    "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_1q2s6_gg_",
+    "_state_invalid": "_state_invalid_1q2s6_gg_",
+    "_state_valid": "_state_valid_1q2s6_gg_",
+    "_active": "__active_1q2s6_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1q2s6_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_1q2s6_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_1q2s6_gg_"
   })
 );
-var ButtonTriggerFHRoot = /* @__PURE__ */ (function(_Component) {
-  function ButtonTriggerFHRoot2() {
-    _classCallCheck(this, ButtonTriggerFHRoot2);
-    return _callSuper(this, ButtonTriggerFHRoot2, arguments);
+class ButtonTriggerFHRoot extends Component {
+  render() {
+    var _ref = this.asProps, _ref3;
+    const {
+      styles
+    } = this.asProps;
+    const SHighlightedButtonTrigger = ButtonTrigger;
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedButtonTrigger, _ref3.cn("SHighlightedButtonTrigger", {
+      ...assignProps({}, _ref)
+    }));
   }
-  _inherits(ButtonTriggerFHRoot2, _Component);
-  return _createClass(ButtonTriggerFHRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref3;
-      var styles = this.asProps.styles;
-      var SHighlightedButtonTrigger = ButtonTrigger;
-      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedButtonTrigger, _ref3.cn("SHighlightedButtonTrigger", _objectSpread({}, assignProps({}, _ref))));
-    }
-  }]);
-})(Component);
+}
 _defineProperty(ButtonTriggerFHRoot, "displayName", "ButtonTriggerFH");
 _defineProperty(ButtonTriggerFHRoot, "style", style);
 function Addon(props) {
   var _ref2 = arguments[0], _ref4;
-  var SAddon = ButtonTrigger.Addon;
-  var Children = props.Children, hasChildren = props.children;
-  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, assignProps({}, _ref2))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})) : /* @__PURE__ */ React.createElement(SummaryAI, _ref4.cn("SummaryAI", {
+  const SAddon = ButtonTrigger.Addon;
+  const {
+    Children,
+    children: hasChildren
+  } = props;
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", {
+    ...assignProps({}, _ref2)
+  }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})) : /* @__PURE__ */ React.createElement(SummaryAI, _ref4.cn("SummaryAI", {
     "color": "--intergalactic-icon-primary-feature-highlight"
   })));
 }
-var ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {
+const ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {
   Text: ButtonTrigger.Text,
   Addon
 });

package/lib/esm/inner-components/sparkle/AnimatedSparkles.mjs

@@ -1,9 +1,14 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import React from "react";
 import Sparkle from "./Sparkle.mjs";
 function AnimatedSparkles(props) {
-  var count = props.count, curve = props.curve, show = props.show, top = props.top, left = props.left;
-  return show && count !== void 0 && _toConsumableArray(new Array(count)).map(function(_, index) {
+  const {
+    count,
+    curve,
+    show,
+    top,
+    left
+  } = props;
+  return show && count !== void 0 && [...new Array(count)].map((_, index) => {
     return /* @__PURE__ */ React.createElement(Sparkle, {
       key: index,
       index,