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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","Component","createComponent","Root","sstyled","React","style","_sstyled","insert","AnimatedSparkles","CheckboxFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","CheckboxFH","Value","Text"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { NSCheckbox } from '@semcore/checkbox';\nimport Checkbox from '@semcore/checkbox';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './checkbox.shadow.css';\nimport type { HighlightedCheckboxComponent } from './Checkbox.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass CheckboxFHRoot extends Component<NSCheckbox.Props> {\n  static displayName = 'CheckboxFH';\n  static style = style;\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: () => {\n        setTimeout(() => {\n          this.forceUpdate();\n        });\n      },\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    const { size } = this.asProps;\n    const checked = this.inputRef.current?.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  render() {\n    const SHighlightedCheckbox = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedCheckbox render={Checkbox}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <CheckboxFH.Value />\n                <CheckboxFH.Text />\n              </>\n            )}\n      </SHighlightedCheckbox>,\n    );\n  }\n}\n\nexport const CheckboxFH = createComponent(CheckboxFHRoot, {\n  Text: Checkbox.Text,\n  Value: Checkbox.Value,\n  AnimatedSparkles,\n}) as HighlightedCheckboxComponent;\n"],"mappings":";;;AACA,OAAOA,QAAQ,MAAM,mBAAmB;AACxC,SAASC,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,cAAc,SAAST,SAAS,CAAmB;EAAAU,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAI5CR,KAAK,CAACS,SAAS,CAAmB,CAAC;EAAA;EAE9CC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACC,QAAQ;MAClBC,QAAQ,EAAEA,CAAA,KAAM;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC,CAAC;QACpB,CAAC,CAAC;MACJ;IACF,CAAC;EACH;EAEAC,wBAAwBA,CAAA,EAAG;IACzB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMC,OAAO,GAAG,IAAI,CAACP,QAAQ,CAACQ,OAAO,EAAED,OAAO;IAE9C,OAAO;MACLE,IAAI,EAAEF,OAAO;MACbG,GAAG,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCM,IAAI,EAAEN,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EAEAO,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAP,OAAA;MAAAQ,KAAA;IACP,MAAMC,oBAAoB,GAIMhC,QAAQ;IAHxC,MAAM;MAAEiC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACb,OAAO;IAEhE,OAAAQ,KAAA,GAAO3B,OAAO,CAAC6B,MAAM,CAAC,eACpB5B,KAAA,CAAAgC,aAAA,CAACL,oBAAoB,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA,KAAAT,IAAA;IAAA,IAClBM,WAAW,gBACR/B,KAAA,CAAAgC,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAO,EAAA,gBAAE,CAAC,gBAEVjC,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAmC,QAAA,qBACEnC,KAAA,CAAAgC,aAAA,CAACI,UAAU,CAACC,KAAK,MAAE,CAAC,eACpBrC,KAAA,CAAAgC,aAAA,CAACI,UAAU,CAACE,IAAI,MAAE,CAClB,CAEY,CAAC;EAE3B;AACF;AAAC9B,eAAA,CA7CKH,cAAc,iBACG,YAAY;AAAAG,eAAA,CAD7BH,cAAc,WAEHJ,KAAK;AA6CtB,OAAO,MAAMmC,UAAU,GAAGvC,eAAe,CAACQ,cAAc,EAAE;EACxDiC,IAAI,EAAE3C,QAAQ,CAAC2C,IAAI;EACnBD,KAAK,EAAE1C,QAAQ,CAAC0C,KAAK;EACrBjC;AACF,CAAC,CAAiC","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["Checkbox","Component","createComponent","Root","sstyled","React","style","_sstyled","insert","AnimatedSparkles","CheckboxFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","CheckboxFH","Value","Text"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { NSCheckbox } from '@semcore/checkbox';\nimport Checkbox from '@semcore/checkbox';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './checkbox.shadow.css';\nimport type { HighlightedCheckboxComponent } from './Checkbox.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass CheckboxFHRoot extends Component<NSCheckbox.Props> {\n  static displayName = 'CheckboxFH';\n  static style = style;\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: () => {\n        setTimeout(() => {\n          this.forceUpdate();\n        });\n      },\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    const { size } = this.asProps;\n    const checked = this.inputRef.current?.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  render() {\n    const SHighlightedCheckbox = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedCheckbox render={Checkbox}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <CheckboxFH.Value />\n                <CheckboxFH.Text />\n              </>\n            )}\n      </SHighlightedCheckbox>,\n    );\n  }\n}\n\n/**\n * Checkbox FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#checkbox|Docs}\n */\nexport const CheckboxFH = createComponent<\n  HighlightedCheckboxComponent,\n typeof CheckboxFHRoot\n>(CheckboxFHRoot, {\n  Text: Checkbox.Text,\n  Value: Checkbox.Value,\n  AnimatedSparkles,\n});\n"],"mappings":";;;AACA,OAAOA,QAAQ,MAAM,mBAAmB;AACxC,SAASC,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,cAAc,SAAST,SAAS,CAAmB;EAAAU,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAI5CR,KAAK,CAACS,SAAS,CAAmB,CAAC;EAAA;EAE9CC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACC,QAAQ;MAClBC,QAAQ,EAAEA,CAAA,KAAM;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC,CAAC;QACpB,CAAC,CAAC;MACJ;IACF,CAAC;EACH;EAEAC,wBAAwBA,CAAA,EAAG;IACzB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMC,OAAO,GAAG,IAAI,CAACP,QAAQ,CAACQ,OAAO,EAAED,OAAO;IAE9C,OAAO;MACLE,IAAI,EAAEF,OAAO;MACbG,GAAG,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCM,IAAI,EAAEN,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EAEAO,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAP,OAAA;MAAAQ,KAAA;IACP,MAAMC,oBAAoB,GAIMhC,QAAQ;IAHxC,MAAM;MAAEiC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACb,OAAO;IAEhE,OAAAQ,KAAA,GAAO3B,OAAO,CAAC6B,MAAM,CAAC,eACpB5B,KAAA,CAAAgC,aAAA,CAACL,oBAAoB,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA,KAAAT,IAAA;IAAA,IAClBM,WAAW,gBACR/B,KAAA,CAAAgC,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAO,EAAA,gBAAE,CAAC,gBAEVjC,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAmC,QAAA,qBACEnC,KAAA,CAAAgC,aAAA,CAACI,UAAU,CAACC,KAAK,MAAE,CAAC,eACpBrC,KAAA,CAAAgC,aAAA,CAACI,UAAU,CAACE,IAAI,MAAE,CAClB,CAEY,CAAC;EAE3B;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJA9B,eAAA,CA/CMH,cAAc,iBACG,YAAY;AAAAG,eAAA,CAD7BH,cAAc,WAEHJ,KAAK;AAkDtB,OAAO,MAAMmC,UAAU,GAAGvC,eAAe,CAGvCQ,cAAc,EAAE;EAChBiC,IAAI,EAAE3C,QAAQ,CAAC2C,IAAI;EACnBD,KAAK,EAAE1C,QAAQ,CAAC0C,KAAK;EACrBjC;AACF,CAAC,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Component","createComponent","Root","sstyled","SummaryAI","Input","React","style","_sstyled","insert","InputFHRoot","render","_ref","asProps","_ref3","SHighlightedInput","styles","createElement","cn","_assignProps","_defineProperty","HighlightAddon","props","_ref2","arguments[0]","Children","children","hasChildren","Addon","_assignProps2","color","InputFH","Value"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Input from '@semcore/input';\nimport React from 'react';\n\nimport style from './input.shadow.css';\n\nclass InputFHRoot extends Component {\n  static displayName = 'InputFH';\n  static style = style;\n\n  render() {\n    const SHighlightedInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SHighlightedInput render={Input} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n  return (\n    <Root render={Input.Addon}>\n      {hasChildren ? (<Children />) : (<SummaryAI color='--intergalactic-icon-primary-feature-highlight' />)}\n    </Root>\n  );\n}\n\nexport const InputFH = createComponent(InputFHRoot, {\n  Addon: HighlightAddon,\n  Value: Input.Value,\n}) as typeof Input;\n"],"mappings":";;;;AACA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,WAAW,SAASV,SAAS,CAAC;EAIlCW,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAEMV,KAAK;IADlC,OAAAS,KAAA,GAAOX,OAAO,CAAC,IAAI,CAACU,OAAO,CAACG,MAAM,CAAC,eACjCV,KAAA,CAAAW,aAAA,CAACF,iBAAiB,EAAAD,KAAA,CAAAI,EAAA;MAAA,GAAAC,YAAA,KAAAP,IAAA;IAAA,EAAiB,CAAC;EAExC;AACF;AAACQ,eAAA,CAVKV,WAAW,iBACM,SAAS;AAAAU,eAAA,CAD1BV,WAAW,WAEAH,KAAK;AAUtB,SAASc,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EACjD,oBACEhB,KAAA,CAAAW,aAAA,CAAcZ,KAAK,CAACuB,KAAK,EAAAC,aAAA,KAAAN,KAAA,GACtBI,WAAW,gBAAIrB,KAAA,CAAAW,aAAA,CAACQ,QAAQ,MAAE,CAAC,gBAAKnB,KAAA,CAAAW,aAAA,CAACb,SAAS;IAAC0B,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;AAEA,OAAO,MAAMC,OAAO,GAAG9B,eAAe,CAACS,WAAW,EAAE;EAClDkB,KAAK,EAAEP,cAAc;EACrBW,KAAK,EAAE3B,KAAK,CAAC2B;AACf,CAAC,CAAiB","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["Component","createComponent","Root","sstyled","SummaryAI","Input","React","style","_sstyled","insert","InputFHRoot","render","_ref","asProps","_ref3","SHighlightedInput","styles","createElement","cn","_assignProps","_defineProperty","HighlightAddon","props","_ref2","arguments[0]","Children","children","hasChildren","Addon","_assignProps2","color","InputFH","Value"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Input from '@semcore/input';\nimport React from 'react';\n\nimport style from './input.shadow.css';\n\nclass InputFHRoot extends Component {\n  static displayName = 'InputFH';\n  static style = style;\n\n  render() {\n    const SHighlightedInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SHighlightedInput render={Input} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n  return (\n    <Root render={Input.Addon}>\n      {hasChildren ? (<Children />) : (<SummaryAI color='--intergalactic-icon-primary-feature-highlight' />)}\n    </Root>\n  );\n}\n\n/**\n * Input FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#input|Docs}\n */\nexport const InputFH = createComponent<\n  typeof Input,\n  typeof InputFHRoot\n>(InputFHRoot, {\n  Addon: HighlightAddon,\n  Value: Input.Value,\n});\n"],"mappings":";;;;AACA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,WAAW,SAASV,SAAS,CAAC;EAIlCW,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAEMV,KAAK;IADlC,OAAAS,KAAA,GAAOX,OAAO,CAAC,IAAI,CAACU,OAAO,CAACG,MAAM,CAAC,eACjCV,KAAA,CAAAW,aAAA,CAACF,iBAAiB,EAAAD,KAAA,CAAAI,EAAA;MAAA,GAAAC,YAAA,KAAAP,IAAA;IAAA,EAAiB,CAAC;EAExC;AACF;AAACQ,eAAA,CAVKV,WAAW,iBACM,SAAS;AAAAU,eAAA,CAD1BV,WAAW,WAEAH,KAAK;AAUtB,SAASc,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EACjD,oBACEhB,KAAA,CAAAW,aAAA,CAAcZ,KAAK,CAACuB,KAAK,EAAAC,aAAA,KAAAN,KAAA,GACtBI,WAAW,gBAAIrB,KAAA,CAAAW,aAAA,CAACQ,QAAQ,MAAE,CAAC,gBAAKnB,KAAA,CAAAW,aAAA,CAACb,SAAS;IAAC0B,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,GAAG9B,eAAe,CAGpCS,WAAW,EAAE;EACbkB,KAAK,EAAEP,cAAc;EACrBW,KAAK,EAAE3B,KAAK,CAAC2B;AACf,CAAC,CAAC","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pills.js","names":["createComponent","Root","Component","sstyled","SummaryAI","Pills","React","style","_sstyled","insert","AnimatedSparkles","PillsFHRoot","render","_ref","asProps","createElement","_assignProps","_defineProperty","HighlightedItemRoot","constructor","args","clicked","handleClick","e","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref4","SHighlightedPill","Item","styles","cn","_assignProps2","bind","HighlightedItemAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","children","Addon","_assignProps3","undefined","Fragment","color","show","count","PillsFH","HighlightedItem","Text"],"sources":["../../../../src/components/pills/Pills.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Pills from '@semcore/pills';\nimport React from 'react';\n\nimport style from './pills.shadow.css';\nimport type { HighlightedItemAddonProps, HighlightedPillComponent } from './Pills.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass PillsFHRoot extends Component {\n  static displayName = 'PillsFH';\n  static style = style;\n\n  render() {\n    return (<Root render={Pills} />);\n  }\n}\n\nclass HighlightedItemRoot extends Component {\n  static displayName = 'HighlightedItem';\n  static style = style;\n\n  state = {\n    clicked: false,\n  };\n\n  handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const { onClick } = this.asProps;\n\n    onClick?.(e);\n    this.setState({ clicked: false });\n    setTimeout(() => {\n      this.setState({ clicked: true });\n    });\n  }\n\n  getAddonProps() {\n    return {\n      clicked: this.state.clicked,\n    };\n  }\n\n  render() {\n    const SHighlightedPill = Root;\n\n    return sstyled(this.asProps.styles)(<SHighlightedPill render={Pills.Item} onClick={this.handleClick.bind(this)} />);\n  }\n}\n\nfunction HighlightedItemAddon(props: HighlightedItemAddonProps & { clicked: boolean } & IRootComponentProps) {\n  const { clicked, animatedSparkleCount, Children, children } = props;\n  return (\n    <Root render={Pills.Item.Addon}>\n      {children !== undefined\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Root>\n  );\n}\n\nexport const PillsFH = createComponent(PillsFHRoot, {\n  Item: Pills.Item,\n  HighlightedItem: createComponent(HighlightedItemRoot, { Text: Pills.Item.Text, Addon: HighlightedItemAddon }),\n}) as unknown as HighlightedPillComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Pills.js","names":["createComponent","Root","Component","sstyled","SummaryAI","Pills","React","style","_sstyled","insert","AnimatedSparkles","PillsFHRoot","render","_ref","asProps","createElement","_assignProps","_defineProperty","HighlightedItemRoot","constructor","args","clicked","handleClick","e","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref4","SHighlightedPill","Item","styles","cn","_assignProps2","bind","HighlightedItemAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","children","Addon","_assignProps3","undefined","Fragment","color","show","count","HighlightedItem","Text","PillsFH"],"sources":["../../../../src/components/pills/Pills.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Pills from '@semcore/pills';\nimport React from 'react';\n\nimport style from './pills.shadow.css';\nimport type { HighlightedItemAddonProps, HighlightedPillComponent, HighlightedPillItemComponent } from './Pills.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass PillsFHRoot extends Component {\n  static displayName = 'PillsFH';\n  static style = style;\n\n  render() {\n    return (<Root render={Pills} />);\n  }\n}\n\nclass HighlightedItemRoot extends Component {\n  static displayName = 'HighlightedItem';\n  static style = style;\n\n  state = {\n    clicked: false,\n  };\n\n  handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const { onClick } = this.asProps;\n\n    onClick?.(e);\n    this.setState({ clicked: false });\n    setTimeout(() => {\n      this.setState({ clicked: true });\n    });\n  }\n\n  getAddonProps() {\n    return {\n      clicked: this.state.clicked,\n    };\n  }\n\n  render() {\n    const SHighlightedPill = Root;\n\n    return sstyled(this.asProps.styles)(<SHighlightedPill render={Pills.Item} onClick={this.handleClick.bind(this)} />);\n  }\n}\n\nfunction HighlightedItemAddon(props: HighlightedItemAddonProps & { clicked: boolean } & IRootComponentProps) {\n  const { clicked, animatedSparkleCount, Children, children } = props;\n  return (\n    <Root render={Pills.Item.Addon}>\n      {children !== undefined\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </Root>\n  );\n}\n\nconst HighlightedItem = createComponent<\n  HighlightedPillItemComponent,\n  typeof HighlightedItemRoot\n>(HighlightedItemRoot, {\n  Text: Pills.Item.Text,\n  Addon: HighlightedItemAddon,\n});\n\n/**\n * Pills FeatureHighlight\n *\n * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#pills|Docs}\n */\nexport const PillsFH = createComponent<\n  HighlightedPillComponent,\n  typeof PillsFHRoot\n>(PillsFHRoot, {\n  Item: Pills.Item,\n  HighlightedItem,\n});\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -5,11 +5,11 @@ import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@s
 import Radio, { RadioGroup } from '@semcore/radio';
 import React from 'react';
 /*!__reshadow-styles__:"./radio.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_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__*/_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_"
 });
 import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
 class RadioFHRoot extends Component {
@@ -64,6 +64,12 @@ class RadioFHRoot extends Component {
     }), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioFH.Value, null), /*#__PURE__*/React.createElement(RadioFH.Text, null)));
   }
 }
