@semcore/feature-highlight 16.0.1-prerelease.0

package/lib/cjs/inner-components/sparkle/Sparkle.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _core = require("@semcore/core");
+var _react = _interopRequireDefault(require("react"));
+/*!__reshadow-styles__:"./style/sparkle.shadow.css"*/
+var styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes sparkles_10q33{50%{transform:rotate(calc(1deg*var(--angle_10q33))) translateY(200%) scale(var(--scale_10q33))}to{transform:rotate(calc(1deg*var(--angle_10q33))) translateY(200%) scale(0)}}.___SSparkle_10q33_gg_{position:absolute}.___SSparkle_10q33_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight, #8649e1)}.___SSparkle_10q33_gg_.__angle_10q33_gg_.__scale_10q33_gg_.__duration_10q33_gg_{transform:rotate(calc(1deg*var(--angle_10q33))) scale(var(--scale_10q33));animation-name:sparkles_10q33;animation-fill-mode:forwards;animation-duration:var(--duration_10q33)}.___SSparkle_10q33_gg_.__left_10q33_gg_{left:var(--left_10q33)}.___SSparkle_10q33_gg_.__top_10q33_gg_{top:var(--top_10q33)}", /*__inner_css_end__*/"10q33_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SSparkle": "___SSparkle_10q33_gg_",
+  "_angle": "__angle_10q33_gg_",
+  "_scale": "__scale_10q33_gg_",
+  "_duration": "__duration_10q33_gg_",
+  "--angle": "--angle_10q33",
+  "--scale": "--scale_10q33",
+  "--duration": "--duration_10q33",
+  "@sparkles": "sparkles_10q33",
+  "_left": "__left_10q33_gg_",
+  "--left": "--left_10q33",
+  "_top": "__top_10q33_gg_",
+  "--top": "--top_10q33"
+});
+function SvgSparkle(props) {
+  var _ref = arguments[0],
+    _ref2;
+  var SSparkle = 'svg';
+  var num = props.num,
+    index = props.index,
+    curve = props.curve,
+    left = props.left;
+  var rand = Math.floor(Math.random() * 50);
+  var angle = 360 / num * index + rand;
+  var sin = Math.sin(Math.PI * angle / 180);
+  var x = curve ? Math.trunc(sin * -1 * curve) : 0;
+  var odd = index % 2;
+  var scale = 1 - odd * 0.3;
+  var animationDuration = "".concat(0.6 - odd * 0.2, "s");
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSparkle, _ref2.cn("SSparkle", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "aria-hidden": true,
+    "use:left": x ? "".concat(x + 14, "px") : left,
+    "scale": scale,
+    "duration": animationDuration,
+    "angle": angle,
+    "width": '10',
+    "height": '10',
+    "viewBox": '0 0 10 10',
+    "fill": 'none',
+    "xmlns": 'http://www.w3.org/2000/svg'
+  }, _ref))), /*#__PURE__*/_react["default"].createElement("path", _ref2.cn("path", {
+    "d": 'M5.371.269a.39.39 0 0 0-.742 0L3.704 3.08a.977.977 0 0 1-.623.623L.27 4.629a.39.39 0 0 0 0 .742l2.812.925a.977.977 0 0 1 .623.623l.925 2.812a.39.39 0 0 0 .742 0l.925-2.812a.977.977 0 0 1 .623-.623l2.812-.925a.39.39 0 0 0 0-.742L6.92 3.704a.977.977 0 0 1-.623-.623L5.371.27Z'
+  })));
+}
+var _default = exports["default"] = (0, _core.createBaseComponent)(SvgSparkle);
+//# sourceMappingURL=Sparkle.js.map

