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

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

@@ -12,11 +12,11 @@ var _radio = _interopRequireWildcard(require("@semcore/radio"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
 /*!__reshadow-styles__:"./radio.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedRadio_1r6r3_gg_{position:relative}.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]{border-radius:50%;background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]{background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254)))}@media (color-gamut:p3){.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]{background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254)))}}}.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:50%;border-width:0;pointer-events:none;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(.9);transition:margin calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,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%)){.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]::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){.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]::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)))}}}.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) [data-ui-name=\"Value.RadioMark\"]::after{content:\"\";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));top:50%;left:50%;width:calc(100% - 2px);height:calc(100% - 2px);transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{margin:-4px;opacity:1;transform:scale(1);transition:inherit}@supports not (-webkit-mask-composite:xor){.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{display:none}.___SHighlightedRadio_1r6r3_gg_:not(._state_invalid_1r6r3_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{display:none}}", /*__inner_css_end__*/"1r6r3_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedRadio_o6uny_gg_{position:relative}.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]{border-radius:50%;background:var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]{background:var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,#d2b3ff,#b0c1fe))}@media (color-gamut:p3){.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]{background:var(--intergalactic-border-feature-highlight,linear-gradient(90deg in oklch,color(display-p3 .80738 .70018 .99486),#b0c1fe))}}}.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]:before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:50%;border-width:0;pointer-events:none;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(.9);transition:margin calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,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%)){.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) [data-ui-name=\"Value.RadioMark\"]:after{content:\"\";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral,#fff);top:50%;left:50%;width:calc(100% - 2px);height:calc(100% - 2px);transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]:before{margin:-4px;opacity:1;transform:scale(1);transition:inherit}@supports not (-webkit-mask-composite:xor){.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.RadioMark\"]:before,.___SHighlightedRadio_o6uny_gg_:not(._state_invalid_o6uny_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]:before{display:none}}", /*__inner_css_end__*/"o6uny_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedRadio": "___SHighlightedRadio_1r6r3_gg_",
-  "_state_invalid": "_state_invalid_1r6r3_gg_"
+  "__SHighlightedRadio": "___SHighlightedRadio_o6uny_gg_",
+  "_state_invalid": "_state_invalid_o6uny_gg_"
 });
 class RadioFHRoot extends _core.Component {
   constructor(...args) {
@@ -70,6 +70,12 @@ class RadioFHRoot extends _core.Component {
     }), hasChildren ? /*#__PURE__*/_react.default.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RadioFH.Value, null), /*#__PURE__*/_react.default.createElement(RadioFH.Text, null)));
   }
 }
+
+/**
+ * Radio FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#radio|Docs}
+ */
 (0, _defineProperty2.default)(RadioFHRoot, "displayName", 'RadioFH');
 (0, _defineProperty2.default)(RadioFHRoot, "style", style);
 // @ts-ignore

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["_core","require","_radio","_interopRequireWildcard","_react","_interopRequireDefault","_AnimatedSparkles","style","sstyled","insert","RadioFHRoot","Component","constructor","args","_defineProperty2","default","React","createRef","checked","setState","setTimeout","inputRef","current","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","Radio","styles","Children","children","hasChildren","createElement","cn","assignProps","Fragment","RadioFH","Value","Text","RadioGroup","CONTEXT_COMPONENT","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@semcore/core';\nimport type { NSRadio } from '@semcore/radio';\nimport Radio, { RadioGroup } from '@semcore/radio';\nimport React from 'react';\n\nimport style from './radio.shadow.css';\nimport type { HighlightedRadioComponent } from './Radio.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass RadioFHRoot extends Component<NSRadio.Props> {\n  static displayName = 'RadioFH';\n  static style = style;\n  // @ts-ignore\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  state = {\n    checked: false,\n  };\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: this.setChecked, // for click by label / programmatically changed\n      onClick: this.setChecked, // for click by radio\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    // @ts-ignore\n    const { size } = this.context;\n    const checked = this.state.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  setChecked = () => {\n    this.setState({ checked: false });\n    setTimeout(() => {\n      this.setState({ checked: this.inputRef.current?.checked });\n    });\n  };\n\n  render() {\n    const SHighlightedRadio = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedRadio render={Radio}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <RadioFH.Value />\n                <RadioFH.Text />\n              </>\n            )}\n      </SHighlightedRadio>,\n    );\n  }\n}\n\nexport const RadioFH = createComponent(RadioFHRoot, {\n  Text: Radio.Text,\n  Value: Radio.Value,\n  AnimatedSparkles,\n}) as HighlightedRadioComponent;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAIA,IAAAK,iBAAA,GAAAL,OAAA;AAAmF;AAAA,MAAAM,KAAA,8BAAAP,KAAA,CAAAQ,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAEnF,MAAMC,WAAW,SAASC,eAAS,CAAgB;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iCAMtCC,cAAK,CAACC,SAAS,CAAmB,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,iBAEtC;MACNG,OAAO,EAAE;IACX,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,sBAsBY,MAAM;MACjB,IAAI,CAACI,QAAQ,CAAC;QAAED,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCE,UAAU,CAAC,MAAM;QACf,IAAI,CAACD,QAAQ,CAAC;UAAED,OAAO,EAAE,IAAI,CAACG,QAAQ,CAACC,OAAO,EAAEJ;QAAQ,CAAC,CAAC;MAC5D,CAAC,CAAC;IACJ,CAAC;EAAA;EAzBDK,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACH,QAAQ;MAClBI,QAAQ,EAAE,IAAI,CAACC,UAAU;MAAE;MAC3BC,OAAO,EAAE,IAAI,CAACD,UAAU,CAAE;IAC5B,CAAC;EACH;EAEAE,wBAAwBA,CAAA,EAAG;IACzB;IACA,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMZ,OAAO,GAAG,IAAI,CAACa,KAAK,CAACb,OAAO;IAElC,OAAO;MACLc,IAAI,EAAEd,OAAO;MACbe,GAAG,EAAEJ,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCK,IAAI,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EASAM,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAIMC,cAAK;IAHlC,MAAM;MAAEC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACP,OAAO;IAEhE,OAAAC,KAAA,GAAO,IAAA9B,aAAO,EAACiC,MAAM,CAAC,eACpBrC,MAAA,CAAAW,OAAA,CAAA8B,aAAA,CAACN,iBAAiB,EAAAD,KAAA,CAAAQ,EAAA;MAAA,OAAA9C,KAAA,CAAA+C,WAAA,MAAAX,IAAA;IAAA,IACfQ,WAAW,gBACRxC,MAAA,CAAAW,OAAA,CAAA8B,aAAA,CAACH,QAAQ,EAAAJ,KAAA,CAAAQ,EAAA,gBAAE,CAAC,gBAEV1C,MAAA,CAAAW,OAAA,CAAA8B,aAAA,CAAAzC,MAAA,CAAAW,OAAA,CAAAiC,QAAA,qBACE5C,MAAA,CAAAW,OAAA,CAAA8B,aAAA,CAACI,OAAO,CAACC,KAAK,MAAE,CAAC,eACjB9C,MAAA,CAAAW,OAAA,CAAA8B,aAAA,CAACI,OAAO,CAACE,IAAI,MAAE,CACf,CAES,CAAC;EAExB;AACF;AAAC,IAAArC,gBAAA,CAAAC,OAAA,EAxDKL,WAAW,iBACM,SAAS;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD1BL,WAAW,WAEAH,KAAK;AACpB;AAAA,IAAAO,gBAAA,CAAAC,OAAA,EAHIL,WAAW,iBAIM0C,iBAAU,CAACC,uBAAiB,CAAC;AAsD7C,MAAMJ,OAAO,GAAAK,OAAA,CAAAL,OAAA,GAAG,IAAAM,qBAAe,EAAC7C,WAAW,EAAE;EAClDyC,IAAI,EAAEX,cAAK,CAACW,IAAI;EAChBD,KAAK,EAAEV,cAAK,CAACU,KAAK;EAClBM,gBAAgB,EAAhBA;AACF,CAAC,CAA8B","ignoreList":[]}
+{"version":3,"file":"Radio.js","names":["_core","require","_radio","_interopRequireWildcard","_react","_interopRequireDefault","_AnimatedSparkles","style","sstyled","insert","RadioFHRoot","Component","constructor","args","_defineProperty2","default","React","createRef","checked","setState","setTimeout","inputRef","current","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","Radio","styles","Children","children","hasChildren","createElement","cn","assignProps","Fragment","RadioFH","Value","Text","RadioGroup","CONTEXT_COMPONENT","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@semcore/core';\nimport type { NSRadio } from '@semcore/radio';\nimport Radio, { RadioGroup } from '@semcore/radio';\nimport React from 'react';\n\nimport style from './radio.shadow.css';\nimport type { HighlightedRadioComponent } from './Radio.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass RadioFHRoot extends Component<NSRadio.Props> {\n  static displayName = 'RadioFH';\n  static style = style;\n  // @ts-ignore\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  state = {\n    checked: false,\n  };\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: this.setChecked, // for click by label / programmatically changed\n      onClick: this.setChecked, // for click by radio\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    // @ts-ignore\n    const { size } = this.context;\n    const checked = this.state.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  setChecked = () => {\n    this.setState({ checked: false });\n    setTimeout(() => {\n      this.setState({ checked: this.inputRef.current?.checked });\n    });\n  };\n\n  render() {\n    const SHighlightedRadio = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedRadio render={Radio}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <RadioFH.Value />\n                <RadioFH.Text />\n              </>\n            )}\n      </SHighlightedRadio>,\n    );\n  }\n}\n\n/**\n * Radio FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#radio|Docs}\n */\nexport const RadioFH = createComponent<\n  HighlightedRadioComponent,\n  typeof RadioFHRoot\n>(RadioFHRoot, {\n  Text: Radio.Text,\n  Value: Radio.Value,\n  AnimatedSparkles,\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -27,6 +27,12 @@ function Trigger(props) {
     "tag": _ButtonTrigger.ButtonTriggerFH
   }, _ref2), hasChildren ? /*#__PURE__*/_react.default.createElement(Children, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SelectFH.Trigger.Addon, null), /*#__PURE__*/_react.default.createElement(SelectFH.Trigger.Text, null)));
 }
