@semcore/feature-highlight 16.0.1-prerelease.0

package/lib/cjs/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/cjs/components/notice/Notice.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoticeFH = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var _isNode = _interopRequireDefault(require("@semcore/core/lib/utils/isNode"));
+var _notice = _interopRequireDefault(require("@semcore/notice"));
+var _react = _interopRequireDefault(require("react"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+/*!__reshadow-styles__:"./notice.shadow.css"*/
+var style = (/*__reshadow_css_start__*/_core.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 NoticeFHRoot() {
+    (0, _classCallCheck2["default"])(this, NoticeFHRoot);
+    return _callSuper(this, NoticeFHRoot, arguments);
+  }
+  (0, _inherits2["default"])(NoticeFHRoot, _Component);
+  return (0, _createClass2["default"])(NoticeFHRoot, [{
+    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["default"].createElement(Children, null);
+      if (typeof Children.origin === 'string') {
+        textContent = (0, _isNode["default"])(title) || (0, _isNode["default"])(label) || closable ? /*#__PURE__*/_react["default"].createElement(_notice["default"].Text, null, /*#__PURE__*/_react["default"].createElement(Children, null)) : /*#__PURE__*/_react["default"].createElement(Children, null);
+      }
+      return textContent;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SHighlightedNotice = _notice["default"];
+      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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHighlightedNotice, _ref2.cn("SHighlightedNotice", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "__excludeProps": ['title'],
+        "use:theme": undefined
+      }, _ref))), (0, _isNode["default"])(label) && /*#__PURE__*/_react["default"].createElement(_notice["default"].Label, null, label), /*#__PURE__*/_react["default"].createElement(_notice["default"].Content, null, (0, _isNode["default"])(title) && /*#__PURE__*/_react["default"].createElement(_notice["default"].Title, null, title), this.renderContent(), (0, _isNode["default"])(actions) && /*#__PURE__*/_react["default"].createElement(_notice["default"].Actions, null, actions)), closable && /*#__PURE__*/_react["default"].createElement(_notice["default"].Close, {
+        onClick: onClose
+      }));
+    }
+  }]);
+}(_core.Component);
+(0, _defineProperty2["default"])(NoticeFHRoot, "displayName", 'NoticeFH');
+(0, _defineProperty2["default"])(NoticeFHRoot, "style", style);
+var NoticeFH = exports.NoticeFH = (0, _core.createComponent)(NoticeFHRoot);
+//# sourceMappingURL=Notice.js.map

package/lib/cjs/components/notice/Notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice.js","names":["_core","require","_isNode","_interopRequireDefault","_notice","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","NoticeFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","renderContent","_this$asProps","asProps","Children","label","title","closable","textContent","createElement","origin","isNode","Text","render","_ref","_ref2","SHighlightedNotice","Notice","_this$asProps2","styles","actions","onClose","cn","_objectSpread2","assignProps","undefined","Label","Content","Title","Actions","Close","onClick","Component","_defineProperty2","NoticeFH","exports","createComponent"],"sources":["../../../../src/components/notice/Notice.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport isNode from '@semcore/core/lib/utils/isNode';\nimport type { NoticeSmartProps } from '@semcore/notice';\nimport Notice from '@semcore/notice';\nimport React from 'react';\n\nimport style from './notice.shadow.css';\n\nclass NoticeFHRoot extends Component<NoticeSmartProps> {\n  static displayName = 'NoticeFH';\n  static style = style;\n\n  renderContent() {\n    const { Children, label, title, closable } = this.asProps;\n    let textContent = <Children />;\n\n    if (typeof Children.origin === 'string') {\n      textContent =\n              isNode(title) || isNode(label) || closable\n                ? (\n                    <Notice.Text>\n                      <Children />\n                    </Notice.Text>\n                  )\n                : (\n                    <Children />\n                  );\n    }\n\n    return textContent;\n  }\n\n  render() {\n    const SHighlightedNotice = Root;\n    const { label, title, styles, actions, closable, onClose } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedNotice render={Notice} __excludeProps={['title']} use:theme={undefined}>\n        {isNode(label) && <Notice.Label>{label}</Notice.Label>}\n        <Notice.Content>\n          {isNode(title) && <Notice.Title>{title}</Notice.Title>}\n          {this.renderContent()}\n          {isNode(actions) && <Notice.Actions>{actions}</Notice.Actions>}\n        </Notice.Content>\n        {closable && <Notice.Close onClick={onClose} />}\n      </SHighlightedNotice>,\n    );\n  }\n}\n\nexport const NoticeFH = createComponent(NoticeFHRoot);\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/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);
+    }
+  }
+}