package/lib/cjs/inner-components/sparkle/Sparkle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkle.js","names":["_core","require","_react","_interopRequireDefault","styles","sstyled","insert","SvgSparkle","props","_ref","arguments[0]","_ref2","SSparkle","num","index","curve","left","rand","Math","floor","random","angle","sin","PI","x","trunc","odd","scale","animationDuration","concat","createElement","cn","_objectSpread2","assignProps","_default","exports","createBaseComponent"],"sources":["../../../../src/inner-components/sparkle/Sparkle.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { createBaseComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport styles from './style/sparkle.shadow.css';\n\ntype SparkleProps = {\n  index: number;\n  num: number;\n  curve?: number;\n  top?: string;\n  left?: string;\n};\n\nfunction SvgSparkle(props: SparkleProps) {\n  const SSparkle = Root;\n  const { num, index, curve, left } = props;\n  const rand = Math.floor(Math.random() * 50);\n  const angle = (360 / num) * index + rand;\n  const sin = Math.sin((Math.PI * angle) / 180);\n  const x = curve ? Math.trunc(sin * -1 * curve) : 0;\n  const odd = index % 2;\n  const scale = 1 - odd * 0.3;\n  const animationDuration = `${0.6 - odd * 0.2}s`;\n\n  return sstyled(styles)(\n    <SSparkle\n      aria-hidden={true}\n      render='svg'\n      use:left={x ? `${x + 14}px` : left}\n      scale={scale}\n      duration={animationDuration}\n      angle={angle}\n      width='10'\n      height='10'\n      viewBox='0 0 10 10'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path d='M5.371.269a.39.39 0 0 0-.742 0L3.704 3.08a.977.977 0 0 1-.623.623L.27 4.629a.39.39 0 0 0 0 .742l2.812.925a.977.977 0 0 1 .623.623l.925 2.812a.39.39 0 0 0 .742 0l.925-2.812a.977.977 0 0 1 .623-.623l2.812-.925a.39.39 0 0 0 0-.742L6.92 3.704a.977.977 0 0 1-.623-.623L5.371.27Z' />\n    </SSparkle>,\n  );\n}\n\nexport default createBaseComponent(SvgSparkle) as unknown as Intergalactic.Component<'svg', SparkleProps>;\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B;AAAA,IAAAG,MAAA,8BAAAJ,KAAA,CAAAK,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAY1B,SAASC,UAAUA,CAACC,KAAmB,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACvC,IAAMC,QAAQ,GAaH,KAAK;EAZhB,IAAQC,GAAG,GAAyBL,KAAK,CAAjCK,GAAG;IAAEC,KAAK,GAAkBN,KAAK,CAA5BM,KAAK;IAAEC,KAAK,GAAWP,KAAK,CAArBO,KAAK;IAAEC,IAAI,GAAKR,KAAK,CAAdQ,IAAI;EAC/B,IAAMC,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC;EAC3C,IAAMC,KAAK,GAAI,GAAG,GAAGR,GAAG,GAAIC,KAAK,GAAGG,IAAI;EACxC,IAAMK,GAAG,GAAGJ,IAAI,CAACI,GAAG,CAAEJ,IAAI,CAACK,EAAE,GAAGF,KAAK,GAAI,GAAG,CAAC;EAC7C,IAAMG,CAAC,GAAGT,KAAK,GAAGG,IAAI,CAACO,KAAK,CAACH,GAAG,GAAG,CAAC,CAAC,GAAGP,KAAK,CAAC,GAAG,CAAC;EAClD,IAAMW,GAAG,GAAGZ,KAAK,GAAG,CAAC;EACrB,IAAMa,KAAK,GAAG,CAAC,GAAGD,GAAG,GAAG,GAAG;EAC3B,IAAME,iBAAiB,MAAAC,MAAA,CAAM,GAAG,GAAGH,GAAG,GAAG,GAAG,MAAG;EAE/C,OAAAf,KAAA,GAAO,IAAAN,aAAO,EAACD,MAAM,CAAC,eACpBF,MAAA,YAAA4B,aAAA,CAAClB,QAAQ,EAAAD,KAAA,CAAAoB,EAAA,iBAAAC,cAAA,qBAAAhC,KAAA,CAAAiC,WAAA;IAAA,eACM,IAAI;IAAA,YAEPT,CAAC,MAAAK,MAAA,CAAML,CAAC,GAAG,EAAE,UAAOR,IAAI;IAAA,SAC3BW,KAAK;IAAA,YACFC,iBAAiB;IAAA,SACpBP,KAAK;IAAA,SACN,IAAI;IAAA,UACH,IAAI;IAAA,WACH,WAAW;IAAA,QACd,MAAM;IAAA,SACL;EAA4B,GAAAZ,IAAA,kBAElCP,MAAA,YAAA4B,aAAA,SAAAnB,KAAA,CAAAoB,EAAA;IAAA,KAAQ;EAAmR,EAAE,CACrR,CAAC;AAEf;AAAC,IAAAG,QAAA,GAAAC,OAAA,cAEc,IAAAC,yBAAmB,EAAC7B,UAAU,CAAC","ignoreList":[]}

package/lib/cjs/inner-components/sparkle/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Sparkle", {
+  enumerable: true,
+  get: function get() {
+    return _Sparkle["default"];
+  }
+});
+var _Sparkle = _interopRequireDefault(require("./Sparkle"));
+//# sourceMappingURL=index.js.map

