@semcore/feature-highlight 17.1.0 → 17.2.0-prerelease.5

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.2.0] - 2026-06-05
+
+### Added
+
+- Links to the API and examples in the docs.
+
+### Fixed
+
+- Unnecessary line breaks in `Notice` styles.
+
 ## [17.1.0] - 2026-05-13
 
 ### Added

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

@@ -11,13 +11,13 @@ var _badge = _interopRequireDefault(require("@semcore/badge"));
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./badge.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedBadge_b73tz_gg_{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949))}.___SHighlightedBadge_b73tz_gg_._use_accent_b73tz_gg_{background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245)))}.___SHighlightedBadge_b73tz_gg_.__bg_b73tz_gg_{background-color:var(--bg_b73tz)}", /*__inner_css_end__*/"b73tz_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedBadge_1r3dh_gg_{color:var(--intergalactic-text-primary-invert,#fefffff2)}.___SHighlightedBadge_1r3dh_gg_._use_accent_1r3dh_gg_{background-image:var(--intergalactic-control-primary-feature-highlight,linear-gradient(90deg in oklch,#a261fd,#94a5f5))}.___SHighlightedBadge_1r3dh_gg_.__bg_1r3dh_gg_{background-color:var(--bg_1r3dh)}", /*__inner_css_end__*/"1r3dh_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedBadge": "___SHighlightedBadge_b73tz_gg_",
-  "_use_accent": "_use_accent_b73tz_gg_",
-  "_bg": "__bg_b73tz_gg_",
-  "--bg": "--bg_b73tz"
+  "__SHighlightedBadge": "___SHighlightedBadge_1r3dh_gg_",
+  "_use_accent": "_use_accent_1r3dh_gg_",
+  "_bg": "__bg_1r3dh_gg_",
+  "--bg": "--bg_1r3dh"
 });
 class BadgeFHRoot extends _core.Component {
   render() {
@@ -37,6 +37,12 @@ class BadgeFHRoot extends _core.Component {
     }));
   }
 }