+
+/**
+ * Radio FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#radio|Docs}
+ */
 _defineProperty(RadioFHRoot, "displayName", 'RadioFH');
 _defineProperty(RadioFHRoot, "style", style);
 // @ts-ignore

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["Component","createComponent","Root","sstyled","CONTEXT_COMPONENT","Radio","RadioGroup","React","style","_sstyled","insert","AnimatedSparkles","RadioFHRoot","constructor","args","_defineProperty","createRef","checked","setState","setTimeout","inputRef","current","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","RadioFH","Value","Text"],"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,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,iBAAiB,QAAQ,eAAe;AAE5F,OAAOC,KAAK,IAAIC,UAAU,QAAQ,gBAAgB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,WAAW,SAASZ,SAAS,CAAgB;EAAAa,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAMtCR,KAAK,CAACS,SAAS,CAAmB,CAAC;IAAAD,eAAA,gBAEtC;MACNE,OAAO,EAAE;IACX,CAAC;IAAAF,eAAA,qBAsBY,MAAM;MACjB,IAAI,CAACG,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,GAIMjC,KAAK;IAHlC,MAAM;MAAEkC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACN,OAAO;IAEhE,OAAAC,KAAA,GAAOlC,OAAO,CAACoC,MAAM,CAAC,eACpBhC,KAAA,CAAAoC,aAAA,CAACL,iBAAiB,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA,KAAAV,IAAA;IAAA,IACfO,WAAW,gBACRnC,KAAA,CAAAoC,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAO,EAAA,gBAAE,CAAC,gBAEVrC,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAuC,QAAA,qBACEvC,KAAA,CAAAoC,aAAA,CAACI,OAAO,CAACC,KAAK,MAAE,CAAC,eACjBzC,KAAA,CAAAoC,aAAA,CAACI,OAAO,CAACE,IAAI,MAAE,CACf,CAES,CAAC;EAExB;AACF;AAAClC,eAAA,CAxDKH,WAAW,iBACM,SAAS;AAAAG,eAAA,CAD1BH,WAAW,WAEAJ,KAAK;AACpB;AAAAO,eAAA,CAHIH,WAAW,iBAIMN,UAAU,CAACF,iBAAiB,CAAC;AAsDpD,OAAO,MAAM2C,OAAO,GAAG9C,eAAe,CAACW,WAAW,EAAE;EAClDqC,IAAI,EAAE5C,KAAK,CAAC4C,IAAI;EAChBD,KAAK,EAAE3C,KAAK,CAAC2C,KAAK;EAClBrC;AACF,CAAC,CAA8B","ignoreList":[]}
+{"version":3,"file":"Radio.js","names":["Component","createComponent","Root","sstyled","CONTEXT_COMPONENT","Radio","RadioGroup","React","style","_sstyled","insert","AnimatedSparkles","RadioFHRoot","constructor","args","_defineProperty","createRef","checked","setState","setTimeout","inputRef","current","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","RadioFH","Value","Text"],"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":";;;AAAA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,iBAAiB,QAAQ,eAAe;AAE5F,OAAOC,KAAK,IAAIC,UAAU,QAAQ,gBAAgB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,WAAW,SAASZ,SAAS,CAAgB;EAAAa,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAMtCR,KAAK,CAACS,SAAS,CAAmB,CAAC;IAAAD,eAAA,gBAEtC;MACNE,OAAO,EAAE;IACX,CAAC;IAAAF,eAAA,qBAsBY,MAAM;MACjB,IAAI,CAACG,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,GAIMjC,KAAK;IAHlC,MAAM;MAAEkC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACN,OAAO;IAEhE,OAAAC,KAAA,GAAOlC,OAAO,CAACoC,MAAM,CAAC,eACpBhC,KAAA,CAAAoC,aAAA,CAACL,iBAAiB,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA,KAAAV,IAAA;IAAA,IACfO,WAAW,gBACRnC,KAAA,CAAAoC,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAO,EAAA,gBAAE,CAAC,gBAEVrC,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAuC,QAAA,qBACEvC,KAAA,CAAAoC,aAAA,CAACI,OAAO,CAACC,KAAK,MAAE,CAAC,eACjBzC,KAAA,CAAAoC,aAAA,CAACI,OAAO,CAACE,IAAI,MAAE,CACf,CAES,CAAC;EAExB;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJAlC,eAAA,CA1DMH,WAAW,iBACM,SAAS;AAAAG,eAAA,CAD1BH,WAAW,WAEAJ,KAAK;AACpB;AAAAO,eAAA,CAHIH,WAAW,iBAIMN,UAAU,CAACF,iBAAiB,CAAC;AA2DpD,OAAO,MAAM2C,OAAO,GAAG9C,eAAe,CAGpCW,WAAW,EAAE;EACbqC,IAAI,EAAE5C,KAAK,CAAC4C,IAAI;EAChBD,KAAK,EAAE3C,KAAK,CAAC2C,KAAK;EAClBrC;AACF,CAAC,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["createComponent","Root","Component","Select","React","ButtonTriggerFH","SelectFHRoot","render","_ref","asProps","createElement","_assignProps","_defineProperty","Trigger","props","_ref2","arguments[0]","Children","children","hasChildren","_assignProps2","Fragment","SelectFH","Addon","Text","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,SAASA,eAAe,EAAEC,IAAI,EAAEC,SAAS,QAAQ,eAAe;AAChE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,qDAAqD;AAErF,MAAMC,YAAY,SAASJ,SAAS,CAAC;EAGnCK,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;IACP,oBACEL,KAAA,CAAAM,aAAA,CAAcP,MAAM,EAAAQ,YAAA,KAAAH,IAAA,CAAG,CAAC;EAE5B;AACF;AAACI,eAAA,CARKN,YAAY,iBACK,UAAU;AASjC,SAASO,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EAEjD,oBACEV,KAAA,CAAAM,aAAA,CAAcP,MAAM,CAACU,OAAO,EAAAO,aAAA;IAAA,OAAOf;EAAe,GAAAU,KAAA,GAC/CI,WAAW,gBACRf,KAAA,CAAAM,aAAA,CAACO,QAAQ,MAAE,CAAC,gBAEVb,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAiB,QAAA,qBACEjB,KAAA,CAAAM,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1BnB,KAAA,CAAAM,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;AAEA,OAAO,MAAMF,QAAQ,GAAGtB,eAAe,CAACM,YAAY,EAAE;EACpDO,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAEnB,eAAe,CAACmB,IAAI;IAC1BD,KAAK,EAAElB,eAAe,CAACkB;EACzB,CAAC,CAAC;EACFE,MAAM,EAAEtB,MAAM,CAACsB,MAAM;EACrBC,IAAI,EAAEvB,MAAM,CAACuB,IAAI;EACjBC,MAAM,EAAExB,MAAM,CAACwB,MAAM;EACrBC,IAAI,EAAEzB,MAAM,CAACyB;AACf,CAAC,CAA6B","ignoreList":[]}
+{"version":3,"file":"Select.js","names":["createComponent","Root","Component","Select","React","ButtonTriggerFH","SelectFHRoot","render","_ref","asProps","createElement","_assignProps","_defineProperty","Trigger","props","_ref2","arguments[0]","Children","children","hasChildren","_assignProps2","Fragment","SelectFH","Addon","Text","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,SAASA,eAAe,EAAEC,IAAI,EAAEC,SAAS,QAAQ,eAAe;AAChE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,qDAAqD;AAErF,MAAMC,YAAY,SAASJ,SAAS,CAAC;EAGnCK,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;IACP,oBACEL,KAAA,CAAAM,aAAA,CAAcP,MAAM,EAAAQ,YAAA,KAAAH,IAAA,CAAG,CAAC;EAE5B;AACF;AAACI,eAAA,CARKN,YAAY,iBACK,UAAU;AASjC,SAASO,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EAEjD,oBACEV,KAAA,CAAAM,aAAA,CAAcP,MAAM,CAACU,OAAO,EAAAO,aAAA;IAAA,OAAOf;EAAe,GAAAU,KAAA,GAC/CI,WAAW,gBACRf,KAAA,CAAAM,aAAA,CAACO,QAAQ,MAAE,CAAC,gBAEVb,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAiB,QAAA,qBACEjB,KAAA,CAAAM,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1BnB,KAAA,CAAAM,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMF,QAAuB,GAAGtB,eAAe,CAGpDM,YAAY,EAAE;EACdO,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAEnB,eAAe,CAACmB,IAAI;IAC1BD,KAAK,EAAElB,eAAe,CAACkB;EACzB,CAAC,CAAC;EACFE,MAAM,EAAEtB,MAAM,CAACsB,MAAM;EACrBC,IAAI,EAAEvB,MAAM,CAACuB,IAAI;EACjBC,MAAM,EAAExB,MAAM,CAACwB,MAAM;EACrBC,IAAI,EAAEzB,MAAM,CAACyB;AACf,CAAC,CAAC","ignoreList":[]}

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

@@ -6,12 +6,12 @@ import { Component, createComponent, Root, sstyled } from '@semcore/core';
 import Switch from '@semcore/switch';
 import React from 'react';
 /*!__reshadow-styles__:"./switch.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_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__*/_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_"
 });
 import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
 class SwitchFHRoot extends Component {
@@ -64,6 +64,12 @@ function Value(props) {
     }, _ref2)
   }));
 }