package/lib/cjs/components/pills/Pills.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PillsFH = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
+var _pills = _interopRequireDefault(require("@semcore/pills"));
+var _react = _interopRequireDefault(require("react"));
+var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+/*!__reshadow-styles__:"./pills.shadow.css"*/
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedPill_4manu_gg_{border:1px solid 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;z-index:1}@media (hover:hover){.___SHighlightedPill_4manu_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)\n    ) border-box}}.___SHighlightedPill_4manu_gg_.__selected_4manu_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}.___SHighlightedPill_4manu_gg_:focus-visible{outline:0;position:relative}.___SHighlightedPill_4manu_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}.___SHighlightedPill_4manu_gg_._neighborLocation_left_4manu_gg_:focus-visible::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedPill_4manu_gg_._neighborLocation_right_4manu_gg_:focus-visible::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedPill_4manu_gg_._neighborLocation_both_4manu_gg_:focus-visible::before{border-radius:0}", /*__inner_css_end__*/"4manu_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SHighlightedPill": "___SHighlightedPill_4manu_gg_",
+  "_selected": "__selected_4manu_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_4manu_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_4manu_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_4manu_gg_"
+});
+var PillsFHRoot = /*#__PURE__*/function (_Component) {
+  function PillsFHRoot() {
+    (0, _classCallCheck2["default"])(this, PillsFHRoot);
+    return _callSuper(this, PillsFHRoot, arguments);
+  }
+  (0, _inherits2["default"])(PillsFHRoot, _Component);
+  return (0, _createClass2["default"])(PillsFHRoot, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      return /*#__PURE__*/_react["default"].createElement(_pills["default"], (0, _core.assignProps)({}, _ref));
+    }
+  }]);
+}(_core.Component);
+(0, _defineProperty2["default"])(PillsFHRoot, "displayName", 'PillsFH');
+(0, _defineProperty2["default"])(PillsFHRoot, "style", style);
+var HighlightedItemRoot = /*#__PURE__*/function (_Component2) {
+  function HighlightedItemRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, HighlightedItemRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, HighlightedItemRoot, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "state", {
+      clicked: false
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(HighlightedItemRoot, _Component2);
+  return (0, _createClass2["default"])(HighlightedItemRoot, [{
+    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 _ref2 = this.asProps,
+        _ref3;
+      var SHighlightedPill = _pills["default"].Item;
+      return _ref3 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SHighlightedPill, _ref3.cn("SHighlightedPill", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "onClick": this.handleClick.bind(this)
+      }, _ref2))));
+    }
+  }]);
+}(_core.Component);
+(0, _defineProperty2["default"])(HighlightedItemRoot, "displayName", 'HighlightedItem');
+(0, _defineProperty2["default"])(HighlightedItemRoot, "style", style);
+function HighlightedItemAddon(props) {
+  var clicked = props.clicked,
+    animatedSparkleCount = props.animatedSparkleCount,
+    Children = props.Children,
+    hasChildren = props.children;
+  return /*#__PURE__*/_react["default"].createElement(_pills["default"].Item.Addon, null, hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, null) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_m["default"], {
+    color: "--intergalactic-icon-primary-feature-highlight"
+  }), /*#__PURE__*/_react["default"].createElement(_AnimatedSparkles.AnimatedSparkles, {
+    show: clicked,
+    count: animatedSparkleCount
+  })));
+}
+var PillsFH = exports.PillsFH = (0, _core.createComponent)(PillsFHRoot, {
+  Item: _pills["default"].Item,
+  HighlightedItem: (0, _core.createComponent)(HighlightedItemRoot, {
+    Text: _pills["default"].Item.Text,
+    Addon: HighlightedItemAddon
+  })
+});
+//# sourceMappingURL=Pills.js.map

