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

package/lib/esm/components/checkbox/Checkbox.mjs

@@ -1,77 +1,65 @@
-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 Checkbox from "@semcore/checkbox";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
 /*!__reshadow-styles__:"./checkbox.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedCheckbox_18hxr_gg_:not(._state_invalid_18hxr_gg_) [data-ui-name="Value.CheckMark"]{border:1px solid transparent;border-radius:var(--intergalactic-addon-rounded, 4px);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}.___SHighlightedCheckbox_18hxr_gg_:not(._state_invalid_18hxr_gg_) input[data-ui-name="CheckboxFH.Value"]:checked+[data-ui-name="Value.CheckMark"]{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}.___SHighlightedCheckbox_18hxr_gg_:not(._state_invalid_18hxr_gg_) [data-ui-name="Value.CheckMark"]::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:1px;border-width:2px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);border-color:transparent;pointer-events:none;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;-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:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedCheckbox_18hxr_gg_:not(._state_invalid_18hxr_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:not(:focus-visible)+[data-ui-name="Value.CheckMark"]::before{opacity:0;transform:scale(.9)}.___SHighlightedCheckbox_18hxr_gg_:not(._state_invalid_18hxr_gg_) input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before{opacity:1;transform:scale(1)}.___SHighlightedCheckbox_18hxr_gg_:not(._state_invalid_18hxr_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}',
+    '.___SHighlightedCheckbox_q9m7q_gg_:not(._state_invalid_q9m7q_gg_) [data-ui-name="Value.CheckMark"]{border:1px solid transparent;border-radius:var(--intergalactic-addon-rounded, 4px);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}.___SHighlightedCheckbox_q9m7q_gg_:not(._state_invalid_q9m7q_gg_) input[data-ui-name="CheckboxFH.Value"]:checked+[data-ui-name="Value.CheckMark"]{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}.___SHighlightedCheckbox_q9m7q_gg_:not(._state_invalid_q9m7q_gg_) [data-ui-name="Value.CheckMark"]::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:1px;border-width:2px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);border-color:transparent;pointer-events:none;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;-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:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedCheckbox_q9m7q_gg_:not(._state_invalid_q9m7q_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:not(:focus-visible)+[data-ui-name="Value.CheckMark"]::before{opacity:0;transform:scale(.9)}.___SHighlightedCheckbox_q9m7q_gg_:not(._state_invalid_q9m7q_gg_) input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before{opacity:1;transform:scale(1)}.___SHighlightedCheckbox_q9m7q_gg_:not(._state_invalid_q9m7q_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}',
     /*__inner_css_end__*/
-    "18hxr_gg_"
+    "q9m7q_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedCheckbox": "___SHighlightedCheckbox_18hxr_gg_",
-    "_state_invalid": "_state_invalid_18hxr_gg_"
+    "__SHighlightedCheckbox": "___SHighlightedCheckbox_q9m7q_gg_",
+    "_state_invalid": "_state_invalid_q9m7q_gg_"
   })
 );
-var CheckboxFHRoot = /* @__PURE__ */ (function(_Component) {
-  function CheckboxFHRoot2() {
-    var _this;
-    _classCallCheck(this, CheckboxFHRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CheckboxFHRoot2, [].concat(args));
-    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
-    return _this;
+class CheckboxFHRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "inputRef", /* @__PURE__ */ React.createRef());
   }
-  _inherits(CheckboxFHRoot2, _Component);
-  return _createClass(CheckboxFHRoot2, [{
-    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;
-      return {
-        show: checked,
-        top: size === "l" ? "7px" : "5px",
-        left: size === "l" ? "5px" : "3px"
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SHighlightedCheckbox = Checkbox;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, hasChildren = _this$asProps.children;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedCheckbox, _ref2.cn("SHighlightedCheckbox", _objectSpread({}, assignProps({}, _ref))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CheckboxFH.Value, null), /* @__PURE__ */ React.createElement(CheckboxFH.Text, null)));
-    }
-  }]);
-})(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;
+    return {
+      show: checked,
+      top: size === "l" ? "7px" : "5px",
+      left: size === "l" ? "5px" : "3px"
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SHighlightedCheckbox = Checkbox;
+    const {
+      styles,
+      Children,
+      children: hasChildren
+    } = this.asProps;
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedCheckbox, _ref2.cn("SHighlightedCheckbox", {
+      ...assignProps({}, _ref)
+    }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CheckboxFH.Value, null), /* @__PURE__ */ React.createElement(CheckboxFH.Text, null)));
+  }
+}
 _defineProperty(CheckboxFHRoot, "displayName", "CheckboxFH");
 _defineProperty(CheckboxFHRoot, "style", style);
