@semcore/feature-highlight 16.0.1-prerelease.0

package/lib/esm/components/badge/Badge.mjs

@@ -0,0 +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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+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 Badge from "@semcore/badge";
+import React from "react";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./badge.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SHighlightedBadge_oa3wf_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:linear-gradient(90deg,var(--intergalactic-violet-500, #8649e1),var(--intergalactic-blue-500, #006dca),var(--intergalactic-violet-400, #ab6cfe),var(--intergalactic-blue-400, #008ff8));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}",
+    /*__inner_css_end__*/
+    "oa3wf_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedBadge": "___SHighlightedBadge_oa3wf_gg_"
+  })
+);
+var BadgeFHRoot = /* @__PURE__ */ function(_Component) {
+  function BadgeFHRoot2() {
+    _classCallCheck(this, BadgeFHRoot2);
+    return _callSuper(this, BadgeFHRoot2, arguments);
+  }
+  _inherits(BadgeFHRoot2, _Component);
+  return _createClass(BadgeFHRoot2, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SHighlightedBadge = Badge;
+      var styles = this.asProps.styles;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedBadge, _ref2.cn("SHighlightedBadge", _objectSpread({}, assignProps({}, _ref))));
+    }
+  }]);
+}(Component);
+_defineProperty(BadgeFHRoot, "displayName", "BadgeFH");
+_defineProperty(BadgeFHRoot, "style", style);
+var BadgeFH = createComponent(BadgeFHRoot);
+export {
+  BadgeFH
+};

package/lib/esm/components/badge/badge.shadow.css