package/lib/cjs/components/pills/Pills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pills.js","names":["_core","require","_m","_interopRequireDefault","_pills","_react","_AnimatedSparkles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","PillsFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","createElement","Pills","assignProps","Component","_defineProperty2","HighlightedItemRoot","_Component2","_this","_len","length","args","Array","_key","concat","clicked","handleClick","_this2","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref3","SHighlightedPill","Item","styles","cn","_objectSpread2","bind","HighlightedItemAddon","props","animatedSparkleCount","Children","hasChildren","children","Addon","Fragment","color","AnimatedSparkles","show","count","PillsFH","exports","createComponent","HighlightedItem","Text"],"sources":["../../../../src/components/pills/Pills.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Pills from '@semcore/pills';\nimport React from 'react';\n\nimport style from './pills.shadow.css';\nimport type { HighlightedItemAddonProps, HighlightedPillComponent } from './Pills.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass PillsFHRoot extends Component {\n  static displayName = 'PillsFH';\n  static style = style;\n\n  render() {\n    return (<Root render={Pills} />);\n  }\n}\n\nclass HighlightedItemRoot extends Component {\n  static displayName = 'HighlightedItem';\n  static style = style;\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 SHighlightedPill = Root;\n\n    return sstyled(this.asProps.styles)(<SHighlightedPill render={Pills.Item} onClick={this.handleClick.bind(this)} />);\n  }\n}\n\nfunction HighlightedItemAddon(props: HighlightedItemAddonProps & { clicked: boolean } & IRootComponentProps) {\n  const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n  return (\n    <Pills.Item.Addon>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Pills.Item.Addon>\n  );\n}\n\nexport const PillsFH = createComponent(PillsFHRoot, {\n  Item: Pills.Item,\n  HighlightedItem: createComponent(HighlightedItemRoot, { Text: Pills.Item.Text, Addon: HighlightedItemAddon }),\n}) as HighlightedPillComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/pills/Pills.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Pills.type.js.map