+
+/**
+ * Badge FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#badge|Docs}
+ */
 (0, _defineProperty2.default)(BadgeFHRoot, "displayName", 'BadgeFH');
 (0, _defineProperty2.default)(BadgeFHRoot, "style", style);
 (0, _defineProperty2.default)(BadgeFHRoot, "enhance", [(0, _resolveColorEnhance.default)()]);

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["_core","require","_badge","_interopRequireDefault","_resolveColorEnhance","_react","style","sstyled","insert","BadgeFHRoot","Component","render","_ref","asProps","_ref2","SHighlightedBadge","Badge","styles","use","resolveColor","bg","undefined","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","BadgeFH","exports","createComponent"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import Badge, { type BadgeMargins } from '@semcore/badge';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './badge.shadow.css';\n\ntype BadgeFHUse = 'accent' | 'neutral';\n\ntype BadgeFHProps = BadgeMargins & {\n  /**\n   * Type of feature badge.\n   * @default accent\n   */\n  use?: BadgeFHUse;\n};\n\ntype DefaultProps = {\n  use: BadgeFHUse;\n};\n\nclass BadgeFHRoot extends Component<BadgeFHProps, typeof BadgeFHRoot.enhance, never, DefaultProps> {\n  static displayName = 'BadgeFH';\n  static style = style;\n  static enhance = [resolveColorEnhance()] as const;\n  static defaultProps: DefaultProps = {\n    use: 'accent',\n  };\n\n  render() {\n    const SHighlightedBadge = Root;\n    const { styles, use, resolveColor } = this.asProps;\n\n    const bg = use === 'neutral' ? resolveColor('--violet-400') : undefined;\n\n    return sstyled(styles)(\n      <SHighlightedBadge\n        render={Badge}\n        use:bg={bg}\n      />,\n    );\n  }\n}\n\nexport const BadgeFH = createComponent<'span', BadgeFHProps>(BadgeFHRoot);\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,oBAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0B;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAkB1B,MAAMC,WAAW,SAASC,eAAS,CAAgE;EAQjGC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAOXC,cAAK;IANjB,MAAM;MAAEC,MAAM;MAAEC,GAAG;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACN,OAAO;IAElD,MAAMO,EAAE,GAAGF,GAAG,KAAK,SAAS,GAAGC,YAAY,CAAC,cAAc,CAAC,GAAGE,SAAS;IAEvE,OAAAP,KAAA,GAAO,IAAAP,aAAO,EAACU,MAAM,CAAC,eACpBZ,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACR,iBAAiB,EAAAD,KAAA,CAAAU,EAAA;MAAA,OAAAxB,KAAA,CAAAyB,WAAA;QAAA,UAERL;MAAE,GAAAR,IAAA;IAAA,EACX,CAAC;EAEN;AACF;AAAC,IAAAc,gBAAA,CAAAJ,OAAA,EArBKb,WAAW,iBACM,SAAS;AAAA,IAAAiB,gBAAA,CAAAJ,OAAA,EAD1Bb,WAAW,WAEAH,KAAK;AAAA,IAAAoB,gBAAA,CAAAJ,OAAA,EAFhBb,WAAW,aAGE,CAAC,IAAAkB,4BAAmB,EAAC,CAAC,CAAC;AAAA,IAAAD,gBAAA,CAAAJ,OAAA,EAHpCb,WAAW,kBAIqB;EAClCS,GAAG,EAAE;AACP,CAAC;AAiBI,MAAMU,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAAuBrB,WAAW,CAAC","ignoreList":[]}
+{"version":3,"file":"Badge.js","names":["_core","require","_badge","_interopRequireDefault","_resolveColorEnhance","_react","style","sstyled","insert","BadgeFHRoot","Component","render","_ref","asProps","_ref2","SHighlightedBadge","Badge","styles","use","resolveColor","bg","undefined","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","BadgeFH","exports","createComponent"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import Badge, { type BadgeMargins } from '@semcore/badge';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './badge.shadow.css';\n\ntype BadgeFHUse = 'accent' | 'neutral';\n\ntype BadgeFHProps = BadgeMargins & {\n  /**\n   * Type of feature badge.\n   * @default accent\n   */\n  use?: BadgeFHUse;\n};\n\ntype DefaultProps = {\n  use: BadgeFHUse;\n};\n\ntype BadgeFHComponent = Intergalactic.Component<'span', BadgeFHProps>;\n\nclass BadgeFHRoot extends Component<\n  BadgeFHProps,\n  typeof BadgeFHRoot.enhance,\n  {},\n  {},\n  {},\n  DefaultProps\n> {\n  static displayName = 'BadgeFH';\n  static style = style;\n  static enhance = [resolveColorEnhance()] as const;\n  static defaultProps = {\n    use: 'accent',\n  } as const;\n\n  render() {\n    const SHighlightedBadge = Root;\n    const { styles, use, resolveColor } = this.asProps;\n\n    const bg = use === 'neutral' ? resolveColor('--violet-400') : undefined;\n\n    return sstyled(styles)(\n      <SHighlightedBadge\n        render={Badge}\n        use:bg={bg}\n      />,\n    );\n  }\n}\n\n/**\n * Badge FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#badge|Docs}\n */\nexport const BadgeFH = createComponent<\n  BadgeFHComponent,\n  typeof BadgeFHRoot\n>(BadgeFHRoot);\n"],"mappings":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAGA,IAAAG,oBAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0B;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAoB1B,MAAMC,WAAW,SAASC,eAAS,CAOjC;EAQAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAOXC,cAAK;IANjB,MAAM;MAAEC,MAAM;MAAEC,GAAG;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACN,OAAO;IAElD,MAAMO,EAAE,GAAGF,GAAG,KAAK,SAAS,GAAGC,YAAY,CAAC,cAAc,CAAC,GAAGE,SAAS;IAEvE,OAAAP,KAAA,GAAO,IAAAP,aAAO,EAACU,MAAM,CAAC,eACpBZ,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACR,iBAAiB,EAAAD,KAAA,CAAAU,EAAA;MAAA,OAAAxB,KAAA,CAAAyB,WAAA;QAAA,UAERL;MAAE,GAAAR,IAAA;IAAA,EACX,CAAC;EAEN;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJA,IAAAc,gBAAA,CAAAJ,OAAA,EA9BMb,WAAW,iBAQM,SAAS;AAAA,IAAAiB,gBAAA,CAAAJ,OAAA,EAR1Bb,WAAW,WASAH,KAAK;AAAA,IAAAoB,gBAAA,CAAAJ,OAAA,EAThBb,WAAW,aAUE,CAAC,IAAAkB,4BAAmB,EAAC,CAAC,CAAC;AAAA,IAAAD,gBAAA,CAAAJ,OAAA,EAVpCb,WAAW,kBAWO;EACpBS,GAAG,EAAE;AACP,CAAC;AAsBI,MAAMU,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAGpCrB,WAAW,CAAC","ignoreList":[]}

package/lib/cjs/components/button/Button.js

@@ -12,18 +12,25 @@ var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
 /*!__reshadow-styles__:"./button.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949));background-image:linear-gradient(90deg,var(--intergalactic-violet-500, rgb(128, 41, 236)),var(--intergalactic-blue-500, rgb(92, 92, 196)),var(--intergalactic-violet-400, rgb(162, 97, 253)),var(--intergalactic-blue-400, rgb(102, 107, 219)));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}@media (hover:hover){.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_:hover{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949));background-position-x:1%}}.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_:active{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949));background-image:var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(102, 107, 219)));background-size:100%}.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_:focus-visible{outline:0}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_{color:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250));background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(240, 245, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box;background-origin:border-box;background-clip:padding-box,border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_{background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(240, 245, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_{background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.96716 0.95079 0.99961), color(display-p3 0.94438 0.95907 0.99998))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_ .___SText_1gg3z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250));background-image:var(--intergalactic-text-feature-highlight, linear-gradient(90deg in oklch, rgb(128, 41, 236), rgb(92, 92, 196)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media (hover:hover){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, color(display-p3 0.89136 0.83496 0.99956), color(display-p3 0.8189 0.86425 1))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover .___SText_1gg3z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236));background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(128, 41, 236), rgb(92, 92, 196)))}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.89136 0.83496 0.99956), color(display-p3 0.8189 0.86425 1))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_ .___SText_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active .___SText_1gg3z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236));background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(128, 41, 236), rgb(92, 92, 196)))}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:focus-visible{outline:0}.___SHighlightedButton_1gg3z_gg_{position:relative}.___SHighlightedButton_1gg3z_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}.___SHighlightedButton_1gg3z_gg_._neighborLocation_left_1gg3z_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButton_1gg3z_gg_._neighborLocation_right_1gg3z_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButton_1gg3z_gg_._neighborLocation_both_1gg3z_gg_::before{border-radius:0}.___SHighlightedButton_1gg3z_gg_:focus-visible::before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedButton_1gg3z_gg_:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButton_1gg3z_gg_:focus-visible::before{display:none}}", /*__inner_css_end__*/"1gg3z_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedButton_1ql7e_gg_._theme_primary-highlighted_1ql7e_gg_{color:var(--intergalactic-text-primary-invert,#fefffff2);background-image:linear-gradient(90deg,var(--intergalactic-violet-500,#8029ec),var(--intergalactic-blue-500,#5c5cc4),var(--intergalactic-violet-400,#a261fd),var(--intergalactic-blue-400,#666bdb));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}@media (hover:hover){.___SHighlightedButton_1ql7e_gg_._theme_primary-highlighted_1ql7e_gg_:hover{color:var(--intergalactic-text-primary-invert,#fefffff2);background-position-x:1%}}.___SHighlightedButton_1ql7e_gg_._theme_primary-highlighted_1ql7e_gg_.__active_1ql7e_gg_,.___SHighlightedButton_1ql7e_gg_._theme_primary-highlighted_1ql7e_gg_:active{color:var(--intergalactic-text-primary-invert,#fefffff2);background-image:var(--intergalactic-control-primary-feature-highlight-active,linear-gradient(90deg in oklch,#a261fd,#666bdb));background-size:100%}.___SHighlightedButton_1ql7e_gg_._theme_primary-highlighted_1ql7e_gg_:focus-visible{outline:none}.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_{color:var(--intergalactic-icon-primary-feature-highlight,#9041fa);background:var(--intergalactic-control-secondary-feature-highlight,linear-gradient(90deg in oklch,#f7f3ff,#f0f5ff)) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box;background-origin:border-box;background-clip:padding-box,border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_{background:var(--intergalactic-control-secondary-feature-highlight,linear-gradient(90deg in oklch,#f7f3ff,#f0f5ff)) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@media (color-gamut:p3){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_{background:var(--intergalactic-control-secondary-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .96716 .95079 .99961),color(display-p3 .94438 .95907 .99998))) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) border-box}}}.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_ .___SText_1ql7e_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight,#9041fa);background-image:var(--intergalactic-text-feature-highlight,linear-gradient(90deg in oklch,#8029ec,#5c5cc4));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#0000}@media (hover:hover){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover,linear-gradient(90deg in oklch,#e6d5ff,#cfddff)) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active,#8029ec)}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover,linear-gradient(90deg in oklch,#e6d5ff,#cfddff)) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@media (color-gamut:p3){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover,linear-gradient(90deg in oklch,color(display-p3 .89136 .83496 .99956),color(display-p3 .8189 .86425 1))) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) border-box}}}}@media (hover:hover){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:hover .___SText_1ql7e_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active,#8029ec);background-image:var(--intergalactic-text-feature-highlight-hover-active,linear-gradient(90deg in oklch,#8029ec,#5c5cc4))}}.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_.__active_1ql7e_gg_,.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active,linear-gradient(90deg in oklch,#e6d5ff,#cfddff)) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active,#8029ec)}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_.__active_1ql7e_gg_,.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active,linear-gradient(90deg in oklch,#e6d5ff,#cfddff)) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@media (color-gamut:p3){.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_.__active_1ql7e_gg_,.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .89136 .83496 .99956),color(display-p3 .8189 .86425 1))) padding-box,var(--intergalactic-border-feature-highlight-secondary,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) border-box}}}:is(.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_.__active_1ql7e_gg_,.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:active) .___SText_1ql7e_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active,#8029ec);background-image:var(--intergalactic-text-feature-highlight-hover-active,linear-gradient(90deg in oklch,#8029ec,#5c5cc4))}.___SHighlightedButton_1ql7e_gg_._theme_secondary-highlighted_1ql7e_gg_:focus-visible{outline:none}.___SHighlightedButton_1ql7e_gg_{position:relative}.___SHighlightedButton_1ql7e_gg_:before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1ql7e_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SHighlightedButton_1ql7e_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}.___SHighlightedButton_1ql7e_gg_._neighborLocation_left_1ql7e_gg_:before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButton_1ql7e_gg_._neighborLocation_right_1ql7e_gg_:before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButton_1ql7e_gg_._neighborLocation_both_1ql7e_gg_:before{border-radius:0}.___SHighlightedButton_1ql7e_gg_:focus-visible:before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedButton_1ql7e_gg_:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButton_1ql7e_gg_:focus-visible:before{display:none}}", /*__inner_css_end__*/"1ql7e_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedButton": "___SHighlightedButton_1gg3z_gg_",
-  "_theme_primary-highlighted": "_theme_primary-highlighted_1gg3z_gg_",
-  "_active": "__active_1gg3z_gg_",
-  "_theme_secondary-highlighted": "_theme_secondary-highlighted_1gg3z_gg_",
-  "__SText": "___SText_1gg3z_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1gg3z_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1gg3z_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1gg3z_gg_"
+  "__SHighlightedButton": "___SHighlightedButton_1ql7e_gg_",
+  "_theme_primary-highlighted": "_theme_primary-highlighted_1ql7e_gg_",
+  "_active": "__active_1ql7e_gg_",
+  "_theme_secondary-highlighted": "_theme_secondary-highlighted_1ql7e_gg_",
+  "__SText": "___SText_1ql7e_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1ql7e_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1ql7e_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1ql7e_gg_"
 });