@@ -0,0 +1,14 @@
+SHighlightedBadge {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+
+  background-image: linear-gradient(
+    90deg,
+    var(--intergalactic-violet-500, #8649e1),
+    var(--intergalactic-blue-500, #006dca),
+    var(--intergalactic-violet-400, #ab6cfe),
+    var(--intergalactic-blue-400, #008ff8)
+  );
+  background-position-x: 99%;
+  background-size: 300%;
+  transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}

package/lib/esm/components/button/Button.mjs

@@ -0,0 +1,106 @@
+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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+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 Button from "@semcore/button";
+import SummaryAI from "@semcore/icon/SummaryAI/m";
+import React from "react";
+import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./button.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHighlightedButton_s762w_gg_._theme_primary-highlighted_s762w_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:linear-gradient(90deg,var(--intergalactic-violet-500, #8649e1),var(--intergalactic-blue-500, #006dca),var(--intergalactic-violet-400, #ab6cfe),var(--intergalactic-blue-400, #008ff8));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}@media (hover:hover){.___SHighlightedButton_s762w_gg_._theme_primary-highlighted_s762w_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-position-x:1%}}.___SHighlightedButton_s762w_gg_._theme_primary-highlighted_s762w_gg_.__active_s762w_gg_,.___SHighlightedButton_s762w_gg_._theme_primary-highlighted_s762w_gg_:active{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg, #5925ab, #044792));background-size:100%}.___SHighlightedButton_s762w_gg_._theme_secondary-highlighted_s762w_gg_{color:var(--intergalactic-text-secondary, #6c6e79);border-color:var(--intergalactic-border-primary, #c4c7cf);background-color:var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1))}@media (hover:hover){.___SHighlightedButton_s762w_gg_._theme_secondary-highlighted_s762w_gg_:hover{background-color:var(--intergalactic-control-secondary-neutral-hover,\n    rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SHighlightedButton_s762w_gg_._theme_secondary-highlighted_s762w_gg_.__active_s762w_gg_,.___SHighlightedButton_s762w_gg_._theme_secondary-highlighted_s762w_gg_:active{background-color:var(--intergalactic-control-secondary-neutral-active,\n    rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SHighlightedButton_s762w_gg_:focus-visible{outline:0;position:relative}.___SHighlightedButton_s762w_gg_:focus-visible::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-4px;padding:4px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));-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}.___SHighlightedButton_s762w_gg_._neighborLocation_left_s762w_gg_:focus-visible::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButton_s762w_gg_._neighborLocation_right_s762w_gg_:focus-visible::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButton_s762w_gg_._neighborLocation_both_s762w_gg_:focus-visible::before{border-radius:0}',
+    /*__inner_css_end__*/
+    "s762w_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedButton": "___SHighlightedButton_s762w_gg_",
+    "_theme_primary-highlighted": "_theme_primary-highlighted_s762w_gg_",
+    "_active": "__active_s762w_gg_",
+    "_theme_secondary-highlighted": "_theme_secondary-highlighted_s762w_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_s762w_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_s762w_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_s762w_gg_"
+  })
+);
+var ButtonFHRoot = /* @__PURE__ */ function(_Component) {
+  function ButtonFHRoot2() {
+    var _this;
+    _classCallCheck(this, ButtonFHRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ButtonFHRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
+      clicked: false
+    });
+    return _this;
+  }
+  _inherits(ButtonFHRoot2, _Component);
+  return _createClass(ButtonFHRoot2, [{
+    key: "handleClick",
+    value: function handleClick(e) {
+      var _this2 = this;
+      var onClick = this.asProps.onClick;
+      onClick === null || onClick === void 0 || onClick(e);
+      this.setState({
+        clicked: false
+      });
+      setTimeout(function() {
+        _this2.setState({
+          clicked: true
+        });
+      });
+    }
+  }, {
+    key: "getAddonProps",
+    value: function getAddonProps() {
+      return {
+        clicked: this.state.clicked
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var styles = this.asProps.styles;
+      var SHighlightedButton = Button;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedButton, _ref3.cn("SHighlightedButton", _objectSpread({}, assignProps({
+        "use:onClick": this.handleClick.bind(this)
+      }, _ref))));
+    }
+  }]);
+}(Component);
+_defineProperty(ButtonFHRoot, "displayName", "ButtonFH");
+_defineProperty(ButtonFHRoot, "style", style);
+_defineProperty(ButtonFHRoot, "defaultProps", {
+  theme: "highlighted"
+});
+function HighlightAddon(props) {
+  var _ref2 = arguments[0], _ref4;
+  var SAddon = Button.Addon;
+  var clicked = props.clicked, animatedSparkleCount = props.animatedSparkleCount, 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(React.Fragment, null, /* @__PURE__ */ React.createElement(SummaryAI, _ref4.cn("SummaryAI", {
+    "color": "--intergalactic-icon-primary-feature-highlight"
+  })), /* @__PURE__ */ React.createElement(AnimatedSparkles, _ref4.cn("AnimatedSparkles", {
+    "show": clicked,
+    "count": animatedSparkleCount
+  }))));
+}
+var ButtonFH = createComponent(ButtonFHRoot, {
+  Addon: HighlightAddon,
+  Text: Button.Text
+});
+export {
+  ButtonFH
+};

package/lib/esm/components/button/button.shadow.css

@@ -0,0 +1,76 @@
+SHighlightedButton[theme='primary-highlighted'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-image: linear-gradient(
+    90deg,
+    var(--intergalactic-violet-500, #8649e1),
+    var(--intergalactic-blue-500, #006dca),
+    var(--intergalactic-violet-400, #ab6cfe),
+    var(--intergalactic-blue-400, #008ff8)
+  );
+  background-position-x: 99%;
+  background-size: 300%;
+  transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-position-x: 1%;
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg, #5925ab, #044792));
+    background-size: 100%;
+  }
+}
+
+SHighlightedButton[theme='secondary-highlighted'] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  border-color: var(--intergalactic-border-primary, #c4c7cf);
+  background-color: var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1));
+
+  &:hover {
+    background-color: var(--intergalactic-control-secondary-neutral-hover,
+    rgba(138, 142, 155, 0.2));
+    color: var(--intergalactic-text-primary, #191b23);
+  }
+
+  &:active,
+  &[active] {
+    background-color: var(--intergalactic-control-secondary-neutral-active,
+    rgba(138, 142, 155, 0.3));
+    color: var(--intergalactic-text-primary, #191b23);
+  }
+}
+
+SHighlightedButton:focus-visible {
+  outline: none;
+  position: relative;
+  /*isolation: isolate;*/
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    margin: -4px;
+    padding: 4px;
+    border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
+
+    background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
+    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+    mask-composite: exclude;
+  }
+
+  &[neighborLocation='left']::before {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  &[neighborLocation='right']::before {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &[neighborLocation='both']::before {
+    border-radius: 0;
+  }
+}

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

@@ -0,0 +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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+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 Checkbox from "@semcore/checkbox";
+import React from "react";
+import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./checkbox.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHighlightedCheckbox_1e126_gg_:not(._state_invalid_1e126_gg_) input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before{box-shadow:none;content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:1px;opacity:1;border-width:3px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) 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}.___SHighlightedCheckbox_1e126_gg_:not(._state_invalid_1e126_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before{-webkit-mask:none;mask:none;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box}.___SHighlightedCheckbox_1e126_gg_:not(._state_invalid_1e126_gg_) [data-ui-name="Value.CheckMark"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n    ) border-box;background-origin:border-box;background-clip:padding-box,border-box}.___SHighlightedCheckbox_1e126_gg_:not(._state_invalid_1e126_gg_) input[data-ui-name="CheckboxFH.Value"]:checked~[data-ui-name="Value.CheckMark"]::before{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}',
+    /*__inner_css_end__*/
+    "1e126_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedCheckbox": "___SHighlightedCheckbox_1e126_gg_",
+    "_state_invalid": "_state_invalid_1e126_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;
+  }
+  _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);
+_defineProperty(CheckboxFHRoot, "displayName", "CheckboxFH");
+_defineProperty(CheckboxFHRoot, "style", style);
+var CheckboxFH = createComponent(CheckboxFHRoot, {
+  Text: Checkbox.Text,
+  Value: Checkbox.Value,
+  AnimatedSparkles
+});
+export {
+  CheckboxFH
+};

package/lib/esm/components/checkbox/checkbox.shadow.css

@@ -0,0 +1,38 @@
+SHighlightedCheckbox:not([state="invalid"]) {
+  input[data-ui-name="CheckboxFH.Value"]:focus-visible + [data-ui-name="Value.CheckMark"]::before {
+    box-shadow: none;
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    margin: -3px;
+    padding: 1px;
+    opacity: 1;
+    border-width: 3px;
+    border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px);
+
+    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box, var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;
+    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+    mask-composite: exclude;
+  }
+
+  input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible + [data-ui-name="Value.CheckMark"]::before {
+    mask: none;
+    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box, var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;
+  }
+
+  [data-ui-name="Value.CheckMark"]::before {
+    border-color: 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;
+  }
+
+  input[data-ui-name="CheckboxFH.Value"]:checked ~ [data-ui-name="Value.CheckMark"]::before {
+    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;
+  }
+}

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

@@ -0,0 +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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+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 SummaryAI from "@semcore/icon/SummaryAI/m";
+import Input from "@semcore/input";
+import React from "react";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./input.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHighlightedInput_sfrdu_gg_._state_normal_sfrdu_gg_ .___SOutline_sfrdu_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_sfrdu_gg_._state_normal_sfrdu_gg_:has(.___SValue_sfrdu_gg_:focus-visible) .___SOutline_sfrdu_gg_{box-shadow:none;border-color:transparent}.___SHighlightedInput_sfrdu_gg_._state_normal_sfrdu_gg_:has(.___SValue_sfrdu_gg_:focus-visible) .___SOutline_sfrdu_gg_::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-4px;padding:4px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));-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}.___SHighlightedInput_sfrdu_gg_._state_normal_sfrdu_gg_._neighborLocation_left_sfrdu_gg_:has(.___SValue_sfrdu_gg_:focus-visible) .___SOutline_sfrdu_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_sfrdu_gg_._state_normal_sfrdu_gg_._neighborLocation_right_sfrdu_gg_:has(.___SValue_sfrdu_gg_:focus-visible) .___SOutline_sfrdu_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_sfrdu_gg_._state_normal_sfrdu_gg_._neighborLocation_both_sfrdu_gg_:has(.___SValue_sfrdu_gg_:focus-visible) .___SOutline_sfrdu_gg_::before{border-radius:0}',
+    /*__inner_css_end__*/
+    "sfrdu_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedInput": "___SHighlightedInput_sfrdu_gg_",
+    "_state_normal": "_state_normal_sfrdu_gg_",
+    "__SOutline": "___SOutline_sfrdu_gg_",
+    "__SValue": "___SValue_sfrdu_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_sfrdu_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_sfrdu_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_sfrdu_gg_"
+  })
+);
+var InputFHRoot = /* @__PURE__ */ function(_Component) {
+  function InputFHRoot2() {
+    _classCallCheck(this, InputFHRoot2);
+    return _callSuper(this, InputFHRoot2, arguments);
+  }
+  _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;
+  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, {
+  Addon: HighlightAddon,
+  Value: Input.Value
+});
+export {
+  InputFH
+};