-var CheckboxFH = createComponent(CheckboxFHRoot, {
+const CheckboxFH = createComponent(CheckboxFHRoot, {
   Text: Checkbox.Text,
   Value: Checkbox.Value,
   AnimatedSparkles

package/lib/esm/components/input/Input.mjs

@@ -1,57 +1,49 @@
-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 SummaryAI from "@semcore/icon/SummaryAI/m";
 import Input from "@semcore/input";
 import React from "react";
 /*!__reshadow-styles__:"./input.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_ .___SOutline_1ddq4_gg_{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;border-color:transparent}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_ .___SOutline_1ddq4_gg_::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:3px;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;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_:has(.___SValue_1ddq4_gg_:focus-visible) .___SOutline_1ddq4_gg_{outline:0}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_:has(.___SValue_1ddq4_gg_:focus-visible) .___SOutline_1ddq4_gg_::before{opacity:1}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_._neighborLocation_left_1ddq4_gg_ .___SOutline_1ddq4_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_._neighborLocation_right_1ddq4_gg_ .___SOutline_1ddq4_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_._neighborLocation_both_1ddq4_gg_ .___SOutline_1ddq4_gg_::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_:has(.___SValue_1ddq4_gg_:focus-visible) .___SOutline_1ddq4_gg_{outline:0;border-color:#7078fc;box-shadow:0 0 0 0#fff,0 0 0 2px #7078fc}.___SHighlightedInput_1ddq4_gg_._state_normal_1ddq4_gg_:has(.___SValue_1ddq4_gg_:focus-visible) .___SOutline_1ddq4_gg_::before{display:none}}',
+    '.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_ .___SOutline_1l7wj_gg_{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;border-color:transparent}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_ .___SOutline_1l7wj_gg_::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:3px;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;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_:has(.___SValue_1l7wj_gg_:focus-visible) .___SOutline_1l7wj_gg_{outline:0}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_:has(.___SValue_1l7wj_gg_:focus-visible) .___SOutline_1l7wj_gg_::before{opacity:1}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_._neighborLocation_left_1l7wj_gg_ .___SOutline_1l7wj_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_._neighborLocation_right_1l7wj_gg_ .___SOutline_1l7wj_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_._neighborLocation_both_1l7wj_gg_ .___SOutline_1l7wj_gg_::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_:has(.___SValue_1l7wj_gg_:focus-visible) .___SOutline_1l7wj_gg_{outline:0;border-color:#7078fc;box-shadow:0 0 0 0#fff,0 0 0 2px #7078fc}.___SHighlightedInput_1l7wj_gg_._state_normal_1l7wj_gg_:has(.___SValue_1l7wj_gg_:focus-visible) .___SOutline_1l7wj_gg_::before{display:none}}',
     /*__inner_css_end__*/
-    "1ddq4_gg_"
+    "1l7wj_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedInput": "___SHighlightedInput_1ddq4_gg_",
-    "_state_normal": "_state_normal_1ddq4_gg_",
-    "__SValue": "___SValue_1ddq4_gg_",
-    "__SOutline": "___SOutline_1ddq4_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1ddq4_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_1ddq4_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_1ddq4_gg_"
+    "__SHighlightedInput": "___SHighlightedInput_1l7wj_gg_",
+    "_state_normal": "_state_normal_1l7wj_gg_",
+    "__SValue": "___SValue_1l7wj_gg_",
+    "__SOutline": "___SOutline_1l7wj_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1l7wj_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_1l7wj_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_1l7wj_gg_"
   })
 );
-var InputFHRoot = /* @__PURE__ */ (function(_Component) {
-  function InputFHRoot2() {
-    _classCallCheck(this, InputFHRoot2);
-    return _callSuper(this, InputFHRoot2, arguments);
+class InputFHRoot extends Component {
+  render() {
+    var _ref = this.asProps, _ref3;
+    const SHighlightedInput = Input;
+    return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedInput, _ref3.cn("SHighlightedInput", {
+      ...assignProps({}, _ref)
+    }));
   }
-  _inherits(InputFHRoot2, _Component);
-  return _createClass(InputFHRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref3;
-      var SHighlightedInput = Input;
-      return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedInput, _ref3.cn("SHighlightedInput", _objectSpread({}, assignProps({}, _ref))));
-    }
-  }]);
-})(Component);
+}
 _defineProperty(InputFHRoot, "displayName", "InputFH");
 _defineProperty(InputFHRoot, "style", style);
 function HighlightAddon(props) {
   var _ref2 = arguments[0];
-  var Children = props.Children, hasChildren = props.children;
+  const {
+    Children,
+    children: hasChildren
+  } = props;
   return /* @__PURE__ */ React.createElement(Input.Addon, assignProps({}, _ref2), hasChildren ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(SummaryAI, {
     color: "--intergalactic-icon-primary-feature-highlight"
   }));
 }