+/*
+ * `highlighted` is an internal-only value and cannot be represented in the public prop type.
+ * During composition the `highlighted` prop is intentionally stripped, so it never reaches
+ * the final component interface. Because of that, this implementation relies on the current approach.
+ * Public props are `ButtonProps`.
+*/
+
 class ButtonFHRoot extends _core.Component {
   constructor(...args) {
     super(...args);
@@ -86,6 +93,12 @@ function HighlightAddon(props) {
     "count": animatedSparkleCount
   }))));
 }
+
+/**
+ * Button FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#button|Docs}
+ */
 const ButtonFH = exports.ButtonFH = (0, _core.createComponent)(ButtonFHRoot, {
   Addon: HighlightAddon,
   Text: _button.default.Text

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_core","require","_button","_interopRequireDefault","_m","_react","_AnimatedSparkles","style","sstyled","insert","ButtonFHRoot","Component","constructor","args","_defineProperty2","default","clicked","handleClick","e","onClick","asProps","setState","setTimeout","getAddonProps","state","render","_ref","_ref3","styles","SHighlightedButton","Button","createElement","cn","assignProps","bind","theme","HighlightAddon","props","_ref2","arguments[0]","_ref4","SAddon","Addon","animatedSparkleCount","Children","children","hasChildren","Fragment","AnimatedSparkles","ButtonFH","exports","createComponent","Text"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import Button from '@semcore/button';\nimport { createComponent, Root, sstyled, Component, type IRootNodeProps } from '@semcore/core';\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 />\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":[]}
+{"version":3,"file":"Button.js","names":["_core","require","_button","_interopRequireDefault","_m","_react","_AnimatedSparkles","style","sstyled","insert","ButtonFHRoot","Component","constructor","args","_defineProperty2","default","clicked","handleClick","e","onClick","asProps","setState","setTimeout","getAddonProps","state","render","_ref","_ref3","styles","SHighlightedButton","Button","createElement","cn","assignProps","bind","theme","HighlightAddon","props","_ref2","arguments[0]","_ref4","SAddon","Addon","animatedSparkleCount","Children","children","hasChildren","Fragment","AnimatedSparkles","ButtonFH","exports","createComponent","Text"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from '@semcore/button';\nimport Button from '@semcore/button';\nimport { createComponent, Root, sstyled, Component, type IRootNodeProps } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './button.shadow.css';\nimport type { HighLightedButtonAddonProps, HighlightedButtonComponent, HighlightedButtonDefaultProps } from './Button.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\n/*\n * `highlighted` is an internal-only value and cannot be represented in the public prop type.\n * During composition the `highlighted` prop is intentionally stripped, so it never reaches\n * the final component interface. Because of that, this implementation relies on the current approach.\n * Public props are `ButtonProps`.\n*/\ntype HighlightedButtonProps = Omit<ButtonProps, 'theme'> & {\n  theme?: ButtonProps['theme'] | 'highlighted';\n};\n\nclass ButtonFHRoot extends Component<\n  HighlightedButtonProps,\n  [],\n  {},\n  {},\n  {},\n  HighlightedButtonDefaultProps\n> {\n  static displayName = 'ButtonFH';\n  static style = style;\n\n  static defaultProps = {\n    theme: 'highlighted',\n  } as const;\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 />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </SAddon>,\n  );\n}\n\n/**\n * Button FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#button|Docs}\n */\nexport const ButtonFH = createComponent<\n  HighlightedButtonComponent,\n  typeof ButtonFHRoot\n>(ButtonFHRoot, {\n  Addon: HighlightAddon,\n  Text: Button.Text,\n});\n"],"mappings":"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","ignoreList":[]}

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

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

package/lib/cjs/components/checkbox/Checkbox.js

@@ -11,11 +11,11 @@ var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
 /*!__reshadow-styles__:"./checkbox.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]{position:relative;transform:translate(0);border:1px solid transparent;border-radius:var(--intergalactic-addon-rounded, 4px);background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;background-origin:border-box;background-clip:padding-box,border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:1px;border-width:2px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);border-color:transparent;pointer-events:none;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:not(:focus-visible)+[data-ui-name=\"Value.CheckMark\"]::before{opacity:0;transform:scale(.9)}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{opacity:1;transform:scale(1)}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}", /*__inner_css_end__*/"zq7su_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) [data-ui-name=\"Value.CheckMark\"]{position:relative;transform:translate(0);border:1px solid #0000;border-radius:var(--intergalactic-addon-rounded,4px);background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box;background-origin:border-box;background-clip:padding-box,border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) [data-ui-name=\"Value.CheckMark\"]{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) [data-ui-name=\"Value.CheckMark\"]{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe)) border-box}}}.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{border-color:#0000;background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) padding-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) padding-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) padding-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) border-box}}}.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) [data-ui-name=\"Value.CheckMark\"]:before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:1px;border-width:2px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);border-color:#0000;pointer-events:none;background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box;-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) [data-ui-name=\"Value.CheckMark\"]:before{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) [data-ui-name=\"Value.CheckMark\"]:before{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe)) border-box}}}.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:not(:focus-visible)+[data-ui-name=\"Value.CheckMark\"]:before{opacity:0;transform:scale(.9)}.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:focus-visible+[data-ui-name=\"Value.CheckMark\"]:before{opacity:1;transform:scale(1)}.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]:before{border-color:#0000;background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]:before{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_goyxa_gg_:not(._state_invalid_goyxa_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]:before{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) border-box}}}", /*__inner_css_end__*/"goyxa_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedCheckbox": "___SHighlightedCheckbox_zq7su_gg_",
-  "_state_invalid": "_state_invalid_zq7su_gg_"
+  "__SHighlightedCheckbox": "___SHighlightedCheckbox_goyxa_gg_",
+  "_state_invalid": "_state_invalid_goyxa_gg_"
 });
 class CheckboxFHRoot extends _core.Component {
   constructor(...args) {
@@ -57,6 +57,12 @@ class CheckboxFHRoot extends _core.Component {
     }), 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)));
   }
 }