+
+/**
+ * Switch FeatureHighlight
+ *
+ * {@link https://developer.semrush.com/intergalactic/patterns/feature-highlight/feature-highlight#switch|Docs}
+ */
 export const SwitchFH = createComponent(SwitchFHRoot, {
   Addon: Switch.Addon,
   Value: Value,

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Component","createComponent","Root","sstyled","Switch","React","style","_sstyled","insert","AnimatedSparkles","SwitchFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","left","show","curve","undefined","render","_ref","_ref3","SInput","styles","createElement","cn","_assignProps","Value","props","_ref2","arguments[0]","_ref4","SToggle","_assignProps2","SwitchFH","Addon"],"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,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAEzE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,YAAY,SAASV,SAAS,CAAc;EAAAW,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAIrCR,KAAK,CAACS,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,GAEM7B,MAAM;IADxB,OAAA4B,KAAA,GAAO7B,OAAO,CAAC,IAAI,CAACoB,OAAO,CAACW,MAAM,CAAC,eACjC7B,KAAA,CAAA8B,aAAA,CAACF,MAAM,EAAAD,KAAA,CAAAI,EAAA;MAAA,GAAAC,YAAA,KAAAN,IAAA;IAAA,EAAkB,CAAC;EAE9B;AACF;AAAClB,eAAA,CArCKH,YAAY,iBACK,UAAU;AAAAG,eAAA,CAD3BH,YAAY,WAEDJ,KAAK;AAqCtB,SAASgC,KAAKA,CAACC,KAAqD,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACpE,MAAMC,OAAO,GAEiCvC,MAAM,CAACkC,KAAK;EAA1D,OAAAI,KAAA,GAAOvC,OAAO,CAACoC,KAAK,CAACL,MAAM,CAAC,eAAC7B,KAAA,CAAA8B,aAAA,CAACQ,OAAO,EAAAD,KAAA,CAAAN,EAAA;IAAA,GAAAQ,aAAA;MAAA,YAAiCL,KAAK,CAACrB;IAAQ,GAAAsB,KAAA;EAAA,EAAG,CAAC;AAC1F;AAEA,OAAO,MAAMK,QAAQ,GAAG5C,eAAe,CAACS,YAAY,EAAE;EACpDoC,KAAK,EAAE1C,MAAM,CAAC0C,KAAK;EACnBR,KAAK,EAAEA,KAAK;EACZ7B;AACF,CAAC,CAA+B","ignoreList":[]}
+{"version":3,"file":"Switch.js","names":["Component","createComponent","Root","sstyled","Switch","React","style","_sstyled","insert","AnimatedSparkles","SwitchFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","left","show","curve","undefined","render","_ref","_ref3","SInput","styles","createElement","cn","_assignProps","Value","props","_ref2","arguments[0]","_ref4","SToggle","_assignProps2","SwitchFH","Addon"],"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,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAEzE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,YAAY,SAASV,SAAS,CAAiB;EAAAW,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAIxCR,KAAK,CAACS,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,GAEM7B,MAAM;IADxB,OAAA4B,KAAA,GAAO7B,OAAO,CAAC,IAAI,CAACoB,OAAO,CAACW,MAAM,CAAC,eACjC7B,KAAA,CAAA8B,aAAA,CAACF,MAAM,EAAAD,KAAA,CAAAI,EAAA;MAAA,GAAAC,YAAA,KAAAN,IAAA;IAAA,EAAkB,CAAC;EAE9B;AACF;AAAClB,eAAA,CArCKH,YAAY,iBACK,UAAU;AAAAG,eAAA,CAD3BH,YAAY,WAEDJ,KAAK;AAqCtB,SAASgC,KAAKA,CAACC,KAAqD,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACpE,MAAMC,OAAO,GAEiCvC,MAAM,CAACkC,KAAK;EAA1D,OAAAI,KAAA,GAAOvC,OAAO,CAACoC,KAAK,CAACL,MAAM,CAAC,eAAC7B,KAAA,CAAA8B,aAAA,CAACQ,OAAO,EAAAD,KAAA,CAAAN,EAAA;IAAA,GAAAQ,aAAA;MAAA,YAAiCL,KAAK,CAACrB;IAAQ,GAAAsB,KAAA;EAAA,EAAG,CAAC;AAC1F;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,QAAQ,GAAG5C,eAAe,CAGrCS,YAAY,EAAE;EACdoC,KAAK,EAAE1C,MAAM,CAAC0C,KAAK;EACnBR,KAAK,EAAEA,KAAK;EACZ7B;AACF,CAAC,CAAC","ignoreList":[]}