-var InputFH = createComponent(InputFHRoot, {
+const InputFH = createComponent(InputFHRoot, {
   Addon: HighlightAddon,
   Value: Input.Value
 });

package/lib/esm/components/notice/Notice.mjs

@@ -1,87 +1,86 @@
-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 { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
 import isNode from "@semcore/core/lib/utils/isNode";
 import Notice from "@semcore/notice";
 import React from "react";
 /*!__reshadow-styles__:"./notice.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedNotice_wzdzl_gg_.__beforeVisibility_wzdzl_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff));border-color:transparent;background-clip:padding-box;position:relative}.___SHighlightedNotice_wzdzl_gg_.__beforeVisibility_wzdzl_gg_:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1px;border-radius:inherit;visibility:var(--beforeVisibility_wzdzl);background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n  ) border-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box}.___SHighlightedNotice_wzdzl_gg_.__beforeVisibility_wzdzl_gg_ .___SLabel_wzdzl_gg_{color:var(--intergalactic-icon-primary-feature-highlight, #8649e1)}.___SHighlightedNotice_wzdzl_gg_.__beforeVisibility_wzdzl_gg_ .___SCloseIcon_wzdzl_gg_{color:var(--intergalactic-icon-primary-neutral, #6c6e79)}@media (hover:hover){.___SHighlightedNotice_wzdzl_gg_.__beforeVisibility_wzdzl_gg_ .___SCloseIcon_wzdzl_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #565861)}}',
+    '.___SHighlightedNotice_1agzh_gg_.__beforeVisibility_1agzh_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff));border-color:transparent;background-clip:padding-box;position:relative}.___SHighlightedNotice_1agzh_gg_.__beforeVisibility_1agzh_gg_:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1px;border-radius:inherit;visibility:var(--beforeVisibility_1agzh);background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n  ) border-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box}.___SHighlightedNotice_1agzh_gg_.__beforeVisibility_1agzh_gg_ .___SLabel_1agzh_gg_{color:var(--intergalactic-icon-primary-feature-highlight, #8649e1)}.___SHighlightedNotice_1agzh_gg_.__beforeVisibility_1agzh_gg_ .___SCloseIcon_1agzh_gg_{color:var(--intergalactic-icon-primary-neutral, #6c6e79)}@media (hover:hover){.___SHighlightedNotice_1agzh_gg_.__beforeVisibility_1agzh_gg_ .___SCloseIcon_1agzh_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #565861)}}',
     /*__inner_css_end__*/
-    "wzdzl_gg_"
+    "1agzh_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedNotice": "___SHighlightedNotice_wzdzl_gg_",
-    "_beforeVisibility": "__beforeVisibility_wzdzl_gg_",
-    "--beforeVisibility": "--beforeVisibility_wzdzl",
-    "__SLabel": "___SLabel_wzdzl_gg_",
-    "__SCloseIcon": "___SCloseIcon_wzdzl_gg_"
+    "__SHighlightedNotice": "___SHighlightedNotice_1agzh_gg_",
+    "_beforeVisibility": "__beforeVisibility_1agzh_gg_",
+    "--beforeVisibility": "--beforeVisibility_1agzh",
+    "__SLabel": "___SLabel_1agzh_gg_",
+    "__SCloseIcon": "___SCloseIcon_1agzh_gg_"
   })
 );