+
+/**
+ * Checkbox FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#checkbox|Docs}
+ */
 (0, _defineProperty2.default)(CheckboxFHRoot, "displayName", 'CheckboxFH');
 (0, _defineProperty2.default)(CheckboxFHRoot, "style", style);
 const CheckboxFH = exports.CheckboxFH = (0, _core.createComponent)(CheckboxFHRoot, {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_core","require","_checkbox","_interopRequireDefault","_react","_AnimatedSparkles","style","sstyled","insert","CheckboxFHRoot","Component","constructor","args","_defineProperty2","default","React","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","Checkbox","styles","Children","children","hasChildren","createElement","cn","assignProps","Fragment","CheckboxFH","Value","Text","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { NSCheckbox } 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<NSCheckbox.Props> {\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":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAIA,IAAAI,iBAAA,GAAAJ,OAAA;AAAmF;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAEnF,MAAMC,cAAc,SAASC,eAAS,CAAmB;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iCAI5CC,cAAK,CAACC,SAAS,CAAmB,CAAC;EAAA;EAE9CC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACC,QAAQ;MAClBC,QAAQ,EAAEA,CAAA,KAAM;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC,CAAC;QACpB,CAAC,CAAC;MACJ;IACF,CAAC;EACH;EAEAC,wBAAwBA,CAAA,EAAG;IACzB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMC,OAAO,GAAG,IAAI,CAACP,QAAQ,CAACQ,OAAO,EAAED,OAAO;IAE9C,OAAO;MACLE,IAAI,EAAEF,OAAO;MACbG,GAAG,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCM,IAAI,EAAEN,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EAEAO,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAP,OAAA;MAAAQ,KAAA;IACP,MAAMC,oBAAoB,GAIMC,iBAAQ;IAHxC,MAAM;MAAEC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACd,OAAO;IAEhE,OAAAQ,KAAA,GAAO,IAAA1B,aAAO,EAAC6B,MAAM,CAAC,eACpBhC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACN,oBAAoB,EAAAD,KAAA,CAAAQ,EAAA;MAAA,OAAAzC,KAAA,CAAA0C,WAAA,MAAAV,IAAA;IAAA,IAClBO,WAAW,gBACRnC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACH,QAAQ,EAAAJ,KAAA,CAAAQ,EAAA,gBAAE,CAAC,gBAEVrC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAAApC,MAAA,CAAAU,OAAA,CAAA6B,QAAA,qBACEvC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACI,UAAU,CAACC,KAAK,MAAE,CAAC,eACpBzC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACI,UAAU,CAACE,IAAI,MAAE,CAClB,CAEY,CAAC;EAE3B;AACF;AAAC,IAAAjC,gBAAA,CAAAC,OAAA,EA7CKL,cAAc,iBACG,YAAY;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD7BL,cAAc,WAEHH,KAAK;AA6Cf,MAAMsC,UAAU,GAAAG,OAAA,CAAAH,UAAA,GAAG,IAAAI,qBAAe,EAACvC,cAAc,EAAE;EACxDqC,IAAI,EAAEX,iBAAQ,CAACW,IAAI;EACnBD,KAAK,EAAEV,iBAAQ,CAACU,KAAK;EACrBI,gBAAgB,EAAhBA;AACF,CAAC,CAAiC","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_core","require","_checkbox","_interopRequireDefault","_react","_AnimatedSparkles","style","sstyled","insert","CheckboxFHRoot","Component","constructor","args","_defineProperty2","default","React","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","Checkbox","styles","Children","children","hasChildren","createElement","cn","assignProps","Fragment","CheckboxFH","Value","Text","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { NSCheckbox } 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<NSCheckbox.Props> {\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\n/**\n * Checkbox FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#checkbox|Docs}\n */\nexport const CheckboxFH = createComponent<\n  HighlightedCheckboxComponent,\n typeof CheckboxFHRoot\n>(CheckboxFHRoot, {\n  Text: Checkbox.Text,\n  Value: Checkbox.Value,\n  AnimatedSparkles,\n});\n"],"mappings":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAIA,IAAAI,iBAAA,GAAAJ,OAAA;AAAmF;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAEnF,MAAMC,cAAc,SAASC,eAAS,CAAmB;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iCAI5CC,cAAK,CAACC,SAAS,CAAmB,CAAC;EAAA;EAE9CC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACC,QAAQ;MAClBC,QAAQ,EAAEA,CAAA,KAAM;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC,CAAC;QACpB,CAAC,CAAC;MACJ;IACF,CAAC;EACH;EAEAC,wBAAwBA,CAAA,EAAG;IACzB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMC,OAAO,GAAG,IAAI,CAACP,QAAQ,CAACQ,OAAO,EAAED,OAAO;IAE9C,OAAO;MACLE,IAAI,EAAEF,OAAO;MACbG,GAAG,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCM,IAAI,EAAEN,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EAEAO,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAP,OAAA;MAAAQ,KAAA;IACP,MAAMC,oBAAoB,GAIMC,iBAAQ;IAHxC,MAAM;MAAEC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACd,OAAO;IAEhE,OAAAQ,KAAA,GAAO,IAAA1B,aAAO,EAAC6B,MAAM,CAAC,eACpBhC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACN,oBAAoB,EAAAD,KAAA,CAAAQ,EAAA;MAAA,OAAAzC,KAAA,CAAA0C,WAAA,MAAAV,IAAA;IAAA,IAClBO,WAAW,gBACRnC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACH,QAAQ,EAAAJ,KAAA,CAAAQ,EAAA,gBAAE,CAAC,gBAEVrC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAAApC,MAAA,CAAAU,OAAA,CAAA6B,QAAA,qBACEvC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACI,UAAU,CAACC,KAAK,MAAE,CAAC,eACpBzC,MAAA,CAAAU,OAAA,CAAA0B,aAAA,CAACI,UAAU,CAACE,IAAI,MAAE,CAClB,CAEY,CAAC;EAE3B;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJA,IAAAjC,gBAAA,CAAAC,OAAA,EA/CML,cAAc,iBACG,YAAY;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD7BL,cAAc,WAEHH,KAAK;AAkDf,MAAMsC,UAAU,GAAAG,OAAA,CAAAH,UAAA,GAAG,IAAAI,qBAAe,EAGvCvC,cAAc,EAAE;EAChBqC,IAAI,EAAEX,iBAAQ,CAACW,IAAI;EACnBD,KAAK,EAAEV,iBAAQ,CAACU,KAAK;EACrBI,gBAAgB,EAAhBA;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/components/input/Input.js

@@ -11,16 +11,16 @@ var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
 var _input = _interopRequireDefault(require("@semcore/input"));
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./input.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_ .___SOutline_1ryba_gg_{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_ .___SOutline_1ryba_gg_{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_ .___SOutline_1ryba_gg_{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_ .___SOutline_1ryba_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:3px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_ .___SOutline_1ryba_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_ .___SOutline_1ryba_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_:has(.___SValue_1ryba_gg_:focus-visible) .___SOutline_1ryba_gg_{outline:0}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_:has(.___SValue_1ryba_gg_:focus-visible) .___SOutline_1ryba_gg_::before{opacity:1}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_._neighborLocation_left_1ryba_gg_ .___SOutline_1ryba_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_._neighborLocation_right_1ryba_gg_ .___SOutline_1ryba_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_._neighborLocation_both_1ryba_gg_ .___SOutline_1ryba_gg_::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_:has(.___SValue_1ryba_gg_:focus-visible) .___SOutline_1ryba_gg_{outline:0;border-color:#7078fc;box-shadow:0 0 0 0#fff,0 0 0 2px #7078fc}.___SHighlightedInput_1ryba_gg_._state_normal_1ryba_gg_:has(.___SValue_1ryba_gg_:focus-visible) .___SOutline_1ryba_gg_::before{display:none}}", /*__inner_css_end__*/"1ryba_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_ .___SOutline_82xo3_gg_{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:#0000}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_ .___SOutline_82xo3_gg_{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box}@media (color-gamut:p3){.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_ .___SOutline_82xo3_gg_{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe)) border-box}}}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_ .___SOutline_82xo3_gg_:before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:3px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_ .___SOutline_82xo3_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_ .___SOutline_82xo3_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_:has(.___SValue_82xo3_gg_:focus-visible) .___SOutline_82xo3_gg_{outline:none}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_:has(.___SValue_82xo3_gg_:focus-visible) .___SOutline_82xo3_gg_:before{opacity:1}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_._neighborLocation_left_82xo3_gg_ .___SOutline_82xo3_gg_:before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_._neighborLocation_right_82xo3_gg_ .___SOutline_82xo3_gg_:before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_._neighborLocation_both_82xo3_gg_ .___SOutline_82xo3_gg_:before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_:has(.___SValue_82xo3_gg_:focus-visible) .___SOutline_82xo3_gg_{outline:none;border-color:#7078fc;box-shadow:0 0 0 0 #fff,0 0 0 2px #7078fc}.___SHighlightedInput_82xo3_gg_._state_normal_82xo3_gg_:has(.___SValue_82xo3_gg_:focus-visible) .___SOutline_82xo3_gg_:before{display:none}}", /*__inner_css_end__*/"82xo3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedInput": "___SHighlightedInput_1ryba_gg_",
-  "_state_normal": "_state_normal_1ryba_gg_",
-  "__SValue": "___SValue_1ryba_gg_",
-  "__SOutline": "___SOutline_1ryba_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1ryba_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1ryba_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1ryba_gg_"
+  "__SHighlightedInput": "___SHighlightedInput_82xo3_gg_",
+  "_state_normal": "_state_normal_82xo3_gg_",
+  "__SValue": "___SValue_82xo3_gg_",
+  "__SOutline": "___SOutline_82xo3_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_82xo3_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_82xo3_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_82xo3_gg_"
 });
 class InputFHRoot extends _core.Component {
   render() {
@@ -44,6 +44,12 @@ function HighlightAddon(props) {
     color: "--intergalactic-icon-primary-feature-highlight"
   }));
 }
+
+/**
+ * Input FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#input|Docs}
+ */
 const InputFH = exports.InputFH = (0, _core.createComponent)(InputFHRoot, {
   Addon: HighlightAddon,
   Value: _input.default.Value

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_core","require","_m","_interopRequireDefault","_input","_react","style","sstyled","insert","InputFHRoot","Component","render","_ref","asProps","_ref3","SHighlightedInput","Input","styles","default","createElement","cn","assignProps","_defineProperty2","HighlightAddon","props","_ref2","arguments[0]","Children","children","hasChildren","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;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,WAAW,SAASC,eAAS,CAAC;EAIlCC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAEMC,cAAK;IADlC,OAAAF,KAAA,GAAO,IAAAP,aAAO,EAAC,IAAI,CAACM,OAAO,CAACI,MAAM,CAAC,eACjCZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACJ,iBAAiB,EAAAD,KAAA,CAAAM,EAAA;MAAA,OAAApB,KAAA,CAAAqB,WAAA,MAAAT,IAAA;IAAA,EAAiB,CAAC;EAExC;AACF;AAAC,IAAAU,gBAAA,CAAAJ,OAAA,EAVKT,WAAW,iBACM,SAAS;AAAA,IAAAa,gBAAA,CAAAJ,OAAA,EAD1BT,WAAW,WAEAH,KAAK;AAUtB,SAASiB,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EACjD,oBACEnB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAcH,cAAK,CAACc,KAAK,MAAA9B,KAAA,CAAAqB,WAAA,MAAAI,KAAA,GACtBI,WAAW,gBAAIxB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACQ,QAAQ,MAAE,CAAC,gBAAKtB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACjB,EAAA,CAAAgB,OAAS;IAACa,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;AAEO,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAACzB,WAAW,EAAE;EAClDqB,KAAK,EAAEP,cAAc;EACrBY,KAAK,EAAEnB,cAAK,CAACmB;AACf,CAAC,CAAiB","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_core","require","_m","_interopRequireDefault","_input","_react","style","sstyled","insert","InputFHRoot","Component","render","_ref","asProps","_ref3","SHighlightedInput","Input","styles","default","createElement","cn","assignProps","_defineProperty2","HighlightAddon","props","_ref2","arguments[0]","Children","children","hasChildren","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\n/**\n * Input FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#input|Docs}\n */\nexport const InputFH = createComponent<\n  typeof Input,\n  typeof InputFHRoot\n>(InputFHRoot, {\n  Addon: HighlightAddon,\n  Value: Input.Value,\n});\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;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,WAAW,SAASC,eAAS,CAAC;EAIlCC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAEMC,cAAK;IADlC,OAAAF,KAAA,GAAO,IAAAP,aAAO,EAAC,IAAI,CAACM,OAAO,CAACI,MAAM,CAAC,eACjCZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACJ,iBAAiB,EAAAD,KAAA,CAAAM,EAAA;MAAA,OAAApB,KAAA,CAAAqB,WAAA,MAAAT,IAAA;IAAA,EAAiB,CAAC;EAExC;AACF;AAAC,IAAAU,gBAAA,CAAAJ,OAAA,EAVKT,WAAW,iBACM,SAAS;AAAA,IAAAa,gBAAA,CAAAJ,OAAA,EAD1BT,WAAW,WAEAH,KAAK;AAUtB,SAASiB,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EACjD,oBACEnB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAcH,cAAK,CAACc,KAAK,MAAA9B,KAAA,CAAAqB,WAAA,MAAAI,KAAA,GACtBI,WAAW,gBAAIxB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACQ,QAAQ,MAAE,CAAC,gBAAKtB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACjB,EAAA,CAAAgB,OAAS;IAACa,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAGpCzB,WAAW,EAAE;EACbqB,KAAK,EAAEP,cAAc;EACrBY,KAAK,EAAEnB,cAAK,CAACmB;AACf,CAAC,CAAC","ignoreList":[]}

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

@@ -12,14 +12,14 @@ var _isNode = _interopRequireDefault(require("@semcore/core/lib/utils/isNode"));
 var _notice = _interopRequireDefault(require("@semcore/notice"));
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./notice.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255)));border-color:transparent;background-clip:padding-box;position:relative}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255)))}@media (color-gamut:p3){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.96716 0.95079 0.99961), color(display-p3 0.87344 0.9059 0.99962)))}}}.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1px;border-radius:inherit;visibility:var(--beforeVisibility_1slbx);background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))  ) border-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) padding-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_:before{background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))  ) border-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) padding-box}@media (color-gamut:p3){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_:before{background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))  ) border-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) padding-box}}}.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_ .___SLabel_1slbx_gg_{color:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250))}.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_ .___SCloseIcon_1slbx_gg_{color:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}@media (hover:hover){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_ .___SCloseIcon_1slbx_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_ .___SCloseIcon_1slbx_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SHighlightedNotice_1slbx_gg_.__beforeVisibility_1slbx_gg_ .___SCloseIcon_1slbx_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}}", /*__inner_css_end__*/"1slbx_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight,linear-gradient(90deg in oklch,#f7f3ff,#dee7ff));border-color:#0000;background-clip:padding-box;position:relative}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight,linear-gradient(90deg in oklch,#f7f3ff,#dee7ff))}@media (color-gamut:p3){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .96716 .95079 .99961),color(display-p3 .87344 .9059 .99962)))}}}.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1px;border-radius:inherit;visibility:var(--beforeVisibility_v4i66);background:var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) padding-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_:before{background:var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5)) padding-box}@media (color-gamut:p3){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_:before{background:var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe)) border-box,var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5)) padding-box}}}.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_ .___SLabel_v4i66_gg_{color:var(--intergalactic-icon-primary-feature-highlight,#9041fa)}.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_ .___SCloseIcon_v4i66_gg_{color:var(--intergalactic-icon-primary-neutral,#00040186)}@media (hover:hover){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_ .___SCloseIcon_v4i66_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active,#00030095)}@supports (color:color(display-p3 0 0 0%)){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_ .___SCloseIcon_v4i66_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active,#00030095)}@media (color-gamut:p3){.___SHighlightedNotice_v4i66_gg_.__beforeVisibility_v4i66_gg_ .___SCloseIcon_v4i66_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active,color(display-p3 .00228 .01289 .00252/.583))}}}}", /*__inner_css_end__*/"v4i66_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedNotice": "___SHighlightedNotice_1slbx_gg_",
-  "_beforeVisibility": "__beforeVisibility_1slbx_gg_",
-  "--beforeVisibility": "--beforeVisibility_1slbx",
-  "__SLabel": "___SLabel_1slbx_gg_",
-  "__SCloseIcon": "___SCloseIcon_1slbx_gg_"
+  "__SHighlightedNotice": "___SHighlightedNotice_v4i66_gg_",
+  "_beforeVisibility": "__beforeVisibility_v4i66_gg_",
+  "--beforeVisibility": "--beforeVisibility_v4i66",
+  "__SLabel": "___SLabel_v4i66_gg_",
+  "__SCloseIcon": "___SCloseIcon_v4i66_gg_"
 });
 class NoticeFHRoot extends _core.Component {
   renderSmartMode() {
@@ -61,6 +61,12 @@ class NoticeFHRoot extends _core.Component {
     }), advancedMode ? this.renderAdvancedMode() : this.renderSmartMode());
   }
 }