package/lib/cjs/components/pills/Pills.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pills.type.js","names":[],"sources":["../../../../src/components/pills/Pills.type.ts"],"sourcesContent":["import type { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type Pills from '@semcore/pills';\nimport type { PillProps } from '@semcore/pills';\n\nexport type HighlightedItemAddonProps = {\n  animatedSparkleCount?: number;\n};\n\nexport type HighlightedPillComponent = typeof Pills & {\n  HighlightedItem: Intergalactic.Component<'div', PillProps> & {\n    Text: typeof Box;\n    Addon: Intergalactic.Component<'div', HighlightedItemAddonProps>;\n  };\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/pills/pills.shadow.css

@@ -0,0 +1,57 @@
+SHighlightedPill {
+  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;
+
+  &: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;
+  }
+  &[selected] {
+    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;
+  }
+}
+
+SHighlightedPill: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/cjs/components/radio/Radio.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioFH = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var _radio = _interopRequireWildcard(require("@semcore/radio"));
+var _react = _interopRequireDefault(require("react"));
+var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+/*!__reshadow-styles__:"./radio.shadow.css"*/
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedRadio_ts8qi_gg_{position:relative}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{box-shadow:none;border-color:transparent;content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:1px;opacity:1;border-width: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}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.RadioMark\"]::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}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]+[data-ui-name=\"Value.RadioMark\"]::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}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:not(:focus-visible)+[data-ui-name=\"Value.RadioMark\"]::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__*/"ts8qi_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SHighlightedRadio": "___SHighlightedRadio_ts8qi_gg_",
+  "_state_invalid": "_state_invalid_ts8qi_gg_"
+});
+var RadioFHRoot = /*#__PURE__*/function (_Component) {
+  function RadioFHRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, RadioFHRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, RadioFHRoot, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "inputRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "state", {
+      checked: false
+    });
+    (0, _defineProperty2["default"])(_this, "setChecked", function () {
+      _this.setState({
+        checked: false
+      });
+      setTimeout(function () {
+        var _this$inputRef$curren;
+        _this.setState({
+          checked: (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked
+        });
+      });
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(RadioFHRoot, _Component);
+  return (0, _createClass2["default"])(RadioFHRoot, [{
+    key: "getValueProps",
+    value: function getValueProps() {
+      return {
+        ref: this.inputRef,
+        onChange: this.setChecked,
+        // for click by label / programmatically changed
+        onClick: this.setChecked // for click by radio
+      };
+    }
+  }, {
+    key: "getAnimatedSparklesProps",
+    value: function getAnimatedSparklesProps() {
+      // @ts-ignore
+      var size = this.context.size;
+      var checked = this.state.checked;
+      return {
+        show: checked,
+        top: size === 'l' ? '7px' : '5px',
+        left: size === 'l' ? '5px' : '3px'
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SHighlightedRadio = _radio["default"];
+      var _this$asProps = this.asProps,
+        styles = _this$asProps.styles,
+        Children = _this$asProps.Children,
+        hasChildren = _this$asProps.children;
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHighlightedRadio, _ref2.cn("SHighlightedRadio", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RadioFH.Value, null), /*#__PURE__*/_react["default"].createElement(RadioFH.Text, null)));
+    }
+  }]);
+}(_core.Component);
+(0, _defineProperty2["default"])(RadioFHRoot, "displayName", 'RadioFH');
+(0, _defineProperty2["default"])(RadioFHRoot, "style", style);
+// @ts-ignore
+(0, _defineProperty2["default"])(RadioFHRoot, "contextType", _radio.RadioGroup[_core.CONTEXT_COMPONENT]);
+var RadioFH = exports.RadioFH = (0, _core.createComponent)(RadioFHRoot, {
+  Text: _radio["default"].Text,
+  Value: _radio["default"].Value,
+  AnimatedSparkles: _AnimatedSparkles.AnimatedSparkles
+});
+//# sourceMappingURL=Radio.js.map

package/lib/cjs/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["_core","require","_radio","_interopRequireWildcard","_react","_interopRequireDefault","_AnimatedSparkles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","RadioFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","React","createRef","checked","setState","setTimeout","_this$inputRef$curren","inputRef","current","_inherits2","_createClass2","key","value","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","Radio","_this$asProps","styles","Children","hasChildren","children","createElement","cn","_objectSpread2","assignProps","Fragment","RadioFH","Value","Text","Component","RadioGroup","CONTEXT_COMPONENT","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@semcore/core';\nimport type { RadioProps } from '@semcore/radio';\nimport Radio, { RadioGroup } from '@semcore/radio';\nimport React from 'react';\n\nimport style from './radio.shadow.css';\nimport type { HighlightedRadioComponent } from './Radio.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass RadioFHRoot extends Component<RadioProps> {\n  static displayName = 'RadioFH';\n  static style = style;\n  // @ts-ignore\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  state = {\n    checked: false,\n  };\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: this.setChecked, // for click by label / programmatically changed\n      onClick: this.setChecked, // for click by radio\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    // @ts-ignore\n    const { size } = this.context;\n    const checked = this.state.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  setChecked = () => {\n    this.setState({ checked: false });\n    setTimeout(() => {\n      this.setState({ checked: this.inputRef.current?.checked });\n    });\n  };\n\n  render() {\n    const SHighlightedRadio = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedRadio render={Radio}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <RadioFH.Value />\n                <RadioFH.Text />\n              </>\n            )}\n      </SHighlightedRadio>,\n    );\n  }\n}\n\nexport const RadioFH = createComponent(RadioFHRoot, {\n  Text: Radio.Text,\n  Value: Radio.Value,\n  AnimatedSparkles,\n}) as HighlightedRadioComponent;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAIA,IAAAK,iBAAA,GAAAL,OAAA;AAAmF,SAAAM,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,MAAAK,0BAAA,iBAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA;AAAA,IAAAQ,KAAA,8BAAAlB,KAAA,CAAAmB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAAA,IAE7EC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,KAAA;IAAA,IAAAC,gBAAA,mBAAAH,WAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAhB,UAAA,OAAAc,WAAA,KAAAU,MAAA,CAAAH,IAAA;IAAA,IAAAI,gBAAA,aAAAT,KAAA,2BAMJU,iBAAK,CAACC,SAAS,CAAmB,CAAC;IAAA,IAAAF,gBAAA,aAAAT,KAAA,WAEtC;MACNY,OAAO,EAAE;IACX,CAAC;IAAA,IAAAH,gBAAA,aAAAT,KAAA,gBAsBY,YAAM;MACjBA,KAAA,CAAKa,QAAQ,CAAC;QAAED,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCE,UAAU,CAAC,YAAM;QAAA,IAAAC,qBAAA;QACff,KAAA,CAAKa,QAAQ,CAAC;UAAED,OAAO,GAAAG,qBAAA,GAAEf,KAAA,CAAKgB,QAAQ,CAACC,OAAO,cAAAF,qBAAA,uBAArBA,qBAAA,CAAuBH;QAAQ,CAAC,CAAC;MAC5D,CAAC,CAAC;IACJ,CAAC;IAAA,OAAAZ,KAAA;EAAA;EAAA,IAAAkB,UAAA,aAAApB,WAAA,EAAAC,UAAA;EAAA,WAAAoB,aAAA,aAAArB,WAAA;IAAAsB,GAAA;IAAAC,KAAA,EAzBD,SAAAC,aAAaA,CAAA,EAAG;MACd,OAAO;QACLC,GAAG,EAAE,IAAI,CAACP,QAAQ;QAClBQ,QAAQ,EAAE,IAAI,CAACC,UAAU;QAAE;QAC3BC,OAAO,EAAE,IAAI,CAACD,UAAU,CAAE;MAC5B,CAAC;IACH;EAAC;IAAAL,GAAA;IAAAC,KAAA,EAED,SAAAM,wBAAwBA,CAAA,EAAG;MACzB;MACA,IAAQC,IAAI,GAAK,IAAI,CAACC,OAAO,CAArBD,IAAI;MACZ,IAAMhB,OAAO,GAAG,IAAI,CAACkB,KAAK,CAAClB,OAAO;MAElC,OAAO;QACLmB,IAAI,EAAEnB,OAAO;QACboB,GAAG,EAAEJ,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;QACjCK,IAAI,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;MAC/B,CAAC;IACH;EAAC;IAAAR,GAAA;IAAAC,KAAA,EASD,SAAAa,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAIMC,iBAAK;MAHlC,IAAAC,aAAA,GAAoD,IAAI,CAACJ,OAAO;QAAxDK,MAAM,GAAAD,aAAA,CAANC,MAAM;QAAEC,QAAQ,GAAAF,aAAA,CAARE,QAAQ;QAAYC,WAAW,GAAAH,aAAA,CAArBI,QAAQ;MAElC,OAAAP,KAAA,GAAO,IAAAzC,aAAO,EAAC6C,MAAM,CAAC,eACpB5D,MAAA,YAAAgE,aAAA,CAACP,iBAAiB,EAAAD,KAAA,CAAAS,EAAA,0BAAAC,cAAA,qBAAAtE,KAAA,CAAAuE,WAAA,MAAAb,IAAA,KACfQ,WAAW,gBACR9D,MAAA,YAAAgE,aAAA,CAACH,QAAQ,EAAAL,KAAA,CAAAS,EAAA,gBAAE,CAAC,gBAEVjE,MAAA,YAAAgE,aAAA,CAAAhE,MAAA,YAAAoE,QAAA,qBACEpE,MAAA,YAAAgE,aAAA,CAACK,OAAO,CAACC,KAAK,MAAE,CAAC,eACjBtE,MAAA,YAAAgE,aAAA,CAACK,OAAO,CAACE,IAAI,MAAE,CACf,CAES,CAAC;IAExB;EAAC;AAAA,EAvDuBC,eAAS;AAAA,IAAA5C,gBAAA,aAA7BX,WAAW,iBACM,SAAS;AAAA,IAAAW,gBAAA,aAD1BX,WAAW,WAEAH,KAAK;AACpB;AAAA,IAAAc,gBAAA,aAHIX,WAAW,iBAIMwD,iBAAU,CAACC,uBAAiB,CAAC;AAsD7C,IAAML,OAAO,GAAAM,OAAA,CAAAN,OAAA,GAAG,IAAAO,qBAAe,EAAC3D,WAAW,EAAE;EAClDsD,IAAI,EAAEb,iBAAK,CAACa,IAAI;EAChBD,KAAK,EAAEZ,iBAAK,CAACY,KAAK;EAClBO,gBAAgB,EAAhBA;AACF,CAAC,CAA8B","ignoreList":[]}

package/lib/cjs/components/radio/Radio.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Radio.type.js.map

package/lib/cjs/components/radio/Radio.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.type.js","names":[],"sources":["../../../../src/components/radio/Radio.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type { RadioCtx, RadioProps, RadioValueProps } from '@semcore/radio';\nimport type { Text } from '@semcore/typography';\n\nimport type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';\n\nexport type HighlightedRadioComponent = Intergalactic.Component<'label', RadioProps, RadioCtx> & {\n  Value: Intergalactic.Component<'input', RadioValueProps>;\n  Text: typeof Text;\n  AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/radio/radio.shadow.css

@@ -0,0 +1,43 @@
+SHighlightedRadio {
+  position: relative;
+}
+
+SHighlightedRadio:not([state="invalid"]) {
+  input[data-ui-name="RadioFH.Value"]:focus-visible + [data-ui-name="Value.RadioMark"]::before {
+    box-shadow: none;
+    border-color: transparent;
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    margin: -3px;
+    padding: 1px;
+    opacity: 1;
+    border-width: 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="RadioFH.Value"]:checked:focus-visible + [data-ui-name="Value.RadioMark"]::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;
+  }
+
+  input[data-ui-name="RadioFH.Value"] + [data-ui-name="Value.RadioMark"]::before {
+    /*SValue[state='normal']::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="RadioFH.Value"]:checked:not(:focus-visible) + [data-ui-name="Value.RadioMark"]::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/cjs/components/select/Select.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectFH = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var _select = _interopRequireDefault(require("@semcore/select"));
+var _react = _interopRequireDefault(require("react"));
+var _ButtonTrigger = require("../../inner-components/button-trigger/ButtonTrigger");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+var SelectFHRoot = /*#__PURE__*/function (_Component) {
+  function SelectFHRoot() {
+    (0, _classCallCheck2["default"])(this, SelectFHRoot);
+    return _callSuper(this, SelectFHRoot, arguments);
+  }
+  (0, _inherits2["default"])(SelectFHRoot, _Component);
+  return (0, _createClass2["default"])(SelectFHRoot, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      return /*#__PURE__*/_react["default"].createElement(_select["default"], (0, _core.assignProps)({}, _ref));
+    }
+  }]);
+}(_core.Component);
+(0, _defineProperty2["default"])(SelectFHRoot, "displayName", 'SelectFH');
+function Trigger(props) {
+  var _ref2 = arguments[0];
+  var Children = props.Children,
+    hasChildren = props.children;
+  return /*#__PURE__*/_react["default"].createElement(_select["default"].Trigger, (0, _core.assignProps)({
+    "tag": _ButtonTrigger.ButtonTriggerFH
+  }, _ref2), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, null) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SelectFH.Trigger.Addon, null), /*#__PURE__*/_react["default"].createElement(SelectFH.Trigger.Text, null)));
+}
+var SelectFH = exports.SelectFH = (0, _core.createComponent)(SelectFHRoot, {
+  Trigger: [Trigger, {
+    Text: _ButtonTrigger.ButtonTriggerFH.Text,
+    Addon: _ButtonTrigger.ButtonTriggerFH.Addon
+  }],
+  Popper: _select["default"].Popper,
+  Menu: _select["default"].Menu,
+  Option: _select["default"].Option,
+  List: _select["default"].List
+});
+//# sourceMappingURL=Select.js.map