-var NoticeFHRoot = /* @__PURE__ */ (function(_Component) {
-  function NoticeFHRoot2() {
-    _classCallCheck(this, NoticeFHRoot2);
-    return _callSuper(this, NoticeFHRoot2, arguments);
-  }
-  _inherits(NoticeFHRoot2, _Component);
-  return _createClass(NoticeFHRoot2, [{
-    key: "renderContent",
-    value: function renderContent() {
-      var _this$asProps = this.asProps, Children = _this$asProps.Children, label = _this$asProps.label, title = _this$asProps.title, closable = _this$asProps.closable;
-      var textContent = /* @__PURE__ */ React.createElement(Children, null);
-      if (typeof Children.origin === "string") {
-        textContent = isNode(title) || isNode(label) || closable ? /* @__PURE__ */ React.createElement(Notice.Text, null, /* @__PURE__ */ React.createElement(Children, null)) : /* @__PURE__ */ React.createElement(Children, null);
-      }
-      return textContent;
-    }
-  }, {
-    key: "renderSmartMode",
-    value: function renderSmartMode() {
-      var _this$asProps2 = this.asProps, label = _this$asProps2.label, title = _this$asProps2.title, actions = _this$asProps2.actions, closable = _this$asProps2.closable, onClose = _this$asProps2.onClose;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, isNode(label) && /* @__PURE__ */ React.createElement(Notice.Label, null, label), /* @__PURE__ */ React.createElement(Notice.Content, null, isNode(title) && /* @__PURE__ */ React.createElement(Notice.Title, null, title), this.renderContent(), isNode(actions) && /* @__PURE__ */ React.createElement(Notice.Actions, null, actions)), closable && /* @__PURE__ */ React.createElement(Notice.Close, {
-        onClick: onClose
-      }));
+class NoticeFHRoot extends Component {
+  renderContent() {
+    const {
+      Children,
+      label,
+      title,
+      closable
+    } = this.asProps;
+    let textContent = /* @__PURE__ */ React.createElement(Children, null);
+    if (typeof Children.origin === "string") {
+      textContent = isNode(title) || isNode(label) || closable ? /* @__PURE__ */ React.createElement(Notice.Text, null, /* @__PURE__ */ React.createElement(Children, null)) : /* @__PURE__ */ React.createElement(Children, null);
     }
-  }, {
-    key: "renderAdvancedMode",
-    value: function renderAdvancedMode() {
-      var Children = this.asProps.Children;
-      return /* @__PURE__ */ React.createElement(Children, null);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SHighlightedNotice = Notice;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, Children = _this$asProps3.Children, visible = _this$asProps3.visible;
-      var advancedMode = isAdvanceMode(Children, [NoticeFH.Label.displayName, NoticeFH.Actions.displayName, NoticeFH.Content.displayName, NoticeFH.Title.displayName, NoticeFH.Text.displayName, NoticeFH.Close.displayName]);
-      var beforeVisibility = visible === void 0 || visible ? "visible" : "hidden";
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedNotice, _ref2.cn("SHighlightedNotice", _objectSpread({}, assignProps({
+    return textContent;
+  }
+  renderSmartMode() {
+    const {
+      label,
+      title,
+      actions,
+      closable,
+      onClose
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, isNode(label) && /* @__PURE__ */ React.createElement(Notice.Label, null, label), /* @__PURE__ */ React.createElement(Notice.Content, null, isNode(title) && /* @__PURE__ */ React.createElement(Notice.Title, null, title), this.renderContent(), isNode(actions) && /* @__PURE__ */ React.createElement(Notice.Actions, null, actions)), closable && /* @__PURE__ */ React.createElement(Notice.Close, {
+      onClick: onClose
+    }));
+  }
+  renderAdvancedMode() {
+    const {
+      Children
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(Children, null);
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SHighlightedNotice = Notice;
+    const {
+      styles,
+      Children,
+      visible
+    } = this.asProps;
+    const advancedMode = isAdvanceMode(Children, [NoticeFH.Label.displayName, NoticeFH.Actions.displayName, NoticeFH.Content.displayName, NoticeFH.Title.displayName, NoticeFH.Text.displayName, NoticeFH.Close.displayName]);
+    const beforeVisibility = visible === void 0 || visible ? "visible" : "hidden";
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedNotice, _ref2.cn("SHighlightedNotice", {
+      ...assignProps({
         "beforeVisibility": beforeVisibility,
         "__excludeProps": ["title"],
         "use:theme": void 0
-      }, _ref))), advancedMode ? this.renderAdvancedMode() : this.renderSmartMode());
-    }
-  }]);
-})(Component);
+      }, _ref)
+    }), advancedMode ? this.renderAdvancedMode() : this.renderSmartMode());
+  }
+}
 _defineProperty(NoticeFHRoot, "displayName", "NoticeFH");
 _defineProperty(NoticeFHRoot, "style", style);