+
+/**
+ * Notice FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#notice|Docs}
+ */
 (0, _defineProperty2.default)(NoticeFHRoot, "displayName", 'NoticeFH');
 (0, _defineProperty2.default)(NoticeFHRoot, "style", style);
 const NoticeFH = exports.NoticeFH = (0, _core.createComponent)(NoticeFHRoot, {

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

@@ -1 +1 @@
-{"version":3,"file":"Notice.js","names":["_core","require","_findComponent","_isNode","_interopRequireDefault","_notice","_react","style","sstyled","insert","NoticeFHRoot","Component","renderSmartMode","label","title","text","actions","closable","onClose","asProps","default","createElement","Fragment","isNode","Label","Content","Title","Text","Actions","Close","onClick","renderAdvancedMode","Children","render","_ref","_ref2","SHighlightedNotice","Notice","styles","visible","advancedMode","isAdvanceMode","NoticeFH","displayName","beforeVisibility","undefined","cn","assignProps","_defineProperty2","exports","createComponent"],"sources":["../../../../src/components/notice/Notice.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\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';\nimport type { HighlightedNoticeComponent } from './Notice.type';\n\nclass NoticeFHRoot extends Component<NoticeSmartProps> {\n  static displayName = 'NoticeFH';\n  static style = style;\n\n  renderSmartMode() {\n    const { label, title, text, actions, closable, onClose } = this.asProps;\n\n    return (\n      <>\n        {isNode(label) && <Notice.Label>{label}</Notice.Label>}\n        <Notice.Content>\n          {isNode(title) && <Notice.Title>{title}</Notice.Title>}\n          {isNode(text) && <Notice.Text>{text}</Notice.Text>}\n          {isNode(actions) && <Notice.Actions>{actions}</Notice.Actions>}\n        </Notice.Content>\n        {closable && <Notice.Close onClick={onClose} />}\n      </>\n    );\n  }\n\n  renderAdvancedMode() {\n    const { Children } = this.asProps;\n\n    return <Children />;\n  }\n\n  render() {\n    const SHighlightedNotice = Root;\n    const { styles, Children, visible } = this.asProps;\n\n    const advancedMode = isAdvanceMode(Children, [\n      NoticeFH.Label.displayName,\n      NoticeFH.Actions.displayName,\n      NoticeFH.Content.displayName,\n      NoticeFH.Title.displayName,\n      NoticeFH.Text.displayName,\n      NoticeFH.Close.displayName,\n    ]);\n\n    const beforeVisibility = visible === undefined || visible ? 'visible' : 'hidden';\n\n    return sstyled(styles)(\n      <SHighlightedNotice render={Notice} beforeVisibility={beforeVisibility} __excludeProps={['title']} use:theme={undefined}>\n        {advancedMode ? this.renderAdvancedMode() : this.renderSmartMode()}\n      </SHighlightedNotice>,\n    );\n  }\n}\n\nexport const NoticeFH = createComponent(NoticeFHRoot, {\n  Label: Notice.Label,\n  Actions: Notice.Actions,\n  Content: Notice.Content,\n  Title: Notice.Title,\n  Text: Notice.Text,\n  Close: Notice.Close,\n}) as HighlightedNoticeComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Notice.js","names":["_core","require","_findComponent","_isNode","_interopRequireDefault","_notice","_react","style","sstyled","insert","NoticeFHRoot","Component","renderSmartMode","label","title","text","actions","closable","onClose","asProps","default","createElement","Fragment","isNode","Label","Content","Title","Text","Actions","Close","onClick","renderAdvancedMode","Children","render","_ref","_ref2","SHighlightedNotice","Notice","styles","visible","advancedMode","isAdvanceMode","NoticeFH","displayName","beforeVisibility","undefined","cn","assignProps","_defineProperty2","exports","createComponent"],"sources":["../../../../src/components/notice/Notice.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\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';\nimport type { HighlightedNoticeComponent } from './Notice.type';\n\nclass NoticeFHRoot extends Component<NoticeSmartProps> {\n  static displayName = 'NoticeFH';\n  static style = style;\n\n  renderSmartMode() {\n    const { label, title, text, actions, closable, onClose } = this.asProps;\n\n    return (\n      <>\n        {isNode(label) && <Notice.Label>{label}</Notice.Label>}\n        <Notice.Content>\n          {isNode(title) && <Notice.Title>{title}</Notice.Title>}\n          {isNode(text) && <Notice.Text>{text}</Notice.Text>}\n          {isNode(actions) && <Notice.Actions>{actions}</Notice.Actions>}\n        </Notice.Content>\n        {closable && <Notice.Close onClick={onClose} />}\n      </>\n    );\n  }\n\n  renderAdvancedMode() {\n    const { Children } = this.asProps;\n\n    return <Children />;\n  }\n\n  render() {\n    const SHighlightedNotice = Root;\n    const { styles, Children, visible } = this.asProps;\n\n    const advancedMode = isAdvanceMode(Children, [\n      NoticeFH.Label.displayName,\n      NoticeFH.Actions.displayName,\n      NoticeFH.Content.displayName,\n      NoticeFH.Title.displayName,\n      NoticeFH.Text.displayName,\n      NoticeFH.Close.displayName,\n    ]);\n\n    const beforeVisibility = visible === undefined || visible ? 'visible' : 'hidden';\n\n    return sstyled(styles)(\n      <SHighlightedNotice render={Notice} beforeVisibility={beforeVisibility} __excludeProps={['title']} use:theme={undefined}>\n        {advancedMode ? this.renderAdvancedMode() : this.renderSmartMode()}\n      </SHighlightedNotice>,\n    );\n  }\n}\n\n/**\n * Notice FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#notice|Docs}\n */\nexport const NoticeFH = createComponent<\n  HighlightedNoticeComponent,\n  typeof NoticeFHRoot\n>(NoticeFHRoot, {\n  Label: Notice.Label,\n  Actions: Notice.Actions,\n  Content: Notice.Content,\n  Title: Notice.Title,\n  Text: Notice.Text,\n  Close: Notice.Close,\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,8 +13,7 @@ SHighlightedNotice[beforeVisibility] {
     border-radius: inherit;
     visibility: var(--beforeVisibility);
 
-    background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))
-  ) border-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box;
+    background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box;
   }
 
   & SLabel {
@@ -28,4 +27,4 @@ SHighlightedNotice[beforeVisibility] {
       color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.088 0.026 147.7 / 0.583));
     }
   }