package/lib/esm/components/input/input.shadow.css

@@ -0,0 +1,41 @@
+SHighlightedInput[state='normal'] {
+  & SOutline {
+    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;
+  }
+
+  &:has(SValue:focus-visible) SOutline {
+    box-shadow: none;
+    border-color: transparent;
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      inset: 0;
+      margin: -4px;
+      padding: 4px;
+      border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
+
+      background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
+      mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+      mask-composite: exclude;
+    }
+  }
+
+  &[neighborLocation='left']:has(SValue:focus-visible) SOutline::before {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  &[neighborLocation='right']:has(SValue:focus-visible) SOutline::before {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &[neighborLocation='both']:has(SValue:focus-visible) SOutline::before {
+    border-radius: 0;
+  }
+}

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

@@ -0,0 +1,66 @@
+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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+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 isNode from "@semcore/core/lib/utils/isNode";
+import Notice from "@semcore/notice";
+import React from "react";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./notice.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SHighlightedNotice_xwtcx_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff));border-color:transparent;background-clip:padding-box;position:relative}.___SHighlightedNotice_xwtcx_gg_:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1px;border-radius:inherit;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_xwtcx_gg_ .___SCloseIcon_xwtcx_gg_{color:var(--intergalactic-icon-primary-neutral, #6c6e79)}@media (hover:hover){.___SHighlightedNotice_xwtcx_gg_ .___SCloseIcon_xwtcx_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #565861)}}',
+    /*__inner_css_end__*/
+    "xwtcx_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedNotice": "___SHighlightedNotice_xwtcx_gg_",
+    "__SCloseIcon": "___SCloseIcon_xwtcx_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: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SHighlightedNotice = Notice;
+      var _this$asProps2 = this.asProps, label = _this$asProps2.label, title = _this$asProps2.title, styles = _this$asProps2.styles, actions = _this$asProps2.actions, closable = _this$asProps2.closable, onClose = _this$asProps2.onClose;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedNotice, _ref2.cn("SHighlightedNotice", _objectSpread({}, assignProps({
+        "__excludeProps": ["title"],
+        "use:theme": void 0
+      }, _ref))), 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
+      }));
+    }
+  }]);
+}(Component);
+_defineProperty(NoticeFHRoot, "displayName", "NoticeFH");
+_defineProperty(NoticeFHRoot, "style", style);
+var NoticeFH = createComponent(NoticeFHRoot);
+export {
+  NoticeFH
+};

package/lib/esm/components/notice/notice.shadow.css

@@ -0,0 +1,26 @@
+SHighlightedNotice {
+  background-image: var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff));
+  border-color: transparent;
+  background-clip: padding-box;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    z-index: -1;
+    margin: -1px;
+    border-radius: inherit;
+
+    background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
+  ) border-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box;
+  }
+
+  & SCloseIcon {
+    color: var(--intergalactic-icon-primary-neutral, #6c6e79);
+
+    &:hover {
+      color: var(--intergalactic-icon-primary-neutral-hover-active, #565861);
+    }
+  }
+}