-var NoticeFH = createComponent(NoticeFHRoot, {
+const NoticeFH = createComponent(NoticeFHRoot, {
   Label: Notice.Label,
   Actions: Notice.Actions,
   Content: Notice.Content,
   Title: Notice.Title,
   Text: Notice.Text,
-  Close: Notice.Close,
-  CloseIcon: Notice.CloseIcon
+  Close: Notice.Close
 });
 export {
   NoticeFH

package/lib/esm/components/pills/Pills.mjs

@@ -1,100 +1,81 @@
-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 Pills from "@semcore/pills";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
 /*!__reshadow-styles__:"./pills.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedPill_f2r4b_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;z-index:1;position:relative}.___SHighlightedPill_f2r4b_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);will-change:opacity,transform;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}.___SHighlightedPill_f2r4b_gg_._neighborLocation_left_f2r4b_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedPill_f2r4b_gg_._neighborLocation_right_f2r4b_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedPill_f2r4b_gg_._neighborLocation_both_f2r4b_gg_::before{border-radius:0}@media (hover:hover){.___SHighlightedPill_f2r4b_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}}.___SHighlightedPill_f2r4b_gg_.__selected_f2r4b_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) 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}.___SPills_f2r4b_gg_ .___SHighlightedPill_f2r4b_gg_:focus-visible{outline:0}.___SPills_f2r4b_gg_ .___SHighlightedPill_f2r4b_gg_:focus-visible::before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedPill_f2r4b_gg_:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedPill_f2r4b_gg_:focus-visible::before{display:none}}',
+    '.___SHighlightedPill_1hgp1_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;z-index:1;position:relative}.___SHighlightedPill_1hgp1_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);will-change:opacity,transform;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}.___SHighlightedPill_1hgp1_gg_._neighborLocation_left_1hgp1_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedPill_1hgp1_gg_._neighborLocation_right_1hgp1_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedPill_1hgp1_gg_._neighborLocation_both_1hgp1_gg_::before{border-radius:0}@media (hover:hover){.___SHighlightedPill_1hgp1_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}}.___SHighlightedPill_1hgp1_gg_.__selected_1hgp1_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) 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}.___SPills_1hgp1_gg_ .___SHighlightedPill_1hgp1_gg_:focus-visible{outline:0}.___SPills_1hgp1_gg_ .___SHighlightedPill_1hgp1_gg_:focus-visible::before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedPill_1hgp1_gg_:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedPill_1hgp1_gg_:focus-visible::before{display:none}}',
     /*__inner_css_end__*/
-    "f2r4b_gg_"
+    "1hgp1_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedPill": "___SHighlightedPill_f2r4b_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_f2r4b_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_f2r4b_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_f2r4b_gg_",
-    "_selected": "__selected_f2r4b_gg_",
-    "__SPills": "___SPills_f2r4b_gg_"
+    "__SHighlightedPill": "___SHighlightedPill_1hgp1_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1hgp1_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_1hgp1_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_1hgp1_gg_",
+    "_selected": "__selected_1hgp1_gg_",
+    "__SPills": "___SPills_1hgp1_gg_"
   })
 );