package/lib/cjs/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["_core","require","_select","_interopRequireDefault","_react","_ButtonTrigger","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","SelectFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","createElement","Select","assignProps","Component","_defineProperty2","Trigger","props","_ref2","arguments[0]","Children","hasChildren","children","ButtonTriggerFH","Fragment","SelectFH","Addon","Text","exports","createComponent","Popper","Menu","Option","List"],"sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component } from '@semcore/core';\nimport Select from '@semcore/select';\nimport React from 'react';\n\nimport { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';\n\nclass SelectFHRoot extends Component {\n  static displayName = 'SelectFH';\n\n  render() {\n    return (\n      <Root render={Select} />\n    );\n  }\n}\n\nfunction Trigger(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n\n  return (\n    <Root render={Select.Trigger} tag={ButtonTriggerFH}>\n      {hasChildren\n        ? <Children />\n        : (\n            <>\n              <SelectFH.Trigger.Addon />\n              <SelectFH.Trigger.Text />\n            </>\n          )}\n    </Root>\n  );\n}\n\nexport const SelectFH = createComponent(SelectFHRoot, {\n  Trigger: [Trigger, {\n    Text: ButtonTriggerFH.Text,\n    Addon: ButtonTriggerFH.Addon,\n  }],\n  Popper: Select.Popper,\n  Menu: Select.Menu,\n  Option: Select.Option,\n  List: Select.List,\n}) as typeof Select;\n"],"mappings":";;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAAsF,SAAAK,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,MAAAK,0BAAA,iBAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,IAEhFQ,YAAY,0BAAAC,UAAA;EAAA,SAAAD,aAAA;IAAA,IAAAE,gBAAA,mBAAAF,YAAA;IAAA,OAAAX,UAAA,OAAAW,YAAA,EAAAG,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAJ,YAAA,EAAAC,UAAA;EAAA,WAAAI,aAAA,aAAAL,YAAA;IAAAM,GAAA;IAAAC,KAAA,EAGhB,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;MACP,oBACEvB,MAAA,YAAAwB,aAAA,CAAcC,kBAAM,MAAA7B,KAAA,CAAA8B,WAAA,MAAAJ,IAAA,CAAG,CAAC;IAE5B;EAAC;AAAA,EAPwBK,eAAS;AAAA,IAAAC,gBAAA,aAA9Bf,YAAY,iBACK,UAAU;AASjC,SAASgB,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,IAAQC,QAAQ,GAA4BH,KAAK,CAAzCG,QAAQ;IAAYC,WAAW,GAAKJ,KAAK,CAA/BK,QAAQ;EAE1B,oBACEnC,MAAA,YAAAwB,aAAA,CAAcC,kBAAM,CAACI,OAAO,MAAAjC,KAAA,CAAA8B,WAAA;IAAA,OAAOU;EAAe,GAAAL,KAAA,GAC/CG,WAAW,gBACRlC,MAAA,YAAAwB,aAAA,CAACS,QAAQ,MAAE,CAAC,gBAEVjC,MAAA,YAAAwB,aAAA,CAAAxB,MAAA,YAAAqC,QAAA,qBACErC,MAAA,YAAAwB,aAAA,CAACc,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1BvC,MAAA,YAAAwB,aAAA,CAACc,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;AAEO,IAAMF,QAAQ,GAAAG,OAAA,CAAAH,QAAA,GAAG,IAAAI,qBAAe,EAAC7B,YAAY,EAAE;EACpDgB,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAEJ,8BAAe,CAACI,IAAI;IAC1BD,KAAK,EAAEH,8BAAe,CAACG;EACzB,CAAC,CAAC;EACFI,MAAM,EAAElB,kBAAM,CAACkB,MAAM;EACrBC,IAAI,EAAEnB,kBAAM,CAACmB,IAAI;EACjBC,MAAM,EAAEpB,kBAAM,CAACoB,MAAM;EACrBC,IAAI,EAAErB,kBAAM,CAACqB;AACf,CAAC,CAAkB","ignoreList":[]}