+
+/**
+ * Select FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#select|Docs}
+ */
 const SelectFH = exports.SelectFH = (0, _core.createComponent)(SelectFHRoot, {
   Trigger: [Trigger, {
     Text: _ButtonTrigger.ButtonTriggerFH.Text,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["_core","require","_select","_interopRequireDefault","_react","_ButtonTrigger","SelectFHRoot","Component","render","_ref","asProps","default","createElement","Select","assignProps","_defineProperty2","Trigger","props","_ref2","arguments[0]","Children","children","hasChildren","ButtonTriggerFH","Fragment","SelectFH","Addon","Text","exports","createComponent","Popper","Menu","Option","List"],"sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component } from '@semcore/core';\nimport Select from '@semcore/select';\nimport React from 'react';\n\nimport { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';\n\nclass SelectFHRoot extends Component {\n  static displayName = 'SelectFH';\n\n  render() {\n    return (\n      <Root render={Select} />\n    );\n  }\n}\n\nfunction Trigger(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n\n  return (\n    <Root render={Select.Trigger} tag={ButtonTriggerFH}>\n      {hasChildren\n        ? <Children />\n        : (\n            <>\n              <SelectFH.Trigger.Addon />\n              <SelectFH.Trigger.Text />\n            </>\n          )}\n    </Root>\n  );\n}\n\nexport const SelectFH = createComponent(SelectFHRoot, {\n  Trigger: [Trigger, {\n    Text: ButtonTriggerFH.Text,\n    Addon: ButtonTriggerFH.Addon,\n  }],\n  Popper: Select.Popper,\n  Menu: Select.Menu,\n  Option: Select.Option,\n  List: Select.List,\n}) as unknown as typeof Select;\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAEA,MAAMK,YAAY,SAASC,eAAS,CAAC;EAGnCC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;IACP,oBACEN,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAcC,eAAM,MAAAb,KAAA,CAAAc,WAAA,MAAAL,IAAA,CAAG,CAAC;EAE5B;AACF;AAAC,IAAAM,gBAAA,CAAAJ,OAAA,EARKL,YAAY,iBACK,UAAU;AASjC,SAASU,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EAEjD,oBACEb,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAcC,eAAM,CAACG,OAAO,MAAAhB,KAAA,CAAAc,WAAA;IAAA,OAAOS;EAAe,GAAAL,KAAA,GAC/CI,WAAW,gBACRlB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACQ,QAAQ,MAAE,CAAC,gBAEVhB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAAR,MAAA,CAAAO,OAAA,CAAAa,QAAA,qBACEpB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACa,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1BtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACa,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;AAEO,MAAMF,QAAQ,GAAAG,OAAA,CAAAH,QAAA,GAAG,IAAAI,qBAAe,EAACvB,YAAY,EAAE;EACpDU,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAEJ,8BAAe,CAACI,IAAI;IAC1BD,KAAK,EAAEH,8BAAe,CAACG;EACzB,CAAC,CAAC;EACFI,MAAM,EAAEjB,eAAM,CAACiB,MAAM;EACrBC,IAAI,EAAElB,eAAM,CAACkB,IAAI;EACjBC,MAAM,EAAEnB,eAAM,CAACmB,MAAM;EACrBC,IAAI,EAAEpB,eAAM,CAACoB;AACf,CAAC,CAA6B","ignoreList":[]}
+{"version":3,"file":"Select.js","names":["_core","require","_select","_interopRequireDefault","_react","_ButtonTrigger","SelectFHRoot","Component","render","_ref","asProps","default","createElement","Select","assignProps","_defineProperty2","Trigger","props","_ref2","arguments[0]","Children","children","hasChildren","ButtonTriggerFH","Fragment","SelectFH","Addon","Text","exports","createComponent","Popper","Menu","Option","List"],"sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component } from '@semcore/core';\nimport Select from '@semcore/select';\nimport React from 'react';\n\nimport { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';\n\nclass SelectFHRoot extends Component {\n  static displayName = 'SelectFH';\n\n  render() {\n    return (\n      <Root render={Select} />\n    );\n  }\n}\n\nfunction Trigger(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n\n  return (\n    <Root render={Select.Trigger} tag={ButtonTriggerFH}>\n      {hasChildren\n        ? <Children />\n        : (\n            <>\n              <SelectFH.Trigger.Addon />\n              <SelectFH.Trigger.Text />\n            </>\n          )}\n    </Root>\n  );\n}\n\n/**\n * Select FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#select|Docs}\n */\nexport const SelectFH: typeof Select = createComponent<\n  typeof Select,\n  typeof SelectFHRoot\n>(SelectFHRoot, {\n  Trigger: [Trigger, {\n    Text: ButtonTriggerFH.Text,\n    Addon: ButtonTriggerFH.Addon,\n  }],\n  Popper: Select.Popper,\n  Menu: Select.Menu,\n  Option: Select.Option,\n  List: Select.List,\n});\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAEA,MAAMK,YAAY,SAASC,eAAS,CAAC;EAGnCC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;IACP,oBACEN,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAcC,eAAM,MAAAb,KAAA,CAAAc,WAAA,MAAAL,IAAA,CAAG,CAAC;EAE5B;AACF;AAAC,IAAAM,gBAAA,CAAAJ,OAAA,EARKL,YAAY,iBACK,UAAU;AASjC,SAASU,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EAEjD,oBACEb,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAcC,eAAM,CAACG,OAAO,MAAAhB,KAAA,CAAAc,WAAA;IAAA,OAAOS;EAAe,GAAAL,KAAA,GAC/CI,WAAW,gBACRlB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACQ,QAAQ,MAAE,CAAC,gBAEVhB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAAAR,MAAA,CAAAO,OAAA,CAAAa,QAAA,qBACEpB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACa,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1BtB,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACa,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMF,QAAuB,GAAAG,OAAA,CAAAH,QAAA,GAAG,IAAAI,qBAAe,EAGpDvB,YAAY,EAAE;EACdU,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAEJ,8BAAe,CAACI,IAAI;IAC1BD,KAAK,EAAEH,8BAAe,CAACG;EACzB,CAAC,CAAC;EACFI,MAAM,EAAEjB,eAAM,CAACiB,MAAM;EACrBC,IAAI,EAAElB,eAAM,CAACkB,IAAI;EACjBC,MAAM,EAAEnB,eAAM,CAACmB,MAAM;EACrBC,IAAI,EAAEpB,eAAM,CAACoB;AACf,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/components/switch/Switch.js

@@ -11,12 +11,12 @@ var _switch = _interopRequireDefault(require("@semcore/switch"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
 /*!__reshadow-styles__:"./switch.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SToggle_2rjpq_gg_{position:relative;transform:translate(0)}.___SToggle_2rjpq_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:inherit;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);pointer-events:none;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%)){.___SToggle_2rjpq_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){.___SToggle_2rjpq_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)))}}}.___SToggle_2rjpq_gg_.__checked_2rjpq_gg_{color:var(--intergalactic-control-primary-info, rgb(26, 30, 26));background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245)))}.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible){box-shadow:none;outline:0}.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible)::before{margin:-4px;opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible){outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible)::before{display:none}}", /*__inner_css_end__*/"2rjpq_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SToggle_23kny_gg_{position:relative;transform:translate(0)}.___SToggle_23kny_gg_:before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:inherit;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);pointer-events:none;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%)){.___SToggle_23kny_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SToggle_23kny_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}.___SToggle_23kny_gg_.__checked_23kny_gg_{color:var(--intergalactic-control-primary-info,#1a1e1a);background-image:var(--intergalactic-control-primary-feature-highlight,linear-gradient(90deg in oklch,#a261fd,#94a5f5))}.___SToggle_23kny_gg_:has(.___SInput_23kny_gg_:focus-visible){box-shadow:none;outline:none}.___SToggle_23kny_gg_:has(.___SInput_23kny_gg_:focus-visible):before{margin:-4px;opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SToggle_23kny_gg_:has(.___SInput_23kny_gg_:focus-visible){outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SToggle_23kny_gg_:has(.___SInput_23kny_gg_:focus-visible):before{display:none}}", /*__inner_css_end__*/"23kny_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SToggle": "___SToggle_2rjpq_gg_",
-  "_checked": "__checked_2rjpq_gg_",
-  "__SInput": "___SInput_2rjpq_gg_"
+  "__SToggle": "___SToggle_23kny_gg_",
+  "_checked": "__checked_23kny_gg_",
+  "__SInput": "___SInput_23kny_gg_"
 });
 class SwitchFHRoot extends _core.Component {
   constructor(...args) {
@@ -68,6 +68,12 @@ function Value(props) {
     }, _ref2)
   }));
 }
+
+/**
+ * Switch FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#switch|Docs}
+ */
 const SwitchFH = exports.SwitchFH = (0, _core.createComponent)(SwitchFHRoot, {
   Addon: _switch.default.Addon,
   Value: Value,

package/lib/cjs/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["_core","require","_switch","_interopRequireDefault","_react","_AnimatedSparkles","style","sstyled","insert","SwitchFHRoot","Component","constructor","args","_defineProperty2","default","React","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","left","show","curve","undefined","render","_ref","_ref3","SInput","Switch","styles","createElement","cn","assignProps","Value","props","_ref2","arguments[0]","_ref4","SToggle","SwitchFH","exports","createComponent","Addon","AnimatedSparkles"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport type { SwitchProps } from '@semcore/switch';\nimport Switch from '@semcore/switch';\nimport React from 'react';\n\nimport style from './switch.shadow.css';\nimport type { HighlightedSwitchComponent } from './Switch.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass SwitchFHRoot extends Component<SwitchProps> {\n  static displayName = 'SwitchFH';\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    let left = '4px';\n    if (size === 'l') left = '12px';\n    if (size === 'xl') left = '14px';\n\n    return {\n      show: checked,\n      curve: size === 'l' || size === 'xl' ? 9 : undefined,\n      left,\n    };\n  }\n\n  render() {\n    const SInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SInput render={Switch} />,\n    );\n  }\n}\n\nfunction Value(props: IRootComponentProps & { onChange: () => void }) {\n  const SToggle = Root;\n\n  return sstyled(props.styles)(<SToggle render={Switch.Value} onChange={props.onChange} />);\n}\n\nexport const SwitchFH = createComponent(SwitchFHRoot, {\n  Addon: Switch.Addon,\n  Value: Value,\n  AnimatedSparkles,\n}) as HighlightedSwitchComponent;\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,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;EAAA;AAAA;AAEnF,MAAMC,YAAY,SAASC,eAAS,CAAc;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iCAIrCC,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;IAC9C,IAAIE,IAAI,GAAG,KAAK;IAChB,IAAIJ,IAAI,KAAK,GAAG,EAAEI,IAAI,GAAG,MAAM;IAC/B,IAAIJ,IAAI,KAAK,IAAI,EAAEI,IAAI,GAAG,MAAM;IAEhC,OAAO;MACLC,IAAI,EAAEH,OAAO;MACbI,KAAK,EAAEN,IAAI,KAAK,GAAG,IAAIA,IAAI,KAAK,IAAI,GAAG,CAAC,GAAGO,SAAS;MACpDH;IACF,CAAC;EACH;EAEAI,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAR,OAAA;MAAAS,KAAA;IACP,MAAMC,MAAM,GAEMC,eAAM;IADxB,OAAAF,KAAA,GAAO,IAAA3B,aAAO,EAAC,IAAI,CAACkB,OAAO,CAACY,MAAM,CAAC,eACjCjC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAACH,MAAM,EAAAD,KAAA,CAAAK,EAAA;MAAA,OAAAvC,KAAA,CAAAwC,WAAA,MAAAP,IAAA;IAAA,EAAkB,CAAC;EAE9B;AACF;AAAC,IAAApB,gBAAA,CAAAC,OAAA,EArCKL,YAAY,iBACK,UAAU;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD3BL,YAAY,WAEDH,KAAK;AAqCtB,SAASmC,KAAKA,CAACC,KAAqD,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACpE,MAAMC,OAAO,GAEiCV,eAAM,CAACK,KAAK;EAA1D,OAAAI,KAAA,GAAO,IAAAtC,aAAO,EAACmC,KAAK,CAACL,MAAM,CAAC,eAACjC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAACQ,OAAO,EAAAD,KAAA,CAAAN,EAAA;IAAA,OAAAvC,KAAA,CAAAwC,WAAA;MAAA,YAAiCE,KAAK,CAACtB;IAAQ,GAAAuB,KAAA;EAAA,EAAG,CAAC;AAC1F;AAEO,MAAMI,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,qBAAe,EAACxC,YAAY,EAAE;EACpDyC,KAAK,EAAEd,eAAM,CAACc,KAAK;EACnBT,KAAK,EAAEA,KAAK;EACZU,gBAAgB,EAAhBA;AACF,CAAC,CAA+B","ignoreList":[]}
+{"version":3,"file":"Switch.js","names":["_core","require","_switch","_interopRequireDefault","_react","_AnimatedSparkles","style","sstyled","insert","SwitchFHRoot","Component","constructor","args","_defineProperty2","default","React","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","left","show","curve","undefined","render","_ref","_ref3","SInput","Switch","styles","createElement","cn","assignProps","Value","props","_ref2","arguments[0]","_ref4","SToggle","SwitchFH","exports","createComponent","Addon","AnimatedSparkles"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport type { NSSwitch } from '@semcore/switch';\nimport Switch from '@semcore/switch';\nimport React from 'react';\n\nimport style from './switch.shadow.css';\nimport type { HighlightedSwitchComponent } from './Switch.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass SwitchFHRoot extends Component<NSSwitch.Props> {\n  static displayName = 'SwitchFH';\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    let left = '4px';\n    if (size === 'l') left = '12px';\n    if (size === 'xl') left = '14px';\n\n    return {\n      show: checked,\n      curve: size === 'l' || size === 'xl' ? 9 : undefined,\n      left,\n    };\n  }\n\n  render() {\n    const SInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SInput render={Switch} />,\n    );\n  }\n}\n\nfunction Value(props: IRootComponentProps & { onChange: () => void }) {\n  const SToggle = Root;\n\n  return sstyled(props.styles)(<SToggle render={Switch.Value} onChange={props.onChange} />);\n}\n\n/**\n * Switch FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#switch|Docs}\n */\nexport const SwitchFH = createComponent<\n  HighlightedSwitchComponent,\n  typeof SwitchFHRoot\n>(SwitchFHRoot, {\n  Addon: Switch.Addon,\n  Value: Value,\n  AnimatedSparkles,\n});\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,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;EAAA;AAAA;AAEnF,MAAMC,YAAY,SAASC,eAAS,CAAiB;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iCAIxCC,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;IAC9C,IAAIE,IAAI,GAAG,KAAK;IAChB,IAAIJ,IAAI,KAAK,GAAG,EAAEI,IAAI,GAAG,MAAM;IAC/B,IAAIJ,IAAI,KAAK,IAAI,EAAEI,IAAI,GAAG,MAAM;IAEhC,OAAO;MACLC,IAAI,EAAEH,OAAO;MACbI,KAAK,EAAEN,IAAI,KAAK,GAAG,IAAIA,IAAI,KAAK,IAAI,GAAG,CAAC,GAAGO,SAAS;MACpDH;IACF,CAAC;EACH;EAEAI,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAR,OAAA;MAAAS,KAAA;IACP,MAAMC,MAAM,GAEMC,eAAM;IADxB,OAAAF,KAAA,GAAO,IAAA3B,aAAO,EAAC,IAAI,CAACkB,OAAO,CAACY,MAAM,CAAC,eACjCjC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAACH,MAAM,EAAAD,KAAA,CAAAK,EAAA;MAAA,OAAAvC,KAAA,CAAAwC,WAAA,MAAAP,IAAA;IAAA,EAAkB,CAAC;EAE9B;AACF;AAAC,IAAApB,gBAAA,CAAAC,OAAA,EArCKL,YAAY,iBACK,UAAU;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD3BL,YAAY,WAEDH,KAAK;AAqCtB,SAASmC,KAAKA,CAACC,KAAqD,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACpE,MAAMC,OAAO,GAEiCV,eAAM,CAACK,KAAK;EAA1D,OAAAI,KAAA,GAAO,IAAAtC,aAAO,EAACmC,KAAK,CAACL,MAAM,CAAC,eAACjC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAACQ,OAAO,EAAAD,KAAA,CAAAN,EAAA;IAAA,OAAAvC,KAAA,CAAAwC,WAAA;MAAA,YAAiCE,KAAK,CAACtB;IAAQ,GAAAuB,KAAA;EAAA,EAAG,CAAC;AAC1F;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMI,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,qBAAe,EAGrCxC,YAAY,EAAE;EACdyC,KAAK,EAAEd,eAAM,CAACc,KAAK;EACnBT,KAAK,EAAEA,KAAK;EACZU,gBAAgB,EAAhBA;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/components/tab-line/TabLine.js

@@ -12,12 +12,12 @@ var _tabLine = _interopRequireDefault(require("@semcore/tab-line"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
 /*!__reshadow-styles__:"./tabLine.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedItem_10jcl_gg_:focus-visible{outline:0}.___SHighlightedItem_10jcl_gg_:focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedItem_10jcl_gg_::after{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_10jcl_gg_.__selected_10jcl_gg_::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_10jcl_gg_.__selected_10jcl_gg_::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@media (color-gamut:p3){.___SHighlightedItem_10jcl_gg_.__selected_10jcl_gg_::after{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)))}}}@media (hover:hover){.___SHighlightedItem_10jcl_gg_:hover:not(:focus-visible)::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_10jcl_gg_:hover:not(:focus-visible)::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@media (color-gamut:p3){.___SHighlightedItem_10jcl_gg_:hover:not(:focus-visible)::after{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)))}}}}.___SHighlightedItem_10jcl_gg_::before{content:\"\";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;height:auto;width:calc(100% + 4px);margin:-4px;padding:2px;box-sizing:content-box;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%)){.___SHighlightedItem_10jcl_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){.___SHighlightedItem_10jcl_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)))}}}.___SHighlightedCaret_10jcl_gg_{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCaret_10jcl_gg_{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@media (color-gamut:p3){.___SHighlightedCaret_10jcl_gg_{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)))}}}", /*__inner_css_end__*/"10jcl_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedItem_k4j9e_gg_:focus-visible{outline:none}.___SHighlightedItem_k4j9e_gg_:focus-visible:before{opacity:1;transform:scale(1)}.___SHighlightedItem_k4j9e_gg_:after{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_k4j9e_gg_.__selected_k4j9e_gg_:after{opacity:1;background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_k4j9e_gg_.__selected_k4j9e_gg_:after{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5))}@media (color-gamut:p3){.___SHighlightedItem_k4j9e_gg_.__selected_k4j9e_gg_:after{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5))}}}@media (hover:hover){.___SHighlightedItem_k4j9e_gg_:hover:not(:focus-visible):after{opacity:1;background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_k4j9e_gg_:hover:not(:focus-visible):after{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5))}@media (color-gamut:p3){.___SHighlightedItem_k4j9e_gg_:hover:not(:focus-visible):after{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5))}}}}.___SHighlightedItem_k4j9e_gg_:before{content:\"\";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;height:auto;width:calc(100% + 4px);margin:-4px;padding:2px;box-sizing:initial;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%)){.___SHighlightedItem_k4j9e_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SHighlightedItem_k4j9e_gg_:before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}.___SHighlightedCaret_k4j9e_gg_{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCaret_k4j9e_gg_{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,#c08eff,#94a5f5))}@media (color-gamut:p3){.___SHighlightedCaret_k4j9e_gg_{background:var(--intergalactic-border-feature-highlight-active,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#94a5f5))}}}", /*__inner_css_end__*/"k4j9e_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedCaret": "___SHighlightedCaret_10jcl_gg_",
-  "__SHighlightedItem": "___SHighlightedItem_10jcl_gg_",
-  "_selected": "__selected_10jcl_gg_"
+  "__SHighlightedCaret": "___SHighlightedCaret_k4j9e_gg_",
+  "__SHighlightedItem": "___SHighlightedItem_k4j9e_gg_",
+  "_selected": "__selected_k4j9e_gg_"
 });
 class TabLineFHRoot extends _core.Component {
   render() {
@@ -81,14 +81,21 @@ function HighlightedAddon(props) {
     count: animatedSparkleCount
   })));
 }
+const HighlightedItem = (0, _core.createComponent)(HighlightedItemRoot, {
+  Text: _tabLine.default.Item.Text,
+  Addon: HighlightedAddon
+});
+
+/**
+ * TabLine FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#tabline|Docs}
+ */
 const TabLineFH = exports.TabLineFH = (0, _core.createComponent)(TabLineFHRoot, {
   Item: [_tabLine.default.Item, {
     Text: _tabLine.default.Item.Text,
     Addon: _tabLine.default.Item.Addon
   }],
-  HighlightedItem: (0, _core.createComponent)(HighlightedItemRoot, {
-    Text: _tabLine.default.Item.Text,
-    Addon: HighlightedAddon
-  })
+  HighlightedItem
 });
 //# sourceMappingURL=TabLine.js.map

package/lib/cjs/components/tab-line/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["_core","require","_m","_interopRequireDefault","_tabLine","_react","_AnimatedSparkles","style","sstyled","insert","TabLineFHRoot","Component","render","_ref","asProps","default","createElement","TabLine","assignProps","_defineProperty2","HighlightedItemRoot","constructor","args","clicked","handleClick","e","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref4","SHighlightedItem","Item","styles","cn","bind","HighlightedAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","children","hasChildren","Addon","Fragment","color","AnimatedSparkles","show","count","TabLineFH","exports","createComponent","Text","HighlightedItem"],"sources":["../../../../src/components/tab-line/TabLine.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport TabLine from '@semcore/tab-line';\nimport React from 'react';\n\nimport style from './tabLine.shadow.css';\nimport type { HighlightedTabLineComponent } from './TabLine.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass TabLineFHRoot extends Component {\n  static displayName = 'TabLineFH';\n  static style = style;\n\n  render() {\n    return (<Root render={TabLine} />);\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 SHighlightedItem = Root;\n\n    return sstyled(this.asProps.styles)(<SHighlightedItem render={TabLine.Item} onClick={this.handleClick.bind(this)} />);\n  }\n}\n\nfunction HighlightedAddon(props: { animatedSparkleCount?: number; clicked: boolean } & IRootComponentProps) {\n  const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n\n  return (\n    <Root render={TabLine.Item.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Root>\n  );\n}\n\nexport const TabLineFH = createComponent(TabLineFHRoot, {\n  Item: [TabLine.Item, { Text: TabLine.Item.Text, Addon: TabLine.Item.Addon }],\n  HighlightedItem: createComponent(HighlightedItemRoot, { Text: TabLine.Item.Text, Addon: HighlightedAddon }),\n}) as unknown as HighlightedTabLineComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLine.js","names":["_core","require","_m","_interopRequireDefault","_tabLine","_react","_AnimatedSparkles","style","sstyled","insert","TabLineFHRoot","Component","render","_ref","asProps","default","createElement","TabLine","assignProps","_defineProperty2","HighlightedItemRoot","constructor","args","clicked","handleClick","e","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref4","SHighlightedItem","Item","styles","cn","bind","HighlightedAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","children","hasChildren","Addon","Fragment","color","AnimatedSparkles","show","count","HighlightedItem","createComponent","Text","TabLineFH","exports"],"sources":["../../../../src/components/tab-line/TabLine.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport TabLine from '@semcore/tab-line';\nimport React from 'react';\n\nimport style from './tabLine.shadow.css';\nimport type { HighlightedTabLineComponent, HighlightedTabLineItemComponent } from './TabLine.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass TabLineFHRoot extends Component {\n  static displayName = 'TabLineFH';\n  static style = style;\n\n  render() {\n    return (<Root render={TabLine} />);\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 SHighlightedItem = Root;\n\n    return sstyled(this.asProps.styles)(<SHighlightedItem render={TabLine.Item} onClick={this.handleClick.bind(this)} />);\n  }\n}\n\nfunction HighlightedAddon(props: { animatedSparkleCount?: number; clicked: boolean } & IRootComponentProps) {\n  const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n\n  return (\n    <Root render={TabLine.Item.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Root>\n  );\n}\n\nconst HighlightedItem = createComponent<HighlightedTabLineItemComponent, typeof HighlightedItemRoot>(\n  HighlightedItemRoot,\n  { Text: TabLine.Item.Text, Addon: HighlightedAddon },\n);\n\n/**\n * TabLine FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#tabline|Docs}\n */\nexport const TabLineFH = createComponent<HighlightedTabLineComponent, typeof TabLineFHRoot>(TabLineFHRoot, {\n  Item: [TabLine.Item, { Text: TabLine.Item.Text, Addon: TabLine.Item.Addon }],\n  HighlightedItem,\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tab-line/TabLine.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../../../src/components/tab-line/TabLine.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type TabLine from '@semcore/tab-line';\n\nexport type HighlightedTabLineComponent = typeof TabLine & {\n  HighlightedItem: typeof TabLine.Item & {\n    Addon: Intergalactic.Component<'div', { animatedSparkleCount?: number }>;\n  };\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../../../src/components/tab-line/TabLine.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type TabLine from '@semcore/tab-line';\n\nexport type HighlightedTabLineItemComponent = typeof TabLine.Item & {\n  Addon: Intergalactic.Component<'div', { animatedSparkleCount?: number }>;\n};\n\nexport type HighlightedTabLineComponent = typeof TabLine & {\n  HighlightedItem: HighlightedTabLineItemComponent;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js

@@ -11,16 +11,16 @@ var _baseTrigger = require("@semcore/base-trigger");
 var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./buttonTrigger.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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;position:relative;z-index:1}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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}}}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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);pointer-events:none;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%)){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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)))}}}@media (hover:hover){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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%)){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_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}}}}.___SHighlightedButtonTrigger_gqbwh_gg_.__active_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_),.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):active{background:linear-gradient(white,white) 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}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible{outline:0;border-color:transparent}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedButtonTrigger_gqbwh_gg_._neighborLocation_left_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_gqbwh_gg_._neighborLocation_right_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_gqbwh_gg_._neighborLocation_both_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible::before{display:none}}", /*__inner_css_end__*/"gqbwh_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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;position:relative;z-index:1}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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}}}.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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);pointer-events:none;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%)){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,#c08eff,#666bdb))}@media (color-gamut:p3){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline,linear-gradient(90deg in oklch,color(display-p3 .72564 .56096 .98326),#666bdb))}}}@media (hover:hover){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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%)){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_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}}}}.___SHighlightedButtonTrigger_1no5h_gg_.__active_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_),.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):active{background:linear-gradient(#fff,#fff) 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}.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):focus-visible{outline:none;border-color:#0000}.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):focus-visible:before{opacity:1;transform:scale(1)}.___SHighlightedButtonTrigger_1no5h_gg_._neighborLocation_left_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_1no5h_gg_._neighborLocation_right_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_1no5h_gg_._neighborLocation_both_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButtonTrigger_1no5h_gg_:not(._state_invalid_1no5h_gg_):not(._state_valid_1no5h_gg_):focus-visible:before{display:none}}", /*__inner_css_end__*/"1no5h_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_gqbwh_gg_",
-  "_state_invalid": "_state_invalid_gqbwh_gg_",
-  "_state_valid": "_state_valid_gqbwh_gg_",
-  "_active": "__active_gqbwh_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_gqbwh_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_gqbwh_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_gqbwh_gg_"
+  "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_1no5h_gg_",
+  "_state_invalid": "_state_invalid_1no5h_gg_",
+  "_state_valid": "_state_valid_1no5h_gg_",
+  "_active": "__active_1no5h_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1no5h_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1no5h_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1no5h_gg_"
 });
 class ButtonTriggerFHRoot extends _core.Component {
   render() {

package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTrigger.js","names":["_core","require","_baseTrigger","_m","_interopRequireDefault","_react","style","sstyled","insert","ButtonTriggerFHRoot","Component","render","_ref","asProps","_ref3","styles","SHighlightedButtonTrigger","ButtonTrigger","default","createElement","cn","assignProps","_defineProperty2","Addon","props","_ref2","arguments[0]","_ref4","SAddon","Children","children","hasChildren","ButtonTriggerFH","exports","createComponent","Text"],"sources":["../../../../src/inner-components/button-trigger/ButtonTrigger.tsx"],"sourcesContent":["import { ButtonTrigger } from '@semcore/base-trigger';\nimport Button from '@semcore/button';\nimport type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './buttonTrigger.shadow.css';\nimport type { HighlightedButtonTriggerComponent } from './ButtonTrigger.type';\nimport { AnimatedSparkles } from '../sparkle/AnimatedSparkles';\n\nclass ButtonTriggerFHRoot extends Component {\n  static displayName = 'ButtonTriggerFH';\n  static style = style;\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButtonTrigger = Root;\n    return sstyled(styles)(\n      <SHighlightedButtonTrigger render={ButtonTrigger} />,\n    );\n  }\n}\n\nfunction Addon(props: IRootComponentProps) {\n  const SAddon = Root;\n  const { Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={ButtonTrigger.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {\n  Text: ButtonTrigger.Text,\n  Addon,\n}) as HighlightedButtonTriggerComponent;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA,IAAAC,YAAA,GAAAD,OAAA;AAIA,IAAAE,EAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAM1B,MAAMC,mBAAmB,SAASC,eAAS,CAAC;EAI1CC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAM;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACF,OAAO;IAC/B,MAAMG,yBAAyB,GAEMC,0BAAa;IADlD,OAAAH,KAAA,GAAO,IAAAP,aAAO,EAACQ,MAAM,CAAC,eACpBV,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACH,yBAAyB,EAAAF,KAAA,CAAAM,EAAA;MAAA,OAAApB,KAAA,CAAAqB,WAAA,MAAAT,IAAA;IAAA,EAAyB,CAAC;EAExD;AACF;AAAC,IAAAU,gBAAA,CAAAJ,OAAA,EAXKT,mBAAmB,iBACF,iBAAiB;AAAA,IAAAa,gBAAA,CAAAJ,OAAA,EADlCT,mBAAmB,WAERH,KAAK;AAWtB,SAASiB,KAAKA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACzC,MAAMC,MAAM,GAGMX,0BAAa,CAACM,KAAK;EAFrC,MAAM;IAAEM,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGP,KAAK;EACjD,OAAAG,KAAA,GAAO,IAAApB,aAAO,EAACiB,KAAK,CAACT,MAAM,CAAC,eAC1BV,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACS,MAAM,EAAAD,KAAA,CAAAP,EAAA;IAAA,OAAApB,KAAA,CAAAqB,WAAA,MAAAI,KAAA;EAAA,IACJM,WAAW,gBACP1B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACU,QAAQ,EAAAF,KAAA,CAAAP,EAAA,gBAAE,CAAC,gBAEXf,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAChB,EAAA,CAAAe,OAAS,EAAAS,KAAA,CAAAP,EAAA;IAAA,SAAO;EAAgD,EAAE,CAEnE,CAAC;AAEb;AAEO,MAAMY,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,qBAAe,EAACzB,mBAAmB,EAAE;EAClE0B,IAAI,EAAElB,0BAAa,CAACkB,IAAI;EACxBZ;AACF,CAAC,CAAsC","ignoreList":[]}
+{"version":3,"file":"ButtonTrigger.js","names":["_core","require","_baseTrigger","_m","_interopRequireDefault","_react","style","sstyled","insert","ButtonTriggerFHRoot","Component","render","_ref","asProps","_ref3","styles","SHighlightedButtonTrigger","ButtonTrigger","default","createElement","cn","assignProps","_defineProperty2","Addon","props","_ref2","arguments[0]","_ref4","SAddon","Children","children","hasChildren","ButtonTriggerFH","exports","createComponent","Text"],"sources":["../../../../src/inner-components/button-trigger/ButtonTrigger.tsx"],"sourcesContent":["import { ButtonTrigger } from '@semcore/base-trigger';\nimport type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './buttonTrigger.shadow.css';\nimport type { HighlightedButtonTriggerComponent } from './ButtonTrigger.type';\n\nclass ButtonTriggerFHRoot extends Component {\n  static displayName = 'ButtonTriggerFH';\n  static style = style;\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButtonTrigger = Root;\n    return sstyled(styles)(\n      <SHighlightedButtonTrigger render={ButtonTrigger} />,\n    );\n  }\n}\n\nfunction Addon(props: IRootComponentProps) {\n  const SAddon = Root;\n  const { Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={ButtonTrigger.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonTriggerFH = createComponent<\n  HighlightedButtonTriggerComponent,\n  typeof ButtonTriggerFHRoot\n>(ButtonTriggerFHRoot, {\n  Text: ButtonTrigger.Text,\n  Addon,\n});\n"],"mappings":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,YAAA,GAAAD,OAAA;AAGA,IAAAE,EAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK1B,MAAMC,mBAAmB,SAASC,eAAS,CAAC;EAI1CC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAM;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACF,OAAO;IAC/B,MAAMG,yBAAyB,GAEMC,0BAAa;IADlD,OAAAH,KAAA,GAAO,IAAAP,aAAO,EAACQ,MAAM,CAAC,eACpBV,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACH,yBAAyB,EAAAF,KAAA,CAAAM,EAAA;MAAA,OAAApB,KAAA,CAAAqB,WAAA,MAAAT,IAAA;IAAA,EAAyB,CAAC;EAExD;AACF;AAAC,IAAAU,gBAAA,CAAAJ,OAAA,EAXKT,mBAAmB,iBACF,iBAAiB;AAAA,IAAAa,gBAAA,CAAAJ,OAAA,EADlCT,mBAAmB,WAERH,KAAK;AAWtB,SAASiB,KAAKA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACzC,MAAMC,MAAM,GAGMX,0BAAa,CAACM,KAAK;EAFrC,MAAM;IAAEM,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGP,KAAK;EACjD,OAAAG,KAAA,GAAO,IAAApB,aAAO,EAACiB,KAAK,CAACT,MAAM,CAAC,eAC1BV,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACS,MAAM,EAAAD,KAAA,CAAAP,EAAA;IAAA,OAAApB,KAAA,CAAAqB,WAAA,MAAAI,KAAA;EAAA,IACJM,WAAW,gBACP1B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACU,QAAQ,EAAAF,KAAA,CAAAP,EAAA,gBAAE,CAAC,gBAEXf,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAChB,EAAA,CAAAe,OAAS,EAAAS,KAAA,CAAAP,EAAA;IAAA,SAAO;EAAgD,EAAE,CAEnE,CAAC;AAEb;AAEO,MAAMY,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,qBAAe,EAG5CzB,mBAAmB,EAAE;EACrB0B,IAAI,EAAElB,0BAAa,CAACkB,IAAI;EACxBZ;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -8,21 +8,21 @@ exports.default = void 0;
 var _core = require("@semcore/core");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/sparkle.shadow.css"*/
-const styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes sparkles_4t4us{50%{transform:rotate(calc(1deg*var(--angle_4t4us))) translateY(200%) scale(var(--scale_4t4us))}to{transform:rotate(calc(1deg*var(--angle_4t4us))) translateY(200%) scale(0)}}.___SSparkle_4t4us_gg_{position:absolute}.___SSparkle_4t4us_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250))}.___SSparkle_4t4us_gg_.__angle_4t4us_gg_.__scale_4t4us_gg_.__duration_4t4us_gg_{transform:rotate(calc(1deg*var(--angle_4t4us))) scale(var(--scale_4t4us));animation-name:sparkles_4t4us;animation-fill-mode:forwards;animation-duration:var(--duration_4t4us)}.___SSparkle_4t4us_gg_.__left_4t4us_gg_{left:var(--left_4t4us)}.___SSparkle_4t4us_gg_.__top_4t4us_gg_{top:var(--top_4t4us)}", /*__inner_css_end__*/"4t4us_gg_"),
+const styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SSparkle_snky3_gg_{position:absolute}.___SSparkle_snky3_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight,#9041fa)}.___SSparkle_snky3_gg_.__angle_snky3_gg_.__scale_snky3_gg_.__duration_snky3_gg_{transform:rotate(calc(1deg*var(--angle_snky3))) scale(var(--scale_snky3));animation-name:sparkles_snky3;animation-fill-mode:forwards;animation-duration:var(--duration_snky3)}@keyframes sparkles_snky3{50%{transform:rotate(calc(1deg*var(--angle_snky3))) translateY(200%) scale(var(--scale_snky3))}to{transform:rotate(calc(1deg*var(--angle_snky3))) translateY(200%) scale(0)}}.___SSparkle_snky3_gg_.__left_snky3_gg_{left:var(--left_snky3)}.___SSparkle_snky3_gg_.__top_snky3_gg_{top:var(--top_snky3)}", /*__inner_css_end__*/"snky3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SSparkle": "___SSparkle_4t4us_gg_",
-  "_angle": "__angle_4t4us_gg_",
-  "_scale": "__scale_4t4us_gg_",
-  "_duration": "__duration_4t4us_gg_",
-  "--angle": "--angle_4t4us",
-  "--scale": "--scale_4t4us",
-  "--duration": "--duration_4t4us",
-  "@sparkles": "sparkles_4t4us",
-  "_left": "__left_4t4us_gg_",
-  "--left": "--left_4t4us",
-  "_top": "__top_4t4us_gg_",
-  "--top": "--top_4t4us"
+  "__SSparkle": "___SSparkle_snky3_gg_",
+  "_angle": "__angle_snky3_gg_",
+  "_scale": "__scale_snky3_gg_",
+  "_duration": "__duration_snky3_gg_",
+  "--angle": "--angle_snky3",
+  "--scale": "--scale_snky3",
+  "--duration": "--duration_snky3",
+  "@sparkles": "sparkles_snky3",
+  "_left": "__left_snky3_gg_",
+  "--left": "--left_snky3",
+  "_top": "__top_snky3_gg_",
+  "--top": "--top_snky3"
 });
 function SvgSparkle(props, ref) {
   var _ref = arguments[0],

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

@@ -1 +1 @@
-{"version":3,"file":"Sparkle.js","names":["_core","require","_react","_interopRequireDefault","styles","sstyled","insert","SvgSparkle","props","ref","_ref","arguments[0]","_ref2","SSparkle","num","index","curve","left","rand","Math","floor","random","angle","sin","PI","x","trunc","odd","scale","animationDuration","default","createElement","cn","assignProps","_default","exports","createBaseComponent"],"sources":["../../../../src/inner-components/sparkle/Sparkle.tsx"],"sourcesContent":["import { createBaseComponent, Root, sstyled } from '@semcore/core';\nimport type { ForwardedRef } from 'react';\nimport React from 'react';\n\nimport styles from './style/sparkle.shadow.css';\n\ntype SparkleProps = {\n  index: number;\n  num: number;\n  curve?: number;\n  top?: string;\n  left?: string;\n};\n\nfunction SvgSparkle(props: SparkleProps, ref: ForwardedRef<SVGSVGElement>) {\n  const SSparkle = Root;\n  const { num, index, curve, left } = props;\n  const rand = Math.floor(Math.random() * 50);\n  const angle = (360 / num) * index + rand;\n  const sin = Math.sin((Math.PI * angle) / 180);\n  const x = curve ? Math.trunc(sin * -1 * curve) : 0;\n  const odd = index % 2;\n  const scale = 1 - odd * 0.3;\n  const animationDuration = `${0.6 - odd * 0.2}s`;\n\n  return sstyled(styles)(\n    <SSparkle\n      ref={ref}\n      aria-hidden={true}\n      render='svg'\n      use:left={x ? `${x + 14}px` : left}\n      scale={scale}\n      duration={animationDuration}\n      angle={angle}\n      width='10'\n      height='10'\n      viewBox='0 0 10 10'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path d='M5.371.269a.39.39 0 0 0-.742 0L3.704 3.08a.977.977 0 0 1-.623.623L.27 4.629a.39.39 0 0 0 0 .742l2.812.925a.977.977 0 0 1 .623.623l.925 2.812a.39.39 0 0 0 .742 0l.925-2.812a.977.977 0 0 1 .623-.623l2.812-.925a.39.39 0 0 0 0-.742L6.92 3.704a.977.977 0 0 1-.623-.623L5.371.27Z' />\n    </SSparkle>,\n  );\n}\n\nexport default createBaseComponent<'svg', SparkleProps>(SvgSparkle);\n"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B;AAAA,MAAAG,MAAA,8BAAAJ,KAAA,CAAAK,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAY1B,SAASC,UAAUA,CAACC,KAAmB,EAAEC,GAAgC,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACzE,MAAMC,QAAQ,GAcH,KAAK;EAbhB,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGT,KAAK;EACzC,MAAMU,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC;EAC3C,MAAMC,KAAK,GAAI,GAAG,GAAGR,GAAG,GAAIC,KAAK,GAAGG,IAAI;EACxC,MAAMK,GAAG,GAAGJ,IAAI,CAACI,GAAG,CAAEJ,IAAI,CAACK,EAAE,GAAGF,KAAK,GAAI,GAAG,CAAC;EAC7C,MAAMG,CAAC,GAAGT,KAAK,GAAGG,IAAI,CAACO,KAAK,CAACH,GAAG,GAAG,CAAC,CAAC,GAAGP,KAAK,CAAC,GAAG,CAAC;EAClD,MAAMW,GAAG,GAAGZ,KAAK,GAAG,CAAC;EACrB,MAAMa,KAAK,GAAG,CAAC,GAAGD,GAAG,GAAG,GAAG;EAC3B,MAAME,iBAAiB,GAAG,GAAG,GAAG,GAAGF,GAAG,GAAG,GAAG,GAAG;EAE/C,OAAAf,KAAA,GAAO,IAAAP,aAAO,EAACD,MAAM,CAAC,eACpBF,MAAA,CAAA4B,OAAA,CAAAC,aAAA,CAAClB,QAAQ,EAAAD,KAAA,CAAAoB,EAAA;IAAA,OAAAhC,KAAA,CAAAiC,WAAA;MAAA,OACFxB,GAAG;MAAA,eACK,IAAI;MAAA,YAEPgB,CAAC,GAAG,GAAGA,CAAC,GAAG,EAAE,IAAI,GAAGR,IAAI;MAAA,SAC3BW,KAAK;MAAA,YACFC,iBAAiB;MAAA,SACpBP,KAAK;MAAA,SACN,IAAI;MAAA,UACH,IAAI;MAAA,WACH,WAAW;MAAA,QACd,MAAM;MAAA,SACL;IAA4B,GAAAZ,IAAA;EAAA,iBAElCR,MAAA,CAAA4B,OAAA,CAAAC,aAAA,SAAAnB,KAAA,CAAAoB,EAAA;IAAA,KAAQ;EAAmR,EAAE,CACrR,CAAC;AAEf;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEc,IAAAM,yBAAmB,EAAsB7B,UAAU,CAAC","ignoreList":[]}
+{"version":3,"file":"Sparkle.js","names":["_core","require","_react","_interopRequireDefault","styles","sstyled","insert","SvgSparkle","props","ref","_ref","arguments[0]","_ref2","SSparkle","num","index","curve","left","rand","Math","floor","random","angle","sin","PI","x","trunc","odd","scale","animationDuration","default","createElement","cn","assignProps","_default","exports","createBaseComponent"],"sources":["../../../../src/inner-components/sparkle/Sparkle.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { createBaseComponent, Root, sstyled } from '@semcore/core';\nimport type { Ref } from 'react';\nimport React from 'react';\n\nimport styles from './style/sparkle.shadow.css';\n\ntype SparkleProps = {\n  index: number;\n  num: number;\n  curve?: number;\n  top?: string;\n  left?: string;\n};\n\nfunction SvgSparkle(props: SparkleProps, ref: Ref<SVGSVGElement>) {\n  const SSparkle = Root;\n  const { num, index, curve, left } = props;\n  const rand = Math.floor(Math.random() * 50);\n  const angle = (360 / num) * index + rand;\n  const sin = Math.sin((Math.PI * angle) / 180);\n  const x = curve ? Math.trunc(sin * -1 * curve) : 0;\n  const odd = index % 2;\n  const scale = 1 - odd * 0.3;\n  const animationDuration = `${0.6 - odd * 0.2}s`;\n\n  return sstyled(styles)(\n    <SSparkle\n      ref={ref}\n      aria-hidden={true}\n      render='svg'\n      use:left={x ? `${x + 14}px` : left}\n      scale={scale}\n      duration={animationDuration}\n      angle={angle}\n      width='10'\n      height='10'\n      viewBox='0 0 10 10'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path d='M5.371.269a.39.39 0 0 0-.742 0L3.704 3.08a.977.977 0 0 1-.623.623L.27 4.629a.39.39 0 0 0 0 .742l2.812.925a.977.977 0 0 1 .623.623l.925 2.812a.39.39 0 0 0 .742 0l.925-2.812a.977.977 0 0 1 .623-.623l2.812-.925a.39.39 0 0 0 0-.742L6.92 3.704a.977.977 0 0 1-.623-.623L5.371.27Z' />\n    </SSparkle>,\n  );\n}\n\ntype SparkleComponent = Intergalactic.Component<'svg', SparkleProps>;\n\nexport default createBaseComponent<SparkleComponent>(SvgSparkle);\n"],"mappings":";;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B;AAAA,MAAAG,MAAA,8BAAAJ,KAAA,CAAAK,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAY1B,SAASC,UAAUA,CAACC,KAAmB,EAAEC,GAAuB,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EAChE,MAAMC,QAAQ,GAcH,KAAK;EAbhB,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGT,KAAK;EACzC,MAAMU,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC;EAC3C,MAAMC,KAAK,GAAI,GAAG,GAAGR,GAAG,GAAIC,KAAK,GAAGG,IAAI;EACxC,MAAMK,GAAG,GAAGJ,IAAI,CAACI,GAAG,CAAEJ,IAAI,CAACK,EAAE,GAAGF,KAAK,GAAI,GAAG,CAAC;EAC7C,MAAMG,CAAC,GAAGT,KAAK,GAAGG,IAAI,CAACO,KAAK,CAACH,GAAG,GAAG,CAAC,CAAC,GAAGP,KAAK,CAAC,GAAG,CAAC;EAClD,MAAMW,GAAG,GAAGZ,KAAK,GAAG,CAAC;EACrB,MAAMa,KAAK,GAAG,CAAC,GAAGD,GAAG,GAAG,GAAG;EAC3B,MAAME,iBAAiB,GAAG,GAAG,GAAG,GAAGF,GAAG,GAAG,GAAG,GAAG;EAE/C,OAAAf,KAAA,GAAO,IAAAP,aAAO,EAACD,MAAM,CAAC,eACpBF,MAAA,CAAA4B,OAAA,CAAAC,aAAA,CAAClB,QAAQ,EAAAD,KAAA,CAAAoB,EAAA;IAAA,OAAAhC,KAAA,CAAAiC,WAAA;MAAA,OACFxB,GAAG;MAAA,eACK,IAAI;MAAA,YAEPgB,CAAC,GAAG,GAAGA,CAAC,GAAG,EAAE,IAAI,GAAGR,IAAI;MAAA,SAC3BW,KAAK;MAAA,YACFC,iBAAiB;MAAA,SACpBP,KAAK;MAAA,SACN,IAAI;MAAA,UACH,IAAI;MAAA,WACH,WAAW;MAAA,QACd,MAAM;MAAA,SACL;IAA4B,GAAAZ,IAAA;EAAA,iBAElCR,MAAA,CAAA4B,OAAA,CAAAC,aAAA,SAAAnB,KAAA,CAAAoB,EAAA;IAAA,KAAQ;EAAmR,EAAE,CACrR,CAAC;AAEf;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAIc,IAAAM,yBAAmB,EAAmB7B,UAAU,CAAC","ignoreList":[]}

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

@@ -6,13 +6,13 @@ import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import React from 'react';
 /*!__reshadow-styles__:"./badge.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_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__*/_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 Component {
   render() {
@@ -32,6 +32,12 @@ class BadgeFHRoot extends Component {
     }));
   }
 }
+
+/**
+ * Badge FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#badge|Docs}
+ */
 _defineProperty(BadgeFHRoot, "displayName", 'BadgeFH');
 _defineProperty(BadgeFHRoot, "style", style);
 _defineProperty(BadgeFHRoot, "enhance", [resolveColorEnhance()]);

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["Badge","createComponent","Component","Root","sstyled","resolveColorEnhance","React","style","_sstyled","insert","BadgeFHRoot","render","_ref","asProps","_ref2","SHighlightedBadge","styles","use","resolveColor","bg","undefined","createElement","cn","_assignProps","_defineProperty","BadgeFH"],"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":";;;AAAA,OAAOA,KAAK,MAA6B,gBAAgB;AACzD,SAASC,eAAe,EAAEC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAkB1B,MAAMC,WAAW,SAASR,SAAS,CAAgE;EAQjGS,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAOXf,KAAK;IANjB,MAAM;MAAEgB,MAAM;MAAEC,GAAG;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACL,OAAO;IAElD,MAAMM,EAAE,GAAGF,GAAG,KAAK,SAAS,GAAGC,YAAY,CAAC,cAAc,CAAC,GAAGE,SAAS;IAEvE,OAAAN,KAAA,GAAOV,OAAO,CAACY,MAAM,CAAC,eACpBV,KAAA,CAAAe,aAAA,CAACN,iBAAiB,EAAAD,KAAA,CAAAQ,EAAA;MAAA,GAAAC,YAAA;QAAA,UAERJ;MAAE,GAAAP,IAAA;IAAA,EACX,CAAC;EAEN;AACF;AAACY,eAAA,CArBKd,WAAW,iBACM,SAAS;AAAAc,eAAA,CAD1Bd,WAAW,WAEAH,KAAK;AAAAiB,eAAA,CAFhBd,WAAW,aAGE,CAACL,mBAAmB,CAAC,CAAC,CAAC;AAAAmB,eAAA,CAHpCd,WAAW,kBAIqB;EAClCO,GAAG,EAAE;AACP,CAAC;AAiBH,OAAO,MAAMQ,OAAO,GAAGxB,eAAe,CAAuBS,WAAW,CAAC","ignoreList":[]}
+{"version":3,"file":"Badge.js","names":["Badge","createComponent","Component","Root","sstyled","resolveColorEnhance","React","style","_sstyled","insert","BadgeFHRoot","render","_ref","asProps","_ref2","SHighlightedBadge","styles","use","resolveColor","bg","undefined","createElement","cn","_assignProps","_defineProperty","BadgeFH"],"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":";;;AAAA,OAAOA,KAAK,MAA6B,gBAAgB;AAEzD,SAASC,eAAe,EAAEC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAoB1B,MAAMC,WAAW,SAASR,SAAS,CAOjC;EAQAS,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAOXf,KAAK;IANjB,MAAM;MAAEgB,MAAM;MAAEC,GAAG;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACL,OAAO;IAElD,MAAMM,EAAE,GAAGF,GAAG,KAAK,SAAS,GAAGC,YAAY,CAAC,cAAc,CAAC,GAAGE,SAAS;IAEvE,OAAAN,KAAA,GAAOV,OAAO,CAACY,MAAM,CAAC,eACpBV,KAAA,CAAAe,aAAA,CAACN,iBAAiB,EAAAD,KAAA,CAAAQ,EAAA;MAAA,GAAAC,YAAA;QAAA,UAERJ;MAAE,GAAAP,IAAA;IAAA,EACX,CAAC;EAEN;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJAY,eAAA,CA9BMd,WAAW,iBAQM,SAAS;AAAAc,eAAA,CAR1Bd,WAAW,WASAH,KAAK;AAAAiB,eAAA,CAThBd,WAAW,aAUE,CAACL,mBAAmB,CAAC,CAAC,CAAC;AAAAmB,eAAA,CAVpCd,WAAW,kBAWO;EACpBO,GAAG,EAAE;AACP,CAAC;AAsBH,OAAO,MAAMQ,OAAO,GAAGxB,eAAe,CAGpCS,WAAW,CAAC","ignoreList":[]}

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

@@ -7,19 +7,27 @@ import { createComponent, Root, sstyled, Component } from '@semcore/core';
 import SummaryAI from '@semcore/icon/SummaryAI/m';
 import React from 'react';
 /*!__reshadow-styles__:"./button.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_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__*/_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_"
 });
 import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
+
+/*
+ * `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 Component {
   constructor(...args) {
     super(...args);
@@ -82,6 +90,12 @@ function HighlightAddon(props) {
     "count": animatedSparkleCount
   }))));
 }
+
+/**
+ * Button FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#button|Docs}
+ */
 export const ButtonFH = createComponent(ButtonFHRoot, {
   Addon: HighlightAddon,
   Text: Button.Text