-var PillsFHRoot = /* @__PURE__ */ (function(_Component) {
-  function PillsFHRoot2() {
-    _classCallCheck(this, PillsFHRoot2);
-    return _callSuper(this, PillsFHRoot2, arguments);
+class PillsFHRoot extends Component {
+  render() {
+    var _ref = this.asProps;
+    return /* @__PURE__ */ React.createElement(Pills, assignProps({}, _ref));
   }
-  _inherits(PillsFHRoot2, _Component);
-  return _createClass(PillsFHRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      return /* @__PURE__ */ React.createElement(Pills, assignProps({}, _ref));
-    }
-  }]);
-})(Component);
+}
 _defineProperty(PillsFHRoot, "displayName", "PillsFH");
 _defineProperty(PillsFHRoot, "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 SHighlightedPill = Pills.Item;
-      return _ref4 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedPill, _ref4.cn("SHighlightedPill", _objectSpread({}, assignProps({
+    });
+  }
+  getAddonProps() {
+    return {
+      clicked: this.state.clicked
+    };
+  }
+  render() {
+    var _ref2 = this.asProps, _ref4;
+    const SHighlightedPill = Pills.Item;
+    return _ref4 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedPill, _ref4.cn("SHighlightedPill", {
+      ...assignProps({
         "onClick": this.handleClick.bind(this)
-      }, _ref2))));
-    }
-  }]);
-})(Component);
+      }, _ref2)
+    }));
+  }
+}
 _defineProperty(HighlightedItemRoot, "displayName", "HighlightedItem");
 _defineProperty(HighlightedItemRoot, "style", style);
 function HighlightedItemAddon(props) {
   var _ref3 = arguments[0];
-  var clicked = props.clicked, animatedSparkleCount = props.animatedSparkleCount, Children = props.Children, children = props.children;
+  const {
+    clicked,
+    animatedSparkleCount,
+    Children,
+    children
+  } = props;
   return /* @__PURE__ */ React.createElement(Pills.Item.Addon, assignProps({}, _ref3), children !== void 0 ? /* @__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, {
@@ -102,7 +83,7 @@ function HighlightedItemAddon(props) {
     count: animatedSparkleCount
   })));
 }
-var PillsFH = createComponent(PillsFHRoot, {
+const PillsFH = createComponent(PillsFHRoot, {
   Item: Pills.Item,
   HighlightedItem: createComponent(HighlightedItemRoot, {
     Text: Pills.Item.Text,