-}
+}

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

@@ -12,15 +12,15 @@ var _pills = _interopRequireDefault(require("@semcore/pills"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
 /*!__reshadow-styles__:"./pills.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedPill_126ap_gg_{border:1px solid transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;background-origin:border-box;background-clip:padding-box,border-box;z-index:1;position:relative}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_126ap_gg_{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedPill_126ap_gg_{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedPill_126ap_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);will-change:opacity,transform;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_126ap_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SHighlightedPill_126ap_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}.___SHighlightedPill_126ap_gg_._neighborLocation_left_126ap_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedPill_126ap_gg_._neighborLocation_right_126ap_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedPill_126ap_gg_._neighborLocation_both_126ap_gg_::before{border-radius:0}@media (hover:hover){.___SHighlightedPill_126ap_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255))) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_126ap_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255))) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedPill_126ap_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, color(display-p3 0.96716 0.95079 0.99961), color(display-p3 0.87344 0.9059 0.99962))) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}}.___SHighlightedPill_126ap_gg_.__selected_126ap_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255))) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245))) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_126ap_gg_.__selected_126ap_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255))) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedPill_126ap_gg_.__selected_126ap_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, color(display-p3 0.96716 0.95079 0.99961), color(display-p3 0.87344 0.9059 0.99962))) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245))) border-box}}}.___SPills_126ap_gg_ .___SHighlightedPill_126ap_gg_:focus-visible{outline:0}.___SPills_126ap_gg_ .___SHighlightedPill_126ap_gg_:focus-visible::before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedPill_126ap_gg_:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedPill_126ap_gg_:focus-visible::before{display:none}}", /*__inner_css_end__*/"126ap_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedPill_1l6cc_gg_{border:1px solid #0000;background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box;background-origin:border-box;background-clip:padding-box,border-box;z-index:1;position:relative}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_1l6cc_gg_{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box}@media (color-gamut:p3){.___SHighlightedPill_1l6cc_gg_{background:linear-gradient(#fff,#fff) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe)) border-box}}}.___SHighlightedPill_1l6cc_gg_:before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);will-change:opacity,transform;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_1l6cc_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SHighlightedPill_1l6cc_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}.___SHighlightedPill_1l6cc_gg_._neighborLocation_left_1l6cc_gg_:before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedPill_1l6cc_gg_._neighborLocation_right_1l6cc_gg_:before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedPill_1l6cc_gg_._neighborLocation_both_1l6cc_gg_:before{border-radius:0}@media (hover:hover){.___SHighlightedPill_1l6cc_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active,linear-gradient(90deg in oklch,#f7f3ff,#dee7ff)) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_1l6cc_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active,linear-gradient(90deg in oklch,#f7f3ff,#dee7ff)) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe)) border-box}@media (color-gamut:p3){.___SHighlightedPill_1l6cc_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active,linear-gradient(90deg in oklch,color(display-p3 .96716 .95079 .99961),color(display-p3 .87344 .9059 .99962))) padding-box,var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe)) border-box}}}}.___SHighlightedPill_1l6cc_gg_.__selected_1l6cc_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active,linear-gradient(90deg in oklch,#f7f3ff,#dee7ff)) padding-box,var(--intergalactic-control-primary-feature-highlight-hover,linear-gradient(90deg in oklch,#a261fd,#94a5f5)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:#0000}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedPill_1l6cc_gg_.__selected_1l6cc_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active,linear-gradient(90deg in oklch,#f7f3ff,#dee7ff)) padding-box,var(--intergalactic-control-primary-feature-highlight-hover,linear-gradient(90deg in oklch,#a261fd,#94a5f5)) border-box}@media (color-gamut:p3){.___SHighlightedPill_1l6cc_gg_.__selected_1l6cc_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active,linear-gradient(90deg in oklch,color(display-p3 .96716 .95079 .99961),color(display-p3 .87344 .9059 .99962))) padding-box,var(--intergalactic-control-primary-feature-highlight-hover,linear-gradient(90deg in oklch,#a261fd,#94a5f5)) border-box}}}.___SPills_1l6cc_gg_ .___SHighlightedPill_1l6cc_gg_:focus-visible{outline:none}.___SPills_1l6cc_gg_ .___SHighlightedPill_1l6cc_gg_:focus-visible:before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedPill_1l6cc_gg_:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedPill_1l6cc_gg_:focus-visible:before{display:none}}", /*__inner_css_end__*/"1l6cc_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedPill": "___SHighlightedPill_126ap_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_126ap_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_126ap_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_126ap_gg_",
-  "_selected": "__selected_126ap_gg_",
-  "__SPills": "___SPills_126ap_gg_"
+  "__SHighlightedPill": "___SHighlightedPill_1l6cc_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1l6cc_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1l6cc_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1l6cc_gg_",
+  "_selected": "__selected_1l6cc_gg_",
+  "__SPills": "___SPills_1l6cc_gg_"
 });
 class PillsFHRoot extends _core.Component {
   render() {
@@ -84,11 +84,18 @@ function HighlightedItemAddon(props) {
     count: animatedSparkleCount
   })));
 }
