@semcore/feature-highlight 16.0.1-prerelease.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/LICENSE +21 -0
- package/README.md +39 -0
- package/lib/cjs/components/badge/Badge.js +46 -0
- package/lib/cjs/components/badge/Badge.js.map +1 -0
- package/lib/cjs/components/badge/badge.shadow.css +14 -0
- package/lib/cjs/components/button/Button.js +107 -0
- package/lib/cjs/components/button/Button.js.map +1 -0
- package/lib/cjs/components/button/Button.type.js +2 -0
- package/lib/cjs/components/button/Button.type.js.map +1 -0
- package/lib/cjs/components/button/button.shadow.css +76 -0
- package/lib/cjs/components/checkbox/Checkbox.js +86 -0
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -0
- package/lib/cjs/components/checkbox/Checkbox.type.js +2 -0
- package/lib/cjs/components/checkbox/Checkbox.type.js.map +1 -0
- package/lib/cjs/components/checkbox/checkbox.shadow.css +38 -0
- package/lib/cjs/components/input/Input.js +63 -0
- package/lib/cjs/components/input/Input.js.map +1 -0
- package/lib/cjs/components/input/input.shadow.css +41 -0
- package/lib/cjs/components/notice/Notice.js +73 -0
- package/lib/cjs/components/notice/Notice.js.map +1 -0
- package/lib/cjs/components/notice/notice.shadow.css +26 -0
- package/lib/cjs/components/pills/Pills.js +117 -0
- package/lib/cjs/components/pills/Pills.js.map +1 -0
- package/lib/cjs/components/pills/Pills.type.js +2 -0
- package/lib/cjs/components/pills/Pills.type.js.map +1 -0
- package/lib/cjs/components/pills/pills.shadow.css +57 -0
- package/lib/cjs/components/radio/Radio.js +100 -0
- package/lib/cjs/components/radio/Radio.js.map +1 -0
- package/lib/cjs/components/radio/Radio.type.js +2 -0
- package/lib/cjs/components/radio/Radio.type.js.map +1 -0
- package/lib/cjs/components/radio/radio.shadow.css +43 -0
- package/lib/cjs/components/select/Select.js +53 -0
- package/lib/cjs/components/select/Select.js.map +1 -0
- package/lib/cjs/components/switch/Switch.js +94 -0
- package/lib/cjs/components/switch/Switch.js.map +1 -0
- package/lib/cjs/components/switch/Switch.type.js +2 -0
- package/lib/cjs/components/switch/Switch.type.js.map +1 -0
- package/lib/cjs/components/switch/switch.shadow.css +22 -0
- package/lib/cjs/components/tab-line/TabLine.js +119 -0
- package/lib/cjs/components/tab-line/TabLine.js.map +1 -0
- package/lib/cjs/components/tab-line/TabLine.type.js +2 -0
- package/lib/cjs/components/tab-line/TabLine.type.js.map +1 -0
- package/lib/cjs/components/tab-line/tabLine.shadow.css +25 -0
- package/lib/cjs/index.js +116 -0
- package/lib/cjs/index.js.map +1 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js +66 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js.map +1 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.type.js +2 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.type.js.map +1 -0
- package/lib/cjs/inner-components/button-trigger/buttonTrigger.shadow.css +57 -0
- package/lib/cjs/inner-components/sparkle/AnimatedSparkles.js +28 -0
- package/lib/cjs/inner-components/sparkle/AnimatedSparkles.js.map +1 -0
- package/lib/cjs/inner-components/sparkle/Sparkle.js +59 -0
- package/lib/cjs/inner-components/sparkle/Sparkle.js.map +1 -0
- package/lib/cjs/inner-components/sparkle/index.js +14 -0
- package/lib/cjs/inner-components/sparkle/index.js.map +1 -0
- package/lib/cjs/inner-components/sparkle/style/sparkle.shadow.css +31 -0
- package/lib/es6/components/badge/Badge.js +41 -0
- package/lib/es6/components/badge/Badge.js.map +1 -0
- package/lib/es6/components/badge/badge.shadow.css +14 -0
- package/lib/es6/components/button/Button.js +103 -0
- package/lib/es6/components/button/Button.js.map +1 -0
- package/lib/es6/components/button/Button.type.js +2 -0
- package/lib/es6/components/button/Button.type.js.map +1 -0
- package/lib/es6/components/button/button.shadow.css +76 -0
- package/lib/es6/components/checkbox/Checkbox.js +81 -0
- package/lib/es6/components/checkbox/Checkbox.js.map +1 -0
- package/lib/es6/components/checkbox/Checkbox.type.js +2 -0
- package/lib/es6/components/checkbox/Checkbox.type.js.map +1 -0
- package/lib/es6/components/checkbox/checkbox.shadow.css +38 -0
- package/lib/es6/components/input/Input.js +59 -0
- package/lib/es6/components/input/Input.js.map +1 -0
- package/lib/es6/components/input/input.shadow.css +41 -0
- package/lib/es6/components/notice/Notice.js +68 -0
- package/lib/es6/components/notice/Notice.js.map +1 -0
- package/lib/es6/components/notice/notice.shadow.css +26 -0
- package/lib/es6/components/pills/Pills.js +113 -0
- package/lib/es6/components/pills/Pills.js.map +1 -0
- package/lib/es6/components/pills/Pills.type.js +2 -0
- package/lib/es6/components/pills/Pills.type.js.map +1 -0
- package/lib/es6/components/pills/pills.shadow.css +57 -0
- package/lib/es6/components/radio/Radio.js +94 -0
- package/lib/es6/components/radio/Radio.js.map +1 -0
- package/lib/es6/components/radio/Radio.type.js +2 -0
- package/lib/es6/components/radio/Radio.type.js.map +1 -0
- package/lib/es6/components/radio/radio.shadow.css +43 -0
- package/lib/es6/components/select/Select.js +48 -0
- package/lib/es6/components/select/Select.js.map +1 -0
- package/lib/es6/components/switch/Switch.js +90 -0
- package/lib/es6/components/switch/Switch.js.map +1 -0
- package/lib/es6/components/switch/Switch.type.js +2 -0
- package/lib/es6/components/switch/Switch.type.js.map +1 -0
- package/lib/es6/components/switch/switch.shadow.css +22 -0
- package/lib/es6/components/tab-line/TabLine.js +116 -0
- package/lib/es6/components/tab-line/TabLine.js.map +1 -0
- package/lib/es6/components/tab-line/TabLine.type.js +2 -0
- package/lib/es6/components/tab-line/TabLine.type.js.map +1 -0
- package/lib/es6/components/tab-line/tabLine.shadow.css +25 -0
- package/lib/es6/index.js +11 -0
- package/lib/es6/index.js.map +1 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js +62 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js.map +1 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.type.js +2 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.type.js.map +1 -0
- package/lib/es6/inner-components/button-trigger/buttonTrigger.shadow.css +57 -0
- package/lib/es6/inner-components/sparkle/AnimatedSparkles.js +21 -0
- package/lib/es6/inner-components/sparkle/AnimatedSparkles.js.map +1 -0
- package/lib/es6/inner-components/sparkle/Sparkle.js +54 -0
- package/lib/es6/inner-components/sparkle/Sparkle.js.map +1 -0
- package/lib/es6/inner-components/sparkle/index.js +3 -0
- package/lib/es6/inner-components/sparkle/index.js.map +1 -0
- package/lib/es6/inner-components/sparkle/style/sparkle.shadow.css +31 -0
- package/lib/esm/components/badge/Badge.mjs +49 -0
- package/lib/esm/components/badge/badge.shadow.css +14 -0
- package/lib/esm/components/button/Button.mjs +106 -0
- package/lib/esm/components/button/button.shadow.css +76 -0
- package/lib/esm/components/checkbox/Checkbox.mjs +86 -0
- package/lib/esm/components/checkbox/checkbox.shadow.css +38 -0
- package/lib/esm/components/input/Input.mjs +65 -0
- package/lib/esm/components/input/input.shadow.css +41 -0
- package/lib/esm/components/notice/Notice.mjs +66 -0
- package/lib/esm/components/notice/notice.shadow.css +26 -0
- package/lib/esm/components/pills/Pills.mjs +117 -0
- package/lib/esm/components/pills/pills.shadow.css +57 -0
- package/lib/esm/components/radio/Radio.mjs +98 -0
- package/lib/esm/components/radio/radio.shadow.css +43 -0
- package/lib/esm/components/select/Select.mjs +49 -0
- package/lib/esm/components/switch/Switch.mjs +96 -0
- package/lib/esm/components/switch/switch.shadow.css +22 -0
- package/lib/esm/components/tab-line/TabLine.mjs +119 -0
- package/lib/esm/components/tab-line/tabLine.shadow.css +25 -0
- package/lib/esm/index.mjs +22 -0
- package/lib/esm/inner-components/button-trigger/ButtonTrigger.mjs +67 -0
- package/lib/esm/inner-components/button-trigger/buttonTrigger.shadow.css +57 -0
- package/lib/esm/inner-components/sparkle/AnimatedSparkles.mjs +19 -0
- package/lib/esm/inner-components/sparkle/Sparkle.mjs +57 -0
- package/lib/esm/inner-components/sparkle/style/sparkle.shadow.css +31 -0
- package/lib/types/components/badge/Badge.d.ts +3 -0
- package/lib/types/components/button/Button.d.ts +2 -0
- package/lib/types/components/button/Button.type.d.ts +8 -0
- package/lib/types/components/checkbox/Checkbox.d.ts +2 -0
- package/lib/types/components/checkbox/Checkbox.type.d.ts +8 -0
- package/lib/types/components/input/Input.d.ts +2 -0
- package/lib/types/components/notice/Notice.d.ts +3 -0
- package/lib/types/components/pills/Pills.d.ts +2 -0
- package/lib/types/components/pills/Pills.type.d.ts +13 -0
- package/lib/types/components/radio/Radio.d.ts +2 -0
- package/lib/types/components/radio/Radio.type.d.ts +9 -0
- package/lib/types/components/select/Select.d.ts +2 -0
- package/lib/types/components/switch/Switch.d.ts +2 -0
- package/lib/types/components/switch/Switch.type.d.ts +6 -0
- package/lib/types/components/tab-line/TabLine.d.ts +2 -0
- package/lib/types/components/tab-line/TabLine.type.d.ts +9 -0
- package/lib/types/index.d.ts +10 -0
- package/lib/types/inner-components/button-trigger/ButtonTrigger.d.ts +2 -0
- package/lib/types/inner-components/button-trigger/ButtonTrigger.type.d.ts +7 -0
- package/lib/types/inner-components/sparkle/AnimatedSparkles.d.ts +10 -0
- package/lib/types/inner-components/sparkle/Sparkle.d.ts +10 -0
- package/lib/types/inner-components/sparkle/index.d.ts +2 -0
- package/package.json +47 -0
- package/vite.config.ts +33 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
|
+
|
|
5
|
+
## [16.0.1] - 2025-07-04
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/base-trigger` [16.2.2 ~> 16.2.3], `@semcore/button` [16.0.3 ~> 16.0.4], `@semcore/checkbox` [16.0.3 ~> 16.0.4], `@semcore/base-components` [16.1.0 ~> 16.1.1]).
|
|
10
|
+
|
|
11
|
+
## [16.0.0] - 2025-07-04
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Feature highlight implementation.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright ©, 2022, Semrush Inc. (written by Roman Lysov, Sergey Kobets, Mikhail Karachev, Julia Mnizhek, Elena Krasnopolskaia, Mikhail Sereniti).
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# @semcore/feature-highlight
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/feature-highlight)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/feature-highlight)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic Design System
|
|
8
|
+
|
|
9
|
+
[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/core/)'
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/feature-highlight
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## 👤 Author
|
|
22
|
+
|
|
23
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
|
|
24
|
+
and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
25
|
+
|
|
26
|
+
## 🤝 Contributing
|
|
27
|
+
|
|
28
|
+
Contributions, issues and feature requests are welcome!
|
|
29
|
+
|
|
30
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
|
|
31
|
+
the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
32
|
+
|
|
33
|
+
## Show your support
|
|
34
|
+
|
|
35
|
+
Give a ⭐️ if this project helped you!
|
|
36
|
+
|
|
37
|
+
## 📝 License
|
|
38
|
+
|
|
39
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.BadgeFH = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
+
var _core = require("@semcore/core");
|
|
17
|
+
var _badge = _interopRequireDefault(require("@semcore/badge"));
|
|
18
|
+
var _react = _interopRequireDefault(require("react"));
|
|
19
|
+
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)); }
|
|
20
|
+
/*!__reshadow-styles__:"./badge.shadow.css"*/
|
|
21
|
+
var style = (/*__reshadow_css_start__*/_core.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_"),
|
|
22
|
+
/*__reshadow_css_end__*/
|
|
23
|
+
{
|
|
24
|
+
"__SHighlightedBadge": "___SHighlightedBadge_oa3wf_gg_"
|
|
25
|
+
});
|
|
26
|
+
var BadgeFHRoot = /*#__PURE__*/function (_Component) {
|
|
27
|
+
function BadgeFHRoot() {
|
|
28
|
+
(0, _classCallCheck2["default"])(this, BadgeFHRoot);
|
|
29
|
+
return _callSuper(this, BadgeFHRoot, arguments);
|
|
30
|
+
}
|
|
31
|
+
(0, _inherits2["default"])(BadgeFHRoot, _Component);
|
|
32
|
+
return (0, _createClass2["default"])(BadgeFHRoot, [{
|
|
33
|
+
key: "render",
|
|
34
|
+
value: function render() {
|
|
35
|
+
var _ref = this.asProps,
|
|
36
|
+
_ref2;
|
|
37
|
+
var SHighlightedBadge = _badge["default"];
|
|
38
|
+
var styles = this.asProps.styles;
|
|
39
|
+
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHighlightedBadge, _ref2.cn("SHighlightedBadge", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))));
|
|
40
|
+
}
|
|
41
|
+
}]);
|
|
42
|
+
}(_core.Component);
|
|
43
|
+
(0, _defineProperty2["default"])(BadgeFHRoot, "displayName", 'BadgeFH');
|
|
44
|
+
(0, _defineProperty2["default"])(BadgeFHRoot, "style", style);
|
|
45
|
+
var BadgeFH = exports.BadgeFH = (0, _core.createComponent)(BadgeFHRoot);
|
|
46
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["_core","require","_badge","_interopRequireDefault","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","BadgeFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref2","SHighlightedBadge","Badge","styles","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","BadgeFH","exports","createComponent"],"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":";;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA0B,SAAAI,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,8BAAAhB,KAAA,CAAAiB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,gBAAA,mBAAAF,WAAA;IAAA,OAAAd,UAAA,OAAAc,WAAA,EAAAG,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAJ,WAAA,EAAAC,UAAA;EAAA,WAAAI,aAAA,aAAAL,WAAA;IAAAM,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAIMC,iBAAK;MAHlC,IAAQC,MAAM,GAAK,IAAI,CAACJ,OAAO,CAAvBI,MAAM;MAEd,OAAAH,KAAA,GAAO,IAAAb,aAAO,EAACgB,MAAM,CAAC,eACpB7B,MAAA,YAAA8B,aAAA,CAACH,iBAAiB,EAAAD,KAAA,CAAAK,EAAA,0BAAAC,cAAA,qBAAApC,KAAA,CAAAqC,WAAA,MAAAT,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EAXuBU,eAAS;AAAA,IAAAC,gBAAA,aAA7BpB,WAAW,iBACM,SAAS;AAAA,IAAAoB,gBAAA,aAD1BpB,WAAW,WAEAH,KAAK;AAYf,IAAMwB,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAACvB,WAAW,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
SHighlightedBadge {
|
|
2
|
+
color: var(--intergalactic-text-primary-invert, #ffffff);
|
|
3
|
+
|
|
4
|
+
background-image: linear-gradient(
|
|
5
|
+
90deg,
|
|
6
|
+
var(--intergalactic-violet-500, #8649e1),
|
|
7
|
+
var(--intergalactic-blue-500, #006dca),
|
|
8
|
+
var(--intergalactic-violet-400, #ab6cfe),
|
|
9
|
+
var(--intergalactic-blue-400, #008ff8)
|
|
10
|
+
);
|
|
11
|
+
background-position-x: 99%;
|
|
12
|
+
background-size: 300%;
|
|
13
|
+
transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
14
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ButtonFH = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
+
var _core = require("@semcore/core");
|
|
17
|
+
var _button = _interopRequireDefault(require("@semcore/button"));
|
|
18
|
+
var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
|
|
19
|
+
var _react = _interopRequireDefault(require("react"));
|
|
20
|
+
var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
|
|
21
|
+
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)); }
|
|
22
|
+
/*!__reshadow-styles__:"./button.shadow.css"*/
|
|
23
|
+
var style = (/*__reshadow_css_start__*/_core.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_"),
|
|
24
|
+
/*__reshadow_css_end__*/
|
|
25
|
+
{
|
|
26
|
+
"__SHighlightedButton": "___SHighlightedButton_s762w_gg_",
|
|
27
|
+
"_theme_primary-highlighted": "_theme_primary-highlighted_s762w_gg_",
|
|
28
|
+
"_active": "__active_s762w_gg_",
|
|
29
|
+
"_theme_secondary-highlighted": "_theme_secondary-highlighted_s762w_gg_",
|
|
30
|
+
"_neighborLocation_left": "_neighborLocation_left_s762w_gg_",
|
|
31
|
+
"_neighborLocation_right": "_neighborLocation_right_s762w_gg_",
|
|
32
|
+
"_neighborLocation_both": "_neighborLocation_both_s762w_gg_"
|
|
33
|
+
});
|
|
34
|
+
var ButtonFHRoot = /*#__PURE__*/function (_Component) {
|
|
35
|
+
function ButtonFHRoot() {
|
|
36
|
+
var _this;
|
|
37
|
+
(0, _classCallCheck2["default"])(this, ButtonFHRoot);
|
|
38
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
39
|
+
args[_key] = arguments[_key];
|
|
40
|
+
}
|
|
41
|
+
_this = _callSuper(this, ButtonFHRoot, [].concat(args));
|
|
42
|
+
(0, _defineProperty2["default"])(_this, "state", {
|
|
43
|
+
clicked: false
|
|
44
|
+
});
|
|
45
|
+
return _this;
|
|
46
|
+
}
|
|
47
|
+
(0, _inherits2["default"])(ButtonFHRoot, _Component);
|
|
48
|
+
return (0, _createClass2["default"])(ButtonFHRoot, [{
|
|
49
|
+
key: "handleClick",
|
|
50
|
+
value: function handleClick(e) {
|
|
51
|
+
var _this2 = this;
|
|
52
|
+
var onClick = this.asProps.onClick;
|
|
53
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
54
|
+
this.setState({
|
|
55
|
+
clicked: false
|
|
56
|
+
});
|
|
57
|
+
setTimeout(function () {
|
|
58
|
+
_this2.setState({
|
|
59
|
+
clicked: true
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}, {
|
|
64
|
+
key: "getAddonProps",
|
|
65
|
+
value: function getAddonProps() {
|
|
66
|
+
return {
|
|
67
|
+
clicked: this.state.clicked
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
key: "render",
|
|
72
|
+
value: function render() {
|
|
73
|
+
var _ref = this.asProps,
|
|
74
|
+
_ref3;
|
|
75
|
+
var styles = this.asProps.styles;
|
|
76
|
+
var SHighlightedButton = _button["default"];
|
|
77
|
+
return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHighlightedButton, _ref3.cn("SHighlightedButton", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
78
|
+
"use:onClick": this.handleClick.bind(this)
|
|
79
|
+
}, _ref))));
|
|
80
|
+
}
|
|
81
|
+
}]);
|
|
82
|
+
}(_core.Component);
|
|
83
|
+
(0, _defineProperty2["default"])(ButtonFHRoot, "displayName", 'ButtonFH');
|
|
84
|
+
(0, _defineProperty2["default"])(ButtonFHRoot, "style", style);
|
|
85
|
+
(0, _defineProperty2["default"])(ButtonFHRoot, "defaultProps", {
|
|
86
|
+
theme: 'highlighted'
|
|
87
|
+
});
|
|
88
|
+
function HighlightAddon(props) {
|
|
89
|
+
var _ref2 = arguments[0],
|
|
90
|
+
_ref4;
|
|
91
|
+
var SAddon = _button["default"].Addon;
|
|
92
|
+
var clicked = props.clicked,
|
|
93
|
+
animatedSparkleCount = props.animatedSparkleCount,
|
|
94
|
+
Children = props.Children,
|
|
95
|
+
hasChildren = props.children;
|
|
96
|
+
return _ref4 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref4.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref2))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref4.cn("SummaryAI", {
|
|
97
|
+
"color": '--intergalactic-icon-primary-feature-highlight'
|
|
98
|
+
})), /*#__PURE__*/_react["default"].createElement(_AnimatedSparkles.AnimatedSparkles, _ref4.cn("AnimatedSparkles", {
|
|
99
|
+
"show": clicked,
|
|
100
|
+
"count": animatedSparkleCount
|
|
101
|
+
}))));
|
|
102
|
+
}
|
|
103
|
+
var ButtonFH = exports.ButtonFH = (0, _core.createComponent)(ButtonFHRoot, {
|
|
104
|
+
Addon: HighlightAddon,
|
|
105
|
+
Text: _button["default"].Text
|
|
106
|
+
});
|
|
107
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","names":["_core","require","_button","_interopRequireDefault","_m","_react","_AnimatedSparkles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","ButtonFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","clicked","_inherits2","_createClass2","key","value","handleClick","_this2","onClick","asProps","setState","setTimeout","getAddonProps","state","render","_ref","_ref3","styles","SHighlightedButton","Button","createElement","cn","_objectSpread2","assignProps","bind","Component","theme","HighlightAddon","props","_ref2","arguments[0]","_ref4","SAddon","Addon","animatedSparkleCount","Children","hasChildren","children","Fragment","AnimatedSparkles","ButtonFH","exports","createComponent","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":[]}
|
|
@@ -0,0 +1 @@
|
|
|
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":[]}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
SHighlightedButton[theme='primary-highlighted'] {
|
|
2
|
+
color: var(--intergalactic-text-primary-invert, #ffffff);
|
|
3
|
+
background-image: linear-gradient(
|
|
4
|
+
90deg,
|
|
5
|
+
var(--intergalactic-violet-500, #8649e1),
|
|
6
|
+
var(--intergalactic-blue-500, #006dca),
|
|
7
|
+
var(--intergalactic-violet-400, #ab6cfe),
|
|
8
|
+
var(--intergalactic-blue-400, #008ff8)
|
|
9
|
+
);
|
|
10
|
+
background-position-x: 99%;
|
|
11
|
+
background-size: 300%;
|
|
12
|
+
transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
13
|
+
|
|
14
|
+
&:hover {
|
|
15
|
+
color: var(--intergalactic-text-primary-invert, #ffffff);
|
|
16
|
+
background-position-x: 1%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&:active,
|
|
20
|
+
&[active] {
|
|
21
|
+
color: var(--intergalactic-text-primary-invert, #ffffff);
|
|
22
|
+
background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg, #5925ab, #044792));
|
|
23
|
+
background-size: 100%;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
SHighlightedButton[theme='secondary-highlighted'] {
|
|
28
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
29
|
+
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
30
|
+
background-color: var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1));
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
background-color: var(--intergalactic-control-secondary-neutral-hover,
|
|
34
|
+
rgba(138, 142, 155, 0.2));
|
|
35
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:active,
|
|
39
|
+
&[active] {
|
|
40
|
+
background-color: var(--intergalactic-control-secondary-neutral-active,
|
|
41
|
+
rgba(138, 142, 155, 0.3));
|
|
42
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
SHighlightedButton:focus-visible {
|
|
47
|
+
outline: none;
|
|
48
|
+
position: relative;
|
|
49
|
+
/*isolation: isolate;*/
|
|
50
|
+
|
|
51
|
+
&::before {
|
|
52
|
+
content: "";
|
|
53
|
+
position: absolute;
|
|
54
|
+
z-index: -1;
|
|
55
|
+
inset: 0;
|
|
56
|
+
margin: -4px;
|
|
57
|
+
padding: 4px;
|
|
58
|
+
border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
|
|
59
|
+
|
|
60
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
|
|
61
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
62
|
+
mask-composite: exclude;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&[neighborLocation='left']::before {
|
|
66
|
+
border-top-left-radius: 0;
|
|
67
|
+
border-bottom-left-radius: 0;
|
|
68
|
+
}
|
|
69
|
+
&[neighborLocation='right']::before {
|
|
70
|
+
border-top-right-radius: 0;
|
|
71
|
+
border-bottom-right-radius: 0;
|
|
72
|
+
}
|
|
73
|
+
&[neighborLocation='both']::before {
|
|
74
|
+
border-radius: 0;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CheckboxFH = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
+
var _core = require("@semcore/core");
|
|
17
|
+
var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
|
|
18
|
+
var _react = _interopRequireDefault(require("react"));
|
|
19
|
+
var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
|
|
20
|
+
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)); }
|
|
21
|
+
/*!__reshadow-styles__:"./checkbox.shadow.css"*/
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_core.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_"),
|
|
23
|
+
/*__reshadow_css_end__*/
|
|
24
|
+
{
|
|
25
|
+
"__SHighlightedCheckbox": "___SHighlightedCheckbox_1e126_gg_",
|
|
26
|
+
"_state_invalid": "_state_invalid_1e126_gg_"
|
|
27
|
+
});
|
|
28
|
+
var CheckboxFHRoot = /*#__PURE__*/function (_Component) {
|
|
29
|
+
function CheckboxFHRoot() {
|
|
30
|
+
var _this;
|
|
31
|
+
(0, _classCallCheck2["default"])(this, CheckboxFHRoot);
|
|
32
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
33
|
+
args[_key] = arguments[_key];
|
|
34
|
+
}
|
|
35
|
+
_this = _callSuper(this, CheckboxFHRoot, [].concat(args));
|
|
36
|
+
(0, _defineProperty2["default"])(_this, "inputRef", /*#__PURE__*/_react["default"].createRef());
|
|
37
|
+
return _this;
|
|
38
|
+
}
|
|
39
|
+
(0, _inherits2["default"])(CheckboxFHRoot, _Component);
|
|
40
|
+
return (0, _createClass2["default"])(CheckboxFHRoot, [{
|
|
41
|
+
key: "getValueProps",
|
|
42
|
+
value: function getValueProps() {
|
|
43
|
+
var _this2 = this;
|
|
44
|
+
return {
|
|
45
|
+
ref: this.inputRef,
|
|
46
|
+
onChange: function onChange() {
|
|
47
|
+
setTimeout(function () {
|
|
48
|
+
_this2.forceUpdate();
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
}, {
|
|
54
|
+
key: "getAnimatedSparklesProps",
|
|
55
|
+
value: function getAnimatedSparklesProps() {
|
|
56
|
+
var _this$inputRef$curren;
|
|
57
|
+
var size = this.asProps.size;
|
|
58
|
+
var checked = (_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked;
|
|
59
|
+
return {
|
|
60
|
+
show: checked,
|
|
61
|
+
top: size === 'l' ? '7px' : '5px',
|
|
62
|
+
left: size === 'l' ? '5px' : '3px'
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
key: "render",
|
|
67
|
+
value: function render() {
|
|
68
|
+
var _ref = this.asProps,
|
|
69
|
+
_ref2;
|
|
70
|
+
var SHighlightedCheckbox = _checkbox["default"];
|
|
71
|
+
var _this$asProps = this.asProps,
|
|
72
|
+
styles = _this$asProps.styles,
|
|
73
|
+
Children = _this$asProps.Children,
|
|
74
|
+
hasChildren = _this$asProps.children;
|
|
75
|
+
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHighlightedCheckbox, _ref2.cn("SHighlightedCheckbox", (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(CheckboxFH.Value, null), /*#__PURE__*/_react["default"].createElement(CheckboxFH.Text, null)));
|
|
76
|
+
}
|
|
77
|
+
}]);
|
|
78
|
+
}(_core.Component);
|
|
79
|
+
(0, _defineProperty2["default"])(CheckboxFHRoot, "displayName", 'CheckboxFH');
|
|
80
|
+
(0, _defineProperty2["default"])(CheckboxFHRoot, "style", style);
|
|
81
|
+
var CheckboxFH = exports.CheckboxFH = (0, _core.createComponent)(CheckboxFHRoot, {
|
|
82
|
+
Text: _checkbox["default"].Text,
|
|
83
|
+
Value: _checkbox["default"].Value,
|
|
84
|
+
AnimatedSparkles: _AnimatedSparkles.AnimatedSparkles
|
|
85
|
+
});
|
|
86
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["_core","require","_checkbox","_interopRequireDefault","_react","_AnimatedSparkles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","CheckboxFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","React","createRef","_inherits2","_createClass2","key","value","getValueProps","_this2","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","_this$inputRef$curren","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","Checkbox","_this$asProps","styles","Children","hasChildren","children","createElement","cn","_objectSpread2","assignProps","Fragment","CheckboxFH","Value","Text","Component","exports","createComponent","AnimatedSparkles"],"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":[]}
|
|
@@ -0,0 +1 @@
|
|
|
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":[]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
SHighlightedCheckbox:not([state="invalid"]) {
|
|
2
|
+
input[data-ui-name="CheckboxFH.Value"]:focus-visible + [data-ui-name="Value.CheckMark"]::before {
|
|
3
|
+
box-shadow: none;
|
|
4
|
+
content: "";
|
|
5
|
+
position: absolute;
|
|
6
|
+
z-index: -1;
|
|
7
|
+
inset: 0;
|
|
8
|
+
margin: -3px;
|
|
9
|
+
padding: 1px;
|
|
10
|
+
opacity: 1;
|
|
11
|
+
border-width: 3px;
|
|
12
|
+
border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px);
|
|
13
|
+
|
|
14
|
+
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;
|
|
15
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
16
|
+
mask-composite: exclude;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible + [data-ui-name="Value.CheckMark"]::before {
|
|
20
|
+
mask: none;
|
|
21
|
+
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;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
[data-ui-name="Value.CheckMark"]::before {
|
|
25
|
+
border-color: transparent;
|
|
26
|
+
background: linear-gradient(white, white) padding-box,
|
|
27
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
|
|
28
|
+
) border-box;
|
|
29
|
+
background-origin: border-box;
|
|
30
|
+
background-clip: padding-box, border-box;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
input[data-ui-name="CheckboxFH.Value"]:checked ~ [data-ui-name="Value.CheckMark"]::before {
|
|
34
|
+
border-color: transparent;
|
|
35
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,
|
|
36
|
+
var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.InputFH = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
+
var _core = require("@semcore/core");
|
|
17
|
+
var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
|
|
18
|
+
var _input = _interopRequireDefault(require("@semcore/input"));
|
|
19
|
+
var _react = _interopRequireDefault(require("react"));
|
|
20
|
+
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)); }
|
|
21
|
+
/*!__reshadow-styles__:"./input.shadow.css"*/
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_core.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_"),
|
|
23
|
+
/*__reshadow_css_end__*/
|
|
24
|
+
{
|
|
25
|
+
"__SHighlightedInput": "___SHighlightedInput_sfrdu_gg_",
|
|
26
|
+
"_state_normal": "_state_normal_sfrdu_gg_",
|
|
27
|
+
"__SOutline": "___SOutline_sfrdu_gg_",
|
|
28
|
+
"__SValue": "___SValue_sfrdu_gg_",
|
|
29
|
+
"_neighborLocation_left": "_neighborLocation_left_sfrdu_gg_",
|
|
30
|
+
"_neighborLocation_right": "_neighborLocation_right_sfrdu_gg_",
|
|
31
|
+
"_neighborLocation_both": "_neighborLocation_both_sfrdu_gg_"
|
|
32
|
+
});
|
|
33
|
+
var InputFHRoot = /*#__PURE__*/function (_Component) {
|
|
34
|
+
function InputFHRoot() {
|
|
35
|
+
(0, _classCallCheck2["default"])(this, InputFHRoot);
|
|
36
|
+
return _callSuper(this, InputFHRoot, arguments);
|
|
37
|
+
}
|
|
38
|
+
(0, _inherits2["default"])(InputFHRoot, _Component);
|
|
39
|
+
return (0, _createClass2["default"])(InputFHRoot, [{
|
|
40
|
+
key: "render",
|
|
41
|
+
value: function render() {
|
|
42
|
+
var _ref = this.asProps,
|
|
43
|
+
_ref3;
|
|
44
|
+
var SHighlightedInput = _input["default"];
|
|
45
|
+
return _ref3 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SHighlightedInput, _ref3.cn("SHighlightedInput", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))));
|
|
46
|
+
}
|
|
47
|
+
}]);
|
|
48
|
+
}(_core.Component);
|
|
49
|
+
(0, _defineProperty2["default"])(InputFHRoot, "displayName", 'InputFH');
|
|
50
|
+
(0, _defineProperty2["default"])(InputFHRoot, "style", style);
|
|
51
|
+
function HighlightAddon(props) {
|
|
52
|
+
var _ref2 = arguments[0];
|
|
53
|
+
var Children = props.Children,
|
|
54
|
+
hasChildren = props.children;
|
|
55
|
+
return /*#__PURE__*/_react["default"].createElement(_input["default"].Addon, (0, _core.assignProps)({}, _ref2), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, null) : /*#__PURE__*/_react["default"].createElement(_m["default"], {
|
|
56
|
+
color: "--intergalactic-icon-primary-feature-highlight"
|
|
57
|
+
}));
|
|
58
|
+
}
|
|
59
|
+
var InputFH = exports.InputFH = (0, _core.createComponent)(InputFHRoot, {
|
|
60
|
+
Addon: HighlightAddon,
|
|
61
|
+
Value: _input["default"].Value
|
|
62
|
+
});
|
|
63
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","names":["_core","require","_m","_interopRequireDefault","_input","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","InputFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref3","SHighlightedInput","Input","styles","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","HighlightAddon","props","_ref2","arguments[0]","Children","hasChildren","children","Addon","color","InputFH","exports","createComponent","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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,EAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0B,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;AAAA,IAAAQ,KAAA,8BAAAjB,KAAA,CAAAkB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,gBAAA,mBAAAF,WAAA;IAAA,OAAAd,UAAA,OAAAc,WAAA,EAAAG,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAJ,WAAA,EAAAC,UAAA;EAAA,WAAAI,aAAA,aAAAL,WAAA;IAAAM,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAEMC,iBAAK;MADlC,OAAAF,KAAA,GAAO,IAAAb,aAAO,EAAC,IAAI,CAACY,OAAO,CAACI,MAAM,CAAC,eACjC7B,MAAA,YAAA8B,aAAA,CAACH,iBAAiB,EAAAD,KAAA,CAAAK,EAAA,0BAAAC,cAAA,qBAAArC,KAAA,CAAAsC,WAAA,MAAAT,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EATuBU,eAAS;AAAA,IAAAC,gBAAA,aAA7BpB,WAAW,iBACM,SAAS;AAAA,IAAAoB,gBAAA,aAD1BpB,WAAW,WAEAH,KAAK;AAUtB,SAASwB,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,IAAQC,QAAQ,GAA4BH,KAAK,CAAzCG,QAAQ;IAAYC,WAAW,GAAKJ,KAAK,CAA/BK,QAAQ;EAC1B,oBACE1C,MAAA,YAAA8B,aAAA,CAAcF,iBAAK,CAACe,KAAK,MAAAhD,KAAA,CAAAsC,WAAA,MAAAK,KAAA,GACtBG,WAAW,gBAAIzC,MAAA,YAAA8B,aAAA,CAACU,QAAQ,MAAE,CAAC,gBAAKxC,MAAA,YAAA8B,aAAA,CAACjC,EAAA,WAAS;IAAC+C,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;AAEO,IAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAAChC,WAAW,EAAE;EAClD4B,KAAK,EAAEP,cAAc;EACrBY,KAAK,EAAEpB,iBAAK,CAACoB;AACf,CAAC,CAAiB","ignoreList":[]}
|