package/lib/cjs/inner-components/sparkle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Sparkle","_interopRequireDefault","require"],"sources":["../../../../src/inner-components/sparkle/index.ts"],"sourcesContent":["import Sparkle from './Sparkle';\n\nexport {\n  Sparkle,\n};\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/lib/cjs/inner-components/sparkle/style/sparkle.shadow.css

@@ -0,0 +1,31 @@
+SSparkle {
+  position: absolute;
+
+  & path {
+    fill: var(--intergalactic-icon-primary-feature-highlight, #8649e1);
+  }
+}
+
+SSparkle[angle][scale][duration] {
+  transform: rotate(calc(1deg * var(--angle))) scale(var(--scale));
+
+  animation-name: sparkles;
+  animation-fill-mode: forwards;
+  animation-duration: var(--duration);
+}
+
+@keyframes sparkles {
+  50% {
+    transform: rotate(calc(1deg * var(--angle))) translateY(200%)
+      scale(var(--scale));
+  }
+  100% {
+    transform: rotate(calc(1deg * var(--angle))) translateY(200%) scale(0);
+  }
+}
+SSparkle[left] {
+  left: var(--left);
+}
+SSparkle[top] {
+  top: var(--top);
+}

package/lib/es6/components/badge/Badge.js

@@ -0,0 +1,41 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+import Badge from '@semcore/badge';
+import { createComponent, Component, Root, sstyled } from '@semcore/core';
+import React from 'react';
+/*!__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 BadgeFHRoot() {
+    _classCallCheck(this, BadgeFHRoot);
+    return _callSuper(this, BadgeFHRoot, arguments);
+  }
+  _inherits(BadgeFHRoot, _Component);
+  return _createClass(BadgeFHRoot, [{
+    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);
+export var BadgeFH = createComponent(BadgeFHRoot);
+//# sourceMappingURL=Badge.js.map

package/lib/es6/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["Badge","createComponent","Component","Root","sstyled","React","style","_sstyled","insert","BadgeFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref2","SHighlightedBadge","styles","createElement","cn","_objectSpread","_assignProps","_defineProperty","BadgeFH"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import Badge from '@semcore/badge';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './badge.shadow.css';\n\nclass BadgeFHRoot extends Component {\n  static displayName = 'BadgeFH';\n  static style = style;\n\n  render() {\n    const SHighlightedBadge = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedBadge render={Badge} />,\n    );\n  }\n}\n\nexport const BadgeFH = createComponent(BadgeFHRoot);\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,gBAAgB;AAClC,SAASC,eAAe,EAAEC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAAE,eAAA,OAAAF,WAAA;IAAA,OAAAG,UAAA,OAAAH,WAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,WAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,WAAA;IAAAO,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAIMtB,KAAK;MAHlC,IAAQuB,MAAM,GAAK,IAAI,CAACH,OAAO,CAAvBG,MAAM;MAEd,OAAAF,KAAA,GAAOjB,OAAO,CAACmB,MAAM,CAAC,eACpBlB,KAAA,CAAAmB,aAAA,CAACF,iBAAiB,EAAAD,KAAA,CAAAI,EAAA,sBAAAC,aAAA,KAAAC,YAAA,KAAAR,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EAXuBjB,SAAS;AAAA0B,eAAA,CAA7BnB,WAAW,iBACM,SAAS;AAAAmB,eAAA,CAD1BnB,WAAW,WAEAH,KAAK;AAYtB,OAAO,IAAMuB,OAAO,GAAG5B,eAAe,CAACQ,WAAW,CAAC","ignoreList":[]}

package/lib/es6/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/es6/components/button/Button.js

@@ -0,0 +1,103 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+import Button from '@semcore/button';
+import { createComponent, Root, sstyled, Component } from '@semcore/core';
+import SummaryAI from '@semcore/icon/SummaryAI/m';
+import React from 'react';
+/*!__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_"
+});
+import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
+var ButtonFHRoot = /*#__PURE__*/function (_Component) {
+  function ButtonFHRoot() {
+    var _this;
+    _classCallCheck(this, ButtonFHRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ButtonFHRoot, [].concat(args));
+    _defineProperty(_this, "state", {
+      clicked: false
+    });
+    return _this;
+  }
+  _inherits(ButtonFHRoot, _Component);
+  return _createClass(ButtonFHRoot, [{
+    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({}, _assignProps2({}, _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
+  }))));
+}
+export var ButtonFH = createComponent(ButtonFHRoot, {
+  Addon: HighlightAddon,
+  Text: Button.Text
+});
+//# sourceMappingURL=Button.js.map

package/lib/es6/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["Button","createComponent","Root","sstyled","Component","SummaryAI","React","style","_sstyled","insert","AnimatedSparkles","ButtonFHRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","clicked","_inherits","_createClass","key","value","handleClick","e","_this2","onClick","asProps","setState","setTimeout","getAddonProps","state","render","_ref","_ref3","styles","SHighlightedButton","createElement","cn","_objectSpread","_assignProps","bind","theme","HighlightAddon","props","_ref2","arguments[0]","_ref4","SAddon","Addon","animatedSparkleCount","Children","hasChildren","children","_assignProps2","Fragment","ButtonFH","Text"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import Button from '@semcore/button';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport type { IRootNodeProps } from '@semcore/core/src/core-types/Component';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './button.shadow.css';\nimport type { HighLightedButtonAddonProps, HighlightedButtonComponent } from './Button.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass ButtonFHRoot extends Component {\n  static displayName = 'ButtonFH';\n  static style = style;\n\n  static defaultProps = {\n    theme: 'highlighted',\n  };\n\n  state = {\n    clicked: false,\n  };\n\n  handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const { onClick } = this.asProps;\n\n    onClick?.(e);\n    this.setState({ clicked: false });\n    setTimeout(() => {\n      this.setState({ clicked: true });\n    });\n  }\n\n  getAddonProps() {\n    return {\n      clicked: this.state.clicked,\n    };\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButton = Root;\n    return sstyled(styles)(\n      <SHighlightedButton render={Button} use:onClick={this.handleClick.bind(this)} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: HighLightedButtonAddonProps & { clicked: boolean } & IRootNodeProps) {\n  const SAddon = Root;\n  const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={Button.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonFH = createComponent(ButtonFHRoot, {\n  Addon: HighlightAddon,\n  Text: Button.Text,\n}) as HighlightedButtonComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/components/button/Button.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.type.js.map

package/lib/es6/components/button/Button.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.type.js","names":[],"sources":["../../../../src/components/button/Button.type.ts"],"sourcesContent":["import type { ButtonAddonProps, ButtonComponent } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\n\nexport type HighLightedButtonAddonProps = ButtonAddonProps & {\n  animatedSparkleCount?: number;\n};\n\nexport type HighlightedButtonComponent = ButtonComponent & {\n  Addon: Intergalactic.Component<'div', HighLightedButtonAddonProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/es6/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/es6/components/checkbox/Checkbox.js

@@ -0,0 +1,81 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+import Checkbox from '@semcore/checkbox';
+import { Component, createComponent, Root, sstyled } from '@semcore/core';
+import React from 'react';
+/*!__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_"
+});
+import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
+var CheckboxFHRoot = /*#__PURE__*/function (_Component) {
+  function CheckboxFHRoot() {
+    var _this;
+    _classCallCheck(this, CheckboxFHRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, CheckboxFHRoot, [].concat(args));
+    _defineProperty(_this, "inputRef", /*#__PURE__*/React.createRef());
+    return _this;
+  }
+  _inherits(CheckboxFHRoot, _Component);
+  return _createClass(CheckboxFHRoot, [{
+    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);
+export var CheckboxFH = createComponent(CheckboxFHRoot, {
+  Text: Checkbox.Text,
+  Value: Checkbox.Value,
+  AnimatedSparkles: AnimatedSparkles
+});
+//# sourceMappingURL=Checkbox.js.map

package/lib/es6/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["Checkbox","Component","createComponent","Root","sstyled","React","style","_sstyled","insert","AnimatedSparkles","CheckboxFHRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","_inherits","_createClass","key","value","getValueProps","_this2","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","_this$inputRef$curren","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","_this$asProps","styles","Children","hasChildren","children","createElement","cn","_objectSpread","_assignProps","Fragment","CheckboxFH","Value","Text"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { CheckboxProps } from '@semcore/checkbox';\nimport Checkbox from '@semcore/checkbox';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './checkbox.shadow.css';\nimport type { HighlightedCheckboxComponent } from './Checkbox.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass CheckboxFHRoot extends Component<CheckboxProps> {\n  static displayName = 'CheckboxFH';\n  static style = style;\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: () => {\n        setTimeout(() => {\n          this.forceUpdate();\n        });\n      },\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    const { size } = this.asProps;\n    const checked = this.inputRef.current?.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  render() {\n    const SHighlightedCheckbox = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedCheckbox render={Checkbox}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <CheckboxFH.Value />\n                <CheckboxFH.Text />\n              </>\n            )}\n      </SHighlightedCheckbox>,\n    );\n  }\n}\n\nexport const CheckboxFH = createComponent(CheckboxFHRoot, {\n  Text: Checkbox.Text,\n  Value: Checkbox.Value,\n  AnimatedSparkles,\n}) as HighlightedCheckboxComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/components/checkbox/Checkbox.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Checkbox.type.js.map

package/lib/es6/components/checkbox/Checkbox.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.type.js","names":[],"sources":["../../../../src/components/checkbox/Checkbox.type.ts"],"sourcesContent":["import type {\n  CheckboxContext,\n  CheckboxProps,\n  CheckboxTextProps,\n  CheckboxValueProps,\n} from '@semcore/checkbox';\nimport type { Intergalactic } from '@semcore/core';\n\nimport type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';\n\nexport type HighlightedCheckboxComponent = Intergalactic.Component<'label', CheckboxProps, CheckboxContext> & {\n  Text: Intergalactic.Component<'span', CheckboxTextProps>;\n  Value: Intergalactic.Component<'input', CheckboxValueProps>;\n  AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/es6/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/es6/components/input/Input.js

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+import { Component, createComponent, Root, sstyled } 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 = (/*__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 InputFHRoot() {
+    _classCallCheck(this, InputFHRoot);
+    return _callSuper(this, InputFHRoot, arguments);
+  }
+  _inherits(InputFHRoot, _Component);
+  return _createClass(InputFHRoot, [{
+    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, _assignProps2({}, _ref2), hasChildren ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(SummaryAI, {
+    color: "--intergalactic-icon-primary-feature-highlight"
+  }));
+}
+export var InputFH = createComponent(InputFHRoot, {
+  Addon: HighlightAddon,
+  Value: Input.Value
+});
+//# sourceMappingURL=Input.js.map

package/lib/es6/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["Component","createComponent","Root","sstyled","SummaryAI","Input","React","style","_sstyled","insert","InputFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref3","SHighlightedInput","styles","createElement","cn","_objectSpread","_assignProps","_defineProperty","HighlightAddon","props","_ref2","arguments[0]","Children","hasChildren","children","Addon","_assignProps2","color","InputFH","Value"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Input from '@semcore/input';\nimport React from 'react';\n\nimport style from './input.shadow.css';\n\nclass InputFHRoot extends Component {\n  static displayName = 'InputFH';\n  static style = style;\n\n  render() {\n    const SHighlightedInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SHighlightedInput render={Input} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n  return (\n    <Root render={Input.Addon}>\n      {hasChildren ? (<Children />) : (<SummaryAI color='--intergalactic-icon-primary-feature-highlight' />)}\n    </Root>\n  );\n}\n\nexport const InputFH = createComponent(InputFHRoot, {\n  Addon: HighlightAddon,\n  Value: Input.Value,\n}) as typeof Input;\n"],"mappings":";;;;;;;;;;;;AACA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAAE,eAAA,OAAAF,WAAA;IAAA,OAAAG,UAAA,OAAAH,WAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,WAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,WAAA;IAAAO,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAEMlB,KAAK;MADlC,OAAAiB,KAAA,GAAOnB,OAAO,CAAC,IAAI,CAACkB,OAAO,CAACG,MAAM,CAAC,eACjClB,KAAA,CAAAmB,aAAA,CAACF,iBAAiB,EAAAD,KAAA,CAAAI,EAAA,sBAAAC,aAAA,KAAAC,YAAA,KAAAR,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EATuBpB,SAAS;AAAA6B,eAAA,CAA7BnB,WAAW,iBACM,SAAS;AAAAmB,eAAA,CAD1BnB,WAAW,WAEAH,KAAK;AAUtB,SAASuB,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,IAAQC,QAAQ,GAA4BH,KAAK,CAAzCG,QAAQ;IAAYC,WAAW,GAAKJ,KAAK,CAA/BK,QAAQ;EAC1B,oBACE9B,KAAA,CAAAmB,aAAA,CAAcpB,KAAK,CAACgC,KAAK,EAAAC,aAAA,KAAAN,KAAA,GACtBG,WAAW,gBAAI7B,KAAA,CAAAmB,aAAA,CAACS,QAAQ,MAAE,CAAC,gBAAK5B,KAAA,CAAAmB,aAAA,CAACrB,SAAS;IAACmC,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;AAEA,OAAO,IAAMC,OAAO,GAAGvC,eAAe,CAACS,WAAW,EAAE;EAClD2B,KAAK,EAAEP,cAAc;EACrBW,KAAK,EAAEpC,KAAK,CAACoC;AACf,CAAC,CAAiB","ignoreList":[]}