+const HighlightedItem = (0, _core.createComponent)(HighlightedItemRoot, {
+  Text: _pills.default.Item.Text,
+  Addon: HighlightedItemAddon
+});
+
+/**
+ * Pills FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#pills|Docs}
+ */
 const PillsFH = exports.PillsFH = (0, _core.createComponent)(PillsFHRoot, {
   Item: _pills.default.Item,
-  HighlightedItem: (0, _core.createComponent)(HighlightedItemRoot, {
-    Text: _pills.default.Item.Text,
-    Addon: HighlightedItemAddon
-  })
+  HighlightedItem
 });
 //# sourceMappingURL=Pills.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pills.js","names":["_core","require","_m","_interopRequireDefault","_pills","_react","_AnimatedSparkles","style","sstyled","insert","PillsFHRoot","Component","render","_ref","asProps","default","createElement","Pills","assignProps","_defineProperty2","HighlightedItemRoot","constructor","args","clicked","handleClick","e","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref4","SHighlightedPill","Item","styles","cn","bind","HighlightedItemAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","children","Addon","undefined","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 } = props;\n  return (\n    <Root render={Pills.Item.Addon}>\n      {children !== undefined\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Root>\n  );\n}\n\nexport const PillsFH = createComponent(PillsFHRoot, {\n  Item: Pills.Item,\n  HighlightedItem: createComponent(HighlightedItemRoot, { Text: Pills.Item.Text, Addon: HighlightedItemAddon }),\n}) as unknown as HighlightedPillComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Pills.js","names":["_core","require","_m","_interopRequireDefault","_pills","_react","_AnimatedSparkles","style","sstyled","insert","PillsFHRoot","Component","render","_ref","asProps","default","createElement","Pills","assignProps","_defineProperty2","HighlightedItemRoot","constructor","args","clicked","handleClick","e","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref4","SHighlightedPill","Item","styles","cn","bind","HighlightedItemAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","children","Addon","undefined","Fragment","color","AnimatedSparkles","show","count","HighlightedItem","createComponent","Text","PillsFH","exports"],"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, HighlightedPillItemComponent } 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 } = props;\n  return (\n    <Root render={Pills.Item.Addon}>\n      {children !== undefined\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Root>\n  );\n}\n\nconst HighlightedItem = createComponent<\n  HighlightedPillItemComponent,\n  typeof HighlightedItemRoot\n>(HighlightedItemRoot, {\n  Text: Pills.Item.Text,\n  Addon: HighlightedItemAddon,\n});\n\n/**\n * Pills FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#pills|Docs}\n */\nexport const PillsFH = createComponent<\n  HighlightedPillComponent,\n  typeof PillsFHRoot\n>(PillsFHRoot, {\n  Item: Pills.Item,\n  HighlightedItem,\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +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":[]}
+{"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 HighlightedPillItemComponent = Intergalactic.Component<'div', PillProps> & {\n  Text: typeof Box;\n  Addon: Intergalactic.Component<'div', HighlightedItemAddonProps>;\n};\n\nexport type HighlightedPillComponent = typeof Pills & {\n  HighlightedItem: HighlightedPillItemComponent;\n};\n"],"mappings":"","ignoreList":[]}